From e69555f05cfe0216109a1ea73461581890886818 Mon Sep 17 00:00:00 2001
From: austinried <4966622+austinried@users.noreply.github.com>
Date: Fri, 20 Aug 2021 09:32:06 +0900
Subject: [PATCH] added context menu for album view

---
 app/components/HeaderBar.tsx               | 56 +++++++++++++++-------
 app/components/ImageGradientBackground.tsx | 19 +++++++-
 app/components/ImageGradientScrollView.tsx |  6 +--
 app/navigation/BottomTabNavigator.tsx      |  4 +-
 app/screens/SongListView.tsx               | 50 ++++++++++++-------
 5 files changed, 92 insertions(+), 43 deletions(-)

diff --git a/app/components/HeaderBar.tsx b/app/components/HeaderBar.tsx
index ac51ad6..9f40090 100644
--- a/app/components/HeaderBar.tsx
+++ b/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>
   )
 })
diff --git a/app/components/ImageGradientBackground.tsx b/app/components/ImageGradientBackground.tsx
index 676c00c..15bf056 100644
--- a/app/components/ImageGradientBackground.tsx
+++ b/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}
diff --git a/app/components/ImageGradientScrollView.tsx b/app/components/ImageGradientScrollView.tsx
index 505464b..8156ec5 100644
--- a/app/components/ImageGradientScrollView.tsx
+++ b/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>
   )
diff --git a/app/navigation/BottomTabNavigator.tsx b/app/navigation/BottomTabNavigator.tsx
index 04f3c52..556e6a6 100644
--- a/app/navigation/BottomTabNavigator.tsx
+++ b/app/navigation/BottomTabNavigator.tsx
@@ -102,9 +102,9 @@ function createTabStackNavigator(Component: React.ComponentType<any>) {
     return (
       <Stack.Navigator initialRouteName="main">
         <Stack.Screen name="main" component={Component} options={{ headerShown: false }} />
-        <Stack.Screen name="album" component={AlbumScreen} options={itemScreenOptions} />
+        <Stack.Screen name="album" component={AlbumScreen} options={{ headerShown: false }} />
         <Stack.Screen name="artist" component={ArtistScreen} options={{ headerShown: false }} />
-        <Stack.Screen name="playlist" component={PlaylistScreen} options={itemScreenOptions} />
+        <Stack.Screen name="playlist" component={PlaylistScreen} options={{ headerShown: false }} />
         <Stack.Screen name="results" component={ResultsScreen} options={itemScreenOptions} />
       </Stack.Navigator>
     )
diff --git a/app/screens/SongListView.tsx b/app/screens/SongListView.tsx
index aae8d3d..b8c29ca 100644
--- a/app/screens/SongListView.tsx
+++ b/app/screens/SongListView.tsx
@@ -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({