@meuuhdia/video-player 1.0.0

package/README.md

@@ -0,0 +1,126 @@
+# Meuuhdia
+
+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/icons.js

@@ -0,0 +1,14 @@
+export const icons = {
+    play: "M0 1l27 12.75 52 26 158 79 110 55 34 17L400 201l-36 17.75-62 31-187 93.5-76 38L0 400V1z",
+    pause: "M0 0h150v400H0V0zm250 0h150v400H250V0z",
+    expand: "M0 0h150v50H50v100H0V0zm250 0h150v150h-51V51h-99V0zM0 250h52v98h98v52H0V250zm348 0h52v150H250v-52h98v-98z",
+    compress: "M99 0h51v150H0V99h99V0zm151 0h52v98h98v52H250V0zM0 250h150v150H98v-74-16l-1.6-6.4L88 302H0v-52zm250 0h150v52h-98v98h-52V250z",
+    volume_high: "M55 0h1l-1 1V0zm6 0h1l-1 1V0zm2 0h1l-1 1V0zm2 0h1l-1 1V0zm17 0l7 1-7-1zm10 0l5 1-5-1zm31 0h1l-1 1V0zm2 0h1l-1 1V0zm9 0l6 1-6-1zm22 0l5 1-5-1zM0 125h40c10.31-.02 7.85-1.54 17-9.83l21-19.75 33-31.38L142 35l23-22c3.01-2.97 11.37-10.88 15-12.26C183.12-.45 195.88 0 200 0v400l-24-1c.35-3.03-6.68-8.75-9-10.91L137 360l-66-63-14-13.01c-2.33-2.27-6.25-6.59-9-7.97-2.43-1.21-5.35-1.01-8-1.02H0V125zm339-50h20v250h-20V75zm-45 25h20v200h-20V100zm-43 25h20v150h-20V125zM54 399h1l-1 1v-1zm18 0h1l-1 1v-1zm11 0h1l-1 1v-1zm53 0h1l-1 1v-1z",
+    volume_mid: "M55 0h1l-1 1V0zm6 0h1l-1 1V0zm2 0h1l-1 1V0zm2 0h1l-1 1V0zm17 0l7 1-7-1zm10 0l5 1-5-1zm31 0h1l-1 1V0zm2 0h1l-1 1V0zm9 0l6 1-6-1zm22 0l5 1-5-1zM0 125h40c10.31-.02 7.85-1.54 17-9.83l21-19.75 33-31.38L142 35l23-22c3.01-2.97 11.37-10.88 15-12.26C183.12-.45 195.88 0 200 0v400l-24-1c.35-3.03-6.68-8.75-9-10.91L137 360l-66-63-14-13.01c-2.33-2.27-6.25-6.59-9-7.97-2.43-1.21-5.35-1.01-8-1.02H0V125zm294-25h20v200h-20V100zm-43 25h20v150h-20V125zM54 399h1l-1 1v-1zm18 0h1l-1 1v-1zm11 0h1l-1 1v-1zm53 0h1l-1 1v-1z",
+    volume_off: "M55 0h1l-1 1V0zm6 0h1l-1 1V0zm2 0h1l-1 1V0zm2 0h1l-1 1V0zm17 0l7 1-7-1zm10 0l5 1-5-1zm31 0h1l-1 1V0zm2 0h1l-1 1V0zm9 0l6 1-6-1zm22 0l5 1-5-1zM0 125h40c10.31-.02 7.85-1.54 17-9.83l21-19.75 33-31.38L142 35l23-22c3.01-2.97 11.37-10.88 15-12.26C183.12-.45 195.88 0 200 0v400l-24-1c.35-3.03-6.68-8.75-9-10.91L137 360l-66-63-14-13.01c-2.33-2.27-6.25-6.59-9-7.97-2.43-1.21-5.35-1.01-8-1.02H0V125zm249 0l40 39c2.7 2.7 12.79 13.96 16 13.96 3.21 0 13.3-11.26 16-13.96l40-39 12 12c1.6 1.63 4.96 4.8 5.51 7 1.05 4.18-8.62 12.11-11.51 15l-30 30c-2.27 2.27-9.96 9-9.96 12 0 3.21 11.26 13.3 13.96 16l39 40-20 19-41-41c-2.75-2.75-11.16-12.82-15-11.8-2.6.68-12.48 11.28-15 13.8l-26 26c-4.63 4.63-9.02 10.17-15 13l-18-20 40-40c2.6-2.6 12.96-11.82 12.96-15 0-3-7.69-9.73-9.96-12l-30-30c-2.89-2.89-12.56-10.82-11.51-15 .55-2.2 3.91-5.37 5.51-7l12-12zM54 399h1l-1 1v-1zm18 0h1l-1 1v-1zm11 0h1l-1 1v-1zm53 0h1l-1 1v-1z",
+    volume_low: "M55 0h1l-1 1V0zm6 0h1l-1 1V0zm2 0h1l-1 1V0zm2 0h1l-1 1V0zm17 0l7 1-7-1zm10 0l5 1-5-1zm31 0h1l-1 1V0zm2 0h1l-1 1V0zm9 0l6 1-6-1zm22 0l5 1-5-1zM0 125h40c10.31-.02 7.85-1.54 17-9.83l21-19.75 33-31.38L142 35l23-22c3.01-2.97 11.37-10.88 15-12.26C183.12-.45 195.88 0 200 0v400l-24-1c.35-3.03-6.68-8.75-9-10.91L137 360l-66-63-14-13.01c-2.33-2.27-6.25-6.59-9-7.97-2.43-1.21-5.35-1.01-8-1.02H0V125zm251 0h20v150h-20V125zM54 399h1l-1 1v-1zm18 0h1l-1 1v-1zm11 0h1l-1 1v-1zm53 0h1l-1 1v-1z",
+    caption: "M0 0h400v400H0V0zm388 12H12v376h376V12zM186 260v30c0 1.86.12 5.13-.6 6.79-1.9 4.35-12.05 6.28-16.4 7.21-19.6 4.2-17.7 4.2-38 5.26h-8c-23.22-1.2-43.86-6.53-60.99-23.3-4.2-4.11-9.59-10.86-12.55-15.96-7.17-12.36-14.29-38.61-14.46-53-.15-13-.54-26.11 1.28-39 4.62-32.53 20.37-62.55 50.72-77.73 21.21-10.61 51.99-10.44 75-7.14l16 3.13c2.37.46 5.52 1.02 6.98 3.17 1.24 1.83 1.02 5.39 1.02 7.57.02 7.73.82 26.59-1 33-26.75-9.26-54.95-20.53-80.91-1.9-10.08 7.24-15.79 18.25-18.94 29.9-5.41 20.02-5.95 41.8-1.02 62 3.29 13.48 8.74 25.12 20.87 33.04 17.52 11.42 35.88 10.12 55 4.54 6.71-1.97 19.87-6.95 26-7.58zm181 39l-14 4.52c-25.35 6.53-51.6 8.48-77 1.19-5.72-1.64-9.69-2.59-15-5.58-9.61-5.42-20.95-15.06-27.23-24.13-10.05-14.53-17.74-42.28-17.77-60v-24c.2-16.82 7.93-43.59 16.47-58 2.89-4.87 9.52-12.96 13.54-16.99C266.81 95.23 292.86 90.87 321 91c11.08.05 22.19 2.03 33 4.34 3.07.65 9.25 1.19 11.4 3.38 1.95 1.98 1.59 5.69 1.6 8.28v33l-23-7.57c-19.55-5.58-40.55-7.29-58 5.2-4.45 3.19-11.29 10.59-14.05 15.37-11.84 20.51-12.73 58.75-5.61 81 4.14 12.91 9.41 22.99 21.66 30.12 16.03 9.34 32.6 9.36 50 4.45l29-8.57v39z",
+    caption_off: "M0 0h400v400H0V0zm376 12H12v363c5.97-4.27 13.56-12.56 19-18l31-31c5.85-5.85 19.86-18.37 23-25-14.09-6.29-28.72-19.43-36.1-33-2.53-4.65-6.5-15.7-8.23-21-6.43-19.72-5.9-34.73-5.67-55 .17-14.17 6.94-40.56 13.49-53 8.55-16.24 25.57-32.86 42.51-40.13 21.07-9.04 49.69-9.19 72-5.44 4.73.8 19.65 2.97 21.98 6.79 1.22 2.02 1.02 5.46 1.02 7.78.02 8.21.75 24.79-1 32l-12-4.43c-19.73-7.13-42.32-11.66-62-1.97-3.15 1.56-6.96 3.61-9.58 5.93-4.07 3.62-8.48 8.69-11.11 13.47-10.98 20-11.52 56.14-6.18 78 3.76 15.41 9.88 27.43 24.87 34.74 2.08 1.02 5.68 2.79 8 2.62 4.31-.32 12.73-10.09 16-13.36l45-45 26-26c3.15-3.15 12.28-11.91 14.28-15l7.73-21c6.02-14.52 12.06-24.17 23.99-34.83 6.46-5.77 17.77-13.04 26-15.81 5.11-1.73 16.48-3.54 20-5.92 2.67-1.8 11.16-10.6 14-13.44l25-25 24-23.96c6.37-6.1 11.6-9.5 17-17.04zm12 11l-30 30-37 38c10.79.24 21.47 2.09 32 4.34 3.32.71 9.14 1.21 11.69 3.38 2.54 2.18 2.29 5.24 2.31 8.28v33c-26.22-9.08-56.62-20.54-82-2.37-10.97 7.86-16.1 18.72-19.37 31.37-5.13 19.82-5.57 46.4.71 66 4.01 12.51 8.76 22.19 20.66 29.12 16.08 9.37 33.48 9.4 51 4.73l29-8.85v39l-14 4.26c-7.84 2.17-19.9 4.48-28 5.46-17.39 2.08-45.29-.67-61-8.53-6.9-3.45-12.24-7.9-18-12.91-5.73-4.99-10.26-9.64-14.12-16.28-5.15-8.83-9.71-21.08-12.25-31-4.32-16.88-3.63-27.1-3.63-44l-39 38-37 38 21-4.42 25-7.58v29c0 2.37.2 5.72-1.02 7.79-2.71 4.57-13.98 6.52-18.98 7.63-13.21 2.94-24.27 5.34-38 4.84l-13-.55c-2.92-.35-7.25-1.63-10-.52-2.65 1.07-6.86 5.67-9 7.81l-15 15-36 36c-5.69 5.69-15.64 14.91-20 21h363V23z",
+    transcript_bottom: "M 0.00,0.00 C 0.00,0.00 400.00,0.00 400.00,0.00 400.00,0.00 400.00,400.00 400.00,400.00 400.00,400.00 0.00,400.00 0.00,400.00 0.00,400.00 0.00,0.00 0.00,0.00 Z M 349.00,51.00 C 349.00,51.00 146.00,51.00 146.00,51.00 146.00,51.00 131.00,50.00 131.00,50.00 131.00,50.00 50.00,50.00 50.00,50.00 50.00,50.00 50.00,179.00 50.00,179.00 50.00,179.00 50.00,244.00 50.00,244.00 50.00,244.00 52.00,259.00 52.00,259.00 52.00,259.00 52.00,271.00 52.00,271.00 52.00,271.00 348.00,271.00 348.00,271.00 348.00,271.00 348.00,257.00 348.00,257.00 348.00,257.00 349.00,242.00 349.00,242.00 349.00,242.00 349.00,51.00 349.00,51.00 Z M 348.00,301.00 C 348.00,301.00 52.00,301.00 52.00,301.00 52.00,301.00 52.00,348.00 52.00,348.00 52.00,348.00 143.00,348.00 143.00,348.00 143.00,348.00 158.00,349.00 158.00,349.00 158.00,349.00 244.00,349.00 244.00,349.00 244.00,349.00 259.00,348.00 259.00,348.00 259.00,348.00 348.00,348.00 348.00,348.00 348.00,348.00 348.00,301.00 348.00,301.00 Z",
+    transcript_right: "M 0.00,0.00 C 0.00,0.00 400.00,0.00 400.00,0.00 400.00,0.00 400.00,400.00 400.00,400.00 400.00,400.00 0.00,400.00 0.00,400.00 0.00,400.00 0.00,0.00 0.00,0.00 Z M 271.00,51.00 C 271.00,51.00 146.00,51.00 146.00,51.00 146.00,51.00 131.00,50.00 131.00,50.00 131.00,50.00 50.00,50.00 50.00,50.00 50.00,50.00 50.00,179.00 50.00,179.00 50.00,179.00 50.00,244.00 50.00,244.00 50.00,244.00 52.00,259.00 52.00,259.00 52.00,259.00 52.00,348.00 52.00,348.00 52.00,348.00 143.00,348.00 143.00,348.00 143.00,348.00 158.00,349.00 158.00,349.00 158.00,349.00 244.00,349.00 244.00,349.00 244.00,349.00 254.00,348.04 254.00,348.04 254.00,348.04 271.00,348.04 271.00,348.04 271.00,348.04 271.00,51.00 271.00,51.00 Z M 349.00,51.00 C 349.00,51.00 300.00,51.00 300.00,51.00 300.00,51.00 300.00,348.00 300.00,348.00 300.00,348.00 348.00,348.00 348.00,348.00 348.00,348.00 348.00,257.00 348.00,257.00 348.00,257.00 349.00,242.00 349.00,242.00 349.00,242.00 349.00,51.00 349.00,51.00 Z"
+}

