@italia/video 1.0.0-alpha.5 → 1.0.0-alpha.6

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.
@@ -327,7 +327,7 @@
327
327
  {
328
328
  "kind": "variable",
329
329
  "name": "meta",
330
- "default": "{ title: 'Componenti/Video', tags: ['a11y-ok', 'web-component'], component: 'it-video', args: { src: 'https://vjs.zencdn.net/v/oceans.webm', poster: '', type: 'video/mp4', options: undefined, track: [], consentOptions: {}, lang: 'it', translations: { it: itLang as any }, initPlugins: '', }, argTypes: { src: { control: 'text', description: 'Sorgente del video' }, poster: { control: 'text', description: \"Sorgente dell'immagine di anteprima\" }, type: { control: 'text', description: 'Tipo del video.', table: { defaultValue: { summary: 'video/mp4' } } }, options: { control: 'object', description: 'Opzioni per il video player. https://videojs.com/guides/options/ qui tutte le opzioni disponibili.', }, track: { control: 'text', table: { defaultValue: { summary: '[{kind:\"chapter\", src: \"/path/file.ext\", srclang:\"it\", label: \"Capitoli\", default: true }]', }, }, description: 'Tracce per didascalie, sottotitoli, capitoli e descrizioni. Nel campo `kind` è necessario indicare la tipologia di traccia fra <ul><li>captions</li><li>subtitles</li><li>description</li><li>chapters</li><li>metadata</li></ul>', }, consentOptions: { name: 'consent-options', control: 'object', description: 'Oggetto per la configurazione del consenso dei cookie. <br/>Di default viene salvata una variabile nel localstorage con lo stesso nome del type del video, ma è possibile personalizzarla passando in `consentOptions` un valore per `consentKey`. <br/>Inoltre, quando viene dato il consenso permanente per i cookie, è possibile personalizzare il comportamento passando in questo oggetto due funzioni specifiche per la gestione della memorizzazione del consenso: `onAccept` e `isAccepted`.', table: { defaultValue: { summary: '{}', }, }, }, lang: { control: 'select', options: ['it', 'en', 'fr', 'de', 'es'], description: \"Lingua del player di cui verrano usate le corrispondenti 'translations'\", table: { defaultValue: { summary: 'it' } }, }, translations: { control: 'object', description: 'Traduzioni del player per le diverse lingue. Di base è disponibile solo la lingua it. Usare questa prop per aggiungere le traduzioni in altre lingue. ', }, initPlugins: { name: 'init-plugins', control: 'text', description: 'Nome della propria funzione presente nella window che verrà invocata da video.js per inizializzare eventuali plugin aggiuntivi definiti dallo sviluppatore.', }, }, decorators: [(Story) => html`<div class=\"sbdocs-video-container\">${Story()}</div>`], } satisfies Meta<VideoProps>"
330
+ "default": "{ title: 'Componenti/Video player', tags: ['a11y-ok', 'web-component'], component: 'it-video', args: { src: 'https://vjs.zencdn.net/v/oceans.webm', poster: '', type: 'video/mp4', options: undefined, track: [], consentOptions: {}, lang: 'it', translations: { it: itLang as any }, initPlugins: '', }, argTypes: { src: { control: 'text', description: 'Sorgente del video' }, poster: { control: 'text', description: \"Sorgente dell'immagine di anteprima\" }, type: { control: 'text', description: 'Tipo del video.', table: { defaultValue: { summary: 'video/mp4' } } }, options: { control: 'object', description: 'Opzioni per il video player. https://videojs.com/guides/options/ qui tutte le opzioni disponibili.', }, track: { control: 'text', table: { defaultValue: { summary: '[{kind:\"chapter\", src: \"/path/file.ext\", srclang:\"it\", label: \"Capitoli\", default: true }]', }, }, description: 'Tracce per didascalie, sottotitoli, capitoli e descrizioni. Nel campo `kind`, indica la tipologia di traccia fra <ul><li>captions</li><li>subtitles</li><li>description</li><li>chapters</li><li>metadata</li></ul>', }, consentOptions: { name: 'consent-options', control: 'object', description: 'Oggetto per la configurazione del consenso dei cookie. <br/>Di default viene salvata una variabile nel localstorage con lo stesso nome del type del video, ma puoi personalizzarla passando in `consentOptions` un valore per `consentKey`. <br/>Inoltre, quando viene dato il consenso permanente per i cookie, puoi personalizzare il comportamento passando in questo oggetto due funzioni specifiche per la gestione della memorizzazione del consenso: `onAccept` e `isAccepted`.', table: { defaultValue: { summary: '{}', }, }, }, lang: { control: 'select', options: ['it', 'en', 'fr', 'de', 'es'], description: \"Lingua del player di cui verrano usate le corrispondenti 'translations'\", table: { defaultValue: { summary: 'it' } }, }, translations: { control: 'object', description: 'Traduzioni del player per le diverse lingue. Di base è disponibile solo la lingua italiana. Usa questa prop per aggiungere le traduzioni in altre lingue. ', }, initPlugins: { name: 'init-plugins', control: 'text', description: 'Nome della propria funzione presente nella window che verrà invocata da video.js per inizializzare eventuali plug-in aggiuntivi definiti dallo sviluppatore.', }, }, parameters: { pageLayout: 'w-100', }, } satisfies Meta<VideoProps>"
331
331
  },
