@hanifhan1f/vidstack-react 1.12.19 → 1.12.21

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.
Files changed (59) hide show
  1. package/dev/chunks/vidstack-BPymmnxm.js +551 -0
  2. package/dev/chunks/vidstack-BSpAxhO6.js +643 -0
  3. package/dev/chunks/vidstack-BoLZuw80.js +34 -0
  4. package/dev/chunks/vidstack-CFOPpDTy.js +476 -0
  5. package/dev/chunks/vidstack-CXrXBlpD.js +11692 -0
  6. package/dev/chunks/vidstack-DOtIyh4c.js +288 -0
  7. package/dev/chunks/vidstack-DY2iivhG.js +84 -0
  8. package/dev/chunks/vidstack-Dov8gjdq.js +401 -0
  9. package/dev/chunks/vidstack-DwdhbP5c.js +189 -0
  10. package/dev/chunks/vidstack-DweQYzVw.js +180 -0
  11. package/dev/chunks/vidstack-H9OdEKUQ.js +375 -0
  12. package/dev/chunks/vidstack-KntYDWMe.js +668 -0
  13. package/dev/chunks/vidstack-NCBSBZE-.js +61 -0
  14. package/dev/chunks/vidstack-UWMPvwsa.js +1537 -0
  15. package/dev/player/vidstack-default-components.js +5 -5
  16. package/dev/player/vidstack-default-layout.js +5 -5
  17. package/dev/player/vidstack-plyr-layout.js +4 -4
  18. package/dev/player/vidstack-remotion.js +3 -3
  19. package/dev/vidstack.js +7 -7
  20. package/package.json +1 -1
  21. package/player/styles/default/layouts/video.css +94 -77
  22. package/prod/chunks/vidstack-B9nEslvl.js +11197 -0
  23. package/prod/chunks/vidstack-BOObgZd8.js +504 -0
  24. package/prod/chunks/vidstack-B_wD853-.js +386 -0
  25. package/prod/chunks/vidstack-C4tNkfXj.js +470 -0
  26. package/prod/chunks/vidstack-CNJwYQRW.js +84 -0
  27. package/prod/chunks/vidstack-CVzVtf1j.js +61 -0
  28. package/prod/chunks/vidstack-CiQEyk_l.js +189 -0
  29. package/prod/chunks/vidstack-CiTWSpv_.js +34 -0
  30. package/prod/chunks/vidstack-CzjHdPIT.js +375 -0
  31. package/prod/chunks/vidstack-Djmla_FM.js +545 -0
  32. package/prod/chunks/vidstack-DpQw1Y33.js +663 -0
  33. package/prod/chunks/vidstack-VTpvHAdU.js +1537 -0
  34. package/prod/chunks/vidstack-dbLRgf2L.js +159 -0
  35. package/prod/chunks/vidstack-rHvQ8f6c.js +288 -0
  36. package/prod/player/vidstack-default-components.js +5 -5
  37. package/prod/player/vidstack-default-layout.js +5 -5
  38. package/prod/player/vidstack-plyr-layout.js +4 -4
  39. package/prod/player/vidstack-remotion.js +3 -3
  40. package/prod/vidstack.js +7 -7
  41. package/server/chunks/vidstack-BV_VpWlJ.js +1537 -0
  42. package/server/chunks/vidstack-ByG5MvLs.js +545 -0
  43. package/server/chunks/vidstack-C0xOpWYR.js +470 -0
  44. package/server/chunks/vidstack-C481iXqe.js +386 -0
  45. package/server/chunks/vidstack-CbNRZgUA.js +11197 -0
  46. package/server/chunks/vidstack-D7D9kiW6.js +34 -0
  47. package/server/chunks/vidstack-DJJmNib6.js +504 -0
  48. package/server/chunks/vidstack-DWt5LAKE.js +375 -0
  49. package/server/chunks/vidstack-DsZKgA8y.js +663 -0
  50. package/server/chunks/vidstack-NXcLNXxO.js +84 -0
  51. package/server/chunks/vidstack-OKdxH1xx.js +189 -0
  52. package/server/chunks/vidstack-iVN8uBAv.js +288 -0
  53. package/server/chunks/vidstack-m8aA99tE.js +159 -0
  54. package/server/chunks/vidstack-rUHVQoo3.js +61 -0
  55. package/server/player/vidstack-default-components.js +5 -5
  56. package/server/player/vidstack-default-layout.js +5 -5
  57. package/server/player/vidstack-plyr-layout.js +4 -4
  58. package/server/player/vidstack-remotion.js +3 -3
  59. package/server/vidstack.js +7 -7
