@glitchlab/vue-video-player 1.0.2 → 1.1.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 +34 -0
- package/dist/HLSPlayer.vue.d.ts +5 -0
- package/dist/HLSPlayer.vue.d.ts.map +1 -1
- package/dist/VideoPlayer.vue.d.ts +3 -0
- package/dist/VideoPlayer.vue.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +246 -162
- package/dist/index.mjs.map +1 -1
- package/dist/style.css +1 -1
- package/dist/utils/types.d.ts +6 -0
- package/dist/utils/types.d.ts.map +1 -1
- package/dist/utils/youtube.d.ts +38 -0
- package/dist/utils/youtube.d.ts.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -100,6 +100,7 @@ Then use the component anywhere — no manual import required:
|
|
|
100
100
|
| `muted` | `boolean` | `true` | Mute the video. Required for autoplay in most browsers. |
|
|
101
101
|
| `loop` | `boolean` | `false` | Loop playback. |
|
|
102
102
|
| `controls` | `boolean` | `false` | Show native browser controls. |
|
|
103
|
+
| `autoPlay` | `boolean` | `false` | Start playback as soon as the source loads. Browsers block sound-on autoplay, so this only fires when `muted` is also `true` (the default). |
|
|
103
104
|
| `frameMaxWidth` | `{ desktop?: string; mobile?: string }` | `{ desktop: "960px", mobile: "420px" }` | Max width of the player in each device mode. |
|
|
104
105
|
| `aspectRatio` | `{ desktop?: AspectRatio; mobile?: AspectRatio }` | `{ desktop: "16/9", mobile: "9/16" }` | Aspect ratio per device mode. `AspectRatio` is `` `${number}/${number}` ``. |
|
|
105
106
|
| `hlsConfig` | `Hls.HlsConfig` | — | Optional hls.js config. Use a stable reference (e.g. `shallowRef`) to avoid HLS rebuilds.|
|
|
@@ -121,6 +122,39 @@ Then use the component anywhere — no manual import required:
|
|
|
121
122
|
|
|
122
123
|
---
|
|
123
124
|
|
|
125
|
+
## YouTube URLs
|
|
126
|
+
|
|
127
|
+
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:
|
|
128
|
+
|
|
129
|
+
```vue
|
|
130
|
+
<VueVideoPlayer src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
|
|
131
|
+
<VueVideoPlayer src="https://youtu.be/dQw4w9WgXcQ?t=90" :auto-play="true" />
|
|
132
|
+
<VueVideoPlayer src="https://www.youtube.com/shorts/dQw4w9WgXcQ" />
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
Recognised forms: `youtube.com/watch?v=ID`, `youtu.be/ID`, `youtube.com/embed/ID`, `youtube.com/shorts/ID`, `youtube.com/live/ID`, `music.youtube.com/watch?v=ID`, and bare 11-character IDs. A `?t=` / `?start=` timestamp in the URL is honored.
|
|
136
|
+
|
|
137
|
+
### Which props work over YouTube
|
|
138
|
+
|
|
139
|
+
| Prop | YouTube behavior |
|
|
140
|
+
|---------------------------------------|---------------------------------------------------------------------------------------------------|
|
|
141
|
+
| `muted` | ✅ Mutes the embed (`mute=1`). |
|
|
142
|
+
| `loop` | ✅ Loops the single video (`loop=1` + `playlist=<id>`, YouTube's required workaround). |
|
|
143
|
+
| `controls` | ✅ Shows/hides YouTube's controls (`controls=1` / `controls=0`). |
|
|
144
|
+
| `autoPlay` | ✅ Autoplays (`autoplay=1`). YouTube + browsers force muted autoplay, so `mute=1` is set too — even if `:muted="false"`. |
|
|
145
|
+
| `showDeviceToggle` / `defaultDevice` | ✅ The desktop/mobile aspect-ratio toggle still works. |
|
|
146
|
+
| `closable` / `@close` | ✅ The close button still renders and emits. |
|
|
147
|
+
| `class` / `frameMaxWidth` / `aspectRatio` | ✅ Frame styling, sizing, and aspect ratio all apply. |
|
|
148
|
+
| `hoverPlay` | ❌ **No effect.** Hover-to-play needs programmatic pause, which requires the YouTube IFrame Player API (not loaded). YouTube's own controls handle starting playback. |
|
|
149
|
+
| `tooltipText` | ❌ **No effect.** The tooltip is attached to the centered play-button overlay, which isn't rendered for YouTube. |
|
|
150
|
+
| `poster` | ❌ **No effect.** YouTube shows its own video thumbnail; a custom poster would require an overlay layer. |
|
|
151
|
+
| `default` slot (`<track>` captions) | ❌ **No effect.** There's no `<video>` element to attach `<track>` to — use YouTube's own caption settings. |
|
|
152
|
+
| `hlsConfig` / `isHls` | ❌ **No effect.** Not an HLS stream. |
|
|
153
|
+
|
|
154
|
+
> If you need `hoverPlay`, a custom poster, or a play-button overlay over a YouTube video, you'd need the YouTube IFrame Player API integrated — that's not in this build (it'd add a ~30 KB external script). Open an issue if it matters for your use case.
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
124
158
|
## Examples
|
|
125
159
|
|
|
126
160
|
### Looping background video, no UI chrome
|
package/dist/HLSPlayer.vue.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
10
10
|
muted?: boolean;
|
|
11
11
|
loop?: boolean;
|
|
12
12
|
controls?: boolean;
|
|
13
|
+
autoPlay?: boolean;
|
|
13
14
|
playsInline?: boolean;
|
|
14
15
|
preload?: string;
|
|
15
16
|
poster?: string;
|
|
@@ -18,6 +19,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
18
19
|
muted: boolean;
|
|
19
20
|
loop: boolean;
|
|
20
21
|
controls: boolean;
|
|
22
|
+
autoPlay: boolean;
|
|
21
23
|
playsInline: boolean;
|
|
22
24
|
preload: string;
|
|
23
25
|
}>>, {
|
|
@@ -32,6 +34,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
32
34
|
muted?: boolean;
|
|
33
35
|
loop?: boolean;
|
|
34
36
|
controls?: boolean;
|
|
37
|
+
autoPlay?: boolean;
|
|
35
38
|
playsInline?: boolean;
|
|
36
39
|
preload?: string;
|
|
37
40
|
poster?: string;
|
|
@@ -40,6 +43,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
40
43
|
muted: boolean;
|
|
41
44
|
loop: boolean;
|
|
42
45
|
controls: boolean;
|
|
46
|
+
autoPlay: boolean;
|
|
43
47
|
playsInline: boolean;
|
|
44
48
|
preload: string;
|
|
45
49
|
}>>> & Readonly<{
|
|
@@ -49,6 +53,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
49
53
|
muted: boolean;
|
|
50
54
|
loop: boolean;
|
|
51
55
|
controls: boolean;
|
|
56
|
+
autoPlay: boolean;
|
|
52
57
|
playsInline: boolean;
|
|
53
58
|
preload: string;
|
|
54
59
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"HLSPlayer.vue.d.ts","sourceRoot":"","sources":["../src/HLSPlayer.vue"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAuGxC,iBAAS,cAAc;qBAoDO,GAAG;EAGhC;AAuBD,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;;;;;;;;;;;;;;SAVT,MAAM;gBACC,SAAS;YACb,OAAO;YACP,OAAO;WACR,OAAO;eACH,OAAO;eACP,OAAO;kBACJ,OAAO;cACX,MAAM;aACP,MAAM;YACP,MAAM;;;;;;;;;;;;WAPN,OAAO;UACR,OAAO;cACH,OAAO;cACP,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"}
|
|
@@ -13,6 +13,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
13
13
|
muted: boolean;
|
|
14
14
|
loop: boolean;
|
|
15
15
|
controls: boolean;
|
|
16
|
+
autoPlay: boolean;
|
|
16
17
|
closable: boolean;
|
|
17
18
|
class: string;
|
|
18
19
|
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
@@ -29,6 +30,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
29
30
|
muted: boolean;
|
|
30
31
|
loop: boolean;
|
|
31
32
|
controls: boolean;
|
|
33
|
+
autoPlay: boolean;
|
|
32
34
|
closable: boolean;
|
|
33
35
|
class: string;
|
|
34
36
|
}>>> & Readonly<{
|
|
@@ -39,6 +41,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
39
41
|
muted: boolean;
|
|
40
42
|
loop: boolean;
|
|
41
43
|
controls: boolean;
|
|
44
|
+
autoPlay: boolean;
|
|
42
45
|
class: string;
|
|
43
46
|
showDeviceToggle: boolean;
|
|
44
47
|
defaultDevice: DeviceMode;
|
|
@@ -1 +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;
|
|
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;AAuIlE,iBAAS,cAAc;qBAiTO,GAAG;EAGhC;AA0BD,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/index.cjs
CHANGED
|
@@ -1,2 +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;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),g=require("hls.js"),S=["muted","loop","controls","autoplay","playsinline","preload","poster"],b=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},autoPlay:{type:Boolean,default:!1},playsInline:{type:Boolean,default:!0},preload:{default:"metadata"},poster:{},class:{}},emits:["play","pause"],setup(t,{expose:n,emit:l}){const o=t,d=l,c=e.ref(null),u=e.ref(null),i=globalThis.window!==void 0&&g.isSupported(),f=r=>!!o.isHls||i&&r.endsWith(".m3u8");function y(){u.value&&(u.value.destroy(),u.value=null);const r=c.value;if(r){for(r.pause(),r.removeAttribute("src");r.firstChild;)r.firstChild.remove();r.load()}}function m(r){const p=c.value;if(!(!p||!r))if(y(),f(r)){const v=new g(o.hlsConfig);u.value=v,v.attachMedia(p),v.loadSource(r),v.on(g.Events.ERROR,(h,k)=>{k.fatal&&(v.destroy(),u.value=null)})}else p.src=r,p.load()}return e.onMounted(()=>{o.src&&m(o.src)}),e.watch(()=>o.src,r=>{r&&m(r)}),e.onUnmounted(y),n({videoEl:c}),(r,p)=>(e.openBlock(),e.createElementBlock("video",{ref_key:"videoEl",ref:c,muted:t.muted,loop:t.loop,controls:t.controls,autoplay:t.autoPlay,playsinline:t.playsInline,preload:t.preload,poster:t.poster,class:e.normalizeClass(o.class),onPlay:p[0]||(p[0]=v=>d("play")),onPause:p[1]||(p[1]=v=>d("pause"))},[e.renderSlot(r.$slots,"default")],42,S))}}),L={name:"IconDesktop"},T=e.defineComponent({...L,props:{class:{}},setup(t){const n=t;return(l,o)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["gvp-icon",n.class]),width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[...o[0]||(o[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))}}),H={name:"IconMobile"},I=e.defineComponent({...H,props:{class:{}},setup(t){const n=t;return(l,o)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["gvp-icon",n.class]),width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[...o[0]||(o[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))}}),z={name:"IconPlay"},R=e.defineComponent({...z,props:{class:{}},setup(t){const n=t;return(l,o)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["gvp-icon",n.class]),width:"22",height:"22",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[...o[0]||(o[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))}}),U={name:"IconX"},Z=e.defineComponent({...U,props:{class:{}},setup(t){const n=t;return(l,o)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["gvp-icon",n.class]),width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[...o[0]||(o[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))}});function B(t){if(!t)return null;if(/^[A-Za-z0-9_-]{11}$/.test(t))return t;let n;try{n=new URL(t)}catch{return null}const l=n.hostname.replace(/^www\./,"");if(l==="youtu.be"){const o=n.pathname.slice(1).split("/")[0];return/^[A-Za-z0-9_-]{11}$/.test(o)?o:null}if(l==="youtube.com"||l==="m.youtube.com"||l==="music.youtube.com"||l==="youtube-nocookie.com"){const o=n.searchParams.get("v");if(o&&/^[A-Za-z0-9_-]{11}$/.test(o))return o;const d=/^\/(?:embed|shorts|v|live)\/([A-Za-z0-9_-]{11})/.exec(n.pathname);if(d)return d[1]}return null}function E(t){try{const n=new URL(t),l=n.searchParams.get("t")??n.searchParams.get("start");if(!l)return null;if(/^\d+s?$/.test(l))return Number.parseInt(l,10);const o=/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(l);if(o){const d=Number.parseInt(o[1]??"0",10),c=Number.parseInt(o[2]??"0",10),u=Number.parseInt(o[3]??"0",10),i=d*3600+c*60+u;return i>0?i:null}}catch{}return null}function P(t,n={}){const{autoPlay:l=!1,muted:o=!0,loop:d=!1,controls:c=!0,startSeconds:u}=n,i=new URLSearchParams({rel:"0",modestbranding:"1",playsinline:"1",controls:c?"1":"0"});return l?(i.set("autoplay","1"),i.set("mute","1")):o&&i.set("mute","1"),d&&(i.set("loop","1"),i.set("playlist",t)),u&&u>0&&i.set("start",String(u)),`https://www.youtube-nocookie.com/embed/${t}?${i.toString()}`}const D=["src"],Y={key:2,class:"gvp-vignette"},A={key:3,class:"gvp-toggle"},W={class:"gvp-toggle-pill"},j=["aria-pressed"],_=["aria-pressed"],q={key:5,class:"gvp-play-wrap"},O={key:0,class:"gvp-tooltip",role:"tooltip"},J={key:6,class:"gvp-bottom-fade"},X=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},autoPlay:{type:Boolean,default:!1},frameMaxWidth:{},aspectRatio:{},hlsConfig:{},isHls:{type:Boolean},class:{default:""},closable:{type:Boolean,default:!1}},emits:["close","play","pause"],setup(t,{emit:n}){const l=t,o=n,d=e.ref(null),c=e.ref(l.defaultDevice),u=e.ref(!1),i=e.ref(!1),f=e.ref(null),y=e.computed(()=>B(l.src)),m=e.computed(()=>y.value!==null),r=e.computed(()=>y.value?P(y.value,{autoPlay:l.autoPlay,muted:l.muted,loop:l.loop,controls:l.controls,startSeconds:E(l.src)}):null),p=e.computed(()=>{var s,a;return c.value==="mobile"?((s=l.aspectRatio)==null?void 0:s.mobile)??"9/16":((a=l.aspectRatio)==null?void 0:a.desktop)??"16/9"}),v=e.computed(()=>{var s,a;return c.value==="mobile"?((s=l.frameMaxWidth)==null?void 0:s.mobile)??"420px":((a=l.frameMaxWidth)==null?void 0:a.desktop)??"960px"}),h=e.computed(()=>{var s;return((s=d.value)==null?void 0:s.videoEl)??null});async function k(){const s=h.value;if(s)try{s.readyState<2&&s.load();const a=s.play();f.value=a,await a,u.value=!0}catch{u.value=!1}finally{f.value=null}}async function w(){const s=h.value;if(s){if(f.value)try{await f.value}catch{}s.pause()}}async function V(){!l.hoverPlay||m.value||await k()}async function N(){!l.hoverPlay||m.value||(await w(),u.value=!1)}async function $(){const s=h.value;s&&(s.paused?await k():(await w(),u.value=!1))}function x(){i.value=!0,V()}function M(){i.value=!1,N()}return(s,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["gvp-root",l.class]),style:e.normalizeStyle({width:v.value,aspectRatio:p.value}),onMouseenter:x,onMouseleave:M},[m.value?(e.openBlock(),e.createElementBlock("iframe",{key:0,class:"gvp-video gvp-youtube",src:r.value??void 0,title:"YouTube video player",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",allowfullscreen:"",referrerpolicy:"strict-origin-when-cross-origin"},null,8,D)):(e.openBlock(),e.createBlock(b,{key:1,ref_key:"hlsPlayerRef",ref:d,controls:t.controls,"hls-config":t.hlsConfig,"is-hls":t.isHls,loop:t.loop,muted:t.muted,"auto-play":t.autoPlay,"plays-inline":!0,poster:t.poster,src:t.src,class:"gvp-video",preload:"metadata",onPause:a[0]||(a[0]=C=>{u.value=!1,o("pause")}),onPlay:a[1]||(a[1]=C=>{u.value=!0,o("play")})},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},8,["controls","hls-config","is-hls","loop","muted","auto-play","poster","src"])),m.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Y)),t.showDeviceToggle?(e.openBlock(),e.createElementBlock("div",A,[e.createElementVNode("div",W,[e.createElementVNode("button",{"aria-pressed":c.value==="desktop",class:e.normalizeClass(["gvp-toggle-btn",{"is-active":c.value==="desktop"}]),"aria-label":"Desktop view",type:"button",onClick:a[2]||(a[2]=C=>c.value="desktop")},[e.createVNode(T)],10,j),a[7]||(a[7]=e.createElementVNode("div",{class:"gvp-toggle-divider"},null,-1)),e.createElementVNode("button",{"aria-pressed":c.value==="mobile",class:e.normalizeClass(["gvp-toggle-btn",{"is-active":c.value==="mobile"}]),"aria-label":"Mobile view",type:"button",onClick:a[3]||(a[3]=C=>c.value="mobile")},[e.createVNode(I)],10,_)])])):e.createCommentVNode("",!0),t.closable?(e.openBlock(),e.createElementBlock("button",{key:4,"aria-label":"Close",class:"gvp-close",type:"button",onClick:a[4]||(a[4]=C=>o("close"))},[e.createVNode(Z)])):e.createCommentVNode("",!0),!m.value&&!u.value?(e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("button",{"aria-label":"Play",class:"gvp-play",type:"button",onClick:$,onMouseenter:a[5]||(a[5]=C=>i.value=!0),onMouseleave:a[6]||(a[6]=C=>i.value=!1)},[e.createVNode(R),t.tooltipText&&i.value?(e.openBlock(),e.createElementBlock("span",O,e.toDisplayString(t.tooltipText),1)):e.createCommentVNode("",!0)],32)])):e.createCommentVNode("",!0),m.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",J))],38))}});exports.HLSPlayer=b;exports.VueVideoPlayer=X;exports.parseYouTubeId=B;exports.parseYouTubeStart=E;exports.youTubeEmbedUrl=P;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +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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"}
|
|
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/utils/youtube.ts","../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 autoPlay?: 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 autoPlay: 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 :autoplay=\"autoPlay\"\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","/**\n * Extract a YouTube video ID from any common URL form, or `null` if the URL\n * isn't a YouTube link.\n *\n * Recognised:\n * - https://www.youtube.com/watch?v=ID\n * - https://youtube.com/watch?v=ID&t=42\n * - https://youtu.be/ID\n * - https://youtu.be/ID?t=42\n * - https://www.youtube.com/embed/ID\n * - https://www.youtube.com/shorts/ID\n * - https://music.youtube.com/watch?v=ID\n * - bare 11-character video IDs\n */\nexport function parseYouTubeId(input: string): string | null {\n if (!input) return null;\n\n if (/^[A-Za-z0-9_-]{11}$/.test(input)) return input;\n\n let url: URL;\n try {\n url = new URL(input);\n } catch {\n return null;\n }\n\n const host = url.hostname.replace(/^www\\./, \"\");\n\n if (host === \"youtu.be\") {\n const id = url.pathname.slice(1).split(\"/\")[0];\n return /^[A-Za-z0-9_-]{11}$/.test(id) ? id : null;\n }\n\n if (\n host === \"youtube.com\" ||\n host === \"m.youtube.com\" ||\n host === \"music.youtube.com\" ||\n host === \"youtube-nocookie.com\"\n ) {\n const v = url.searchParams.get(\"v\");\n if (v && /^[A-Za-z0-9_-]{11}$/.test(v)) return v;\n\n const m = /^\\/(?:embed|shorts|v|live)\\/([A-Za-z0-9_-]{11})/.exec(\n url.pathname\n );\n if (m) return m[1];\n }\n\n return null;\n}\n\n/** Extract a `t`/`start` timestamp (in seconds) from a YouTube URL, if present. */\nexport function parseYouTubeStart(input: string): number | null {\n try {\n const url = new URL(input);\n const t = url.searchParams.get(\"t\") ?? url.searchParams.get(\"start\");\n if (!t) return null;\n if (/^\\d+s?$/.test(t)) return Number.parseInt(t, 10);\n const m = /^(?:(\\d+)h)?(?:(\\d+)m)?(?:(\\d+)s)?$/.exec(t);\n if (m) {\n const h = Number.parseInt(m[1] ?? \"0\", 10);\n const min = Number.parseInt(m[2] ?? \"0\", 10);\n const s = Number.parseInt(m[3] ?? \"0\", 10);\n const total = h * 3600 + min * 60 + s;\n return total > 0 ? total : null;\n }\n } catch {\n /* not a URL */\n }\n return null;\n}\n\nexport interface YouTubeEmbedOptions {\n /** Start playback immediately. Forces `mute` on, since browsers block sound-on autoplay. */\n autoPlay?: boolean;\n /** Mute the player. */\n muted?: boolean;\n /** Loop the video. */\n loop?: boolean;\n /** Show YouTube's player controls. Defaults to `true`. */\n controls?: boolean;\n /** Start offset in seconds. */\n startSeconds?: number | null;\n}\n\n/**\n * Build a privacy-enhanced YouTube embed URL from a video ID and player options.\n *\n * Notes on YouTube's quirks:\n * - `autoplay=1` only takes effect if `mute=1` is also set (browser policy).\n * - single-video loop requires `loop=1` **and** `playlist=<id>`.\n */\nexport function youTubeEmbedUrl(\n id: string,\n opts: YouTubeEmbedOptions = {}\n): string {\n const {\n autoPlay = false,\n muted = true,\n loop = false,\n controls = true,\n startSeconds\n } = opts;\n\n const params = new URLSearchParams({\n rel: \"0\",\n modestbranding: \"1\",\n playsinline: \"1\",\n controls: controls ? \"1\" : \"0\"\n });\n\n if (autoPlay) {\n params.set(\"autoplay\", \"1\");\n params.set(\"mute\", \"1\"); // required for autoplay to actually fire\n } else if (muted) {\n params.set(\"mute\", \"1\");\n }\n\n if (loop) {\n params.set(\"loop\", \"1\");\n params.set(\"playlist\", id); // YouTube needs this for single-video loop\n }\n\n if (startSeconds && startSeconds > 0) {\n params.set(\"start\", String(startSeconds));\n }\n\n return `https://www.youtube-nocookie.com/embed/${id}?${params.toString()}`;\n}\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\";\nimport { parseYouTubeId, parseYouTubeStart, youTubeEmbedUrl } from \"./utils/youtube\";\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 autoPlay: 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 youTubeId = computed(() => parseYouTubeId(props.src));\nconst isYouTube = computed(() => youTubeId.value !== null);\nconst youTubeSrc = computed(() =>\n youTubeId.value\n ? youTubeEmbedUrl(youTubeId.value, {\n autoPlay: props.autoPlay,\n muted: props.muted,\n loop: props.loop,\n controls: props.controls,\n startSeconds: parseYouTubeStart(props.src)\n })\n : null\n);\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 || isYouTube.value) return;\n await safePlay();\n}\n\nasync function hoverStop() {\n if (!props.hoverPlay || isYouTube.value) 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 <iframe\n v-if=\"isYouTube\"\n class=\"gvp-video gvp-youtube\"\n :src=\"youTubeSrc ?? undefined\"\n title=\"YouTube video player\"\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n allowfullscreen\n referrerpolicy=\"strict-origin-when-cross-origin\"\n />\n <HLSPlayer\n v-else\n ref=\"hlsPlayerRef\"\n :controls=\"controls\"\n :hls-config=\"hlsConfig\"\n :is-hls=\"isHls\"\n :loop=\"loop\"\n :muted=\"muted\"\n :auto-play=\"autoPlay\"\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 v-if=\"!isYouTube\" 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=\"!isYouTube && !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 v-if=\"!isYouTube\" 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","parseYouTubeId","input","url","host","id","v","m","parseYouTubeStart","t","h","min","s","total","youTubeEmbedUrl","opts","autoPlay","muted","loop","controls","startSeconds","params","hlsPlayerRef","device","isPlaying","showTooltip","playPromise","youTubeId","computed","isYouTube","youTubeSrc","aspectRatio","_a","_b","frameMaxWidth","safePlay","p","safePause","hoverStart","hoverStop","togglePlay","onMouseEnter","onMouseLeave","_normalizeStyle","_createBlock","HLSPlayer","_cache","$event","_openBlock","_hoisted_2","_hoisted_3","_hoisted_4","_createVNode","IconDesktop","IconMobile","IconX","_hoisted_7","IconPlay","_hoisted_8","_toDisplayString","_hoisted_9"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -2,4 +2,5 @@
|
|
|
2
2
|
export { default as VueVideoPlayer } from './VideoPlayer.vue';
|
|
3
3
|
export { default as HLSPlayer } from './HLSPlayer.vue';
|
|
4
4
|
export type { VideoPlayerProps, HLSPlayerProps, DeviceMode, AspectRatio } from './utils/types';
|
|
5
|
+
export { parseYouTubeId, parseYouTubeStart, youTubeEmbedUrl } from './utils/youtube';
|
|
5
6
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +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"}
|
|
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;AACvB,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as $, ref as g, onMounted as Z, watch as D, onUnmounted as N, openBlock as c, createElementBlock as p, normalizeClass as h, renderSlot as H, createElementVNode as d, computed as k, normalizeStyle as U, createBlock as z, withCtx as A, createCommentVNode as P, createVNode as B, toDisplayString as W } from "vue";
|
|
2
|
+
import L from "hls.js";
|
|
3
|
+
const Y = ["muted", "loop", "controls", "autoplay", "playsinline", "preload", "poster"], _ = /* @__PURE__ */ $({
|
|
4
4
|
__name: "HLSPlayer",
|
|
5
5
|
props: {
|
|
6
6
|
src: {},
|
|
@@ -9,92 +9,94 @@ const j = ["muted", "loop", "controls", "playsinline", "preload", "poster"], N =
|
|
|
9
9
|
muted: { type: Boolean, default: !0 },
|
|
10
10
|
loop: { type: Boolean, default: !1 },
|
|
11
11
|
controls: { type: Boolean, default: !1 },
|
|
12
|
+
autoPlay: { type: Boolean, default: !1 },
|
|
12
13
|
playsInline: { type: Boolean, default: !0 },
|
|
13
14
|
preload: { default: "metadata" },
|
|
14
15
|
poster: {},
|
|
15
16
|
class: {}
|
|
16
17
|
},
|
|
17
18
|
emits: ["play", "pause"],
|
|
18
|
-
setup(
|
|
19
|
-
const
|
|
20
|
-
function
|
|
19
|
+
setup(e, { expose: s, emit: o }) {
|
|
20
|
+
const t = e, v = o, i = g(null), r = g(null), u = globalThis.window !== void 0 && L.isSupported(), C = (n) => !!t.isHls || u && n.endsWith(".m3u8");
|
|
21
|
+
function w() {
|
|
21
22
|
r.value && (r.value.destroy(), r.value = null);
|
|
22
|
-
const
|
|
23
|
-
if (
|
|
24
|
-
for (
|
|
25
|
-
|
|
23
|
+
const n = i.value;
|
|
24
|
+
if (n) {
|
|
25
|
+
for (n.pause(), n.removeAttribute("src"); n.firstChild; ) n.firstChild.remove();
|
|
26
|
+
n.load();
|
|
26
27
|
}
|
|
27
28
|
}
|
|
28
|
-
function
|
|
29
|
-
const
|
|
30
|
-
if (!(!
|
|
31
|
-
if (
|
|
32
|
-
const
|
|
33
|
-
r.value =
|
|
34
|
-
|
|
29
|
+
function y(n) {
|
|
30
|
+
const f = i.value;
|
|
31
|
+
if (!(!f || !n))
|
|
32
|
+
if (w(), C(n)) {
|
|
33
|
+
const m = new L(t.hlsConfig);
|
|
34
|
+
r.value = m, m.attachMedia(f), m.loadSource(n), m.on(L.Events.ERROR, (x, M) => {
|
|
35
|
+
M.fatal && (m.destroy(), r.value = null);
|
|
35
36
|
});
|
|
36
37
|
} else
|
|
37
|
-
|
|
38
|
+
f.src = n, f.load();
|
|
38
39
|
}
|
|
39
|
-
return
|
|
40
|
-
|
|
40
|
+
return Z(() => {
|
|
41
|
+
t.src && y(t.src);
|
|
41
42
|
}), D(
|
|
42
|
-
() =>
|
|
43
|
-
(
|
|
44
|
-
|
|
43
|
+
() => t.src,
|
|
44
|
+
(n) => {
|
|
45
|
+
n && y(n);
|
|
45
46
|
}
|
|
46
|
-
),
|
|
47
|
+
), N(w), s({ videoEl: i }), (n, f) => (c(), p("video", {
|
|
47
48
|
ref_key: "videoEl",
|
|
48
49
|
ref: i,
|
|
49
|
-
muted:
|
|
50
|
-
loop:
|
|
51
|
-
controls:
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
50
|
+
muted: e.muted,
|
|
51
|
+
loop: e.loop,
|
|
52
|
+
controls: e.controls,
|
|
53
|
+
autoplay: e.autoPlay,
|
|
54
|
+
playsinline: e.playsInline,
|
|
55
|
+
preload: e.preload,
|
|
56
|
+
poster: e.poster,
|
|
57
|
+
class: h(t.class),
|
|
58
|
+
onPlay: f[0] || (f[0] = (m) => v("play")),
|
|
59
|
+
onPause: f[1] || (f[1] = (m) => v("pause"))
|
|
58
60
|
}, [
|
|
59
|
-
H(
|
|
60
|
-
], 42,
|
|
61
|
+
H(n.$slots, "default")
|
|
62
|
+
], 42, Y));
|
|
61
63
|
}
|
|
62
|
-
}),
|
|
63
|
-
...
|
|
64
|
+
}), j = { name: "IconDesktop" }, J = /* @__PURE__ */ $({
|
|
65
|
+
...j,
|
|
64
66
|
props: {
|
|
65
67
|
class: {}
|
|
66
68
|
},
|
|
67
|
-
setup(
|
|
68
|
-
const
|
|
69
|
-
return (
|
|
70
|
-
class:
|
|
69
|
+
setup(e) {
|
|
70
|
+
const s = e;
|
|
71
|
+
return (o, t) => (c(), p("svg", {
|
|
72
|
+
class: h(["gvp-icon", s.class]),
|
|
71
73
|
width: "20",
|
|
72
74
|
height: "20",
|
|
73
75
|
viewBox: "0 0 24 24",
|
|
74
76
|
fill: "none",
|
|
75
77
|
xmlns: "http://www.w3.org/2000/svg",
|
|
76
78
|
"aria-hidden": "true"
|
|
77
|
-
}, [...
|
|
78
|
-
|
|
79
|
+
}, [...t[0] || (t[0] = [
|
|
80
|
+
d("path", {
|
|
79
81
|
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",
|
|
80
82
|
stroke: "currentColor",
|
|
81
83
|
"stroke-width": "1.5",
|
|
82
84
|
"stroke-linecap": "round"
|
|
83
85
|
}, null, -1),
|
|
84
|
-
|
|
86
|
+
d("path", {
|
|
85
87
|
d: "M11 15H13",
|
|
86
88
|
stroke: "currentColor",
|
|
87
89
|
"stroke-width": "1.5",
|
|
88
90
|
"stroke-linecap": "round",
|
|
89
91
|
"stroke-linejoin": "round"
|
|
90
92
|
}, null, -1),
|
|
91
|
-
|
|
93
|
+
d("path", {
|
|
92
94
|
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",
|
|
93
95
|
stroke: "currentColor",
|
|
94
96
|
"stroke-width": "1.5",
|
|
95
97
|
"stroke-linecap": "round"
|
|
96
98
|
}, null, -1),
|
|
97
|
-
|
|
99
|
+
d("path", {
|
|
98
100
|
d: "M7 22H17",
|
|
99
101
|
stroke: "currentColor",
|
|
100
102
|
"stroke-width": "1.5",
|
|
@@ -102,36 +104,36 @@ const j = ["muted", "loop", "controls", "playsinline", "preload", "poster"], N =
|
|
|
102
104
|
}, null, -1)
|
|
103
105
|
])], 2));
|
|
104
106
|
}
|
|
105
|
-
}),
|
|
106
|
-
...
|
|
107
|
+
}), O = { name: "IconMobile" }, X = /* @__PURE__ */ $({
|
|
108
|
+
...O,
|
|
107
109
|
props: {
|
|
108
110
|
class: {}
|
|
109
111
|
},
|
|
110
|
-
setup(
|
|
111
|
-
const
|
|
112
|
-
return (
|
|
113
|
-
class:
|
|
112
|
+
setup(e) {
|
|
113
|
+
const s = e;
|
|
114
|
+
return (o, t) => (c(), p("svg", {
|
|
115
|
+
class: h(["gvp-icon", s.class]),
|
|
114
116
|
width: "20",
|
|
115
117
|
height: "20",
|
|
116
118
|
viewBox: "0 0 24 24",
|
|
117
119
|
fill: "none",
|
|
118
120
|
xmlns: "http://www.w3.org/2000/svg",
|
|
119
121
|
"aria-hidden": "true"
|
|
120
|
-
}, [...
|
|
121
|
-
|
|
122
|
+
}, [...t[0] || (t[0] = [
|
|
123
|
+
d("path", {
|
|
122
124
|
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",
|
|
123
125
|
stroke: "currentColor",
|
|
124
126
|
"stroke-width": "2",
|
|
125
127
|
"stroke-linecap": "round"
|
|
126
128
|
}, null, -1),
|
|
127
|
-
|
|
129
|
+
d("path", {
|
|
128
130
|
d: "M11 19H13",
|
|
129
131
|
stroke: "currentColor",
|
|
130
132
|
"stroke-width": "2",
|
|
131
133
|
"stroke-linecap": "round",
|
|
132
134
|
"stroke-linejoin": "round"
|
|
133
135
|
}, null, -1),
|
|
134
|
-
|
|
136
|
+
d("path", {
|
|
135
137
|
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",
|
|
136
138
|
stroke: "currentColor",
|
|
137
139
|
"stroke-width": "2",
|
|
@@ -139,61 +141,121 @@ const j = ["muted", "loop", "controls", "playsinline", "preload", "poster"], N =
|
|
|
139
141
|
}, null, -1)
|
|
140
142
|
])], 2));
|
|
141
143
|
}
|
|
142
|
-
}),
|
|
143
|
-
...
|
|
144
|
+
}), q = { name: "IconPlay" }, F = /* @__PURE__ */ $({
|
|
145
|
+
...q,
|
|
144
146
|
props: {
|
|
145
147
|
class: {}
|
|
146
148
|
},
|
|
147
|
-
setup(
|
|
148
|
-
const
|
|
149
|
-
return (
|
|
150
|
-
class:
|
|
149
|
+
setup(e) {
|
|
150
|
+
const s = e;
|
|
151
|
+
return (o, t) => (c(), p("svg", {
|
|
152
|
+
class: h(["gvp-icon", s.class]),
|
|
151
153
|
width: "22",
|
|
152
154
|
height: "22",
|
|
153
155
|
viewBox: "0 0 16 16",
|
|
154
156
|
fill: "none",
|
|
155
157
|
xmlns: "http://www.w3.org/2000/svg",
|
|
156
158
|
"aria-hidden": "true"
|
|
157
|
-
}, [...
|
|
158
|
-
|
|
159
|
+
}, [...t[0] || (t[0] = [
|
|
160
|
+
d("path", {
|
|
159
161
|
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",
|
|
160
162
|
fill: "currentColor"
|
|
161
163
|
}, null, -1)
|
|
162
164
|
])], 2));
|
|
163
165
|
}
|
|
164
|
-
}),
|
|
165
|
-
...
|
|
166
|
+
}), G = { name: "IconX" }, K = /* @__PURE__ */ $({
|
|
167
|
+
...G,
|
|
166
168
|
props: {
|
|
167
169
|
class: {}
|
|
168
170
|
},
|
|
169
|
-
setup(
|
|
170
|
-
const
|
|
171
|
-
return (
|
|
172
|
-
class:
|
|
171
|
+
setup(e) {
|
|
172
|
+
const s = e;
|
|
173
|
+
return (o, t) => (c(), p("svg", {
|
|
174
|
+
class: h(["gvp-icon", s.class]),
|
|
173
175
|
width: "14",
|
|
174
176
|
height: "14",
|
|
175
177
|
viewBox: "0 0 14 14",
|
|
176
178
|
fill: "none",
|
|
177
179
|
xmlns: "http://www.w3.org/2000/svg",
|
|
178
180
|
"aria-hidden": "true"
|
|
179
|
-
}, [...
|
|
180
|
-
|
|
181
|
+
}, [...t[0] || (t[0] = [
|
|
182
|
+
d("path", {
|
|
181
183
|
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",
|
|
182
184
|
fill: "currentColor"
|
|
183
185
|
}, null, -1)
|
|
184
186
|
])], 2));
|
|
185
187
|
}
|
|
186
|
-
})
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
188
|
+
});
|
|
189
|
+
function Q(e) {
|
|
190
|
+
if (!e) return null;
|
|
191
|
+
if (/^[A-Za-z0-9_-]{11}$/.test(e)) return e;
|
|
192
|
+
let s;
|
|
193
|
+
try {
|
|
194
|
+
s = new URL(e);
|
|
195
|
+
} catch {
|
|
196
|
+
return null;
|
|
197
|
+
}
|
|
198
|
+
const o = s.hostname.replace(/^www\./, "");
|
|
199
|
+
if (o === "youtu.be") {
|
|
200
|
+
const t = s.pathname.slice(1).split("/")[0];
|
|
201
|
+
return /^[A-Za-z0-9_-]{11}$/.test(t) ? t : null;
|
|
202
|
+
}
|
|
203
|
+
if (o === "youtube.com" || o === "m.youtube.com" || o === "music.youtube.com" || o === "youtube-nocookie.com") {
|
|
204
|
+
const t = s.searchParams.get("v");
|
|
205
|
+
if (t && /^[A-Za-z0-9_-]{11}$/.test(t)) return t;
|
|
206
|
+
const v = /^\/(?:embed|shorts|v|live)\/([A-Za-z0-9_-]{11})/.exec(
|
|
207
|
+
s.pathname
|
|
208
|
+
);
|
|
209
|
+
if (v) return v[1];
|
|
210
|
+
}
|
|
211
|
+
return null;
|
|
212
|
+
}
|
|
213
|
+
function ee(e) {
|
|
214
|
+
try {
|
|
215
|
+
const s = new URL(e), o = s.searchParams.get("t") ?? s.searchParams.get("start");
|
|
216
|
+
if (!o) return null;
|
|
217
|
+
if (/^\d+s?$/.test(o)) return Number.parseInt(o, 10);
|
|
218
|
+
const t = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(o);
|
|
219
|
+
if (t) {
|
|
220
|
+
const v = Number.parseInt(t[1] ?? "0", 10), i = Number.parseInt(t[2] ?? "0", 10), r = Number.parseInt(t[3] ?? "0", 10), u = v * 3600 + i * 60 + r;
|
|
221
|
+
return u > 0 ? u : null;
|
|
222
|
+
}
|
|
223
|
+
} catch {
|
|
224
|
+
}
|
|
225
|
+
return null;
|
|
226
|
+
}
|
|
227
|
+
function te(e, s = {}) {
|
|
228
|
+
const {
|
|
229
|
+
autoPlay: o = !1,
|
|
230
|
+
muted: t = !0,
|
|
231
|
+
loop: v = !1,
|
|
232
|
+
controls: i = !0,
|
|
233
|
+
startSeconds: r
|
|
234
|
+
} = s, u = new URLSearchParams({
|
|
235
|
+
rel: "0",
|
|
236
|
+
modestbranding: "1",
|
|
237
|
+
playsinline: "1",
|
|
238
|
+
controls: i ? "1" : "0"
|
|
239
|
+
});
|
|
240
|
+
return o ? (u.set("autoplay", "1"), u.set("mute", "1")) : t && u.set("mute", "1"), v && (u.set("loop", "1"), u.set("playlist", e)), r && r > 0 && u.set("start", String(r)), `https://www.youtube-nocookie.com/embed/${e}?${u.toString()}`;
|
|
241
|
+
}
|
|
242
|
+
const oe = ["src"], le = {
|
|
190
243
|
key: 2,
|
|
244
|
+
class: "gvp-vignette"
|
|
245
|
+
}, se = {
|
|
246
|
+
key: 3,
|
|
247
|
+
class: "gvp-toggle"
|
|
248
|
+
}, ae = { class: "gvp-toggle-pill" }, ne = ["aria-pressed"], re = ["aria-pressed"], ue = {
|
|
249
|
+
key: 5,
|
|
191
250
|
class: "gvp-play-wrap"
|
|
192
|
-
},
|
|
251
|
+
}, ie = {
|
|
193
252
|
key: 0,
|
|
194
253
|
class: "gvp-tooltip",
|
|
195
254
|
role: "tooltip"
|
|
196
|
-
},
|
|
255
|
+
}, ce = {
|
|
256
|
+
key: 6,
|
|
257
|
+
class: "gvp-bottom-fade"
|
|
258
|
+
}, ve = /* @__PURE__ */ $({
|
|
197
259
|
__name: "VideoPlayer",
|
|
198
260
|
props: {
|
|
199
261
|
src: {},
|
|
@@ -205,6 +267,7 @@ const j = ["muted", "loop", "controls", "playsinline", "preload", "poster"], N =
|
|
|
205
267
|
muted: { type: Boolean, default: !0 },
|
|
206
268
|
loop: { type: Boolean, default: !1 },
|
|
207
269
|
controls: { type: Boolean, default: !1 },
|
|
270
|
+
autoPlay: { type: Boolean, default: !1 },
|
|
208
271
|
frameMaxWidth: {},
|
|
209
272
|
aspectRatio: {},
|
|
210
273
|
hlsConfig: {},
|
|
@@ -213,144 +276,165 @@ const j = ["muted", "loop", "controls", "playsinline", "preload", "poster"], N =
|
|
|
213
276
|
closable: { type: Boolean, default: !1 }
|
|
214
277
|
},
|
|
215
278
|
emits: ["close", "play", "pause"],
|
|
216
|
-
setup(
|
|
217
|
-
const
|
|
279
|
+
setup(e, { emit: s }) {
|
|
280
|
+
const o = e, t = s, v = g(null), i = g(o.defaultDevice), r = g(!1), u = g(!1), C = g(null), w = k(() => Q(o.src)), y = k(() => w.value !== null), n = k(
|
|
281
|
+
() => w.value ? te(w.value, {
|
|
282
|
+
autoPlay: o.autoPlay,
|
|
283
|
+
muted: o.muted,
|
|
284
|
+
loop: o.loop,
|
|
285
|
+
controls: o.controls,
|
|
286
|
+
startSeconds: ee(o.src)
|
|
287
|
+
}) : null
|
|
288
|
+
), f = k(
|
|
218
289
|
() => {
|
|
219
|
-
var
|
|
220
|
-
return i.value === "mobile" ? ((
|
|
290
|
+
var a, l;
|
|
291
|
+
return i.value === "mobile" ? ((a = o.aspectRatio) == null ? void 0 : a.mobile) ?? "9/16" : ((l = o.aspectRatio) == null ? void 0 : l.desktop) ?? "16/9";
|
|
221
292
|
}
|
|
222
|
-
),
|
|
293
|
+
), m = k(
|
|
223
294
|
() => {
|
|
224
|
-
var
|
|
225
|
-
return i.value === "mobile" ? ((
|
|
295
|
+
var a, l;
|
|
296
|
+
return i.value === "mobile" ? ((a = o.frameMaxWidth) == null ? void 0 : a.mobile) ?? "420px" : ((l = o.frameMaxWidth) == null ? void 0 : l.desktop) ?? "960px";
|
|
226
297
|
}
|
|
227
|
-
),
|
|
228
|
-
var
|
|
229
|
-
return ((
|
|
298
|
+
), x = k(() => {
|
|
299
|
+
var a;
|
|
300
|
+
return ((a = v.value) == null ? void 0 : a.videoEl) ?? null;
|
|
230
301
|
});
|
|
231
|
-
async function
|
|
232
|
-
const
|
|
233
|
-
if (
|
|
302
|
+
async function M() {
|
|
303
|
+
const a = x.value;
|
|
304
|
+
if (a)
|
|
234
305
|
try {
|
|
235
|
-
|
|
236
|
-
const
|
|
237
|
-
|
|
306
|
+
a.readyState < 2 && a.load();
|
|
307
|
+
const l = a.play();
|
|
308
|
+
C.value = l, await l, r.value = !0;
|
|
238
309
|
} catch {
|
|
239
310
|
r.value = !1;
|
|
240
311
|
} finally {
|
|
241
|
-
|
|
312
|
+
C.value = null;
|
|
242
313
|
}
|
|
243
314
|
}
|
|
244
|
-
async function
|
|
245
|
-
const
|
|
246
|
-
if (
|
|
247
|
-
if (
|
|
315
|
+
async function S() {
|
|
316
|
+
const a = x.value;
|
|
317
|
+
if (a) {
|
|
318
|
+
if (C.value)
|
|
248
319
|
try {
|
|
249
|
-
await
|
|
320
|
+
await C.value;
|
|
250
321
|
} catch {
|
|
251
322
|
}
|
|
252
|
-
|
|
323
|
+
a.pause();
|
|
253
324
|
}
|
|
254
325
|
}
|
|
255
|
-
async function
|
|
256
|
-
|
|
326
|
+
async function T() {
|
|
327
|
+
!o.hoverPlay || y.value || await M();
|
|
257
328
|
}
|
|
258
|
-
async function
|
|
259
|
-
|
|
329
|
+
async function I() {
|
|
330
|
+
!o.hoverPlay || y.value || (await S(), r.value = !1);
|
|
260
331
|
}
|
|
261
332
|
async function R() {
|
|
262
|
-
const
|
|
263
|
-
|
|
264
|
-
}
|
|
265
|
-
function S() {
|
|
266
|
-
C.value = !0, L();
|
|
333
|
+
const a = x.value;
|
|
334
|
+
a && (a.paused ? await M() : (await S(), r.value = !1));
|
|
267
335
|
}
|
|
268
336
|
function E() {
|
|
269
|
-
|
|
337
|
+
u.value = !0, T();
|
|
338
|
+
}
|
|
339
|
+
function V() {
|
|
340
|
+
u.value = !1, I();
|
|
270
341
|
}
|
|
271
|
-
return (
|
|
272
|
-
class:
|
|
273
|
-
style:
|
|
274
|
-
onMouseenter:
|
|
275
|
-
onMouseleave:
|
|
342
|
+
return (a, l) => (c(), p("div", {
|
|
343
|
+
class: h(["gvp-root", o.class]),
|
|
344
|
+
style: U({ width: m.value, aspectRatio: f.value }),
|
|
345
|
+
onMouseenter: E,
|
|
346
|
+
onMouseleave: V
|
|
276
347
|
}, [
|
|
277
|
-
|
|
348
|
+
y.value ? (c(), p("iframe", {
|
|
349
|
+
key: 0,
|
|
350
|
+
class: "gvp-video gvp-youtube",
|
|
351
|
+
src: n.value ?? void 0,
|
|
352
|
+
title: "YouTube video player",
|
|
353
|
+
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
|
|
354
|
+
allowfullscreen: "",
|
|
355
|
+
referrerpolicy: "strict-origin-when-cross-origin"
|
|
356
|
+
}, null, 8, oe)) : (c(), z(_, {
|
|
357
|
+
key: 1,
|
|
278
358
|
ref_key: "hlsPlayerRef",
|
|
279
|
-
ref:
|
|
280
|
-
controls:
|
|
281
|
-
"hls-config":
|
|
282
|
-
"is-hls":
|
|
283
|
-
loop:
|
|
284
|
-
muted:
|
|
359
|
+
ref: v,
|
|
360
|
+
controls: e.controls,
|
|
361
|
+
"hls-config": e.hlsConfig,
|
|
362
|
+
"is-hls": e.isHls,
|
|
363
|
+
loop: e.loop,
|
|
364
|
+
muted: e.muted,
|
|
365
|
+
"auto-play": e.autoPlay,
|
|
285
366
|
"plays-inline": !0,
|
|
286
|
-
poster:
|
|
287
|
-
src:
|
|
367
|
+
poster: e.poster,
|
|
368
|
+
src: e.src,
|
|
288
369
|
class: "gvp-video",
|
|
289
370
|
preload: "metadata",
|
|
290
|
-
onPause:
|
|
291
|
-
r.value = !1,
|
|
371
|
+
onPause: l[0] || (l[0] = (b) => {
|
|
372
|
+
r.value = !1, t("pause");
|
|
292
373
|
}),
|
|
293
|
-
onPlay:
|
|
294
|
-
r.value = !0,
|
|
374
|
+
onPlay: l[1] || (l[1] = (b) => {
|
|
375
|
+
r.value = !0, t("play");
|
|
295
376
|
})
|
|
296
377
|
}, {
|
|
297
|
-
default:
|
|
298
|
-
H(
|
|
378
|
+
default: A(() => [
|
|
379
|
+
H(a.$slots, "default")
|
|
299
380
|
]),
|
|
300
381
|
_: 3
|
|
301
|
-
}, 8, ["controls", "hls-config", "is-hls", "loop", "muted", "poster", "src"]),
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
382
|
+
}, 8, ["controls", "hls-config", "is-hls", "loop", "muted", "auto-play", "poster", "src"])),
|
|
383
|
+
y.value ? P("", !0) : (c(), p("div", le)),
|
|
384
|
+
e.showDeviceToggle ? (c(), p("div", se, [
|
|
385
|
+
d("div", ae, [
|
|
386
|
+
d("button", {
|
|
306
387
|
"aria-pressed": i.value === "desktop",
|
|
307
|
-
class:
|
|
388
|
+
class: h(["gvp-toggle-btn", { "is-active": i.value === "desktop" }]),
|
|
308
389
|
"aria-label": "Desktop view",
|
|
309
390
|
type: "button",
|
|
310
|
-
onClick:
|
|
391
|
+
onClick: l[2] || (l[2] = (b) => i.value = "desktop")
|
|
311
392
|
}, [
|
|
312
|
-
|
|
313
|
-
], 10,
|
|
314
|
-
|
|
315
|
-
|
|
393
|
+
B(J)
|
|
394
|
+
], 10, ne),
|
|
395
|
+
l[7] || (l[7] = d("div", { class: "gvp-toggle-divider" }, null, -1)),
|
|
396
|
+
d("button", {
|
|
316
397
|
"aria-pressed": i.value === "mobile",
|
|
317
|
-
class:
|
|
398
|
+
class: h(["gvp-toggle-btn", { "is-active": i.value === "mobile" }]),
|
|
318
399
|
"aria-label": "Mobile view",
|
|
319
400
|
type: "button",
|
|
320
|
-
onClick:
|
|
401
|
+
onClick: l[3] || (l[3] = (b) => i.value = "mobile")
|
|
321
402
|
}, [
|
|
322
|
-
|
|
323
|
-
], 10,
|
|
403
|
+
B(X)
|
|
404
|
+
], 10, re)
|
|
324
405
|
])
|
|
325
|
-
])) :
|
|
326
|
-
|
|
327
|
-
key:
|
|
406
|
+
])) : P("", !0),
|
|
407
|
+
e.closable ? (c(), p("button", {
|
|
408
|
+
key: 4,
|
|
328
409
|
"aria-label": "Close",
|
|
329
410
|
class: "gvp-close",
|
|
330
411
|
type: "button",
|
|
331
|
-
onClick:
|
|
412
|
+
onClick: l[4] || (l[4] = (b) => t("close"))
|
|
332
413
|
}, [
|
|
333
|
-
|
|
334
|
-
])) :
|
|
335
|
-
|
|
336
|
-
|
|
414
|
+
B(K)
|
|
415
|
+
])) : P("", !0),
|
|
416
|
+
!y.value && !r.value ? (c(), p("div", ue, [
|
|
417
|
+
d("button", {
|
|
337
418
|
"aria-label": "Play",
|
|
338
419
|
class: "gvp-play",
|
|
339
420
|
type: "button",
|
|
340
421
|
onClick: R,
|
|
341
|
-
onMouseenter:
|
|
342
|
-
onMouseleave:
|
|
422
|
+
onMouseenter: l[5] || (l[5] = (b) => u.value = !0),
|
|
423
|
+
onMouseleave: l[6] || (l[6] = (b) => u.value = !1)
|
|
343
424
|
}, [
|
|
344
|
-
|
|
345
|
-
|
|
425
|
+
B(F),
|
|
426
|
+
e.tooltipText && u.value ? (c(), p("span", ie, W(e.tooltipText), 1)) : P("", !0)
|
|
346
427
|
], 32)
|
|
347
|
-
])),
|
|
348
|
-
|
|
428
|
+
])) : P("", !0),
|
|
429
|
+
y.value ? P("", !0) : (c(), p("div", ce))
|
|
349
430
|
], 38));
|
|
350
431
|
}
|
|
351
432
|
});
|
|
352
433
|
export {
|
|
353
|
-
|
|
354
|
-
|
|
434
|
+
_ as HLSPlayer,
|
|
435
|
+
ve as VueVideoPlayer,
|
|
436
|
+
Q as parseYouTubeId,
|
|
437
|
+
ee as parseYouTubeStart,
|
|
438
|
+
te as youTubeEmbedUrl
|
|
355
439
|
};
|
|
356
440
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","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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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../src/HLSPlayer.vue","../src/components/IconDesktop.vue","../src/components/IconMobile.vue","../src/components/IconPlay.vue","../src/components/IconX.vue","../src/utils/youtube.ts","../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 autoPlay?: 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 autoPlay: 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 :autoplay=\"autoPlay\"\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","/**\n * Extract a YouTube video ID from any common URL form, or `null` if the URL\n * isn't a YouTube link.\n *\n * Recognised:\n * - https://www.youtube.com/watch?v=ID\n * - https://youtube.com/watch?v=ID&t=42\n * - https://youtu.be/ID\n * - https://youtu.be/ID?t=42\n * - https://www.youtube.com/embed/ID\n * - https://www.youtube.com/shorts/ID\n * - https://music.youtube.com/watch?v=ID\n * - bare 11-character video IDs\n */\nexport function parseYouTubeId(input: string): string | null {\n if (!input) return null;\n\n if (/^[A-Za-z0-9_-]{11}$/.test(input)) return input;\n\n let url: URL;\n try {\n url = new URL(input);\n } catch {\n return null;\n }\n\n const host = url.hostname.replace(/^www\\./, \"\");\n\n if (host === \"youtu.be\") {\n const id = url.pathname.slice(1).split(\"/\")[0];\n return /^[A-Za-z0-9_-]{11}$/.test(id) ? id : null;\n }\n\n if (\n host === \"youtube.com\" ||\n host === \"m.youtube.com\" ||\n host === \"music.youtube.com\" ||\n host === \"youtube-nocookie.com\"\n ) {\n const v = url.searchParams.get(\"v\");\n if (v && /^[A-Za-z0-9_-]{11}$/.test(v)) return v;\n\n const m = /^\\/(?:embed|shorts|v|live)\\/([A-Za-z0-9_-]{11})/.exec(\n url.pathname\n );\n if (m) return m[1];\n }\n\n return null;\n}\n\n/** Extract a `t`/`start` timestamp (in seconds) from a YouTube URL, if present. */\nexport function parseYouTubeStart(input: string): number | null {\n try {\n const url = new URL(input);\n const t = url.searchParams.get(\"t\") ?? url.searchParams.get(\"start\");\n if (!t) return null;\n if (/^\\d+s?$/.test(t)) return Number.parseInt(t, 10);\n const m = /^(?:(\\d+)h)?(?:(\\d+)m)?(?:(\\d+)s)?$/.exec(t);\n if (m) {\n const h = Number.parseInt(m[1] ?? \"0\", 10);\n const min = Number.parseInt(m[2] ?? \"0\", 10);\n const s = Number.parseInt(m[3] ?? \"0\", 10);\n const total = h * 3600 + min * 60 + s;\n return total > 0 ? total : null;\n }\n } catch {\n /* not a URL */\n }\n return null;\n}\n\nexport interface YouTubeEmbedOptions {\n /** Start playback immediately. Forces `mute` on, since browsers block sound-on autoplay. */\n autoPlay?: boolean;\n /** Mute the player. */\n muted?: boolean;\n /** Loop the video. */\n loop?: boolean;\n /** Show YouTube's player controls. Defaults to `true`. */\n controls?: boolean;\n /** Start offset in seconds. */\n startSeconds?: number | null;\n}\n\n/**\n * Build a privacy-enhanced YouTube embed URL from a video ID and player options.\n *\n * Notes on YouTube's quirks:\n * - `autoplay=1` only takes effect if `mute=1` is also set (browser policy).\n * - single-video loop requires `loop=1` **and** `playlist=<id>`.\n */\nexport function youTubeEmbedUrl(\n id: string,\n opts: YouTubeEmbedOptions = {}\n): string {\n const {\n autoPlay = false,\n muted = true,\n loop = false,\n controls = true,\n startSeconds\n } = opts;\n\n const params = new URLSearchParams({\n rel: \"0\",\n modestbranding: \"1\",\n playsinline: \"1\",\n controls: controls ? \"1\" : \"0\"\n });\n\n if (autoPlay) {\n params.set(\"autoplay\", \"1\");\n params.set(\"mute\", \"1\"); // required for autoplay to actually fire\n } else if (muted) {\n params.set(\"mute\", \"1\");\n }\n\n if (loop) {\n params.set(\"loop\", \"1\");\n params.set(\"playlist\", id); // YouTube needs this for single-video loop\n }\n\n if (startSeconds && startSeconds > 0) {\n params.set(\"start\", String(startSeconds));\n }\n\n return `https://www.youtube-nocookie.com/embed/${id}?${params.toString()}`;\n}\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\";\nimport { parseYouTubeId, parseYouTubeStart, youTubeEmbedUrl } from \"./utils/youtube\";\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 autoPlay: 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 youTubeId = computed(() => parseYouTubeId(props.src));\nconst isYouTube = computed(() => youTubeId.value !== null);\nconst youTubeSrc = computed(() =>\n youTubeId.value\n ? youTubeEmbedUrl(youTubeId.value, {\n autoPlay: props.autoPlay,\n muted: props.muted,\n loop: props.loop,\n controls: props.controls,\n startSeconds: parseYouTubeStart(props.src)\n })\n : null\n);\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 || isYouTube.value) return;\n await safePlay();\n}\n\nasync function hoverStop() {\n if (!props.hoverPlay || isYouTube.value) 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 <iframe\n v-if=\"isYouTube\"\n class=\"gvp-video gvp-youtube\"\n :src=\"youTubeSrc ?? undefined\"\n title=\"YouTube video player\"\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n allowfullscreen\n referrerpolicy=\"strict-origin-when-cross-origin\"\n />\n <HLSPlayer\n v-else\n ref=\"hlsPlayerRef\"\n :controls=\"controls\"\n :hls-config=\"hlsConfig\"\n :is-hls=\"isHls\"\n :loop=\"loop\"\n :muted=\"muted\"\n :auto-play=\"autoPlay\"\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 v-if=\"!isYouTube\" 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=\"!isYouTube && !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 v-if=\"!isYouTube\" 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","parseYouTubeId","input","url","host","id","v","m","parseYouTubeStart","t","h","min","s","total","youTubeEmbedUrl","opts","autoPlay","muted","loop","controls","startSeconds","params","hlsPlayerRef","device","isPlaying","showTooltip","playPromise","youTubeId","computed","isYouTube","youTubeSrc","aspectRatio","_a","_b","frameMaxWidth","safePlay","p","safePause","hoverStart","hoverStop","togglePlay","onMouseEnter","onMouseLeave","_normalizeStyle","_createBlock","HLSPlayer","_cache","$event","_openBlock","_hoisted_2","_hoisted_3","_hoisted_4","_createVNode","IconDesktop","IconMobile","IconX","_hoisted_7","IconPlay","_hoisted_8","_toDisplayString","_hoisted_9"],"mappings":"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"}
|
package/dist/style.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* @glitchlab/vue-video-player styles
|
|
3
3
|
* Scoped under .gvp-root — no global resets, no theme tokens, safe for any host.
|
|
4
|
-
*/.gvp-root{position:relative;overflow:hidden;border-radius:1.5rem;background-color:#1717174d;box-shadow:0 25px 50px -12px #00000040;outline:1px solid rgb(255 255 255 / .1);outline-offset:-1px;margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box}.gvp-root *,.gvp-root *:before,.gvp-root *:after{box-sizing:border-box}.gvp-video{height:100%;width:100%;object-fit:cover;display:block}.gvp-vignette{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(to top right,#00000059,#0000,#00000059)}.gvp-bottom-fade{pointer-events:none;position:absolute;bottom:0;left:0;right:0;height:4rem;background-image:linear-gradient(to top,rgb(0 0 0 / .35),transparent)}.gvp-toggle{position:absolute;left:1rem;top:1rem}.gvp-toggle-pill{display:flex;align-items:center;overflow:hidden;border-radius:1rem;background-color:#fffffff2;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:1px solid rgb(0 0 0 / .05);outline-offset:-1px}.gvp-toggle-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:600;cursor:pointer;background:transparent;border:0;color:#737373;transition:color .15s ease;font-family:inherit}.gvp-toggle-btn:hover{color:#404040}.gvp-toggle-btn.is-active{color:#5b21b6}.gvp-toggle-divider{height:1.75rem;width:1px;background-color:#e5e5e5}.gvp-close{position:absolute;right:1rem;top:1rem;display:grid;place-items:center;height:2.5rem;width:2.5rem;border:0;border-radius:9999px;background-color:#00000059;color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;cursor:pointer;z-index:10;transition:background-color .15s ease}.gvp-close:hover{background-color:#00000080}.gvp-play-wrap{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center}.gvp-play{position:relative;display:grid;place-items:center;height:3.5rem;width:3.5rem;border:0;border-radius:9999px;cursor:pointer;outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;background-color:#5b21b680;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;transition:background-color .2s ease,opacity .2s ease;color:#fff}.gvp-play:hover{background-color:#5b21b6e6}.gvp-tooltip{position:absolute;top:-3rem;left:50%;transform:translate(-50%);white-space:nowrap;border-radius:.75rem;background-color:#000000b3;padding:.375rem .75rem;font-size:.75rem;line-height:1rem;color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:1px solid rgb(255 255 255 / .1);outline-offset:-1px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.gvp-icon{display:block}
|
|
4
|
+
*/.gvp-root{position:relative;overflow:hidden;border-radius:1.5rem;background-color:#1717174d;box-shadow:0 25px 50px -12px #00000040;outline:1px solid rgb(255 255 255 / .1);outline-offset:-1px;margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box}.gvp-root *,.gvp-root *:before,.gvp-root *:after{box-sizing:border-box}.gvp-video{height:100%;width:100%;object-fit:cover;display:block}.gvp-youtube{border:0;object-fit:contain}.gvp-vignette{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(to top right,#00000059,#0000,#00000059)}.gvp-bottom-fade{pointer-events:none;position:absolute;bottom:0;left:0;right:0;height:4rem;background-image:linear-gradient(to top,rgb(0 0 0 / .35),transparent)}.gvp-toggle{position:absolute;left:1rem;top:1rem}.gvp-toggle-pill{display:flex;align-items:center;overflow:hidden;border-radius:1rem;background-color:#fffffff2;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:1px solid rgb(0 0 0 / .05);outline-offset:-1px}.gvp-toggle-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:600;cursor:pointer;background:transparent;border:0;color:#737373;transition:color .15s ease;font-family:inherit}.gvp-toggle-btn:hover{color:#404040}.gvp-toggle-btn.is-active{color:#5b21b6}.gvp-toggle-divider{height:1.75rem;width:1px;background-color:#e5e5e5}.gvp-close{position:absolute;right:1rem;top:1rem;display:grid;place-items:center;height:2.5rem;width:2.5rem;border:0;border-radius:9999px;background-color:#00000059;color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;cursor:pointer;z-index:10;transition:background-color .15s ease}.gvp-close:hover{background-color:#00000080}.gvp-play-wrap{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center}.gvp-play{position:relative;display:grid;place-items:center;height:3.5rem;width:3.5rem;border:0;border-radius:9999px;cursor:pointer;outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;background-color:#5b21b680;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;transition:background-color .2s ease,opacity .2s ease;color:#fff}.gvp-play:hover{background-color:#5b21b6e6}.gvp-tooltip{position:absolute;top:-3rem;left:50%;transform:translate(-50%);white-space:nowrap;border-radius:.75rem;background-color:#000000b3;padding:.375rem .75rem;font-size:.75rem;line-height:1rem;color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:1px solid rgb(255 255 255 / .1);outline-offset:-1px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.gvp-icon{display:block}
|
package/dist/utils/types.d.ts
CHANGED
|
@@ -21,6 +21,12 @@ export interface VideoPlayerProps {
|
|
|
21
21
|
loop?: boolean;
|
|
22
22
|
/** Show native browser controls. Defaults to `false`. */
|
|
23
23
|
controls?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Start playback as soon as the source loads. Defaults to `false`.
|
|
26
|
+
* Browsers block sound-on autoplay, so this only autoplays when `muted`
|
|
27
|
+
* is also `true` (which is the default).
|
|
28
|
+
*/
|
|
29
|
+
autoPlay?: boolean;
|
|
24
30
|
/** Maximum width of the player in each device mode. */
|
|
25
31
|
frameMaxWidth?: {
|
|
26
32
|
desktop?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9C,MAAM,MAAM,WAAW,GAAG,GAAG,MAAM,IAAI,MAAM,EAAE,CAAC;AAEhD,MAAM,WAAW,gBAAgB;IAC/B,8EAA8E;IAC9E,GAAG,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,+EAA+E;IAC/E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oDAAoD;IACpD,aAAa,CAAC,EAAE,UAAU,CAAC;IAE3B,gFAAgF;IAChF,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,uDAAuD;IACvD,aAAa,CAAC,EAAE;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IAEF,wCAAwC;IACxC,WAAW,CAAC,EAAE;QACZ,OAAO,CAAC,EAAE,WAAW,CAAC;QACtB,MAAM,CAAC,EAAE,WAAW,CAAC;KACtB,CAAC;IAEF;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9C,MAAM,MAAM,WAAW,GAAG,GAAG,MAAM,IAAI,MAAM,EAAE,CAAC;AAEhD,MAAM,WAAW,gBAAgB;IAC/B,8EAA8E;IAC9E,GAAG,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,+EAA+E;IAC/E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oDAAoD;IACpD,aAAa,CAAC,EAAE,UAAU,CAAC;IAE3B,gFAAgF;IAChF,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,uDAAuD;IACvD,aAAa,CAAC,EAAE;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IAEF,wCAAwC;IACxC,WAAW,CAAC,EAAE;QACZ,OAAO,CAAC,EAAE,WAAW,CAAC;QACtB,MAAM,CAAC,EAAE,WAAW,CAAC;KACtB,CAAC;IAEF;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Extract a YouTube video ID from any common URL form, or `null` if the URL
|
|
3
|
+
* isn't a YouTube link.
|
|
4
|
+
*
|
|
5
|
+
* Recognised:
|
|
6
|
+
* - https://www.youtube.com/watch?v=ID
|
|
7
|
+
* - https://youtube.com/watch?v=ID&t=42
|
|
8
|
+
* - https://youtu.be/ID
|
|
9
|
+
* - https://youtu.be/ID?t=42
|
|
10
|
+
* - https://www.youtube.com/embed/ID
|
|
11
|
+
* - https://www.youtube.com/shorts/ID
|
|
12
|
+
* - https://music.youtube.com/watch?v=ID
|
|
13
|
+
* - bare 11-character video IDs
|
|
14
|
+
*/
|
|
15
|
+
export declare function parseYouTubeId(input: string): string | null;
|
|
16
|
+
/** Extract a `t`/`start` timestamp (in seconds) from a YouTube URL, if present. */
|
|
17
|
+
export declare function parseYouTubeStart(input: string): number | null;
|
|
18
|
+
export interface YouTubeEmbedOptions {
|
|
19
|
+
/** Start playback immediately. Forces `mute` on, since browsers block sound-on autoplay. */
|
|
20
|
+
autoPlay?: boolean;
|
|
21
|
+
/** Mute the player. */
|
|
22
|
+
muted?: boolean;
|
|
23
|
+
/** Loop the video. */
|
|
24
|
+
loop?: boolean;
|
|
25
|
+
/** Show YouTube's player controls. Defaults to `true`. */
|
|
26
|
+
controls?: boolean;
|
|
27
|
+
/** Start offset in seconds. */
|
|
28
|
+
startSeconds?: number | null;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Build a privacy-enhanced YouTube embed URL from a video ID and player options.
|
|
32
|
+
*
|
|
33
|
+
* Notes on YouTube's quirks:
|
|
34
|
+
* - `autoplay=1` only takes effect if `mute=1` is also set (browser policy).
|
|
35
|
+
* - single-video loop requires `loop=1` **and** `playlist=<id>`.
|
|
36
|
+
*/
|
|
37
|
+
export declare function youTubeEmbedUrl(id: string, opts?: YouTubeEmbedOptions): string;
|
|
38
|
+
//# sourceMappingURL=youtube.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"youtube.d.ts","sourceRoot":"","sources":["../../src/utils/youtube.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAmC3D;AAED,mFAAmF;AACnF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkB9D;AAED,MAAM,WAAW,mBAAmB;IAClC,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,EAAE,EAAE,MAAM,EACV,IAAI,GAAE,mBAAwB,GAC7B,MAAM,CAiCR"}
|
package/package.json
CHANGED