pds-dev-kit-web 2.2.176 → 2.2.177

package/dist/src/common/assets/icons/fill/VideoType.js

@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var VideoType = function (_a) {
     var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, d: "M14.5464,4 L4.6254,4 C2.9464,4 1.5864,5.361 1.5864,7.04 L1.5864,16.96 C1.5864,18.639 2.9464,20 4.6254,20 L14.5464,20 C16.2254,20 17.5864,18.639 17.5864,16.96 L17.5864,7.04 C17.5864,5.361 16.2254,4 14.5464,4 L14.5464,4 Z M14.5464,6 C15.1194,6 15.5864,6.466 15.5864,7.04 L15.5864,16.96 C15.5864,17.534 15.1194,18 14.5464,18 L4.6254,18 C4.0524,18 3.5864,17.534 3.5864,16.96 L3.5864,7.04 C3.5864,6.466 4.0524,6 4.6254,6 L14.5464,6 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeWidth: "2", d: "M17.489,10.2218 L20.804,7.6688 C21.464,7.1598 22.42,7.6348 22.4140281,8.4678 L22.362,15.7308 C22.356,16.5628 21.395,17.0238 20.742,16.5078 L17.448,13.9018" })] })) })));
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none" }, { children: [(0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4.4776,8.1413 L19.5226,8.1413 M6.4537,4.7562 L9.6937,7.9962 M10.1412,4.279 L13.8592,7.997 M14.3059,4.279 L18.0239,7.997" }), (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M17.25,3.2501 C19.183,3.2501 20.75,4.8171 20.75,6.7501 L20.75,17.2501 C20.75,19.1831 19.183,20.7501 17.25,20.7501 L6.75,20.7501 C4.817,20.7501 3.25,19.1831 3.25,17.2501 L3.25,6.7501 C3.25,4.8171 4.817,3.2501 6.75,3.2501 Z M17.25,5.2501 L6.75,5.2501 C5.923,5.2501 5.25,5.9231 5.25,6.7501 L5.25,17.2501 C5.25,18.0771 5.923,18.7501 6.75,18.7501 L17.25,18.7501 C18.077,18.7501 18.75,18.0771 18.75,17.2501 L18.75,6.7501 C18.75,5.9231 18.077,5.2501 17.25,5.2501 Z M10.9181,10.5725 L13.0111,11.7805 L15.1041,12.9895 C15.7251,13.3475 15.7251,14.2435 15.1041,14.6015 L13.0111,15.8105 L10.9181,17.0185 C10.2971,17.3775 9.5211,16.9295 9.5211,16.2125 L9.5211,11.3785 C9.5211,10.6615 10.2971,10.2135 10.9181,10.5725 Z" })] })) })));
 };
 exports.default = VideoType;

package/dist/src/common/assets/icons/line/VideoType.js

@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var VideoType = function (_a) {
     var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, d: "M14.5464,4 L4.6254,4 C2.9464,4 1.5864,5.361 1.5864,7.04 L1.5864,16.96 C1.5864,18.639 2.9464,20 4.6254,20 L14.5464,20 C16.2254,20 17.5864,18.639 17.5864,16.96 L17.5864,7.04 C17.5864,5.361 16.2254,4 14.5464,4 L14.5464,4 Z M14.5464,5.5 C15.3954,5.5 16.0864,6.191 16.0864,7.04 L16.0864,16.96 C16.0864,17.809 15.3954,18.5 14.5464,18.5 L4.6254,18.5 C3.7764,18.5 3.0864,17.809 3.0864,16.96 L3.0864,7.04 C3.0864,6.191 3.7764,5.5 4.6254,5.5 L14.5464,5.5 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeWidth: "1.5", d: "M17.489,10.2218 L20.804,7.6688 C21.464,7.1598 22.42,7.6348 22.4140281,8.4678 L22.362,15.7308 C22.356,16.5628 21.395,17.0238 20.742,16.5078 L17.448,13.9018" })] })) })));
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none" }, { children: [(0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M4.4776,8.1413 L19.5226,8.1413 M5.9765,4.279 L9.6945,7.997 M10.1412,4.279 L13.8592,7.997 M14.3059,4.279 L18.0239,7.997" }), (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M17.25,3.2501 C19.183,3.2501 20.75,4.8171 20.75,6.7501 L20.75,17.2501 C20.75,19.1831 19.183,20.7501 17.25,20.7501 L6.75,20.7501 C4.817,20.7501 3.25,19.1831 3.25,17.2501 L3.25,6.7501 C3.25,4.8171 4.817,3.2501 6.75,3.2501 Z M17.25,4.7501 L6.75,4.7501 C5.647,4.7501 4.75,5.6471 4.75,6.7501 L4.75,17.2501 C4.75,18.3531 5.647,19.2501 6.75,19.2501 L17.25,19.2501 C18.353,19.2501 19.25,18.3531 19.25,17.2501 L19.25,6.7501 C19.25,5.6471 18.353,4.7501 17.25,4.7501 Z M10.9181,10.5725 L13.0111,11.7805 L15.1041,12.9895 C15.7251,13.3475 15.7251,14.2435 15.1041,14.6015 L13.0111,15.8105 L10.9181,17.0185 C10.2971,17.3775 9.5211,16.9295 9.5211,16.2125 L9.5211,11.3785 C9.5211,10.6615 10.2971,10.2135 10.9181,10.5725 Z" })] })) })));
 };
 exports.default = VideoType;

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

