@x-plat/design-system 0.5.3 → 0.5.5

package/dist/index.cjs

@@ -8974,6 +8974,8 @@ var TableCell = import_react34.default.memo((props) => {
     children,
     align = "center",
     isSticky = false,
+    width,
+    nowrap = false,
     onClick
   } = props;
   const { registerStickyCell, stickyCells } = useTableRowContext();
@@ -9017,9 +9019,13 @@ var TableCell = import_react34.default.memo((props) => {
         isSticky && "table-sticky",
         isLastSticky && stickyShadow && "right-shadow",
         onClick && "clickable",
-        enableHover && "cell-hover"
+        enableHover && "cell-hover",
+        nowrap && "nowrap"
       ),
-      style: isSticky ? { left } : void 0,
+      style: {
+        ...isSticky ? { left } : null,
+        ...width != null ? { width: typeof width === "number" ? `${width}px` : width } : null
+      },
       onClick,
       children
     }
@@ -9275,6 +9281,16 @@ var Tooltip_default = Tooltip;
 // src/components/Video/Video.tsx
 var import_react39 = __toESM(require("react"), 1);
 var import_jsx_runtime346 = require("react/jsx-runtime");
+var PipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("rect", { x: "12", y: "11", width: "7", height: "6", rx: "1", fill: "currentColor" })
+] });
+var formatTime = (sec) => {
+  if (!Number.isFinite(sec) || sec < 0) return "0:00";
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+};
 var Video = import_react39.default.forwardRef((props, ref) => {
   const {
     src,
@@ -9283,13 +9299,36 @@ var Video = import_react39.default.forwardRef((props, ref) => {
     muted,
     loop,
     playsInline,
+    showControls = true,
+    showCenterPlay = true,
+    playbackRates,
+    showCaptions = false,
+    showPip = false,
+    showDownload = false,
+    downloadFileName,
     onPlay,
     onPause,
+    onTimeUpdate,
+    onVolumeChange,
+    onLoadedMetadata,
+    onRateChange,
+    children,
     ...rest
   } = props;
+  const containerRef = import_react39.default.useRef(null);
   const videoRef = import_react39.default.useRef(null);
   const [isPlaying, setIsPlaying] = import_react39.default.useState(Boolean(autoPlay));
   const [isLoaded, setIsLoaded] = import_react39.default.useState(false);
+  const [currentTime, setCurrentTime] = import_react39.default.useState(0);
+  const [duration, setDuration] = import_react39.default.useState(0);
+  const [buffered, setBuffered] = import_react39.default.useState(0);
+  const [volume, setVolume] = import_react39.default.useState(1);
+  const [isMuted, setIsMuted] = import_react39.default.useState(Boolean(muted));
+  const [isFullscreen, setIsFullscreen] = import_react39.default.useState(false);
+  const [playbackRate, setPlaybackRate] = import_react39.default.useState(1);
+  const [rateMenuOpen, setRateMenuOpen] = import_react39.default.useState(false);
+  const [captionsOn, setCaptionsOn] = import_react39.default.useState(false);
+  const [isPip, setIsPip] = import_react39.default.useState(false);
   const setRefs = import_react39.default.useCallback(
     (el) => {
       videoRef.current = el;
@@ -9298,6 +9337,25 @@ var Video = import_react39.default.forwardRef((props, ref) => {
     },
     [ref]
   );
+  import_react39.default.useEffect(() => {
+    const onFsChange = () => {
+      setIsFullscreen(document.fullscreenElement === containerRef.current);
+    };
+    document.addEventListener("fullscreenchange", onFsChange);
+    return () => document.removeEventListener("fullscreenchange", onFsChange);
+  }, []);
+  import_react39.default.useEffect(() => {
+    const v = videoRef.current;
+    if (!v) return;
+    const onEnter = () => setIsPip(true);
+    const onLeave = () => setIsPip(false);
+    v.addEventListener("enterpictureinpicture", onEnter);
+    v.addEventListener("leavepictureinpicture", onLeave);
+    return () => {
+      v.removeEventListener("enterpictureinpicture", onEnter);
+      v.removeEventListener("leavepictureinpicture", onLeave);
+    };
+  }, []);
   const handlePlay = (e) => {
     setIsPlaying(true);
     onPlay?.(e);
@@ -9306,50 +9364,278 @@ var Video = import_react39.default.forwardRef((props, ref) => {
     setIsPlaying(false);
     onPause?.(e);
   };
-  const handleLoadedData = () => {
+  const handleLoadedMetadata = (e) => {
+    const v = e.currentTarget;
+    setDuration(v.duration);
     setIsLoaded(true);
+    onLoadedMetadata?.(e);
+  };
+  const handleTimeUpdate = (e) => {
+    const v = e.currentTarget;
+    setCurrentTime(v.currentTime);
+    if (v.buffered.length > 0) {
+      setBuffered(v.buffered.end(v.buffered.length - 1));
+    }
+    onTimeUpdate?.(e);
+  };
+  const handleVolumeChange = (e) => {
+    const v = e.currentTarget;
+    setVolume(v.volume);
+    setIsMuted(v.muted);
+    onVolumeChange?.(e);
+  };
+  const handleRateChange = (e) => {
+    setPlaybackRate(e.currentTarget.playbackRate);
+    onRateChange?.(e);
   };
   const togglePlay = () => {
-    if (!videoRef.current) return;
-    if (isPlaying) {
-      videoRef.current.pause();
+    const v = videoRef.current;
+    if (!v) return;
+    if (v.paused) v.play();
+    else v.pause();
+  };
+  const toggleMute = () => {
+    const v = videoRef.current;
+    if (!v) return;
+    v.muted = !v.muted;
+  };
+  const toggleFullscreen = () => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (document.fullscreenElement === el) {
+      document.exitFullscreen();
     } else {
-      videoRef.current.play();
+      el.requestFullscreen?.();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("div", { className: "lib-xplat-video custom-overlay", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
-      "video",
-      {
-        ref: setRefs,
-        src,
-        poster,
-        autoPlay,
-        muted,
-        loop,
-        playsInline: playsInline ?? true,
-        onPlay: handlePlay,
-        onPause: handlePause,
-        onLoadedData: handleLoadedData,
-        onClick: togglePlay,
-        ...rest
+  const togglePip = async () => {
+    const v = videoRef.current;
+    if (!v) return;
+    try {
+      if (document.pictureInPictureElement === v) {
+        await document.exitPictureInPicture?.();
+      } else {
+        await v.requestPictureInPicture?.();
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime346.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_runtime346.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("span", { className: "play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(PlayCircleIcon_default, {}) })
+    } catch {
+    }
+  };
+  const toggleCaptions = () => {
+    const v = videoRef.current;
+    if (!v) return;
+    const next = !captionsOn;
+    for (let i = 0; i < v.textTracks.length; i++) {
+      const t = v.textTracks[i];
+      if (t.kind === "captions" || t.kind === "subtitles") {
+        t.mode = next ? "showing" : "hidden";
       }
-    )
-  ] });
+    }
+    setCaptionsOn(next);
+  };
+  const selectRate = (rate) => {
+    const v = videoRef.current;
+    if (!v) return;
+    v.playbackRate = rate;
+    setRateMenuOpen(false);
+  };
+  const handleSeek = (e) => {
+    const v = videoRef.current;
+    if (!v) return;
+    const next = Number(e.target.value);
+    v.currentTime = next;
+    setCurrentTime(next);
+  };
+  const handleVolumeSlider = (e) => {
+    const v = videoRef.current;
+    if (!v) return;
+    const next = Number(e.target.value);
+    v.volume = next;
+    if (next > 0 && v.muted) v.muted = false;
+    if (next === 0) v.muted = true;
+  };
+  const progressPct = duration > 0 ? currentTime / duration * 100 : 0;
+  const bufferedPct = duration > 0 ? buffered / duration * 100 : 0;
+  const volumePct = (isMuted ? 0 : volume) * 100;
+  const VolumeGlyph = isMuted || volume === 0 ? VolumeXIcon_default : volume < 0.5 ? VolumeIcon_default : Volume2Icon_default;
+  const pipSupported = typeof document !== "undefined" && "pictureInPictureEnabled" in document && document.pictureInPictureEnabled;
+  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: clsx_default("lib-xplat-video", showControls && "has-controls"),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+          "video",
+          {
+            ref: setRefs,
+            src,
+            poster,
+            autoPlay,
+            muted,
+            loop,
+            playsInline: playsInline ?? true,
+            onPlay: handlePlay,
+            onPause: handlePause,
+            onLoadedMetadata: handleLoadedMetadata,
+            onTimeUpdate: handleTimeUpdate,
+            onVolumeChange: handleVolumeChange,
+            onRateChange: handleRateChange,
+            onClick: togglePlay,
+            ...rest,
+            children
+          }
+        ),
+        showCenterPlay && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+          "button",
+          {
+            type: "button",
+            className: clsx_default(
+              "center-play",
+              isPlaying && "is-playing",
+              !isLoaded && "is-loading"
+            ),
+            onClick: togglePlay,
+            "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
+            tabIndex: -1,
+            children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("span", { className: "center-play-icon", children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(PlayCircleIcon_default, {}) })
+          }
+        ),
+        showControls && /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("div", { className: "controls", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+            "input",
+            {
+              type: "range",
+              className: "seekbar",
+              min: 0,
+              max: duration || 0,
+              step: 0.1,
+              value: currentTime,
+              onChange: handleSeek,
+              "aria-label": "\uC7AC\uC0DD \uC704\uCE58",
+              style: {
+                ["--progress"]: `${progressPct}%`,
+                ["--buffered"]: `${bufferedPct}%`
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("div", { className: "controls-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "control-btn",
+                onClick: togglePlay,
+                "aria-label": isPlaying ? "\uC77C\uC2DC\uC815\uC9C0" : "\uC7AC\uC0DD",
+                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(PauseIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(PlayIcon_default, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("div", { className: "volume-group", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "control-btn",
+                  onClick: toggleMute,
+                  "aria-label": isMuted ? "\uC74C\uC18C\uAC70 \uD574\uC81C" : "\uC74C\uC18C\uAC70",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(VolumeGlyph, {})
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+                "input",
+                {
+                  type: "range",
+                  className: "volume-slider",
+                  min: 0,
+                  max: 1,
+                  step: 0.05,
+                  value: isMuted ? 0 : volume,
+                  onChange: handleVolumeSlider,
+                  "aria-label": "\uBCFC\uB968",
+                  style: { ["--volume"]: `${volumePct}%` }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("span", { className: "time", children: [
+              formatTime(currentTime),
+              " / ",
+              formatTime(duration)
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("div", { className: "controls-spacer" }),
+            playbackRates && playbackRates.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)("div", { className: clsx_default("rate-group", rateMenuOpen && "is-open"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  className: "control-btn rate-btn",
+                  onClick: () => setRateMenuOpen((o) => !o),
+                  "aria-label": "\uC7AC\uC0DD \uC18D\uB3C4",
+                  "aria-expanded": rateMenuOpen,
+                  children: [
+                    playbackRate,
+                    "x"
+                  ]
+                }
+              ),
+              rateMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("ul", { className: "rate-menu", role: "menu", children: playbackRates.map((r2) => /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  className: clsx_default("rate-item", r2 === playbackRate && "is-active"),
+                  onClick: () => selectRate(r2),
+                  children: [
+                    r2,
+                    "x"
+                  ]
+                }
+              ) }, r2)) })
+            ] }),
+            showCaptions && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+              "button",
+              {
+                type: "button",
+                className: clsx_default("control-btn", captionsOn && "is-active"),
+                onClick: toggleCaptions,
+                "aria-label": captionsOn ? "\uC790\uB9C9 \uB044\uAE30" : "\uC790\uB9C9 \uCF1C\uAE30",
+                "aria-pressed": captionsOn,
+                children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(TypeIcon_default, {})
+              }
+            ),
+            showPip && pipSupported && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+              "button",
+              {
+                type: "button",
+                className: clsx_default("control-btn", isPip && "is-active"),
+                onClick: togglePip,
+                "aria-label": isPip ? "PIP \uC885\uB8CC" : "PIP",
+                children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(PipIcon, {})
+              }
+            ),
+            showDownload && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+              "a",
+              {
+                className: "control-btn",
+                href: src,
+                download: downloadFileName ?? true,
+                "aria-label": "\uB2E4\uC6B4\uB85C\uB4DC",
+                children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(DownloadIcon_default, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "control-btn",
+                onClick: toggleFullscreen,
+                "aria-label": isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uC885\uB8CC" : "\uC804\uCCB4\uD654\uBA74",
+                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(MinimizeIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(MaximizeIcon_default, {})
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
 });
 Video.displayName = "Video";
 var Video_default = Video;