@hanifhan1f/vidstack-react 1.12.32 → 1.12.34
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-B-DU-_xu.js +241 -0
- package/dev/chunks/vidstack-C3VHrHPf.js +1677 -0
- package/dev/chunks/vidstack-CjLj3q5w.js +616 -0
- package/dev/chunks/vidstack-CniPzPQc.js +1537 -0
- package/dev/chunks/vidstack-DpWioszb.js +84 -0
- package/dev/chunks/vidstack-t48GJbb5.js +375 -0
- package/dev/player/vidstack-default-components.js +4 -4
- package/dev/player/vidstack-default-layout.js +4 -4
- package/dev/player/vidstack-plyr-layout.js +3 -3
- package/dev/vidstack.js +5 -5
- package/package.json +1 -1
- package/prod/chunks/vidstack-BI5-IK9v.js +241 -0
- package/prod/chunks/vidstack-BgAMJr1Y.js +1677 -0
- package/prod/chunks/vidstack-CbejzCJs.js +1537 -0
- package/prod/chunks/vidstack-DKWmxvB4.js +611 -0
- package/prod/chunks/vidstack-NR84X5HE.js +375 -0
- package/prod/chunks/vidstack-jSJ0Meez.js +84 -0
- package/prod/player/vidstack-default-components.js +4 -4
- package/prod/player/vidstack-default-layout.js +4 -4
- package/prod/player/vidstack-plyr-layout.js +3 -3
- package/prod/vidstack.js +5 -5
- package/server/chunks/vidstack-CSX6ausI.js +241 -0
- package/server/chunks/vidstack-CePUWLrW.js +611 -0
- package/server/chunks/vidstack-D7sOBYbw.js +84 -0
- package/server/chunks/vidstack-DqUb8JgU.js +375 -0
- package/server/chunks/vidstack-Dvh6BtYs.js +1677 -0
- package/server/chunks/vidstack-i9a2TQLO.js +1537 -0
- package/server/player/vidstack-default-components.js +4 -4
- package/server/player/vidstack-default-layout.js +4 -4
- package/server/player/vidstack-plyr-layout.js +3 -3
- package/server/vidstack.js +5 -5
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { listenEvent, EventsController, animationFrameThrottle, effect } from './vidstack-D_bWd66h.js';
|
|
5
|
+
import { useMediaPlayer } from './vidstack-CjLj3q5w.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,375 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { createReactComponent, composeRefs, listenEvent, useReactScope, scoped, computed, signal, effect, EventsController, useSignal } from './vidstack-D_bWd66h.js';
|
|
5
|
+
import { MediaAnnouncerInstance, Primitive, ControlsInstance, ControlsGroupInstance, TooltipInstance, TooltipTriggerInstance, TooltipContentInstance, GoogleCastButtonInstance, QualitySliderInstance, AudioGainSliderInstance, SpeedSliderInstance, useMediaState, watchActiveTextTrack, CaptionsInstance, formatSpokenTime, formatTime } from './vidstack-C5tZAkKo.js';
|
|
6
|
+
import { sliderCallbacks, Preview, Steps, Thumb, Track as Track$1, TrackFill as TrackFill$1, Value, useMediaContext } from './vidstack-CjLj3q5w.js';
|
|
7
|
+
|
|
8
|
+
const MediaAnnouncerBridge = createReactComponent(MediaAnnouncerInstance, {
|
|
9
|
+
events: ["onChange"]
|
|
10
|
+
});
|
|
11
|
+
const MediaAnnouncer = React.forwardRef(
|
|
12
|
+
({ style, children, ...props }, forwardRef) => {
|
|
13
|
+
return /* @__PURE__ */ React.createElement(MediaAnnouncerBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
|
|
14
|
+
Primitive.div,
|
|
15
|
+
{
|
|
16
|
+
...props2,
|
|
17
|
+
style: { display: "contents", ...style },
|
|
18
|
+
ref: composeRefs(props2.ref, forwardRef)
|
|
19
|
+
},
|
|
20
|
+
children
|
|
21
|
+
));
|
|
22
|
+
}
|
|
23
|
+
);
|
|
24
|
+
MediaAnnouncer.displayName = "MediaAnnouncer";
|
|
25
|
+
|
|
26
|
+
const ControlsBridge = createReactComponent(ControlsInstance);
|
|
27
|
+
const Root$5 = React.forwardRef(({ children, ...props }, forwardRef) => {
|
|
28
|
+
return /* @__PURE__ */ React.createElement(ControlsBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
|
|
29
|
+
Primitive.div,
|
|
30
|
+
{
|
|
31
|
+
...props2,
|
|
32
|
+
ref: composeRefs(props2.ref, forwardRef)
|
|
33
|
+
},
|
|
34
|
+
children
|
|
35
|
+
));
|
|
36
|
+
});
|
|
37
|
+
Root$5.displayName = "Controls";
|
|
38
|
+
const ControlsGroupBridge = createReactComponent(ControlsGroupInstance);
|
|
39
|
+
const Group = React.forwardRef(({ children, ...props }, forwardRef) => {
|
|
40
|
+
return /* @__PURE__ */ React.createElement(ControlsGroupBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
|
|
41
|
+
Primitive.div,
|
|
42
|
+
{
|
|
43
|
+
...props2,
|
|
44
|
+
ref: composeRefs(props2.ref, forwardRef)
|
|
45
|
+
},
|
|
46
|
+
children
|
|
47
|
+
));
|
|
48
|
+
});
|
|
49
|
+
Group.displayName = "ControlsGroup";
|
|
50
|
+
|
|
51
|
+
var controls = /*#__PURE__*/Object.freeze({
|
|
52
|
+
__proto__: null,
|
|
53
|
+
Group: Group,
|
|
54
|
+
Root: Root$5
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
const TooltipBridge = createReactComponent(TooltipInstance);
|
|
58
|
+
function Root$4({ children, ...props }) {
|
|
59
|
+
return /* @__PURE__ */ React.createElement(TooltipBridge, { ...props }, children);
|
|
60
|
+
}
|
|
61
|
+
Root$4.displayName = "Tooltip";
|
|
62
|
+
const TriggerBridge = createReactComponent(TooltipTriggerInstance);
|
|
63
|
+
const Trigger = React.forwardRef(
|
|
64
|
+
({ children, ...props }, forwardRef) => {
|
|
65
|
+
return /* @__PURE__ */ React.createElement(TriggerBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
|
|
66
|
+
Primitive.button,
|
|
67
|
+
{
|
|
68
|
+
...props2,
|
|
69
|
+
ref: composeRefs(props2.ref, forwardRef)
|
|
70
|
+
},
|
|
71
|
+
children
|
|
72
|
+
));
|
|
73
|
+
}
|
|
74
|
+
);
|
|
75
|
+
Trigger.displayName = "TooltipTrigger";
|
|
76
|
+
const ContentBridge = createReactComponent(TooltipContentInstance);
|
|
77
|
+
const Content = React.forwardRef(
|
|
78
|
+
({ children, ...props }, forwardRef) => {
|
|
79
|
+
return /* @__PURE__ */ React.createElement(ContentBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
|
|
80
|
+
Primitive.div,
|
|
81
|
+
{
|
|
82
|
+
...props2,
|
|
83
|
+
ref: composeRefs(props2.ref, forwardRef)
|
|
84
|
+
},
|
|
85
|
+
children
|
|
86
|
+
));
|
|
87
|
+
}
|
|
88
|
+
);
|
|
89
|
+
Content.displayName = "TooltipContent";
|
|
90
|
+
|
|
91
|
+
var tooltip = /*#__PURE__*/Object.freeze({
|
|
92
|
+
__proto__: null,
|
|
93
|
+
Content: Content,
|
|
94
|
+
Root: Root$4,
|
|
95
|
+
Trigger: Trigger
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
const GoogleCastButtonBridge = createReactComponent(GoogleCastButtonInstance, {
|
|
99
|
+
domEventsRegex: /^onMedia/
|
|
100
|
+
});
|
|
101
|
+
const GoogleCastButton = React.forwardRef(
|
|
102
|
+
({ children, ...props }, forwardRef) => {
|
|
103
|
+
return /* @__PURE__ */ React.createElement(GoogleCastButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
|
|
104
|
+
Primitive.button,
|
|
105
|
+
{
|
|
106
|
+
...props2,
|
|
107
|
+
ref: composeRefs(props2.ref, forwardRef)
|
|
108
|
+
},
|
|
109
|
+
children
|
|
110
|
+
));
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
GoogleCastButton.displayName = "GoogleCastButton";
|
|
114
|
+
|
|
115
|
+
const QualitySliderBridge = createReactComponent(QualitySliderInstance, {
|
|
116
|
+
events: sliderCallbacks,
|
|
117
|
+
domEventsRegex: /^onMedia/
|
|
118
|
+
});
|
|
119
|
+
const Root$3 = React.forwardRef(
|
|
120
|
+
({ children, ...props }, forwardRef) => {
|
|
121
|
+
return /* @__PURE__ */ React.createElement(QualitySliderBridge, { ...props, ref: forwardRef }, (props2) => /* @__PURE__ */ React.createElement(Primitive.div, { ...props2 }, children));
|
|
122
|
+
}
|
|
123
|
+
);
|
|
124
|
+
Root$3.displayName = "QualitySlider";
|
|
125
|
+
|
|
126
|
+
var qualitySlider = /*#__PURE__*/Object.freeze({
|
|
127
|
+
__proto__: null,
|
|
128
|
+
Preview: Preview,
|
|
129
|
+
Root: Root$3,
|
|
130
|
+
Steps: Steps,
|
|
131
|
+
Thumb: Thumb,
|
|
132
|
+
Track: Track$1,
|
|
133
|
+
TrackFill: TrackFill$1,
|
|
134
|
+
Value: Value
|
|
135
|
+
});
|
|
136
|
+
|
|
137
|
+
const AudioGainSliderBridge = createReactComponent(AudioGainSliderInstance, {
|
|
138
|
+
events: sliderCallbacks,
|
|
139
|
+
domEventsRegex: /^onMedia/
|
|
140
|
+
});
|
|
141
|
+
const Root$2 = React.forwardRef(
|
|
142
|
+
({ children, ...props }, forwardRef) => {
|
|
143
|
+
return /* @__PURE__ */ React.createElement(AudioGainSliderBridge, { ...props, ref: forwardRef }, (props2) => /* @__PURE__ */ React.createElement(Primitive.div, { ...props2 }, children));
|
|
144
|
+
}
|
|
145
|
+
);
|
|
146
|
+
Root$2.displayName = "AudioGainSlider";
|
|
147
|
+
|
|
148
|
+
var audioGainSlider = /*#__PURE__*/Object.freeze({
|
|
149
|
+
__proto__: null,
|
|
150
|
+
Preview: Preview,
|
|
151
|
+
Root: Root$2,
|
|
152
|
+
Steps: Steps,
|
|
153
|
+
Thumb: Thumb,
|
|
154
|
+
Track: Track$1,
|
|
155
|
+
TrackFill: TrackFill$1,
|
|
156
|
+
Value: Value
|
|
157
|
+
});
|
|
158
|
+
|
|
159
|
+
const SpeedSliderBridge = createReactComponent(SpeedSliderInstance, {
|
|
160
|
+
events: sliderCallbacks,
|
|
161
|
+
domEventsRegex: /^onMedia/
|
|
162
|
+
});
|
|
163
|
+
const Root$1 = React.forwardRef(
|
|
164
|
+
({ children, ...props }, forwardRef) => {
|
|
165
|
+
return /* @__PURE__ */ React.createElement(SpeedSliderBridge, { ...props, ref: forwardRef }, (props2) => /* @__PURE__ */ React.createElement(Primitive.div, { ...props2 }, children));
|
|
166
|
+
}
|
|
167
|
+
);
|
|
168
|
+
Root$1.displayName = "SpeedSlider";
|
|
169
|
+
|
|
170
|
+
var speedSlider = /*#__PURE__*/Object.freeze({
|
|
171
|
+
__proto__: null,
|
|
172
|
+
Preview: Preview,
|
|
173
|
+
Root: Root$1,
|
|
174
|
+
Steps: Steps,
|
|
175
|
+
Thumb: Thumb,
|
|
176
|
+
Track: Track$1,
|
|
177
|
+
TrackFill: TrackFill$1,
|
|
178
|
+
Value: Value
|
|
179
|
+
});
|
|
180
|
+
|
|
181
|
+
const Title = React.forwardRef(({ children, ...props }, forwardRef) => {
|
|
182
|
+
const $title = useMediaState("title");
|
|
183
|
+
return /* @__PURE__ */ React.createElement(Primitive.span, { ...props, ref: forwardRef }, $title, children);
|
|
184
|
+
});
|
|
185
|
+
Title.displayName = "Title";
|
|
186
|
+
|
|
187
|
+
function useActiveTextCues(track) {
|
|
188
|
+
const [activeCues, setActiveCues] = React.useState([]);
|
|
189
|
+
React.useEffect(() => {
|
|
190
|
+
if (!track) {
|
|
191
|
+
setActiveCues([]);
|
|
192
|
+
return;
|
|
193
|
+
}
|
|
194
|
+
function onCuesChange() {
|
|
195
|
+
if (track) setActiveCues(track.activeCues);
|
|
196
|
+
}
|
|
197
|
+
onCuesChange();
|
|
198
|
+
return listenEvent(track, "cue-change", onCuesChange);
|
|
199
|
+
}, [track]);
|
|
200
|
+
return activeCues;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
function useActiveTextTrack(kind) {
|
|
204
|
+
const media = useMediaContext(), [track, setTrack] = React.useState(null);
|
|
205
|
+
React.useEffect(() => {
|
|
206
|
+
return watchActiveTextTrack(media.textTracks, kind, setTrack);
|
|
207
|
+
}, [kind]);
|
|
208
|
+
return track;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
function useChapterTitle() {
|
|
212
|
+
const $track = useActiveTextTrack("chapters"), $cues = useActiveTextCues($track);
|
|
213
|
+
return $cues[0]?.text || "";
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
const ChapterTitle = React.forwardRef(
|
|
217
|
+
({ defaultText = "", children, ...props }, forwardRef) => {
|
|
218
|
+
const $chapterTitle = useChapterTitle();
|
|
219
|
+
return /* @__PURE__ */ React.createElement(Primitive.span, { ...props, ref: forwardRef }, $chapterTitle || defaultText, children);
|
|
220
|
+
}
|
|
221
|
+
);
|
|
222
|
+
ChapterTitle.displayName = "ChapterTitle";
|
|
223
|
+
|
|
224
|
+
const CaptionsBridge = createReactComponent(CaptionsInstance);
|
|
225
|
+
const Captions = React.forwardRef(
|
|
226
|
+
({ children, ...props }, forwardRef) => {
|
|
227
|
+
return /* @__PURE__ */ React.createElement(CaptionsBridge, { ...props, ref: forwardRef }, (props2) => /* @__PURE__ */ React.createElement(Primitive.div, { ...props2 }, children));
|
|
228
|
+
}
|
|
229
|
+
);
|
|
230
|
+
Captions.displayName = "Captions";
|
|
231
|
+
|
|
232
|
+
const Root = React.forwardRef(
|
|
233
|
+
({ size = 96, children, ...props }, forwardRef) => {
|
|
234
|
+
return /* @__PURE__ */ React.createElement(
|
|
235
|
+
"svg",
|
|
236
|
+
{
|
|
237
|
+
width: size,
|
|
238
|
+
height: size,
|
|
239
|
+
fill: "none",
|
|
240
|
+
viewBox: "0 0 120 120",
|
|
241
|
+
"aria-hidden": "true",
|
|
242
|
+
"data-part": "root",
|
|
243
|
+
...props,
|
|
244
|
+
ref: forwardRef
|
|
245
|
+
},
|
|
246
|
+
children
|
|
247
|
+
);
|
|
248
|
+
}
|
|
249
|
+
);
|
|
250
|
+
const Track = React.forwardRef(
|
|
251
|
+
({ width = 8, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
252
|
+
"circle",
|
|
253
|
+
{
|
|
254
|
+
cx: "60",
|
|
255
|
+
cy: "60",
|
|
256
|
+
r: "54",
|
|
257
|
+
stroke: "currentColor",
|
|
258
|
+
strokeWidth: width,
|
|
259
|
+
"data-part": "track",
|
|
260
|
+
...props,
|
|
261
|
+
ref
|
|
262
|
+
},
|
|
263
|
+
children
|
|
264
|
+
)
|
|
265
|
+
);
|
|
266
|
+
const TrackFill = React.forwardRef(
|
|
267
|
+
({ width = 8, fillPercent = 50, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
268
|
+
"circle",
|
|
269
|
+
{
|
|
270
|
+
cx: "60",
|
|
271
|
+
cy: "60",
|
|
272
|
+
r: "54",
|
|
273
|
+
stroke: "currentColor",
|
|
274
|
+
pathLength: "100",
|
|
275
|
+
strokeWidth: width,
|
|
276
|
+
strokeDasharray: 100,
|
|
277
|
+
strokeDashoffset: 100 - fillPercent,
|
|
278
|
+
"data-part": "track-fill",
|
|
279
|
+
...props,
|
|
280
|
+
ref
|
|
281
|
+
},
|
|
282
|
+
children
|
|
283
|
+
)
|
|
284
|
+
);
|
|
285
|
+
|
|
286
|
+
var spinner = /*#__PURE__*/Object.freeze({
|
|
287
|
+
__proto__: null,
|
|
288
|
+
Root: Root,
|
|
289
|
+
Track: Track,
|
|
290
|
+
TrackFill: TrackFill
|
|
291
|
+
});
|
|
292
|
+
|
|
293
|
+
function createSignal(initialValue, deps = []) {
|
|
294
|
+
const scope = useReactScope();
|
|
295
|
+
return React.useMemo(() => scoped(() => signal(initialValue), scope), [scope, ...deps]);
|
|
296
|
+
}
|
|
297
|
+
function createComputed(compute, deps = []) {
|
|
298
|
+
const scope = useReactScope();
|
|
299
|
+
return React.useMemo(() => scoped(() => computed(compute), scope), [scope, ...deps]);
|
|
300
|
+
}
|
|
301
|
+
function createEffect(compute, deps = []) {
|
|
302
|
+
const scope = useReactScope();
|
|
303
|
+
React.useEffect(() => scoped(() => effect(compute), scope), [scope, ...deps]);
|
|
304
|
+
}
|
|
305
|
+
function useScoped(compute) {
|
|
306
|
+
const scope = useReactScope();
|
|
307
|
+
return React.useMemo(() => scoped(compute, scope), [scope]);
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
function useTextCues(track) {
|
|
311
|
+
const [cues, setCues] = React.useState([]);
|
|
312
|
+
React.useEffect(() => {
|
|
313
|
+
if (!track) return;
|
|
314
|
+
function onCuesChange() {
|
|
315
|
+
if (track) setCues([...track.cues]);
|
|
316
|
+
}
|
|
317
|
+
const events = new EventsController(track).add("add-cue", onCuesChange).add("remove-cue", onCuesChange);
|
|
318
|
+
onCuesChange();
|
|
319
|
+
return () => {
|
|
320
|
+
setCues([]);
|
|
321
|
+
events.abort();
|
|
322
|
+
};
|
|
323
|
+
}, [track]);
|
|
324
|
+
return cues;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
function useChapterOptions() {
|
|
328
|
+
const media = useMediaContext(), track = useActiveTextTrack("chapters"), cues = useTextCues(track), $startTime = useSignal(media.$state.seekableStart), $endTime = useSignal(media.$state.seekableEnd);
|
|
329
|
+
useActiveTextCues(track);
|
|
330
|
+
return React.useMemo(() => {
|
|
331
|
+
const options = track ? cues.filter((cue) => cue.startTime <= $endTime && cue.endTime >= $startTime).map((cue, i) => {
|
|
332
|
+
let currentRef = null, stopProgressEffect;
|
|
333
|
+
return {
|
|
334
|
+
cue,
|
|
335
|
+
label: cue.text,
|
|
336
|
+
value: i.toString(),
|
|
337
|
+
startTimeText: formatTime(Math.max(0, cue.startTime - $startTime)),
|
|
338
|
+
durationText: formatSpokenTime(
|
|
339
|
+
Math.min($endTime, cue.endTime) - Math.max($startTime, cue.startTime)
|
|
340
|
+
),
|
|
341
|
+
get selected() {
|
|
342
|
+
return cue === track.activeCues[0];
|
|
343
|
+
},
|
|
344
|
+
setProgressVar(ref) {
|
|
345
|
+
if (!ref || cue !== track.activeCues[0]) {
|
|
346
|
+
stopProgressEffect?.();
|
|
347
|
+
stopProgressEffect = void 0;
|
|
348
|
+
ref?.style.setProperty("--progress", "0%");
|
|
349
|
+
currentRef = null;
|
|
350
|
+
return;
|
|
351
|
+
}
|
|
352
|
+
if (currentRef === ref) return;
|
|
353
|
+
currentRef = ref;
|
|
354
|
+
stopProgressEffect?.();
|
|
355
|
+
stopProgressEffect = effect(() => {
|
|
356
|
+
const { realCurrentTime } = media.$state, time = realCurrentTime(), cueStartTime = Math.max($startTime, cue.startTime), duration = Math.min($endTime, cue.endTime) - cueStartTime, progress = Math.max(0, time - cueStartTime) / duration * 100;
|
|
357
|
+
ref.style.setProperty("--progress", progress.toFixed(3) + "%");
|
|
358
|
+
});
|
|
359
|
+
},
|
|
360
|
+
select(trigger) {
|
|
361
|
+
media.remote.seek(cue.startTime - $startTime, trigger);
|
|
362
|
+
}
|
|
363
|
+
};
|
|
364
|
+
}) : [];
|
|
365
|
+
Object.defineProperty(options, "selectedValue", {
|
|
366
|
+
get() {
|
|
367
|
+
const index = options.findIndex((option) => option.selected);
|
|
368
|
+
return (index >= 0 ? index : 0).toString();
|
|
369
|
+
}
|
|
370
|
+
});
|
|
371
|
+
return options;
|
|
372
|
+
}, [cues, $startTime, $endTime]);
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
export { Captions, ChapterTitle, Content, GoogleCastButton, Group, MediaAnnouncer, Root$4 as Root, Root$2 as Root$1, Root$1 as Root$2, Root$3, Root$5 as Root$4, Root as Root$5, Title, Track, TrackFill, Trigger, audioGainSlider, controls, createComputed, createEffect, createSignal, qualitySlider, speedSlider, spinner, tooltip, useActiveTextCues, useActiveTextTrack, useChapterOptions, useChapterTitle, useScoped, useTextCues };
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
|
-
export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions } from '../chunks/vidstack-
|
|
3
|
+
export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions } from '../chunks/vidstack-C3VHrHPf.js';
|
|
4
4
|
export { defaultLayoutIcons } from './vidstack-default-icons.js';
|
|
5
5
|
import 'react';
|
|
6
6
|
import '../chunks/vidstack-D_bWd66h.js';
|
|
7
|
-
import '../chunks/vidstack-
|
|
7
|
+
import '../chunks/vidstack-t48GJbb5.js';
|
|
8
8
|
import '../chunks/vidstack-C5tZAkKo.js';
|
|
9
9
|
import '@floating-ui/dom';
|
|
10
|
-
import '../chunks/vidstack-
|
|
10
|
+
import '../chunks/vidstack-CjLj3q5w.js';
|
|
11
11
|
import 'react-dom';
|
|
12
|
-
import '../chunks/vidstack-
|
|
12
|
+
import '../chunks/vidstack-DpWioszb.js';
|
|
13
13
|
import '../chunks/vidstack-D-hQD1eE.js';
|
|
14
14
|
import '../chunks/vidstack-CBF7iUqu.js';
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
|
-
export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultLayoutContext, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions, i18n, useDefaultLayoutContext, useDefaultLayoutWord } from '../chunks/vidstack-
|
|
3
|
+
export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultLayoutContext, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions, i18n, useDefaultLayoutContext, useDefaultLayoutWord } from '../chunks/vidstack-C3VHrHPf.js';
|
|
4
4
|
export { defaultLayoutIcons } from './vidstack-default-icons.js';
|
|
5
5
|
import 'react';
|
|
6
6
|
import '../chunks/vidstack-D_bWd66h.js';
|
|
7
|
-
import '../chunks/vidstack-
|
|
7
|
+
import '../chunks/vidstack-t48GJbb5.js';
|
|
8
8
|
import '../chunks/vidstack-C5tZAkKo.js';
|
|
9
9
|
import '@floating-ui/dom';
|
|
10
|
-
import '../chunks/vidstack-
|
|
10
|
+
import '../chunks/vidstack-CjLj3q5w.js';
|
|
11
11
|
import 'react-dom';
|
|
12
|
-
import '../chunks/vidstack-
|
|
12
|
+
import '../chunks/vidstack-DpWioszb.js';
|
|
13
13
|
import '../chunks/vidstack-D-hQD1eE.js';
|
|
14
14
|
import '../chunks/vidstack-CBF7iUqu.js';
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
import { useMediaState, Primitive, IS_SERVER, isRemotionSrc, getDownloadFile } from '../chunks/vidstack-C5tZAkKo.js';
|
|
4
4
|
import * as React from 'react';
|
|
5
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,
|
|
7
|
-
import { useMediaRemote, useVideoQualityOptions, usePlaybackRateOptions } from '../chunks/vidstack-
|
|
8
|
-
import { useLayoutName, useClassName } from '../chunks/vidstack-
|
|
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, MuteButton, Root$4 } from '../chunks/vidstack-CjLj3q5w.js';
|
|
7
|
+
import { useMediaRemote, useCaptionOptions, useVideoQualityOptions, usePlaybackRateOptions } from '../chunks/vidstack-B-DU-_xu.js';
|
|
8
|
+
import { useLayoutName, useClassName } from '../chunks/vidstack-DpWioszb.js';
|
|
9
9
|
import { RemotionThumbnail, RemotionPoster, RemotionSliderThumbnail } from '../chunks/vidstack-D-hQD1eE.js';
|
|
10
10
|
export { plyrLayoutIcons } from './vidstack-plyr-icons.js';
|
|
11
11
|
import '@floating-ui/dom';
|
package/dev/vidstack.js
CHANGED
|
@@ -5,12 +5,12 @@ export { ARIAKeyShortcuts, AUDIO_EXTENSIONS, AUDIO_TYPES, AirPlayButtonInstance,
|
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import { isString, EventsController, DOMEvent, prop, method, Component, hasProvidedContext, useContext, effect, createReactComponent, useStateContext, useSignal, composeRefs, useSignalRecord, useReactScope, signal } from './chunks/vidstack-D_bWd66h.js';
|
|
7
7
|
export { appendTriggerEvent, findTriggerEvent, hasTriggerEvent, isKeyboardClick, isKeyboardEvent, isPointerEvent, walkTriggerEventChain } from './chunks/vidstack-D_bWd66h.js';
|
|
8
|
-
import { createSignal, useScoped } from './chunks/vidstack-
|
|
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-
|
|
10
|
-
import { useMediaContext as useMediaContext$1 } from './chunks/vidstack-
|
|
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,
|
|
8
|
+
import { createSignal, useScoped } from './chunks/vidstack-t48GJbb5.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-t48GJbb5.js';
|
|
10
|
+
import { useMediaContext as useMediaContext$1 } from './chunks/vidstack-CjLj3q5w.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, useMediaPlayer } from './chunks/vidstack-CjLj3q5w.js';
|
|
12
12
|
import { Icon } from './chunks/vidstack-CBF7iUqu.js';
|
|
13
|
-
export { DEFAULT_PLAYBACK_RATES, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions } from './chunks/vidstack-
|
|
13
|
+
export { DEFAULT_PLAYBACK_RATES, useCaptionOptions, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions } from './chunks/vidstack-B-DU-_xu.js';
|
|
14
14
|
import '@floating-ui/dom';
|
|
15
15
|
import 'react-dom';
|
|
16
16
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hanifhan1f/vidstack-react",
|
|
3
3
|
"description": "UI component library for building high-quality, accessible video and audio experiences on the web.",
|
|
4
|
-
"version": "1.12.
|
|
4
|
+
"version": "1.12.34",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"types": "index.d.ts",
|