pds-dev-kit-web-test 0.3.9 → 0.3.11

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 (5) hide show
  1. package/dist/src/sub/DynamicLayout/pagesPreviewMock.d.ts +1 -1
  2. package/dist/src/sub/DynamicLayout/pagesPreviewMock.js +4 -4
  3. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.js +36 -6
  4. package/package.json +1 -1
  5. package/release-note.md +2 -2
package/dist/src/sub/DynamicLayout/pagesPreviewMock.d.ts CHANGED
@@ -707,7 +707,7 @@ export declare const sampleCustomsection1: {
707
707
  };
708
708
  CB_EFFECT_PROP_ENTANIM: {
709
709
  CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: string;
710
- 'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': string;
710
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': null;
711
711
  CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: number;
712
712
  'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': null;
713
713
  CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: number;
package/dist/src/sub/DynamicLayout/pagesPreviewMock.js CHANGED
@@ -666,8 +666,8 @@ exports.sampleCustomsection1 = {
666
666
  CB_CONTENT_PROP_YOUTUBE_SPEC_STARTTIME: 0
667
667
  },
668
668
  CB_EFFECT_PROP_ENTANIM: {
669
- CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: 'SLIDEINLEFT',
670
- 'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': 'HEARTBEAT',
669
+ CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: 'NONE',
670
+ 'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': null,
671
671
  CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: 1,
672
672
  'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': null,
673
673
  CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: 1,
@@ -694,9 +694,9 @@ exports.sampleCustomsection1 = {
694
694
  },
695
695
  CB_PLACEMENT_PROP_PLACEMENT: {
696
696
  CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 8,
697
- 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 1,
697
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 8,
698
698
  CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 12,
699
- 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 3,
699
+ 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 8,
700
700
  CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: 1,
701
701
  'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': 2,
702
702
  CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: 1,
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.js CHANGED
@@ -19,6 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
19
19
  };
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  var jsx_runtime_1 = require("react/jsx-runtime");
22
+ /* eslint-disable no-console */
22
23
  var react_1 = require("react");
23
24
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
24
25
  var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
@@ -50,13 +51,41 @@ function Youtube(props) {
50
51
  : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
51
52
  var hasEffect = !isNoneEffectType;
52
53
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
53
- var autoplayEntry = (0, hooks_1.useIntersectionObserver)(cbRef, {
54
- freezeOnceVisible: true
54
+ var iframeRef = (0, react_1.useRef)(null);
55
+ var autoplayRef = (0, react_1.useRef)(null);
56
+ var autoplayEntry = (0, hooks_1.useIntersectionObserver)(autoplayRef, {
57
+ freezeOnceVisible: youtubeAutoplayMode === 'VIEWPORT-FREEZE' ? true : false
55
58
  });
56
- var shouldAutoPlay = youtubeAutoplayMode === 'ALWAYS' ||
57
- (youtubeAutoplayMode === 'VIEWPORT' && isVisible) ||
58
- (youtubeAutoplayMode === 'VIEWPORT-FREEZE' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting));
59
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: isEditMode ? ((0, jsx_runtime_1.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc })] })) : ((0, jsx_runtime_1.jsx)(S_Iframe, { title: id, src: shouldAutoPlay ? getAutoplaySrc(youtubeSrc) : youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
59
+ var shouldAutoPlay = function () {
60
+ var _a, _b;
61
+ if (youtubeAutoplayMode === 'ALWAYS') {
62
+ return true;
63
+ }
64
+ if (youtubeAutoplayMode === 'VIEWPORT' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
65
+ if (!((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
66
+ console.log('ERROR: no CONTENT WINDOW');
67
+ return true;
68
+ }
69
+ iframeRef.current.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
70
+ console.log('VIEWPORT & intersecting');
71
+ return true;
72
+ }
73
+ if (youtubeAutoplayMode === 'VIEWPORT-FREEZE' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
74
+ return true;
75
+ }
76
+ if (youtubeAutoplayMode === 'VIEWPORT' && !(autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
77
+ console.log('viewport and NOT intersecting');
78
+ if (!((_b = iframeRef.current) === null || _b === void 0 ? void 0 : _b.contentWindow)) {
79
+ console.log('no window, return true');
80
+ return true;
81
+ }
82
+ iframeRef.current.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
83
+ console.log('send pause');
84
+ return true;
85
+ }
86
+ return false;
87
+ };
88
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ ref: autoplayRef, className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: isEditMode ? ((0, jsx_runtime_1.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc })] })) : ((0, jsx_runtime_1.jsx)(S_Iframe, { ref: iframeRef, title: id, src: shouldAutoPlay() ? getAutoplaySrc(youtubeSrc) : youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
60
89
  }
61
90
  function getBGColorStyles(props, device) {
62
91
  var availableSpecCodes = [
@@ -87,6 +116,7 @@ function getAutoplaySrc(youtubeSrc) {
87
116
  url.searchParams.set('mute', '1');
88
117
  url.searchParams.set('loop', '1');
89
118
  url.searchParams.set('playlist', "".concat(id));
119
+ url.searchParams.set('enablejsapi', '1');
90
120
  return url.href;
91
121
  }
92
122
  return 'Invalid YouTube URL';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.3.9",
3
+ "version": "0.3.11",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # pds-dev-kit-web-test Release Notes
2
- ## [v0.3.9]
2
+ ## [v0.3.11]
3
3
  ## 기준 pds-dev-kit-web 버전 @2.2.34
4
4
  ### sub
5
5
  * DynamicLayout
6
- * youtube CB autoplay mode 3가지 개발
6
+ * VIEWPORT의 경우, pause and replay 기능 추가