@hanifhan1f/vidstack-react 1.12.30 → 1.12.31
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-3rdEWplD.js +189 -0
- package/dev/chunks/vidstack-BRTBRJ_I.js +288 -0
- package/dev/chunks/vidstack-C56TjAKZ.js +61 -0
- package/dev/chunks/vidstack-C5tZAkKo.js +11694 -0
- package/dev/chunks/vidstack-CXjRKTos.js +401 -0
- package/dev/chunks/vidstack-C_xw7iZ2.js +34 -0
- package/dev/chunks/vidstack-CaaASbOf.js +476 -0
- package/dev/chunks/vidstack-D2Bi2Td9.js +1537 -0
- package/dev/chunks/vidstack-D95QIbAo.js +551 -0
- package/dev/chunks/vidstack-DnmOVAbr.js +643 -0
- package/dev/chunks/vidstack-Dnoefs4z.js +180 -0
- package/dev/chunks/vidstack-S_S6XDnL.js +375 -0
- package/dev/chunks/vidstack-oOGofWSl.js +668 -0
- package/dev/chunks/vidstack-vh0BKYWJ.js +84 -0
- package/dev/player/vidstack-default-components.js +8 -9
- package/dev/player/vidstack-default-icons.js +1 -1
- package/dev/player/vidstack-default-layout.js +8 -9
- package/dev/player/vidstack-plyr-layout.js +63 -77
- package/dev/player/vidstack-remotion.js +6 -6
- package/dev/vidstack.js +133 -22
- package/package.json +1 -1
- package/prod/chunks/vidstack-B0SSIHIv.js +1537 -0
- package/prod/chunks/vidstack-B3E9kXKq.js +34 -0
- package/prod/chunks/vidstack-BLWRqo3I.js +470 -0
- package/prod/chunks/vidstack-BXAOpsiW.js +61 -0
- package/prod/chunks/vidstack-BzPma_p3.js +288 -0
- package/prod/chunks/vidstack-C48MQkXV.js +11199 -0
- package/prod/chunks/vidstack-CKBLQMZi.js +159 -0
- package/prod/chunks/vidstack-CwlfLr4v.js +504 -0
- package/prod/chunks/vidstack-DVMwXUgY.js +189 -0
- package/prod/chunks/vidstack-D_Sd7838.js +663 -0
- package/prod/chunks/vidstack-DgsBXr1J.js +84 -0
- package/prod/chunks/vidstack-DhSvljmQ.js +375 -0
- package/prod/chunks/vidstack-DlPpeEXU.js +545 -0
- package/prod/chunks/vidstack-xwdT591E.js +386 -0
- package/prod/player/vidstack-default-components.js +8 -9
- package/prod/player/vidstack-default-icons.js +1 -1
- package/prod/player/vidstack-default-layout.js +8 -9
- package/prod/player/vidstack-plyr-layout.js +63 -77
- package/prod/player/vidstack-remotion.js +6 -6
- package/prod/vidstack.js +204 -22
- package/server/chunks/vidstack--ufi23Q6.js +1537 -0
- package/server/chunks/vidstack-3hd9uS5U.js +386 -0
- package/server/chunks/vidstack-B_l_DXPI.js +61 -0
- package/server/chunks/vidstack-Bb44UuL8.js +470 -0
- package/server/chunks/vidstack-Bu9QXEz1.js +159 -0
- package/server/chunks/vidstack-Cb_tNfNU.js +11199 -0
- package/server/chunks/vidstack-D9vUNwri.js +288 -0
- package/server/chunks/vidstack-DM-5dPT-.js +663 -0
- package/server/chunks/vidstack-DWfS9vAY.js +84 -0
- package/server/chunks/vidstack-DY51lx0R.js +189 -0
- package/server/chunks/vidstack-VGPw_CQP.js +375 -0
- package/server/chunks/vidstack-dz2TmHzm.js +34 -0
- package/server/chunks/vidstack-e0ZPAI-d.js +504 -0
- package/server/chunks/vidstack-zzooMghu.js +545 -0
- package/server/player/vidstack-default-components.js +8 -9
- package/server/player/vidstack-default-icons.js +1 -1
- package/server/player/vidstack-default-layout.js +8 -9
- package/server/player/vidstack-plyr-layout.js +63 -77
- package/server/player/vidstack-remotion.js +6 -6
- package/server/vidstack.js +204 -22
|
@@ -1,89 +1,75 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { useMediaState, Primitive, IS_SERVER, isRemotionSrc, getDownloadFile } from '../chunks/vidstack-Cb_tNfNU.js';
|
|
4
4
|
import * as React from 'react';
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import { RemotionThumbnail, RemotionPoster, RemotionSliderThumbnail } from '../chunks/vidstack-DeS67_gx.js';
|
|
5
|
+
import { effect, createDisposalBin, uppercaseFirstChar, isUndefined, signal, composeRefs, useSignal, isNumber, listenEvent, isString, isKeyboardEvent, isKeyboardClick } from '../chunks/vidstack-D_bWd66h.js';
|
|
6
|
+
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-DM-5dPT-.js';
|
|
7
|
+
import { useMediaRemote, useVideoQualityOptions, usePlaybackRateOptions } from '../chunks/vidstack-DY51lx0R.js';
|
|
8
|
+
import { useLayoutName, useClassName } from '../chunks/vidstack-DWfS9vAY.js';
|
|
9
|
+
import { RemotionThumbnail, RemotionPoster, RemotionSliderThumbnail } from '../chunks/vidstack-D-hQD1eE.js';
|
|
11
10
|
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
|
-
const
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
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"
|
|
15
|
+
function usePlyrLayoutClasses(el, media) {
|
|
16
|
+
const {
|
|
17
|
+
canAirPlay,
|
|
18
|
+
canFullscreen,
|
|
19
|
+
canPictureInPicture,
|
|
20
|
+
controlsHidden,
|
|
21
|
+
currentTime,
|
|
22
|
+
fullscreen,
|
|
23
|
+
hasCaptions,
|
|
24
|
+
isAirPlayConnected,
|
|
25
|
+
paused,
|
|
26
|
+
pictureInPicture,
|
|
27
|
+
playing,
|
|
28
|
+
pointer,
|
|
29
|
+
poster,
|
|
30
|
+
textTrack,
|
|
31
|
+
viewType,
|
|
32
|
+
waiting
|
|
33
|
+
} = media.$state;
|
|
34
|
+
el.classList.add("plyr");
|
|
35
|
+
el.classList.add("plyr--full-ui");
|
|
36
|
+
const classes = {
|
|
37
|
+
"plyr--airplay-active": isAirPlayConnected,
|
|
38
|
+
"plyr--airplay-supported": canAirPlay,
|
|
39
|
+
"plyr--fullscreen-active": fullscreen,
|
|
40
|
+
"plyr--fullscreen-enabled": canFullscreen,
|
|
41
|
+
"plyr--hide-controls": controlsHidden,
|
|
42
|
+
"plyr--is-touch": () => pointer() === "coarse",
|
|
43
|
+
"plyr--loading": waiting,
|
|
44
|
+
"plyr--paused": paused,
|
|
45
|
+
"plyr--pip-active": pictureInPicture,
|
|
46
|
+
"plyr--pip-enabled": canPictureInPicture,
|
|
47
|
+
"plyr--playing": playing,
|
|
48
|
+
"plyr__poster-enabled": poster,
|
|
49
|
+
"plyr--stopped": () => paused() && currentTime() === 0,
|
|
50
|
+
"plyr--captions-active": textTrack,
|
|
51
|
+
"plyr--captions-enabled": hasCaptions
|
|
79
52
|
};
|
|
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();
|
|
80
70
|
}
|
|
81
|
-
function
|
|
82
|
-
|
|
83
|
-
src,
|
|
84
|
-
download
|
|
85
|
-
}) {
|
|
86
|
-
return isString(url) && (download && download !== true || isAudioSrc(src) || isVideoSrc(src));
|
|
71
|
+
function isHTMLProvider(type) {
|
|
72
|
+
return type === "audio" || type === "video";
|
|
87
73
|
}
|
|
88
74
|
|
|
89
75
|
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-D_bWd66h.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-Cb_tNfNU.js';
|
|
7
|
+
export { isRemotionProvider } from '../chunks/vidstack-Cb_tNfNU.js';
|
|
8
|
+
import { RemotionThumbnail as RemotionThumbnail$1, RemotionSliderThumbnail as RemotionSliderThumbnail$1, RemotionPoster as RemotionPoster$1 } from '../chunks/vidstack-D-hQD1eE.js';
|
|
9
|
+
import '@floating-ui/dom';
|
|
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-e0ZPAI-d.js')).RemotionProvider(this.target, ctx);
|
|
332
332
|
}
|
|
333
333
|
}
|
|
334
334
|
|
package/server/vidstack.js
CHANGED
|
@@ -1,25 +1,207 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
export
|
|
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';
|
|
3
|
+
import { TextTrackSymbol, RadioGroupController, useMediaContext, menuContext, Primitive, MediaPlayerInstance, MediaProviderInstance, isRemotionProvider, mediaState, TextTrack, ToggleButtonInstance, PosterInstance, useMediaState, ThumbnailsLoader, updateSliderPreviewPlacement } from './chunks/vidstack-Cb_tNfNU.js';
|
|
4
|
+
export { ARIAKeyShortcuts, AUDIO_EXTENSIONS, AUDIO_TYPES, AirPlayButtonInstance, AudioGainSliderInstance, AudioProviderLoader, AudioTrackList, CaptionButtonInstance, CaptionsInstance, ControlsGroupInstance, ControlsInstance, DASHProviderLoader, DASH_VIDEO_EXTENSIONS, DASH_VIDEO_TYPES, FullscreenButtonInstance, FullscreenController, GestureInstance, GoogleCastButtonInstance, HLSProviderLoader, HLS_VIDEO_EXTENSIONS, HLS_VIDEO_TYPES, List, LiveButtonInstance, LocalMediaStorage, MEDIA_KEY_SHORTCUTS, MediaAnnouncerInstance, MediaControls, MediaRemoteControl, MenuButtonInstance, MenuInstance, MenuItemInstance, MenuItemsInstance, MenuPortalInstance, MuteButtonInstance, PIPButtonInstance, PlayButtonInstance, QualitySliderInstance, RadioGroupInstance, RadioInstance, ScreenOrientationController, SeekButtonInstance, SliderChaptersInstance, SliderInstance, SliderPreviewInstance, SliderThumbnailInstance, SliderValueInstance, SliderVideoInstance, SpeedSliderInstance, TextRenderers, TextTrackList, ThumbnailInstance, TimeInstance, TimeRange, TimeSliderInstance, TooltipContentInstance, TooltipInstance, TooltipTriggerInstance, VIDEO_EXTENSIONS, VIDEO_TYPES, VideoProviderLoader, VideoQualityList, VimeoProviderLoader, VolumeSliderInstance, YouTubeProviderLoader, boundTime, canChangeVolume, canFullscreen, canGoogleCastSrc, canOrientScreen, canPlayHLSNatively, canRotateScreen, canUsePictureInPicture, canUseVideoPresentation, findActiveCue, formatSpokenTime, formatTime, getDownloadFile, getTimeRangesEnd, getTimeRangesStart, isAudioProvider, isAudioSrc, isCueActive, isDASHProvider, isDASHSrc, isGoogleCastProvider, isHLSProvider, isHLSSrc, isHTMLAudioElement, isHTMLIFrameElement, isHTMLMediaElement, isHTMLVideoElement, isMediaStream, isTrackCaptionKind, isVideoProvider, isVideoQualitySrc, isVideoSrc, isVimeoProvider, isYouTubeProvider, mediaContext, normalizeTimeIntervals, parseJSONCaptionsFile, sliderState, softResetMediaState, sortVideoQualities, updateTimeIntervals, useMediaStore, useSliderState, useSliderStore, watchActiveTextTrack, watchCueTextChange } from './chunks/vidstack-Cb_tNfNU.js';
|
|
12
5
|
import * as React from 'react';
|
|
13
|
-
import { createReactComponent, useStateContext, useSignal,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
import { useMediaContext } from './chunks/vidstack-
|
|
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-
|
|
6
|
+
import { DOMEvent, isString, EventsController, prop, method, Component, hasProvidedContext, useContext, effect, createReactComponent, useStateContext, useSignal, composeRefs, useSignalRecord, useReactScope, signal } from './chunks/vidstack-D_bWd66h.js';
|
|
7
|
+
export { appendTriggerEvent, findTriggerEvent, hasTriggerEvent, isKeyboardClick, isKeyboardEvent, isPointerEvent, walkTriggerEventChain } from './chunks/vidstack-D_bWd66h.js';
|
|
8
|
+
import { createSignal, useScoped } from './chunks/vidstack-VGPw_CQP.js';
|
|
9
|
+
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-VGPw_CQP.js';
|
|
10
|
+
import { useMediaContext as useMediaContext$1 } from './chunks/vidstack-DM-5dPT-.js';
|
|
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-DM-5dPT-.js';
|
|
19
12
|
import { Icon } from './chunks/vidstack-CBF7iUqu.js';
|
|
20
|
-
export { useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions } from './chunks/vidstack-
|
|
13
|
+
export { DEFAULT_PLAYBACK_RATES, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions } from './chunks/vidstack-DY51lx0R.js';
|
|
14
|
+
import '@floating-ui/dom';
|
|
21
15
|
import 'react-dom';
|
|
22
16
|
|
|
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
|
+
|
|
23
205
|
const playerCallbacks = [
|
|
24
206
|
"onAbort",
|
|
25
207
|
"onAudioTrackChange",
|
|
@@ -114,10 +296,10 @@ const MediaProvider = React.forwardRef(
|
|
|
114
296
|
);
|
|
115
297
|
MediaProvider.displayName = "MediaProvider";
|
|
116
298
|
function MediaOutlet({ provider, mediaProps, iframeProps }) {
|
|
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);
|
|
299
|
+
const { sources, crossOrigin, poster, remotePlaybackInfo, nativeControls, viewType } = useStateContext(mediaState), { loader } = provider.$state, { $provider: $$provider, $providerSetup: $$providerSetup } = useMediaContext$1(), $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);
|
|
118
300
|
React.useEffect(() => {
|
|
119
301
|
if (!isGoogleCast || googleCastIconPaths) return;
|
|
120
|
-
import('./chunks/vidstack-
|
|
302
|
+
import('./chunks/vidstack-D_bWd66h.js').then(function (n) { return n.chromecast; }).then((mod) => {
|
|
121
303
|
setGoogleCastIconPaths(mod.default);
|
|
122
304
|
});
|
|
123
305
|
}, [isGoogleCast]);
|
|
@@ -181,7 +363,7 @@ function MediaOutlet({ provider, mediaProps, iframeProps }) {
|
|
|
181
363
|
MediaOutlet.displayName = "MediaOutlet";
|
|
182
364
|
|
|
183
365
|
function createTextTrack(init) {
|
|
184
|
-
const media = useMediaContext(), track = React.useMemo(() => new TextTrack(init), Object.values(init));
|
|
366
|
+
const media = useMediaContext$1(), track = React.useMemo(() => new TextTrack(init), Object.values(init));
|
|
185
367
|
React.useEffect(() => {
|
|
186
368
|
media.textTracks.add(track);
|
|
187
369
|
return () => void media.textTracks.remove(track);
|
|
@@ -318,7 +500,7 @@ function useStore(ctor, ref) {
|
|
|
318
500
|
}
|
|
319
501
|
|
|
320
502
|
function useMediaProvider() {
|
|
321
|
-
const [provider, setProvider] = React.useState(null), context = useMediaContext();
|
|
503
|
+
const [provider, setProvider] = React.useState(null), context = useMediaContext$1();
|
|
322
504
|
React.useEffect(() => {
|
|
323
505
|
if (!context) return;
|
|
324
506
|
return effect(() => {
|
|
@@ -431,7 +613,7 @@ function useAudioGainOptions({
|
|
|
431
613
|
gains = DEFAULT_AUDIO_GAINS,
|
|
432
614
|
disabledLabel = "disabled"
|
|
433
615
|
} = {}) {
|
|
434
|
-
const media = useMediaContext(), { audioGain, canSetAudioGain } = media.$state;
|
|
616
|
+
const media = useMediaContext$1(), { audioGain, canSetAudioGain } = media.$state;
|
|
435
617
|
useSignal(audioGain);
|
|
436
618
|
useSignal(canSetAudioGain);
|
|
437
619
|
return React.useMemo(() => {
|
|
@@ -463,4 +645,4 @@ function useAudioGainOptions({
|
|
|
463
645
|
}, [gains]);
|
|
464
646
|
}
|
|
465
647
|
|
|
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 };
|
|
648
|
+
export { caption as Caption, DEFAULT_AUDIO_GAINS, Icon, LibASSTextRenderer, Logger, MediaPlayer, MediaPlayerInstance, MediaProvider, MediaProviderInstance, Poster, PosterInstance, TextTrack, ToggleButton, ToggleButtonInstance, Track, createTextTrack, mediaState, useActiveThumbnail, useAudioGainOptions, useMediaContext$1 as useMediaContext, useMediaProvider, useMediaState, useSliderPreview, useState, useStore, useThumbnails };
|