@@ -29,6 +29,7 @@ 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 helper_1 = require("./helper");
 function VideoPlayer(props) {
     var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var CB_CONTENT_PROP_VIDEO = props.CB_CONTENT_PROP_VIDEO;
@@ -55,11 +56,19 @@ function VideoPlayer(props) {
     var CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR, CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME, CB_CONTENT_PROP_VIDEO_SPEC_THUMB = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_THUMB, CB_CONTENT_PROP_VIDEO_SPEC_MAUTOPLAY = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_MAUTOPLAY, CB_CONTENT_PROP_VIDEO_SPEC_AUTOPLAY = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_AUTOPLAY;
     var shouldAutoplay = (CB_CONTENT_PROP_VIDEO_SPEC_AUTOPLAY && device === 'DESKTOP') ||
         (CB_CONTENT_PROP_VIDEO_SPEC_MAUTOPLAY && device === 'MOBILE');
-    var getVideoSrc = function () {
-        return CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR;
-    };
     var videoRef = (0, react_1.useRef)(null);
     var _e = (0, react_1.useState)(false), videoLoaded = _e[0], setVideoLoaded = _e[1];
+    var _f = (0, react_1.useState)(function () {
+        return (0, helper_1.parseTargetUrl)(CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR).encodedURL;
+    }), videoURL = _f[0], setVideoURL = _f[1];
+    var onVideoError = function () {
+        var fallbackURL = (0, helper_1.parseTargetUrl)(CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR).fallbackURL;
+        var isFallbackURL = fallbackURL === videoURL;
+        if (fallbackURL && !isFallbackURL) {
+            setVideoURL(fallbackURL);
+            return;
+        }
+    };
     var onLoadedMetadata = function () {
         setVideoLoaded(true);
     };
@@ -103,6 +112,9 @@ function VideoPlayer(props) {
             observer.disconnect();
         };
     }, [videoLoaded, isEditMode, shouldAutoplay]);
+    (0, react_1.useEffect)(function () {
+        setVideoURL((0, helper_1.parseTargetUrl)(CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR).encodedURL);
+    }, [CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR]);
     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.jsxs)(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.jsx)("div", __assign({ style: {
                                 position: 'absolute',
                                 top: '50%',
@@ -113,7 +125,7 @@ function VideoPlayer(props) {
                                 alignItems: 'center',
                                 justifyContent: 'center',
                                 transform: 'translate(-50%, -50%)'
-                            } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { iconName: "ic_video_play_circle", fillType: "fill", colorKey: "ui_cpnt_icon_sys_white", size: 48 }) }))), (0, jsx_runtime_1.jsxs)(S_Video, __assign({ muted: true, playsInline: true, controls: !isEditMode, isEditMode: isEditMode, ref: videoRef, poster: CB_CONTENT_PROP_VIDEO_SPEC_THUMB, onLoadedMetadata: onLoadedMetadata, onPlay: onPlay }, { children: [(0, jsx_runtime_1.jsx)("source", { src: getVideoSrc(), type: "video/mp4" }), "Your browser does not support the video tag."] }), CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR + CB_CONTENT_PROP_VIDEO_SPEC_THUMB)] })) }))] }));
+                            } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { iconName: "ic_video_play_circle", fillType: "fill", colorKey: "ui_cpnt_icon_sys_white", size: 48 }) }))), (0, jsx_runtime_1.jsxs)(S_Video, __assign({ muted: true, playsInline: true, controls: !isEditMode, isEditMode: isEditMode, ref: videoRef, poster: CB_CONTENT_PROP_VIDEO_SPEC_THUMB, onLoadedMetadata: onLoadedMetadata, onPlay: onPlay, onError: onVideoError, "data-src": CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR }, { children: [(0, jsx_runtime_1.jsx)("source", { src: videoURL }), "Your browser does not support the video tag."] }), videoURL + CB_CONTENT_PROP_VIDEO_SPEC_THUMB)] })) }))] }));
 }
 function getBGColorStyles(props, device) {
     var availableSpecCodes = [

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/helper.d.ts

@@ -0,0 +1,4 @@
+export declare function parseTargetUrl(url: string): {
+    encodedURL: string;
+    fallbackURL: string | null;
+};

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseTargetUrl = void 0;
+function parseTargetUrl(url) {
+    var _a = url.split('?'), encodedURL = _a[0], query = _a[1];
+    if (!query) {
+        return {
+            encodedURL: encodedURL,
+            fallbackURL: null
+        };
+    }
+    var params = new URLSearchParams(query);
+    var fallbackUrl = params.get('fallbackUrl');
+    if (!fallbackUrl) {
+        return {
+            encodedURL: encodedURL,
+            fallbackURL: null
+        };
+    }
+    return {
+        encodedURL: encodedURL,
+        fallbackURL: "http://".concat(fallbackUrl)
+    };
+}
+exports.parseTargetUrl = parseTargetUrl;

package/package.json

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

package/release-note.md

@@ -1,6 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.176]
+## [v2.2.177]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1307] [PDS-1308] 아이콘 수정 / 모바일 자동재생
+* [PDS-1307] 인코딩 수정에 따른 렌더 방식 변화