@glitchlab/vue-video-player 1.3.0 → 1.5.0

package/README.md

@@ -14,11 +14,21 @@ A lightweight, HLS-capable Vue 3 video player with a polished overlay UI, device
 ## Why this player
 
 - **HLS streaming** via `hls.js` with automatic native fallback (Safari)
+- **YouTube support** — pass a YouTube URL and it embeds automatically, no extra config
+- **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.
+- **Thumbnail seek preview** — hover the seek bar to see a frame preview from a WebVTT storyboard sprite
+- **Chapters** — named timeline segments with tick marks on the seek bar, from a WebVTT file or an inline array
+- **Playlist** — play a list of videos in sequence with auto-advance and prev/next buttons
+- **Quality selector** — `Auto` + per-resolution switching for multi-rendition HLS streams
+- **Audio-track switcher** — pick between multiple audio tracks (e.g. languages) when the stream provides them
+- **Captions** — `<track>` subtitles/captions with an in-bar menu
+- **Event emits** — `play`, `pause`, `ended`, `time-update`, `seeked`, `volume-change`, `milestone`, `error`
+- **Keyboard shortcuts** — space, arrows, `M`, `F`, `P`
 - **Nuxt 3 module** — `modules: ["@glitchlab/vue-video-player/nuxt"]` and you're done
 - **Scoped CSS, no preflight** — all styles live under `.gvp-root`. No `*` resets, no theme tokens leaked into your design system
 - **Device-mode toggle** — flip between desktop (16:9) and mobile (9:16) presets
 - **Hover-to-play** with safe play/pause race handling
-- Tiny: ~3 KB CSS gzipped, ~3.6 KB JS gzipped
+- Lightweight: ~2 KB CSS + ~13 KB JS gzipped (hls.js is a peer dependency, loaded once)
 - Fully typed; SSR-safe
 
 ---
@@ -89,8 +99,13 @@ Then use the component anywhere — no manual import required:
 
 | Prop                | Type                                              | Default                                 | Description                                                                              |
 |---------------------|---------------------------------------------------|-----------------------------------------|------------------------------------------------------------------------------------------|
-| `src`               | `string`                                          | —                                       | **Required.** Video URL. `.m3u8` is routed through HLS automatically.                    |
+| `src`               | `string`                                          | —                                       | Video URL. `.m3u8` is routed through HLS automatically. Optional when `playlist` is set. |
 | `poster`            | `string`                                          | —                                       | Poster image shown before playback starts.                                               |
