mirror of
https://github.com/austinried/subtracks.git
synced 2025-12-27 09:09:29 +01:00
big ol' impl of zustand for settings/family states
still need to move track player state over for non-react access to that
This commit is contained in:
austinried
parent
ebc31e6d05
commit
8b17ebe9c2
@ -1,6 +1,5 @@
|
||||
import { artistInfoAtomFamily, useCoverArtUri } from '@app/state/music'
|
||||
import { useArtistInfo, useCoverArtUri } from '@app/hooks/music'
|
||||
import colors from '@app/styles/colors'
|
||||
import { useAtomValue } from 'jotai/utils'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { ActivityIndicator, StyleSheet, View, ViewStyle } from 'react-native'
|
||||
import FastImage, { ImageStyle } from 'react-native-fast-image'
|
||||
@ -32,9 +31,23 @@ type CoverArtImageProps = BaseImageProps & CoverArtProp
|
||||
|
||||
type CoverArtProps = BaseProps & CoverArtProp & Partial<ArtistIdProp>
|
||||
|
||||
const ArtistIdImageLoaded = React.memo<ArtistIdImageProps>(
|
||||
const ArtistImageFallback: React.FC<{
|
||||
enableLoading: () => void
|
||||
}> = ({ enableLoading }) => {
|
||||
useEffect(() => {
|
||||
enableLoading()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
return <></>
|
||||
}
|
||||
|
||||
const ArtistImage = React.memo<ArtistIdImageProps>(
|
||||
({ artistId, imageSize, style, imageStyle, resizeMode, enableLoading, disableLoading, fallbackError }) => {
|
||||
const artistInfo = useAtomValue(artistInfoAtomFamily(artistId))
|
||||
const artistInfo = useArtistInfo(artistId)
|
||||
|
||||
if (!artistInfo) {
|
||||
return <ArtistImageFallback enableLoading={enableLoading} />
|
||||
}
|
||||
|
||||
const uri = imageSize === 'thumbnail' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl
|
||||
|
||||
@ -51,24 +64,6 @@ const ArtistIdImageLoaded = React.memo<ArtistIdImageProps>(
|
||||
},
|
||||
)
|
||||
|
||||
const ArtistIdImageFallback: React.FC<{
|
||||
enableLoading: () => void
|
||||
}> = ({ enableLoading }) => {
|
||||
useEffect(() => {
|
||||
enableLoading()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
return <></>
|
||||
}
|
||||
|
||||
const ArtistIdImage = React.memo<ArtistIdImageProps>(props => {
|
||||
return (
|
||||
<React.Suspense fallback={<ArtistIdImageFallback enableLoading={props.enableLoading} />}>
|
||||
<ArtistIdImageLoaded {...props} />
|
||||
</React.Suspense>
|
||||
)
|
||||
})
|
||||
|
||||
const CoverArtImage = React.memo<CoverArtImageProps>(
|
||||
({ coverArt, imageSize, style, imageStyle, resizeMode, enableLoading, disableLoading, fallbackError }) => {
|
||||
const coverArtUri = useCoverArtUri()
|
||||
@ -108,7 +103,7 @@ const CoverArt: React.FC<CoverArtProps> = ({ coverArt, artistId, resizeMode, ima
|
||||
let ImageComponent
|
||||
if (artistId) {
|
||||
ImageComponent = (
|
||||
<ArtistIdImage
|
||||
<ArtistImage
|
||||
artistId={artistId}
|
||||
imageSize={imageSize}
|
||||
style={style}
|
||||
|
||||
@ -3,7 +3,7 @@ import { Song } from '@app/models/music'
|
||||
import { useSetQueue } from '@app/state/trackplayer'
|
||||
import colors from '@app/styles/colors'
|
||||
import React, { useState } from 'react'
|
||||
import { StyleSheet, View, ViewStyle } from 'react-native'
|
||||
import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
|
||||
import Icon from 'react-native-vector-icons/Ionicons'
|
||||
import IconMat from 'react-native-vector-icons/MaterialIcons'
|
||||
|
||||
@ -11,7 +11,7 @@ const ListPlayerControls = React.memo<{
|
||||
songs: Song[]
|
||||
typeName: string
|
||||
queueName: string
|
||||
style?: ViewStyle
|
||||
style?: StyleProp<ViewStyle>
|
||||
}>(({ songs, typeName, queueName, style }) => {
|
||||
const [downloaded, setDownloaded] = useState(false)
|
||||
const setQueue = useSetQueue()
|
||||
|
||||
228
app/hooks/music.ts
Normal file
228
app/hooks/music.ts
Normal file
@ -0,0 +1,228 @@
|
||||
import {
|
||||
mapAlbumID3toAlbumListItem,
|
||||
mapArtistID3toArtist,
|
||||
mapChildToSong,
|
||||
mapPlaylistListItem,
|
||||
} from '@app/models/music'
|
||||
import {
|
||||
albumListAtom,
|
||||
albumListUpdatingAtom,
|
||||
artistsAtom,
|
||||
artistsUpdatingAtom,
|
||||
homeListsUpdatingAtom,
|
||||
homeListsWriteAtom,
|
||||
playlistsAtom,
|
||||
playlistsUpdatingAtom,
|
||||
searchResultsAtom,
|
||||
searchResultsUpdatingAtom,
|
||||
} from '@app/state/music'
|
||||
import { selectSettings } from '@app/state/settings'
|
||||
import { Store, useStore } from '@app/state/store'
|
||||
import { SubsonicApiClient } from '@app/subsonic/api'
|
||||
import { GetAlbumList2Type, GetCoverArtParams } from '@app/subsonic/params'
|
||||
import { useAtom } from 'jotai'
|
||||
import { useUpdateAtom } from 'jotai/utils'
|
||||
import { useCallback } from 'react'
|
||||
|
||||
const selectors = {
|
||||
fetchArtistInfo: (state: Store) => state.fetchArtistInfo,
|
||||
fetchAlbum: (state: Store) => state.fetchAlbum,
|
||||
fetchPlaylist: (state: Store) => state.fetchPlaylist,
|
||||
}
|
||||
|
||||
export const useArtistInfo = (id: string) => {
|
||||
const server = useStore(selectSettings.activeServer)
|
||||
const artistInfo = useStore(useCallback((state: Store) => state.artistInfo[id], [id]))
|
||||
const fetchArtistInfo = useStore(selectors.fetchArtistInfo)
|
||||
|
||||
if (server && !artistInfo) {
|
||||
fetchArtistInfo(server, id)
|
||||
}
|
||||
|
||||
return artistInfo
|
||||
}
|
||||
|
||||
export const useAlbumWithSongs = (id: string) => {
|
||||
const server = useStore(selectSettings.activeServer)
|
||||
const album = useStore(useCallback((state: Store) => state.albums[id], [id]))
|
||||
const fetchAlbum = useStore(selectors.fetchAlbum)
|
||||
|
||||
if (server && !album) {
|
||||
fetchAlbum(server, id)
|
||||
}
|
||||
|
||||
return album
|
||||
}
|
||||
|
||||
export const usePlaylistWithSongs = (id: string) => {
|
||||
const server = useStore(selectSettings.activeServer)
|
||||
const playlist = useStore(useCallback((state: Store) => state.playlists[id], [id]))
|
||||
const fetchPlaylist = useStore(selectors.fetchPlaylist)
|
||||
|
||||
if (server && !playlist) {
|
||||
fetchPlaylist(server, id)
|
||||
}
|
||||
|
||||
return playlist
|
||||
}
|
||||
|
||||
export const useUpdateArtists = () => {
|
||||
const server = useStore(selectSettings.activeServer)
|
||||
const [updating, setUpdating] = useAtom(artistsUpdatingAtom)
|
||||
const setArtists = useUpdateAtom(artistsAtom)
|
||||
|
||||
if (!server) {
|
||||
return () => Promise.resolve()
|
||||
}
|
||||
|
||||
return async () => {
|
||||
if (updating) {
|
||||
return
|
||||
}
|
||||
setUpdating(true)
|
||||
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
try {
|
||||
const response = await client.getArtists()
|
||||
setArtists(response.data.artists.map(mapArtistID3toArtist))
|
||||
} finally {
|
||||
setUpdating(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const useUpdateHomeLists = () => {
|
||||
const server = useStore(selectSettings.activeServer)
|
||||
const types = useStore(selectSettings.homeLists)
|
||||
const updateHomeList = useUpdateAtom(homeListsWriteAtom)
|
||||
const [updating, setUpdating] = useAtom(homeListsUpdatingAtom)
|
||||
|
||||
if (!server) {
|
||||
return async () => {}
|
||||
}
|
||||
|
||||
return async () => {
|
||||
if (updating) {
|
||||
return
|
||||
}
|
||||
setUpdating(true)
|
||||
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
try {
|
||||
const promises: Promise<any>[] = []
|
||||
for (const type of types) {
|
||||
promises.push(
|
||||
client.getAlbumList2({ type: type as GetAlbumList2Type, size: 20 }).then(response => {
|
||||
updateHomeList({ type, albums: response.data.albums.map(mapAlbumID3toAlbumListItem) })
|
||||
}),
|
||||
)
|
||||
}
|
||||
await Promise.all(promises)
|
||||
} finally {
|
||||
setUpdating(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const useUpdateSearchResults = () => {
|
||||
const server = useStore(selectSettings.activeServer)
|
||||
const updateList = useUpdateAtom(searchResultsAtom)
|
||||
const [updating, setUpdating] = useAtom(searchResultsUpdatingAtom)
|
||||
|
||||
if (!server) {
|
||||
return async () => {}
|
||||
}
|
||||
|
||||
return async (query: string) => {
|
||||
if (updating || query.length < 2) {
|
||||
return
|
||||
}
|
||||
setUpdating(true)
|
||||
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
try {
|
||||
const response = await client.search3({ query })
|
||||
updateList({
|
||||
artists: response.data.artists.map(mapArtistID3toArtist),
|
||||
albums: response.data.albums.map(mapAlbumID3toAlbumListItem),
|
||||
songs: response.data.songs.map(a => mapChildToSong(a, client)),
|
||||
})
|
||||
} finally {
|
||||
setUpdating(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const useUpdatePlaylists = () => {
|
||||
const server = useStore(selectSettings.activeServer)
|
||||
const updateList = useUpdateAtom(playlistsAtom)
|
||||
const [updating, setUpdating] = useAtom(playlistsUpdatingAtom)
|
||||
|
||||
if (!server) {
|
||||
return async () => {}
|
||||
}
|
||||
|
||||
return async () => {
|
||||
if (updating) {
|
||||
return
|
||||
}
|
||||
setUpdating(true)
|
||||
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
try {
|
||||
const response = await client.getPlaylists()
|
||||
updateList(response.data.playlists.map(mapPlaylistListItem))
|
||||
} finally {
|
||||
setUpdating(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const useUpdateAlbumList = () => {
|
||||
const server = useStore(selectSettings.activeServer)
|
||||
const updateList = useUpdateAtom(albumListAtom)
|
||||
const [updating, setUpdating] = useAtom(albumListUpdatingAtom)
|
||||
|
||||
if (!server) {
|
||||
return async () => {}
|
||||
}
|
||||
|
||||
return async () => {
|
||||
if (updating) {
|
||||
return
|
||||
}
|
||||
setUpdating(true)
|
||||
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
try {
|
||||
const response = await client.getAlbumList2({ type: 'alphabeticalByArtist', size: 500 })
|
||||
updateList(response.data.albums.map(mapAlbumID3toAlbumListItem))
|
||||
} finally {
|
||||
setUpdating(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const useCoverArtUri = () => {
|
||||
const server = useStore(selectSettings.activeServer)
|
||||
|
||||
if (!server) {
|
||||
return () => undefined
|
||||
}
|
||||
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
return (coverArt?: string, size: 'thumbnail' | 'original' = 'thumbnail') => {
|
||||
const params: GetCoverArtParams = { id: coverArt || '-1' }
|
||||
if (size === 'thumbnail') {
|
||||
params.size = '256'
|
||||
}
|
||||
|
||||
return client.getCoverArtUri(params)
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,13 @@
|
||||
import { useAtom } from 'jotai'
|
||||
import { useAtomValue, useUpdateAtom } from 'jotai/utils'
|
||||
import { albumListAtom, artistsAtom, homeListsAtom, playlistsAtom, searchResultsAtom } from '@app/state/music'
|
||||
import { selectSettings } from '@app/state/settings'
|
||||
import { useStore } from '@app/state/store'
|
||||
import { useReset } from '@app/state/trackplayer'
|
||||
import { useUpdateAtom } from 'jotai/utils'
|
||||
import { useEffect } from 'react'
|
||||
import { albumListAtom, artistsAtom, homeListsAtom, playlistsAtom, searchResultsAtom } from './music'
|
||||
import { activeServerAtom } from './settings'
|
||||
import { useReset } from './trackplayer'
|
||||
|
||||
export const useSetActiveServer = () => {
|
||||
const [activeServer, setActiveServer] = useAtom(activeServerAtom)
|
||||
export const useSwitchActiveServer = () => {
|
||||
const activeServer = useStore(selectSettings.activeServer)
|
||||
const setActiveServer = useStore(selectSettings.setActiveServer)
|
||||
const setArtists = useUpdateAtom(artistsAtom)
|
||||
const setHomeLists = useUpdateAtom(homeListsAtom)
|
||||
const setSearchResults = useUpdateAtom(searchResultsAtom)
|
||||
@ -32,7 +33,7 @@ export const useSetActiveServer = () => {
|
||||
}
|
||||
|
||||
export const useActiveListRefresh = (list: unknown[], update: () => void) => {
|
||||
const activeServer = useAtomValue(activeServerAtom)
|
||||
const activeServer = useStore(selectSettings.activeServer)
|
||||
|
||||
useEffect(() => {
|
||||
if (list.length === 0) {
|
||||
@ -43,7 +44,7 @@ export const useActiveListRefresh = (list: unknown[], update: () => void) => {
|
||||
}
|
||||
|
||||
export const useActiveServerRefresh = (update: () => void) => {
|
||||
const activeServer = useAtomValue(activeServerAtom)
|
||||
const activeServer = useStore(selectSettings.activeServer)
|
||||
|
||||
useEffect(() => {
|
||||
if (activeServer) {
|
||||
@ -1,3 +1,14 @@
|
||||
import { SubsonicApiClient } from '@app/subsonic/api'
|
||||
import {
|
||||
AlbumID3Element,
|
||||
ArtistID3Element,
|
||||
ArtistInfo2Element,
|
||||
ChildElement,
|
||||
PlaylistElement,
|
||||
PlaylistWithSongsElement,
|
||||
} from '@app/subsonic/elements'
|
||||
import { GetArtistResponse } from '@app/subsonic/responses'
|
||||
|
||||
export interface Artist {
|
||||
itemType: 'artist'
|
||||
id: string
|
||||
@ -98,3 +109,96 @@ export type DownloadedPlaylist = {
|
||||
songs: string[]
|
||||
name: string
|
||||
}
|
||||
|
||||
export function mapArtistID3toArtist(artist: ArtistID3Element): Artist {
|
||||
return {
|
||||
itemType: 'artist',
|
||||
id: artist.id,
|
||||
name: artist.name,
|
||||
starred: artist.starred,
|
||||
coverArt: artist.coverArt,
|
||||
}
|
||||
}
|
||||
|
||||
export function mapArtistInfo(
|
||||
artistResponse: GetArtistResponse,
|
||||
info: ArtistInfo2Element,
|
||||
topSongs: ChildElement[],
|
||||
client: SubsonicApiClient,
|
||||
): ArtistInfo {
|
||||
const { artist, albums } = artistResponse
|
||||
|
||||
const mappedAlbums = albums.map(mapAlbumID3toAlbum)
|
||||
|
||||
return {
|
||||
...mapArtistID3toArtist(artist),
|
||||
albums: mappedAlbums,
|
||||
smallImageUrl: info.smallImageUrl,
|
||||
mediumImageUrl: info.mediumImageUrl,
|
||||
largeImageUrl: info.largeImageUrl,
|
||||
topSongs: topSongs.map(s => mapChildToSong(s, client)).slice(0, 5),
|
||||
}
|
||||
}
|
||||
|
||||
export function mapAlbumID3toAlbumListItem(album: AlbumID3Element): AlbumListItem {
|
||||
return {
|
||||
itemType: 'album',
|
||||
id: album.id,
|
||||
name: album.name,
|
||||
artist: album.artist,
|
||||
starred: album.starred,
|
||||
coverArt: album.coverArt,
|
||||
}
|
||||
}
|
||||
|
||||
export function mapAlbumID3toAlbum(album: AlbumID3Element): Album {
|
||||
return {
|
||||
...mapAlbumID3toAlbumListItem(album),
|
||||
coverArt: album.coverArt,
|
||||
year: album.year,
|
||||
}
|
||||
}
|
||||
|
||||
export function mapChildToSong(child: ChildElement, client: SubsonicApiClient): Song {
|
||||
return {
|
||||
itemType: 'song',
|
||||
id: child.id,
|
||||
album: child.album,
|
||||
artist: child.artist,
|
||||
title: child.title,
|
||||
track: child.track,
|
||||
duration: child.duration,
|
||||
starred: child.starred,
|
||||
coverArt: child.coverArt,
|
||||
streamUri: client.streamUri({ id: child.id }),
|
||||
}
|
||||
}
|
||||
|
||||
export function mapAlbumID3WithSongstoAlbunWithSongs(
|
||||
album: AlbumID3Element,
|
||||
songs: ChildElement[],
|
||||
client: SubsonicApiClient,
|
||||
): AlbumWithSongs {
|
||||
return {
|
||||
...mapAlbumID3toAlbum(album),
|
||||
songs: songs.map(s => mapChildToSong(s, client)),
|
||||
}
|
||||
}
|
||||
|
||||
export function mapPlaylistListItem(playlist: PlaylistElement): PlaylistListItem {
|
||||
return {
|
||||
itemType: 'playlist',
|
||||
id: playlist.id,
|
||||
name: playlist.name,
|
||||
comment: playlist.comment,
|
||||
coverArt: playlist.coverArt,
|
||||
}
|
||||
}
|
||||
|
||||
export function mapPlaylistWithSongs(playlist: PlaylistWithSongsElement, client: SubsonicApiClient): PlaylistWithSongs {
|
||||
return {
|
||||
...mapPlaylistListItem(playlist),
|
||||
songs: playlist.songs.map(s => mapChildToSong(s, client)),
|
||||
coverArt: playlist.coverArt,
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import BottomTabBar from '@app/navigation/BottomTabBar'
|
||||
import LibraryTopTabNavigator from '@app/navigation/LibraryTopTabNavigator'
|
||||
import AlbumView from '@app/screens/AlbumView'
|
||||
import SongListView from '@app/screens/SongListView'
|
||||
import ArtistView from '@app/screens/ArtistView'
|
||||
import Home from '@app/screens/Home'
|
||||
import PlaylistView from '@app/screens/PlaylistView'
|
||||
import Search from '@app/screens/Search'
|
||||
import ServerView from '@app/screens/ServerView'
|
||||
import SettingsView from '@app/screens/Settings'
|
||||
@ -30,7 +29,7 @@ type AlbumScreenProps = {
|
||||
}
|
||||
|
||||
const AlbumScreen: React.FC<AlbumScreenProps> = ({ route }) => (
|
||||
<AlbumView id={route.params.id} title={route.params.title} />
|
||||
<SongListView id={route.params.id} title={route.params.title} type="album" />
|
||||
)
|
||||
|
||||
type ArtistScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'artist'>
|
||||
@ -52,7 +51,7 @@ type PlaylistScreenProps = {
|
||||
}
|
||||
|
||||
const PlaylistScreen: React.FC<PlaylistScreenProps> = ({ route }) => (
|
||||
<PlaylistView id={route.params.id} title={route.params.title} />
|
||||
<SongListView id={route.params.id} title={route.params.title} type="playlist" />
|
||||
)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import BottomTabNavigator from '@app/navigation/BottomTabNavigator'
|
||||
import NowPlayingLayout from '@app/screens/NowPlayingLayout'
|
||||
import NowPlayingView from '@app/screens/NowPlayingView'
|
||||
import colors from '@app/styles/colors'
|
||||
import { DarkTheme, NavigationContainer } from '@react-navigation/native'
|
||||
import React from 'react'
|
||||
@ -32,7 +32,7 @@ const RootNavigator = () => (
|
||||
}}
|
||||
initialRouteName="main">
|
||||
<RootStack.Screen name="main" component={BottomTabNavigator} />
|
||||
<RootStack.Screen name="now-playing" component={NowPlayingLayout} />
|
||||
<RootStack.Screen name="now-playing" component={NowPlayingView} />
|
||||
</RootStack.Navigator>
|
||||
</NavigationContainer>
|
||||
)
|
||||
|
||||
@ -1,126 +0,0 @@
|
||||
import CoverArt from '@app/components/CoverArt'
|
||||
import GradientBackground from '@app/components/GradientBackground'
|
||||
import ImageGradientScrollView from '@app/components/ImageGradientScrollView'
|
||||
import ListPlayerControls from '@app/components/ListPlayerControls'
|
||||
import NothingHere from '@app/components/NothingHere'
|
||||
import ListItem from '@app/components/ListItem'
|
||||
import { albumAtomFamily, useCoverArtUri } from '@app/state/music'
|
||||
import { useSetQueue } from '@app/state/trackplayer'
|
||||
import colors from '@app/styles/colors'
|
||||
import font from '@app/styles/font'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { useAtomValue } from 'jotai/utils'
|
||||
import React, { useEffect } from 'react'
|
||||
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
|
||||
|
||||
const AlbumDetails: React.FC<{
|
||||
id: string
|
||||
}> = ({ id }) => {
|
||||
const album = useAtomValue(albumAtomFamily(id))
|
||||
const coverArtUri = useCoverArtUri()
|
||||
const setQueue = useSetQueue()
|
||||
|
||||
if (!album) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
const Songs = () => (
|
||||
<>
|
||||
<ListPlayerControls songs={album.songs} typeName="Album" queueName={album.name} />
|
||||
<View style={styles.songs}>
|
||||
{album.songs
|
||||
.sort((a, b) => {
|
||||
if (b.track && a.track) {
|
||||
return a.track - b.track
|
||||
} else {
|
||||
return a.title.localeCompare(b.title)
|
||||
}
|
||||
})
|
||||
.map((s, i) => (
|
||||
<ListItem key={i} item={s} subtitle={s.artist} onPress={() => setQueue(album.songs, album.name, i)} />
|
||||
))}
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
|
||||
return (
|
||||
<ImageGradientScrollView
|
||||
imageUri={coverArtUri(album.coverArt)}
|
||||
imageKey={`${album.name}${album.artist}`}
|
||||
style={styles.container}>
|
||||
<View style={styles.content}>
|
||||
<CoverArt coverArt={album.coverArt} style={styles.cover} imageSize="original" />
|
||||
<Text style={styles.title}>{album.name}</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
{album.artist}
|
||||
{album.year ? ` • ${album.year}` : ''}
|
||||
</Text>
|
||||
{album.songs.length > 0 ? <Songs /> : <NothingHere height={300} width={250} />}
|
||||
</View>
|
||||
</ImageGradientScrollView>
|
||||
)
|
||||
}
|
||||
|
||||
const AlbumViewFallback = () => (
|
||||
<GradientBackground style={styles.fallback}>
|
||||
<ActivityIndicator size="large" color={colors.accent} />
|
||||
</GradientBackground>
|
||||
)
|
||||
|
||||
const AlbumView: React.FC<{
|
||||
id: string
|
||||
title: string
|
||||
}> = ({ id, title }) => {
|
||||
const navigation = useNavigation()
|
||||
|
||||
useEffect(() => {
|
||||
navigation.setOptions({ title })
|
||||
})
|
||||
|
||||
return (
|
||||
<React.Suspense fallback={<AlbumViewFallback />}>
|
||||
<AlbumDetails id={id} />
|
||||
</React.Suspense>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
content: {
|
||||
alignItems: 'center',
|
||||
paddingTop: 10,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontFamily: font.bold,
|
||||
color: colors.text.primary,
|
||||
marginTop: 12,
|
||||
textAlign: 'center',
|
||||
},
|
||||
subtitle: {
|
||||
fontFamily: font.regular,
|
||||
color: colors.text.secondary,
|
||||
fontSize: 14,
|
||||
marginTop: 4,
|
||||
marginBottom: 20,
|
||||
textAlign: 'center',
|
||||
},
|
||||
cover: {
|
||||
height: 220,
|
||||
width: 220,
|
||||
},
|
||||
songs: {
|
||||
marginTop: 26,
|
||||
marginBottom: 30,
|
||||
width: '100%',
|
||||
},
|
||||
fallback: {
|
||||
alignItems: 'center',
|
||||
paddingTop: 100,
|
||||
},
|
||||
})
|
||||
|
||||
export default React.memo(AlbumView)
|
||||
@ -1,16 +1,15 @@
|
||||
import CoverArt from '@app/components/CoverArt'
|
||||
import GradientScrollView from '@app/components/GradientScrollView'
|
||||
import Header from '@app/components/Header'
|
||||
import PressableOpacity from '@app/components/PressableOpacity'
|
||||
import ListItem from '@app/components/ListItem'
|
||||
import { Album } from '@app/models/music'
|
||||
import { artistInfoAtomFamily } from '@app/state/music'
|
||||
import PressableOpacity from '@app/components/PressableOpacity'
|
||||
import { useArtistInfo } from '@app/hooks/music'
|
||||
import { Album, Song } from '@app/models/music'
|
||||
import { useSetQueue } from '@app/state/trackplayer'
|
||||
import colors from '@app/styles/colors'
|
||||
import font from '@app/styles/font'
|
||||
import { useLayout } from '@react-native-community/hooks'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { useAtomValue } from 'jotai/utils'
|
||||
import React, { useEffect } from 'react'
|
||||
import { StyleSheet, Text, View } from 'react-native'
|
||||
import FastImage from 'react-native-fast-image'
|
||||
@ -33,9 +32,30 @@ const AlbumItem = React.memo<{
|
||||
)
|
||||
})
|
||||
|
||||
const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
|
||||
const artist = useAtomValue(artistInfoAtomFamily(id))
|
||||
const TopSongs = React.memo<{
|
||||
songs: Song[]
|
||||
name: string
|
||||
}>(({ songs, name }) => {
|
||||
const setQueue = useSetQueue()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header>Top Songs</Header>
|
||||
{songs.map((s, i) => (
|
||||
<ListItem
|
||||
key={i}
|
||||
item={s}
|
||||
showArt={true}
|
||||
subtitle={s.album}
|
||||
onPress={() => setQueue(songs, `Top Songs: ${name}`, i)}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
|
||||
const artist = useArtistInfo(id)
|
||||
const albumsLayout = useLayout()
|
||||
const coverLayout = useLayout()
|
||||
|
||||
@ -45,21 +65,6 @@ const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
|
||||
return <></>
|
||||
}
|
||||
|
||||
const TopSongs = () => (
|
||||
<>
|
||||
<Header>Top Songs</Header>
|
||||
{artist.topSongs.map((s, i) => (
|
||||
<ListItem
|
||||
key={i}
|
||||
item={s}
|
||||
showArt={true}
|
||||
subtitle={s.album}
|
||||
onPress={() => setQueue(artist.topSongs, `Top Songs: ${artist.name}`, i)}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
|
||||
return (
|
||||
<GradientScrollView
|
||||
onLayout={coverLayout.onLayout}
|
||||
@ -77,7 +82,7 @@ const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
|
||||
<Text style={styles.title}>{artist.name}</Text>
|
||||
</View>
|
||||
<View style={styles.container}>
|
||||
{artist.topSongs.length > 0 ? <TopSongs /> : <></>}
|
||||
{artist.topSongs.length > 0 ? <TopSongs songs={artist.topSongs} name={artist.name} /> : <></>}
|
||||
<Header>Albums</Header>
|
||||
<View style={styles.albums} onLayout={albumsLayout.onLayout}>
|
||||
{artist.albums.map(a => (
|
||||
@ -89,22 +94,18 @@ const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
|
||||
)
|
||||
}
|
||||
|
||||
const ArtistView: React.FC<{
|
||||
const ArtistView = React.memo<{
|
||||
id: string
|
||||
title: string
|
||||
}> = ({ id, title }) => {
|
||||
}>(({ id, title }) => {
|
||||
const navigation = useNavigation()
|
||||
|
||||
useEffect(() => {
|
||||
navigation.setOptions({ title })
|
||||
})
|
||||
|
||||
return (
|
||||
<React.Suspense fallback={<Text>Loading...</Text>}>
|
||||
<ArtistDetails id={id} />
|
||||
</React.Suspense>
|
||||
)
|
||||
}
|
||||
return <ArtistDetails id={id} />
|
||||
})
|
||||
|
||||
const artistCoverHeight = 280
|
||||
|
||||
@ -164,4 +165,4 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
})
|
||||
|
||||
export default React.memo(ArtistView)
|
||||
export default ArtistView
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
import React from 'react'
|
||||
import { FlatList, Text, View } from 'react-native'
|
||||
import { useAtomValue } from 'jotai/utils'
|
||||
import { Artist } from '@app/models/music'
|
||||
import { artistsAtom } from '@app/state/music'
|
||||
|
||||
const ArtistItem: React.FC<{ item: Artist }> = ({ item }) => (
|
||||
<View>
|
||||
<Text>{item.id}</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 60,
|
||||
paddingBottom: 400,
|
||||
}}>
|
||||
{item.name}
|
||||
</Text>
|
||||
</View>
|
||||
)
|
||||
|
||||
const List = () => {
|
||||
const artists = useAtomValue(artistsAtom)
|
||||
|
||||
const renderItem: React.FC<{ item: Artist }> = ({ item }) => <ArtistItem item={item} />
|
||||
|
||||
return <FlatList data={artists} renderItem={renderItem} keyExtractor={item => item.id} />
|
||||
}
|
||||
|
||||
const ArtistsList = () => (
|
||||
<View>
|
||||
<React.Suspense fallback={<Text>Loading...</Text>}>
|
||||
<List />
|
||||
</React.Suspense>
|
||||
</View>
|
||||
)
|
||||
|
||||
export default ArtistsList
|
||||
@ -3,10 +3,12 @@ import GradientScrollView from '@app/components/GradientScrollView'
|
||||
import Header from '@app/components/Header'
|
||||
import NothingHere from '@app/components/NothingHere'
|
||||
import PressableOpacity from '@app/components/PressableOpacity'
|
||||
import { useUpdateHomeLists } from '@app/hooks/music'
|
||||
import { useActiveServerRefresh } from '@app/hooks/server'
|
||||
import { AlbumListItem } from '@app/models/music'
|
||||
import { homeListsAtom, homeListsUpdatingAtom, useUpdateHomeLists } from '@app/state/music'
|
||||
import { useActiveServerRefresh } from '@app/state/server'
|
||||
import { homeListTypesAtom } from '@app/state/settings'
|
||||
import { homeListsAtom, homeListsUpdatingAtom } from '@app/state/music'
|
||||
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 { GetAlbumListType } from '@app/subsonic/params'
|
||||
@ -75,7 +77,7 @@ const Category = React.memo<{
|
||||
})
|
||||
|
||||
const Home = () => {
|
||||
const types = useAtomValue(homeListTypesAtom)
|
||||
const types = useStore(selectSettings.homeLists)
|
||||
const lists = useAtomValue(homeListsAtom)
|
||||
const updating = useAtomValue(homeListsUpdatingAtom)
|
||||
const update = useUpdateHomeLists()
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import CoverArt from '@app/components/CoverArt'
|
||||
import GradientFlatList from '@app/components/GradientFlatList'
|
||||
import PressableOpacity from '@app/components/PressableOpacity'
|
||||
import { useUpdateAlbumList } from '@app/hooks/music'
|
||||
import { useActiveListRefresh } from '@app/hooks/server'
|
||||
import { Album } from '@app/models/music'
|
||||
import { albumListAtom, albumListUpdatingAtom, useUpdateAlbumList } from '@app/state/music'
|
||||
import { useActiveListRefresh } from '@app/state/server'
|
||||
import { albumListAtom, albumListUpdatingAtom } from '@app/state/music'
|
||||
import colors from '@app/styles/colors'
|
||||
import font from '@app/styles/font'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
@ -87,12 +88,6 @@ const AlbumsList = () => {
|
||||
)
|
||||
}
|
||||
|
||||
const AlbumsTab = () => (
|
||||
<React.Suspense fallback={<Text>Loading...</Text>}>
|
||||
<AlbumsList />
|
||||
</React.Suspense>
|
||||
)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
listContent: {
|
||||
minHeight: '100%',
|
||||
@ -123,4 +118,4 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
})
|
||||
|
||||
export default React.memo(AlbumsTab)
|
||||
export default React.memo(AlbumsList)
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import GradientFlatList from '@app/components/GradientFlatList'
|
||||
import ListItem from '@app/components/ListItem'
|
||||
import { useUpdateArtists } from '@app/hooks/music'
|
||||
import { useActiveListRefresh } from '@app/hooks/server'
|
||||
import { Artist } from '@app/models/music'
|
||||
import { artistsAtom, artistsUpdatingAtom, useUpdateArtists } from '@app/state/music'
|
||||
import { useActiveListRefresh } from '@app/state/server'
|
||||
import { artistsAtom, artistsUpdatingAtom } from '@app/state/music'
|
||||
import { useAtomValue } from 'jotai/utils'
|
||||
import React from 'react'
|
||||
import { StyleSheet } from 'react-native'
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import GradientFlatList from '@app/components/GradientFlatList'
|
||||
import ListItem from '@app/components/ListItem'
|
||||
import { useUpdatePlaylists } from '@app/hooks/music'
|
||||
import { useActiveListRefresh } from '@app/hooks/server'
|
||||
import { PlaylistListItem } from '@app/models/music'
|
||||
import { playlistsAtom, playlistsUpdatingAtom, useUpdatePlaylists } from '@app/state/music'
|
||||
import { useActiveListRefresh } from '@app/state/server'
|
||||
import { playlistsAtom, playlistsUpdatingAtom } from '@app/state/music'
|
||||
import { useAtomValue } from 'jotai/utils'
|
||||
import React from 'react'
|
||||
import { StyleSheet } from 'react-native'
|
||||
|
||||
@ -303,7 +303,7 @@ type RootStackParamList = {
|
||||
}
|
||||
type NowPlayingProps = NativeStackScreenProps<RootStackParamList, 'now-playing'>
|
||||
|
||||
const NowPlayingLayout: React.FC<NowPlayingProps> = ({ navigation }) => {
|
||||
const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
|
||||
const track = useAtomValue(currentTrackAtom)
|
||||
|
||||
const back = useCallback(() => {
|
||||
@ -354,4 +354,4 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
})
|
||||
|
||||
export default NowPlayingLayout
|
||||
export default NowPlayingView
|
||||
@ -1,139 +0,0 @@
|
||||
import CoverArt from '@app/components/CoverArt'
|
||||
import GradientBackground from '@app/components/GradientBackground'
|
||||
import ImageGradientScrollView from '@app/components/ImageGradientScrollView'
|
||||
import ListPlayerControls from '@app/components/ListPlayerControls'
|
||||
import NothingHere from '@app/components/NothingHere'
|
||||
import ListItem from '@app/components/ListItem'
|
||||
import { playlistAtomFamily, useCoverArtUri } from '@app/state/music'
|
||||
import { useSetQueue } from '@app/state/trackplayer'
|
||||
import colors from '@app/styles/colors'
|
||||
import font from '@app/styles/font'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { useAtomValue } from 'jotai/utils'
|
||||
import React, { useEffect } from 'react'
|
||||
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
|
||||
|
||||
const PlaylistDetails: React.FC<{
|
||||
id: string
|
||||
}> = ({ id }) => {
|
||||
const playlist = useAtomValue(playlistAtomFamily(id))
|
||||
const setQueue = useSetQueue()
|
||||
const coverArtUri = useCoverArtUri()
|
||||
|
||||
if (!playlist) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
const Songs = () => (
|
||||
<>
|
||||
<ListPlayerControls
|
||||
songs={playlist.songs}
|
||||
typeName="Playlist"
|
||||
queueName={playlist.name}
|
||||
style={styles.controls}
|
||||
/>
|
||||
<View style={styles.songs}>
|
||||
{playlist.songs.map((s, i) => (
|
||||
<ListItem
|
||||
key={i}
|
||||
item={s}
|
||||
subtitle={s.artist}
|
||||
showArt={true}
|
||||
onPress={() => setQueue(playlist.songs, playlist.name, i)}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
|
||||
return (
|
||||
<ImageGradientScrollView
|
||||
imageUri={coverArtUri(playlist.coverArt)}
|
||||
imageKey={`${playlist.id}${playlist.name}`}
|
||||
style={styles.container}>
|
||||
<View style={styles.content}>
|
||||
<CoverArt coverArt={playlist.coverArt} style={styles.cover} imageSize="original" />
|
||||
<Text style={styles.title}>{playlist.name}</Text>
|
||||
{playlist.comment ? <Text style={styles.subtitle}>{playlist.comment}</Text> : <></>}
|
||||
{playlist.songs.length > 0 ? <Songs /> : <NothingHere height={350} width={250} />}
|
||||
</View>
|
||||
</ImageGradientScrollView>
|
||||
)
|
||||
}
|
||||
|
||||
const PlaylistViewFallback = () => (
|
||||
<GradientBackground style={styles.fallback}>
|
||||
<ActivityIndicator size="large" color={colors.accent} />
|
||||
</GradientBackground>
|
||||
)
|
||||
|
||||
const PlaylistView: React.FC<{
|
||||
id: string
|
||||
title: string
|
||||
}> = ({ id, title }) => {
|
||||
const navigation = useNavigation()
|
||||
|
||||
useEffect(() => {
|
||||
navigation.setOptions({ title })
|
||||
})
|
||||
|
||||
return (
|
||||
<React.Suspense fallback={<PlaylistViewFallback />}>
|
||||
<PlaylistDetails id={id} />
|
||||
</React.Suspense>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
content: {
|
||||
alignItems: 'center',
|
||||
paddingTop: 10,
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontFamily: font.bold,
|
||||
color: colors.text.primary,
|
||||
marginTop: 12,
|
||||
textAlign: 'center',
|
||||
},
|
||||
subtitle: {
|
||||
fontFamily: font.regular,
|
||||
color: colors.text.secondary,
|
||||
fontSize: 14,
|
||||
marginTop: 4,
|
||||
textAlign: 'center',
|
||||
},
|
||||
cover: {
|
||||
height: 160,
|
||||
width: 160,
|
||||
},
|
||||
songsContainer: {
|
||||
width: '100%',
|
||||
marginTop: 18,
|
||||
alignItems: 'center',
|
||||
},
|
||||
controls: {
|
||||
marginTop: 20,
|
||||
},
|
||||
songs: {
|
||||
marginTop: 26,
|
||||
marginBottom: 30,
|
||||
width: '100%',
|
||||
},
|
||||
fallback: {
|
||||
alignItems: 'center',
|
||||
paddingTop: 100,
|
||||
},
|
||||
nothingContainer: {
|
||||
height: 400,
|
||||
backgroundColor: 'green',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
})
|
||||
|
||||
export default React.memo(PlaylistView)
|
||||
@ -2,8 +2,9 @@ import GradientScrollView from '@app/components/GradientScrollView'
|
||||
import Header from '@app/components/Header'
|
||||
import ListItem from '@app/components/ListItem'
|
||||
import NothingHere from '@app/components/NothingHere'
|
||||
import { useUpdateSearchResults } from '@app/hooks/music'
|
||||
import { ListableItem, SearchResults, Song } from '@app/models/music'
|
||||
import { searchResultsAtom, searchResultsUpdatingAtom, useUpdateSearchResults } from '@app/state/music'
|
||||
import { searchResultsAtom, searchResultsUpdatingAtom } from '@app/state/music'
|
||||
import { useSetQueue } from '@app/state/trackplayer'
|
||||
import colors from '@app/styles/colors'
|
||||
import font from '@app/styles/font'
|
||||
|
||||
@ -2,11 +2,11 @@ import Button from '@app/components/Button'
|
||||
import GradientScrollView from '@app/components/GradientScrollView'
|
||||
import SettingsItem from '@app/components/SettingsItem'
|
||||
import { Server } from '@app/models/settings'
|
||||
import { activeServerAtom, serversAtom } from '@app/state/settings'
|
||||
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 { useNavigation } from '@react-navigation/native'
|
||||
import { useAtom } from 'jotai'
|
||||
import md5 from 'md5'
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import { StyleSheet, Text, TextInput, View } from 'react-native'
|
||||
@ -23,8 +23,10 @@ const ServerView: React.FC<{
|
||||
id?: string
|
||||
}> = ({ id }) => {
|
||||
const navigation = useNavigation()
|
||||
const [activeServer, setActiveServer] = useAtom(activeServerAtom)
|
||||
const [servers, setServers] = useAtom(serversAtom)
|
||||
const activeServer = useStore(selectSettings.activeServer)
|
||||
const setActiveServer = useStore(selectSettings.setActiveServer)
|
||||
const servers = useStore(selectSettings.servers)
|
||||
const setServers = useStore(selectSettings.setServers)
|
||||
const server = id ? servers.find(s => s.id === id) : undefined
|
||||
|
||||
const [address, setAddress] = useState(server?.address || '')
|
||||
|
||||
@ -3,12 +3,12 @@ import GradientScrollView from '@app/components/GradientScrollView'
|
||||
import Header from '@app/components/Header'
|
||||
import PressableOpacity from '@app/components/PressableOpacity'
|
||||
import SettingsItem from '@app/components/SettingsItem'
|
||||
import { useSwitchActiveServer } from '@app/hooks/server'
|
||||
import { Server } from '@app/models/settings'
|
||||
import { useSetActiveServer } from '@app/state/server'
|
||||
import { activeServerAtom, appSettingsAtom } from '@app/state/settings'
|
||||
import { selectSettings } from '@app/state/settings'
|
||||
import { useStore } from '@app/state/store'
|
||||
import colors from '@app/styles/colors'
|
||||
import { useNavigation } from '@react-navigation/core'
|
||||
import { useAtomValue } from 'jotai/utils'
|
||||
import React, { useCallback } from 'react'
|
||||
import { StatusBar, StyleSheet, View } from 'react-native'
|
||||
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
|
||||
@ -16,13 +16,13 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
|
||||
const ServerItem = React.memo<{
|
||||
server: Server
|
||||
}>(({ server }) => {
|
||||
const activeServer = useAtomValue(activeServerAtom)
|
||||
const setActiveServer = useSetActiveServer()
|
||||
const activeServer = useStore(selectSettings.activeServer)
|
||||
const switchActiveServer = useSwitchActiveServer()
|
||||
const navigation = useNavigation()
|
||||
|
||||
const setActive = useCallback(() => {
|
||||
setActiveServer(server.id)
|
||||
}, [server.id, setActiveServer])
|
||||
switchActiveServer(server.id)
|
||||
}, [server.id, switchActiveServer])
|
||||
|
||||
return (
|
||||
<SettingsItem
|
||||
@ -41,21 +41,26 @@ const ServerItem = React.memo<{
|
||||
})
|
||||
|
||||
const SettingsContent = React.memo(() => {
|
||||
const settings = useAtomValue(appSettingsAtom)
|
||||
const servers = useStore(selectSettings.servers)
|
||||
const navigation = useNavigation()
|
||||
|
||||
return (
|
||||
<View style={styles.content}>
|
||||
<Header>Servers</Header>
|
||||
{settings.servers.map(s => (
|
||||
{servers.map(s => (
|
||||
<ServerItem key={s.id} server={s} />
|
||||
))}
|
||||
<Button title="Add Server" onPress={() => navigation.navigate('server')} buttonStyle="hollow" />
|
||||
<Header>Network</Header>
|
||||
<Button
|
||||
style={styles.button}
|
||||
title="Add Server"
|
||||
onPress={() => navigation.navigate('server')}
|
||||
buttonStyle="hollow"
|
||||
/>
|
||||
<Header style={styles.header}>Network</Header>
|
||||
<SettingsItem title="Max bitrate (Wi-Fi)" subtitle="Unlimited" />
|
||||
<SettingsItem title="Max bitrate (mobile)" subtitle="192kbps" />
|
||||
<Header>Reset</Header>
|
||||
<Button title="Reset everything to default" onPress={() => {}} buttonStyle="hollow" />
|
||||
<Header style={styles.header}>Reset</Header>
|
||||
<Button style={styles.button} title="Reset everything to default" onPress={() => {}} buttonStyle="hollow" />
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@ -63,9 +68,7 @@ const SettingsContent = React.memo(() => {
|
||||
const Settings = () => {
|
||||
return (
|
||||
<GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
|
||||
<React.Suspense fallback={() => <></>}>
|
||||
<SettingsContent />
|
||||
</React.Suspense>
|
||||
<SettingsContent />
|
||||
</GradientScrollView>
|
||||
)
|
||||
}
|
||||
@ -86,6 +89,12 @@ const styles = StyleSheet.create({
|
||||
serverActive: {
|
||||
paddingLeft: 12,
|
||||
},
|
||||
header: {
|
||||
marginTop: 26,
|
||||
},
|
||||
button: {
|
||||
marginVertical: 10,
|
||||
},
|
||||
})
|
||||
|
||||
export default Settings
|
||||
|
||||
167
app/screens/SongListView.tsx
Normal file
167
app/screens/SongListView.tsx
Normal file
@ -0,0 +1,167 @@
|
||||
import CoverArt from '@app/components/CoverArt'
|
||||
import GradientBackground from '@app/components/GradientBackground'
|
||||
import ImageGradientScrollView from '@app/components/ImageGradientScrollView'
|
||||
import ListItem from '@app/components/ListItem'
|
||||
import ListPlayerControls from '@app/components/ListPlayerControls'
|
||||
import NothingHere from '@app/components/NothingHere'
|
||||
import { useAlbumWithSongs, useCoverArtUri, usePlaylistWithSongs } from '@app/hooks/music'
|
||||
import { AlbumWithSongs, PlaylistWithSongs, Song } from '@app/models/music'
|
||||
import { useSetQueue } from '@app/state/trackplayer'
|
||||
import colors from '@app/styles/colors'
|
||||
import font from '@app/styles/font'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import React, { useEffect } from 'react'
|
||||
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
|
||||
|
||||
type SongListType = 'album' | 'playlist'
|
||||
|
||||
const SongListDetailsFallback = React.memo(() => (
|
||||
<GradientBackground style={styles.fallback}>
|
||||
<ActivityIndicator size="large" color={colors.accent} />
|
||||
</GradientBackground>
|
||||
))
|
||||
|
||||
const Songs = React.memo<{
|
||||
songs: Song[]
|
||||
name: string
|
||||
type: SongListType
|
||||
}>(({ songs, name, type }) => {
|
||||
const setQueue = useSetQueue()
|
||||
|
||||
const _songs = [...songs]
|
||||
let typeName = ''
|
||||
|
||||
if (type === 'album') {
|
||||
typeName = 'Album'
|
||||
_songs.sort((a, b) => {
|
||||
if (b.track && a.track) {
|
||||
return a.track - b.track
|
||||
} else {
|
||||
return a.title.localeCompare(b.title)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
typeName = 'Playlist'
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ListPlayerControls style={styles.controls} songs={songs} typeName={typeName} queueName={name} />
|
||||
<View style={styles.songs}>
|
||||
{_songs.map((s, i) => (
|
||||
<ListItem
|
||||
key={i}
|
||||
item={s}
|
||||
subtitle={s.artist}
|
||||
onPress={() => setQueue(songs, name, i)}
|
||||
showArt={type === 'playlist'}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
const SongListDetails = React.memo<{
|
||||
type: SongListType
|
||||
songList?: AlbumWithSongs | PlaylistWithSongs
|
||||
subtitle?: string
|
||||
}>(({ songList, subtitle, type }) => {
|
||||
const coverArtUri = useCoverArtUri()
|
||||
|
||||
if (!songList) {
|
||||
return <SongListDetailsFallback />
|
||||
}
|
||||
|
||||
return (
|
||||
<ImageGradientScrollView imageUri={coverArtUri(songList.coverArt)} style={styles.container}>
|
||||
<View style={styles.content}>
|
||||
<CoverArt coverArt={songList.coverArt} style={styles.cover} imageSize="original" />
|
||||
<Text style={styles.title}>{songList.name}</Text>
|
||||
{subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : <></>}
|
||||
{songList.songs.length > 0 ? (
|
||||
<Songs songs={songList.songs} name={songList.name} type={type} />
|
||||
) : (
|
||||
<NothingHere height={300} width={250} />
|
||||
)}
|
||||
</View>
|
||||
</ImageGradientScrollView>
|
||||
)
|
||||
})
|
||||
|
||||
const PlaylistView = React.memo<{
|
||||
id: string
|
||||
}>(({ id }) => {
|
||||
const playlist = usePlaylistWithSongs(id)
|
||||
return <SongListDetails songList={playlist} subtitle={playlist?.comment} type="playlist" />
|
||||
})
|
||||
|
||||
const AlbumView = React.memo<{
|
||||
id: string
|
||||
}>(({ id }) => {
|
||||
const album = useAlbumWithSongs(id)
|
||||
return (
|
||||
<SongListDetails
|
||||
songList={album}
|
||||
subtitle={(album?.artist || '') + (album?.year ? ' • ' + album?.year : '')}
|
||||
type="album"
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
const SongListView = React.memo<{
|
||||
id: string
|
||||
title: string
|
||||
type: SongListType
|
||||
}>(({ id, title, type }) => {
|
||||
const navigation = useNavigation()
|
||||
|
||||
useEffect(() => {
|
||||
navigation.setOptions({ title })
|
||||
})
|
||||
|
||||
return type === 'album' ? <AlbumView id={id} /> : <PlaylistView id={id} />
|
||||
})
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
content: {
|
||||
alignItems: 'center',
|
||||
paddingTop: 10,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
controls: {
|
||||
marginTop: 20,
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontFamily: font.bold,
|
||||
color: colors.text.primary,
|
||||
marginTop: 20,
|
||||
textAlign: 'center',
|
||||
},
|
||||
subtitle: {
|
||||
fontFamily: font.regular,
|
||||
color: colors.text.secondary,
|
||||
fontSize: 14,
|
||||
marginTop: 4,
|
||||
textAlign: 'center',
|
||||
},
|
||||
cover: {
|
||||
height: 220,
|
||||
width: 220,
|
||||
},
|
||||
songs: {
|
||||
marginTop: 26,
|
||||
marginBottom: 30,
|
||||
width: '100%',
|
||||
},
|
||||
fallback: {
|
||||
alignItems: 'center',
|
||||
paddingTop: 100,
|
||||
},
|
||||
})
|
||||
|
||||
export default SongListView
|
||||
@ -1,63 +1,125 @@
|
||||
import {
|
||||
Album,
|
||||
AlbumListItem,
|
||||
AlbumWithSongs,
|
||||
Artist,
|
||||
ArtistInfo,
|
||||
mapAlbumID3WithSongstoAlbunWithSongs,
|
||||
mapArtistInfo,
|
||||
mapPlaylistWithSongs,
|
||||
PlaylistListItem,
|
||||
PlaylistWithSongs,
|
||||
SearchResults,
|
||||
Song,
|
||||
} from '@app/models/music'
|
||||
import { activeServerAtom, homeListTypesAtom } from '@app/state/settings'
|
||||
import { Server } from '@app/models/settings'
|
||||
import { Store } from '@app/state/store'
|
||||
import { SubsonicApiClient } from '@app/subsonic/api'
|
||||
import {
|
||||
AlbumID3Element,
|
||||
ArtistID3Element,
|
||||
ArtistInfo2Element,
|
||||
ChildElement,
|
||||
PlaylistElement,
|
||||
PlaylistWithSongsElement,
|
||||
} from '@app/subsonic/elements'
|
||||
import { GetAlbumList2Type, GetCoverArtParams } from '@app/subsonic/params'
|
||||
import { GetArtistResponse } from '@app/subsonic/responses'
|
||||
import { atom, useAtom } from 'jotai'
|
||||
import { atomFamily, useAtomValue, useUpdateAtom } from 'jotai/utils'
|
||||
import produce from 'immer'
|
||||
import { atom } from 'jotai'
|
||||
import { GetState, SetState } from 'zustand'
|
||||
|
||||
export const artistsAtom = atom<Artist[]>([])
|
||||
export const artistsUpdatingAtom = atom(false)
|
||||
|
||||
export const useUpdateArtists = () => {
|
||||
const server = useAtomValue(activeServerAtom)
|
||||
const [updating, setUpdating] = useAtom(artistsUpdatingAtom)
|
||||
const setArtists = useUpdateAtom(artistsAtom)
|
||||
|
||||
if (!server) {
|
||||
return () => Promise.resolve()
|
||||
}
|
||||
|
||||
return async () => {
|
||||
if (updating) {
|
||||
return
|
||||
}
|
||||
setUpdating(true)
|
||||
export type MusicSlice = {
|
||||
cacheSize: number
|
||||
artistInfo: { [id: string]: ArtistInfo | undefined }
|
||||
artistInfoCache: string[]
|
||||
albums: { [id: string]: AlbumWithSongs | undefined }
|
||||
albumsCache: string[]
|
||||
playlists: { [id: string]: PlaylistWithSongs | undefined }
|
||||
playlistsCache: string[]
|
||||
fetchArtistInfo: (server: Server, id: string) => Promise<ArtistInfo | undefined>
|
||||
fetchAlbum: (server: Server, id: string) => Promise<AlbumWithSongs | undefined>
|
||||
fetchPlaylist: (server: Server, id: string) => Promise<PlaylistWithSongs | undefined>
|
||||
}
|
||||
|
||||
export const createMusicSlice = (set: SetState<Store>, _get: GetState<Store>): MusicSlice => ({
|
||||
cacheSize: 100,
|
||||
artistInfo: {},
|
||||
artistInfoCache: [],
|
||||
albums: {},
|
||||
albumsCache: [],
|
||||
playlists: {},
|
||||
playlistsCache: [],
|
||||
fetchArtistInfo: async (server, id) => {
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
try {
|
||||
const response = await client.getArtists()
|
||||
setArtists(response.data.artists.map(mapArtistID3toArtist))
|
||||
} finally {
|
||||
setUpdating(false)
|
||||
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 = mapArtistInfo(
|
||||
artistResponse.data,
|
||||
artistInfoResponse.data.artistInfo,
|
||||
topSongsResponse.data.songs,
|
||||
client,
|
||||
)
|
||||
|
||||
set(
|
||||
produce<MusicSlice>(state => {
|
||||
if (state.artistInfoCache.length >= state.cacheSize) {
|
||||
delete state.albums[state.artistInfoCache.shift() as string]
|
||||
}
|
||||
state.artistInfo[id] = artistInfo
|
||||
state.artistInfoCache.push(id)
|
||||
}),
|
||||
)
|
||||
return artistInfo
|
||||
} catch {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fetchAlbum: async (server, id) => {
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
try {
|
||||
const response = await client.getAlbum({ id })
|
||||
const album = mapAlbumID3WithSongstoAlbunWithSongs(response.data.album, response.data.songs, client)
|
||||
|
||||
set(
|
||||
produce<MusicSlice>(state => {
|
||||
if (state.albumsCache.length >= state.cacheSize) {
|
||||
delete state.albums[state.albumsCache.shift() as string]
|
||||
}
|
||||
state.albums[id] = album
|
||||
state.albumsCache.push(id)
|
||||
}),
|
||||
)
|
||||
return album
|
||||
} catch {
|
||||
return undefined
|
||||
}
|
||||
},
|
||||
fetchPlaylist: async (server, id) => {
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
try {
|
||||
const response = await client.getPlaylist({ id })
|
||||
const playlist = mapPlaylistWithSongs(response.data.playlist, client)
|
||||
|
||||
set(
|
||||
produce<MusicSlice>(state => {
|
||||
if (state.playlistsCache.length >= state.cacheSize) {
|
||||
delete state.playlists[state.playlistsCache.shift() as string]
|
||||
}
|
||||
state.playlists[id] = playlist
|
||||
state.playlistsCache.push(id)
|
||||
}),
|
||||
)
|
||||
return playlist
|
||||
} catch {
|
||||
return undefined
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
export const artistsAtom = atom<Artist[]>([])
|
||||
export const artistsUpdatingAtom = atom(false)
|
||||
|
||||
export type HomeLists = { [key: string]: AlbumListItem[] }
|
||||
|
||||
export const homeListsUpdatingAtom = atom(false)
|
||||
export const homeListsAtom = atom<HomeLists>({})
|
||||
const homeListsWriteAtom = atom<HomeLists, { type: string; albums: AlbumListItem[] }>(
|
||||
export const homeListsWriteAtom = atom<HomeLists, { type: string; albums: AlbumListItem[] }>(
|
||||
get => get(homeListsAtom),
|
||||
(get, set, { type, albums }) => {
|
||||
const lists = get(homeListsAtom)
|
||||
@ -68,40 +130,6 @@ const homeListsWriteAtom = atom<HomeLists, { type: string; albums: AlbumListItem
|
||||
},
|
||||
)
|
||||
|
||||
export const useUpdateHomeLists = () => {
|
||||
const server = useAtomValue(activeServerAtom)
|
||||
const types = useAtomValue(homeListTypesAtom)
|
||||
const updateHomeList = useUpdateAtom(homeListsWriteAtom)
|
||||
const [updating, setUpdating] = useAtom(homeListsUpdatingAtom)
|
||||
|
||||
if (!server) {
|
||||
return async () => {}
|
||||
}
|
||||
|
||||
return async () => {
|
||||
if (updating) {
|
||||
return
|
||||
}
|
||||
setUpdating(true)
|
||||
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
try {
|
||||
const promises: Promise<any>[] = []
|
||||
for (const type of types) {
|
||||
promises.push(
|
||||
client.getAlbumList2({ type: type as GetAlbumList2Type, size: 20 }).then(response => {
|
||||
updateHomeList({ type, albums: response.data.albums.map(mapAlbumID3toAlbumListItem) })
|
||||
}),
|
||||
)
|
||||
}
|
||||
await Promise.all(promises)
|
||||
} finally {
|
||||
setUpdating(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const searchResultsUpdatingAtom = atom(false)
|
||||
export const searchResultsAtom = atom<SearchResults>({
|
||||
artists: [],
|
||||
@ -109,260 +137,8 @@ export const searchResultsAtom = atom<SearchResults>({
|
||||
songs: [],
|
||||
})
|
||||
|
||||
export const useUpdateSearchResults = () => {
|
||||
const server = useAtomValue(activeServerAtom)
|
||||
const updateList = useUpdateAtom(searchResultsAtom)
|
||||
const [updating, setUpdating] = useAtom(searchResultsUpdatingAtom)
|
||||
|
||||
if (!server) {
|
||||
return async () => {}
|
||||
}
|
||||
|
||||
return async (query: string) => {
|
||||
if (updating || query.length < 2) {
|
||||
return
|
||||
}
|
||||
setUpdating(true)
|
||||
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
try {
|
||||
const response = await client.search3({ query })
|
||||
updateList({
|
||||
artists: response.data.artists.map(mapArtistID3toArtist),
|
||||
albums: response.data.albums.map(mapAlbumID3toAlbumListItem),
|
||||
songs: response.data.songs.map(a => mapChildToSong(a, client)),
|
||||
})
|
||||
} finally {
|
||||
setUpdating(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const playlistsUpdatingAtom = atom(false)
|
||||
export const playlistsAtom = atom<PlaylistListItem[]>([])
|
||||
|
||||
export const useUpdatePlaylists = () => {
|
||||
const server = useAtomValue(activeServerAtom)
|
||||
const updateList = useUpdateAtom(playlistsAtom)
|
||||
const [updating, setUpdating] = useAtom(playlistsUpdatingAtom)
|
||||
|
||||
if (!server) {
|
||||
return async () => {}
|
||||
}
|
||||
|
||||
return async () => {
|
||||
if (updating) {
|
||||
return
|
||||
}
|
||||
setUpdating(true)
|
||||
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
try {
|
||||
const response = await client.getPlaylists()
|
||||
updateList(response.data.playlists.map(mapPlaylistListItem))
|
||||
} finally {
|
||||
setUpdating(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const playlistAtomFamily = atomFamily((id: string) =>
|
||||
atom<PlaylistWithSongs | undefined>(async get => {
|
||||
const server = get(activeServerAtom)
|
||||
if (!server) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
try {
|
||||
const response = await client.getPlaylist({ id })
|
||||
return mapPlaylistWithSongs(response.data.playlist, client)
|
||||
} catch {
|
||||
return undefined
|
||||
}
|
||||
}),
|
||||
)
|
||||
|
||||
export const albumListUpdatingAtom = atom(false)
|
||||
export const albumListAtom = atom<AlbumListItem[]>([])
|
||||
|
||||
export const useUpdateAlbumList = () => {
|
||||
const server = useAtomValue(activeServerAtom)
|
||||
const updateList = useUpdateAtom(albumListAtom)
|
||||
const [updating, setUpdating] = useAtom(albumListUpdatingAtom)
|
||||
|
||||
if (!server) {
|
||||
return async () => {}
|
||||
}
|
||||
|
||||
return async () => {
|
||||
if (updating) {
|
||||
return
|
||||
}
|
||||
setUpdating(true)
|
||||
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
try {
|
||||
const response = await client.getAlbumList2({ type: 'alphabeticalByArtist', size: 500 })
|
||||
updateList(response.data.albums.map(mapAlbumID3toAlbumListItem))
|
||||
} finally {
|
||||
setUpdating(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const albumAtomFamily = atomFamily((id: string) =>
|
||||
atom<AlbumWithSongs | undefined>(async get => {
|
||||
const server = get(activeServerAtom)
|
||||
if (!server) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
try {
|
||||
const response = await client.getAlbum({ id })
|
||||
return mapAlbumID3WithSongstoAlbunWithSongs(response.data.album, response.data.songs, client)
|
||||
} catch {
|
||||
return undefined
|
||||
}
|
||||
}),
|
||||
)
|
||||
|
||||
export const artistInfoAtomFamily = atomFamily((id: string) =>
|
||||
atom<ArtistInfo | undefined>(async get => {
|
||||
const server = get(activeServerAtom)
|
||||
if (!server) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
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 })
|
||||
return mapArtistInfo(artistResponse.data, artistInfoResponse.data.artistInfo, topSongsResponse.data.songs, client)
|
||||
} catch {
|
||||
return undefined
|
||||
}
|
||||
}),
|
||||
)
|
||||
|
||||
export const useCoverArtUri = () => {
|
||||
const server = useAtomValue(activeServerAtom)
|
||||
|
||||
if (!server) {
|
||||
return () => undefined
|
||||
}
|
||||
|
||||
const client = new SubsonicApiClient(server)
|
||||
|
||||
return (coverArt?: string, size: 'thumbnail' | 'original' = 'thumbnail') => {
|
||||
const params: GetCoverArtParams = { id: coverArt || '-1' }
|
||||
if (size === 'thumbnail') {
|
||||
params.size = '256'
|
||||
}
|
||||
|
||||
return client.getCoverArtUri(params)
|
||||
}
|
||||
}
|
||||
|
||||
function mapArtistID3toArtist(artist: ArtistID3Element): Artist {
|
||||
return {
|
||||
itemType: 'artist',
|
||||
id: artist.id,
|
||||
name: artist.name,
|
||||
starred: artist.starred,
|
||||
coverArt: artist.coverArt,
|
||||
}
|
||||
}
|
||||
|
||||
function mapArtistInfo(
|
||||
artistResponse: GetArtistResponse,
|
||||
info: ArtistInfo2Element,
|
||||
topSongs: ChildElement[],
|
||||
client: SubsonicApiClient,
|
||||
): ArtistInfo {
|
||||
const { artist, albums } = artistResponse
|
||||
|
||||
const mappedAlbums = albums.map(mapAlbumID3toAlbum)
|
||||
|
||||
return {
|
||||
...mapArtistID3toArtist(artist),
|
||||
albums: mappedAlbums,
|
||||
smallImageUrl: info.smallImageUrl,
|
||||
mediumImageUrl: info.mediumImageUrl,
|
||||
largeImageUrl: info.largeImageUrl,
|
||||
topSongs: topSongs.map(s => mapChildToSong(s, client)).slice(0, 5),
|
||||
}
|
||||
}
|
||||
|
||||
function mapAlbumID3toAlbumListItem(album: AlbumID3Element): AlbumListItem {
|
||||
return {
|
||||
itemType: 'album',
|
||||
id: album.id,
|
||||
name: album.name,
|
||||
artist: album.artist,
|
||||
starred: album.starred,
|
||||
coverArt: album.coverArt,
|
||||
}
|
||||
}
|
||||
|
||||
function mapAlbumID3toAlbum(album: AlbumID3Element): Album {
|
||||
return {
|
||||
...mapAlbumID3toAlbumListItem(album),
|
||||
coverArt: album.coverArt,
|
||||
year: album.year,
|
||||
}
|
||||
}
|
||||
|
||||
function mapChildToSong(child: ChildElement, client: SubsonicApiClient): Song {
|
||||
return {
|
||||
itemType: 'song',
|
||||
id: child.id,
|
||||
album: child.album,
|
||||
artist: child.artist,
|
||||
title: child.title,
|
||||
track: child.track,
|
||||
duration: child.duration,
|
||||
starred: child.starred,
|
||||
coverArt: child.coverArt,
|
||||
streamUri: client.streamUri({ id: child.id }),
|
||||
}
|
||||
}
|
||||
|
||||
function mapAlbumID3WithSongstoAlbunWithSongs(
|
||||
album: AlbumID3Element,
|
||||
songs: ChildElement[],
|
||||
client: SubsonicApiClient,
|
||||
): AlbumWithSongs {
|
||||
return {
|
||||
...mapAlbumID3toAlbum(album),
|
||||
songs: songs.map(s => mapChildToSong(s, client)),
|
||||
}
|
||||
}
|
||||
|
||||
function mapPlaylistListItem(playlist: PlaylistElement): PlaylistListItem {
|
||||
return {
|
||||
itemType: 'playlist',
|
||||
id: playlist.id,
|
||||
name: playlist.name,
|
||||
comment: playlist.comment,
|
||||
coverArt: playlist.coverArt,
|
||||
}
|
||||
}
|
||||
|
||||
function mapPlaylistWithSongs(playlist: PlaylistWithSongsElement, client: SubsonicApiClient): PlaylistWithSongs {
|
||||
return {
|
||||
...mapPlaylistListItem(playlist),
|
||||
songs: playlist.songs.map(s => mapChildToSong(s, client)),
|
||||
coverArt: playlist.coverArt,
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,46 +1,47 @@
|
||||
import { atom } from 'jotai'
|
||||
import { AppSettings, Server } from '@app/models/settings'
|
||||
import atomWithAsyncStorage from '@app/storage/atomWithAsyncStorage'
|
||||
import equal from 'fast-deep-equal'
|
||||
import { Store } from '@app/state/store'
|
||||
import produce from 'immer'
|
||||
import { GetState, SetState } from 'zustand'
|
||||
|
||||
export const appSettingsAtom = atomWithAsyncStorage<AppSettings>('@appSettings', {
|
||||
servers: [],
|
||||
home: {
|
||||
lists: ['recent', 'random', 'frequent', 'starred'],
|
||||
export type SettingsSlice = {
|
||||
settings: AppSettings
|
||||
setActiveServer: (id?: string) => void
|
||||
setServers: (servers: Server[]) => void
|
||||
}
|
||||
|
||||
export const createSettingsSlice = (set: SetState<Store>, _get: GetState<Store>): SettingsSlice => ({
|
||||
settings: {
|
||||
servers: [],
|
||||
home: {
|
||||
lists: ['recent', 'random', 'frequent', 'starred'],
|
||||
},
|
||||
},
|
||||
setActiveServer: id =>
|
||||
set(
|
||||
produce<Store>(state => {
|
||||
if (!state.settings.servers.find(s => s.id === id)) {
|
||||
console.log('could not find')
|
||||
return
|
||||
}
|
||||
if (state.settings.activeServer === id) {
|
||||
console.log('already active')
|
||||
return
|
||||
}
|
||||
state.settings.activeServer = id
|
||||
}),
|
||||
),
|
||||
setServers: servers =>
|
||||
set(
|
||||
produce<Store>(state => {
|
||||
state.settings.servers = servers
|
||||
}),
|
||||
),
|
||||
})
|
||||
|
||||
export const activeServerAtom = atom<Server | undefined, string>(
|
||||
get => {
|
||||
const appSettings = get(appSettingsAtom)
|
||||
return appSettings.servers.find(x => x.id === appSettings.activeServer)
|
||||
},
|
||||
(get, set, update) => {
|
||||
const appSettings = get(appSettingsAtom)
|
||||
if (!appSettings.servers.find(s => s.id === update)) {
|
||||
return
|
||||
}
|
||||
if (appSettings.activeServer === update) {
|
||||
return
|
||||
}
|
||||
set(appSettingsAtom, {
|
||||
...appSettings,
|
||||
activeServer: update,
|
||||
})
|
||||
},
|
||||
)
|
||||
|
||||
export const serversAtom = atom<Server[], Server[]>(
|
||||
get => get(appSettingsAtom).servers,
|
||||
(get, set, update) => {
|
||||
const settings = get(appSettingsAtom)
|
||||
if (!equal(settings.servers, update)) {
|
||||
set(appSettingsAtom, {
|
||||
...settings,
|
||||
servers: update,
|
||||
})
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
export const homeListTypesAtom = atom(get => get(appSettingsAtom).home.lists)
|
||||
export const selectSettings = {
|
||||
activeServer: (state: Store) => state.settings.servers.find(s => s.id === state.settings.activeServer),
|
||||
setActiveServer: (state: Store) => state.setActiveServer,
|
||||
servers: (state: Store) => state.settings.servers,
|
||||
setServers: (state: Store) => state.setServers,
|
||||
homeLists: (state: Store) => state.settings.home.lists,
|
||||
}
|
||||
|
||||
42
app/state/store.ts
Normal file
42
app/state/store.ts
Normal file
@ -0,0 +1,42 @@
|
||||
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'
|
||||
|
||||
export type Store = SettingsSlice & MusicSlice
|
||||
|
||||
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),
|
||||
}),
|
||||
{
|
||||
name: '@appStore',
|
||||
getStorage: () => storage,
|
||||
whitelist: ['settings'],
|
||||
// onRehydrateStorage: state => {
|
||||
// return (state, error) => {}
|
||||
// },
|
||||
},
|
||||
),
|
||||
)
|
||||
@ -1,3 +1,4 @@
|
||||
import { useCoverArtUri } from '@app/hooks/music'
|
||||
import { Song } from '@app/models/music'
|
||||
import PromiseQueue from '@app/util/PromiseQueue'
|
||||
import equal from 'fast-deep-equal'
|
||||
@ -7,7 +8,6 @@ import { atomWithStore } from 'jotai/zustand'
|
||||
import { useCallback, useEffect } from 'react'
|
||||
import TrackPlayer, { State, Track } from 'react-native-track-player'
|
||||
import create from 'zustand'
|
||||
import { useCoverArtUri } from './music'
|
||||
|
||||
type TrackExt = Track & {
|
||||
id: string
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
"@react-navigation/material-top-tabs": "^5.3.15",
|
||||
"@react-navigation/native": "^5.9.4",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"immer": "^9.0.5",
|
||||
"jotai": "^1.1.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"md5": "^2.3.0",
|
||||
|
||||
@ -3399,6 +3399,11 @@ image-size@^0.6.0:
|
||||
resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.3.tgz#e7e5c65bb534bd7cdcedd6cb5166272a85f75fb2"
|
||||
integrity sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA==
|
||||
|
||||
immer@^9.0.5:
|
||||
version "9.0.5"
|
||||
resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.5.tgz#a7154f34fe7064f15f00554cc94c66cc0bf453ec"
|
||||
integrity sha512-2WuIehr2y4lmYz9gaQzetPR2ECniCifk4ORaQbU3g5EalLt+0IVTosEPJ5BoYl/75ky2mivzdRzV8wWgQGOSYQ==
|
||||
|
||||
import-fresh@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user