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

* fix: fixing video rendering in player for mobiles

Author: Kyzyl-ool

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,

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;

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