fix: controller hidden full back

huiqiangdev · Apr 14, 2022 · 6060694 · 6060694
1 parent f6a5893
commit 6060694
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -36,6 +36,8 @@ export default function App() {
       />
       <VideoPlayer
         ref={ref}
+        isHiddenBack
+        isHiddenFullBack
         enableBackground={true}
         source={
           'http://200024424.vod.myqcloud.com/200024424_709ae516bdf811e6ad39991f76a4df69.f20.mp4'

diff --git a/src/ControllerView.tsx b/src/ControllerView.tsx
@@ -141,6 +141,7 @@ const ControllerView = ({
   };
   const renderContainer = () => {
     const showBack = !isFull && !isHiddenBack;
+    console.log(showBack, isHiddenBack, 'xxx');
     if (isLoading) {
       return (
         <>
@@ -197,14 +198,16 @@ const ControllerView = ({
             </TouchableOpacity>
           </View>
         ) : (
-          <View style={styles.top}>
-            <TouchableOpacity onPress={onBack}>
-              <Image
-                style={styles.topLeftIcon}
-                source={require('./assets/chevron-down.png')}
-              />
-            </TouchableOpacity>
-          </View>
+          !isHiddenBack && (
+            <View style={styles.top}>
+              <TouchableOpacity onPress={onBack}>
+                <Image
+                  style={styles.topLeftIcon}
+                  source={require('./assets/chevron-down.png')}
+                />
+              </TouchableOpacity>
+            </View>
+          )
         )}
         <View style={styles.bottom}>
           <TouchableOpacity onPress={onPressedStart}>
@@ -287,7 +290,7 @@ const styles = StyleSheet.create({
   bottom: {
     position: 'absolute',
     right: 10,
-    bottom: 25,
+    bottom: 15,
     left: 10,
     flexDirection: 'row',
     alignItems: 'center',

diff --git a/src/index.tsx b/src/index.tsx
@@ -56,8 +56,16 @@ const VideoPlayer = forwardRef(
     const [buffer, setBuffer] = useState(0);
     const [complete, setComplete] = useState(false); // 是否加载完成
     const [playSource, setPlaySource] = useState(source);
+    const [innerHiddenBack, setInnerHiddenBack] = useState(isHiddenBack);
+    const [innerHiddenFullBack, setInnerHiddenFullBack] =
+      useState(isHiddenFullBack);
     const { screen, window } = useDimensions();
-
+    useEffect(() => {
+      setInnerHiddenBack(isHiddenBack);
+    }, [isHiddenBack]);
+    useEffect(() => {
+      setInnerHiddenFullBack(isHiddenFullBack);
+    }, [isHiddenFullBack]);
     useImperativeHandle(ref, () => ({
       play: () => {
         handlePlay();
@@ -243,8 +251,8 @@ const VideoPlayer = forwardRef(
           current={currentTime}
           isFull={isFull}
           onFull={onFull}
-          isHiddenBack={isHiddenBack}
-          isHiddenFullBack={isHiddenFullBack}
+          isHiddenBack={innerHiddenBack}
+          isHiddenFullBack={innerHiddenFullBack}
           buffer={buffer}
           isError={false}
           isLoading={loading}