@glitchlab/vue-video-player 1.0.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/LICENSE +21 -0
- package/README.md +293 -0
- package/dist/HLSPlayer.vue.d.ts +79 -0
- package/dist/HLSPlayer.vue.d.ts.map +1 -0
- package/dist/VideoPlayer.vue.d.ts +72 -0
- package/dist/VideoPlayer.vue.d.ts.map +1 -0
- package/dist/components/IconDesktop.vue.d.ts +16 -0
- package/dist/components/IconDesktop.vue.d.ts.map +1 -0
- package/dist/components/IconMobile.vue.d.ts +16 -0
- package/dist/components/IconMobile.vue.d.ts.map +1 -0
- package/dist/components/IconPlay.vue.d.ts +16 -0
- package/dist/components/IconPlay.vue.d.ts.map +1 -0
- package/dist/components/IconX.vue.d.ts +16 -0
- package/dist/components/IconX.vue.d.ts.map +1 -0
- package/dist/index.cjs +2 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.mjs +356 -0
- package/dist/index.mjs.map +1 -0
- package/dist/nuxt-module.cjs +2 -0
- package/dist/nuxt-module.cjs.map +1 -0
- package/dist/nuxt-module.d.ts +3 -0
- package/dist/nuxt-module.mjs +18 -0
- package/dist/nuxt-module.mjs.map +1 -0
- package/dist/style.css +4 -0
- package/dist/utils/nuxt-module.d.ts +7 -0
- package/dist/utils/nuxt-module.d.ts.map +1 -0
- package/dist/utils/types.d.ts +54 -0
- package/dist/utils/types.d.ts.map +1 -0
- package/package.json +104 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 im-fahad
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,293 @@
|
|
|
1
|
+
# @glitchlab/vue-video-player
|
|
2
|
+
|
|
3
|
+
A lightweight, HLS-capable Vue 3 video player with a polished overlay UI, device-mode toggle, hover-to-play, and **zero global CSS side-effects**. Ships a Nuxt 3 module for zero-config integration.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@glitchlab/vue-video-player)
|
|
6
|
+
[](https://bundlephobia.com/package/@glitchlab/vue-video-player)
|
|
7
|
+
[](./LICENSE)
|
|
8
|
+
[](#typescript)
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Why this player
|
|
13
|
+
|
|
14
|
+
- **HLS streaming** via `hls.js` with automatic native fallback (Safari)
|
|
15
|
+
- **Nuxt 3 module** — `modules: ["@glitchlab/vue-video-player/nuxt"]` and you're done
|
|
16
|
+
- **Scoped CSS, no preflight** — all styles live under `.gvp-root`. No `*` resets, no theme tokens leaked into your design system
|
|
17
|
+
- **Device-mode toggle** — flip between desktop (16:9) and mobile (9:16) presets
|
|
18
|
+
- **Hover-to-play** with safe play/pause race handling
|
|
19
|
+
- Tiny: ~3 KB CSS gzipped, ~3.6 KB JS gzipped
|
|
20
|
+
- Fully typed; SSR-safe
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## Installation
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install @glitchlab/vue-video-player hls.js
|
|
28
|
+
# or
|
|
29
|
+
pnpm add @glitchlab/vue-video-player hls.js
|
|
30
|
+
# or
|
|
31
|
+
yarn add @glitchlab/vue-video-player hls.js
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
> **Peer dependencies:** `vue >= 3`, `hls.js >= 1`
|
|
35
|
+
|
|
36
|
+
Import the stylesheet once at your app entry:
|
|
37
|
+
|
|
38
|
+
```ts
|
|
39
|
+
import "@glitchlab/vue-video-player/style.css";
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## Quick start
|
|
45
|
+
|
|
46
|
+
### Vue 3
|
|
47
|
+
|
|
48
|
+
```vue
|
|
49
|
+
<script setup lang="ts">
|
|
50
|
+
import { VueVideoPlayer } from "@glitchlab/vue-video-player";
|
|
51
|
+
import "@glitchlab/vue-video-player/style.css";
|
|
52
|
+
</script>
|
|
53
|
+
|
|
54
|
+
<template>
|
|
55
|
+
<VueVideoPlayer
|
|
56
|
+
src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
|
|
57
|
+
poster="/images/poster.jpg"
|
|
58
|
+
/>
|
|
59
|
+
</template>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Nuxt 3
|
|
63
|
+
|
|
64
|
+
Add the module to `nuxt.config.ts`:
|
|
65
|
+
|
|
66
|
+
```ts
|
|
67
|
+
export default defineNuxtConfig({
|
|
68
|
+
modules: ["@glitchlab/vue-video-player/nuxt"],
|
|
69
|
+
css: ["@glitchlab/vue-video-player/style.css"]
|
|
70
|
+
});
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Then use the component anywhere — no manual import required:
|
|
74
|
+
|
|
75
|
+
```vue
|
|
76
|
+
<template>
|
|
77
|
+
<VueVideoPlayer
|
|
78
|
+
src="https://example.com/video/playlist.m3u8"
|
|
79
|
+
poster="/images/poster.jpg"
|
|
80
|
+
/>
|
|
81
|
+
</template>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
## Props
|
|
87
|
+
|
|
88
|
+
| Prop | Type | Default | Description |
|
|
89
|
+
|---------------------|---------------------------------------------------|-----------------------------------------|------------------------------------------------------------------------------------------|
|
|
90
|
+
| `src` | `string` | — | **Required.** Video URL. `.m3u8` is routed through HLS automatically. |
|
|
91
|
+
| `poster` | `string` | — | Poster image shown before playback starts. |
|
|
92
|
+
| `showDeviceToggle` | `boolean` | `true` | Show the desktop/mobile toggle pill in the top-left. |
|
|
93
|
+
| `defaultDevice` | `"desktop" \| "mobile"` | `"desktop"` | Initial device mode. |
|
|
94
|
+
| `hoverPlay` | `boolean` | `false` | Start playback on mouse-enter, pause on mouse-leave. |
|
|
95
|
+
| `tooltipText` | `string` | — | Tooltip text shown above the play button on hover. |
|
|
96
|
+
| `closable` | `boolean` | `false` | Show a close button in the top-right; emits `close` when clicked. |
|
|
97
|
+
| `class` | `string` | `""` | Extra class added to the outer container (alongside `.gvp-root`). |
|
|
98
|
+
| `muted` | `boolean` | `true` | Mute the video. Required for autoplay in most browsers. |
|
|
99
|
+
| `loop` | `boolean` | `false` | Loop playback. |
|
|
100
|
+
| `controls` | `boolean` | `false` | Show native browser controls. |
|
|
101
|
+
| `frameMaxWidth` | `{ desktop?: string; mobile?: string }` | `{ desktop: "960px", mobile: "420px" }` | Max width of the player in each device mode. |
|
|
102
|
+
| `aspectRatio` | `{ desktop?: AspectRatio; mobile?: AspectRatio }` | `{ desktop: "16/9", mobile: "9/16" }` | Aspect ratio per device mode. `AspectRatio` is `` `${number}/${number}` ``. |
|
|
103
|
+
| `hlsConfig` | `Hls.HlsConfig` | — | Optional hls.js config. Use a stable reference (e.g. `shallowRef`) to avoid HLS rebuilds.|
|
|
104
|
+
| `isHls` | `boolean` | `false` | Force HLS routing even when the URL doesn't end in `.m3u8`. |
|
|
105
|
+
|
|
106
|
+
## Events
|
|
107
|
+
|
|
108
|
+
| Event | Payload | Description |
|
|
109
|
+
|---------|---------|----------------------------------------------------------------------|
|
|
110
|
+
| `close` | — | Emitted when the close button is clicked. Requires `closable=true`. |
|
|
111
|
+
| `play` | — | Emitted when playback starts. |
|
|
112
|
+
| `pause` | — | Emitted when playback pauses. |
|
|
113
|
+
|
|
114
|
+
## Slots
|
|
115
|
+
|
|
116
|
+
| Slot | Description |
|
|
117
|
+
|-----------|------------------------------------------------------------------------------------------|
|
|
118
|
+
| `default` | Rendered inside the underlying `<video>`. Use for `<track>` elements (captions/subs). |
|
|
119
|
+
|
|
120
|
+
---
|
|
121
|
+
|
|
122
|
+
## Examples
|
|
123
|
+
|
|
124
|
+
### Looping background video, no UI chrome
|
|
125
|
+
|
|
126
|
+
```vue
|
|
127
|
+
<VueVideoPlayer
|
|
128
|
+
src="/videos/hero.m3u8"
|
|
129
|
+
:muted="true"
|
|
130
|
+
:loop="true"
|
|
131
|
+
:show-device-toggle="false"
|
|
132
|
+
/>
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Hover-to-play with a tooltip
|
|
136
|
+
|
|
137
|
+
```vue
|
|
138
|
+
<VueVideoPlayer
|
|
139
|
+
src="/videos/demo.mp4"
|
|
140
|
+
poster="/images/thumb.jpg"
|
|
141
|
+
:hover-play="true"
|
|
142
|
+
tooltip-text="Watch the demo"
|
|
143
|
+
/>
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
### Dismissible player in a modal
|
|
147
|
+
|
|
148
|
+
```vue
|
|
149
|
+
<script setup lang="ts">
|
|
150
|
+
import { ref } from "vue";
|
|
151
|
+
import { VueVideoPlayer } from "@glitchlab/vue-video-player";
|
|
152
|
+
|
|
153
|
+
const open = ref(true);
|
|
154
|
+
</script>
|
|
155
|
+
|
|
156
|
+
<template>
|
|
157
|
+
<VueVideoPlayer
|
|
158
|
+
v-if="open"
|
|
159
|
+
src="/videos/walkthrough.m3u8"
|
|
160
|
+
:closable="true"
|
|
161
|
+
:show-device-toggle="false"
|
|
162
|
+
@close="open = false"
|
|
163
|
+
/>
|
|
164
|
+
</template>
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
### Custom aspect ratio and frame width
|
|
168
|
+
|
|
169
|
+
```vue
|
|
170
|
+
<VueVideoPlayer
|
|
171
|
+
src="/videos/portrait.mp4"
|
|
172
|
+
default-device="mobile"
|
|
173
|
+
:aspect-ratio="{ desktop: '4/3', mobile: '9/16' }"
|
|
174
|
+
:frame-max-width="{ desktop: '720px', mobile: '360px' }"
|
|
175
|
+
/>
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
### Captions and subtitles
|
|
179
|
+
|
|
180
|
+
```vue
|
|
181
|
+
<VueVideoPlayer src="/videos/talk.m3u8" :controls="true">
|
|
182
|
+
<track kind="captions" src="/captions/talk.en.vtt" srclang="en" label="English" default />
|
|
183
|
+
<track kind="subtitles" src="/captions/talk.es.vtt" srclang="es" label="Spanish" />
|
|
184
|
+
</VueVideoPlayer>
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
### Custom hls.js configuration
|
|
188
|
+
|
|
189
|
+
```vue
|
|
190
|
+
<script setup lang="ts">
|
|
191
|
+
import { shallowRef } from "vue";
|
|
192
|
+
import { VueVideoPlayer } from "@glitchlab/vue-video-player";
|
|
193
|
+
|
|
194
|
+
const hlsConfig = shallowRef({
|
|
195
|
+
enableWorker: true,
|
|
196
|
+
lowLatencyMode: true,
|
|
197
|
+
maxBufferLength: 30
|
|
198
|
+
});
|
|
199
|
+
</script>
|
|
200
|
+
|
|
201
|
+
<template>
|
|
202
|
+
<VueVideoPlayer src="/videos/live.m3u8" :hls-config="hlsConfig" />
|
|
203
|
+
</template>
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
> **Use `shallowRef` (or any stable reference).** A new object identity each render tears down and rebuilds the entire HLS instance.
|
|
207
|
+
|
|
208
|
+
---
|
|
209
|
+
|
|
210
|
+
## TypeScript
|
|
211
|
+
|
|
212
|
+
Full type definitions ship with the package. Re-exported types:
|
|
213
|
+
|
|
214
|
+
```ts
|
|
215
|
+
import type {
|
|
216
|
+
VideoPlayerProps,
|
|
217
|
+
HLSPlayerProps,
|
|
218
|
+
DeviceMode,
|
|
219
|
+
AspectRatio
|
|
220
|
+
} from "@glitchlab/vue-video-player";
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
---
|
|
224
|
+
|
|
225
|
+
## Styling and customization
|
|
226
|
+
|
|
227
|
+
All styles are scoped under `.gvp-root`. The CSS file (~3 KB minified) contains no global resets and no design-token bleed. Override what you need:
|
|
228
|
+
|
|
229
|
+
```css
|
|
230
|
+
.gvp-root {
|
|
231
|
+
border-radius: 8px;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.gvp-play {
|
|
235
|
+
background-color: rebeccapurple;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.gvp-toggle-btn.is-active {
|
|
239
|
+
color: deeppink;
|
|
240
|
+
}
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
Available class hooks:
|
|
244
|
+
|
|
245
|
+
| Class | Element |
|
|
246
|
+
|-----------------------|-------------------------------------------------|
|
|
247
|
+
| `.gvp-root` | Outer container |
|
|
248
|
+
| `.gvp-video` | Underlying `<video>` element |
|
|
249
|
+
| `.gvp-vignette` | Top vignette overlay |
|
|
250
|
+
| `.gvp-bottom-fade` | Bottom gradient |
|
|
251
|
+
| `.gvp-toggle` | Device-toggle wrapper |
|
|
252
|
+
| `.gvp-toggle-pill` | The pill background |
|
|
253
|
+
| `.gvp-toggle-btn` | Individual toggle button (`.is-active` modifier)|
|
|
254
|
+
| `.gvp-toggle-divider` | Vertical divider between toggle buttons |
|
|
255
|
+
| `.gvp-close` | Top-right close button |
|
|
256
|
+
| `.gvp-play-wrap` | Center play-button container |
|
|
257
|
+
| `.gvp-play` | Play button |
|
|
258
|
+
| `.gvp-tooltip` | Tooltip above play button |
|
|
259
|
+
| `.gvp-icon` | All inline SVG icons |
|
|
260
|
+
|
|
261
|
+
---
|
|
262
|
+
|
|
263
|
+
## SSR
|
|
264
|
+
|
|
265
|
+
The component is SSR-safe. Server output renders the static frame; HLS attaches client-side once the video element mounts. Works with Nuxt 3, Vite-SSR, and any vanilla SSR setup.
|
|
266
|
+
|
|
267
|
+
---
|
|
268
|
+
|
|
269
|
+
## Browser support
|
|
270
|
+
|
|
271
|
+
- Chromium ≥ 88, Firefox ≥ 78, Safari ≥ 14, Edge ≥ 88
|
|
272
|
+
- Native HLS playback on Safari (no `hls.js` cost)
|
|
273
|
+
- Worker-based HLS on browsers with MSE
|
|
274
|
+
|
|
275
|
+
---
|
|
276
|
+
|
|
277
|
+
## Contributing
|
|
278
|
+
|
|
279
|
+
```bash
|
|
280
|
+
git clone https://github.com/im-fahad/react-video-player.git
|
|
281
|
+
cd react-video-player
|
|
282
|
+
pnpm install
|
|
283
|
+
pnpm --filter @glitchlab/vue-video-player test
|
|
284
|
+
pnpm dev:vue # opens the local Vue playground at http://localhost:5174
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
Issues and PRs welcome at <https://github.com/im-fahad/react-video-player/issues>.
|
|
288
|
+
|
|
289
|
+
---
|
|
290
|
+
|
|
291
|
+
## License
|
|
292
|
+
|
|
293
|
+
[MIT](./LICENSE) © im-fahad
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { HlsConfig } from 'hls.js';
|
|
2
|
+
|
|
3
|
+
declare function __VLS_template(): {
|
|
4
|
+
default?(_: {}): any;
|
|
5
|
+
};
|
|
6
|
+
declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
7
|
+
src: string;
|
|
8
|
+
hlsConfig?: HlsConfig;
|
|
9
|
+
isHls?: boolean;
|
|
10
|
+
muted?: boolean;
|
|
11
|
+
loop?: boolean;
|
|
12
|
+
controls?: boolean;
|
|
13
|
+
playsInline?: boolean;
|
|
14
|
+
preload?: string;
|
|
15
|
+
poster?: string;
|
|
16
|
+
class?: string;
|
|
17
|
+
}>, {
|
|
18
|
+
muted: boolean;
|
|
19
|
+
loop: boolean;
|
|
20
|
+
controls: boolean;
|
|
21
|
+
playsInline: boolean;
|
|
22
|
+
preload: string;
|
|
23
|
+
}>>, {
|
|
24
|
+
videoEl: import('vue').Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
|
|
25
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
26
|
+
play: () => void;
|
|
27
|
+
pause: () => void;
|
|
28
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
29
|
+
src: string;
|
|
30
|
+
hlsConfig?: HlsConfig;
|
|
31
|
+
isHls?: boolean;
|
|
32
|
+
muted?: boolean;
|
|
33
|
+
loop?: boolean;
|
|
34
|
+
controls?: boolean;
|
|
35
|
+
playsInline?: boolean;
|
|
36
|
+
preload?: string;
|
|
37
|
+
poster?: string;
|
|
38
|
+
class?: string;
|
|
39
|
+
}>, {
|
|
40
|
+
muted: boolean;
|
|
41
|
+
loop: boolean;
|
|
42
|
+
controls: boolean;
|
|
43
|
+
playsInline: boolean;
|
|
44
|
+
preload: string;
|
|
45
|
+
}>>> & Readonly<{
|
|
46
|
+
onPlay?: (() => any) | undefined;
|
|
47
|
+
onPause?: (() => any) | undefined;
|
|
48
|
+
}>, {
|
|
49
|
+
muted: boolean;
|
|
50
|
+
loop: boolean;
|
|
51
|
+
controls: boolean;
|
|
52
|
+
playsInline: boolean;
|
|
53
|
+
preload: string;
|
|
54
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
55
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
56
|
+
export default _default;
|
|
57
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
58
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
59
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
60
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
61
|
+
} : {
|
|
62
|
+
type: import('vue').PropType<T[K]>;
|
|
63
|
+
required: true;
|
|
64
|
+
};
|
|
65
|
+
};
|
|
66
|
+
type __VLS_WithDefaults<P, D> = {
|
|
67
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
68
|
+
default: D[K];
|
|
69
|
+
}> : P[K];
|
|
70
|
+
};
|
|
71
|
+
type __VLS_Prettify<T> = {
|
|
72
|
+
[K in keyof T]: T[K];
|
|
73
|
+
} & {};
|
|
74
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
75
|
+
new (): {
|
|
76
|
+
$slots: S;
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
//# sourceMappingURL=HLSPlayer.vue.d.ts.map
|
|
@@ -0,0 +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;AAoGxC,iBAAS,cAAc;qBAoDO,GAAG;EAGhC;AAsBD,QAAA,MAAM,eAAe;SAOZ,MAAM;gBACC,SAAS;YACb,OAAO;YACP,OAAO;WACR,OAAO;eACH,OAAO;kBACJ,OAAO;cACX,MAAM;aACP,MAAM;YACP,MAAM;;;;;;;;;;;;;SATT,MAAM;gBACC,SAAS;YACb,OAAO;YACP,OAAO;WACR,OAAO;eACH,OAAO;kBACJ,OAAO;cACX,MAAM;aACP,MAAM;YACP,MAAM;;;;;;;;;;;WANN,OAAO;UACR,OAAO;cACH,OAAO;iBACJ,OAAO;aACX,MAAM;4EAKlB,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"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { DeviceMode, VideoPlayerProps } from './utils/types';
|
|
2
|
+
|
|
3
|
+
declare function __VLS_template(): {
|
|
4
|
+
default?(_: {}): any;
|
|
5
|
+
};
|
|
6
|
+
declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<VideoPlayerProps & {
|
|
7
|
+
class?: string;
|
|
8
|
+
closable?: boolean;
|
|
9
|
+
}>, {
|
|
10
|
+
showDeviceToggle: boolean;
|
|
11
|
+
defaultDevice: string;
|
|
12
|
+
hoverPlay: boolean;
|
|
13
|
+
muted: boolean;
|
|
14
|
+
loop: boolean;
|
|
15
|
+
controls: boolean;
|
|
16
|
+
closable: boolean;
|
|
17
|
+
class: string;
|
|
18
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
19
|
+
play: () => void;
|
|
20
|
+
pause: () => void;
|
|
21
|
+
close: () => void;
|
|
22
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<VideoPlayerProps & {
|
|
23
|
+
class?: string;
|
|
24
|
+
closable?: boolean;
|
|
25
|
+
}>, {
|
|
26
|
+
showDeviceToggle: boolean;
|
|
27
|
+
defaultDevice: string;
|
|
28
|
+
hoverPlay: boolean;
|
|
29
|
+
muted: boolean;
|
|
30
|
+
loop: boolean;
|
|
31
|
+
controls: boolean;
|
|
32
|
+
closable: boolean;
|
|
33
|
+
class: string;
|
|
34
|
+
}>>> & Readonly<{
|
|
35
|
+
onPlay?: (() => any) | undefined;
|
|
36
|
+
onPause?: (() => any) | undefined;
|
|
37
|
+
onClose?: (() => any) | undefined;
|
|
38
|
+
}>, {
|
|
39
|
+
muted: boolean;
|
|
40
|
+
loop: boolean;
|
|
41
|
+
controls: boolean;
|
|
42
|
+
class: string;
|
|
43
|
+
showDeviceToggle: boolean;
|
|
44
|
+
defaultDevice: DeviceMode;
|
|
45
|
+
hoverPlay: boolean;
|
|
46
|
+
closable: boolean;
|
|
47
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
48
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
49
|
+
export default _default;
|
|
50
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
51
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
52
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
53
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
54
|
+
} : {
|
|
55
|
+
type: import('vue').PropType<T[K]>;
|
|
56
|
+
required: true;
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
type __VLS_WithDefaults<P, D> = {
|
|
60
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
61
|
+
default: D[K];
|
|
62
|
+
}> : P[K];
|
|
63
|
+
};
|
|
64
|
+
type __VLS_Prettify<T> = {
|
|
65
|
+
[K in keyof T]: T[K];
|
|
66
|
+
} & {};
|
|
67
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
68
|
+
new (): {
|
|
69
|
+
$slots: S;
|
|
70
|
+
};
|
|
71
|
+
};
|
|
72
|
+
//# sourceMappingURL=VideoPlayer.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VideoPlayer.vue.d.ts","sourceRoot":"","sources":["../src/VideoPlayer.vue"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAsHlE,iBAAS,cAAc;qBAwRO,GAAG;EAGhC;AAwBD,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"}
|
|
@@ -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=IconDesktop.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconDesktop.vue.d.ts","sourceRoot":"","sources":["../../src/components/IconDesktop.vue"],"names":[],"mappings":";YAuFqD,MAAM;;YAAN,MAAM;;AAnF3D,wBAqFI;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=IconMobile.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconMobile.vue.d.ts","sourceRoot":"","sources":["../../src/components/IconMobile.vue"],"names":[],"mappings":";YA+EqD,MAAM;;YAAN,MAAM;;AA3E3D,wBA6EI;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=IconPlay.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconPlay.vue.d.ts","sourceRoot":"","sources":["../../src/components/IconPlay.vue"],"names":[],"mappings":";YA+DqD,MAAM;;YAAN,MAAM;;AA3D3D,wBA6DI;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=IconX.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconX.vue.d.ts","sourceRoot":"","sources":["../../src/components/IconX.vue"],"names":[],"mappings":";YA+DqD,MAAM;;YAAN,MAAM;;AA3D3D,wBA6DI;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/index.cjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),k=require("hls.js"),b=["muted","loop","controls","playsinline","preload","poster"],w=e.defineComponent({__name:"HLSPlayer",props:{src:{},hlsConfig:{},isHls:{type:Boolean},muted:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},controls:{type:Boolean,default:!1},playsInline:{type:Boolean,default:!0},preload:{default:"metadata"},poster:{},class:{}},emits:["play","pause"],setup(o,{expose:c,emit:a}){const l=o,m=a,r=e.ref(null),i=e.ref(null),p=globalThis.window!==void 0&&k.isSupported(),v=n=>!!l.isHls||p&&n.endsWith(".m3u8");function C(){i.value&&(i.value.destroy(),i.value=null);const n=r.value;if(n){for(n.pause(),n.removeAttribute("src");n.firstChild;)n.firstChild.remove();n.load()}}function y(n){const u=r.value;if(!(!u||!n))if(C(),v(n)){const d=new k(l.hlsConfig);i.value=d,d.attachMedia(u),d.loadSource(n),d.on(k.Events.ERROR,(h,g)=>{g.fatal&&(d.destroy(),i.value=null)})}else u.src=n,u.load()}return e.onMounted(()=>{l.src&&y(l.src)}),e.watch(()=>l.src,n=>{n&&y(n)}),e.onUnmounted(C),c({videoEl:r}),(n,u)=>(e.openBlock(),e.createElementBlock("video",{ref_key:"videoEl",ref:r,muted:o.muted,loop:o.loop,controls:o.controls,playsinline:o.playsInline,preload:o.preload,poster:o.poster,class:e.normalizeClass(l.class),onPlay:u[0]||(u[0]=d=>m("play")),onPause:u[1]||(u[1]=d=>m("pause"))},[e.renderSlot(n.$slots,"default")],42,b))}}),M={name:"IconDesktop"},N=e.defineComponent({...M,props:{class:{}},setup(o){const c=o;return(a,l)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["gvp-icon",c.class]),width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[...l[0]||(l[0]=[e.createElementVNode("path",{d:"M14 2H10C6.72077 2 5.08116 2 3.91891 2.81382C3.48891 3.1149 3.1149 3.48891 2.81382 3.91891C2 5.08116 2 6.72077 2 10C2 13.2792 2 14.9188 2.81382 16.0811C3.1149 16.5111 3.48891 16.8851 3.91891 17.1862C5.08116 18 6.72077 18 10 18H14C17.2792 18 18.9188 18 20.0811 17.1862C20.5111 16.8851 20.8851 16.5111 21.1862 16.0811C22 14.9188 22 13.2792 22 10C22 6.72077 22 5.08116 21.1862 3.91891C20.8851 3.48891 20.5111 3.1149 20.0811 2.81382C18.9188 2 17.2792 2 14 2Z",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1),e.createElementVNode("path",{d:"M11 15H13",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},null,-1),e.createElementVNode("path",{d:"M14.5 22L14.1845 21.5811C13.4733 20.6369 13.2969 19.1944 13.7468 18M9.5 22L9.8155 21.5811C10.5267 20.6369 10.7031 19.1944 10.2532 18",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1),e.createElementVNode("path",{d:"M7 22H17",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1)])],2))}}),x={name:"IconMobile"},P=e.defineComponent({...x,props:{class:{}},setup(o){const c=o;return(a,l)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["gvp-icon",c.class]),width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[...l[0]||(l[0]=[e.createElementVNode("path",{d:"M5 9C5 5.70017 5 4.05025 6.02513 3.02513C7.05025 2 8.70017 2 12 2C15.2998 2 16.9497 2 17.9749 3.02513C19 4.05025 19 5.70017 19 9V15C19 18.2998 19 19.9497 17.9749 20.9749C16.9497 22 15.2998 22 12 22C8.70017 22 7.05025 22 6.02513 20.9749C5 19.9497 5 18.2998 5 15V9Z",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"},null,-1),e.createElementVNode("path",{d:"M11 19H13",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1),e.createElementVNode("path",{d:"M9 2L9.089 2.53402C9.28188 3.69129 9.37832 4.26993 9.77519 4.62204C10.1892 4.98934 10.7761 5 12 5C13.2239 5 13.8108 4.98934 14.2248 4.62204C14.6217 4.26993 14.7181 3.69129 14.911 2.53402L15 2",stroke:"currentColor","stroke-width":"2","stroke-linejoin":"round"},null,-1)])],2))}}),$={name:"IconPlay"},L=e.defineComponent({...$,props:{class:{}},setup(o){const c=o;return(a,l)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["gvp-icon",c.class]),width:"22",height:"22",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[...l[0]||(l[0]=[e.createElementVNode("path",{d:"M5.3335 11.45V4.54997C5.3335 4.36108 5.40016 4.20275 5.5335 4.07497C5.66683 3.94719 5.82238 3.8833 6.00016 3.8833C6.05572 3.8833 6.11405 3.89163 6.17516 3.9083C6.23627 3.92497 6.29461 3.94997 6.35016 3.9833L11.7835 7.4333C11.8835 7.49997 11.9585 7.5833 12.0085 7.6833C12.0585 7.7833 12.0835 7.88886 12.0835 7.99997C12.0835 8.11108 12.0585 8.21663 12.0085 8.31663C11.9585 8.41663 11.8835 8.49997 11.7835 8.56663L6.35016 12.0166C6.29461 12.05 6.23627 12.075 6.17516 12.0916C6.11405 12.1083 6.05572 12.1166 6.00016 12.1166C5.82238 12.1166 5.66683 12.0527 5.5335 11.925C5.40016 11.7972 5.3335 11.6389 5.3335 11.45Z",fill:"currentColor"},null,-1)])],2))}}),H={name:"IconX"},S=e.defineComponent({...H,props:{class:{}},setup(o){const c=o;return(a,l)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["gvp-icon",c.class]),width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[...l[0]||(l[0]=[e.createElementVNode("path",{d:"M6.94994 5.53594L12.1929 0.292938C12.5834 -0.0975275 13.2165 -0.0975279 13.6069 0.292938C13.9974 0.683403 13.9974 1.31647 13.6069 1.70694L8.36394 6.94994L13.6069 12.1929C13.9974 12.5834 13.9974 13.2165 13.6069 13.6069C13.2165 13.9974 12.5834 13.9974 12.1929 13.6069L6.94994 8.36394L1.70694 13.6069C1.31647 13.9974 0.683403 13.9974 0.292938 13.6069C-0.0975279 13.2165 -0.0975277 12.5834 0.292938 12.1929L5.53594 6.94994L0.292938 1.70694C-0.0975279 1.31647 -0.0975279 0.683403 0.292938 0.292938C0.683403 -0.0975279 1.31647 -0.0975277 1.70694 0.292938L6.94994 5.53594Z",fill:"currentColor"},null,-1)])],2))}}),R={key:0,class:"gvp-toggle"},z={class:"gvp-toggle-pill"},T=["aria-pressed"],D=["aria-pressed"],I={key:2,class:"gvp-play-wrap"},W={key:0,class:"gvp-tooltip",role:"tooltip"},j=e.defineComponent({__name:"VideoPlayer",props:{src:{},poster:{},showDeviceToggle:{type:Boolean,default:!0},defaultDevice:{default:"desktop"},hoverPlay:{type:Boolean,default:!1},tooltipText:{},muted:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},controls:{type:Boolean,default:!1},frameMaxWidth:{},aspectRatio:{},hlsConfig:{},isHls:{type:Boolean},class:{default:""},closable:{type:Boolean,default:!1}},emits:["close","play","pause"],setup(o,{emit:c}){const a=o,l=c,m=e.ref(null),r=e.ref(a.defaultDevice),i=e.ref(!1),p=e.ref(!1),v=e.ref(null),C=e.computed(()=>{var s,t;return r.value==="mobile"?((s=a.aspectRatio)==null?void 0:s.mobile)??"9/16":((t=a.aspectRatio)==null?void 0:t.desktop)??"16/9"}),y=e.computed(()=>{var s,t;return r.value==="mobile"?((s=a.frameMaxWidth)==null?void 0:s.mobile)??"420px":((t=a.frameMaxWidth)==null?void 0:t.desktop)??"960px"}),n=e.computed(()=>{var s;return((s=m.value)==null?void 0:s.videoEl)??null});async function u(){const s=n.value;if(s)try{s.readyState<2&&s.load();const t=s.play();v.value=t,await t,i.value=!0}catch{i.value=!1}finally{v.value=null}}async function d(){const s=n.value;if(s){if(v.value)try{await v.value}catch{}s.pause()}}async function h(){a.hoverPlay&&await u()}async function g(){a.hoverPlay&&(await d(),i.value=!1)}async function B(){const s=n.value;s&&(s.paused?await u():(await d(),i.value=!1))}function E(){p.value=!0,h()}function V(){p.value=!1,g()}return(s,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["gvp-root",a.class]),style:e.normalizeStyle({width:y.value,aspectRatio:C.value}),onMouseenter:E,onMouseleave:V},[e.createVNode(w,{ref_key:"hlsPlayerRef",ref:m,controls:o.controls,"hls-config":o.hlsConfig,"is-hls":o.isHls,loop:o.loop,muted:o.muted,"plays-inline":!0,poster:o.poster,src:o.src,class:"gvp-video",preload:"metadata",onPause:t[0]||(t[0]=f=>{i.value=!1,l("pause")}),onPlay:t[1]||(t[1]=f=>{i.value=!0,l("play")})},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},8,["controls","hls-config","is-hls","loop","muted","poster","src"]),t[8]||(t[8]=e.createElementVNode("div",{class:"gvp-vignette"},null,-1)),o.showDeviceToggle?(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("div",z,[e.createElementVNode("button",{"aria-pressed":r.value==="desktop",class:e.normalizeClass(["gvp-toggle-btn",{"is-active":r.value==="desktop"}]),"aria-label":"Desktop view",type:"button",onClick:t[2]||(t[2]=f=>r.value="desktop")},[e.createVNode(N)],10,T),t[7]||(t[7]=e.createElementVNode("div",{class:"gvp-toggle-divider"},null,-1)),e.createElementVNode("button",{"aria-pressed":r.value==="mobile",class:e.normalizeClass(["gvp-toggle-btn",{"is-active":r.value==="mobile"}]),"aria-label":"Mobile view",type:"button",onClick:t[3]||(t[3]=f=>r.value="mobile")},[e.createVNode(P)],10,D)])])):e.createCommentVNode("",!0),o.closable?(e.openBlock(),e.createElementBlock("button",{key:1,"aria-label":"Close",class:"gvp-close",type:"button",onClick:t[4]||(t[4]=f=>l("close"))},[e.createVNode(S)])):e.createCommentVNode("",!0),i.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",I,[e.createElementVNode("button",{"aria-label":"Play",class:"gvp-play",type:"button",onClick:B,onMouseenter:t[5]||(t[5]=f=>p.value=!0),onMouseleave:t[6]||(t[6]=f=>p.value=!1)},[e.createVNode(L),o.tooltipText&&p.value?(e.openBlock(),e.createElementBlock("span",W,e.toDisplayString(o.tooltipText),1)):e.createCommentVNode("",!0)],32)])),t[9]||(t[9]=e.createElementVNode("div",{class:"gvp-bottom-fade"},null,-1))],38))}});exports.HLSPlayer=w;exports.VueVideoPlayer=j;
|
|
2
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/HLSPlayer.vue","../src/components/IconDesktop.vue","../src/components/IconMobile.vue","../src/components/IconPlay.vue","../src/components/IconX.vue","../src/VideoPlayer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport Hls from \"hls.js\";\nimport { onMounted, onUnmounted, ref, watch } from \"vue\";\nimport type { HlsConfig } from \"hls.js\";\n\nconst props = withDefaults(\n defineProps<{\n src: string;\n hlsConfig?: HlsConfig;\n isHls?: boolean;\n muted?: boolean;\n loop?: boolean;\n controls?: boolean;\n playsInline?: boolean;\n preload?: string;\n poster?: string;\n class?: string;\n }>(),\n {\n muted: true,\n loop: false,\n controls: false,\n playsInline: true,\n preload: \"metadata\"\n }\n);\n\nconst emit = defineEmits<{\n play: [];\n pause: [];\n}>();\n\nconst videoEl = ref<HTMLVideoElement | null>(null);\nconst hlsInstance = ref<Hls | null>(null);\n\nconst canUseHlsJs = globalThis.window !== undefined && Hls.isSupported();\nconst shouldUseHls = (src: string) =>\n Boolean(props.isHls) || (canUseHlsJs && src.endsWith(\".m3u8\"));\n\nfunction cleanup() {\n if (hlsInstance.value) {\n hlsInstance.value.destroy();\n hlsInstance.value = null;\n }\n const el = videoEl.value;\n if (!el) return;\n el.pause();\n el.removeAttribute(\"src\");\n while (el.firstChild) el.firstChild.remove();\n el.load();\n}\n\nfunction initPlayer(src: string) {\n const el = videoEl.value;\n if (!el || !src) return;\n\n cleanup();\n\n if (shouldUseHls(src)) {\n const hls = new Hls(props.hlsConfig);\n hlsInstance.value = hls;\n hls.attachMedia(el);\n hls.loadSource(src);\n hls.on(Hls.Events.ERROR, (_evt, data) => {\n if (data.fatal) {\n hls.destroy();\n hlsInstance.value = null;\n }\n });\n } else {\n el.src = src;\n el.load();\n }\n}\n\nonMounted(() => {\n if (props.src) initPlayer(props.src);\n});\n\nwatch(\n () => props.src,\n (src) => {\n if (src) initPlayer(src);\n }\n);\n\nonUnmounted(cleanup);\n\ndefineExpose({ videoEl });\n</script>\n\n<template>\n <video\n ref=\"videoEl\"\n :muted=\"muted\"\n :loop=\"loop\"\n :controls=\"controls\"\n :playsinline=\"playsInline\"\n :preload=\"preload\"\n :poster=\"poster\"\n :class=\"props.class\"\n @play=\"emit('play')\"\n @pause=\"emit('pause')\"\n >\n <slot />\n </video>\n</template>\n","<script setup lang=\"ts\">\nconst props = defineProps<{ class?: string }>();\n</script>\n\n<template>\n <svg\n :class=\"['gvp-icon', props.class]\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M14 2H10C6.72077 2 5.08116 2 3.91891 2.81382C3.48891 3.1149 3.1149 3.48891 2.81382 3.91891C2 5.08116 2 6.72077 2 10C2 13.2792 2 14.9188 2.81382 16.0811C3.1149 16.5111 3.48891 16.8851 3.91891 17.1862C5.08116 18 6.72077 18 10 18H14C17.2792 18 18.9188 18 20.0811 17.1862C20.5111 16.8851 20.8851 16.5111 21.1862 16.0811C22 14.9188 22 13.2792 22 10C22 6.72077 22 5.08116 21.1862 3.91891C20.8851 3.48891 20.5111 3.1149 20.0811 2.81382C18.9188 2 17.2792 2 14 2Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M11 15H13\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.5 22L14.1845 21.5811C13.4733 20.6369 13.2969 19.1944 13.7468 18M9.5 22L9.8155 21.5811C10.5267 20.6369 10.7031 19.1944 10.2532 18\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M7 22H17\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n</template>\n\n<script lang=\"ts\">\nexport default { name: \"IconDesktop\" };\n</script>\n","<script setup lang=\"ts\">\nconst props = defineProps<{ class?: string }>();\n</script>\n\n<template>\n <svg\n :class=\"['gvp-icon', props.class]\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M5 9C5 5.70017 5 4.05025 6.02513 3.02513C7.05025 2 8.70017 2 12 2C15.2998 2 16.9497 2 17.9749 3.02513C19 4.05025 19 5.70017 19 9V15C19 18.2998 19 19.9497 17.9749 20.9749C16.9497 22 15.2998 22 12 22C8.70017 22 7.05025 22 6.02513 20.9749C5 19.9497 5 18.2998 5 15V9Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M11 19H13\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M9 2L9.089 2.53402C9.28188 3.69129 9.37832 4.26993 9.77519 4.62204C10.1892 4.98934 10.7761 5 12 5C13.2239 5 13.8108 4.98934 14.2248 4.62204C14.6217 4.26993 14.7181 3.69129 14.911 2.53402L15 2\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linejoin=\"round\"\n />\n </svg>\n</template>\n\n<script lang=\"ts\">\nexport default { name: \"IconMobile\" };\n</script>\n","<script setup lang=\"ts\">\nconst props = defineProps<{ class?: string }>();\n</script>\n\n<template>\n <svg\n :class=\"['gvp-icon', props.class]\"\n width=\"22\"\n height=\"22\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M5.3335 11.45V4.54997C5.3335 4.36108 5.40016 4.20275 5.5335 4.07497C5.66683 3.94719 5.82238 3.8833 6.00016 3.8833C6.05572 3.8833 6.11405 3.89163 6.17516 3.9083C6.23627 3.92497 6.29461 3.94997 6.35016 3.9833L11.7835 7.4333C11.8835 7.49997 11.9585 7.5833 12.0085 7.6833C12.0585 7.7833 12.0835 7.88886 12.0835 7.99997C12.0835 8.11108 12.0585 8.21663 12.0085 8.31663C11.9585 8.41663 11.8835 8.49997 11.7835 8.56663L6.35016 12.0166C6.29461 12.05 6.23627 12.075 6.17516 12.0916C6.11405 12.1083 6.05572 12.1166 6.00016 12.1166C5.82238 12.1166 5.66683 12.0527 5.5335 11.925C5.40016 11.7972 5.3335 11.6389 5.3335 11.45Z\"\n fill=\"currentColor\"\n />\n </svg>\n</template>\n\n<script lang=\"ts\">\nexport default { name: \"IconPlay\" };\n</script>\n","<script setup lang=\"ts\">\nconst props = defineProps<{ class?: string }>();\n</script>\n\n<template>\n <svg\n :class=\"['gvp-icon', props.class]\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M6.94994 5.53594L12.1929 0.292938C12.5834 -0.0975275 13.2165 -0.0975279 13.6069 0.292938C13.9974 0.683403 13.9974 1.31647 13.6069 1.70694L8.36394 6.94994L13.6069 12.1929C13.9974 12.5834 13.9974 13.2165 13.6069 13.6069C13.2165 13.9974 12.5834 13.9974 12.1929 13.6069L6.94994 8.36394L1.70694 13.6069C1.31647 13.9974 0.683403 13.9974 0.292938 13.6069C-0.0975279 13.2165 -0.0975277 12.5834 0.292938 12.1929L5.53594 6.94994L0.292938 1.70694C-0.0975279 1.31647 -0.0975279 0.683403 0.292938 0.292938C0.683403 -0.0975279 1.31647 -0.0975277 1.70694 0.292938L6.94994 5.53594Z\"\n fill=\"currentColor\"\n />\n </svg>\n</template>\n\n<script lang=\"ts\">\nexport default { name: \"IconX\" };\n</script>\n","<script lang=\"ts\" setup>\nimport { computed, ref } from \"vue\";\nimport HLSPlayer from \"./HLSPlayer.vue\";\nimport IconDesktop from \"./components/IconDesktop.vue\";\nimport IconMobile from \"./components/IconMobile.vue\";\nimport IconPlay from \"./components/IconPlay.vue\";\nimport IconX from \"./components/IconX.vue\";\nimport type { DeviceMode, VideoPlayerProps } from \"./utils/types\";\n\nconst props = withDefaults(\n defineProps<VideoPlayerProps & { class?: string; closable?: boolean }>(),\n {\n showDeviceToggle: true,\n defaultDevice: \"desktop\",\n hoverPlay: false,\n muted: true,\n loop: false,\n controls: false,\n closable: false,\n class: \"\"\n }\n);\n\nconst emit = defineEmits<{\n close: [];\n play: [];\n pause: [];\n}>();\n\nconst hlsPlayerRef = ref<InstanceType<typeof HLSPlayer> | null>(null);\nconst device = ref<DeviceMode>(props.defaultDevice);\nconst isPlaying = ref(false);\nconst showTooltip = ref(false);\nconst playPromise = ref<Promise<void> | null>(null);\n\nconst aspectRatio = computed(() =>\n device.value === \"mobile\"\n ? (props.aspectRatio?.mobile ?? \"9/16\")\n : (props.aspectRatio?.desktop ?? \"16/9\")\n);\n\nconst frameMaxWidth = computed(() =>\n device.value === \"mobile\"\n ? (props.frameMaxWidth?.mobile ?? \"420px\")\n : (props.frameMaxWidth?.desktop ?? \"960px\")\n);\n\nconst videoEl = computed(() => hlsPlayerRef.value?.videoEl ?? null);\n\nasync function safePlay() {\n const el = videoEl.value;\n if (!el) return;\n try {\n if (el.readyState < 2) el.load();\n const p = el.play();\n playPromise.value = p;\n await p;\n isPlaying.value = true;\n } catch {\n isPlaying.value = false;\n } finally {\n playPromise.value = null;\n }\n}\n\nasync function safePause() {\n const el = videoEl.value;\n if (!el) return;\n if (playPromise.value) {\n try {\n await playPromise.value;\n } catch {\n /* play was interrupted; nothing to await */\n }\n }\n el.pause();\n}\n\nasync function hoverStart() {\n if (!props.hoverPlay) return;\n await safePlay();\n}\n\nasync function hoverStop() {\n if (!props.hoverPlay) return;\n await safePause();\n isPlaying.value = false;\n}\n\nasync function togglePlay() {\n const el = videoEl.value;\n if (!el) return;\n if (el.paused) {\n await safePlay();\n } else {\n await safePause();\n isPlaying.value = false;\n }\n}\n\nfunction onMouseEnter() {\n showTooltip.value = true;\n void hoverStart();\n}\n\nfunction onMouseLeave() {\n showTooltip.value = false;\n void hoverStop();\n}\n</script>\n\n<template>\n <div\n :class=\"['gvp-root', props.class]\"\n :style=\"{ width: frameMaxWidth, aspectRatio }\"\n @mouseenter=\"onMouseEnter\"\n @mouseleave=\"onMouseLeave\"\n >\n <HLSPlayer\n ref=\"hlsPlayerRef\"\n :controls=\"controls\"\n :hls-config=\"hlsConfig\"\n :is-hls=\"isHls\"\n :loop=\"loop\"\n :muted=\"muted\"\n :plays-inline=\"true\"\n :poster=\"poster\"\n :src=\"src\"\n class=\"gvp-video\"\n preload=\"metadata\"\n @pause=\"\n isPlaying = false;\n emit('pause');\n \"\n @play=\"\n isPlaying = true;\n emit('play');\n \"\n >\n <slot />\n </HLSPlayer>\n\n <div class=\"gvp-vignette\" />\n\n <div v-if=\"showDeviceToggle\" class=\"gvp-toggle\">\n <div class=\"gvp-toggle-pill\">\n <button\n :aria-pressed=\"device === 'desktop'\"\n :class=\"['gvp-toggle-btn', { 'is-active': device === 'desktop' }]\"\n aria-label=\"Desktop view\"\n type=\"button\"\n @click=\"device = 'desktop'\"\n >\n <IconDesktop />\n </button>\n\n <div class=\"gvp-toggle-divider\" />\n\n <button\n :aria-pressed=\"device === 'mobile'\"\n :class=\"['gvp-toggle-btn', { 'is-active': device === 'mobile' }]\"\n aria-label=\"Mobile view\"\n type=\"button\"\n @click=\"device = 'mobile'\"\n >\n <IconMobile />\n </button>\n </div>\n </div>\n\n <button\n v-if=\"closable\"\n aria-label=\"Close\"\n class=\"gvp-close\"\n type=\"button\"\n @click=\"emit('close')\"\n >\n <IconX />\n </button>\n\n <div v-if=\"!isPlaying\" class=\"gvp-play-wrap\">\n <button\n aria-label=\"Play\"\n class=\"gvp-play\"\n type=\"button\"\n @click=\"togglePlay\"\n @mouseenter=\"showTooltip = true\"\n @mouseleave=\"showTooltip = false\"\n >\n <IconPlay />\n <span v-if=\"tooltipText && showTooltip\" class=\"gvp-tooltip\" role=\"tooltip\">\n {{ tooltipText }}\n </span>\n </button>\n </div>\n\n <div class=\"gvp-bottom-fade\" />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","videoEl","ref","hlsInstance","canUseHlsJs","Hls","shouldUseHls","src","cleanup","el","initPlayer","hls","_evt","data","onMounted","watch","onUnmounted","__expose","_createElementBlock","_normalizeClass","_renderSlot","_ctx","__default__","_createElementVNode","hlsPlayerRef","device","isPlaying","showTooltip","playPromise","aspectRatio","computed","_a","_b","frameMaxWidth","safePlay","p","safePause","hoverStart","hoverStop","togglePlay","onMouseEnter","onMouseLeave","_normalizeStyle","_createVNode","HLSPlayer","_cache","$event","_openBlock","_hoisted_1","_hoisted_2","IconDesktop","IconMobile","IconX","_hoisted_5","IconPlay","_hoisted_6","_toDisplayString"],"mappings":"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"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACvD,YAAY,EACV,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,WAAW,EAC1D,MAAM,eAAe,CAAC"}
|