mirror of
https://github.com/austinried/subtracks.git
synced 2026-02-10 15:02:42 +01:00
React Query refactor (#91)
* initial react-query experiments * use queries for item screens send the data we do have over routing to prepopulate (album/playlist) use number for starred because sending Date freaks out react-navigation * add in equiv. song cover art fix * reorg, switch artistview over start mapping song cover art when any are available * refactor useStar to queries fix caching for starred items and album cover art * add hook to reset queries on server change * refactor search to use query * fix song cover art setting * use query for artistInfo * remove last bits of library state * cleanup * use query key factory already fixed one wrong key... * require coverart size * let's try no promise queues on these for now * image cache uses query * perf fix for playlist parsing also use placeholder data so we don't have to deal with staleness * drill that disabled also list controls doesn't need its own songs hook/copy * switch to react-native-blob-util for downloads slightly slower but allows us to use DownloadManager, which backgrounds downloads so they are no longer corrupted when the app suspends * add a fake "top songs" based on artist search then sorted by play count/ratings artistview should load now even if topSongs fails * try not to swap between topSongs/search on refetch set queueContext by song list so the index isn't off if the list changes * add content type validation for file fetching also try to speed up existing file return by limiting fs ops * if the HEAD fails, don't queue the download * clean up params * reimpl clear image cache * precompute contextId prevents wrong "is playing" when any mismatch between queue and list * clear images from all servers use external files dir instead of cache * fix pressable disabled flicker don't retry topsongs on failure try to optimize setqueue and fixcoverart a bit * wait for queries during clear * break out fetchExistingFile from fetchFile allows to tell if file is coming from disk or not only show placeholder/loading spinner if actually fetching image * forgot these wouldn't do anything with objects * remove query cache when switching servers * add content-disposition extension gathering add support for progress hook (needs native support still) * added custom RNBU pkg with progress changes * fully unmount tabs when server changes prevents unwanted requests, gives fresh start on switch fix fixCoverArt not re-rendering in certain cases on search * use serverId from fetch deps * fix lint * update licenses * just use the whole lodash package * make using cache buster optional
This commit is contained in:
austinried
GitHub
@@ -1,259 +0,0 @@
|
||||
import { CacheFile, CacheImageSize, CacheItemType, CacheItemTypeKey, CacheRequest } from '@app/models/cache'
|
||||
import { mkdir, rmdir } from '@app/util/fs'
|
||||
import PromiseQueue from '@app/util/PromiseQueue'
|
||||
import RNFS from 'react-native-fs'
|
||||
import { GetStore, SetStore } from './store'
|
||||
|
||||
const queues: Record<CacheItemTypeKey, PromiseQueue> = {
|
||||
coverArt: new PromiseQueue(5),
|
||||
coverArtThumb: new PromiseQueue(50),
|
||||
artistArt: new PromiseQueue(5),
|
||||
artistArtThumb: new PromiseQueue(50),
|
||||
song: new PromiseQueue(1),
|
||||
}
|
||||
|
||||
export type CacheDownload = CacheFile & CacheRequest
|
||||
|
||||
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 CacheSlice = {
|
||||
cacheItem: (
|
||||
key: CacheItemTypeKey,
|
||||
itemId: string,
|
||||
url: string | (() => string | Promise<string | undefined>),
|
||||
) => Promise<void>
|
||||
|
||||
// cache: DownloadedItemsByServer
|
||||
cacheDirs: CacheDirsByServer
|
||||
cacheFiles: CacheFilesByServer
|
||||
cacheRequests: CacheRequestsByServer
|
||||
|
||||
fetchCoverArtFilePath: (coverArt: string, size?: CacheImageSize) => Promise<string | undefined>
|
||||
|
||||
createCache: (serverId: string) => Promise<void>
|
||||
prepareCache: (serverId: string) => void
|
||||
pendingRemoval: Record<string, boolean>
|
||||
removeCache: (serverId: string) => Promise<void>
|
||||
clearImageCache: () => Promise<void>
|
||||
}
|
||||
|
||||
export const createCacheSlice = (set: SetStore, get: GetStore): CacheSlice => ({
|
||||
// cache: {},
|
||||
cacheDirs: {},
|
||||
cacheFiles: {},
|
||||
cacheRequests: {},
|
||||
|
||||
cacheItem: async (key, itemId, url) => {
|
||||
const client = get().client
|
||||
if (!client) {
|
||||
return
|
||||
}
|
||||
|
||||
const activeServerId = get().settings.activeServerId
|
||||
if (!activeServerId) {
|
||||
return
|
||||
}
|
||||
|
||||
if (get().pendingRemoval[activeServerId]) {
|
||||
return
|
||||
}
|
||||
|
||||
const inProgress = get().cacheRequests[activeServerId][key][itemId]
|
||||
if (inProgress && inProgress.promise !== undefined) {
|
||||
return await inProgress.promise
|
||||
}
|
||||
|
||||
const existing = get().cacheFiles[activeServerId][key][itemId]
|
||||
if (existing) {
|
||||
return
|
||||
}
|
||||
|
||||
const path = `${get().cacheDirs[activeServerId][key]}/${itemId}`
|
||||
|
||||
const promise = queues[key].enqueue(async () => {
|
||||
const urlResult = typeof url === 'string' ? url : url()
|
||||
const fromUrl = typeof urlResult === 'string' ? urlResult : await urlResult
|
||||
|
||||
try {
|
||||
if (!fromUrl) {
|
||||
throw new Error('cannot resolve url for cache request')
|
||||
}
|
||||
|
||||
await RNFS.downloadFile({
|
||||
fromUrl,
|
||||
toFile: path,
|
||||
// progressInterval: 100,
|
||||
// progress: res => {
|
||||
// set(
|
||||
// produce<CacheSlice>(state => {
|
||||
// state.cacheRequests[activeServerId][key][itemId].progress = Math.max(
|
||||
// 1,
|
||||
// res.bytesWritten / (res.contentLength || 1),
|
||||
// )
|
||||
// }),
|
||||
// )
|
||||
// },
|
||||
}).promise
|
||||
|
||||
set(state => {
|
||||
state.cacheRequests[activeServerId][key][itemId].progress = 1
|
||||
delete state.cacheRequests[activeServerId][key][itemId].promise
|
||||
})
|
||||
} catch {
|
||||
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,
|
||||
}
|
||||
})
|
||||
return await promise
|
||||
},
|
||||
|
||||
fetchCoverArtFilePath: async (coverArt, size = 'thumbnail') => {
|
||||
const client = get().client
|
||||
if (!client) {
|
||||
return
|
||||
}
|
||||
|
||||
const activeServerId = get().settings.activeServerId
|
||||
if (!activeServerId) {
|
||||
return
|
||||
}
|
||||
|
||||
const key: CacheItemTypeKey = size === 'thumbnail' ? 'coverArtThumb' : 'coverArt'
|
||||
|
||||
const existing = get().cacheFiles[activeServerId][key][coverArt]
|
||||
const inProgress = get().cacheRequests[activeServerId][key][coverArt]
|
||||
if (existing && inProgress) {
|
||||
if (inProgress.promise) {
|
||||
await inProgress.promise
|
||||
}
|
||||
return `file://${existing.path}`
|
||||
}
|
||||
|
||||
await get().cacheItem(key, coverArt, () =>
|
||||
client.getCoverArtUri({
|
||||
id: coverArt,
|
||||
size: size === 'thumbnail' ? '256' : undefined,
|
||||
}),
|
||||
)
|
||||
|
||||
return `file://${get().cacheFiles[activeServerId][key][coverArt].path}`
|
||||
},
|
||||
|
||||
createCache: async serverId => {
|
||||
for (const type in CacheItemType) {
|
||||
await mkdir(`${RNFS.DocumentDirectoryPath}/servers/${serverId}/${type}`)
|
||||
}
|
||||
|
||||
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: {},
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
pendingRemoval: {},
|
||||
|
||||
removeCache: async serverId => {
|
||||
set(state => {
|
||||
state.pendingRemoval[serverId] = true
|
||||
})
|
||||
|
||||
const cacheRequests = get().cacheRequests[serverId]
|
||||
const pendingRequests: Promise<void>[] = []
|
||||
|
||||
for (const type in CacheItemType) {
|
||||
const requests = Object.values(cacheRequests[type as CacheItemTypeKey])
|
||||
.filter(r => r.promise !== undefined)
|
||||
.map(r => r.promise) as Promise<void>[]
|
||||
pendingRequests.push(...requests)
|
||||
}
|
||||
|
||||
await Promise.all(pendingRequests)
|
||||
await rmdir(`${RNFS.DocumentDirectoryPath}/servers/${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]
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
clearImageCache: async () => {
|
||||
const cacheRequests = get().cacheRequests
|
||||
for (const serverId in cacheRequests) {
|
||||
const coverArtRequests = cacheRequests[serverId].coverArt
|
||||
const artstArtRequests = cacheRequests[serverId].artistArt
|
||||
const requests = [...Object.values(coverArtRequests), ...Object.values(artstArtRequests)]
|
||||
const pendingRequests = [
|
||||
...(requests.filter(r => r.promise !== undefined).map(r => r.promise) as Promise<void>[]),
|
||||
]
|
||||
|
||||
await Promise.all(pendingRequests)
|
||||
|
||||
await rmdir(get().cacheDirs[serverId].coverArt)
|
||||
await mkdir(get().cacheDirs[serverId].coverArt)
|
||||
|
||||
await rmdir(get().cacheDirs[serverId].artistArt)
|
||||
await mkdir(get().cacheDirs[serverId].artistArt)
|
||||
|
||||
set(state => {
|
||||
state.cacheFiles[serverId].coverArt = {}
|
||||
state.cacheFiles[serverId].coverArtThumb = {}
|
||||
state.cacheFiles[serverId].artistArt = {}
|
||||
state.cacheFiles[serverId].artistArtThumb = {}
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -1,521 +0,0 @@
|
||||
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,
|
||||
}
|
||||
}
|
||||
@@ -1,15 +1,20 @@
|
||||
import { Server } from '@app/models/settings'
|
||||
import { ById } from '@app/models/state'
|
||||
import { newCacheBuster } from './settings'
|
||||
import RNFS from 'react-native-fs'
|
||||
|
||||
const migrations: Array<(state: any) => any> = [
|
||||
state => {
|
||||
const migrations: Array<(state: any) => Promise<any>> = [
|
||||
// 1
|
||||
async state => {
|
||||
for (let server of state.settings.servers) {
|
||||
server.usePlainPassword = false
|
||||
}
|
||||
|
||||
return state
|
||||
},
|
||||
state => {
|
||||
|
||||
// 2
|
||||
async state => {
|
||||
state.settings.servers = state.settings.servers.reduce((acc: ById<Server>, server: Server) => {
|
||||
acc[server.id] = server
|
||||
return acc
|
||||
@@ -31,6 +36,34 @@ const migrations: Array<(state: any) => any> = [
|
||||
|
||||
return state
|
||||
},
|
||||
|
||||
// 3
|
||||
async state => {
|
||||
state.settings.cacheBuster = newCacheBuster()
|
||||
|
||||
state.settings.servers = Object.values(state.settings.servers as Record<string, Server>).reduce(
|
||||
(acc, server, i) => {
|
||||
const newId = i.toString()
|
||||
|
||||
if (server.id === state.settings.activeServerId) {
|
||||
state.settings.activeServerId = newId
|
||||
}
|
||||
|
||||
server.id = newId
|
||||
acc[newId] = server
|
||||
return acc
|
||||
},
|
||||
{} as Record<string, Server>,
|
||||
)
|
||||
|
||||
try {
|
||||
await RNFS.unlink(`${RNFS.DocumentDirectoryPath}/servers`)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
|
||||
return state
|
||||
},
|
||||
]
|
||||
|
||||
export default migrations
|
||||
|
||||
@@ -2,6 +2,7 @@ import { AlbumFilterSettings, ArtistFilterSettings, Server } from '@app/models/s
|
||||
import { ById } from '@app/models/state'
|
||||
import { GetStore, SetStore } from '@app/state/store'
|
||||
import { SubsonicApiClient } from '@app/subsonic/api'
|
||||
import uuid from 'react-native-uuid'
|
||||
|
||||
export type SettingsSlice = {
|
||||
settings: {
|
||||
@@ -21,13 +22,17 @@ export type SettingsSlice = {
|
||||
maxBitrateMobile: number
|
||||
minBuffer: number
|
||||
maxBuffer: number
|
||||
cacheBuster: string
|
||||
}
|
||||
|
||||
client?: SubsonicApiClient
|
||||
resetServer: boolean
|
||||
|
||||
changeCacheBuster: () => void
|
||||
|
||||
setActiveServer: (id: string | undefined, force?: boolean) => Promise<void>
|
||||
addServer: (server: Server) => Promise<void>
|
||||
removeServer: (id: string) => Promise<void>
|
||||
addServer: (server: Server) => void
|
||||
removeServer: (id: string) => void
|
||||
updateServer: (server: Server) => void
|
||||
|
||||
setScrobble: (scrobble: boolean) => void
|
||||
@@ -42,6 +47,10 @@ export type SettingsSlice = {
|
||||
setLibraryArtistFiler: (filter: ArtistFilterSettings) => void
|
||||
}
|
||||
|
||||
export function newCacheBuster(): string {
|
||||
return (uuid.v4() as string).split('-')[0]
|
||||
}
|
||||
|
||||
export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice => ({
|
||||
settings: {
|
||||
servers: {},
|
||||
@@ -66,6 +75,15 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
|
||||
maxBitrateMobile: 192,
|
||||
minBuffer: 6,
|
||||
maxBuffer: 60,
|
||||
cacheBuster: newCacheBuster(),
|
||||
},
|
||||
|
||||
resetServer: false,
|
||||
|
||||
changeCacheBuster: () => {
|
||||
set(store => {
|
||||
store.settings.cacheBuster = newCacheBuster()
|
||||
})
|
||||
},
|
||||
|
||||
setActiveServer: async (id, force) => {
|
||||
@@ -84,17 +102,24 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
|
||||
return
|
||||
}
|
||||
|
||||
get().prepareCache(newActiveServer.id)
|
||||
set(state => {
|
||||
state.resetServer = true
|
||||
})
|
||||
|
||||
set(state => {
|
||||
state.settings.activeServerId = newActiveServer.id
|
||||
state.client = new SubsonicApiClient(newActiveServer)
|
||||
get().resetLibrary(state)
|
||||
})
|
||||
|
||||
set(state => {
|
||||
state.resetServer = false
|
||||
})
|
||||
},
|
||||
|
||||
addServer: async server => {
|
||||
await get().createCache(server.id)
|
||||
addServer: server => {
|
||||
const serverIds = Object.keys(get().settings.servers)
|
||||
server.id =
|
||||
serverIds.length === 0 ? '0' : (serverIds.map(i => parseInt(i, 10)).sort((a, b) => b - a)[0] + 1).toString()
|
||||
|
||||
set(state => {
|
||||
state.settings.servers[server.id] = server
|
||||
@@ -105,9 +130,7 @@ export const createSettingsSlice = (set: SetStore, get: GetStore): SettingsSlice
|
||||
}
|
||||
},
|
||||
|
||||
removeServer: async id => {
|
||||
await get().removeCache(id)
|
||||
|
||||
removeServer: id => {
|
||||
set(state => {
|
||||
delete state.settings.servers[id]
|
||||
})
|
||||
|
||||
@@ -3,21 +3,15 @@ import AsyncStorage from '@react-native-async-storage/async-storage'
|
||||
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 { 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 &
|
||||
LibrarySlice &
|
||||
TrackPlayerSlice &
|
||||
TrackPlayerMapSlice &
|
||||
CacheSlice & {
|
||||
TrackPlayerSlice & {
|
||||
hydrated: boolean
|
||||
setHydrated: (hydrated: boolean) => void
|
||||
}
|
||||
@@ -63,10 +57,7 @@ export const useStore = create<
|
||||
persist(
|
||||
immer((set, get) => ({
|
||||
...createSettingsSlice(set, get),
|
||||
...createLibrarySlice(set, get),
|
||||
...createTrackPlayerSlice(set, get),
|
||||
...createTrackPlayerMapSlice(set, get),
|
||||
...createCacheSlice(set, get),
|
||||
|
||||
hydrated: false,
|
||||
setHydrated: hydrated =>
|
||||
@@ -78,20 +69,20 @@ export const useStore = create<
|
||||
name: '@appStore',
|
||||
version: DB_VERSION,
|
||||
getStorage: () => AsyncStorage,
|
||||
partialize: state => ({ settings: state.settings, cacheFiles: state.cacheFiles }),
|
||||
partialize: state => ({ settings: state.settings }),
|
||||
onRehydrateStorage: _preState => {
|
||||
return async (postState, _error) => {
|
||||
await postState?.setActiveServer(postState.settings.activeServerId, true)
|
||||
postState?.setHydrated(true)
|
||||
}
|
||||
},
|
||||
migrate: (persistedState, version) => {
|
||||
migrate: async (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)
|
||||
persistedState = await migrations[i](persistedState)
|
||||
}
|
||||
|
||||
return persistedState
|
||||
|
||||
@@ -1,11 +1,22 @@
|
||||
import { NoClientError } from '@app/models/error'
|
||||
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 } from 'react-native-track-player'
|
||||
import { GetStore, SetStore } from './store'
|
||||
|
||||
export type SetQueueOptions = {
|
||||
title: string
|
||||
playTrack?: number
|
||||
shuffle?: boolean
|
||||
}
|
||||
|
||||
export type SetQueueOptionsInternal = SetQueueOptions & {
|
||||
queue: TrackExt[]
|
||||
contextId: string
|
||||
type: QueueContextType
|
||||
}
|
||||
|
||||
export type TrackPlayerSlice = {
|
||||
queueName?: string
|
||||
setQueueName: (name?: string) => void
|
||||
@@ -33,14 +44,7 @@ export type TrackPlayerSlice = {
|
||||
setCurrentTrackIdx: (idx?: number) => void
|
||||
|
||||
queue: TrackExt[]
|
||||
setQueue: (
|
||||
songs: Song[],
|
||||
name: string,
|
||||
contextType: QueueContextType,
|
||||
contextId: string,
|
||||
playTrack?: number,
|
||||
shuffle?: boolean,
|
||||
) => Promise<void>
|
||||
setQueue: (options: SetQueueOptionsInternal) => Promise<void>
|
||||
|
||||
progress: Progress
|
||||
setProgress: (progress: Progress) => void
|
||||
@@ -175,19 +179,17 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
|
||||
}),
|
||||
|
||||
queue: [],
|
||||
setQueue: async (songs, name, contextType, contextId, playTrack, shuffle) => {
|
||||
setQueue: async ({ queue, title, type, contextId, playTrack, shuffle }) => {
|
||||
return trackPlayerCommands.enqueue(async () => {
|
||||
const shuffled = shuffle !== undefined ? shuffle : !!get().shuffleOrder
|
||||
|
||||
await TrackPlayer.setupPlayer(get().getPlayerOptions())
|
||||
await TrackPlayer.reset()
|
||||
|
||||
if (songs.length === 0) {
|
||||
if (queue.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
let queue = await get().mapSongstoTrackExts(songs)
|
||||
|
||||
if (shuffled) {
|
||||
const { tracks, shuffleOrder } = shuffleTracks(queue, playTrack)
|
||||
set(state => {
|
||||
@@ -206,8 +208,8 @@ export const createTrackPlayerSlice = (set: SetStore, get: GetStore): TrackPlaye
|
||||
try {
|
||||
set(state => {
|
||||
state.queue = queue
|
||||
state.queueName = name
|
||||
state.queueContextType = contextType
|
||||
state.queueName = title
|
||||
state.queueContextType = type
|
||||
state.queueContextId = contextId
|
||||
})
|
||||
get().setCurrentTrackIdx(playTrack)
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
import { Song } from '@app/models/library'
|
||||
import { TrackExt } from '@app/models/trackplayer'
|
||||
import userAgent from '@app/util/userAgent'
|
||||
import { GetStore, SetStore } from '@app/state/store'
|
||||
|
||||
export type TrackPlayerMapSlice = {
|
||||
mapSongtoTrackExt: (song: Song) => Promise<TrackExt>
|
||||
mapSongstoTrackExts: (songs: Song[]) => Promise<TrackExt[]>
|
||||
mapTrackExtToSong: (song: TrackExt) => Song
|
||||
}
|
||||
|
||||
export const createTrackPlayerMapSlice = (set: SetStore, get: GetStore): TrackPlayerMapSlice => ({
|
||||
mapSongtoTrackExt: async song => {
|
||||
let artwork = require('@res/fallback.png')
|
||||
if (song.coverArt) {
|
||||
const filePath = await get().fetchCoverArtFilePath(song.coverArt)
|
||||
if (filePath) {
|
||||
artwork = filePath
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
id: song.id,
|
||||
title: song.title,
|
||||
artist: song.artist || 'Unknown Artist',
|
||||
album: song.album || 'Unknown Album',
|
||||
url: get().buildStreamUri(song.id),
|
||||
userAgent,
|
||||
artwork,
|
||||
coverArt: song.coverArt,
|
||||
duration: song.duration,
|
||||
artistId: song.artistId,
|
||||
albumId: song.albumId,
|
||||
track: song.track,
|
||||
discNumber: song.discNumber,
|
||||
}
|
||||
},
|
||||
|
||||
mapSongstoTrackExts: async songs => {
|
||||
return await Promise.all(songs.map(get().mapSongtoTrackExt))
|
||||
},
|
||||
|
||||
mapTrackExtToSong: track => {
|
||||
return {
|
||||
itemType: 'song',
|
||||
id: track.id,
|
||||
title: track.title as string,
|
||||
artist: track.artist,
|
||||
album: track.album,
|
||||
streamUri: track.url as string,
|
||||
coverArt: track.coverArt,
|
||||
duration: track.duration,
|
||||
artistId: track.artistId,
|
||||
albumId: track.albumId,
|
||||
track: track.track,
|
||||
discNumber: track.discNumber,
|
||||
}
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user