@@ -0,0 +1,180 @@
1
+ "use client"
2
+
3
+ import { IS_CHROME, IS_IOS, canGoogleCastSrc, IS_SERVER, loadScript } from './vidstack-CXrXBlpD.js';
4
+ import { listenEvent, peek } from './vidstack-D_bWd66h.js';
5
+
6
+ function getCastFrameworkURL() {
7
+ return "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1";
8
+ }
9
+ function hasLoadedCastFramework() {
10
+ return !!window.cast?.framework;
11
+ }
12
+ function isCastAvailable() {
13
+ return !!window.chrome?.cast?.isAvailable;
14
+ }
15
+ function isCastConnected() {
16
+ return getCastContext().getCastState() === cast.framework.CastState.CONNECTED;
17
+ }
18
+ function getCastContext() {
19
+ return window.cast.framework.CastContext.getInstance();
20
+ }
21
+ function getCastSession() {
22
+ return getCastContext().getCurrentSession();
23
+ }
24
+ function getCastSessionMedia() {
25
+ return getCastSession()?.getSessionObj().media[0];
26
+ }
27
+ function hasActiveCastSession(src) {
28
+ const contentId = getCastSessionMedia()?.media.contentId;
29
+ return contentId === src?.src;
30
+ }
31
+ function getDefaultCastOptions() {
32
+ return {
33
+ language: "en-US",
34
+ autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED,
35
+ receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
36
+ resumeSavedSession: true,
37
+ androidReceiverCompatible: true
38
+ };
39
+ }
40
+ function getCastErrorMessage(code) {
41
+ const defaultMessage = `Google Cast Error Code: ${code}`;
42
+ {
43
+ switch (code) {
44
+ case chrome.cast.ErrorCode.API_NOT_INITIALIZED:
45
+ return "The API is not initialized.";
46
+ case chrome.cast.ErrorCode.CANCEL:
47
+ return "The operation was canceled by the user";
48
+ case chrome.cast.ErrorCode.CHANNEL_ERROR:
49
+ return "A channel to the receiver is not available.";
50
+ case chrome.cast.ErrorCode.EXTENSION_MISSING:
51
+ return "The Cast extension is not available.";
52
+ case chrome.cast.ErrorCode.INVALID_PARAMETER:
53
+ return "The parameters to the operation were not valid.";
54
+ case chrome.cast.ErrorCode.RECEIVER_UNAVAILABLE:
55
+ return "No receiver was compatible with the session request.";
56
+ case chrome.cast.ErrorCode.SESSION_ERROR:
57
+ return "A session could not be created, or a session was invalid.";
58
+ case chrome.cast.ErrorCode.TIMEOUT:
59
+ return "The operation timed out.";
60
+ default:
61
+ return defaultMessage;
62
+ }
63
+ }
64
+ }
65
+ function listenCastContextEvent(type, handler) {
66
+ return listenEvent(getCastContext(), type, handler);
67
+ }
68
+
69
+ class GoogleCastLoader {
70
+ name = "google-cast";
71
+ target;
72
+ #player;
73
+ /**
74
+ * @see {@link https://developers.google.com/cast/docs/reference/web_sender/cast.framework.CastContext}
75
+ */
76
+ get cast() {
77
+ return getCastContext();
78
+ }
79
+ mediaType() {
80
+ return "video";
81
+ }
82
+ canPlay(src) {
83
+ return IS_CHROME && !IS_IOS && canGoogleCastSrc(src);
84
+ }
85
+ async prompt(ctx) {
86
+ let loadEvent, openEvent, errorEvent;
87
+ try {
88
+ loadEvent = await this.#loadCastFramework(ctx);
89
+ if (!this.#player) {
90
+ this.#player = new cast.framework.RemotePlayer();
91
+ new cast.framework.RemotePlayerController(this.#player);
92
+ }
93
+ openEvent = ctx.player.createEvent("google-cast-prompt-open", {
94
+ trigger: loadEvent
95
+ });
96
+ ctx.player.dispatchEvent(openEvent);
97
+ this.#notifyRemoteStateChange(ctx, "connecting", openEvent);
98
+ await this.#showPrompt(peek(ctx.$props.googleCast));
99
+ ctx.$state.remotePlaybackInfo.set({
100
+ deviceName: getCastSession()?.getCastDevice().friendlyName
101
+ });
102
+ if (isCastConnected()) this.#notifyRemoteStateChange(ctx, "connected", openEvent);
103
+ } catch (code) {
104
+ const error = code instanceof Error ? code : this.#createError(
105
+ (code + "").toUpperCase(),
106
+ "Prompt failed."
107
+ );
108
+ errorEvent = ctx.player.createEvent("google-cast-prompt-error", {
109
+ detail: error,
110
+ trigger: openEvent ?? loadEvent,
111
+ cancelable: true
112
+ });
113
+ ctx.player.dispatch(errorEvent);
114
+ this.#notifyRemoteStateChange(
115
+ ctx,
116
+ isCastConnected() ? "connected" : "disconnected",
117
+ errorEvent
118
+ );
119
+ throw error;
120
+ } finally {
121
+ ctx.player.dispatch("google-cast-prompt-close", {
122
+ trigger: errorEvent ?? openEvent ?? loadEvent
123
+ });
124
+ }
125
+ }
126
+ async load(ctx) {
127
+ if (IS_SERVER) {
128
+ throw Error("[vidstack] can not load google cast provider server-side");
129
+ }
130
+ if (!this.#player) {
131
+ throw Error("[vidstack] google cast player was not initialized");
132
+ }
133
+ return new (await import('./vidstack-CFOPpDTy.js')).GoogleCastProvider(this.#player, ctx);
134
+ }
135
+ async #loadCastFramework(ctx) {
136
+ if (hasLoadedCastFramework()) return;
137
+ const loadStartEvent = ctx.player.createEvent("google-cast-load-start");
138
+ ctx.player.dispatch(loadStartEvent);
139
+ await loadScript(getCastFrameworkURL());
140
+ await customElements.whenDefined("google-cast-launcher");
141
+ const loadedEvent = ctx.player.createEvent("google-cast-loaded", { trigger: loadStartEvent });
142
+ ctx.player.dispatch(loadedEvent);
143
+ if (!isCastAvailable()) {
144
+ throw this.#createError("CAST_NOT_AVAILABLE", "Google Cast not available on this platform.");
145
+ }
146
+ return loadedEvent;
147
+ }
148
+ async #showPrompt(options) {
149
+ this.#setOptions(options);
150
+ const errorCode = await this.cast.requestSession();
151
+ if (errorCode) {
152
+ throw this.#createError(
153
+ errorCode.toUpperCase(),
154
+ getCastErrorMessage(errorCode)
155
+ );
156
+ }
157
+ }
158
+ #setOptions(options) {
159
+ this.cast?.setOptions({
160
+ ...getDefaultCastOptions(),
161
+ ...options
162
+ });
163
+ }
164
+ #notifyRemoteStateChange(ctx, state, trigger) {
165
+ const detail = { type: "google-cast", state };
166
+ ctx.notify("remote-playback-change", detail, trigger);
167
+ }
168
+ #createError(code, message) {
169
+ const error = Error(message);
170
+ error.code = code;
171
+ return error;
172
+ }
173
+ }
174
+
175
+ var loader = /*#__PURE__*/Object.freeze({
176
+ __proto__: null,
177
+ GoogleCastLoader: GoogleCastLoader
178
+ });
179
+
180
+ export { getCastContext, getCastErrorMessage, getCastSession, getCastSessionMedia, hasActiveCastSession, listenCastContextEvent, loader };
@@ -0,0 +1,375 @@
1
+ "use client"
2
+
3
+ import * as React from 'react';
4
+ import { createReactComponent, composeRefs, listenEvent, useReactScope, scoped, computed, signal, effect, EventsController, useSignal } from './vidstack-D_bWd66h.js';
5
+ import { MediaAnnouncerInstance, Primitive, ControlsInstance, ControlsGroupInstance, TooltipInstance, TooltipTriggerInstance, TooltipContentInstance, GoogleCastButtonInstance, QualitySliderInstance, AudioGainSliderInstance, SpeedSliderInstance, useMediaState, watchActiveTextTrack, CaptionsInstance, formatSpokenTime, formatTime } from './vidstack-CXrXBlpD.js';
6
+ import { sliderCallbacks, Preview, Steps, Thumb, Track as Track$1, TrackFill as TrackFill$1, Value, useMediaContext } from './vidstack-KntYDWMe.js';
7
+
8
+ const MediaAnnouncerBridge = createReactComponent(MediaAnnouncerInstance, {
9
+ events: ["onChange"]
10
+ });
11
+ const MediaAnnouncer = React.forwardRef(
12
+ ({ style, children, ...props }, forwardRef) => {
13
+ return /* @__PURE__ */ React.createElement(MediaAnnouncerBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
14
+ Primitive.div,
15
+ {
16
+ ...props2,
17
+ style: { display: "contents", ...style },
18
+ ref: composeRefs(props2.ref, forwardRef)
19
+ },
20
+ children
21
+ ));
22
+ }
23
+ );
24
+ MediaAnnouncer.displayName = "MediaAnnouncer";
25
+
26
+ const ControlsBridge = createReactComponent(ControlsInstance);
27
+ const Root$5 = React.forwardRef(({ children, ...props }, forwardRef) => {
28
+ return /* @__PURE__ */ React.createElement(ControlsBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
29
+ Primitive.div,
30
+ {
31
+ ...props2,
32
+ ref: composeRefs(props2.ref, forwardRef)
33
+ },
34
+ children
35
+ ));
36
+ });
37
+ Root$5.displayName = "Controls";
38
+ const ControlsGroupBridge = createReactComponent(ControlsGroupInstance);
39
+ const Group = React.forwardRef(({ children, ...props }, forwardRef) => {
40
+ return /* @__PURE__ */ React.createElement(ControlsGroupBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
41
+ Primitive.div,
42
+ {
43
+ ...props2,
44
+ ref: composeRefs(props2.ref, forwardRef)
45
+ },
46
+ children
47
+ ));
48
+ });
49
+ Group.displayName = "ControlsGroup";
50
+
51
+ var controls = /*#__PURE__*/Object.freeze({
52
+ __proto__: null,
53
+ Group: Group,
54
+ Root: Root$5
55
+ });
56
+
57
+ const TooltipBridge = createReactComponent(TooltipInstance);
58
+ function Root$4({ children, ...props }) {
59
+ return /* @__PURE__ */ React.createElement(TooltipBridge, { ...props }, children);
60
+ }
61
+ Root$4.displayName = "Tooltip";
62
+ const TriggerBridge = createReactComponent(TooltipTriggerInstance);
63
+ const Trigger = React.forwardRef(
64
+ ({ children, ...props }, forwardRef) => {
65
+ return /* @__PURE__ */ React.createElement(TriggerBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
66
+ Primitive.button,
67
+ {
68
+ ...props2,
69
+ ref: composeRefs(props2.ref, forwardRef)
70
+ },
71
+ children
72
+ ));
73
+ }
74
+ );
75
+ Trigger.displayName = "TooltipTrigger";
76
+ const ContentBridge = createReactComponent(TooltipContentInstance);
77
+ const Content = React.forwardRef(
78
+ ({ children, ...props }, forwardRef) => {
79
+ return /* @__PURE__ */ React.createElement(ContentBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
80
+ Primitive.div,
81
+ {
82
+ ...props2,
83
+ ref: composeRefs(props2.ref, forwardRef)
84
+ },
85
+ children
86
+ ));
87
+ }
88
+ );
89
+ Content.displayName = "TooltipContent";
90
+
91
+ var tooltip = /*#__PURE__*/Object.freeze({
92
+ __proto__: null,
93
+ Content: Content,
94
+ Root: Root$4,
95
+ Trigger: Trigger
96
+ });
97
+
98
+ const GoogleCastButtonBridge = createReactComponent(GoogleCastButtonInstance, {
99
+ domEventsRegex: /^onMedia/
100
+ });
101
+ const GoogleCastButton = React.forwardRef(
102
+ ({ children, ...props }, forwardRef) => {
103
+ return /* @__PURE__ */ React.createElement(GoogleCastButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
104
+ Primitive.button,
105
+ {
106
+ ...props2,
107
+ ref: composeRefs(props2.ref, forwardRef)
108
+ },
109
+ children
110
+ ));
111
+ }
112
+ );
113
+ GoogleCastButton.displayName = "GoogleCastButton";
114
+
115
+ const QualitySliderBridge = createReactComponent(QualitySliderInstance, {
116
+ events: sliderCallbacks,
117
+ domEventsRegex: /^onMedia/
118
+ });
119
+ const Root$3 = React.forwardRef(
120
+ ({ children, ...props }, forwardRef) => {
121
+ return /* @__PURE__ */ React.createElement(QualitySliderBridge, { ...props, ref: forwardRef }, (props2) => /* @__PURE__ */ React.createElement(Primitive.div, { ...props2 }, children));
122
+ }
123
+ );
124
+ Root$3.displayName = "QualitySlider";
125
+
126
+ var qualitySlider = /*#__PURE__*/Object.freeze({
127
+ __proto__: null,
128
+ Preview: Preview,
129
+ Root: Root$3,
130
+ Steps: Steps,
131
+ Thumb: Thumb,
132
+ Track: Track$1,
133
+ TrackFill: TrackFill$1,
134
+ Value: Value
135
+ });
136
+
137
+ const AudioGainSliderBridge = createReactComponent(AudioGainSliderInstance, {
138
+ events: sliderCallbacks,
139
+ domEventsRegex: /^onMedia/
140
+ });
141
+ const Root$2 = React.forwardRef(
142
+ ({ children, ...props }, forwardRef) => {
143
+ return /* @__PURE__ */ React.createElement(AudioGainSliderBridge, { ...props, ref: forwardRef }, (props2) => /* @__PURE__ */ React.createElement(Primitive.div, { ...props2 }, children));
144
+ }
145
+ );
146
+ Root$2.displayName = "AudioGainSlider";
147
+
148
+ var audioGainSlider = /*#__PURE__*/Object.freeze({
149
+ __proto__: null,
150
+ Preview: Preview,
151
+ Root: Root$2,
152
+ Steps: Steps,
153
+ Thumb: Thumb,
154
+ Track: Track$1,
155
+ TrackFill: TrackFill$1,
156
+ Value: Value
157
+ });
158
+
159
+ const SpeedSliderBridge = createReactComponent(SpeedSliderInstance, {
160
+ events: sliderCallbacks,
161
+ domEventsRegex: /^onMedia/
162
+ });
163
+ const Root$1 = React.forwardRef(
164
+ ({ children, ...props }, forwardRef) => {
165
+ return /* @__PURE__ */ React.createElement(SpeedSliderBridge, { ...props, ref: forwardRef }, (props2) => /* @__PURE__ */ React.createElement(Primitive.div, { ...props2 }, children));
166
+ }
167
+ );
168
+ Root$1.displayName = "SpeedSlider";
169
+
170
+ var speedSlider = /*#__PURE__*/Object.freeze({
171
+ __proto__: null,
172
+ Preview: Preview,
173
+ Root: Root$1,
174
+ Steps: Steps,
175
+ Thumb: Thumb,
176
+ Track: Track$1,
177
+ TrackFill: TrackFill$1,
178
+ Value: Value
179
+ });
180
+
181
+ const Title = React.forwardRef(({ children, ...props }, forwardRef) => {
182
+ const $title = useMediaState("title");
183
+ return /* @__PURE__ */ React.createElement(Primitive.span, { ...props, ref: forwardRef }, $title, children);
184
+ });
185
+ Title.displayName = "Title";
186
+
187
+ function useActiveTextCues(track) {
188
+ const [activeCues, setActiveCues] = React.useState([]);
189
+ React.useEffect(() => {
190
+ if (!track) {
191
+ setActiveCues([]);
192
+ return;
193
+ }
194
+ function onCuesChange() {
195
+ if (track) setActiveCues(track.activeCues);
196
+ }
197
+ onCuesChange();
198
+ return listenEvent(track, "cue-change", onCuesChange);
199
+ }, [track]);
200
+ return activeCues;
201
+ }
202
+
203
+ function useActiveTextTrack(kind) {
204
+ const media = useMediaContext(), [track, setTrack] = React.useState(null);
205
+ React.useEffect(() => {
206
+ return watchActiveTextTrack(media.textTracks, kind, setTrack);
207
+ }, [kind]);
208
+ return track;
209
+ }
210
+
211
+ function useChapterTitle() {
212
+ const $track = useActiveTextTrack("chapters"), $cues = useActiveTextCues($track);
213
+ return $cues[0]?.text || "";
214
+ }
215
+
216
+ const ChapterTitle = React.forwardRef(
217
+ ({ defaultText = "", children, ...props }, forwardRef) => {
218
+ const $chapterTitle = useChapterTitle();
219
+ return /* @__PURE__ */ React.createElement(Primitive.span, { ...props, ref: forwardRef }, $chapterTitle || defaultText, children);
220
+ }
221
+ );
222
+ ChapterTitle.displayName = "ChapterTitle";
223
+
224
+ const CaptionsBridge = createReactComponent(CaptionsInstance);
225
+ const Captions = React.forwardRef(
226
+ ({ children, ...props }, forwardRef) => {
227
+ return /* @__PURE__ */ React.createElement(CaptionsBridge, { ...props, ref: forwardRef }, (props2) => /* @__PURE__ */ React.createElement(Primitive.div, { ...props2 }, children));
228
+ }
229
+ );
230
+ Captions.displayName = "Captions";
231
+
232
+ const Root = React.forwardRef(
233
+ ({ size = 96, children, ...props }, forwardRef) => {
234
+ return /* @__PURE__ */ React.createElement(
235
+ "svg",
236
+ {
237
+ width: size,
238
+ height: size,
239
+ fill: "none",
240
+ viewBox: "0 0 120 120",
241
+ "aria-hidden": "true",
242
+ "data-part": "root",
243
+ ...props,
244
+ ref: forwardRef
245
+ },
246
+ children
247
+ );
248
+ }
249
+ );
250
+ const Track = React.forwardRef(
251
+ ({ width = 8, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
252
+ "circle",
253
+ {
254
+ cx: "60",
255
+ cy: "60",
256
+ r: "54",
257
+ stroke: "currentColor",
258
+ strokeWidth: width,
259
+ "data-part": "track",
260
+ ...props,
261
+ ref
262
+ },
263
+ children
264
+ )
265
+ );
266
+ const TrackFill = React.forwardRef(
267
+ ({ width = 8, fillPercent = 50, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
268
+ "circle",
269
+ {
270
+ cx: "60",
271
+ cy: "60",
272
+ r: "54",
273
+ stroke: "currentColor",
274
+ pathLength: "100",
275
+ strokeWidth: width,
276
+ strokeDasharray: 100,
277
+ strokeDashoffset: 100 - fillPercent,
278
+ "data-part": "track-fill",
279
+ ...props,
280
+ ref
281
+ },
282
+ children
283
+ )
284
+ );
285
+
286
+ var spinner = /*#__PURE__*/Object.freeze({
287
+ __proto__: null,
288
+ Root: Root,
289
+ Track: Track,
290
+ TrackFill: TrackFill
291
+ });
292
+
293
+ function createSignal(initialValue, deps = []) {
294
+ const scope = useReactScope();
295
+ return React.useMemo(() => scoped(() => signal(initialValue), scope), [scope, ...deps]);
296
+ }
297
+ function createComputed(compute, deps = []) {
298
+ const scope = useReactScope();
299
+ return React.useMemo(() => scoped(() => computed(compute), scope), [scope, ...deps]);
300
+ }
301
+ function createEffect(compute, deps = []) {
302
+ const scope = useReactScope();
303
+ React.useEffect(() => scoped(() => effect(compute), scope), [scope, ...deps]);
304
+ }
305
+ function useScoped(compute) {
306
+ const scope = useReactScope();
307
+ return React.useMemo(() => scoped(compute, scope), [scope]);
308
+ }
309
+
310
+ function useTextCues(track) {
311
+ const [cues, setCues] = React.useState([]);
312
+ React.useEffect(() => {
313
+ if (!track) return;
314
+ function onCuesChange() {
315
+ if (track) setCues([...track.cues]);
316
+ }
317
+ const events = new EventsController(track).add("add-cue", onCuesChange).add("remove-cue", onCuesChange);
318
+ onCuesChange();
319
+ return () => {
320
+ setCues([]);
321
+ events.abort();
322
+ };
323
+ }, [track]);
324
+ return cues;
325
+ }
326
+
327
+ function useChapterOptions() {
328
+ const media = useMediaContext(), track = useActiveTextTrack("chapters"), cues = useTextCues(track), $startTime = useSignal(media.$state.seekableStart), $endTime = useSignal(media.$state.seekableEnd);
329
+ useActiveTextCues(track);
330
+ return React.useMemo(() => {
331
+ const options = track ? cues.filter((cue) => cue.startTime <= $endTime && cue.endTime >= $startTime).map((cue, i) => {
332
+ let currentRef = null, stopProgressEffect;
333
+ return {
334
+ cue,
335
+ label: cue.text,
336
+ value: i.toString(),
337
+ startTimeText: formatTime(Math.max(0, cue.startTime - $startTime)),
338
+ durationText: formatSpokenTime(
339
+ Math.min($endTime, cue.endTime) - Math.max($startTime, cue.startTime)
340
+ ),
341
+ get selected() {
342
+ return cue === track.activeCues[0];
343
+ },
344
+ setProgressVar(ref) {
345
+ if (!ref || cue !== track.activeCues[0]) {
346
+ stopProgressEffect?.();
347
+ stopProgressEffect = void 0;
348
+ ref?.style.setProperty("--progress", "0%");
349
+ currentRef = null;
350
+ return;
351
+ }
352
+ if (currentRef === ref) return;
353
+ currentRef = ref;
354
+ stopProgressEffect?.();
355
+ stopProgressEffect = effect(() => {
356
+ const { realCurrentTime } = media.$state, time = realCurrentTime(), cueStartTime = Math.max($startTime, cue.startTime), duration = Math.min($endTime, cue.endTime) - cueStartTime, progress = Math.max(0, time - cueStartTime) / duration * 100;
357
+ ref.style.setProperty("--progress", progress.toFixed(3) + "%");
358
+ });
359
+ },
360
+ select(trigger) {
361
+ media.remote.seek(cue.startTime - $startTime, trigger);
362
+ }
363
+ };
364
+ }) : [];
365
+ Object.defineProperty(options, "selectedValue", {
366
+ get() {
367
+ const index = options.findIndex((option) => option.selected);
368
+ return (index >= 0 ? index : 0).toString();
369
+ }
370
+ });
371
+ return options;
372
+ }, [cues, $startTime, $endTime]);
373
+ }
374
+
375
+ export { Captions, ChapterTitle, Content, GoogleCastButton, Group, MediaAnnouncer, Root$4 as Root, Root$2 as Root$1, Root$1 as Root$2, Root$3, Root$5 as Root$4, Root as Root$5, Title, Track, TrackFill, Trigger, audioGainSlider, controls, createComputed, createEffect, createSignal, qualitySlider, speedSlider, spinner, tooltip, useActiveTextCues, useActiveTextTrack, useChapterOptions, useChapterTitle, useScoped, useTextCues };