@videojs/html 10.0.0 → 10.1.0

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

@@ -0,0 +1,461 @@
+import { createTemplate } from "@videojs/utils/dom";
+//#region src/internal/skins/scaffold-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="scaffold" 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-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-controls>
+<media-controls-backdrop class="video-controls-backdrop">
+</media-controls-backdrop>
+<media-controls-group class="media-buffering-indicator-controls">
+<media-buffering-indicator class="media-buffering-indicator media-buffering-indicator-backdrop">
+<media-icon family="scaffold" name="spinner" class="media-buffering-indicator-spinner-icon">
+</media-icon>
+</media-buffering-indicator>
+</media-controls-group>
+<media-controls-content class="video-controls-content">
+<media-tooltip-group>
+<media-controls-group class="video-controls-top">
+<media-title class="media-title">
+</media-title>
+<media-airplay-button class="media-button media-airplay-button" id="vjs-HNl1fwKe-0-trigger">
+<media-icon family="scaffold" name="airplay-enter" class="media-button-icon media-airplay-button-enter-icon">
+</media-icon>
+<media-icon family="scaffold" name="airplay-exit" class="media-button-icon media-airplay-button-exit-icon">
+</media-icon>
+</media-airplay-button>
+<media-tooltip trigger="vjs-HNl1fwKe-0-trigger" side="top" class="media-popup media-popup-safe-area 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-HNl1fwKe-0-2-trigger">
+<media-icon family="scaffold" name="cast-enter" class="media-button-icon media-cast-button-enter-icon">
+</media-icon>
+<media-icon family="scaffold" name="cast-exit" class="media-button-icon media-cast-button-exit-icon">
+</media-icon>
+</media-cast-button>
+<media-tooltip trigger="vjs-HNl1fwKe-0-2-trigger" side="top" class="media-popup media-popup-safe-area 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-HNl1fwKe-0-3-trigger">
+<media-icon family="scaffold" name="pip-enter" class="media-button-icon media-pip-button-enter-icon">
+</media-icon>
+<media-icon family="scaffold" name="pip-exit" class="media-button-icon media-pip-button-exit-icon">
+</media-icon>
+</media-pip-button>
+<media-tooltip trigger="vjs-HNl1fwKe-0-3-trigger" side="top" class="media-popup media-popup-safe-area 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-HNl1fwKe-0-4-trigger">
+<media-icon family="scaffold" name="fullscreen-enter" class="media-button-icon media-fullscreen-button-enter-icon">
+</media-icon>
+<media-icon family="scaffold" name="fullscreen-exit" class="media-button-icon media-fullscreen-button-exit-icon">
+</media-icon>
+</media-fullscreen-button>
+<media-tooltip trigger="vjs-HNl1fwKe-0-4-trigger" side="top" class="media-popup media-popup-safe-area 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-buffering-indicator class="video-controls-buffering">
+<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-HNl1fwKe-0-5-trigger">
+<div class="media-seek-button-content">
+<media-icon family="scaffold" 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-HNl1fwKe-0-5-trigger" disabled side="top" class="media-popup media-popup-safe-area 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-HNl1fwKe-0-6-trigger">
+<media-icon family="scaffold" name="restart" class="media-button-icon-base media-play-button-restart-icon video-controls-center-play-icon">
+</media-icon>
+<media-icon family="scaffold" name="play" class="media-button-icon-base media-play-button-play-icon video-controls-center-play-icon">
+</media-icon>
+<media-icon family="scaffold" 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-HNl1fwKe-0-6-trigger" disabled side="top" class="media-popup media-popup-safe-area 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-HNl1fwKe-0-7-trigger">
+<div class="media-seek-button-content">
+<media-icon family="scaffold" 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-HNl1fwKe-0-7-trigger" disabled side="top" class="media-popup media-popup-safe-area media-tooltip-popup">
+<media-tooltip-label>
+</media-tooltip-label>
+<media-tooltip-shortcut class="media-tooltip-shortcut">
+</media-tooltip-shortcut>
+</media-tooltip>
+</media-controls-group>
+</media-buffering-indicator>
+<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-HNl1fwKe-0-8-trigger">
+<media-icon family="scaffold" name="restart" class="media-button-icon-base media-play-button-restart-icon">
+</media-icon>
+<media-icon family="scaffold" name="play" class="media-button-icon-base media-play-button-play-icon">
+</media-icon>
+<media-icon family="scaffold" name="pause" class="media-button-icon-base media-play-button-pause-icon">
+</media-icon>
+</media-play-button>
+<media-tooltip trigger="vjs-HNl1fwKe-0-8-trigger" side="top" class="media-popup media-popup-safe-area 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-a5-df5XX-0-popup" class="media-button media-mute-button" id="vjs-HNl1fwKe-0-9-trigger">
+<media-icon family="scaffold" name="volume-off" class="media-button-icon media-mute-button-off-icon">
+</media-icon>
+<media-icon family="scaffold" name="volume-high" class="media-button-icon media-mute-button-high-icon">
+</media-icon>
+</media-mute-button>
+<media-tooltip trigger="vjs-HNl1fwKe-0-9-trigger" delay="0" disabled side="top" sticky class="media-popup media-popup-safe-area 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-volume-popover-popup" id="vjs-a5-df5XX-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-HNl1fwKe-0-10-trigger">
+<media-icon family="scaffold" name="captions-off" class="media-button-icon media-captions-button-off-icon">
+</media-icon>
+<media-icon family="scaffold" name="captions-on" class="media-button-icon media-captions-button-on-icon">
+</media-icon>
+</media-captions-button>
+<media-tooltip trigger="vjs-HNl1fwKe-0-10-trigger" side="top" class="media-popup media-popup-safe-area media-tooltip-popup">
+<media-tooltip-label>
+</media-tooltip-label>
+<media-tooltip-shortcut class="media-tooltip-shortcut">
+</media-tooltip-shortcut>
+</media-tooltip>
+<button commandfor="vjs-dexOLs_f-h-popup" class="media-button" id="vjs-HNl1fwKe-0-11-trigger">
+<media-icon family="scaffold" name="gear" class="media-button-icon">
+</media-icon>
+<media-text class="media-settings-button-label" token="menu.settings">Settings</media-text>
+</button>
+<media-tooltip trigger="vjs-HNl1fwKe-0-11-trigger" side="top" class="media-popup media-popup-safe-area 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" id="vjs-dexOLs_f-h-popup">
+<media-menu-content class="media-menu-content">
+<media-menu-item commandfor="vjs-dexOLs_f-1-content" class="media-menu-item">
+<media-icon family="scaffold" 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="scaffold" name="chevron" class="media-menu-forward-chevron">
+</media-icon>
+</span>
+</media-menu-item>
+<media-menu-content class="media-menu-content" id="vjs-dexOLs_f-1-content">
+<media-menu-item class="media-menu-back-item">
+<media-icon family="scaffold" 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="scaffold" 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-dexOLs_f-5-content" class="media-menu-item">
+<media-icon family="scaffold" 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="scaffold" name="chevron" class="media-menu-forward-chevron">
+</media-icon>
+</span>
+</media-menu-item>
+<media-menu-content class="media-menu-content" id="vjs-dexOLs_f-5-content">
+<media-menu-item class="media-menu-back-item">
+<media-icon family="scaffold" 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="scaffold" 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-dexOLs_f-9-content" class="media-menu-item">
+<media-icon family="scaffold" 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="scaffold" name="chevron" class="media-menu-forward-chevron">
+</media-icon>
+</span>
+</media-menu-item>
+<media-menu-content class="media-menu-content" id="vjs-dexOLs_f-9-content">
+<media-menu-item class="media-menu-back-item">
+<media-icon family="scaffold" 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="scaffold" 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-dexOLs_f-d-content" class="media-menu-item">
+<media-icon family="scaffold" 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="scaffold" name="chevron" class="media-menu-forward-chevron">
+</media-icon>
+</span>
+</media-menu-item>
+<media-menu-content class="media-menu-content" id="vjs-dexOLs_f-d-content">
+<media-menu-item class="media-menu-back-item">
+<media-icon family="scaffold" 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="scaffold" 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="scaffold" name="volume-high" class="media-volume-indicator-icon media-volume-indicator-high-icon">
+</media-icon>
+<media-icon family="scaffold" name="volume-low" class="media-volume-indicator-icon media-volume-indicator-low-icon">
+</media-icon>
+<media-icon family="scaffold" 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="scaffold" name="captions-on" class="media-status-indicator-icon media-status-indicator-captions-on-icon">
+</media-icon>
+<media-icon family="scaffold" name="captions-off" class="media-status-indicator-icon media-status-indicator-captions-off-icon">
+</media-icon>
+<media-icon family="scaffold" name="fullscreen-enter" class="media-status-indicator-icon media-status-indicator-fullscreen-enter-icon">
+</media-icon>
+<media-icon family="scaffold" name="fullscreen-exit" class="media-status-indicator-icon media-status-indicator-fullscreen-exit-icon">
+</media-icon>
+<media-icon family="scaffold" name="pip-enter" class="media-status-indicator-icon media-status-indicator-pip-enter-icon">
+</media-icon>
+<media-icon family="scaffold" 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="scaffold" 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/media/playerjs-video/adapter.js

