@m4l/gclick 0.32.0 → 0.33.0

package/components/VideoPlayer/VideoPlayer.d.ts

@@ -15,12 +15,12 @@ import { VideoPlayerProps } from './types';
  * state.
  *
  * Highlights:
- * - **One composed v10 skin** — the chrome (controls, layout, poster, native
- *   live button) is owned by `GclickVideoSkin`, assembled from the dependency's
+ * - **One composed v10 skin** — the chrome (controls, layout, poster, live
+ *   button) is owned by `GclickVideoSkin`, assembled from the dependency's
  *   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
+ *   shows the live button and hides the seek region; once it ends
  *   (`#EXT-X-ENDLIST` → `streamType: on-demand`) the seek bar + time displays
  *   appear. Driven by `isLive`, so the skin never swaps and the `<video>` is
  *   never remounted (no reload). See `GclickVideoSkin`.
@@ -34,9 +34,10 @@ import { VideoPlayerProps } from './types';
  *   `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`
- *   (full chrome) and `minimal` (leaner, built for dense grid tiles). Only the
- *   selected stylesheet is injected; see `VideoPlayer.styles.ts`.
+ * - **Two vendor skins** — `variant` picks between the dependency's Default
+ *   skin (`default`, the full chrome) and its Neutral skin (`minimal`, leaner,
+ *   built for dense grid tiles; Minimal before 10.0.0-rc.5). Only the 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

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":"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,aAAa,EACb,gBAAgB,EAChB,GAAG,GACJ,EAAE,gBAAgB,2DAiClB"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;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,aAAa,EACb,gBAAgB,EAChB,GAAG,GACJ,EAAE,gBAAgB,2DAiClB"}

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

@@ -40,11 +40,10 @@ export declare const videoPlayerResponsiveStyles: Record<VideoPlayerVariant, CSS
  *
  * 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.
+ * override, two of the vendor's documented tokens, and the responsive steps
+ * below (which also drop the ±10 s buttons on a narrow player). The skin resets
+ * its own buttons and sets its own colours, with its own fallbacks where a
+ * browser lacks a colour function, 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":"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"}
+{"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;AA8C5F;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,kBAAkB,EAAE,SAAS,CAwG7E,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,iBAAiB,EAAE,iBAsC/B,CAAC"}

package/components/VideoPlayer/VideoPlayer.styles.js

@@ -1,6 +1,6 @@
 import { VIDEO_PLAYER_VARIANTS as e } from "./constants.js";
 import { videojsDefaultSkinStyles as n } from "./VideojsDefaultSkin.styles.js";
-import { videojsMinimalSkinStyles as r } from "./VideojsMinimalSkin.styles.js";
+import { videojsNeutralSkinStyles as d } from "./VideojsNeutralSkin.styles.js";
 const t = {
   "@container media-root (width < 288px)": {
     '&[data-stream-type="live"] .media-settings-menu-trigger': {
@@ -22,7 +22,7 @@ const t = {
   "& .media-mute-button, & .media-settings-menu-trigger, & .media-pip-button, & .media-cast-button, & .media-airplay-button": {
     display: "none"
   }
-}, d = {
+}, r = {
   [e.default]: {
     container: "m4l-video-player / size",
     ...t,
@@ -34,9 +34,12 @@ const t = {
      * (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`.
+     * AirPlay and PiP) showed less than a 511px one. From 38rem both fit. A gap
+     * of the vendor's own remains: from 32rem the outputs join the bar, and with
+     * AirPlay (WebKit only) and PiP the time group stays under 16rem up to
+     * 523px, so the times are gone from 512 to 523px, as in the vendor's skin.
+     * 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": {
@@ -44,8 +47,22 @@ const t = {
       }
     },
     // One 40px row is 40% of a 100px tile; French live without mute needs 209px.
+    // With the outputs on, the bar and their cluster each reach 48px in from
+    // their edge of the tile, so they would meet below 96px, as in the vendor's
+    // skin: from 100px they keep 4px apart.
     "@container m4l-video-player (width < 216px) or (height < 100px)": {
       "& .media-skin:not(:fullscreen)": a
+    },
+    // The vertical volume popover reaches 108px above mute (a 72px slider, 12px
+    // of padding at each end and a 12px offset), and mute's top sits 46px above
+    // the tile's bottom edge, 48px from 32rem: on a tile under 156px tall the
+    // popover, in the top layer, would cover whatever sits above the tile. Mute
+    // stays a toggle. From 42rem mute sits 52px up, so there the popover still
+    // leaves a tile 156–159px tall by up to 4px.
+    "@container m4l-video-player (height < 156px)": {
+      "& .media-skin:not(:fullscreen) .media-volume-popover": {
+        display: "none"
+      }
     }
   },
   [e.minimal]: {
@@ -118,14 +135,14 @@ const t = {
      * 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 : n,
+    ...i?.variant === e.minimal ? d : n,
     position: "relative",
     width: "100%",
     height: "100%",
     // 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.
+    // vendor's reset leaves out (`:where(.media-skin) :before` only reaches its
+    // descendants); keep them `content-box`, as the native sheet computes them.
     boxSizing: "content-box",
     "& .media-skin::before, & .media-skin::after": {
       boxSizing: "content-box"
@@ -142,28 +159,10 @@ const t = {
     "--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],
-    /*
-     * A readable label on the error dialog's button where `contrast-color()`
-     * is missing (Chrome and Edge before 147, Samsung Internet).
-     *
-     * 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.
-     */
-    "@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)"
-      }
-    }
+    ...r[i?.variant ?? e.default]
   })
 };
 export {
-  d as videoPlayerResponsiveStyles,
+  r as videoPlayerResponsiveStyles,
   p as videoPlayerStyles
 };

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,MAAM,sBAAsB,CAAC;AAkDtD;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,EAAE,SA+jFtC,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,SA6+EtC,CAAC"}