@m4l/gclick 0.24.1 → 0.25.0

package/components/VideoPlayer/subcomponents/GclickVideoSkin.js

@@ -1,42 +1,54 @@
 import { jsx as r, jsxs as s } from "@emotion/react/jsx-runtime";
-import { Container as t, Poster as d, BufferingIndicator as l } from "@videojs/react";
-import { SpinnerIcon as f } from "@videojs/react/icons";
-import { cx as p } from "./skin/primitives.js";
-import { SkinVariantProvider as u, useSkinClasses as k } from "./skin/skinVariant.js";
-import { VideoControlBar as v } from "./skin/VideoControlBar.js";
-import { VideoErrorDialog as N } from "./skin/VideoErrorDialog.js";
-import { VideoInputBindings as S } from "./skin/VideoInputBindings.js";
-function b({
+import { Container as d, Poster as f, BufferingIndicator as l } from "@videojs/react";
+import { SpinnerIcon as p } from "@videojs/react/icons";
+import { cx as u } from "./skin/primitives.js";
+import { SkinVariantProvider as V, useSkinClasses as k } from "./skin/skinVariant.js";
+import { VideoControlBar as I } from "./skin/VideoControlBar.js";
+import { VideoErrorDialog as S } from "./skin/VideoErrorDialog.js";
+import { VideoInputBindings as g } from "./skin/VideoInputBindings.js";
+import { VideoInputIndicators as h } from "./skin/VideoInputIndicators.js";
+function G({
   children: o,
-  className: e,
+  className: n,
   poster: i,
-  isLive: n,
-  variant: m
+  isLive: e,
+  variant: m,
+  optionalControls: t
 }) {
-  return /* @__PURE__ */ r(u, { variant: m, children: /* @__PURE__ */ r(V, { className: e, poster: i, isLive: n, children: o }) });
+  return /* @__PURE__ */ r(V, { variant: m, children: /* @__PURE__ */ r(
+    x,
+    {
+      className: n,
+      poster: i,
+      isLive: e,
+      optionalControls: t,
+      children: o
+    }
+  ) });
 }
-function V({
+function x({
   children: o,
-  className: e,
+  className: n,
   poster: i,
-  isLive: n
+  isLive: e,
+  optionalControls: m
 }) {
-  const { root: m, surface: a } = k();
-  return /* @__PURE__ */ s(t, { className: p(m, e), children: [
+  const { root: t, surface: c } = k();
+  return /* @__PURE__ */ s(d, { className: u(t, n), children: [
     o,
-    i ? /* @__PURE__ */ r(d, { src: i }) : null,
+    i ? /* @__PURE__ */ r(f, { src: i }) : null,
     /* @__PURE__ */ r(
       l,
       {
-        render: (c) => /* @__PURE__ */ r("div", { ...c, className: "media-buffering-indicator", children: /* @__PURE__ */ r("div", { className: a, children: /* @__PURE__ */ r(f, { className: "media-icon" }) }) })
+        render: (a) => /* @__PURE__ */ r("div", { ...a, className: "media-buffering-indicator", children: /* @__PURE__ */ r("div", { className: c, children: /* @__PURE__ */ r(p, { className: "media-icon" }) }) })
       }
     ),
-    /* @__PURE__ */ r(N, {}),
-    /* @__PURE__ */ r(v, { isLive: n }),
-    /* @__PURE__ */ r("div", { className: "media-overlay" }),
-    /* @__PURE__ */ r(S, {})
+    /* @__PURE__ */ r(S, {}),
+    /* @__PURE__ */ r(I, { isLive: e, optionalControls: m }),
+    /* @__PURE__ */ r(g, {}),
+    /* @__PURE__ */ r(h, {})
   ] });
 }
 export {
-  b as GclickVideoSkin
+  G as GclickVideoSkin
 };

package/components/VideoPlayer/subcomponents/VideoPlayerStage.d.ts

@@ -1,10 +1,12 @@
 import { Ref } from 'react';
-import { VideoPlayerControl, VideoPlayerError, VideoPlayerVariant } from '../types';
+import { VideoPlayerControl, VideoPlayerError, VideoPlayerOptionalControls, VideoPlayerVariant } from '../types';
 /** Props of the inner stage — the public props resolved + the forwarded ref. */
 export interface VideoPlayerStageProps {
     src: string;
     poster?: string;
     variant: VideoPlayerVariant;
+    suspended: boolean;
+    optionalControls?: VideoPlayerOptionalControls;
     className?: string;
     controlRef?: Ref<VideoPlayerControl>;
     onReady?: () => void;
@@ -16,12 +18,12 @@ export interface VideoPlayerStageProps {
     onDurationChange?: (duration: number, isLive: boolean) => void;
 }
 /**
- * Inner stage rendered inside `StreamPlayer.Provider`. It bridges the imperative
+ * Inner stage rendered inside `StreamPlayer.Player`. It bridges the imperative
  * handle + event callbacks (via `usePlayer`), then renders the composed v10 skin
  * ({@link GclickVideoSkin}) wrapping the credentialed `<HlsJsVideo>`. The skin owns
  * the chrome — controls, layout, poster and the fullscreen target — and swaps the
  * seek bar ↔ native live button by `isLive`; we only wrap it to size and flatten
  * the frame.
  */
-export declare function VideoPlayerStage({ src, poster, variant, className, controlRef, onReady, onPlay, onPause, onEnded, onWaiting, onError, onDurationChange, }: VideoPlayerStageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function VideoPlayerStage({ src, poster, variant, suspended, optionalControls, className, controlRef, onReady, onPlay, onPause, onEnded, onWaiting, onError, onDurationChange, }: VideoPlayerStageProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=VideoPlayerStage.d.ts.map

package/components/VideoPlayer/subcomponents/VideoPlayerStage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayerStage.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/VideoPlayer/subcomponents/VideoPlayerStage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAiBlD,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEzF,gFAAgF;AAChF,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,kBAAkB,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAChE;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,MAAM,EACN,OAAO,EACP,SAAS,EACT,UAAU,EACV,OAAO,EACP,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,EACP,gBAAgB,GACjB,EAAE,qBAAqB,oDA+CvB"}
+{"version":3,"file":"VideoPlayerStage.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/VideoPlayer/subcomponents/VideoPlayerStage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAmBlD,OAAO,KAAK,EACV,kBAAkB,EAClB,gBAAgB,EAChB,2BAA2B,EAC3B,kBAAkB,EACnB,MAAM,UAAU,CAAC;AAElB,gFAAgF;AAChF,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,kBAAkB,CAAC;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,2BAA2B,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAChE;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,MAAM,EACN,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,UAAU,EACV,OAAO,EACP,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,EACP,gBAAgB,GACjB,EAAE,qBAAqB,oDA0DvB"}

package/components/VideoPlayer/subcomponents/VideoPlayerStage.js

@@ -1,59 +1,74 @@
-import { jsx as r } from "@emotion/react/jsx-runtime";
-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,
+import { jsx as o } from "@emotion/react/jsx-runtime";
+import { useRef as k, useMemo as C } from "react";
+import { selectStreamType as H } from "@videojs/react";
+import { HlsJsVideo as V } from "@videojs/react/media/hlsjs-video";
+import { HLS_CROSS_ORIGIN as _, HLS_PREFER_PLAYBACK as b } from "../constants.js";
+import { buildCredentialedHlsSource as h } from "../hlsSource.js";
+import { StreamPlayer as s } from "../player.factory.js";
+import { resolveIsLive as E } from "../utils.js";
+import { useMediaReadiness as O } from "../hooks/useMediaReadiness.js";
+import { usePlaybackIntent as g } from "../hooks/usePlaybackIntent.js";
+import { usePlayerControl as x } from "../hooks/usePlayerControl.js";
+import { usePlayerEvents as A } from "../hooks/usePlayerEvents.js";
+import { VideoPlayerRootStyled as G } from "../slots/VideoPlayerSlots.js";
+import { GclickVideoSkin as M } from "./GclickVideoSkin.js";
+function W({
+  src: t,
+  poster: a,
+  variant: i,
+  suspended: l,
+  optionalControls: n,
+  className: u,
+  controlRef: p,
   onReady: f,
-  onPlay: p,
-  onPause: u,
-  onEnded: d,
-  onWaiting: c,
-  onError: y,
-  onDurationChange: S
+  onPlay: c,
+  onPause: d,
+  onEnded: y,
+  onWaiting: S,
+  onError: P,
+  onDurationChange: R
 }) {
-  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(
-    O,
+  const e = s.usePlayer(), v = s.usePlayer(H), m = E(v?.streamType, e.state.duration), r = k(null), I = C(() => h(t, b), [t]);
+  x(p, e, r), A(e, {
+    onPlay: c,
+    onPause: d,
+    onEnded: y,
+    onWaiting: S,
+    onError: P,
+    onDurationChange: R
+  });
+  const L = g(e, l);
+  return O(r, () => {
+    f?.(), L();
+  }), /* @__PURE__ */ o(
+    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,
+      ownerState: { variant: i },
+      className: u,
+      "data-stream-type": m ? "live" : "vod",
+      children: /* @__PURE__ */ o(
+        M,
         {
-          ref: i,
-          src: s,
-          crossOrigin: H,
-          config: R,
-          autoPlay: !0,
-          muted: !0,
-          playsInline: !0
+          poster: a,
+          isLive: m,
+          variant: i,
+          optionalControls: n,
+          children: /* @__PURE__ */ o(
+            V,
+            {
+              ref: r,
+              source: I,
+              crossOrigin: _,
+              autoPlay: !0,
+              muted: !0,
+              playsInline: !0
+            }
+          )
         }
-      ) })
+      )
     }
   );
 }
 export {
-  N as VideoPlayerStage
+  W as VideoPlayerStage
 };

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

@@ -1,6 +1,18 @@
 import { ReactNode } from 'react';
-/** The full control bar for the current stream type. */
-export declare function VideoControlBar({ isLive }: {
+import { VideoPlayerOptionalControls } from '../../types';
+/**
+ * The full control bar for the current stream type.
+ *
+ * The two vendor sheets lay the chrome out differently, so the DOM differs too.
+ * The default sheet expects three nested surfaces — a `--root` that is
+ * `display: contents`, plus `--primary` (the bar) and `--secondary` (the
+ * top-right cluster) absolutely positioned over the video — while the minimal
+ * sheet styles one flat bar and ships no rule for those modifiers. Emitting the
+ * flat shape under the default sheet leaves the controls unpositioned, which
+ * looks exactly like "the controls never appear".
+ */
+export declare function VideoControlBar({ isLive, optionalControls, }: {
     isLive: boolean;
+    optionalControls?: VideoPlayerOptionalControls;
 }): ReactNode;
 //# sourceMappingURL=VideoControlBar.d.ts.map

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

@@ -1 +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"}
+{"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;AA4CvC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAsL/D;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,gBAAgB,GACjB,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,gBAAgB,CAAC,EAAE,2BAA2B,CAAC;CAChD,GAAG,SAAS,CAoDZ"}

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

@@ -1,87 +1,115 @@
-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" })
+import { jsxs as i, jsx as e, Fragment as d } from "@emotion/react/jsx-runtime";
+import { Controls as s, Tooltip as g, AirPlayButton as C, CastButton as k, PiPButton as E, FullscreenButton as S, PlayButton as T, LiveButton as x, SeekButton as y, Popover as p, VolumeSlider as V, Slider as t, TimeSlider as O, Time as m, MuteButton as R } from "@videojs/react";
+import { AirPlayEnterIcon as A, AirPlayExitIcon as F, CastEnterIcon as M, CastExitIcon as w, PipEnterIcon as L, PipExitIcon as j, FullscreenEnterIcon as D, FullscreenExitIcon as G, RestartIcon as H, PlayIcon as K, PauseIcon as Y, VolumeOffIcon as q, VolumeLowIcon as z, VolumeHighIcon as J } from "@videojs/react/icons";
+import { cx as u, TooltipButton as c, SkinButton as r, SkipButtonContent as B, SEEK_TIME as P } from "./primitives.js";
+import { VIDEO_PLAYER_OPTIONAL_CONTROLS as Q } from "../../constants.js";
+import { useSkinClasses as h } from "./skinVariant.js";
+import { VideoSettingsMenu as U } from "./VideoSettingsMenu.js";
+function W() {
+  const { surface: a } = h(), o = /* @__PURE__ */ i(R, { className: "media-button--mute", render: /* @__PURE__ */ e(r, {}), children: [
+    /* @__PURE__ */ e(q, { className: "media-icon media-icon--volume-off" }),
+    /* @__PURE__ */ e(z, { className: "media-icon media-icon--volume-low" }),
+    /* @__PURE__ */ e(J, { 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" })
+  return /* @__PURE__ */ i(p.Root, { openOnHover: !0, delay: 200, closeDelay: 100, side: "top", children: [
+    /* @__PURE__ */ e(p.Trigger, { render: o }),
+    /* @__PURE__ */ e(p.Popup, { className: u(a, "media-popover media-popover--volume"), children: /* @__PURE__ */ i(V.Root, { className: "media-slider", orientation: "vertical", thumbAlignment: "edge", children: [
+      /* @__PURE__ */ e(t.Track, { className: "media-slider__track", children: /* @__PURE__ */ e(t.Fill, { className: "media-slider__fill" }) }),
+      /* @__PURE__ */ e(t.Thumb, { className: "media-slider__thumb media-slider__thumb--persistent" })
     ] }) })
   ] });
 }
-function K({ isLive: a }) {
+function X({ 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" })
+    /* @__PURE__ */ e(c, { children: /* @__PURE__ */ i(T, { className: "media-button--play", render: /* @__PURE__ */ e(r, {}), children: [
+      /* @__PURE__ */ e(H, { className: "media-icon media-icon--restart" }),
+      /* @__PURE__ */ e(K, { className: "media-icon media-icon--play" }),
+      /* @__PURE__ */ e(Y, { 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" }) }) })
+    a ? /* @__PURE__ */ e(x, { className: "media-button media-button--subtle media-button--live" }) : /* @__PURE__ */ i(d, { children: [
+      /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(y, { seconds: -P, className: "media-button--seek", render: /* @__PURE__ */ e(r, {}), children: /* @__PURE__ */ e(B, { direction: "back" }) }) }),
+      /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(y, { seconds: P, className: "media-button--seek", render: /* @__PURE__ */ e(r, {}), children: /* @__PURE__ */ e(B, { direction: "forward" }) }) })
     ] })
   ] });
 }
-function q({ isLive: a }) {
-  const { groupedTime: t } = c();
+function Z({ isLive: a }) {
+  const { groupedTime: o } = h();
   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" })
+  const n = /* @__PURE__ */ i(O.Root, { className: "media-slider", children: [
+    /* @__PURE__ */ i(t.Track, { className: "media-slider__track", children: [
+      /* @__PURE__ */ e(t.Fill, { className: "media-slider__fill" }),
+      /* @__PURE__ */ e(t.Buffer, { className: "media-slider__buffer" })
     ] }),
-    /* @__PURE__ */ e(r.Thumb, { className: "media-slider__thumb" })
+    /* @__PURE__ */ e(t.Thumb, { className: "media-slider__thumb" })
   ] });
-  return t ? /* @__PURE__ */ i("div", { className: "media-time-controls", children: [
-    s,
+  return o ? /* @__PURE__ */ i("div", { className: "media-time-controls", children: [
     /* @__PURE__ */ i("div", { className: "media-time-group", children: [
-      /* @__PURE__ */ e(l.Value, { type: "current", className: "media-time media-time--current" }),
+      /* @__PURE__ */ e(m.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__ */ e(m.Value, { type: "duration", className: "media-time media-time--duration" })
+    ] }),
+    n
   ] }) : /* @__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" })
+    /* @__PURE__ */ e(m.Value, { type: "current", className: "media-time" }),
+    n,
+    /* @__PURE__ */ e(m.Value, { type: "duration", className: "media-time" })
   ] });
 }
-function z({ isLive: a }) {
+function N({ airPlay: a, cast: o, pictureInPicture: n }) {
   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" })
+    a ? /* @__PURE__ */ e(c, { children: /* @__PURE__ */ i(C, { className: "media-button--airplay", render: /* @__PURE__ */ e(r, {}), children: [
+      /* @__PURE__ */ e(A, { className: "media-icon media-icon--airplay-enter" }),
+      /* @__PURE__ */ e(F, { className: "media-icon media-icon--airplay-exit" })
+    ] }) }) : null,
+    o ? /* @__PURE__ */ e(c, { children: /* @__PURE__ */ i(k, { className: "media-button--cast", render: /* @__PURE__ */ e(r, {}), children: [
+      /* @__PURE__ */ e(M, { className: "media-icon media-icon--cast-enter" }),
+      /* @__PURE__ */ e(w, { className: "media-icon media-icon--cast-exit" })
+    ] }) }) : null,
+    n ? /* @__PURE__ */ e(c, { children: /* @__PURE__ */ i(E, { className: "media-button--pip", render: /* @__PURE__ */ e(r, {}), children: [
+      /* @__PURE__ */ e(L, { className: "media-icon media-icon--pip-enter" }),
+      /* @__PURE__ */ e(j, { className: "media-icon media-icon--pip-exit" })
+    ] }) }) : null,
+    /* @__PURE__ */ e(c, { children: /* @__PURE__ */ i(S, { className: "media-button--fullscreen", render: /* @__PURE__ */ e(r, {}), children: [
+      /* @__PURE__ */ e(D, { className: "media-icon media-icon--fullscreen-enter" }),
+      /* @__PURE__ */ e(G, { 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 })
-  ] }) });
+function $({ isLive: a }) {
+  return /* @__PURE__ */ e("div", { className: "media-button-group", children: /* @__PURE__ */ e(U, { isLive: a }) });
+}
+function ce({
+  isLive: a,
+  optionalControls: o
+}) {
+  const { surface: n, controlsRoot: v, controlsPrimary: f, controlsSecondary: I } = h(), l = { ...Q, ...o }, b = l.airPlay || l.cast || l.pictureInPicture, _ = /* @__PURE__ */ i(d, { children: [
+    /* @__PURE__ */ e(X, { isLive: a }),
+    /* @__PURE__ */ e(W, {}),
+    /* @__PURE__ */ e(Z, { isLive: a }),
+    /* @__PURE__ */ e($, { isLive: a })
+  ] });
+  return (
+    // beta.32 split controls into state and surface: `Root` provides the state
+    // and renders no element, so the DOM props belong to `Content`. The backdrop
+    // is a sibling the same release introduced — a gradient that carries the
+    // control contrast over bright footage, which the chrome has no other way of
+    // getting.
+    /* @__PURE__ */ i(s.Root, { children: [
+      /* @__PURE__ */ e(s.Backdrop, { className: "media-controls__backdrop" }),
+      /* @__PURE__ */ e(s.Content, { className: u(n, "media-controls", v), children: /* @__PURE__ */ e(g.Provider, { children: f ? /* @__PURE__ */ i(d, { children: [
+        /* @__PURE__ */ i(s.Group, { className: u(n, "media-controls", f), children: [
+          _,
+          b ? null : /* @__PURE__ */ e(N, { ...l })
+        ] }),
+        b ? /* @__PURE__ */ e(s.Group, { className: u(n, "media-controls", I), children: /* @__PURE__ */ e(N, { ...l }) }) : null
+      ] }) : /* @__PURE__ */ i(d, { children: [
+        _,
+        /* @__PURE__ */ e(N, { ...l })
+      ] }) }) })
+    ] })
+  );
 }
 export {
-  X as VideoControlBar
+  ce as VideoControlBar
 };

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

@@ -4,6 +4,17 @@ import { ReactNode } from 'react';
  *
  * 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.
+ *
+ * Mirrors the vendor's own composition on purpose. beta.32 split dialogs into
+ * sibling parts — `ErrorDialog.Root` only provides the state, and the surface is
+ * a `Dialog.Popup` next to a `Dialog.Backdrop` — and renamed the stylesheet's
+ * `media-error__*` classes to `media-dialog__*`. Reaching for the wrong part
+ * throws ("compound components must be used within a Root"), and reaching for
+ * the old class names renders an unstyled dialog, neither of which shows up
+ * until a stream actually fails.
+ *
+ * The title, description and close label carry the vendor's localized text; the
+ * skin ships translations for them, so authoring our own would be a downgrade.
  */
 export declare function VideoErrorDialog(): ReactNode;
 //# sourceMappingURL=VideoErrorDialog.d.ts.map

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

@@ -1 +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"}
+{"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;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,IAAI,SAAS,CAgB5C"}

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

@@ -1,17 +1,20 @@
-import { jsx as r, jsxs as i } from "@emotion/react/jsx-runtime";
-import { ErrorDialog as o, AlertDialog as e } from "@videojs/react";
+import { jsxs as o, jsx as i } from "@emotion/react/jsx-runtime";
+import { ErrorDialog as a, Dialog 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" }) })
-  ] }) }) });
+import { useSkinClasses as d } from "./skinVariant.js";
+function n() {
+  const { surface: r } = d();
+  return /* @__PURE__ */ o(a.Root, { children: [
+    /* @__PURE__ */ i(e.Backdrop, { className: "media-dialog__backdrop" }),
+    /* @__PURE__ */ o(e.Popup, { className: s("media-dialog__popup", r), children: [
+      /* @__PURE__ */ o("div", { className: "media-dialog__content", children: [
+        /* @__PURE__ */ i(a.Title, { className: "media-dialog__title" }),
+        /* @__PURE__ */ i(a.Description, { className: "media-dialog__description" })
+      ] }),
+      /* @__PURE__ */ i("div", { className: "media-dialog__actions", children: /* @__PURE__ */ i(a.Close, { className: "media-button media-button--primary" }) })
+    ] })
+  ] });
 }
 export {
-  d as VideoErrorDialog
+  n as VideoErrorDialog
 };

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+/**
+ * Visual and assistive feedback for the gestures and hotkeys the player binds.
+ *
+ * Sibling to {@link VideoInputBindings} by design: that one registers the input,
+ * this one reports it. Without it a tap, a double-tap or an arrow key changes
+ * the player with nothing on screen acknowledging it — the bindings were already
+ * there, only the feedback was missing.
+ *
+ * `StatusAnnouncer` is the same thing for screen readers: it announces the state
+ * change in a visually hidden live region, which is the only feedback a
+ * non-sighted operator gets from a keyboard shortcut.
+ */
+export declare function VideoInputIndicators(): ReactNode;
+//# sourceMappingURL=VideoInputIndicators.d.ts.map

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

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

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

@@ -0,0 +1,57 @@
+import { jsxs as a, Fragment as m, jsx as e } from "@emotion/react/jsx-runtime";
+import { StatusAnnouncer as t, VolumeIndicator as i, StatusIndicator as c, SeekIndicator as n } from "@videojs/react";
+import { VolumeHighIcon as l, VolumeLowIcon as d, VolumeOffIcon as r, FullscreenEnterIcon as u, FullscreenExitIcon as N, PipEnterIcon as p, PipExitIcon as I, SeekIcon as _, PlayIcon as f, PauseIcon as v } from "@videojs/react/icons";
+import { cx as o } from "./primitives.js";
+import { useSkinClasses as h } from "./skinVariant.js";
+const g = ["toggleFullscreen", "togglePictureInPicture"], x = ["togglePaused"];
+function E() {
+  const { surface: s } = h();
+  return /* @__PURE__ */ a(m, { children: [
+    /* @__PURE__ */ e(t, { className: "media-sr-only" }),
+    /* @__PURE__ */ a("div", { className: "media-input-indicator", children: [
+      /* @__PURE__ */ a(i.Root, { className: o(s, "media-volume-indicator"), children: [
+        /* @__PURE__ */ a(i.Fill, { className: "media-volume-indicator__content", children: [
+          /* @__PURE__ */ e(l, { className: "media-icon media-icon--volume-high" }),
+          /* @__PURE__ */ e(d, { className: "media-icon media-icon--volume-low" }),
+          /* @__PURE__ */ e(r, { className: "media-icon media-icon--volume-off" }),
+          /* @__PURE__ */ e("div", { className: "media-volume-indicator__progress", "aria-hidden": "true" })
+        ] }),
+        /* @__PURE__ */ e(i.Value, { className: "media-volume-indicator__value" })
+      ] }),
+      /* @__PURE__ */ a(
+        c.Root,
+        {
+          actions: [...g],
+          className: o(s, "media-status-indicator", "media-status-indicator--state"),
+          children: [
+            /* @__PURE__ */ a("div", { className: "media-status-indicator__content", children: [
+              /* @__PURE__ */ e(u, { className: "media-icon media-icon--fullscreen-enter" }),
+              /* @__PURE__ */ e(N, { className: "media-icon media-icon--fullscreen-exit" }),
+              /* @__PURE__ */ e(p, { className: "media-icon media-icon--pip-enter" }),
+              /* @__PURE__ */ e(I, { className: "media-icon media-icon--pip-exit" })
+            ] }),
+            /* @__PURE__ */ e(c.Value, { className: "media-status-indicator__value" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ a(n.Root, { className: "media-seek-indicator", children: [
+        /* @__PURE__ */ e(_, { className: "media-icon media-icon--seek" }),
+        /* @__PURE__ */ e(n.Value, { className: "media-seek-indicator__value" })
+      ] }),
+      /* @__PURE__ */ a(
+        c.Root,
+        {
+          actions: [...x],
+          className: o("media-status-indicator", "media-status-indicator--playback"),
+          children: [
+            /* @__PURE__ */ e(f, { className: "media-icon media-icon--play" }),
+            /* @__PURE__ */ e(v, { className: "media-icon media-icon--pause" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  E as VideoInputIndicators
+};

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

@@ -1 +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"}
+{"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,CAsD5E"}