@hanifhan1f/vidstack-react 1.12.19 → 1.12.22
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/dev/chunks/vidstack-BPymmnxm.js +551 -0
- package/dev/chunks/vidstack-BSpAxhO6.js +643 -0
- package/dev/chunks/vidstack-BoLZuw80.js +34 -0
- package/dev/chunks/vidstack-CFOPpDTy.js +476 -0
- package/dev/chunks/vidstack-CXrXBlpD.js +11692 -0
- package/dev/chunks/vidstack-DOtIyh4c.js +288 -0
- package/dev/chunks/vidstack-DY2iivhG.js +84 -0
- package/dev/chunks/vidstack-Dov8gjdq.js +401 -0
- package/dev/chunks/vidstack-DwdhbP5c.js +189 -0
- package/dev/chunks/vidstack-DweQYzVw.js +180 -0
- package/dev/chunks/vidstack-H9OdEKUQ.js +375 -0
- package/dev/chunks/vidstack-KntYDWMe.js +668 -0
- package/dev/chunks/vidstack-NCBSBZE-.js +61 -0
- package/dev/chunks/vidstack-UWMPvwsa.js +1537 -0
- package/dev/player/vidstack-default-components.js +5 -5
- package/dev/player/vidstack-default-layout.js +5 -5
- package/dev/player/vidstack-plyr-layout.js +4 -4
- package/dev/player/vidstack-remotion.js +3 -3
- package/dev/vidstack.js +7 -7
- package/package.json +1 -1
- package/player/styles/default/layouts/video.css +94 -77
- package/prod/chunks/vidstack-B9nEslvl.js +11197 -0
- package/prod/chunks/vidstack-BOObgZd8.js +504 -0
- package/prod/chunks/vidstack-B_wD853-.js +386 -0
- package/prod/chunks/vidstack-C4tNkfXj.js +470 -0
- package/prod/chunks/vidstack-CNJwYQRW.js +84 -0
- package/prod/chunks/vidstack-CVzVtf1j.js +61 -0
- package/prod/chunks/vidstack-CiQEyk_l.js +189 -0
- package/prod/chunks/vidstack-CiTWSpv_.js +34 -0
- package/prod/chunks/vidstack-CzjHdPIT.js +375 -0
- package/prod/chunks/vidstack-Djmla_FM.js +545 -0
- package/prod/chunks/vidstack-DpQw1Y33.js +663 -0
- package/prod/chunks/vidstack-VTpvHAdU.js +1537 -0
- package/prod/chunks/vidstack-dbLRgf2L.js +159 -0
- package/prod/chunks/vidstack-rHvQ8f6c.js +288 -0
- package/prod/player/vidstack-default-components.js +5 -5
- package/prod/player/vidstack-default-layout.js +5 -5
- package/prod/player/vidstack-plyr-layout.js +4 -4
- package/prod/player/vidstack-remotion.js +3 -3
- package/prod/vidstack.js +7 -7
- package/server/chunks/vidstack-BV_VpWlJ.js +1537 -0
- package/server/chunks/vidstack-ByG5MvLs.js +545 -0
- package/server/chunks/vidstack-C0xOpWYR.js +470 -0
- package/server/chunks/vidstack-C481iXqe.js +386 -0
- package/server/chunks/vidstack-CbNRZgUA.js +11197 -0
- package/server/chunks/vidstack-D7D9kiW6.js +34 -0
- package/server/chunks/vidstack-DJJmNib6.js +504 -0
- package/server/chunks/vidstack-DWt5LAKE.js +375 -0
- package/server/chunks/vidstack-DsZKgA8y.js +663 -0
- package/server/chunks/vidstack-NXcLNXxO.js +84 -0
- package/server/chunks/vidstack-OKdxH1xx.js +189 -0
- package/server/chunks/vidstack-iVN8uBAv.js +288 -0
- package/server/chunks/vidstack-m8aA99tE.js +159 -0
- package/server/chunks/vidstack-rUHVQoo3.js +61 -0
- package/server/player/vidstack-default-components.js +5 -5
- package/server/player/vidstack-default-layout.js +5 -5
- package/server/player/vidstack-plyr-layout.js +4 -4
- package/server/player/vidstack-remotion.js +3 -3
- package/server/vidstack.js +7 -7
|
@@ -0,0 +1,470 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import { listenEvent, effect, untrack, createScope, keysOf, onDispose, DOMEvent, peek } from './vidstack-CZgUA94N.js';
|
|
4
|
+
import { ListSymbol, TimeRange, RAFLoop } from './vidstack-B9nEslvl.js';
|
|
5
|
+
import { getCastSessionMedia, getCastContext, getCastSession, hasActiveCastSession, listenCastContextEvent, getCastErrorMessage } from './vidstack-dbLRgf2L.js';
|
|
6
|
+
import 'react';
|
|
7
|
+
import '@floating-ui/dom';
|
|
8
|
+
|
|
9
|
+
class GoogleCastMediaInfoBuilder {
|
|
10
|
+
#info;
|
|
11
|
+
constructor(src) {
|
|
12
|
+
this.#info = new chrome.cast.media.MediaInfo(src.src, src.type);
|
|
13
|
+
}
|
|
14
|
+
build() {
|
|
15
|
+
return this.#info;
|
|
16
|
+
}
|
|
17
|
+
setStreamType(streamType) {
|
|
18
|
+
if (streamType.includes("live")) {
|
|
19
|
+
this.#info.streamType = chrome.cast.media.StreamType.LIVE;
|
|
20
|
+
} else {
|
|
21
|
+
this.#info.streamType = chrome.cast.media.StreamType.BUFFERED;
|
|
22
|
+
}
|
|
23
|
+
return this;
|
|
24
|
+
}
|
|
25
|
+
setTracks(tracks) {
|
|
26
|
+
this.#info.tracks = tracks.map(this.#buildCastTrack);
|
|
27
|
+
return this;
|
|
28
|
+
}
|
|
29
|
+
setMetadata(title, poster) {
|
|
30
|
+
this.#info.metadata = new chrome.cast.media.GenericMediaMetadata();
|
|
31
|
+
this.#info.metadata.title = title;
|
|
32
|
+
this.#info.metadata.images = [{ url: poster }];
|
|
33
|
+
return this;
|
|
34
|
+
}
|
|
35
|
+
#buildCastTrack(track, trackId) {
|
|
36
|
+
const castTrack = new chrome.cast.media.Track(trackId, chrome.cast.media.TrackType.TEXT);
|
|
37
|
+
castTrack.name = track.label;
|
|
38
|
+
castTrack.trackContentId = track.src;
|
|
39
|
+
castTrack.trackContentType = "text/vtt";
|
|
40
|
+
castTrack.language = track.language;
|
|
41
|
+
castTrack.subtype = track.kind.toUpperCase();
|
|
42
|
+
return castTrack;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
class GoogleCastTracksManager {
|
|
47
|
+
#cast;
|
|
48
|
+
#ctx;
|
|
49
|
+
#onNewLocalTracks;
|
|
50
|
+
constructor(cast, ctx, onNewLocalTracks) {
|
|
51
|
+
this.#cast = cast;
|
|
52
|
+
this.#ctx = ctx;
|
|
53
|
+
this.#onNewLocalTracks = onNewLocalTracks;
|
|
54
|
+
}
|
|
55
|
+
setup() {
|
|
56
|
+
const syncRemoteActiveIds = this.syncRemoteActiveIds.bind(this);
|
|
57
|
+
listenEvent(this.#ctx.audioTracks, "change", syncRemoteActiveIds);
|
|
58
|
+
listenEvent(this.#ctx.textTracks, "mode-change", syncRemoteActiveIds);
|
|
59
|
+
effect(this.#syncLocalTracks.bind(this));
|
|
60
|
+
}
|
|
61
|
+
getLocalTextTracks() {
|
|
62
|
+
return this.#ctx.$state.textTracks().filter((track) => track.src && track.type === "vtt");
|
|
63
|
+
}
|
|
64
|
+
#getLocalAudioTracks() {
|
|
65
|
+
return this.#ctx.$state.audioTracks();
|
|
66
|
+
}
|
|
67
|
+
#getRemoteTracks(type) {
|
|
68
|
+
const tracks = this.#cast.mediaInfo?.tracks ?? [];
|
|
69
|
+
return type ? tracks.filter((track) => track.type === type) : tracks;
|
|
70
|
+
}
|
|
71
|
+
#getRemoteActiveIds() {
|
|
72
|
+
const activeIds = [], activeLocalAudioTrack = this.#getLocalAudioTracks().find((track) => track.selected), activeLocalTextTracks = this.getLocalTextTracks().filter((track) => track.mode === "showing");
|
|
73
|
+
if (activeLocalAudioTrack) {
|
|
74
|
+
const remoteAudioTracks = this.#getRemoteTracks(chrome.cast.media.TrackType.AUDIO), remoteAudioTrack = this.#findRemoteTrack(remoteAudioTracks, activeLocalAudioTrack);
|
|
75
|
+
if (remoteAudioTrack) activeIds.push(remoteAudioTrack.trackId);
|
|
76
|
+
}
|
|
77
|
+
if (activeLocalTextTracks?.length) {
|
|
78
|
+
const remoteTextTracks = this.#getRemoteTracks(chrome.cast.media.TrackType.TEXT);
|
|
79
|
+
if (remoteTextTracks.length) {
|
|
80
|
+
for (const localTrack of activeLocalTextTracks) {
|
|
81
|
+
const remoteTextTrack = this.#findRemoteTrack(remoteTextTracks, localTrack);
|
|
82
|
+
if (remoteTextTrack) activeIds.push(remoteTextTrack.trackId);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
return activeIds;
|
|
87
|
+
}
|
|
88
|
+
#syncLocalTracks() {
|
|
89
|
+
const localTextTracks = this.getLocalTextTracks();
|
|
90
|
+
if (!this.#cast.isMediaLoaded) return;
|
|
91
|
+
const remoteTextTracks = this.#getRemoteTracks(chrome.cast.media.TrackType.TEXT);
|
|
92
|
+
for (const localTrack of localTextTracks) {
|
|
93
|
+
const hasRemoteTrack = this.#findRemoteTrack(remoteTextTracks, localTrack);
|
|
94
|
+
if (!hasRemoteTrack) {
|
|
95
|
+
untrack(() => this.#onNewLocalTracks?.());
|
|
96
|
+
break;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
syncRemoteTracks(event) {
|
|
101
|
+
if (!this.#cast.isMediaLoaded) return;
|
|
102
|
+
const localAudioTracks = this.#getLocalAudioTracks(), localTextTracks = this.getLocalTextTracks(), remoteAudioTracks = this.#getRemoteTracks(chrome.cast.media.TrackType.AUDIO), remoteTextTracks = this.#getRemoteTracks(chrome.cast.media.TrackType.TEXT);
|
|
103
|
+
for (const remoteAudioTrack of remoteAudioTracks) {
|
|
104
|
+
const hasLocalTrack = this.#findLocalTrack(localAudioTracks, remoteAudioTrack);
|
|
105
|
+
if (hasLocalTrack) continue;
|
|
106
|
+
const localAudioTrack = {
|
|
107
|
+
id: remoteAudioTrack.trackId.toString(),
|
|
108
|
+
label: remoteAudioTrack.name,
|
|
109
|
+
language: remoteAudioTrack.language,
|
|
110
|
+
kind: remoteAudioTrack.subtype ?? "main",
|
|
111
|
+
selected: false
|
|
112
|
+
};
|
|
113
|
+
this.#ctx.audioTracks[ListSymbol.add](localAudioTrack, event);
|
|
114
|
+
}
|
|
115
|
+
for (const remoteTextTrack of remoteTextTracks) {
|
|
116
|
+
const hasLocalTrack = this.#findLocalTrack(localTextTracks, remoteTextTrack);
|
|
117
|
+
if (hasLocalTrack) continue;
|
|
118
|
+
const localTextTrack = {
|
|
119
|
+
id: remoteTextTrack.trackId.toString(),
|
|
120
|
+
src: remoteTextTrack.trackContentId,
|
|
121
|
+
label: remoteTextTrack.name,
|
|
122
|
+
language: remoteTextTrack.language,
|
|
123
|
+
kind: remoteTextTrack.subtype.toLowerCase()
|
|
124
|
+
};
|
|
125
|
+
this.#ctx.textTracks.add(localTextTrack, event);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
syncRemoteActiveIds(event) {
|
|
129
|
+
if (!this.#cast.isMediaLoaded) return;
|
|
130
|
+
const activeIds = this.#getRemoteActiveIds(), editRequest = new chrome.cast.media.EditTracksInfoRequest(activeIds);
|
|
131
|
+
this.#editTracksInfo(editRequest).catch((error) => {
|
|
132
|
+
});
|
|
133
|
+
}
|
|
134
|
+
#editTracksInfo(request) {
|
|
135
|
+
const media = getCastSessionMedia();
|
|
136
|
+
return new Promise((resolve, reject) => media?.editTracksInfo(request, resolve, reject));
|
|
137
|
+
}
|
|
138
|
+
#findLocalTrack(localTracks, remoteTrack) {
|
|
139
|
+
return localTracks.find((localTrack) => this.#isMatch(localTrack, remoteTrack));
|
|
140
|
+
}
|
|
141
|
+
#findRemoteTrack(remoteTracks, localTrack) {
|
|
142
|
+
return remoteTracks.find((remoteTrack) => this.#isMatch(localTrack, remoteTrack));
|
|
143
|
+
}
|
|
144
|
+
// Note: we can't rely on id matching because they will differ between local/remote. A local
|
|
145
|
+
// track id might not even exist.
|
|
146
|
+
#isMatch(localTrack, remoteTrack) {
|
|
147
|
+
return remoteTrack.name === localTrack.label && remoteTrack.language === localTrack.language && remoteTrack.subtype.toLowerCase() === localTrack.kind.toLowerCase();
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
class GoogleCastProvider {
|
|
152
|
+
$$PROVIDER_TYPE = "GOOGLE_CAST";
|
|
153
|
+
scope = createScope();
|
|
154
|
+
#player;
|
|
155
|
+
#ctx;
|
|
156
|
+
#tracks;
|
|
157
|
+
#currentSrc = null;
|
|
158
|
+
#state = "disconnected";
|
|
159
|
+
#currentTime = 0;
|
|
160
|
+
#played = 0;
|
|
161
|
+
#seekableRange = new TimeRange(0, 0);
|
|
162
|
+
#timeRAF = new RAFLoop(this.#onAnimationFrame.bind(this));
|
|
163
|
+
#playerEventHandlers;
|
|
164
|
+
#reloadInfo = null;
|
|
165
|
+
#isIdle = false;
|
|
166
|
+
constructor(player, ctx) {
|
|
167
|
+
this.#player = player;
|
|
168
|
+
this.#ctx = ctx;
|
|
169
|
+
this.#tracks = new GoogleCastTracksManager(player, ctx, this.#onNewLocalTracks.bind(this));
|
|
170
|
+
}
|
|
171
|
+
get type() {
|
|
172
|
+
return "google-cast";
|
|
173
|
+
}
|
|
174
|
+
get currentSrc() {
|
|
175
|
+
return this.#currentSrc;
|
|
176
|
+
}
|
|
177
|
+
/**
|
|
178
|
+
* The Google Cast remote player.
|
|
179
|
+
*
|
|
180
|
+
* @see {@link https://developers.google.com/cast/docs/reference/web_sender/cast.framework.RemotePlayer}
|
|
181
|
+
*/
|
|
182
|
+
get player() {
|
|
183
|
+
return this.#player;
|
|
184
|
+
}
|
|
185
|
+
/**
|
|
186
|
+
* @see {@link https://developers.google.com/cast/docs/reference/web_sender/cast.framework.CastContext}
|
|
187
|
+
*/
|
|
188
|
+
get cast() {
|
|
189
|
+
return getCastContext();
|
|
190
|
+
}
|
|
191
|
+
/**
|
|
192
|
+
* @see {@link https://developers.google.com/cast/docs/reference/web_sender/cast.framework.CastSession}
|
|
193
|
+
*/
|
|
194
|
+
get session() {
|
|
195
|
+
return getCastSession();
|
|
196
|
+
}
|
|
197
|
+
/**
|
|
198
|
+
* @see {@link https://developers.google.com/cast/docs/reference/web_sender/chrome.cast.media.Media}
|
|
199
|
+
*/
|
|
200
|
+
get media() {
|
|
201
|
+
return getCastSessionMedia();
|
|
202
|
+
}
|
|
203
|
+
/**
|
|
204
|
+
* Whether the current Google Cast session belongs to this provider.
|
|
205
|
+
*/
|
|
206
|
+
get hasActiveSession() {
|
|
207
|
+
return hasActiveCastSession(this.#currentSrc);
|
|
208
|
+
}
|
|
209
|
+
setup() {
|
|
210
|
+
this.#attachCastContextEventListeners();
|
|
211
|
+
this.#attachCastPlayerEventListeners();
|
|
212
|
+
this.#tracks.setup();
|
|
213
|
+
this.#ctx.notify("provider-setup", this);
|
|
214
|
+
}
|
|
215
|
+
#attachCastContextEventListeners() {
|
|
216
|
+
listenCastContextEvent(
|
|
217
|
+
cast.framework.CastContextEventType.CAST_STATE_CHANGED,
|
|
218
|
+
this.#onCastStateChange.bind(this)
|
|
219
|
+
);
|
|
220
|
+
}
|
|
221
|
+
#attachCastPlayerEventListeners() {
|
|
222
|
+
const Event2 = cast.framework.RemotePlayerEventType, handlers = {
|
|
223
|
+
[Event2.IS_CONNECTED_CHANGED]: this.#onCastStateChange,
|
|
224
|
+
[Event2.IS_MEDIA_LOADED_CHANGED]: this.#onMediaLoadedChange,
|
|
225
|
+
[Event2.CAN_CONTROL_VOLUME_CHANGED]: this.#onCanControlVolumeChange,
|
|
226
|
+
[Event2.CAN_SEEK_CHANGED]: this.#onCanSeekChange,
|
|
227
|
+
[Event2.DURATION_CHANGED]: this.#onDurationChange,
|
|
228
|
+
[Event2.IS_MUTED_CHANGED]: this.#onVolumeChange,
|
|
229
|
+
[Event2.VOLUME_LEVEL_CHANGED]: this.#onVolumeChange,
|
|
230
|
+
[Event2.IS_PAUSED_CHANGED]: this.#onPausedChange,
|
|
231
|
+
[Event2.LIVE_SEEKABLE_RANGE_CHANGED]: this.#onProgress,
|
|
232
|
+
[Event2.PLAYER_STATE_CHANGED]: this.#onPlayerStateChange
|
|
233
|
+
};
|
|
234
|
+
this.#playerEventHandlers = handlers;
|
|
235
|
+
const handler = this.#onRemotePlayerEvent.bind(this);
|
|
236
|
+
for (const type of keysOf(handlers)) {
|
|
237
|
+
this.#player.controller.addEventListener(type, handler);
|
|
238
|
+
}
|
|
239
|
+
onDispose(() => {
|
|
240
|
+
for (const type of keysOf(handlers)) {
|
|
241
|
+
this.#player.controller.removeEventListener(type, handler);
|
|
242
|
+
}
|
|
243
|
+
});
|
|
244
|
+
}
|
|
245
|
+
async play() {
|
|
246
|
+
if (!this.#player.isPaused && !this.#isIdle) return;
|
|
247
|
+
if (this.#isIdle) {
|
|
248
|
+
await this.#reload(false, 0);
|
|
249
|
+
return;
|
|
250
|
+
}
|
|
251
|
+
this.#player.controller?.playOrPause();
|
|
252
|
+
}
|
|
253
|
+
async pause() {
|
|
254
|
+
if (this.#player.isPaused) return;
|
|
255
|
+
this.#player.controller?.playOrPause();
|
|
256
|
+
}
|
|
257
|
+
getMediaStatus(request) {
|
|
258
|
+
return new Promise((resolve, reject) => {
|
|
259
|
+
this.media?.getStatus(request, resolve, reject);
|
|
260
|
+
});
|
|
261
|
+
}
|
|
262
|
+
setMuted(muted) {
|
|
263
|
+
const hasChanged = muted && !this.#player.isMuted || !muted && this.#player.isMuted;
|
|
264
|
+
if (hasChanged) this.#player.controller?.muteOrUnmute();
|
|
265
|
+
}
|
|
266
|
+
setCurrentTime(time) {
|
|
267
|
+
this.#player.currentTime = time;
|
|
268
|
+
this.#ctx.notify("seeking", time);
|
|
269
|
+
this.#player.controller?.seek();
|
|
270
|
+
}
|
|
271
|
+
setVolume(volume) {
|
|
272
|
+
this.#player.volumeLevel = volume;
|
|
273
|
+
this.#player.controller?.setVolumeLevel();
|
|
274
|
+
}
|
|
275
|
+
async loadSource(src) {
|
|
276
|
+
if (this.#reloadInfo?.src !== src) this.#reloadInfo = null;
|
|
277
|
+
if (hasActiveCastSession(src)) {
|
|
278
|
+
this.#resumeSession();
|
|
279
|
+
this.#currentSrc = src;
|
|
280
|
+
return;
|
|
281
|
+
}
|
|
282
|
+
this.#ctx.notify("load-start");
|
|
283
|
+
const loadRequest = this.#buildLoadRequest(src), errorCode = await this.session.loadMedia(loadRequest);
|
|
284
|
+
if (errorCode) {
|
|
285
|
+
this.#currentSrc = null;
|
|
286
|
+
this.#ctx.notify("error", Error(getCastErrorMessage(errorCode)));
|
|
287
|
+
return;
|
|
288
|
+
}
|
|
289
|
+
this.#currentSrc = src;
|
|
290
|
+
}
|
|
291
|
+
destroy() {
|
|
292
|
+
this.#reset();
|
|
293
|
+
this.#endSession();
|
|
294
|
+
}
|
|
295
|
+
#reset() {
|
|
296
|
+
if (!this.#reloadInfo) {
|
|
297
|
+
this.#played = 0;
|
|
298
|
+
this.#seekableRange = new TimeRange(0, 0);
|
|
299
|
+
}
|
|
300
|
+
this.#timeRAF.stop();
|
|
301
|
+
this.#currentTime = 0;
|
|
302
|
+
this.#reloadInfo = null;
|
|
303
|
+
}
|
|
304
|
+
#resumeSession() {
|
|
305
|
+
const resumeSessionEvent = new DOMEvent("resume-session", { detail: this.session });
|
|
306
|
+
this.#onMediaLoadedChange(resumeSessionEvent);
|
|
307
|
+
const { muted, volume, savedState } = this.#ctx.$state, localState = savedState();
|
|
308
|
+
this.setCurrentTime(Math.max(this.#player.currentTime, localState?.currentTime ?? 0));
|
|
309
|
+
this.setMuted(muted());
|
|
310
|
+
this.setVolume(volume());
|
|
311
|
+
if (localState?.paused === false) this.play();
|
|
312
|
+
}
|
|
313
|
+
#endSession() {
|
|
314
|
+
this.cast.endCurrentSession(true);
|
|
315
|
+
const { remotePlaybackLoader } = this.#ctx.$state;
|
|
316
|
+
remotePlaybackLoader.set(null);
|
|
317
|
+
}
|
|
318
|
+
#disconnectFromReceiver() {
|
|
319
|
+
const { savedState } = this.#ctx.$state;
|
|
320
|
+
savedState.set({
|
|
321
|
+
paused: this.#player.isPaused,
|
|
322
|
+
currentTime: this.#player.currentTime
|
|
323
|
+
});
|
|
324
|
+
this.#endSession();
|
|
325
|
+
}
|
|
326
|
+
#onAnimationFrame() {
|
|
327
|
+
this.#onCurrentTimeChange();
|
|
328
|
+
}
|
|
329
|
+
#onRemotePlayerEvent(event) {
|
|
330
|
+
this.#playerEventHandlers[event.type].call(this, event);
|
|
331
|
+
}
|
|
332
|
+
#onCastStateChange(data) {
|
|
333
|
+
const castState = this.cast.getCastState(), state = castState === cast.framework.CastState.CONNECTED ? "connected" : castState === cast.framework.CastState.CONNECTING ? "connecting" : "disconnected";
|
|
334
|
+
if (this.#state === state) return;
|
|
335
|
+
const detail = { type: "google-cast", state }, trigger = this.#createEvent(data);
|
|
336
|
+
this.#state = state;
|
|
337
|
+
this.#ctx.notify("remote-playback-change", detail, trigger);
|
|
338
|
+
if (state === "disconnected") {
|
|
339
|
+
this.#disconnectFromReceiver();
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
#onMediaLoadedChange(event) {
|
|
343
|
+
const hasLoaded = !!this.#player.isMediaLoaded;
|
|
344
|
+
if (!hasLoaded) return;
|
|
345
|
+
const src = peek(this.#ctx.$state.source);
|
|
346
|
+
Promise.resolve().then(() => {
|
|
347
|
+
if (src !== peek(this.#ctx.$state.source) || !this.#player.isMediaLoaded) return;
|
|
348
|
+
this.#reset();
|
|
349
|
+
const duration = this.#player.duration;
|
|
350
|
+
this.#seekableRange = new TimeRange(0, duration);
|
|
351
|
+
const detail = {
|
|
352
|
+
provider: this,
|
|
353
|
+
duration,
|
|
354
|
+
buffered: new TimeRange(0, 0),
|
|
355
|
+
seekable: this.#getSeekableRange()
|
|
356
|
+
}, trigger = this.#createEvent(event);
|
|
357
|
+
this.#ctx.notify("loaded-metadata", void 0, trigger);
|
|
358
|
+
this.#ctx.notify("loaded-data", void 0, trigger);
|
|
359
|
+
this.#ctx.notify("can-play", detail, trigger);
|
|
360
|
+
this.#onCanControlVolumeChange();
|
|
361
|
+
this.#onCanSeekChange(event);
|
|
362
|
+
const { volume, muted } = this.#ctx.$state;
|
|
363
|
+
this.setVolume(volume());
|
|
364
|
+
this.setMuted(muted());
|
|
365
|
+
this.#timeRAF.start();
|
|
366
|
+
this.#tracks.syncRemoteTracks(trigger);
|
|
367
|
+
this.#tracks.syncRemoteActiveIds(trigger);
|
|
368
|
+
});
|
|
369
|
+
}
|
|
370
|
+
#onCanControlVolumeChange() {
|
|
371
|
+
this.#ctx.$state.canSetVolume.set(this.#player.canControlVolume);
|
|
372
|
+
}
|
|
373
|
+
#onCanSeekChange(event) {
|
|
374
|
+
const trigger = this.#createEvent(event);
|
|
375
|
+
this.#ctx.notify("stream-type-change", this.#getStreamType(), trigger);
|
|
376
|
+
}
|
|
377
|
+
#getStreamType() {
|
|
378
|
+
const streamType = this.#player.mediaInfo?.streamType;
|
|
379
|
+
return streamType === chrome.cast.media.StreamType.LIVE ? this.#player.canSeek ? "live:dvr" : "live" : "on-demand";
|
|
380
|
+
}
|
|
381
|
+
#onCurrentTimeChange() {
|
|
382
|
+
if (this.#reloadInfo) return;
|
|
383
|
+
const currentTime = this.#player.currentTime;
|
|
384
|
+
if (currentTime === this.#currentTime) return;
|
|
385
|
+
this.#ctx.notify("time-change", currentTime);
|
|
386
|
+
if (currentTime > this.#played) {
|
|
387
|
+
this.#played = currentTime;
|
|
388
|
+
this.#onProgress();
|
|
389
|
+
}
|
|
390
|
+
if (this.#ctx.$state.seeking()) {
|
|
391
|
+
this.#ctx.notify("seeked", currentTime);
|
|
392
|
+
}
|
|
393
|
+
this.#currentTime = currentTime;
|
|
394
|
+
}
|
|
395
|
+
#onDurationChange(event) {
|
|
396
|
+
if (!this.#player.isMediaLoaded || this.#reloadInfo) return;
|
|
397
|
+
const duration = this.#player.duration, trigger = this.#createEvent(event);
|
|
398
|
+
this.#seekableRange = new TimeRange(0, duration);
|
|
399
|
+
this.#ctx.notify("duration-change", duration, trigger);
|
|
400
|
+
}
|
|
401
|
+
#onVolumeChange(event) {
|
|
402
|
+
if (!this.#player.isMediaLoaded) return;
|
|
403
|
+
const detail = {
|
|
404
|
+
muted: this.#player.isMuted,
|
|
405
|
+
volume: this.#player.volumeLevel
|
|
406
|
+
}, trigger = this.#createEvent(event);
|
|
407
|
+
this.#ctx.notify("volume-change", detail, trigger);
|
|
408
|
+
}
|
|
409
|
+
#onPausedChange(event) {
|
|
410
|
+
const trigger = this.#createEvent(event);
|
|
411
|
+
if (this.#player.isPaused) {
|
|
412
|
+
this.#ctx.notify("pause", void 0, trigger);
|
|
413
|
+
} else {
|
|
414
|
+
this.#ctx.notify("play", void 0, trigger);
|
|
415
|
+
}
|
|
416
|
+
}
|
|
417
|
+
#onProgress(event) {
|
|
418
|
+
const detail = {
|
|
419
|
+
seekable: this.#getSeekableRange(),
|
|
420
|
+
buffered: new TimeRange(0, this.#played)
|
|
421
|
+
}, trigger = event ? this.#createEvent(event) : void 0;
|
|
422
|
+
this.#ctx.notify("progress", detail, trigger);
|
|
423
|
+
}
|
|
424
|
+
#onPlayerStateChange(event) {
|
|
425
|
+
const state = this.#player.playerState, PlayerState = chrome.cast.media.PlayerState;
|
|
426
|
+
this.#isIdle = state === PlayerState.IDLE;
|
|
427
|
+
if (state === PlayerState.PAUSED) return;
|
|
428
|
+
const trigger = this.#createEvent(event);
|
|
429
|
+
switch (state) {
|
|
430
|
+
case PlayerState.PLAYING:
|
|
431
|
+
this.#ctx.notify("playing", void 0, trigger);
|
|
432
|
+
break;
|
|
433
|
+
case PlayerState.BUFFERING:
|
|
434
|
+
this.#ctx.notify("waiting", void 0, trigger);
|
|
435
|
+
break;
|
|
436
|
+
case PlayerState.IDLE:
|
|
437
|
+
this.#timeRAF.stop();
|
|
438
|
+
this.#ctx.notify("pause");
|
|
439
|
+
this.#ctx.notify("end");
|
|
440
|
+
break;
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
#getSeekableRange() {
|
|
444
|
+
return this.#player.liveSeekableRange ? new TimeRange(this.#player.liveSeekableRange.start, this.#player.liveSeekableRange.end) : this.#seekableRange;
|
|
445
|
+
}
|
|
446
|
+
#createEvent(detail) {
|
|
447
|
+
return detail instanceof Event ? detail : new DOMEvent(detail.type, { detail });
|
|
448
|
+
}
|
|
449
|
+
#buildMediaInfo(src) {
|
|
450
|
+
const { streamType, title, poster } = this.#ctx.$state;
|
|
451
|
+
return new GoogleCastMediaInfoBuilder(src).setMetadata(title(), poster()).setStreamType(streamType()).setTracks(this.#tracks.getLocalTextTracks()).build();
|
|
452
|
+
}
|
|
453
|
+
#buildLoadRequest(src) {
|
|
454
|
+
const mediaInfo = this.#buildMediaInfo(src), request = new chrome.cast.media.LoadRequest(mediaInfo), savedState = this.#ctx.$state.savedState();
|
|
455
|
+
request.autoplay = (this.#reloadInfo?.paused ?? savedState?.paused) === false;
|
|
456
|
+
request.currentTime = this.#reloadInfo?.time ?? savedState?.currentTime ?? 0;
|
|
457
|
+
return request;
|
|
458
|
+
}
|
|
459
|
+
async #reload(paused, time) {
|
|
460
|
+
const src = peek(this.#ctx.$state.source);
|
|
461
|
+
this.#reloadInfo = { src, paused, time };
|
|
462
|
+
await this.loadSource(src);
|
|
463
|
+
}
|
|
464
|
+
#onNewLocalTracks() {
|
|
465
|
+
this.#reload(this.#player.isPaused, this.#player.currentTime).catch((error) => {
|
|
466
|
+
});
|
|
467
|
+
}
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
export { GoogleCastProvider };
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { listenEvent, EventsController, animationFrameThrottle, effect } from './vidstack-CZgUA94N.js';
|
|
5
|
+
import { useMediaPlayer } from './vidstack-DpQw1Y33.js';
|
|
6
|
+
|
|
7
|
+
function useClassName(el, className) {
|
|
8
|
+
React.useEffect(() => {
|
|
9
|
+
if (!el || !className) return;
|
|
10
|
+
const tokens = className.split(" ");
|
|
11
|
+
for (const token of tokens) el.classList.add(token);
|
|
12
|
+
return () => {
|
|
13
|
+
for (const token of tokens) el.classList.remove(token);
|
|
14
|
+
};
|
|
15
|
+
}, [el, className]);
|
|
16
|
+
}
|
|
17
|
+
function useResizeObserver(el, callback) {
|
|
18
|
+
React.useEffect(() => {
|
|
19
|
+
if (!el) return;
|
|
20
|
+
callback();
|
|
21
|
+
const observer = new ResizeObserver(animationFrameThrottle(callback));
|
|
22
|
+
observer.observe(el);
|
|
23
|
+
return () => observer.disconnect();
|
|
24
|
+
}, [el, callback]);
|
|
25
|
+
}
|
|
26
|
+
function useTransitionActive(el) {
|
|
27
|
+
const [isActive, setIsActive] = React.useState(false);
|
|
28
|
+
React.useEffect(() => {
|
|
29
|
+
if (!el) return;
|
|
30
|
+
const events = new EventsController(el).add("transitionstart", () => setIsActive(true)).add("transitionend", () => setIsActive(false));
|
|
31
|
+
return () => events.abort();
|
|
32
|
+
}, [el]);
|
|
33
|
+
return isActive;
|
|
34
|
+
}
|
|
35
|
+
function useMouseEnter(el) {
|
|
36
|
+
const [isMouseEnter, setIsMouseEnter] = React.useState(false);
|
|
37
|
+
React.useEffect(() => {
|
|
38
|
+
if (!el) return;
|
|
39
|
+
const events = new EventsController(el).add("mouseenter", () => setIsMouseEnter(true)).add("mouseleave", () => setIsMouseEnter(false));
|
|
40
|
+
return () => events.abort();
|
|
41
|
+
}, [el]);
|
|
42
|
+
return isMouseEnter;
|
|
43
|
+
}
|
|
44
|
+
function useFocusIn(el) {
|
|
45
|
+
const [isFocusIn, setIsFocusIn] = React.useState(false);
|
|
46
|
+
React.useEffect(() => {
|
|
47
|
+
if (!el) return;
|
|
48
|
+
const events = new EventsController(el).add("focusin", () => setIsFocusIn(true)).add("focusout", () => setIsFocusIn(false));
|
|
49
|
+
return () => events.abort();
|
|
50
|
+
}, [el]);
|
|
51
|
+
return isFocusIn;
|
|
52
|
+
}
|
|
53
|
+
function useActive(el) {
|
|
54
|
+
const isMouseEnter = useMouseEnter(el), isFocusIn = useFocusIn(el), prevMouseEnter = React.useRef(false);
|
|
55
|
+
if (prevMouseEnter.current && !isMouseEnter) return false;
|
|
56
|
+
prevMouseEnter.current = isMouseEnter;
|
|
57
|
+
return isMouseEnter || isFocusIn;
|
|
58
|
+
}
|
|
59
|
+
function useColorSchemePreference() {
|
|
60
|
+
const [colorScheme, setColorScheme] = React.useState("dark");
|
|
61
|
+
React.useEffect(() => {
|
|
62
|
+
const media = window.matchMedia("(prefers-color-scheme: light)");
|
|
63
|
+
function onChange() {
|
|
64
|
+
setColorScheme(media.matches ? "light" : "dark");
|
|
65
|
+
}
|
|
66
|
+
onChange();
|
|
67
|
+
return listenEvent(media, "change", onChange);
|
|
68
|
+
}, []);
|
|
69
|
+
return colorScheme;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
function useLayoutName(name) {
|
|
73
|
+
const player = useMediaPlayer();
|
|
74
|
+
React.useEffect(() => {
|
|
75
|
+
if (!player) return;
|
|
76
|
+
return effect(() => {
|
|
77
|
+
const el = player.$el;
|
|
78
|
+
el?.setAttribute("data-layout", name);
|
|
79
|
+
return () => el?.removeAttribute("data-layout");
|
|
80
|
+
});
|
|
81
|
+
}, [player]);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export { useActive, useClassName, useColorSchemePreference, useLayoutName, useResizeObserver, useTransitionActive };
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import { appendParamsToURL, IS_SERVER } from './vidstack-B9nEslvl.js';
|
|
4
|
+
import { signal, listenEvent, effect, peek, isString } from './vidstack-CZgUA94N.js';
|
|
5
|
+
|
|
6
|
+
class EmbedProvider {
|
|
7
|
+
#iframe;
|
|
8
|
+
src = signal("");
|
|
9
|
+
/**
|
|
10
|
+
* Defines which referrer is sent when fetching the resource.
|
|
11
|
+
*
|
|
12
|
+
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy}
|
|
13
|
+
*/
|
|
14
|
+
referrerPolicy = null;
|
|
15
|
+
get iframe() {
|
|
16
|
+
return this.#iframe;
|
|
17
|
+
}
|
|
18
|
+
constructor(iframe) {
|
|
19
|
+
this.#iframe = iframe;
|
|
20
|
+
iframe.setAttribute("frameBorder", "0");
|
|
21
|
+
iframe.setAttribute("aria-hidden", "true");
|
|
22
|
+
iframe.setAttribute(
|
|
23
|
+
"allow",
|
|
24
|
+
"autoplay; fullscreen; encrypted-media; picture-in-picture; accelerometer; gyroscope"
|
|
25
|
+
);
|
|
26
|
+
if (this.referrerPolicy !== null) {
|
|
27
|
+
iframe.setAttribute("referrerpolicy", this.referrerPolicy);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
setup() {
|
|
31
|
+
listenEvent(window, "message", this.#onWindowMessage.bind(this));
|
|
32
|
+
listenEvent(this.#iframe, "load", this.onLoad.bind(this));
|
|
33
|
+
effect(this.#watchSrc.bind(this));
|
|
34
|
+
}
|
|
35
|
+
#watchSrc() {
|
|
36
|
+
const src = this.src();
|
|
37
|
+
if (!src.length) {
|
|
38
|
+
this.#iframe.setAttribute("src", "");
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
const params = peek(() => this.buildParams());
|
|
42
|
+
this.#iframe.setAttribute("src", appendParamsToURL(src, params));
|
|
43
|
+
}
|
|
44
|
+
postMessage(message, target) {
|
|
45
|
+
if (IS_SERVER) return;
|
|
46
|
+
this.#iframe.contentWindow?.postMessage(JSON.stringify(message), target ?? "*");
|
|
47
|
+
}
|
|
48
|
+
#onWindowMessage(event) {
|
|
49
|
+
const origin = this.getOrigin(), isOriginMatch = (event.source === null || event.source === this.#iframe?.contentWindow) && (!isString(origin) || origin === event.origin);
|
|
50
|
+
if (!isOriginMatch) return;
|
|
51
|
+
try {
|
|
52
|
+
const message = JSON.parse(event.data);
|
|
53
|
+
if (message) this.onMessage(message, event);
|
|
54
|
+
return;
|
|
55
|
+
} catch (e) {
|
|
56
|
+
}
|
|
57
|
+
if (event.data) this.onMessage(event.data, event);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export { EmbedProvider };
|