fix: working autoplay in mobile (#652)

* fix: autoplay works on player for mobile devices

Author: Kyzyl-ool

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);

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}

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)) {

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'> {}