@cntrl-site/sdk-nextjs 1.8.22 → 1.8.23

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.
Files changed (4) hide show
  1. package/cntrl-site-sdk-nextjs-1.8.23.tgz +0 -0
  2. package/lib/components/Section/SectionVideo.js +22 -6
  3. package/package.json +1 -1
  4. package/src/components/Section/SectionVideo.tsx +52 -34
package/cntrl-site-sdk-nextjs-1.8.23.tgz ADDED
Binary file
package/lib/components/Section/SectionVideo.js CHANGED
@@ -5,6 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const SectionVideo = ({ container, sectionId, media }) => {
7
7
  const [video, setVideo] = (0, react_1.useState)(null);
8
+ const [videoWrapper, setVideoWrapper] = (0, react_1.useState)(null);
9
+ const [isVideoWidthOverflow, setIsVideoWidthOverflow] = (0, react_1.useState)(false);
8
10
  const { url, size, position, offsetX, coverUrl, play } = media;
9
11
  const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
10
12
  const [userPaused, setUserPaused] = (0, react_1.useState)(false);
@@ -38,9 +40,24 @@ const SectionVideo = ({ container, sectionId, media }) => {
38
40
  observer.observe(container);
39
41
  return () => observer.disconnect();
40
42
  }, [container, play, userPaused, isClickedOnCover]);
43
+ (0, react_1.useEffect)(() => {
44
+ if (!video || !videoWrapper)
45
+ return;
46
+ video.addEventListener('loadedmetadata', () => {
47
+ const h = video.videoHeight;
48
+ const w = video.videoWidth;
49
+ const width = (videoWrapper.clientHeight / h) * w;
50
+ if (width > videoWrapper.clientWidth) {
51
+ setIsVideoWidthOverflow(true);
52
+ }
53
+ else {
54
+ setIsVideoWidthOverflow(false);
55
+ }
56
+ });
57
+ }, [video, videoWrapper]);
41
58
  const isContainHeight = size === 'contain-height';
42
59
  const hasOffsetX = offsetX !== null && size === 'contain';
43
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: `section-video-wrapper-${sectionId}`, style: {
60
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { ref: setVideoWrapper, className: `section-video-wrapper-${sectionId}`, style: {
44
61
  position: position === 'fixed' ? 'sticky' : 'relative',
45
62
  height: position === 'fixed' ? '100vh' : '100%',
46
63
  top: position === 'fixed' ? '100vh' : '0',
@@ -48,14 +65,13 @@ const SectionVideo = ({ container, sectionId, media }) => {
48
65
  width: '100%'
49
66
  }, children: [(0, jsx_runtime_1.jsx)("video", { ref: setVideo, autoPlay: play === 'auto', loop: true, style: {
50
67
  opacity: !isPlaying && play === 'on-click' && coverUrl ? 0 : 1,
51
- objectFit: isContainHeight ? 'unset' : (size !== null && size !== void 0 ? size : 'cover'),
52
- width: isContainHeight ? 'auto' : '100%',
68
+ objectFit: isContainHeight ? 'cover' : (size !== null && size !== void 0 ? size : 'cover'),
69
+ width: isContainHeight && !isVideoWidthOverflow ? 'auto' : '100%',
53
70
  transform: isContainHeight ? 'translateX(-50%)' : 'none',
54
71
  left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
55
72
  height: '100%',
56
73
  position: 'relative'
57
- }, controls: false, muted: play === 'auto', playsInline: true, preload: "auto", className: `video-background-${sectionId}`, onPlay: () => setIsPlaying(true), onPause: () => setIsPlaying(false), children: (0, jsx_runtime_1.jsx)("source", { src: `${url}#t=0.001` }) }), (0, jsx_runtime_1.jsx)("div", { className: `video-background-${sectionId}-cover-container`, style: {
58
- pointerEvents: play === 'on-click' ? 'auto' : 'none',
74
+ }, controls: play === 'on-click', muted: play === 'auto', playsInline: true, preload: "auto", className: `video-background-${sectionId}`, onPlay: () => setIsPlaying(true), onPause: () => setIsPlaying(false), children: (0, jsx_runtime_1.jsx)("source", { src: `${url}` }) }), play === 'on-click' && !isPlaying && ((0, jsx_runtime_1.jsx)("div", { className: `video-background-${sectionId}-cover-container`, style: {
59
75
  position: 'absolute',
60
76
  left: 0,
61
77
  width: '100%',
@@ -70,6 +86,6 @@ const SectionVideo = ({ container, sectionId, media }) => {
70
86
  position: 'relative',
71
87
  height: '100%',
72
88
  transition: 'opacity 0.1s ease-in-out'
73
- } })) })] }) }));
89
+ } })) }))] }) }));
74
90
  };
75
91
  exports.SectionVideo = SectionVideo;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.8.22",
