From 71330e292551411d071ea922bacc5e1d9c65ce16 Mon Sep 17 00:00:00 2001 From: austinried <4966622+austinried@users.noreply.github.com> Date: Sat, 19 Mar 2022 11:12:26 +0900 Subject: [PATCH] switched to new playlist w/songs removed more unused stuff --- app/hooks/music.ts | 27 -------- app/models/music.ts | 10 --- app/screens/SongListView.tsx | 27 ++++++-- app/state/music.ts | 128 +---------------------------------- app/state/musicmap.ts | 27 +------- 5 files changed, 26 insertions(+), 193 deletions(-) diff --git a/app/hooks/music.ts b/app/hooks/music.ts index 7e25c43..4d3eae5 100644 --- a/app/hooks/music.ts +++ b/app/hooks/music.ts @@ -1,4 +1,3 @@ -import { selectMusic } from '@app/state/music' import { Store, useStore, useStoreDeep } from '@app/state/store' import { useCallback, useEffect } from 'react' @@ -15,32 +14,6 @@ export const useArtistInfo = (id: string) => { return artistInfo } -export const useAlbumWithSongs = (id: string) => { - const album = useStore(useCallback((state: Store) => state.albumsWithSongs[id], [id])) - const fetchAlbum = useStore(selectMusic.fetchAlbumWithSongs) - - useEffect(() => { - if (!album) { - fetchAlbum(id) - } - }, [album, fetchAlbum, id]) - - return album -} - -export const usePlaylistWithSongs = (id: string) => { - const playlist = useStore(useCallback((state: Store) => state.playlistsWithSongs[id], [id])) - const fetchPlaylist = useStore(selectMusic.fetchPlaylistWithSongs) - - useEffect(() => { - if (!playlist) { - fetchPlaylist(id) - } - }, [fetchPlaylist, id, playlist]) - - return playlist -} - export const useStarred = (id: string, type: string) => { return useStore( useCallback( diff --git a/app/models/music.ts b/app/models/music.ts index fdcbb45..1238c7c 100644 --- a/app/models/music.ts +++ b/app/models/music.ts @@ -21,10 +21,6 @@ export interface Album extends AlbumListItem { year?: number } -export interface AlbumWithSongs extends Album { - songs: Song[] -} - export interface SearchResults { artists: Artist[] albums: AlbumListItem[] @@ -39,10 +35,6 @@ export interface PlaylistListItem { coverArt?: string } -export interface PlaylistWithSongs extends PlaylistListItem { - songs: Song[] -} - export interface Song { itemType: 'song' id: string @@ -62,6 +54,4 @@ export interface Song { export type ListableItem = Song | AlbumListItem | Artist | PlaylistListItem -export type HomeLists = { [key: string]: AlbumListItem[] } - export type StarrableItemType = 'song' | 'album' | 'artist' diff --git a/app/screens/SongListView.tsx b/app/screens/SongListView.tsx index 26b1e0d..3ea6882 100644 --- a/app/screens/SongListView.tsx +++ b/app/screens/SongListView.tsx @@ -5,7 +5,6 @@ import ImageGradientFlatList from '@app/components/ImageGradientFlatList' import ListItem from '@app/components/ListItem' import ListPlayerControls from '@app/components/ListPlayerControls' import { useCoverArtFile } from '@app/hooks/cache' -import { usePlaylistWithSongs } from '@app/hooks/music' import { Album, PlaylistListItem, Song } from '@app/models/music' import { useStore, useStoreDeep } from '@app/state/store' import { selectTrackPlayer } from '@app/state/trackplayer' @@ -128,16 +127,34 @@ const PlaylistView = React.memo<{ id: string title: string }>(({ id, title }) => { - const playlist = usePlaylistWithSongs(id) - return + const playlist = useStoreDeep(useCallback(store => store.entities.playlists[id], [id])) + const songs = useStoreDeep( + useCallback( + store => { + const ids = store.entities.playlistSongs[id] + return ids ? ids.map(i => store.entities.songs[i]) : undefined + }, + [id], + ), + ) + + const fetchPlaylist = useStore(store => store.fetchLibraryPlaylist) + + useEffect(() => { + if (!playlist || !songs) { + fetchPlaylist(id) + } + }, [playlist, fetchPlaylist, id, songs]) + + return ( + + ) }) const AlbumView = React.memo<{ id: string title: string }>(({ id, title }) => { - // const album = useAlbumWithSongs(id) - const album = useStoreDeep(useCallback(store => store.entities.albums[id], [id])) const songs = useStoreDeep( useCallback( diff --git a/app/state/music.ts b/app/state/music.ts index 07c9bc2..ad88302 100644 --- a/app/state/music.ts +++ b/app/state/music.ts @@ -1,28 +1,10 @@ -import { - AlbumListItem, - AlbumWithSongs, - Artist, - HomeLists, - PlaylistListItem, - PlaylistWithSongs, - SearchResults, - StarrableItemType, -} from '@app/models/music' +import { AlbumListItem, Artist, PlaylistListItem, SearchResults, StarrableItemType } from '@app/models/music' import { Store } from '@app/state/store' -import { GetAlbumList2Params, GetAlbumList2TypeBase, Search3Params, StarParams } from '@app/subsonic/params' +import { GetAlbumList2Params, Search3Params, StarParams } from '@app/subsonic/params' import produce from 'immer' import { GetState, SetState } from 'zustand' export type MusicSlice = { - // - // family-style state - // - albumsWithSongs: { [id: string]: AlbumWithSongs } - fetchAlbumWithSongs: (id: string) => Promise - - playlistsWithSongs: { [id: string]: PlaylistWithSongs } - fetchPlaylistWithSongs: (id: string) => Promise - // // lists-style state // @@ -36,11 +18,6 @@ export type MusicSlice = { offset?: number, ) => Promise - homeLists: HomeLists - homeListsUpdating: boolean - fetchHomeLists: () => Promise - clearHomeLists: () => void - // // actions, etc. // @@ -56,19 +33,11 @@ export type MusicSlice = { } export const selectMusic = { - fetchAlbumWithSongs: (state: Store) => state.fetchAlbumWithSongs, - fetchPlaylistWithSongs: (state: Store) => state.fetchPlaylistWithSongs, - fetchArtists: (store: MusicSlice) => store.fetchArtists, fetchPlaylists: (store: MusicSlice) => store.fetchPlaylists, fetchAlbums: (store: MusicSlice) => store.fetchAlbums, fetchSearchResults: (store: MusicSlice) => store.fetchSearchResults, - homeLists: (store: MusicSlice) => store.homeLists, - homeListsUpdating: (store: MusicSlice) => store.homeListsUpdating, - fetchHomeLists: (store: MusicSlice) => store.fetchHomeLists, - clearHomeLists: (store: MusicSlice) => store.clearHomeLists, - starItem: (store: MusicSlice) => store.starItem, } @@ -86,55 +55,6 @@ function reduceStarred( } export const createMusicSlice = (set: SetState, get: GetState): MusicSlice => ({ - albumsWithSongs: {}, - - fetchAlbumWithSongs: async id => { - const client = get().client - if (!client) { - return undefined - } - - try { - const response = await client.getAlbum({ id }) - const album = await get().mapAlbumID3WithSongstoAlbumWithSongs(response.data.album, response.data.songs) - - set( - produce(state => { - state.albumsWithSongs[id] = album - state.starredSongs = reduceStarred(state.starredSongs, album.songs) - state.starredAlbums = reduceStarred(state.starredAlbums, [album]) - }), - ) - return album - } catch { - return undefined - } - }, - - playlistsWithSongs: {}, - - fetchPlaylistWithSongs: async id => { - const client = get().client - if (!client) { - return undefined - } - - try { - const response = await client.getPlaylist({ id }) - const playlist = await get().mapPlaylistWithSongs(response.data.playlist) - - set( - produce(state => { - state.playlistsWithSongs[id] = playlist - state.starredSongs = reduceStarred(state.starredSongs, playlist.songs) - }), - ) - return playlist - } catch { - return undefined - } - }, - fetchArtists: async () => { const client = get().client if (!client) { @@ -270,50 +190,6 @@ export const createMusicSlice = (set: SetState, get: GetState): Mu } }, - homeLists: {}, - homeListsUpdating: false, - - fetchHomeLists: async () => { - const client = get().client - if (!client) { - return - } - - if (get().homeListsUpdating) { - return - } - set({ homeListsUpdating: true }) - - const types = get().settings.screens.home.lists - - try { - const promises: Promise[] = [] - for (const type of types) { - promises.push( - client - .getAlbumList2({ type: type as GetAlbumList2TypeBase, size: 20 }) - .then(response => { - const list = response.data.albums.map(get().mapAlbumID3toAlbumListItem) - set( - produce(state => { - state.homeLists[type] = list - state.starredAlbums = reduceStarred(state.starredAlbums, state.homeLists[type]) - }), - ) - }) - .catch(() => {}), - ) - } - await Promise.all(promises) - } finally { - set({ homeListsUpdating: false }) - } - }, - - clearHomeLists: () => { - set({ homeLists: {} }) - }, - starredSongs: {}, starredAlbums: {}, starredArtists: {}, diff --git a/app/state/musicmap.ts b/app/state/musicmap.ts index df43def..e086b1e 100644 --- a/app/state/musicmap.ts +++ b/app/state/musicmap.ts @@ -1,11 +1,5 @@ -import { AlbumListItem, AlbumWithSongs, Artist, PlaylistListItem, PlaylistWithSongs, Song } from '@app/models/music' -import { - AlbumID3Element, - ArtistID3Element, - ChildElement, - PlaylistElement, - PlaylistWithSongsElement, -} from '@app/subsonic/elements' +import { AlbumListItem, Artist, PlaylistListItem, Song } from '@app/models/music' +import { AlbumID3Element, ArtistID3Element, ChildElement, PlaylistElement } from '@app/subsonic/elements' import { GetState, SetState } from 'zustand' import { Store } from './store' @@ -15,9 +9,7 @@ export type MusicMapSlice = { mapArtistID3toArtist: (artist: ArtistID3Element) => Artist mapAlbumID3toAlbumListItem: (album: AlbumID3Element) => AlbumListItem mapAlbumID3toAlbum: (album: AlbumID3Element) => AlbumListItem - mapAlbumID3WithSongstoAlbumWithSongs: (album: AlbumID3Element, songs: ChildElement[]) => Promise mapPlaylistListItem: (playlist: PlaylistElement) => PlaylistListItem - mapPlaylistWithSongs: (playlist: PlaylistWithSongsElement) => Promise } export const createMusicMapSlice = (set: SetState, get: GetState): MusicMapSlice => ({ @@ -86,13 +78,6 @@ export const createMusicMapSlice = (set: SetState, get: GetState): } }, - mapAlbumID3WithSongstoAlbumWithSongs: async (album, songs) => { - return { - ...get().mapAlbumID3toAlbum(album), - songs: await get().mapChildrenToSongs(songs), - } - }, - mapPlaylistListItem: playlist => { return { itemType: 'playlist', @@ -102,12 +87,4 @@ export const createMusicMapSlice = (set: SetState, get: GetState): coverArt: playlist.coverArt, } }, - - mapPlaylistWithSongs: async playlist => { - return { - ...get().mapPlaylistListItem(playlist), - songs: await get().mapChildrenToSongs(playlist.songs), - coverArt: playlist.coverArt, - } - }, })