@m4l/gclick 0.16.0 → 0.17.0

package/components/VideoPlayer/constants.d.ts

@@ -1,6 +1,39 @@
 /** M4L theme key + test id for the slot-themed `VideoPlayer`. */
 export declare const COMPONENT_VIDEO_PLAYER_KEY_COMPONENT = "M4LVideoPlayer";
 export declare const COMPONENT_VIDEO_PLAYER_TEST_ID = "M4LVideoPlayer";
+/**
+ * The vendor skins the player can wear. Values mirror `@videojs/react`'s own
+ * naming (`video/skin.css` and `video/minimal-skin.css`).
+ */
+export declare const VIDEO_PLAYER_VARIANTS: {
+    readonly default: "default";
+    readonly minimal: "minimal";
+};
+/**
+ * Per-variant class names the composed skin hands to the vendor's building
+ * blocks.
+ *
+ * The two vendor sheets are independent stylesheets keyed off different root
+ * classes, and they differ in only two visible ways: the minimal skin drops the
+ * frosted `media-surface` from every chrome panel, and it groups the current /
+ * duration times behind a separator instead of showing them apart. Everything
+ * else is identical, so the composition reads these instead of branching.
+ *
+ * `surface` is intentionally empty for `minimal` — `cx()` filters falsy parts,
+ * so the same call site works for both without a conditional.
+ */
+export declare const VIDEO_PLAYER_SKIN_CLASSES: {
+    readonly default: {
+        readonly root: "media-default-skin media-default-skin--video";
+        readonly surface: "media-surface";
+        readonly groupedTime: false;
+    };
+    readonly minimal: {
+        readonly root: "media-minimal-skin media-minimal-skin--video";
+        readonly surface: "";
+        readonly groupedTime: true;
+    };
+};
 /**
  * `crossOrigin` value applied to the `<video>` element. `use-credentials` is
  * required for the native/Safari HLS path to send the CloudFront signed

package/components/VideoPlayer/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/VideoPlayer/constants.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,eAAO,MAAM,oCAAoC,mBAAmB,CAAC;AACrE,eAAO,MAAM,8BAA8B,mBAAmB,CAAC;AAE/D;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAG,iBAA0B,CAAC;AAE3D;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAG,KAAc,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/VideoPlayer/constants.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,eAAO,MAAM,oCAAoC,mBAAmB,CAAC;AACrE,eAAO,MAAM,8BAA8B,mBAAmB,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;CAGxB,CAAC;AAEX;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,yBAAyB;;;;;;;;;;;CAW5B,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAG,iBAA0B,CAAC;AAE3D;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAG,KAAc,CAAC"}

package/components/VideoPlayer/constants.js

@@ -1,6 +1,22 @@
-const _ = "M4LVideoPlayer", e = "use-credentials", E = "mse";
+const e = "M4LVideoPlayer", i = {
+  default: "default",
+  minimal: "minimal"
+}, a = {
+  default: {
+    root: "media-default-skin media-default-skin--video",
+    surface: "media-surface",
+    groupedTime: !1
+  },
+  minimal: {
+    root: "media-minimal-skin media-minimal-skin--video",
+    surface: "",
+    groupedTime: !0
+  }
+}, m = "use-credentials", d = "mse";
 export {
-  _ as COMPONENT_VIDEO_PLAYER_KEY_COMPONENT,
-  e as HLS_CROSS_ORIGIN,
-  E as HLS_PREFER_PLAYBACK
+  e as COMPONENT_VIDEO_PLAYER_KEY_COMPONENT,
+  m as HLS_CROSS_ORIGIN,
+  d as HLS_PREFER_PLAYBACK,
+  a as VIDEO_PLAYER_SKIN_CLASSES,
+  i as VIDEO_PLAYER_VARIANTS
 };

package/components/VideoPlayer/hlsConfig.d.ts

@@ -1,20 +1,30 @@
+import { HlsMediaProps } from '@videojs/core/dom/media/hls-js';
+/** The `config` prop accepted by `<HlsJsVideo>` — playback path + hls.js options. */
+type HlsMediaConfig = NonNullable<HlsMediaProps['config']>;
 /**
- * hls.js configuration so every HLS request (manifest + each segment) carries
- * the CloudFront signed cookies.
+ * `<HlsJsVideo>` configuration so every HLS request (manifest + each segment)
+ * carries the CloudFront signed cookies.
  *
- * video.js v10 has no first-class `withCredentials` prop: the `config` object
- * passed to `<HlsVideo>` is spread directly into the hls.js constructor
- * (`new Hls({ ...defaultHlsConfig, ...config })`). We therefore hook BOTH the
- * default XHR loader (`xhrSetup`) and the Fetch loader (`fetchSetup`) so the
- * cookies travel regardless of which loader hls.js selects, and we force
- * `autoStartLoad` because v10 defaults it to `false` — without it a muted
- * autoplay tile would mount but never begin fetching.
+ * video.js v10 has no first-class `withCredentials` prop. Since beta.25 the
+ * element takes a SINGLE `config` object that nests the playback path
+ * (`preferPlayback`) alongside the options forwarded to hls.js (`config.hlsJs`,
+ * spread into the constructor as `new HlsJsOnlyMedia({ config: { ...hlsJs } })`).
+ * Up to beta.24 the shape was flat — `preferPlayback` was a top-level prop and
+ * `config` WAS the hls.js option bag. Getting this wrong fails silently: the
+ * loader hooks below never reach hls.js, no cookie travels, and every segment
+ * comes back 403 with no error surfaced by the player. Keep the nesting.
+ *
+ * We hook BOTH the default XHR loader (`xhrSetup`) and the Fetch loader
+ * (`fetchSetup`) so the cookies travel regardless of which loader hls.js
+ * selects, and we force `autoStartLoad` because v10 defaults it to `false` —
+ * without it a muted autoplay tile would mount but never begin fetching.
  *
  * The native/Safari HLS path bypasses hls.js entirely; the `crossOrigin`
- * attribute on `<HlsVideo>` (see {@link HLS_CROSS_ORIGIN}) covers that path.
+ * attribute on `<HlsJsVideo>` (see {@link HLS_CROSS_ORIGIN}) covers that path.
  * Credentialed CORS forbids `Access-Control-Allow-Origin: *`, so CloudFront
  * must echo the exact request origin and send
  * `Access-Control-Allow-Credentials: true` for the segments to authenticate.
  */
