@cntrl-site/sdk-nextjs 1.0.7 → 1.0.9
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.
- package/.idea/codeStyles/codeStyleConfig.xml +5 -0
- package/lib/components/items/VideoItem.js +3 -2
- package/lib/components/items/VimeoEmbed.js +29 -3
- package/lib/components/items/YoutubeEmbed.js +31 -3
- package/package.json +2 -2
- package/src/components/items/VideoItem.tsx +3 -1
- package/src/components/items/VimeoEmbed.tsx +34 -1
- package/src/components/items/YoutubeEmbed.tsx +36 -1
- package/cntrl-site-sdk-nextjs-1.0.7.tgz +0 -0
|
@@ -18,7 +18,7 @@ const useRegisterResize_1 = require("../../common/useRegisterResize");
|
|
|
18
18
|
const useLayoutContext_1 = require("../useLayoutContext");
|
|
19
19
|
const ScrollPlaybackVideo_1 = require("../ScrollPlaybackVideo");
|
|
20
20
|
const VideoItem = ({ item, sectionId, onResize }) => {
|
|
21
|
-
var _a, _b;
|
|
21
|
+
var _a, _b, _c;
|
|
22
22
|
const id = (0, react_1.useId)();
|
|
23
23
|
const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
|
|
24
24
|
const { radius, strokeWidth, strokeColor, opacity, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
|
|
@@ -32,7 +32,7 @@ const VideoItem = ({ item, sectionId, onResize }) => {
|
|
|
32
32
|
const hasScrollPlayback = scrollPlayback !== null;
|
|
33
33
|
(0, useRegisterResize_1.useRegisterResize)(ref, onResize);
|
|
34
34
|
const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (borderColor ? { borderColor: `${borderColor.toCss()}` } : {}));
|
|
35
|
-
return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: hasScrollPlayback ? ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })) : ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
|
|
35
|
+
return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: hasScrollPlayback ? ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })) : ((0, jsx_runtime_1.jsx)("video", { poster: (_c = item.commonParams.coverUrl) !== null && _c !== void 0 ? _c : '', ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
|
|
36
36
|
.video-wrapper-${item.id} {
|
|
37
37
|
position: absolute;
|
|
38
38
|
overflow: hidden;
|
|
@@ -50,6 +50,7 @@ const VideoItem = ({ item, sectionId, onResize }) => {
|
|
|
50
50
|
pointer-events: none;
|
|
51
51
|
overflow: hidden;
|
|
52
52
|
border-style: solid;
|
|
53
|
+
pointer-events: auto;
|
|
53
54
|
}
|
|
54
55
|
.video-${item.id} {
|
|
55
56
|
border-color: ${strokeColor};
|
|
@@ -16,7 +16,7 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
|
|
|
16
16
|
const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
|
|
17
17
|
const useRegisterResize_1 = require("../../common/useRegisterResize");
|
|
18
18
|
const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
|
|
19
|
-
var _a, _b;
|
|
19
|
+
var _a, _b, _c;
|
|
20
20
|
const id = (0, react_1.useId)();
|
|
21
21
|
const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
|
|
22
22
|
const { radius, blur, opacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
|
|
@@ -25,6 +25,8 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
|
|
|
25
25
|
const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
|
|
26
26
|
const { play, controls, loop, muted, pictureInPicture, url } = item.commonParams;
|
|
27
27
|
const [ref, setRef] = (0, react_1.useState)(null);
|
|
28
|
+
const [imgRef, setImgRef] = (0, react_1.useState)(null);
|
|
29
|
+
const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
|
|
28
30
|
const layoutValues = [item.area, item.layoutParams, item.state.hover];
|
|
29
31
|
(0, useRegisterResize_1.useRegisterResize)(ref, onResize);
|
|
30
32
|
const getValidVimeoUrl = (url) => {
|
|
@@ -41,7 +43,22 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
|
|
|
41
43
|
return validURL.href;
|
|
42
44
|
};
|
|
43
45
|
const validUrl = getValidVimeoUrl(url);
|
|
44
|
-
|
|
46
|
+
(0, react_1.useEffect)(() => {
|
|
47
|
+
if (!vimeoPlayer || !imgRef)
|
|
48
|
+
return;
|
|
49
|
+
vimeoPlayer.on('pause', (e) => {
|
|
50
|
+
if (e.seconds === 0) {
|
|
51
|
+
setIsCoverVisible(true);
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
}, [vimeoPlayer, imgRef]);
|
|
55
|
+
const onCoverClick = () => {
|
|
56
|
+
if (!vimeoPlayer || !imgRef)
|
|
57
|
+
return;
|
|
58
|
+
vimeoPlayer.play();
|
|
59
|
+
setIsCoverVisible(false);
|
|
60
|
+
};
|
|
61
|
+
return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), onMouseEnter: () => {
|
|
45
62
|
if (!vimeoPlayer || play !== 'on-hover')
|
|
46
63
|
return;
|
|
47
64
|
vimeoPlayer.play();
|
|
@@ -49,7 +66,16 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
|
|
|
49
66
|
if (!vimeoPlayer || play !== 'on-hover')
|
|
50
67
|
return;
|
|
51
68
|
vimeoPlayer.pause();
|
|
52
|
-
}, children: (0, jsx_runtime_1.jsx)("
|
|
69
|
+
}, children: [(0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_c = item.commonParams.coverUrl) !== null && _c !== void 0 ? _c : '', style: {
|
|
70
|
+
display: isCoverVisible ? 'block' : 'none',
|
|
71
|
+
cursor: 'pointer',
|
|
72
|
+
position: 'absolute',
|
|
73
|
+
objectFit: 'cover',
|
|
74
|
+
height: '100%',
|
|
75
|
+
width: '100%',
|
|
76
|
+
top: '0',
|
|
77
|
+
left: '0'
|
|
78
|
+
}, alt: "Cover img" }), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
|
|
53
79
|
.embed-video-wrapper-${item.id} {
|
|
54
80
|
position: absolute;
|
|
55
81
|
width: 100%;
|
|
@@ -17,7 +17,7 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
|
|
|
17
17
|
const useYouTubeIframeApi_1 = require("../../utils/Youtube/useYouTubeIframeApi");
|
|
18
18
|
const useRegisterResize_1 = require("../../common/useRegisterResize");
|
|
19
19
|
const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
|
|
20
|
-
var _a, _b;
|
|
20
|
+
var _a, _b, _c;
|
|
21
21
|
const id = (0, react_1.useId)();
|
|
22
22
|
const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
|
|
23
23
|
const { play, controls, url } = item.commonParams;
|
|
@@ -26,6 +26,8 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
|
|
|
26
26
|
const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
|
|
27
27
|
const [div, setDiv] = (0, react_1.useState)(null);
|
|
28
28
|
const [player, setPlayer] = (0, react_1.useState)(undefined);
|
|
29
|
+
const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
|
|
30
|
+
const [imgRef, setImgRef] = (0, react_1.useState)(null);
|
|
29
31
|
const layoutValues = [item.area, item.layoutParams, item.state.hover];
|
|
30
32
|
(0, useRegisterResize_1.useRegisterResize)(div, onResize);
|
|
31
33
|
(0, react_1.useEffect)(() => {
|
|
@@ -42,6 +44,16 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
|
|
|
42
44
|
controls: controls ? '1' : '0'
|
|
43
45
|
},
|
|
44
46
|
events: {
|
|
47
|
+
onStateChange: (event) => {
|
|
48
|
+
if (play !== 'auto')
|
|
49
|
+
return;
|
|
50
|
+
if (event.data === 1) {
|
|
51
|
+
setIsCoverVisible(false);
|
|
52
|
+
}
|
|
53
|
+
if (event.data === 2 || event.data === -1) {
|
|
54
|
+
setIsCoverVisible(true);
|
|
55
|
+
}
|
|
56
|
+
},
|
|
45
57
|
onReady: (event) => {
|
|
46
58
|
setPlayer(event.target);
|
|
47
59
|
if (play !== 'on-click') {
|
|
@@ -57,7 +69,13 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
|
|
|
57
69
|
(_a = placeholder.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(placeholder);
|
|
58
70
|
};
|
|
59
71
|
}, [YT, div]);
|
|
60
|
-
|
|
72
|
+
const onCoverClick = () => {
|
|
73
|
+
if (!player || !imgRef)
|
|
74
|
+
return;
|
|
75
|
+
player.playVideo();
|
|
76
|
+
setIsCoverVisible(false);
|
|
77
|
+
};
|
|
78
|
+
return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
|
|
61
79
|
if (!player || play !== 'on-hover')
|
|
62
80
|
return;
|
|
63
81
|
player.playVideo();
|
|
@@ -65,7 +83,17 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
|
|
|
65
83
|
if (!player || play !== 'on-hover')
|
|
66
84
|
return;
|
|
67
85
|
player.pauseVideo();
|
|
68
|
-
}, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: (0, jsx_runtime_1.jsx)("
|
|
86
|
+
}, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: [(0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_c = item.commonParams.coverUrl) !== null && _c !== void 0 ? _c : '', style: {
|
|
87
|
+
display: isCoverVisible ? 'block' : 'none',
|
|
88
|
+
cursor: 'pointer',
|
|
89
|
+
position: 'absolute',
|
|
90
|
+
objectFit: 'cover',
|
|
91
|
+
height: '100%',
|
|
92
|
+
width: '100%',
|
|
93
|
+
top: '0',
|
|
94
|
+
left: '0',
|
|
95
|
+
zIndex: 1
|
|
96
|
+
}, alt: "Cover img" }), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
|
|
69
97
|
.embed-youtube-video-wrapper-${item.id},
|
|
70
98
|
.embed-${item.id} {
|
|
71
99
|
position: absolute;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cntrl-site/sdk-nextjs",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"description": "SDK for Next.js",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "src/index.ts",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@cntrl-site/color": "^1.0.0",
|
|
25
25
|
"@cntrl-site/effects": "^1.2.0",
|
|
26
|
-
"@cntrl-site/sdk": "^1.12.
|
|
26
|
+
"@cntrl-site/sdk": "^1.12.3",
|
|
27
27
|
"@types/vimeo__player": "^2.18.0",
|
|
28
28
|
"@vimeo/player": "^2.20.1",
|
|
29
29
|
"html-react-parser": "^3.0.1",
|
|
@@ -39,7 +39,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
|
|
|
39
39
|
style={{
|
|
40
40
|
...(opacity !== undefined ? { opacity } : {}),
|
|
41
41
|
...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
|
|
42
|
-
...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})
|
|
42
|
+
...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})
|
|
43
43
|
}}
|
|
44
44
|
>
|
|
45
45
|
{hasScrollPlayback ? (
|
|
@@ -52,6 +52,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
|
|
|
52
52
|
/>
|
|
53
53
|
) : (
|
|
54
54
|
<video
|
|
55
|
+
poster={item.commonParams.coverUrl ?? ''}
|
|
55
56
|
ref={videoRef}
|
|
56
57
|
autoPlay
|
|
57
58
|
muted
|
|
@@ -82,6 +83,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
|
|
|
82
83
|
pointer-events: none;
|
|
83
84
|
overflow: hidden;
|
|
84
85
|
border-style: solid;
|
|
86
|
+
pointer-events: auto;
|
|
85
87
|
}
|
|
86
88
|
.video-${item.id} {
|
|
87
89
|
border-color: ${strokeColor};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC, useId, useMemo, useState } from 'react';
|
|
1
|
+
import { FC, useEffect, useId, useMemo, useState } from 'react';
|
|
2
2
|
import Player from '@vimeo/player';
|
|
3
3
|
import JSXStyle from 'styled-jsx/style';
|
|
4
4
|
import { ItemProps } from '../Item';
|
|
@@ -19,6 +19,8 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
|
|
|
19
19
|
const angle = useItemAngle(item, sectionId);
|
|
20
20
|
const { play, controls, loop, muted, pictureInPicture, url } = item.commonParams;
|
|
21
21
|
const [ref, setRef] = useState<HTMLDivElement | null>(null);
|
|
22
|
+
const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
|
|
23
|
+
const [isCoverVisible, setIsCoverVisible] = useState(false);
|
|
22
24
|
const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
|
|
23
25
|
useRegisterResize(ref, onResize);
|
|
24
26
|
const getValidVimeoUrl = (url: string): string => {
|
|
@@ -37,6 +39,21 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
|
|
|
37
39
|
}
|
|
38
40
|
const validUrl = getValidVimeoUrl(url);
|
|
39
41
|
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
if (!vimeoPlayer || !imgRef) return;
|
|
44
|
+
vimeoPlayer.on('pause', (e) => {
|
|
45
|
+
if (e.seconds === 0) {
|
|
46
|
+
setIsCoverVisible(true);
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
}, [vimeoPlayer, imgRef]);
|
|
50
|
+
|
|
51
|
+
const onCoverClick = () => {
|
|
52
|
+
if (!vimeoPlayer || !imgRef) return;
|
|
53
|
+
vimeoPlayer!.play();
|
|
54
|
+
setIsCoverVisible(false);
|
|
55
|
+
};
|
|
56
|
+
|
|
40
57
|
return (
|
|
41
58
|
<LinkWrapper url={item.link?.url} target={item.link?.target}>
|
|
42
59
|
<div
|
|
@@ -56,6 +73,22 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
|
|
|
56
73
|
vimeoPlayer.pause();
|
|
57
74
|
}}
|
|
58
75
|
>
|
|
76
|
+
<img
|
|
77
|
+
ref={setImgRef}
|
|
78
|
+
onClick={() => onCoverClick()}
|
|
79
|
+
src={item.commonParams.coverUrl ?? ''}
|
|
80
|
+
style={{
|
|
81
|
+
display: isCoverVisible ? 'block' : 'none',
|
|
82
|
+
cursor: 'pointer',
|
|
83
|
+
position: 'absolute',
|
|
84
|
+
objectFit: 'cover',
|
|
85
|
+
height: '100%',
|
|
86
|
+
width: '100%',
|
|
87
|
+
top: '0',
|
|
88
|
+
left: '0'
|
|
89
|
+
}}
|
|
90
|
+
alt="Cover img"
|
|
91
|
+
/>
|
|
59
92
|
<iframe
|
|
60
93
|
ref={setIframeRef}
|
|
61
94
|
className="embedVideo"
|
|
@@ -21,6 +21,8 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
|
|
|
21
21
|
const YT = useYouTubeIframeApi();
|
|
22
22
|
const [div, setDiv] = useState<HTMLDivElement | null>(null);
|
|
23
23
|
const [player, setPlayer] = useState<YTPlayer | undefined>(undefined);
|
|
24
|
+
const [isCoverVisible, setIsCoverVisible] = useState(false);
|
|
25
|
+
const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
|
|
24
26
|
const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
|
|
25
27
|
useRegisterResize(div, onResize);
|
|
26
28
|
|
|
@@ -37,6 +39,15 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
|
|
|
37
39
|
controls: controls ? '1' : '0'
|
|
38
40
|
},
|
|
39
41
|
events: {
|
|
42
|
+
onStateChange: (event) => {
|
|
43
|
+
if (play !== 'auto') return;
|
|
44
|
+
if (event.data === 1) {
|
|
45
|
+
setIsCoverVisible(false);
|
|
46
|
+
}
|
|
47
|
+
if (event.data === 2 || event.data === -1 ) {
|
|
48
|
+
setIsCoverVisible(true);
|
|
49
|
+
}
|
|
50
|
+
},
|
|
40
51
|
onReady: (event) => {
|
|
41
52
|
setPlayer(event.target);
|
|
42
53
|
if (play !== 'on-click') {
|
|
@@ -52,6 +63,12 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
|
|
|
52
63
|
};
|
|
53
64
|
}, [YT, div]);
|
|
54
65
|
|
|
66
|
+
const onCoverClick = () => {
|
|
67
|
+
if (!player || !imgRef) return;
|
|
68
|
+
player.playVideo();
|
|
69
|
+
setIsCoverVisible(false);
|
|
70
|
+
};
|
|
71
|
+
|
|
55
72
|
return (
|
|
56
73
|
<LinkWrapper url={item.link?.url} target={item.link?.target}>
|
|
57
74
|
<div
|
|
@@ -70,11 +87,29 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
|
|
|
70
87
|
...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
|
|
71
88
|
}}
|
|
72
89
|
>
|
|
90
|
+
<img
|
|
91
|
+
ref={setImgRef}
|
|
92
|
+
onClick={() => onCoverClick()}
|
|
93
|
+
src={item.commonParams.coverUrl ?? ''}
|
|
94
|
+
style={{
|
|
95
|
+
display: isCoverVisible ? 'block' : 'none',
|
|
96
|
+
cursor: 'pointer',
|
|
97
|
+
position: 'absolute',
|
|
98
|
+
objectFit: 'cover',
|
|
99
|
+
height: '100%',
|
|
100
|
+
width: '100%',
|
|
101
|
+
top: '0',
|
|
102
|
+
left: '0',
|
|
103
|
+
zIndex: 1
|
|
104
|
+
}}
|
|
105
|
+
alt="Cover img"
|
|
106
|
+
/>
|
|
73
107
|
<div
|
|
74
108
|
className={`embed-${item.id}`}
|
|
75
109
|
ref={setDiv}
|
|
76
110
|
style={{
|
|
77
|
-
...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})
|
|
111
|
+
...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
|
|
112
|
+
|
|
78
113
|
}}
|
|
79
114
|
/>
|
|
80
115
|
</div>
|
|
Binary file
|