Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: PIP landscape problem #204

Merged
merged 1 commit into from
Oct 10, 2023
Merged

fix: PIP landscape problem #204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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 }) {
Expand Down Expand Up @@ -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>
);
Expand Down
121 changes: 54 additions & 67 deletions src/AzusaPlayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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>
);
};

Expand Down
59 changes: 28 additions & 31 deletions src/components/landscape/AzusaPlayerLandscape.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
);
};

Expand Down
5 changes: 1 addition & 4 deletions src/components/player/PIPLyric.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(() => {
Expand All @@ -22,7 +19,7 @@ const PIPLyricView = () => {
setLikedStatus();
}, [currentPlayingId]);

return PIPMode && currentTrack ? (
return currentTrack ? (
<LyricView
track={currentTrack}
artist={'n/a'}
Expand Down
14 changes: 1 addition & 13 deletions src/components/playlists/View.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand All @@ -85,9 +75,7 @@ export default (props: any) => {
};
}, []);

return PIPMode ? (
<></>
) : (
return (
<View {...props} style={{ flex: 1 }}>
<View style={styles.topPadding} />
<BiliCard backgroundURI={playerStyle.biliGarbCard}>
Expand Down