@x-plat/design-system 0.5.4 → 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;

package/dist/index.css

@@ -3681,6 +3681,20 @@
   min-width: 80px;
   padding: var(--spacing-space-2);
   vertical-align: middle;
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > td.nowrap,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > th.nowrap,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > td.nowrap,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > th.nowrap {
+  white-space: nowrap;
+  overflow-wrap: normal;
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > th {
   transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > td.clickable,
@@ -4064,11 +4078,9 @@
   max-height: 100%;
   object-fit: contain;
   vertical-align: middle;
-}
-.lib-xplat-video.custom-overlay > video {
   cursor: pointer;
 }
-.lib-xplat-video.custom-overlay > .play-overlay {
+.lib-xplat-video > .center-play {
   position: absolute;
   top: 0;
   left: 0;
@@ -4082,9 +4094,10 @@
   cursor: pointer;
   padding: 0;
   color: var(--semantic-icon-inverse);
-  transition: opacity 0.2s ease, background-color 0.2s ease;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
 }
-.lib-xplat-video.custom-overlay > .play-overlay::before {
+.lib-xplat-video > .center-play::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -4092,34 +4105,217 @@
   opacity: 0;
   transition: opacity 0.2s ease;
 }
-.lib-xplat-video.custom-overlay > .play-overlay:hover::before,
-.lib-xplat-video.custom-overlay > .play-overlay:focus-visible::before {
-  opacity: 1;
-}
-.lib-xplat-video.custom-overlay > .play-overlay:focus-visible {
-  outline: 2px solid var(--semantic-interaction-focus-ring);
-  outline-offset: 2px;
-}
-.lib-xplat-video.custom-overlay > .play-overlay > .play-icon {
+.lib-xplat-video > .center-play > .center-play-icon {
   position: relative;
   z-index: 1;
   display: flex;
-  align-items: center;
-  justify-content: center;
   font-size: 64px;
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
 }
-.lib-xplat-video.custom-overlay > .play-overlay.is-playing {
+.lib-xplat-video > .center-play.is-playing {
   opacity: 0;
-  pointer-events: none;
 }
-.lib-xplat-video.custom-overlay > .play-overlay.is-loading .play-icon {
+.lib-xplat-video > .center-play.is-loading .center-play-icon {
   opacity: 0.6;
 }
-.lib-xplat-video.custom-overlay:hover > .play-overlay.is-playing {
+.lib-xplat-video > .controls {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: var(--spacing-space-2) var(--spacing-space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-1);
+  background:
+    linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.7),
+      rgba(0, 0, 0, 0));
+  color: var(--semantic-icon-inverse);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+}
+.lib-xplat-video:hover > .controls,
+.lib-xplat-video:focus-within > .controls {
   opacity: 1;
   pointer-events: auto;
 }
+.lib-xplat-video .controls-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-space-2);
+}
+.lib-xplat-video .control-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--spacing-radius-sm);
+  transition: background-color 0.15s ease;
+}
+.lib-xplat-video .control-btn:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.lib-xplat-video .control-btn:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}
+.lib-xplat-video .controls-spacer {
+  margin-left: auto;
+}
+.lib-xplat-video .control-btn.is-active {
+  background-color: rgba(255, 255, 255, 0.25);
+}
+.lib-xplat-video .rate-group {
+  position: relative;
+}
+.lib-xplat-video .rate-group .rate-btn {
+  width: auto;
+  padding: 0 var(--spacing-space-2);
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.lib-xplat-video .rate-group .rate-menu {
+  position: absolute;
+  bottom: calc(100% + var(--spacing-space-1));
+  right: 0;
+  margin: 0;
+  padding: var(--spacing-space-1);
+  list-style: none;
+  background-color: rgba(0, 0, 0, 0.85);
+  border-radius: var(--spacing-radius-sm);
+  min-width: 64px;
+}
+.lib-xplat-video .rate-group .rate-menu .rate-item {
+  width: 100%;
+  padding: var(--spacing-space-1) var(--spacing-space-2);
+  border: none;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--spacing-radius-xs);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.lib-xplat-video .rate-group .rate-menu .rate-item:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.lib-xplat-video .rate-group .rate-menu .rate-item.is-active {
+  color: var(--semantic-surface-brand-default);
+  font-weight: 600;
+}
+.lib-xplat-video .time {
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.lib-xplat-video .volume-group {
+  display: flex;
+  align-items: center;
+}
+.lib-xplat-video .volume-group .volume-slider {
+  width: 0;
+  opacity: 0;
+  transition: width 0.2s ease, opacity 0.2s ease;
+}
+.lib-xplat-video .volume-group:hover .volume-slider,
+.lib-xplat-video .volume-group:focus-within .volume-slider {
+  width: 80px;
+  opacity: 1;
+  margin-left: var(--spacing-space-1);
+}
+.lib-xplat-video .seekbar,
+.lib-xplat-video .volume-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+}
+.lib-xplat-video .seekbar:focus,
+.lib-xplat-video .volume-slider:focus {
+  outline: none;
+}
+.lib-xplat-video .seekbar::-webkit-slider-thumb,
+.lib-xplat-video .volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  border: none;
+  cursor: pointer;
+}
+.lib-xplat-video .seekbar::-moz-range-thumb,
+.lib-xplat-video .volume-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  border: none;
+  cursor: pointer;
+}
+.lib-xplat-video .seekbar {
+  width: 100%;
+  height: 4px;
+}
+.lib-xplat-video .seekbar::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 2px;
+  background:
+    linear-gradient(
+      to right,
+      var(--semantic-surface-brand-default) 0%,
+      var(--semantic-surface-brand-default) var(--progress, 0%),
+      rgba(255, 255, 255, 0.4) var(--progress, 0%),
+      rgba(255, 255, 255, 0.4) var(--buffered, 0%),
+      rgba(255, 255, 255, 0.2) var(--buffered, 0%),
+      rgba(255, 255, 255, 0.2) 100%);
+}
+.lib-xplat-video .seekbar::-moz-range-track {
+  height: 4px;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.2);
+}
+.lib-xplat-video .seekbar::-moz-range-progress {
+  height: 4px;
+  border-radius: 2px;
+  background: var(--semantic-surface-brand-default);
+}
+.lib-xplat-video .volume-slider {
+  height: 4px;
+}
+.lib-xplat-video .volume-slider::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 2px;
+  background:
+    linear-gradient(
+      to right,
+      #fff 0%,
+      #fff var(--volume, 0%),
+      rgba(255, 255, 255, 0.3) var(--volume, 0%),
+      rgba(255, 255, 255, 0.3) 100%);
+}
+.lib-xplat-video .volume-slider::-moz-range-track {
+  height: 4px;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.3);
+}
+.lib-xplat-video .volume-slider::-moz-range-progress {
+  height: 4px;
+  border-radius: 2px;
+  background: #fff;
+}
 
 /* src/layout/Grid/FullGrid/fullgrid.scss */
 .lib-xplat-full-grid {