pds-dev-kit-web-test 2.5.385 → 2.5.387

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

@@ -44,6 +44,7 @@ function VideoPlayer(props) {
     var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
         index
     ]);
+    var _d = (0, react_1.useState)(false), videoStarted = _d[0], setVideoStarted = _d[1];
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
     var isNoneEffectType = device === 'DESKTOP'
@@ -52,16 +53,26 @@ function VideoPlayer(props) {
     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 shouldAutoplay = 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 _d = (0, react_1.useState)(false), videoLoaded = _d[0], setVideoLoaded = _d[1];
+    var _e = (0, react_1.useState)(false), videoLoaded = _e[0], setVideoLoaded = _e[1];
     var onLoadedMetadata = function () {
         setVideoLoaded(true);
     };
+    var onPlay = function () {
+        var video = videoRef.current;
+        if (!video || isEditMode || videoStarted || shouldAutoplay) {
+            return;
+        }
+        if (typeof CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME === 'number') {
+            video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
+            setVideoStarted(true);
+        }
+    };
     (0, react_1.useEffect)(function () {
         var video = videoRef.current;
         if (!video || isEditMode || !videoLoaded || !shouldAutoplay) {
@@ -102,7 +113,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, controls: !isEditMode, isEditMode: isEditMode, ref: videoRef, poster: CB_CONTENT_PROP_VIDEO_SPEC_THUMB, onLoadedMetadata: onLoadedMetadata }, { 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 }, { 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)] })) }))] }));
 }
 function getBGColorStyles(props, device) {
     var availableSpecCodes = [
@@ -117,7 +128,7 @@ function getBGColorStyles(props, device) {
     ];
     return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'BGCOLOR', device: device });
 }
-var S_Video = styled_components_1.default.video(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  aspect-ratio: 16 / 9;\n  height: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  /* overflow: hidden; */\n  pointer-events: ", ";\n  width: 100%;\n"], ["\n  aspect-ratio: 16 / 9;\n  height: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  /* overflow: hidden; */\n  pointer-events: ", ";\n  width: 100%;\n"])), function (_a) {
+var S_Video = styled_components_1.default.video(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  aspect-ratio: 16 / 9;\n  height: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  pointer-events: ", ";\n  width: 100%;\n"], ["\n  aspect-ratio: 16 / 9;\n  height: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  pointer-events: ", ";\n  width: 100%;\n"])), function (_a) {
     var isEditMode = _a.isEditMode;
     return (isEditMode ? 'none' : 'auto');
 });

package/package.json

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

package/release-note.md

@@ -1,6 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.170]
+## [v2.2.174]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1304] basefontsize 수정
+* [PDS-1302] fix / video가 모바일에서 풀화면으로 됨