@gravity-ui/page-constructor 3.17.2 → 3.17.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -36,6 +36,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
|
|
|
36
36
|
const [started, setStarted] = (0, react_1.useState)(autoPlay);
|
|
37
37
|
const [paused, setPaused] = (0, react_1.useState)(false);
|
|
38
38
|
const [ended, setEnded] = (0, react_1.useState)(false);
|
|
39
|
+
const [isMounted, setIsMounted] = react_1.default.useState(false);
|
|
40
|
+
(0, hooks_1.useMount)(() => setIsMounted(true));
|
|
39
41
|
const videoSrc = (0, react_1.useMemo)(() => (0, utils_2.checkYoutubeVideos)(src), [src]);
|
|
40
42
|
const eventsArray = (0, react_1.useMemo)(() => {
|
|
41
43
|
if (analyticsEvents) {
|
|
@@ -194,9 +196,9 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
|
|
|
194
196
|
},
|
|
195
197
|
}, elapsedTimePercent: elapsedTimePercent }));
|
|
196
198
|
}, [controls, isPlaying, customBarControlsClassName, changeMute]);
|
|
197
|
-
return (react_1.default.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
|
|
199
|
+
return (react_1.default.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick }, isMounted ? (react_1.default.createElement(react_1.Fragment, null,
|
|
198
200
|
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 }),
|
|
199
|
-
renderCustomBarControls(muted, playedPercent)));
|
|
201
|
+
renderCustomBarControls(muted, playedPercent))) : null));
|
|
200
202
|
});
|
|
201
203
|
function getHeight(width) {
|
|
202
204
|
return (width / 16) * 9;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
|
|
1
|
+
import React, { Fragment, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
|
|
2
2
|
import { Icon } from '@gravity-ui/uikit';
|
|
3
3
|
import _ from 'lodash';
|
|
4
4
|
import ReactPlayer from 'react-player';
|
|
5
5
|
import { MetrikaContext } from '../../context/metrikaContext';
|
|
6
6
|
import { MobileContext } from '../../context/mobileContext';
|
|
7
7
|
import { VideoContext } from '../../context/videoContext';
|
|
8
|
-
import { useAnalytics } from '../../hooks';
|
|
8
|
+
import { useAnalytics, useMount } from '../../hooks';
|
|
9
9
|
import { PlayVideo } from '../../icons';
|
|
10
10
|
import { DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from '../../models';
|
|
11
11
|
import { block } from '../../utils';
|
|
@@ -33,6 +33,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
|
|
|
33
33
|
const [started, setStarted] = useState(autoPlay);
|
|
34
34
|
const [paused, setPaused] = useState(false);
|
|
35
35
|
const [ended, setEnded] = useState(false);
|
|
36
|
+
const [isMounted, setIsMounted] = React.useState(false);
|
|
37
|
+
useMount(() => setIsMounted(true));
|
|
36
38
|
const videoSrc = useMemo(() => checkYoutubeVideos(src), [src]);
|
|
37
39
|
const eventsArray = useMemo(() => {
|
|
38
40
|
if (analyticsEvents) {
|
|
@@ -191,9 +193,9 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
|
|
|
191
193
|
},
|
|
192
194
|
}, elapsedTimePercent: elapsedTimePercent }));
|
|
193
195
|
}, [controls, isPlaying, customBarControlsClassName, changeMute]);
|
|
194
|
-
return (React.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
|
|
196
|
+
return (React.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick }, isMounted ? (React.createElement(Fragment, null,
|
|
195
197
|
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 }),
|
|
196
|
-
renderCustomBarControls(muted, playedPercent)));
|
|
198
|
+
renderCustomBarControls(muted, playedPercent))) : null));
|
|
197
199
|
});
|
|
198
200
|
function getHeight(width) {
|
|
199
201
|
return (width / 16) * 9;
|