From 3587f3a769b8853e23aa2f266355b66f9b3c6bf5 Mon Sep 17 00:00:00 2001
From: KingRainbow44 <kobedo11@gmail.com>
Date: Sat, 16 Mar 2024 13:05:34 -0400
Subject: [PATCH] (feat:context) Add context to NowPlaying

---
 src/Laudiolin.tsx     | 31 ++++++++++----------
 src/ui/NowPlaying.tsx | 67 +++++++++++++++++++++++++++++++++++++++----
 2 files changed, 78 insertions(+), 20 deletions(-)

diff --git a/src/Laudiolin.tsx b/src/Laudiolin.tsx
index 6223fb7..93d6d0e 100644
--- a/src/Laudiolin.tsx
+++ b/src/Laudiolin.tsx
@@ -36,18 +36,19 @@ function Laudiolin(props: IProps) {
             <StatusBar barStyle={"light-content"} />
 
             <SafeAreaView style={style.App} onLayout={props.onLoad}>
-                <GestureHandlerRootView>
-                    {
-                        global.showTrackPage && <NowPlaying navigation={navigator.current!} />
-                    }
-                    {
-                        global.showLoginPage && <Login />
-                    }
-                    <View style={{
-                        ...style.App,
-                        display: global.showingAny() ? "none" : "flex"
-                    }}>
-                        <MenuProvider>
+                <MenuProvider>
+                    <GestureHandlerRootView>
+                        {
+                            global.showTrackPage && <NowPlaying navigation={navigator.current!} />
+                        }
+                        {
+                            global.showLoginPage && <Login />
+                        }
+
+                        <View style={{
+                            ...style.App,
+                            display: global.showingAny() ? "none" : "flex"
+                        }}>
                             <NavigationContainer ref={navigator}>
                                 <Tab.Navigator
                                     tabBar={props => (
@@ -71,9 +72,9 @@ function Laudiolin(props: IProps) {
                                                 name={"Settings"} component={Settings} />
                                 </Tab.Navigator>
                             </NavigationContainer>
-                        </MenuProvider>
-                    </View>
-                </GestureHandlerRootView>
+                        </View>
+                    </GestureHandlerRootView>
+                </MenuProvider>
             </SafeAreaView>
         </>
     );
diff --git a/src/ui/NowPlaying.tsx b/src/ui/NowPlaying.tsx
index bba1fe3..0c52a7d 100644
--- a/src/ui/NowPlaying.tsx
+++ b/src/ui/NowPlaying.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { StyleSheet, TouchableOpacity, View } from "react-native";
 
 import AdIcon from "react-native-vector-icons/AntDesign";
@@ -20,12 +20,19 @@ import { NavigationContainerRef } from "@react-navigation/core";
 import { GestureDetector, Gesture, Directions } from "react-native-gesture-handler";
 
 import ProgressBar from "@widgets/ProgressBar";
+
+import StyledMenu from "@components/StyledMenu";
 import StyledText, { Size } from "@components/StyledText";
 
-import Player from "@backend/player";
-import { useGlobal } from "@backend/stores";
+import Player, { currentlyPlaying } from "@backend/player";
+import { useFavorites, useGlobal } from "@backend/stores";
 
 import { colors, value } from "@style/Laudiolin";
+import Playlist from "@backend/playlist";
+import SelectAPlaylist from "@modals/SelectAPlaylist";
+import * as WebBrowser from "expo-web-browser";
+import User from "@backend/user";
+import StyledModal from "@components/StyledModal";
 
 function RepeatIcon({ loop }: { loop: RepeatMode }) {
     switch (loop) {
@@ -41,12 +48,20 @@ function RepeatIcon({ loop }: { loop: RepeatMode }) {
 function NowPlaying({ navigation }: { navigation: NavigationContainerRef<any> }) {
     const global = useGlobal();
 
+    let favorites = useFavorites();
+    favorites = Object.values(favorites);
+
     const track = useActiveTrack();
     const { state } = usePlaybackState();
     const progress = useProgress(500);
 
+    const isFavorite = favorites.find(t => t.id == track?.id);
+
     const [repeatMode, setRepeatMode] = useState(RepeatMode.Off);
 
+    const [showSelect, setShowSelect] = useState(false);
+    const [showMenu, setShowMenu] = useState(false);
+
     useEffect(() => {
         TrackPlayer.getRepeatMode().then(setRepeatMode);
     });
@@ -82,9 +97,8 @@ function NowPlaying({ navigation }: { navigation: NavigationContainerRef<any> })
                         </View>
                     ) }
 
-                    <TouchableOpacity onPress={() => null}>
+                    <TouchableOpacity onPress={() => setShowMenu(true)}>
                         <EnIcon name={"dots-three-vertical"} size={24} color={"white"} />
-                        {/* TODO: Move favorite track into context menu. */}
                     </TouchableOpacity>
                 </View>
 
@@ -141,6 +155,49 @@ function NowPlaying({ navigation }: { navigation: NavigationContainerRef<any> })
                         <RepeatIcon loop={repeatMode} />
                     </TouchableOpacity>
                 </View>
+
+                <StyledModal
+                    visible={showSelect}
+                    onPressOutside={() => setShowSelect(false)}
+                >
+                    <SelectAPlaylist
+                        onSelect={playlist => {
+                            if (currentlyPlaying && currentlyPlaying?.title == track?.title) {
+                                Playlist.addTrackToPlaylist(playlist, currentlyPlaying)
+                                    .catch(() => null);
+                            }
+                        }}
+                    />
+                </StyledModal>
+
+                <StyledMenu
+                    closeOnPress
+                    opened={showMenu}
+                    close={() => setShowMenu(false)}
+                    options={[
+                        currentlyPlaying && {
+                            text: "Add to Playlist",
+                            icon: <McIcon name={"playlist-plus"} size={24} color={"white"} />,
+                            onPress: () => setShowMenu(false),
+                        },
+                        track && {
+                            text: "Open Track Source",
+                            icon: <McIcon name={"web"} size={24} color={"white"} />,
+                            onPress: () => WebBrowser.openBrowserAsync(track.url)
+                        },
+                        currentlyPlaying ? {
+                            text: `${isFavorite ? "Remove from" : "Add to"} Favorites`,
+                            icon: <McIcon name={"heart"} size={24} color={"white"} />,
+                            onPress: () => {
+                                if (currentlyPlaying?.type == "remote") {
+                                    User.favoriteTrack(currentlyPlaying, !isFavorite)
+                                        .catch(() => null);
+                                }
+                            }
+                        } : undefined,
+                    ]}
+                    style={{ top: 10, right: 10 }}
+                />
             </View>
         </GestureDetector>
     );