fix: fixing pip and fullscreen video in player for mobile devices (#641)

* fix: fixing video rendering in player for mobiles
gravity-ui · Oct 17, 2023 · 5f8c517 · 5f8c517
1 parent 2cb9239
commit 5f8c517
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/src/blocks/Media/__stories__/data.json b/src/blocks/Media/__stories__/data.json
@@ -131,7 +131,6 @@
             "customControlsOptions": {
               "type": "with-play-pause-button",
               "muteButtonShown": false,
-              "backgroundShadowHidden": true,
               "positioning": "left"
             },
             "muted": true,
@@ -154,7 +153,6 @@
             "customControlsOptions": {
               "type": "with-play-pause-button",
               "muteButtonShown": false,
-              "backgroundShadowHidden": true,
               "positioning": "left"
             },
             "muted": true,

diff --git a/src/components/ReactPlayer/CustomBarControls.scss b/src/components/ReactPlayer/CustomBarControls.scss
@@ -16,6 +16,7 @@ $withMuteControlWidth: 32px;
         bottom: 0;
         opacity: 0;
         transition: opacity $animationDuration ease 3s;
+        z-index: 1;
 
         &_shown {
             opacity: 1;

diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx
@@ -115,7 +115,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
         const [started, setStarted] = useState(autoPlay);
         const [ended, setEnded] = useState<boolean>(false);
         const [isMounted, setIsMounted] = useState(false);
-        const [hovered, setHovered] = useState(false);
+        const [hovered, setHovered] = useState(isMobile);
 
         useMount(() => setIsMounted(true));
 
@@ -391,6 +391,15 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
                             onProgress={onProgress}
                             onEnded={onEnded}
                             aria-label={ariaLabel}
+                            config={{
+                                file: {
+                                    attributes: {
+                                        pip: isMobile ? 'false' : undefined,
+                                        playsinline: isMobile ? '' : undefined,
+                                        disablepictureinpicture: isMobile ? '' : undefined,
+                                    },
+                                },
+                            }}
                         />
                         {controls === MediaVideoControlsType.Custom && (
                             <CustomBarControls