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

big ol' impl of zustand for settings/family states

Browse Source 
still need to move track player state over for non-react access to that
This commit is contained in:
austinried
2021-08-01 16:30:28 +09:00
parent ebc31e6d05
commit 8b17ebe9c2
26 changed files with 809 additions and 779 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
app/screens/AlbumView.tsx
View File

@@ -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)

63
app/screens/ArtistView.tsx
View File

@@ -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

36
app/screens/ArtistsList.tsx
View File

@@ -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

10
app/screens/Home.tsx
View File

@@ -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()

13
app/screens/LibraryAlbums.tsx
View File

@@ -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)

5
app/screens/LibraryArtists.tsx
View File

@@ -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'

5
app/screens/LibraryPlaylists.tsx
View File

@@ -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'

4
app/screens/NowPlayingLayout.tsx → app/screens/NowPlayingView.tsx
View File

@@ -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

139
app/screens/PlaylistView.tsx
View File

@@ -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)

3
app/screens/Search.tsx
View File

@@ -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'

10
app/screens/ServerView.tsx
View File

@@ -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 || '')

41
app/screens/Settings.tsx
View File

@@ -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
View 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