Merge pull request #204 from lovegaoshi/dev

fix: PIP landscape problem
lovegaoshi · Oct 10, 2023 · 66d0c31 · 66d0c31 · vercel · Oct 10, 2023
2 parents 840c22d + 3b9a406
commit 66d0c31
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 116 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,12 +2,16 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import React, { useEffect } from 'react';
 import { Linking, SafeAreaView, StyleSheet } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { useStore } from 'zustand';
 
 import AzusaPlayer from './AzusaPlayer';
 import AzusaPlayerLandscape from './components/landscape/AzusaPlayerLandscape';
 import AppOpenSplash from './components/background/AppOpenSplash';
 import { useSetupPlayer } from './components/player/View';
 import { useIsLandscape } from './hooks/useOrientation';
+import appStore from '@stores/appStore';
+import PIPLyricView from './components/player/PIPLyric';
+import MainBackground from './components/background/MainBackground';
 
 const useSplash = (duration = 1000) => {
   const [isReady, setIsReady] = React.useState(false);
@@ -24,6 +28,7 @@ export default function App() {
   const isSplashReady = useSplash(__DEV__ ? 1 : 2500);
   const isPlayerReady = useSetupPlayer();
   const isLandscape = useIsLandscape();
+  const PIPMode = useStore(appStore, state => state.pipMode);
 
   useEffect(() => {
     function deepLinkHandler(data: { url: string }) {
@@ -52,7 +57,15 @@ export default function App() {
   return (
     <GestureHandlerRootView style={styles.gestureContainer}>
       <SafeAreaProvider>
-        {isLandscape ? <AzusaPlayerLandscape /> : <AzusaPlayer />}
+        <MainBackground>
+          {PIPMode ? (
+            <PIPLyricView />
+          ) : isLandscape ? (
+            <AzusaPlayerLandscape />
+          ) : (
+            <AzusaPlayer />
+          )}
+        </MainBackground>
       </SafeAreaProvider>
     </GestureHandlerRootView>
   );

diff --git a/src/AzusaPlayer.tsx b/src/AzusaPlayer.tsx
@@ -19,14 +19,12 @@ import { useTranslation } from 'react-i18next';
 import { Player } from './components/player/View';
 import Playlist from './components/playlist/View';
 import PlayerBottomPanel from './components/player/PlayerProgressControls';
-import MainBackground from './components/background/MainBackground';
 import { useNoxSetting } from './hooks/useSetting';
 import PlaylistDrawer from './components/playlists/View';
 import { ViewEnum } from './enums/View';
 import Settings from './components/setting/View';
 import DummySettings from './components/setting/DummySettings';
 import './localization/i18n';
-import PIPLyricView from './components/player/PIPLyric';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ICONS } from '@enums/Icons';
 
@@ -71,78 +69,67 @@ const AzusaPlayer = () => {
   const insets = useSafeAreaInsets();
 
   return (
-    <MainBackground>
-      <PaperProvider
+    <PaperProvider
+      theme={{
+        ...defaultTheme,
+        colors: playerStyle.colors,
+      }}
+    >
+      <NavigationContainer
         theme={{
           ...defaultTheme,
-          colors: playerStyle.colors,
+          colors: {
+            ...defaultTheme.colors,
+            ...playerStyle.colors,
+            // HACK: compensate for my bad design. now applying background
+            // at MainBackground level instaed of here.
+            background: undefined,
+          },
         }}
       >
-        <NavigationContainer
-          theme={{
-            ...defaultTheme,
-            colors: {
-              ...defaultTheme.colors,
-              ...playerStyle.colors,
-              // HACK: compensate for my bad design. now applying background
-              // at MainBackground level instaed of here.
-              background: undefined,
-            },
+        <View
+          style={{
+            flex: 1,
+            // Paddings to handle safe area
+            paddingTop: insets.top,
+            paddingLeft: insets.left,
+            paddingRight: insets.right,
           }}
         >
-          <View
-            style={{
-              flex: 1,
-              // Paddings to handle safe area
-              paddingTop: insets.top,
-              paddingLeft: insets.left,
-              paddingRight: insets.right,
-            }}
+          <Drawer.Navigator
+            initialRouteName={ViewEnum.PLAYER_HOME}
+            drawerContent={PlaylistDrawer}
           >
-            <Drawer.Navigator
-              initialRouteName={ViewEnum.PLAYER_HOME}
-              drawerContent={PlaylistDrawer}
-            >
-              <Drawer.Screen
-                name={ViewEnum.PLAYER_HOME}
-                options={{
-                  drawerIcon: () => <IconButton icon={ICONS.homeScreen} />,
-                  title: String(t('appDrawer.homeScreenName')),
-                  header: () => null,
-                }}
-                component={NoxPlayer}
-              />
-              <Drawer.Screen
-                name={ViewEnum.EXPORE}
-                options={{
-                  drawerIcon: () => <IconButton icon={ICONS.exploreScreen} />,
-                  title: String(t('appDrawer.exploreScreenName')),
-                }}
-                component={DummySettings}
-              />
-              <Drawer.Screen
-                name={ViewEnum.SETTINGS}
-                options={{
-                  drawerIcon: () => <IconButton icon={ICONS.settingScreen} />,
-                  title: String(t('appDrawer.settingScreenName')),
-                  header: () => null,
-                }}
-                component={Settings}
-              />
-              <Drawer.Screen
-                name={ViewEnum.LYRICS}
-                options={{
-                  drawerIcon: () => <IconButton icon="cog" />,
-                  title: String(t('appDrawer.settingScreenName')),
-                  header: () => null,
-                }}
-                component={PIPLyricView}
-              />
-            </Drawer.Navigator>
-          </View>
-        </NavigationContainer>
-      </PaperProvider>
-    </MainBackground>
+            <Drawer.Screen
+              name={ViewEnum.PLAYER_HOME}
+              options={{
+                drawerIcon: () => <IconButton icon={ICONS.homeScreen} />,
+                title: String(t('appDrawer.homeScreenName')),
+                header: () => null,
+              }}
+              component={NoxPlayer}
+            />
+            <Drawer.Screen
+              name={ViewEnum.EXPORE}
+              options={{
+                drawerIcon: () => <IconButton icon={ICONS.exploreScreen} />,
+                title: String(t('appDrawer.exploreScreenName')),
+              }}
+              component={DummySettings}
+            />
+            <Drawer.Screen
+              name={ViewEnum.SETTINGS}
+              options={{
+                drawerIcon: () => <IconButton icon={ICONS.settingScreen} />,
+                title: String(t('appDrawer.settingScreenName')),
+                header: () => null,
+              }}
+              component={Settings}
+            />
+          </Drawer.Navigator>
+        </View>
+      </NavigationContainer>
+    </PaperProvider>
   );
 };
 

diff --git a/src/components/landscape/AzusaPlayerLandscape.tsx b/src/components/landscape/AzusaPlayerLandscape.tsx
@@ -13,7 +13,6 @@ import {
 } from 'react-native-paper';
 import merge from 'deepmerge';
 
-import MainBackground from '../background/MainBackground';
 import { useNoxSetting } from '../../hooks/useSetting';
 import '../../localization/i18n';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -40,42 +39,40 @@ const AzusaPlayer = () => {
   const playerPanelWidth = width / 2 - actionPanelWidth;
 
   return (
-    <MainBackground>
-      <PaperProvider
+    <PaperProvider
+      theme={{
+        ...defaultTheme,
+        colors: playerStyle.colors,
+      }}
+    >
+      <NavigationContainer
         theme={{
           ...defaultTheme,
-          colors: playerStyle.colors,
+          colors: {
+            ...defaultTheme.colors,
+            ...playerStyle.colors,
+            // HACK: compensate for my bad design. now applying background
+            // at MainBackground level instaed of here.
+            background: undefined,
+          },
         }}
       >
-        <NavigationContainer
-          theme={{
-            ...defaultTheme,
-            colors: {
-              ...defaultTheme.colors,
-              ...playerStyle.colors,
-              // HACK: compensate for my bad design. now applying background
-              // at MainBackground level instaed of here.
-              background: undefined,
-            },
+        <View
+          style={{
+            flex: 1,
+            // Paddings to handle safe area
+            paddingTop: insets.top,
+            paddingLeft: insets.left,
+            paddingRight: insets.right,
+            flexDirection: 'row',
           }}
         >
-          <View
-            style={{
-              flex: 1,
-              // Paddings to handle safe area
-              paddingTop: insets.top,
-              paddingLeft: insets.left,
-              paddingRight: insets.right,
-              flexDirection: 'row',
-            }}
-          >
-            <LandscapeActions panelWidth={actionPanelWidth} />
-            <LandscapePlayerPanel panelWidth={playerPanelWidth} />
-            <LandscapePlaylistPanel panelWidth={width / 2} />
-          </View>
-        </NavigationContainer>
-      </PaperProvider>
-    </MainBackground>
+          <LandscapeActions panelWidth={actionPanelWidth} />
+          <LandscapePlayerPanel panelWidth={playerPanelWidth} />
+          <LandscapePlaylistPanel panelWidth={width / 2} />
+        </View>
+      </NavigationContainer>
+    </PaperProvider>
   );
 };
 

diff --git a/src/components/player/PIPLyric.tsx b/src/components/player/PIPLyric.tsx
@@ -1,18 +1,15 @@
 import React, { useState } from 'react';
 import { useWindowDimensions } from 'react-native';
 import TrackPlayer, { Track } from 'react-native-track-player';
-import { useStore } from 'zustand';
 
 import { useNoxSetting } from '@hooks/useSetting';
 import { LyricView } from './Lyric';
-import appStore from '@stores/appStore';
 
 const PIPLyricView = () => {
   const [currentTrack, setCurrentTrack] = useState<Track | undefined>(
     undefined
   );
   const currentPlayingId = useNoxSetting(state => state.currentPlayingId);
-  const PIPMode = useStore(appStore, state => state.pipMode);
   const { height } = useWindowDimensions();
 
   React.useEffect(() => {
@@ -22,7 +19,7 @@ const PIPLyricView = () => {
     setLikedStatus();
   }, [currentPlayingId]);
 
-  return PIPMode && currentTrack ? (
+  return currentTrack ? (
     <LyricView
       track={currentTrack}
       artist={'n/a'}

diff --git a/src/components/playlists/View.tsx b/src/components/playlists/View.tsx
@@ -54,21 +54,11 @@ export default (props: any) => {
   // HACK: I know its bad! But somehow this hook isnt updating in its own
   // useEffects...
   const { buildBrowseTree } = useAAPlayback();
-  const PIPMode = useStore(appStore, state => state.pipMode);
 
   useEffect(() => {
     buildBrowseTree();
   }, [playlistIds.length]);
 
-  useEffect(() => {
-    if (PIPMode) {
-      navigation.navigate(ViewEnum.LYRICS as never);
-      navigation.dispatch(DrawerActions.closeDrawer());
-    } else {
-      navigation.goBack();
-    }
-  }, [PIPMode]);
-
   useEffect(() => {
     function deepLinkHandler(data: { url: string }) {
       if (data.url === 'trackplayer://notification.click') {
@@ -85,9 +75,7 @@ export default (props: any) => {
     };
   }, []);
 
-  return PIPMode ? (
-    <></>
-  ) : (
+  return (
     <View {...props} style={{ flex: 1 }}>
       <View style={styles.topPadding} />
       <BiliCard backgroundURI={playerStyle.biliGarbCard}>