From f6ecc0bf405af4efa5e174176ff6f1e0ea4a65e9 Mon Sep 17 00:00:00 2001 From: austinried <4966622+austinried@users.noreply.github.com> Date: Wed, 11 Aug 2021 14:46:30 +0900 Subject: [PATCH] fix current idx not being set on toggle shuffle switch to passing params instead of function --- app/components/ListItem.tsx | 30 ++++++++++++++++++------------ app/hooks/trackplayer.ts | 24 ++++++++++++++---------- app/screens/ArtistView.tsx | 6 +++--- app/screens/NowPlayingQueue.tsx | 5 ++--- app/screens/NowPlayingView.tsx | 8 ++++---- app/screens/Search.tsx | 6 +++--- app/screens/SongListView.tsx | 6 +++--- 7 files changed, 47 insertions(+), 38 deletions(-) diff --git a/app/components/ListItem.tsx b/app/components/ListItem.tsx index d4c4be1..a0a3f1d 100644 --- a/app/components/ListItem.tsx +++ b/app/components/ListItem.tsx @@ -1,4 +1,5 @@ import { useStarred } from '@app/hooks/music' +import { useIsPlaying } from '@app/hooks/trackplayer' import { AlbumListItem, Artist, ListableItem, Song } from '@app/models/music' import { selectMusic } from '@app/state/music' import { useStore } from '@app/state/store' @@ -16,15 +17,16 @@ import PressableOpacity from './PressableOpacity' import Star from './Star' const TitleTextSong = React.memo<{ - isPlaying?: () => boolean + contextId?: string + queueId: number title?: string -}>(({ isPlaying, title }) => { - const playing = () => isPlaying && isPlaying() +}>(({ contextId, queueId, title }) => { + const playing = useIsPlaying(contextId, queueId) return ( - - {playing() ? ( + + {playing ? ( @@ -49,13 +51,14 @@ const TitleText = React.memo<{ const ListItem: React.FC<{ item: ListableItem - isPlaying?: () => boolean + contextId?: string + queueId?: number onPress?: () => void showArt?: boolean showStar?: boolean listStyle?: 'big' | 'small' subtitle?: string -}> = ({ item, isPlaying, onPress, showArt, showStar, subtitle, listStyle }) => { +}> = ({ item, contextId, queueId, onPress, showArt, showStar, subtitle, listStyle }) => { const navigation = useNavigation() const starred = useStarred(item.id, item.itemType) @@ -138,6 +141,13 @@ const ListItem: React.FC<{ starItem(item.id, item.itemType, starred) }, [item.id, item.itemType, starItem, starred]) + let title = <> + if (item.itemType === 'song' && queueId !== undefined) { + title = + } else if (item.itemType !== 'song') { + title = + } + return ( @@ -151,11 +161,7 @@ const ListItem: React.FC<{ <> )} - {item.itemType === 'song' ? ( - - ) : ( - - )} + {title} {subtitle ? ( {starred ? ( diff --git a/app/hooks/trackplayer.ts b/app/hooks/trackplayer.ts index 443c22e..6b2fdb2 100644 --- a/app/hooks/trackplayer.ts +++ b/app/hooks/trackplayer.ts @@ -135,6 +135,7 @@ function unshuffleTracks(tracks: TrackExt[], shuffleOrder: number[]): TrackExt[] } export const useToggleShuffle = () => { + const setCurrentTrackIdx = useStore(selectTrackPlayer.setCurrentTrackIdx) const setQueue = useStore(selectTrackPlayer.setQueue) const setShuffleOrder = useStore(selectTrackPlayer.setShuffleOrder) const getShuffleOrder = useCallback(() => useStore.getState().shuffleOrder, []) @@ -176,6 +177,7 @@ export const useToggleShuffle = () => { } setQueue(await getQueue()) + setCurrentTrackIdx(await getCurrentTrack()) setProgress(progress) }) } @@ -243,21 +245,23 @@ export const useSetQueue = () => { }) } -export const useIsPlaying = () => { +export const useIsPlaying = (contextId: string | undefined, track: number) => { const queueContextId = useStore(selectTrackPlayer.queueContextId) const currentTrackIdx = useStore(selectTrackPlayer.currentTrackIdx) const shuffleOrder = useStore(selectTrackPlayer.shuffleOrder) - return (contextId: string | undefined, track: number) => { - if (contextId === undefined) { - return track === currentTrackIdx - } - if (shuffleOrder) { - const shuffledTrack = shuffleOrder.findIndex(i => i === track) - track = shuffledTrack !== undefined ? shuffledTrack : -1 - } - return contextId === queueContextId && track === currentTrackIdx + if (contextId === undefined) { + console.log(currentTrackIdx) + return track === currentTrackIdx } + + if (shuffleOrder) { + console.log('asdf') + const shuffledTrack = shuffleOrder.findIndex(i => i === track) + track = shuffledTrack !== undefined ? shuffledTrack : -1 + } + + return contextId === queueContextId && track === currentTrackIdx } function mapSongToTrack(song: Song, coverArtUri: (coverArt?: string) => string | undefined): TrackExt { diff --git a/app/screens/ArtistView.tsx b/app/screens/ArtistView.tsx index 64f4d73..548d3f5 100644 --- a/app/screens/ArtistView.tsx +++ b/app/screens/ArtistView.tsx @@ -5,7 +5,7 @@ import GradientScrollView from '@app/components/GradientScrollView' import Header from '@app/components/Header' import ListItem from '@app/components/ListItem' import { useArtistInfo } from '@app/hooks/music' -import { useIsPlaying, useSetQueue } from '@app/hooks/trackplayer' +import { useSetQueue } from '@app/hooks/trackplayer' import { Album, Song } from '@app/models/music' import colors from '@app/styles/colors' import font from '@app/styles/font' @@ -45,7 +45,6 @@ const TopSongs = React.memo<{ artistId: string }>(({ songs, name, artistId }) => { const setQueue = useSetQueue() - const isPlaying = useIsPlaying() return ( <> @@ -54,7 +53,8 @@ const TopSongs = React.memo<{ isPlaying(artistId, i)} + contextId={artistId} + queueId={i} showArt={true} subtitle={s.album} onPress={() => setQueue(songs, name, 'artist', artistId, i)} diff --git a/app/screens/NowPlayingQueue.tsx b/app/screens/NowPlayingQueue.tsx index 9a858ba..bcddea7 100644 --- a/app/screens/NowPlayingQueue.tsx +++ b/app/screens/NowPlayingQueue.tsx @@ -1,7 +1,7 @@ import GradientScrollView from '@app/components/GradientScrollView' import ListItem from '@app/components/ListItem' import NowPlayingBar from '@app/components/NowPlayingBar' -import { mapTrackExtToSong, useIsPlaying, useSkipTo } from '@app/hooks/trackplayer' +import { mapTrackExtToSong, useSkipTo } from '@app/hooks/trackplayer' import { useStore } from '@app/state/store' import { selectTrackPlayer } from '@app/state/trackplayer' import React from 'react' @@ -10,7 +10,6 @@ import { StyleSheet, View } from 'react-native' const NowPlayingQueue = React.memo<{}>(() => { const queue = useStore(selectTrackPlayer.queue) const skipTo = useSkipTo() - const isPlaying = useIsPlaying() return ( @@ -20,7 +19,7 @@ const NowPlayingQueue = React.memo<{}>(() => { isPlaying(undefined, i)} + queueId={i} onPress={() => skipTo(i)} showArt={true} subtitle={`${song.artist} • ${song.album}`} diff --git a/app/screens/NowPlayingView.tsx b/app/screens/NowPlayingView.tsx index 3d76a2e..69df085 100644 --- a/app/screens/NowPlayingView.tsx +++ b/app/screens/NowPlayingView.tsx @@ -327,7 +327,7 @@ const PlayerControls = () => { - toggleRepeat()} disabled={disabled}> + toggleRepeat()} disabled={disabled} hitSlop={16}> 1 @@ -346,16 +346,16 @@ const PlayerControls = () => { - toggleShuffle()} disabled={disabled}> + toggleShuffle()} disabled={disabled} hitSlop={16}> - + - navigation.navigate('queue')} disabled={disabled}> + navigation.navigate('queue')} disabled={disabled} hitSlop={16}> diff --git a/app/screens/Search.tsx b/app/screens/Search.tsx index b1541ba..74b79ce 100644 --- a/app/screens/Search.tsx +++ b/app/screens/Search.tsx @@ -3,7 +3,7 @@ import Header from '@app/components/Header' import ListItem from '@app/components/ListItem' import NothingHere from '@app/components/NothingHere' import { useActiveListRefresh2 } from '@app/hooks/server' -import { useIsPlaying, useSetQueue } from '@app/hooks/trackplayer' +import { useSetQueue } from '@app/hooks/trackplayer' import { ListableItem, SearchResults, Song } from '@app/models/music' import { selectMusic } from '@app/state/music' import { useStore } from '@app/state/store' @@ -15,12 +15,12 @@ import { ActivityIndicator, StatusBar, StyleSheet, TextInput, View } from 'react const SongItem = React.memo<{ item: Song }>(({ item }) => { const setQueue = useSetQueue() - const isPlaying = useIsPlaying() return ( isPlaying(item.id, 0)} + contextId={item.id} + queueId={0} showArt={true} showStar={false} onPress={() => setQueue([item], item.title, 'song', item.id, 0)} diff --git a/app/screens/SongListView.tsx b/app/screens/SongListView.tsx index 89fa4a3..32e206c 100644 --- a/app/screens/SongListView.tsx +++ b/app/screens/SongListView.tsx @@ -5,7 +5,7 @@ import ListItem from '@app/components/ListItem' import ListPlayerControls from '@app/components/ListPlayerControls' import NothingHere from '@app/components/NothingHere' import { useAlbumWithSongs, useCoverArtUri, usePlaylistWithSongs } from '@app/hooks/music' -import { useIsPlaying, useSetQueue } from '@app/hooks/trackplayer' +import { useSetQueue } from '@app/hooks/trackplayer' import { AlbumWithSongs, PlaylistWithSongs, Song } from '@app/models/music' import colors from '@app/styles/colors' import font from '@app/styles/font' @@ -28,7 +28,6 @@ const Songs = React.memo<{ itemId: string }>(({ songs, name, type, itemId }) => { const setQueue = useSetQueue() - const isPlaying = useIsPlaying() const _songs = [...songs] let typeName = '' @@ -57,7 +56,8 @@ const Songs = React.memo<{ isPlaying(itemId, i)} + contextId={itemId} + queueId={i} subtitle={s.artist} onPress={() => setQueue(songs, name, type, itemId, i)} showArt={type === 'playlist'}