332
332
  {
333
333
  "kind": "variable",
@@ -335,7 +335,7 @@
335
335
  "type": {
336
336
  "text": "Story"
337
337
  },
338
- "default": "{ ...meta, name: 'Esempio interattivo', tags: ['!dev'], parameters: { docs: { source: { excludeDecorators: true }, canvas: { sourceState: 'closed', }, }, }, render: (params) => html` ${renderComponent({ ...params, })}`, }"
338
+ "default": "{ ...meta, name: 'Esempio interattivo', tags: ['!dev'], parameters: { docs: { canvas: { sourceState: 'closed', }, }, }, render: (params) => html` ${renderComponent({ ...params, })}`, }"
339
339
  },
340
340
  {
341
341
  "kind": "variable",
@@ -359,7 +359,7 @@
359
359
  "type": {
360
360
  "text": "Story"
361
361
  },
362
- "default": "{ ...meta, name: 'Immagine di anteprima', parameters: { docs: { description: { story: ` Per aggiungere un’immagine di anteprima come copertina al video, utilizza l’attributo \\`poster\\` inizializzato con la url dell’anteprima. <div class=\"callout callout-warning\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Attenzione</span></div> <p>Le immagini caricate come copertina devono rispettare la stessa \\`aspect ratio\\` del video per una corretta visualizzazione. </p></div></div> `, }, }, }, render: (params) => html`${renderComponent({ ...params, src: './assets/video/ElephantsDream.mp4', poster: './assets/video/ElephantsDream.mp4-poster21.jpg', translations: undefined, })}`, }"
362
+ "default": "{ ...meta, name: 'Immagine di anteprima', parameters: { docs: { description: { story: ` Per aggiungere un’immagine di anteprima come copertina al video, usa l’attributo \\`poster\\` inizializzato con l'url dell’anteprima. <div class=\"callout callout-warning\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Attenzione</span></div> <p>Le immagini caricate come copertina devono rispettare la stessa \\`aspect ratio\\` del video per una corretta visualizzazione. </p></div></div> `, }, }, }, render: (params) => html`${renderComponent({ ...params, src: './assets/video/ElephantsDream.mp4', poster: './assets/video/ElephantsDream.mp4-poster21.jpg', translations: undefined, })}`, }"
363
363
  },
