added context menu for album view

app/components/HeaderBar.tsx

@@ -8,14 +8,48 @@ 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'
+import { AlbumListItem, Song } from '@app/models/music'
+import { AlbumContextPressable, NowPlayingContextPressable } from './ContextMenu'
+
+export type HeaderContextItem = Song | AlbumListItem
+
+const More = React.memo<{ contextItem?: HeaderContextItem }>(({ contextItem }) => {
+  let context: JSX.Element
+  switch (contextItem?.itemType) {
+    case 'song':
+      context = (
+        <NowPlayingContextPressable
+          menuStyle={styles.icons}
+          triggerWrapperStyle={styles.icons}
+          song={contextItem}
+          triggerOnLongPress={false}>
+          <IconMat name="more-vert" color="white" size={25} />
+        </NowPlayingContextPressable>
+      )
+      break
+    case 'album':
+      context = (
+        <AlbumContextPressable
+          menuStyle={styles.icons}
+          triggerWrapperStyle={styles.icons}
+          album={contextItem}
+          triggerOnLongPress={false}>
+          <IconMat name="more-vert" color="white" size={25} />
+        </AlbumContextPressable>
+      )
+      break
+    default:
+      context = <></>
+  }
+
+  return context
+})
 
 const HeaderBar = React.memo<{
   title?: string
   headerStyle?: Animated.AnimatedStyleProp<ViewStyle> | Animated.AnimatedStyleProp<ViewStyle>[]
   HeaderCenter?: ReactComponentLike
-  contextItem?: Song
+  contextItem?: HeaderContextItem
 }>(({ title, headerStyle, HeaderCenter, contextItem }) => {
   const navigation = useNavigation()
 
@@ -25,20 +59,6 @@ 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}>
@@ -53,7 +73,7 @@ const HeaderBar = React.memo<{
           </Text>
         )}
       </View>
-      {more}
+      <More contextItem={contextItem} />
     </Animated.View>
   )
 })

app/components/ImageGradientBackground.tsx

@@ -6,13 +6,24 @@ import { AndroidImageColors } from 'react-native-image-colors/lib/typescript/typ
 import colors from '@app/styles/colors'
 import GradientBackground from '@app/components/GradientBackground'
 
-const ImageGradientBackground: React.FC<{
+export type ImageGradientBackgroundProps = {
   height?: number | string
   width?: number | string
   position?: 'relative' | 'absolute'
   style?: ViewStyle
   imagePath?: string
-}> = ({ height, width, position, style, imagePath, children }) => {
+  onGetColor?: (color: string) => void
+}
+
+const ImageGradientBackground: React.FC<ImageGradientBackgroundProps> = ({
+  height,
+  width,
+  position,
+  style,
+  imagePath,
+  children,
+  onGetColor,
+}) => {
   const [highColor, setHighColor] = useState<string>(colors.gradient.high)
   const navigation = useNavigation()
 
@@ -60,6 +71,10 @@ const ImageGradientBackground: React.FC<{
     })
   }, [navigation, highColor])
 
+  useEffect(() => {
+    onGetColor && onGetColor(highColor)
+  }, [onGetColor, highColor])
+
   return (
     <GradientBackground
       height={height}

app/components/ImageGradientScrollView.tsx

@@ -1,10 +1,10 @@
-import ImageGradientBackground from '@app/components/ImageGradientBackground'
+import ImageGradientBackground, { ImageGradientBackgroundProps } from '@app/components/ImageGradientBackground'
 import colors from '@app/styles/colors'
 import dimensions from '@app/styles/dimensions'
 import React from 'react'
 import { ScrollView, ScrollViewProps, useWindowDimensions } from 'react-native'
 
-const ImageGradientScrollView: React.FC<ScrollViewProps & { imagePath?: string }> = props => {
+const ImageGradientScrollView: React.FC<ScrollViewProps & ImageGradientBackgroundProps> = props => {
   const layout = useWindowDimensions()
 
   const minHeight = layout.height - (dimensions.top() + dimensions.bottom())
@@ -20,7 +20,7 @@ const ImageGradientScrollView: React.FC<ScrollViewProps & { imagePath?: string }
         },
       ]}
       contentContainerStyle={[{ minHeight }, props.contentContainerStyle]}>
-      <ImageGradientBackground height={minHeight} imagePath={props.imagePath} />
+      <ImageGradientBackground height={minHeight} imagePath={props.imagePath} onGetColor={props.onGetColor} />
       {props.children}
     </ScrollView>
   )