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