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

added context menu for album view

Browse Source
This commit is contained in:
austinried
2021-08-20 09:32:06 +09:00
parent 12cbe842ce
commit e69555f05c
5 changed files with 92 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/screens/SongListView.tsx
View File

@@ -1,5 +1,6 @@
import CoverArt from '@app/components/CoverArt'
import GradientBackground from '@app/components/GradientBackground'
import HeaderBar from '@app/components/HeaderBar'
import ImageGradientScrollView from '@app/components/ImageGradientScrollView'
import ListItem from '@app/components/ListItem'
import ListPlayerControls from '@app/components/ListPlayerControls'
@@ -12,7 +13,7 @@ import { selectTrackPlayer } 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 React, { useEffect, useState } from 'react'
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
type SongListType = 'album' | 'playlist'
@@ -71,45 +72,58 @@ const Songs = React.memo<{
})
const SongListDetails = React.memo<{
title: string
type: SongListType
songList?: AlbumWithSongs | PlaylistWithSongs
subtitle?: string
}>(({ songList, subtitle, type }) => {
}>(({ title, songList, subtitle, type }) => {
const coverArtFile = useCoverArtFile(songList?.coverArt, 'thumbnail')
const [headerColor, setHeaderColor] = useState<string | undefined>(undefined)
if (!songList) {
return <SongListDetailsFallback />
}
return (
<ImageGradientScrollView imagePath={coverArtFile?.file?.path} style={styles.container}>
<View style={styles.content}>
<CoverArt type="cover" size="original" coverArt={songList.coverArt} style={styles.cover} />
<Text style={styles.title}>{songList.name}</Text>
{subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : <></>}
{songList.songs.length > 0 ? (
<Songs songs={songList.songs} name={songList.name} type={type} itemId={songList.id} />
) : (
<NothingHere height={300} width={250} />
)}
</View>
</ImageGradientScrollView>
<View style={styles.container}>
{songList.itemType === 'album' && (
<HeaderBar headerStyle={{ backgroundColor: headerColor }} title={title} contextItem={songList} />
)}
<ImageGradientScrollView
imagePath={coverArtFile?.file?.path}
style={styles.container}
onGetColor={setHeaderColor}>
<View style={styles.content}>
<CoverArt type="cover" size="original" coverArt={songList.coverArt} style={styles.cover} />
<Text style={styles.title}>{songList.name}</Text>
{subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : <></>}
{songList.songs.length > 0 ? (
<Songs songs={songList.songs} name={songList.name} type={type} itemId={songList.id} />
) : (
<NothingHere height={300} width={250} />
)}
</View>
</ImageGradientScrollView>
</View>
)
})
const PlaylistView = React.memo<{
id: string
}>(({ id }) => {
title: string
}>(({ id, title }) => {
const playlist = usePlaylistWithSongs(id)
return <SongListDetails songList={playlist} subtitle={playlist?.comment} type="playlist" />
return <SongListDetails title={title} songList={playlist} subtitle={playlist?.comment} type="playlist" />
})
const AlbumView = React.memo<{
id: string
}>(({ id }) => {
title: string
}>(({ id, title }) => {
const album = useAlbumWithSongs(id)
return (
<SongListDetails
title={title}
songList={album}
subtitle={(album?.artist || '') + (album?.year ? ' • ' + album?.year : '')}
type="album"
@@ -128,7 +142,7 @@ const SongListView = React.memo<{
navigation.setOptions({ title })
})
return type === 'album' ? <AlbumView id={id} /> : <PlaylistView id={id} />
return type === 'album' ? <AlbumView id={id} title={title} /> : <PlaylistView id={id} title={title} />
})
const styles = StyleSheet.create({