@m4l/gclick 0.27.0-beta-feature-795-m4l-react-native-ui-indicator-flag.2 → 0.27.0

package/components/CameraStream/slots/CameraStreamSlots.js

@@ -1,58 +1,66 @@
-import { Typography as l } from "@m4l/base";
-import { Chip as r } from "@m4l/components";
+import { Typography as o } from "@m4l/base";
+import { Chip as d } from "@m4l/components";
 import { styled as e } from "@mui/material/styles";
-import { cameraStreamStyles as t } from "../CameraStream.styles.js";
-import { COMPONENT_CAMERA_STREAM_KEY_COMPONENT as a } from "../constants.js";
-import { CameraStreamSlotsStyled as o } from "./CameraStreamEnum.js";
-const S = e("div", {
-  name: a,
-  slot: o.root
-})(t.root), y = e(r, {
-  name: a,
-  slot: o.label,
+import { cameraStreamStyles as a } from "../CameraStream.styles.js";
+import { COMPONENT_CAMERA_STREAM_KEY_COMPONENT as t } from "../constants.js";
+import { CameraStreamSlotsStyled as l } from "./CameraStreamEnum.js";
+const h = e("div", {
+  name: t,
+  slot: l.root
+})(a.root), S = e(d, {
+  name: t,
+  slot: l.label,
   shouldForwardProp: (s) => s !== "ownerState"
-})(t.label), i = e("div", {
-  name: a,
-  slot: o.liveBadge
-})(t.liveBadge), g = e("button", {
-  name: a,
-  slot: o.replayBadge
-})(t.replayBadge), B = e("div", {
-  name: a,
-  slot: o.sharedBadge
-})(t.sharedBadge), v = e("button", {
-  name: a,
-  slot: o.placeholderButton
-})(t.placeholderButton), P = e("span", {
-  name: a,
-  slot: o.placeholderIcon
-})(t.placeholderIcon), M = e(l, {
-  name: a,
-  slot: o.placeholderText
-})(t.placeholderText), O = e("div", {
-  name: a,
-  slot: o.phaseOverlay
-})(t.phaseOverlay), T = e("div", {
-  name: a,
-  slot: o.phaseSkeleton
-})(t.phaseSkeleton), f = e(l, {
-  name: a,
-  slot: o.phaseMessage
-})(t.phaseMessage), u = e(l, {
-  name: a,
-  slot: o.phaseHint
-})(t.phaseHint);
+})(a.label), i = e("div", {
+  name: t,
+  slot: l.liveBadge
+})(a.liveBadge), g = e("button", {
+  name: t,
+  slot: l.replayBadge
+})(a.replayBadge), B = e("span", {
+  name: t,
+  slot: l.replayBadgeText
+})(a.replayBadgeText), v = e("span", {
+  name: t,
+  slot: l.replayBadgeDetail
+})(a.replayBadgeDetail), P = e("div", {
+  name: t,
+  slot: l.sharedBadge
+})(a.sharedBadge), T = e("button", {
+  name: t,
+  slot: l.placeholderButton
+})(a.placeholderButton), x = e("span", {
+  name: t,
+  slot: l.placeholderIcon
+})(a.placeholderIcon), M = e(o, {
+  name: t,
+  slot: l.placeholderText
+})(a.placeholderText), O = e("div", {
+  name: t,
+  slot: l.phaseOverlay
+})(a.phaseOverlay), f = e("div", {
+  name: t,
+  slot: l.phaseSkeleton
+})(a.phaseSkeleton), u = e(o, {
+  name: t,
+  slot: l.phaseMessage
+})(a.phaseMessage), C = e(o, {
+  name: t,
+  slot: l.phaseHint
+})(a.phaseHint);
 export {
-  y as CameraLabelStyled,
+  S as CameraLabelStyled,
   i as LiveBadgeStyled,
-  u as PhaseHintStyled,
-  f as PhaseMessageStyled,
+  C as PhaseHintStyled,
+  u as PhaseMessageStyled,
   O as PhaseOverlayStyled,
-  T as PhaseSkeletonStyled,
-  v as PlaceholderButtonStyled,
-  P as PlaceholderIconWrapperStyled,
+  f as PhaseSkeletonStyled,
+  T as PlaceholderButtonStyled,
+  x as PlaceholderIconWrapperStyled,
   M as PlaceholderTextStyled,
+  v as ReplayBadgeDetailStyled,
   g as ReplayBadgeStyled,
-  B as SharedBadgeStyled,
-  S as StreamRootStyled
+  B as ReplayBadgeTextStyled,
+  P as SharedBadgeStyled,
+  h as StreamRootStyled
 };