@@ -0,0 +1,25 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/media/dom";
+import { escapeHtml } from "@videojs/utils/string";
+import { PlayerJsAdapter, buildPlayerJsIframeSrc } from "@videojs/playerjs-video";
+//#region src/media/playerjs-video/adapter.ts
+var PlayerJsCustomMediaElement = class extends CustomMediaElement("iframe", PlayerJsAdapter) {
+	static {
+		this.getTemplateHTML = (attrs) => {
+			const initialSrc = buildPlayerJsIframeSrc(attrs.src ?? "", templateAttrsToEmbedProps(attrs));
+			return `<style> :host { display: inline-block; min-width: 300px; min-height: 150px; position: relative; } iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* A cross-origin frame swallows every pointer event, so the skin above it never sees the hover that reveals the controls. Not every service lets its chrome be hidden, so without controls the frame is kept out of hit-testing as well. */ :host(:not([controls])) { pointer-events: none; } </style><iframe part="iframe" title="Video player" ${initialSrc ? ` src="${escapeHtml(initialSrc)}"` : ""} allow="accelerometer; fullscreen; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen frameborder="0" width="100%" height="100%" referrerpolicy="${escapeHtml(attrs.referrerpolicy ?? "")}" ></iframe>`;
+		};
+	}
+};
+function templateAttrsToEmbedProps(attrs) {
+	return {
+		autoplay: attrs.autoplay !== void 0,
+		defaultMuted: attrs.muted !== void 0,
+		loop: attrs.loop !== void 0,
+		controls: attrs.controls !== void 0,
+		preload: attrs.preload ?? PlayerJsAdapter.defaultProps.preload
+	};
+}
+var PlayerJsVideo = class extends MediaAttachMixin(PlayerJsCustomMediaElement) {};
+//#endregion
+export { PlayerJsVideo };

