@cntrl-site/sdk-nextjs 1.9.111 → 1.9.112

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 (9) hide show
  1. package/.idea/codeStyles/codeStyleConfig.xml +5 -0
  2. package/.idea/modules.xml +8 -0
  3. package/.idea/sdk-nextjs.iml +12 -0
  4. package/.idea/vcs.xml +6 -0
  5. package/lib/components/Section/SectionImage.js +17 -4
  6. package/lib/components/Section/SectionVideo.js +3 -3
  7. package/package.json +2 -2
  8. package/src/components/Section/SectionImage.tsx +35 -13
  9. package/src/components/Section/SectionVideo.tsx +4 -3
package/.idea/codeStyles/codeStyleConfig.xml ADDED
@@ -0,0 +1,5 @@
1
+ <component name="ProjectCodeStyleConfiguration">
2
+ <state>
3
+ <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
4
+ </state>
5
+ </component>
package/.idea/modules.xml ADDED
@@ -0,0 +1,8 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <project version="4">
3
+ <component name="ProjectModuleManager">
4
+ <modules>
5
+ <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
6
+ </modules>
7
+ </component>
8
+ </project>
package/.idea/sdk-nextjs.iml ADDED
@@ -0,0 +1,12 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <module type="WEB_MODULE" version="4">
3
+ <component name="NewModuleRootManager">
4
+ <content url="file://$MODULE_DIR$">
5
+ <excludeFolder url="file://$MODULE_DIR$/temp" />
6
+ <excludeFolder url="file://$MODULE_DIR$/.tmp" />
7
+ <excludeFolder url="file://$MODULE_DIR$/tmp" />
8
+ </content>
9
+ <orderEntry type="inheritedJdk" />
10
+ <orderEntry type="sourceFolder" forTests="false" />
11
+ </component>
12
+ </module>
package/.idea/vcs.xml ADDED
@@ -0,0 +1,6 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <project version="4">
3
+ <component name="VcsDirectoryMappings">
4
+ <mapping directory="$PROJECT_DIR$" vcs="Git" />
5
+ </component>
6
+ </project>
package/lib/components/Section/SectionImage.js CHANGED
@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.SectionImage = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const SectionImage = ({ media, sectionId }) => {
6
- const { url, size, position, offsetX } = media;
6
+ const { url, size, position, offsetX, opacity, tileSize } = media;
7
7
  const isContainHeight = size === 'contain-height';
8
+ const isTile = size === 'tile';
8
9
  const hasOffsetX = offsetX !== null && size === 'contain';
9
10
  return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: `section-image-wrapper-${sectionId}`, style: {
10
11
  position: position === 'fixed' ? 'sticky' : 'relative',
@@ -12,13 +13,25 @@ const SectionImage = ({ media, sectionId }) => {
12
13
  top: position === 'fixed' ? '100vh' : '0',
13
14
  width: '100%',
14
15
  overflow: 'hidden'
15
- }, children: (0, jsx_runtime_1.jsx)("img", { src: url, className: `image-background-${sectionId}`, style: {
16
+ }, children: isTile ? ((0, jsx_runtime_1.jsx)("div", { className: `image-background-${sectionId}`, style: {
17
+ position: 'absolute',
18
+ top: 0,
19
+ left: 0,
20
+ width: '100%',
21
+ height: '100%',
22
+ backgroundImage: `url(${url})`,
23
+ backgroundSize: `${tileSize}%`,
24
+ backgroundRepeat: 'repeat',
25
+ backgroundPosition: '0 0',
26
+ opacity
27
+ } })) : ((0, jsx_runtime_1.jsx)("img", { src: url, className: `image-background-${sectionId}`, style: {
16
28
  objectFit: isContainHeight ? 'unset' : (size !== null && size !== void 0 ? size : 'cover'),
17
29
  width: isContainHeight || hasOffsetX ? 'auto' : '100%',
18
30
  transform: isContainHeight ? 'translateX(-50%)' : 'none',
19
31
  position: 'relative',
20
32
  left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
21
- height: '100%'
22
- } }) }) }));
33
+ height: '100%',
34
+ opacity
35
+ } })) }) }));
23
36
  };
