@multiplatform.one/components 6.6.0 → 7.0.0

package/dist/cjs/Video/PlayerChrome.cjs

@@ -0,0 +1,403 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var PlayerChrome_exports = {};
+__export(PlayerChrome_exports, {
+  PlayerChrome: () => PlayerChrome,
+  formatPlayerTime: () => formatPlayerTime
+});
+module.exports = __toCommonJS(PlayerChrome_exports);
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_tamagui = require("tamagui");
+var import_componentColors = require("../componentColors.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const CHROME_Z_INDEX = 10;
+function formatPlayerTime(seconds) {
+  if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
+  const total = Math.floor(seconds);
+  const h = Math.floor(total / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const s = total % 60;
+  const pad = n => String(n).padStart(2, "0");
+  return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${m}:${pad(s)}`;
+}
+function activateOnKey(e, action) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault?.();
+    action();
+  }
+}
+function ChromeButton({
+  label,
+  onPress,
+  size,
+  radius,
+  children
+}) {
+  const {
+    control,
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Video"
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    role: "button",
+    "aria-label": label,
+    tabIndex: 0,
+    width: size,
+    height: size,
+    minWidth: import_theme.MIN_PRESS_TARGET,
+    minHeight: import_theme.MIN_PRESS_TARGET,
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    ...{
+      color: "$color12"
+    },
+    borderRadius: radius,
+    hoverStyle: {
+      backgroundColor: "$color4"
+    },
+    pressStyle: {
+      opacity: 0.85
+    },
+    focusVisibleStyle: {
+      ...control.focusVisibleKnobProps
+    },
+    ...(knobProps.transition ? {
+      transition: knobProps.transition
+    } : {}),
+    onPress: e => {
+      e.stopPropagation?.();
+      onPress();
+    },
+    ...{
+      onKeyDown: e => {
+        if (e.key === "Enter" || e.key === " ") e.stopPropagation?.();
+        activateOnKey(e, onPress);
+      }
+    },
+    children
+  });
+}
+function SeekBar({
+  currentTime,
+  duration,
+  onSeek,
+  onSeekingChange,
+  radius
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const {
+    control,
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Video"
+  });
+  const [hot, setHot] = (0, import_react2.useState)(false);
+  const max = duration > 0 && Number.isFinite(duration) ? duration : 0;
+  const ratio = max > 0 ? Math.min(1, Math.max(0, currentTime / max)) : 0;
+  const seekAt = (0, import_react2.useCallback)((clientX, target) => {
+    if (max <= 0) return;
+    const rect = target.getBoundingClientRect();
+    if (rect.width <= 0) return;
+    onSeek(Math.min(1, Math.max(0, (clientX - rect.left) / rect.width)) * max);
+  }, [max, onSeek]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    flex: 1,
+    height: import_theme.MIN_PRESS_TARGET,
+    justifyContent: "center",
+    role: "slider",
+    "aria-label": t("Seek"),
+    "aria-valuemin": 0,
+    "aria-valuemax": Math.floor(max),
+    "aria-valuenow": Math.floor(Number.isFinite(currentTime) ? currentTime : 0),
+    tabIndex: 0,
+    cursor: "pointer",
+    direction: "ltr",
+    focusVisibleStyle: {
+      ...control.focusVisibleKnobProps
+    },
+    ...{
+      onHoverIn: () => setHot(true),
+      onHoverOut: () => setHot(false),
+      onPointerDown: e => {
+        e.stopPropagation?.();
+        e.preventDefault?.();
+        const target = e.currentTarget;
+        if (!target || e.clientX == null) return;
+        onSeekingChange(true);
+        seekAt(e.clientX, target);
+        const move = ev => seekAt(ev.clientX, target);
+        const up = () => {
+          window.removeEventListener("pointermove", move);
+          window.removeEventListener("pointerup", up);
+          onSeekingChange(false);
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+      },
+      onKeyDown: e => {
+        if (max <= 0) return;
+        const step = max < 15 ? 1 : 5;
+        if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+          e.preventDefault?.();
+          e.stopPropagation?.();
+          onSeek(Math.max(0, currentTime - step));
+        } else if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+          e.preventDefault?.();
+          e.stopPropagation?.();
+          onSeek(Math.min(max, currentTime + step));
+        } else if (e.key === "Home") {
+          e.preventDefault?.();
+          e.stopPropagation?.();
+          onSeek(0);
+        } else if (e.key === "End") {
+          e.preventDefault?.();
+          e.stopPropagation?.();
+          onSeek(max);
+        }
+      }
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      position: "relative",
+      width: "100%",
+      height: hot ? 6 : 4,
+      justifyContent: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        height: "100%",
+        width: "100%",
+        backgroundColor: "$color8",
+        borderRadius: radius,
+        overflow: "hidden",
+        ...(knobProps.transition ? {
+          transition: knobProps.transition
+        } : {}),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          height: "100%",
+          width: `${ratio * 100}%`,
+          backgroundColor: import_componentColors.componentColors.indicator.selected
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        position: "absolute",
+        top: "50%",
+        left: `${ratio * 100}%`,
+        width: hot ? 14 : 12,
+        height: hot ? 14 : 12,
+        marginTop: hot ? -7 : -6,
+        marginLeft: hot ? -7 : -6,
+        backgroundColor: "$color12",
+        borderRadius: radius,
+        pointerEvents: "none"
+      })]
+    })
+  });
+}
+function PlayerChrome({
+  playing,
+  currentTime,
+  duration,
+  muted,
+  fullscreen,
+  visible,
+  onTogglePlay,
+  onSeek,
+  onToggleMuted,
+  onToggleFullscreen,
+  onHoverChange,
+  onFocusChange,
+  onSeekingChange
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Video"
+  });
+  (0, import_theme.ensureKeyboardModalityTracking)();
+  (0, import_react2.useEffect)(() => {
+    (0, import_theme.ensureKeyboardModalityTracking)();
+  }, []);
+  const sizePx = (0, import_tamagui.getTokens)().size?.[knobProps.sizeToken]?.val ?? import_theme.MIN_PRESS_TARGET;
+  const target = Math.max(sizePx, import_theme.MIN_PRESS_TARGET);
+  const glyph = Math.max(16, Math.round(sizePx / 2));
+  const radius = knobProps.pointy ? 0 : 1e3;
+  const centerToken = knobProps.density === "compact" ? knobProps.sizeToken : "$6";
+  const centerPx = Math.max(target, (0, import_tamagui.getTokens)().size?.[centerToken]?.val ?? 64);
+  const centerGlyph = Math.round(centerPx * 0.45);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+    name: "dark",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      ...{
+        "data-testid": "video-chrome"
+      },
+      position: "absolute",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      zIndex: CHROME_Z_INDEX,
+      opacity: visible ? 1 : 0,
+      pointerEvents: visible ? "box-none" : "none",
+      justifyContent: "space-between",
+      ...{
+        onHoverIn: () => onHoverChange(true),
+        onHoverOut: () => onHoverChange(false),
+        onFocusCapture: () => onFocusChange(true),
+        onBlurCapture: e => {
+          const next = e.nativeEvent?.relatedTarget;
+          if (next && e.currentTarget?.contains?.(next)) return;
+          onFocusChange(false);
+        }
+      },
+      ...(knobProps.transition ? {
+        transition: knobProps.transition
+      } : {}),
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "none",
+        children: playing ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          pointerEvents: "auto",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChromeButton, {
+            label: t("Play"),
+            onPress: onTogglePlay,
+            size: centerPx,
+            radius,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+              width: centerPx,
+              height: centerPx,
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "$color3",
+              borderRadius: radius,
+              ...{
+                color: "$color12"
+              },
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlayIcon, {
+                size: centerGlyph,
+                color: "currentColor",
+                weight: "fill"
+              })
+            })
+          })
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        pointerEvents: "auto",
+        position: "relative",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          position: "absolute",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          backgroundColor: "$color1",
+          opacity: 0.72,
+          pointerEvents: "none"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          ...knobProps.panelPadding,
+          ...knobProps.gap,
+          alignItems: "center",
+          position: "relative",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ChromeButton, {
+            label: playing ? t("Pause") : t("Play"),
+            onPress: onTogglePlay,
+            size: target,
+            radius,
+            children: playing ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PauseIcon, {
+              size: glyph,
+              color: "currentColor",
+              weight: "fill"
+            }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlayIcon, {
+              size: glyph,
+              color: "currentColor",
+              weight: "fill"
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            ...knobProps.label,
+            color: "$color12",
+            minWidth: 36,
+            textAlign: "right",
+            ...{
+              style: {
+                fontVariantNumeric: "tabular-nums"
+              }
+            },
+            children: formatPlayerTime(currentTime)
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(SeekBar, {
+            currentTime,
+            duration,
+            onSeek,
+            onSeekingChange,
+            radius
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            ...knobProps.label,
+            color: "$color12",
+            minWidth: 36,
+            ...{
+              style: {
+                fontVariantNumeric: "tabular-nums"
+              }
+            },
+            children: formatPlayerTime(duration)
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChromeButton, {
+            label: muted ? t("Unmute") : t("Mute"),
+            onPress: onToggleMuted,
+            size: target,
+            radius,
+            children: muted ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.SpeakerSlashIcon, {
+              size: glyph,
+              color: "currentColor",
+              weight: "bold"
+            }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.SpeakerHighIcon, {
+              size: glyph,
+              color: "currentColor",
+              weight: "bold"
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChromeButton, {
+            label: fullscreen ? t("Exit fullscreen") : t("Enter fullscreen"),
+            onPress: onToggleFullscreen,
+            size: target,
+            radius,
+            children: fullscreen ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CornersInIcon, {
+              size: glyph,
+              color: "currentColor",
+              weight: "bold"
+            }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CornersOutIcon, {
+              size: glyph,
+              color: "currentColor",
+              weight: "bold"
+            })
+          })]
+        })]
+      })]
+    })
+  });
+}