package/dist/default/presets/audio/index.js

@@ -1,6 +1,7 @@
 import { CompatAudioSkinElement } from "./compat-skin.js";
 import { NeutralAudioSkinElement } from "./neutral-skin.js";
 import { AudioPlayerElement, PlayerController } from "./player.js";
+import { ScaffoldAudioSkinElement } from "./scaffold-skin.js";
 import { AudioSkinElement } from "./skin.js";
 import { audioFeatures } from "@videojs/core/dom";
-export { AudioPlayerElement, AudioSkinElement, CompatAudioSkinElement, NeutralAudioSkinElement, PlayerController, audioFeatures };
+export { AudioPlayerElement, AudioSkinElement, CompatAudioSkinElement, NeutralAudioSkinElement, PlayerController, ScaffoldAudioSkinElement, audioFeatures };

package/dist/default/presets/audio/scaffold-skin.js

@@ -0,0 +1,19 @@
+import { SkinElement } from "../skin.js";
+import { template } from "../../internal/skins/scaffold-audio/template.js";
+import scaffold_skin_default from "../../define/audio/scaffold-skin2.js";
+import { createShadowStyle } from "@videojs/utils/dom";
+//#region src/presets/audio/scaffold-skin.ts
+/** Packaged scaffold audio UI registered as `<audio-scaffold-skin>`. */
+var ScaffoldAudioSkinElement = class extends SkinElement {
+	static {
+		this.tagName = "audio-scaffold-skin";
+	}
+	static {
+		this.styles = createShadowStyle(scaffold_skin_default);
+	}
+	static {
+		this.template = template;
+	}
+};
+//#endregion
+export { ScaffoldAudioSkinElement };

