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

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

@@ -0,0 +1,237 @@
+import { createTemplate } from "@videojs/utils/dom";
+//#region src/internal/skins/compat-live-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="live-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-DzQ7xA3l-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-DzQ7xA3l-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-DzQ7xA3l-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-DzQ7xA3l-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-DzQ7xA3l-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-DzQ7xA3l-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-DzQ7xA3l-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-DzQ7xA3l-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-play-button class="media-button media-play-button video-controls-center-button video-controls-center-play" id="vjs-DzQ7xA3l-0-5-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-DzQ7xA3l-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-controls-group>
+<div class="video-controls-bottom video-controls-video-bottom">
+<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-DzQ7xA3l-0-6-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-DzQ7xA3l-0-6-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-live-button class="media-button media-live-button">
+<div aria-hidden="true" class="media-live-button-dot">
+</div>
+<media-text token="live.badge">Live</media-text>
+</media-live-button>
+<media-mute-button commandfor="vjs-lu9jnDMD-0-popup" class="media-button media-mute-button" id="vjs-DzQ7xA3l-0-7-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-DzQ7xA3l-0-7-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-lu9jnDMD-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-controls-group>
+<media-controls-group class="video-controls-group">
+<media-captions-button commandfor="vjs-kVStkIHi-0-popup" class="media-button media-captions-button" id="vjs-DzQ7xA3l-0-8-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-DzQ7xA3l-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-menu side="top" align="center" class="media-popup media-popup-safe-area media-menu-popup" id="vjs-kVStkIHi-0-popup">
+<media-menu-content class="media-menu-content">
+<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>
+</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="ArrowUp" action="volumeStep">
+</media-hotkey>
+<media-hotkey keys="ArrowDown" action="volumeStep">
+</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="toggleFullscreen" region="center">
+</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>
+</div>
+</media-container>`);
+//#endregion
+export { template };

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

@@ -0,0 +1,115 @@
+import "../../../define/i18n.js";
+import { registerIcons } from "../../../icons/element/register/index.js";
+import { airPlayEnterIcon } from "../../../icons/dist/html/compat/airplay-enter.js";
+import { airPlayExitIcon } from "../../../icons/dist/html/compat/airplay-exit.js";
+import { captionsOffIcon } from "../../../icons/dist/html/compat/captions-off.js";
+import { captionsOnIcon } from "../../../icons/dist/html/compat/captions-on.js";
+import { castEnterIcon } from "../../../icons/dist/html/compat/cast-enter.js";
+import { castExitIcon } from "../../../icons/dist/html/compat/cast-exit.js";
+import { checkIcon } from "../../../icons/dist/html/compat/check.js";
+import { chevronIcon } from "../../../icons/dist/html/compat/chevron.js";
+import { fullscreenEnterIcon } from "../../../icons/dist/html/compat/fullscreen-enter.js";
+import { fullscreenExitIcon } from "../../../icons/dist/html/compat/fullscreen-exit.js";
+import { gearIcon } from "../../../icons/dist/html/compat/gear.js";
+import { pauseIcon } from "../../../icons/dist/html/compat/pause.js";
+import { pipEnterIcon } from "../../../icons/dist/html/compat/pip-enter.js";
+import { pipExitIcon } from "../../../icons/dist/html/compat/pip-exit.js";
+import { playIcon } from "../../../icons/dist/html/compat/play.js";
+import { restartIcon } from "../../../icons/dist/html/compat/restart.js";
+import { seekIcon } from "../../../icons/dist/html/compat/seek.js";
+import { speechIcon } from "../../../icons/dist/html/compat/speech.js";
+import { speedIcon } from "../../../icons/dist/html/compat/speed.js";
+import { spinnerIcon } from "../../../icons/dist/html/compat/spinner.js";
+import { switchesIcon } from "../../../icons/dist/html/compat/switches.js";
+import { volumeHighIcon } from "../../../icons/dist/html/compat/volume-high.js";
+import { volumeLowIcon } from "../../../icons/dist/html/compat/volume-low.js";
+import { volumeOffIcon } from "../../../icons/dist/html/compat/volume-off.js";
+import "../../../define/ui/container.js";
+import "../../../define/ui/poster.js";
+import "../../../define/ui/buffering-indicator.js";
+import "../../../define/ui/error-dialog.js";
+import "../../../define/ui/dialog-backdrop.js";
+import "../../../define/ui/dialog-popup.js";
+import "../../../define/ui/dialog-title.js";
+import "../../../define/ui/dialog-description.js";
+import "../../../define/ui/dialog-close.js";
+import "../../../define/ui/title.js";
+import "../../../define/ui/controls.js";
+import "../../../define/ui/controls-backdrop.js";
+import "../../../define/ui/controls-content.js";
+import "../../../define/ui/tooltip-group.js";
+import "../../../define/ui/controls-group.js";
+import "../../../define/ui/airplay-button.js";
+import "../../../define/ui/tooltip.js";
+import "../../../define/ui/tooltip-label.js";
+import "../../../define/ui/tooltip-shortcut.js";
+import "../../../define/ui/cast-button.js";
+import "../../../define/ui/pip-button.js";
+import "../../../define/ui/fullscreen-button.js";
+import "../../../define/ui/seek-button.js";
+import "../../../define/ui/play-button.js";
+import "../../../define/ui/time-slider.js";
+import "../../../define/ui/time-slider-chapters.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/slider-preview.js";
+import "../../../define/ui/slider-thumbnail.js";
+import "../../../define/ui/slider-value.js";
+import "../../../define/ui/time-slider-chapter-title.js";
+import "../../../define/ui/mute-button.js";
+import "../../../define/ui/volume-popover.js";
+import "../../../define/ui/volume-slider.js";
+import "../../../define/ui/time-group.js";
+import "../../../define/ui/time.js";
+import "../../../define/ui/time-separator.js";
+import "../../../define/ui/captions-button.js";
+import "../../../define/ui/menu.js";
+import "../../../define/ui/menu-content.js";
+import "../../../define/ui/menu-item.js";
+import "../../../define/ui/menu-separator.js";
+import "../../../define/ui/quality-radio-group.js";
+import "../../../define/ui/menu-radio-item.js";
+import "../../../define/ui/menu-item-indicator.js";
+import "../../../define/ui/audio-track-radio-group.js";
+import "../../../define/ui/playback-rate-radio-group.js";
+import "../../../define/ui/captions-radio-group.js";
+import "../../../define/ui/hotkey.js";
+import "../../../define/ui/gesture.js";
+import "../../../define/ui/status-announcer.js";
+import "../../../define/ui/volume-indicator.js";
+import "../../../define/ui/volume-indicator-fill.js";
+import "../../../define/ui/volume-indicator-value.js";
+import "../../../define/ui/status-indicator.js";
+import "../../../define/ui/status-indicator-value.js";
+import "../../../define/ui/seek-indicator.js";
+import "../../../define/ui/seek-indicator-value.js";
+//#region src/internal/skins/compat-video/register.ts
+registerIcons("compat", {
+	"airplay-enter": airPlayEnterIcon,
+	"airplay-exit": airPlayExitIcon,
+	"captions-off": captionsOffIcon,
+	"captions-on": captionsOnIcon,
+	"cast-enter": castEnterIcon,
+	"cast-exit": castExitIcon,
+	check: checkIcon,
+	chevron: chevronIcon,
+	"fullscreen-enter": fullscreenEnterIcon,
+	"fullscreen-exit": fullscreenExitIcon,
+	gear: gearIcon,
+	pause: pauseIcon,
+	"pip-enter": pipEnterIcon,
+	"pip-exit": pipExitIcon,
+	play: playIcon,
+	restart: restartIcon,
+	seek: seekIcon,
+	speech: speechIcon,
+	speed: speedIcon,
+	spinner: spinnerIcon,
+	switches: switchesIcon,
+	"volume-high": volumeHighIcon,
+	"volume-low": volumeLowIcon,
+	"volume-off": volumeOffIcon
+});
+//#endregion