feat: dropdown a ReactPlayer version (#254) (#257)

Release As: 1.25.5

Author: niktverd

package-lock.json

@@ -50,7 +50,7 @@
     "bem-cn-lite": "^4.0.0",
     "github-buttons": "2.23.0",
     "lodash": "^4.17.21",
-    "react-player": "^2.12.0",
+    "react-player": "^2.9.0",
     "react-slick": "^0.28.1",
     "react-spring": "^9.3.0",
     "react-transition-group": "^4.4.2",

package.json

@@ -30,6 +30,7 @@ import {MetrikaContext} from '../../context/metrikaContext';
 import {MobileContext} from '../../context/mobileContext';
 import {useAnalytics} from '../../hooks';
 import {PlayVideo} from '../../icons';
+import {checkYoutubeVideos} from './utils';
 
 import './ReactPlayer.scss';
 
@@ -100,6 +101,8 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
         const [paused, setPaused] = useState<boolean>(false);
         const [ended, setEnded] = useState<boolean>(false);
 
+        const videoSrc = useMemo(() => checkYoutubeVideos(src), [src]);
+
         const eventsArray = useMemo(() => {
             if (analyticsEvents) {
                 return Array.isArray(analyticsEvents) ? analyticsEvents : [analyticsEvents];
@@ -329,7 +332,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
             >
                 <ReactPlayer
                     className={b('player')}
-                    url={src}
+                    url={videoSrc}
                     muted={muted}
                     controls={controls === MediaVideoControlsType.Default}
                     height={currentHeight || '100%'}

src/components/ReactPlayer/ReactPlayer.tsx

@@ -0,0 +1,23 @@
+// the file serves to support live video with [email protected]
+const LIVE_YUOTUBE_VIDEO_REGEX =
+    /(?:youtu\.be\/live\/|youtube(?:-nocookie)?\.com\/(?:live\/))((\w|-){11})/;
+const YOUTUBE_VIDEO_TEMPLATE = 'https://www.youtube.com/watch?v=';
+
+export const checkYoutubeVideos = (src: string | string[]) => {
+    if (Array.isArray(src)) {
+        return src.map((videoUrl) => {
+            if (LIVE_YUOTUBE_VIDEO_REGEX.test(videoUrl)) {
+                const youtubeLiveId = videoUrl.match(LIVE_YUOTUBE_VIDEO_REGEX)?.[1];
+                if (!youtubeLiveId) {
+                    return videoUrl;
+                }
+
+                return `${YOUTUBE_VIDEO_TEMPLATE}${youtubeLiveId}`;
+            }
+
+            return videoUrl;
+        });
+    }
+
+    return src;
+};