@glitchlab/vue-video-player 1.4.0 → 1.5.0
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/README.md +116 -6
- package/dist/HLSPlayer.vue.d.ts +2 -0
- package/dist/HLSPlayer.vue.d.ts.map +1 -1
- package/dist/VideoPlayer.vue.d.ts +21 -1
- package/dist/VideoPlayer.vue.d.ts.map +1 -1
- package/dist/components/ControlBar.vue.d.ts +34 -0
- package/dist/components/ControlBar.vue.d.ts.map +1 -1
- package/dist/components/IconNext.vue.d.ts +16 -0
- package/dist/components/IconNext.vue.d.ts.map +1 -0
- package/dist/components/IconPrev.vue.d.ts +16 -0
- package/dist/components/IconPrev.vue.d.ts.map +1 -0
- package/dist/index.cjs +3 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +1145 -825
- package/dist/index.mjs.map +1 -1
- package/dist/style.css +1 -1
- package/dist/utils/chapters.d.ts +33 -0
- package/dist/utils/chapters.d.ts.map +1 -0
- package/dist/utils/thumbnails.d.ts +37 -0
- package/dist/utils/thumbnails.d.ts.map +1 -0
- package/dist/utils/types.d.ts +49 -1
- package/dist/utils/types.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -16,9 +16,13 @@ A lightweight, HLS-capable Vue 3 video player with a polished overlay UI, device
|
|
|
16
16
|
- **HLS streaming** via `hls.js` with automatic native fallback (Safari)
|
|
17
17
|
- **YouTube support** — pass a YouTube URL and it embeds automatically, no extra config
|
|
18
18
|
- **Custom control bar** (default) — play/seek/time/speed/quality/captions/volume/PiP/fullscreen, consistent across every browser and OS. Or use `"native"` controls, or none.
|
|
19
|
+
- **Thumbnail seek preview** — hover the seek bar to see a frame preview from a WebVTT storyboard sprite
|
|
20
|
+
- **Chapters** — named timeline segments with tick marks on the seek bar, from a WebVTT file or an inline array
|
|
21
|
+
- **Playlist** — play a list of videos in sequence with auto-advance and prev/next buttons
|
|
19
22
|
- **Quality selector** — `Auto` + per-resolution switching for multi-rendition HLS streams
|
|
20
23
|
- **Audio-track switcher** — pick between multiple audio tracks (e.g. languages) when the stream provides them
|
|
21
24
|
- **Captions** — `<track>` subtitles/captions with an in-bar menu
|
|
25
|
+
- **Event emits** — `play`, `pause`, `ended`, `time-update`, `seeked`, `volume-change`, `milestone`, `error`
|
|
22
26
|
- **Keyboard shortcuts** — space, arrows, `M`, `F`, `P`
|
|
23
27
|
- **Nuxt 3 module** — `modules: ["@glitchlab/vue-video-player/nuxt"]` and you're done
|
|
24
28
|
- **Scoped CSS, no preflight** — all styles live under `.gvp-root`. No `*` resets, no theme tokens leaked into your design system
|
|
@@ -95,8 +99,13 @@ Then use the component anywhere — no manual import required:
|
|
|
95
99
|
|
|
96
100
|
| Prop | Type | Default | Description |
|
|
97
101
|
|---------------------|---------------------------------------------------|-----------------------------------------|------------------------------------------------------------------------------------------|
|
|
98
|
-
| `src` | `string` | — |
|
|
102
|
+
| `src` | `string` | — | Video URL. `.m3u8` is routed through HLS automatically. Optional when `playlist` is set. |
|
|
99
103
|
| `poster` | `string` | — | Poster image shown before playback starts. |
|
|
104
|
+
| `playlist` | `PlaylistItem[]` | — | A list of videos to play in sequence. Auto-advances on end; prev/next buttons appear. Takes precedence over `src`. See [Playlist](#playlist). |
|
|
105
|
+
| `defaultIndex` | `number` | `0` | Index of the playlist item to start on. |
|
|
106
|
+
| `autoAdvance` | `boolean` | `true` | Auto-advance to the next playlist item when one ends. |
|
|
107
|
+
| `thumbnails` | `string` | — | URL of a WebVTT storyboard for seek-bar thumbnail previews. See [Thumbnails](#thumbnail-seek-preview). |
|
|
108
|
+
| `chapters` | `string \| Chapter[]` | — | WebVTT chapters URL, or an inline array of `{ start, title }`. See [Chapters](#chapters). |
|
|
100
109
|
| `showDeviceToggle` | `boolean` | `true` | Show the desktop/mobile toggle pill in the top-left. |
|
|
101
110
|
| `defaultDevice` | `"desktop" \| "mobile"` | `"desktop"` | Initial device mode. |
|
|
102
111
|
| `hoverPlay` | `boolean` | `false` | Start playback on mouse-enter, pause on mouse-leave. |
|
|
@@ -114,11 +123,18 @@ Then use the component anywhere — no manual import required:
|
|
|
114
123
|
|
|
115
124
|
## Events
|
|
116
125
|
|
|
117
|
-
| Event
|
|
118
|
-
|
|
119
|
-
| `close`
|
|
120
|
-
| `play`
|
|
121
|
-
| `pause`
|
|
126
|
+
| Event | Payload | Description |
|
|
127
|
+
|-------------------|-------------------------------|----------------------------------------------------------------------|
|
|
128
|
+
| `close` | — | Emitted when the close button is clicked. Requires `closable=true`. |
|
|
129
|
+
| `play` | — | Emitted when playback starts or resumes. |
|
|
130
|
+
| `pause` | — | Emitted when playback pauses. |
|
|
131
|
+
| `ended` | — | Emitted when the current video reaches its end. |
|
|
132
|
+
| `time-update` | `(currentTime, duration)` | Emitted on every `timeupdate` (~4×/sec); times in seconds. |
|
|
133
|
+
| `seeked` | `(currentTime)` | Emitted after a seek completes, with the new time in seconds. |
|
|
134
|
+
| `volume-change` | `(volume, muted)` | Emitted when volume or mute state changes. |
|
|
135
|
+
| `milestone` | `(percent)` | Emitted once when watch progress crosses 25%, 50%, 75% and 100%. |
|
|
136
|
+
| `error` | — | Emitted when the underlying media element reports an error. |
|
|
137
|
+
| `playlist-change` | `(index, item)` | Emitted when the active playlist item changes. |
|
|
122
138
|
|
|
123
139
|
## Slots
|
|
124
140
|
|
|
@@ -194,6 +210,100 @@ Every part has a `.gvp-*` class hook — override what you need:
|
|
|
194
210
|
|
|
195
211
|
---
|
|
196
212
|
|
|
213
|
+
## Thumbnail seek preview
|
|
214
|
+
|
|
215
|
+
Hover the seek bar to see a frame preview. Pass `thumbnails` a URL to a **WebVTT storyboard** file — the format YouTube and Vimeo use. Each cue maps a time range to a region of a sprite image:
|
|
216
|
+
|
|
217
|
+
```
|
|
218
|
+
WEBVTT
|
|
219
|
+
|
|
220
|
+
00:00:00.000 --> 00:00:05.000
|
|
221
|
+
storyboard.jpg#xywh=0,0,160,90
|
|
222
|
+
|
|
223
|
+
00:00:05.000 --> 00:00:10.000
|
|
224
|
+
storyboard.jpg#xywh=160,0,160,90
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
```vue
|
|
228
|
+
<VueVideoPlayer src="/videos/movie.m3u8" thumbnails="/videos/storyboard.vtt" />
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
The `#xywh=x,y,w,h` fragment crops a tile out of the sprite; relative image paths resolve against the VTT's own URL. A cue with no `#xywh` uses the whole image. You can generate a storyboard from a video with `ffmpeg`:
|
|
232
|
+
|
|
233
|
+
```bash
|
|
234
|
+
ffmpeg -i video.mp4 -vf "fps=1/5,scale=160:90,tile=5x100" storyboard.jpg
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
Only used with the custom control bar.
|
|
238
|
+
|
|
239
|
+
---
|
|
240
|
+
|
|
241
|
+
## Chapters
|
|
242
|
+
|
|
243
|
+
Segment the timeline into named chapters. They add tick marks to the seek bar and show the chapter title in the hover preview. Pass either a WebVTT chapters URL or an inline array:
|
|
244
|
+
|
|
245
|
+
```vue
|
|
246
|
+
<!-- Inline -->
|
|
247
|
+
<VueVideoPlayer
|
|
248
|
+
src="/videos/tutorial.m3u8"
|
|
249
|
+
:chapters="[
|
|
250
|
+
{ start: 0, title: 'Introduction' },
|
|
251
|
+
{ start: 150, title: 'Getting started' },
|
|
252
|
+
{ start: 600, title: 'Advanced topics' },
|
|
253
|
+
]"
|
|
254
|
+
/>
|
|
255
|
+
|
|
256
|
+
<!-- From a WebVTT chapters file -->
|
|
257
|
+
<VueVideoPlayer src="/videos/tutorial.m3u8" chapters="/videos/chapters.vtt" />
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
Inline items may omit `end` — it's filled from the next chapter's `start` (or the video duration). Only used with the custom control bar.
|
|
261
|
+
|
|
262
|
+
---
|
|
263
|
+
|
|
264
|
+
## Playlist
|
|
265
|
+
|
|
266
|
+
Pass `playlist` an array of items to play videos in sequence. The player auto-advances when one ends and shows prev/next buttons in the control bar. Each item can carry its own `poster`, `thumbnails` and `chapters`:
|
|
267
|
+
|
|
268
|
+
```vue
|
|
269
|
+
<VueVideoPlayer
|
|
270
|
+
:playlist="[
|
|
271
|
+
{ src: '/videos/ep1.m3u8', title: 'Episode 1', thumbnails: '/videos/ep1.vtt' },
|
|
272
|
+
{ src: '/videos/ep2.m3u8', title: 'Episode 2' },
|
|
273
|
+
{ src: '/videos/ep3.m3u8', title: 'Episode 3' },
|
|
274
|
+
]"
|
|
275
|
+
:default-index="0"
|
|
276
|
+
auto-advance
|
|
277
|
+
@playlist-change="(index, item) => console.log('Now playing', item.title)"
|
|
278
|
+
/>
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
`playlist` takes precedence over `src`. Set `:auto-advance="false"` to require a manual next click. `PlaylistItem` is exported for typing.
|
|
282
|
+
|
|
283
|
+
---
|
|
284
|
+
|
|
285
|
+
## Event emits
|
|
286
|
+
|
|
287
|
+
Wire the player's playback events into your own analytics or UI without a separate timer:
|
|
288
|
+
|
|
289
|
+
```vue
|
|
290
|
+
<VueVideoPlayer
|
|
291
|
+
src="/videos/movie.m3u8"
|
|
292
|
+
@play="track('video_play')"
|
|
293
|
+
@pause="track('video_pause')"
|
|
294
|
+
@ended="track('video_complete')"
|
|
295
|
+
@time-update="(time, duration) => (progress = time / duration)"
|
|
296
|
+
@seeked="(time) => track('video_seek', { time })"
|
|
297
|
+
@volume-change="(volume, muted) => console.log(volume, muted)"
|
|
298
|
+
@milestone="(percent) => track(`watched_${percent}`)"
|
|
299
|
+
@error="showRetry()"
|
|
300
|
+
/>
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
`milestone` fires exactly once each as watch progress crosses 25%, 50%, 75% and 100% — handy for completion analytics. Milestone tracking resets per source (including playlist advances).
|
|
304
|
+
|
|
305
|
+
---
|
|
306
|
+
|
|
197
307
|
## YouTube URLs
|
|
198
308
|
|
|
199
309
|
Pass any common YouTube URL as `src` and the player swaps the `<video>` element for a privacy-enhanced (`youtube-nocookie.com`) embed inside the same styled frame — no extra prop needed:
|
package/dist/HLSPlayer.vue.d.ts
CHANGED
|
@@ -35,6 +35,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
35
35
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
36
36
|
play: () => void;
|
|
37
37
|
pause: () => void;
|
|
38
|
+
ended: () => void;
|
|
38
39
|
"audio-tracks": (tracks: AudioTrackInfo[]) => void;
|
|
39
40
|
"quality-levels": (levels: QualityLevelInfo[]) => void;
|
|
40
41
|
"current-level": (index: number) => void;
|
|
@@ -66,6 +67,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
66
67
|
}>>> & Readonly<{
|
|
67
68
|
onPlay?: (() => any) | undefined;
|
|
68
69
|
onPause?: (() => any) | undefined;
|
|
70
|
+
onEnded?: (() => any) | undefined;
|
|
69
71
|
"onAudio-tracks"?: ((tracks: AudioTrackInfo[]) => any) | undefined;
|
|
70
72
|
"onQuality-levels"?: ((levels: QualityLevelInfo[]) => any) | undefined;
|
|
71
73
|
"onCurrent-level"?: ((index: number) => any) | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HLSPlayer.vue.d.ts","sourceRoot":"","sources":["../src/HLSPlayer.vue"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"HLSPlayer.vue.d.ts","sourceRoot":"","sources":["../src/HLSPlayer.vue"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAsOlF,iBAAS,cAAc;qBA2DO,GAAG;EAGhC;AA2BD,QAAA,MAAM,eAAe;SAOZ,MAAM;gBACC,SAAS;YACb,OAAO;YACP,OAAO;WACR,OAAO;eACH,OAAO;eACP,OAAO;kBACJ,OAAO;cACX,MAAM;aACP,MAAM;YACP,MAAM;IACd,kFAAkF;sBAChE,MAAM;IACxB,oEAAoE;wBAChD,MAAM;;;;;;;;;;;;;;;;;;;;SAdrB,MAAM;gBACC,SAAS;YACb,OAAO;YACP,OAAO;WACR,OAAO;eACH,OAAO;eACP,OAAO;kBACJ,OAAO;cACX,MAAM;aACP,MAAM;YACP,MAAM;IACd,kFAAkF;sBAChE,MAAM;IACxB,oEAAoE;wBAChD,MAAM;;;;;;;;;;;;;;;;;;WAXlB,OAAO;UACR,OAAO;cACH,OAAO;cACP,OAAO;iBACJ,OAAO;aACX,MAAM;qBAIE,MAAM;uBAEJ,MAAM;4EAG5B,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { DeviceMode, VideoPlayerProps } from './utils/types';
|
|
1
|
+
import { DeviceMode, PlaylistItem, VideoPlayerProps } from './utils/types';
|
|
2
2
|
|
|
3
3
|
declare function __VLS_template(): {
|
|
4
4
|
default?(_: {}): any;
|
|
@@ -15,11 +15,20 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
15
15
|
controls: boolean;
|
|
16
16
|
autoPlay: boolean;
|
|
17
17
|
closable: boolean;
|
|
18
|
+
defaultIndex: number;
|
|
19
|
+
autoAdvance: boolean;
|
|
18
20
|
class: string;
|
|
19
21
|
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
20
22
|
play: () => void;
|
|
21
23
|
pause: () => void;
|
|
24
|
+
ended: () => void;
|
|
22
25
|
close: () => void;
|
|
26
|
+
error: () => void;
|
|
27
|
+
seeked: (currentTime: number) => void;
|
|
28
|
+
"time-update": (currentTime: number, duration: number) => void;
|
|
29
|
+
"volume-change": (volume: number, muted: boolean) => void;
|
|
30
|
+
milestone: (percent: 100 | 25 | 50 | 75) => void;
|
|
31
|
+
"playlist-change": (index: number, item: PlaylistItem) => void;
|
|
23
32
|
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<VideoPlayerProps & {
|
|
24
33
|
class?: string;
|
|
25
34
|
closable?: boolean;
|
|
@@ -32,17 +41,28 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
32
41
|
controls: boolean;
|
|
33
42
|
autoPlay: boolean;
|
|
34
43
|
closable: boolean;
|
|
44
|
+
defaultIndex: number;
|
|
45
|
+
autoAdvance: boolean;
|
|
35
46
|
class: string;
|
|
36
47
|
}>>> & Readonly<{
|
|
37
48
|
onPlay?: (() => any) | undefined;
|
|
38
49
|
onPause?: (() => any) | undefined;
|
|
50
|
+
onEnded?: (() => any) | undefined;
|
|
39
51
|
onClose?: (() => any) | undefined;
|
|
52
|
+
onError?: (() => any) | undefined;
|
|
53
|
+
onSeeked?: ((currentTime: number) => any) | undefined;
|
|
54
|
+
"onTime-update"?: ((currentTime: number, duration: number) => any) | undefined;
|
|
55
|
+
"onVolume-change"?: ((volume: number, muted: boolean) => any) | undefined;
|
|
56
|
+
onMilestone?: ((percent: 100 | 25 | 50 | 75) => any) | undefined;
|
|
57
|
+
"onPlaylist-change"?: ((index: number, item: PlaylistItem) => any) | undefined;
|
|
40
58
|
}>, {
|
|
41
59
|
muted: boolean;
|
|
42
60
|
loop: boolean;
|
|
43
61
|
controls: boolean | "custom" | "native";
|
|
44
62
|
autoPlay: boolean;
|
|
45
63
|
class: string;
|
|
64
|
+
defaultIndex: number;
|
|
65
|
+
autoAdvance: boolean;
|
|
46
66
|
showDeviceToggle: boolean;
|
|
47
67
|
defaultDevice: DeviceMode;
|
|
48
68
|
hoverPlay: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VideoPlayer.vue.d.ts","sourceRoot":"","sources":["../src/VideoPlayer.vue"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"VideoPlayer.vue.d.ts","sourceRoot":"","sources":["../src/VideoPlayer.vue"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAyVhF,iBAAS,cAAc;qBAudO,GAAG;EAGhC;AA2DD,QAAA,MAAM,eAAe;YAKsE,MAAM;eAAa,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;YAA1B,MAAM;eAAa,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAA1B,MAAM;;;;;;cAAa,OAAO;4EAEnH,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
|
|
@@ -11,12 +11,28 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
11
11
|
currentLevel?: number;
|
|
12
12
|
/** Selected level: -1 = Auto, >=0 pins a level. */
|
|
13
13
|
selectedLevel?: number;
|
|
14
|
+
/** URL of a WebVTT storyboard for seek-bar thumbnail previews. */
|
|
15
|
+
thumbnails?: string;
|
|
16
|
+
/** Timeline chapters: a WebVTT chapters URL or an inline array. */
|
|
17
|
+
chapters?: string | Array<{
|
|
18
|
+
start: number;
|
|
19
|
+
end?: number;
|
|
20
|
+
title: string;
|
|
21
|
+
}>;
|
|
22
|
+
/** Whether a previous playlist item exists. Shows the prev button. */
|
|
23
|
+
hasPrev?: boolean;
|
|
24
|
+
/** Whether a next playlist item exists. Shows the next button. */
|
|
25
|
+
hasNext?: boolean;
|
|
14
26
|
}>, {
|
|
15
27
|
qualityLevels: () => never[];
|
|
16
28
|
currentLevel: number;
|
|
17
29
|
selectedLevel: number;
|
|
30
|
+
hasPrev: boolean;
|
|
31
|
+
hasNext: boolean;
|
|
18
32
|
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
19
33
|
"select-level": (index: number) => void;
|
|
34
|
+
prev: () => void;
|
|
35
|
+
next: () => void;
|
|
20
36
|
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
21
37
|
video: HTMLVideoElement | null;
|
|
22
38
|
isPlaying: boolean;
|
|
@@ -28,16 +44,34 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
28
44
|
currentLevel?: number;
|
|
29
45
|
/** Selected level: -1 = Auto, >=0 pins a level. */
|
|
30
46
|
selectedLevel?: number;
|
|
47
|
+
/** URL of a WebVTT storyboard for seek-bar thumbnail previews. */
|
|
48
|
+
thumbnails?: string;
|
|
49
|
+
/** Timeline chapters: a WebVTT chapters URL or an inline array. */
|
|
50
|
+
chapters?: string | Array<{
|
|
51
|
+
start: number;
|
|
52
|
+
end?: number;
|
|
53
|
+
title: string;
|
|
54
|
+
}>;
|
|
55
|
+
/** Whether a previous playlist item exists. Shows the prev button. */
|
|
56
|
+
hasPrev?: boolean;
|
|
57
|
+
/** Whether a next playlist item exists. Shows the next button. */
|
|
58
|
+
hasNext?: boolean;
|
|
31
59
|
}>, {
|
|
32
60
|
qualityLevels: () => never[];
|
|
33
61
|
currentLevel: number;
|
|
34
62
|
selectedLevel: number;
|
|
63
|
+
hasPrev: boolean;
|
|
64
|
+
hasNext: boolean;
|
|
35
65
|
}>>> & Readonly<{
|
|
36
66
|
"onSelect-level"?: ((index: number) => any) | undefined;
|
|
67
|
+
onPrev?: (() => any) | undefined;
|
|
68
|
+
onNext?: (() => any) | undefined;
|
|
37
69
|
}>, {
|
|
38
70
|
currentLevel: number;
|
|
39
71
|
qualityLevels: QualityLevelInfo[];
|
|
40
72
|
selectedLevel: number;
|
|
73
|
+
hasPrev: boolean;
|
|
74
|
+
hasNext: boolean;
|
|
41
75
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
42
76
|
export default _default;
|
|
43
77
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ControlBar.vue.d.ts","sourceRoot":"","sources":["../../src/components/ControlBar.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ControlBar.vue.d.ts","sourceRoot":"","sources":["../../src/components/ControlBar.vue"],"names":[],"mappings":"AAiBA,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;WA8zCnE,gBAAgB,GAAG,IAAI;eACnB,OAAO;eACP,WAAW,GAAG,IAAI;kBACf,MAAM,IAAI;IACxB,sDAAsD;oBACtC,gBAAgB,EAAE;IAClC,uEAAuE;mBACxD,MAAM;IACrB,mDAAmD;oBACnC,MAAM;IACtB,kEAAkE;iBACrD,MAAM;IACnB,mEAAmE;eACxD,MAAM,GAAG,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzE,sEAAsE;cAC5D,OAAO;IACjB,kEAAkE;cACxD,OAAO;;;;;;;;;;;;WAjBV,gBAAgB,GAAG,IAAI;eACnB,OAAO;eACP,WAAW,GAAG,IAAI;kBACf,MAAM,IAAI;IACxB,sDAAsD;oBACtC,gBAAgB,EAAE;IAClC,uEAAuE;mBACxD,MAAM;IACrB,mDAAmD;oBACnC,MAAM;IACtB,kEAAkE;iBACrD,MAAM;IACnB,mEAAmE;eACxD,MAAM,GAAG,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzE,sEAAsE;cAC5D,OAAO;IACjB,kEAAkE;cACxD,OAAO;;;;;;;;;;;;kBAVF,MAAM;mBAFL,gBAAgB,EAAE;mBAIlB,MAAM;aAMZ,OAAO;aAEP,OAAO;;AAvBrB,wBA0BG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
2
|
+
class?: string;
|
|
3
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
4
|
+
class?: string;
|
|
5
|
+
}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
6
|
+
export default _default;
|
|
7
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
8
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
9
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
10
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
11
|
+
} : {
|
|
12
|
+
type: import('vue').PropType<T[K]>;
|
|
13
|
+
required: true;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=IconNext.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconNext.vue.d.ts","sourceRoot":"","sources":["../../src/components/IconNext.vue"],"names":[],"mappings":";YAuEqD,MAAM;;YAAN,MAAM;;AAnE3D,wBAqEI;AAAA,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACrE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
2
|
+
class?: string;
|
|
3
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
4
|
+
class?: string;
|
|
5
|
+
}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
6
|
+
export default _default;
|
|
7
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
8
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
9
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
10
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
11
|
+
} : {
|
|
12
|
+
type: import('vue').PropType<T[K]>;
|
|
13
|
+
required: true;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=IconPrev.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconPrev.vue.d.ts","sourceRoot":"","sources":["../../src/components/IconPrev.vue"],"names":[],"mappings":";YAuEqD,MAAM;;YAAN,MAAM;;AAnE3D,wBAqEI;AAAA,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACrE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
|