364
364
  {
365
365
  "kind": "variable",
@@ -367,7 +367,7 @@
367
367
  "type": {
368
368
  "text": "Story"
369
369
  },
370
- "default": "{ ...meta, // name: 'Streaming', parameters: { docs: { description: { story: ` Servire i video tramite dei file in formato mp4 o webm (che sono i formati più supportati) non è la migliore soluzione in termini di performance e di ottimizzazione della banda. Per garantire una buona esperienza utente è fondamentale scegliere il formato di riproduzione più adatto. In questo contesto, i formati di streaming HLS e DASH offrono importanti vantaggi rispetto al tradizionale file MP4. L’uso dei formati di streaming permette una riproduzione fluida dei video online grazie alla loro capacità di adattarsi alla larghezza di banda disponibile. In questo modo si evitano interruzioni o rallentamenti durante la visualizzazione, migliorando l’esperienza utente. Inoltre, questi formati consentono di distribuire il contenuto su diverse piattaforme e dispositivi, aumentando la portabilità del video. <div class=\"callout callout-info\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Suggerimento</span></div><p>FFmpeg è uno strumento di conversione multimediale open-source che consente di convertire facilmente i file MP4 in formati adattivi come HLS o DASH, ti permette la conversione del video MP4 in un formato a bitrate variabile per adattare la qualità del video alle diverse velocità di connessione degli utenti. Approfondisci su <a href=\"https://ffmpeg.org/\">FFmpeg</a>.</p></div></div> Le playlist HLS e DASH possono essere riprodotte su più domini condividendo solo l’URL. Tuttavia, a causa delle restrizioni imposte dalle politiche di sicurezza del browser, l’utilizzo di queste playlist in domini diversi da quello originale può causare errori CORS (Cross-Origin Resource Sharing). In altre parole, il browser può rifiutare l’accesso alle risorse audio e video, impedendo la corretta riproduzione del contenuto multimediale. Per superare questo problema, è necessario configurare correttamente il server che fornisce le risorse audio e video, consentendo l’accesso a domini esterni tramite le policy CORS. Di seguito un esempio in formato MPEG-DASH: `, }, }, }, render: (params) => html`${renderComponent({ ...params, src: './assets/video/ElephantsDreamDASH/ElephantsDream.mp4.mpd', type: 'application/dash+xml', poster: './assets/video/ElephantsDream.mp4-poster16.gif', track: [ { kind: 'captions', src: './assets/video/subtitles-it.vtt', srclang: 'it', label: 'Italiano', default: true }, { kind: 'captions', src: './assets/video/subtitles-en.vtt', srclang: 'en', label: 'English' }, { kind: 'captions', src: './assets/video/subtitles-es.vtt', srclang: 'es', label: 'Español' }, { kind: 'chapters', src: './assets/video/chapters-it.vtt', srclang: 'it', label: 'Italiano' }, { kind: 'chapters', src: './assets/video/chapters-en.vtt', srclang: 'en', label: 'English' }, { kind: 'chapters', src: './assets/video/chapters-es.vtt', srclang: 'es', label: 'Español' }, ], translations: undefined, })}`, }"
370
+ "default": "{ ...meta, // name: 'Streaming', parameters: { docs: { description: { story: ` Per garantire una buona esperienza utente è fondamentale scegliere il formato di riproduzione più adatto. I formati video MP4 o WEBM, pur essendo i più supportati, non sono la soluzione migliore in termini di performance e ottimizzazione della banda. I formati di streaming HLS e DASH, invece, si adattano alla larghezza di banda disponibile, evitando così interruzioni o rallentamenti durante la visualizzazione, e consentono di distribuire il contenuto su diverse piattaforme e dispositivi, aumentando la portabilità del video. <div class=\"callout callout-info\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Suggerimento</span></div><p>FFmpeg è uno strumento di conversione multimediale open-source che ti consente di convertire facilmente i file MP4 in formati adattivi come HLS o DASH a bitrate variabile per adattare la qualità del video alle diverse velocità di connessione degli utenti. Approfondisci sul <a href=\"https://ffmpeg.org/\">sito di FFmpeg</a>.</p></div></div> Le playlist HLS e DASH possono essere riprodotte su più domini condividendo solo l’URL. Tuttavia, a causa delle restrizioni imposte dalle politiche di sicurezza del browser, l’utilizzo di queste playlist in domini diversi da quello originale può causare errori CORS (Cross-Origin Resource Sharing): il browser può rifiutare l’accesso alle risorse audio e video, impedendo la corretta riproduzione del contenuto multimediale. Per superare questo problema, configura correttamente il server che fornisce le risorse audio e video, consentendo l’accesso a domini esterni tramite le policy CORS. Di seguito un esempio in formato MPEG-DASH: `, }, }, }, render: (params) => html`${renderComponent({ ...params, src: './assets/video/ElephantsDreamDASH/ElephantsDream.mp4.mpd', type: 'application/dash+xml', poster: './assets/video/ElephantsDream.mp4-poster16.gif', track: [ { kind: 'captions', src: './assets/video/subtitles-it.vtt', srclang: 'it', label: 'Italiano', default: true }, { kind: 'captions', src: './assets/video/subtitles-en.vtt', srclang: 'en', label: 'English' }, { kind: 'captions', src: './assets/video/subtitles-es.vtt', srclang: 'es', label: 'Español' }, { kind: 'chapters', src: './assets/video/chapters-it.vtt', srclang: 'it', label: 'Italiano' }, { kind: 'chapters', src: './assets/video/chapters-en.vtt', srclang: 'en', label: 'English' }, { kind: 'chapters', src: './assets/video/chapters-es.vtt', srclang: 'es', label: 'Español' }, ], translations: undefined, })}`, }"
371
371
  },
