@meuuhdia/video-player 1.0.0 → 1.0.1

package/README.fr.md

@@ -0,0 +1,129 @@
+# Meuuhdia
+
+- [english documentation](/README.md)
+- [documentazione in italiano](/README.it.md)
+
+Lecteur video inclusif embarquant les options de contrôle classiques.
+Vous pouvez renseigner des fichiers de traduction, sous-titrage et transcription textuelle.
+
+Le lecteur permettra à l'utilisateur d'activer et configurer lui même l'affichage de ces fichiers.
+Il pourra modifier les couleurs et taille des sous-titres à sa convenance.
+
+Ce lecteur a été conçu en ayant à coeur de créer un outil inclusif.
+Toutefois, il n'a fait l'objet d'aucun audit, il y a donc certainement des choses a améliorer. Tous les retours sont les bienvenus.
+
+## Installation
+1. Installer le lecteur avec NPM : `npm install @meuuhdia/video-player`
+2. Activer le lecteur en ajoutant le code suivant dans votre fichier javascript principal (ou bien à l'endroit précis ou vous en avez besoin) :
+```js
+// sans empaqueteur JS
+import "/node_modules/@meuuhdia/video-player/meuuhdia.js";
+
+// avec empaqueteur JS
+import "@meuuhdia/video-player";
+```
+
+## Personnalisation
+Vous pouvez mettre à jour les variables CSS Meuuhdia pour adapter les couleurs à votre design.
+
+### Couleurs et police du lecteur
+```css
+:root {
+    --meuuhdia-color-main: #000000;
+    --meuuhdia-color-secondary: #FFFFFF;
+    --meuuhdia-font-family: "Luciole", consolas;
+}
+```
+
+### Couleurs par défaut des sous-titres
+```css
+:root {
+    --meuuhdia-cue-color: #ffff00;
+    --meuuhdia-cue-bgcolor: #000000;
+}
+```
+
+## Utilisation
+Copiez le code suivant à l'endroit ou vous souhaitez afficher le lecteur vidéo, il s'agit du code minimal nécessaire au fonctionnement de Meuuhdia.
+- L'attribut "controls" permet de s'assurer d'avoir les options de contrôle disponibles dans le cas ou le lecteur natif serait affiché (javascript désactivé).
+- L'attribut `[preload='metadata']` permet au lecteur Meuuhdia de charger la vidéo
+- Au moins une balise `<source>` doit être renseignée
+
+```html
+<div class="meuuhdia">
+    <div class="meuuhdia_wrapper">
+        <video preload="metadata" controls>
+            <source src="path/to/your/video.mp4" type="video/mp4">
+        </video>
+    </div>
+</div>
+```
+
+### Sous-titres et traductions
+Les fichiers vtt renseignés ne doivent pas contenir de styles css, Meuuhdia applique deja des styles adaptés pour que tout le monde puisse les lire correctement et les adapter à ses besoins.
+
+#### Traduction
+Pour fournir une traduction de la video l'attribut kind doit avoir la valeur "subtitles".
+
+Exemple:
+```html
+<track kind="subtitles" src="path/to/your/subtitles.en.vtt" srclang="en" lang="en" label="English" />
+```
+
+#### Sous-titre
+Pour fournir un sous-titrage de la video l'attribut kind doit avoir la valeur "captions".
+Un sous-titrage correct doit permettre de comprendre tout ce qu'il se passe dans la vidéo avec le son coupé, par exemple si une personne réagit à un bruit, ce bruit doit être retranscrit dans les sous-titres.
+
+Exemple:
+```html
+<track kind="captions" src="path/to/your/captions.fr.vtt" srclang="fr" label="Français" />
+```
+
+Pour un sous-titrage de qualité, 3 règles de base:
+- Maximum 2 lignes de 40 caractères par image
+- Afficher pendant minimum 600ms
+- Minimum 160 ms entre 2 sous-titrages
+
+Pour bénéficier de l'ensemble des fonctionnalités du lecteur, voici les différentes options de balisage et propriétés disponibles pour vos fichiers VTT:
+- <v Fanch> : locuteur à l'écran (blanc)
+    - <v.whisp Fanch> : chuchote ou aparté (parenthèses)
+    - <v.group> : phrase dite par plusieurs locuteurs (majuscule)
+- <v.off> : locuteur hors champ ou voix off (jaune, italique)
+- <c.sound> : effet sonore non induit par l'image (rouge)
+    - <c.numeric> : effet sonore provenant d'un téléphone, tv... (asterisque)
+- <c.think Narrateur> : pensée du personnage ou narration (cyan)
+- <c.music> : indication musicale, paroles de chanson (magenta)
+- <lang Breton> : indication de langue étrangère (vert)
+- 00:10.360 --> 00:13.900 align: start/end (droite/gauche)
+- 00:10.360 --> 00:13.900 line: 1 (haut)
+
+### Transcription textuelle
+Pour fournir une transcription textuelle de la video l'attribut kind doit avoir la valeur "descriptions".
+
+Le fichier fourni doit être un fichier JSON contenant une liste de clé/valeur permettant d'afficher la transcription sous forme de liste ordonnée (ex: {"00:10 Clara": "Salut Toto !", "00:13 Toto": "Hey Clara, comment vas-tu ?"})
+
+Une transcription correcte doit permettre de comprendre tout ce qu'il se passe dans la vidéo uniquement à la lecture du texte.
+
+Exemple:
+```html
+<track kind="descriptions" src="path/to/your/transcript.it.json" srclang="it" label="italiano" />
+```
+
+### Exemple complet
+```html
+<div class="meuuhdia">
+    <div class="meuuhdia_wrapper">
+        <video poster="assets/poster.png" preload="metadata" controls disablePictureInPicture>
+            <source src="assets/extrait.mp4" type="video/mp4">
+
+            <track kind="subtitles" src="assets/subtitles.en.vtt" srclang="en" lang="en" label="English" />
+
+            <track kind="captions" src="assets/captions.fr.vtt" srclang="fr" label="Français" />
+            <track kind="captions" src="assets/captions.it.vtt" srclang="it" label="Italiano" />
+
+            <track kind="descriptions" src="assets/transcript.fr.json" srclang="fr" label="français" />
+            <track kind="descriptions" src="assets/transcript.it.json" srclang="it" label="italiano" />
+        </video>
+    </div>
+</div>
+```

package/README.it.md

@@ -0,0 +1,129 @@
+# Meuuhdia
+
+- [english documentation](/README.md)
+- [documentation en français](/README.fr.md)
+
+Lettore video inclusivo che integra le opzioni di controllo classiche.
+È possibile fornire file di traduzione, sottotitoli e trascrizione testuale.
+
+Il lettore consente all'utente di attivare e configurare autonomamente la visualizzazione di questi file.
+Potrà modificare i colori e la dimensione dei sottotitoli secondo le sue esigenze.
+
+Questo lettore è stato progettato con l'obiettivo di creare uno strumento inclusivo.
+Tuttavia, non è stato sottoposto ad alcun audit, quindi ci sono sicuramente aspetti da migliorare. Tutti i feedback sono benvenuti.
+
+## Installazione
+1. Installare il lettore con NPM: `npm install @meuuhdia/video-player`
+2. Attivare il lettore aggiungendo il seguente codice nel file JavaScript principale (o nel punto preciso in cui ne avete bisogno):
+```js
+// senza bundler JS
+import "/node_modules/@meuuhdia/video-player/meuuhdia.js";
+
+// con bundler JS
+import "@meuuhdia/video-player";
+```
+
+## Personalizzazione
+È possibile aggiornare le variabili CSS di Meuuhdia per adattare i colori al proprio design.
+
+### Colori e font del lettore
+```css
+:root {
+    --meuuhdia-color-main: #000000;
+    --meuuhdia-color-secondary: #FFFFFF;
+    --meuuhdia-font-family: "Luciole", consolas;
+}
+```
+
+### Colori predefiniti dei sottotitoli
+```css
+:root {
+    --meuuhdia-cue-color: #ffff00;
+    --meuuhdia-cue-bgcolor: #000000;
+}
+```
+
+## Utilizzo
+Copiare il seguente codice nel punto in cui si desidera visualizzare il lettore video. Si tratta del codice minimo necessario per il funzionamento di Meuuhdia.
+- L'attributo "controls" assicura la disponibilità delle opzioni di controllo nel caso in cui venga visualizzato il lettore nativo (JavaScript disabilitato).
+- L'attributo `[preload='metadata']` permette al lettore Meuuhdia di caricare il video
+- Deve essere fornito almeno un tag `<source>`
+
+```html
+<div class="meuuhdia">
+    <div class="meuuhdia_wrapper">
+        <video preload="metadata" controls>
+            <source src="path/to/your/video.mp4" type="video/mp4">
+        </video>
+    </div>
+</div>
+```
+
+### Sottotitoli e traduzioni
+I file VTT forniti non devono contenere stili CSS. Meuuhdia applica già stili appropriati affinché tutti possano leggerli correttamente e adattarli alle proprie esigenze.
+
+#### Traduzione
+Per fornire una traduzione del video, l'attributo kind deve avere il valore "subtitles".
+
+Esempio:
+```html
+<track kind="subtitles" src="path/to/your/subtitles.en.vtt" srclang="en" lang="en" label="English" />
+```
+
+#### Sottotitoli
+Per fornire sottotitoli per il video, l'attributo kind deve avere il valore "captions".
+Un sottotitolo corretto deve permettere di comprendere tutto ciò che accade nel video con il suono disattivato. Ad esempio, se una persona reagisce a un rumore, quel rumore deve essere trascritto nei sottotitoli.
+
+Esempio:
+```html
+<track kind="captions" src="path/to/your/captions.fr.vtt" srclang="fr" label="Français" />
+```
+
+Per sottotitoli di qualità, 3 regole base:
+- Massimo 2 righe di 40 caratteri per fotogramma
+- Visualizzare per un minimo di 600ms
+- Minimo 160ms tra 2 sottotitoli
+
+Per beneficiare di tutte le funzionalità del lettore, ecco le diverse opzioni di markup e proprietà disponibili per i file VTT:
+- <v Baingio>: parlante a schermo (bianco)
+    - <v.whisp Baingio>: sussurro o a parte (parentesi)
+    - <v.group>: frase detta da più parlanti (maiuscolo)
+- <v.off>: parlante fuori campo o voce fuori campo (giallo, corsivo)
+- <c.sound>: effetto sonoro non indotto dall'immagine (rosso)
+    - <c.numeric>: effetto sonoro proveniente da telefono, TV... (asterisco)
+- <c.think Narratore>: pensiero del personaggio o narrazione (ciano)
+- <c.music>: indicazione musicale, testo di canzoni (magenta)
+- <lang Sardo>: indicazione di lingua straniera (verde)
+- 00:10.360 --> 00:13.900 align: start/end (destra/sinistra)
+- 00:10.360 --> 00:13.900 line: 1 (alto)
+
+### Trascrizione testuale
+Per fornire una trascrizione testuale del video, l'attributo kind deve avere il valore "descriptions".
+
+Il file fornito deve essere un file JSON contenente un elenco di coppie chiave/valore per visualizzare la trascrizione sotto forma di elenco ordinato (es: {"00:10 Clara": "Ciao Toto!", "00:13 Toto": "Ehi Clara, come stai?"})
+
+Una trascrizione corretta deve permettere di comprendere tutto ciò che accade nel video solo dalla lettura del testo.
+
+Esempio:
+```html
+<track kind="descriptions" src="path/to/your/transcript.it.json" srclang="it" label="italiano" />
+```
+
+### Esempio completo
+```html
+<div class="meuuhdia">
+    <div class="meuuhdia_wrapper">
+        <video poster="assets/poster.png" preload="metadata" controls disablePictureInPicture>
+            <source src="assets/extrait.mp4" type="video/mp4">
+
+            <track kind="subtitles" src="assets/subtitles.en.vtt" srclang="en" lang="en" label="English" />
+
+            <track kind="captions" src="assets/captions.fr.vtt" srclang="fr" label="Français" />
+            <track kind="captions" src="assets/captions.it.vtt" srclang="it" label="Italiano" />
+
+            <track kind="descriptions" src="assets/transcript.fr.json" srclang="fr" label="français" />
+            <track kind="descriptions" src="assets/transcript.it.json" srclang="it" label="italiano" />
+        </video>
+    </div>
+</div>
+```

package/README.md

@@ -1,29 +1,32 @@
 # Meuuhdia
 
-Lecteur video inclusif embarquant les options de contrôle classiques.
-Vous pouvez renseigner des fichiers de traduction, sous-titrage et transcription textuelle.
+- [documentation en français](/README.fr.md)
+- [documentazione in italiano](/README.it.md)
 
-Le lecteur permettra à l'utilisateur d'activer et configurer lui même l'affichage de ces fichiers.
-Il pourra modifier les couleurs et taille des sous-titres à sa convenance.
+Inclusive video player with standard control options.
+You can provide translation files, subtitles, and text transcription.
 
-Ce lecteur a été conçu en ayant à coeur de créer un outil inclusif.
-Toutefois, il n'a fait l'objet d'aucun audit, il y a donc certainement des choses a améliorer. Tous les retours sont les bienvenus.
+The player allows users to enable and configure the display of these files themselves.
+They can customize the colors and size of subtitles to their preferences.
+
+This player was designed with a commitment to creating an inclusive tool.
+However, it has not undergone any accessibility audit, so there are certainly areas for improvement. All feedback is welcome.
 
 ## Installation
-1. Installer le lecteur avec NPM : `npm install @meuuhdia/video-player`
-2. Activer le lecteur en ajoutant le code suivant dans votre fichier javascript principal (ou bien à l'endroit précis ou vous en avez besoin) :
+1. Install the player with NPM: `npm install @meuuhdia/video-player`
+2. Enable the player by adding the following code to your main JavaScript file (or wherever you need it):
 ```js
-// sans empaqueteur JS
+// without JS bundler
 import "/node_modules/@meuuhdia/video-player/meuuhdia.js";
 
-// avec empaqueteur JS
+// with JS bundler
 import "@meuuhdia/video-player";
 ```
 
-## Personnalisation
-Vous pouvez mettre à jour les variables CSS Meuuhdia pour adapter les couleurs à votre design.
+## Customization
+You can update Meuuhdia CSS variables to adapt the colors to your design.
 
-### Couleurs et police du lecteur
+### Player colors and font
 ```css
 :root {
     --meuuhdia-color-main: #000000;
@@ -32,7 +35,7 @@ Vous pouvez mettre à jour les variables CSS Meuuhdia pour adapter les couleurs
 }
 ```
 
-### Couleurs par défaut des sous-titres
+### Default subtitle colors
 ```css
 :root {
     --meuuhdia-cue-color: #ffff00;
@@ -40,11 +43,11 @@ Vous pouvez mettre à jour les variables CSS Meuuhdia pour adapter les couleurs
 }
 ```
 
-## Utilisation
-Copiez le code suivant à l'endroit ou vous souhaitez afficher le lecteur vidéo, il s'agit du code minimal nécessaire au fonctionnement de Meuuhdia.
-- L'attribut "controls" permet de s'assurer d'avoir les options de contrôle disponibles dans le cas ou le lecteur natif serait affiché (javascript désactivé).
-- L'attribut `[preload='metadata']` permet au lecteur Meuuhdia de charger la vidéo
-- Au moins une balise `<source>` doit être renseignée
+## Usage
+Copy the following code where you want to display the video player. This is the minimum code required for Meuuhdia to work.
+- The "controls" attribute ensures control options are available if the native player is displayed (JavaScript disabled).
+- The `[preload='metadata']` attribute allows the Meuuhdia player to load the video
+- At least one `<source>` tag must be provided
 
 ```html
 <div class="meuuhdia">
@@ -56,57 +59,57 @@ Copiez le code suivant à l'endroit ou vous souhaitez afficher le lecteur vidéo
 </div>
 ```
 
-### Sous-titres et traductions
-Les fichiers vtt renseignés ne doivent pas contenir de styles css, Meuuhdia applique deja des styles adaptés pour que tout le monde puisse les lire correctement et les adapter à ses besoins.
+### Subtitles and translations
+VTT files provided should not contain CSS styles. Meuuhdia already applies appropriate styles so everyone can read them correctly and adapt them to their needs.
 
-#### Traduction
-Pour fournir une traduction de la video l'attribut kind doit avoir la valeur "subtitles".
+#### Translation
+To provide a translation of the video, the kind attribute must have the value "subtitles".
 
-Exemple:
+Example:
 ```html
 <track kind="subtitles" src="path/to/your/subtitles.en.vtt" srclang="en" lang="en" label="English" />
 ```
 
-#### Sous-titre
-Pour fournir un sous-titrage de la video l'attribut kind doit avoir la valeur "captions".
-Un sous-titrage correct doit permettre de comprendre tout ce qu'il se passe dans la vidéo avec le son coupé, par exemple si une personne réagit à un bruit, ce bruit doit être retranscrit dans les sous-titres.
+#### Captions
+To provide captions for the video, the kind attribute must have the value "captions".
+Proper captions should allow understanding everything happening in the video with the sound off. For example, if a person reacts to a noise, that noise should be transcribed in the captions.
 
-Exemple:
+Example:
 ```html
 <track kind="captions" src="path/to/your/captions.fr.vtt" srclang="fr" label="Français" />
 ```
 
-Pour un sous-titrage de qualité, 3 règles de base:
-- Maximum 2 lignes de 40 caractères par image
-- Afficher pendant minimum 600ms
-- Minimum 160 ms entre 2 sous-titrages
+For quality captions, 3 basic rules:
+- Maximum 2 lines of 40 characters per frame
+- Display for a minimum of 600ms
+- Minimum 160ms between 2 captions
 
-Pour bénéficier de l'ensemble des fonctionnalités du lecteur, voici les différentes options de balisage et propriétés disponibles pour vos fichiers VTT:
-- <v Fanch> : locuteur à l'écran (blanc)
-    - <v.whisp Fanch> : chuchote ou aparté (parenthèses)
-    - <v.group> : phrase dite par plusieurs locuteurs (majuscule)
-- <v.off> : locuteur hors champ ou voix off (jaune, italique)
-- <c.sound> : effet sonore non induit par l'image (rouge)
-    - <c.numeric> : effet sonore provenant d'un téléphone, tv... (asterisque)
-- <c.think Narrateur> : pensée du personnage ou narration (cyan)
-- <c.music> : indication musicale, paroles de chanson (magenta)
-- <lang Breton> : indication de langue étrangère (vert)
-- 00:10.360 --> 00:13.900 align: start/end (droite/gauche)
-- 00:10.360 --> 00:13.900 line: 1 (haut)
+To benefit from all player features, here are the different markup options and properties available for your VTT files:
+- <v John>: on-screen speaker (white)
+    - <v.whisp John>: whisper or aside (parentheses)
+    - <v.group>: sentence spoken by multiple speakers (uppercase)
+- <v.off>: off-screen speaker or voiceover (yellow, italic)
+- <c.sound>: sound effect not induced by the image (red)
+    - <c.numeric>: sound effect from a phone, TV... (asterisk)
+- <c.think Narrator>: character's thought or narration (cyan)
+- <c.music>: musical indication, song lyrics (magenta)
+- <lang Danish>: foreign language indication (green)
+- 00:10.360 --> 00:13.900 align: start/end (right/left)
+- 00:10.360 --> 00:13.900 line: 1 (top)
 
-### Transcription textuelle
-Pour fournir une transcription textuelle de la video l'attribut kind doit avoir la valeur "descriptions".
+### Text transcription
+To provide a text transcription of the video, the kind attribute must have the value "descriptions".
 
-Le fichier fourni doit être un fichier JSON contenant une liste de clé/valeur permettant d'afficher la transcription sous forme de liste ordonnée (ex: {"00:10 Clara": "Salut Toto !", "00:13 Toto": "Hey Clara, comment vas-tu ?"})
+The provided file must be a JSON file containing a list of key/value pairs to display the transcription as an ordered list (e.g., {"00:10 Clara": "Hi Toto!", "00:13 Toto": "Hey Clara, how are you?"})
 
-Une transcription correcte doit permettre de comprendre tout ce qu'il se passe dans la vidéo uniquement à la lecture du texte.
+A proper transcription should allow understanding everything happening in the video from reading the text alone.
 
-Exemple:
+Example:
 ```html
 <track kind="descriptions" src="path/to/your/transcript.it.json" srclang="it" label="italiano" />
 ```
 
-### Exemple complet
+### Complete example
 ```html
 <div class="meuuhdia">
     <div class="meuuhdia_wrapper">
@@ -123,4 +126,4 @@ Exemple:
         </video>
     </div>
 </div>
-```
+```

package/locale/en.js

@@ -0,0 +1,47 @@
+export const locale = {
+    code: "en",
+    controls: {
+        play: "play",
+        pause: "pause",
+        mute: "mute",
+        progress: "Duration",
+        volume: "volume",
+        voldec: "Decrease volume",
+        volinc: "Increase volume",
+        caption: "Captions and subtitles",
+        fullscreen: "Full screen"
+    },
+    datetime: {
+        hour: {sing: "hour", plur: "hours"},
+        minute: {sing: "minute", plur: "minutes"},
+        second: {sing: "second", plur: "seconds"}
+    },
+    cc: {
+        caption: "Captions",
+        subtitles: "Subtitles",
+        descriptions: "Descriptions",
+        selection: "Select a track",
+        customize: "Customize",
+        textColor: "Text color",
+        bgColor: "Background color",
+        textSize: "Size",
+        defaultColorOption: "default (SME)",
+        customColorOption: "custom",
+        bgStyleStroke: "text outline",
+        bgStyleFill: "background box",
+        textSectionLegend: "Text",
+        bgSectionLegend: "Background",
+        transcriptionLabel: "Text transcription",
+        transcriptionBottom: "transcription below video",
+        transcriptionRight: "transcription to the right of video"
+    },
+    words: {
+        enabled: "enabled",
+        disabled: "disabled",
+        disable: "disable",
+        color: "color",
+        size: "size",
+        style: "style",
+        theme: "theme"
+    }
+}

package/locale/fr.js

@@ -4,7 +4,7 @@ export const locale = {
         play: "lecture",
         pause: "pause",
         mute: "désactiver le son",
-        progress: "Duréee",
+        progress: "Durée",
         volume: "volume",
         voldec: "Baisser le volume",
         volinc: "Monter le volume",

package/locale/it.js

@@ -0,0 +1,47 @@
+export const locale = {
+    code: "it",
+    controls: {
+        play: "riproduci",
+        pause: "pausa",
+        mute: "silenzia",
+        progress: "Durata",
+        volume: "volume",
+        voldec: "Diminuisci volume",
+        volinc: "Aumenta volume",
+        caption: "Sottotitoli e traduzioni",
+        fullscreen: "Schermo intero"
+    },
+    datetime: {
+        hour: {sing: "ora", plur: "ore"},
+        minute: {sing: "minuto", plur: "minuti"},
+        second: {sing: "secondo", plur: "secondi"}
+    },
+    cc: {
+        caption: "Sottotitoli",
+        subtitles: "Traduzioni",
+        descriptions: "Descrizioni",
+        selection: "Seleziona una traccia",
+        customize: "Personalizza",
+        textColor: "Colore del testo",
+        bgColor: "Colore di sfondo",
+        textSize: "Dimensione",
+        defaultColorOption: "predefinito (SME)",
+        customColorOption: "personalizzato",
+        bgStyleStroke: "contorno del testo",
+        bgStyleFill: "riquadro",
+        textSectionLegend: "Il testo",
+        bgSectionLegend: "Lo sfondo",
+        transcriptionLabel: "Trascrizione testuale",
+        transcriptionBottom: "trascrizione sotto il video",
+        transcriptionRight: "trascrizione a destra del video"
+    },
+    words: {
+        enabled: "attivato",
+        disabled: "disattivato",
+        disable: "disattiva",
+        color: "colore",
+        size: "dimensione",
+        style: "stile",
+        theme: "tema"
+    }
+}

package/modules/controls.js

@@ -66,6 +66,8 @@ class MeuuhdiaControls {
 
         this.controls.appendChild(fullscreen);
         this.#actionAddEventListeners();
+        this.#setVolumeIcon();
+        if(this.video.hasAttribute("autoplay")) this.#setIconPlayPause(true);
     }
 
     #actionAddEventListeners() {
@@ -102,20 +104,28 @@ class MeuuhdiaControls {
     }
 
     #actionPlayPause() {
-        let play = this.controls.querySelector(".meuuhdia_playpause");
-        let icon = play.querySelector("svg");
-        let label = play.querySelector(".sr-only");
-
         if (this.video.paused || this.video.ended) {
             this.video.play();
-            play.replaceChild(MeuuhdiaIcon.createIcon("pause"), icon);
-            label.textContent = "pause";
             this.#toggleControls();
         } else {
             clearTimeout(this.controlsTimeout);
             this.video.pause();
+        }
+
+        this.#setIconPlayPause();
+    }
+
+    #setIconPlayPause($autoplay = false) {
+        let play = this.controls.querySelector(".meuuhdia_playpause");
+        let icon = play.querySelector("svg");
+        let label = play.querySelector(".sr-only");
+
+        if (!$autoplay & (this.video.paused || this.video.ended)) {
             play.replaceChild(MeuuhdiaIcon.createIcon("play"), icon);
-            label.textContent = "lecture";
+            label.textContent = "lecture";            
+        } else {
+            play.replaceChild(MeuuhdiaIcon.createIcon("pause"), icon);
+            label.textContent = "pause";
         }
     }
 

package/modules/disclosure.js

@@ -21,7 +21,7 @@ export let meuuhdiaDisclosure = {
      * @returns {Node} <li> element
      */
     createDisclosure: function(actionName, actionIconName, actionLabel, contentNodes, iconLabel = null) {
-        let index = document.querySelectorAll("meuuhdia_disclosure").length + 1;
+        let index = document.querySelectorAll(".meuuhdia_disclosure").length + 1;
 
         /**
          * ? Action

package/modules/player.js

@@ -1,5 +1,7 @@
 import { MeuuhdiaControls } from "./controls.js";
-import { locale } from "../locale/fr.js";
+import { locale as locale_en } from "../locale/en.js";
+import { locale as locale_fr } from "../locale/fr.js";
+import { locale as locale_it } from "../locale/it.js";
 
 class MeuuhdiaPlayer {
     /**
@@ -43,8 +45,21 @@ class MeuuhdiaPlayer {
      * @param {Node} meuuhdia 
      */
     constructor(meuuhdia) {
+        let inherit_locale = meuuhdia.closest("[lang]") ? meuuhdia.closest("[lang]").getAttribute("lang").split("-")[0] : "en";
+        let current_locale = meuuhdia.dataset.locale ?? inherit_locale;
+
+        switch(current_locale) {
+            case "fr":
+                this.locale = locale_fr;
+                break;
+            case "it":
+                this.locale = locale_it;
+                break;
+            default:
+                this.locale = locale_en;
+        }
+
         this.meuuhdia = meuuhdia;
-        this.locale = locale;
     }
 
     /**
@@ -72,7 +87,15 @@ class MeuuhdiaPlayer {
         this.wrapper.setAttribute("lang", this.locale.code);
 
         this.video = this.meuuhdia.querySelector("video");
-        this.video.querySelectorAll("track").forEach(track => track.id = track.getAttribute("kind") + "_" + track.getAttribute("srclang"));
+        this.video.querySelectorAll("track").forEach(track => {
+            const allowed_types = ["captions", "subtitles", "descriptions"];
+            var current_type = track.getAttribute("kind");
+            var extension = track.getAttribute("src")?.split(".").pop();
+
+            if(allowed_types.includes(current_type) && ("descriptions" != current_type || "json" == extension)) {
+                track.id = current_type + "_" + track.getAttribute("srclang");
+            } else track.remove();            
+        });
         
         let Controls = new MeuuhdiaControls(this.locale, this.wrapper, this.video);
         this.controls = Controls.controls;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meuuhdia/video-player",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "inclusive video player",
   "type": "module",
   "main": "meuuhdia.js",