package/components/CameraStream/types.d.ts

@@ -43,6 +43,14 @@ export type CameraStreamLiveBadgeSlotProps = Record<string, never>;
 export interface CameraStreamReplayBadgeSlotProps {
     onReplay: () => void;
     replayLabel: string;
+    /**
+     * What the next request would fetch, when it is not simply the same stream
+     * again — Playback passes the instant the scrubber moved to. Pass it here
+     * rather than appended to `replayLabel`: the default badge paints it in its
+     * own part, which never truncates while the label does, and joins both in
+     * the accessible name and the tooltip. The router never sets it.
+     */
+    replayDetail?: string;
 }
 /** Props received by the `sharedBadge` slot. */
 export interface CameraStreamSharedBadgeSlotProps {

package/components/CameraStream/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/CameraStream/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/CameraStream/types.ts"],"names":[],"mappings":"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"}

package/components/VideoPlayer/VideoPlayer.d.ts

@@ -17,7 +17,8 @@ import { VideoPlayerProps } from './types';
  * Highlights:
  * - **One composed v10 skin** — the chrome (controls, layout, poster, native
  *   live button) is owned by `GclickVideoSkin`, assembled from the dependency's
- *   building blocks + official `media-*` classes (no custom per-control CSS).
+ *   building blocks + official `media-*` / `video-*` classes (no custom
+ *   per-control CSS).
  * - **Live ↔ VOD in one skin** — while the manifest is live the control bar
  *   shows the native `<LiveButton>` and hides the seek region; once it ends
  *   (`#EXT-X-ENDLIST` → `streamType: on-demand`) the seek bar + time displays
@@ -25,9 +26,12 @@ import { VideoPlayerProps } from './types';
  *   never remounted (no reload). See `GclickVideoSkin`.
  * - **Signed-cookie HLS** — the `<video>` is configured so every manifest +
  *   segment request carries the CloudFront cookies (see `hlsSource.ts`).
- * - **Flat frame** — only one styling override on our side: the skin's
- *   `--media-border-radius` is set to `0` so the chrome is edge-to-edge and
- *   couples to the parent surface (see `VideoPlayer.styles.ts`).
+ * - **Flat frame** — on our side the root slot only sets the skin's own tokens
+ *   (`--media-border-radius: 0`, so the chrome is edge-to-edge and couples to
+ *   the parent surface, and `--media-font-family` from the theme) and lets the
+ *   chrome give way on a small tile: the ±10 s buttons, settings and mute step
+ *   aside by width, and the smallest tiles get a scaled-down mini chrome (see
+ *   `VideoPlayer.styles.ts`). The player needs a parent with a definite height.
  * - **Poster** — `poster` is forwarded to the skin's poster slot (e.g. a cloud
  *   recording snapshot).
  * - **Two vendor skins** — `variant` picks between the dependency's `default`
@@ -35,6 +39,10 @@ import { VideoPlayerProps } from './types';
  *   selected stylesheet is injected; see `VideoPlayer.styles.ts`.
  * - **React 19 ref-as-prop** — `ref` resolves to a {@link VideoPlayerControl}
  *   without `forwardRef`.
