diff --git a/src/screens/Player/components/MediaControls.tsx b/src/screens/Player/components/MediaControls.tsx index ced4903..7b16a68 100644 --- a/src/screens/Player/components/MediaControls.tsx +++ b/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 ( @@ -72,7 +72,7 @@ export function PreviousButton({ fill }: { fill: string }) { } export function NextButton({ fill }: { fill: string }) { - const hasQueue = useHasQueue(); + const hasQueue = useHasNextQueue(); return ( diff --git a/src/utility/useQueue.ts b/src/utility/useQueue.ts index ba51ac3..7be515f 100644 --- a/src/utility/useQueue.ts +++ b/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; } \ No newline at end of file