@m4l/gclick 0.16.0 → 0.17.0

package/components/VideoPlayer/subcomponents/VideoPlayerStage.js

@@ -1,50 +1,51 @@
 import { jsx as r } from "@emotion/react/jsx-runtime";
-import { useRef as v, useMemo as R } from "react";
-import { selectStreamType as C } from "@videojs/react";
-import { HlsVideo as g } from "@videojs/react/media/hls-video";
-import { HLS_CROSS_ORIGIN as L, HLS_PREFER_PLAYBACK as H } from "../constants.js";
-import { buildCredentialedHlsConfig as I } from "../hlsConfig.js";
-import { StreamPlayer as i } from "../player.factory.js";
-import { resolveIsLive as V } from "../utils.js";
-import { usePlayerControl as _ } from "../hooks/usePlayerControl.js";
-import { usePlayerEvents as h } from "../hooks/usePlayerEvents.js";
-import { VideoPlayerRootStyled as k } from "../slots/VideoPlayerSlots.js";
-import { GclickVideoSkin as E } from "./GclickVideoSkin.js";
-function Y({
-  src: m,
-  poster: s,
-  className: l,
+import { useRef as v, useMemo as C } from "react";
+import { selectStreamType as g } from "@videojs/react";
+import { HlsJsVideo as L } from "@videojs/react/media/hlsjs-video";
+import { HLS_CROSS_ORIGIN as H, HLS_PREFER_PLAYBACK as I } from "../constants.js";
+import { buildCredentialedHlsConfig as V } from "../hlsConfig.js";
+import { StreamPlayer as m } from "../player.factory.js";
+import { resolveIsLive as _ } from "../utils.js";
+import { usePlayerControl as h } from "../hooks/usePlayerControl.js";
+import { usePlayerEvents as E } from "../hooks/usePlayerEvents.js";
+import { VideoPlayerRootStyled as O } from "../slots/VideoPlayerSlots.js";
+import { GclickVideoSkin as k } from "./GclickVideoSkin.js";
+function N({
+  src: s,
+  poster: l,
+  variant: o,
+  className: n,
   controlRef: a,
-  onReady: n,
-  onPlay: f,
-  onPause: p,
-  onEnded: u,
-  onWaiting: d,
-  onError: c,
-  onDurationChange: y
+  onReady: f,
+  onPlay: p,
+  onPause: u,
+  onEnded: d,
+  onWaiting: c,
+  onError: y,
+  onDurationChange: S
 }) {
-  const e = i.usePlayer(), P = i.usePlayer(C), o = V(P?.streamType, e.state.duration), t = v(null), S = R(() => I(), []);
-  return _(a, e, t), h(e, {
-    onReady: n,
-    onPlay: f,
-    onPause: p,
-    onEnded: u,
-    onWaiting: d,
-    onError: c,
-    onDurationChange: y
+  const e = m.usePlayer(), P = m.usePlayer(g), t = _(P?.streamType, e.state.duration), i = v(null), R = C(() => V(I), []);
+  return h(a, e, i), E(e, {
+    onReady: f,
+    onPlay: p,
+    onPause: u,
+    onEnded: d,
+    onWaiting: c,
+    onError: y,
+    onDurationChange: S
   }), /* @__PURE__ */ r(
-    k,
+    O,
     {
-      className: l,
-      "data-stream-type": o ? "live" : "vod",
-      children: /* @__PURE__ */ r(E, { poster: s, isLive: o, children: /* @__PURE__ */ r(
-        g,
+      ownerState: { variant: o },
+      className: n,
+      "data-stream-type": t ? "live" : "vod",
+      children: /* @__PURE__ */ r(k, { poster: l, isLive: t, variant: o, children: /* @__PURE__ */ r(
+        L,
         {
-          ref: t,
-          src: m,
-          preferPlayback: H,
-          crossOrigin: L,
-          config: S,
+          ref: i,
+          src: s,
+          crossOrigin: H,
+          config: R,
           autoPlay: !0,
           muted: !0,
           playsInline: !0
@@ -54,5 +55,5 @@ function Y({
   );
 }
 export {
-  Y as VideoPlayerStage
+  N as VideoPlayerStage
 };

package/components/VideoPlayer/subcomponents/skin/VideoControlBar.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+/** The full control bar for the current stream type. */
+export declare function VideoControlBar({ isLive }: {
+    isLive: boolean;
+}): ReactNode;
+//# sourceMappingURL=VideoControlBar.d.ts.map

package/components/VideoPlayer/subcomponents/skin/VideoControlBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoControlBar.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoPlayer/subcomponents/skin/VideoControlBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAuMvC,wDAAwD;AACxD,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAW1E"}

package/components/VideoPlayer/subcomponents/skin/VideoControlBar.js

@@ -0,0 +1,87 @@
+import { jsx as e, jsxs as i, Fragment as h } from "@emotion/react/jsx-runtime";
+import { Controls as f, Tooltip as b, PlayButton as v, LiveButton as B, SeekButton as d, TimeSlider as _, Slider as r, Time as l, AirPlayButton as y, CastButton as P, PiPButton as I, FullscreenButton as g, Popover as m, VolumeSlider as k, MuteButton as T } from "@videojs/react";
+import { RestartIcon as V, PlayIcon as x, PauseIcon as E, AirPlayEnterIcon as S, AirPlayExitIcon as C, PipEnterIcon as F, PipExitIcon as R, FullscreenEnterIcon as A, FullscreenExitIcon as M, VolumeOffIcon as w, VolumeLowIcon as j, VolumeHighIcon as H } from "@videojs/react/icons";
+import { cx as N, TooltipButton as o, SkinButton as n, SkipButtonContent as u, SEEK_TIME as p } from "./primitives.js";
+import { useSkinClasses as c } from "./skinVariant.js";
+import { VideoSettingsMenu as O } from "./VideoSettingsMenu.js";
+function D() {
+  const { surface: a } = c(), t = /* @__PURE__ */ i(T, { className: "media-button--mute", render: /* @__PURE__ */ e(n, {}), children: [
+    /* @__PURE__ */ e(w, { className: "media-icon media-icon--volume-off" }),
+    /* @__PURE__ */ e(j, { className: "media-icon media-icon--volume-low" }),
+    /* @__PURE__ */ e(H, { className: "media-icon media-icon--volume-high" })
+  ] });
+  return /* @__PURE__ */ i(m.Root, { openOnHover: !0, delay: 200, closeDelay: 100, side: "top", children: [
+    /* @__PURE__ */ e(m.Trigger, { render: t }),
+    /* @__PURE__ */ e(m.Popup, { className: N(a, "media-popover media-popover--volume"), children: /* @__PURE__ */ i(k.Root, { className: "media-slider", orientation: "vertical", thumbAlignment: "edge", children: [
+      /* @__PURE__ */ e(r.Track, { className: "media-slider__track", children: /* @__PURE__ */ e(r.Fill, { className: "media-slider__fill" }) }),
+      /* @__PURE__ */ e(r.Thumb, { className: "media-slider__thumb media-slider__thumb--persistent" })
+    ] }) })
+  ] });
+}
+function K({ isLive: a }) {
+  return /* @__PURE__ */ i("div", { className: "media-button-group", children: [
+    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ i(v, { className: "media-button--play", render: /* @__PURE__ */ e(n, {}), children: [
+      /* @__PURE__ */ e(V, { className: "media-icon media-icon--restart" }),
+      /* @__PURE__ */ e(x, { className: "media-icon media-icon--play" }),
+      /* @__PURE__ */ e(E, { className: "media-icon media-icon--pause" })
+    ] }) }),
+    a ? /* @__PURE__ */ e(B, { className: "media-button media-button--subtle media-button--live" }) : /* @__PURE__ */ i(h, { children: [
+      /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(d, { seconds: -p, className: "media-button--seek", render: /* @__PURE__ */ e(n, {}), children: /* @__PURE__ */ e(u, { direction: "back" }) }) }),
+      /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(d, { seconds: p, className: "media-button--seek", render: /* @__PURE__ */ e(n, {}), children: /* @__PURE__ */ e(u, { direction: "forward" }) }) })
+    ] })
+  ] });
+}
+function q({ isLive: a }) {
+  const { groupedTime: t } = c();
+  if (a)
+    return /* @__PURE__ */ e("div", { className: "media-time-controls", "aria-hidden": "true" });
+  const s = /* @__PURE__ */ i(_.Root, { className: "media-slider", children: [
+    /* @__PURE__ */ i(r.Track, { className: "media-slider__track", children: [
+      /* @__PURE__ */ e(r.Fill, { className: "media-slider__fill" }),
+      /* @__PURE__ */ e(r.Buffer, { className: "media-slider__buffer" })
+    ] }),
+    /* @__PURE__ */ e(r.Thumb, { className: "media-slider__thumb" })
+  ] });
+  return t ? /* @__PURE__ */ i("div", { className: "media-time-controls", children: [
+    s,
+    /* @__PURE__ */ i("div", { className: "media-time-group", children: [
+      /* @__PURE__ */ e(l.Value, { type: "current", className: "media-time media-time--current" }),
+      /* @__PURE__ */ e("span", { className: "media-time-separator", children: "/" }),
+      /* @__PURE__ */ e(l.Value, { type: "duration", className: "media-time media-time--duration" })
+    ] })
+  ] }) : /* @__PURE__ */ i("div", { className: "media-time-controls", children: [
+    /* @__PURE__ */ e(l.Value, { type: "current", className: "media-time" }),
+    s,
+    /* @__PURE__ */ e(l.Value, { type: "duration", className: "media-time" })
+  ] });
+}
+function z({ isLive: a }) {
+  return /* @__PURE__ */ i("div", { className: "media-button-group", children: [
+    /* @__PURE__ */ e(O, { isLive: a }),
+    /* @__PURE__ */ e(D, {}),
+    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ i(y, { className: "media-button--airplay", render: /* @__PURE__ */ e(n, {}), children: [
+      /* @__PURE__ */ e(S, { className: "media-icon media-icon--airplay-enter" }),
+      /* @__PURE__ */ e(C, { className: "media-icon media-icon--airplay-exit" })
+    ] }) }),
+    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(P, { className: "media-button--cast", render: /* @__PURE__ */ e(n, {}) }) }),
+    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ i(I, { className: "media-button--pip", render: /* @__PURE__ */ e(n, {}), children: [
+      /* @__PURE__ */ e(F, { className: "media-icon media-icon--pip-enter" }),
+      /* @__PURE__ */ e(R, { className: "media-icon media-icon--pip-exit" })
+    ] }) }),
+    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ i(g, { className: "media-button--fullscreen", render: /* @__PURE__ */ e(n, {}), children: [
+      /* @__PURE__ */ e(A, { className: "media-icon media-icon--fullscreen-enter" }),
+      /* @__PURE__ */ e(M, { className: "media-icon media-icon--fullscreen-exit" })
+    ] }) })
+  ] });
+}
+function X({ isLive: a }) {
+  const { surface: t } = c();
+  return /* @__PURE__ */ e(f.Root, { className: N(t, "media-controls"), children: /* @__PURE__ */ i(b.Provider, { children: [
+    /* @__PURE__ */ e(K, { isLive: a }),
+    /* @__PURE__ */ e(q, { isLive: a }),
+    /* @__PURE__ */ e(z, { isLive: a })
+  ] }) });
+}
+export {
+  X as VideoControlBar
+};

