@hanifhan1f/vidstack-react 1.12.26 → 1.12.30
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-BalWqr4j.js +1422 -0
- package/dev/chunks/vidstack-CKsUl4ll.js +1384 -0
- package/dev/chunks/vidstack-CqNX679o.js +669 -0
- package/dev/chunks/vidstack-D3ZXOE4d.js +643 -0
- package/dev/chunks/vidstack-DjqYvkVp.js +84 -0
- package/dev/chunks/vidstack-DqaqkU4T.js +9 -0
- package/dev/chunks/vidstack-FuCbl228.js +226 -0
- package/dev/chunks/vidstack-PREbBNMG.js +125 -0
- package/dev/chunks/vidstack-gqKBE4xH.js +376 -0
- package/dev/player/vidstack-default-components.js +9 -8
- package/dev/player/vidstack-default-icons.js +1 -1
- package/dev/player/vidstack-default-layout.js +9 -8
- package/dev/player/vidstack-plyr-layout.js +77 -63
- package/dev/player/vidstack-remotion.js +6 -6
- package/dev/vidstack.js +22 -133
- package/package.json +1 -1
- package/prod/chunks/vidstack-BCBskRpc.js +664 -0
- package/prod/chunks/vidstack-BZVrgeRF.js +9 -0
- package/prod/chunks/vidstack-CKapDFwB.js +376 -0
- package/prod/chunks/vidstack-CYK75vJF.js +1382 -0
- package/prod/chunks/vidstack-CtxjO6HG.js +84 -0
- package/prod/chunks/vidstack-D91K36KQ.js +206 -0
- package/prod/chunks/vidstack-DJThTSEm.js +125 -0
- package/prod/chunks/vidstack-DXSNXDnS.js +1384 -0
- package/prod/chunks/vidstack-DdiGCJVp.js +504 -0
- package/prod/player/vidstack-default-components.js +9 -8
- package/prod/player/vidstack-default-icons.js +1 -1
- package/prod/player/vidstack-default-layout.js +9 -8
- package/prod/player/vidstack-plyr-layout.js +77 -63
- package/prod/player/vidstack-remotion.js +6 -6
- package/prod/vidstack.js +22 -204
- package/server/chunks/vidstack-B4rJ1ZKK.js +376 -0
- package/server/chunks/vidstack-BTdEfKqV.js +84 -0
- package/server/chunks/vidstack-D4t_SZbb.js +1416 -0
- package/server/chunks/vidstack-DOIUveQF.js +504 -0
- package/server/chunks/vidstack-DbNoKLjz.js +664 -0
- package/server/chunks/vidstack-DeS67_gx.js +9 -0
- package/server/chunks/vidstack-DiHlnSws.js +1384 -0
- package/server/chunks/vidstack-DnoqxmOs.js +125 -0
- package/server/chunks/vidstack-SkX-mSrw.js +206 -0
- package/server/player/vidstack-default-components.js +9 -8
- package/server/player/vidstack-default-icons.js +1 -1
- package/server/player/vidstack-default-layout.js +9 -8
- package/server/player/vidstack-plyr-layout.js +77 -63
- package/server/player/vidstack-remotion.js +6 -6
- package/server/vidstack.js +22 -204
package/server/vidstack.js
CHANGED
|
@@ -1,207 +1,25 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
export
|
|
3
|
+
export * from 'vidstack/exports/core.ts';
|
|
4
|
+
export * from 'vidstack/exports/events.ts';
|
|
5
|
+
export * from 'vidstack/exports/foundation.ts';
|
|
6
|
+
export * from 'vidstack/exports/maverick.ts';
|
|
7
|
+
export * from 'vidstack/exports/providers.ts';
|
|
8
|
+
export * from 'vidstack/exports/utils.ts';
|
|
9
|
+
export { DEFAULT_AUDIO_GAINS, DEFAULT_PLAYBACK_RATES, sliderState } from 'vidstack/exports/components.ts';
|
|
10
|
+
import { Primitive, MediaPlayerInstance, MediaProviderInstance, isRemotionProvider, ToggleButtonInstance, PosterInstance, useMediaState } from './chunks/vidstack-SkX-mSrw.js';
|
|
11
|
+
export { AirPlayButtonInstance, AudioGainSliderInstance, CaptionButtonInstance, CaptionsInstance, ControlsGroupInstance, ControlsInstance, FullscreenButtonInstance, GestureInstance, GoogleCastButtonInstance, LiveButtonInstance, MediaAnnouncerInstance, MenuButtonInstance, MenuInstance, MenuItemInstance, MenuItemsInstance, MenuPortalInstance, MuteButtonInstance, PIPButtonInstance, PlayButtonInstance, QualitySliderInstance, RadioGroupInstance, RadioInstance, SeekButtonInstance, SliderChaptersInstance, SliderInstance, SliderPreviewInstance, SliderThumbnailInstance, SliderValueInstance, SliderVideoInstance, SpeedSliderInstance, ThumbnailInstance, TimeInstance, TimeSliderInstance, TooltipContentInstance, TooltipInstance, TooltipTriggerInstance, VolumeSliderInstance, useMediaStore, useSliderState, useSliderStore } from './chunks/vidstack-SkX-mSrw.js';
|
|
5
12
|
import * as React from 'react';
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
import { useMediaContext
|
|
11
|
-
export { AirPlayButton, CaptionButton, FullscreenButton, Gesture, LiveButton, menu as Menu, MuteButton, PIPButton, PlayButton, radioGroup as RadioGroup, SeekButton, slider as Slider, thumbnail as Thumbnail, Time, timeSlider as TimeSlider, volumeSlider as VolumeSlider, useAudioOptions, useCaptionOptions, useMediaPlayer } from './chunks/vidstack-
|
|
13
|
+
import { createReactComponent, useStateContext, useSignal, isString, composeRefs, useSignalRecord, effect, useReactScope, signal, EventsController } from './chunks/vidstack-D4t_SZbb.js';
|
|
14
|
+
import { createSignal, useScoped } from './chunks/vidstack-B4rJ1ZKK.js';
|
|
15
|
+
export { audioGainSlider as AudioGainSlider, Captions, ChapterTitle, controls as Controls, GoogleCastButton, MediaAnnouncer, qualitySlider as QualitySlider, speedSlider as SpeedSlider, spinner as Spinner, Title, tooltip as Tooltip, useActiveTextCues, useActiveTextTrack, useChapterOptions, useChapterTitle, useTextCues } from './chunks/vidstack-B4rJ1ZKK.js';
|
|
16
|
+
import { mediaState, TextTrack, ThumbnailsLoader, updateSliderPreviewPlacement, DEFAULT_AUDIO_GAINS } from 'vidstack';
|
|
17
|
+
import { useMediaContext } from './chunks/vidstack-DbNoKLjz.js';
|
|
18
|
+
export { AirPlayButton, CaptionButton, FullscreenButton, Gesture, LiveButton, menu as Menu, MuteButton, PIPButton, PlayButton, radioGroup as RadioGroup, SeekButton, slider as Slider, thumbnail as Thumbnail, Time, timeSlider as TimeSlider, volumeSlider as VolumeSlider, useAudioOptions, useCaptionOptions, useMediaPlayer } from './chunks/vidstack-DbNoKLjz.js';
|
|
12
19
|
import { Icon } from './chunks/vidstack-CBF7iUqu.js';
|
|
13
|
-
export {
|
|
14
|
-
import '@floating-ui/dom';
|
|
20
|
+
export { useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions } from './chunks/vidstack-DnoqxmOs.js';
|
|
15
21
|
import 'react-dom';
|
|
16
22
|
|
|
17
|
-
const GROUPED_LOG = Symbol(0);
|
|
18
|
-
class GroupedLog {
|
|
19
|
-
constructor(logger, level, title, root, parent) {
|
|
20
|
-
this.logger = logger;
|
|
21
|
-
this.level = level;
|
|
22
|
-
this.title = title;
|
|
23
|
-
this.root = root;
|
|
24
|
-
this.parent = parent;
|
|
25
|
-
}
|
|
26
|
-
[GROUPED_LOG] = true;
|
|
27
|
-
logs = [];
|
|
28
|
-
log(...data) {
|
|
29
|
-
this.logs.push({ data });
|
|
30
|
-
return this;
|
|
31
|
-
}
|
|
32
|
-
labelledLog(label, ...data) {
|
|
33
|
-
this.logs.push({ label, data });
|
|
34
|
-
return this;
|
|
35
|
-
}
|
|
36
|
-
groupStart(title) {
|
|
37
|
-
return new GroupedLog(this.logger, this.level, title, this.root ?? this, this);
|
|
38
|
-
}
|
|
39
|
-
groupEnd() {
|
|
40
|
-
this.parent?.logs.push(this);
|
|
41
|
-
return this.parent ?? this;
|
|
42
|
-
}
|
|
43
|
-
dispatch() {
|
|
44
|
-
return this.logger.dispatch(this.level, this.root ?? this);
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
class Logger {
|
|
49
|
-
#target = null;
|
|
50
|
-
error(...data) {
|
|
51
|
-
return this.dispatch("error", ...data);
|
|
52
|
-
}
|
|
53
|
-
warn(...data) {
|
|
54
|
-
return this.dispatch("warn", ...data);
|
|
55
|
-
}
|
|
56
|
-
info(...data) {
|
|
57
|
-
return this.dispatch("info", ...data);
|
|
58
|
-
}
|
|
59
|
-
debug(...data) {
|
|
60
|
-
return this.dispatch("debug", ...data);
|
|
61
|
-
}
|
|
62
|
-
errorGroup(title) {
|
|
63
|
-
return new GroupedLog(this, "error", title);
|
|
64
|
-
}
|
|
65
|
-
warnGroup(title) {
|
|
66
|
-
return new GroupedLog(this, "warn", title);
|
|
67
|
-
}
|
|
68
|
-
infoGroup(title) {
|
|
69
|
-
return new GroupedLog(this, "info", title);
|
|
70
|
-
}
|
|
71
|
-
debugGroup(title) {
|
|
72
|
-
return new GroupedLog(this, "debug", title);
|
|
73
|
-
}
|
|
74
|
-
setTarget(newTarget) {
|
|
75
|
-
this.#target = newTarget;
|
|
76
|
-
}
|
|
77
|
-
dispatch(level, ...data) {
|
|
78
|
-
return this.#target?.dispatchEvent(
|
|
79
|
-
new DOMEvent("vds-log", {
|
|
80
|
-
bubbles: true,
|
|
81
|
-
composed: true,
|
|
82
|
-
detail: { level, data }
|
|
83
|
-
})
|
|
84
|
-
) || false;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
class LibASSTextRenderer {
|
|
89
|
-
constructor(loader, config) {
|
|
90
|
-
this.loader = loader;
|
|
91
|
-
this.config = config;
|
|
92
|
-
}
|
|
93
|
-
priority = 1;
|
|
94
|
-
#instance = null;
|
|
95
|
-
#track = null;
|
|
96
|
-
#typeRE = /(ssa|ass)$/;
|
|
97
|
-
canRender(track, video) {
|
|
98
|
-
return !!video && !!track.src && (isString(track.type) && this.#typeRE.test(track.type) || this.#typeRE.test(track.src));
|
|
99
|
-
}
|
|
100
|
-
attach(video) {
|
|
101
|
-
if (!video) return;
|
|
102
|
-
this.loader().then(async (mod) => {
|
|
103
|
-
this.#instance = new mod.default({
|
|
104
|
-
...this.config,
|
|
105
|
-
video,
|
|
106
|
-
subUrl: this.#track?.src || ""
|
|
107
|
-
});
|
|
108
|
-
new EventsController(this.#instance).add("ready", () => {
|
|
109
|
-
const canvas = this.#instance?._canvas;
|
|
110
|
-
if (canvas) canvas.style.pointerEvents = "none";
|
|
111
|
-
}).add("error", (event) => {
|
|
112
|
-
if (!this.#track) return;
|
|
113
|
-
this.#track[TextTrackSymbol.readyState] = 3;
|
|
114
|
-
this.#track.dispatchEvent(
|
|
115
|
-
new DOMEvent("error", {
|
|
116
|
-
trigger: event,
|
|
117
|
-
detail: event.error
|
|
118
|
-
})
|
|
119
|
-
);
|
|
120
|
-
});
|
|
121
|
-
});
|
|
122
|
-
}
|
|
123
|
-
changeTrack(track) {
|
|
124
|
-
if (!track || track.readyState === 3) {
|
|
125
|
-
this.#freeTrack();
|
|
126
|
-
} else if (this.#track !== track) {
|
|
127
|
-
this.#instance?.setTrackByUrl(track.src);
|
|
128
|
-
this.#track = track;
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
detach() {
|
|
132
|
-
this.#freeTrack();
|
|
133
|
-
}
|
|
134
|
-
#freeTrack() {
|
|
135
|
-
this.#instance?.freeTrack();
|
|
136
|
-
this.#track = null;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
const DEFAULT_AUDIO_GAINS = [1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4];
|
|
141
|
-
class AudioGainRadioGroup extends Component {
|
|
142
|
-
static props = {
|
|
143
|
-
normalLabel: "Disabled",
|
|
144
|
-
gains: DEFAULT_AUDIO_GAINS
|
|
145
|
-
};
|
|
146
|
-
#media;
|
|
147
|
-
#menu;
|
|
148
|
-
#controller;
|
|
149
|
-
get value() {
|
|
150
|
-
return this.#controller.value;
|
|
151
|
-
}
|
|
152
|
-
get disabled() {
|
|
153
|
-
const { gains } = this.$props, { canSetAudioGain } = this.#media.$state;
|
|
154
|
-
return !canSetAudioGain() || gains().length === 0;
|
|
155
|
-
}
|
|
156
|
-
constructor() {
|
|
157
|
-
super();
|
|
158
|
-
this.#controller = new RadioGroupController();
|
|
159
|
-
this.#controller.onValueChange = this.#onValueChange.bind(this);
|
|
160
|
-
}
|
|
161
|
-
onSetup() {
|
|
162
|
-
this.#media = useMediaContext();
|
|
163
|
-
if (hasProvidedContext(menuContext)) {
|
|
164
|
-
this.#menu = useContext(menuContext);
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
onConnect(el) {
|
|
168
|
-
effect(this.#watchValue.bind(this));
|
|
169
|
-
effect(this.#watchHintText.bind(this));
|
|
170
|
-
effect(this.#watchControllerDisabled.bind(this));
|
|
171
|
-
}
|
|
172
|
-
getOptions() {
|
|
173
|
-
const { gains, normalLabel } = this.$props;
|
|
174
|
-
return gains().map((gain) => ({
|
|
175
|
-
label: gain === 1 || gain === null ? normalLabel : String(gain * 100) + "%",
|
|
176
|
-
value: gain.toString()
|
|
177
|
-
}));
|
|
178
|
-
}
|
|
179
|
-
#watchValue() {
|
|
180
|
-
this.#controller.value = this.#getValue();
|
|
181
|
-
}
|
|
182
|
-
#watchHintText() {
|
|
183
|
-
const { normalLabel } = this.$props, { audioGain } = this.#media.$state, gain = audioGain();
|
|
184
|
-
this.#menu?.hint.set(gain === 1 || gain == null ? normalLabel() : String(gain * 100) + "%");
|
|
185
|
-
}
|
|
186
|
-
#watchControllerDisabled() {
|
|
187
|
-
this.#menu?.disable(this.disabled);
|
|
188
|
-
}
|
|
189
|
-
#getValue() {
|
|
190
|
-
const { audioGain } = this.#media.$state;
|
|
191
|
-
return audioGain()?.toString() ?? "1";
|
|
192
|
-
}
|
|
193
|
-
#onValueChange(value, trigger) {
|
|
194
|
-
if (this.disabled) return;
|
|
195
|
-
const gain = +value;
|
|
196
|
-
this.#media.remote.changeAudioGain(gain, trigger);
|
|
197
|
-
this.dispatch("change", { detail: gain, trigger });
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
const audiogainradiogroup__proto = AudioGainRadioGroup.prototype;
|
|
201
|
-
prop(audiogainradiogroup__proto, "value");
|
|
202
|
-
prop(audiogainradiogroup__proto, "disabled");
|
|
203
|
-
method(audiogainradiogroup__proto, "getOptions");
|
|
204
|
-
|
|
205
23
|
const playerCallbacks = [
|
|
206
24
|
"onAbort",
|
|
207
25
|
"onAudioTrackChange",
|
|
@@ -296,10 +114,10 @@ const MediaProvider = React.forwardRef(
|
|
|
296
114
|
);
|
|
297
115
|
MediaProvider.displayName = "MediaProvider";
|
|
298
116
|
function MediaOutlet({ provider, mediaProps, iframeProps }) {
|
|
299
|
-
const { sources, crossOrigin, poster, remotePlaybackInfo, nativeControls, viewType } = useStateContext(mediaState), { loader } = provider.$state, { $provider: $$provider, $providerSetup: $$providerSetup } = useMediaContext
|
|
117
|
+
const { sources, crossOrigin, poster, remotePlaybackInfo, nativeControls, viewType } = useStateContext(mediaState), { loader } = provider.$state, { $provider: $$provider, $providerSetup: $$providerSetup } = useMediaContext(), $sources = useSignal(sources), $nativeControls = useSignal(nativeControls), $crossOrigin = useSignal(crossOrigin), $poster = useSignal(poster), $loader = useSignal(loader), $provider = useSignal($$provider), $providerSetup = useSignal($$providerSetup), $remoteInfo = useSignal(remotePlaybackInfo), $mediaType = $loader?.mediaType(), $viewType = useSignal(viewType), isAudioView = $viewType === "audio", isYouTubeEmbed = $loader?.name === "youtube", isVimeoEmbed = $loader?.name === "vimeo", isEmbed = isYouTubeEmbed || isVimeoEmbed, isRemotion = $loader?.name === "remotion", isGoogleCast = $loader?.name === "google-cast", [googleCastIconPaths, setGoogleCastIconPaths] = React.useState(""), [hasMounted, setHasMounted] = React.useState(false);
|
|
300
118
|
React.useEffect(() => {
|
|
301
119
|
if (!isGoogleCast || googleCastIconPaths) return;
|
|
302
|
-
import('./chunks/vidstack-
|
|
120
|
+
import('./chunks/vidstack-D4t_SZbb.js').then(function (n) { return n.chromecast; }).then((mod) => {
|
|
303
121
|
setGoogleCastIconPaths(mod.default);
|
|
304
122
|
});
|
|
305
123
|
}, [isGoogleCast]);
|
|
@@ -363,7 +181,7 @@ function MediaOutlet({ provider, mediaProps, iframeProps }) {
|
|
|
363
181
|
MediaOutlet.displayName = "MediaOutlet";
|
|
364
182
|
|
|
365
183
|
function createTextTrack(init) {
|
|
366
|
-
const media = useMediaContext
|
|
184
|
+
const media = useMediaContext(), track = React.useMemo(() => new TextTrack(init), Object.values(init));
|
|
367
185
|
React.useEffect(() => {
|
|
368
186
|
media.textTracks.add(track);
|
|
369
187
|
return () => void media.textTracks.remove(track);
|
|
@@ -500,7 +318,7 @@ function useStore(ctor, ref) {
|
|
|
500
318
|
}
|
|
501
319
|
|
|
502
320
|
function useMediaProvider() {
|
|
503
|
-
const [provider, setProvider] = React.useState(null), context = useMediaContext
|
|
321
|
+
const [provider, setProvider] = React.useState(null), context = useMediaContext();
|
|
504
322
|
React.useEffect(() => {
|
|
505
323
|
if (!context) return;
|
|
506
324
|
return effect(() => {
|
|
@@ -613,7 +431,7 @@ function useAudioGainOptions({
|
|
|
613
431
|
gains = DEFAULT_AUDIO_GAINS,
|
|
614
432
|
disabledLabel = "disabled"
|
|
615
433
|
} = {}) {
|
|
616
|
-
const media = useMediaContext
|
|
434
|
+
const media = useMediaContext(), { audioGain, canSetAudioGain } = media.$state;
|
|
617
435
|
useSignal(audioGain);
|
|
618
436
|
useSignal(canSetAudioGain);
|
|
619
437
|
return React.useMemo(() => {
|
|
@@ -645,4 +463,4 @@ function useAudioGainOptions({
|
|
|
645
463
|
}, [gains]);
|
|
646
464
|
}
|
|
647
465
|
|
|
648
|
-
export { caption as Caption,
|
|
466
|
+
export { caption as Caption, Icon, MediaPlayer, MediaPlayerInstance, MediaProvider, MediaProviderInstance, Poster, PosterInstance, ToggleButton, ToggleButtonInstance, Track, createTextTrack, useActiveThumbnail, useAudioGainOptions, useMediaContext, useMediaProvider, useMediaState, useSliderPreview, useState, useStore, useThumbnails };
|