@gravity-ui/page-constructor 2.1.1 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.2.0](https://github.com/gravity-ui/page-constructor/compare/v2.1.1...v2.2.0) (2023-03-29)
+
+
+### Features
+
+* dropdown a ReactPlayer version ([#254](https://github.com/gravity-ui/page-constructor/issues/254)) ([fec1c3f](https://github.com/gravity-ui/page-constructor/commit/fec1c3fee50dcd86d08c0501f80d7aca0795e026))
+
 ## [2.1.1](https://github.com/gravity-ui/page-constructor/compare/v2.1.0...v2.1.1) (2023-03-28)
 
 

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -14,6 +14,7 @@ const metrikaContext_1 = require("../../context/metrikaContext");
 const mobileContext_1 = require("../../context/mobileContext");
 const hooks_1 = require("../../hooks");
 const icons_1 = require("../../icons");
+const utils_2 = require("./utils");
 const b = (0, utils_1.block)('ReactPlayer');
 const FPS = 60;
 // eslint-disable-next-line react/display-name
@@ -35,6 +36,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const [started, setStarted] = (0, react_1.useState)(autoPlay);
     const [paused, setPaused] = (0, react_1.useState)(false);
     const [ended, setEnded] = (0, react_1.useState)(false);
+    const videoSrc = (0, react_1.useMemo)(() => (0, utils_2.checkYoutubeVideos)(src), [src]);
     const eventsArray = (0, react_1.useMemo)(() => {
         if (analyticsEvents) {
             return Array.isArray(analyticsEvents) ? analyticsEvents : [analyticsEvents];
@@ -193,7 +195,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
             }, elapsedTimePercent: elapsedTimePercent }));
     }, [controls, isPlaying, customBarControlsClassName, changeMute]);
     return (react_1.default.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
-        react_1.default.createElement(react_player_1.default, { className: b('player'), url: src, muted: muted, controls: controls === models_1.MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded }),
+        react_1.default.createElement(react_player_1.default, { className: b('player'), url: videoSrc, muted: muted, controls: controls === models_1.MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded }),
         renderCustomBarControls(muted, playedPercent)));
 });
 function getHeight(width) {

package/build/cjs/components/ReactPlayer/utils.d.ts

@@ -0,0 +1 @@
+export declare const checkYoutubeVideos: (src: string | string[]) => string | string[];

package/build/cjs/components/ReactPlayer/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkYoutubeVideos = void 0;
+// the file serves to support live video with react-player@2.9
+const LIVE_YUOTUBE_VIDEO_REGEX = /(?:youtu\.be\/live\/|youtube(?:-nocookie)?\.com\/(?:live\/))((\w|-){11})/;
+const YOUTUBE_VIDEO_TEMPLATE = 'https://www.youtube.com/watch?v=';
+const checkYoutubeVideos = (src) => {
+    if (Array.isArray(src)) {
+        return src.map((videoUrl) => {
+            var _a;
+            if (LIVE_YUOTUBE_VIDEO_REGEX.test(videoUrl)) {
+                const youtubeLiveId = (_a = videoUrl.match(LIVE_YUOTUBE_VIDEO_REGEX)) === null || _a === void 0 ? void 0 : _a[1];
+                if (!youtubeLiveId) {
+                    return videoUrl;
+                }
+                return `${YOUTUBE_VIDEO_TEMPLATE}${youtubeLiveId}`;
+            }
+            return videoUrl;
+        });
+    }
+    return src;
+};
+exports.checkYoutubeVideos = checkYoutubeVideos;

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -10,6 +10,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.css';
 const b = block('ReactPlayer');
 const FPS = 60;
@@ -32,6 +33,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const [started, setStarted] = useState(autoPlay);
     const [paused, setPaused] = useState(false);
     const [ended, setEnded] = useState(false);
+    const videoSrc = useMemo(() => checkYoutubeVideos(src), [src]);
     const eventsArray = useMemo(() => {
         if (analyticsEvents) {
             return Array.isArray(analyticsEvents) ? analyticsEvents : [analyticsEvents];
@@ -190,7 +192,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             }, elapsedTimePercent: elapsedTimePercent }));
     }, [controls, isPlaying, customBarControlsClassName, changeMute]);
     return (React.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
-        React.createElement(ReactPlayer, { className: b('player'), url: src, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded }),
+        React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded }),
         renderCustomBarControls(muted, playedPercent)));
 });
 function getHeight(width) {

package/build/esm/components/ReactPlayer/utils.d.ts

@@ -0,0 +1 @@
+export declare const checkYoutubeVideos: (src: string | string[]) => string | string[];

package/build/esm/components/ReactPlayer/utils.js

@@ -0,0 +1,19 @@
+// the file serves to support live video with react-player@2.9
+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) => {
+    if (Array.isArray(src)) {
+        return src.map((videoUrl) => {
+            var _a;
+            if (LIVE_YUOTUBE_VIDEO_REGEX.test(videoUrl)) {
+                const youtubeLiveId = (_a = videoUrl.match(LIVE_YUOTUBE_VIDEO_REGEX)) === null || _a === void 0 ? void 0 : _a[1];
+                if (!youtubeLiveId) {
+                    return videoUrl;
+                }
+                return `${YOUTUBE_VIDEO_TEMPLATE}${youtubeLiveId}`;
+            }
+            return videoUrl;
+        });
+    }
+    return src;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -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",