@videojs/html 10.0.1 → 10.2.0

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 };

package/dist/default/ui/slider/element.js

@@ -103,7 +103,9 @@ var SliderElement = class extends UIElement {
 				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
 			},
 			adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),
-			onResize: () => this.requestUpdate()
+			onResize: () => {
+				if (this.thumbAlignment === "edge") this.requestUpdate();
+			}
 		});
 		applyElementProps(this, this.#slider.rootProps, { signal });
 		applyStyles(this, this.#slider.rootStyle);

package/dist/default/ui/time-slider/element.js

@@ -4,9 +4,9 @@ import { playerContext } from "../../player/context.js";
 import { PlayerController } from "../../player/controller.js";
 import { UIElement } from "../ui-element.js";
 import { sliderContext } from "../slider/context.js";
-import { TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
-import { applyElementProps, applyStateDataAttrs, createSlider, getTimeSliderCSSVars, selectBuffer, selectControls, selectPlayback, selectTime } from "@videojs/core/dom";
-import { hasTimeRange } from "@videojs/media";
+import { SliderCSSVars, TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
+import { applyElementProps, applyStateDataAttrs, createSlider, createTimeSliderSeek, getTimeSliderCSSVars, selectBuffer, selectControls, selectPlayback, selectTime } from "@videojs/core/dom";
+import { hasTimeRange, isMediaPlaying } from "@videojs/media";
 import { ContextProvider } from "@videojs/element/context";
 import { translateText } from "@videojs/core/i18n";
 import { applyStyles } from "@videojs/utils/dom";
@@ -33,7 +33,9 @@ var TimeSliderElement = class extends UIElement {
 		this.#timeState = new PlayerController(this, playerContext, selectTime);
 		this.#bufferState = new PlayerController(this, playerContext, selectBuffer);
 		this.#playbackState = new PlayerController(this, playerContext, selectPlayback);
+		this.#seek = createTimeSliderSeek(SliderCSSVars.fill);
 		this.#i18n = new I18nController(this, i18nContext);
+		this.#cssVars = {};
 		this.#slider = null;
 		this.#disconnect = null;
 		this.#releaseControlsLock = null;
@@ -71,7 +73,9 @@ var TimeSliderElement = class extends UIElement {
 	#timeState;
 	#bufferState;
 	#playbackState;
+	#seek;
 	#i18n;
+	#cssVars;
 	#slider;
 	#disconnect;
 	#releaseControlsLock;
@@ -80,6 +84,15 @@ var TimeSliderElement = class extends UIElement {
 		if (this.destroyed) return;
 		this.#disconnect = new AbortController();
 		const signal = this.#disconnect.signal;
+		let dragSeekPercent;
+		const seek = (percent) => {
+			const media = this.#timeState.value;
+			if (media) {
+				const time = this.#core.rawValueFromPercent(percent);
+				this.#seek.seek(percent);
+				media.seek(time);
+			}
+		};
 		this.#slider = createSlider({
 			getElement: () => this,
 			getThumbElement: () => this.querySelector("media-slider-thumb"),
@@ -102,9 +115,14 @@ var TimeSliderElement = class extends UIElement {
 			},
 			getStepPercent: () => this.#core.getStepPercent(),
 			getLargeStepPercent: () => this.#core.getLargeStepPercent(),
+			onValueChange: (percent) => {
+				if (!this.#slider?.input.current.dragging || percent === dragSeekPercent) return;
+				dragSeekPercent = percent;
+				seek(percent);
+			},
 			onValueCommit: (percent) => {
-				const media = this.#timeState.value;
-				if (media) media.seek(this.#core.rawValueFromPercent(percent));
+				if (percent !== dragSeekPercent) seek(percent);
+				dragSeekPercent = void 0;
 			},
 			changeThrottle: this.changeThrottle,
 			onPressStart: () => {
@@ -120,15 +138,19 @@ var TimeSliderElement = class extends UIElement {
 				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
 			},
 			adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),
-			onResize: () => this.requestUpdate()
+			onResize: () => {
+				if (this.thumbAlignment === "edge") this.requestUpdate();
+			}
 		});
 		applyElementProps(this, this.#slider.rootProps, { signal });
 		applyStyles(this, this.#slider.rootStyle);
 		this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
+		this.#seek.state.subscribe(() => this.requestUpdate(), { signal });
 	}
 	disconnectedCallback() {
 		this.#releaseControlsVisibilityLock();
 		this.#resumeIfDragPaused();
+		this.#seek.destroy();
 		super.disconnectedCallback();
 		this.#disconnect?.abort();
 		this.#disconnect = null;
@@ -136,6 +158,7 @@ var TimeSliderElement = class extends UIElement {
 	destroyCallback() {
 		this.#releaseControlsVisibilityLock();
 		this.#resumeIfDragPaused();
+		this.#seek.destroy();
 		this.#slider?.destroy();
 		super.destroyCallback();
 	}
@@ -165,7 +188,11 @@ var TimeSliderElement = class extends UIElement {
 		if (!this.#slider) return;
 		const time = this.#timeState.value;
 		const buffer = this.#bufferState.value;
-		if (!time) return;
+		if (!time) {
+			this.#seek.destroy();
+			this.removeAttribute("data-playing");
+			return;
+		}
 		this.#core.setInput(this.#slider.input.current);
 		const media = {
 			...time,
@@ -176,9 +203,18 @@ var TimeSliderElement = class extends UIElement {
 		};
 		this.#core.setMedia(media);
 		const state = this.#core.getState();
-		const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(state));
+		this.#seek.update(state.seeking, state.fillPercent, this);
+		const percent = this.#seek.state.current.percent;
+		this.toggleAttribute("data-playing", isMediaPlaying(this.#playbackState.value) && !state.disabled && !state.dragging && !state.seeking && percent === void 0);
+		const fill = percent === void 0 || state.dragging || state.disabled ? state : {
+			...state,
+			fillPercent: percent
+		};
+		const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(fill));
+		const styles = Object.fromEntries(Object.entries(cssVars).filter(([name, value]) => this.#cssVars[name] !== value));
+		applyStyles(this, styles);
+		this.#cssVars = cssVars;
 		const thumbAttrs = this.#core.getAttrs(state);
-		applyStyles(this, cssVars);
 		applyStateDataAttrs(this, state, TimeSliderDataAttrs);
 		this.#provider.setValue({
 			state,

package/dist/default/ui/volume-slider/element.js

@@ -97,7 +97,9 @@ var VolumeSliderElement = class extends UIElement {
 				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
 			},
 			adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),
-			onResize: () => this.requestUpdate()
+			onResize: () => {
+				if (this.thumbAlignment === "edge") this.requestUpdate();
+			}
 		});
 		const wheelProps = createWheelStep({
 			isDisabled,

package/dist/default/version.js

@@ -1,7 +1,7 @@
 //#region src/version.ts
 const readVersion = () => {
 	try {
-		return "10.0.1";
+		return "10.2.0";
 	} catch {}
 	return "UNKNOWN";
 };

package/dist/dev/define/audio/compat-skin.css

@@ -307,6 +307,43 @@ media-container video::-webkit-media-text-track-container {
     overflow: hidden;
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button {
+    align-items: center;
+    gap: calc(var(--media-spacing) * 1.5);
+    font-size: calc(var(--media-spacing) * 2.75);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    grid-auto-flow: column;
+    font-weight: 600;
+    width: auto !important;
+    padding-inline: calc(var(--media-spacing) * 2.5) !important;
+  }
+
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button-dot {
+    width: calc(var(--media-spacing) * 2);
+    height: calc(var(--media-spacing) * 2);
+    opacity: .4;
+    transition-property: background-color, opacity;
+    transition-duration: .15s;
+    transition-duration: var(--media-duration);
+    background-color: currentColor;
+    border-radius: 9999px;
+    flex-shrink: 0;
+    transition-timing-function: cubic-bezier(0, 0, .2, 1);
+    display: inline-block;
+  }
+
+  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button)[data-live-edge] .media-live-button-dot {
+    opacity: 1;
+    background-color: #f43f5e;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button-dot {
+      transition-property: none;
+    }
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-popup {
     color: inherit;
     border-style: solid;
@@ -453,66 +490,6 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
-  :where(.media-skin[data-theme="compat"][data-preset="audio"]) :where(.media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-enter-icon, :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-airplay-button-exit-icon {
-    display: none;
-  }
-
-  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-exit-icon {
-    display: block;
-  }
-
-  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-button-icon {
-    width: calc(var(--media-spacing) * 4.5);
-    height: calc(var(--media-spacing) * 4.5);
-    grid-row-start: 1;
-    grid-column-start: 1;
-  }
-
-  :where(.media-skin[data-theme="compat"][data-preset="audio"]) :where(.media-captions-button)[data-active] .media-captions-button-off-icon, :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-captions-button-on-icon {
-    display: none;
-  }
-
-  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-captions-button)[data-active] .media-captions-button-on-icon {
-    display: block;
-  }
-
-  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button {
-    align-items: center;
-    gap: calc(var(--media-spacing) * 1.5);
-    font-size: calc(var(--media-spacing) * 2.75);
-    letter-spacing: .05em;
-    text-transform: uppercase;
-    grid-auto-flow: column;
-    font-weight: 600;
-    width: auto !important;
-    padding-inline: calc(var(--media-spacing) * 2.5) !important;
-  }
-
-  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button-dot {
-    width: calc(var(--media-spacing) * 2);
-    height: calc(var(--media-spacing) * 2);
-    opacity: .4;
-    transition-property: background-color, opacity;
-    transition-duration: .15s;
-    transition-duration: var(--media-duration);
-    background-color: currentColor;
-    border-radius: 9999px;
-    flex-shrink: 0;
-    transition-timing-function: cubic-bezier(0, 0, .2, 1);
-    display: inline-block;
-  }
-
-  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button)[data-live-edge] .media-live-button-dot {
-    opacity: 1;
-    background-color: #f43f5e;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button-dot {
-      transition-property: none;
-    }
-  }
-
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-button-icon-base {
     width: calc(var(--media-spacing) * 4.5);
     height: calc(var(--media-spacing) * 4.5);
@@ -825,6 +802,13 @@ media-container video::-webkit-media-text-track-container {
     display: block;
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-button-icon {
+    width: calc(var(--media-spacing) * 4.5);
+    height: calc(var(--media-spacing) * 4.5);
+    grid-row-start: 1;
+    grid-column-start: 1;
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-mute-button-high-icon {
     display: none;
   }
@@ -947,6 +931,24 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-backdrop {
+    pointer-events: none;
+    z-index: 10;
+    background-image: linear-gradient(to top, #000000b3, #0003, #00000080);
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-buffering):not([data-visible]) .video-controls-backdrop:not([data-visible]) {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-backdrop {
+      background-image: none;
+    }
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-bottom {
     pointer-events: auto;
     inset-inline: calc(var(--media-spacing) * 2);
@@ -993,6 +995,10 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-buffering {
+    display: contents;
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-center {
     pointer-events: auto;
     align-items: center;
@@ -1014,6 +1020,10 @@ media-container video::-webkit-media-text-track-container {
     transition-duration: var(--media-duration);
   }
 
+  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-buffering)[data-visible] .video-controls-center {
+    display: none !important;
+  }
+
   @media (prefers-reduced-motion: no-preference) {
     :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-content):not([data-visible]) .video-controls-center {
       transform: translate(-50%, -50%) scale(.9);
@@ -1189,6 +1199,22 @@ media-container video::-webkit-media-text-track-container {
     }
   }
 
+  @container media-root (width < 42rem) {
+    :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-top {
+      inset-inline-end: calc(var(--media-spacing) * 2);
+      top: calc(var(--media-spacing) * 2);
+    }
+
+    @media (forced-colors: active) {
+      :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-top {
+        padding-inline: calc(var(--media-spacing) * 2);
+        padding-block: calc(var(--media-spacing) * 2);
+        inset-inline-end: 0;
+        top: 0;
+      }
+    }
+  }
+
   @media (forced-colors: active) {
     :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-video-bottom {
       padding-inline: calc(var(--media-spacing) * 2);