diff --git a/src/components/player/TrackInfo/SongMenu.tsx b/src/components/player/TrackInfo/SongMenu.tsx index 41a1015e..9f1fd6de 100644 --- a/src/components/player/TrackInfo/SongMenu.tsx +++ b/src/components/player/TrackInfo/SongMenu.tsx @@ -12,6 +12,7 @@ import useSongOperations from '@hooks/useSongOperations'; import { addR128Gain, getR128Gain } from '@stores/appStore'; import ABSliderMenu from './ABSliderMenu'; import { songlistToTracklist } from '@utils/RNTPUtils'; +import useActiveTrack from '@hooks/useActiveTrack'; enum ICONS { SEND_TO = 'playlist-plus', @@ -54,6 +55,8 @@ export default ({ const setCurrentPlayingList = useNoxSetting( state => state.setCurrentPlayingList ); + const updateTrack = useNoxSetting(state => state.updateTrack); + const { updateSongIndex, updateSongMetadata } = useUpdatePlaylist(); const { startRadio, radioAvailable } = useSongOperations(); @@ -71,19 +74,29 @@ export default ({ }; }; - const renameSong = (rename: string) => { + const renameSong = async (rename: string) => { const currentPlaylist2 = playlists[currentPlaylist.id]; updateSongIndex( songMenuSongIndexes[0], { name: rename, parsedName: rename }, currentPlaylist2 ); + const index = await TrackPlayer.getActiveTrackIndex(); + index !== undefined && (await TrackPlayer.updateMetadataForTrack(index, { + title: rename, + })); + updateTrack(); }; const reloadSong = async () => { const currentPlaylist2 = playlists[currentPlaylist.id]; - const metadata = updateSongMetadata(songMenuSongIndexes[0], currentPlaylist2); - // TODO: call TP.updateMetadatabyindex something something + const metadata = await updateSongMetadata(songMenuSongIndexes[0], currentPlaylist2); + const index = await TrackPlayer.getActiveTrackIndex(); + index !== undefined && (await TrackPlayer.updateMetadataForTrack(index, { + title: metadata.name, + artwork: metadata.cover, + })); + updateTrack(); return metadata; }; diff --git a/src/components/player/View.tsx b/src/components/player/View.tsx index 2db4246f..e3849631 100644 --- a/src/components/player/View.tsx +++ b/src/components/player/View.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import TrackPlayer, { useActiveTrack } from 'react-native-track-player'; +import TrackPlayer from 'react-native-track-player'; import { SafeAreaView, StatusBar, @@ -20,6 +20,7 @@ import { initCache } from '@utils/Cache'; import { getCurrentTPQueue, initializePlaybackMode } from '@stores/playingList'; import useVersionCheck from '@hooks/useVersionCheck'; import { songlistToTracklist } from '@utils/RNTPUtils'; +import useActiveTrack from '@hooks/useActiveTrack'; const { NoxAndroidAutoModule } = NativeModules; @@ -28,9 +29,11 @@ interface Props { } export function Player({ navigation }: Props) { - const track = useActiveTrack(); + const { track, updateTrack } = useActiveTrack(); const playerStyle = useNoxSetting(state => state.playerStyle); - // TODO: component + const setUpdateTrack = useNoxSetting(state => state.setUpdateTrack); + + useEffect(() => setUpdateTrack(updateTrack), []); return ( diff --git a/src/hooks/useActiveTrack.ts b/src/hooks/useActiveTrack.ts new file mode 100644 index 00000000..cbe5e162 --- /dev/null +++ b/src/hooks/useActiveTrack.ts @@ -0,0 +1,22 @@ +import React from 'react'; +import TrackPlayer, { Track, useActiveTrack } from 'react-native-track-player'; + +const useTrack = () => { + const activeTrack = useActiveTrack(); + const [track, setTrack] = React.useState(activeTrack); + + const updateTrack = async () => { + const index = await TrackPlayer.getActiveTrackIndex(); + if (index === undefined) return; + const queue = await TrackPlayer.getQueue(); + setTrack({ ...queue[index] }); + }; + + React.useEffect(() => setTrack(activeTrack), [activeTrack]); + + React.useEffect(() => console.log(track), [track]); + + return { track, updateTrack }; +}; + +export default useTrack; diff --git a/src/hooks/useSetting.ts b/src/hooks/useSetting.ts index b4936d1b..dde73531 100644 --- a/src/hooks/useSetting.ts +++ b/src/hooks/useSetting.ts @@ -40,6 +40,8 @@ interface initializedResults { } interface NoxSetting { + updateTrack: () => void; + setUpdateTrack: (val: () => void) => void; appRefresh: boolean; setAppRefresh: () => void; playlistSearchAutoFocus: boolean; @@ -133,6 +135,9 @@ interface NoxSetting { * as well as saving and loading states to/from asyncStorage. */ export const useNoxSetting = create((set, get) => ({ + updateTrack: () => undefined, + setUpdateTrack: updateTrack => set({ updateTrack }), + appRefresh: false, setAppRefresh: () => set({ appRefresh: true }), playlistSearchAutoFocus: true,