+| `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). |
+| `defaultIndex`      | `number`                                          | `0`                                     | Index of the playlist item to start on.                                                  |
+| `autoAdvance`       | `boolean`                                         | `true`                                  | Auto-advance to the next playlist item when one ends.                                    |
+| `thumbnails`        | `string`                                          | —                                       | URL of a WebVTT storyboard for seek-bar thumbnail previews. See [Thumbnails](#thumbnail-seek-preview). |
+| `chapters`          | `string \| Chapter[]`                             | —                                       | WebVTT chapters URL, or an inline array of `{ start, title }`. See [Chapters](#chapters). |
 | `showDeviceToggle`  | `boolean`                                         | `true`                                  | Show the desktop/mobile toggle pill in the top-left.                                     |
 | `defaultDevice`     | `"desktop" \| "mobile"`                           | `"desktop"`                             | Initial device mode.                                                                     |
 | `hoverPlay`         | `boolean`                                         | `false`                                 | Start playback on mouse-enter, pause on mouse-leave.                                     |
@@ -108,11 +123,18 @@ Then use the component anywhere — no manual import required:
 
 ## Events
 
-| Event   | Payload | Description                                                          |
-|---------|---------|----------------------------------------------------------------------|
-| `close` | —       | Emitted when the close button is clicked. Requires `closable=true`.  |
-| `play`  | —       | Emitted when playback starts.                                        |
-| `pause` | —       | Emitted when playback pauses.                                        |
+| Event             | Payload                       | Description                                                          |
+|-------------------|-------------------------------|----------------------------------------------------------------------|
+| `close`           | —                             | Emitted when the close button is clicked. Requires `closable=true`.  |
+| `play`            | —                             | Emitted when playback starts or resumes.                             |
+| `pause`           | —                             | Emitted when playback pauses.                                        |
+| `ended`           | —                             | Emitted when the current video reaches its end.                      |
+| `time-update`     | `(currentTime, duration)`     | Emitted on every `timeupdate` (~4×/sec); times in seconds.           |
+| `seeked`          | `(currentTime)`               | Emitted after a seek completes, with the new time in seconds.        |
+| `volume-change`   | `(volume, muted)`             | Emitted when volume or mute state changes.                           |
+| `milestone`       | `(percent)`                   | Emitted once when watch progress crosses 25%, 50%, 75% and 100%.     |
+| `error`           | —                             | Emitted when the underlying media element reports an error.          |
+| `playlist-change` | `(index, item)`               | Emitted when the active playlist item changes.                       |
 
 ## Slots
 
@@ -146,6 +168,7 @@ The bar includes, left to right:
 - **Seek bar** with a buffered indicator (live scrub — the video previews as you drag)
 - **Time** — `current / duration`
 - **Playback speed** — `0.5×` to `2×` menu
+- **Quality** — resolution selector (`Auto` + each height) — appears only for HLS streams with more than one quality level
 - **Captions** — appears only when the source has `<track>` subtitle/caption tracks
 - **Volume** — mute toggle + slider (slider expands on hover)
 - **Picture-in-Picture** — appears only where the browser supports it
@@ -187,6 +210,100 @@ Every part has a `.gvp-*` class hook — override what you need:
 
 ---
 
+## Thumbnail seek preview
+
+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:
+
+```
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+storyboard.jpg#xywh=0,0,160,90
+
+00:00:05.000 --> 00:00:10.000
+storyboard.jpg#xywh=160,0,160,90
+```
+
+```vue
+<VueVideoPlayer src="/videos/movie.m3u8" thumbnails="/videos/storyboard.vtt" />
+```
+
+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`:
+
+```bash
+ffmpeg -i video.mp4 -vf "fps=1/5,scale=160:90,tile=5x100" storyboard.jpg
+```
+
+Only used with the custom control bar.
+
+---
+
+## Chapters
+
+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:
+
+```vue
+<!-- Inline -->
+<VueVideoPlayer
+  src="/videos/tutorial.m3u8"
+  :chapters="[
+    { start: 0, title: 'Introduction' },
+    { start: 150, title: 'Getting started' },
+    { start: 600, title: 'Advanced topics' },
+  ]"
+/>
+
+<!-- From a WebVTT chapters file -->
+<VueVideoPlayer src="/videos/tutorial.m3u8" chapters="/videos/chapters.vtt" />
+```
+
+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.
+
+---
+
+## Playlist
+
+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`:
+
+```vue
+<VueVideoPlayer
+  :playlist="[
+    { src: '/videos/ep1.m3u8', title: 'Episode 1', thumbnails: '/videos/ep1.vtt' },
+    { src: '/videos/ep2.m3u8', title: 'Episode 2' },
+    { src: '/videos/ep3.m3u8', title: 'Episode 3' },
+  ]"
+  :default-index="0"
+  auto-advance
+  @playlist-change="(index, item) => console.log('Now playing', item.title)"
+/>
+```
+
+`playlist` takes precedence over `src`. Set `:auto-advance="false"` to require a manual next click. `PlaylistItem` is exported for typing.
+
+---
+
+## Event emits
+
+Wire the player's playback events into your own analytics or UI without a separate timer:
+
+```vue
+<VueVideoPlayer
+  src="/videos/movie.m3u8"
+  @play="track('video_play')"
+  @pause="track('video_pause')"
+  @ended="track('video_complete')"
+  @time-update="(time, duration) => (progress = time / duration)"
+  @seeked="(time) => track('video_seek', { time })"
+  @volume-change="(volume, muted) => console.log(volume, muted)"
+  @milestone="(percent) => track(`watched_${percent}`)"
+  @error="showRetry()"
+/>
+```
+
+`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).
+
+---
+
 ## YouTube URLs
 
 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

@@ -1,5 +1,6 @@
 import { HlsConfig } from 'hls.js';
 import { AudioTrackInfo } from './utils/audio-tracks';
