From 61c9ade6c79f4a702f16ee61184a65dd4308c55a Mon Sep 17 00:00:00 2001
From: Kyzyl-ool Kezhik <kyzyloolk@mail.ru>
Date: Fri, 20 Oct 2023 15:35:09 +0200
Subject: [PATCH] fix: working autoplay in mobile (#652)

* fix: autoplay works on player for mobile devices
---
 src/blocks/Header/Header.scss              |  2 ++
 src/components/Media/Video/Video.tsx       |  1 +
 src/components/ReactPlayer/ReactPlayer.tsx | 25 ++++++++++++++++++----
 src/models/components.ts                   |  5 ++---
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/blocks/Header/Header.scss b/src/blocks/Header/Header.scss
index 4b58db0a1..df4ef8286 100644
--- 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
index 1f4ab5b81..a769c07da 100644
--- 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
index 7e1999b3a..38a65636b 100644
--- 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
index 30378523a..46178abd6 100644
--- 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'> {}