372
372
  {
373
373
  "kind": "variable",
@@ -375,7 +375,7 @@
375
375
  "type": {
376
376
  "text": "Story"
377
377
  },
378
- "default": "{ ...meta, name: 'Gestire più tracce audio', parameters: { docs: { description: { story: ` L’uso di più tracce audio nei video è una buona tecnica per migliorare laccessibilità dei contenuti multimediali. Ad esempio, è possibile creare una traccia audio aggiuntiva che descrive in dettaglio le immagini e le azioni che si svolgono nel video, per aiutare le persone non vedenti a comprendere il contenuto visivo. Inoltre, l’aggiunta di tracce audio in lingue diverse consente di offrire il video in più lingue. <div class=\"callout callout-info\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Tieni presente che</span></div> <p>Video.js offre un’implementazione cross-browser delle tracce audio, a condizione che la tecnologia di riproduzione supporti le tracce audio. Le tracce audio per i file mp4 sono supportate solo da Safari, altri browser non supportano la riproduzione mp4 con più tracce audio. L’unico modo per fornire l’audio multi-traccia cross-browser è l’uso dei formati HLS e/o DASH. Approfondisci su <a href=\"https://videojs.com/guides/audio-tracks/\">Video.js</a></p> </div></div> Per vedere tutte le opzioni disponibili, consultare la documentazione di [VideoJS](https://videojs.com/guides/options/). Di seguito un esempio in formato HLS multilingua. `, }, }, }, render: (params) => html`${renderComponent({ ...params, src: './assets/video/ElephantsDreamHLS/ElephantsDream.mp4.m3u8', type: 'application/x-mpegURL', poster: './assets/video/ElephantsDream.mp4-poster21.jpg', translations: undefined, })}`, }"
378
+ "default": "{ ...meta, name: 'Gestire più tracce audio', parameters: { docs: { description: { story: ` Usare più tracce audio in un video può migliorare l'accessibilità del contenuto, ad esempio aggiungendo tracce audio descrittive per le persone non vedenti o tracce audio in lingue diverse. <div class=\"callout callout-info\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Formati supportati</span></div> <p>Video.js offre un’implementazione cross-browser delle tracce audio, a condizione che la tecnologia di riproduzione le supporti. Poiché la riproduzione multi-traccia in formato MP4 è supportata solo da Safari, l'uso dei formati HLS e/o DASH è l'unica soluzione per offrire audio multi-traccia cross-browser. <a href=\"https://videojs.com/guides/audio-tracks/\">Approfondisci la guida di Video.js sulle tracce audio</a></p> </div></div> Per tutte le opzioni disponibili, [consulta la documentazione di VideoJS](https://videojs.com/guides/options/) Di seguito un esempio in formato HLS multilingua: `, }, }, }, render: (params) => html`${renderComponent({ ...params, src: './assets/video/ElephantsDreamHLS/ElephantsDream.mp4.m3u8', type: 'application/x-mpegURL', poster: './assets/video/ElephantsDream.mp4-poster21.jpg', translations: undefined, })}`, }"
379
379
  },
