@italia/video 0.1.0-alpha.1 → 1.0.0-alpha.10
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 +2 -2
- package/custom-elements.json +44 -46
- package/dist/src/it-video.d.ts +2 -0
- package/dist/src/it-video.d.ts.map +1 -1
- package/dist/src/it-video.js +912 -175
- package/dist/src/it-video.js.map +1 -1
- package/package.json +25 -17
package/README.md
CHANGED
|
@@ -5,14 +5,14 @@ This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) reco
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm i
|
|
8
|
+
npm i @italia/video
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
13
|
```html
|
|
14
14
|
<script type="module">
|
|
15
|
-
import '@italia/
|
|
15
|
+
import '@italia/video';
|
|
16
16
|
</script>
|
|
17
17
|
|
|
18
18
|
<it-video></it-video>
|
package/custom-elements.json
CHANGED
|
@@ -73,7 +73,8 @@
|
|
|
73
73
|
"text": "string"
|
|
74
74
|
},
|
|
75
75
|
"default": "'it'",
|
|
76
|
-
"attribute": "
|
|
76
|
+
"attribute": "lang",
|
|
77
|
+
"reflects": true
|
|
77
78
|
},
|
|
78
79
|
{
|
|
79
80
|
"kind": "field",
|
|
@@ -139,6 +140,11 @@
|
|
|
139
140
|
"privacy": "private",
|
|
140
141
|
"default": "false"
|
|
141
142
|
},
|
|
143
|
+
{
|
|
144
|
+
"kind": "method",
|
|
145
|
+
"name": "getPlayer",
|
|
146
|
+
"privacy": "public"
|
|
147
|
+
},
|
|
142
148
|
{
|
|
143
149
|
"kind": "field",
|
|
144
150
|
"name": "initPluginsFn",
|
|
@@ -228,7 +234,7 @@
|
|
|
228
234
|
"fieldName": "options"
|
|
229
235
|
},
|
|
230
236
|
{
|
|
231
|
-
"name": "
|
|
237
|
+
"name": "lang",
|
|
232
238
|
"type": {
|
|
233
239
|
"text": "string"
|
|
234
240
|
},
|
|
@@ -326,7 +332,7 @@
|
|
|
326
332
|
{
|
|
327
333
|
"kind": "variable",
|
|
328
334
|
"name": "meta",
|
|
329
|
-
"default": "{ title: 'Componenti/Video', tags: ['
|
|
335
|
+
"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>"
|
|
330
336
|
},
|
|
331
337
|
{
|
|
332
338
|
"kind": "variable",
|
|
@@ -334,15 +340,7 @@
|
|
|
334
340
|
"type": {
|
|
335
341
|
"text": "Story"
|
|
336
342
|
},
|
|
337
|
-
"default": "{ ...meta, name: 'Esempio interattivo', tags: ['!
|
|
338
|
-
},
|
|
339
|
-
{
|
|
340
|
-
"kind": "variable",
|
|
341
|
-
"name": "ComeUsarlo",
|
|
342
|
-
"type": {
|
|
343
|
-
"text": "Story"
|
|
344
|
-
},
|
|
345
|
-
"default": "{ name: 'Come usarlo', tags: ['!dev'], render: () => html`<div class=\"hide-preview\"></div>`, parameters: { viewMode: 'docs', // assicura che si apra la tab Docs anziché Canvas docs: { description: { story: ` Per aggiungere un video, è sufficiente utilizzare il componente \\`<it-video />\\` ed i relativi attributi per gestirne la sorgente, e le opzioni del video player. - Usa l'attributo \\`options\\` per passare al player le opzioni definite qui [https://videojs.com/guides/options/](https://videojs.com/guides/options/). - Usa l'attributo \\`translations\\` per definire le traduzioni del player diverse dalla lingua italiana, o per sovrascrivere le traduzioni italiane pre-impostate. ### Font per le icone del player Per utilizzare le icone del player, è necessario includere il font \\`VideoJS.woff\\` nella tua applicazione. Puoi farlo aggiungendo il css compilato di design-web-components nel tuo sorgente HTML: \\`\\`\\`html <link rel=\"stylesheet\" href=\"design-web-components/dist/design-web-components.css\" /> \\`\\`\\` oppure se stai usando SCSS puoi definire il font direttamente nel tuo file SCSS: \\`\\`\\`scss @font-face { font-family: VideoJS; src: url('./assets/fonts/VideoJS.woff') format('woff'); font-weight: normal; font-style: normal; } \\`\\`\\` copiando l'asset \\`VideoJS.woff\\` nella tua cartella assets/fonts (lo puoi copiare dal package design-web-components). ### Plugin Esistono numerosi plugin disponibili per Video.js, che consentono di aggiungere nuove funzionalità, come la riproduzione di video in VR, l’analisi delle statistiche di visualizzazione del video, le utility per la UI mobile e molto altro ancora. #### Utilizzo di ulteriori plugin <Description> (Ad esempio il plugin per l'embed di Vimeo)</Description> Con l'attributo \\`init-plugins\\` è possibile passare al componente \\`<it-video>\\` il nome della propria funzione di inizializzazione dei plugin, che deve essere definita nella window. Esempio: \\`\\`\\`html <it-video ...... init-plugins=\"myInitPlugin\"></it-video> <script> const myInitPlugin = (videojs)=>{ /*my code*/ }</script> \\`\\`\\` `, }, }, }, }"
|
|
343
|
+
"default": "{ ...meta, name: 'Esempio interattivo', tags: ['!dev'], parameters: { docs: { canvas: { sourceState: 'closed', }, }, }, render: (params) => html` ${renderComponent({ ...params, })}`, }"
|
|
346
344
|
},
|
|
347
345
|
{
|
|
348
346
|
"kind": "variable",
|
|
@@ -350,7 +348,7 @@
|
|
|
350
348
|
"type": {
|
|
351
349
|
"text": "Story"
|
|
352
350
|
},
|
|
353
|
-
"default": "{ ...meta, name: 'Con trascrizione', render: (params) => html` ${renderComponent({ ...params, translations: undefined, slot: html`<
|
|
351
|
+
"default": "{ ...meta, name: 'Con trascrizione', render: (params) => html` ${renderComponent({ ...params, translations: undefined, slot: html`<it-accordion class=\"vjs-transcription\"> <it-accordion-item> <span slot=\"heading\" id=\"transcription-head4\">Trascrizione</span> <div slot=\"content\"> Vestibulum hendrerit ultrices nibh, sed pharetra lacus ultrices eget. Morbi et ipsum et sapien dapibus facilisis. Integer eget semper nibh. Proin enim nulla, egestas ac rutrum eget, ullamcorper nec turpis. </div> </it-accordion-item> </it-accordion>`, })}`, }"
|
|
354
352
|
},
|
|
355
353
|
{
|
|
356
354
|
"kind": "variable",
|
|
@@ -358,7 +356,7 @@
|
|
|
358
356
|
"type": {
|
|
359
357
|
"text": "Story"
|
|
360
358
|
},
|
|
361
|
-
"default": "{ ...meta, name: 'Sottotitoli, didascalie, capitoli e descrizioni',
|
|
359
|
+
"default": "{ ...meta, name: 'Sottotitoli, didascalie, capitoli e descrizioni', render: (params) => html`${renderComponent({ ...params, src: './assets/video/ElephantsDream.mp4', 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' }, ], translations: undefined, })}`, }"
|
|
362
360
|
},
|
|
363
361
|
{
|
|
364
362
|
"kind": "variable",
|
|
@@ -366,7 +364,7 @@
|
|
|
366
364
|
"type": {
|
|
367
365
|
"text": "Story"
|
|
368
366
|
},
|
|
369
|
-
"default": "{ ...meta, name: 'Immagine di anteprima', parameters: { docs: { description: { story: ` Per aggiungere un’immagine di anteprima come copertina al video
|
|
367
|
+
"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, })}`, }"
|
|
370
368
|
},
|
|
371
369
|
{
|
|
372
370
|
"kind": "variable",
|
|
@@ -374,7 +372,7 @@
|
|
|
374
372
|
"type": {
|
|
375
373
|
"text": "Story"
|
|
376
374
|
},
|
|
377
|
-
"default": "{ ...meta, // name: 'Streaming', parameters: { docs: { description: { story: `
|
|
375
|
+
"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, })}`, }"
|
|
378
376
|
},
|
|
379
377
|
{
|
|
380
378
|
"kind": "variable",
|
|
@@ -382,7 +380,7 @@
|
|
|
382
380
|
"type": {
|
|
383
381
|
"text": "Story"
|
|
384
382
|
},
|
|
385
|
-
"default": "{ ...meta, name: 'Gestire più tracce audio', parameters: { docs: { description: { story: `
|
|
383
|
+
"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, })}`, }"
|
|
386
384
|
},
|
|
387
385
|
{
|
|
388
386
|
"kind": "variable",
|
|
@@ -390,7 +388,7 @@
|
|
|
390
388
|
"type": {
|
|
391
389
|
"text": "Story"
|
|
392
390
|
},
|
|
393
|
-
"default": "{ ...meta, name: 'Embed da piattaforme terze', parameters: { docs: { description: { story: `
|
|
391
|
+
"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, })}`, }"
|
|
394
392
|
},
|
|
395
393
|
{
|
|
396
394
|
"kind": "variable",
|
|
@@ -398,7 +396,7 @@
|
|
|
398
396
|
"type": {
|
|
399
397
|
"text": "Story"
|
|
400
398
|
},
|
|
401
|
-
"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 =
|
|
399
|
+
"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)} \\`\\`\\` `, }, }, }, }"
|
|
402
400
|
}
|
|
403
401
|
],
|
|
404
402
|
"exports": [
|
|
@@ -418,14 +416,6 @@
|
|
|
418
416
|
"module": "stories/it-video.stories.ts"
|
|
419
417
|
}
|
|
420
418
|
},
|
|
421
|
-
{
|
|
422
|
-
"kind": "js",
|
|
423
|
-
"name": "ComeUsarlo",
|
|
424
|
-
"declaration": {
|
|
425
|
-
"name": "ComeUsarlo",
|
|
426
|
-
"module": "stories/it-video.stories.ts"
|
|
427
|
-
}
|
|
428
|
-
},
|
|
429
419
|
{
|
|
430
420
|
"kind": "js",
|
|
431
421
|
"name": "ConTrascrizione",
|
|
@@ -486,50 +476,58 @@
|
|
|
486
476
|
},
|
|
487
477
|
{
|
|
488
478
|
"kind": "javascript-module",
|
|
489
|
-
"path": "src/
|
|
479
|
+
"path": "src/util/youtube-video.js",
|
|
490
480
|
"declarations": [
|
|
481
|
+
{
|
|
482
|
+
"kind": "function",
|
|
483
|
+
"name": "initYoutubePlugin",
|
|
484
|
+
"parameters": [
|
|
485
|
+
{
|
|
486
|
+
"name": "videojs"
|
|
487
|
+
}
|
|
488
|
+
],
|
|
489
|
+
"description": "--------------------------------------------------------------------------\nBootstrap Italia (https://italia.github.io/bootstrap-italia/)\nAuthors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS\nLicensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)\nThis file is a modified version of Benoit Tremblay's VideoJS YouTube plugin\nMain repository: https://github.com/videojs/videojs-youtube\nCopyright (c) 2014-2015 Benoit Tremblay <trembl.ben@gmail.com>\nLicensed under MIT license (https://github.com/videojs/videojs-youtube?tab=readme-ov-file#license)\n--------------------------------------------------------------------------"
|
|
490
|
+
},
|
|
491
491
|
{
|
|
492
492
|
"kind": "variable",
|
|
493
|
-
"name": "
|
|
493
|
+
"name": "playerVars",
|
|
494
494
|
"type": {
|
|
495
|
-
"text": "
|
|
495
|
+
"text": "object"
|
|
496
496
|
},
|
|
497
|
-
"default": "{
|
|
497
|
+
"default": "{ controls: 0, modestbranding: 1, rel: 0, showinfo: 0, loop: this.options_.loop ? 1 : 0, }"
|
|
498
498
|
}
|
|
499
499
|
],
|
|
500
500
|
"exports": [
|
|
501
501
|
{
|
|
502
502
|
"kind": "js",
|
|
503
|
-
"name": "
|
|
503
|
+
"name": "initYoutubePlugin",
|
|
504
504
|
"declaration": {
|
|
505
|
-
"name": "
|
|
506
|
-
"module": "src/
|
|
505
|
+
"name": "initYoutubePlugin",
|
|
506
|
+
"module": "src/util/youtube-video.js"
|
|
507
507
|
}
|
|
508
508
|
}
|
|
509
509
|
]
|
|
510
510
|
},
|
|
511
511
|
{
|
|
512
512
|
"kind": "javascript-module",
|
|
513
|
-
"path": "src/
|
|
513
|
+
"path": "src/locales/it.ts",
|
|
514
514
|
"declarations": [
|
|
515
515
|
{
|
|
516
|
-
"kind": "
|
|
517
|
-
"name": "
|
|
518
|
-
"
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
],
|
|
523
|
-
"description": "--------------------------------------------------------------------------\nBootstrap Italia (https://italia.github.io/bootstrap-italia/)\nAuthors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS\nLicensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)\nThis file is a modified version of Benoit Tremblay's VideoJS YouTube plugin\nMain repository: https://github.com/videojs/videojs-youtube\nCopyright (c) 2014-2015 Benoit Tremblay <trembl.ben@gmail.com>\nLicensed under MIT license (https://github.com/videojs/videojs-youtube?tab=readme-ov-file#license)\n--------------------------------------------------------------------------"
|
|
516
|
+
"kind": "variable",
|
|
517
|
+
"name": "translation",
|
|
518
|
+
"type": {
|
|
519
|
+
"text": "DefaultTranslation"
|
|
520
|
+
},
|
|
521
|
+
"default": "{ $code: 'it', $name: 'Italiano', $dir: 'ltr', // consenso video_consent_icon: 'it-video', video_consent_text: 'Accetta i cookie di YouTube per vedere il video. Puoi gestire le preferenze nella <a href=\"#\" class=\"text-white\">cookie policy</a>.', video_consent_accept: 'Accetta', video_consent_remember: 'Ricorda per tutti i video', }"
|
|
524
522
|
}
|
|
525
523
|
],
|
|
526
524
|
"exports": [
|
|
527
525
|
{
|
|
528
526
|
"kind": "js",
|
|
529
|
-
"name": "
|
|
527
|
+
"name": "default",
|
|
530
528
|
"declaration": {
|
|
531
|
-
"name": "
|
|
532
|
-
"module": "src/
|
|
529
|
+
"name": "translation",
|
|
530
|
+
"module": "src/locales/it.ts"
|
|
533
531
|
}
|
|
534
532
|
}
|
|
535
533
|
]
|
package/dist/src/it-video.d.ts
CHANGED
|
@@ -15,6 +15,7 @@ export declare class ItVideo extends BaseLocalizedComponent {
|
|
|
15
15
|
private player;
|
|
16
16
|
private videoElement;
|
|
17
17
|
private consentAccepted;
|
|
18
|
+
getPlayer(): any;
|
|
18
19
|
/**
|
|
19
20
|
* Funzione risolta da window[initPluginsName]
|
|
20
21
|
*/
|
|
@@ -27,6 +28,7 @@ export declare class ItVideo extends BaseLocalizedComponent {
|
|
|
27
28
|
getVideoElement(): "" | import("lit").TemplateResult<1>;
|
|
28
29
|
initVideoPlayer(focusPlayButton?: boolean): void;
|
|
29
30
|
firstUpdated(): void;
|
|
31
|
+
willUpdate(changedProperties: Map<string, any>): void;
|
|
30
32
|
render(): import("lit").TemplateResult<1>;
|
|
31
33
|
connectedCallback(): void;
|
|
32
34
|
disconnectedCallback(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"it-video.d.ts","sourceRoot":"","sources":["../../src/it-video.ts"],"names":[],"mappings":"AAKA,OAAO,EAAW,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAKlE,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAQvF,qBACa,OAAQ,SAAQ,sBAAsB;IACjD,MAAM,CAAC,MAAM,iCAAY;IAEzB,OAAO,CAAC,OAAO,CAAoD;IAEvC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,IAAI,EAAE,MAAM,CAAe;IAE3B,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;
|
|
1
|
+
{"version":3,"file":"it-video.d.ts","sourceRoot":"","sources":["../../src/it-video.ts"],"names":[],"mappings":"AAKA,OAAO,EAAW,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAKlE,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAQvF,qBACa,OAAQ,SAAQ,sBAAsB;IACjD,MAAM,CAAC,MAAM,iCAAY;IAEzB,OAAO,CAAC,OAAO,CAAoD;IAEvC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,IAAI,EAAE,MAAM,CAAe;IAE3B,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;IAGnE,QAAQ,SAAQ;IAE2B,YAAY,EAAE,mBAAmB,CAAkB;IAEnE,KAAK,EAAE,KAAK,CAAM;IAEjB,cAAc,CAAC,EAAE,cAAc,CAAM;IAGjE,eAAe,SAAM;IAGrB,OAAO,CAAC,MAAM,CAAa;IAG3B,OAAO,CAAC,YAAY,CAAa;IAGjC,OAAO,CAAC,eAAe,CAAkB;IAElC,SAAS;IAIhB;;OAEG;IACH,OAAO,KAAK,aAAa,GAGxB;IAKD,YAAY;IAUZ,kBAAkB;IAUlB,aAAa;IAQb,aAAa,CAAC,QAAQ,GAAE,OAAe;IAoBvC,iBAAiB;IAKjB,eAAe;IAmBf,eAAe,CAAC,eAAe,GAAE,OAAe;IAmFhD,YAAY;IAKZ,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAQ9C,MAAM;IAoCN,iBAAiB,IAAI,IAAI;IAWzB,oBAAoB,IAAI,IAAI;CAO7B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,wBAAwB,CAAC,EAAE,OAAO,CAAC;KACpC;IACD,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
|