@m4l/gclick 0.16.0 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/CameraStream/defaults/DefaultPhaseStreaming.d.ts +2 -2
- package/components/CameraStream/defaults/DefaultPhaseStreaming.d.ts.map +1 -1
- package/components/CameraStream/defaults/DefaultPhaseStreaming.js +23 -21
- package/components/CameraStream/types.d.ts +9 -0
- package/components/CameraStream/types.d.ts.map +1 -1
- package/components/VideoPlayer/VideoPlayer.d.ts +4 -1
- package/components/VideoPlayer/VideoPlayer.d.ts.map +1 -1
- package/components/VideoPlayer/VideoPlayer.js +28 -25
- package/components/VideoPlayer/VideoPlayer.styles.d.ts +7 -1
- package/components/VideoPlayer/VideoPlayer.styles.d.ts.map +1 -1
- package/components/VideoPlayer/VideoPlayer.styles.js +72 -10
- package/components/VideoPlayer/VideojsDefaultSkin.styles.d.ts +8 -0
- package/components/VideoPlayer/VideojsDefaultSkin.styles.d.ts.map +1 -0
- package/components/VideoPlayer/{VideojsSkin.styles.js → VideojsDefaultSkin.styles.js} +478 -248
- package/components/VideoPlayer/VideojsMinimalSkin.styles.d.ts +8 -0
- package/components/VideoPlayer/VideojsMinimalSkin.styles.d.ts.map +1 -0
- package/components/VideoPlayer/VideojsMinimalSkin.styles.js +1561 -0
- package/components/VideoPlayer/constants.d.ts +33 -0
- package/components/VideoPlayer/constants.d.ts.map +1 -1
- package/components/VideoPlayer/constants.js +20 -4
- package/components/VideoPlayer/hlsConfig.d.ts +21 -11
- package/components/VideoPlayer/hlsConfig.d.ts.map +1 -1
- package/components/VideoPlayer/hlsConfig.js +28 -21
- package/components/VideoPlayer/index.d.ts +2 -2
- package/components/VideoPlayer/index.d.ts.map +1 -1
- package/components/VideoPlayer/player.factory.d.ts +3 -3
- package/components/VideoPlayer/player.factory.d.ts.map +1 -1
- package/components/VideoPlayer/slots/VideoPlayerSlots.d.ts +1 -1
- package/components/VideoPlayer/subcomponents/GclickVideoSkin.d.ts +5 -2
- package/components/VideoPlayer/subcomponents/GclickVideoSkin.d.ts.map +1 -1
- package/components/VideoPlayer/subcomponents/GclickVideoSkin.js +34 -178
- package/components/VideoPlayer/subcomponents/VideoPlayerStage.d.ts +4 -3
- package/components/VideoPlayer/subcomponents/VideoPlayerStage.d.ts.map +1 -1
- package/components/VideoPlayer/subcomponents/VideoPlayerStage.js +43 -42
- package/components/VideoPlayer/subcomponents/skin/VideoControlBar.d.ts +6 -0
- package/components/VideoPlayer/subcomponents/skin/VideoControlBar.d.ts.map +1 -0
- package/components/VideoPlayer/subcomponents/skin/VideoControlBar.js +87 -0
- package/components/VideoPlayer/subcomponents/skin/VideoErrorDialog.d.ts +9 -0
- package/components/VideoPlayer/subcomponents/skin/VideoErrorDialog.d.ts.map +1 -0
- package/components/VideoPlayer/subcomponents/skin/VideoErrorDialog.js +17 -0
- package/components/VideoPlayer/subcomponents/skin/VideoInputBindings.d.ts +11 -0
- package/components/VideoPlayer/subcomponents/skin/VideoInputBindings.d.ts.map +1 -0
- package/components/VideoPlayer/subcomponents/skin/VideoInputBindings.js +19 -0
- package/components/VideoPlayer/subcomponents/skin/VideoSettingsMenu.d.ts +9 -0
- package/components/VideoPlayer/subcomponents/skin/VideoSettingsMenu.d.ts.map +1 -0
- package/components/VideoPlayer/subcomponents/skin/VideoSettingsMenu.js +48 -0
- package/components/VideoPlayer/subcomponents/skin/primitives.d.ts +81 -0
- package/components/VideoPlayer/subcomponents/skin/primitives.d.ts.map +1 -0
- package/components/VideoPlayer/subcomponents/skin/primitives.js +142 -0
- package/components/VideoPlayer/subcomponents/skin/skinVariant.d.ts +19 -0
- package/components/VideoPlayer/subcomponents/skin/skinVariant.d.ts.map +1 -0
- package/components/VideoPlayer/subcomponents/skin/skinVariant.js +23 -0
- package/components/VideoPlayer/types.d.ts +25 -6
- package/components/VideoPlayer/types.d.ts.map +1 -1
- package/index.js +123 -122
- package/package.json +4 -4
- package/components/VideoPlayer/VideojsSkin.styles.d.ts +0 -9
- package/components/VideoPlayer/VideojsSkin.styles.d.ts.map +0 -1
|
@@ -4,7 +4,7 @@ import { CameraStreamPhaseStreamingSlotProps } from '../types';
|
|
|
4
4
|
* `<VideoPlayer>`, rendered for both the `streaming` and `ended` FSM phases
|
|
5
5
|
* (same component identity so the player never remounts between them). Owns
|
|
6
6
|
* the "is the manifest still live?" local flag so we can render the provided
|
|
7
|
-
* `LiveBadgeSlot` only while
|
|
7
|
+
* `LiveBadgeSlot` only while hls.js reports `Infinity` duration. As soon as
|
|
8
8
|
* `#EXT-X-ENDLIST` lands and playback reaches the end, the slot dispatches
|
|
9
9
|
* `onEnded` so the router can mark the FSM as `ended` — the player stays
|
|
10
10
|
* mounted on the frozen last frame and the provided `ReplayBadgeSlot` offers
|
|
@@ -28,5 +28,5 @@ import { CameraStreamPhaseStreamingSlotProps } from '../types';
|
|
|
28
28
|
* registration is null-safe: if the slot is rendered without a provider (e.g.
|
|
29
29
|
* an isolated test), it simply skips registering.
|
|
30
30
|
*/
|
|
31
|
-
export declare function DefaultPhaseStreaming({ playerKey, hlsUrl, ended, onEnded, onReplay, replayLabel, onDurationChange, LiveBadgeSlot, ReplayBadgeSlot, }: CameraStreamPhaseStreamingSlotProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
31
|
+
export declare function DefaultPhaseStreaming({ playerKey, hlsUrl, ended, onEnded, onReplay, replayLabel, onDurationChange, variant, LiveBadgeSlot, ReplayBadgeSlot, }: CameraStreamPhaseStreamingSlotProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
32
32
|
//# sourceMappingURL=DefaultPhaseStreaming.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultPhaseStreaming.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/CameraStream/defaults/DefaultPhaseStreaming.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,mCAAmC,EAAE,MAAM,UAAU,CAAC;AAcpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,MAAM,EACN,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,eAAe,GAChB,EAAE,mCAAmC,
|
|
1
|
+
{"version":3,"file":"DefaultPhaseStreaming.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/CameraStream/defaults/DefaultPhaseStreaming.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,mCAAmC,EAAE,MAAM,UAAU,CAAC;AAcpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,MAAM,EACN,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,OAAO,EACP,aAAa,EACb,eAAe,GAChB,EAAE,mCAAmC,oDA4FrC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as C, useRef as c, useContext as
|
|
3
|
-
import { CameraStreamPlayersContext as
|
|
4
|
-
import { VideoPlayer as
|
|
5
|
-
const
|
|
6
|
-
function
|
|
1
|
+
import { jsxs as F, jsx as i } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { useState as C, useRef as c, useContext as L, useEffect as l, useCallback as E } from "react";
|
|
3
|
+
import { CameraStreamPlayersContext as O } from "../../CameraStreams/CameraStreamPlayersContext.js";
|
|
4
|
+
import { VideoPlayer as I } from "../../VideoPlayer/VideoPlayer.js";
|
|
5
|
+
const N = 3, b = 2, j = 2500;
|
|
6
|
+
function U({
|
|
7
7
|
playerKey: t,
|
|
8
8
|
hlsUrl: f,
|
|
9
9
|
ended: m,
|
|
@@ -11,10 +11,11 @@ function V({
|
|
|
11
11
|
onReplay: p,
|
|
12
12
|
replayLabel: _,
|
|
13
13
|
onDurationChange: R,
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
variant: D,
|
|
15
|
+
LiveBadgeSlot: g,
|
|
16
|
+
ReplayBadgeSlot: P
|
|
16
17
|
}) {
|
|
17
|
-
const [
|
|
18
|
+
const [x, r] = C(!0), [h, S] = C(0), A = c(null), n = L(O), o = c(0), u = c(0), a = c(null);
|
|
18
19
|
l(() => {
|
|
19
20
|
r(!0), S(0), o.current = 0, u.current = 0;
|
|
20
21
|
}, [f]), l(() => () => {
|
|
@@ -24,32 +25,33 @@ function V({
|
|
|
24
25
|
if (!(!n || !e))
|
|
25
26
|
return n.register(t, e), () => n.unregister(t);
|
|
26
27
|
}, [n, t, h]);
|
|
27
|
-
const
|
|
28
|
+
const y = E((e, s) => {
|
|
28
29
|
r(s), !s && Number.isFinite(e) && (o.current = e), R(e, s);
|
|
29
|
-
}, [R]),
|
|
30
|
-
if (o.current <
|
|
30
|
+
}, [R]), M = E(() => {
|
|
31
|
+
if (o.current < N && u.current < b) {
|
|
31
32
|
u.current += 1, r(!0), a.current = setTimeout(() => {
|
|
32
|
-
o.current = 0, S((
|
|
33
|
-
},
|
|
33
|
+
o.current = 0, S((T) => T + 1);
|
|
34
|
+
}, j);
|
|
34
35
|
return;
|
|
35
36
|
}
|
|
36
37
|
r(!1), d();
|
|
37
38
|
}, [d]);
|
|
38
|
-
return /* @__PURE__ */
|
|
39
|
-
|
|
40
|
-
m && /* @__PURE__ */ i(
|
|
39
|
+
return /* @__PURE__ */ F("div", { "data-stream-player-key": t, style: { width: "100%", height: "100%" }, children: [
|
|
40
|
+
x && !m && /* @__PURE__ */ i(g, {}),
|
|
41
|
+
m && /* @__PURE__ */ i(P, { onReplay: p, replayLabel: _ }),
|
|
41
42
|
/* @__PURE__ */ i(
|
|
42
|
-
|
|
43
|
+
I,
|
|
43
44
|
{
|
|
44
45
|
ref: A,
|
|
45
46
|
src: f,
|
|
46
|
-
|
|
47
|
-
|
|
47
|
+
variant: D,
|
|
48
|
+
onDurationChange: y,
|
|
49
|
+
onEnded: M
|
|
48
50
|
},
|
|
49
51
|
h
|
|
50
52
|
)
|
|
51
53
|
] });
|
|
52
54
|
}
|
|
53
55
|
export {
|
|
54
|
-
|
|
56
|
+
U as DefaultPhaseStreaming
|
|
55
57
|
};
|
|
@@ -4,6 +4,7 @@ import { Theme } from '@mui/material/styles';
|
|
|
4
4
|
import { COMPONENT_CAMERA_STREAM_KEY_COMPONENT } from './constants';
|
|
5
5
|
import { CameraStreamSlotsStyled } from './slots/slots';
|
|
6
6
|
import { PlayerKey, StreamPhase } from '../CameraStreams';
|
|
7
|
+
import { VideoPlayerVariant } from '../VideoPlayer/types';
|
|
7
8
|
/**
|
|
8
9
|
* Props received by the `root` slot. The router always passes the player key
|
|
9
10
|
* and the active phase kind via `data-*` attributes so downstream automation
|
|
@@ -88,6 +89,14 @@ export interface CameraStreamPhaseStreamingSlotProps {
|
|
|
88
89
|
* custom streaming views may use it or ignore it.
|
|
89
90
|
*/
|
|
90
91
|
ReplayBadgeSlot: ElementType<CameraStreamReplayBadgeSlotProps>;
|
|
92
|
+
/**
|
|
93
|
+
* Which vendor skin the tile's player wears. Left to the consumer on purpose:
|
|
94
|
+
* a dense wall of tiles usually wants `'minimal'`, while a single large tile
|
|
95
|
+
* is fine with the full chrome, and only the consumer knows which it is
|
|
96
|
+
* rendering. Pass it through `slotProps.phaseStreaming`. Defaults to the
|
|
97
|
+
* player's own default when omitted.
|
|
98
|
+
*/
|
|
99
|
+
variant?: VideoPlayerVariant;
|
|
91
100
|
}
|
|
92
101
|
export interface CameraStreamPhaseChannelBusySlotProps {
|
|
93
102
|
playerKey: PlayerKey;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/CameraStream/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,KAAK,EAAE,qCAAqC,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/D;;;;;GAKG;AACH,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,iBAAiB,EAAE,SAAS,CAAC;IAC7B,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;GAKG;AACH,MAAM,WAAW,0BAA0B;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;;;;GAKG;AACH,MAAM,MAAM,8BAA8B,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,8BAA8B;IAC7C,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oCAAoC;IACnD,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iCAAiC;IAChD,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,mCAAmC;IAClD,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iFAAiF;IACjF,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,oFAAoF;IACpF,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D;;;;OAIG;IACH,aAAa,EAAE,WAAW,CAAC,8BAA8B,CAAC,CAAC;IAC3D;;;;OAIG;IACH,eAAe,EAAE,WAAW,CAAC,gCAAgC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/CameraStream/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -30,8 +30,11 @@ import { VideoPlayerProps } from './types';
|
|
|
30
30
|
* couples to the parent surface (see `VideoPlayer.styles.ts`).
|
|
31
31
|
* - **Poster** — `poster` is forwarded to the skin's poster slot (e.g. a cloud
|
|
32
32
|
* recording snapshot).
|
|
33
|
+
* - **Two vendor skins** — `variant` picks between the dependency's `default`
|
|
34
|
+
* (full chrome) and `minimal` (leaner, built for dense grid tiles). Only the
|
|
35
|
+
* selected stylesheet is injected; see `VideoPlayer.styles.ts`.
|
|
33
36
|
* - **React 19 ref-as-prop** — `ref` resolves to a {@link VideoPlayerControl}
|
|
34
37
|
* without `forwardRef`.
|
|
35
38
|
*/
|
|
36
|
-
export declare function VideoPlayer({ src, poster, className, onReady, onPlay, onPause, onEnded, onWaiting, onError, onDurationChange, ref, }: VideoPlayerProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
|
|
39
|
+
export declare function VideoPlayer({ src, poster, variant, className, onReady, onPlay, onPause, onEnded, onWaiting, onError, onDurationChange, ref, }: VideoPlayerProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
|
|
37
40
|
//# sourceMappingURL=VideoPlayer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/VideoPlayer/VideoPlayer.tsx"],"names":[],"mappings":"
|
|
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,SAAS,EACT,OAAO,EACP,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,GAAG,GACJ,EAAE,gBAAgB,2DA4BlB"}
|
|
@@ -1,36 +1,39 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { StreamPlayer as
|
|
3
|
-
import { VideoPlayerStage as
|
|
4
|
-
|
|
1
|
+
import { jsx as o } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { StreamPlayer as P } from "./player.factory.js";
|
|
3
|
+
import { VideoPlayerStage as V } from "./subcomponents/VideoPlayerStage.js";
|
|
4
|
+
import { VIDEO_PLAYER_VARIANTS as y } from "./constants.js";
|
|
5
|
+
function x({
|
|
5
6
|
src: r,
|
|
6
|
-
poster:
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
poster: e,
|
|
8
|
+
variant: t = y.default,
|
|
9
|
+
className: i,
|
|
10
|
+
onReady: m,
|
|
11
|
+
onPlay: f,
|
|
12
|
+
onPause: l,
|
|
11
13
|
onEnded: n,
|
|
12
|
-
onWaiting:
|
|
13
|
-
onError:
|
|
14
|
-
onDurationChange:
|
|
15
|
-
ref:
|
|
14
|
+
onWaiting: a,
|
|
15
|
+
onError: d,
|
|
16
|
+
onDurationChange: p,
|
|
17
|
+
ref: u
|
|
16
18
|
}) {
|
|
17
|
-
return r ? /* @__PURE__ */
|
|
18
|
-
|
|
19
|
+
return r ? /* @__PURE__ */ o(P.Provider, { children: /* @__PURE__ */ o(
|
|
20
|
+
V,
|
|
19
21
|
{
|
|
20
22
|
src: r,
|
|
21
|
-
poster:
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
poster: e,
|
|
24
|
+
variant: t,
|
|
25
|
+
className: i,
|
|
26
|
+
controlRef: u,
|
|
27
|
+
onReady: m,
|
|
28
|
+
onPlay: f,
|
|
29
|
+
onPause: l,
|
|
27
30
|
onEnded: n,
|
|
28
|
-
onWaiting:
|
|
29
|
-
onError:
|
|
30
|
-
onDurationChange:
|
|
31
|
+
onWaiting: a,
|
|
32
|
+
onError: d,
|
|
33
|
+
onDurationChange: p
|
|
31
34
|
}
|
|
32
35
|
) }) : null;
|
|
33
36
|
}
|
|
34
37
|
export {
|
|
35
|
-
|
|
38
|
+
x as VideoPlayer
|
|
36
39
|
};
|
|
@@ -4,7 +4,7 @@ import { VideoPlayerStyles } from './types';
|
|
|
4
4
|
* chrome, and its stylesheet is applied here: libraries must not import global
|
|
5
5
|
* vendor CSS (it never loads in MFs — the host's MFLoader only fetches the JS
|
|
6
6
|
* entry), so `@videojs/react/video/skin.css` is translated 1:1 to Emotion
|
|
7
|
-
* object styles (`
|
|
7
|
+
* object styles (`Videojs*Skin.styles.ts`, same pattern as Leaflet in `GpsMap`)
|
|
8
8
|
* and spread into the `root` slot. Emotion scopes every skin selector under
|
|
9
9
|
* this slot, so nothing leaks into the host's global CSS. On top of that we
|
|
10
10
|
* only size the wrapper and flatten the player frame: the skin reads
|
|
@@ -19,6 +19,12 @@ import { VideoPlayerStyles } from './types';
|
|
|
19
19
|
* `'& .media-default-skin .media-controls'`, not `'& .media-controls'`).
|
|
20
20
|
* Root-level custom properties (like `--media-border-radius` below) keep the
|
|
21
21
|
* plain ergonomics and are the vendor's intended override surface.
|
|
22
|
+
*
|
|
23
|
+
* Beyond `--media-border-radius` there are two more declarations here, both
|
|
24
|
+
* documented inline below: a user-agent button reset and the base chrome
|
|
25
|
+
* colour. Neither is per-control styling — they supply baselines the vendor
|
|
26
|
+
* skin assumes from the host page but never declares, so the "no per-control
|
|
27
|
+
* CSS" contract still holds.
|
|
22
28
|
*/
|
|
23
29
|
export declare const videoPlayerStyles: VideoPlayerStyles;
|
|
24
30
|
//# sourceMappingURL=VideoPlayer.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VideoPlayer.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/VideoPlayer/VideoPlayer.styles.ts"],"names":[],"mappings":"
|
|
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,iBA4E/B,CAAC"}
|
|
@@ -1,19 +1,81 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { VIDEO_PLAYER_VARIANTS as r } from "./constants.js";
|
|
2
|
+
import { videojsDefaultSkinAllStyles as t } from "./VideojsDefaultSkin.styles.js";
|
|
3
|
+
import { videojsMinimalSkinAllStyles as e } from "./VideojsMinimalSkin.styles.js";
|
|
4
|
+
const d = {
|
|
3
5
|
/** Wrapper that scopes the vendor skin styles, sizes the composed skin and flattens the player frame. */
|
|
4
|
-
root: ({ theme:
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
root: ({ theme: o, ownerState: i }) => ({
|
|
7
|
+
/*
|
|
8
|
+
* The whole official v10 skin stylesheet for the selected variant, scoped
|
|
9
|
+
* under this slot.
|
|
10
|
+
*
|
|
11
|
+
* ONE sheet, never both. The two vendor stylesheets are independent (they
|
|
12
|
+
* key off different root classes, so they would not collide), but spreading
|
|
13
|
+
* both would inject ~1900 declarations that never match, and would emit
|
|
14
|
+
* `@keyframes media-shake` and `@property --media-progress-fill` twice into
|
|
15
|
+
* the global namespace — Emotion cannot scope those, and both sheets declare
|
|
16
|
+
* them identically. Picking here keeps exactly one copy alive.
|
|
17
|
+
*/
|
|
18
|
+
...i?.variant === r.minimal ? e(o) : t(o),
|
|
7
19
|
position: "relative",
|
|
8
20
|
width: "100%",
|
|
9
21
|
height: "100%",
|
|
10
22
|
// Flatten the player frame (the skin defaults to a 2rem radius). Cascades
|
|
11
|
-
// as a CSS custom property into the skin's elements.
|
|
12
|
-
//
|
|
13
|
-
//
|
|
14
|
-
"--media-border-radius": "0px"
|
|
23
|
+
// as a CSS custom property into the skin's elements. The live ↔ VOD
|
|
24
|
+
// control-bar swap is handled by the composed skin itself
|
|
25
|
+
// (`GclickVideoSkin`, driven by `isLive`), not CSS.
|
|
26
|
+
"--media-border-radius": "0px",
|
|
27
|
+
/*
|
|
28
|
+
* User-agent button reset — restores the baseline the vendor skin assumes.
|
|
29
|
+
*
|
|
30
|
+
* The skin's only global button rule is `font: inherit`, and it neutralizes
|
|
31
|
+
* the UA defaults per class rather than globally — `.media-button` gets
|
|
32
|
+
* `border: none`, `.media-button--subtle` and `.media-menu__item` get
|
|
33
|
+
* `color: inherit`. But `.media-menu__back` gets NEITHER: `Menu.Back`
|
|
34
|
+
* renders it as a bare `<button>` carrying only that class, and neither of
|
|
35
|
+
* its two rules touches `color`, `background` or `border`.
|
|
36
|
+
*
|
|
37
|
+
* So the back row of every settings submenu kept Chrome's UA button
|
|
38
|
+
* defaults: `background-color: buttonface` + `border: 2px outset` (which
|
|
39
|
+
* the skin's own `border-radius` rounded into a grey pill) and
|
|
40
|
+
* `color: buttontext`, i.e. pure black text over the dark glass. Its
|
|
41
|
+
* sibling rows looked fine because `Menu.RadioItem` renders `<div>`, and
|
|
42
|
+
* the control-bar buttons looked fine because they carry
|
|
43
|
+
* `.media-button--subtle`. Only this one element falls through.
|
|
44
|
+
*
|
|
45
|
+
* The vendor's demo does not hit it because its page ships Tailwind
|
|
46
|
+
* Preflight, which zeroes button background/border and sets
|
|
47
|
+
* `color: inherit`; nothing in our MFs does. This is a reset, not styling:
|
|
48
|
+
* it paints nothing, and every skin rule outranks it (four classes vs one
|
|
49
|
+
* class + element), so it cannot override anything the vendor sets.
|
|
50
|
+
* Reported upstream — the inconsistency is on their side; drop this once
|
|
51
|
+
* `.media-menu__back` resets its own UA defaults.
|
|
52
|
+
*/
|
|
53
|
+
"& button": {
|
|
54
|
+
color: "inherit",
|
|
55
|
+
background: "none",
|
|
56
|
+
border: "none"
|
|
57
|
+
},
|
|
58
|
+
/*
|
|
59
|
+
* Base chrome colour — the second baseline the vendor skin assumes.
|
|
60
|
+
*
|
|
61
|
+
* The skin never sets `color` on its root: every control below it is
|
|
62
|
+
* `color: inherit` and every icon paints with `currentColor`, so the whole
|
|
63
|
+
* chrome inherits from the host page. Its palette is unmistakably designed
|
|
64
|
+
* for light-on-dark (the frame is `oklch(0 0 0)`, surfaces are white at
|
|
65
|
+
* ~10% alpha, text shadows are dark), and the vendor's own demo sits on a
|
|
66
|
+
* dark docs page — so it inherits white and nobody notices the omission.
|
|
67
|
+
*
|
|
68
|
+
* Our player is mounted inside a MUI surface whose `color` is
|
|
69
|
+
* `text.primary`, i.e. near-black, so the chrome inherited dark text and
|
|
70
|
+
* icons over its own black frame. Anchoring white here restores the
|
|
71
|
+
* intended contrast. Not theme-derived on purpose: the chrome is a fixed
|
|
72
|
+
* dark-glass surface regardless of the app's light/dark mode, exactly as
|
|
73
|
+
* the vendor designed it, and `--media-color-primary` remains the
|
|
74
|
+
* documented override surface.
|
|
75
|
+
*/
|
|
76
|
+
color: "oklch(1 0 0)"
|
|
15
77
|
})
|
|
16
78
|
};
|
|
17
79
|
export {
|
|
18
|
-
|
|
80
|
+
d as videoPlayerStyles
|
|
19
81
|
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { CSSObject, Theme } from '@mui/material/styles';
|
|
2
|
+
/**
|
|
3
|
+
* Returns the vendor stylesheet converted to Emotion `CSSObject`s, keyed by the
|
|
4
|
+
* vendor's original selectors. Spread it into the owning component's root slot
|
|
5
|
+
* so the chrome is styled without any global CSS import.
|
|
6
|
+
*/
|
|
7
|
+
export declare const videojsDefaultSkinAllStyles: (theme: Theme) => Record<string, CSSObject>;
|
|
8
|
+
//# sourceMappingURL=VideojsDefaultSkin.styles.d.ts.map
|
|
@@ -0,0 +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;AA6hD7D;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,GAAI,OAAO,KAAK,KAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAOlF,CAAC"}
|