-export declare function buildCredentialedHlsConfig(): Record<string, unknown>;
+export declare function buildCredentialedHlsConfig(preferPlayback: HlsMediaConfig['preferPlayback']): HlsMediaConfig;
+export {};
 //# sourceMappingURL=hlsConfig.d.ts.map

package/components/VideoPlayer/hlsConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hlsConfig.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/VideoPlayer/hlsConfig.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,0BAA0B,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAyBpE"}
+{"version":3,"file":"hlsConfig.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/VideoPlayer/hlsConfig.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAEpE,qFAAqF;AACrF,KAAK,cAAc,GAAG,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,GAC/C,cAAc,CAgChB"}

package/components/VideoPlayer/hlsConfig.js

@@ -1,26 +1,33 @@
-function r() {
+function u(r) {
   return {
-    // v10 default is `false` (lazy load); force eager load so muted autoplay
-    // starts fetching as soon as the tile mounts.
-    autoStartLoad: !0,
-    // Start from the beginning, NOT the live edge. hls.js defaults to the live
-    // edge for live streams, which anchors the MSE timeline mid-stream — once a
-    // finished live stream flips to VOD, the segments before the join point can
-    // no longer be buffered, so the seek bar cannot reach 0:00 (it loops
-    // re-fetching the first segment). Anchoring at 0 buffers the whole stream
-    // from the start, so the recording is fully seekable once it ends.
-    startPosition: 0,
-    /** Default XHR loader hook — sends cookies on every manifest + segment XHR. */
-    xhrSetup: (e) => {
-      e.withCredentials = !0;
-    },
-    /**
-     * Fetch loader hook — `xhrSetup` only fires when hls.js uses the XHR
-     * loader, so we also set `credentials: 'include'` for the Fetch path.
-     */
-    fetchSetup: (e, t) => (t.credentials = "include", new Request(e.url, t))
+    // Playback path selection moved INSIDE `config` in beta.25 (it used to be a
+    // top-level prop). Left outside, it would land on the `<video>` element as
+    // an unknown DOM attribute and be ignored.
+    preferPlayback: r,
+    // Everything below is forwarded verbatim to the hls.js constructor.
+    hlsJs: {
+      // v10 default is `false` (lazy load); force eager load so muted autoplay
+      // starts fetching as soon as the tile mounts.
+      autoStartLoad: !0,
+      // Start from the beginning, NOT the live edge. hls.js defaults to the live
+      // edge for live streams, which anchors the MSE timeline mid-stream — once a
+      // finished live stream flips to VOD, the segments before the join point can
+      // no longer be buffered, so the seek bar cannot reach 0:00 (it loops
+      // re-fetching the first segment). Anchoring at 0 buffers the whole stream
+      // from the start, so the recording is fully seekable once it ends.
+      startPosition: 0,
+      /** Default XHR loader hook — sends cookies on every manifest + segment XHR. */
+      xhrSetup: (e) => {
+        e.withCredentials = !0;
+      },
+      /**
+       * Fetch loader hook — `xhrSetup` only fires when hls.js uses the XHR
+       * loader, so we also set `credentials: 'include'` for the Fetch path.
+       */
+      fetchSetup: (e, t) => (t.credentials = "include", new Request(e.url, t))
+    }
   };
 }
 export {
-  r as buildCredentialedHlsConfig
+  u as buildCredentialedHlsConfig
 };

package/components/VideoPlayer/index.d.ts

@@ -1,5 +1,5 @@
 export * from './VideoPlayer';
-export type { VideoPlayerControl, VideoPlayerError, VideoPlayerOwnerState, VideoPlayerProps, } from './types';
-export { COMPONENT_VIDEO_PLAYER_KEY_COMPONENT } from './constants';
+export type { VideoPlayerControl, VideoPlayerError, VideoPlayerOwnerState, VideoPlayerProps, VideoPlayerVariant, } from './types';
+export { COMPONENT_VIDEO_PLAYER_KEY_COMPONENT, VIDEO_PLAYER_VARIANTS } from './constants';
 export { isHlsLiveDuration, resolveIsLive } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/components/VideoPlayer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/VideoPlayer/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,YAAY,EACV,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,oCAAoC,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/VideoPlayer/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,YAAY,EACV,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,oCAAoC,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/components/VideoPlayer/player.factory.d.ts

@@ -1,4 +1,4 @@
-import { MediaErrorState, MediaFullscreenState, MediaLiveState, MediaPictureInPictureState, MediaPlaybackRateState, MediaPlaybackState, MediaSourceState, MediaStreamTypeState, MediaTimeState, MediaVolumeState } from '@videojs/core';
+import { MediaAudioTrackState, MediaErrorState, MediaFullscreenState, MediaLiveState, MediaPictureInPictureState, MediaPlaybackRateState, MediaPlaybackState, MediaQualityState, MediaSourceState, MediaStreamTypeState, MediaTimeState, MediaVolumeState } from '@videojs/core';
 import { BaseStore } from '@videojs/store';
 /**
  * Module-scope player factory for the Gclick HLS player. video.js v10 expects
@@ -13,7 +13,7 @@ import { BaseStore } from '@videojs/store';
  * (it assumes the stream stays live forever), which is the opposite of our
  * cameras → recording transition, so we compose our own feature set instead.
  */
-export declare const StreamPlayer: import('@videojs/react').CreatePlayerResult<import('@videojs/react').PlayerStore<[import('@videojs/react').PlayerFeature<MediaPlaybackState>, import('@videojs/react').PlayerFeature<MediaPlaybackRateState>, import('@videojs/react').PlayerFeature<MediaVolumeState>, import('@videojs/react').PlayerFeature<MediaTimeState>, import('@videojs/react').PlayerFeature<MediaSourceState>, import('@videojs/react').PlayerFeature<import('@videojs/core').MediaBufferState>, import('@videojs/react').PlayerFeature<MediaFullscreenState>, import('@videojs/react').PlayerFeature<MediaPictureInPictureState>, import('@videojs/react').PlayerFeature<import('@videojs/core').MediaRemotePlaybackState>, import('@videojs/react').PlayerFeature<import('@videojs/core').MediaControlsState>, import('@videojs/react').PlayerFeature<import('@videojs/core').MediaTextTrackState>, import('@videojs/react').PlayerFeature<MediaErrorState>, import('@videojs/store').Slice<import('@videojs/react').PlayerTarget, MediaStreamTypeState>, import('@videojs/store').Slice<import('@videojs/react').PlayerTarget, MediaLiveState>]>>;
+export declare const StreamPlayer: import('@videojs/react').CreatePlayerResult<import('@videojs/react').PlayerStore<[import('@videojs/react').PlayerFeature<MediaPlaybackState>, import('@videojs/react').PlayerFeature<MediaPlaybackRateState>, import('@videojs/react').PlayerFeature<MediaQualityState>, import('@videojs/react').PlayerFeature<MediaAudioTrackState>, import('@videojs/react').PlayerFeature<MediaVolumeState>, import('@videojs/react').PlayerFeature<MediaTimeState>, import('@videojs/react').PlayerFeature<MediaSourceState>, import('@videojs/react').PlayerFeature<import('@videojs/core').MediaBufferState>, import('@videojs/react').PlayerFeature<MediaFullscreenState>, import('@videojs/react').PlayerFeature<MediaPictureInPictureState>, import('@videojs/react').PlayerFeature<import('@videojs/core').MediaRemotePlaybackState>, import('@videojs/react').PlayerFeature<import('@videojs/core').MediaControlsState>, import('@videojs/react').PlayerFeature<import('@videojs/core').MediaTextTrackState>, import('@videojs/react').PlayerFeature<MediaErrorState>, import('@videojs/react').PlayerFeature<MediaStreamTypeState>, import('@videojs/react').PlayerFeature<MediaLiveState>]>>;
 /**
  * Merged state of {@link StreamPlayer}'s store — the intersection of the
  * feature states we enable. v10's generics widen a spread feature array to
@@ -21,7 +21,7 @@ export declare const StreamPlayer: import('@videojs/react').CreatePlayerResult<i
  * contracts (which the selectors are typed against) instead of relying on
  * inference.
  */
-export type StreamPlayerState = MediaPlaybackState & MediaVolumeState & MediaTimeState & MediaSourceState & MediaPlaybackRateState & MediaFullscreenState & MediaPictureInPictureState & MediaErrorState & MediaStreamTypeState & MediaLiveState;
+export type StreamPlayerState = MediaPlaybackState & MediaVolumeState & MediaTimeState & MediaSourceState & MediaPlaybackRateState & MediaFullscreenState & MediaPictureInPictureState & MediaErrorState & MediaStreamTypeState & MediaLiveState & MediaQualityState & MediaAudioTrackState;
 /**
  * The store handle returned by `StreamPlayer.usePlayer()` (no selector): a
  * `BaseStore` intersected with the merged feature state, so actions and state

package/components/VideoPlayer/player.factory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"player.factory.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/VideoPlayer/player.factory.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,eAAe,EACf,oBAAoB,EACpB,cAAc,EACd,0BAA0B,EAC1B,sBAAsB,EACtB,kBAAkB,EAClB,gBAAgB,EAChB,oBAAoB,EACpB,cAAc,EACd,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,ikCAGvB,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAC9C,gBAAgB,GAChB,cAAc,GACd,gBAAgB,GAChB,sBAAsB,GACtB,oBAAoB,GACpB,0BAA0B,GAC1B,eAAe,GACf,oBAAoB,GACpB,cAAc,CAAC;AAEnB;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,CAAC,OAAO,EAAE,iBAAiB,CAAC,GAAG,iBAAiB,CAAC"}
+{"version":3,"file":"player.factory.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/VideoPlayer/player.factory.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,cAAc,EACd,0BAA0B,EAC1B,sBAAsB,EACtB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB,cAAc,EACd,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,4nCAGvB,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAC9C,gBAAgB,GAChB,cAAc,GACd,gBAAgB,GAChB,sBAAsB,GACtB,oBAAoB,GACpB,0BAA0B,GAC1B,eAAe,GACf,oBAAoB,GACpB,cAAc,GAMd,iBAAiB,GACjB,oBAAoB,CAAC;AAEzB;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,CAAC,OAAO,EAAE,iBAAiB,CAAC,GAAG,iBAAiB,CAAC"}

package/components/VideoPlayer/slots/VideoPlayerSlots.d.ts

@@ -1,6 +1,6 @@
 /**
  * Wrapper around the official v10 skin. It carries the WHOLE vendor skin
- * stylesheet translated to Emotion (`VideojsSkin.styles.ts`, spread in
+ * stylesheet translated to Emotion (`Videojs*Skin.styles.ts`, spread in
  * `VideoPlayer.styles.ts`): every skin selector is scoped under this slot's
  * class, so the skin `Container` must stay a descendant of this element. It
  * also sizes the skin to fill the parent and flattens the frame

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { VideoPlayerVariant } from '../types';
 /** Public props of the composed skin — the official skin contract plus `isLive`. */
 export interface GclickVideoSkinProps {
     children?: ReactNode;
@@ -6,16 +7,18 @@ export interface GclickVideoSkinProps {
     poster?: string;
     /** While live: show the native `<LiveButton>` and hide the seek region. */
     isLive: boolean;
+    /** Which vendor skin to wear. Decides the class names, not the stylesheet. */
+    variant: VideoPlayerVariant;
 }
 /**
  * Single official-v10 skin for both live and VOD, composed from the dependency's
  * building blocks + official `media-*` classes (styled by the vendor stylesheet
- * translated to Emotion in `VideojsSkin.styles.ts`, scoped at the root slot;
+ * translated to Emotion, scoped at the root slot;
  * no custom per-control CSS). It unifies the VOD and live presets: while `isLive`
  * the control bar shows the native `<LiveButton>` and drops the seek region; once
  * the stream ends (`isLive` flips false) it shows the skip controls + the time
  * slider. Because it is one component (no skin swap), the `<video>` is never
  * remounted on the live → VOD transition.
  */
-export declare function GclickVideoSkin({ children, className, poster, isLive }: GclickVideoSkinProps): ReactNode;
+export declare function GclickVideoSkin({ children, className, poster, isLive, variant, }: GclickVideoSkinProps): ReactNode;
 //# sourceMappingURL=GclickVideoSkin.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GclickVideoSkin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/VideoPlayer/subcomponents/GclickVideoSkin.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAmInD,oFAAoF;AACpF,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2EAA2E;IAC3E,MAAM,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,oBAAoB,GAAG,SAAS,CAiJxG"}
+{"version":3,"file":"GclickVideoSkin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/VideoPlayer/subcomponents/GclickVideoSkin.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqCvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAQnD,oFAAoF;AACpF,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2EAA2E;IAC3E,MAAM,EAAE,OAAO,CAAC;IAChB,8EAA8E;IAC9E,OAAO,EAAE,kBAAkB,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,MAAM,EACN,MAAM,EACN,OAAO,GACR,EAAE,oBAAoB,GAAG,SAAS,CAQlC"}

package/components/VideoPlayer/subcomponents/GclickVideoSkin.js

@@ -1,186 +1,42 @@
-import { jsxs as a, jsx as e, Fragment as y } from "@emotion/react/jsx-runtime";
-import { forwardRef as P } from "react";
-import { Container as I, Poster as R, BufferingIndicator as T, ErrorDialog as g, AlertDialog as m, Controls as B, Tooltip as i, PlayButton as S, LiveButton as V, SeekButton as f, Time as b, TimeSlider as w, Slider as s, PlaybackRateMenu as u, PiPButton as x, FullscreenButton as E, Hotkey as l, Gesture as p, usePlaybackRateMenu as F, Menu as N, Popover as h, VolumeSlider as M, MuteButton as C } from "@videojs/react";
-import { SpinnerIcon as D, RestartIcon as A, PlayIcon as j, PauseIcon as G, SeekIcon as _, PipEnterIcon as H, PipExitIcon as O, FullscreenEnterIcon as K, FullscreenExitIcon as U, CheckIcon as q, VolumeOffIcon as z, VolumeLowIcon as J, VolumeHighIcon as L } from "@videojs/react/icons";
-const d = 10;
-function v(...n) {
-  return n.filter(Boolean).join(" ");
+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({
+  children: o,
+  className: e,
+  poster: i,
+  isLive: n,
+  variant: m
+}) {
+  return /* @__PURE__ */ r(u, { variant: m, children: /* @__PURE__ */ r(V, { className: e, poster: i, isLive: n, children: o }) });
 }
-const c = P(
-  function({ className: t, ...r }, o) {
-    return /* @__PURE__ */ e(
-      "button",
+function V({
+  children: o,
+  className: e,
+  poster: i,
+  isLive: n
+}) {
+  const { root: m, surface: a } = k();
+  return /* @__PURE__ */ s(t, { className: p(m, e), children: [
+    o,
+    i ? /* @__PURE__ */ r(d, { src: i }) : null,
+    /* @__PURE__ */ r(
+      l,
       {
-        ref: o,
-        type: "button",
-        className: v("media-button media-button--subtle media-button--icon", t),
-        ...r
-      }
-    );
-  }
-);
-function Q() {
-  const n = /* @__PURE__ */ a(C, { className: "media-button--mute", render: /* @__PURE__ */ e(c, {}), children: [
-    /* @__PURE__ */ e(z, { className: "media-icon media-icon--volume-off" }),
-    /* @__PURE__ */ e(J, { className: "media-icon media-icon--volume-low" }),
-    /* @__PURE__ */ e(L, { className: "media-icon media-icon--volume-high" })
-  ] });
-  return /* @__PURE__ */ a(h.Root, { openOnHover: !0, delay: 200, closeDelay: 100, side: "top", children: [
-    /* @__PURE__ */ e(h.Trigger, { render: n }),
-    /* @__PURE__ */ e(h.Popup, { className: "media-surface media-popover media-popover--volume", children: /* @__PURE__ */ a(M.Root, { className: "media-slider", orientation: "vertical", thumbAlignment: "edge", children: [
-      /* @__PURE__ */ e(s.Track, { className: "media-slider__track", children: /* @__PURE__ */ e(s.Fill, { className: "media-slider__fill" }) }),
-      /* @__PURE__ */ e(s.Thumb, { className: "media-slider__thumb media-slider__thumb--persistent" })
-    ] }) })
-  ] });
-}
-function W() {
-  const { options: n, setValue: t, value: r } = F();
-  return /* @__PURE__ */ e(
-    N.RadioGroup,
-    {
-      className: "media-menu__group",
-      value: r,
-      onValueChange: t,
-      label: "Playback rate",
-      children: n.map((o) => /* @__PURE__ */ a(
-        N.RadioItem,
-        {
-          className: "media-menu__item",
-          value: o.value,
-          disabled: o.disabled,
-          children: [
-            /* @__PURE__ */ e("span", { children: o.label }),
-            /* @__PURE__ */ e(
-              N.ItemIndicator,
-              {
-                checked: o.value === r,
-                forceMount: !0,
-                className: "media-menu__indicator",
-                children: /* @__PURE__ */ e(q, { className: "media-icon" })
-              }
-            )
-          ]
-        },
-        o.value
-      ))
-    }
-  );
-}
-function ee({ children: n, className: t, poster: r, isLive: o }) {
-  return /* @__PURE__ */ a(I, { className: v("media-default-skin media-default-skin--video", t), children: [
-    n,
-    r ? /* @__PURE__ */ e(R, { src: r }) : null,
-    /* @__PURE__ */ e(
-      T,
-      {
-        render: (k) => /* @__PURE__ */ e("div", { ...k, className: "media-buffering-indicator", children: /* @__PURE__ */ e("div", { className: "media-surface", children: /* @__PURE__ */ e(D, { className: "media-icon" }) }) })
+        render: (c) => /* @__PURE__ */ r("div", { ...c, className: "media-buffering-indicator", children: /* @__PURE__ */ r("div", { className: a, children: /* @__PURE__ */ r(f, { className: "media-icon" }) }) })
       }
     ),
-    /* @__PURE__ */ e(g.Root, { children: /* @__PURE__ */ e(m.Popup, { className: "media-error", children: /* @__PURE__ */ a("div", { className: "media-error__dialog media-surface", children: [
-      /* @__PURE__ */ a("div", { className: "media-error__content", children: [
-        /* @__PURE__ */ e(m.Title, { className: "media-error__title", children: "Something went wrong." }),
-        /* @__PURE__ */ e(g.Description, { className: "media-error__description" })
-      ] }),
-      /* @__PURE__ */ e("div", { className: "media-error__actions", children: /* @__PURE__ */ e(m.Close, { className: "media-button media-button--primary", children: "OK" }) })
-    ] }) }) }),
-    /* @__PURE__ */ e(B.Root, { className: "media-surface media-controls", children: /* @__PURE__ */ a(i.Provider, { children: [
-      /* @__PURE__ */ a("div", { className: "media-button-group", children: [
-        /* @__PURE__ */ a(i.Root, { side: "top", children: [
-          /* @__PURE__ */ e(
-            i.Trigger,
-            {
-              render: /* @__PURE__ */ a(S, { className: "media-button--play", render: /* @__PURE__ */ e(c, {}), children: [
-                /* @__PURE__ */ e(A, { className: "media-icon media-icon--restart" }),
-                /* @__PURE__ */ e(j, { className: "media-icon media-icon--play" }),
-                /* @__PURE__ */ e(G, { className: "media-icon media-icon--pause" })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ e(i.Popup, { className: "media-surface media-tooltip" })
-        ] }),
-        o ? /* @__PURE__ */ e(V, { className: "media-button media-button--subtle media-button--live" }) : /* @__PURE__ */ a(y, { children: [
-          /* @__PURE__ */ a(i.Root, { side: "top", children: [
-            /* @__PURE__ */ e(
-              i.Trigger,
-              {
-                render: /* @__PURE__ */ e(f, { seconds: -d, className: "media-button--seek", render: /* @__PURE__ */ e(c, {}), children: /* @__PURE__ */ a("span", { className: "media-icon__container", children: [
-                  /* @__PURE__ */ e(_, { className: "media-icon media-icon--seek media-icon--flipped" }),
-                  /* @__PURE__ */ e("span", { className: "media-icon__label", children: d })
-                ] }) })
-              }
-            ),
-            /* @__PURE__ */ e(i.Popup, { className: "media-surface media-tooltip" })
-          ] }),
-          /* @__PURE__ */ a(i.Root, { side: "top", children: [
-            /* @__PURE__ */ e(
-              i.Trigger,
-              {
-                render: /* @__PURE__ */ e(f, { seconds: d, className: "media-button--seek", render: /* @__PURE__ */ e(c, {}), children: /* @__PURE__ */ a("span", { className: "media-icon__container", children: [
-                  /* @__PURE__ */ e(_, { className: "media-icon media-icon--seek" }),
-                  /* @__PURE__ */ e("span", { className: "media-icon__label", children: d })
-                ] }) })
-              }
-            ),
-            /* @__PURE__ */ e(i.Popup, { className: "media-surface media-tooltip" })
-          ] })
-        ] })
-      ] }),
-      o ? /* @__PURE__ */ e("div", { className: "media-time-controls", "aria-hidden": "true" }) : /* @__PURE__ */ a("div", { className: "media-time-controls", children: [
-        /* @__PURE__ */ e(b.Value, { type: "current", className: "media-time" }),
-        /* @__PURE__ */ a(w.Root, { className: "media-slider", children: [
-          /* @__PURE__ */ a(s.Track, { className: "media-slider__track", children: [
-            /* @__PURE__ */ e(s.Fill, { className: "media-slider__fill" }),
-            /* @__PURE__ */ e(s.Buffer, { className: "media-slider__buffer" })
-          ] }),
-          /* @__PURE__ */ e(s.Thumb, { className: "media-slider__thumb" })
-        ] }),
-        /* @__PURE__ */ e(b.Value, { type: "duration", className: "media-time" })
-      ] }),
-      /* @__PURE__ */ a("div", { className: "media-button-group", children: [
-        o ? null : /* @__PURE__ */ a(u.Root, { side: "top", align: "center", children: [
-          /* @__PURE__ */ e(u.Trigger, { className: "media-button--playback-rate", render: /* @__PURE__ */ e(c, {}) }),
-          /* @__PURE__ */ e(u.Content, { className: "media-surface media-popover media-menu media-menu--playback-rate", children: /* @__PURE__ */ e(W, {}) })
-        ] }),
-        /* @__PURE__ */ e(Q, {}),
-        /* @__PURE__ */ a(i.Root, { side: "top", children: [
-          /* @__PURE__ */ e(
-            i.Trigger,
-            {
-              render: /* @__PURE__ */ a(x, { className: "media-button--pip", render: /* @__PURE__ */ e(c, {}), children: [
-                /* @__PURE__ */ e(H, { className: "media-icon media-icon--pip-enter" }),
-                /* @__PURE__ */ e(O, { className: "media-icon media-icon--pip-exit" })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ e(i.Popup, { className: "media-surface media-tooltip" })
-        ] }),
-        /* @__PURE__ */ a(i.Root, { side: "top", children: [
-          /* @__PURE__ */ e(
-            i.Trigger,
-            {
-              render: /* @__PURE__ */ a(E, { className: "media-button--fullscreen", render: /* @__PURE__ */ e(c, {}), children: [
-                /* @__PURE__ */ e(K, { className: "media-icon media-icon--fullscreen-enter" }),
-                /* @__PURE__ */ e(U, { className: "media-icon media-icon--fullscreen-exit" })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ e(i.Popup, { className: "media-surface media-tooltip" })
-        ] })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ e("div", { className: "media-overlay" }),
-    /* @__PURE__ */ e(l, { keys: "Space", action: "togglePaused" }),
-    /* @__PURE__ */ e(l, { keys: "k", action: "togglePaused" }),
-    /* @__PURE__ */ e(l, { keys: "m", action: "toggleMuted" }),
-    /* @__PURE__ */ e(l, { keys: "f", action: "toggleFullscreen" }),
-    /* @__PURE__ */ e(l, { keys: "i", action: "togglePictureInPicture" }),
-    /* @__PURE__ */ e(l, { keys: "ArrowUp", action: "volumeStep", value: 0.05 }),
-    /* @__PURE__ */ e(l, { keys: "ArrowDown", action: "volumeStep", value: -0.05 }),
-    /* @__PURE__ */ e(p, { type: "tap", action: "togglePaused", pointer: "mouse", region: "center" }),
-    /* @__PURE__ */ e(p, { type: "tap", action: "toggleControls", pointer: "touch" }),
-    /* @__PURE__ */ e(p, { type: "doubletap", action: "toggleFullscreen", region: "center" })
+    /* @__PURE__ */ r(N, {}),
+    /* @__PURE__ */ r(v, { isLive: n }),
+    /* @__PURE__ */ r("div", { className: "media-overlay" }),
+    /* @__PURE__ */ r(S, {})
   ] });
 }
 export {
-  ee as GclickVideoSkin
+  b as GclickVideoSkin
 };

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

@@ -1,9 +1,10 @@
 import { Ref } from 'react';
-import { VideoPlayerControl, VideoPlayerError } from '../types';
+import { VideoPlayerControl, VideoPlayerError, VideoPlayerVariant } from '../types';
 /** Props of the inner stage — the public props resolved + the forwarded ref. */
 export interface VideoPlayerStageProps {
     src: string;
     poster?: string;
+    variant: VideoPlayerVariant;
     className?: string;
     controlRef?: Ref<VideoPlayerControl>;
     onReady?: () => void;
@@ -17,10 +18,10 @@ export interface VideoPlayerStageProps {
 /**
  * Inner stage rendered inside `StreamPlayer.Provider`. It bridges the imperative
  * handle + event callbacks (via `usePlayer`), then renders the composed v10 skin
- * ({@link GclickVideoSkin}) wrapping the credentialed `<HlsVideo>`. The skin owns
+ * ({@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, className, controlRef, onReady, onPlay, onPause, onEnded, onWaiting, onError, onDurationChange, }: VideoPlayerStageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function VideoPlayerStage({ src, poster, variant, 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,MAAM,UAAU,CAAC;AAErE,gFAAgF;AAChF,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,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,SAAS,EACT,UAAU,EACV,OAAO,EACP,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,EACP,gBAAgB,GACjB,EAAE,qBAAqB,oDA6CvB"}
+{"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"}