fix: responsive view

lovegaoshi · Sep 23, 2023 · 96dae13 · 96dae13
1 parent e0992b6
commit 96dae13
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 37 deletions.
diff --git a/src/AzusaPlayerLandscape.tsx b/src/AzusaPlayerLandscape.tsx
@@ -69,6 +69,7 @@ const AzusaPlayer = () => {
     ? CombinedDarkTheme
     : CombinedDefaultTheme;
   const insets = useSafeAreaInsets();
+  const mobileWidth = Dimensions.get('window').width;
 
   return (
     <MainBackground>
@@ -99,16 +100,10 @@ const AzusaPlayer = () => {
           >
             <View style={styles.sidebar}></View>
             <View
-              style={[
-                styles.playerPanel,
-                { width: Dimensions.get('window').width / 2 - 100 },
-              ]}
+              style={[styles.playerPanel, { width: mobileWidth / 2 - 100 }]}
             ></View>
             <View
-              style={[
-                styles.playlistPanel,
-                { width: Dimensions.get('window').width / 2 },
-              ]}
+              style={[styles.playlistPanel, { width: mobileWidth / 2 }]}
             ></View>
           </View>
         </NavigationContainer>

diff --git a/src/components/background/MainBackground.tsx b/src/components/background/MainBackground.tsx
@@ -15,8 +15,6 @@ import { biliNFTVideoFetch } from '@utils/mediafetch/biliNFT';
 import logger from '@utils/Logger';
 import { useIsLandscape } from '@hooks/useOrientation';
 
-const mobileHeight = Dimensions.get('window').height;
-
 enum RESOLVE_TYPE {
   bvid = 'bvid',
   video = 'video',
@@ -57,6 +55,7 @@ export const resolveBackgroundImage = async (
 const MainBackground = (props: { children: JSX.Element }) => {
   const playerStyle = useNoxSetting(state => state.playerStyle);
   const isLandscape = useIsLandscape();
+  const mobileHeight = Dimensions.get('window').height;
   const bkgrdImg =
     isLandscape && playerStyle.bkgrdImgLandscape
       ? playerStyle.bkgrdImgLandscape
@@ -70,7 +69,7 @@ const MainBackground = (props: { children: JSX.Element }) => {
       <ImageBackground
         source={{ uri: bkgrdImg }}
         resizeMode="cover"
-        style={styles.mobileStyle}
+        style={[styles.mobileStyle, { height: mobileHeight }]}
       >
         {props.children}
       </ImageBackground>
@@ -83,7 +82,7 @@ const MainBackground = (props: { children: JSX.Element }) => {
         <ImageBackground
           source={{ uri: bkgrdImg.identifier }}
           resizeMode="cover"
-          style={styles.mobileStyle}
+          style={[styles.mobileStyle, { height: mobileHeight }]}
         >
           {props.children}
         </ImageBackground>
@@ -121,7 +120,6 @@ const MainBackground = (props: { children: JSX.Element }) => {
 const styles = StyleSheet.create({
   mobileStyle: {
     flex: 1,
-    height: mobileHeight,
   },
   videoStyle: {
     width: '100%',

diff --git a/src/components/player/TrackInfo/TrackInfo.tsx b/src/components/player/TrackInfo/TrackInfo.tsx
@@ -24,6 +24,8 @@ export const TrackInfo: React.FC<{
   const currentPlayingList = useNoxSetting(state => state.currentPlayingList);
   const [isImageVisible, setIsImageVisible] = useState(true);
   const opacity = useRef(new Animated.Value(1)).current;
+  const dimension = Dimensions.get('window');
+  const albumArtSize = Math.min(dimension.width, dimension.height);
 
   const getTrackLocation = () => {
     const currentTPQueue = getCurrentTPQueue();
@@ -81,7 +83,10 @@ export const TrackInfo: React.FC<{
             pointerEvents={isImageVisible ? 'auto' : 'none'}
           >
             <Image
-              style={[styles.artwork]}
+              style={[
+                styles.artwork,
+                { width: albumArtSize, height: albumArtSize },
+              ]}
               source={
                 playerSetting.hideCoverInMobile
                   ? 0
@@ -99,6 +104,8 @@ export const TrackInfo: React.FC<{
               {
                 opacity: isImageVisible ? 0 : 1,
                 position: isImageVisible ? 'absolute' : 'relative',
+                width: dimension.width,
+                height: dimension.height,
               },
             ]}
             pointerEvents={isImageVisible ? 'none' : 'auto'}
@@ -139,23 +146,15 @@ export const TrackInfo: React.FC<{
   );
 };
 
-const albumArtSize = Math.min(
-  Dimensions.get('window').width,
-  Dimensions.get('window').height
-);
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
   },
   artwork: {
-    width: albumArtSize,
-    height: albumArtSize,
     marginTop: 15,
     opacity: 1,
   },
   lyric: {
-    width: Dimensions.get('window').width,
-    height: Dimensions.get('window').height,
     opacity: 1,
   },
   titleText: {

diff --git a/src/components/playlist/PlaylistList.tsx b/src/components/playlist/PlaylistList.tsx
@@ -414,7 +414,15 @@ const PlaylistList = () => {
           <PlaylistMenuButton disabled={checking} />
         </View>
       </View>
-      <View style={stylesLocal.playlistContainer}>
+      <View
+        style={[
+          stylesLocal.playlistContainer,
+          {
+            // HACK: this should be justified as top bar and bottom bar all have a defined height.
+            maxHeight: Dimensions.get('window').height - 250,
+          },
+        ]}
+      >
         <FlashList
           ref={ref => (playlistRef.current = ref)}
           data={currentRows}
@@ -477,8 +485,6 @@ const stylesLocal = StyleSheet.create({
   playlistContainer: {
     ...styles.topBarContainer,
     flex: 4,
-    // HACK: this should be justified as top bar and bottom bar all have a defined height.
-    maxHeight: Dimensions.get('window').height - 250,
   },
   songInfoBackgroundImg: { opacity: 0.5 },
   songInfoBackgroundBanner: { flex: 1 },

diff --git a/src/components/playlists/View.tsx b/src/components/playlists/View.tsx
@@ -311,7 +311,10 @@ export default (props: any) => {
         onSubmit={() => setNewPlaylistDialogOpen(false)}
       />
       <DraggableFlatList
-        style={styles.draggableFlatList}
+        style={[
+          styles.draggableFlatList,
+          { maxHeight: Dimensions.get('window').height - 330 },
+        ]}
         data={playlistIds.map(val => playlists[val])}
         onDragEnd={({ data }) =>
           setPlaylistIds(data.map(playlist => playlist.id))
@@ -355,9 +358,7 @@ const styles = StyleSheet.create({
     width: 40,
     height: 40,
   },
-  draggableFlatList: {
-    maxHeight: Dimensions.get('window').height - 330,
-  },
+  draggableFlatList: {},
   bottomInfo: {
     paddingBottom: 20,
   },

diff --git a/src/components/setting/SplashSettings.tsx b/src/components/setting/SplashSettings.tsx
@@ -1,21 +1,16 @@
 import * as React from 'react';
 import {
-  Pressable,
   View,
   Animated,
   StyleSheet,
   PanResponder,
+  Dimensions,
 } from 'react-native';
 import Image from 'react-native-fast-image';
-import { Dimensions } from 'react-native';
 
-import { useNoxSetting } from '@hooks/useSetting';
 import { localSplashes } from '../background/AppOpenSplash';
 
-const isZeroVisible = (index: number, arrLen: number, repeat = false) => {};
-
 export default () => {
-  const playerStyle = useNoxSetting(state => state.playerStyle);
   const [index, setIndex] = React.useState(0);
   const position = React.useRef(new Animated.ValueXY()).current;
   const panResponder = React.useRef(

diff --git a/src/components/setting/appearances/SkinSettings.tsx b/src/components/setting/appearances/SkinSettings.tsx
@@ -37,8 +37,6 @@ import NoxTheme from '../../styles/NoxTheme';
 import AdaptiveTheme from '../../styles/AdaptiveTheme';
 import { getUniqObjects } from '@utils/Utils';
 
-const WindowWidth = Dimensions.get('window').width;
-
 interface DisplayTheme extends NoxTheme.Style {
   builtin: boolean;
 }
@@ -100,6 +98,7 @@ const SkinItem = ({ skin, checked, setChecked }: SkinItemProps) => {
       { scale: withSpring(isPressed.value ? 1.2 : 1) },
     ],
   }));
+  const WindowWidth = Dimensions.get('window').width;
 
   const deleteTheme = () =>
     setPlayerStyles(playerStyles.filter(pSkin => pSkin !== skin));