package/components/VideoPlayer/subcomponents/skin/VideoErrorDialog.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+/**
+ * Playback error dialog, styled entirely by the official skin.
+ *
+ * Extracted from the skin root because it is an overlay with its own lifecycle
+ * and has nothing to do with the control bar it used to sit next to.
+ */
+export declare function VideoErrorDialog(): ReactNode;
+//# sourceMappingURL=VideoErrorDialog.d.ts.map

package/components/VideoPlayer/subcomponents/skin/VideoErrorDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoErrorDialog.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoPlayer/subcomponents/skin/VideoErrorDialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC;;;;;GAKG;AACH,wBAAgB,gBAAgB,IAAI,SAAS,CAmB5C"}

package/components/VideoPlayer/subcomponents/skin/VideoErrorDialog.js

@@ -0,0 +1,17 @@
+import { jsx as r, jsxs as i } from "@emotion/react/jsx-runtime";
+import { ErrorDialog as o, AlertDialog as e } from "@videojs/react";
+import { cx as s } from "./primitives.js";
+import { useSkinClasses as m } from "./skinVariant.js";
+function d() {
+  const { surface: a } = m();
+  return /* @__PURE__ */ r(o.Root, { children: /* @__PURE__ */ r(e.Popup, { className: "media-error", children: /* @__PURE__ */ i("div", { className: s("media-error__dialog", a), children: [
+    /* @__PURE__ */ i("div", { className: "media-error__content", children: [
+      /* @__PURE__ */ r(e.Title, { className: "media-error__title", children: "Something went wrong." }),
+      /* @__PURE__ */ r(o.Description, { className: "media-error__description" })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "media-error__actions", children: /* @__PURE__ */ r(e.Close, { className: "media-button media-button--primary", children: "OK" }) })
+  ] }) }) });
+}
+export {
+  d as VideoErrorDialog
+};

package/components/VideoPlayer/subcomponents/skin/VideoInputBindings.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+/**
+ * Keyboard and pointer bindings for the player.
+ *
+ * These are declarative configuration rather than chrome, so they live apart
+ * from the control bar. Since beta.25 the vendor's buttons advertise these same
+ * shortcuts through `Tooltip.Shortcut`, so the bindings are now discoverable
+ * instead of hidden — keep the two in sync when adding one.
+ */
+export declare function VideoInputBindings(): ReactNode;
+//# sourceMappingURL=VideoInputBindings.d.ts.map

package/components/VideoPlayer/subcomponents/skin/VideoInputBindings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoInputBindings.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoPlayer/subcomponents/skin/VideoInputBindings.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,IAAI,SAAS,CAe9C"}

package/components/VideoPlayer/subcomponents/skin/VideoInputBindings.js

@@ -0,0 +1,19 @@
+import { jsxs as n, Fragment as r, jsx as e } from "@emotion/react/jsx-runtime";
+import { Hotkey as t, Gesture as o } from "@videojs/react";
+function c() {
+  return /* @__PURE__ */ n(r, { children: [
+    /* @__PURE__ */ e(t, { keys: "Space", action: "togglePaused" }),
+    /* @__PURE__ */ e(t, { keys: "k", action: "togglePaused" }),
+    /* @__PURE__ */ e(t, { keys: "m", action: "toggleMuted" }),
+    /* @__PURE__ */ e(t, { keys: "f", action: "toggleFullscreen" }),
+    /* @__PURE__ */ e(t, { keys: "i", action: "togglePictureInPicture" }),
+    /* @__PURE__ */ e(t, { keys: "ArrowUp", action: "volumeStep", value: 0.05 }),
+    /* @__PURE__ */ e(t, { keys: "ArrowDown", action: "volumeStep", value: -0.05 }),
+    /* @__PURE__ */ e(o, { type: "tap", action: "togglePaused", pointer: "mouse", region: "center" }),
+    /* @__PURE__ */ e(o, { type: "tap", action: "toggleControls", pointer: "touch" }),
+    /* @__PURE__ */ e(o, { type: "doubletap", action: "toggleFullscreen", region: "center" })
+  ] });
+}
+export {
+  c as VideoInputBindings
+};

package/components/VideoPlayer/subcomponents/skin/VideoSettingsMenu.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+/**
+ * Renders the settings button and its menu, or nothing when the current stream
+ * exposes neither quality levels nor playback rates.
+ */
+export declare function VideoSettingsMenu({ isLive }: {
+    isLive: boolean;
+}): ReactNode;
+//# sourceMappingURL=VideoSettingsMenu.d.ts.map

package/components/VideoPlayer/subcomponents/skin/VideoSettingsMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoSettingsMenu.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoPlayer/subcomponents/skin/VideoSettingsMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBvC;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAuD5E"}

package/components/VideoPlayer/subcomponents/skin/VideoSettingsMenu.js

@@ -0,0 +1,48 @@
+import { jsxs as s, jsx as a } from "@emotion/react/jsx-runtime";
+import { useQualityOptions as u, usePlaybackRateOptions as m, Menu as i } from "@videojs/react";
+import { GearIcon as p, QualityIcon as d, SpeedIcon as y } from "@videojs/react/icons";
+import { SkinButton as b, cx as g, MENU_PANEL as v, MENU_GROUP as N, SettingsSubmenu as o } from "./primitives.js";
+import { useSkinClasses as h } from "./skinVariant.js";
+function Q({ isLive: c }) {
+  const { surface: r } = h(), e = u(), t = m(), n = e?.state.availability === "available", l = !c && t?.state.availability === "available";
+  return !n && !l ? null : /* @__PURE__ */ s(i.Root, { side: "top", align: "center", children: [
+    /* @__PURE__ */ a(
+      i.Trigger,
+      {
+        "aria-label": "Settings",
+        className: "media-button--settings",
+        render: /* @__PURE__ */ a(b, {}),
+        children: /* @__PURE__ */ a(p, { className: "media-icon media-icon--settings" })
+      }
+    ),
+    /* @__PURE__ */ a(i.Content, { className: g(r, "media-popover media-menu media-menu--settings"), children: /* @__PURE__ */ a(i.View, { className: v, children: /* @__PURE__ */ s("div", { className: N, children: [
+      n ? /* @__PURE__ */ a(
+        o,
+        {
+          type: "quality",
+          title: "Quality",
+          icon: /* @__PURE__ */ a(d, { className: "media-icon" }),
+          ariaLabel: "Quality",
+          options: e.options,
+          value: e.value,
+          onValueChange: e.setValue
+        }
+      ) : null,
+      l ? /* @__PURE__ */ a(
+        o,
+        {
+          type: "playback-rate",
+          title: "Speed",
+          icon: /* @__PURE__ */ a(y, { className: "media-icon" }),
+          ariaLabel: "Playback rate",
+          options: t.options,
+          value: t.value,
+          onValueChange: t.setValue
+        }
+      ) : null
+    ] }) }) })
+  ] });
+}
+export {
+  Q as VideoSettingsMenu
+};

package/components/VideoPlayer/subcomponents/skin/primitives.d.ts

@@ -0,0 +1,81 @@
+import { ReactElement, ReactNode } from 'react';
+/** Class strings the vendor stylesheet keys off, named once instead of inline. */
+export declare const ICON_BUTTON = "media-button media-button--subtle media-button--icon";
+export declare const MENU_ITEM = "media-menu__item";
+export declare const MENU_GROUP = "media-menu__group";
+export declare const MENU_PANEL = "media-menu__panel";
+/** Join the truthy class fragments (avoids depending on the lib's internal `cn`). */
+export declare function cx(...parts: Array<string | false | undefined>): string;
+/** Bare icon button styled by the official skin (`media-button--icon`). */
+export declare const SkinButton: import('react').ForwardRefExoticComponent<{
+    className?: string;
+} & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * A control wrapped in the skin's tooltip.
+ *
+ * Every button in the bar needs the same `Tooltip.Root` / `Trigger` / `Popup`
+ * trio; inlining it repeated the block once per control, which is how the bar
+ * ended up with six identical copies before this refactor.
+ *
+ * `Tooltip.Label` and `Tooltip.Shortcut` take no props on purpose: they read the
+ * linked trigger's tooltip context, which the vendor's own buttons populate with
+ * their label AND their keyboard shortcut. So routing every control through here
+ * surfaces the hotkeys the player already binds — until beta.25 they worked but
+ * were advertised nowhere.
+ */
+export declare function TooltipButton({ children }: {
+    children: ReactElement;
+}): ReactNode;
+/** Chevron used by submenu triggers and the "back" row of a submenu panel. */
+export declare function MenuChevron({ flipped }: {
+    flipped?: boolean;
+}): ReactNode;
+/** One selectable option, the shape every v10 `use*Options` hook returns. */
+export interface SkinMenuOption {
+    value: string;
+    label: string;
+    disabled: boolean;
+    /** Quality only: the rendition tier, rendered as a superscript. */
+    tier?: string | undefined;
+    /** Quality only: a short badge such as `HD`. */
+    badge?: string | undefined;
+}
+/**
+ * Radio list for a settings submenu.
+ *
+ * All four v10 option hooks (`usePlaybackRateOptions`, `useQualityOptions`,
+ * `useAudioTrackOptions`, `useCaptionsOptions`) expose the very same
+ * `{ value, options, setValue }` contract, so one component renders any of them.
+ * We currently mount quality and playback rate; wiring another is passing a
+ * different hook's result here.
+ */
+export declare function MenuRadioOptions({ ariaLabel, options, value, onValueChange, }: {
+    ariaLabel: string;
+    options: SkinMenuOption[];
+    value: string;
+    onValueChange: (next: string) => void;
+}): ReactNode;
+/**
+ * A settings submenu: trigger row showing the current value, then its panel.
+ */
+export declare function SettingsSubmenu({ type, title, icon, ariaLabel, options, value, onValueChange, }: {
+    type: 'playback-rate' | 'quality' | 'audio-track' | 'captions';
+    title: string;
+    icon: ReactNode;
+    ariaLabel: string;
+    options: SkinMenuOption[];
+    value: string;
+    onValueChange: (next: string) => void;
+}): ReactNode;
+/** Seconds the skip-forward / skip-back buttons jump (VOD only). */
+export declare const SEEK_TIME = 10;
+/**
+ * Skip button for either direction.
+ *
+ * Back and forward differ only by the sign of the jump and a mirrored icon, so
+ * both are derived from `direction` rather than written twice.
+ */
+export declare function SkipButtonContent({ direction }: {
+    direction: 'back' | 'forward';
+}): ReactNode;
+//# sourceMappingURL=primitives.d.ts.map

package/components/VideoPlayer/subcomponents/skin/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoPlayer/subcomponents/skin/primitives.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBtE,kFAAkF;AAClF,eAAO,MAAM,WAAW,yDAAyD,CAAC;AAClF,eAAO,MAAM,SAAS,qBAAqB,CAAC;AAC5C,eAAO,MAAM,UAAU,sBAAsB,CAAC;AAC9C,eAAO,MAAM,UAAU,sBAAsB,CAAC;AAE9C,qFAAqF;AACrF,wBAAgB,EAAE,CAAC,GAAG,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,GAAG,SAAS,CAAC,GAAG,MAAM,CAEtE;AAED,2EAA2E;AAC3E,eAAO,MAAM,UAAU;gBAA+C,MAAM;qDAI3E,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,YAAY,CAAA;CAAE,GAAG,SAAS,CAWjF;AAED,8EAA8E;AAC9E,wBAAgB,WAAW,CAAC,EAAE,OAAe,EAAE,EAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAMjF;AAED,6EAA6E;AAC7E,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,OAAO,EACP,KAAK,EACL,aAAa,GACd,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,GAAG,SAAS,CA+BZ;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,SAAS,EACT,OAAO,EACP,KAAK,EACL,aAAa,GACd,EAAE;IACD,IAAI,EAAE,eAAe,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,GAAG,SAAS,CAkCZ;AAED,oEAAoE;AACpE,eAAO,MAAM,SAAS,KAAK,CAAC;AAE5B;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,GAAG,SAAS,CAS7F"}

package/components/VideoPlayer/subcomponents/skin/primitives.js

@@ -0,0 +1,142 @@
+import { jsxs as i, jsx as e } from "@emotion/react/jsx-runtime";
+import { forwardRef as N } from "react";
+import { Tooltip as s, Menu as c } from "@videojs/react";
+import { SeekIcon as h, ChevronIcon as b, CheckIcon as f } from "@videojs/react/icons";
+import { useSkinClasses as k } from "./skinVariant.js";
+const I = "media-button media-button--subtle media-button--icon", d = "media-menu__item", S = "media-menu__group", g = "media-menu__panel";
+function o(...a) {
+  return a.filter(Boolean).join(" ");
+}
+const U = N(
+  function({ className: t, ...m }, r) {
+    return /* @__PURE__ */ e("button", { ref: r, type: "button", className: o(I, t), ...m });
+  }
+);
+function x({ children: a }) {
+  const { surface: t } = k();
+  return /* @__PURE__ */ i(s.Root, { side: "top", children: [
+    /* @__PURE__ */ e(s.Trigger, { render: a }),
+    /* @__PURE__ */ i(s.Popup, { className: o(t, "media-tooltip"), children: [
+      /* @__PURE__ */ e(s.Label, {}),
+      /* @__PURE__ */ e(s.Shortcut, { className: "media-tooltip__kbd" })
+    ] })
+  ] });
+}
+function l({ flipped: a = !1 }) {
+  return /* @__PURE__ */ e(
+    b,
+    {
+      className: o("media-icon media-menu__chevron", a && "media-icon--flipped")
+    }
+  );
+}
+function M({
+  ariaLabel: a,
+  options: t,
+  value: m,
+  onValueChange: r
+}) {
+  return /* @__PURE__ */ e(
+    c.RadioGroup,
+    {
+      className: S,
+      value: m,
+      onValueChange: r,
+      "aria-label": a,
+      children: t.map((n) => /* @__PURE__ */ i(
+        c.RadioItem,
+        {
+          className: d,
+          value: n.value,
+          disabled: n.disabled,
+          children: [
+            /* @__PURE__ */ i("span", { children: [
+              n.label,
+              n.tier ? /* @__PURE__ */ e("sup", { className: "media-menu__tier", children: n.tier }) : null
+            ] }),
+            n.badge ? /* @__PURE__ */ e("span", { className: "media-badge", children: n.badge }) : null,
+            /* @__PURE__ */ e(
+              c.ItemIndicator,
+              {
+                checked: n.value === m,
+                forceMount: !0,
+                className: "media-menu__indicator",
+                children: /* @__PURE__ */ e(f, { className: "media-icon" })
+              }
+            )
+          ]
+        },
+        n.value
+      ))
+    }
+  );
+}
+function O({
+  type: a,
+  title: t,
+  icon: m,
+  ariaLabel: r,
+  options: n,
+  value: u,
+  onValueChange: _
+}) {
+  return /* @__PURE__ */ i(c.Root, { children: [
+    /* @__PURE__ */ e(
+      c.Trigger,
+      {
+        type: a,
+        className: o(d, "media-menu__item--submenu"),
+        render: (p) => /* @__PURE__ */ i("div", { ...p, children: [
+          m,
+          /* @__PURE__ */ e("span", { children: t }),
+          /* @__PURE__ */ i("span", { className: "media-menu__hint", children: [
+            /* @__PURE__ */ e(c.ItemValue, { className: "media-menu__hint-label" }),
+            /* @__PURE__ */ e(l, {})
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ i(c.Content, { className: g, children: [
+      /* @__PURE__ */ i(c.Back, { className: "media-menu__back", children: [
+        /* @__PURE__ */ e(l, { flipped: !0 }),
+        t
+      ] }),
+      /* @__PURE__ */ e(c.Separator, { className: "media-menu__separator" }),
+      /* @__PURE__ */ e(
+        M,
+        {
+          ariaLabel: r,
+          options: n,
+          value: u,
+          onValueChange: _
+        }
+      )
+    ] })
+  ] });
+}
+const E = 10;
+function j({ direction: a }) {
+  return /* @__PURE__ */ i("span", { className: "media-icon__container", children: [
+    /* @__PURE__ */ e(
+      h,
+      {
+        className: o("media-icon media-icon--seek", a === "back" && "media-icon--flipped")
+      }
+    ),
+    /* @__PURE__ */ e("span", { className: "media-icon__label", children: E })
+  ] });
+}
+export {
+  I as ICON_BUTTON,
+  S as MENU_GROUP,
+  d as MENU_ITEM,
+  g as MENU_PANEL,
+  l as MenuChevron,
+  M as MenuRadioOptions,
+  E as SEEK_TIME,
+  O as SettingsSubmenu,
+  U as SkinButton,
+  j as SkipButtonContent,
+  x as TooltipButton,
+  o as cx
+};

package/components/VideoPlayer/subcomponents/skin/skinVariant.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { VIDEO_PLAYER_SKIN_CLASSES } from '../../constants';
+import { VideoPlayerVariant } from '../../types';
+/** Class names the vendor's stylesheet keys off for the active variant. */
+export type SkinClasses = (typeof VIDEO_PLAYER_SKIN_CLASSES)[VideoPlayerVariant];
+/** Makes the active variant's class names available to the whole skin subtree. */
+export declare function SkinVariantProvider({ variant, children, }: {
+    variant: VideoPlayerVariant;
+    children: ReactNode;
+}): ReactNode;
+/**
+ * Read the active variant's class names.
+ *
+ * Defaults to the full chrome, so a skin piece rendered outside the provider
+ * (a focused unit test, for instance) still behaves like the default skin
+ * instead of losing its classes.
+ */
+export declare function useSkinClasses(): SkinClasses;
+//# sourceMappingURL=skinVariant.d.ts.map

package/components/VideoPlayer/subcomponents/skin/skinVariant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skinVariant.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/gclick/src/components/VideoPlayer/subcomponents/skin/skinVariant.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAE,yBAAyB,EAAyB,MAAM,iBAAiB,CAAC;AACnF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAgBtD,2EAA2E;AAC3E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,yBAAyB,CAAC,CAAC,kBAAkB,CAAC,CAAC;AAMjF,kFAAkF;AAClF,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,kBAAkB,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,SAAS,CASZ;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,IAAI,WAAW,CAE5C"}

package/components/VideoPlayer/subcomponents/skin/skinVariant.js

@@ -0,0 +1,23 @@
+import { jsx as i } from "@emotion/react/jsx-runtime";
+import { useMemo as u, createContext as a, useContext as S } from "react";
+import { VIDEO_PLAYER_SKIN_CLASSES as t, VIDEO_PLAYER_VARIANTS as o } from "../../constants.js";
+const n = a(
+  t[o.default]
+);
+function l({
+  variant: e,
+  children: r
+}) {
+  const s = u(
+    () => t[e] ?? t[o.default],
+    [e]
+  );
+  return /* @__PURE__ */ i(n, { value: s, children: r });
+}
+function x() {
+  return S(n);
+}
+export {
+  l as SkinVariantProvider,
+  x as useSkinClasses
+};