@x-plat/design-system 0.5.2 → 0.5.4

package/dist/components/Video/index.cjs

@@ -176,7 +176,6 @@ var Video = import_react.default.forwardRef((props, ref) => {
   const {
     src,
     poster,
-    controls = true,
     autoPlay,
     muted,
     loop,
@@ -215,49 +214,39 @@ var Video = import_react.default.forwardRef((props, ref) => {
       videoRef.current.play();
     }
   };
-  const showCustomOverlay = !controls;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-    "div",
-    {
-      className: clsx_default(
-        "lib-xplat-video",
-        showCustomOverlay && "custom-overlay"
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          "video",
-          {
-            ref: setRefs,
-            src,
-            poster,
-            controls,
-            autoPlay,
-            muted,
-            loop,
-            playsInline: playsInline ?? true,
-            onPlay: handlePlay,
-            onPause: handlePause,
-            onLoadedData: handleLoadedData,
-            ...rest
-          }
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "lib-xplat-video custom-overlay", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "video",
+      {
+        ref: setRefs,
+        src,
+        poster,
+        autoPlay,
+        muted,
+        loop,
+        playsInline: playsInline ?? true,
+        onPlay: handlePlay,
+        onPause: handlePause,
+        onLoadedData: handleLoadedData,
+        onClick: togglePlay,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "button",
+      {
+        type: "button",
+        className: clsx_default(
+          "play-overlay",
+          isPlaying && "is-playing",
+          !isLoaded && "is-loading"
         ),
-        showCustomOverlay && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          "button",
-          {
-            type: "button",
-            className: clsx_default(
-              "play-overlay",
-              isPlaying && "is-playing",
-              !isLoaded && "is-loading"
-            ),
-            onClick: togglePlay,
-            "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-            children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PlayCircleIcon_default, {}) })
-          }
-        )
-      ]
-    }
-  );
+        onClick: togglePlay,
+        "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
+        children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PlayCircleIcon_default, {}) })
+      }
+    )
+  ] });
 });
 Video.displayName = "Video";
 var Video_default = Video;

package/dist/components/Video/index.css

@@ -2,6 +2,7 @@
 .lib-xplat-video {
   position: relative;
   width: 100%;
+  height: 100%;
   border-radius: var(--spacing-radius-sm);
   overflow: hidden;
   background-color: var(--semantic-surface-neutral-strong);
@@ -62,10 +63,10 @@
   opacity: 0;
   pointer-events: none;
 }
-.lib-xplat-video.custom-overlay > .play-overlay.is-playing:hover {
-  opacity: 1;
-  pointer-events: auto;
-}
 .lib-xplat-video.custom-overlay > .play-overlay.is-loading .play-icon {
   opacity: 0.6;
 }
+.lib-xplat-video.custom-overlay:hover > .play-overlay.is-playing {
+  opacity: 1;
+  pointer-events: auto;
+}

package/dist/components/Video/index.d.cts

@@ -1,12 +1,8 @@
 import React from 'react';
 
-interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children" | "className"> {
-    /** 비디오 소스 URL */
+interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children" | "className" | "controls"> {
     src: string;
-    /** 재생 전 썸네일 이미지 URL */
     poster?: string;
-    /** 네이티브 컨트롤 표시 여부. false면 커스텀 재생/일시정지 오버레이만 표시 */
-    controls?: boolean;
 }
 declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
 

package/dist/components/Video/index.d.ts

@@ -1,12 +1,8 @@
 import React from 'react';
 
-interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children" | "className"> {
-    /** 비디오 소스 URL */
+interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children" | "className" | "controls"> {
     src: string;
-    /** 재생 전 썸네일 이미지 URL */
     poster?: string;
-    /** 네이티브 컨트롤 표시 여부. false면 커스텀 재생/일시정지 오버레이만 표시 */
-    controls?: boolean;
 }
 declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
 

package/dist/components/Video/index.js

@@ -140,7 +140,6 @@ var Video = React.forwardRef((props, ref) => {
   const {
     src,
     poster,
-    controls = true,
     autoPlay,
     muted,
     loop,
@@ -179,49 +178,39 @@ var Video = React.forwardRef((props, ref) => {
       videoRef.current.play();
     }
   };
-  const showCustomOverlay = !controls;
-  return /* @__PURE__ */ jsxs24(
-    "div",
-    {
-      className: clsx_default(
-        "lib-xplat-video",
-        showCustomOverlay && "custom-overlay"
-      ),
-      children: [
-        /* @__PURE__ */ jsx29(
-          "video",
-          {
-            ref: setRefs,
-            src,
-            poster,
-            controls,
-            autoPlay,
-            muted,
-            loop,
-            playsInline: playsInline ?? true,
-            onPlay: handlePlay,
-            onPause: handlePause,
-            onLoadedData: handleLoadedData,
-            ...rest
-          }
+  return /* @__PURE__ */ jsxs24("div", { className: "lib-xplat-video custom-overlay", children: [
+    /* @__PURE__ */ jsx29(
+      "video",
+      {
+        ref: setRefs,
+        src,
+        poster,
+        autoPlay,
+        muted,
+        loop,
+        playsInline: playsInline ?? true,
+        onPlay: handlePlay,
+        onPause: handlePause,
+        onLoadedData: handleLoadedData,
+        onClick: togglePlay,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx29(
+      "button",
+      {
+        type: "button",
+        className: clsx_default(
+          "play-overlay",
+          isPlaying && "is-playing",
+          !isLoaded && "is-loading"
         ),
-        showCustomOverlay && /* @__PURE__ */ jsx29(
-          "button",
-          {
-            type: "button",
-            className: clsx_default(
-              "play-overlay",
-              isPlaying && "is-playing",
-              !isLoaded && "is-loading"
-            ),
-            onClick: togglePlay,
-            "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
-            children: isPlaying ? /* @__PURE__ */ jsx29(PauseIcon_default, {}) : /* @__PURE__ */ jsx29("span", { className: "play-icon", children: /* @__PURE__ */ jsx29(PlayCircleIcon_default, {}) })
-          }
-        )
-      ]
-    }
-  );
+        onClick: togglePlay,
+        "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
+        children: isPlaying ? /* @__PURE__ */ jsx29(PauseIcon_default, {}) : /* @__PURE__ */ jsx29("span", { className: "play-icon", children: /* @__PURE__ */ jsx29(PlayCircleIcon_default, {}) })
+      }
+    )
+  ] });
 });
 Video.displayName = "Video";
 var Video_default = Video;