380
380
  {
381
381
  "kind": "variable",
@@ -383,7 +383,7 @@
383
383
  "type": {
384
384
  "text": "Story"
385
385
  },
386
- "default": "{ ...meta, name: 'Embed da piattaforme terze', parameters: { docs: { description: { story: ` Oltre a consentire la riproduzione di video direttamente sulle proprie pagine web, il player video.js offre anche la possibilità di incorporare video provenienti da altre piattaforme come YouTube. Questa funzionalità consente di sfruttare i video già disponibili su queste piattaforme, senza doverli caricare sul proprio sito web. Tuttavia, è importante tenere in considerazione la questione della privacy: quando si incorporano video di terze parti, si può finire per condividere con queste piattaforme i dati degli utenti che visualizzano i video, come ad esempio le informazioni sulla navigazione o l’indirizzo IP. È quindi importante l’utilizzo di questa funzionalità assieme al componente di accettazione del consenso per garantire la protezione della privacy degli utenti. <div class=\"callout callout-warning\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Nota</span></div> <p>Gli esempi che seguono fanno tutti riferimento alla piattaforma di terze parti YouTube.</p> </div></div> <div class=\"callout callout-info\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Responsabilità della privacy</span></div> <p>Coinvolgi il Responsabile per la protezione dei dati (RDP/DPO) della tua amministrazione e ricordati di aggiornare la cookie policy del sito. Designers Italia mette a disposizione il [kit Privacy](https://designers.italia.it/risorse-per-progettare/organizzare/privacy/) per approfondire questi temi e in particolare uno strumento dedicato alla redazione della Cookie policy che trovi in [questa azione del kit](https://designers.italia.it/risorse-per-progettare/organizzare/privacy/rispetta-la-privacy-per-il-go-live-di-un-sito/).</p> </div></div> ### Attivazione dell’overlay di consenso L’utilizzo di un overlay per il consenso è una soluzione comune per garantire la conformità alla normativa sulla privacy in materia di cookie e tracciamento degli utenti. L’overlay per il consenso consente di informare l’utente sui cookie utilizzati e di ottenere il suo consenso in modo esplicito e consapevole alla riproduzione del video prima dell’installazione di qualunque cookie. <div class=\"callout callout-info\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Obblighi</span></div> <p>Per questo la Pubblica Amministrazione che fa uso di servizi di terze parti come YouTube deve necessariamente specificare l’utilizzo di cookie di tracciamento da parte di piattaforme di terze parti, inserendo inoltre il link alla propria cookie policy all’interno dell’overlay (dove adesso c’è il link a ‘#’). Nella sezione seguente vengono illustrate le funzioni per la gestione delle preferenze con JavaScript.</p> </div></div> L'overlay di consenso viene automaticamente istanziato dal componente se si tratta di un video Youtube. Per personalizzare il comportamento sulle scelte effettuate nell'overlay di consenso, è possibile passare al componente \\`<it-video>\\` l'attributo \\`consentOptions\\` con il seguente formato: \\`\\`\\`js consentOptions = { consentKey?: string; //nome della variabile da usare nel localStorage per il salvataggio della preferenza sul consenso. Di default è 'youtube' per i video di Youtube. onAccept?: Function; //(accepted, consentKey)=>{} - funzione che viene invocata quando si accetta il consenso permanente per un video di questa tipologia. Se presente, non viene gestita la preferenza nel localstorage, ma è compito dello sviluppatore implementare la logica di salvataggio delle preferenze isAccepted?: Function; // (consentKey)=>{} - funzione che ritorna un valore booleano (true/false), che indica se l'utente ha gia accettato il consenso permanente per tutti i video di quel tipo. }; \\`\\`\\` Di default sono gia previsti testi e icona, ma è possibile (ed è suggerito) modificare il testo con il link alla pagina della privacy policy. I testi e l'icona sono modificabili attraverso il sistema di traduzioni. Vedi la guida dedicata. `, }, }, }, render: (params) => html`${renderComponent({ ...params, src: 'https://youtu.be/_0j7ZQ67KtY', type: undefined, // translations: undefined, })}`, }"
386
+ "default": "{ ...meta, name: 'Embed da piattaforme terze', parameters: { docs: { description: { story: ` Il player Video.js permette anche di incorporare video provenienti da altre piattaforme come YouTube, senza doverli caricare sul proprio sito web. Quando si incorporano video di terze parti, alcune informazioni degli utenti (come dati di navigazione o indirizzo IP) possono essere condivise con le piattaforme terze. Per garantire la conformità ai requisiti di privacy, usa questa funzionalità insieme all'overlay di accettazione del consenso. <div class=\"callout callout-warning\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Nota</span></div> <p>Gli esempi che seguono fanno tutti riferimento alla piattaforma di terze parti YouTube.</p> </div></div> <div class=\"callout callout-info\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Responsabilità della privacy</span></div> <p>Coinvolgi il Responsabile per la protezione dei dati (RDP/DPO) della tua amministrazione e ricordati di aggiornare la cookie policy del sito. Puoi usare il [kit Privacy](https://designers.italia.it/risorse-per-progettare/organizzare/privacy/) di Designers Italia per approfondire questi temi e [redarre la cookie policy](https://designers.italia.it/risorse-per-progettare/organizzare/privacy/rispetta-la-privacy-per-il-go-live-di-un-sito/).</p> </div></div> ### Attivazione dell’overlay di consenso L’utilizzo di un overlay per il consenso è una soluzione comune per garantire la conformità alla normativa sulla privacy in materia di cookie e tracciamento degli utenti. L’overlay per il consenso consente di informare l’utente sui cookie utilizzati e di ottenere il suo consenso in modo esplicito e consapevole alla riproduzione del video prima dell’installazione di qualunque cookie. <div class=\"callout callout-info\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Obblighi</span></div> <p>Per questo la Pubblica Amministrazione che fa uso di servizi di terze parti come YouTube deve necessariamente specificare l’utilizzo di cookie di tracciamento da parte di piattaforme di terze parti, inserendo inoltre il link alla propria cookie policy all’interno dell’overlay (dove adesso c’è il link a ‘#’). Nella sezione seguente vengono illustrate le funzioni per la gestione delle preferenze con JavaScript.</p> </div></div> L'overlay di consenso viene automaticamente istanziato dal componente se si tratta di un video Youtube. Per personalizzare il comportamento sulle scelte effettuate nell'overlay di consenso, è possibile passare al componente \\`<it-video>\\` l'attributo \\`consentOptions\\` con il seguente formato: \\`\\`\\`js consentOptions = { consentKey?: string; //nome della variabile da usare nel localStorage per il salvataggio della preferenza sul consenso. Di default è 'youtube' per i video di Youtube. onAccept?: Function; //(accepted, consentKey)=>{} - funzione che viene invocata quando si accetta il consenso permanente per un video di questa tipologia. Se presente, non viene gestita la preferenza nel localstorage, ma è compito dello sviluppatore implementare la logica di salvataggio delle preferenze isAccepted?: Function; // (consentKey)=>{} - funzione che ritorna un valore booleano (true/false), che indica se l'utente ha gia accettato il consenso permanente per tutti i video di quel tipo. }; \\`\\`\\` Di default sono gia previsti testi e icona, ma è possibile (ed è suggerito) modificare il testo con il link alla pagina della privacy policy. I testi e l'icona sono modificabili attraverso il sistema di traduzioni. Vedi la guida dedicata. `, }, }, }, render: (params) => html`${renderComponent({ ...params, src: 'https://youtu.be/_0j7ZQ67KtY', type: undefined, // translations: undefined, })}`, }"
387
387
  },
