Makussu/subtracks
1
0
Fork 0
mirror of https://github.com/austinried/subtracks.git synced 2026-02-10 06:52:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

Library store refactor (#76)

Browse Source 
* start of music store refactor

moving stuff into a state cache
better separate it from view logic

* added paginated list/album list

* reworked fetchAlbumList to remove ui state

refactored home screen to use new method
i broke playing songs somehow, JS thread goes into a loop

* don't reset parts manually, do it all at once

* fixed perf issue related to too many rerenders

rerenders were caused by strict equality check on object/array picks
switched artistInfo to new store
updated zustand and fixed deprecation warnings

* update typescript

and use workspace tsc version for vscode

* remove old artistInfo

* switched to new playlist w/songs

removed more unused stuff

* remove unused + (slightly) rework search

* refactor star

* use only original/large imges for covers/artist

fix view artist from context menu
add loading indicators to song list and artist views (show info we have right away)

* set starred/unstar assuming it works

and correct state on error

* reorg, remove old music slice files

* added back fix for song cover art

* sort artists by localCompare name

* update licenses

* fix now playing background grey bar

* update react-native-gesture-handler

for node-fetch security alert

* fix another gradient height grey bar issue

* update licenses again

* remove thumbnail cache

* rename to remove "Library" from methods

* Revert "remove thumbnail cache"

This reverts commit e0db4931f1.

* use ids for lists, pull state later

* Revert "use only original/large imges for covers/artist"

This reverts commit c9aea9065c.

* deep equal ListItem props for now

this needs a bigger refactor

* use immer as middleware

* refactor api client to use string method

hoping to use this for requestKey/deduping next

* use thumbnails in list items

* Revert "refactor api client to use string method"

This reverts commit 234326135b.

* rename/cleanup

* store servers by id

* get rid of settings selectors

* renames for clarity

remove unused estimateContentLength setting

* remove trackplayer selectors

* fix migration for library filter settings

* fixed shuffle order reporting wrong track/queue

* removed the other selectors

* don't actually need es6/react for our state

* fix slow artist sort on star

localeCompare is too slow for large lists
This commit is contained in:
austinried
2022-03-28 13:30:57 +09:00
committed by GitHub
parent 09ca4974c5
commit 081251061d
57 changed files with 2136 additions and 1843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/App.tsx
View File

@@ -5,12 +5,11 @@ import React from 'react'
import { StatusBar, View, StyleSheet } from 'react-native'
import ProgressHook from './components/ProgressHook'
import { useStore } from './state/store'
import { selectTrackPlayer } from './state/trackplayer'
import { MenuProvider } from 'react-native-popup-menu'
const Debug = () => {
const currentTrack = useStore(selectTrackPlayer.currentTrack)
console.log(currentTrack?.title)
const currentTrackTitle = useStore(store => store.currentTrack?.title)
console.log('currentTrackTitle', currentTrackTitle)
return <></>
}

2
app/components/BackgroundHeaderFlatList.tsx
View File

@@ -37,7 +37,7 @@ function BackgroundHeaderFlatList<ItemT>(props: BackgroundHeaderFlatListProp<Ite
</props.BackgroundComponent>
}
ListHeaderComponentStyle={[headerStyle]}
ListEmptyComponent={<NothingHere style={styles.nothing} />}
ListEmptyComponent={props.ListEmptyComponent || <NothingHere style={styles.nothing} />}
/>
)
}

16
app/components/ContextMenu.tsx
View File

