now playing header now shows context menu

fixed now playing image gradient

app/components/ContextMenu.tsx

@@ -1,6 +1,6 @@
 import PressableOpacity from '@app/components/PressableOpacity'
 import { useStarred } from '@app/hooks/music'
-import { AlbumListItem, Artist, Song } from '@app/models/music'
+import { AlbumListItem, Artist, Song, StarrableItemType } from '@app/models/music'
 import { selectMusic } from '@app/state/music'
 import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
@@ -25,6 +25,7 @@ type ContextMenuProps = {
   triggerOuterWrapperStyle?: StyleProp<ViewStyle>
   triggerTouchableStyle?: StyleProp<ViewStyle>
   onPress?: () => any
+  triggerOnLongPress?: boolean
 }
 
 type InternalContextMenuProps = ContextMenuProps & {
@@ -41,6 +42,7 @@ const ContextMenu: React.FC<InternalContextMenuProps> = ({
   menuHeader,
   menuOptions,
   children,
+  triggerOnLongPress,
 }) => {
   menuStyle = menuStyle || { flex: 1 }
   triggerWrapperStyle = triggerWrapperStyle || { flex: 1 }
@@ -49,7 +51,7 @@ const ContextMenu: React.FC<InternalContextMenuProps> = ({
   return (
     <Menu renderer={SlideInMenu} style={menuStyle}>
       <MenuTrigger
-        triggerOnLongPress={true}
+        triggerOnLongPress={triggerOnLongPress === undefined ? true : triggerOnLongPress}
         customStyles={{
           triggerOuterWrapper: triggerOuterWrapperStyle,
           triggerWrapper: triggerWrapperStyle,
@@ -146,15 +148,16 @@ const MenuHeader = React.memo<{
 
 const OptionStar = React.memo<{
   id: string
-  type: string
-}>(({ id, type }) => {
+  type: StarrableItemType
+  additionalText?: string
+}>(({ id, type, additionalText: text }) => {
   const starred = useStarred(id, type)
   const setStarred = useStore(selectMusic.starItem)
 
   return (
     <ContextMenuIconTextOption
       IconComponentRaw={<Star starred={starred} size={26} />}
-      text={starred ? 'Unstar' : 'Star'}
+      text={(starred ? 'Unstar' : 'Star') + (text ? ` ${text}` : '')}
       onSelect={() => setStarred(id, type, starred)}
     />
   )
@@ -277,6 +280,30 @@ export const ArtistContextPressable: React.FC<ArtistContextPressableProps> = pro
   )
 }
 
+export type NowPlayingContextPressableProps = ContextMenuProps & {
+  song: Song
+}
+
+export const NowPlayingContextPressable: React.FC<NowPlayingContextPressableProps> = props => {
+  const navigation = useNavigation()
+  const { song, children } = props
+
+  return (
+    <ContextMenu
+      {...props}
+      menuHeader={<MenuHeader title={song.title} subtitle={song.artist} coverArt={song.coverArt} />}
+      menuOptions={
+        <>
+          <OptionStar id={song.id} type={song.itemType} />
+          <OptionViewArtist artist={song.artist} artistId={song.artistId} navigation={navigation} />
+          <OptionViewAlbum album={song.album} albumId={song.albumId} navigation={navigation} />
+        </>
+      }>
+      {children}
+    </ContextMenu>
+  )
+}
+
 const styles = StyleSheet.create({
   optionsContainer: {
     backgroundColor: 'rgba(45, 45, 45, 0.95)',

app/components/HeaderBar.tsx

@@ -8,13 +8,15 @@ import Animated from 'react-native-reanimated'
 import PressableOpacity from './PressableOpacity'
 import IconMat from 'react-native-vector-icons/MaterialIcons'
 import { ReactComponentLike } from 'prop-types'
+import { Song } from '@app/models/music'
+import { NowPlayingContextPressable } from './ContextMenu'
 
 const HeaderBar = React.memo<{
   title?: string
   headerStyle?: Animated.AnimatedStyleProp<ViewStyle> | Animated.AnimatedStyleProp<ViewStyle>[]
   HeaderCenter?: ReactComponentLike
-  onMore?: () => void
-}>(({ title, headerStyle, HeaderCenter, onMore }) => {
+  contextItem?: Song
+}>(({ title, headerStyle, HeaderCenter, contextItem }) => {
   const navigation = useNavigation()
 
   const back = useCallback(() => {
@@ -23,9 +25,23 @@ const HeaderBar = React.memo<{
 
   const _headerStyle = Array.isArray(headerStyle) ? headerStyle : [headerStyle]
 
+  const moreIcon = <IconMat name="more-vert" color="white" size={25} />
+  let more = <></>
+  if (contextItem) {
+    more = (
+      <NowPlayingContextPressable
+        menuStyle={styles.icons}
+        triggerWrapperStyle={styles.icons}
+        song={contextItem}
+        triggerOnLongPress={false}>
+        {moreIcon}
+      </NowPlayingContextPressable>
+    )
+  }
+
   return (
     <Animated.View style={[styles.container, ..._headerStyle]}>
-      <PressableOpacity onPress={back} style={styles.icons} ripple={true}>
+      <PressableOpacity onPress={back} style={styles.icons}>
         <IconMat name="arrow-back" color="white" size={25} />
       </PressableOpacity>
       <View style={styles.center}>
@@ -37,13 +53,7 @@ const HeaderBar = React.memo<{
           </Text>
         )}
       </View>
-      {onMore ? (
-        <PressableOpacity style={styles.icons} ripple={true} onPress={onMore}>
-          <IconMat name="more-vert" color="white" size={25} />
-        </PressableOpacity>
-      ) : (
-        <></>
-      )}
+      {more}
     </Animated.View>
   )
 })
@@ -62,6 +72,8 @@ const styles = StyleSheet.create({
     height: 42,
     width: 42,
     marginHorizontal: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   center: {
     flex: 1,

app/components/ImageGradientBackground.tsx

@@ -18,7 +18,6 @@ const ImageGradientBackground: React.FC<{
 
   useEffect(() => {
     async function getColors() {
-      console.log(`imagePath: ${imagePath}`)
       if (imagePath === undefined) {
         return
       }
@@ -27,7 +26,6 @@ const ImageGradientBackground: React.FC<{
 
       let res: AndroidImageColors
       if (cachedResult) {
-        console.log(`cachedResult: ${JSON.stringify(cachedResult)}`)
         res = cachedResult as AndroidImageColors
       } else {
         const path = `file://${imagePath}`
@@ -35,7 +33,6 @@ const ImageGradientBackground: React.FC<{
           cache: true,
           key: imagePath,
         })) as AndroidImageColors
-        console.log(`res: ${JSON.stringify(res)}`)
       }
 
       if (res.muted && res.muted !== '#000000') {

app/hooks/music.ts

@@ -116,7 +116,6 @@ export const useArtistArtFile = (artistId: string) => {
 
   useEffect(() => {
     if (!file && artistInfo && artistInfo.largeImageUrl) {
-      console.log(artistInfo.largeImageUrl)
       cacheItem('artistArt', artistId, artistInfo.largeImageUrl)
     }
   }, [artistId, artistInfo, artistInfo?.largeImageUrl, cacheItem, file])

app/hooks/trackplayer.ts

@@ -279,11 +279,11 @@ function mapSongToTrack(song: Song, coverArtPaths: { [coverArt: string]: string
     album: song.album || 'Unknown Album',
     url: song.streamUri,
     artwork:
-      song.coverArt && coverArtPaths[song.coverArt]
-        ? `file://${coverArtPaths[song.coverArt]}`
-        : require('@res/fallback.png'),
+      song.coverArt && coverArtPaths[song.coverArt] ? coverArtPaths[song.coverArt] : require('@res/fallback.png'),
     coverArt: song.coverArt,
     duration: song.duration,
+    artistId: song.artistId,
+    albumId: song.albumId,
   }
 }
 
@@ -297,5 +297,7 @@ export function mapTrackExtToSong(track: TrackExt): Song {
     streamUri: track.url as string,
     coverArt: track.coverArt,
     duration: track.duration,
+    artistId: track.artistId,
+    albumId: track.albumId,
   }
 }

app/models/music.ts

@@ -80,6 +80,8 @@ export type ListableItem = Song | AlbumListItem | Artist | PlaylistListItem
 
 export type HomeLists = { [key: string]: AlbumListItem[] }
 
+export type StarrableItemType = 'song' | 'album' | 'artist'
+
 export enum CacheItemType {
   coverArt,
   artistArt,

app/screens/NowPlayingView.tsx

@@ -5,6 +5,7 @@ import PressableOpacity from '@app/components/PressableOpacity'
 import Star from '@app/components/Star'
 import { useStarred } from '@app/hooks/music'
 import {
+  mapTrackExtToSong,
   useNext,
   usePause,
   usePlay,
@@ -15,7 +16,7 @@ import {
 } from '@app/hooks/trackplayer'
 import { selectMusic } from '@app/state/music'
 import { useStore } from '@app/state/store'
-import { QueueContextType, selectTrackPlayer } from '@app/state/trackplayer'
+import { QueueContextType, selectTrackPlayer, TrackExt } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import formatDuration from '@app/util/formatDuration'
@@ -45,34 +46,28 @@ function getContextName(type?: QueueContextType) {
   }
 }
 
-const NowPlayingHeader = React.memo(() => {
-  const navigation = useNavigation()
+const NowPlayingHeader = React.memo<{
+  track?: TrackExt
+}>(({ track }) => {
   const queueName = useStore(selectTrackPlayer.name)
   const queueContextType = useStore(selectTrackPlayer.queueContextType)
-  const queueContextId = useStore(selectTrackPlayer.queueContextId)
+
+  if (!track) {
+    return <></>
+  }
 
   let contextName = getContextName(queueContextType)
 
-  const goToContext = useCallback(() => {
-    if (!queueContextType || !queueContextId || queueContextType === 'song') {
-      return
-    }
-    navigation.navigate('library')
-    navigation.navigate(queueContextType, { id: queueContextId, title: queueName })
-  }, [navigation, queueContextId, queueContextType, queueName])
-
   return (
     <HeaderBar
       headerStyle={{ backgroundColor: 'transparent' }}
-      onMore={goToContext}
+      contextItem={mapTrackExtToSong(track)}
       HeaderCenter={() => (
         <View style={headerStyles.center}>
-          {contextName ? (
+          {contextName !== undefined && (
             <Text numberOfLines={1} style={headerStyles.queueType}>
               {contextName}
             </Text>
-          ) : (
-            <></>
           )}
           <Text numberOfLines={1} style={headerStyles.queueName}>
             {queueName || 'Nothing playing...'}
@@ -395,7 +390,7 @@ const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
   return (
     <View style={styles.container}>
       <ImageGradientBackground imagePath={imagePath} />
-      <NowPlayingHeader />
+      <NowPlayingHeader track={track} />
       <View style={styles.content}>
         <SongCoverArt />
         <SongInfo />

app/state/music.ts

@@ -15,6 +15,7 @@ import {
   PlaylistWithSongs,
   SearchResults,
   Song,
+  StarrableItemType,
 } from '@app/models/music'
 import { Store } from '@app/state/store'
 import { GetAlbumList2Type, StarParams } from '@app/subsonic/params'
@@ -65,7 +66,7 @@ export type MusicSlice = {
   starredSongs: { [id: string]: boolean }
   starredAlbums: { [id: string]: boolean }
   starredArtists: { [id: string]: boolean }
-  starItem: (id: string, type: string, unstar?: boolean) => Promise<void>
+  starItem: (id: string, type: StarrableItemType, unstar?: boolean) => Promise<void>
 
   albumIdCoverArt: { [id: string]: string | undefined }
   albumIdCoverArtRequests: { [id: string]: Promise<void> }

app/state/trackplayer.ts

@@ -7,6 +7,8 @@ import { Store } from './store'
 export type TrackExt = Track & {
   id: string
   coverArt?: string
+  artistId?: string
+  albumId?: string
 }
 
 export type Progress = {