From a5267ebf19afa574d7e50195eddc1e07b0795fdb Mon Sep 17 00:00:00 2001
From: Kyzyl-ool Kezhik <kyzyloolk@mail.ru>
Date: Wed, 14 Feb 2024 12:23:16 +0100
Subject: [PATCH] fix: working with youtube player api (#815)

* fix: working with youtube player api
---
 package-lock.json                           |  7 +++++++
 package.json                                |  1 +
 src/components/ReactPlayer/ReactPlayer.tsx  | 11 +++++++++--
 src/components/ReactPlayer/utils/youtube.ts |  7 +++++++
 4 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ReactPlayer/utils/youtube.ts

diff --git a/package-lock.json b/package-lock.json
index 08659210e..8f1b1e9e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -68,6 +68,7 @@
         "@types/sanitize-html": "2.6.1",
         "@types/uuid": "^9.0.0",
         "@types/webpack-env": "^1.18.1",
+        "@types/youtube-player": "^5.5.11",
         "autoprefixer": "^10.4.14",
         "babel-loader": "^8.3.0",
         "css-loader": "^5.2.7",
@@ -8447,6 +8448,12 @@
       "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
       "dev": true
     },
+    "node_modules/@types/youtube-player": {
+      "version": "5.5.11",
+      "resolved": "https://registry.npmjs.org/@types/youtube-player/-/youtube-player-5.5.11.tgz",
+      "integrity": "sha512-pM41CDBqJqBmTeJWnF7NOGz82IQoYOhqzMYXv5vKCXBqGiYSLldxMtpCk6KAEtADTy49S45AriYaCaZyeUX38Q==",
+      "dev": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.40.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.40.0.tgz",
diff --git a/package.json b/package.json
index 9ae820050..7b745fd72 100644
--- a/package.json
+++ b/package.json
@@ -144,6 +144,7 @@
     "@types/sanitize-html": "2.6.1",
     "@types/uuid": "^9.0.0",
     "@types/webpack-env": "^1.18.1",
+    "@types/youtube-player": "^5.5.11",
     "autoprefixer": "^10.4.14",
     "babel-loader": "^8.3.0",
     "css-loader": "^5.2.7",
diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx
index 3bd06951b..ad77ecd8a 100644
--- a/src/components/ReactPlayer/ReactPlayer.tsx
+++ b/src/components/ReactPlayer/ReactPlayer.tsx
@@ -37,6 +37,7 @@ import {block} from '../../utils';
 import CustomBarControls from './CustomBarControls';
 import i18n from './i18n';
 import {checkYoutubeVideos} from './utils';
+import {isYoutubePlayerInstance} from './utils/youtube';
 
 import './ReactPlayer.scss';
 
@@ -137,8 +138,14 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
                     return;
                 }
 
-                const videoInstance = playerRef.getInternalPlayer() as HTMLVideoElement;
-                const {play, pause, addEventListener} = videoInstance;
+                let play, pause, addEventListener;
+                const videoInstance = playerRef.getInternalPlayer();
+                if (isYoutubePlayerInstance(videoInstance)) {
+                    ({pauseVideo: pause, playVideo: play, addEventListener} = videoInstance);
+                } else {
+                    // it is assumed that `videoInstance` is HTMLVideoElement by default
+                    ({play, pause, addEventListener} = videoInstance);
+                }
 
                 // eslint-disable-next-line consistent-return
                 return {
diff --git a/src/components/ReactPlayer/utils/youtube.ts b/src/components/ReactPlayer/utils/youtube.ts
new file mode 100644
index 000000000..0998e5b78
--- /dev/null
+++ b/src/components/ReactPlayer/utils/youtube.ts
@@ -0,0 +1,7 @@
+import type {YouTubePlayer} from 'youtube-player/dist/types';
+
+export const isYoutubePlayerInstance = (
+    playerInstance: Record<string, unknown> | YouTubePlayer,
+): playerInstance is YouTubePlayer => {
+    return Boolean(playerInstance['pauseVideo'] && playerInstance['playVideo']);
+};