Contextually disable previous and next buttons

src/screens/Player/components/MediaControls.tsx

@@ -2,7 +2,7 @@ import React, { useState, useCallback } from 'react';
 import TrackPlayer, { Event, State, usePlaybackState, useTrackPlayerEvents } from 'react-native-track-player';
 import { TouchableOpacity, useColorScheme } from 'react-native';
 import styled from 'styled-components/native';
-import { useHasQueue } from 'utility/useQueue';
+import { useHasNextQueue, useHasPreviousQueue } from 'utility/useQueue';
 import ForwardIcon from 'assets/forwards.svg';
 import BackwardIcon from 'assets/backwards.svg';
 import PlayIcon from 'assets/play.svg';
@@ -15,10 +15,10 @@ import Casting from './Casting';
 const BUTTON_SIZE = 40;
 const BUTTON_SIZE_SMALL = 25;
 
-const pause = () => TrackPlayer.pause();
-const play = () => TrackPlayer.play();
-const next = () => TrackPlayer.skipToNext();
-const previous = () => TrackPlayer.skipToPrevious();
+const pause = TrackPlayer.pause;
+const play = TrackPlayer.play;
+const next = TrackPlayer.skipToNext;
+const previous = TrackPlayer.skipToPrevious;
 
 const Container = styled.View`
     align-items: center;
@@ -62,7 +62,7 @@ export default function MediaControls() {
 }
 
 export function PreviousButton({ fill }: { fill: string }) {
-    const hasQueue = useHasQueue();
+    const hasQueue = useHasPreviousQueue();
 
     return (
         <TouchableOpacity onPress={previous} disabled={!hasQueue} style={{ opacity: hasQueue ? 1 : 0.5 }}>
@@ -72,7 +72,7 @@ export function PreviousButton({ fill }: { fill: string }) {
 }
 
 export function NextButton({ fill }: { fill: string }) {
-    const hasQueue = useHasQueue();
+    const hasQueue = useHasNextQueue();
 
     return (
         <TouchableOpacity onPress={next} disabled={!hasQueue} style={{ opacity: hasQueue ? 1 : 0.5 }}>

src/utility/useQueue.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import TrackPlayer, { Event, Track, useTrackPlayerEvents } from 'react-native-track-player';
 import { useOnTrackAdded } from './AddedTrackEvents';
+import useCurrentTrack from './useCurrentTrack';
 
 /**
  * This hook retrieves the current playing track from TrackPlayer
@@ -24,7 +25,19 @@ export default function useQueue(): Track[] {
 /**
  * Shorthand helper to determine whether a queue exists
  */
-export function useHasQueue(): boolean {
+export function useHasNextQueue(): boolean {
+    const { index } = useCurrentTrack();
     const queue = useQueue();
-    return !!queue && queue.length > 1;
+
+    return queue?.length > 1 && (index || 0) < (queue.length - 1);
+}
+
+/**
+ * Shorthand helper to determine whether a queue exists
+ */
+export function useHasPreviousQueue(): boolean {
+    const { index } = useCurrentTrack();
+    const queue = useQueue();
+
+    return queue?.length > 1 && (index || 0) > 0;
 }