@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
|
@@ -1,75 +1,89 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
|
-
import { useMediaState, Primitive,
|
|
3
|
+
import { IS_SERVER, useMediaState, Primitive, isRemotionSrc } from '../chunks/vidstack-D91K36KQ.js';
|
|
4
4
|
import * as React from 'react';
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
5
|
+
import { isString, isBoolean, uppercaseFirstChar, isUndefined, signal, composeRefs, useSignal, isNumber, listenEvent } from '../chunks/vidstack-CYK75vJF.js';
|
|
6
|
+
import { usePlyrLayoutClasses, isKeyboardEvent, isKeyboardClick } from 'vidstack';
|
|
7
|
+
import { useMediaContext, PlayButton, Root, Img, Gesture, AirPlayButton, CaptionButton, FullscreenButton, PIPButton, SeekButton, Root$1, Value, Preview, Thumbnail, LiveButton, Time, appendParamsToURL, Root$2, Button, Items, useAudioOptions, Root$3, Item, useCaptionOptions, MuteButton, Root$4 } from '../chunks/vidstack-BCBskRpc.js';
|
|
8
|
+
import { useMediaRemote, useVideoQualityOptions, usePlaybackRateOptions } from '../chunks/vidstack-DJThTSEm.js';
|
|
9
|
+
import { useLayoutName, useClassName } from '../chunks/vidstack-CtxjO6HG.js';
|
|
10
|
+
import { RemotionThumbnail, RemotionPoster, RemotionSliderThumbnail } from '../chunks/vidstack-BZVrgeRF.js';
|
|
10
11
|
export { plyrLayoutIcons } from './vidstack-plyr-icons.js';
|
|
11
|
-
import '@floating-ui/dom';
|
|
12
12
|
import 'react-dom';
|
|
13
13
|
import '../chunks/vidstack-CBF7iUqu.js';
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
15
|
+
IS_SERVER ? "" : navigator?.userAgent.toLowerCase() || "";
|
|
16
|
+
function canPlayHLSNatively(video) {
|
|
17
|
+
if (IS_SERVER) return false;
|
|
18
|
+
if (!video) video = document.createElement("video");
|
|
19
|
+
return video.canPlayType("application/vnd.apple.mpegurl").length > 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const AUDIO_EXTENSIONS = /\.(m4a|m4b|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx|flac)($|\?)/i;
|
|
23
|
+
const AUDIO_TYPES = /* @__PURE__ */ new Set([
|
|
24
|
+
"audio/mpeg",
|
|
25
|
+
"audio/ogg",
|
|
26
|
+
"audio/3gp",
|
|
27
|
+
"audio/mp3",
|
|
28
|
+
"audio/webm",
|
|
29
|
+
"audio/flac",
|
|
30
|
+
"audio/m4a",
|
|
31
|
+
"audio/m4b",
|
|
32
|
+
"audio/mp4a",
|
|
33
|
+
"audio/mp4"
|
|
34
|
+
]);
|
|
35
|
+
const VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v)(#t=[,\d+]+)?($|\?)/i;
|
|
36
|
+
const VIDEO_TYPES = /* @__PURE__ */ new Set([
|
|
37
|
+
"video/mp4",
|
|
38
|
+
"video/webm",
|
|
39
|
+
"video/3gp",
|
|
40
|
+
"video/ogg",
|
|
41
|
+
"video/avi",
|
|
42
|
+
"video/mpeg"
|
|
43
|
+
]);
|
|
44
|
+
const HLS_VIDEO_EXTENSIONS = /\.(m3u8)($|\?)/i;
|
|
45
|
+
const HLS_VIDEO_TYPES = /* @__PURE__ */ new Set([
|
|
46
|
+
// Apple sanctioned
|
|
47
|
+
"application/vnd.apple.mpegurl",
|
|
48
|
+
// Apple sanctioned for backwards compatibility
|
|
49
|
+
"audio/mpegurl",
|
|
50
|
+
// Very common
|
|
51
|
+
"audio/x-mpegurl",
|
|
52
|
+
// Very common
|
|
53
|
+
"application/x-mpegurl",
|
|
54
|
+
// Included for completeness
|
|
55
|
+
"video/x-mpegurl",
|
|
56
|
+
"video/mpegurl",
|
|
57
|
+
"application/mpegurl"
|
|
58
|
+
]);
|
|
59
|
+
function isAudioSrc({ src, type }) {
|
|
60
|
+
return isString(src) ? AUDIO_EXTENSIONS.test(src) || AUDIO_TYPES.has(type) || src.startsWith("blob:") && type === "audio/object" : type === "audio/object";
|
|
61
|
+
}
|
|
62
|
+
function isVideoSrc(src) {
|
|
63
|
+
return isString(src.src) ? VIDEO_EXTENSIONS.test(src.src) || VIDEO_TYPES.has(src.type) || src.src.startsWith("blob:") && src.type === "video/object" || isHLSSrc(src) && (IS_SERVER || canPlayHLSNatively()) : src.type === "video/object";
|
|
64
|
+
}
|
|
65
|
+
function isHLSSrc({ src, type }) {
|
|
66
|
+
return isString(src) && HLS_VIDEO_EXTENSIONS.test(src) || HLS_VIDEO_TYPES.has(type);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
function getDownloadFile({
|
|
70
|
+
title,
|
|
71
|
+
src,
|
|
72
|
+
download
|
|
73
|
+
}) {
|
|
74
|
+
const url = isBoolean(download) || download === "" ? src.src : isString(download) ? download : download?.url;
|
|
75
|
+
if (!isValidFileDownload({ url, src, download })) return null;
|
|
76
|
+
return {
|
|
77
|
+
url,
|
|
78
|
+
name: !isBoolean(download) && !isString(download) && download?.filename || title.toLowerCase() || "media"
|
|
52
79
|
};
|
|
53
|
-
const disposal = createDisposalBin();
|
|
54
|
-
for (const token of Object.keys(classes)) {
|
|
55
|
-
disposal.add(effect(() => void el.classList.toggle(token, !!classes[token]())));
|
|
56
|
-
}
|
|
57
|
-
disposal.add(
|
|
58
|
-
effect(() => {
|
|
59
|
-
const token = `plyr--${viewType()}`;
|
|
60
|
-
el.classList.add(token);
|
|
61
|
-
return () => el.classList.remove(token);
|
|
62
|
-
}),
|
|
63
|
-
effect(() => {
|
|
64
|
-
const { $provider } = media, type = $provider()?.type, token = `plyr--${isHTMLProvider(type) ? "html5" : type}`;
|
|
65
|
-
el.classList.toggle(token, !!type);
|
|
66
|
-
return () => el.classList.remove(token);
|
|
67
|
-
})
|
|
68
|
-
);
|
|
69
|
-
return () => disposal.empty();
|
|
70
80
|
}
|
|
71
|
-
function
|
|
72
|
-
|
|
81
|
+
function isValidFileDownload({
|
|
82
|
+
url,
|
|
83
|
+
src,
|
|
84
|
+
download
|
|
85
|
+
}) {
|
|
86
|
+
return isString(url) && (download && download !== true || isAudioSrc(src) || isVideoSrc(src));
|
|
73
87
|
}
|
|
74
88
|
|
|
75
89
|
const PlyrLayoutContext = React.createContext({});
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import { createDisposalBin, animationFrameThrottle, noop } from '../chunks/vidstack-
|
|
4
|
+
import { createDisposalBin, animationFrameThrottle, noop } from '../chunks/vidstack-CYK75vJF.js';
|
|
5
5
|
import { Internals, random } from 'remotion';
|
|
6
|
-
import { IS_SERVER, useMediaState, isRemotionSrc, Primitive, useSliderState } from '../chunks/vidstack-
|
|
7
|
-
export { isRemotionProvider } from '../chunks/vidstack-
|
|
8
|
-
import { RemotionThumbnail as RemotionThumbnail$1, RemotionSliderThumbnail as RemotionSliderThumbnail$1, RemotionPoster as RemotionPoster$1 } from '../chunks/vidstack-
|
|
9
|
-
import '
|
|
6
|
+
import { IS_SERVER, useMediaState, isRemotionSrc, Primitive, useSliderState } from '../chunks/vidstack-D91K36KQ.js';
|
|
7
|
+
export { isRemotionProvider } from '../chunks/vidstack-D91K36KQ.js';
|
|
8
|
+
import { RemotionThumbnail as RemotionThumbnail$1, RemotionSliderThumbnail as RemotionSliderThumbnail$1, RemotionPoster as RemotionPoster$1 } from '../chunks/vidstack-BZVrgeRF.js';
|
|
9
|
+
import 'vidstack';
|
|
10
10
|
|
|
11
11
|
class RemotionLayoutEngine {
|
|
12
12
|
#src = null;
|
|
@@ -328,7 +328,7 @@ class RemotionProviderLoader {
|
|
|
328
328
|
return "video";
|
|
329
329
|
}
|
|
330
330
|
async load(ctx) {
|
|
331
|
-
return new (await import('../chunks/vidstack-
|
|
331
|
+
return new (await import('../chunks/vidstack-DdiGCJVp.js')).RemotionProvider(this.target, ctx);
|
|
332
332
|
}
|
|
333
333
|
}
|
|
334
334
|
|
package/prod/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-D91K36KQ.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-D91K36KQ.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-CYK75vJF.js';
|
|
14
|
+
import { createSignal, useScoped } from './chunks/vidstack-CKapDFwB.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-CKapDFwB.js';
|
|
16
|
+
import { mediaState, TextTrack, ThumbnailsLoader, updateSliderPreviewPlacement, DEFAULT_AUDIO_GAINS } from 'vidstack';
|
|
17
|
+
import { useMediaContext } from './chunks/vidstack-BCBskRpc.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-BCBskRpc.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-DJThTSEm.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-CYK75vJF.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 };
|