package/dist/default/presets/background/skin.js

@@ -1,5 +1,4 @@
 import skin_default from "../../define/background/skin2.js";
-import { SKIN_HELP_TEXT, SKIN_HELP_URL } from "@videojs/core";
 import { ReactiveElement } from "@videojs/element";
 import { ensureGlobalStyle } from "@videojs/utils/dom";
 //#region src/presets/background/skin.ts
@@ -11,7 +10,6 @@ function getTemplateHTML() {
       <slot name="media"></slot>
       <slot></slot>
     </media-container>
-    <a rel="help" href="${SKIN_HELP_URL}" hidden>${SKIN_HELP_TEXT}</a>
   `;
 }
 var BackgroundVideoSkinElement = class BackgroundVideoSkinElement extends ReactiveElement {

package/dist/default/presets/live-audio/index.js

@@ -1,6 +1,7 @@
 import { CompatLiveAudioSkinElement } from "./compat-skin.js";
 import { NeutralLiveAudioSkinElement } from "./neutral-skin.js";
 import { LiveAudioPlayerElement, PlayerController } from "./player.js";
+import { ScaffoldLiveAudioSkinElement } from "./scaffold-skin.js";
 import { LiveAudioSkinElement } from "./skin.js";
 import { liveAudioFeatures } from "@videojs/core/dom";
-export { CompatLiveAudioSkinElement, LiveAudioPlayerElement, LiveAudioSkinElement, NeutralLiveAudioSkinElement, PlayerController, liveAudioFeatures };
+export { CompatLiveAudioSkinElement, LiveAudioPlayerElement, LiveAudioSkinElement, NeutralLiveAudioSkinElement, PlayerController, ScaffoldLiveAudioSkinElement, liveAudioFeatures };

package/dist/default/presets/live-audio/scaffold-skin.js

@@ -0,0 +1,19 @@
+import { SkinElement } from "../skin.js";
+import { template } from "../../internal/skins/scaffold-live-audio/template.js";
+import scaffold_skin_default from "../../define/live-audio/scaffold-skin2.js";
+import { createShadowStyle } from "@videojs/utils/dom";
+//#region src/presets/live-audio/scaffold-skin.ts
+/** Packaged scaffold live-audio UI registered as `<live-audio-scaffold-skin>`. */
+var ScaffoldLiveAudioSkinElement = class extends SkinElement {
+	static {
+		this.tagName = "live-audio-scaffold-skin";
+	}
+	static {
+		this.styles = createShadowStyle(scaffold_skin_default);
+	}
+	static {
+		this.template = template;
+	}
+};
+//#endregion
+export { ScaffoldLiveAudioSkinElement };

package/dist/default/presets/live-video/index.js

@@ -1,6 +1,7 @@
 import { CompatLiveVideoSkinElement } from "./compat-skin.js";
 import { NeutralLiveVideoSkinElement } from "./neutral-skin.js";
 import { LiveVideoPlayerElement, PlayerController } from "./player.js";
+import { ScaffoldLiveVideoSkinElement } from "./scaffold-skin.js";
 import { LiveVideoSkinElement } from "./skin.js";
 import { liveVideoFeatures } from "@videojs/core/dom";
-export { CompatLiveVideoSkinElement, LiveVideoPlayerElement, LiveVideoSkinElement, NeutralLiveVideoSkinElement, PlayerController, liveVideoFeatures };
+export { CompatLiveVideoSkinElement, LiveVideoPlayerElement, LiveVideoSkinElement, NeutralLiveVideoSkinElement, PlayerController, ScaffoldLiveVideoSkinElement, liveVideoFeatures };

package/dist/default/presets/live-video/scaffold-skin.js

@@ -0,0 +1,19 @@
+import { SkinElement } from "../skin.js";
+import { template } from "../../internal/skins/scaffold-live-video/template.js";
+import scaffold_skin_default from "../../define/live-video/scaffold-skin2.js";
+import { createShadowStyle } from "@videojs/utils/dom";
+//#region src/presets/live-video/scaffold-skin.ts
+/** Packaged scaffold live-video UI registered as `<live-video-scaffold-skin>`. */
+var ScaffoldLiveVideoSkinElement = class extends SkinElement {
+	static {
+		this.tagName = "live-video-scaffold-skin";
+	}
+	static {
+		this.styles = createShadowStyle(scaffold_skin_default);
+	}
+	static {
+		this.template = template;
+	}
+};
+//#endregion
+export { ScaffoldLiveVideoSkinElement };

package/dist/default/presets/skin.js

@@ -1,6 +1,5 @@
 import global_default from "../define/global.js";
 import shadow_default from "../define/shadow.js";
-import { SKIN_HELP_TEXT, SKIN_HELP_URL } from "@videojs/core";
 import { ReactiveElement } from "@videojs/element";
 import { applyShadowStyles, createShadowStyle, ensureGlobalStyle, renderTemplate } from "@videojs/utils/dom";
 //#region src/presets/skin.ts
@@ -21,21 +20,11 @@ var SkinElement = class extends ReactiveElement {
 			const ctor = this.constructor;
 			this.attachShadow(ctor.shadowRootOptions);
 			if (ctor.template) renderTemplate(this.shadowRoot, ctor.template);
-			this.shadowRoot.append(createHelpLink(this.ownerDocument));
 			const sheets = [shadowSheet];
 			if (ctor.styles) sheets.push(ctor.styles);
 			applyShadowStyles(this.shadowRoot, sheets);
 		}
 	}
 };
-/** Every packaged skin links to the page that explains what the player is. See `SKIN_HELP_URL`. */
-function createHelpLink(doc) {
-	const link = doc.createElement("a");
-	link.rel = "help";
-	link.href = SKIN_HELP_URL;
-	link.hidden = true;
-	link.textContent = SKIN_HELP_TEXT;
-	return link;
-}
 //#endregion
 export { SkinElement };

package/dist/default/presets/video/index.js

@@ -1,6 +1,7 @@
 import { CompatVideoSkinElement } from "./compat-skin.js";
 import { NeutralVideoSkinElement } from "./neutral-skin.js";
 import { PlayerController, VideoPlayerElement } from "./player.js";
+import { ScaffoldVideoSkinElement } from "./scaffold-skin.js";
 import { VideoSkinElement } from "./skin.js";
 import { videoFeatures } from "@videojs/core/dom";
-export { CompatVideoSkinElement, NeutralVideoSkinElement, PlayerController, VideoPlayerElement, VideoSkinElement, videoFeatures };
+export { CompatVideoSkinElement, NeutralVideoSkinElement, PlayerController, ScaffoldVideoSkinElement, VideoPlayerElement, VideoSkinElement, videoFeatures };

package/dist/default/presets/video/scaffold-skin.js

@@ -0,0 +1,19 @@
+import { SkinElement } from "../skin.js";
+import { template } from "../../internal/skins/scaffold-video/template.js";
+import scaffold_skin_default from "../../define/video/scaffold-skin2.js";
+import { createShadowStyle } from "@videojs/utils/dom";
+//#region src/presets/video/scaffold-skin.ts
+/** Packaged scaffold video UI registered as `<video-scaffold-skin>`. */
+var ScaffoldVideoSkinElement = class extends SkinElement {
+	static {
+		this.tagName = "video-scaffold-skin";
+	}
+	static {
+		this.styles = createShadowStyle(scaffold_skin_default);
+	}
+	static {
+		this.template = template;
+	}
+};
+//#endregion
+export { ScaffoldVideoSkinElement };