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

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

@@ -2,6 +2,10 @@ import { sliderContext } from "./context.js";
 import { ThumbnailElement } from "../thumbnail/element.js";
 import { ContextConsumer } from "@videojs/element/context";
 //#region src/ui/slider/thumbnail.ts
+/**
+* `<media-thumbnail>` whose `time` follows the slider pointer. Left empty, it draws an image of its own; supply an
+* `<img>` child to compose overlays or loading indicators beside the image it controls.
+*/
 var SliderThumbnailElement = class extends ThumbnailElement {
 	static {
 		this.tagName = "media-slider-thumbnail";
@@ -18,5 +22,3 @@ var SliderThumbnailElement = class extends ThumbnailElement {
 };
 //#endregion
 export { SliderThumbnailElement };
-
-//# sourceMappingURL=thumbnail.js.map

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

@@ -16,5 +16,3 @@ var SliderTrackElement = class extends ContextPartElement {
 };
 //#endregion
 export { SliderTrackElement };
-
-//# sourceMappingURL=track.js.map

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

@@ -3,6 +3,7 @@ import { sliderContext } from "./context.js";
 import { applyStateDataAttrs } from "@videojs/core/dom";
 import { ContextConsumer } from "@videojs/element/context";
 //#region src/ui/slider/value.ts
+/** Writes the formatted current or pointer slider value into its own text content, replacing any children. */
 var SliderValueElement = class extends UIElement {
 	constructor(..._args) {
 		super(..._args);
@@ -34,5 +35,3 @@ var SliderValueElement = class extends UIElement {
 };
 //#endregion
 export { SliderValueElement };
-
-//# sourceMappingURL=value.js.map

package/dist/default/ui/status-announcer/element.js

@@ -86,5 +86,3 @@ var StatusAnnouncerElement = class extends UIElement {
 };
 //#endregion
 export { StatusAnnouncerElement };
-
-//# sourceMappingURL=element.js.map

package/dist/default/ui/status-indicator/element.js

@@ -57,5 +57,3 @@ function renderStatusIndicator(element, state) {
 }
 //#endregion
 export { StatusIndicatorElement };
-
-//# sourceMappingURL=element.js.map

package/dist/default/ui/status-indicator/value.js

@@ -7,5 +7,3 @@ var StatusIndicatorValueElement = class extends UIElement {
 };
 //#endregion
 export { StatusIndicatorValueElement };
-
-//# sourceMappingURL=value.js.map

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

@@ -10,5 +10,3 @@ var TextElement = class extends I18nTextMixin(ReactiveElement) {
 };
 //#endregion
 export { I18nTextMixin, TextElement as MediaTextElement, TextElement };
-
-//# sourceMappingURL=element.js.map

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

@@ -14,6 +14,15 @@ img,
 ::slotted(img) {
   display: block;
 }`;
+/**
+* Image attributes the element fills in from its own properties. Ones already on an image when it is adopted are the
+* author's and are left alone, so an `<img slot="thumbnail" loading="lazy">` keeps its settings inside a skin.
+*/
+const IMAGE_ATTRIBUTES = [
+	"crossorigin",
+	"loading",
+	"fetchpriority"
+];
 /** The image the element draws when none is supplied, reachable from outside as `::part(image)`. */
 function createFallbackImage() {
 	const img = document.createElement("img");
@@ -28,7 +37,9 @@ function createFallbackImage() {
 *
 * The element owns `src` and `srcset` on the active image. Left empty, it draws an image of its own in its shadow root.
 * Supply an `<img>` child instead — `<media-thumbnail time="12"><img alt=""></media-thumbnail>` — to compose overlays
-* or loading indicators beside the image the element controls.
+* or loading indicators beside the image the element controls. Any `crossorigin`, `loading`, or `fetchpriority` the
+* child already carries wins over the element's own; the rest are filled in. Inside a skin, an `<img slot="thumbnail">`
+* of yours replaces the one the skin carries.
 */
 var ThumbnailElement = class extends UIElement {
 	static {
@@ -56,6 +67,8 @@ var ThumbnailElement = class extends UIElement {
 	#textTracks;
 	#slots;
 	#img;
+	/** Attributes `#img` already carried when adopted, which the author owns. */
+	#authored;
 	#thumbnails;
 	#externalThumbnails;
 	#lastTextTrack;
@@ -71,6 +84,7 @@ var ThumbnailElement = class extends UIElement {
 		this.#textTracks = new PlayerController(this, playerContext, selectTextTrack);
 		this.#slots = null;
 		this.#img = null;
+		this.#authored = /* @__PURE__ */ new Set();
 		this.#thumbnails = [];
 		this.#api = null;
 		const style = document.createElement("style");
@@ -130,11 +144,7 @@ var ThumbnailElement = class extends UIElement {
 		const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);
 		const img = findComposedElement(this, isHTMLImageElement) ?? this.#fallback;
 		this.#adopt(img);
-		applyElementProps(img, {
-			crossorigin: this.#core.resolveCrossOrigin(this.crossOrigin, this.#inheritedCrossOrigin(textTrack)),
-			loading: this.loading,
-			fetchpriority: this.fetchPriority
-		});
+		this.#applyImageAttributes(img, textTrack);
 		this.#api?.updateSrc(thumbnail?.url);
 		this.#applySource(thumbnail?.url);
 		this.#api?.connect();
@@ -163,6 +173,16 @@ var ThumbnailElement = class extends UIElement {
 	#inheritedCrossOrigin(textTrack) {
 		return this.#externalThumbnails ? void 0 : textTrack?.thumbnailTrackCrossOrigin;
 	}
+	/** Sync image attributes from element properties, leaving the ones the author put on the image alone. */
+	#applyImageAttributes(img, textTrack) {
+		const props = {
+			crossorigin: this.#core.resolveCrossOrigin(this.crossOrigin, this.#inheritedCrossOrigin(textTrack)),
+			loading: this.loading,
+			fetchpriority: this.fetchPriority
+		};
+		for (const name of this.#authored) delete props[name];
+		applyElementProps(img, props);
+	}
 	#applyResize(result) {
 		this.style.width = `${result.containerWidth}px`;
 		this.style.height = `${result.containerHeight}px`;
@@ -191,8 +211,10 @@ var ThumbnailElement = class extends UIElement {
 			this.#resetStyles();
 			previous.removeAttribute("src");
 			previous.removeAttribute("srcset");
+			for (const name of IMAGE_ATTRIBUTES) if (!this.#authored.has(name)) previous.removeAttribute(name);
 		}
 		this.#img = next;
+		this.#authored = new Set(next ? IMAGE_ATTRIBUTES.filter((name) => next.hasAttribute(name)) : []);
 		this.#imageAttributes.disconnect();
 		if (next && next !== this.#fallback) this.#imageAttributes.observe(next, {
 			attributes: true,
@@ -212,5 +234,3 @@ var ThumbnailElement = class extends UIElement {
 };
 //#endregion
 export { ThumbnailElement };
-
-//# sourceMappingURL=element.js.map

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

@@ -167,5 +167,3 @@ var TimeElement = class extends UIElement {
 };
 //#endregion
 export { TimeElement };
-
-//# sourceMappingURL=element.js.map

package/dist/default/ui/time/group.js

@@ -1,5 +1,6 @@
 import { UIElement } from "../ui-element.js";
 //#region src/ui/time/group.ts
+/** Container for composed `<media-time>` and `<media-time-separator>` displays. */
 var TimeGroupElement = class extends UIElement {
 	static {
 		this.tagName = "media-time-group";
@@ -7,5 +8,3 @@ var TimeGroupElement = class extends UIElement {
 };
 //#endregion
 export { TimeGroupElement };
-
-//# sourceMappingURL=group.js.map

package/dist/default/ui/time/separator.js

@@ -12,5 +12,3 @@ var TimeSeparatorElement = class extends UIElement {
 };
 //#endregion
 export { TimeSeparatorElement };
-
-//# sourceMappingURL=separator.js.map

package/dist/default/ui/time-slider/chapter-title.js

@@ -39,5 +39,3 @@ var TimeSliderChapterTitleElement = class extends UIElement {
 };
 //#endregion
 export { TimeSliderChapterTitleElement };
-
-//# sourceMappingURL=chapter-title.js.map

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

@@ -95,5 +95,3 @@ var TimeSliderChaptersElement = class extends UIElement {
 };
 //#endregion
 export { TimeSliderChaptersElement };
-
-//# sourceMappingURL=chapters.js.map

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

@@ -87,9 +87,12 @@ var TimeSliderElement = class extends UIElement {
 			isDisabled: () => {
 				const time = this.#timeState.value;
 				const buffer = this.#bufferState.value;
-				return this.disabled || !time || !buffer || !hasTimeRange({
+				return this.disabled || !time || !hasTimeRange({
 					...time,
-					...buffer
+					...buffer ?? {
+						buffered: [],
+						seekable: []
+					}
 				});
 			},
 			getPercent: () => {
@@ -193,5 +196,3 @@ var TimeSliderElement = class extends UIElement {
 };
 //#endregion
 export { TimeSliderElement };
-
-//# sourceMappingURL=element.js.map

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

@@ -2,13 +2,12 @@ import { playerContext } from "../../player/context.js";
 import { PlayerController } from "../../player/controller.js";
 import { UIElement } from "../ui-element.js";
 import { TitleCore, TitleDataAttrs } from "@videojs/core";
-import { applyStateDataAttrs, selectMetadata } from "@videojs/core/dom";
+import { applyStateDataAttrs, selectControls, selectMetadata } from "@videojs/core/dom";
 //#region src/ui/title/element.ts
 /**
 * Displays the resolved content title.
 *
-* The element owns its text content. Set the title through the player's `content-title` attribute rather than by
-* writing children.
+* The element owns its text content. Set the title through the player's `content-title` attribute.
 */
 var TitleElement = class extends UIElement {
 	static {
@@ -16,22 +15,19 @@ var TitleElement = class extends UIElement {
 	}
 	#core = new TitleCore();
 	#metadataState = new PlayerController(this, playerContext, selectMetadata);
-	#textNode = new Text();
+	#controlsState = new PlayerController(this, playerContext, selectControls);
 	connectedCallback() {
 		super.connectedCallback();
-		if (!this.#textNode.parentNode) this.append(this.#textNode);
 	}
 	update(changed) {
 		super.update(changed);
 		const metadata = this.#metadataState.value;
 		if (!metadata) return;
-		const state = this.#core.getState(metadata);
-		this.#textNode.textContent = state.title;
+		const state = this.#core.getState(metadata, this.#controlsState.value);
+		if (this.textContent !== state.title) this.textContent = state.title;
 		this.hidden = state.hidden;
 		applyStateDataAttrs(this, state, TitleDataAttrs);
 	}
 };
 //#endregion
 export { TitleElement };
-
-//# sourceMappingURL=element.js.map

package/dist/default/ui/tooltip/context.js

@@ -2,5 +2,3 @@ import { createContext } from "@videojs/element/context";
 const tooltipGroupContext = createContext(Symbol("@videojs/tooltip-group"));
 //#endregion
 export { tooltipGroupContext };
-
-//# sourceMappingURL=context.js.map

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

@@ -210,5 +210,3 @@ var TooltipElement = class extends UIElement {
 };
 //#endregion
 export { TooltipElement };
-
-//# sourceMappingURL=element.js.map

package/dist/default/ui/tooltip/group.js

@@ -38,5 +38,3 @@ var TooltipGroupElement = class extends UIElement {
 };
 //#endregion
 export { TooltipGroupElement };
-
-//# sourceMappingURL=group.js.map

package/dist/default/ui/tooltip/label.js

@@ -26,5 +26,3 @@ var TooltipLabelElement = class TooltipLabelElement extends UIElement {
 };
 //#endregion
 export { TooltipLabelElement };
-
-//# sourceMappingURL=label.js.map

package/dist/default/ui/tooltip/shortcut.js

@@ -26,5 +26,3 @@ var TooltipShortcutElement = class TooltipShortcutElement extends UIElement {
 };
 //#endregion
 export { TooltipShortcutElement };
-
-//# sourceMappingURL=shortcut.js.map

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

@@ -4,5 +4,3 @@ import { DestroyMixin, ReactiveElement } from "@videojs/element";
 var UIElement = class extends DestroyMixin(ReactiveElement) {};
 //#endregion
 export { UIElement };
-
-//# sourceMappingURL=ui-element.js.map

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

@@ -52,5 +52,3 @@ function renderVolumeIndicator(element, state) {
 }
 //#endregion
 export { VolumeIndicatorElement };
-
-//# sourceMappingURL=element.js.map

package/dist/default/ui/volume-indicator/fill.js

@@ -7,5 +7,3 @@ var VolumeIndicatorFillElement = class extends UIElement {
 };
 //#endregion
 export { VolumeIndicatorFillElement };
-
-//# sourceMappingURL=fill.js.map

package/dist/default/ui/volume-indicator/value.js

@@ -7,5 +7,3 @@ var VolumeIndicatorValueElement = class extends UIElement {
 };
 //#endregion
 export { VolumeIndicatorValueElement };
-
-//# sourceMappingURL=value.js.map

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

@@ -42,5 +42,3 @@ var VolumePopoverElement = class extends PopoverElement {
 };
 //#endregion
 export { VolumePopoverElement };
-
-//# sourceMappingURL=element.js.map

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

@@ -162,5 +162,3 @@ var VolumeSliderElement = class extends UIElement {
 };
 //#endregion
 export { VolumeSliderElement };
-
-//# sourceMappingURL=element.js.map