package/locale/fr.js

@@ -0,0 +1,47 @@
+export const locale = {
+    code: "fr",
+    controls: {
+        play: "lecture",
+        pause: "pause",
+        mute: "désactiver le son",
+        progress: "Duréee",
+        volume: "volume",
+        voldec: "Baisser le volume",
+        volinc: "Monter le volume",
+        caption: "Sous titrages et traductions",
+        fullscreen: "Plein écran"
+    },
+    datetime: {
+        hour: {sing: "heure", plur: "heures"},
+        minute: {sing: "minute", plur: "minutes"},
+        second: {sing: "seconde", plur: "secondes"}
+    },
+    cc: {
+        caption: "Sous titrages",
+        subtitles: "Traductions",
+        descriptions: "Descriptions",
+        selection: "Sélectionner une piste",
+        customize: "Personnaliser",
+        textColor: "Couleur du texte",
+        bgColor: "Couleur de fond",
+        textSize: "Taille",
+        defaultColorOption: "par défaut (SME)",
+        customColorOption: "personnalisé",
+        bgStyleStroke: "contour du texte",
+        bgStyleFill: "bandeau",
+        textSectionLegend: "Le texte",
+        bgSectionLegend: "Le fond",
+        transcriptionLabel: "Transcription textuelle",
+        transcriptionBottom: "transcription sous la vidéo",
+        transcriptionRight: "transcription à droite de la vidéo"
+    },
+    words: {
+        enabled: "activé",
+        disabled: "désactivé",
+        disable: "désactiver",
+        color: "couleur",
+        size: "taille",
+        style: "style",
+        theme: "thème"
+    }
+}

