@italia/video 1.0.0-alpha.4 → 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.
- package/custom-elements.json +7 -7
- package/dist/src/it-video.js +130 -77
- package/dist/src/it-video.js.map +1 -1
- package/package.json +10 -10
package/custom-elements.json
CHANGED
|
@@ -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
|
|
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: {
|
|
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,
|
|
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: `
|
|
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: `
|
|
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: `
|
|
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",
|
|
@@ -391,7 +391,7 @@
|
|
|
391
391
|
"type": {
|
|
392
392
|
"text": "Story"
|
|
393
393
|
},
|
|
394
|
-
"default": "{ name: 'i18n', tags: ['!dev'], render: () => html`<div class=\"hide-preview\"></div>`, parameters: { viewMode: 'docs', // assicura che si apra la tab Docs anziché Canvas docs: { description: { story: ` Oltre all'attributo \\`translations\\` che permette di modificare le traduzioni interne al player, sono disponibili ulteriori stringhe traducibili tramite l'[utility di internazionalizzazione](/docs/i18n-internazionalizzazione--documentazione). \\`\\`\\`js const translation =
|
|
394
|
+
"default": "{ name: 'i18n', tags: ['!dev'], render: () => html`<div class=\"hide-preview\"></div>`, parameters: { viewMode: 'docs', // assicura che si apra la tab Docs anziché Canvas docs: { description: { story: ` Oltre all'attributo \\`translations\\` che permette di modificare le traduzioni interne al player, sono disponibili ulteriori stringhe traducibili tramite l'[utility di internazionalizzazione](/docs/i18n-internazionalizzazione--documentazione). \\`\\`\\`js const translation = ${JSON.stringify(i18nIT, null, 2)} \\`\\`\\` `, }, }, }, }"
|
|
395
395
|
}
|
|
396
396
|
],
|
|
397
397
|
"exports": [
|
package/dist/src/it-video.js
CHANGED
|
@@ -543,8 +543,12 @@ function requireDomElement () {
|
|
|
543
543
|
|
|
544
544
|
DOMElement.prototype.removeAttributeNS =
|
|
545
545
|
function _Element_removeAttributeNS(namespace, name) {
|
|
546
|
+
// Prevent prototype pollution by checking if namespace is a direct property
|
|
547
|
+
if (!Object.prototype.hasOwnProperty.call(this._attributes, namespace)) {
|
|
548
|
+
return;
|
|
549
|
+
}
|
|
546
550
|
var attributes = this._attributes[namespace];
|
|
547
|
-
if (attributes) {
|
|
551
|
+
if (attributes && Object.prototype.hasOwnProperty.call(attributes, name)) {
|
|
548
552
|
delete attributes[name];
|
|
549
553
|
}
|
|
550
554
|
};
|
|
@@ -7175,6 +7179,9 @@ function requireDom () {
|
|
|
7175
7179
|
}
|
|
7176
7180
|
do{
|
|
7177
7181
|
newFirst.parentNode = parent;
|
|
7182
|
+
// Update ownerDocument for each node being inserted
|
|
7183
|
+
var targetDoc = parent.ownerDocument || parent;
|
|
7184
|
+
_updateOwnerDocument(newFirst, targetDoc);
|
|
7178
7185
|
}while(newFirst !== newLast && (newFirst= newFirst.nextSibling))
|
|
7179
7186
|
_onUpdateChild(parent.ownerDocument||parent, parent);
|
|
7180
7187
|
//console.log(parent.lastChild.nextSibling == null)
|
|
@@ -7184,6 +7191,37 @@ function requireDom () {
|
|
|
7184
7191
|
return node;
|
|
7185
7192
|
}
|
|
7186
7193
|
|
|
7194
|
+
/**
|
|
7195
|
+
* Recursively updates the ownerDocument property for a node and all its descendants
|
|
7196
|
+
* @param {Node} node
|
|
7197
|
+
* @param {Document} newOwnerDocument
|
|
7198
|
+
* @private
|
|
7199
|
+
*/
|
|
7200
|
+
function _updateOwnerDocument(node, newOwnerDocument) {
|
|
7201
|
+
if (node.ownerDocument === newOwnerDocument) {
|
|
7202
|
+
return;
|
|
7203
|
+
}
|
|
7204
|
+
|
|
7205
|
+
node.ownerDocument = newOwnerDocument;
|
|
7206
|
+
|
|
7207
|
+
// Update attributes if this is an element
|
|
7208
|
+
if (node.nodeType === ELEMENT_NODE && node.attributes) {
|
|
7209
|
+
for (var i = 0; i < node.attributes.length; i++) {
|
|
7210
|
+
var attr = node.attributes.item(i);
|
|
7211
|
+
if (attr) {
|
|
7212
|
+
attr.ownerDocument = newOwnerDocument;
|
|
7213
|
+
}
|
|
7214
|
+
}
|
|
7215
|
+
}
|
|
7216
|
+
|
|
7217
|
+
// Recursively update child nodes
|
|
7218
|
+
var child = node.firstChild;
|
|
7219
|
+
while (child) {
|
|
7220
|
+
_updateOwnerDocument(child, newOwnerDocument);
|
|
7221
|
+
child = child.nextSibling;
|
|
7222
|
+
}
|
|
7223
|
+
}
|
|
7224
|
+
|
|
7187
7225
|
/**
|
|
7188
7226
|
* Appends `newChild` to `parentNode`.
|
|
7189
7227
|
* If `newChild` is already connected to a `parentNode` it is first removed from it.
|
|
@@ -7209,6 +7247,11 @@ function requireDom () {
|
|
|
7209
7247
|
}
|
|
7210
7248
|
parentNode.lastChild = newChild;
|
|
7211
7249
|
_onUpdateChild(parentNode.ownerDocument, parentNode, newChild);
|
|
7250
|
+
|
|
7251
|
+
// Update ownerDocument for the new child and all its descendants
|
|
7252
|
+
var targetDoc = parentNode.ownerDocument || parentNode;
|
|
7253
|
+
_updateOwnerDocument(newChild, targetDoc);
|
|
7254
|
+
|
|
7212
7255
|
return newChild;
|
|
7213
7256
|
}
|
|
7214
7257
|
|
|
@@ -7237,7 +7280,7 @@ function requireDom () {
|
|
|
7237
7280
|
return newChild;
|
|
7238
7281
|
}
|
|
7239
7282
|
_insertBefore(this, newChild, refChild);
|
|
7240
|
-
newChild
|
|
7283
|
+
_updateOwnerDocument(newChild, this);
|
|
7241
7284
|
if (this.documentElement === null && newChild.nodeType === ELEMENT_NODE) {
|
|
7242
7285
|
this.documentElement = newChild;
|
|
7243
7286
|
}
|
|
@@ -7253,7 +7296,7 @@ function requireDom () {
|
|
|
7253
7296
|
replaceChild: function (newChild, oldChild) {
|
|
7254
7297
|
//raises
|
|
7255
7298
|
_insertBefore(this, newChild, oldChild, assertPreReplacementValidityInDocument);
|
|
7256
|
-
newChild
|
|
7299
|
+
_updateOwnerDocument(newChild, this);
|
|
7257
7300
|
if (oldChild) {
|
|
7258
7301
|
this.removeChild(oldChild);
|
|
7259
7302
|
}
|
|
@@ -8033,7 +8076,7 @@ var hasRequiredEntities;
|
|
|
8033
8076
|
function requireEntities () {
|
|
8034
8077
|
if (hasRequiredEntities) return entities;
|
|
8035
8078
|
hasRequiredEntities = 1;
|
|
8036
|
-
(function (exports) {
|
|
8079
|
+
(function (exports$1) {
|
|
8037
8080
|
|
|
8038
8081
|
var freeze = requireConventions().freeze;
|
|
8039
8082
|
|
|
@@ -8044,7 +8087,7 @@ function requireEntities () {
|
|
|
8044
8087
|
* @see https://www.w3.org/TR/2008/REC-xml-20081126/#sec-predefined-ent W3C XML 1.0
|
|
8045
8088
|
* @see https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Predefined_entities_in_XML Wikipedia
|
|
8046
8089
|
*/
|
|
8047
|
-
exports.XML_ENTITIES = freeze({
|
|
8090
|
+
exports$1.XML_ENTITIES = freeze({
|
|
8048
8091
|
amp: '&',
|
|
8049
8092
|
apos: "'",
|
|
8050
8093
|
gt: '>',
|
|
@@ -8066,7 +8109,7 @@ function requireEntities () {
|
|
|
8066
8109
|
* @see https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Character_entity_references_in_HTML Wikipedia (HTML)
|
|
8067
8110
|
* @see https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Entities_representing_special_characters_in_XHTML Wikpedia (XHTML)
|
|
8068
8111
|
*/
|
|
8069
|
-
exports.HTML_ENTITIES = freeze({
|
|
8112
|
+
exports$1.HTML_ENTITIES = freeze({
|
|
8070
8113
|
Aacute: '\u00C1',
|
|
8071
8114
|
aacute: '\u00E1',
|
|
8072
8115
|
Abreve: '\u0102',
|
|
@@ -10198,7 +10241,7 @@ function requireEntities () {
|
|
|
10198
10241
|
* @deprecated use `HTML_ENTITIES` instead
|
|
10199
10242
|
* @see HTML_ENTITIES
|
|
10200
10243
|
*/
|
|
10201
|
-
exports.entityMap = exports.HTML_ENTITIES;
|
|
10244
|
+
exports$1.entityMap = exports$1.HTML_ENTITIES;
|
|
10202
10245
|
} (entities));
|
|
10203
10246
|
return entities;
|
|
10204
10247
|
}
|
|
@@ -14720,8 +14763,8 @@ var clockExports = requireClock();
|
|
|
14720
14763
|
|
|
14721
14764
|
/**
|
|
14722
14765
|
* @license
|
|
14723
|
-
* Video.js 8.23.
|
|
14724
|
-
* Copyright
|
|
14766
|
+
* Video.js 8.23.7 <http://videojs.com/>
|
|
14767
|
+
* Copyright 2010-present Video.js contributors
|
|
14725
14768
|
* Available under Apache License Version 2.0
|
|
14726
14769
|
* <https://github.com/videojs/video.js/blob/main/LICENSE>
|
|
14727
14770
|
*
|
|
@@ -14731,7 +14774,7 @@ var clockExports = requireClock();
|
|
|
14731
14774
|
*/
|
|
14732
14775
|
|
|
14733
14776
|
|
|
14734
|
-
var version$6 = "8.23.
|
|
14777
|
+
var version$6 = "8.23.7";
|
|
14735
14778
|
|
|
14736
14779
|
/**
|
|
14737
14780
|
* An Object that contains lifecycle hooks as keys which point to an array
|
|
@@ -21280,23 +21323,20 @@ class TrackList extends EventTarget$2 {
|
|
|
21280
21323
|
constructor(tracks = []) {
|
|
21281
21324
|
super();
|
|
21282
21325
|
this.tracks_ = [];
|
|
21283
|
-
|
|
21284
|
-
/**
|
|
21285
|
-
* @memberof TrackList
|
|
21286
|
-
* @member {number} length
|
|
21287
|
-
* The current number of `Track`s in the this Trackist.
|
|
21288
|
-
* @instance
|
|
21289
|
-
*/
|
|
21290
|
-
Object.defineProperty(this, 'length', {
|
|
21291
|
-
get() {
|
|
21292
|
-
return this.tracks_.length;
|
|
21293
|
-
}
|
|
21294
|
-
});
|
|
21295
21326
|
for (let i = 0; i < tracks.length; i++) {
|
|
21296
21327
|
this.addTrack(tracks[i]);
|
|
21297
21328
|
}
|
|
21298
21329
|
}
|
|
21299
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
|
+
|
|
21300
21340
|
/**
|
|
21301
21341
|
* Add a {@link Track} to the `TrackList`
|
|
21302
21342
|
*
|
|
@@ -21336,10 +21376,10 @@ class TrackList extends EventTarget$2 {
|
|
|
21336
21376
|
/**
|
|
21337
21377
|
* Triggered when a track label is changed.
|
|
21338
21378
|
*
|
|
21339
|
-
* @event TrackList#
|
|
21379
|
+
* @event TrackList#labelchange
|
|
21340
21380
|
* @type {Event}
|
|
21341
21381
|
* @property {Track} track
|
|
21342
|
-
* A reference to track
|
|
21382
|
+
* A reference to track whose label was changed.
|
|
21343
21383
|
*/
|
|
21344
21384
|
track.labelchange_ = () => {
|
|
21345
21385
|
this.trigger({
|
|
@@ -26145,7 +26185,7 @@ class TextTrackDisplay extends Component$1 {
|
|
|
26145
26185
|
}
|
|
26146
26186
|
this.updateForTrack(descriptionsTrack);
|
|
26147
26187
|
}
|
|
26148
|
-
if (!window$1.CSS.supports('inset', '10px')) {
|
|
26188
|
+
if (!(window$1.CSS !== undefined && window$1.CSS.supports('inset', '10px'))) {
|
|
26149
26189
|
const textTrackDisplay = this.el_;
|
|
26150
26190
|
const vjsTextTrackCues = textTrackDisplay.querySelectorAll('.vjs-text-track-cue');
|
|
26151
26191
|
const controlBarHeight = this.player_.controlBar.el_.getBoundingClientRect().height;
|
|
@@ -26193,7 +26233,7 @@ class TextTrackDisplay extends Component$1 {
|
|
|
26193
26233
|
updateDisplayOverlay() {
|
|
26194
26234
|
// inset-inline and inset-block are not supprted on old chrome, but these are
|
|
26195
26235
|
// only likely to be used on TV devices
|
|
26196
|
-
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'))) {
|
|
26197
26237
|
return;
|
|
26198
26238
|
}
|
|
26199
26239
|
const playerWidth = this.player_.currentWidth();
|
|
@@ -26986,7 +27026,7 @@ class CurrentTimeDisplay extends TimeDisplay {
|
|
|
26986
27026
|
let time;
|
|
26987
27027
|
if (this.player_.ended()) {
|
|
26988
27028
|
time = this.player_.duration();
|
|
26989
|
-
} 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) {
|
|
26990
27030
|
time = event.target.pendingSeekTime();
|
|
26991
27031
|
} else {
|
|
26992
27032
|
time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
|
|
@@ -30657,9 +30697,12 @@ class MenuButton extends Component$1 {
|
|
|
30657
30697
|
*
|
|
30658
30698
|
* @param {string} name
|
|
30659
30699
|
* The icon name to be added.
|
|
30700
|
+
*
|
|
30701
|
+
* @return {Element}
|
|
30702
|
+
* The element that gets created.
|
|
30660
30703
|
*/
|
|
30661
30704
|
setIcon(name) {
|
|
30662
|
-
super.setIcon(name, this.menuButton_.el_);
|
|
30705
|
+
return super.setIcon(name, this.menuButton_.el_);
|
|
30663
30706
|
}
|
|
30664
30707
|
|
|
30665
30708
|
/**
|
|
@@ -42943,7 +42986,7 @@ videojs.registerPlugin('qualityLevels', qualityLevels);
|
|
|
42943
42986
|
// Include the version number.
|
|
42944
42987
|
qualityLevels.VERSION = version$5;
|
|
42945
42988
|
|
|
42946
|
-
/*! @name @videojs/http-streaming @version 3.17.
|
|
42989
|
+
/*! @name @videojs/http-streaming @version 3.17.3 @license Apache-2.0 */
|
|
42947
42990
|
|
|
42948
42991
|
/**
|
|
42949
42992
|
* @file resolve-url.js - Handling how URLs are resolved and manipulated
|
|
@@ -47362,7 +47405,7 @@ const getWorkerString = function (fn) {
|
|
|
47362
47405
|
return fn.toString().replace(/^function.+?{/, '').slice(0, -1);
|
|
47363
47406
|
};
|
|
47364
47407
|
|
|
47365
|
-
/* rollup-plugin-worker-factory start for worker!/
|
|
47408
|
+
/* rollup-plugin-worker-factory start for worker!/Users/srimron-soutter/repos/github/vjs/http-streaming/src/transmuxer-worker.js */
|
|
47366
47409
|
const workerCode$1 = transform(getWorkerString(function () {
|
|
47367
47410
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
47368
47411
|
/**
|
|
@@ -56063,7 +56106,7 @@ const workerCode$1 = transform(getWorkerString(function () {
|
|
|
56063
56106
|
};
|
|
56064
56107
|
}));
|
|
56065
56108
|
var TransmuxWorker = factory(workerCode$1);
|
|
56066
|
-
/* rollup-plugin-worker-factory end for worker!/
|
|
56109
|
+
/* rollup-plugin-worker-factory end for worker!/Users/srimron-soutter/repos/github/vjs/http-streaming/src/transmuxer-worker.js */
|
|
56067
56110
|
|
|
56068
56111
|
const handleData_ = (event, transmuxedData, callback) => {
|
|
56069
56112
|
const {
|
|
@@ -63875,7 +63918,7 @@ class TimelineChangeController extends videojs.EventTarget {
|
|
|
63875
63918
|
}
|
|
63876
63919
|
}
|
|
63877
63920
|
|
|
63878
|
-
/* rollup-plugin-worker-factory start for worker!/
|
|
63921
|
+
/* rollup-plugin-worker-factory start for worker!/Users/srimron-soutter/repos/github/vjs/http-streaming/src/decrypter-worker.js */
|
|
63879
63922
|
const workerCode = transform(getWorkerString(function () {
|
|
63880
63923
|
/**
|
|
63881
63924
|
* @file stream.js
|
|
@@ -64467,7 +64510,7 @@ const workerCode = transform(getWorkerString(function () {
|
|
|
64467
64510
|
};
|
|
64468
64511
|
}));
|
|
64469
64512
|
var Decrypter = factory(workerCode);
|
|
64470
|
-
/* rollup-plugin-worker-factory end for worker!/
|
|
64513
|
+
/* rollup-plugin-worker-factory end for worker!/Users/srimron-soutter/repos/github/vjs/http-streaming/src/decrypter-worker.js */
|
|
64471
64514
|
|
|
64472
64515
|
/**
|
|
64473
64516
|
* Convert the properties of an HLS track into an audioTrackKind.
|
|
@@ -66791,7 +66834,14 @@ class PlaylistController extends videojs.EventTarget {
|
|
|
66791
66834
|
if (media.start) {
|
|
66792
66835
|
const offset = media.start.timeOffset;
|
|
66793
66836
|
if (offset < 0) {
|
|
66794
|
-
|
|
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));
|
|
66795
66845
|
} else {
|
|
66796
66846
|
startPoint = Math.min(seekableEnd, offset);
|
|
66797
66847
|
}
|
|
@@ -68789,7 +68839,7 @@ const initPlugin = function (player, options) {
|
|
|
68789
68839
|
const reloadSourceOnError = function (options) {
|
|
68790
68840
|
initPlugin(this, options);
|
|
68791
68841
|
};
|
|
68792
|
-
var version$4 = "3.17.
|
|
68842
|
+
var version$4 = "3.17.3";
|
|
68793
68843
|
var version$3 = "7.1.0";
|
|
68794
68844
|
var version$2 = "1.3.1";
|
|
68795
68845
|
var version$1 = "7.2.0";
|
|
@@ -71069,7 +71119,7 @@ if (typeof window !== 'undefined') {
|
|
|
71069
71119
|
window._itAnalytics = window._itAnalytics || {};
|
|
71070
71120
|
window._itAnalytics = {
|
|
71071
71121
|
...window._itAnalytics,
|
|
71072
|
-
version: '1.0.0-alpha.
|
|
71122
|
+
version: '1.0.0-alpha.6',
|
|
71073
71123
|
};
|
|
71074
71124
|
}
|
|
71075
71125
|
|
|
@@ -74002,14 +74052,14 @@ video::-webkit-media-text-track-display {
|
|
|
74002
74052
|
|
|
74003
74053
|
/* stylelint-enable */
|
|
74004
74054
|
.vjs-theme-bootstrap-italia {
|
|
74005
|
-
--
|
|
74006
|
-
--
|
|
74055
|
+
--bsi-videoplayer-button-background: var(--bsi-color-background-primary);
|
|
74056
|
+
--bsi-videoplayer-control-background: var(--bsi-color-background-primary);
|
|
74007
74057
|
}
|
|
74008
74058
|
.vjs-theme-bootstrap-italia .vjs-big-play-button, .vjs-theme-bootstrap-italia:hover .vjs-big-play-button, .vjs-theme-bootstrap-italia.vjs-big-play-button:focus {
|
|
74009
|
-
background-color: var(--
|
|
74059
|
+
background-color: var(--bsi-videoplayer-button-background);
|
|
74010
74060
|
}
|
|
74011
74061
|
.vjs-theme-bootstrap-italia .vjs-control-bar {
|
|
74012
|
-
background-color: var(--
|
|
74062
|
+
background-color: var(--bsi-videoplayer-control-background);
|
|
74013
74063
|
font-size: 1rem;
|
|
74014
74064
|
}
|
|
74015
74065
|
@media (min-width: 992px) {
|
|
@@ -74057,18 +74107,21 @@ video::-webkit-media-text-track-display {
|
|
|
74057
74107
|
}
|
|
74058
74108
|
}
|
|
74059
74109
|
.acceptoverlay {
|
|
74060
|
-
--
|
|
74061
|
-
--
|
|
74062
|
-
--
|
|
74063
|
-
--
|
|
74064
|
-
--
|
|
74065
|
-
--
|
|
74066
|
-
--
|
|
74067
|
-
--
|
|
74068
|
-
--
|
|
74069
|
-
--
|
|
74070
|
-
--
|
|
74071
|
-
|
|
74110
|
+
--bsi-acceptoverlay-color-background: var(--bsi-color-background-inverse);
|
|
74111
|
+
--bsi-acceptoverlay-color-text: var(--bsi-color-text);
|
|
74112
|
+
--bsi-acceptoverlay-label-color: var(--bsi-color-text-secondary);
|
|
74113
|
+
--bsi-acceptoverlay-label-border-color: var(--bsi-color-border-subtle);
|
|
74114
|
+
--bsi-acceptoverlay-opacity: 0.9;
|
|
74115
|
+
--bsi-acceptoverlay-spacing-inset: var(--bsi-spacing-s);
|
|
74116
|
+
--bsi-acceptoverlay-primary-opacity: 0.95;
|
|
74117
|
+
--bsi-acceptoverlay-inner-width: 600px;
|
|
74118
|
+
--bsi-acceptoverlay-icon-spacing: var(--bsi-spacing-s);
|
|
74119
|
+
--bsi-acceptoverlay-icon-fill: var(--bsi-icon-primary);
|
|
74120
|
+
--bsi-acceptoverlay-buttons-spacing: var(--bsi-spacing-s);
|
|
74121
|
+
}
|
|
74122
|
+
|
|
74123
|
+
/* stylelint-disable-next-line no-duplicate-selectors */
|
|
74124
|
+
.acceptoverlay {
|
|
74072
74125
|
position: absolute;
|
|
74073
74126
|
top: 0;
|
|
74074
74127
|
right: 0;
|
|
@@ -74079,13 +74132,13 @@ video::-webkit-media-text-track-display {
|
|
|
74079
74132
|
flex-wrap: wrap;
|
|
74080
74133
|
align-items: flex-start;
|
|
74081
74134
|
justify-content: center;
|
|
74082
|
-
padding: var(--
|
|
74083
|
-
opacity: var(--
|
|
74084
|
-
background-color: var(--
|
|
74135
|
+
padding: var(--bsi-acceptoverlay-spacing-inset);
|
|
74136
|
+
opacity: var(--bsi-acceptoverlay-opacity);
|
|
74137
|
+
background-color: var(--bsi-acceptoverlay-background-color);
|
|
74085
74138
|
}
|
|
74086
74139
|
@media (min-width: 768px) {
|
|
74087
74140
|
.acceptoverlay {
|
|
74088
|
-
--
|
|
74141
|
+
--bsi-acceptoverlay-spacing-inset: var(--bsi-spacing-m);
|
|
74089
74142
|
}
|
|
74090
74143
|
}
|
|
74091
74144
|
@media (min-width: 992px) {
|
|
@@ -74094,19 +74147,19 @@ video::-webkit-media-text-track-display {
|
|
|
74094
74147
|
}
|
|
74095
74148
|
}
|
|
74096
74149
|
.acceptoverlay label {
|
|
74097
|
-
color: var(--
|
|
74150
|
+
color: var(--bsi-acceptoverlay-label-color);
|
|
74098
74151
|
}
|
|
74099
74152
|
.acceptoverlay label::after {
|
|
74100
|
-
border-color: var(--
|
|
74153
|
+
border-color: var(--bsi-acceptoverlay-label-border-color) !important;
|
|
74101
74154
|
}
|
|
74102
74155
|
.acceptoverlay[aria-hidden=true] {
|
|
74103
74156
|
display: none;
|
|
74104
74157
|
}
|
|
74105
74158
|
.acceptoverlay.acceptoverlay-primary {
|
|
74106
|
-
--
|
|
74159
|
+
--bsi-acceptoverlay-background-color: var(--bsi-color-background-primary);
|
|
74107
74160
|
}
|
|
74108
74161
|
.acceptoverlay.acceptoverlay-primary.show {
|
|
74109
|
-
opacity: var(--
|
|
74162
|
+
opacity: var(--bsi-acceptoverlay-primary-opacity);
|
|
74110
74163
|
}
|
|
74111
74164
|
.acceptoverlay h1,
|
|
74112
74165
|
.acceptoverlay h2,
|
|
@@ -74116,7 +74169,7 @@ video::-webkit-media-text-track-display {
|
|
|
74116
74169
|
.acceptoverlay h6,
|
|
74117
74170
|
.acceptoverlay p {
|
|
74118
74171
|
margin-bottom: 0;
|
|
74119
|
-
color: var(--
|
|
74172
|
+
color: var(--bsi-acceptoverlay-color-text);
|
|
74120
74173
|
}
|
|
74121
74174
|
.acceptoverlay h4 {
|
|
74122
74175
|
text-align: center;
|
|
@@ -74126,19 +74179,19 @@ video::-webkit-media-text-track-display {
|
|
|
74126
74179
|
}
|
|
74127
74180
|
.acceptoverlay .acceptoverlay-inner {
|
|
74128
74181
|
width: 100%;
|
|
74129
|
-
max-width: var(--
|
|
74182
|
+
max-width: var(--bsi-acceptoverlay-inner-width);
|
|
74130
74183
|
}
|
|
74131
74184
|
.acceptoverlay .acceptoverlay-icon {
|
|
74132
|
-
margin-bottom: var(--
|
|
74185
|
+
margin-bottom: var(--bsi-acceptoverlay-icon-spacing);
|
|
74133
74186
|
text-align: center;
|
|
74134
74187
|
}
|
|
74135
74188
|
@media (min-width: 768px) {
|
|
74136
74189
|
.acceptoverlay .acceptoverlay-icon {
|
|
74137
|
-
--
|
|
74190
|
+
--bsi-acceptoverlay-icon-margin-bottom: var(--bsi-spacing-xxl);
|
|
74138
74191
|
}
|
|
74139
74192
|
}
|
|
74140
74193
|
.acceptoverlay .acceptoverlay-icon .icon {
|
|
74141
|
-
fill: var(--
|
|
74194
|
+
fill: var(--bsi-acceptoverlay-icon-fill);
|
|
74142
74195
|
}
|
|
74143
74196
|
.acceptoverlay .acceptoverlay-buttons {
|
|
74144
74197
|
display: flex;
|
|
@@ -74146,14 +74199,14 @@ video::-webkit-media-text-track-display {
|
|
|
74146
74199
|
gap: 1rem;
|
|
74147
74200
|
flex-wrap: wrap;
|
|
74148
74201
|
justify-content: space-between;
|
|
74149
|
-
margin-top: var(--
|
|
74202
|
+
margin-top: var(--bsi-acceptoverlay-buttons-spacing);
|
|
74150
74203
|
background-color: transparent !important;
|
|
74151
74204
|
}
|
|
74152
74205
|
.acceptoverlay .acceptoverlay-buttons button {
|
|
74153
74206
|
width: 100%;
|
|
74154
74207
|
}
|
|
74155
74208
|
.acceptoverlay .acceptoverlay-buttons button:last-child {
|
|
74156
|
-
--
|
|
74209
|
+
--bsi-acceptoverlay-buttons-spacing: var(--bsi-spacing-xxs);
|
|
74157
74210
|
}
|
|
74158
74211
|
.acceptoverlay .acceptoverlay-buttons.single-button button {
|
|
74159
74212
|
margin-top: 0;
|
|
@@ -74168,7 +74221,7 @@ video::-webkit-media-text-track-display {
|
|
|
74168
74221
|
margin-top: 0 !important;
|
|
74169
74222
|
}
|
|
74170
74223
|
.acceptoverlay-buttons button:last-child {
|
|
74171
|
-
margin-left: var(--
|
|
74224
|
+
margin-left: var(--bsi-spacing-m);
|
|
74172
74225
|
}
|
|
74173
74226
|
.acceptoverlay-buttons.single-button button {
|
|
74174
74227
|
width: auto;
|
|
@@ -74188,25 +74241,25 @@ video::-webkit-media-text-track-display {
|
|
|
74188
74241
|
}
|
|
74189
74242
|
|
|
74190
74243
|
.acceptoverlay {
|
|
74191
|
-
--
|
|
74192
|
-
--
|
|
74193
|
-
--
|
|
74244
|
+
--bsi-acceptoverlay-color-text: #fff;
|
|
74245
|
+
--bsi-form-control-label-color: #fff;
|
|
74246
|
+
--bsi-form-checkbox-border-color: #fff;
|
|
74194
74247
|
}
|
|
74195
74248
|
.acceptoverlay a {
|
|
74196
|
-
color: var(--
|
|
74249
|
+
color: var(--bsi-acceptoverlay-color-text);
|
|
74197
74250
|
}
|
|
74198
74251
|
.acceptoverlay .bg-dark it-button::part(primary) {
|
|
74199
|
-
--
|
|
74200
|
-
--
|
|
74252
|
+
--bsi-btn-text-color: var(--bsi-color-background-primary);
|
|
74253
|
+
--bsi-btn-background: var(--bsi-color-background-inverse);
|
|
74201
74254
|
}
|
|
74202
74255
|
.acceptoverlay .bg-dark it-button::part(primary):hover {
|
|
74203
|
-
--
|
|
74256
|
+
--bsi-btn-text-color: var(--bsi-color-text);
|
|
74204
74257
|
}
|
|
74205
74258
|
.acceptoverlay .acceptoverlay-buttons it-button {
|
|
74206
74259
|
width: 100%;
|
|
74207
74260
|
}
|
|
74208
74261
|
.acceptoverlay .acceptoverlay-buttons it-button:last-child {
|
|
74209
|
-
--
|
|
74262
|
+
--bsi-acceptoverlay-buttons-spacing: var(--bsi-spacing-xxs);
|
|
74210
74263
|
}
|
|
74211
74264
|
@media (min-width: 768px) {
|
|
74212
74265
|
.acceptoverlay .acceptoverlay-buttons {
|
|
@@ -74216,7 +74269,7 @@ video::-webkit-media-text-track-display {
|
|
|
74216
74269
|
width: 50%;
|
|
74217
74270
|
}
|
|
74218
74271
|
.acceptoverlay .acceptoverlay-buttons it-button:last-child {
|
|
74219
|
-
margin-left: var(--
|
|
74272
|
+
margin-left: var(--bsi-spacing-m);
|
|
74220
74273
|
}
|
|
74221
74274
|
.acceptoverlay .acceptoverlay-buttons.single-button it-button {
|
|
74222
74275
|
width: auto;
|