@@ -1,8 +1,6 @@
import PressableOpacity from '@app/components/PressableOpacity'
import { useStarred } from '@app/hooks/music'
import { AlbumListItem, Artist, Song, StarrableItemType } from '@app/models/music'
import { selectMusic } from '@app/state/music'
import { useStore } from '@app/state/store'
import { useStar } from '@app/hooks/library'
import { StarrableItemType, Song, Artist, Album } from '@app/models/library'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import { NavigationProp, useNavigation } from '@react-navigation/native'
@@ -12,9 +10,8 @@ import { ScrollView, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-
import { Menu, MenuOption, MenuOptions, MenuTrigger, renderers } from 'react-native-popup-menu'
import IconFA from 'react-native-vector-icons/FontAwesome'
import IconFA5 from 'react-native-vector-icons/FontAwesome5'
// import IconMat from 'react-native-vector-icons/MaterialIcons'
import CoverArt from './CoverArt'
import Star from './Star'
import { Star } from './Star'
const { SlideInMenu } = renderers
@@ -144,14 +141,13 @@ const OptionStar = React.memo<{
type: StarrableItemType
additionalText?: string
}>(({ id, type, additionalText: text }) => {
const starred = useStarred(id, type)
const setStarred = useStore(selectMusic.starItem)
const { starred, toggleStar } = useStar(id, type)
return (
<ContextMenuIconTextOption
IconComponentRaw={<Star starred={starred} size={26} />}
text={(starred ? 'Unstar' : 'Star') + (text ? ` ${text}` : '')}
onSelect={() => setStarred(id, type, starred)}
onSelect={toggleStar}
/>
)
})
@@ -203,7 +199,7 @@ const OptionViewAlbum = React.memo<{
// ))
export type AlbumContextPressableProps = ContextMenuProps & {
album: AlbumListItem
album: Album
}
export const AlbumContextPressable: React.FC<AlbumContextPressableProps> = props => {

4
app/components/HeaderBar.tsx
View File

@@ -8,10 +8,10 @@ import Animated from 'react-native-reanimated'
import PressableOpacity from './PressableOpacity'
import IconMat from 'react-native-vector-icons/MaterialIcons'
import { ReactComponentLike } from 'prop-types'
import { AlbumListItem, Song } from '@app/models/music'
import { AlbumContextPressable, NowPlayingContextPressable } from './ContextMenu'
import { Album, Song } from '@app/models/library'
export type HeaderContextItem = Song | AlbumListItem
export type HeaderContextItem = Song | Album
const More = React.memo<{ contextItem?: HeaderContextItem }>(({ contextItem }) => {
const moreIcon = <IconMat name="more-vert" color="white" size={25} />

41
app/components/ListItem.tsx
View File

@@ -1,8 +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'
import { Album, Artist, ListableItem, Song } from '@app/models/library'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import { useNavigation } from '@react-navigation/native'
@@ -13,7 +10,8 @@ import IconMat from 'react-native-vector-icons/MaterialIcons'
import { AlbumContextPressable, ArtistContextPressable, SongContextPressable } from './ContextMenu'
import CoverArt from './CoverArt'
import PressableOpacity from './PressableOpacity'
import Star from './Star'
import { PressableStar } from './Star'
import equal from 'fast-deep-equal/es6/react'
const TitleTextSong = React.memo<{
contextId?: string
@@ -58,7 +56,6 @@ const ListItem: React.FC<{
style?: StyleProp<ViewStyle>
}> = ({ item, contextId, queueId, onPress, showArt, showStar, subtitle, listStyle, style }) => {
const navigation = useNavigation()
const starred = useStarred(item.id, item.itemType)
showStar = showStar === undefined ? true : showStar
listStyle = listStyle || 'small'
@@ -101,7 +98,7 @@ const ListItem: React.FC<{
)
const albumPressable = useCallback(
({ children }) => (
<AlbumContextPressable album={item as AlbumListItem} onPress={onPress} triggerWrapperStyle={styles.item}>
<AlbumContextPressable album={item as Album} onPress={onPress} triggerWrapperStyle={styles.item}>
{children}
</AlbumContextPressable>
),
@@ -133,13 +130,6 @@ const ListItem: React.FC<{
PressableComponent = artistPressable
}
const starItem = useStore(selectMusic.starItem)
const toggleStarred = useCallback(() => {
if (item.itemType !== 'playlist') {
starItem(item.id, item.itemType, starred)
}
}, [item.id, item.itemType, starItem, starred])
let title = <></>
if (item.itemType === 'song' && queueId !== undefined) {
title = <TitleTextSong contextId={contextId} queueId={queueId} title={item.title} />
@@ -151,9 +141,20 @@ const ListItem: React.FC<{
const resizeMode = 'cover'
let coverArt = <></>
if (item.itemType === 'artist') {
coverArt = <CoverArt type="artist" artistId={item.id} round={true} style={artStyle} resizeMode={resizeMode} />
coverArt = (
<CoverArt
type="artist"
artistId={item.id}
round={true}
style={artStyle}
resizeMode={resizeMode}
size="thumbnail"
/>
)
} else {
coverArt = <CoverArt type="cover" coverArt={item.coverArt} style={artStyle} resizeMode={resizeMode} />
coverArt = (
<CoverArt type="cover" coverArt={item.coverArt} style={artStyle} resizeMode={resizeMode} size="thumbnail" />
)
}
return (
@@ -178,10 +179,8 @@ const ListItem: React.FC<{
</View>
</PressableComponent>
<View style={styles.controls}>
{showStar && (
<PressableOpacity onPress={toggleStarred} style={styles.controlItem}>
<Star size={26} starred={starred} />
</PressableOpacity>
{showStar && item.itemType !== 'playlist' && (
<PressableStar id={item.id} type={item.itemType} size={26} style={styles.controlItem} />
)}
</View>
</View>
@@ -259,4 +258,4 @@ const bigStyles = StyleSheet.create({
},
})
export default React.memo(ListItem)
export default React.memo(ListItem, equal)

11
app/components/ListPlayerControls.tsx
View File

@@ -1,7 +1,7 @@
import Button from '@app/components/Button'
import { Song } from '@app/models/music'
import { Song } from '@app/models/library'
import { QueueContextType } from '@app/models/trackplayer'
import { useStore } from '@app/state/store'
import { QueueContextType, selectTrackPlayer } from '@app/state/trackplayer'
import colors from '@app/styles/colors'
import React, { useState } from 'react'
import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
@@ -17,7 +17,7 @@ const ListPlayerControls = React.memo<{
style?: StyleProp<ViewStyle>
}>(({ songs, typeName, queueName, queueContextType, queueContextId, style }) => {
const [downloaded, setDownloaded] = useState(false)
const setQueue = useStore(selectTrackPlayer.setQueue)
const setQueue = useStore(store => store.setQueue)
return (
<View style={[styles.controls, style]}>
@@ -36,11 +36,14 @@ const ListPlayerControls = React.memo<{
<View style={styles.controlsCenter}>
<Button
title={`Play ${typeName}`}
disabled={songs.length === 0}
onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, false)}
/>
</View>
<View style={styles.controlsSide}>
<Button onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, true)}>
<Button
disabled={songs.length === 0}
onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, true)}>
<Icon name="shuffle" size={26} color="white" />
</Button>
</View>

19
app/components/NowPlayingBar.tsx
View File

@@ -2,7 +2,6 @@ import CoverArt from '@app/components/CoverArt'
import PressableOpacity from '@app/components/PressableOpacity'
import { usePause, usePlay } from '@app/hooks/trackplayer'
import { useStore } from '@app/state/store'
import { selectTrackPlayer } from '@app/state/trackplayer'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import { useNavigation } from '@react-navigation/native'
@@ -12,7 +11,8 @@ import { State } from 'react-native-track-player'
import IconFA5 from 'react-native-vector-icons/FontAwesome5'
const ProgressBar = React.memo(() => {
const { position, duration } = useStore(selectTrackPlayer.progress)
const position = useStore(store => store.progress.position)
const duration = useStore(store => store.progress.duration)
let progress = 0
if (duration > 0) {
@@ -41,7 +41,7 @@ const progressStyles = StyleSheet.create({
})
const Controls = React.memo(() => {
const state = useStore(selectTrackPlayer.playerState)
const state = useStore(store => store.playerState)
const play = usePlay()
const pause = usePause()
@@ -78,9 +78,12 @@ const Controls = React.memo(() => {
const NowPlayingBar = React.memo(() => {
const navigation = useNavigation()
const track = useStore(selectTrackPlayer.currentTrack)
const currentTrackExists = useStore(store => !!store.currentTrack)
const coverArt = useStore(store => store.currentTrack?.coverArt)
const title = useStore(store => store.currentTrack?.title)
const artist = useStore(store => store.currentTrack?.artist)
const displayStyle: ViewStyle = { display: track ? 'flex' : 'none' }
const displayStyle: ViewStyle = { display: currentTrackExists ? 'flex' : 'none' }
return (
<Pressable onPress={() => navigation.navigate('now-playing')} style={[styles.container, displayStyle]}>
@@ -89,14 +92,14 @@ const NowPlayingBar = React.memo(() => {
<CoverArt
type="cover"
style={{ height: styles.subContainer.height, width: styles.subContainer.height }}
coverArt={track?.coverArt}
coverArt={coverArt}
/>
<View style={styles.detailsContainer}>
<Text numberOfLines={1} style={styles.detailsTitle}>
{track?.title}
{title}
</Text>
<Text numberOfLines={1} style={styles.detailsAlbum}>
{track?.artist}
{artist}
</Text>
</View>
<Controls />

5
app/components/ProgressHook.tsx
View File

@@ -1,11 +1,10 @@
import { useStore } from '@app/state/store'
import { selectTrackPlayer } from '@app/state/trackplayer'
import React, { useEffect } from 'react'
import { State, useProgress } from 'react-native-track-player'
const ProgressHook = () => {
const playerState = useStore(selectTrackPlayer.playerState)
const setProgress = useStore(selectTrackPlayer.setProgress)
const playerState = useStore(store => store.playerState)
const setProgress = useStore(store => store.setProgress)
const progress = useProgress(250)
useEffect(() => {

20
app/components/Star.tsx
View File

@@ -1,8 +1,11 @@
import { useStar } from '@app/hooks/library'
import colors from '@app/styles/colors'
import React from 'react'
import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native'
import IconFA from 'react-native-vector-icons/FontAwesome'
import PressableOpacity from './PressableOpacity'
const Star = React.memo<{
export const Star = React.memo<{
starred: boolean
size: number
}>(({ starred, size }) => {
@@ -11,4 +14,17 @@ const Star = React.memo<{
)
})
export default Star
export const PressableStar = React.memo<{
id: string
type: 'album' | 'artist' | 'song'
size: number
style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>) | undefined
}>(({ id, type, size, style }) => {
const { starred, toggleStar } = useStar(id, type)
return (
<PressableOpacity onPress={toggleStar} style={style}>
<Star size={size} starred={starred} />
</PressableOpacity>
)
})

37
app/hooks/cache.ts
View File

@@ -1,16 +1,12 @@
import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
import { ArtistInfo } from '@app/models/music'
import { selectCache } from '@app/state/cache'
import { selectMusic } from '@app/state/music'
import { selectSettings } from '@app/state/settings'
import { useStore, Store } from '@app/state/store'
import { Store, useStore, useStoreDeep } from '@app/state/store'
import { useCallback, useEffect } from 'react'
const useFileRequest = (key: CacheItemTypeKey, id: string) => {
const file = useStore(
useCallback(
(store: Store) => {
const activeServerId = store.settings.activeServer
const activeServerId = store.settings.activeServerId
if (!activeServerId) {
return
}
@@ -23,7 +19,7 @@ const useFileRequest = (key: CacheItemTypeKey, id: string) => {
const request = useStore(
useCallback(
(store: Store) => {
const activeServerId = store.settings.activeServer
const activeServerId = store.settings.activeServerId
if (!activeServerId) {
return
}
@@ -40,8 +36,8 @@ const useFileRequest = (key: CacheItemTypeKey, id: string) => {
export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbnail') => {
const type: CacheItemTypeKey = size === 'original' ? 'coverArt' : 'coverArtThumb'
const { file, request } = useFileRequest(type, coverArt)
const client = useStore(selectSettings.client)
const cacheItem = useStore(selectCache.cacheItem)
const client = useStore(store => store.client)
const cacheItem = useStore(store => store.cacheItem)
useEffect(() => {
if (!file && client) {
@@ -61,28 +57,25 @@ export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbna
export const useArtistArtFile = (artistId: string, size: CacheImageSize = 'thumbnail') => {
const type: CacheItemTypeKey = size === 'original' ? 'artistArt' : 'artistArtThumb'
const fetchArtistInfo = useStore(selectMusic.fetchArtistInfo)
const fetchArtistInfo = useStore(store => store.fetchArtistInfo)
const artistInfo = useStoreDeep(store => store.library.artistInfo[artistId])
const { file, request } = useFileRequest(type, artistId)
const cacheItem = useStore(selectCache.cacheItem)
const cacheItem = useStore(store => store.cacheItem)
useEffect(() => {
if (!file) {
if (!artistInfo) {
fetchArtistInfo(artistId)
return
}
if (!file && artistInfo) {
cacheItem(type, artistId, async () => {
let artistInfo: ArtistInfo | undefined
const cachedArtistInfo = useStore.getState().artistInfo[artistId]
if (cachedArtistInfo) {
artistInfo = cachedArtistInfo
} else {
artistInfo = await fetchArtistInfo(artistId)
}
return type === 'artistArtThumb' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl
})
}
// intentionally leaving file out so it doesn't re-render if the request fails
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [artistId, cacheItem, fetchArtistInfo, type])
}, [artistId, cacheItem, fetchArtistInfo, type, artistInfo])
return { file, request }
}

63
app/hooks/library.ts Normal file
View File

@@ -0,0 +1,63 @@
import { useStore } from '@app/state/store'
import { StarParams } from '@app/subsonic/params'
import { useCallback, useEffect } from 'react'
type StarrableItem = 'album' | 'artist' | 'song'
function starParams(id: string, type: StarrableItem): StarParams {
const params: StarParams = {}
if (type === 'album') {
params.albumId = id
} else if (type === 'artist') {
params.artistId = id
} else {
params.id = id
}
return params
}
export const useStar = (id: string, type: StarrableItem) => {
const fetchAlbum = useStore(store => store.fetchAlbum)
const fetchArtist = useStore(store => store.fetchArtist)
const fetchSong = useStore(store => store.fetchSong)
const _starred = useStore(
useCallback(
store => {
if (type === 'album') {
return store.library.albums[id] ? !!store.library.albums[id].starred : null
} else if (type === 'artist') {
return store.library.artists[id] ? !!store.library.artists[id].starred : null
} else {
return store.library.songs[id] ? !!store.library.songs[id].starred : null
}
},
[id, type],
),
)
useEffect(() => {
if (_starred === null) {
if (type === 'album') {
fetchAlbum(id)
} else if (type === 'artist') {
fetchArtist(id)
} else {
fetchSong(id)
}
}
}, [fetchAlbum, fetchArtist, fetchSong, id, _starred, type])
const starred = !!_starred
const _star = useStore(store => store.star)
const _unstar = useStore(store => store.unstar)
const star = useCallback(() => _star(starParams(id, type)), [_star, id, type])
const unstar = useCallback(() => _unstar(starParams(id, type)), [_unstar, id, type])
const toggleStar = useCallback(() => (starred ? unstar() : star()), [star, starred, unstar])
return { star, unstar, toggleStar, starred }
}

26
app/hooks/list.ts
View File

@@ -1,5 +1,5 @@
import { useState, useCallback } from 'react'
import { useActiveServerRefresh } from './server'
import { useActiveServerRefresh } from './settings'
export const useFetchList = <T>(fetchList: () => Promise<T[]>) => {
const [list, setList] = useState<T[]>([])
@@ -28,8 +28,26 @@ export const useFetchList = <T>(fetchList: () => Promise<T[]>) => {
return { list, refreshing, refresh, reset }
}
export const useFetchList2 = (fetchList: () => Promise<void>) => {
const [refreshing, setRefreshing] = useState(false)
const refresh = useCallback(async () => {
setRefreshing(true)
await fetchList()
setRefreshing(false)
}, [fetchList])
useActiveServerRefresh(
useCallback(async () => {
await refresh()
}, [refresh]),
)
return { refreshing, refresh }
}
export const useFetchPaginatedList = <T>(
fetchList: (size?: number, offset?: number) => Promise<T[]>,
fetchList: (size: number, offset: number) => Promise<T[]>,
pageSize: number,
) => {
const [list, setList] = useState<T[]>([])
@@ -53,8 +71,8 @@ export const useFetchPaginatedList = <T>(
useActiveServerRefresh(
useCallback(() => {
reset()
}, [reset]),
refresh()
}, [refresh]),
)
const fetchNextPage = useCallback(() => {

62
app/hooks/music.ts
View File

@@ -1,62 +0,0 @@
import { selectMusic } from '@app/state/music'
import { Store, useStore } from '@app/state/store'
import { useCallback, useEffect } from 'react'
export const useArtistInfo = (id: string) => {
const artistInfo = useStore(useCallback((state: Store) => state.artistInfo[id], [id]))
const fetchArtistInfo = useStore(selectMusic.fetchArtistInfo)
useEffect(() => {
if (!artistInfo) {
fetchArtistInfo(id)
}
}, [artistInfo, fetchArtistInfo, id])
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(
(state: Store) => {
switch (type) {
case 'song':
return state.starredSongs[id]
case 'album':
return state.starredAlbums[id]
case 'artist':
return state.starredArtists[id]
default:
return false
}
},
[type, id],
),
)
}

17
app/hooks/server.ts → app/hooks/settings.ts
View File

@@ -1,15 +1,14 @@
import { useReset } from '@app/hooks/trackplayer'
import { selectSettings } from '@app/state/settings'
import { useStore } from '@app/state/store'
import { useEffect } from 'react'
export const useSwitchActiveServer = () => {
const activeServer = useStore(selectSettings.activeServer)
const setActiveServer = useStore(selectSettings.setActiveServer)
const activeServerId = useStore(store => store.settings.activeServerId)
const setActiveServer = useStore(store => store.setActiveServer)
const resetPlayer = useReset()
return async (id: string) => {
if (id === activeServer?.id) {
if (id === activeServerId) {
return
}
@@ -19,11 +18,15 @@ export const useSwitchActiveServer = () => {
}
export const useActiveServerRefresh = (refresh: () => void) => {
const activeServer = useStore(selectSettings.activeServer)
const activeServerId = useStore(store => store.settings.activeServerId)
useEffect(() => {
if (activeServer) {
if (activeServerId) {
refresh()
}
}, [activeServer, refresh])
}, [activeServerId, refresh])
}
export const useFirstRun = () => {
return useStore(store => Object.keys(store.settings.servers).length === 0)
}

12
app/hooks/trackplayer.ts
View File

@@ -1,5 +1,5 @@
import { useStore } from '@app/state/store'
import { getQueue, selectTrackPlayer, trackPlayerCommands } from '@app/state/trackplayer'
import { useStore, useStoreDeep } from '@app/state/store'
import { getQueue, trackPlayerCommands } from '@app/state/trackplayer'
import TrackPlayer from 'react-native-track-player'
export const usePlay = () => {
@@ -57,7 +57,7 @@ export const useSeekTo = () => {
}
export const useReset = (enqueue = true) => {
const resetStore = useStore(selectTrackPlayer.resetTrackPlayerState)
const resetStore = useStore(store => store.resetTrackPlayerState)
const reset = async () => {
await TrackPlayer.reset()
@@ -68,9 +68,9 @@ export const useReset = (enqueue = true) => {
}
export const useIsPlaying = (contextId: string | undefined, track: number) => {
const queueContextId = useStore(selectTrackPlayer.queueContextId)
const currentTrackIdx = useStore(selectTrackPlayer.currentTrackIdx)
const shuffleOrder = useStore(selectTrackPlayer.shuffleOrder)
const queueContextId = useStore(store => store.queueContextId)
const currentTrackIdx = useStore(store => store.currentTrackIdx)
const shuffleOrder = useStoreDeep(store => store.shuffleOrder)
if (contextId === undefined) {
return track === currentTrackIdx

4
app/models/cache.ts
View File

@@ -1,4 +1,4 @@
import { Album, PlaylistListItem, Artist, Song } from './music'
import { Album, Playlist, Artist, Song } from './library'
export enum CacheItemType {
coverArt = 'coverArt',
@@ -27,7 +27,7 @@ export type DownloadedAlbum = Album & {
songs: string[]
}
export type DownloadedPlaylist = PlaylistListItem & {
export type DownloadedPlaylist = Playlist & {
songs: string[]
}

39
app/models/music.ts → app/models/library.ts
View File

@@ -6,14 +6,13 @@ export interface Artist {
coverArt?: string
}
export interface ArtistInfo extends Artist {
albums: Album[]
export interface ArtistInfo {
id: string
smallImageUrl?: string
largeImageUrl?: string
topSongs: Song[]
}
export interface AlbumListItem {
export interface Album {
itemType: 'album'
id: string
name: string
@@ -21,24 +20,10 @@ export interface AlbumListItem {
artistId?: string
starred?: Date
coverArt?: string
}
export interface Album extends AlbumListItem {
coverArt?: string
year?: number
}
export interface AlbumWithSongs extends Album {
songs: Song[]
}
export interface SearchResults {
artists: Artist[]
albums: AlbumListItem[]
songs: Song[]
}
export interface PlaylistListItem {
export interface Playlist {
itemType: 'playlist'
id: string
name: string
@@ -46,10 +31,6 @@ export interface PlaylistListItem {
coverArt?: string
}
export interface PlaylistWithSongs extends PlaylistListItem {
songs: Song[]
}
export interface Song {
itemType: 'song'
id: string
@@ -62,13 +43,15 @@ export interface Song {
discNumber?: number
duration?: number
starred?: Date
streamUri: string
coverArt?: string
}
export type ListableItem = Song | AlbumListItem | Artist | PlaylistListItem
export interface SearchResults {
artists: string[]
albums: string[]
songs: string[]
}
export type HomeLists = { [key: string]: AlbumListItem[] }
export type StarrableItemType = 'album' | 'song' | 'artist'
export type StarrableItemType = 'song' | 'album' | 'artist'
export type ListableItem = Album | Song | Artist | Playlist

20
app/models/settings.ts
View File

@@ -30,23 +30,3 @@ export type ArtistFilterType = 'random' | 'starred' | 'alphabeticalByName'
export interface ArtistFilterSettings {
type: ArtistFilterType
}
export interface AppSettings {
servers: Server[]
screens: {
home: {
lists: string[]
}
library: {
albums: AlbumFilterSettings
artists: ArtistFilterSettings
}
}
activeServer?: string
scrobble: boolean
estimateContentLength: boolean
maxBitrateWifi: number
maxBitrateMobile: number
minBuffer: number
maxBuffer: number
}

14
app/models/state.ts Normal file
View File

@@ -0,0 +1,14 @@
export interface ById<T> {
[id: string]: T
}
export type OneToMany = ById<string[]>
export interface OrderedById<T> {
byId: ById<T>
allIds: string[]
}
export interface PaginatedList {
[offset: number]: string[]
}

18
app/models/trackplayer.ts Normal file
View File

@@ -0,0 +1,18 @@
import { Track } from 'react-native-track-player'
export type TrackExt = Track & {
id: string
coverArt?: string
artistId?: string
albumId?: string
track?: number
discNumber?: number
}
export type Progress = {
position: number
duration: number
buffered: number
}
export type QueueContextType = 'album' | 'playlist' | 'song' | 'artist'

7
app/navigation/BottomTabBar.tsx
View File

@@ -1,7 +1,6 @@
import NowPlayingBar from '@app/components/NowPlayingBar'
import PressableOpacity from '@app/components/PressableOpacity'
import { selectSettings } from '@app/state/settings'
import { useStore } from '@app/state/store'
import { useFirstRun } from '@app/hooks/settings'
import colors from '@app/styles/colors'
import dimensions from '@app/styles/dimensions'
import font from '@app/styles/font'
@@ -10,7 +9,7 @@ import { BottomTabBarProps } from '@react-navigation/bottom-tabs'
import { BottomTabNavigationEventMap } from '@react-navigation/bottom-tabs/lib/typescript/src/types'
import { NavigationHelpers, ParamListBase } from '@react-navigation/native'
import React from 'react'
import { StyleSheet, Text, View, Image, ImageStyle } from 'react-native'
import { Image, ImageStyle, StyleSheet, Text, View } from 'react-native'
const BottomTabButton = React.memo<{
routeKey: string
@@ -20,7 +19,7 @@ const BottomTabButton = React.memo<{
icon: OutlineFillIcon
navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>
}>(({ routeKey, label, name, isFocused, icon, navigation }) => {
const firstRun = useStore(selectSettings.firstRun)
const firstRun = useFirstRun()
const disabled = firstRun && name !== 'settings'

5
app/navigation/BottomTabNavigator.tsx
View File

@@ -1,3 +1,4 @@
import { useFirstRun } from '@app/hooks/settings'
import BottomTabBar from '@app/navigation/BottomTabBar'
import LibraryTopTabNavigator from '@app/navigation/LibraryTopTabNavigator'
import ArtistView from '@app/screens/ArtistView'
@@ -8,8 +9,6 @@ import ServerView from '@app/screens/ServerView'
import SettingsView from '@app/screens/Settings'
import SongListView from '@app/screens/SongListView'
import WebViewScreen from '@app/screens/WebViewScreen'
import { selectSettings } from '@app/state/settings'
import { useStore } from '@app/state/store'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import { BottomTabNavigationProp, createBottomTabNavigator } from '@react-navigation/bottom-tabs'
@@ -177,7 +176,7 @@ const SettingsTab = () => {
const Tab = createBottomTabNavigator()
const BottomTabNavigator = () => {
const firstRun = useStore(selectSettings.firstRun)
const firstRun = useFirstRun()
return (
<Tab.Navigator tabBar={BottomTabBar} initialRouteName={firstRun ? 'settings' : 'home'}>

11
app/playbackservice.ts
View File

@@ -1,4 +1,4 @@
import { getCurrentTrack, getPlayerState, TrackExt, trackPlayerCommands } from '@app/state/trackplayer'
import { getCurrentTrack, getPlayerState, trackPlayerCommands } from '@app/state/trackplayer'
import TrackPlayer, { Event, State } from 'react-native-track-player'
import { useStore } from './state/store'
import { unstable_batchedUpdates } from 'react-native'
@@ -44,13 +44,12 @@ let serviceCreated = false
const createService = async () => {
useStore.subscribe(
(currentTrack?: TrackExt) => {
if (currentTrack) {
useStore.getState().scrobbleTrack(currentTrack.id)
state => state.currentTrack?.id,
(currentTrackId?: string) => {
if (currentTrackId) {
useStore.getState().scrobbleTrack(currentTrackId)
}
},
state => state.currentTrack,
(prev, next) => prev?.id === next?.id,
)
NetInfo.fetch().then(state => {

89
app/screens/ArtistView.tsx
View File

@@ -5,16 +5,15 @@ import GradientScrollView from '@app/components/GradientScrollView'
import Header from '@app/components/Header'
import HeaderBar from '@app/components/HeaderBar'
import ListItem from '@app/components/ListItem'
import { useArtistInfo } from '@app/hooks/music'
import { Album, Song } from '@app/models/music'
import { useStore } from '@app/state/store'
import { selectTrackPlayer } from '@app/state/trackplayer'
import { Album, Song } from '@app/models/library'
import { useStore, useStoreDeep } from '@app/state/store'
import colors from '@app/styles/colors'
import dimensions from '@app/styles/dimensions'
import font from '@app/styles/font'
import { mapById } from '@app/util/state'
import { useLayout } from '@react-native-community/hooks'
import { useNavigation } from '@react-navigation/native'
import React from 'react'
import React, { useCallback, useEffect } from 'react'
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
import { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
@@ -47,12 +46,12 @@ const TopSongs = React.memo<{
name: string
artistId: string
}>(({ songs, name, artistId }) => {
const setQueue = useStore(selectTrackPlayer.setQueue)
const setQueue = useStore(store => store.setQueue)
return (
<>
<Header>Top Songs</Header>
{songs.map((s, i) => (
{songs.slice(0, 5).map((s, i) => (
<ListItem
key={i}
item={s}
@@ -67,6 +66,29 @@ const TopSongs = React.memo<{
)
})
const ArtistAlbums = React.memo<{
albums: Album[]
}>(({ albums }) => {
const albumsLayout = useLayout()
const sortedAlbums = [...albums]
.sort((a, b) => a.name.localeCompare(b.name))
.sort((a, b) => (b.year || 0) - (a.year || 0))
const albumSize = albumsLayout.width / 2 - styles.contentContainer.paddingHorizontal / 2
return (
<>
<Header>Albums</Header>
<View style={styles.albums} onLayout={albumsLayout.onLayout}>
{sortedAlbums.map(a => (
<AlbumItem key={a.id} album={a} height={albumSize} width={albumSize} />
))}
</View>
</>
)
})
const ArtistViewFallback = React.memo(() => (
<GradientBackground style={styles.fallback}>
<ActivityIndicator size="large" color={colors.accent} />
@@ -74,8 +96,19 @@ const ArtistViewFallback = React.memo(() => (
))
const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) => {
const artist = useArtistInfo(id)
const albumsLayout = useLayout()
const artist = useStoreDeep(useCallback(store => store.library.artists[id], [id]))
const topSongIds = useStoreDeep(useCallback(store => store.library.artistNameTopSongs[artist?.name], [artist?.name]))
const topSongs = useStoreDeep(
useCallback(store => (topSongIds ? mapById(store.library.songs, topSongIds) : undefined), [topSongIds]),
)
const albumIds = useStoreDeep(useCallback(store => store.library.artistAlbums[id], [id]))
const albums = useStoreDeep(
useCallback(store => (albumIds ? mapById(store.library.albums, albumIds) : undefined), [albumIds]),
)
const fetchArtist = useStore(store => store.fetchArtist)
const fetchTopSongs = useStore(store => store.fetchArtistTopSongs)
const coverLayout = useLayout()
const headerOpacity = useSharedValue(0)
@@ -91,16 +124,22 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
}
})
const albumSize = albumsLayout.width / 2 - styles.contentContainer.paddingHorizontal / 2
useEffect(() => {
if (!artist || !albumIds) {
fetchArtist(id)
}
}, [artist, albumIds, fetchArtist, id])
useEffect(() => {
if (artist && !topSongIds) {
fetchTopSongs(artist.name)
}
}, [artist, fetchTopSongs, topSongIds])
if (!artist) {
return <ArtistViewFallback />
}
const _albums = [...artist.albums]
.sort((a, b) => a.name.localeCompare(b.name))
.sort((a, b) => (b.year || 0) - (a.year || 0))
return (
<View style={styles.container}>
<HeaderBar title={title} headerStyle={[styles.header, animatedOpacity]} />
@@ -115,17 +154,18 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
<Text style={styles.title}>{artist.name}</Text>
</View>
<View style={styles.contentContainer}>
{artist.topSongs.length > 0 ? (
<TopSongs songs={artist.topSongs} name={artist.name} artistId={artist.id} />
{topSongs && albums ? (
topSongs.length > 0 ? (
<>
<TopSongs songs={topSongs} name={artist.name} artistId={artist.id} />
<ArtistAlbums albums={albums} />
</>
) : (
<ArtistAlbums albums={albums} />
)
) : (
<></>
<ActivityIndicator size="large" color={colors.accent} style={styles.loading} />
)}
<Header>Albums</Header>
<View style={styles.albums} onLayout={albumsLayout.onLayout}>
{_albums.map(a => (
<AlbumItem key={a.id} album={a} height={albumSize} width={albumSize} />
))}
</View>
</View>
</GradientScrollView>
</View>
@@ -200,6 +240,9 @@ const styles = StyleSheet.create({
fontFamily: font.regular,
textAlign: 'center',
},
loading: {
marginTop: 30,
},
})
export default ArtistView

93
app/screens/Home.tsx
View File

@@ -3,17 +3,17 @@ import CoverArt from '@app/components/CoverArt'
import GradientScrollView from '@app/components/GradientScrollView'
import Header from '@app/components/Header'
import NothingHere from '@app/components/NothingHere'
import { useActiveServerRefresh } from '@app/hooks/server'
import { AlbumListItem } from '@app/models/music'
import { selectMusic } from '@app/state/music'
import { selectSettings } from '@app/state/settings'
import { useStore } from '@app/state/store'
import { useActiveServerRefresh } from '@app/hooks/settings'
import { useStore, useStoreDeep } from '@app/state/store'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import { GetAlbumListType } from '@app/subsonic/params'
import { GetAlbumList2TypeBase, GetAlbumListType } from '@app/subsonic/params'
import { useNavigation } from '@react-navigation/native'
import React, { useCallback } from 'react'
import equal from 'fast-deep-equal/es6/react'
import produce from 'immer'
import React, { useCallback, useState } from 'react'
import { RefreshControl, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
import create, { StateSelector } from 'zustand'
const titles: { [key in GetAlbumListType]?: string } = {
recent: 'Recently Played',
@@ -23,9 +23,14 @@ const titles: { [key in GetAlbumListType]?: string } = {
}
const AlbumItem = React.memo<{
album: AlbumListItem
}>(({ album }) => {
id: string
}>(({ id }) => {
const navigation = useNavigation()
const album = useStoreDeep(useCallback(store => store.library.albums[id], [id]))
if (!album) {
return <></>
}
return (
<AlbumContextPressable
@@ -49,9 +54,10 @@ const AlbumItem = React.memo<{
})
const Category = React.memo<{
name?: string
data: AlbumListItem[]
}>(({ name, data }) => {
type: string
}>(({ type }) => {
const list = useHomeStoreDeep(useCallback(store => store.lists[type] || [], [type]))
const Albums = () => (
<ScrollView
horizontal={true}
@@ -59,8 +65,8 @@ const Category = React.memo<{
overScrollMode={'never'}
style={styles.artScroll}
contentContainerStyle={styles.artScrollContent}>
{data.map(album => (
<AlbumItem key={album.id} album={album} />
{list.map(id => (
<AlbumItem key={id} id={id} />
))}
</ScrollView>
)
@@ -73,24 +79,57 @@ const Category = React.memo<{
return (
<View style={styles.category}>
<Header style={styles.header}>{name}</Header>
{data.length > 0 ? <Albums /> : <Nothing />}
<Header style={styles.header}>{titles[type as GetAlbumListType] || ''}</Header>
{list.length > 0 ? <Albums /> : <Nothing />}
</View>
)
})
interface HomeState {
lists: { [type: string]: string[] }
setList: (type: string, list: string[]) => void
}
const useHomeStore = create<HomeState>(set => ({
lists: {},
setList: (type, list) => {
set(
produce<HomeState>(state => {
state.lists[type] = list
}),
)
},
}))
function useHomeStoreDeep<U>(stateSelector: StateSelector<HomeState, U>) {
return useHomeStore(stateSelector, equal)
}
const Home = () => {
const types = useStore(selectSettings.homeLists)
const lists = useStore(selectMusic.homeLists)
const updating = useStore(selectMusic.homeListsUpdating)
const update = useStore(selectMusic.fetchHomeLists)
const clear = useStore(selectMusic.clearHomeLists)
const [refreshing, setRefreshing] = useState(false)
const types = useStoreDeep(store => store.settings.screens.home.listTypes)
const fetchAlbumList = useStore(store => store.fetchAlbumList)
const setList = useHomeStore(store => store.setList)
const refresh = useCallback(async () => {
setRefreshing(true)
await Promise.all(
types.map(async type => {
const ids = await fetchAlbumList({ type: type as GetAlbumList2TypeBase, size: 20, offset: 0 })
setList(type, ids)
}),
)
setRefreshing(false)
}, [fetchAlbumList, setList, types])
useActiveServerRefresh(
useCallback(() => {
clear()
update()
}, [clear, update]),
types.forEach(type => setList(type, []))
refresh()
}, [refresh, setList, types]),
)
return (
@@ -99,15 +138,15 @@ const Home = () => {
contentContainerStyle={styles.scrollContentContainer}
refreshControl={
<RefreshControl
refreshing={updating}
onRefresh={update}
refreshing={refreshing}
onRefresh={refresh}
colors={[colors.accent, colors.accentLow]}
progressViewOffset={StatusBar.currentHeight}
/>
}>
<View style={styles.content}>
{types.map(type => (
<Category key={type} name={titles[type as GetAlbumListType]} data={type in lists ? lists[type] : []} />
<Category key={type} type={type} />
))}
</View>
</GradientScrollView>

71
app/screens/LibraryAlbums.tsx
View File

@@ -3,24 +3,26 @@ import CoverArt from '@app/components/CoverArt'
import FilterButton, { OptionData } from '@app/components/FilterButton'
import GradientFlatList from '@app/components/GradientFlatList'
import { useFetchPaginatedList } from '@app/hooks/list'
import { Album, AlbumListItem } from '@app/models/music'
import { selectMusic } from '@app/state/music'
import { selectSettings } from '@app/state/settings'
import { useStore } from '@app/state/store'
import { useStore, useStoreDeep } from '@app/state/store'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import { GetAlbumList2Type } from '@app/subsonic/params'
import { GetAlbumList2Params, GetAlbumList2Type } from '@app/subsonic/params'
import { useNavigation } from '@react-navigation/native'
import React, { useEffect } from 'react'
import React, { useCallback } from 'react'
import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
const AlbumItem = React.memo<{
album: AlbumListItem
id: string
size: number
height: number
}>(({ album, size, height }) => {
}>(({ id, size, height }) => {
const album = useStoreDeep(useCallback(store => store.library.albums[id], [id]))
const navigation = useNavigation()
if (!album) {
return <></>
}
return (
<AlbumContextPressable
album={album}
@@ -41,8 +43,8 @@ const AlbumItem = React.memo<{
})
const AlbumListRenderItem: React.FC<{
item: { album: Album; size: number; height: number }
}> = ({ item }) => <AlbumItem album={item.album} size={item.size} height={item.height} />
item: { id: string; size: number; height: number }
}> = ({ item }) => <AlbumItem id={item.id} size={item.size} height={item.height} />
const filterOptions: OptionData[] = [
{ text: 'By Name', value: 'alphabeticalByName' },
@@ -57,24 +59,57 @@ const filterOptions: OptionData[] = [
]
const AlbumsList = () => {
const fetchAlbums = useStore(selectMusic.fetchAlbums)
const { list, refreshing, refresh, reset, fetchNextPage } = useFetchPaginatedList(fetchAlbums, 300)
const filter = useStore(selectSettings.libraryAlbumFilter)
const setFilter = useStore(selectSettings.setLibraryAlbumFilter)
const filter = useStoreDeep(store => store.settings.screens.library.albumsFilter)
const setFilter = useStore(store => store.setLibraryAlbumFilter)
const fetchAlbumList = useStore(store => store.fetchAlbumList)
const fetchPage = useCallback(
(size: number, offset: number) => {
let params: GetAlbumList2Params
switch (filter.type) {
case 'byYear':
params = {
size,
offset,
type: filter.type,
fromYear: filter.fromYear,
toYear: filter.toYear,
}
break
case 'byGenre':
params = {
size,
offset,
type: filter.type,
genre: filter.genre,
}
break
default:
params = {
size,
offset,
type: filter.type,
}
break
}
return fetchAlbumList(params)
},
[fetchAlbumList, filter.fromYear, filter.genre, filter.toYear, filter.type],
)
const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(fetchPage, 300)
const layout = useWindowDimensions()
const size = layout.width / 3 - styles.itemWrapper.marginHorizontal * 2
const height = size + 36
useEffect(() => reset(), [reset, filter])
return (
<View style={styles.container}>
<GradientFlatList
data={list.map(album => ({ album, size, height }))}
data={list.map(id => ({ id, size, height }))}
renderItem={AlbumListRenderItem}
keyExtractor={item => item.album.id}
keyExtractor={item => item.id}
numColumns={3}
removeClippedSubviews={true}
refreshing={refreshing}

25
app/screens/LibraryArtists.tsx
View File

@@ -1,12 +1,10 @@
import FilterButton, { OptionData } from '@app/components/FilterButton'
import GradientFlatList from '@app/components/GradientFlatList'
import ListItem from '@app/components/ListItem'
import { useFetchList } from '@app/hooks/list'
import { Artist } from '@app/models/music'
import { useFetchList2 } from '@app/hooks/list'
import { Artist } from '@app/models/library'
import { ArtistFilterType } from '@app/models/settings'
import { selectMusic } from '@app/state/music'
import { selectSettings } from '@app/state/settings'
import { useStore } from '@app/state/store'
import { useStore, useStoreDeep } from '@app/state/store'
import React, { useEffect, useState } from 'react'
import { StyleSheet, View } from 'react-native'
@@ -21,13 +19,17 @@ const filterOptions: OptionData[] = [
]
const ArtistsList = () => {
const fetchArtists = useStore(selectMusic.fetchArtists)
const { list, refreshing, refresh } = useFetchList(fetchArtists)
const filter = useStore(selectSettings.libraryArtistFilter)
const setFilter = useStore(selectSettings.setLibraryArtistFiler)
const fetchArtists = useStore(store => store.fetchArtists)
const { refreshing, refresh } = useFetchList2(fetchArtists)
const artists = useStoreDeep(store => store.library.artists)
const artistOrder = useStoreDeep(store => store.library.artistOrder)
const filter = useStoreDeep(store => store.settings.screens.library.artistsFilter)
const setFilter = useStore(store => store.setLibraryArtistFiler)
const [sortedList, setSortedList] = useState<Artist[]>([])
useEffect(() => {
const list = Object.values(artists)
switch (filter.type) {
case 'random':
setSortedList([...list].sort(() => Math.random() - 0.5))
@@ -35,11 +37,14 @@ const ArtistsList = () => {
case 'starred':
setSortedList([...list].filter(a => a.starred))
break
case 'alphabeticalByName':
setSortedList(artistOrder.map(id => artists[id]))
break
default:
setSortedList([...list])
break
}
}, [list, filter])
}, [filter.type, artists, artistOrder])
return (
<View style={styles.container}>

16
app/screens/LibraryPlaylists.tsx
View File

@@ -1,23 +1,23 @@
import GradientFlatList from '@app/components/GradientFlatList'
import ListItem from '@app/components/ListItem'
import { useFetchList } from '@app/hooks/list'
import { PlaylistListItem } from '@app/models/music'
import { selectMusic } from '@app/state/music'
import { useStore } from '@app/state/store'
import { useFetchList2 } from '@app/hooks/list'
import { Playlist } from '@app/models/library'
import { useStore, useStoreDeep } from '@app/state/store'
import React from 'react'
import { StyleSheet } from 'react-native'
const PlaylistRenderItem: React.FC<{ item: PlaylistListItem }> = ({ item }) => (
const PlaylistRenderItem: React.FC<{ item: Playlist }> = ({ item }) => (
<ListItem item={item} showArt={true} showStar={false} listStyle="big" style={styles.listItem} />
)
const PlaylistsList = () => {
const fetchPlaylists = useStore(selectMusic.fetchPlaylists)
const { list, refreshing, refresh } = useFetchList(fetchPlaylists)
const fetchPlaylists = useStore(store => store.fetchPlaylists)
const { refreshing, refresh } = useFetchList2(fetchPlaylists)
const playlists = useStoreDeep(store => store.library.playlists)
return (
<GradientFlatList
data={list}
data={Object.values(playlists)}
renderItem={PlaylistRenderItem}
keyExtractor={item => item.id}
onRefresh={refresh}

10
app/screens/NowPlayingQueue.tsx
View File

@@ -2,10 +2,8 @@ import GradientFlatList from '@app/components/GradientFlatList'
import ListItem from '@app/components/ListItem'
import NowPlayingBar from '@app/components/NowPlayingBar'
import { useSkipTo } from '@app/hooks/trackplayer'
import { Song } from '@app/models/music'
import { useStore } from '@app/state/store'
import { selectTrackPlayer } from '@app/state/trackplayer'
import { selectTrackPlayerMap } from '@app/state/trackplayermap'
import { Song } from '@app/models/library'
import { useStore, useStoreDeep } from '@app/state/store'
import React from 'react'
import { StyleSheet, View } from 'react-native'
@@ -27,8 +25,8 @@ const SongRenderItem: React.FC<{
)
const NowPlayingQueue = React.memo<{}>(() => {
const queue = useStore(selectTrackPlayer.queue)
const mapTrackExtToSong = useStore(selectTrackPlayerMap.mapTrackExtToSong)
const queue = useStoreDeep(store => store.queue)
const mapTrackExtToSong = useStore(store => store.mapTrackExtToSong)
const skipTo = useSkipTo()
return (

52
app/screens/NowPlayingView.tsx
View File

@@ -2,13 +2,10 @@ import CoverArt from '@app/components/CoverArt'
import HeaderBar from '@app/components/HeaderBar'
import ImageGradientBackground from '@app/components/ImageGradientBackground'
import PressableOpacity from '@app/components/PressableOpacity'
import Star from '@app/components/Star'
import { useStarred } from '@app/hooks/music'
import { PressableStar } from '@app/components/Star'
import { useNext, usePause, usePlay, usePrevious, useSeekTo } from '@app/hooks/trackplayer'
import { selectMusic } from '@app/state/music'
import { useStore } from '@app/state/store'
import { QueueContextType, selectTrackPlayer, TrackExt } from '@app/state/trackplayer'
import { selectTrackPlayerMap } from '@app/state/trackplayermap'
import { QueueContextType, TrackExt } from '@app/models/trackplayer'
import { useStore, useStoreDeep } from '@app/state/store'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import formatDuration from '@app/util/formatDuration'
@@ -41,9 +38,9 @@ function getContextName(type?: QueueContextType) {
const NowPlayingHeader = React.memo<{
track?: TrackExt
}>(({ track }) => {
const queueName = useStore(selectTrackPlayer.queueName)
const queueContextType = useStore(selectTrackPlayer.queueContextType)
const mapTrackExtToSong = useStore(selectTrackPlayerMap.mapTrackExtToSong)
const queueName = useStore(store => store.queueName)
const queueContextType = useStore(store => store.queueContextType)
const mapTrackExtToSong = useStore(store => store.mapTrackExtToSong)
if (!track) {
return <></>
@@ -94,11 +91,11 @@ const headerStyles = StyleSheet.create({
})
const SongCoverArt = () => {
const track = useStore(selectTrackPlayer.currentTrack)
const coverArt = useStore(store => store.currentTrack?.coverArt)
return (
<View style={coverArtStyles.container}>
<CoverArt type="cover" size="original" coverArt={track?.coverArt} style={coverArtStyles.image} />
<CoverArt type="cover" size="original" coverArt={coverArt} style={coverArtStyles.image} />
</View>
)
}
@@ -117,26 +114,22 @@ const coverArtStyles = StyleSheet.create({
})
const SongInfo = () => {
const track = useStore(selectTrackPlayer.currentTrack)
const id = track?.id || '-1'
const type = 'song'
const starred = useStarred(id, type)
const setStarred = useStore(selectMusic.starItem)
const id = useStore(store => store.currentTrack?.id)
const artist = useStore(store => store.currentTrack?.artist)
const title = useStore(store => store.currentTrack?.title)
return (
<View style={infoStyles.container}>
<View style={infoStyles.details}>
<Text numberOfLines={1} style={infoStyles.title}>
{track?.title}
{title}
</Text>
<Text numberOfLines={1} style={infoStyles.artist}>
{track?.artist}
{artist}
</Text>
</View>
<View style={infoStyles.controls}>
<PressableOpacity onPress={() => setStarred(id, type, starred)}>
<Star size={32} starred={starred} />
</PressableOpacity>
<PressableStar id={id || '-1'} type={'song'} size={32} />
</View>
</View>
)
@@ -170,7 +163,8 @@ const infoStyles = StyleSheet.create({
})
const SeekBar = () => {
const { position, duration } = useStore(selectTrackPlayer.progress)
const position = useStore(store => store.progress.position)
const duration = useStore(store => store.progress.duration)
const seekTo = useSeekTo()
const [value, setValue] = useState(0)
const [sliding, setSliding] = useState(false)
@@ -262,15 +256,15 @@ const seekStyles = StyleSheet.create({
})
const PlayerControls = () => {
const state = useStore(selectTrackPlayer.playerState)
const state = useStore(store => store.playerState)
const play = usePlay()
const pause = usePause()
const next = useNext()
const previous = usePrevious()
const shuffled = useStore(selectTrackPlayer.shuffled)
const toggleShuffle = useStore(selectTrackPlayer.toggleShuffle)
const repeatMode = useStore(selectTrackPlayer.repeatMode)
const toggleRepeat = useStore(selectTrackPlayer.toggleRepeatMode)
const shuffled = useStore(store => !!store.shuffleOrder)
const toggleShuffle = useStore(store => store.toggleShuffle)
const repeatMode = useStore(store => store.repeatMode)
const toggleRepeat = useStore(store => store.toggleRepeatMode)
const navigation = useNavigation()
let playPauseIcon: string
@@ -392,7 +386,7 @@ type RootStackParamList = {
type NowPlayingProps = NativeStackScreenProps<RootStackParamList, 'main'>
const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
const track = useStore(selectTrackPlayer.currentTrack)
const track = useStoreDeep(store => store.currentTrack)
useEffect(() => {
if (!track) {
@@ -404,7 +398,7 @@ const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
return (
<View style={styles.container}>
<ImageGradientBackground imagePath={imagePath} />
<ImageGradientBackground imagePath={imagePath} height={'100%'} />
<NowPlayingHeader track={track} />
<View style={styles.content}>
<SongCoverArt />

48
app/screens/Search.tsx
View File

@@ -4,13 +4,12 @@ import Header from '@app/components/Header'
import ListItem from '@app/components/ListItem'
import NothingHere from '@app/components/NothingHere'
import TextInput from '@app/components/TextInput'
import { useActiveServerRefresh } from '@app/hooks/server'
import { ListableItem, SearchResults, Song } from '@app/models/music'
import { selectMusic } from '@app/state/music'
import { useStore } from '@app/state/store'
import { selectTrackPlayer } from '@app/state/trackplayer'
import { useActiveServerRefresh } from '@app/hooks/settings'
import { Song, Album, Artist, SearchResults } from '@app/models/library'
import { useStore, useStoreDeep } from '@app/state/store'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import { mapById } from '@app/util/state'
import { useFocusEffect, useNavigation } from '@react-navigation/native'
import debounce from 'lodash.debounce'
import React, { useCallback, useMemo, useRef, useState } from 'react'
@@ -25,7 +24,7 @@ import {
} from 'react-native'
const SongItem = React.memo<{ item: Song }>(({ item }) => {
const setQueue = useStore(selectTrackPlayer.setQueue)
const setQueue = useStore(store => store.setQueue)
return (
<ListItem
@@ -42,8 +41,27 @@ const SongItem = React.memo<{ item: Song }>(({ item }) => {
const ResultsCategory = React.memo<{
name: string
query: string
items: ListableItem[]
}>(({ name, query, items }) => {
ids: string[]
type: 'artist' | 'album' | 'song'
}>(({ name, query, type, ids }) => {
const items: (Album | Artist | Song)[] = useStoreDeep(
useCallback(
store => {
switch (type) {
case 'album':
return mapById(store.library.albums, ids)
case 'artist':
return mapById(store.library.artists, ids)
case 'song':
return mapById(store.library.songs, ids)
default:
return []
}
},
[ids, type],
),
)
const navigation = useNavigation()
if (items.length === 0) {
@@ -54,8 +72,8 @@ const ResultsCategory = React.memo<{
<>
<Header>{name}</Header>
{items.map(a =>
a.itemType === 'song' ? (
<SongItem key={a.id} item={a} />
type === 'song' ? (
<SongItem key={a.id} item={a as Song} />
) : (
<ListItem key={a.id} item={a} showArt={true} showStar={false} />
),
@@ -78,15 +96,15 @@ const Results = React.memo<{
}>(({ results, query }) => {
return (
<>
<ResultsCategory name="Artists" query={query} items={results.artists} />
<ResultsCategory name="Albums" query={query} items={results.albums} />
<ResultsCategory name="Songs" query={query} items={results.songs} />
<ResultsCategory name="Artists" query={query} type={'artist'} ids={results.artists} />
<ResultsCategory name="Albums" query={query} type={'album'} ids={results.albums} />
<ResultsCategory name="Songs" query={query} type={'song'} ids={results.songs} />
</>
)
})
const Search = () => {
const fetchSearchResults = useStore(selectMusic.fetchSearchResults)
const fetchSearchResults = useStore(store => store.fetchSearchResults)
const [results, setResults] = useState<SearchResults>({ artists: [], albums: [], songs: [] })
const [refreshing, setRefreshing] = useState(false)
const [text, setText] = useState('')
@@ -118,7 +136,7 @@ const Search = () => {
() =>
debounce(async (query: string) => {
setRefreshing(true)
setResults(await fetchSearchResults(query))
setResults(await fetchSearchResults({ query, albumCount: 5, artistCount: 5, songCount: 5 }))
setRefreshing(false)
}, 400),
[fetchSearchResults],

79
app/screens/SearchResultsView.tsx
View File

@@ -1,18 +1,18 @@
import GradientFlatList from '@app/components/GradientFlatList'
import ListItem from '@app/components/ListItem'
import { useFetchPaginatedList } from '@app/hooks/list'
import { AlbumListItem, Artist, Song } from '@app/models/music'
import { selectMusic } from '@app/state/music'
import { useStore } from '@app/state/store'
import { selectTrackPlayer } from '@app/state/trackplayer'
import { Album, Artist, Song } from '@app/models/library'
import { useStore, useStoreDeep } from '@app/state/store'
import { Search3Params } from '@app/subsonic/params'
import { mapById } from '@app/util/state'
import { useNavigation } from '@react-navigation/native'
import React, { useCallback, useEffect } from 'react'
import { StyleSheet } from 'react-native'
type SearchListItemType = AlbumListItem | Song | Artist
type SearchListItemType = Album | Song | Artist
const ResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {
const setQueue = useStore(selectTrackPlayer.setQueue)
const setQueue = useStore(store => store.setQueue)
let onPress
if (item.itemType === 'song') {
@@ -40,27 +40,62 @@ const SearchResultsView: React.FC<{
type: 'album' | 'artist' | 'song'
}> = ({ query, type }) => {
const navigation = useNavigation()
const fetchSearchResults = useStore(selectMusic.fetchSearchResults)
const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList<SearchListItemType>(
const fetchSearchResults = useStore(store => store.fetchSearchResults)
const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(
useCallback(
(size, offset) =>
fetchSearchResults(query, type, size, offset).then(results => {
switch (type) {
case 'album':
return results.albums
case 'artist':
return results.artists
case 'song':
return results.songs
default:
return []
}
}),
async (size, offset) => {
const params: Search3Params = { query }
if (type === 'album') {
params.albumCount = size
params.albumOffset = offset
} else if (type === 'artist') {
params.artistCount = size
params.artistOffset = offset
} else if (type === 'song') {
params.songCount = size
params.songOffset = offset
} else {
params.albumCount = 5
params.artistCount = 5
params.songCount = 5
}
const results = await fetchSearchResults(params)
switch (type) {
case 'album':
return results.albums
case 'artist':
return results.artists
case 'song':
return results.songs
default:
return []
}
},
[fetchSearchResults, query, type],
),
100,
)
const items: SearchListItemType[] = useStoreDeep(
useCallback(
store => {
switch (type) {
case 'album':
return mapById(store.library.albums, list)
case 'artist':
return mapById(store.library.artists, list)
case 'song':
return mapById(store.library.songs, list)
default:
return []
}
},
[list, type],
),
)
useEffect(() => {
navigation.setOptions({
title: `Search: "${query}"`,
@@ -70,7 +105,7 @@ const SearchResultsView: React.FC<{
return (
<GradientFlatList
data={list}
data={items}
renderItem={SearchResultsRenderItem}
keyExtractor={(item, i) => i.toString()}
onRefresh={refresh}

21
app/screens/ServerView.tsx
View File

@@ -1,8 +1,7 @@
import Button from '@app/components/Button'
import GradientScrollView from '@app/components/GradientScrollView'
import { Server } from '@app/models/settings'
import { selectSettings } from '@app/state/settings'
import { useStore } from '@app/state/store'
import { useStore, useStoreDeep } from '@app/state/store'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import toast from '@app/util/toast'
@@ -19,13 +18,13 @@ const ServerView: React.FC<{
id?: string
}> = ({ id }) => {
const navigation = useNavigation()
const activeServer = useStore(selectSettings.activeServer)
const servers = useStore(selectSettings.servers)
const addServer = useStore(selectSettings.addServer)
const updateServer = useStore(selectSettings.updateServer)
const removeServer = useStore(selectSettings.removeServer)
const server = id ? servers.find(s => s.id === id) : undefined
const pingServer = useStore(selectSettings.pingServer)
const activeServerId = useStore(store => store.settings.activeServerId)
const servers = useStoreDeep(store => store.settings.servers)
const addServer = useStore(store => store.addServer)
const updateServer = useStore(store => store.updateServer)
const removeServer = useStore(store => store.removeServer)
const server = id ? servers[id] : undefined
const pingServer = useStore(store => store.pingServer)
const [address, setAddress] = useState(server?.address || '')
const [username, setUsername] = useState(server?.username || '')
@@ -44,8 +43,8 @@ const ServerView: React.FC<{
}, [address, username, password])
const canRemove = useCallback(() => {
return id && servers.length > 1 && activeServer?.id !== id
}, [id, servers, activeServer])
return id && Object.keys(servers).length > 1 && activeServerId !== id
}, [id, servers, activeServerId])
const exit = useCallback(() => {
if (navigation.canGoBack()) {

47
app/screens/Settings.tsx
View File

@@ -5,11 +5,9 @@ import PressableOpacity from '@app/components/PressableOpacity'
import SettingsItem from '@app/components/SettingsItem'
import SettingsSwitch from '@app/components/SettingsSwitch'
import TextInput from '@app/components/TextInput'
import { useSwitchActiveServer } from '@app/hooks/server'
import { useSwitchActiveServer } from '@app/hooks/settings'
import { Server } from '@app/models/settings'
import { selectCache } from '@app/state/cache'
import { selectSettings } from '@app/state/settings'
import { useStore } from '@app/state/store'
import { useStore, useStoreDeep } from '@app/state/store'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import { useNavigation } from '@react-navigation/core'
@@ -22,7 +20,7 @@ import { version } from '../../package.json'
const ServerItem = React.memo<{
server: Server
}>(({ server }) => {
const activeServer = useStore(selectSettings.activeServer)
const activeServerId = useStore(store => store.settings.activeServerId)
const switchActiveServer = useSwitchActiveServer()
const navigation = useNavigation()
@@ -36,7 +34,7 @@ const ServerItem = React.memo<{
subtitle={server.username}
onPress={() => navigation.navigate('server', { id: server.id })}>
<PressableOpacity style={styles.serverActive} onPress={setActive}>
{activeServer && activeServer.id === server.id ? (
{activeServerId === server.id ? (
<Icon name="checkbox-marked-circle" size={30} color={colors.accent} />
) : (
<Icon name="checkbox-blank-circle-outline" size={30} color={colors.text.secondary} />
@@ -193,27 +191,22 @@ function secondsUnit(seconds: string): string {
}
const SettingsContent = React.memo(() => {
const servers = useStore(selectSettings.servers)
const scrobble = useStore(selectSettings.scrobble)
const setScrobble = useStore(selectSettings.setScrobble)
const servers = useStoreDeep(store => store.settings.servers)
const scrobble = useStore(store => store.settings.scrobble)
const setScrobble = useStore(store => store.setScrobble)
// doesn't seem to ever be a case where we want this off
// will remove later if there isn't a use case for disabling
// const estimateContentLength = useStore(selectSettings.estimateContentLength)
// const setEstimateContentLength = useStore(selectSettings.setEstimateContentLength)
const maxBitrateWifi = useStore(store => store.settings.maxBitrateWifi)
const setMaxBitrateWifi = useStore(store => store.setMaxBitrateWifi)
const maxBitrateWifi = useStore(selectSettings.maxBitrateWifi)
const setMaxBitrateWifi = useStore(selectSettings.setMaxBitrateWifi)
const maxBitrateMobile = useStore(store => store.settings.maxBitrateMobile)
const setMaxBitrateMobile = useStore(store => store.setMaxBitrateMobile)
const maxBitrateMobile = useStore(selectSettings.maxBitrateMobile)
const setMaxBitrateMobile = useStore(selectSettings.setMaxBitrateMobile)
const minBuffer = useStore(store => store.settings.minBuffer)
const setMinBuffer = useStore(store => store.setMinBuffer)
const maxBuffer = useStore(store => store.settings.maxBuffer)
const setMaxBuffer = useStore(store => store.setMaxBuffer)
const minBuffer = useStore(selectSettings.minBuffer)
const setMinBuffer = useStore(selectSettings.setMinBuffer)
const maxBuffer = useStore(selectSettings.maxBuffer)
const setMaxBuffer = useStore(selectSettings.setMaxBuffer)
const clearImageCache = useStore(selectCache.clearImageCache)
const clearImageCache = useStore(store => store.clearImageCache)
const [clearing, setClearing] = useState(false)
const navigation = useNavigation()
@@ -239,7 +232,7 @@ const SettingsContent = React.memo(() => {
return (
<View style={styles.content}>
<Header>Servers</Header>
{servers.map(s => (
{Object.values(servers).map(s => (
<ServerItem key={s.id} server={s} />
))}
<Button
@@ -251,12 +244,6 @@ const SettingsContent = React.memo(() => {
<Header style={styles.header}>Network</Header>
<BitrateModal title="Maximum bitrate (Wi-Fi)" bitrate={maxBitrateWifi} setBitrate={setMaxBitrateWifi} />
<BitrateModal title="Maximum bitrate (mobile)" bitrate={maxBitrateMobile} setBitrate={setMaxBitrateMobile} />
{/* <SettingsSwitch
title="Estimate content length"
subtitle='Send the "estimateContentLength" flag when streaming. Helps fix issues with seeking when the server is transcoding songs.'
value={estimateContentLength}
setValue={setEstimateContentLength}
/> */}
<SettingsTextModal
title="Minimum buffer time"
value={minBuffer.toString()}

94
app/screens/SongListView.tsx
View File

@@ -4,14 +4,13 @@ import HeaderBar from '@app/components/HeaderBar'
import ImageGradientFlatList from '@app/components/ImageGradientFlatList'
import ListItem from '@app/components/ListItem'
import ListPlayerControls from '@app/components/ListPlayerControls'
import NothingHere from '@app/components/NothingHere'
import { useCoverArtFile } from '@app/hooks/cache'
import { useAlbumWithSongs, usePlaylistWithSongs } from '@app/hooks/music'
import { AlbumWithSongs, PlaylistWithSongs, Song } from '@app/models/music'
import { useStore } from '@app/state/store'
import { selectTrackPlayer } from '@app/state/trackplayer'
import { Song, Album, Playlist } from '@app/models/library'
import { useStore, useStoreDeep } from '@app/state/store'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import React, { useState } from 'react'
import React, { useCallback, useEffect, useState } from 'react'
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
type SongListType = 'album' | 'playlist'
@@ -46,18 +45,19 @@ const SongRenderItem: React.FC<{
const SongListDetails = React.memo<{
title: string
type: SongListType
songList?: AlbumWithSongs | PlaylistWithSongs
songList?: Album | Playlist
songs?: Song[]
subtitle?: string
}>(({ title, songList, subtitle, type }) => {
}>(({ title, songList, songs, subtitle, type }) => {
const coverArtFile = useCoverArtFile(songList?.coverArt, 'thumbnail')
const [headerColor, setHeaderColor] = useState<string | undefined>(undefined)
const setQueue = useStore(selectTrackPlayer.setQueue)
const setQueue = useStore(store => store.setQueue)
if (!songList) {
return <SongListDetailsFallback />
}
const _songs = [...songList.songs]
const _songs = [...(songs || [])]
let typeName = ''
if (type === 'album') {
@@ -101,21 +101,26 @@ const SongListDetails = React.memo<{
overScrollMode="never"
windowSize={7}
contentMarginTop={26}
ListEmptyComponent={
songs ? (
<NothingHere style={styles.nothing} />
) : (
<ActivityIndicator size="large" color={colors.accent} style={styles.listLoading} />
)
}
ListHeaderComponent={
<View style={styles.content}>
<CoverArt type="cover" size="original" coverArt={songList.coverArt} style={styles.cover} />
<Text style={styles.title}>{songList.name}</Text>
{subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : <></>}
{songList.songs.length > 0 && (
<ListPlayerControls
style={styles.controls}
songs={_songs}
typeName={typeName}
queueName={songList.name}
queueContextId={songList.id}
queueContextType={type}
/>
)}
<ListPlayerControls
style={styles.controls}
songs={_songs}
typeName={typeName}
queueName={songList.name}
queueContextId={songList.id}
queueContextType={type}
/>
</View>
}
/>
@@ -127,19 +132,58 @@ const PlaylistView = React.memo<{
id: string
title: string
}>(({ id, title }) => {
const playlist = usePlaylistWithSongs(id)
return <SongListDetails title={title} songList={playlist} subtitle={playlist?.comment} type="playlist" />
const playlist = useStoreDeep(useCallback(store => store.library.playlists[id], [id]))
const songs = useStoreDeep(
useCallback(
store => {
const ids = store.library.playlistSongs[id]
return ids ? ids.map(i => store.library.songs[i]) : undefined
},
[id],
),
)
const fetchPlaylist = useStore(store => store.fetchPlaylist)
useEffect(() => {
if (!playlist || !songs) {
fetchPlaylist(id)
}
}, [playlist, fetchPlaylist, id, songs])
return (
<SongListDetails title={title} songList={playlist} songs={songs} subtitle={playlist?.comment} type="playlist" />
)
})
const AlbumView = React.memo<{
id: string
title: string
}>(({ id, title }) => {
const album = useAlbumWithSongs(id)
const album = useStoreDeep(useCallback(store => store.library.albums[id], [id]))
const songs = useStoreDeep(
useCallback(
store => {
const ids = store.library.albumSongs[id]
return ids ? ids.map(i => store.library.songs[i]) : undefined
},
[id],
),
)
const fetchAlbum = useStore(store => store.fetchAlbum)
useEffect(() => {
if (!album || !songs) {
fetchAlbum(id)
}
}, [album, fetchAlbum, id, songs])
return (
<SongListDetails
title={title}
songList={album}
songs={songs}
subtitle={(album?.artist || '') + (album?.year ? ' • ' + album?.year : '')}
type="album"
/>
@@ -196,6 +240,12 @@ const styles = StyleSheet.create({
listItem: {
paddingHorizontal: 20,
},
nothing: {
width: '100%',
},
listLoading: {
marginTop: 10,
},
})
export default SongListView

2
app/screens/SplashPage.tsx
View File

@@ -45,7 +45,7 @@ const SplashPage: React.FC<{}> = ({ children }) => {
const splash = (
<Animated.View style={[styles.splashContainer, animatedStyles]} pointerEvents="none">
<GradientBackground style={styles.background}>
<GradientBackground style={styles.background} height="100%">
<View style={styles.logoContainer}>
<Image style={styles.image} source={require('@res/casette.png')} fadeDuration={0} />
<Text style={styles.text}>subtracks</Text>

178
app/state/cache.ts
View File

@@ -1,10 +1,8 @@
import { CacheFile, CacheImageSize, CacheItemType, CacheItemTypeKey, CacheRequest } from '@app/models/cache'
import { mkdir, rmdir } from '@app/util/fs'
import PromiseQueue from '@app/util/PromiseQueue'
import produce from 'immer'
import RNFS from 'react-native-fs'
import { GetState, SetState } from 'zustand'
import { Store } from './store'
import { GetStore, SetStore } from './store'
const queues: Record<CacheItemTypeKey, PromiseQueue> = {
coverArt: new PromiseQueue(5),
@@ -20,16 +18,6 @@ export type CacheDirsByServer = Record<string, Record<CacheItemTypeKey, string>>
export type CacheFilesByServer = Record<string, Record<CacheItemTypeKey, Record<string, CacheFile>>>
export type CacheRequestsByServer = Record<string, Record<CacheItemTypeKey, Record<string, CacheRequest>>>
// export type DownloadedItemsByServer = Record<
// string,
// {
// songs: { [songId: string]: DownloadedSong }
// albums: { [albumId: string]: DownloadedAlbum }
// artists: { [songId: string]: DownloadedArtist }
// playlists: { [playlistId: string]: DownloadedPlaylist }
// }
// >
export type CacheSlice = {
cacheItem: (
key: CacheItemTypeKey,
@@ -51,13 +39,7 @@ export type CacheSlice = {
clearImageCache: () => Promise<void>
}
export const selectCache = {
cacheItem: (store: CacheSlice) => store.cacheItem,
fetchCoverArtFilePath: (store: CacheSlice) => store.fetchCoverArtFilePath,
clearImageCache: (store: CacheSlice) => store.clearImageCache,
}
export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): CacheSlice => ({
export const createCacheSlice = (set: SetStore, get: GetStore): CacheSlice => ({
// cache: {},
cacheDirs: {},
cacheFiles: {},
@@ -69,7 +51,7 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
return
}
const activeServerId = get().settings.activeServer
const activeServerId = get().settings.activeServerId
if (!activeServerId) {
return
}
@@ -115,34 +97,28 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
// },
}).promise
set(
produce<CacheSlice>(state => {
state.cacheRequests[activeServerId][key][itemId].progress = 1
delete state.cacheRequests[activeServerId][key][itemId].promise
}),
)
set(state => {
state.cacheRequests[activeServerId][key][itemId].progress = 1
delete state.cacheRequests[activeServerId][key][itemId].promise
})
} catch {
set(
produce<CacheSlice>(state => {
delete state.cacheFiles[activeServerId][key][itemId]
delete state.cacheRequests[activeServerId][key][itemId]
}),
)
set(state => {
delete state.cacheFiles[activeServerId][key][itemId]
delete state.cacheRequests[activeServerId][key][itemId]
})
}
})
set(state => {
state.cacheFiles[activeServerId][key][itemId] = {
path,
date: Date.now(),
permanent: false,
}
state.cacheRequests[activeServerId][key][itemId] = {
progress: 0,
promise,
}
})
set(
produce<Store>(state => {
state.cacheFiles[activeServerId][key][itemId] = {
path,
date: Date.now(),
permanent: false,
}
state.cacheRequests[activeServerId][key][itemId] = {
progress: 0,
promise,
}
}),
)
return await promise
},
@@ -152,7 +128,7 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
return
}
const activeServerId = get().settings.activeServer
const activeServerId = get().settings.activeServerId
if (!activeServerId) {
return
}
@@ -183,54 +159,48 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
await mkdir(`${RNFS.DocumentDirectoryPath}/servers/${serverId}/${type}`)
}
set(
produce<CacheSlice>(state => {
state.cacheFiles[serverId] = {
set(state => {
state.cacheFiles[serverId] = {
song: {},
coverArt: {},
coverArtThumb: {},
artistArt: {},
artistArtThumb: {},
}
})
get().prepareCache(serverId)
},
prepareCache: serverId => {
set(state => {
if (!state.cacheDirs[serverId]) {
state.cacheDirs[serverId] = {
song: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/song`,
coverArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArt`,
coverArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArtThumb`,
artistArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArt`,
artistArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArtThumb`,
}
}
if (!state.cacheRequests[serverId]) {
state.cacheRequests[serverId] = {
song: {},
coverArt: {},
coverArtThumb: {},
artistArt: {},
artistArtThumb: {},
}
}),
)
get().prepareCache(serverId)
},
prepareCache: serverId => {
set(
produce<CacheSlice>(state => {
if (!state.cacheDirs[serverId]) {
state.cacheDirs[serverId] = {
song: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/song`,
coverArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArt`,
coverArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArtThumb`,
artistArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArt`,
artistArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArtThumb`,
}
}
if (!state.cacheRequests[serverId]) {
state.cacheRequests[serverId] = {
song: {},
coverArt: {},
coverArtThumb: {},
artistArt: {},
artistArtThumb: {},
}
}
}),
)
}
})
},
pendingRemoval: {},
removeCache: async serverId => {
set(
produce<CacheSlice>(state => {
state.pendingRemoval[serverId] = true
}),
)
set(state => {
state.pendingRemoval[serverId] = true
})
const cacheRequests = get().cacheRequests[serverId]
const pendingRequests: Promise<void>[] = []
@@ -245,21 +215,19 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
await Promise.all(pendingRequests)
await rmdir(`${RNFS.DocumentDirectoryPath}/servers/${serverId}`)
set(
produce<CacheSlice>(state => {
delete state.pendingRemoval[serverId]
set(state => {
delete state.pendingRemoval[serverId]
if (state.cacheDirs[serverId]) {
delete state.cacheDirs[serverId]
}
if (state.cacheFiles[serverId]) {
delete state.cacheFiles[serverId]
}
if (state.cacheRequests[serverId]) {
delete state.cacheRequests[serverId]
}
}),
)
if (state.cacheDirs[serverId]) {
delete state.cacheDirs[serverId]
}
if (state.cacheFiles[serverId]) {
delete state.cacheFiles[serverId]
}
if (state.cacheRequests[serverId]) {
delete state.cacheRequests[serverId]
}
})
},
clearImageCache: async () => {
@@ -280,14 +248,12 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
await rmdir(get().cacheDirs[serverId].artistArt)
await mkdir(get().cacheDirs[serverId].artistArt)
set(
produce<CacheSlice>(state => {
state.cacheFiles[serverId].coverArt = {}
state.cacheFiles[serverId].coverArtThumb = {}
state.cacheFiles[serverId].artistArt = {}
state.cacheFiles[serverId].artistArtThumb = {}
}),
)
set(state => {
state.cacheFiles[serverId].coverArt = {}
state.cacheFiles[serverId].coverArtThumb = {}
state.cacheFiles[serverId].artistArt = {}
state.cacheFiles[serverId].artistArtThumb = {}
})
}
},
})

521
app/state/library.ts Normal file
View File

@@ -0,0 +1,521 @@
import { Album, Artist, ArtistInfo, Playlist, SearchResults, Song } from '@app/models/library'
import { ById, OneToMany } from '@app/models/state'
import { GetStore, SetStore, Store } from '@app/state/store'
import {
AlbumID3Element,
ArtistID3Element,
ArtistInfo2Element,
ChildElement,
PlaylistElement,
} from '@app/subsonic/elements'
import { GetAlbumList2Params, Search3Params, StarParams } from '@app/subsonic/params'
import {
GetAlbumList2Response,
GetAlbumResponse,
GetArtistInfo2Response,
GetArtistResponse,
GetArtistsResponse,
GetPlaylistResponse,
GetPlaylistsResponse,
GetSongResponse,
GetTopSongsResponse,
Search3Response,
} from '@app/subsonic/responses'
import PromiseQueue from '@app/util/PromiseQueue'
import { mapId, mergeById, reduceById } from '@app/util/state'
import { WritableDraft } from 'immer/dist/types/types-external'
import pick from 'lodash.pick'
const songCoverArtQueue = new PromiseQueue(2)
export type LibrarySlice = {
library: {
artists: ById<Artist>
artistInfo: ById<ArtistInfo>
artistAlbums: OneToMany
artistNameTopSongs: OneToMany
artistOrder: string[]
albums: ById<Album>
albumSongs: OneToMany
playlists: ById<Playlist>
playlistSongs: OneToMany
songs: ById<Song>
}
resetLibrary: (state?: WritableDraft<Store>) => void
fetchArtists: () => Promise<void>
fetchArtist: (id: string) => Promise<void>
fetchArtistInfo: (artistId: string) => Promise<void>
fetchArtistTopSongs: (artistName: string) => Promise<void>
fetchAlbum: (id: string) => Promise<void>
fetchPlaylists: () => Promise<void>
fetchPlaylist: (id: string) => Promise<void>
fetchSong: (id: string) => Promise<void>
fetchAlbumList: (params: GetAlbumList2Params) => Promise<string[]>
fetchSearchResults: (params: Search3Params) => Promise<SearchResults>
star: (params: StarParams) => Promise<void>
unstar: (params: StarParams) => Promise<void>
_fixSongCoverArt: (songs: Song[]) => Promise<void>
}
const defaultLibrary = () => ({
artists: {},
artistAlbums: {},
artistInfo: {},
artistNameTopSongs: {},
artistOrder: [],
albums: {},
albumSongs: {},
playlists: {},
playlistSongs: {},
songs: {},
})
export const createLibrarySlice = (set: SetStore, get: GetStore): LibrarySlice => ({
library: defaultLibrary(),
resetLibrary: state => {
if (state) {
state.library = defaultLibrary()
return
}
set(store => {
store.library = defaultLibrary()
})
},
fetchArtists: async () => {
const client = get().client
if (!client) {
return
}
let response: GetArtistsResponse
try {
response = await client.getArtists()
} catch {
return
}
const artists = response.data.artists.map(mapArtist)
const artistsById = reduceById(artists)
const artistIds = mapId(artists)
set(state => {
state.library.artists = artistsById
state.library.artistAlbums = pick(state.library.artistAlbums, artistIds)
state.library.artistOrder = artistIds
})
},
fetchArtist: async id => {
const client = get().client
if (!client) {
return
}
let response: GetArtistResponse
try {
response = await client.getArtist({ id })
} catch {
return
}
const artist = mapArtist(response.data.artist)
const albums = response.data.albums.map(mapAlbum)
const albumsById = reduceById(albums)
set(state => {
state.library.artists[id] = artist
state.library.artistAlbums[id] = mapId(albums)
mergeById(state.library.albums, albumsById)
})
},
fetchArtistInfo: async id => {
const client = get().client
if (!client) {
return
}
let response: GetArtistInfo2Response
try {
response = await client.getArtistInfo2({ id })
} catch {
return
}
const info = mapArtistInfo(id, response.data.artistInfo)
set(state => {
state.library.artistInfo[id] = info
})
},
fetchArtistTopSongs: async artistName => {
const client = get().client
if (!client) {
return
}
let response: GetTopSongsResponse
try {
response = await client.getTopSongs({ artist: artistName, count: 50 })
} catch {
return
}
const topSongs = response.data.songs.map(mapSong)
const topSongsById = reduceById(topSongs)
get()._fixSongCoverArt(topSongs)
set(state => {
mergeById(state.library.songs, topSongsById)
state.library.artistNameTopSongs[artistName] = mapId(topSongs)
})
},
fetchAlbum: async id => {
const client = get().client
if (!client) {
return
}
let response: GetAlbumResponse
try {
response = await client.getAlbum({ id })
} catch {
return
}
const album = mapAlbum(response.data.album)
const songs = response.data.songs.map(mapSong)
const songsById = reduceById(songs)
get()._fixSongCoverArt(songs)
set(state => {
state.library.albums[id] = album
state.library.albumSongs[id] = mapId(songs)
mergeById(state.library.songs, songsById)
})
},
fetchPlaylists: async () => {
const client = get().client
if (!client) {
return
}
let response: GetPlaylistsResponse
try {
response = await client.getPlaylists()
} catch {
return
}
const playlists = response.data.playlists.map(mapPlaylist)
const playlistsById = reduceById(playlists)
set(state => {
state.library.playlists = playlistsById
state.library.playlistSongs = pick(state.library.playlistSongs, mapId(playlists))
})
},
fetchPlaylist: async id => {
const client = get().client
if (!client) {
return
}
let response: GetPlaylistResponse
try {
response = await client.getPlaylist({ id })
} catch {
return
}
const playlist = mapPlaylist(response.data.playlist)
const songs = response.data.playlist.songs.map(mapSong)
const songsById = reduceById(songs)
get()._fixSongCoverArt(songs)
set(state => {
state.library.playlists[id] = playlist
state.library.playlistSongs[id] = mapId(songs)
mergeById(state.library.songs, songsById)
})
},
fetchSong: async id => {
const client = get().client
if (!client) {
return
}
let response: GetSongResponse
try {
response = await client.getSong({ id })
} catch {
return
}
const song = mapSong(response.data.song)
get()._fixSongCoverArt([song])
set(state => {
state.library.songs[id] = song
})
},
fetchAlbumList: async params => {
const client = get().client
if (!client) {
return []
}
let response: GetAlbumList2Response
try {
response = await client.getAlbumList2(params)
} catch {
return []
}
const albums = response.data.albums.map(mapAlbum)
const albumsById = reduceById(albums)
set(state => {
mergeById(state.library.albums, albumsById)
})
return mapId(albums)
},
fetchSearchResults: async params => {
const empty = { artists: [], albums: [], songs: [] }
const client = get().client
if (!client) {
return empty
}
let response: Search3Response
try {
response = await client.search3(params)
} catch {
return empty
}
const artists = response.data.artists.map(mapArtist)
const artistsById = reduceById(artists)
const albums = response.data.albums.map(mapAlbum)
const albumsById = reduceById(albums)
const songs = response.data.songs.map(mapSong)
const songsById = reduceById(songs)
get()._fixSongCoverArt(songs)
set(state => {
mergeById(state.library.artists, artistsById)
mergeById(state.library.albums, albumsById)
mergeById(state.library.songs, songsById)
})
return {
artists: mapId(artists),
albums: mapId(albums),
songs: mapId(songs),
}
},
star: async params => {
const client = get().client
if (!client) {
return
}
let id = '-1'
let entity: 'songs' | 'artists' | 'albums' = 'songs'
if (params.id) {
id = params.id
entity = 'songs'
} else if (params.albumId) {
id = params.albumId
entity = 'albums'
} else if (params.artistId) {
id = params.artistId
entity = 'artists'
} else {
return
}
const item = get().library[entity][id]
const originalValue = item ? item.starred : null
set(state => {
state.library[entity][id].starred = new Date()
})
try {
await client.star(params)
} catch {
set(state => {
if (originalValue !== null) {
state.library[entity][id].starred = originalValue
}
})
}
},
unstar: async params => {
const client = get().client
if (!client) {
return
}
let id = '-1'
let entity: 'songs' | 'artists' | 'albums' = 'songs'
if (params.id) {
id = params.id
entity = 'songs'
} else if (params.albumId) {
id = params.albumId
entity = 'albums'
} else if (params.artistId) {
id = params.artistId
entity = 'artists'
} else {
return
}
const item = get().library[entity][id]
const originalValue = item ? item.starred : null
set(state => {
state.library[entity][id].starred = undefined
})
try {
await client.unstar(params)
} catch {
set(state => {
if (originalValue !== null) {
state.library[entity][id].starred = originalValue
}
})
}
},
// song cover art comes back from the api as a unique id per song even if it all points to the same
// album art, which prevents us from caching it once, so we need to use the album's cover art
_fixSongCoverArt: async songs => {
const client = get().client
if (!client) {
return
}
const albumsToGet: ById<Song[]> = {}
for (const song of songs) {
if (!song.albumId) {
continue
}
let album = get().library.albums[song.albumId]
if (album) {
song.coverArt = album.coverArt
continue
}
albumsToGet[song.albumId] = albumsToGet[song.albumId] || []
albumsToGet[song.albumId].push(song)
}
for (const id in albumsToGet) {
songCoverArtQueue
.enqueue(() => client.getAlbum({ id }))
.then(res => {
const album = mapAlbum(res.data.album)
set(state => {
state.library.albums[album.id] = album
for (const song of albumsToGet[album.id]) {
state.library.songs[song.id].coverArt = album.coverArt
}
})
})
}
},
})
function mapArtist(artist: ArtistID3Element): Artist {
return {
itemType: 'artist',
id: artist.id,
name: artist.name,
starred: artist.starred,
coverArt: artist.coverArt,
}
}
function mapArtistInfo(id: string, info: ArtistInfo2Element): ArtistInfo {
return {
id,
smallImageUrl: info.smallImageUrl,
largeImageUrl: info.largeImageUrl,
}
}
function mapAlbum(album: AlbumID3Element): Album {
return {
itemType: 'album',
id: album.id,
name: album.name,
artist: album.artist,
artistId: album.artistId,
starred: album.starred,
coverArt: album.coverArt,
year: album.year,
}
}
function mapPlaylist(playlist: PlaylistElement): Playlist {
return {
itemType: 'playlist',
id: playlist.id,
name: playlist.name,
comment: playlist.comment,
coverArt: playlist.coverArt,
}
}
function mapSong(song: ChildElement): Song {
return {
itemType: 'song',
id: song.id,
album: song.album,
albumId: song.albumId,
artist: song.artist,
artistId: song.artistId,
title: song.title,
track: song.track,
discNumber: song.discNumber,
duration: song.duration,
starred: song.starred,
}
}

25
app/state/migrations.ts
View File

@@ -1,9 +1,34 @@
import { Server } from '@app/models/settings'
import { ById } from '@app/models/state'
const migrations: Array<(state: any) => any> = [
state => {
for (let server of state.settings.servers) {
server.usePlainPassword = false
}
return state
},
state => {
state.settings.servers = state.settings.servers.reduce((acc: ById<Server>, server: Server) => {
acc[server.id] = server
return acc
}, {} as ById<Server>)
state.settings.activeServerId = state.settings.activeServer
delete state.settings.activeServer
state.settings.screens.home.listTypes = [...state.settings.screens.home.lists]
delete state.settings.screens.home.lists
state.settings.screens.library.albumsFilter = { ...state.settings.screens.library.albums }
delete state.settings.screens.library.albums
state.settings.screens.library.artistsFilter = { ...state.settings.screens.library.artists }
delete state.settings.screens.library.artists
delete state.settings.estimateContentLength
return state
},
]

471
app/state/music.ts
View File

@@ -1,471 +0,0 @@
import {
AlbumListItem,
AlbumWithSongs,
Artist,
ArtistInfo,
HomeLists,
PlaylistListItem,
PlaylistWithSongs,
SearchResults,
StarrableItemType,
} from '@app/models/music'
import { Store } from '@app/state/store'
import { GetAlbumList2Params, GetAlbumList2TypeBase, Search3Params, StarParams } from '@app/subsonic/params'
import produce from 'immer'
import { GetState, SetState } from 'zustand'
export type MusicSlice = {
//
// family-style state
//
artistInfo: { [id: string]: ArtistInfo }
fetchArtistInfo: (id: string) => Promise<ArtistInfo | undefined>
albumsWithSongs: { [id: string]: AlbumWithSongs }
fetchAlbumWithSongs: (id: string) => Promise<AlbumWithSongs | undefined>
playlistsWithSongs: { [id: string]: PlaylistWithSongs }
fetchPlaylistWithSongs: (id: string) => Promise<PlaylistWithSongs | undefined>
//
// lists-style state
//
fetchArtists: (size?: number, offset?: number) => Promise<Artist[]>
fetchPlaylists: () => Promise<PlaylistListItem[]>
fetchAlbums: () => Promise<AlbumListItem[]>
fetchSearchResults: (
query: string,
type?: 'album' | 'song' | 'artist',
size?: number,
offset?: number,
) => Promise<SearchResults>
homeLists: HomeLists
homeListsUpdating: boolean
fetchHomeLists: () => Promise<void>
clearHomeLists: () => void
//
// actions, etc.
//
starredSongs: { [id: string]: boolean }
starredAlbums: { [id: string]: boolean }
starredArtists: { [id: string]: boolean }
starItem: (id: string, type: StarrableItemType, unstar?: boolean) => Promise<void>
albumIdCoverArt: { [id: string]: string | undefined }
albumIdCoverArtRequests: { [id: string]: Promise<void> }
fetchAlbumCoverArt: (id: string) => Promise<void>
getAlbumCoverArt: (id: string | undefined) => Promise<string | undefined>
}
export const selectMusic = {
fetchArtistInfo: (state: Store) => state.fetchArtistInfo,
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,
}
function reduceStarred(
starredType: { [id: string]: boolean },
items: { id: string; starred?: Date | boolean }[],
): { [id: string]: boolean } {
return {
...starredType,
...items.reduce((acc, val) => {
acc[val.id] = !!val.starred
return acc
}, {} as { [id: string]: boolean }),
}
}
export const createMusicSlice = (set: SetState<Store>, get: GetState<Store>): MusicSlice => ({
artistInfo: {},
fetchArtistInfo: async id => {
const client = get().client
if (!client) {
return undefined
}
try {
const [artistResponse, artistInfoResponse] = await Promise.all([
client.getArtist({ id }),
client.getArtistInfo2({ id }),
])
const topSongsResponse = await client.getTopSongs({ artist: artistResponse.data.artist.name, count: 50 })
const artistInfo = await get().mapArtistInfo(
artistResponse.data,
artistInfoResponse.data.artistInfo,
topSongsResponse.data.songs,
)
set(
produce<MusicSlice>(state => {
state.artistInfo[id] = artistInfo
state.starredSongs = reduceStarred(state.starredSongs, artistInfo.topSongs)
state.starredArtists = reduceStarred(state.starredArtists, [artistInfo])
state.starredAlbums = reduceStarred(state.starredAlbums, artistInfo.albums)
}),
)
return artistInfo
} catch {
return undefined
}
},
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<MusicSlice>(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<MusicSlice>(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) {
return []
}
try {
const response = await client.getArtists()
const artists = response.data.artists.map(get().mapArtistID3toArtist)
set(
produce<MusicSlice>(state => {
state.starredArtists = reduceStarred(state.starredArtists, artists)
}),
)
return artists
} catch {
return []
}
},
fetchPlaylists: async () => {
const client = get().client
if (!client) {
return []
}
try {
const response = await client.getPlaylists()
return response.data.playlists.map(get().mapPlaylistListItem)
} catch {
return []
}
},
fetchAlbums: async (size = 500, offset = 0) => {
const client = get().client
if (!client) {
return []
}
try {
const filter = get().settings.screens.library.albums
let params: GetAlbumList2Params
switch (filter.type) {
case 'byYear':
params = {
size,
offset,
type: filter.type,
fromYear: filter.fromYear,
toYear: filter.toYear,
}
break
case 'byGenre':
params = {
size,
offset,
type: filter.type,
genre: filter.genre,
}
break
default:
params = {
size,
offset,
type: filter.type,
}
break
}
const response = await client.getAlbumList2(params)
const albums = response.data.albums.map(get().mapAlbumID3toAlbumListItem)
set(
produce<MusicSlice>(state => {
state.starredAlbums = reduceStarred(state.starredAlbums, albums)
}),
)
return albums
} catch {
return []
}
},
fetchSearchResults: async (query, type, size, offset) => {
if (query.length < 2) {
return { artists: [], albums: [], songs: [] }
}
const client = get().client
if (!client) {
return { artists: [], albums: [], songs: [] }
}
try {
const params: Search3Params = { query }
if (type === 'album') {
params.albumCount = size
params.albumOffset = offset
} else if (type === 'artist') {
params.artistCount = size
params.artistOffset = offset
} else if (type === 'song') {
params.songCount = size
params.songOffset = offset
} else {
params.albumCount = 5
params.artistCount = 5
params.songCount = 5
}
const response = await client.search3(params)
const artists = response.data.artists.map(get().mapArtistID3toArtist)
const albums = response.data.albums.map(get().mapAlbumID3toAlbumListItem)
const songs = await get().mapChildrenToSongs(response.data.songs)
set(
produce<MusicSlice>(state => {
state.starredSongs = reduceStarred(state.starredSongs, songs)
state.starredArtists = reduceStarred(state.starredArtists, artists)
state.starredAlbums = reduceStarred(state.starredAlbums, albums)
}),
)
return { artists, albums, songs }
} catch {
return { artists: [], albums: [], songs: [] }
}
},
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<any>[] = []
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<MusicSlice>(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: {},
starItem: async (id, type, unstar = false) => {
const client = get().client
if (!client) {
return
}
let params: StarParams
let setStarred: (starred: boolean) => void
switch (type) {
case 'song':
params = { id }
setStarred = starred => {
set(
produce<MusicSlice>(state => {
state.starredSongs = reduceStarred(state.starredSongs, [{ id, starred }])
}),
)
}
break
case 'album':
params = { albumId: id }
setStarred = starred => {
set(
produce<MusicSlice>(state => {
state.starredAlbums = reduceStarred(state.starredAlbums, [{ id, starred }])
}),
)
}
break
case 'artist':
params = { artistId: id }
setStarred = starred => {
set(
produce<MusicSlice>(state => {
state.starredArtists = reduceStarred(state.starredArtists, [{ id, starred }])
}),
)
}
break
default:
return
}
try {
setStarred(!unstar)
if (unstar) {
await client.unstar(params)
} else {
await client.star(params)
}
} catch {
setStarred(unstar)
}
},
albumIdCoverArt: {},
albumIdCoverArtRequests: {},
fetchAlbumCoverArt: async id => {
const client = get().client
if (!client) {
return
}
const inProgress = get().albumIdCoverArtRequests[id]
if (inProgress !== undefined) {
return await inProgress
}
const promise = new Promise<void>(async resolve => {
try {
const response = await client.getAlbum({ id })
set(
produce<MusicSlice>(state => {
state.albumIdCoverArt[id] = response.data.album.coverArt
}),
)
} finally {
resolve()
}
}).then(() => {
set(
produce<MusicSlice>(state => {
delete state.albumIdCoverArtRequests[id]
}),
)
})
set(
produce<MusicSlice>(state => {
state.albumIdCoverArtRequests[id] = promise
}),
)
return await promise
},
getAlbumCoverArt: async id => {
if (!id) {
return
}
const existing = get().albumIdCoverArt[id]
if (existing) {
return existing
}
await get().fetchAlbumCoverArt(id)
return get().albumIdCoverArt[id]
},
})

142
app/state/musicmap.ts
View File

@@ -1,142 +0,0 @@
import {
AlbumListItem,
AlbumWithSongs,
Artist,
ArtistInfo,
PlaylistListItem,
PlaylistWithSongs,
Song,
} from '@app/models/music'
import {
AlbumID3Element,
ArtistID3Element,
ArtistInfo2Element,
ChildElement,
PlaylistElement,
PlaylistWithSongsElement,
} from '@app/subsonic/elements'
import { GetArtistResponse } from '@app/subsonic/responses'
import { GetState, SetState } from 'zustand'
import { Store } from './store'
export type MusicMapSlice = {
mapChildToSong: (child: ChildElement, coverArt?: string) => Promise<Song>
mapChildrenToSongs: (children: ChildElement[], coverArt?: string) => Promise<Song[]>
mapArtistID3toArtist: (artist: ArtistID3Element) => Artist
mapArtistInfo: (
artistResponse: GetArtistResponse,
info: ArtistInfo2Element,
topSongs: ChildElement[],
) => Promise<ArtistInfo>
mapAlbumID3toAlbumListItem: (album: AlbumID3Element) => AlbumListItem
mapAlbumID3toAlbum: (album: AlbumID3Element) => AlbumListItem
mapAlbumID3WithSongstoAlbumWithSongs: (album: AlbumID3Element, songs: ChildElement[]) => Promise<AlbumWithSongs>
mapPlaylistListItem: (playlist: PlaylistElement) => PlaylistListItem
mapPlaylistWithSongs: (playlist: PlaylistWithSongsElement) => Promise<PlaylistWithSongs>
}
export const createMusicMapSlice = (set: SetState<Store>, get: GetState<Store>): MusicMapSlice => ({
mapChildToSong: async (child, coverArt) => {
return {
itemType: 'song',
id: child.id,
album: child.album,
albumId: child.albumId,
artist: child.artist,
artistId: child.artistId,
title: child.title,
track: child.track,
discNumber: child.discNumber,
duration: child.duration,
starred: child.starred,
coverArt: coverArt || (await get().getAlbumCoverArt(child.albumId)),
streamUri: get().buildStreamUri(child.id),
}
},
mapChildrenToSongs: async (children, coverArt) => {
const albumIds = children.reduce((acc, val) => {
if (val.albumId && !(val.albumId in acc)) {
acc[val.albumId] = get().getAlbumCoverArt(val.albumId)
}
return acc
}, {} as Record<string, Promise<string | undefined>>)
await Promise.all(Object.values(albumIds))
const songs: Song[] = []
for (const child of children) {
songs.push(await get().mapChildToSong(child, coverArt || (await get().getAlbumCoverArt(child.albumId))))
}
return songs
},
mapArtistID3toArtist: artist => {
return {
itemType: 'artist',
id: artist.id,
name: artist.name,
starred: artist.starred,
coverArt: artist.coverArt,
}
},
mapArtistInfo: async (artistResponse, info, topSongs) => {
const { artist, albums } = artistResponse
const mappedAlbums = albums.map(get().mapAlbumID3toAlbum)
return {
...get().mapArtistID3toArtist(artist),
albums: mappedAlbums,
smallImageUrl: info.smallImageUrl,
largeImageUrl: info.largeImageUrl,
topSongs: (await get().mapChildrenToSongs(topSongs)).slice(0, 5),
}
},
mapAlbumID3toAlbumListItem: album => {
return {
itemType: 'album',
id: album.id,
name: album.name,
artist: album.artist,
artistId: album.artistId,
starred: album.starred,
coverArt: album.coverArt,
}
},
mapAlbumID3toAlbum: album => {
return {
...get().mapAlbumID3toAlbumListItem(album),
coverArt: album.coverArt,
year: album.year,
}
},
mapAlbumID3WithSongstoAlbumWithSongs: async (album, songs) => {
return {
...get().mapAlbumID3toAlbum(album),
songs: await get().mapChildrenToSongs(songs),
}
},
mapPlaylistListItem: playlist => {
return {
itemType: 'playlist',
id: playlist.id,
name: playlist.name,
comment: playlist.comment,
coverArt: playlist.coverArt,
}
},
mapPlaylistWithSongs: async playlist => {
return {
...get().mapPlaylistListItem(playlist),
songs: await get().mapChildrenToSongs(playlist.songs),
coverArt: playlist.coverArt,
}
},
})

204
app/state/settings.ts
View File

@@ -1,21 +1,36 @@
import { AppSettings, ArtistFilterSettings, AlbumFilterSettings, Server } from '@app/models/settings'
import { Store } from '@app/state/store'
import { AlbumFilterSettings, ArtistFilterSettings, Server } from '@app/models/settings'
import { ById } from '@app/models/state'
import { GetStore, SetStore } from '@app/state/store'
import { SubsonicApiClient } from '@app/subsonic/api'
import produce from 'immer'
import { GetState, SetState } from 'zustand'
export type SettingsSlice = {
settings: AppSettings
settings: {
servers: ById<Server>
activeServerId?: string
screens: {
home: {
listTypes: string[]
}
library: {
albumsFilter: AlbumFilterSettings
artistsFilter: ArtistFilterSettings
}
}
scrobble: boolean
maxBitrateWifi: number
maxBitrateMobile: number
minBuffer: number
maxBuffer: number
}
client?: SubsonicApiClient
setActiveServer: (id: string | undefined, force?: boolean) => Promise<void>
getActiveServer: () => Server | undefined
addServer: (server: Server) => Promise<void>
removeServer: (id: string) => Promise<void>
updateServer: (server: Server) => void
setScrobble: (scrobble: boolean) => void
setEstimateContentLength: (estimateContentLength: boolean) => void
setMaxBitrateWifi: (maxBitrateWifi: number) => void
setMaxBitrateMobile: (maxBitrateMobile: number) => void
setMinBuffer: (minBuffer: number) => void
@@ -27,66 +42,26 @@ export type SettingsSlice = {
setLibraryArtistFiler: (filter: ArtistFilterSettings) => void
}
export const selectSettings = {
client: (state: SettingsSlice) => state.client,
firstRun: (state: SettingsSlice) => state.settings.servers.length === 0,
activeServer: (state: SettingsSlice) => state.settings.servers.find(s => s.id === state.settings.activeServer),
setActiveServer: (state: SettingsSlice) => state.setActiveServer,
servers: (state: SettingsSlice) => state.settings.servers,
addServer: (state: SettingsSlice) => state.addServer,
removeServer: (state: SettingsSlice) => state.removeServer,
updateServer: (state: SettingsSlice) => state.updateServer,
homeLists: (state: SettingsSlice) => state.settings.screens.home.lists,
scrobble: (state: SettingsSlice) => state.settings.scrobble,
setScrobble: (state: SettingsSlice) => state.setScrobble,
estimateContentLength: (state: SettingsSlice) => state.settings.estimateContentLength,
setEstimateContentLength: (state: SettingsSlice) => state.setEstimateContentLength,
maxBitrateWifi: (state: SettingsSlice) => state.settings.maxBitrateWifi,
setMaxBitrateWifi: (state: SettingsSlice) => state.setMaxBitrateWifi,
maxBitrateMobile: (state: SettingsSlice) => state.settings.maxBitrateMobile,
setMaxBitrateMobile: (state: SettingsSlice) => state.setMaxBitrateMobile,
minBuffer: (state: SettingsSlice) => state.settings.minBuffer,
setMinBuffer: (state: SettingsSlice) => state.setMinBuffer,
maxBuffer: (state: SettingsSlice) => state.settings.maxBuffer,
setMaxBuffer: (state: SettingsSlice) => state.setMaxBuffer,
pingServer: (state: SettingsSlice) => state.pingServer,
setLibraryAlbumFilter: (state: SettingsSlice) => state.setLibraryAlbumFilter,
libraryAlbumFilter: (state: SettingsSlice) => state.settings.screens.library.albums,
setLibraryArtistFiler: (state: SettingsSlice) => state.setLibraryArtistFiler,
libraryArtistFilter: (state: SettingsSlice) => state.settings.screens.library.artists,
}
export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>): SettingsSlice => ({
export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice => ({
settings: {
servers: [],
servers: {},
screens: {
home: {
lists: ['frequent', 'recent', 'starred', 'random'],
listTypes: ['frequent', 'recent', 'starred', 'random'],
},
library: {
albums: {
albumsFilter: {
type: 'alphabeticalByArtist',
fromYear: 1,
toYear: 9999,
genre: '',
},
artists: {
artistsFilter: {
type: 'alphabeticalByName',
},
},
},
scrobble: false,
estimateContentLength: true,
maxBitrateWifi: 0,
maxBitrateMobile: 192,
minBuffer: 6,
@@ -95,12 +70,12 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
setActiveServer: async (id, force) => {
const servers = get().settings.servers
const currentActiveServerId = get().settings.activeServer
const newActiveServer = servers.find(s => s.id === id)
const currentActiveServerId = get().settings.activeServerId
const newActiveServer = id ? servers[id] : undefined
if (!newActiveServer) {
set({
client: undefined,
set(state => {
state.client = undefined
})
return
}
@@ -111,26 +86,21 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
get().prepareCache(newActiveServer.id)
set(
produce<Store>(state => {
state.settings.activeServer = newActiveServer.id
state.client = new SubsonicApiClient(newActiveServer)
}),
)
set(state => {
state.settings.activeServerId = newActiveServer.id
state.client = new SubsonicApiClient(newActiveServer)
get().resetLibrary(state)
})
},
getActiveServer: () => get().settings.servers.find(s => s.id === get().settings.activeServer),
addServer: async server => {
await get().createCache(server.id)
set(
produce<SettingsSlice>(state => {
state.settings.servers.push(server)
}),
)
set(state => {
state.settings.servers[server.id] = server
})
if (get().settings.servers.length === 1) {
if (Object.keys(get().settings.servers).length === 1) {
get().setActiveServer(server.id)
}
},
@@ -138,53 +108,31 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
removeServer: async id => {
await get().removeCache(id)
set(
produce<SettingsSlice>(state => {
state.settings.servers = state.settings.servers.filter(s => s.id !== id)
}),
)
set(state => {
delete state.settings.servers[id]
})
},
updateServer: server => {
set(
produce<SettingsSlice>(state => {
state.settings.servers = replaceIndex(
state.settings.servers,
state.settings.servers.findIndex(s => s.id === server.id),
server,
)
}),
)
set(state => {
state.settings.servers[server.id] = server
})
if (get().settings.activeServer === server.id) {
if (get().settings.activeServerId === server.id) {
get().setActiveServer(server.id, true)
}
},
setScrobble: scrobble => {
set(
produce<SettingsSlice>(state => {
state.settings.scrobble = scrobble
}),
)
},
setEstimateContentLength: estimateContentLength => {
set(
produce<SettingsSlice>(state => {
state.settings.estimateContentLength = estimateContentLength
}),
)
get().rebuildQueue()
set(state => {
state.settings.scrobble = scrobble
})
},
setMaxBitrateWifi: maxBitrateWifi => {
set(
produce<SettingsSlice>(state => {
state.settings.maxBitrateWifi = maxBitrateWifi
}),
)
set(state => {
state.settings.maxBitrateWifi = maxBitrateWifi
})
if (get().netState === 'wifi') {
get().rebuildQueue()
@@ -192,11 +140,9 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
},
setMaxBitrateMobile: maxBitrateMobile => {
set(
produce<SettingsSlice>(state => {
state.settings.maxBitrateMobile = maxBitrateMobile
}),
)
set(state => {
state.settings.maxBitrateMobile = maxBitrateMobile
})
if (get().netState === 'mobile') {
get().rebuildQueue()
@@ -208,11 +154,9 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
return
}
set(
produce<SettingsSlice>(state => {
state.settings.minBuffer = Math.max(1, Math.min(minBuffer, state.settings.maxBuffer / 2))
}),
)
set(state => {
state.settings.minBuffer = Math.max(1, Math.min(minBuffer, state.settings.maxBuffer / 2))
})
get().rebuildQueue()
},
@@ -222,11 +166,9 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
return
}
set(
produce<SettingsSlice>(state => {
state.settings.maxBuffer = Math.min(5 * 60, Math.max(maxBuffer, state.settings.minBuffer * 2))
}),
)
set(state => {
state.settings.maxBuffer = Math.min(5 * 60, Math.max(maxBuffer, state.settings.minBuffer * 2))
})
get().rebuildQueue()
},
@@ -252,24 +194,14 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
},
setLibraryAlbumFilter: filter => {
set(
produce<SettingsSlice>(state => {
state.settings.screens.library.albums = filter
}),
)
set(state => {
state.settings.screens.library.albumsFilter = filter
})
},
setLibraryArtistFiler: filter => {
set(
produce<SettingsSlice>(state => {
state.settings.screens.library.artists = filter
}),
)
set(state => {
state.settings.screens.library.artistsFilter = filter
})
},
})
function replaceIndex<T>(array: T[], index: number, replacement: T): T[] {
const start = array.slice(0, index)
const end = array.slice(index + 1)
return [...start, replacement, ...end]
}

137
app/state/store.ts
View File

@@ -1,19 +1,20 @@
import { createMusicSlice, MusicSlice } from '@app/state/music'
import { createSettingsSlice, SettingsSlice } from '@app/state/settings'
import AsyncStorage from '@react-native-async-storage/async-storage'
import create from 'zustand'
import { persist, StateStorage } from 'zustand/middleware'
import equal from 'fast-deep-equal'
import create, { GetState, Mutate, SetState, State, StateCreator, StateSelector, StoreApi } from 'zustand'
import { persist, subscribeWithSelector } from 'zustand/middleware'
import { CacheSlice, createCacheSlice } from './cache'
import { createLibrarySlice, LibrarySlice } from './library'
import migrations from './migrations'
import { createMusicMapSlice, MusicMapSlice } from './musicmap'
import { createTrackPlayerSlice, TrackPlayerSlice } from './trackplayer'
import { createTrackPlayerMapSlice, TrackPlayerMapSlice } from './trackplayermap'
import produce, { Draft } from 'immer'
import { WritableDraft } from 'immer/dist/internal'
const DB_VERSION = migrations.length
export type Store = SettingsSlice &
MusicSlice &
MusicMapSlice &
LibrarySlice &
TrackPlayerSlice &
TrackPlayerMapSlice &
CacheSlice & {
@@ -21,59 +22,83 @@ export type Store = SettingsSlice &
setHydrated: (hydrated: boolean) => void
}
const storage: StateStorage = {
getItem: async name => {
try {
return await AsyncStorage.getItem(name)
} catch (err) {
console.error(`getItem error (key: ${name})`, err)
return null
}
},
setItem: async (name, item) => {
try {
await AsyncStorage.setItem(name, item)
} catch (err) {
console.error(`setItem error (key: ${name})`, err)
}
},
}
export const useStore = create<Store>(
persist(
(set, get) => ({
...createSettingsSlice(set, get),
...createMusicSlice(set, get),
...createMusicMapSlice(set, get),
...createTrackPlayerSlice(set, get),
...createTrackPlayerMapSlice(set, get),
...createCacheSlice(set, get),
hydrated: false,
setHydrated: hydrated => set({ hydrated }),
}),
{
name: '@appStore',
version: DB_VERSION,
getStorage: () => storage,
whitelist: ['settings', 'cacheFiles'],
onRehydrateStorage: _preState => {
return async (postState, _error) => {
await postState?.setActiveServer(postState.settings.activeServer, true)
postState?.setHydrated(true)
}
// taken from zustand test examples:
// https://github.com/pmndrs/zustand/blob/v3.7.1/tests/middlewareTypes.test.tsx#L20
const immer =
<
T extends State,
CustomSetState extends SetState<T>,
CustomGetState extends GetState<T>,
CustomStoreApi extends StoreApi<T>,
>(
config: StateCreator<
T,
(partial: ((draft: Draft<T>) => void) | T, replace?: boolean) => void,
CustomGetState,
CustomStoreApi
>,
): StateCreator<T, CustomSetState, CustomGetState, CustomStoreApi> =>
(set, get, api) =>
config(
(partial, replace) => {
const nextState = typeof partial === 'function' ? produce(partial as (state: Draft<T>) => T) : (partial as T)
return set(nextState, replace)
},
migrate: (persistedState, version) => {
if (version > DB_VERSION) {
throw new Error('cannot migrate db on a downgrade, delete all data first')
}
get,
api,
)
for (let i = version; i < DB_VERSION; i++) {
persistedState = migrations[i](persistedState)
}
export type SetStore = (partial: Store | ((draft: WritableDraft<Store>) => void), replace?: boolean | undefined) => void
export type GetStore = GetState<Store>
return persistedState
// types taken from zustand test examples:
// https://github.com/pmndrs/zustand/blob/v3.7.1/tests/middlewareTypes.test.tsx#L584
export const useStore = create<
Store,
SetState<Store>,
GetState<Store>,
Mutate<StoreApi<Store>, [['zustand/subscribeWithSelector', never], ['zustand/persist', Partial<Store>]]>
>(
subscribeWithSelector(
persist(
immer((set, get) => ({
...createSettingsSlice(set, get),
...createLibrarySlice(set, get),
...createTrackPlayerSlice(set, get),
...createTrackPlayerMapSlice(set, get),
...createCacheSlice(set, get),
hydrated: false,
setHydrated: hydrated =>
set(state => {
state.hydrated = hydrated
}),
})),
{
name: '@appStore',
version: DB_VERSION,
getStorage: () => AsyncStorage,
partialize: state => ({ settings: state.settings, cacheFiles: state.cacheFiles }),
onRehydrateStorage: _preState => {
return async (postState, _error) => {
await postState?.setActiveServer(postState.settings.activeServerId, true)
postState?.setHydrated(true)
}
},
migrate: (persistedState, version) => {
if (version > DB_VERSION) {
throw new Error('cannot migrate db on a downgrade, delete all data first')
}
for (let i = version; i < DB_VERSION; i++) {
persistedState = migrations[i](persistedState)
}
return persistedState
},
},
},
),
),
)
export const useStoreDeep = <U>(stateSelector: StateSelector<Store, U>) => useStore(stateSelector, equal)

184
app/state/trackplayer.ts
View File

@@ -1,27 +1,10 @@
import { NoClientError } from '@app/models/error'
import { Song } from '@app/models/music'
import { Song } from '@app/models/library'
import { Progress, QueueContextType, TrackExt } from '@app/models/trackplayer'
import PromiseQueue from '@app/util/PromiseQueue'
import produce from 'immer'
import TrackPlayer, { PlayerOptions, RepeatMode, State, Track } from 'react-native-track-player'
import { GetState, SetState } from 'zustand'
import { Store } from './store'
export type TrackExt = Track & {
id: string
coverArt?: string
artistId?: string
albumId?: string
track?: number
discNumber?: number
}
export type Progress = {
position: number
duration: number
buffered: number
}
export type QueueContextType = 'album' | 'playlist' | 'song' | 'artist'
import TrackPlayer, { PlayerOptions, RepeatMode, State } from 'react-native-track-player'
import { GetStore, SetStore } from './store'
export type TrackPlayerSlice = {
queueName?: string
@@ -74,55 +57,26 @@ export type TrackPlayerSlice = {
getPlayerOptions: () => PlayerOptions
}
export const selectTrackPlayer = {
queueName: (store: TrackPlayerSlice) => store.queueName,
setQueueName: (store: TrackPlayerSlice) => store.setQueueName,
queueContextType: (store: TrackPlayerSlice) => store.queueContextType,
setQueueContextType: (store: TrackPlayerSlice) => store.setQueueContextType,
queueContextId: (store: TrackPlayerSlice) => store.queueContextId,
setQueueContextId: (store: TrackPlayerSlice) => store.setQueueContextId,
shuffleOrder: (store: TrackPlayerSlice) => store.shuffleOrder,
shuffled: (store: TrackPlayerSlice) => !!store.shuffleOrder,
toggleShuffle: (store: TrackPlayerSlice) => store.toggleShuffle,
repeatMode: (store: TrackPlayerSlice) => store.repeatMode,
toggleRepeatMode: (store: TrackPlayerSlice) => store.toggleRepeatMode,
playerState: (store: TrackPlayerSlice) => store.playerState,
setPlayerState: (store: TrackPlayerSlice) => store.setPlayerState,
currentTrack: (store: TrackPlayerSlice) => store.currentTrack,
currentTrackIdx: (store: TrackPlayerSlice) => store.currentTrackIdx,
setCurrentTrackIdx: (store: TrackPlayerSlice) => store.setCurrentTrackIdx,
queue: (store: TrackPlayerSlice) => store.queue,
setQueue: (store: TrackPlayerSlice) => store.setQueue,
progress: (store: TrackPlayerSlice) => store.progress,
setProgress: (store: TrackPlayerSlice) => store.setProgress,
scrobbleTrack: (store: TrackPlayerSlice) => store.scrobbleTrack,
setNetState: (store: TrackPlayerSlice) => store.setNetState,
buildStreamUri: (store: TrackPlayerSlice) => store.buildStreamUri,
resetTrackPlayerState: (store: TrackPlayerSlice) => store.resetTrackPlayerState,
}
export const trackPlayerCommands = new PromiseQueue(1)
export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store>): TrackPlayerSlice => ({
export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlayerSlice => ({
queueName: undefined,
setQueueName: name => set({ queueName: name }),
setQueueName: name =>
set(state => {
state.queueName = name
}),
queueContextType: undefined,
setQueueContextType: queueContextType => set({ queueContextType }),
setQueueContextType: queueContextType =>
set(state => {
state.queueContextType = queueContextType
}),
queueContextId: undefined,
setQueueContextId: queueContextId => set({ queueContextId }),
setQueueContextId: queueContextId =>
set(state => {
state.queueContextId = queueContextId
}),
shuffleOrder: undefined,
toggleShuffle: async () => {
@@ -140,7 +94,9 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
}
await TrackPlayer.add(tracks)
set({ shuffleOrder })
set(state => {
state.shuffleOrder = shuffleOrder
})
} else {
const tracks = unshuffleTracks(queue, queueShuffleOrder)
@@ -155,11 +111,18 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
await TrackPlayer.add(tracks)
}
set({ shuffleOrder: undefined })
set(state => {
state.shuffleOrder = undefined
})
}
set({ queue: await getQueue() })
get().setCurrentTrackIdx(await getCurrentTrack())
const newQueue = await getQueue()
const newCurrentTrackIdx = await getCurrentTrack()
set(state => {
state.queue = newQueue
})
get().setCurrentTrackIdx(newCurrentTrackIdx)
})
},
@@ -182,12 +145,17 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
}
await TrackPlayer.setRepeatMode(nextMode)
set({ repeatMode: nextMode })
set(state => {
state.repeatMode = nextMode
})
})
},
playerState: State.None,
setPlayerState: playerState => set({ playerState }),
setPlayerState: playerState =>
set(state => {
state.playerState = playerState
}),
currentTrack: undefined,
currentTrackIdx: undefined,
@@ -201,7 +169,10 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
},
duckPaused: false,
setDuckPaused: duckPaused => set({ duckPaused }),
setDuckPaused: duckPaused =>
set(state => {
state.duckPaused = duckPaused
}),
queue: [],
setQueue: async (songs, name, contextType, contextId, playTrack, shuffle) => {
@@ -217,31 +188,27 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
let queue = await get().mapSongstoTrackExts(songs)
try {
for (const t of queue) {
t.url = get().buildStreamUri(t.id)
}
} catch {
return
}
if (shuffled) {
const { tracks, shuffleOrder } = shuffleTracks(queue, playTrack)
set({ shuffleOrder })
set(state => {
state.shuffleOrder = shuffleOrder
})
queue = tracks
playTrack = 0
} else {
set({ shuffleOrder: undefined })
set(state => {
state.shuffleOrder = undefined
})
}
playTrack = playTrack || 0
try {
set({
queue,
queueName: name,
queueContextType: contextType,
queueContextId: contextId,
set(state => {
state.queue = queue
state.queueName = name
state.queueContextType = contextType
state.queueContextId = contextId
})
get().setCurrentTrackIdx(playTrack)
@@ -264,7 +231,10 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
},
progress: { position: 0, duration: 0, buffered: 0 },
setProgress: progress => set({ progress }),
setProgress: progress =>
set(state => {
state.progress = progress
}),
scrobbleTrack: async id => {
const client = get().client
@@ -286,7 +256,9 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
if (netState === get().netState) {
return
}
set({ netState })
set(state => {
state.netState = netState
})
get().rebuildQueue()
},
@@ -298,7 +270,7 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
}
const currentTrack = await getCurrentTrack()
const state = await getPlayerState()
const playerState = await getPlayerState()
const position = (await TrackPlayer.getPosition()) || 0
const queueName = get().queueName
@@ -316,11 +288,11 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
return
}
set({
queue,
queueName,
queueContextId,
queueContextType,
set(state => {
state.queue = queue
state.queueName = queueName
state.queueContextType = queueContextType
state.queueContextId = queueContextId
})
get().setCurrentTrackIdx(currentTrack)
@@ -332,7 +304,7 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
await TrackPlayer.seekTo(position)
if (state === State.Playing || forcePlay) {
if (playerState === State.Playing || forcePlay) {
await TrackPlayer.play()
}
})
@@ -346,23 +318,23 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
return client.streamUri({
id,
estimateContentLength: get().settings.estimateContentLength,
estimateContentLength: true,
maxBitRate: get().netState === 'mobile' ? get().settings.maxBitrateMobile : get().settings.maxBitrateWifi,
})
},
resetTrackPlayerState: () => {
set({
queueName: undefined,
queueContextType: undefined,
queueContextId: undefined,
shuffleOrder: undefined,
repeatMode: RepeatMode.Off,
playerState: State.None,
currentTrack: undefined,
currentTrackIdx: undefined,
queue: [],
progress: { position: 0, duration: 0, buffered: 0 },
set(state => {
state.queueName = undefined
state.queueContextType = undefined
state.queueContextId = undefined
state.shuffleOrder = undefined
state.repeatMode = RepeatMode.Off
state.playerState = State.None
state.currentTrack = undefined
state.currentTrackIdx = undefined
state.queue = []
state.progress = { position: 0, duration: 0, buffered: 0 }
})
},

15
app/state/trackplayermap.ts
View File

@@ -1,8 +1,7 @@
import { Song } from '@app/models/music'
import { Song } from '@app/models/library'
import { TrackExt } from '@app/models/trackplayer'
import userAgent from '@app/util/userAgent'
import { GetState, SetState } from 'zustand'
import { Store } from './store'
import { TrackExt } from './trackplayer'
import { GetStore, SetStore } from '@app/state/store'
export type TrackPlayerMapSlice = {
mapSongtoTrackExt: (song: Song) => Promise<TrackExt>
@@ -10,11 +9,7 @@ export type TrackPlayerMapSlice = {
mapTrackExtToSong: (song: TrackExt) => Song
}
export const selectTrackPlayerMap = {
mapTrackExtToSong: (store: TrackPlayerMapSlice) => store.mapTrackExtToSong,
}
export const createTrackPlayerMapSlice = (set: SetState<Store>, get: GetState<Store>): TrackPlayerMapSlice => ({
export const createTrackPlayerMapSlice = (set: SetStore, get: GetStore): TrackPlayerMapSlice => ({
mapSongtoTrackExt: async song => {
let artwork = require('@res/fallback.png')
if (song.coverArt) {
@@ -29,7 +24,7 @@ export const createTrackPlayerMapSlice = (set: SetState<Store>, get: GetState<St
title: song.title,
artist: song.artist || 'Unknown Artist',
album: song.album || 'Unknown Album',
url: song.streamUri,
url: get().buildStreamUri(song.id),
userAgent,
artwork,
coverArt: song.coverArt,

93
app/subsonic/api.ts
View File

@@ -11,6 +11,7 @@ import {
GetMusicDirectoryParams,
GetPlaylistParams,
GetPlaylistsParams,
GetSongParams,
GetTopSongsParams,
ScrobbleParams,
Search3Params,
@@ -29,9 +30,10 @@ import {
GetMusicDirectoryResponse,
GetPlaylistResponse,
GetPlaylistsResponse,
GetSongResponse,
GetTopSongsResponse,
NullResponse,
Search3Response,
SubsonicResponse,
} from '@app/subsonic/responses'
import toast from '@app/util/toast'
import userAgent from '@app/util/userAgent'
@@ -131,81 +133,72 @@ export class SubsonicApiClient {
// System
//
async ping(): Promise<SubsonicResponse<null>> {
const xml = await this.apiGetXml('ping')
return new SubsonicResponse<null>(xml, null)
async ping(): Promise<NullResponse> {
return new NullResponse(await this.apiGetXml('ping'))
}
//
// Browsing
//
async getArtists(): Promise<SubsonicResponse<GetArtistsResponse>> {
const xml = await this.apiGetXml('getArtists')
return new SubsonicResponse<GetArtistsResponse>(xml, new GetArtistsResponse(xml))
async getArtists(): Promise<GetArtistsResponse> {
return new GetArtistsResponse(await this.apiGetXml('getArtists'))
}
async getIndexes(params?: GetIndexesParams): Promise<SubsonicResponse<GetIndexesResponse>> {
const xml = await this.apiGetXml('getIndexes', params)
return new SubsonicResponse<GetIndexesResponse>(xml, new GetIndexesResponse(xml))
async getIndexes(params?: GetIndexesParams): Promise<GetIndexesResponse> {
return new GetIndexesResponse(await this.apiGetXml('getIndexes', params))
}
async getMusicDirectory(params: GetMusicDirectoryParams): Promise<SubsonicResponse<GetMusicDirectoryResponse>> {
const xml = await this.apiGetXml('getMusicDirectory', params)
return new SubsonicResponse<GetMusicDirectoryResponse>(xml, new GetMusicDirectoryResponse(xml))
async getMusicDirectory(params: GetMusicDirectoryParams): Promise<GetMusicDirectoryResponse> {
return new GetMusicDirectoryResponse(await this.apiGetXml('getMusicDirectory', params))
}
async getAlbum(params: GetAlbumParams): Promise<SubsonicResponse<GetAlbumResponse>> {
const xml = await this.apiGetXml('getAlbum', params)
return new SubsonicResponse<GetAlbumResponse>(xml, new GetAlbumResponse(xml))
async getAlbum(params: GetAlbumParams): Promise<GetAlbumResponse> {
return new GetAlbumResponse(await this.apiGetXml('getAlbum', params))
}
async getArtistInfo(params: GetArtistInfoParams): Promise<SubsonicResponse<GetArtistInfoResponse>> {
const xml = await this.apiGetXml('getArtistInfo', params)
return new SubsonicResponse<GetArtistInfoResponse>(xml, new GetArtistInfoResponse(xml))
async getArtistInfo(params: GetArtistInfoParams): Promise<GetArtistInfoResponse> {
return new GetArtistInfoResponse(await this.apiGetXml('getArtistInfo', params))
}
async getArtistInfo2(params: GetArtistInfo2Params): Promise<SubsonicResponse<GetArtistInfo2Response>> {
const xml = await this.apiGetXml('getArtistInfo2', params)
return new SubsonicResponse<GetArtistInfo2Response>(xml, new GetArtistInfo2Response(xml))
async getArtistInfo2(params: GetArtistInfo2Params): Promise<GetArtistInfo2Response> {
return new GetArtistInfo2Response(await this.apiGetXml('getArtistInfo2', params))
}
async getArtist(params: GetArtistParams): Promise<SubsonicResponse<GetArtistResponse>> {
const xml = await this.apiGetXml('getArtist', params)
return new SubsonicResponse<GetArtistResponse>(xml, new GetArtistResponse(xml))
async getArtist(params: GetArtistParams): Promise<GetArtistResponse> {
return new GetArtistResponse(await this.apiGetXml('getArtist', params))
}
async getTopSongs(params: GetTopSongsParams): Promise<SubsonicResponse<GetTopSongsResponse>> {
const xml = await this.apiGetXml('getTopSongs', params)
return new SubsonicResponse<GetTopSongsResponse>(xml, new GetTopSongsResponse(xml))
async getTopSongs(params: GetTopSongsParams): Promise<GetTopSongsResponse> {
return new GetTopSongsResponse(await this.apiGetXml('getTopSongs', params))
}
async getSong(params: GetSongParams): Promise<GetSongResponse> {
return new GetSongResponse(await this.apiGetXml('getSong', params))
}
//
// Album/song lists
//
async getAlbumList(params: GetAlbumListParams): Promise<SubsonicResponse<GetAlbumListResponse>> {
const xml = await this.apiGetXml('getAlbumList', params)
return new SubsonicResponse<GetAlbumListResponse>(xml, new GetAlbumListResponse(xml))
async getAlbumList(params: GetAlbumListParams): Promise<GetAlbumListResponse> {
return new GetAlbumListResponse(await this.apiGetXml('getAlbumList', params))
}
async getAlbumList2(params: GetAlbumList2Params): Promise<SubsonicResponse<GetAlbumList2Response>> {
const xml = await this.apiGetXml('getAlbumList2', params)
return new SubsonicResponse<GetAlbumList2Response>(xml, new GetAlbumList2Response(xml))
async getAlbumList2(params: GetAlbumList2Params): Promise<GetAlbumList2Response> {
return new GetAlbumList2Response(await this.apiGetXml('getAlbumList2', params))
}
//
// Playlists
//
async getPlaylists(params?: GetPlaylistsParams): Promise<SubsonicResponse<GetPlaylistsResponse>> {
const xml = await this.apiGetXml('getPlaylists', params)
return new SubsonicResponse<GetPlaylistsResponse>(xml, new GetPlaylistsResponse(xml))
async getPlaylists(params?: GetPlaylistsParams): Promise<GetPlaylistsResponse> {
return new GetPlaylistsResponse(await this.apiGetXml('getPlaylists', params))
}
async getPlaylist(params: GetPlaylistParams): Promise<SubsonicResponse<GetPlaylistResponse>> {
const xml = await this.apiGetXml('getPlaylist', params)
return new SubsonicResponse<GetPlaylistResponse>(xml, new GetPlaylistResponse(xml))
async getPlaylist(params: GetPlaylistParams): Promise<GetPlaylistResponse> {
return new GetPlaylistResponse(await this.apiGetXml('getPlaylist', params))
}
//
@@ -224,27 +217,23 @@ export class SubsonicApiClient {
// Media annotation
//
async scrobble(params: ScrobbleParams): Promise<SubsonicResponse<undefined>> {
const xml = await this.apiGetXml('scrobble', params)
return new SubsonicResponse<undefined>(xml, undefined)
async scrobble(params: ScrobbleParams): Promise<NullResponse> {
return new NullResponse(await this.apiGetXml('scrobble', params))
}
async star(params: StarParams): Promise<SubsonicResponse<undefined>> {
const xml = await this.apiGetXml('star', params)
return new SubsonicResponse<undefined>(xml, undefined)
async star(params: StarParams): Promise<NullResponse> {
return new NullResponse(await this.apiGetXml('star', params))
}
async unstar(params: StarParams): Promise<SubsonicResponse<undefined>> {
const xml = await this.apiGetXml('unstar', params)
return new SubsonicResponse<undefined>(xml, undefined)
async unstar(params: StarParams): Promise<NullResponse> {
return new NullResponse(await this.apiGetXml('unstar', params))
}
//
// Searching
//
async search3(params: Search3Params): Promise<SubsonicResponse<Search3Response>> {
const xml = await this.apiGetXml('search3', params)
return new SubsonicResponse<Search3Response>(xml, new Search3Response(xml))
async search3(params: Search3Params): Promise<Search3Response> {
return new Search3Response(await this.apiGetXml('search3', params))
}
}

4
app/subsonic/params.ts
View File

@@ -27,6 +27,10 @@ export type GetArtistParams = {
id: string
}
export type GetSongParams = {
id: string
}
export type GetTopSongsParams = {
artist: string
count?: number

232
app/subsonic/responses.ts
View File

@@ -12,119 +12,160 @@ import {
export type ResponseStatus = 'ok' | 'failed'
export class SubsonicResponse<T> {
export class SubsonicResponse {
status: ResponseStatus
version: string
data: T
constructor(xml: Document, data: T) {
this.data = data
constructor(xml: Document) {
this.status = xml.documentElement.getAttribute('status') as ResponseStatus
this.version = xml.documentElement.getAttribute('version') as string
}
}
export class NullResponse extends SubsonicResponse {
data = null
}
//
// Browsing
//
export class GetArtistsResponse {
ignoredArticles: string
artists: ArtistID3Element[] = []
export class GetArtistsResponse extends SubsonicResponse {
data: {
ignoredArticles: string
artists: ArtistID3Element[]
}
constructor(xml: Document) {
this.ignoredArticles = xml.getElementsByTagName('artists')[0].getAttribute('ignoredArticles') as string
super(xml)
const artistElements = xml.getElementsByTagName('artist')
for (let i = 0; i < artistElements.length; i++) {
this.artists.push(new ArtistID3Element(artistElements[i]))
this.data = {
ignoredArticles: xml.getElementsByTagName('artists')[0].getAttribute('ignoredArticles') || '',
artists: Array.from(xml.getElementsByTagName('artist')).map(i => new ArtistID3Element(i)),
}
}
}
export class GetArtistResponse {
artist: ArtistID3Element
albums: AlbumID3Element[] = []
export class GetArtistResponse extends SubsonicResponse {
data: {
artist: ArtistID3Element
albums: AlbumID3Element[]
}
constructor(xml: Document) {
this.artist = new ArtistID3Element(xml.getElementsByTagName('artist')[0])
super(xml)
const albumElements = xml.getElementsByTagName('album')
for (let i = 0; i < albumElements.length; i++) {
this.albums.push(new AlbumID3Element(albumElements[i]))
this.data = {
artist: new ArtistID3Element(xml.getElementsByTagName('artist')[0]),
albums: Array.from(xml.getElementsByTagName('album')).map(i => new AlbumID3Element(i)),
}
}
}
export class GetIndexesResponse {
ignoredArticles: string
lastModified: number
artists: ArtistElement[] = []
export class GetIndexesResponse extends SubsonicResponse {
data: {
ignoredArticles: string
lastModified: number
artists: ArtistElement[]
}
constructor(xml: Document) {
super(xml)
const indexesElement = xml.getElementsByTagName('indexes')[0]
this.ignoredArticles = indexesElement.getAttribute('ignoredArticles') as string
this.lastModified = parseInt(indexesElement.getAttribute('lastModified') as string, 10)
const artistElements = xml.getElementsByTagName('artist')
for (let i = 0; i < artistElements.length; i++) {
this.artists.push(new ArtistElement(artistElements[i]))
this.data = {
ignoredArticles: indexesElement.getAttribute('ignoredArticles') || '',
lastModified: parseInt(indexesElement.getAttribute('lastModified') || '0', 10),
artists: Array.from(xml.getElementsByTagName('artist')).map(i => new ArtistElement(i)),
}
}
}
export class GetArtistInfoResponse {
artistInfo: ArtistInfoElement
constructor(xml: Document) {
this.artistInfo = new ArtistInfoElement(xml.getElementsByTagName('artistInfo')[0])
export class GetArtistInfoResponse extends SubsonicResponse {
data: {
artistInfo: ArtistInfoElement
}
}
export class GetArtistInfo2Response {
artistInfo: ArtistInfo2Element
constructor(xml: Document) {
this.artistInfo = new ArtistInfo2Element(xml.getElementsByTagName('artistInfo2')[0])
}
}
super(xml)
export class GetMusicDirectoryResponse {
directory: DirectoryElement
children: ChildElement[] = []
constructor(xml: Document) {
this.directory = new DirectoryElement(xml.getElementsByTagName('directory')[0])
const childElements = xml.getElementsByTagName('child')
for (let i = 0; i < childElements.length; i++) {
this.children.push(new ChildElement(childElements[i]))
this.data = {
artistInfo: new ArtistInfoElement(xml.getElementsByTagName('artistInfo')[0]),
}
}
}
export class GetAlbumResponse {
album: AlbumID3Element
songs: ChildElement[] = []
export class GetArtistInfo2Response extends SubsonicResponse {
data: {
artistInfo: ArtistInfo2Element
}
constructor(xml: Document) {
this.album = new AlbumID3Element(xml.getElementsByTagName('album')[0])
super(xml)
const childElements = xml.getElementsByTagName('song')
for (let i = 0; i < childElements.length; i++) {
this.songs.push(new ChildElement(childElements[i]))
this.data = {
artistInfo: new ArtistInfo2Element(xml.getElementsByTagName('artistInfo2')[0]),
}
}
}
export class GetTopSongsResponse {
songs: ChildElement[] = []
export class GetMusicDirectoryResponse extends SubsonicResponse {
data: {
directory: DirectoryElement
children: ChildElement[]
}
constructor(xml: Document) {
const childElements = xml.getElementsByTagName('song')
for (let i = 0; i < childElements.length; i++) {
this.songs.push(new ChildElement(childElements[i]))
super(xml)
this.data = {
directory: new DirectoryElement(xml.getElementsByTagName('directory')[0]),
children: Array.from(xml.getElementsByTagName('child')).map(i => new ChildElement(i)),
}
}
}
export class GetAlbumResponse extends SubsonicResponse {
data: {
album: AlbumID3Element
songs: ChildElement[]
}
constructor(xml: Document) {
super(xml)
this.data = {
album: new AlbumID3Element(xml.getElementsByTagName('album')[0]),
songs: Array.from(xml.getElementsByTagName('song')).map(i => new ChildElement(i)),
}
}
}
export class GetTopSongsResponse extends SubsonicResponse {
data: {
songs: ChildElement[]
}
constructor(xml: Document) {
super(xml)
this.data = {
songs: Array.from(xml.getElementsByTagName('song')).map(i => new ChildElement(i)),
}
}
}
export class GetSongResponse extends SubsonicResponse {
data: {
song: ChildElement
}
constructor(xml: Document) {
super(xml)
this.data = {
song: new ChildElement(xml.getElementsByTagName('song')[0]),
}
}
}
@@ -133,13 +174,16 @@ export class GetTopSongsResponse {
// Album/song lists
//
class BaseGetAlbumListResponse<T> {
albums: T[] = []
class BaseGetAlbumListResponse<T> extends SubsonicResponse {
data: {
albums: T[]
}
constructor(xml: Document, albumType: new (e: Element) => T) {
const albumElements = xml.getElementsByTagName('album')
for (let i = 0; i < albumElements.length; i++) {
this.albums.push(new albumType(albumElements[i]))
constructor(xml: Document, AlbumType: new (e: Element) => T) {
super(xml)
this.data = {
albums: Array.from(xml.getElementsByTagName('album')).map(i => new AlbumType(i)),
}
}
}
@@ -160,22 +204,31 @@ export class GetAlbumList2Response extends BaseGetAlbumListResponse<AlbumID3Elem
// Playlists
//
export class GetPlaylistsResponse {
playlists: PlaylistElement[] = []
export class GetPlaylistsResponse extends SubsonicResponse {
data: {
playlists: PlaylistElement[]
}
constructor(xml: Document) {
const playlistElements = xml.getElementsByTagName('playlist')
for (let i = 0; i < playlistElements.length; i++) {
this.playlists.push(new PlaylistElement(playlistElements[i]))
super(xml)
this.data = {
playlists: Array.from(xml.getElementsByTagName('playlist')).map(i => new PlaylistElement(i)),
}
}
}
export class GetPlaylistResponse {
playlist: PlaylistWithSongsElement
export class GetPlaylistResponse extends SubsonicResponse {
data: {
playlist: PlaylistWithSongsElement
}
constructor(xml: Document) {
this.playlist = new PlaylistWithSongsElement(xml.getElementsByTagName('playlist')[0])
super(xml)
this.data = {
playlist: new PlaylistWithSongsElement(xml.getElementsByTagName('playlist')[0]),
}
}
}
@@ -183,25 +236,20 @@ export class GetPlaylistResponse {
// Searching
//
export class Search3Response {
artists: ArtistID3Element[] = []
albums: AlbumID3Element[] = []
songs: ChildElement[] = []
export class Search3Response extends SubsonicResponse {
data: {
artists: ArtistID3Element[]
albums: AlbumID3Element[]
songs: ChildElement[]
}
constructor(xml: Document) {
const artistElements = xml.getElementsByTagName('artist')
for (let i = 0; i < artistElements.length; i++) {
this.artists.push(new ArtistID3Element(artistElements[i]))
}
super(xml)
const albumElements = xml.getElementsByTagName('album')
for (let i = 0; i < albumElements.length; i++) {
this.albums.push(new AlbumID3Element(albumElements[i]))
}
const songElements = xml.getElementsByTagName('song')
for (let i = 0; i < songElements.length; i++) {
this.songs.push(new ChildElement(songElements[i]))
this.data = {
artists: Array.from(xml.getElementsByTagName('artist')).map(i => new ArtistID3Element(i)),
albums: Array.from(xml.getElementsByTagName('album')).map(i => new AlbumID3Element(i)),
songs: Array.from(xml.getElementsByTagName('song')).map(i => new ChildElement(i)),
}
}
}

21
app/util/state.ts Normal file
View File

@@ -0,0 +1,21 @@
import { ById } from '@app/models/state'
import merge from 'lodash.merge'
export function reduceById<T extends { id: string }>(collection: T[]): ById<T> {
return collection.reduce((acc, value) => {
acc[value.id] = value
return acc
}, {} as ById<T>)
}
export function mergeById<T extends { [id: string]: unknown }>(object: T, source: T): void {
merge(object, source)
}
export function mapById<T>(object: ById<T>, ids: string[]): T[] {
return ids.map(id => object[id]).filter(a => a !== undefined)
}
export function mapId(entities: { id: string }[]): string[] {
return entities.map(e => e.id)
}