@videojs/html 10.0.0-rc.3 → 10.0.0-rc.5

package/dist/default/internal/skins/compat-video/template.js

@@ -0,0 +1,457 @@
+import { createTemplate } from "@videojs/utils/dom";
+//#region src/internal/skins/compat-video/template.ts
+/** Static template rendered from the finalized VJSC module graph. */
+const template = createTemplate(`<media-container class="media-skin media-container media-video" data-theme="compat" data-preset="video">
+<slot>
+</slot>
+<media-poster class="media-poster">
+<slot name="poster">
+<img alt="" decoding="async" class="media-poster-image">
+</slot>
+</media-poster>
+<media-buffering-indicator class="media-buffering-indicator">
+<media-icon family="compat" name="spinner" class="media-buffering-indicator-spinner-icon">
+</media-icon>
+</media-buffering-indicator>
+<media-error-dialog>
+<media-dialog-backdrop class="media-dialog-backdrop">
+</media-dialog-backdrop>
+<media-dialog-popup class="media-dialog-popup">
+<media-dialog-title class="media-dialog-title">
+</media-dialog-title>
+<media-dialog-description class="media-dialog-description">
+</media-dialog-description>
+<media-dialog-close class="media-button media-dialog-close">
+</media-dialog-close>
+</media-dialog-popup>
+</media-error-dialog>
+<media-title class="media-title">
+</media-title>
+<media-controls>
+<media-controls-backdrop class="video-controls-backdrop">
+</media-controls-backdrop>
+<media-controls-content class="video-controls-content">
+<media-tooltip-group>
+<media-controls-group class="video-controls-top">
+<media-airplay-button class="media-button media-airplay-button" id="vjs-m_pMjKs5-0-trigger">
+<media-icon family="compat" name="airplay-enter" class="media-button-icon media-airplay-button-enter-icon">
+</media-icon>
+<media-icon family="compat" name="airplay-exit" class="media-button-icon media-airplay-button-exit-icon">
+</media-icon>
+</media-airplay-button>
+<media-tooltip trigger="vjs-m_pMjKs5-0-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup">
+<media-tooltip-label>
+</media-tooltip-label>
+<media-tooltip-shortcut class="media-tooltip-shortcut">
+</media-tooltip-shortcut>
+</media-tooltip>
+<media-cast-button class="media-button media-cast-button" id="vjs-m_pMjKs5-0-2-trigger">
+<media-icon family="compat" name="cast-enter" class="media-button-icon media-cast-button-enter-icon">
+</media-icon>
+<media-icon family="compat" name="cast-exit" class="media-button-icon media-cast-button-exit-icon">
+</media-icon>
+</media-cast-button>
+<media-tooltip trigger="vjs-m_pMjKs5-0-2-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup">
+<media-tooltip-label>
+</media-tooltip-label>
+<media-tooltip-shortcut class="media-tooltip-shortcut">
+</media-tooltip-shortcut>
+</media-tooltip>
+<media-pip-button class="media-button media-pip-button" id="vjs-m_pMjKs5-0-3-trigger">
+<media-icon family="compat" name="pip-enter" class="media-button-icon media-pip-button-enter-icon">
+</media-icon>
+<media-icon family="compat" name="pip-exit" class="media-button-icon media-pip-button-exit-icon">
+</media-icon>
+</media-pip-button>
+<media-tooltip trigger="vjs-m_pMjKs5-0-3-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup">
+<media-tooltip-label>
+</media-tooltip-label>
+<media-tooltip-shortcut class="media-tooltip-shortcut">
+</media-tooltip-shortcut>
+</media-tooltip>
+<media-fullscreen-button class="media-button media-fullscreen-button" id="vjs-m_pMjKs5-0-4-trigger">
+<media-icon family="compat" name="fullscreen-enter" class="media-button-icon media-fullscreen-button-enter-icon">
+</media-icon>
+<media-icon family="compat" name="fullscreen-exit" class="media-button-icon media-fullscreen-button-exit-icon">
+</media-icon>
+</media-fullscreen-button>
+<media-tooltip trigger="vjs-m_pMjKs5-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup media-tooltip-screen-popup">
+<media-tooltip-label>
+</media-tooltip-label>
+<media-tooltip-shortcut class="media-tooltip-shortcut">
+</media-tooltip-shortcut>
+</media-tooltip>
+</media-controls-group>
+<media-controls-group class="video-controls-center">
+<media-seek-button seconds="-10" class="media-button video-controls-center-button video-controls-center-seek" id="vjs-m_pMjKs5-0-5-trigger">
+<div class="media-seek-button-content">
+<media-icon family="compat" name="seek" class="media-button-icon media-seek-button-backward-icon video-controls-center-seek-icon">
+</media-icon>
+<span class="media-seek-button-label media-seek-button-backward-label">10</span>
+</div>
+</media-seek-button>
+<media-tooltip trigger="vjs-m_pMjKs5-0-5-trigger" disabled side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip-label>
+</media-tooltip-label>
+<media-tooltip-shortcut class="media-tooltip-shortcut">
+</media-tooltip-shortcut>
+</media-tooltip>
+<media-play-button class="media-button media-play-button video-controls-center-button video-controls-center-play" id="vjs-m_pMjKs5-0-6-trigger">
+<media-icon family="compat" name="restart" class="media-button-icon-base media-play-button-restart-icon video-controls-center-play-icon">
+</media-icon>
+<media-icon family="compat" name="play" class="media-button-icon-base media-play-button-play-icon video-controls-center-play-icon">
+</media-icon>
+<media-icon family="compat" name="pause" class="media-button-icon-base media-play-button-pause-icon video-controls-center-play-icon">
+</media-icon>
+</media-play-button>
+<media-tooltip trigger="vjs-m_pMjKs5-0-6-trigger" disabled side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip-label>
+</media-tooltip-label>
+<media-tooltip-shortcut class="media-tooltip-shortcut">
+</media-tooltip-shortcut>
+</media-tooltip>
+<media-seek-button seconds="10" class="media-button video-controls-center-button video-controls-center-seek" id="vjs-m_pMjKs5-0-7-trigger">
+<div class="media-seek-button-content">
+<media-icon family="compat" name="seek" class="media-button-icon video-controls-center-seek-icon">
+</media-icon>
+<span class="media-seek-button-label media-seek-button-forward-label">10</span>
+</div>
+</media-seek-button>
+<media-tooltip trigger="vjs-m_pMjKs5-0-7-trigger" disabled side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip-label>
+</media-tooltip-label>
+<media-tooltip-shortcut class="media-tooltip-shortcut">
+</media-tooltip-shortcut>
+</media-tooltip>
+</media-controls-group>
+<div class="video-controls-bottom video-controls-video-bottom">
+<div class="video-controls-slider-row">
+<media-time-slider class="media-time-slider" thumb-alignment="edge">
+<media-time-slider-chapters class="media-time-slider-chapters">
+<template>
+<div class="media-time-slider-chapter">
+<media-slider-track class="media-time-slider-track">
+<media-slider-buffer class="media-time-slider-buffer">
+</media-slider-buffer>
+<media-slider-fill class="media-time-slider-fill">
+</media-slider-fill>
+</media-slider-track>
+</div>
+</template>
+</media-time-slider-chapters>
+<media-slider-thumb class="media-time-slider-thumb">
+</media-slider-thumb>
+<media-slider-preview class="media-time-slider-preview">
+<media-slider-thumbnail class="media-slider-thumbnail">
+<img alt="" aria-hidden="true" decoding="async" class="media-slider-thumbnail-image">
+</media-slider-thumbnail>
+<div class="media-time-slider-preview-meta">
+<div class="media-time-slider-preview-label">
+<media-slider-value class="media-time-slider-value" type="pointer">
+</media-slider-value>
+<media-time-slider-chapter-title class="media-time-slider-chapter-title">
+</media-time-slider-chapter-title>
+</div>
+</div>
+</media-slider-preview>
+</media-time-slider>
+</div>
+<media-controls-group class="video-controls-row">
+<media-controls-group class="video-controls-group video-controls-start">
+<media-play-button class="media-button media-play-button" id="vjs-m_pMjKs5-0-8-trigger">
+<media-icon family="compat" name="restart" class="media-button-icon-base media-play-button-restart-icon">
+</media-icon>
+<media-icon family="compat" name="play" class="media-button-icon-base media-play-button-play-icon">
+</media-icon>
+<media-icon family="compat" name="pause" class="media-button-icon-base media-play-button-pause-icon">
+</media-icon>
+</media-play-button>
+<media-tooltip trigger="vjs-m_pMjKs5-0-8-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip-label>
+</media-tooltip-label>
+<media-tooltip-shortcut class="media-tooltip-shortcut">
+</media-tooltip-shortcut>
+</media-tooltip>
+<media-mute-button commandfor="vjs-KeOJ7gyd-0-popup" class="media-button media-mute-button" id="vjs-m_pMjKs5-0-9-trigger">
+<media-icon family="compat" name="volume-off" class="media-button-icon media-mute-button-off-icon">
+</media-icon>
+<media-icon family="compat" name="volume-high" class="media-button-icon media-mute-button-high-icon">
+</media-icon>
+</media-mute-button>
+<media-tooltip trigger="vjs-m_pMjKs5-0-9-trigger" delay="0" disabled side="top" sticky class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip-label>
+</media-tooltip-label>
+<media-tooltip-shortcut class="media-tooltip-shortcut">
+</media-tooltip-shortcut>
+</media-tooltip>
+<media-volume-popover open-on-hover delay="200" close-delay="100" side="top" class="media-popup media-popup-safe-area media-popup-transition media-volume-popover-popup" id="vjs-KeOJ7gyd-0-popup">
+<media-volume-slider class="media-volume-slider" orientation="vertical" thumb-alignment="edge">
+<media-slider-track class="media-volume-slider-track">
+<media-slider-fill class="media-volume-slider-fill">
+</media-slider-fill>
+</media-slider-track>
+<media-slider-thumb class="media-volume-slider-thumb">
+</media-slider-thumb>
+</media-volume-slider>
+</media-volume-popover>
+<media-time-group class="media-time-group">
+<media-time class="media-time-toggle" type="current" toggle>
+</media-time>
+<media-time class="media-time-current-value" type="current">
+</media-time>
+<media-time-separator class="media-time-separator">
+</media-time-separator>
+<media-time class="media-time-duration-value" type="duration">
+</media-time>
+</media-time-group>
+</media-controls-group>
+<media-controls-group class="video-controls-group">
+<media-captions-button class="media-button media-captions-button" id="vjs-m_pMjKs5-0-10-trigger">
+<media-icon family="compat" name="captions-off" class="media-button-icon media-captions-button-off-icon">
+</media-icon>
+<media-icon family="compat" name="captions-on" class="media-button-icon media-captions-button-on-icon">
+</media-icon>
+</media-captions-button>
+<media-tooltip trigger="vjs-m_pMjKs5-0-10-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip-label>
+</media-tooltip-label>
+<media-tooltip-shortcut class="media-tooltip-shortcut">
+</media-tooltip-shortcut>
+</media-tooltip>
+<button commandfor="vjs-eirWFcST-h-popup" class="media-button media-settings-button" id="vjs-m_pMjKs5-0-11-trigger">
+<media-icon family="compat" name="gear" class="media-button-icon media-settings-button-icon">
+</media-icon>
+<media-text class="media-settings-button-label" token="menu.settings">Settings</media-text>
+</button>
+<media-tooltip trigger="vjs-m_pMjKs5-0-11-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-text token="menu.settings">Settings</media-text>
+</media-tooltip>
+<media-menu side="top" align="center" class="media-popup media-popup-safe-area media-menu-popup media-menu-resizable-popup" id="vjs-eirWFcST-h-popup">
+<media-menu-content class="media-menu-content">
+<media-menu-item commandfor="vjs-eirWFcST-1-content" class="media-menu-item">
+<media-icon family="compat" name="switches" class="media-menu-trigger-icon">
+</media-icon>
+<media-text token="menu.quality">Quality</media-text>
+<span class="media-menu-hint">
+<span data-part="value" class="media-menu-hint-label">
+</span>
+<media-icon family="compat" name="chevron" class="media-menu-forward-chevron">
+</media-icon>
+</span>
+</media-menu-item>
+<media-menu-content class="media-menu-content" id="vjs-eirWFcST-1-content">
+<media-menu-item class="media-menu-back-item">
+<media-icon family="compat" name="chevron" class="media-menu-back-chevron">
+</media-icon>
+<media-text token="menu.quality">Quality</media-text>
+</media-menu-item>
+<media-menu-separator class="media-menu-separator">
+</media-menu-separator>
+<media-quality-radio-group class="media-menu-radio-group">
+<template>
+<media-menu-radio-item class="media-menu-radio-item">
+<span>
+<span data-part="label">
+</span>
+<sup data-part="tier" class="media-menu-tier">
+</sup>
+</span>
+<span data-part="badge" class="media-menu-badge">
+</span>
+<media-menu-item-indicator force-mount class="media-menu-indicator">
+<media-icon family="compat" name="check" class="media-menu-radio-icon">
+</media-icon>
+</media-menu-item-indicator>
+</media-menu-radio-item>
+</template>
+</media-quality-radio-group>
+</media-menu-content>
+<media-menu-item commandfor="vjs-eirWFcST-5-content" class="media-menu-item">
+<media-icon family="compat" name="speech" class="media-menu-trigger-icon">
+</media-icon>
+<media-text token="menu.audio">Audio</media-text>
+<span class="media-menu-hint">
+<span data-part="value" class="media-menu-hint-label">
+</span>
+<media-icon family="compat" name="chevron" class="media-menu-forward-chevron">
+</media-icon>
+</span>
+</media-menu-item>
+<media-menu-content class="media-menu-content" id="vjs-eirWFcST-5-content">
+<media-menu-item class="media-menu-back-item">
+<media-icon family="compat" name="chevron" class="media-menu-back-chevron">
+</media-icon>
+<media-text token="menu.audio">Audio</media-text>
+</media-menu-item>
+<media-menu-separator class="media-menu-separator">
+</media-menu-separator>
+<media-audio-track-radio-group class="media-menu-radio-group">
+<template>
+<media-menu-radio-item class="media-menu-radio-item">
+<span data-part="label">
+</span>
+<media-menu-item-indicator force-mount class="media-menu-indicator">
+<media-icon family="compat" name="check" class="media-menu-radio-icon">
+</media-icon>
+</media-menu-item-indicator>
+</media-menu-radio-item>
+</template>
+</media-audio-track-radio-group>
+</media-menu-content>
+<media-menu-item commandfor="vjs-eirWFcST-9-content" class="media-menu-item">
+<media-icon family="compat" name="speed" class="media-menu-trigger-icon">
+</media-icon>
+<media-text token="menu.speed">Speed</media-text>
+<span class="media-menu-hint">
+<span data-part="value" class="media-menu-hint-label">
+</span>
+<media-icon family="compat" name="chevron" class="media-menu-forward-chevron">
+</media-icon>
+</span>
+</media-menu-item>
+<media-menu-content class="media-menu-content" id="vjs-eirWFcST-9-content">
+<media-menu-item class="media-menu-back-item">
+<media-icon family="compat" name="chevron" class="media-menu-back-chevron">
+</media-icon>
+<media-text token="menu.speed">Speed</media-text>
+</media-menu-item>
+<media-menu-separator class="media-menu-separator">
+</media-menu-separator>
+<media-playback-rate-radio-group class="media-menu-radio-group">
+<template>
+<media-menu-radio-item class="media-menu-radio-item">
+<span data-part="label">
+</span>
+<media-menu-item-indicator force-mount class="media-menu-indicator">
+<media-icon family="compat" name="check" class="media-menu-radio-icon">
+</media-icon>
+</media-menu-item-indicator>
+</media-menu-radio-item>
+</template>
+</media-playback-rate-radio-group>
+</media-menu-content>
+<media-menu-item commandfor="vjs-eirWFcST-d-content" class="media-menu-item">
+<media-icon family="compat" name="captions-off" class="media-menu-trigger-icon">
+</media-icon>
+<media-text token="menu.captions">Captions</media-text>
+<span class="media-menu-hint">
+<span data-part="value" class="media-menu-hint-label">
+</span>
+<media-icon family="compat" name="chevron" class="media-menu-forward-chevron">
+</media-icon>
+</span>
+</media-menu-item>
+<media-menu-content class="media-menu-content" id="vjs-eirWFcST-d-content">
+<media-menu-item class="media-menu-back-item">
+<media-icon family="compat" name="chevron" class="media-menu-back-chevron">
+</media-icon>
+<media-text token="menu.captions">Captions</media-text>
+</media-menu-item>
+<media-menu-separator class="media-menu-separator">
+</media-menu-separator>
+<media-captions-radio-group class="media-menu-radio-group">
+<template>
+<media-menu-radio-item class="media-menu-radio-item">
+<span data-part="label">
+</span>
+<media-menu-item-indicator force-mount class="media-menu-indicator">
+<media-icon family="compat" name="check" class="media-menu-radio-icon">
+</media-icon>
+</media-menu-item-indicator>
+</media-menu-radio-item>
+</template>
+</media-captions-radio-group>
+</media-menu-content>
+</media-menu-content>
+</media-menu>
+</media-controls-group>
+</media-controls-group>
+</div>
+</media-tooltip-group>
+</media-controls-content>
+</media-controls>
+<media-hotkey keys="Space" action="togglePaused">
+</media-hotkey>
+<media-hotkey keys="k" action="togglePaused">
+</media-hotkey>
+<media-hotkey keys="m" action="toggleMuted">
+</media-hotkey>
+<media-hotkey keys="ArrowRight" action="seekStep">
+</media-hotkey>
+<media-hotkey keys="ArrowLeft" action="seekStep">
+</media-hotkey>
+<media-hotkey keys="l" action="seekStep">
+</media-hotkey>
+<media-hotkey keys="j" action="seekStep">
+</media-hotkey>
+<media-hotkey keys="ArrowUp" action="volumeStep">
+</media-hotkey>
+<media-hotkey keys="ArrowDown" action="volumeStep">
+</media-hotkey>
+<media-hotkey keys="0-9" action="seekToPercent">
+</media-hotkey>
+<media-hotkey keys="Home" action="seekToPercent" value="0">
+</media-hotkey>
+<media-hotkey keys="End" action="seekToPercent" value="100">
+</media-hotkey>
+<media-hotkey keys="&gt;" action="speedUp">
+</media-hotkey>
+<media-hotkey keys="&lt;" action="speedDown">
+</media-hotkey>
+<media-hotkey keys="f" action="toggleFullscreen">
+</media-hotkey>
+<media-hotkey keys="c" action="toggleSubtitles">
+</media-hotkey>
+<media-hotkey keys="i" action="togglePictureInPicture">
+</media-hotkey>
+<media-gesture type="tap" action="togglePaused" pointer="mouse" region="center">
+</media-gesture>
+<media-gesture type="tap" action="toggleControls" pointer="touch">
+</media-gesture>
+<media-gesture type="doubletap" action="seekStep" region="left">
+</media-gesture>
+<media-gesture type="doubletap" action="toggleFullscreen" region="center">
+</media-gesture>
+<media-gesture type="doubletap" action="seekStep" region="right">
+</media-gesture>
+<media-status-announcer class="media-status-announcer">
+</media-status-announcer>
+<div aria-hidden="true" class="media-indicator-group">
+<media-volume-indicator class="media-indicator media-volume-indicator">
+<media-volume-indicator-fill class="media-volume-indicator-fill">
+<media-icon family="compat" name="volume-high" class="media-volume-indicator-icon media-volume-indicator-high-icon">
+</media-icon>
+<media-icon family="compat" name="volume-low" class="media-volume-indicator-icon media-volume-indicator-low-icon">
+</media-icon>
+<media-icon family="compat" name="volume-off" class="media-volume-indicator-icon media-volume-indicator-off-icon">
+</media-icon>
+<media-volume-indicator-value class="media-volume-indicator-value">
+</media-volume-indicator-value>
+</media-volume-indicator-fill>
+</media-volume-indicator>
+<media-status-indicator actions="toggleSubtitles,toggleFullscreen,togglePictureInPicture" class="media-indicator media-status-indicator">
+<media-icon family="compat" name="captions-on" class="media-status-indicator-icon media-status-indicator-captions-on-icon">
+</media-icon>
+<media-icon family="compat" name="captions-off" class="media-status-indicator-icon media-status-indicator-captions-off-icon">
+</media-icon>
+<media-icon family="compat" name="fullscreen-enter" class="media-status-indicator-icon media-status-indicator-fullscreen-enter-icon">
+</media-icon>
+<media-icon family="compat" name="fullscreen-exit" class="media-status-indicator-icon media-status-indicator-fullscreen-exit-icon">
+</media-icon>
+<media-icon family="compat" name="pip-enter" class="media-status-indicator-icon media-status-indicator-pip-enter-icon">
+</media-icon>
+<media-icon family="compat" name="pip-exit" class="media-status-indicator-icon media-status-indicator-pip-exit-icon">
+</media-icon>
+<media-status-indicator-value>
+</media-status-indicator-value>
+</media-status-indicator>
+<media-seek-indicator class="media-indicator media-seek-indicator">
+<media-icon family="compat" name="chevron" class="media-seek-indicator-icon">
+</media-icon>
+<media-seek-indicator-value class="media-seek-indicator-value">
+</media-seek-indicator-value>
+</media-seek-indicator>
+</div>
+</media-container>`);
+//#endregion
+export { template };