388
388
  {
389
389
  "kind": "variable",
@@ -14763,8 +14763,8 @@ var clockExports = requireClock();
14763
14763
 
14764
14764
  /**
14765
14765
  * @license
14766
- * Video.js 8.23.4 <http://videojs.com/>
14767
- * Copyright Brightcove, Inc. <https://www.brightcove.com/>
14766
+ * Video.js 8.23.7 <http://videojs.com/>
14767
+ * Copyright 2010-present Video.js contributors
14768
14768
  * Available under Apache License Version 2.0
14769
14769
  * <https://github.com/videojs/video.js/blob/main/LICENSE>
14770
14770
  *
@@ -14774,7 +14774,7 @@ var clockExports = requireClock();
14774
14774
  */
14775
14775
 
14776
14776
 
14777
- var version$6 = "8.23.4";
14777
+ var version$6 = "8.23.7";
14778
14778
 
14779
14779
  /**
14780
14780
  * An Object that contains lifecycle hooks as keys which point to an array
@@ -21323,23 +21323,20 @@ class TrackList extends EventTarget$2 {
21323
21323
  constructor(tracks = []) {
21324
21324
  super();
21325
21325
  this.tracks_ = [];
21326
-
21327
- /**
21328
- * @memberof TrackList
21329
- * @member {number} length
21330
- * The current number of `Track`s in the this Trackist.
21331
- * @instance
21332
- */
21333
- Object.defineProperty(this, 'length', {
21334
- get() {
21335
- return this.tracks_.length;
21336
- }
21337
- });
21338
21326
  for (let i = 0; i < tracks.length; i++) {
21339
21327
  this.addTrack(tracks[i]);
21340
21328
  }
21341
21329
  }
