pds-dev-kit-web 2.2.177 → 2.2.179

package/dist/src/sub/DynamicLayout/components/Section/components/VideoBGMedia.js

@@ -20,10 +20,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var helper_1 = require("../../../../DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/helper");
 var styled_components_1 = __importDefault(require("styled-components"));
 function VideoBGMedia(_a) {
     var src = _a.src, startTime = _a.startTime, endTime = _a.endTime, loop = _a.loop;
     var videoRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(function () {
+        return (0, helper_1.parseTargetUrl)(src).encodedURL;
+    }), videoURL = _b[0], setVideoURL = _b[1];
+    (0, react_1.useEffect)(function () {
+        setVideoURL((0, helper_1.parseTargetUrl)(src).encodedURL);
+    }, [src]);
     var onLoadedMetadata = function () {
         var video = videoRef.current;
         if (!video)
@@ -55,7 +62,15 @@ function VideoBGMedia(_a) {
             video.play();
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_Video, __assign({ ref: videoRef, onLoadedMetadata: onLoadedMetadata, onTimeUpdate: onTimeUpdate, onEnded: onEnded, autoPlay: true, muted: true, playsInline: true }, { children: (0, jsx_runtime_1.jsx)("source", { src: src, type: "video/mp4" }) }), src));
+    var onVideoError = function () {
+        var fallbackURL = (0, helper_1.parseTargetUrl)(src).fallbackURL;
+        var isFallbackURL = fallbackURL === videoURL;
+        if (fallbackURL && !isFallbackURL) {
+            setVideoURL(fallbackURL);
+            return;
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(S_Video, __assign({ "data-src": src, ref: videoRef, onLoadedMetadata: onLoadedMetadata, onTimeUpdate: onTimeUpdate, onEnded: onEnded, onError: onVideoError, autoPlay: true, muted: true, playsInline: true }, { children: (0, jsx_runtime_1.jsx)("source", { src: videoURL }) }), videoURL));
 }
 var S_Video = styled_components_1.default.video(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  left: 0;\n  object-fit: cover;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: -9999;\n"], ["\n  height: 100%;\n  left: 0;\n  object-fit: cover;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: -9999;\n"])));
 exports.default = VideoBGMedia;

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

@@ -23,6 +23,7 @@ export declare const MOCK_VIDEO_CB: {
                 CB_CONTENT_PROP_VIDEO_SPEC_THUMB: string;
                 CB_CONTENT_PROP_VIDEO_SPEC_TYPE: string;
                 CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE: string;
+                CB_CONTENT_PROP_VIDEO_SPEC_AUTOPLAY: boolean;
             };
             CB_CONTENT_PROP_VISIBILITY: {
                 CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: boolean;

package/dist/src/sub/DynamicLayout/mock_video_cb.js

@@ -18,14 +18,15 @@ exports.MOCK_VIDEO_CB = {
             },
             CB_CONTENT_PROP_VIDEO: {
                 CB_CONTENT_PROP_VIDEO_SPEC_CONNECTDATA: 'NONE',
-                CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME: 5,
+                CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME: 10,
                 CB_CONTENT_PROP_VIDEO_SPEC_MPLAY: true,
                 CB_CONTENT_PROP_VIDEO_SPEC_REPLAY: true,
-                CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR: 'http://publ-upload-local.s3.ap-northeast-2.amazonaws.com/dd7418e3-b4fb-4be4-86c0-f582c80d4986.mov',
-                CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME: 0,
+                CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
+                CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME: 5,
                 CB_CONTENT_PROP_VIDEO_SPEC_THUMB: '',
                 CB_CONTENT_PROP_VIDEO_SPEC_TYPE: 'FILE',
-                CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE: 'VALUE'
+                CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE: 'VALUE',
+                CB_CONTENT_PROP_VIDEO_SPEC_AUTOPLAY: true
             },
             CB_CONTENT_PROP_VISIBILITY: {
                 CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,

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

@@ -26,6 +26,7 @@ export declare const MOCK_SECTIONS: {
                     CB_CONTENT_PROP_VIDEO_SPEC_THUMB: string;
                     CB_CONTENT_PROP_VIDEO_SPEC_TYPE: string;
                     CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE: string;
+                    CB_CONTENT_PROP_VIDEO_SPEC_AUTOPLAY: boolean;
                 };
                 CB_CONTENT_PROP_VISIBILITY: {
                     CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: boolean;

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

@@ -53,7 +53,7 @@ function VideoPlayer(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    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 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, CB_CONTENT_PROP_VIDEO_SPEC_REPLAY = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_REPLAY, CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME;
     var shouldAutoplay = (CB_CONTENT_PROP_VIDEO_SPEC_AUTOPLAY && device === 'DESKTOP') ||
         (CB_CONTENT_PROP_VIDEO_SPEC_MAUTOPLAY && device === 'MOBILE');
     var videoRef = (0, react_1.useRef)(null);
@@ -115,6 +115,31 @@ function VideoPlayer(props) {
     (0, react_1.useEffect)(function () {
         setVideoURL((0, helper_1.parseTargetUrl)(CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR).encodedURL);
     }, [CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR]);
+    var onTimeUpdate = function () {
+        var video = videoRef.current;
+        if (!video) {
+            return;
+        }
+        var currentTimeFloor = Math.floor(video.currentTime);
+        if (typeof CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME === 'number' &&
+            currentTimeFloor === CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME) {
+            if (CB_CONTENT_PROP_VIDEO_SPEC_REPLAY) {
+                video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
+                return;
+            }
+            video.pause();
+            return;
+        }
+    };
+    var onEnded = function () {
+        var video = videoRef.current;
+        if (!video || !CB_CONTENT_PROP_VIDEO_SPEC_REPLAY) {
+            return;
+        }
+        video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
+        video.play();
+        return;
+    };
     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%',
@@ -125,7 +150,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, 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)] })) }))] }));
+                            } }, { 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, "data-src": CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR, poster: CB_CONTENT_PROP_VIDEO_SPEC_THUMB, onPlay: onPlay, onEnded: onEnded, onError: onVideoError, onTimeUpdate: onTimeUpdate, onLoadedMetadata: onLoadedMetadata }, { 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/types.d.ts

@@ -108,4 +108,6 @@ export type CB_CONTENT_PROP_VIDEO = {
     CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME: number;
     CB_CONTENT_PROP_VIDEO_SPEC_THUMB: string;
     CB_CONTENT_PROP_VIDEO_SPEC_TYPE: 'FILE' | 'URL';
+    CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME: number;
+    CB_CONTENT_PROP_VIDEO_SPEC_REPLAY: boolean;
 };

package/package.json

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

package/release-note.md

@@ -1,6 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.177]
+## [v2.2.179]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1307] 인코딩 수정에 따른 렌더 방식 변화
+* [PDS-1310] VIDEO: replay & endtime