now playing header now shows context menu

fixed now playing image gradient

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,