@grfzhl/vue-hls-player 1.1.14 → 1.1.17
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
CHANGED
|
@@ -207,10 +207,16 @@ At the moment the following attribute are supported:
|
|
|
207
207
|
```
|
|
208
208
|
|
|
209
209
|
### Last release:
|
|
210
|
-
v1.
|
|
211
|
-
-
|
|
210
|
+
v1.1.17
|
|
211
|
+
- Keep query params for transcription when getting from .vtt file to .txt
|
|
212
|
+
v1.1.16
|
|
213
|
+
- Add the options prop to both index.vue and VpDefaultVideoPlayer.vue to pass fullscreen label settings to the BasePlayer component.
|
|
214
|
+
- Update fullscreen toggle logic: adjust aria-label, add or remove mediaIsFullscreen attribute, and safely access media-tooltip via shadowRoot to ensure proper icon and tooltip state handling.
|
|
215
|
+
v1.1.13 - v1.1.15
|
|
216
|
+
- Update the hls.js package
|
|
217
|
+
- Fixes
|
|
212
218
|
|
|
213
|
-
v1.
|
|
219
|
+
v1.1.12
|
|
214
220
|
- added component property to make it easier adding headers (like Authorization header into every hls request)
|
|
215
221
|
|
|
216
222
|
v1.0.14 - v1.1.11
|
|
@@ -239,8 +239,8 @@ async function startFullscreen() {
|
|
|
239
239
|
}
|
|
240
240
|
isFullscreen.value = false;
|
|
241
241
|
buttonElement.setAttribute('aria-label', "Enter fullscreen mode")
|
|
242
|
-
|
|
243
|
-
|
|
242
|
+
buttonElement.removeAttribute('mediaIsFullscreen');
|
|
243
|
+
const tooltip = buttonElement.shadowRoot?.querySelector('media-tooltip');
|
|
244
244
|
if (tooltip) {
|
|
245
245
|
console.log("Tooltip gefunden:", tooltip);
|
|
246
246
|
|
|
@@ -261,9 +261,8 @@ async function startFullscreen() {
|
|
|
261
261
|
isFullscreen.value = true;
|
|
262
262
|
try {
|
|
263
263
|
buttonElement.setAttribute('aria-label', "Exit fullscreen mode")
|
|
264
|
-
|
|
265
|
-
const tooltip = buttonElement.querySelector('media-tooltip');
|
|
266
|
-
|
|
264
|
+
buttonElement.setAttribute('mediaIsFullscreen', '');
|
|
265
|
+
const tooltip = buttonElement.shadowRoot?.querySelector('media-tooltip');
|
|
267
266
|
if (tooltip) {
|
|
268
267
|
console.log("Tooltip gefunden:", tooltip);
|
|
269
268
|
|
|
@@ -387,16 +386,8 @@ function prepareVideoPlayer(link) {
|
|
|
387
386
|
hls.destroy();
|
|
388
387
|
initiallyLoaded = false;
|
|
389
388
|
}
|
|
390
|
-
hls = new Hls(
|
|
391
|
-
|
|
392
|
-
hls.attachMedia(video.value)
|
|
393
|
-
hls.recoverMediaError()
|
|
394
|
-
|
|
395
|
-
if(props.additionHeaders) {
|
|
396
|
-
/**
|
|
397
|
-
* inject additional headers
|
|
398
|
-
*/
|
|
399
|
-
hls.config.fetchSetup = async (context, init) => {
|
|
389
|
+
hls = new Hls({
|
|
390
|
+
fetchSetup: async (context, init) => {
|
|
400
391
|
init = init || {};
|
|
401
392
|
init.headers = new Headers(init.headers || {});
|
|
402
393
|
// set headers
|
|
@@ -404,8 +395,19 @@ function prepareVideoPlayer(link) {
|
|
|
404
395
|
init.headers.set(key, value);
|
|
405
396
|
}
|
|
406
397
|
return new Request(context.url, init);
|
|
407
|
-
}
|
|
408
|
-
|
|
398
|
+
},
|
|
399
|
+
xhrSetup: async (xhr, url) => {
|
|
400
|
+
const additionHeaders = props.additionHeaders || {};
|
|
401
|
+
for (const [key, value] of Object.entries(additionHeaders)) {
|
|
402
|
+
const val = typeof value === 'function' ? await value(url) : value;
|
|
403
|
+
// set headers
|
|
404
|
+
if (val != null) xhr.setRequestHeader(key, val);
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
});
|
|
408
|
+
hls.loadSource(link)
|
|
409
|
+
hls.attachMedia(video.value)
|
|
410
|
+
hls.recoverMediaError()
|
|
409
411
|
|
|
410
412
|
video.value.muted = props.isMuted
|
|
411
413
|
video.value.currentTime = props.progress
|
|
@@ -143,7 +143,7 @@ const videoCursor = ref(0);
|
|
|
143
143
|
const loadCues = async () => {
|
|
144
144
|
if (props.subtitle) {
|
|
145
145
|
const vttPath = props.subtitle.link;
|
|
146
|
-
const txtPath = vttPath.replace(/\.vtt
|
|
146
|
+
const txtPath = vttPath.replace(/\.vtt(?=\?|$)/, '.txt');
|
|
147
147
|
vttCues.value = await parseVTT(vttPath);
|
|
148
148
|
txtCues.value = await parseTXT(txtPath);
|
|
149
149
|
}
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
v-model="videoElement"
|
|
17
17
|
ref="childRef"
|
|
18
18
|
:hideInitialPlayButton="hideInitialPlayButton"
|
|
19
|
+
:options = options
|
|
19
20
|
>
|
|
20
21
|
<template v-slot:before-media><slot name="before-media"></slot></template>
|
|
21
22
|
<template v-slot:after-media><slot name="after-media"></slot></template>
|