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

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.js

@@ -24,13 +24,14 @@ var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
 var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
 var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
 var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var utils_1 = require("../../../../../../../DynamicLayout/utils");
 var styled_components_1 = __importDefault(require("styled-components"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var parseYoutubeContentProp_1 = __importDefault(require("./parseYoutubeContentProp"));
 function Youtube(props) {
-    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode, youtubeAutoplayMode = _a.youtubeAutoplayMode;
     var CB_CONTENT_PROP_YOUTUBE = props.CB_CONTENT_PROP_YOUTUBE, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
     var _b = (0, parseYoutubeContentProp_1.default)(CB_CONTENT_PROP_YOUTUBE), youtubeSrc = _b.youtubeSrc, thumbnailSrc = _b.thumbnailSrc, id = _b.id;
     var isEditMode = mode === 'EDIT';
@@ -49,7 +50,13 @@ function Youtube(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    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: youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
+    var autoplayEntry = (0, hooks_1.useIntersectionObserver)(cbRef, {
+        freezeOnceVisible: true
+    });
+    var shouldAutoPlay = youtubeAutoplayMode === 'ALWAYS' ||
+        (youtubeAutoplayMode === 'VIEWPORT' && isVisible) ||
+        (youtubeAutoplayMode === 'VIEWPORT-FREEZE' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting));
+    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" })) })) }))] }));
 }
 function getBGColorStyles(props, device) {
     var availableSpecCodes = [
@@ -71,5 +78,22 @@ var S_YoutubeButton = styled_components_1.default.div(templateObject_4 || (templ
 function YoutubeButton() {
     return ((0, jsx_runtime_1.jsx)(S_YoutubeButton, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ height: "100%", version: "1.1", viewBox: "0 0 68 48", width: "100%" }, { children: [(0, jsx_runtime_1.jsx)("path", { className: "ytp-large-play-button-bg", d: "M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z", fill: "#f00" }), (0, jsx_runtime_1.jsx)("path", { d: "M 45,24 27,14 27,34", fill: "#fff" })] })) }));
 }
+function getAutoplaySrc(youtubeSrc) {
+    try {
+        var url = new URL(youtubeSrc);
+        if (url.hostname.includes('youtube.com') || url.hostname.includes('youtu.be')) {
+            var id = utils_1.YouTubeLinkParser.getId(youtubeSrc);
+            url.searchParams.set('autoplay', '1');
+            url.searchParams.set('mute', '1');
+            url.searchParams.set('loop', '1');
+            url.searchParams.set('playlist', "".concat(id));
+            return url.href;
+        }
+        return 'Invalid YouTube URL';
+    }
+    catch (error) {
+        return 'Invalid URL';
+    }
+}
 exports.default = Youtube;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/sub/DynamicLayout/types.d.ts

@@ -224,6 +224,7 @@ export type DynamicLayoutProps = {
     sectionActionHandler?: (action: TypeOfSectionAction) => void;
     programmedSectionComponents?: IProgrammedSectionComponents;
     width?: number;
+    youtubeAutoplayMode?: 'ALWAYS' | 'VIEWPORT-FREEZE' | 'VIEWPORT';
 };
 export type NavHandlerAction = {
     openNewTab: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,6 +1,6 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.3.7]
-## 기준 pds-dev-kit-web 버전 @2.2.26
+## [v0.3.9]
+## 기준 pds-dev-kit-web 버전 @2.2.34
 ### sub
     * DynamicLayout
-        * 선택된 CB에 투명도 0.95추가
+        * youtube CB autoplay mode 3가지 개발