package/dist/default/internal/skins/default-audio/register.js

@@ -20,21 +20,22 @@ import "../../../define/ui/controls.js";
 import "../../../define/ui/controls-content.js";
 import "../../../define/ui/tooltip-group.js";
 import "../../../define/ui/controls-group.js";
-import "../../../define/ui/play-button.js";
 import "../../../define/ui/tooltip.js";
 import "../../../define/ui/tooltip-label.js";
 import "../../../define/ui/tooltip-shortcut.js";
-import "../../../define/ui/mute-button.js";
-import "../../../define/ui/volume-popover.js";
-import "../../../define/ui/volume-slider.js";
+import "../../../define/ui/seek-button.js";
+import "../../../define/ui/play-button.js";
+import "../../../define/ui/time-slider.js";
 import "../../../define/ui/slider-track.js";
+import "../../../define/ui/slider-buffer.js";
 import "../../../define/ui/slider-fill.js";
 import "../../../define/ui/slider-thumb.js";
-import "../../../define/ui/time.js";
-import "../../../define/ui/time-slider.js";
-import "../../../define/ui/slider-buffer.js";
 import "../../../define/ui/slider-preview.js";
 import "../../../define/ui/slider-value.js";
+import "../../../define/ui/mute-button.js";
+import "../../../define/ui/volume-popover.js";
+import "../../../define/ui/volume-slider.js";
+import "../../../define/ui/time.js";
 import "../../../define/ui/menu.js";
 import "../../../define/ui/menu-content.js";
 import "../../../define/ui/menu-radio-item.js";
@@ -43,7 +44,6 @@ import "../../../define/ui/playback-rate-radio-group.js";
 import "../../../define/ui/hotkey.js";
 import "../../../define/ui/status-announcer.js";
 import "../../../define/ui/playback-rate-button.js";
-import "../../../define/ui/seek-button.js";
 //#region src/internal/skins/default-audio/register.ts
 registerIcons("default", {
 	check: checkIcon,