fix: working autoplay in mobile (#652)

* fix: autoplay works on player for mobile devices
gravity-ui · Oct 20, 2023 · 61c9ade · 61c9ade
1 parent 3774ae8
commit 61c9ade
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/src/blocks/Header/Header.scss b/src/blocks/Header/Header.scss
@@ -24,6 +24,8 @@ $backgroundWidth: 1440px;
         height: 100%;
 
         &_theme_dark {
+            --g-color-line-focus: var(--pc-color-line-focus-dark);
+
             #{$block}__title,
             #{$block}__overtitle {
                 color: var(--g-color-text-light-primary);

diff --git a/src/components/Media/Video/Video.tsx b/src/components/Media/Video/Video.tsx
@@ -91,6 +91,7 @@ const Video = (props: VideoAllProps) => {
 
         return (
             <ReactPlayerBlock
+                ref={ref}
                 className={b('react-player', videoClassName)}
                 src={src}
                 previewImgUrl={previewImg}

diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx
@@ -62,8 +62,9 @@ interface PlayerPropgress {
     played: number;
 }
 
+type ReactPlayerBlockRefType = ReactPlayerBlockHandler | undefined;
 // eslint-disable-next-line react/display-name
-export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactPlayerBlockProps>(
+export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockRefType, ReactPlayerBlockProps>(
     (props, originRef) => {
         const isMobile = useContext(MobileContext);
         const {metrika} = useContext(MetrikaContext);
@@ -130,9 +131,25 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
         }, [analyticsEvents]);
         const handleAnalytics = useAnalytics(DefaultEventNames.ReactPlayerControls);
 
-        useImperativeHandle(originRef, () => ({
-            pause: () => setIsPlaying(false),
-        }));
+        useImperativeHandle(
+            originRef,
+            () => {
+                if (!playerRef) {
+                    return;
+                }
+
+                const videoInstance = playerRef.getInternalPlayer() as HTMLVideoElement;
+                const {play, pause, addEventListener} = videoInstance;
+
+                // eslint-disable-next-line consistent-return
+                return {
+                    play: play.bind(videoInstance),
+                    pause: pause.bind(videoInstance),
+                    addEventListener: addEventListener.bind(videoInstance),
+                };
+            },
+            [playerRef],
+        );
 
         useEffect(() => {
             if (ref.current && !playingVideoRef?.contains(ref.current)) {

diff --git a/src/models/components.ts b/src/models/components.ts
@@ -1,5 +1,4 @@
 export type ArrowDirection = 'left' | 'right';
 
-export interface ReactPlayerBlockHandler {
-    pause: () => void;
-}
+export interface ReactPlayerBlockHandler
+    extends Pick<HTMLVideoElement, 'play' | 'pause' | 'addEventListener'> {}