@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.0.13 - v1.0.14
211
- - update the hls.js package
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.0.12
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
- const tooltip = buttonElement.querySelector('media-tooltip');
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
- hls.loadSource(link)
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$/, '.txt');
146
+ const txtPath = vttPath.replace(/\.vtt(?=\?|$)/, '.txt');
147
147
  vttCues.value = await parseVTT(vttPath);
148
148
  txtCues.value = await parseTXT(txtPath);
149
149
  }
@@ -1,5 +1,6 @@
1
1
  <template>
2
2
  <BasePlayer
3
+ :options="options"
3
4
  :introTitle="introTitle"
4
5
  :previewImageLink="previewImageLink"
5
6
  :link="link"
@@ -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>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@grfzhl/vue-hls-player",
3
3
  "private": false,
4
- "version": "1.1.14",
4
+ "version": "1.1.17",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "dist"