fix: working with youtube player api (#815)

* fix: working with youtube player api

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",

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 {

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']);
+};