+ * - **App language** — the chrome follows the GClick language
+ *   (`LocalesContext` from `@m4l/graphics`) and switches in place, without
+ *   reloading the stream. There is no `locale` prop; see
+ *   `VideoPlayerI18nProvider`.
  */
 export declare function VideoPlayer({ src, poster, variant, suspended, optionalControls, className, onReady, onPlay, onPause, onEnded, onWaiting, onError, onDurationChange, ref, }: VideoPlayerProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=VideoPlayer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/VideoPlayer/VideoPlayer.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,OAAuC,EACvC,SAAiB,EACjB,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,GAAG,GACJ,EAAE,gBAAgB,2DA8BlB"}
+{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/VideoPlayer/VideoPlayer.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,OAAuC,EACvC,SAAiB,EACjB,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,GAAG,GACJ,EAAE,gBAAgB,2DAgClB"}

package/components/VideoPlayer/VideoPlayer.js

@@ -1,43 +1,44 @@
-import { jsx as e } from "@emotion/react/jsx-runtime";
+import { jsx as r } from "@emotion/react/jsx-runtime";
 import { StreamPlayer as V } from "./player.factory.js";
+import { VideoPlayerI18nProvider as c } from "./subcomponents/VideoPlayerI18nProvider.js";
 import { VideoPlayerStage as A } from "./subcomponents/VideoPlayerStage.js";
-import { VIDEO_PLAYER_VARIANTS as R } from "./constants.js";
-function I({
-  src: r,
+import { VIDEO_PLAYER_VARIANTS as I } from "./constants.js";
+function _({
+  src: e,
   poster: o,
-  variant: t = R.default,
-  suspended: l = !1,
-  optionalControls: f,
-  className: i,
-  onReady: m,
+  variant: i = I.default,
+  suspended: t = !1,
+  optionalControls: l,
+  className: m,
+  onReady: f,
   onPlay: a,
   onPause: n,
-  onEnded: p,
-  onWaiting: u,
-  onError: P,
-  onDurationChange: d,
+  onEnded: d,
+  onWaiting: P,
+  onError: p,
+  onDurationChange: u,
   ref: y
 }) {
-  return r ? /* @__PURE__ */ e(V.Player, { children: /* @__PURE__ */ e(
+  return e ? /* @__PURE__ */ r(V.Player, { children: /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(
     A,
     {
-      src: r,
+      src: e,
       poster: o,
-      variant: t,
-      suspended: l,
-      optionalControls: f,
-      className: i,
+      variant: i,
+      suspended: t,
+      optionalControls: l,
+      className: m,
       controlRef: y,
-      onReady: m,
+      onReady: f,
       onPlay: a,
       onPause: n,
-      onEnded: p,
-      onWaiting: u,
-      onError: P,
-      onDurationChange: d
+      onEnded: d,
+      onWaiting: P,
+      onError: p,
+      onDurationChange: u
     }
-  ) }) : null;
+  ) }) }) : null;
 }
 export {
-  I as VideoPlayer
+  _ as VideoPlayer
 };

package/components/VideoPlayer/VideoPlayer.styles.d.ts

@@ -1,30 +1,50 @@
-import { VideoPlayerStyles } from './types';
+import { CSSObject } from '@mui/material/styles';
+import { VideoPlayerStyles, VideoPlayerVariant } from './types';
+/**
+ * How the chrome gives way as the tile shrinks, per variant; the `root` slot
+ * spreads the entry of the variant it wears. The camera grids make tiles of any
+ * size down to 160×90, and where a bar runs out of room the vendor's chrome
+ * neither wraps nor clips: the seek bar keeps its minimum width, overflows its
+ * group and lands on the next button. So the optional controls step aside by width, and
+ * the smallest tiles, narrow or short, get a mini chrome (see "Responsive
+ * behavior" in the README). The widths are in px because they budget controls
+ * sized in px (`--media-scale-unit` is `16px`), so the user's font size must not
+ * move them.
+ *
+ * The mini chrome reads the height, which the vendor's `media-root` cannot (it
+ * is an `inline-size` container), so the root declares a `size` container of
+ * its own. Size containment lays the root out as if it were empty: the player
+ * needs a parent with a definite height. And the root keeps the tile's size
+ * while the skin's `Container` (`.media-skin`) goes fullscreen, so every rule on
+ * this container is guarded with `.media-skin:not(:fullscreen)`, the
+ * pseudo-class the vendor keys its own fullscreen rules on. The rules on
+ * `media-root` need no guard: in fullscreen that container is the screen.
+ */
+export declare const videoPlayerResponsiveStyles: Record<VideoPlayerVariant, CSSObject>;
 /**
  * Slot styles for the `VideoPlayer`. The official video.js v10 skin owns the
  * chrome, and its stylesheet is applied here: libraries must not import global
  * vendor CSS (it never loads in MFs — the host's MFLoader only fetches the JS
- * entry), so `@videojs/react/video/skin.css` is translated 1:1 to Emotion
- * object styles (`Videojs*Skin.styles.ts`, same pattern as Leaflet in `GpsMap`)
- * and spread into the `root` slot. Emotion scopes every skin selector under
- * this slot, so nothing leaks into the host's global CSS. On top of that we
- * only size the wrapper and flatten the player frame: the skin reads
- * `--media-border-radius` (default `2rem`); setting it to `0` keeps the chrome
- * edge-to-edge so it couples to the parent surface that owns the rounded
- * corners and clip (e.g. the `CameraStream` tile).
+ * entry), so the vendor's `video/skin.css` is translated to Emotion object
+ * styles (`Videojs*Skin.styles.ts`, same pattern as Leaflet in `GpsMap`) and
+ * spread into the `root` slot. Emotion scopes every skin selector under this
+ * slot, so nothing leaks into the host's global CSS.
  *
- * Consumers can still override via
- * `theme.components.M4LVideoPlayer.styleOverrides`. Note the specificity
- * contract: because every skin rule is prefixed by the slot class, a
- * descendant override must repeat the vendor selector chain to win (e.g.
- * `'& .media-default-skin .media-controls'`, not `'& .media-controls'`).
- * Root-level custom properties (like `--media-border-radius` below) keep the
- * plain ergonomics and are the vendor's intended override surface.
+ * The specificity contract is the vendor's: every skin rule lives in a cascade
+ * layer (`@layer base`, `@layer components`, …), and a rule outside any layer
+ * beats every layered rule whatever its selector. So the declarations below win
+ * without repeating the vendor's selector chain, and so does anything a consumer
+ * adds through `theme.components.M4LVideoPlayer.styleOverrides` — including over
+ * the skin's own state rules (`:hover`, `[data-*]`). The intended override
+ * surface stays the vendor's `--media-*` custom properties.
  *
- * Beyond `--media-border-radius` there are two more declarations here, both
- * documented inline below: a user-agent button reset and the base chrome
- * colour. Neither is per-control styling — they supply baselines the vendor
- * skin assumes from the host page but never declares, so the "no per-control
- * CSS" contract still holds.
+ * What is ours is a closed list, held by `VideoPlayer.styles.test.ts`: the
+ * wrapper's size, the `content-box` sizing a host global would otherwise
+ * override, two of the vendor's documented tokens, the responsive steps below
+ * (which also drop the ±10 s buttons on a narrow player), and a fallback for the
+ * one colour the vendor computes with `contrast-color()` and leaves unset
+ * without it. The skin resets its own buttons and sets its own colours, so
+ * nothing else here patches the vendor.
  */
 export declare const videoPlayerStyles: VideoPlayerStyles;
 //# sourceMappingURL=VideoPlayer.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayer.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/VideoPlayer/VideoPlayer.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAyB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAIxE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,iBAAiB,EAAE,iBAsG/B,CAAC"}
+{"version":3,"file":"VideoPlayer.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/VideoPlayer/VideoPlayer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGtD,OAAO,KAAK,EAAyB,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA2C5F;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,kBAAkB,EAAE,SAAS,CAuF7E,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,iBAAiB,EAAE,iBAwD/B,CAAC"}

package/components/VideoPlayer/VideoPlayer.styles.js

@@ -1,107 +1,169 @@
 import { VIDEO_PLAYER_VARIANTS as e } from "./constants.js";
-import { videojsDefaultSkinAllStyles as t } from "./VideojsDefaultSkin.styles.js";
-import { videojsMinimalSkinAllStyles as r } from "./VideojsMinimalSkin.styles.js";
-const d = {
-  /** Wrapper that scopes the vendor skin styles, sizes the composed skin and flattens the player frame. */
+import { videojsDefaultSkinStyles as n } from "./VideojsDefaultSkin.styles.js";
+import { videojsMinimalSkinStyles as r } from "./VideojsMinimalSkin.styles.js";
+const t = {
+  "@container media-root (width < 288px)": {
+    '&[data-stream-type="live"] .media-settings-menu-trigger': {
+      display: "none"
+    }
+  },
+  "@container media-root (width < 256px)": {
+    '&[data-stream-type="vod"] .media-settings-menu-trigger, &[data-stream-type="live"] .media-mute-button': {
+      display: "none"
+    }
+  },
+  "@container media-root (width < 220px)": {
+    '&[data-stream-type="vod"] .media-mute-button': {
+      display: "none"
+    }
+  }
+}, a = {
+  "--media-scale-unit": "12px",
+  "& .media-mute-button, & .media-settings-menu-trigger, & .media-pip-button, & .media-cast-button, & .media-airplay-button": {
+    display: "none"
+  }
+}, d = {
+  [e.default]: {
+    container: "m4l-video-player / size",
+    ...t,
+    /*
+     * Drop the ±10 s buttons below 38rem. They are ours: the video skins do not
+     * render them, so no vendor rule retires them — the stylesheet only dresses
+     * them once they exist. Two extra buttons are fine on a full-width player
+     * and crowd out the seek bar in a grid tile. The vendor's own line, 32rem
+     * (where it drops its captions button), was measured to be too early: the
+     * buttons came back while the time group was still under the 16rem at
+     * which the vendor hides the times, so a tile up to 607px wide (with Cast,
+     * AirPlay and PiP) showed less than a 511px one. From 38rem both fit. A
+     * single class is enough: outside any layer, it beats the layered rule that
+     * sets the button's `display`.
+     */
+    "@container media-root (width < 38rem)": {
+      "& .media-seek-button": {
+        display: "none"
+      }
+    },
+    // One 40px row is 40% of a 100px tile; French live without mute needs 209px.
+    "@container m4l-video-player (width < 216px) or (height < 100px)": {
+      "& .media-skin:not(:fullscreen)": a
+    }
+  },
+  [e.minimal]: {
+    container: "m4l-video-player / size",
+    ...t,
+    // The ±10 s buttons return at 32rem, where the vendor starts shedding
+    // controls: below 42rem this skin keeps the times on a row of their own, so
+    // the buttons never crowd them out.
+    "@container media-root (width < 32rem)": {
+      "& .media-seek-button": {
+        display: "none"
+      }
+    },
+    // Below 42rem the vendor's start and end groups are both `flex: 1` (0%
+    // basis), so they split the row in halves whatever they hold, and a long
+    // live label pushes mute out of the start group. The start group keeps its
+    // content and grows instead, as both do from 42rem (`flex: none`).
+    "@container media-root (width < 42rem)": {
+      "& .video-controls-start": {
+        flex: "1 0 auto"
+      }
+    },
+    // Without a floating cluster the outputs share the row with the live
+    // button: with AirPlay and PiP, French live needs 305px. Mute outranks the
+    // opt-in outputs, so they step aside first.
+    "@container media-root (width < 320px)": {
+      '&[data-stream-type="live"] .media-pip-button, &[data-stream-type="live"] .media-cast-button, &[data-stream-type="live"] .media-airplay-button': {
+        display: "none"
+      }
+    },
+    // This skin's two rows (64px) are 40% of a 160px tile; scaled, 48px.
+    "@container m4l-video-player (height < 160px)": {
+      "& .media-skin:not(:fullscreen)": {
+        "--media-scale-unit": "12px"
+      }
+    },
+    // Two scaled rows are 40% of a 120px tile. Below that, or narrower than
+    // 216px, one row: the groups stop growing (as from 42rem), the gap between
+    // them halves, and the seek bar sits inline with room for the thumb at both
+    // ends.
+    "@container m4l-video-player (width < 216px) or (height < 120px)": {
+      "& .media-skin:not(:fullscreen)": {
+        ...a,
+        "& .video-controls-wrap": {
+          flexWrap: "nowrap",
+          columnGap: "var(--media-spacing)"
+        },
+        "& .video-controls-start, & .video-controls-end": {
+          flex: "none"
+        },
+        "& .video-time-slider-group": {
+          flex: "1 1 0",
+          order: 0,
+          minWidth: 0,
+          paddingInline: "calc(var(--media-spacing) * 2)"
+        },
+        "& .media-time-group": {
+          display: "none"
+        }
+      }
+    }
+  }
+}, p = {
+  /** Wrapper that scopes the vendor skin styles, sizes the composed skin and sets its tokens. */
   root: ({ theme: o, ownerState: i }) => ({
     /*
      * The whole official v10 skin stylesheet for the selected variant, scoped
      * under this slot.
      *
-     * ONE sheet, never both. The two vendor stylesheets are independent (they
-     * key off different root classes, so they would not collide), but spreading
-     * both would inject ~1900 declarations that never match, and would emit
-     * un-scopable at-rules twice into
-     * the global namespace — Emotion cannot scope those, and both sheets declare
-     * them identically. Picking here keeps exactly one copy alive.
+     * ONE sheet, never both. They share their `@layer` and `@property` keys,
+     * so spreading both would silently keep only the second sheet.
      */
-    ...i?.variant === e.minimal ? r(o) : t(o),
+    ...i?.variant === e.minimal ? r : n,
     position: "relative",
     width: "100%",
     height: "100%",
-    // Flatten the player frame (the skin defaults to a 2rem radius). Cascades
-    // as a CSS custom property into the skin's elements. The live ↔ VOD
+    // The host's global `*, *::before, *::after { box-sizing: border-box }`
+    // reaches this wrapper and the skin root's own pseudo-elements, which the
+    // vendor's `@scope (.media-skin)` reset leaves out; keep them `content-box`,
+    // as the native sheet computes them.
+    boxSizing: "content-box",
+    "& .media-skin::before, & .media-skin::after": {
+      boxSizing: "content-box"
+    },
+    // Flatten the player frame: the skin rounds it through
+    // `--media-video-border-radius: var(--media-border-radius, 28px)`. Zero keeps
+    // the chrome edge-to-edge so it couples to the parent surface that owns the
+    // rounded corners and clip (e.g. the `CameraStream` tile). The live ↔ VOD
     // control-bar swap is handled by the composed skin itself
     // (`GclickVideoSkin`, driven by `isLive`), not CSS.
     "--media-border-radius": "0px",
+    // The chrome follows the platform font instead of the vendor's Inter stack,
+    // through the token the vendor reads on its container.
+    "--media-font-family": o.typography.fontFamily,
+    // Which controls show at which size, and the ±10 s buttons among them: see
+    // `videoPlayerResponsiveStyles`.
+    ...d[i?.variant ?? e.default],
     /*
-     * User-agent button reset — restores the baseline the vendor skin assumes.
-     *
-     * The skin's only global button rule is `font: inherit`, and it neutralizes
-     * the UA defaults per class rather than globally — `.media-button` gets
-     * `border: none`, `.media-button--subtle` and `.media-menu__item` get
-     * `color: inherit`. But `.media-menu__back` gets NEITHER: `Menu.Back`
-     * renders it as a bare `<button>` carrying only that class, and neither of
-     * its two rules touches `color`, `background` or `border`.
-     *
-     * So the back row of every settings submenu kept Chrome's UA button
-     * defaults: `background-color: buttonface` + `border: 2px outset` (which
-     * the skin's own `border-radius` rounded into a grey pill) and
-     * `color: buttontext`, i.e. pure black text over the dark glass. Its
-     * sibling rows looked fine because `Menu.RadioItem` renders `<div>`, and
-     * the control-bar buttons looked fine because they carry
-     * `.media-button--subtle`. Only this one element falls through.
-     *
-     * The vendor's demo does not hit it because its page ships Tailwind
-     * Preflight, which zeroes button background/border and sets
-     * `color: inherit`; nothing in our MFs does. This is a reset, not styling:
-     * it paints nothing, and every skin rule outranks it (four classes vs one
-     * class + element), so it cannot override anything the vendor sets.
-     * Reported upstream — the inconsistency is on their side; drop this once
-     * `.media-menu__back` resets its own UA defaults.
-     */
-    "& button": {
-      color: "inherit",
-      background: "none",
-      border: "none"
-    },
-    /*
-     * Base chrome colour — the second baseline the vendor skin assumes.
-     *
-     * The skin never sets `color` on its root: every control below it is
-     * `color: inherit` and every icon paints with `currentColor`, so the whole
-     * chrome inherits from the host page. Its palette is unmistakably designed
-     * for light-on-dark (the frame is `oklch(0 0 0)`, surfaces are white at
-     * ~10% alpha, text shadows are dark), and the vendor's own demo sits on a
-     * dark docs page — so it inherits white and nobody notices the omission.
+     * A readable label on the error dialog's button where `contrast-color()`
+     * is missing (Chrome and Edge before 147, Samsung Internet).
      *
-     * Our player is mounted inside a MUI surface whose `color` is
-     * `text.primary`, i.e. near-black, so the chrome inherited dark text and
-     * icons over its own black frame. Anchoring white here restores the
-     * intended contrast. Not theme-derived on purpose: the chrome is a fixed
-     * dark-glass surface regardless of the app's light/dark mode, exactly as
-     * the vendor designed it, and the `--media-accent-*` tokens remain the
-     * documented override surface.
+     * The vendor paints that label with `--media-primary-foreground`, the
+     * `contrast-color()` of the accent, and ships no fallback: without the
+     * function the colour is dropped and the label inherits the chrome's white,
+     * on the white accent. Here it gets what `contrast-color()` would pick,
+     * black or white by the accent's lightness; 0.5636 is the OKLab lightness of
+     * the grey that contrasts equally with both. The vendor's documented
+     * override, `--media-accent-text-color`, cannot be used: it also sets the
+     * hover and focus text of every button and menu row, which must stay white.
      */
-    color: "oklch(1 0 0)",
-    /*
-     * Drop the ±10s buttons on a small player.
-     *
-     * The THIRD and last piece of CSS we own, and the only one that is not
-     * fixing a vendor omission. The skip buttons are ours: neither packaged
-     * skin renders them, so no vendor rule decides when they should step aside
-     * — the stylesheet only dresses them once they exist. Two extra buttons are
-     * fine on a full-width player and crowd out the seek bar in a grid tile.
-     *
-     * Reuses the vendor's own mechanism instead of inventing one: `media-root`
-     * is the container the skin declares on its root, and `32rem` is the width
-     * at which the vendor itself starts shedding controls (it drops the
-     * captions button there). Same threshold, same query — so the chrome thins
-     * out in one step rather than at two competing breakpoints.
-     */
-    "@container media-root (width < 32rem)": {
-      /*
-       * Doubled class on purpose. The skin sets `display` on the button itself
-       * (`.media-default-skin .media-button--icon { display: grid }`), which
-       * scopes to three classes under this slot — so a single-class override
-       * here parses fine, emits fine, and loses the cascade without a word.
-       */
-      "& .media-button.media-button--seek": {
-        display: "none"
+    "@supports not (color: contrast-color(red))": {
+      "& .media-skin": {
+        "--media-primary-foreground": "oklch(from var(--media-primary) clamp(0, (0.5636 - l) * 1000, 1) 0 0)"
       }
     }
   })
 };
 export {
-  d as videoPlayerStyles
+  d as videoPlayerResponsiveStyles,
+  p as videoPlayerStyles
 };

package/components/VideoPlayer/VideojsDefaultSkin.styles.d.ts

@@ -1,8 +1,9 @@
-import { CSSObject, Theme } from '@mui/material/styles';
+import { CSSObject } from '@mui/material/styles';
 /**
- * Returns the vendor stylesheet converted to Emotion `CSSObject`s, keyed by the
- * vendor's original selectors. Spread it into the owning component's root slot
- * so the chrome is styled without any global CSS import.
+ * The vendor stylesheet converted to an Emotion style object, keyed by the
+ * vendor's own selectors, each written as a descendant of the slot (`& `).
+ * Spread it into the owning component's root slot so the chrome is styled
+ * without any global CSS import.
  */
-export declare const videojsDefaultSkinAllStyles: (theme: Theme) => Record<string, CSSObject>;
+export declare const videojsDefaultSkinStyles: CSSObject;
 //# sourceMappingURL=VideojsDefaultSkin.styles.d.ts.map

package/components/VideoPlayer/VideojsDefaultSkin.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideojsDefaultSkin.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/VideoPlayer/VideojsDefaultSkin.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA+pD7D;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,GAAI,OAAO,KAAK,KAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAOlF,CAAC"}
+{"version":3,"file":"VideojsDefaultSkin.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/VideoPlayer/VideojsDefaultSkin.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAkDtD;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,EAAE,SA+jFtC,CAAC"}