feat(i18n): convert to opaque keys (#1848)

packages/html/src/define/video/minimal-skin.tailwind.ts

@@ -1,3 +1,4 @@
+import { audioText, captionsText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';
 import { renderIcon } from '@videojs/icons/render/minimal';
 import {
   badge,
@@ -24,6 +25,7 @@ import {
 } from '@videojs/skins/minimal/tailwind/video.tailwind';
 import { createTemplate } from '@videojs/utils/dom';
 import { cn } from '@videojs/utils/style';
+import { renderText } from '../../i18n/render-text';
 import { safeDefine } from '../safe-define';
 import { SkinElement } from '../skin-element';
 
@@ -140,14 +142,14 @@ function getTemplateHTML() {
 
             <button commandfor="settings-menu" aria-labelledby="settings-label" class="${cn(button.base, button.subtle, button.icon, menu.settingsTrigger, 'media-button--settings')}">
               ${renderIcon('gear', { class: cn(icon, menu.settingsIcon) })}
-              <media-text id="settings-label" class="media-sr-only">Settings</media-text>
+              ${renderText(settingsText, { id: 'settings-label', class: 'media-sr-only' })}
             </button>
             <media-menu id="settings-menu" side="top" align="center" class="${menu.settings}">
               <media-menu-view class="${menu.rootView}">
                 <div class="${menu.group}">
                   <media-menu-item commandfor="settings-quality-menu" type="quality" data-setting="quality" class="${cn(menu.item, 'media-menu__item--submenu')}">
                     ${renderIcon('switches', { class: cn(icon, menu.icon) })}
-                    <media-text>Quality</media-text>
+                    ${renderText(qualityText)}
                     <span class="${menu.hint}">
                       <media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
                       ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}
@@ -155,7 +157,7 @@ function getTemplateHTML() {
                   </media-menu-item>
                   <media-menu-item commandfor="settings-audio-menu" type="audio-track" data-setting="audio-track" class="${cn(menu.item, 'media-menu__item--submenu')}">
                     ${renderIcon('speech', { class: icon })}
-                    <media-text>Audio</media-text>
+                    ${renderText(audioText)}
                     <span class="${menu.hint}">
                       <media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
                       ${renderIcon('chevron', { class: cn(icon, menu.chevron) })}
@@ -163,7 +165,7 @@ function getTemplateHTML() {
                   </media-menu-item>
                   <media-menu-item commandfor="settings-speed-menu" type="playback-rate" data-setting="playback-rate" class="${cn(menu.item, 'media-menu__item--submenu')}">
                     ${renderIcon('speed', { class: cn(icon, menu.icon) })}
-                    <media-text>Speed</media-text>
+                    ${renderText(speedText)}
                     <span class="${menu.hint}">
                       <media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
                       ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}
@@ -171,7 +173,7 @@ function getTemplateHTML() {
                   </media-menu-item>
                   <media-menu-item commandfor="settings-captions-menu" type="captions" data-setting="captions" class="${cn(menu.item, 'media-menu__item--submenu')}">
                     ${renderIcon('captions-off', { class: cn(icon, menu.icon) })}
-                    <media-text>Captions</media-text>
+                    ${renderText(captionsText)}
                     <span class="${menu.hint}">
                       <media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
                       ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}
@@ -183,7 +185,7 @@ function getTemplateHTML() {
               <media-menu id="settings-quality-menu" class="${menu.submenuPanel}">
                 <media-menu-back class="${menu.back}">
                   ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
-                  <media-text>Quality</media-text>
+                  ${renderText(qualityText)}
                 </media-menu-back>
                 <div class="${menu.separator}"></div>
                 <media-quality-radio-group class="${menu.group}">
@@ -205,7 +207,7 @@ function getTemplateHTML() {
               <media-menu id="settings-audio-menu" class="${menu.submenuPanel}">
                 <media-menu-back class="${menu.back}">
                   ${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
-                  <media-text>Audio</media-text>
+                  ${renderText(audioText)}
                 </media-menu-back>
                 <div class="${menu.separator}"></div>
                 <media-audio-track-radio-group class="${menu.group}">
@@ -223,7 +225,7 @@ function getTemplateHTML() {
               <media-menu id="settings-speed-menu" class="${menu.submenuPanel}">
                 <media-menu-back class="${menu.back}">
                   ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
-                  <media-text>Speed</media-text>
+                  ${renderText(speedText)}
                 </media-menu-back>
                 <div class="${menu.separator}"></div>
                 <media-playback-rate-radio-group class="${menu.group}">
@@ -241,7 +243,7 @@ function getTemplateHTML() {
               <media-menu id="settings-captions-menu" class="${menu.submenuPanel}">
                 <media-menu-back class="${menu.back}">
                   ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
-                  <media-text>Captions</media-text>
+                  ${renderText(captionsText)}
                 </media-menu-back>
                 <div class="${menu.separator}"></div>
                 <media-captions-radio-group class="${menu.group}">

packages/html/src/define/video/minimal-skin.ts

@@ -1,5 +1,7 @@
+import { audioText, captionsText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';
 import { renderIcon } from '@videojs/icons/render/minimal';
 import { createShadowStyle, createTemplate } from '@videojs/utils/dom';
+import { renderText } from '../../i18n/render-text';
 import { safeDefine } from '../safe-define';
 import { SkinElement } from '../skin-element';
 import styles from './minimal-skin.css?inline';
@@ -118,14 +120,14 @@ function getTemplateHTML() {
 
             <button commandfor="settings-menu" aria-labelledby="settings-label" class="media-button media-button--subtle media-button--icon media-button--settings">
               ${renderIcon('gear', { class: 'media-icon media-icon--settings' })}
-              <media-text id="settings-label" class="media-sr-only">Settings</media-text>
+              ${renderText(settingsText, { id: 'settings-label', class: 'media-sr-only' })}
             </button>
             <media-menu id="settings-menu" side="top" align="center" class="media-popover media-menu media-menu--settings">
               <media-menu-view class="media-menu__panel">
                 <div class="media-menu__group">
                   <media-menu-item commandfor="settings-quality-menu" type="quality" data-setting="quality" class="media-menu__item media-menu__item--submenu">
                     ${renderIcon('switches', { class: 'media-icon' })}
-                    <media-text>Quality</media-text>
+                    ${renderText(qualityText)}
                     <span class="media-menu__hint">
                       <media-menu-item-value class="media-menu__hint-label"></media-menu-item-value>
                       ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}
@@ -133,7 +135,7 @@ function getTemplateHTML() {
                   </media-menu-item>
                   <media-menu-item commandfor="settings-audio-menu" type="audio-track" data-setting="audio-track" class="media-menu__item media-menu__item--submenu">
                     ${renderIcon('speech', { class: 'media-icon' })}
-                    <media-text>Audio</media-text>
+                    ${renderText(audioText)}
                     <span class="media-menu__hint">
                       <media-menu-item-value class="media-menu__hint-label"></media-menu-item-value>
                       ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}
@@ -141,7 +143,7 @@ function getTemplateHTML() {
                   </media-menu-item>
                   <media-menu-item commandfor="settings-speed-menu" type="playback-rate" data-setting="playback-rate" class="media-menu__item media-menu__item--submenu">
                     ${renderIcon('speed', { class: 'media-icon' })}
-                    <media-text>Speed</media-text>
+                    ${renderText(speedText)}
                     <span class="media-menu__hint">
                       <media-menu-item-value class="media-menu__hint-label"></media-menu-item-value>
                       ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}
@@ -149,7 +151,7 @@ function getTemplateHTML() {
                   </media-menu-item>
                   <media-menu-item commandfor="settings-captions-menu" type="captions" data-setting="captions" class="media-menu__item media-menu__item--submenu">
                     ${renderIcon('captions-off', { class: 'media-icon' })}
-                    <media-text>Captions</media-text>
+                    ${renderText(captionsText)}
                     <span class="media-menu__hint">
                       <media-menu-item-value class="media-menu__hint-label"></media-menu-item-value>
                       ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}
@@ -161,7 +163,7 @@ function getTemplateHTML() {
               <media-menu id="settings-quality-menu" class="media-menu__panel">
                 <media-menu-back class="media-menu__back">
                   ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}
-                  <media-text>Quality</media-text>
+                  ${renderText(qualityText)}
                 </media-menu-back>
                 <div class="media-menu__separator"></div>
                 <media-quality-radio-group class="media-menu__group">
@@ -183,7 +185,7 @@ function getTemplateHTML() {
               <media-menu id="settings-audio-menu" class="media-menu__panel">
                 <media-menu-back class="media-menu__back">
                   ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}
-                  <media-text>Audio</media-text>
+                  ${renderText(audioText)}
                 </media-menu-back>
                 <div class="media-menu__separator"></div>
                 <media-audio-track-radio-group class="media-menu__group">
@@ -201,7 +203,7 @@ function getTemplateHTML() {
               <media-menu id="settings-speed-menu" class="media-menu__panel">
                 <media-menu-back class="media-menu__back">
                   ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}
-                  <media-text>Speed</media-text>
+                  ${renderText(speedText)}
                 </media-menu-back>
                 <div class="media-menu__separator"></div>
                 <media-playback-rate-radio-group class="media-menu__group">
@@ -219,7 +221,7 @@ function getTemplateHTML() {
               <media-menu id="settings-captions-menu" class="media-menu__panel">
                 <media-menu-back class="media-menu__back">
                   ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}
-                  <media-text>Captions</media-text>
+                  ${renderText(captionsText)}
                 </media-menu-back>
                 <div class="media-menu__separator"></div>
                 <media-captions-radio-group class="media-menu__group">

packages/html/src/define/video/skin.tailwind.ts

@@ -1,3 +1,4 @@
+import { audioText, captionsText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';
 import { renderIcon } from '@videojs/icons/render';
 import {
   badge,
@@ -24,6 +25,7 @@ import {
 } from '@videojs/skins/default/tailwind/video.tailwind';
 import { createTemplate } from '@videojs/utils/dom';
 import { cn } from '@videojs/utils/style';
+import { renderText } from '../../i18n/render-text';
 import { safeDefine } from '../safe-define';
 import { SkinElement } from '../skin-element';
 
@@ -134,14 +136,14 @@ function getTemplateHTML() {
 
             <button commandfor="settings-menu" aria-labelledby="settings-label" class="${cn(button.base, button.subtle, button.icon, menu.settingsTrigger, 'media-button--settings')}">
               ${renderIcon('gear', { class: cn(icon, menu.settingsIcon) })}
-              <media-text id="settings-label" class="media-sr-only">Settings</media-text>
+              ${renderText(settingsText, { id: 'settings-label', class: 'media-sr-only' })}
             </button>
             <media-menu id="settings-menu" side="top" align="center" class="${menu.settings}">
               <media-menu-view class="${menu.rootView}">
                 <div class="${menu.group}">
                   <media-menu-item commandfor="settings-quality-menu" type="quality" data-setting="quality" class="${cn(menu.item, 'media-menu__item--submenu')}">
                     ${renderIcon('switches', { class: cn(icon, menu.icon) })}
-                    <media-text>Quality</media-text>
+                    ${renderText(qualityText)}
                     <span class="${menu.hint}">
                       <media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
                       ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}
@@ -149,7 +151,7 @@ function getTemplateHTML() {
                   </media-menu-item>
                   <media-menu-item commandfor="settings-audio-menu" type="audio-track" data-setting="audio-track" class="${cn(menu.item, 'media-menu__item--submenu')}">
                     ${renderIcon('speech', { class: icon })}
-                    <media-text>Audio</media-text>
+                    ${renderText(audioText)}
                     <span class="${menu.hint}">
                       <media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
                       ${renderIcon('chevron', { class: cn(icon, menu.chevron) })}
@@ -157,7 +159,7 @@ function getTemplateHTML() {
                   </media-menu-item>
                   <media-menu-item commandfor="settings-speed-menu" type="playback-rate" data-setting="playback-rate" class="${cn(menu.item, 'media-menu__item--submenu')}">
                     ${renderIcon('speed', { class: cn(icon, menu.icon) })}
-                    <media-text>Speed</media-text>
+                    ${renderText(speedText)}
                     <span class="${menu.hint}">
                       <media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
                       ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}
@@ -165,7 +167,7 @@ function getTemplateHTML() {
                   </media-menu-item>
                   <media-menu-item commandfor="settings-captions-menu" type="captions" data-setting="captions" class="${cn(menu.item, 'media-menu__item--submenu')}">
                     ${renderIcon('captions-off', { class: cn(icon, menu.icon) })}
-                    <media-text>Captions</media-text>
+                    ${renderText(captionsText)}
                     <span class="${menu.hint}">
                       <media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
                       ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}
@@ -177,7 +179,7 @@ function getTemplateHTML() {
               <media-menu id="settings-quality-menu" class="${menu.submenuPanel}">
                 <media-menu-back class="${menu.back}">
                   ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
-                  <media-text>Quality</media-text>
+                  ${renderText(qualityText)}
                 </media-menu-back>
                 <div class="${menu.separator}"></div>
                 <media-quality-radio-group class="${menu.group}">
@@ -199,7 +201,7 @@ function getTemplateHTML() {
               <media-menu id="settings-audio-menu" class="${menu.submenuPanel}">
                 <media-menu-back class="${menu.back}">
                   ${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
-                  <media-text>Audio</media-text>
+                  ${renderText(audioText)}
                 </media-menu-back>
                 <div class="${menu.separator}"></div>
                 <media-audio-track-radio-group class="${menu.group}">
@@ -217,7 +219,7 @@ function getTemplateHTML() {
               <media-menu id="settings-speed-menu" class="${menu.submenuPanel}">
                 <media-menu-back class="${menu.back}">
                   ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
-                  <media-text>Speed</media-text>
+                  ${renderText(speedText)}
                 </media-menu-back>
                 <div class="${menu.separator}"></div>
                 <media-playback-rate-radio-group class="${menu.group}">
@@ -235,7 +237,7 @@ function getTemplateHTML() {
               <media-menu id="settings-captions-menu" class="${menu.submenuPanel}">
                 <media-menu-back class="${menu.back}">
                   ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
-                  <media-text>Captions</media-text>
+                  ${renderText(captionsText)}
                 </media-menu-back>
                 <div class="${menu.separator}"></div>
                 <media-captions-radio-group class="${menu.group}">

packages/html/src/define/video/skin.ts

@@ -1,5 +1,7 @@
+import { audioText, captionsText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';
 import { renderIcon } from '@videojs/icons/render';
 import { createShadowStyle, createTemplate } from '@videojs/utils/dom';
+import { renderText } from '../../i18n/render-text';
 import { safeDefine } from '../safe-define';
 import { SkinElement } from '../skin-element';
 import styles from './skin.css?inline';
@@ -112,14 +114,14 @@ function getTemplateHTML() {
 
             <button commandfor="settings-menu" aria-labelledby="settings-label" class="media-button media-button--subtle media-button--icon media-button--settings">
               ${renderIcon('gear', { class: 'media-icon media-icon--settings' })}
-              <media-text id="settings-label" class="media-sr-only">Settings</media-text>
+              ${renderText(settingsText, { id: 'settings-label', class: 'media-sr-only' })}
             </button>
             <media-menu id="settings-menu" side="top" align="center" class="media-surface media-popover media-menu media-menu--settings">
               <media-menu-view class="media-menu__panel">
                 <div class="media-menu__group">
                   <media-menu-item commandfor="settings-quality-menu" type="quality" data-setting="quality" class="media-menu__item media-menu__item--submenu">
                     ${renderIcon('switches', { class: 'media-icon' })}
-                    <media-text>Quality</media-text>
+                    ${renderText(qualityText)}
                     <span class="media-menu__hint">
                       <media-menu-item-value class="media-menu__hint-label"></media-menu-item-value>
                       ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}
@@ -127,7 +129,7 @@ function getTemplateHTML() {
                   </media-menu-item>
                   <media-menu-item commandfor="settings-audio-menu" type="audio-track" data-setting="audio-track" class="media-menu__item media-menu__item--submenu">
                     ${renderIcon('speech', { class: 'media-icon' })}
-                    <media-text>Audio</media-text>
+                    ${renderText(audioText)}
                     <span class="media-menu__hint">
                       <media-menu-item-value class="media-menu__hint-label"></media-menu-item-value>
                       ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}
@@ -135,7 +137,7 @@ function getTemplateHTML() {
                   </media-menu-item>
                   <media-menu-item commandfor="settings-speed-menu" type="playback-rate" data-setting="playback-rate" class="media-menu__item media-menu__item--submenu">
                     ${renderIcon('speed', { class: 'media-icon' })}
-                    <media-text>Speed</media-text>
+                    ${renderText(speedText)}
                     <span class="media-menu__hint">
                       <media-menu-item-value class="media-menu__hint-label"></media-menu-item-value>
                       ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}
@@ -143,7 +145,7 @@ function getTemplateHTML() {
                   </media-menu-item>
                   <media-menu-item commandfor="settings-captions-menu" type="captions" data-setting="captions" class="media-menu__item media-menu__item--submenu">
                     ${renderIcon('captions-off', { class: 'media-icon' })}
-                    <media-text>Captions</media-text>
+                    ${renderText(captionsText)}
                     <span class="media-menu__hint">
                       <media-menu-item-value class="media-menu__hint-label"></media-menu-item-value>
                       ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}
@@ -155,7 +157,7 @@ function getTemplateHTML() {
               <media-menu id="settings-quality-menu" class="media-menu__panel">
                 <media-menu-back class="media-menu__back">
                   ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}
-                  <media-text>Quality</media-text>
+                  ${renderText(qualityText)}
                 </media-menu-back>
                 <div class="media-menu__separator"></div>
                 <media-quality-radio-group class="media-menu__group">
@@ -177,7 +179,7 @@ function getTemplateHTML() {
               <media-menu id="settings-audio-menu" class="media-menu__panel">
                 <media-menu-back class="media-menu__back">
                   ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}
-                  <media-text>Audio</media-text>
+                  ${renderText(audioText)}
                 </media-menu-back>
                 <div class="media-menu__separator"></div>
                 <media-audio-track-radio-group class="media-menu__group">
@@ -195,7 +197,7 @@ function getTemplateHTML() {
               <media-menu id="settings-speed-menu" class="media-menu__panel">
                 <media-menu-back class="media-menu__back">
                   ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}
-                  <media-text>Speed</media-text>
+                  ${renderText(speedText)}
                 </media-menu-back>
                 <div class="media-menu__separator"></div>
                 <media-playback-rate-radio-group class="media-menu__group">
@@ -213,7 +215,7 @@ function getTemplateHTML() {
               <media-menu id="settings-captions-menu" class="media-menu__panel">
                 <media-menu-back class="media-menu__back">
                   ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}
-                  <media-text>Captions</media-text>
+                  ${renderText(captionsText)}
                 </media-menu-back>
                 <div class="media-menu__separator"></div>
                 <media-captions-radio-group class="media-menu__group">