修复横屏播放详情页进入动画

publish/changeLog.md

@@ -1,6 +1,7 @@
 ### 新增
 
 - 新增横屏状态下的播放详情页
+- 新增橙、粉、灰主题色
 
 ### 调整
 

src/screens/PlayDetail/Landscape/Pic.js

@@ -34,6 +34,7 @@ const styles = StyleSheet.create({
     flexShrink: 1,
     justifyContent: 'center',
     alignItems: 'center',
+    // backgroundColor: 'rgba(0,0,0,0.1)',
   },
   content: {
     // elevation: 3,

src/screens/PlayDetail/Landscape/Player/index.js

@@ -13,7 +13,7 @@ export default memo(({ playNextModes }) => {
   const theme = useGetter('common', 'theme')
 
   return (
-    <View style={{ ...styles.container, flexDirection: 'row', backgroundColor: theme.primary }}>
+    <View style={{ ...styles.container, backgroundColor: theme.primary }} nativeID="player">
       <PlayInfo />
       <ControlBtn playNextModes={playNextModes} />
     </View>
@@ -23,6 +23,7 @@ export default memo(({ playNextModes }) => {
 const styles = StyleSheet.create({
   container: {
     width: '100%',
+    flexDirection: 'row',
     // paddingTop: progressContentPadding,
     // marginTop: -progressContentPadding,
     // backgroundColor: 'rgba(0, 0, 0, .1)',

src/screens/PlayDetail/Landscape/components/Header.js

@@ -17,7 +17,7 @@ export default memo(() => {
   }
 
   return (
-    <View style={{ ...styles.header, backgroundColor: theme.primary }}>
+    <View style={{ ...styles.header, backgroundColor: theme.primary }} nativeID="header">
       <StatusBar backgroundColor="rgba(0,0,0,0)" barStyle="dark-content" translucent={true} />
       <View style={{ ...styles.container }}>
         <TouchableOpacity onPress={back} style={{ ...styles.button }}>

src/screens/PlayDetail/Landscape/index.js

@@ -25,7 +25,7 @@ export default memo(({ componentId, animated }) => {
         <View style={styles.container}>
           <View style={styles.left}>
             <Pic componentId={componentId} animated={animated} />
-            <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
+            <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }} nativeID="pageIndicator">
               <Title />
               <View>
                 <MoreBtn />

src/screens/PlayDetail/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { View, StyleSheet } from 'react-native'
 import { useGetter, useDispatch } from '@/store'
-import { useDeviceOrientation } from '@/utils/hooks'
+import { useDimensions } from '@/utils/hooks'
 import { useNavigationComponentDidDisappear, useNavigationComponentDidAppear } from '@/navigation'
 import { screenUnkeepAwake } from '@/utils/utils'
 
@@ -12,7 +12,7 @@ export default (props) => {
   // const theme = useGetter('common', 'theme')
   const setComponentId = useDispatch('common', 'setComponentId')
   const [animated, setAnimated] = useState(false)
-  const { portrait } = useDeviceOrientation()
+  const { window } = useDimensions()
   useEffect(() => {
     setComponentId({ name: 'playDetail', id: props.componentId })
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -25,7 +25,7 @@ export default (props) => {
   })
 
   return (
-    portrait
+    window.height > window.width
       ? <Portrait componentId={props.componentId} animated={animated} />
       : <Landscape componentId={props.componentId} animated={animated} />
   )