24
37
  exports.SectionImage = SectionImage;
package/lib/components/Section/SectionVideo.js CHANGED
@@ -7,7 +7,7 @@ const SectionVideo = ({ container, sectionId, media }) => {
7
7
  const [video, setVideo] = (0, react_1.useState)(null);
8
8
  const [videoWrapper, setVideoWrapper] = (0, react_1.useState)(null);
9
9
  const [isVideoWidthOverflow, setIsVideoWidthOverflow] = (0, react_1.useState)(false);
10
- const { url, size, position, offsetX, coverUrl, play } = media;
10
+ const { url, size, position, offsetX, coverUrl, play, opacity } = media;
11
11
  const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
12
12
  const [userPaused, setUserPaused] = (0, react_1.useState)(false);
13
13
  const [isClickedOnCover, setIsClickedOnCover] = (0, react_1.useState)(false);
@@ -64,7 +64,7 @@ const SectionVideo = ({ container, sectionId, media }) => {
64
64
  overflow: 'hidden',
65
65
  width: '100%'
66
66
  }, children: [(0, jsx_runtime_1.jsx)("video", { ref: setVideo, autoPlay: play === 'auto', loop: true, style: {
67
- opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : 1,
67
+ opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : opacity,
68
68
  objectFit: isContainHeight ? 'cover' : (size !== null && size !== void 0 ? size : 'cover'),
69
69
  width: isContainHeight && !isVideoWidthOverflow ? 'auto' : '100%',
70
70
  transform: isContainHeight ? 'translateX(-50%)' : 'none',
@@ -78,7 +78,7 @@ const SectionVideo = ({ container, sectionId, media }) => {
78
78
  height: '100%',
79
79
  top: 0
80
80
  }, onClick: handleCoverClick, children: coverUrl && play === 'on-click' && ((0, jsx_runtime_1.jsx)("img", { src: coverUrl, alt: "Video cover", className: `video-background-${sectionId}-cover`, style: {
81
- opacity: isPlaying ? 0 : 1,
81
+ opacity: isPlaying ? 0 : opacity,
82
82
  left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
83
83
  width: isContainHeight ? 'auto' : '100%',
84
84
  objectFit: isContainHeight ? 'unset' : (size !== null && size !== void 0 ? size : 'cover'),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.9.111",
3
+ "version": "1.9.112",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
@@ -33,7 +33,7 @@
33
33
  "@cntrl-site/color": "^1.0.0",
34
34
  "@cntrl-site/components": "^1.0.56",
35
35
  "@cntrl-site/effects": "^1.4.2",
36
- "@cntrl-site/sdk": "^1.28.4",
36
+ "@cntrl-site/sdk": "^1.28.5",
37
37
  "@types/vimeo__player": "^2.18.0",
38
38
  "@vimeo/player": "^2.25.0",
39
39
  "html-react-parser": "^3.0.1",
package/src/components/Section/SectionImage.tsx CHANGED
@@ -7,6 +7,8 @@ export type TSectionImage = {
7
7
  size: string;
8
8
  position: string;
9
9
  offsetX: number | null;
10
+ opacity?: number;
11
+ tileSize?: number;
10
12
  };
11
13
 
12
14
  interface Props {
@@ -15,8 +17,9 @@ interface Props {
15
17
  }
16
18
 
17
19
  export const SectionImage: FC<Props> = ({ media, sectionId }) => {
18
- const { url, size, position, offsetX } = media;
20
+ const { url, size, position, offsetX, opacity, tileSize } = media;
19
21
  const isContainHeight = size === 'contain-height';
22
+ const isTile = size === 'tile';
20
23
  const hasOffsetX = offsetX !== null && size === 'contain';
21
24
  return (
22
25
  <>
@@ -30,18 +33,37 @@ export const SectionImage: FC<Props> = ({ media, sectionId }) => {
30
33
  overflow: 'hidden'
31
34
  }}
32
35
  >
33
- <img
34
- src={url}
35
- className={`image-background-${sectionId}`}
36
- style={{
37
- objectFit: isContainHeight ? 'unset' : (size ?? 'cover') as CSSProperties['objectFit'],
38
- width: isContainHeight || hasOffsetX ? 'auto' : '100%',
39
- transform: isContainHeight ? 'translateX(-50%)' : 'none',
40
- position: 'relative',
41
- left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
42
- height: '100%'
43
- }}
44
- />
36
+ {isTile ? (
37
+ <div
38
+ className={`image-background-${sectionId}`}
39
+ style={{
40
+ position: 'absolute',
41
+ top: 0,
42
+ left: 0,
43
+ width: '100%',
44
+ height: '100%',
45
+ backgroundImage: `url(${url})`,
46
+ backgroundSize: `${tileSize}%`,
47
+ backgroundRepeat: 'repeat',
48
+ backgroundPosition: '0 0',
49
+ opacity
50
+ }}
51
+ />
52
+ ) : (
53
+ <img
54
+ src={url}
55
+ className={`image-background-${sectionId}`}
56
+ style={{
57
+ objectFit: isContainHeight ? 'unset' : (size ?? 'cover') as CSSProperties['objectFit'],
58
+ width: isContainHeight || hasOffsetX ? 'auto' : '100%',
59
+ transform: isContainHeight ? 'translateX(-50%)' : 'none',
60
+ position: 'relative',
61
+ left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
62
+ height: '100%',
63
+ opacity
64
+ }}
65
+ />
66
+ )}
45
67
  </div>
46
68
  </>
47
69
  );
package/src/components/Section/SectionVideo.tsx CHANGED
@@ -9,6 +9,7 @@ export type TSectionVideo = {
9
9
  position: string;
10
10
  coverUrl: string | null;
11
11
  offsetX: number | null;
12
+ opacity?: number;
12
13
  };
13
14
 
14
15
  interface Props {
@@ -21,7 +22,7 @@ export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
21
22
  const [video, setVideo] = useState<HTMLVideoElement | null>(null);
22
23
  const [videoWrapper, setVideoWrapper] = useState<HTMLDivElement | null>(null);
23
24
  const [isVideoWidthOverflow, setIsVideoWidthOverflow] = useState(false);
24
- const { url, size, position, offsetX, coverUrl, play } = media;
25
+ const { url, size, position, offsetX, coverUrl, play, opacity } = media;
25
26
  const [isPlaying, setIsPlaying] = useState(false);
26
27
  const [userPaused, setUserPaused] = useState(false);
27
28
  const [isClickedOnCover, setIsClickedOnCover] = useState(false);
@@ -89,7 +90,7 @@ export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
89
90
  autoPlay={play === 'auto'}
90
91
  loop
91
92
  style={{
92
- opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : 1,
93
+ opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : opacity,
93
94
  objectFit: isContainHeight ? 'cover' : (size ?? 'cover') as CSSProperties['objectFit'],
94
95
  width: isContainHeight && !isVideoWidthOverflow ? 'auto' : '100%',
95
96
  transform: isContainHeight ? 'translateX(-50%)' : 'none',
@@ -125,7 +126,7 @@ export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
125
126
  alt="Video cover"
126
127
  className={`video-background-${sectionId}-cover`}
127
128
  style={{
128
- opacity: isPlaying ? 0 : 1,
129
+ opacity: isPlaying ? 0 : opacity,
129
130
  left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
130
131
  width: isContainHeight ? 'auto' : '100%',
131
132
  objectFit: isContainHeight ? 'unset' : (size ?? 'cover') as CSSProperties['objectFit'],