+import { QualityLevelInfo } from './utils/quality-levels';
 
 declare function __VLS_template(): {
     default?(_: {}): any;
@@ -18,6 +19,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     class?: string;
     /** Index of the audio track to activate; `-1` means "leave at source default". */
     audioTrackIndex?: number;
+    /** Quality level to switch to: `-1` is Auto, `>=0` pins a level. */
+    qualityLevelIndex?: number;
 }>, {
     muted: boolean;
     loop: boolean;
@@ -26,12 +29,16 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     playsInline: boolean;
     preload: string;
     audioTrackIndex: number;
+    qualityLevelIndex: number;
 }>>, {
     videoEl: import('vue').Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     play: () => void;
     pause: () => void;
+    ended: () => void;
     "audio-tracks": (tracks: AudioTrackInfo[]) => void;
+    "quality-levels": (levels: QualityLevelInfo[]) => void;
+    "current-level": (index: number) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     src: string;
     hlsConfig?: HlsConfig;
@@ -46,6 +53,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     class?: string;
     /** Index of the audio track to activate; `-1` means "leave at source default". */
     audioTrackIndex?: number;
+    /** Quality level to switch to: `-1` is Auto, `>=0` pins a level. */
+    qualityLevelIndex?: number;
 }>, {
     muted: boolean;
     loop: boolean;
@@ -54,10 +63,14 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     playsInline: boolean;
     preload: string;
     audioTrackIndex: number;
+    qualityLevelIndex: number;
 }>>> & Readonly<{
     onPlay?: (() => any) | undefined;
     onPause?: (() => any) | undefined;
+    onEnded?: (() => any) | undefined;
     "onAudio-tracks"?: ((tracks: AudioTrackInfo[]) => any) | undefined;
+    "onQuality-levels"?: ((levels: QualityLevelInfo[]) => any) | undefined;
+    "onCurrent-level"?: ((index: number) => any) | undefined;
 }>, {
     muted: boolean;
     loop: boolean;
@@ -66,6 +79,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     playsInline: boolean;
     preload: string;
     audioTrackIndex: number;
+    qualityLevelIndex: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/dist/HLSPlayer.vue.d.ts.map

@@ -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;AAiM5E,iBAAS,cAAc;qBAoDO,GAAG;EAGhC;AAyBD,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;;;;;;;;;;;;;;;;SAZnB,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;;;;;;;;;;;;;;WAThB,OAAO;UACR,OAAO;cACH,OAAO;cACP,OAAO;iBACJ,OAAO;aACX,MAAM;qBAIE,MAAM;4EAG1B,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"}
+{"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"}

package/dist/VideoPlayer.vue.d.ts

@@ -1,4 +1,4 @@
-import { DeviceMode, VideoPlayerProps } from './utils/types';
+import { DeviceMode, PlaylistItem, VideoPlayerProps } from './utils/types';
 
 declare function __VLS_template(): {
     default?(_: {}): any;
@@ -15,11 +15,20 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     controls: boolean;
     autoPlay: boolean;
     closable: boolean;
+    defaultIndex: number;
+    autoAdvance: boolean;
     class: string;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     play: () => void;
     pause: () => void;
+    ended: () => void;
     close: () => void;
+    error: () => void;
+    seeked: (currentTime: number) => void;
+    "time-update": (currentTime: number, duration: number) => void;
+    "volume-change": (volume: number, muted: boolean) => void;
+    milestone: (percent: 100 | 25 | 50 | 75) => void;
+    "playlist-change": (index: number, item: PlaylistItem) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<VideoPlayerProps & {
     class?: string;
     closable?: boolean;
@@ -32,17 +41,28 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     controls: boolean;
     autoPlay: boolean;
     closable: boolean;
+    defaultIndex: number;
+    autoAdvance: boolean;
     class: string;
 }>>> & Readonly<{
     onPlay?: (() => any) | undefined;
     onPause?: (() => any) | undefined;
+    onEnded?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
+    onError?: (() => any) | undefined;
+    onSeeked?: ((currentTime: number) => any) | undefined;
+    "onTime-update"?: ((currentTime: number, duration: number) => any) | undefined;
+    "onVolume-change"?: ((volume: number, muted: boolean) => any) | undefined;
+    onMilestone?: ((percent: 100 | 25 | 50 | 75) => any) | undefined;
+    "onPlaylist-change"?: ((index: number, item: PlaylistItem) => any) | undefined;
 }>, {
     muted: boolean;
     loop: boolean;
     controls: boolean | "custom" | "native";
     autoPlay: boolean;
     class: string;
+    defaultIndex: number;
+    autoAdvance: boolean;
     showDeviceToggle: boolean;
     defaultDevice: DeviceMode;
     hoverPlay: boolean;

package/dist/VideoPlayer.vue.d.ts.map

@@ -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;AAmPlE,iBAAS,cAAc;qBAqbO,GAAG;EAGhC;AA8CD,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"}
+{"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"}

package/dist/components/ControlBar.vue.d.ts

@@ -1,14 +1,78 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+import { QualityLevelInfo } from '../utils/quality-levels';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     video: HTMLVideoElement | null;
     isPlaying: boolean;
     container: HTMLElement | null;
     onTogglePlay: () => void;
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** HLS quality levels (empty for non-HLS sources). */
+    qualityLevels?: QualityLevelInfo[];
+    /** The level hls.js is actually playing (real index, even in Auto). */
+    currentLevel?: number;
+    /** Selected level: -1 = Auto, >=0 pins a level. */
+    selectedLevel?: number;
+    /** URL of a WebVTT storyboard for seek-bar thumbnail previews. */
+    thumbnails?: string;
+    /** Timeline chapters: a WebVTT chapters URL or an inline array. */
+    chapters?: string | Array<{
+        start: number;
+        end?: number;
+        title: string;
+    }>;
+    /** Whether a previous playlist item exists. Shows the prev button. */
+    hasPrev?: boolean;
+    /** Whether a next playlist item exists. Shows the next button. */
+    hasNext?: boolean;
+}>, {
+    qualityLevels: () => never[];
+    currentLevel: number;
+    selectedLevel: number;
+    hasPrev: boolean;
+    hasNext: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "select-level": (index: number) => void;
+    prev: () => void;
+    next: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     video: HTMLVideoElement | null;
     isPlaying: boolean;
     container: HTMLElement | null;
     onTogglePlay: () => void;
-}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    /** HLS quality levels (empty for non-HLS sources). */
+    qualityLevels?: QualityLevelInfo[];
+    /** The level hls.js is actually playing (real index, even in Auto). */
+    currentLevel?: number;
+    /** Selected level: -1 = Auto, >=0 pins a level. */
+    selectedLevel?: number;
+    /** URL of a WebVTT storyboard for seek-bar thumbnail previews. */
+    thumbnails?: string;
+    /** Timeline chapters: a WebVTT chapters URL or an inline array. */
+    chapters?: string | Array<{
+        start: number;
+        end?: number;
+        title: string;
+    }>;
+    /** Whether a previous playlist item exists. Shows the prev button. */
+    hasPrev?: boolean;
+    /** Whether a next playlist item exists. Shows the next button. */
+    hasNext?: boolean;
+}>, {
+    qualityLevels: () => never[];
+    currentLevel: number;
+    selectedLevel: number;
+    hasPrev: boolean;
+    hasNext: boolean;
+}>>> & Readonly<{
+    "onSelect-level"?: ((index: number) => any) | undefined;
+    onPrev?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
+}>, {
+    currentLevel: number;
+    qualityLevels: QualityLevelInfo[];
+    selectedLevel: number;
+    hasPrev: boolean;
+    hasNext: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -19,4 +83,12 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 //# sourceMappingURL=ControlBar.vue.d.ts.map

package/dist/components/ControlBar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ControlBar.vue.d.ts","sourceRoot":"","sources":["../../src/components/ControlBar.vue"],"names":[],"mappings":";WA23BS,gBAAgB,GAAG,IAAI;eACnB,OAAO;eACP,WAAW,GAAG,IAAI;kBACf,MAAM,IAAI;;WAHjB,gBAAgB,GAAG,IAAI;eACnB,OAAO;eACP,WAAW,GAAG,IAAI;kBACf,MAAM,IAAI;;AAT1B,wBAWG;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"}
+{"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"}

package/dist/components/IconNext.vue.d.ts

@@ -0,0 +1,16 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    class?: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    class?: string;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+//# sourceMappingURL=IconNext.vue.d.ts.map

package/dist/components/IconNext.vue.d.ts.map

@@ -0,0 +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"}

package/dist/components/IconPrev.vue.d.ts

@@ -0,0 +1,16 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    class?: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    class?: string;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+//# sourceMappingURL=IconPrev.vue.d.ts.map

package/dist/components/IconPrev.vue.d.ts.map

@@ -0,0 +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"}

package/dist/components/IconQuality.vue.d.ts

@@ -0,0 +1,16 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    class?: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    class?: string;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+//# sourceMappingURL=IconQuality.vue.d.ts.map

package/dist/components/IconQuality.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconQuality.vue.d.ts","sourceRoot":"","sources":["../../src/components/IconQuality.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"}