21342
21330
 
21331
+ /**
21332
+ * The current number of `Track`s in this TrackList.
21333
+ *
21334
+ * @type {number}
21335
+ */
21336
+ get length() {
21337
+ return this.tracks_.length;
21338
+ }
21339
+
21343
21340
  /**
21344
21341
  * Add a {@link Track} to the `TrackList`
21345
21342
  *
@@ -21379,10 +21376,10 @@ class TrackList extends EventTarget$2 {
21379
21376
  /**
21380
21377
  * Triggered when a track label is changed.
21381
21378
  *
21382
- * @event TrackList#addtrack
21379
+ * @event TrackList#labelchange
21383
21380
  * @type {Event}
21384
21381
  * @property {Track} track
21385
- * A reference to track that was added.
21382
+ * A reference to track whose label was changed.
21386
21383
  */
21387
21384
  track.labelchange_ = () => {
21388
21385
  this.trigger({
@@ -26188,7 +26185,7 @@ class TextTrackDisplay extends Component$1 {
26188
26185
  }
26189
26186
  this.updateForTrack(descriptionsTrack);
26190
26187
  }
26191
- if (!window$1.CSS.supports('inset', '10px')) {
26188
+ if (!(window$1.CSS !== undefined && window$1.CSS.supports('inset', '10px'))) {
26192
26189
  const textTrackDisplay = this.el_;
26193
26190
  const vjsTextTrackCues = textTrackDisplay.querySelectorAll('.vjs-text-track-cue');
26194
26191
  const controlBarHeight = this.player_.controlBar.el_.getBoundingClientRect().height;
@@ -26236,7 +26233,7 @@ class TextTrackDisplay extends Component$1 {
26236
26233
  updateDisplayOverlay() {
26237
26234
  // inset-inline and inset-block are not supprted on old chrome, but these are
26238
26235
  // only likely to be used on TV devices
26239
- if (!this.player_.videoHeight() || !window$1.CSS.supports('inset-inline: 10px')) {
26236
+ if (!this.player_.videoHeight() || !(window$1.CSS !== undefined && window$1.CSS.supports('inset-inline: 10px'))) {
26240
26237
  return;
26241
26238
  }
26242
26239
  const playerWidth = this.player_.currentWidth();
@@ -27029,7 +27026,7 @@ class CurrentTimeDisplay extends TimeDisplay {
27029
27026
  let time;
27030
27027
  if (this.player_.ended()) {
27031
27028
  time = this.player_.duration();
27032
- } else if (event && event.target && typeof event.target.pendingSeekTime === 'function') {
27029
+ } else if (event && event.target && typeof event.target.pendingSeekTime === 'function' && event.target.pendingSeekTime() !== null) {
27033
27030
  time = event.target.pendingSeekTime();
27034
27031
  } else {
27035
27032
  time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
@@ -30700,9 +30697,12 @@ class MenuButton extends Component$1 {
30700
30697
  *
30701
30698
  * @param {string} name
30702
30699
  * The icon name to be added.
30700
+ *
30701
+ * @return {Element}
30702
+ * The element that gets created.
30703
30703
  */
30704
30704
  setIcon(name) {
30705
- super.setIcon(name, this.menuButton_.el_);
30705
+ return super.setIcon(name, this.menuButton_.el_);
30706
30706
  }
30707
30707
 
30708
30708
  /**
@@ -42986,7 +42986,7 @@ videojs.registerPlugin('qualityLevels', qualityLevels);
42986
42986
  // Include the version number.
42987
42987
  qualityLevels.VERSION = version$5;
42988
42988
 
42989
- /*! @name @videojs/http-streaming @version 3.17.2 @license Apache-2.0 */
42989
+ /*! @name @videojs/http-streaming @version 3.17.3 @license Apache-2.0 */
42990
42990
 
42991
42991
  /**
42992
42992
  * @file resolve-url.js - Handling how URLs are resolved and manipulated
@@ -47405,7 +47405,7 @@ const getWorkerString = function (fn) {
47405
47405
  return fn.toString().replace(/^function.+?{/, '').slice(0, -1);
47406
47406
  };
47407
47407
 
47408
- /* rollup-plugin-worker-factory start for worker!/home/runner/work/http-streaming/http-streaming/src/transmuxer-worker.js */
47408
+ /* rollup-plugin-worker-factory start for worker!/Users/srimron-soutter/repos/github/vjs/http-streaming/src/transmuxer-worker.js */
47409
47409
  const workerCode$1 = transform(getWorkerString(function () {
47410
47410
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
47411
47411
  /**
@@ -56106,7 +56106,7 @@ const workerCode$1 = transform(getWorkerString(function () {
56106
56106
  };
56107
56107
  }));
56108
56108
  var TransmuxWorker = factory(workerCode$1);
56109
- /* rollup-plugin-worker-factory end for worker!/home/runner/work/http-streaming/http-streaming/src/transmuxer-worker.js */
56109
+ /* rollup-plugin-worker-factory end for worker!/Users/srimron-soutter/repos/github/vjs/http-streaming/src/transmuxer-worker.js */
56110
56110
 
56111
56111
  const handleData_ = (event, transmuxedData, callback) => {
56112
56112
  const {
@@ -63918,7 +63918,7 @@ class TimelineChangeController extends videojs.EventTarget {
63918
63918
  }
63919
63919
  }
63920
63920
 
63921
- /* rollup-plugin-worker-factory start for worker!/home/runner/work/http-streaming/http-streaming/src/decrypter-worker.js */
63921
+ /* rollup-plugin-worker-factory start for worker!/Users/srimron-soutter/repos/github/vjs/http-streaming/src/decrypter-worker.js */
63922
63922
  const workerCode = transform(getWorkerString(function () {
63923
63923
  /**
63924
63924
  * @file stream.js
@@ -64510,7 +64510,7 @@ const workerCode = transform(getWorkerString(function () {
64510
64510
  };
64511
64511
  }));
64512
64512
  var Decrypter = factory(workerCode);
64513
- /* rollup-plugin-worker-factory end for worker!/home/runner/work/http-streaming/http-streaming/src/decrypter-worker.js */
64513
+ /* rollup-plugin-worker-factory end for worker!/Users/srimron-soutter/repos/github/vjs/http-streaming/src/decrypter-worker.js */
64514
64514
 
64515
64515
  /**
64516
64516
  * Convert the properties of an HLS track into an audioTrackKind.
@@ -66834,7 +66834,14 @@ class PlaylistController extends videojs.EventTarget {
66834
66834
  if (media.start) {
66835
66835
  const offset = media.start.timeOffset;
66836
66836
  if (offset < 0) {
66837
- startPoint = Math.max(seekableEnd + offset, seekable.start(0));
66837
+ // Per HLS spec, negative TIME-OFFSET is from the end of the last Media Segment.
66838
+ // For live streams, seekableEnd already has liveEdgeDelay subtracted,
66839
+ // so we need to add it back to get the actual playlist end.
66840
+ // Clamp to seekableEnd to avoid seeking into the unsafe live edge zone.
66841
+ const main = this.mainPlaylistLoader_.main;
66842
+ const liveEdgeDelay = Vhs$1.Playlist.liveEdgeDelay(main, media);
66843
+ const actualPlaylistEnd = seekableEnd + liveEdgeDelay;
66844
+ startPoint = Math.max(Math.min(actualPlaylistEnd + offset, seekableEnd), seekable.start(0));
66838
66845
  } else {
66839
66846
  startPoint = Math.min(seekableEnd, offset);
66840
66847
  }
@@ -68832,7 +68839,7 @@ const initPlugin = function (player, options) {
68832
68839
  const reloadSourceOnError = function (options) {
68833
68840
  initPlugin(this, options);
68834
68841
  };
68835
- var version$4 = "3.17.2";
68842
+ var version$4 = "3.17.3";
68836
68843
  var version$3 = "7.1.0";
68837
68844
  var version$2 = "1.3.1";
68838
68845
  var version$1 = "7.2.0";
@@ -71112,7 +71119,7 @@ if (typeof window !== 'undefined') {
71112
71119
  window._itAnalytics = window._itAnalytics || {};
71113
71120
  window._itAnalytics = {
71114
71121
  ...window._itAnalytics,
71115
- version: '1.0.0-alpha.5',
71122
+ version: '1.0.0-alpha.6',
71116
71123
  };
71117
71124
  }
71118
71125