package/meuuhdia-css.js

@@ -0,0 +1 @@
+export const styles = ".meuuhdia:has(video>source){margin:0}.meuuhdia:has(video>source) .meuuhdia_wrapper,.meuuhdia:has(video>source) .meuuhdia_transcription{background:var(--meuuhdia-color-secondary, #060606);color:var(--meuuhdia-color-main, #368092)}.meuuhdia:has(video>source) .meuuhdia_video{display:inline-block;vertical-align:baseline}.meuuhdia:has(video>source) p:not(.meuuhdia_caption_cue),.meuuhdia:has(video>source) ul,.meuuhdia:has(video>source) ol,.meuuhdia:has(video>source) li,.meuuhdia:has(video>source) button,.meuuhdia:has(video>source) label,.meuuhdia:has(video>source) input,.meuuhdia:has(video>source) details,.meuuhdia:has(video>source) summary,.meuuhdia:has(video>source) fieldset,.meuuhdia:has(video>source) legend,.meuuhdia:has(video>source) select,.meuuhdia:has(video>source) option{appearance:auto;width:auto;margin:0;padding:0;background:var(--meuuhdia-color-secondary, #060606);color:var(--meuuhdia-color-main, #368092);border-color:var(--meuuhdia-color-main, #368092);border-width:0;border-radius:0;text-transform:none}.meuuhdia:has(video>source) div{width:100%}.meuuhdia:has(video>source) details,.meuuhdia:has(video>source) summary,.meuuhdia:has(video>source) fieldset{display:block}.meuuhdia:has(video>source) button,.meuuhdia:has(video>source) input,.meuuhdia:has(video>source) select{display:inline-block;line-height:normal;font:inherit}.meuuhdia:has(video>source) button[disabled],.meuuhdia:has(video>source) input[disabled],.meuuhdia:has(video>source) select[disabled]{cursor:default}.meuuhdia:has(video>source) button::-moz-focus-inner,.meuuhdia:has(video>source) input::-moz-focus-inner,.meuuhdia:has(video>source) select::-moz-focus-inner{margin:0;padding:0}.meuuhdia:has(video>source) select,.meuuhdia:has(video>source) fieldset,.meuuhdia:has(video>source) input[type=color]{margin:.2em;padding:.2em;border-width:1px;border-style:solid;border-radius:1px}.meuuhdia:has(video>source) button{overflow:visible;-webkit-appearance:button;appearance:button;cursor:pointer}.meuuhdia:has(video>source) input{line-height:normal}.meuuhdia:has(video>source) input[type=color]{height:3em}.list-unstyled{list-style:none;padding:0;margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.sr-only-focusable:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.meuuhdia{width:fit-content;display:flex;flex-wrap:wrap;align-items:flex-start}.meuuhdia:not(.meuuhdia--row){flex-direction:column}.meuuhdia[data-fullscreen=true]{align-items:center;justify-content:center}.meuuhdia .meuuhdia_wrapper{position:relative;max-width:100%;font-family:consolas}.meuuhdia .meuuhdia_wrapper .meuuhdia_video{display:block;max-width:100%;max-height:100%}.meuuhdia[data-fullscreen=true] .meuuhdia_wrapper .meuuhdia_controls{position:fixed}.meuuhdia[data-fullscreen=true] .meuuhdia_wrapper .meuuhdia_caption_container{bottom:0}.meuuhdia[data-fullscreen=true] .meuuhdia_transcription{display:none}.meuuhdia .meuuhdia_controls{bottom:0;left:0;position:absolute;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;width:100%}.meuuhdia .meuuhdia_controls input:focus,.meuuhdia .meuuhdia_controls input:hover,.meuuhdia .meuuhdia_controls button:focus,.meuuhdia .meuuhdia_controls button:hover{outline:2px dashed var(--meuuhdia-color-main, #368092)}.meuuhdia .meuuhdia_controls input{outline-offset:.12em}.meuuhdia .meuuhdia_controls button{border-bottom:2px solid rgba(0,0,0,0);display:inline-block;padding:.3em;margin:.42em .3em .18em}.meuuhdia .meuuhdia_controls button svg{display:block;height:1.2em;width:auto}.meuuhdia .meuuhdia_controls button .meuuhdia_icon-path{fill:var(--meuuhdia-color-main, #368092)}.meuuhdia .meuuhdia_controls button:disabled{opacity:.7}.meuuhdia .meuuhdia_controls .meuuhdia_mute{background-color:var(--meuuhdia-color-secondary, #060606);color:var(--meuuhdia-color-main, #368092)}.meuuhdia .meuuhdia_controls .meuuhdia_mute .meuuhdia_icon-path{fill:var(--meuuhdia-color-main, #368092)}.meuuhdia .meuuhdia_controls .meuuhdia_mute[aria-pressed=true]{border-bottom-color:var(--meuuhdia-color-main, #368092)}.meuuhdia .meuuhdia_controls .meuuhdia_progress{display:flex;flex-direction:column;row-gap:.18em;flex:1;font-size:.84em;margin:.3em;text-align:right;width:100%}.meuuhdia .meuuhdia_controls .meuuhdia_progress label{display:inline-flex;justify-content:flex-end}.meuuhdia .meuuhdia_hide_controls .meuuhdia_controls{height:0;overflow:hidden}.meuuhdia_disclosure{position:relative}.meuuhdia_disclosure .meuuhdia_disclosure_content{position:absolute;bottom:3.6em;right:0;display:none;flex-direction:column;background-color:var(--meuuhdia-color-secondary, #060606);color:var(--meuuhdia-color-main, #368092);border:1px solid var(--meuuhdia-color-main, #368092);border-bottom:0}.meuuhdia_disclosure .meuuhdia_disclosure_content input:focus,.meuuhdia_disclosure .meuuhdia_disclosure_content input:hover,.meuuhdia_disclosure .meuuhdia_disclosure_content button:focus,.meuuhdia_disclosure .meuuhdia_disclosure_content button:hover{outline-color:var(--meuuhdia-color-main, #368092)}.meuuhdia_disclosure .meuuhdia_volume_content{flex-direction:column-reverse;left:0}.meuuhdia_caption .meuuhdia_caption_content{font-size:.78em;padding:.3em;width:max-content;background-color:var(--meuuhdia-color-main, #368092);color:var(--meuuhdia-color-secondary, #060606);border-color:var(--meuuhdia-color-secondary, #060606);overflow-y:scroll;max-height:250px}.meuuhdia_caption .meuuhdia_caption_content details{display:list-item;background-color:var(--meuuhdia-color-secondary, #060606);color:var(--meuuhdia-color-main, #368092)}.meuuhdia_caption .meuuhdia_caption_content details summary{display:list-item;cursor:pointer;background-color:var(--meuuhdia-color-main, #368092);color:var(--meuuhdia-color-secondary, #060606);border-bottom:1px solid var(--meuuhdia-color-secondary, #060606);padding:.3em}.meuuhdia_caption .meuuhdia_caption_content details .meuuhdia_caption_sublist{border-top:1px solid var(--meuuhdia-color-main, #368092)}.meuuhdia_caption .meuuhdia_caption_content details .meuuhdia_caption_sublist button{display:inline-flex;align-items:baseline;column-gap:.3em;width:100%;width:-moz-available;width:-webkit-fill-available;width:fill-available}.meuuhdia_caption .meuuhdia_caption_content details .meuuhdia_caption_sublist button::before{content:\"\";width:.6em;height:.6em;border-radius:50%;flex:0 0 auto}.meuuhdia_caption .meuuhdia_caption_content details .meuuhdia_caption_sublist button[aria-pressed=true]::before{background-color:var(--meuuhdia-color-main, #368092);color:var(--meuuhdia-color-secondary, #060606)}.meuuhdia_caption .meuuhdia_caption_content details .meuuhdia_customize_options li{display:flex;justify-content:space-between;column-gap:.6em;align-items:center;padding:.3em}.meuuhdia_caption .meuuhdia_caption_content details .meuuhdia_customize_options li label,.meuuhdia_caption .meuuhdia_caption_content details .meuuhdia_customize_options li input,.meuuhdia_caption .meuuhdia_caption_content details .meuuhdia_customize_options li select{cursor:pointer}.meuuhdia_caption .meuuhdia_caption_content details .meuuhdia_customize_options li label{text-transform:capitalize;width:30%}.meuuhdia_caption .meuuhdia_caption_content details .meuuhdia_customize_options li input,.meuuhdia_caption .meuuhdia_caption_content details .meuuhdia_customize_options li select{width:70%}.meuuhdia_caption .meuuhdia_caption_content details .meuuhdia_customize_options li:has(>input[disabled]){opacity:.7;pointer-events:none}.meuuhdia_caption .meuuhdia_caption_content details p{font-weight:700;margin:.12em}.meuuhdia_caption .meuuhdia_caption_content details button{background-color:var(--meuuhdia-color-secondary, #060606);color:var(--meuuhdia-color-main, #368092)}.meuuhdia_transcription{border:1px solid currentColor;border-radius:5px;padding:1em;margin-bottom:1em;box-sizing:border-box;width:100%;flex:1}.meuuhdia_transcription_heading{display:flex;align-items:center;justify-content:space-between;gap:1em;margin:0}.meuuhdia_transcription_heading:has(+.meuuhdia_transcription_container){padding-bottom:.5em;border-bottom:1px solid currentColor}.meuuhdia_transcription_heading_lang{display:flex;flex-wrap:wrap;gap:.5em;align-items:baseline}.meuuhdia_transcription_heading_lang label{flex:1}.meuuhdia_transcription_heading_lang select{padding:.5em;border-color:currentColor;border-radius:3px}.meuuhdia_transcription_heading_side{display:inline-flex;gap:.5em}.meuuhdia_transcription_heading_side button{border:0;border-bottom:2px solid rgba(0,0,0,0);color:currentColor;display:inline-block;padding:.3em;margin:.42em .3em .18em}.meuuhdia_transcription_heading_side button svg{display:block;height:1.2em;width:auto}.meuuhdia_transcription_heading_side button .meuuhdia_icon-path{fill:currentColor}.meuuhdia_transcription_container{max-height:50vh;overflow-y:scroll}.meuuhdia_transcription_container .meuuhdia_transcription_info{display:block;margin:1em .5em .5em;font-size:smaller;text-decoration:underline;border:none}.meuuhdia .meuuhdia_range_horizontal{-webkit-appearance:none;appearance:none;background:rgba(0,0,0,0);box-sizing:border-box;cursor:pointer;width:100%;height:1.8em}.meuuhdia .meuuhdia_range_horizontal::-webkit-slider-runnable-track{border:0;height:.6em;border-radius:.12em;background-color:var(--meuuhdia-color-main, #368092)}.meuuhdia .meuuhdia_range_horizontal::-moz-range-track{border:0;height:.6em;border-radius:.12em;background-color:var(--meuuhdia-color-main, #368092)}.meuuhdia .meuuhdia_range_horizontal::-webkit-slider-thumb{margin-top:-0.6em;appearance:none;background-color:var(--meuuhdia-color-secondary, #060606);border:2px solid var(--meuuhdia-color-main, #368092);width:.6em;height:1.8em;border-radius:10%}@media(max-width: 400px){.meuuhdia .meuuhdia_range_horizontal::-webkit-slider-thumb{height:.72em}}.meuuhdia .meuuhdia_range_horizontal::-moz-range-thumb{appearance:none;background-color:var(--meuuhdia-color-secondary, #060606);border:2px solid var(--meuuhdia-color-main, #368092);width:.6em;height:1.8em;border-radius:10%}@media(max-width: 400px){.meuuhdia .meuuhdia_range_horizontal::-moz-range-thumb{height:.72em}}.meuuhdia .meuuhdia_range_vertical{-webkit-appearance:none;appearance:none;background:rgba(0,0,0,0);box-sizing:border-box;transform:rotate(270deg);cursor:pointer;width:5.4em;height:1.2em;margin:3em 0 2.4em -1.5em}.meuuhdia .meuuhdia_range_vertical::-webkit-slider-runnable-track{border:0;height:.48em;width:5.4em;background-color:var(--meuuhdia-color-main, #368092)}.meuuhdia .meuuhdia_range_vertical::-moz-range-track{border:0;height:.48em;width:5.4em;background-color:var(--meuuhdia-color-main, #368092)}.meuuhdia .meuuhdia_range_vertical::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-0.36em;appearance:none;background-color:var(--meuuhdia-color-secondary, #060606);border:2px solid var(--meuuhdia-color-main, #368092);width:.6em;height:1.2em;border-radius:10%}.meuuhdia .meuuhdia_range_vertical::-moz-range-thumb{appearance:none;background-color:var(--meuuhdia-color-secondary, #060606);border:2px solid var(--meuuhdia-color-main, #368092);width:.6em;height:1.2em;border-radius:10%}.meuuhdia_caption_container{position:absolute;bottom:3.6em;left:1%;right:1%;display:flex;flex-direction:column;align-items:stretch;background-color:rgba(0,0,0,0);color:#fff}.meuuhdia_caption_container *{background-color:rgba(0,0,0,0);color:unset}@media(max-width: 400px){.meuuhdia_caption_container{bottom:2.7em}}.meuuhdia_caption_container .meuuhdia_caption_cue{display:inline-flex;flex-direction:column;align-self:center;padding:.3em;margin:0;width:fit-content;font:normal var(--meuuhdia-cue-fontsize, 100%) var(--meuuhdia-font-family, \"consolas\");font-size:var(--meuuhdia-cue-fontsize, 100%)}.meuuhdia_caption_container .meuuhdia_caption_cue .off{font-style:italic}.meuuhdia_caption_container .meuuhdia_caption_cue .group{text-transform:uppercase;font-size:85%}.meuuhdia_caption_container .meuuhdia_caption_cue .numeric::before{content:\"*\"}.meuuhdia_caption_container .meuuhdia_caption_cue .music::before,.meuuhdia_caption_container .meuuhdia_caption_cue .music::after{content:\"♪\"}.meuuhdia_caption_container .meuuhdia_caption_cue .whisp::before{content:\"( \"}.meuuhdia_caption_container .meuuhdia_caption_cue .whisp::after{content:\" )\"}.meuuhdia_caption_container .meuuhdia_caption_cue[data-align=start]{align-self:flex-start}.meuuhdia_caption_container .meuuhdia_caption_cue[data-align=end]{align-self:flex-end}.meuuhdia_caption_container:not(.meuuhdia_custom_colors):not(.meuuhdia_caption_cue--fill) .meuuhdia_caption_cue{text-shadow:2px 0 #000,-2px 0 #000,0 2px #000,0 -2px #000,1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000}.meuuhdia_caption_container:not(.meuuhdia_custom_colors).meuuhdia_caption_cue--fill .meuuhdia_caption_cue{background:#000}.meuuhdia_caption_container:not(.meuuhdia_custom_colors) .meuuhdia_caption_cue .off{color:#e9e955}.meuuhdia_caption_container:not(.meuuhdia_custom_colors) .meuuhdia_caption_cue .sound,.meuuhdia_caption_container:not(.meuuhdia_custom_colors) .meuuhdia_caption_cue .numeric{color:#ff5f5f}.meuuhdia_caption_container:not(.meuuhdia_custom_colors) .meuuhdia_caption_cue .think{color:#25c5c5}.meuuhdia_caption_container:not(.meuuhdia_custom_colors) .meuuhdia_caption_cue .music{color:#ff28ff}.meuuhdia_caption_container:not(.meuuhdia_custom_colors) .meuuhdia_caption_cue span[lang]{color:#28c928}.meuuhdia_caption_container:has(.align-top){bottom:unset;top:0}.meuuhdia_caption_container.meuuhdia_custom_colors .meuuhdia_caption_cue{color:var(--meuuhdia-cue-color, #ffff00)}.meuuhdia_caption_container.meuuhdia_custom_colors:not(.meuuhdia_caption_cue--fill) .meuuhdia_caption_cue{text-shadow:2px 0 var(--meuuhdia-cue-bgcolor, #000000),-2px 0 var(--meuuhdia-cue-bgcolor, #000000),0 2px var(--meuuhdia-cue-bgcolor, #000000),0 -2px var(--meuuhdia-cue-bgcolor, #000000),1px 1px var(--meuuhdia-cue-bgcolor, #000000),-1px -1px var(--meuuhdia-cue-bgcolor, #000000),1px -1px var(--meuuhdia-cue-bgcolor, #000000),-1px 1px var(--meuuhdia-cue-bgcolor, #000000)}.meuuhdia_caption_container.meuuhdia_custom_colors.meuuhdia_caption_cue--fill .meuuhdia_caption_cue{background:var(--meuuhdia-cue-bgcolor, #000000)}.meuuhdia_hide_controls .meuuhdia_caption_container:not([data-line=\"1\"]){bottom:0}\n";

package/meuuhdia.js

@@ -0,0 +1,34 @@
+import { MeuuhdiaPlayer } from "./modules/player.js";
+import { styles } from "./meuuhdia-css.js";
+
+const Meuuhdia = {
+	/**
+	 * @type {NodeList}
+	 */
+	videoContainer: document.querySelectorAll(".meuuhdia"),
+
+	init() {
+		Meuuhdia.importStyles();
+
+		Meuuhdia.videoContainer.forEach(meuuhdia => {
+			let baseFontSize = 16 / parseInt(window.getComputedStyle(meuuhdia).getPropertyValue("font-size")) + "em";
+			meuuhdia.style.fontSize = baseFontSize;
+
+			const Player = new MeuuhdiaPlayer(meuuhdia);
+			Player.initPlayer()
+		});
+	},
+	importStyles() {
+		let meuuhdiaLink = document.createElement("style");
+		meuuhdiaLink.textContent = styles;
+		document.head.appendChild(meuuhdiaLink);
+	}
+}
+
+if ("undefined" !== typeof window) {
+	if ("loading" === document.readyState) {
+		document.addEventListener("DOMContentLoaded", Meuuhdia.init);
+	} else Meuuhdia.init();
+}
+
+export {Meuuhdia as default};