npm - @videojs/html - Versions diffs - 10.0.0-beta.30 → 10.0.0-beta.31 - Mend

@videojs/html 10.0.0-beta.30 → 10.0.0-beta.31

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.

Files changed (357) hide show

package/dist/dev/define/live-video/minimal-skin.tailwind.js CHANGED Viewed

@@ -86,7 +86,7 @@ function getTemplateHTML() {
                 <media-captions-radio-group class="${menu.group}">
                   <template>
                     <media-menu-radio-item class="${menu.item}">
-                      <span data-part="label"></span>
+                      <bdi data-part="label" dir="auto"></bdi>
                       <media-menu-item-indicator force-mount class="${menu.indicator}">
                         ${renderIcon("check", { class: cn(icon, menu.icon) })}
                       </media-menu-item-indicator>

package/dist/dev/define/live-video/minimal-skin.tailwind.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/live-video/minimal-skin.tailwind.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render/minimal';\nimport {\n bufferingIndicator,\n button,\n buttonGroupEnd,\n buttonGroupStart,\n container,\n controls,\n error,\n icon,\n iconState,\n inputIndicatorOverlay,\n menu,\n overlay,\n popup,\n poster,\n slider,\n spacer,\n statusIndicator,\n volumeIndicator,\n} from '@videojs/skins/minimal/tailwind/video.tailwind';\nimport { createTemplate } from '@videojs/utils/dom';\nimport { cn } from '@videojs/utils/style';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\n\n// Register the live video player, container, and minimal UI custom elements.\nimport './minimal-ui';\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"${container(true)}\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <media-poster class=\"${poster(true)}\">\n <slot name=\"poster\">\n <img alt=\"\" decoding=\"async\">\n </slot>\n </media-poster>\n\n <media-buffering-indicator class=\"${bufferingIndicator}\">\n ${renderIcon('spinner')}\n </media-buffering-indicator>\n\n <media-error-dialog class=\"${error.root}\">\n <div class=\"${error.dialog}\">\n <div class=\"${error.content}\">\n <media-alert-dialog-title class=\"${error.title}\"></media-alert-dialog-title>\n <media-alert-dialog-description class=\"${error.description}\"></media-alert-dialog-description>\n </div>\n <div class=\"${error.actions}\">\n <media-alert-dialog-close class=\"${cn(button.base, button.primary)}\"></media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <media-controls data-controls=\"\" class=\"${controls}\">\n <media-tooltip-group>\n <div class=\"${buttonGroupStart}\">\n <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.play.button)}\">\n ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-live-button class=\"${cn(button.base, button.subtle, button.live)}\"></media-live-button>\n\n <media-mute-button commandfor=\"live-video-volume-popover\" class=\"${cn(button.base, button.subtle, button.icon, iconState.mute.button)}\">\n ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n </media-mute-button>\n\n <media-popover id=\"live-video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"right\" class=\"${cn(popup.volume)}\">\n <media-volume-slider class=\"${slider.root}\" orientation=\"horizontal\" thumb-alignment=\"edge\">\n <media-slider-track class=\"${slider.track}\">\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"${slider.thumb.base}\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n </div>\n\n <div class=\"${spacer}\" aria-hidden=\"true\"></div>\n\n <div class=\"${buttonGroupEnd}\">\n <media-captions-button menu-for=\"captions-menu\" commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.captions.button)}\">\n ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n </media-captions-button>\n <media-menu id=\"captions-menu\" side=\"top\" align=\"center\" class=\"${cn(popup.popover, menu.root)}\">\n <media-captions-radio-group class=\"${menu.group}\">\n <template>\n <media-menu-radio-item class=\"${menu.item}\">\n <span data-part=\"label\"></span>\n <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n ${renderIcon('check', { class: cn(icon, menu.icon) })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-captions-radio-group>\n </media-menu>\n <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n <media-cast-button commandfor=\"cast-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.cast.button)}\">\n ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}\n ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}\n </media-cast-button>\n <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n <media-airplay-button commandfor=\"airplay-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}\">\n ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}\n ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}\n </media-airplay-button>\n <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.pip.button)}\">\n ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}\n ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}\n </media-pip-button>\n <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}\">\n ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n </media-fullscreen-button>\n <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"${overlay}\"></div>\n\n <!-- Hotkeys -->\n <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n\n <!-- Gestures -->\n <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n\n <!-- Input Indicators -->\n <media-status-announcer class=\"sr-only\"></media-status-announcer>\n <div class=\"${inputIndicatorOverlay}\">\n <media-volume-indicator hidden class=\"${volumeIndicator.root}\">\n <media-volume-indicator-fill class=\"${volumeIndicator.content}\">\n ${renderIcon('volume-high', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.high) })}\n ${renderIcon('volume-low', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.low) })}\n ${renderIcon('volume-off', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.off) })}\n <div aria-hidden=\"true\" class=\"${volumeIndicator.progress}\"></div>\n <media-volume-indicator-value class=\"${volumeIndicator.value}\"></media-volume-indicator-value>\n </media-volume-indicator-fill>\n </media-volume-indicator>\n <media-status-indicator\n hidden\n actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n class=\"${statusIndicator.root}\"\n >\n <div class=\"${statusIndicator.content}\">\n ${renderIcon('captions-on', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOn) })}\n ${renderIcon('captions-off', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOff) })}\n ${renderIcon('fullscreen-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenEnter) })}\n ${renderIcon('fullscreen-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenExit) })}\n ${renderIcon('pip-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipEnter) })}\n ${renderIcon('pip-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipExit) })}\n <media-status-indicator-value class=\"${statusIndicator.value}\"></media-status-indicator-value>\n </div>\n </media-status-indicator>\n <media-status-indicator hidden actions=\"togglePaused\" class=\"${statusIndicator.playback.root}\">\n ${renderIcon('play', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.play) })}\n ${renderIcon('pause', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.pause) })}\n </media-status-indicator>\n </div>\n </media-container>\n `;\n}\n\nexport class MinimalLiveVideoSkinTailwindElement extends SkinElement {\n static readonly tagName = 'live-video-minimal-skin-tailwind';\n static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(MinimalLiveVideoSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [MinimalLiveVideoSkinTailwindElement.tagName]: MinimalLiveVideoSkinTailwindElement;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"minimal-skin.tailwind.js","names":[],"sources":["../../../../src/define/live-video/minimal-skin.tailwind.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render/minimal';\nimport {\n bufferingIndicator,\n button,\n buttonGroupEnd,\n buttonGroupStart,\n container,\n controls,\n error,\n icon,\n iconState,\n inputIndicatorOverlay,\n menu,\n overlay,\n popup,\n poster,\n slider,\n spacer,\n statusIndicator,\n volumeIndicator,\n} from '@videojs/skins/minimal/tailwind/video.tailwind';\nimport { createTemplate } from '@videojs/utils/dom';\nimport { cn } from '@videojs/utils/style';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\n\n// Register the live video player, container, and minimal UI custom elements.\nimport './minimal-ui';\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"${container(true)}\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <media-poster class=\"${poster(true)}\">\n <slot name=\"poster\">\n <img alt=\"\" decoding=\"async\">\n </slot>\n </media-poster>\n\n <media-buffering-indicator class=\"${bufferingIndicator}\">\n ${renderIcon('spinner')}\n </media-buffering-indicator>\n\n <media-error-dialog class=\"${error.root}\">\n <div class=\"${error.dialog}\">\n <div class=\"${error.content}\">\n <media-alert-dialog-title class=\"${error.title}\"></media-alert-dialog-title>\n <media-alert-dialog-description class=\"${error.description}\"></media-alert-dialog-description>\n </div>\n <div class=\"${error.actions}\">\n <media-alert-dialog-close class=\"${cn(button.base, button.primary)}\"></media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <media-controls data-controls=\"\" class=\"${controls}\">\n <media-tooltip-group>\n <div class=\"${buttonGroupStart}\">\n <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.play.button)}\">\n ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-live-button class=\"${cn(button.base, button.subtle, button.live)}\"></media-live-button>\n\n <media-mute-button commandfor=\"live-video-volume-popover\" class=\"${cn(button.base, button.subtle, button.icon, iconState.mute.button)}\">\n ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n </media-mute-button>\n\n <media-popover id=\"live-video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"right\" class=\"${cn(popup.volume)}\">\n <media-volume-slider class=\"${slider.root}\" orientation=\"horizontal\" thumb-alignment=\"edge\">\n <media-slider-track class=\"${slider.track}\">\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"${slider.thumb.base}\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n </div>\n\n <div class=\"${spacer}\" aria-hidden=\"true\"></div>\n\n <div class=\"${buttonGroupEnd}\">\n <media-captions-button menu-for=\"captions-menu\" commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.captions.button)}\">\n ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n </media-captions-button>\n <media-menu id=\"captions-menu\" side=\"top\" align=\"center\" class=\"${cn(popup.popover, menu.root)}\">\n <media-captions-radio-group class=\"${menu.group}\">\n <template>\n <media-menu-radio-item class=\"${menu.item}\">\n <bdi data-part=\"label\" dir=\"auto\"></bdi>\n <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n ${renderIcon('check', { class: cn(icon, menu.icon) })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-captions-radio-group>\n </media-menu>\n <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n <media-cast-button commandfor=\"cast-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.cast.button)}\">\n ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}\n ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}\n </media-cast-button>\n <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n <media-airplay-button commandfor=\"airplay-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}\">\n ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}\n ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}\n </media-airplay-button>\n <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.pip.button)}\">\n ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}\n ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}\n </media-pip-button>\n <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}\">\n ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n </media-fullscreen-button>\n <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"${overlay}\"></div>\n\n <!-- Hotkeys -->\n <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n\n <!-- Gestures -->\n <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n\n <!-- Input Indicators -->\n <media-status-announcer class=\"sr-only\"></media-status-announcer>\n <div class=\"${inputIndicatorOverlay}\">\n <media-volume-indicator hidden class=\"${volumeIndicator.root}\">\n <media-volume-indicator-fill class=\"${volumeIndicator.content}\">\n ${renderIcon('volume-high', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.high) })}\n ${renderIcon('volume-low', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.low) })}\n ${renderIcon('volume-off', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.off) })}\n <div aria-hidden=\"true\" class=\"${volumeIndicator.progress}\"></div>\n <media-volume-indicator-value class=\"${volumeIndicator.value}\"></media-volume-indicator-value>\n </media-volume-indicator-fill>\n </media-volume-indicator>\n <media-status-indicator\n hidden\n actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n class=\"${statusIndicator.root}\"\n >\n <div class=\"${statusIndicator.content}\">\n ${renderIcon('captions-on', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOn) })}\n ${renderIcon('captions-off', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOff) })}\n ${renderIcon('fullscreen-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenEnter) })}\n ${renderIcon('fullscreen-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenExit) })}\n ${renderIcon('pip-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipEnter) })}\n ${renderIcon('pip-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipExit) })}\n <media-status-indicator-value class=\"${statusIndicator.value}\"></media-status-indicator-value>\n </div>\n </media-status-indicator>\n <media-status-indicator hidden actions=\"togglePaused\" class=\"${statusIndicator.playback.root}\">\n ${renderIcon('play', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.play) })}\n ${renderIcon('pause', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.pause) })}\n </media-status-indicator>\n </div>\n </media-container>\n `;\n}\n\nexport class MinimalLiveVideoSkinTailwindElement extends SkinElement {\n static readonly tagName = 'live-video-minimal-skin-tailwind';\n static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(MinimalLiveVideoSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [MinimalLiveVideoSkinTailwindElement.tagName]: MinimalLiveVideoSkinTailwindElement;\n }\n}\n"],"mappings":"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"}

package/dist/dev/define/live-video/skin.css CHANGED Viewed

@@ -305,6 +305,10 @@ media-container {
   container: media-controls / inline-size;
   text-shadow: 0 1px 0 var(--shadow-current-color);
   border-radius: calc(Infinity * 1px);
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 .media-default-skin .media-time-controls {
@@ -314,6 +318,10 @@ media-container {
   align-items: center;
   container: media-time-controls / inline-size;
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
   > .media-time:last-child {
     @container media-time-controls (width < 16rem) {
       display: none;
@@ -518,6 +526,10 @@ media-container {
   display: flex;
   gap: 1px;
   align-items: center;
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 .media-default-skin .media-badge {
@@ -540,10 +552,15 @@ media-container {
   width: var(--media-icon-size);
   height: var(--media-icon-size);
 }
-.media-default-skin .media-icon--flipped {
+.media-default-skin .media-icon--flipped,
+.media-default-skin:dir(rtl) .media-menu__chevron {
   scale: -1 1;
 }
+.media-default-skin:dir(rtl) .media-menu__chevron.media-icon--flipped {
+  scale: 1 1;
+}
 .media-default-skin media-poster,
 .media-default-skin > img {
   position: absolute;
@@ -1184,6 +1201,10 @@ media-container {
       filter: blur(8px);
       translate: 100% 0;
     }
+    &:dir(rtl):where([data-starting-style], [data-ending-style]) {
+      translate: -100% 0;
+    }
   }
   .media-menu__separator {
@@ -1226,7 +1247,7 @@ media-container {
     gap: calc(var(--spacing) * 1.5);
     align-items: center;
     padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
-    text-align: left;
+    text-align: start;
     text-shadow: 0 1px 0 var(--shadow-current-color);
     cursor: pointer;
     user-select: none;
@@ -1270,8 +1291,7 @@ media-container {
   .media-menu__indicator {
     flex-shrink: 0;
-    margin-right: calc(var(--spacing) * -1);
-    margin-left: auto;
+    margin-inline: auto calc(var(--spacing) * -1);
     opacity: 0;
     .media-icon {
@@ -1308,8 +1328,8 @@ media-container {
   }
   .media-menu__tier {
+    padding-inline-start: calc(var(--spacing) * 0.5);
     padding-top: 1px;
-    padding-left: calc(var(--spacing) * 0.5);
     font-size: var(--font-size-tiny);
     font-weight: 600;
     line-height: 1;
@@ -1326,8 +1346,8 @@ media-container {
     gap: calc(var(--spacing) * 1);
     align-items: center;
     min-width: 0;
-    padding-left: calc(var(--spacing) * 2);
-    margin-left: auto;
+    padding-inline-start: calc(var(--spacing) * 2);
+    margin-inline-start: auto;
     color: oklch(from currentColor l c h / 0.65);
   }
@@ -1367,6 +1387,10 @@ media-container {
       translate: -100% 0;
     }
+    &:dir(rtl)[data-submenu-expanded="true"] > :not([data-submenu]) {
+      translate: 100% 0;
+    }
     /* WebKit can restart the covered-content transition while the
        anchor-positioned highlight remains active. */
     &[data-submenu-expanded] > :not([data-submenu])::before {

package/dist/dev/define/live-video/skin.js CHANGED Viewed

@@ -77,7 +77,7 @@ function getTemplateHTML() {
                 <media-captions-radio-group class="media-menu__group">
                   <template>
                     <media-menu-radio-item class="media-menu__item">
-                      <span data-part="label"></span>
+                      <bdi data-part="label" dir="auto"></bdi>
                       <media-menu-item-indicator force-mount class="media-menu__indicator">
                         ${renderIcon("check", { class: "media-icon" })}
                       </media-menu-item-indicator>

package/dist/dev/define/live-video/skin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/define/live-video/skin.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './skin.css?inline';\n\n// Register the live video player, container, and all UI custom elements.\nimport './ui';\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"media-default-skin media-default-skin--video\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <media-poster>\n <slot name=\"poster\">\n <img alt=\"\" decoding=\"async\">\n </slot>\n </media-poster>\n\n <media-buffering-indicator class=\"media-buffering-indicator\">\n ${renderIcon('spinner', { class: 'media-icon' })}\n </media-buffering-indicator>\n\n <media-error-dialog class=\"media-error\">\n <div class=\"media-error__dialog media-surface\">\n <div class=\"media-error__content\">\n <media-alert-dialog-title class=\"media-error__title\"></media-alert-dialog-title>\n <media-alert-dialog-description class=\"media-error__description\"></media-alert-dialog-description>\n </div>\n <div class=\"media-error__actions\">\n <media-alert-dialog-close class=\"media-button media-button--primary\"></media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <media-controls class=\"media-surface media-controls media-controls--root\">\n <media-tooltip-group>\n <div class=\"media-surface media-controls media-controls--primary\">\n <div class=\"media-button-group\">\n <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-live-button class=\"media-button media-button--subtle media-button--live\"></media-live-button>\n </div>\n\n <div class=\"media-time-controls\" aria-hidden=\"true\"></div>\n\n <div class=\"media-button-group\">\n <media-mute-button commandfor=\"live-video-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n </media-mute-button>\n\n <media-popover id=\"live-video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface media-popover media-popover--volume\">\n <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n <media-slider-track class=\"media-slider__track\">\n <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n\n <media-captions-button menu-for=\"captions-menu\" commandfor=\"captions-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--captions\">\n ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n </media-captions-button>\n <media-menu id=\"captions-menu\" side=\"top\" align=\"center\" class=\"media-surface media-popover media-menu media-menu--captions\">\n <media-captions-radio-group class=\"media-menu__group\">\n <template>\n <media-menu-radio-item class=\"media-menu__item\">\n <span data-part=\"label\"></span>\n <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n ${renderIcon('check', { class: 'media-icon' })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-captions-radio-group>\n </media-menu>\n <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-cast-button commandfor=\"cast-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--cast\">\n ${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}\n ${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}\n </media-cast-button>\n <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-airplay-button commandfor=\"airplay-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--airplay\">\n ${renderIcon('airplay-enter', { class: 'media-icon media-icon--airplay-enter' })}\n ${renderIcon('airplay-exit', { class: 'media-icon media-icon--airplay-exit' })}\n </media-airplay-button>\n <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--pip\">\n ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n </media-pip-button>\n <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--fullscreen\">\n ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n </media-fullscreen-button>\n <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n\n </div>\n </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"media-overlay\"></div>\n\n <!-- Hotkeys -->\n <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n\n <!-- Gestures -->\n <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n\n <!-- Input Indicators -->\n <media-status-announcer class=\"media-sr-only\"></media-status-announcer>\n <div class=\"media-input-indicator-overlay\">\n <media-volume-indicator hidden class=\"media-surface media-volume-indicator\">\n <media-volume-indicator-fill class=\"media-volume-indicator__content\">\n ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n <media-volume-indicator-value class=\"media-volume-indicator__value\"></media-volume-indicator-value>\n </media-volume-indicator-fill>\n </media-volume-indicator>\n <media-status-indicator\n hidden\n actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n class=\"media-surface media-status-indicator media-status-indicator--state\"\n >\n <div class=\"media-status-indicator__content\">\n ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n <media-status-indicator-value class=\"media-status-indicator__value\"></media-status-indicator-value>\n </div>\n </media-status-indicator>\n <media-status-indicator hidden actions=\"togglePaused\" class=\"media-status-indicator media-status-indicator--playback\">\n ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n </media-status-indicator>\n </div>\n </media-container>\n `;\n}\n\nexport class LiveVideoSkinElement extends SkinElement {\n static readonly tagName = 'live-video-skin';\n static styles = createShadowStyle(styles);\n static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(LiveVideoSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [LiveVideoSkinElement.tagName]: LiveVideoSkinElement;\n }\n}\n"],"mappings":";;;;;;;AASA,SAAS,kBAAkB;CACzB,OAAgB;;;;;;;;;;;;;UAaR,WAAW,WAAW,EAAE,OAAO,aAAa,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;kBAoBvC,WAAW,WAAW,EAAE,OAAO,iCAAiC,CAAC,EAAE;kBACnE,WAAW,QAAQ,EAAE,OAAO,8BAA8B,CAAC,EAAE;kBAC7D,WAAW,SAAS,EAAE,OAAO,+BAA+B,CAAC,EAAE;;;;;;;;;;;;;;kBAc/D,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;kBACzE,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;kBACzE,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;;;;;;;;;;;;;kBAa3E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;kBAC7E,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;;;;;;;;0BAQnE,WAAW,SAAS,EAAE,OAAO,aAAa,CAAC,EAAE;;;;;;;;;;;;kBAYrD,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;kBACzE,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;;;;;;;;kBAQvE,WAAW,iBAAiB,EAAE,OAAO,uCAAuC,CAAC,EAAE;kBAC/E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;;;;;;;;kBAQ7E,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;kBACvE,WAAW,YAAY,EAAE,OAAO,kCAAkC,CAAC,EAAE;;;;;;;;kBAQrE,WAAW,oBAAoB,EAAE,OAAO,0CAA0C,CAAC,EAAE;kBACrF,WAAW,mBAAmB,EAAE,OAAO,yCAAyC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkCvF,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;cAC3E,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;cACzE,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;;;;;;;;;;cAUzE,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;cAC3E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;cAC7E,WAAW,oBAAoB,EAAE,OAAO,0CAA0C,CAAC,EAAE;cACrF,WAAW,mBAAmB,EAAE,OAAO,yCAAyC,CAAC,EAAE;cACnF,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;cACvE,WAAW,YAAY,EAAE,OAAO,kCAAkC,CAAC,EAAE;;;;;YAKvE,WAAW,QAAQ,EAAE,OAAO,8BAA8B,CAAC,EAAE;YAC7D,WAAW,SAAS,EAAE,OAAO,+BAA+B,CAAC,EAAE;;;;;AAK3E;AAEA,IAAa,uBAAb,cAA0C,YAAY;;EAC1B,KAAA,UAAA;;;EACV,KAAA,SAAA,kBAAkBA,YAAM;;;EACtB,KAAA,WAAA,eAAe,gBAAgB,CAAC;;AACpD;AAEA,WAAW,oBAAoB"}
1	+ {"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/define/live-video/skin.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './skin.css?inline';\n\n// Register the live video player, container, and all UI custom elements.\nimport './ui';\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"media-default-skin media-default-skin--video\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <media-poster>\n <slot name=\"poster\">\n <img alt=\"\" decoding=\"async\">\n </slot>\n </media-poster>\n\n <media-buffering-indicator class=\"media-buffering-indicator\">\n ${renderIcon('spinner', { class: 'media-icon' })}\n </media-buffering-indicator>\n\n <media-error-dialog class=\"media-error\">\n <div class=\"media-error__dialog media-surface\">\n <div class=\"media-error__content\">\n <media-alert-dialog-title class=\"media-error__title\"></media-alert-dialog-title>\n <media-alert-dialog-description class=\"media-error__description\"></media-alert-dialog-description>\n </div>\n <div class=\"media-error__actions\">\n <media-alert-dialog-close class=\"media-button media-button--primary\"></media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <media-controls class=\"media-surface media-controls media-controls--root\">\n <media-tooltip-group>\n <div class=\"media-surface media-controls media-controls--primary\">\n <div class=\"media-button-group\">\n <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-live-button class=\"media-button media-button--subtle media-button--live\"></media-live-button>\n </div>\n\n <div class=\"media-time-controls\" aria-hidden=\"true\"></div>\n\n <div class=\"media-button-group\">\n <media-mute-button commandfor=\"live-video-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n </media-mute-button>\n\n <media-popover id=\"live-video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface media-popover media-popover--volume\">\n <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n <media-slider-track class=\"media-slider__track\">\n <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n\n <media-captions-button menu-for=\"captions-menu\" commandfor=\"captions-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--captions\">\n ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n </media-captions-button>\n <media-menu id=\"captions-menu\" side=\"top\" align=\"center\" class=\"media-surface media-popover media-menu media-menu--captions\">\n <media-captions-radio-group class=\"media-menu__group\">\n <template>\n <media-menu-radio-item class=\"media-menu__item\">\n <bdi data-part=\"label\" dir=\"auto\"></bdi>\n <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n ${renderIcon('check', { class: 'media-icon' })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-captions-radio-group>\n </media-menu>\n <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-cast-button commandfor=\"cast-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--cast\">\n ${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}\n ${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}\n </media-cast-button>\n <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-airplay-button commandfor=\"airplay-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--airplay\">\n ${renderIcon('airplay-enter', { class: 'media-icon media-icon--airplay-enter' })}\n ${renderIcon('airplay-exit', { class: 'media-icon media-icon--airplay-exit' })}\n </media-airplay-button>\n <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--pip\">\n ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n </media-pip-button>\n <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--fullscreen\">\n ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n </media-fullscreen-button>\n <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n </media-tooltip>\n\n </div>\n </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"media-overlay\"></div>\n\n <!-- Hotkeys -->\n <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n\n <!-- Gestures -->\n <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n\n <!-- Input Indicators -->\n <media-status-announcer class=\"media-sr-only\"></media-status-announcer>\n <div class=\"media-input-indicator-overlay\">\n <media-volume-indicator hidden class=\"media-surface media-volume-indicator\">\n <media-volume-indicator-fill class=\"media-volume-indicator__content\">\n ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n <media-volume-indicator-value class=\"media-volume-indicator__value\"></media-volume-indicator-value>\n </media-volume-indicator-fill>\n </media-volume-indicator>\n <media-status-indicator\n hidden\n actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n class=\"media-surface media-status-indicator media-status-indicator--state\"\n >\n <div class=\"media-status-indicator__content\">\n ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n <media-status-indicator-value class=\"media-status-indicator__value\"></media-status-indicator-value>\n </div>\n </media-status-indicator>\n <media-status-indicator hidden actions=\"togglePaused\" class=\"media-status-indicator media-status-indicator--playback\">\n ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n </media-status-indicator>\n </div>\n </media-container>\n `;\n}\n\nexport class LiveVideoSkinElement extends SkinElement {\n static readonly tagName = 'live-video-skin';\n static styles = createShadowStyle(styles);\n static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(LiveVideoSkinElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [LiveVideoSkinElement.tagName]: LiveVideoSkinElement;\n }\n}\n"],"mappings":";;;;;;;AASA,SAAS,kBAAkB;CACzB,OAAgB;;;;;;;;;;;;;UAaR,WAAW,WAAW,EAAE,OAAO,aAAa,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;kBAoBvC,WAAW,WAAW,EAAE,OAAO,iCAAiC,CAAC,EAAE;kBACnE,WAAW,QAAQ,EAAE,OAAO,8BAA8B,CAAC,EAAE;kBAC7D,WAAW,SAAS,EAAE,OAAO,+BAA+B,CAAC,EAAE;;;;;;;;;;;;;;kBAc/D,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;kBACzE,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;kBACzE,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;;;;;;;;;;;;;kBAa3E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;kBAC7E,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;;;;;;;;0BAQnE,WAAW,SAAS,EAAE,OAAO,aAAa,CAAC,EAAE;;;;;;;;;;;;kBAYrD,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;kBACzE,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;;;;;;;;kBAQvE,WAAW,iBAAiB,EAAE,OAAO,uCAAuC,CAAC,EAAE;kBAC/E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;;;;;;;;kBAQ7E,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;kBACvE,WAAW,YAAY,EAAE,OAAO,kCAAkC,CAAC,EAAE;;;;;;;;kBAQrE,WAAW,oBAAoB,EAAE,OAAO,0CAA0C,CAAC,EAAE;kBACrF,WAAW,mBAAmB,EAAE,OAAO,yCAAyC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkCvF,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;cAC3E,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;cACzE,WAAW,cAAc,EAAE,OAAO,oCAAoC,CAAC,EAAE;;;;;;;;;;cAUzE,WAAW,eAAe,EAAE,OAAO,qCAAqC,CAAC,EAAE;cAC3E,WAAW,gBAAgB,EAAE,OAAO,sCAAsC,CAAC,EAAE;cAC7E,WAAW,oBAAoB,EAAE,OAAO,0CAA0C,CAAC,EAAE;cACrF,WAAW,mBAAmB,EAAE,OAAO,yCAAyC,CAAC,EAAE;cACnF,WAAW,aAAa,EAAE,OAAO,mCAAmC,CAAC,EAAE;cACvE,WAAW,YAAY,EAAE,OAAO,kCAAkC,CAAC,EAAE;;;;;YAKvE,WAAW,QAAQ,EAAE,OAAO,8BAA8B,CAAC,EAAE;YAC7D,WAAW,SAAS,EAAE,OAAO,+BAA+B,CAAC,EAAE;;;;;AAK3E;AAEA,IAAa,uBAAb,cAA0C,YAAY;;EAC1B,KAAA,UAAA;;;EACV,KAAA,SAAA,kBAAkBA,YAAM;;;EACtB,KAAA,WAAA,eAAe,gBAAgB,CAAC;;AACpD;AAEA,WAAW,oBAAoB"}

package/dist/dev/define/live-video/skin.tailwind.js CHANGED Viewed

@@ -83,7 +83,7 @@ function getTemplateHTML() {
                 <media-captions-radio-group class="${menu.group}">
                   <template>
                     <media-menu-radio-item class="${menu.item}">
-                      <span data-part="label"></span>
+                      <bdi data-part="label" dir="auto"></bdi>
                       <media-menu-item-indicator force-mount class="${menu.indicator}">
                         ${renderIcon("check", { class: cn(icon, menu.icon) })}
                       </media-menu-item-indicator>

package/dist/dev/define/live-video/skin.tailwind.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/live-video/skin.tailwind.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render';\nimport {\n bufferingIndicator,\n button,\n buttonGroupEnd,\n buttonGroupStart,\n container,\n controls,\n error,\n icon,\n iconState,\n inputIndicatorOverlay,\n menu,\n overlay,\n popup,\n poster,\n primaryControls,\n slider,\n spacer,\n statusIndicator,\n volumeIndicator,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { createTemplate } from '@videojs/utils/dom';\nimport { cn } from '@videojs/utils/style';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\n\n// Register the live video player, container, and all UI custom elements.\nimport './ui';\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"${container(true)}\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <media-poster class=\"${poster(true)}\">\n <slot name=\"poster\">\n <img alt=\"\" decoding=\"async\">\n </slot>\n </media-poster>\n\n <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n ${renderIcon('spinner', { class: icon })}\n </media-buffering-indicator>\n\n <media-error-dialog class=\"${error.root}\">\n <div class=\"${error.dialog}\">\n <div class=\"${error.content}\">\n <media-alert-dialog-title class=\"${error.title}\"></media-alert-dialog-title>\n <media-alert-dialog-description class=\"${error.description}\"></media-alert-dialog-description>\n </div>\n <div class=\"${error.actions}\">\n <media-alert-dialog-close class=\"${cn(button.base, button.primary)}\"></media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <media-controls data-controls=\"\" class=\"${controls}\">\n <media-tooltip-group>\n <div class=\"${primaryControls}\">\n <div class=\"${buttonGroupStart}\">\n <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.play.button)}\">\n ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-live-button class=\"${cn(button.base, button.subtle, button.live)}\"></media-live-button>\n </div>\n\n <div class=\"${spacer}\" aria-hidden=\"true\"></div>\n\n <div class=\"${buttonGroupEnd}\">\n <media-mute-button commandfor=\"live-video-volume-popover\" class=\"${cn(button.base, button.subtle, button.icon, iconState.mute.button)}\">\n ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n </media-mute-button>\n\n <media-popover id=\"live-video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n <media-slider-track class=\"${slider.track}\">\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n <media-captions-button menu-for=\"captions-menu\" commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, button.captions, iconState.captions.button)}\">\n ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n </media-captions-button>\n <media-menu id=\"captions-menu\" side=\"top\" align=\"center\" class=\"${cn(popup.popover, menu.root)}\">\n <media-captions-radio-group class=\"${menu.group}\">\n <template>\n <media-menu-radio-item class=\"${menu.item}\">\n <span data-part=\"label\"></span>\n <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n ${renderIcon('check', { class: cn(icon, menu.icon) })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-captions-radio-group>\n </media-menu>\n <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-cast-button commandfor=\"cast-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.cast.button)}\">\n ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}\n ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}\n </media-cast-button>\n <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-airplay-button commandfor=\"airplay-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}\">\n ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}\n ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}\n </media-airplay-button>\n <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.pip.button)}\">\n ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}\n ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}\n </media-pip-button>\n <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}\">\n ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n </media-fullscreen-button>\n <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n </div>\n </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"${overlay}\"></div>\n\n <!-- Hotkeys -->\n <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n\n <!-- Gestures -->\n <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n\n <!-- Input Indicators -->\n <media-status-announcer class=\"sr-only\"></media-status-announcer>\n <div class=\"${inputIndicatorOverlay}\">\n <media-volume-indicator hidden class=\"${volumeIndicator.root}\">\n <media-volume-indicator-fill class=\"${volumeIndicator.content}\">\n ${renderIcon('volume-high', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.high) })}\n ${renderIcon('volume-low', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.low) })}\n ${renderIcon('volume-off', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.off) })}\n <media-volume-indicator-value class=\"${volumeIndicator.value}\"></media-volume-indicator-value>\n </media-volume-indicator-fill>\n </media-volume-indicator>\n <media-status-indicator\n hidden\n actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n class=\"${statusIndicator.root}\"\n >\n <div class=\"${statusIndicator.content}\">\n ${renderIcon('captions-on', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOn) })}\n ${renderIcon('captions-off', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOff) })}\n ${renderIcon('fullscreen-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenEnter) })}\n ${renderIcon('fullscreen-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenExit) })}\n ${renderIcon('pip-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipEnter) })}\n ${renderIcon('pip-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipExit) })}\n <media-status-indicator-value class=\"${statusIndicator.value}\"></media-status-indicator-value>\n </div>\n </media-status-indicator>\n <media-status-indicator hidden actions=\"togglePaused\" class=\"${statusIndicator.playback.root}\">\n ${renderIcon('play', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.play) })}\n ${renderIcon('pause', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.pause) })}\n </media-status-indicator>\n </div>\n </media-container>\n `;\n}\n\nexport class LiveVideoSkinTailwindElement extends SkinElement {\n static readonly tagName = 'live-video-skin-tailwind';\n static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(LiveVideoSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [LiveVideoSkinTailwindElement.tagName]: LiveVideoSkinTailwindElement;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/live-video/skin.tailwind.ts"],"sourcesContent":["import { renderIcon } from '@videojs/icons/render';\nimport {\n bufferingIndicator,\n button,\n buttonGroupEnd,\n buttonGroupStart,\n container,\n controls,\n error,\n icon,\n iconState,\n inputIndicatorOverlay,\n menu,\n overlay,\n popup,\n poster,\n primaryControls,\n slider,\n spacer,\n statusIndicator,\n volumeIndicator,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { createTemplate } from '@videojs/utils/dom';\nimport { cn } from '@videojs/utils/style';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\n\n// Register the live video player, container, and all UI custom elements.\nimport './ui';\n\nfunction getTemplateHTML() {\n return /html/ `\n <media-container class=\"${container(true)}\">\n <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n <slot name=\"media\"></slot>\n <slot></slot>\n\n <media-poster class=\"${poster(true)}\">\n <slot name=\"poster\">\n <img alt=\"\" decoding=\"async\">\n </slot>\n </media-poster>\n\n <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n ${renderIcon('spinner', { class: icon })}\n </media-buffering-indicator>\n\n <media-error-dialog class=\"${error.root}\">\n <div class=\"${error.dialog}\">\n <div class=\"${error.content}\">\n <media-alert-dialog-title class=\"${error.title}\"></media-alert-dialog-title>\n <media-alert-dialog-description class=\"${error.description}\"></media-alert-dialog-description>\n </div>\n <div class=\"${error.actions}\">\n <media-alert-dialog-close class=\"${cn(button.base, button.primary)}\"></media-alert-dialog-close>\n </div>\n </div>\n </media-error-dialog>\n\n <media-controls data-controls=\"\" class=\"${controls}\">\n <media-tooltip-group>\n <div class=\"${primaryControls}\">\n <div class=\"${buttonGroupStart}\">\n <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.play.button)}\">\n ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n </media-play-button>\n <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-live-button class=\"${cn(button.base, button.subtle, button.live)}\"></media-live-button>\n </div>\n\n <div class=\"${spacer}\" aria-hidden=\"true\"></div>\n\n <div class=\"${buttonGroupEnd}\">\n <media-mute-button commandfor=\"live-video-volume-popover\" class=\"${cn(button.base, button.subtle, button.icon, iconState.mute.button)}\">\n ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n </media-mute-button>\n\n <media-popover id=\"live-video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n <media-slider-track class=\"${slider.track}\">\n <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n </media-slider-track>\n <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n </media-volume-slider>\n </media-popover>\n <media-captions-button menu-for=\"captions-menu\" commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, button.captions, iconState.captions.button)}\">\n ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n </media-captions-button>\n <media-menu id=\"captions-menu\" side=\"top\" align=\"center\" class=\"${cn(popup.popover, menu.root)}\">\n <media-captions-radio-group class=\"${menu.group}\">\n <template>\n <media-menu-radio-item class=\"${menu.item}\">\n <bdi data-part=\"label\" dir=\"auto\"></bdi>\n <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n ${renderIcon('check', { class: cn(icon, menu.icon) })}\n </media-menu-item-indicator>\n </media-menu-radio-item>\n </template>\n </media-captions-radio-group>\n </media-menu>\n <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-cast-button commandfor=\"cast-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.cast.button)}\">\n ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}\n ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}\n </media-cast-button>\n <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-airplay-button commandfor=\"airplay-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}\">\n ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}\n ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}\n </media-airplay-button>\n <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.pip.button)}\">\n ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}\n ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}\n </media-pip-button>\n <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n\n <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}\">\n ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n </media-fullscreen-button>\n <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n <media-tooltip-label></media-tooltip-label>\n <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n </media-tooltip>\n </div>\n </div>\n </media-tooltip-group>\n </media-controls>\n\n <div class=\"${overlay}\"></div>\n\n <!-- Hotkeys -->\n <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n\n <!-- Gestures -->\n <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n\n <!-- Input Indicators -->\n <media-status-announcer class=\"sr-only\"></media-status-announcer>\n <div class=\"${inputIndicatorOverlay}\">\n <media-volume-indicator hidden class=\"${volumeIndicator.root}\">\n <media-volume-indicator-fill class=\"${volumeIndicator.content}\">\n ${renderIcon('volume-high', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.high) })}\n ${renderIcon('volume-low', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.low) })}\n ${renderIcon('volume-off', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.off) })}\n <media-volume-indicator-value class=\"${volumeIndicator.value}\"></media-volume-indicator-value>\n </media-volume-indicator-fill>\n </media-volume-indicator>\n <media-status-indicator\n hidden\n actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n class=\"${statusIndicator.root}\"\n >\n <div class=\"${statusIndicator.content}\">\n ${renderIcon('captions-on', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOn) })}\n ${renderIcon('captions-off', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOff) })}\n ${renderIcon('fullscreen-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenEnter) })}\n ${renderIcon('fullscreen-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenExit) })}\n ${renderIcon('pip-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipEnter) })}\n ${renderIcon('pip-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipExit) })}\n <media-status-indicator-value class=\"${statusIndicator.value}\"></media-status-indicator-value>\n </div>\n </media-status-indicator>\n <media-status-indicator hidden actions=\"togglePaused\" class=\"${statusIndicator.playback.root}\">\n ${renderIcon('play', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.play) })}\n ${renderIcon('pause', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.pause) })}\n </media-status-indicator>\n </div>\n </media-container>\n `;\n}\n\nexport class LiveVideoSkinTailwindElement extends SkinElement {\n static readonly tagName = 'live-video-skin-tailwind';\n static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(LiveVideoSkinTailwindElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [LiveVideoSkinTailwindElement.tagName]: LiveVideoSkinTailwindElement;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;AA8BA,SAAS,kBAAkB;CACzB,OAAgB;8BACY,UAAU,IAAI,EAAE;;;;;6BAKjB,OAAO,IAAI,EAAE;;;;;;0CAMA,mBAAmB,KAAK;UACxD,WAAW,WAAW,EAAE,OAAO,KAAK,CAAC,EAAE;;;mCAGd,MAAM,KAAK;sBACxB,MAAM,OAAO;wBACX,MAAM,QAAQ;+CACS,MAAM,MAAM;qDACN,MAAM,YAAY;;wBAE/C,MAAM,QAAQ;+CACS,GAAG,OAAO,MAAM,OAAO,OAAO,EAAE;;;;;gDAK/B,SAAS;;wBAEjC,gBAAgB;0BACd,iBAAiB;oEACyB,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,UAAU,KAAK,MAAM,EAAE;kBACrH,WAAW,WAAW,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,OAAO,EAAE,CAAC,EAAE;kBACnE,WAAW,QAAQ,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,IAAI,EAAE,CAAC,EAAE;kBAC7D,WAAW,SAAS,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,KAAK,EAAE,CAAC,EAAE;;mEAEd,GAAG,MAAM,OAAO,EAAE;;iDAEpC,MAAM,gBAAgB;;;0CAG7B,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,IAAI,EAAE;;;0BAG5D,OAAO;;0BAEP,eAAe;iFACwC,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,UAAU,KAAK,MAAM,EAAE;kBAClI,WAAW,cAAc,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,SAAS,EAAE,CAAC,EAAE;kBACxE,WAAW,cAAc,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,SAAS,EAAE,CAAC,EAAE;kBACxE,WAAW,eAAe,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,UAAU,EAAE,CAAC,EAAE;;;4HAGgC,GAAG,MAAM,SAAS,MAAM,MAAM,EAAE;8CAC9G,OAAO,KAAK;+CACX,OAAO,MAAM;gDACZ,GAAG,OAAO,KAAK,MAAM,OAAO,KAAK,IAAI,EAAE;;+CAExC,GAAG,OAAO,MAAM,MAAM,OAAO,MAAM,UAAU,EAAE;;;qGAGO,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,UAAU,UAAU,SAAS,MAAM,EAAE;kBAC3K,WAAW,gBAAgB,EAAE,OAAO,GAAG,MAAM,UAAU,SAAS,GAAG,EAAE,CAAC,EAAE;kBACxE,WAAW,eAAe,EAAE,OAAO,GAAG,MAAM,UAAU,SAAS,EAAE,EAAE,CAAC,EAAE;;gFAER,GAAG,MAAM,SAAS,KAAK,IAAI,EAAE;qDACxD,KAAK,MAAM;;oDAEZ,KAAK,KAAK;;sEAEQ,KAAK,UAAU;0BAC3D,WAAW,SAAS,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,EAAE,CAAC,EAAE;;;;;;uEAMP,GAAG,MAAM,OAAO,EAAE;;iDAExC,MAAM,gBAAgB;;;oEAGH,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,UAAU,KAAK,MAAM,EAAE;kBACrH,WAAW,cAAc,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,KAAK,EAAE,CAAC,EAAE;kBACpE,WAAW,aAAa,EAAE,OAAO,GAAG,MAAM,UAAU,KAAK,IAAI,EAAE,CAAC,EAAE;;mEAEjB,GAAG,MAAM,OAAO,EAAE;;iDAEpC,MAAM,gBAAgB;;;0EAGG,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,UAAU,QAAQ,MAAM,EAAE;kBAC9H,WAAW,iBAAiB,EAAE,OAAO,GAAG,MAAM,UAAU,QAAQ,KAAK,EAAE,CAAC,EAAE;kBAC1E,WAAW,gBAAgB,EAAE,OAAO,GAAG,MAAM,UAAU,QAAQ,IAAI,EAAE,CAAC,EAAE;;sEAEpB,GAAG,MAAM,OAAO,EAAE;;iDAEvC,MAAM,gBAAgB;;;kEAGL,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,UAAU,IAAI,MAAM,EAAE;kBAClH,WAAW,aAAa,EAAE,OAAO,GAAG,MAAM,UAAU,IAAI,GAAG,EAAE,CAAC,EAAE;kBAChE,WAAW,YAAY,EAAE,OAAO,GAAG,MAAM,UAAU,IAAI,EAAE,EAAE,CAAC,EAAE;;kEAEd,GAAG,MAAM,OAAO,EAAE;;iDAEnC,MAAM,gBAAgB;;;gFAGS,GAAG,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,UAAU,WAAW,MAAM,EAAE;kBACvI,WAAW,oBAAoB,EAAE,OAAO,GAAG,MAAM,UAAU,WAAW,KAAK,EAAE,CAAC,EAAE;kBAChF,WAAW,mBAAmB,EAAE,OAAO,GAAG,MAAM,UAAU,WAAW,IAAI,EAAE,CAAC,EAAE;;yEAEvB,GAAG,MAAM,OAAO,EAAE;;iDAE1C,MAAM,gBAAgB;;;;;;;oBAOnD,QAAQ;;;;;;;;;;;;;;;;;;;oBAmBR,sBAAsB;gDACM,gBAAgB,KAAK;gDACrB,gBAAgB,QAAQ;cAC1D,WAAW,eAAe,EAAE,OAAO,GAAG,gBAAgB,KAAK,MAAM,gBAAgB,KAAK,IAAI,EAAE,CAAC,EAAE;cAC/F,WAAW,cAAc,EAAE,OAAO,GAAG,gBAAgB,KAAK,MAAM,gBAAgB,KAAK,GAAG,EAAE,CAAC,EAAE;cAC7F,WAAW,cAAc,EAAE,OAAO,GAAG,gBAAgB,KAAK,MAAM,gBAAgB,KAAK,GAAG,EAAE,CAAC,EAAE;mDACxD,gBAAgB,MAAM;;;;;;mBAMtD,gBAAgB,KAAK;;wBAEhB,gBAAgB,QAAQ;cAClC,WAAW,eAAe,EAAE,OAAO,GAAG,gBAAgB,KAAK,MAAM,gBAAgB,KAAK,UAAU,EAAE,CAAC,EAAE;cACrG,WAAW,gBAAgB,EAAE,OAAO,GAAG,gBAAgB,KAAK,MAAM,gBAAgB,KAAK,WAAW,EAAE,CAAC,EAAE;cACvG,WAAW,oBAAoB,EAAE,OAAO,GAAG,gBAAgB,KAAK,MAAM,gBAAgB,KAAK,eAAe,EAAE,CAAC,EAAE;cAC/G,WAAW,mBAAmB,EAAE,OAAO,GAAG,gBAAgB,KAAK,MAAM,gBAAgB,KAAK,cAAc,EAAE,CAAC,EAAE;cAC7G,WAAW,aAAa,EAAE,OAAO,GAAG,gBAAgB,KAAK,MAAM,gBAAgB,KAAK,QAAQ,EAAE,CAAC,EAAE;cACjG,WAAW,YAAY,EAAE,OAAO,GAAG,gBAAgB,KAAK,MAAM,gBAAgB,KAAK,OAAO,EAAE,CAAC,EAAE;mDAC1D,gBAAgB,MAAM;;;uEAGF,gBAAgB,SAAS,KAAK;YACzF,WAAW,QAAQ,EAAE,OAAO,GAAG,gBAAgB,SAAS,KAAK,MAAM,gBAAgB,SAAS,KAAK,IAAI,EAAE,CAAC,EAAE;YAC1G,WAAW,SAAS,EAAE,OAAO,GAAG,gBAAgB,SAAS,KAAK,MAAM,gBAAgB,SAAS,KAAK,KAAK,EAAE,CAAC,EAAE;;;;;AAKxH;AAEA,IAAa,+BAAb,cAAkD,YAAY;;EAClC,KAAA,UAAA;;;EACR,KAAA,WAAA,eAAe,gBAAgB,CAAC;;AACpD;AAEA,WAAW,4BAA4B"}

package/dist/dev/define/video/minimal-skin.css CHANGED Viewed

@@ -285,6 +285,10 @@ media-container {
   text-shadow: 0 1px 0 var(--shadow-current-color);
   background-color: var(--controls-background-color);
   backdrop-filter: var(--controls-backdrop-filter);
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 .media-minimal-skin .media-time-controls {
@@ -294,12 +298,20 @@ media-container {
   gap: calc(var(--spacing) * 3);
   align-items: center;
   container: media-time-controls / inline-size;
+  &:dir(rtl) {
+    flex-direction: row;
+  }
 }
 .media-minimal-skin .media-time-group {
   display: flex;
   gap: calc(var(--spacing) * 1);
   align-items: center;
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 .media-minimal-skin .media-time {
@@ -334,6 +346,10 @@ media-container {
 @container media-root (width > 42rem) {
   .media-minimal-skin .media-time-controls {
     flex-direction: row;
+    &:dir(rtl) {
+      flex-direction: row-reverse;
+    }
   }
   .media-minimal-skin .media-time--duration,
@@ -532,6 +548,10 @@ media-container {
   display: flex;
   gap: 1px;
   align-items: center;
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 .media-minimal-skin .media-badge {
@@ -554,10 +574,15 @@ media-container {
   width: var(--media-icon-size);
   height: var(--media-icon-size);
 }
-.media-minimal-skin .media-icon--flipped {
+.media-minimal-skin .media-icon--flipped,
+.media-minimal-skin:dir(rtl) .media-menu__chevron {
   scale: -1 1;
 }
+.media-minimal-skin:dir(rtl) .media-menu__chevron.media-icon--flipped {
+  scale: 1 1;
+}
 .media-minimal-skin media-poster,
 .media-minimal-skin > img {
   position: absolute;
@@ -1200,6 +1225,10 @@ media-container {
       filter: blur(8px);
       translate: 100% 0;
     }
+    &:dir(rtl):where([data-starting-style], [data-ending-style]) {
+      translate: -100% 0;
+    }
   }
   .media-menu__separator {
@@ -1241,7 +1270,7 @@ media-container {
     gap: calc(var(--spacing) * 1.5);
     align-items: center;
     padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
-    text-align: left;
+    text-align: start;
     text-shadow: 0 1px 0 var(--shadow-current-color);
     cursor: pointer;
     user-select: none;
@@ -1285,8 +1314,7 @@ media-container {
   .media-menu__indicator {
     flex-shrink: 0;
-    margin-right: calc(var(--spacing) * -1);
-    margin-left: auto;
+    margin-inline: auto calc(var(--spacing) * -1);
     opacity: 0;
   }
@@ -1319,8 +1347,8 @@ media-container {
   }
   .media-menu__tier {
+    padding-inline-start: calc(var(--spacing) * 0.5);
     padding-top: 1px;
-    padding-left: calc(var(--spacing) * 0.5);
     font-size: var(--font-size-tiny);
     font-weight: 600;
     line-height: 1;
@@ -1337,8 +1365,8 @@ media-container {
     gap: calc(var(--spacing) * 1);
     align-items: center;
     min-width: 0;
-    padding-left: calc(var(--spacing) * 2);
-    margin-left: auto;
+    padding-inline-start: calc(var(--spacing) * 2);
+    margin-inline-start: auto;
     color: oklch(from currentColor l c h / 0.65);
   }
@@ -1378,6 +1406,10 @@ media-container {
       translate: -100% 0;
     }
+    &:dir(rtl)[data-submenu-expanded="true"] > :not([data-submenu]) {
+      translate: 100% 0;
+    }
     /* WebKit can restart the covered-content transition while the
        anchor-positioned highlight remains active. */
     &[data-submenu-expanded] > :not([data-submenu])::before {

package/dist/dev/define/video/minimal-skin.js CHANGED Viewed

@@ -121,7 +121,7 @@ function getTemplateHTML() {
                     ${renderIcon("switches", { class: "media-icon" })}
                     ${renderText(qualityText)}
                     <span class="media-menu__hint">
-                      <span data-part="hint" class="media-menu__hint-label"></span>
+                      <bdi data-part="hint" dir="auto" class="media-menu__hint-label"></bdi>
                       ${renderIcon("chevron", { class: "media-icon media-menu__chevron" })}
                     </span>
                   </media-menu-item>
@@ -129,7 +129,7 @@ function getTemplateHTML() {
                     ${renderIcon("speech", { class: "media-icon" })}
                     ${renderText(audioText)}
                     <span class="media-menu__hint">
-                      <span data-part="hint" class="media-menu__hint-label"></span>
+                      <bdi data-part="hint" dir="auto" class="media-menu__hint-label"></bdi>
                       ${renderIcon("chevron", { class: "media-icon media-menu__chevron" })}
                     </span>
                   </media-menu-item>
@@ -137,7 +137,7 @@ function getTemplateHTML() {
                     ${renderIcon("speed", { class: "media-icon" })}
                     ${renderText(speedText)}
                     <span class="media-menu__hint">
-                      <span data-part="hint" class="media-menu__hint-label"></span>
+                      <bdi data-part="hint" dir="auto" class="media-menu__hint-label"></bdi>
                       ${renderIcon("chevron", { class: "media-icon media-menu__chevron" })}
                     </span>
                   </media-menu-item>
@@ -145,7 +145,7 @@ function getTemplateHTML() {
                     ${renderIcon("captions-off", { class: "media-icon" })}
                     ${renderText(captionsText)}
                     <span class="media-menu__hint">
-                      <span data-part="hint" class="media-menu__hint-label"></span>
+                      <bdi data-part="hint" dir="auto" class="media-menu__hint-label"></bdi>
                       ${renderIcon("chevron", { class: "media-icon media-menu__chevron" })}
                     </span>
                   </media-menu-item>
@@ -161,7 +161,7 @@ function getTemplateHTML() {
                   <template>
                     <media-menu-radio-item class="media-menu__item">
                       <span>
-                        <span data-part="label"></span>
+                        <bdi data-part="label" dir="auto"></bdi>
                         <sup data-part="tier" class="media-menu__tier"></sup>
                       </span>
                       <span data-part="badge" class="media-badge"></span>
@@ -182,7 +182,7 @@ function getTemplateHTML() {
                 <media-audio-track-radio-group class="media-menu__group">
                   <template>
                     <media-menu-radio-item class="media-menu__item">
-                      <span data-part="label"></span>
+                      <bdi data-part="label" dir="auto"></bdi>
                       <media-menu-item-indicator force-mount class="media-menu__indicator">
                         ${renderIcon("check", { class: "media-icon" })}
                       </media-menu-item-indicator>
@@ -200,7 +200,7 @@ function getTemplateHTML() {
                 <media-playback-rate-radio-group class="media-menu__group">
                   <template>
                     <media-menu-radio-item class="media-menu__item">
-                      <span data-part="label"></span>
+                      <bdi data-part="label" dir="auto"></bdi>
                       <media-menu-item-indicator force-mount class="media-menu__indicator">
                         ${renderIcon("check", { class: "media-icon" })}
                       </media-menu-item-indicator>
@@ -218,7 +218,7 @@ function getTemplateHTML() {
                 <media-captions-radio-group class="media-menu__group">
                   <template>
                     <media-menu-radio-item class="media-menu__item">
-                      <span data-part="label"></span>
+                      <bdi data-part="label" dir="auto"></bdi>
                       <media-menu-item-indicator force-mount class="media-menu__indicator">
                         ${renderIcon("check", { class: "media-icon" })}
                       </media-menu-item-indicator>