3
+ "version": "1.8.23",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
package/src/components/Section/SectionVideo.tsx CHANGED
@@ -19,6 +19,8 @@ interface Props {
19
19
 
20
20
  export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
21
21
  const [video, setVideo] = useState<HTMLVideoElement | null>(null);
22
+ const [videoWrapper, setVideoWrapper] = useState<HTMLDivElement | null>(null);
23
+ const [isVideoWidthOverflow, setIsVideoWidthOverflow] = useState(false);
22
24
  const { url, size, position, offsetX, coverUrl, play } = media;
23
25
  const [isPlaying, setIsPlaying] = useState(false);
24
26
  const [userPaused, setUserPaused] = useState(false);
@@ -52,12 +54,27 @@ export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
52
54
  return () => observer.disconnect();
53
55
  }, [container, play, userPaused, isClickedOnCover]);
54
56
 
57
+ useEffect(() => {
58
+ if (!video || !videoWrapper) return;
59
+ video.addEventListener('loadedmetadata', () => {
60
+ const h = video.videoHeight;
61
+ const w = video.videoWidth;
62
+ const width = (videoWrapper.clientHeight / h) * w;
63
+ if (width > videoWrapper.clientWidth) {
64
+ setIsVideoWidthOverflow(true);
65
+ } else {
66
+ setIsVideoWidthOverflow(false);
67
+ }
68
+ });
69
+ }, [video, videoWrapper]);
70
+
55
71
  const isContainHeight = size === 'contain-height';
56
72
  const hasOffsetX = offsetX !== null && size === 'contain';
57
73
 
58
74
  return (
59
75
  <>
60
76
  <div
77
+ ref={setVideoWrapper}
61
78
  className={`section-video-wrapper-${sectionId}`}
62
79
  style={{
63
80
  position: position === 'fixed' ? 'sticky' : 'relative',
@@ -73,14 +90,14 @@ export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
73
90
  loop
74
91
  style={{
75
92
  opacity: !isPlaying && play === 'on-click' && coverUrl ? 0 : 1,
76
- objectFit: isContainHeight ? 'unset' : (size ?? 'cover') as CSSProperties['objectFit'],
77
- width: isContainHeight ? 'auto' : '100%',
93
+ objectFit: isContainHeight ? 'cover' : (size ?? 'cover') as CSSProperties['objectFit'],
94
+ width: isContainHeight && !isVideoWidthOverflow ? 'auto' : '100%',
78
95
  transform: isContainHeight ? 'translateX(-50%)' : 'none',
79
96
  left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
80
97
  height: '100%',
81
98
  position: 'relative'
82
99
  }}
83
- controls={false}
100
+ controls={play === 'on-click'}
84
101
  muted={play === 'auto'}
85
102
  playsInline
86
103
  preload="auto"
@@ -88,38 +105,39 @@ export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
88
105
  onPlay={() => setIsPlaying(true)}
89
106
  onPause={() => setIsPlaying(false)}
90
107
  >
91
- <source src={`${url}#t=0.001`} />
108
+ <source src={`${url}`} />
92
109
  </video>
93
- <div
94
- className={`video-background-${sectionId}-cover-container`}
95
- style={{
96
- pointerEvents: play === 'on-click' ? 'auto' : 'none',
97
- position: 'absolute',
98
- left: 0,
99
- width: '100%',
100
- height: '100%',
101
- top: 0
102
- }}
103
- onClick={handleCoverClick}
104
- >
105
- {coverUrl && play === 'on-click' && (
106
- <img
107
- src={coverUrl}
108
- alt="Video cover"
109
- className={`video-background-${sectionId}-cover`}
110
- style={{
111
- opacity: isPlaying ? 0 : 1,
112
- left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
113
- width: isContainHeight ? 'auto' : '100%',
114
- objectFit: isContainHeight ? 'unset' : (size ?? 'cover') as CSSProperties['objectFit'],
115
- transform: isContainHeight ? 'translateX(-50%)' : 'none',
116
- position: 'relative',
117
- height: '100%',
118
- transition: 'opacity 0.1s ease-in-out'
119
- }}
120
- />
121
- )}
122
- </div>
110
+ {play === 'on-click' && !isPlaying && (
111
+ <div
112
+ className={`video-background-${sectionId}-cover-container`}
113
+ style={{
114
+ position: 'absolute',
115
+ left: 0,
116
+ width: '100%',
117
+ height: '100%',
118
+ top: 0
119
+ }}
120
+ onClick={handleCoverClick}
121
+ >
122
+ {coverUrl && play === 'on-click' && (
123
+ <img
124
+ src={coverUrl}
125
+ alt="Video cover"
126
+ className={`video-background-${sectionId}-cover`}
127
+ style={{
128
+ opacity: isPlaying ? 0 : 1,
129
+ left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
130
+ width: isContainHeight ? 'auto' : '100%',
131
+ objectFit: isContainHeight ? 'unset' : (size ?? 'cover') as CSSProperties['objectFit'],
132
+ transform: isContainHeight ? 'translateX(-50%)' : 'none',
133
+ position: 'relative',
134
+ height: '100%',
135
+ transition: 'opacity 0.1s ease-in-out'
136
+ }}
137
+ />
138
+ )}
139
+ </div>
140
+ )}
123
141
  </div>
124
142
  </>
125
143
  );