@gjsify/dom-elements 0.3.13 → 0.3.15

package/lib/esm/html-media-element.js

@@ -1,5 +1,7 @@
-import { Event } from "@gjsify/dom-events";
 import { HTMLElement } from "./html-element.js";
+import { Event } from "@gjsify/dom-events";
+
+//#region src/html-media-element.ts
 const HAVE_NOTHING = 0;
 const HAVE_METADATA = 1;
 const HAVE_CURRENT_DATA = 2;
@@ -9,117 +11,118 @@ const NETWORK_EMPTY = 0;
 const NETWORK_IDLE = 1;
 const NETWORK_LOADING = 2;
 const NETWORK_NO_SOURCE = 3;
-class HTMLMediaElement extends HTMLElement {
-  constructor() {
-    super(...arguments);
-    // -- Source --
-    this._src = "";
-    this._srcObject = null;
-    // -- Playback state --
-    this.currentTime = 0;
-    this.duration = NaN;
-    this.paused = true;
-    this.ended = false;
-    this.volume = 1;
-    this.muted = false;
-    this.defaultMuted = false;
-    this.loop = false;
-    this.autoplay = false;
-    this.preload = "";
-    this.playbackRate = 1;
-    this.defaultPlaybackRate = 1;
-    // -- Readiness --
-    this.readyState = HAVE_NOTHING;
-    this.networkState = NETWORK_EMPTY;
-  }
-  // -- Buffered/seekable stubs --
-  get buffered() {
-    return { length: 0, start: () => 0, end: () => 0 };
-  }
-  get seekable() {
-    return { length: 0, start: () => 0, end: () => 0 };
-  }
-  get played() {
-    return { length: 0, start: () => 0, end: () => 0 };
-  }
-  // -- src property --
-  get src() {
-    return this._src;
-  }
-  set src(value) {
-    this._src = value;
-    this._srcObject = null;
-    this.dispatchEvent(new Event("srcchange"));
-  }
-  // -- srcObject property (MediaStream) --
-  get srcObject() {
-    return this._srcObject;
-  }
-  set srcObject(stream) {
-    this._srcObject = stream;
-    this._src = "";
-    this.dispatchEvent(new Event("srcobjectchange"));
-  }
-  // -- Playback control --
-  play() {
-    this.paused = false;
-    this.ended = false;
-    this.dispatchEvent(new Event("play"));
-    return Promise.resolve();
-  }
-  pause() {
-    this.paused = true;
-    this.dispatchEvent(new Event("pause"));
-  }
-  load() {
-    this.readyState = HAVE_NOTHING;
-    this.networkState = NETWORK_LOADING;
-    this.dispatchEvent(new Event("loadstart"));
-  }
-  canPlayType(_type) {
-    return "";
-  }
-  static {
-    // -- Static constants --
-    this.HAVE_NOTHING = HAVE_NOTHING;
-  }
-  static {
-    this.HAVE_METADATA = HAVE_METADATA;
-  }
-  static {
-    this.HAVE_CURRENT_DATA = HAVE_CURRENT_DATA;
-  }
-  static {
-    this.HAVE_FUTURE_DATA = HAVE_FUTURE_DATA;
-  }
-  static {
-    this.HAVE_ENOUGH_DATA = HAVE_ENOUGH_DATA;
-  }
-  static {
-    this.NETWORK_EMPTY = NETWORK_EMPTY;
-  }
-  static {
-    this.NETWORK_IDLE = NETWORK_IDLE;
-  }
-  static {
-    this.NETWORK_LOADING = NETWORK_LOADING;
-  }
-  static {
-    this.NETWORK_NO_SOURCE = NETWORK_NO_SOURCE;
-  }
-  get [Symbol.toStringTag]() {
-    return "HTMLMediaElement";
-  }
-}
-export {
-  HAVE_CURRENT_DATA,
-  HAVE_ENOUGH_DATA,
-  HAVE_FUTURE_DATA,
-  HAVE_METADATA,
-  HAVE_NOTHING,
-  HTMLMediaElement,
-  NETWORK_EMPTY,
-  NETWORK_IDLE,
-  NETWORK_LOADING,
-  NETWORK_NO_SOURCE
+/**
+* Base class for media elements (video, audio).
+*
+* Stores media state and dispatches DOM events. Pipeline construction is
+* delegated to the bridge container via internal events.
+*/
+var HTMLMediaElement = class extends HTMLElement {
+	constructor(..._args) {
+		super(..._args);
+		this._src = "";
+		this._srcObject = null;
+		this.currentTime = 0;
+		this.duration = NaN;
+		this.paused = true;
+		this.ended = false;
+		this.volume = 1;
+		this.muted = false;
+		this.defaultMuted = false;
+		this.loop = false;
+		this.autoplay = false;
+		this.preload = "";
+		this.playbackRate = 1;
+		this.defaultPlaybackRate = 1;
+		this.readyState = 0;
+		this.networkState = 0;
+	}
+	get buffered() {
+		return {
+			length: 0,
+			start: () => 0,
+			end: () => 0
+		};
+	}
+	get seekable() {
+		return {
+			length: 0,
+			start: () => 0,
+			end: () => 0
+		};
+	}
+	get played() {
+		return {
+			length: 0,
+			start: () => 0,
+			end: () => 0
+		};
+	}
+	get src() {
+		return this._src;
+	}
+	set src(value) {
+		this._src = value;
+		this._srcObject = null;
+		this.dispatchEvent(new Event("srcchange"));
+	}
+	get srcObject() {
+		return this._srcObject;
+	}
+	set srcObject(stream) {
+		this._srcObject = stream;
+		this._src = "";
+		this.dispatchEvent(new Event("srcobjectchange"));
+	}
+	play() {
+		this.paused = false;
+		this.ended = false;
+		this.dispatchEvent(new Event("play"));
+		return Promise.resolve();
+	}
+	pause() {
+		this.paused = true;
+		this.dispatchEvent(new Event("pause"));
+	}
+	load() {
+		this.readyState = 0;
+		this.networkState = 2;
+		this.dispatchEvent(new Event("loadstart"));
+	}
+	canPlayType(_type) {
+		return "";
+	}
+	static {
+		this.HAVE_NOTHING = 0;
+	}
+	static {
+		this.HAVE_METADATA = 1;
+	}
+	static {
+		this.HAVE_CURRENT_DATA = 2;
+	}
+	static {
+		this.HAVE_FUTURE_DATA = 3;
+	}
+	static {
+		this.HAVE_ENOUGH_DATA = 4;
+	}
+	static {
+		this.NETWORK_EMPTY = 0;
+	}
+	static {
+		this.NETWORK_IDLE = 1;
+	}
+	static {
+		this.NETWORK_LOADING = 2;
+	}
+	static {
+		this.NETWORK_NO_SOURCE = 3;
+	}
+	get [Symbol.toStringTag]() {
+		return "HTMLMediaElement";
+	}
 };
+
+//#endregion
+export { HAVE_CURRENT_DATA, HAVE_ENOUGH_DATA, HAVE_FUTURE_DATA, HAVE_METADATA, HAVE_NOTHING, HTMLMediaElement, NETWORK_EMPTY, NETWORK_IDLE, NETWORK_LOADING, NETWORK_NO_SOURCE };

package/lib/esm/html-video-element.js

@@ -1,8 +1,10 @@
+import { localName, namespaceURI, tagName } from "./property-symbol.js";
+import { NamespaceURI } from "./namespace-uri.js";
 import { HTMLMediaElement } from "./html-media-element.js";
+import { gstTimeToSeconds, secondsToGstTime } from "./gst-time.js";
 import { Event } from "@gjsify/dom-events";
-import * as PropertySymbol from "./property-symbol.js";
-import { NamespaceURI } from "./namespace-uri.js";
-import { secondsToGstTime, gstTimeToSeconds } from "./gst-time.js";
+
+//#region src/html-video-element.ts
 const GST_STATE_PLAYING = 4;
 const GST_STATE_PAUSED = 3;
 const GST_FORMAT_TIME = 3;
@@ -10,109 +12,109 @@ const GST_SEEK_FLAG_FLUSH = 1;
 const GST_SEEK_FLAG_KEY_UNIT = 4;
 const GST_SEEK_TYPE_SET = 1;
 const GST_SEEK_TYPE_NONE = 0;
-class HTMLVideoElement extends HTMLMediaElement {
-  constructor() {
-    super();
-    /** Set by VideoBridge after every pipeline swap. Null when no media is loaded. */
-    this._pipeline = null;
-    this._videoWidth = 0;
-    this._videoHeight = 0;
-    this.poster = "";
-    this[PropertySymbol.tagName] = "VIDEO";
-    this[PropertySymbol.localName] = "video";
-    this[PropertySymbol.namespaceURI] = NamespaceURI.html;
-    const self = this;
-    Object.defineProperty(this, "paused", {
-      get() {
-        if (!self._pipeline) return true;
-        const [, state] = self._pipeline.get_state(0n);
-        return state !== GST_STATE_PLAYING;
-      },
-      configurable: true,
-      enumerable: true
-    });
-    Object.defineProperty(this, "currentTime", {
-      get() {
-        if (!self._pipeline) return 0;
-        const [ok, pos] = self._pipeline.query_position(GST_FORMAT_TIME);
-        return ok ? gstTimeToSeconds(pos) : 0;
-      },
-      set(seconds) {
-        self._pipeline?.seek(
-          1,
-          GST_FORMAT_TIME,
-          GST_SEEK_FLAG_FLUSH | GST_SEEK_FLAG_KEY_UNIT,
-          GST_SEEK_TYPE_SET,
-          secondsToGstTime(seconds),
-          GST_SEEK_TYPE_NONE,
-          -1n
-        );
-      },
-      configurable: true,
-      enumerable: true
-    });
-    Object.defineProperty(this, "duration", {
-      get() {
-        if (!self._pipeline) return NaN;
-        const [ok, dur] = self._pipeline.query_duration(GST_FORMAT_TIME);
-        return ok && Number(dur) > 0 ? gstTimeToSeconds(dur) : NaN;
-      },
-      configurable: true,
-      enumerable: true
-    });
-    Object.defineProperty(this, "volume", {
-      get() {
-        return self._playbin()?.volume ?? 1;
-      },
-      set(v) {
-        const pb = self._playbin();
-        if (pb) pb.volume = Math.max(0, Math.min(1, v));
-      },
-      configurable: true,
-      enumerable: true
-    });
-    Object.defineProperty(this, "muted", {
-      get() {
-        return self._playbin()?.mute ?? false;
-      },
-      set(v) {
-        const pb = self._playbin();
-        if (pb) pb.mute = v;
-      },
-      configurable: true,
-      enumerable: true
-    });
-  }
-  async play() {
-    this._pipeline?.set_state(GST_STATE_PLAYING);
-    this.dispatchEvent(new Event("play"));
-    this.dispatchEvent(new Event("playing"));
-  }
-  pause() {
-    this._pipeline?.set_state(GST_STATE_PAUSED);
-    this.dispatchEvent(new Event("pause"));
-  }
-  /** Intrinsic width of the video (set by bridge when media metadata loads). */
-  get videoWidth() {
-    return this._videoWidth;
-  }
-  set videoWidth(value) {
-    this._videoWidth = value;
-  }
-  /** Intrinsic height of the video (set by bridge when media metadata loads). */
-  get videoHeight() {
-    return this._videoHeight;
-  }
-  set videoHeight(value) {
-    this._videoHeight = value;
-  }
-  get [Symbol.toStringTag]() {
-    return "HTMLVideoElement";
-  }
-  _playbin() {
-    return this._pipeline?.get_by_name("playbin") ?? null;
-  }
-}
-export {
-  HTMLVideoElement
+/**
+* HTML Video Element.
+*
+* Dispatches 'srcobjectchange' when srcObject is set and 'srcchange' when src is set —
+* bridge containers listen for these to wire up / tear down their pipelines.
+*
+* When a GStreamer pipeline is attached via `_pipeline`, play/pause/seek/volume
+* delegate to it. Without a pipeline the element behaves as a pure DOM stub.
+*/
+var HTMLVideoElement = class extends HTMLMediaElement {
+	constructor() {
+		super();
+		this._pipeline = null;
+		this._videoWidth = 0;
+		this._videoHeight = 0;
+		this.poster = "";
+		this[tagName] = "VIDEO";
+		this[localName] = "video";
+		this[namespaceURI] = NamespaceURI.html;
+		const self = this;
+		Object.defineProperty(this, "paused", {
+			get() {
+				if (!self._pipeline) return true;
+				const [, state] = self._pipeline.get_state(0n);
+				return state !== GST_STATE_PLAYING;
+			},
+			configurable: true,
+			enumerable: true
+		});
+		Object.defineProperty(this, "currentTime", {
+			get() {
+				if (!self._pipeline) return 0;
+				const [ok, pos] = self._pipeline.query_position(GST_FORMAT_TIME);
+				return ok ? gstTimeToSeconds(pos) : 0;
+			},
+			set(seconds) {
+				self._pipeline?.seek(1, GST_FORMAT_TIME, GST_SEEK_FLAG_FLUSH | GST_SEEK_FLAG_KEY_UNIT, GST_SEEK_TYPE_SET, secondsToGstTime(seconds), GST_SEEK_TYPE_NONE, -1n);
+			},
+			configurable: true,
+			enumerable: true
+		});
+		Object.defineProperty(this, "duration", {
+			get() {
+				if (!self._pipeline) return NaN;
+				const [ok, dur] = self._pipeline.query_duration(GST_FORMAT_TIME);
+				return ok && Number(dur) > 0 ? gstTimeToSeconds(dur) : NaN;
+			},
+			configurable: true,
+			enumerable: true
+		});
+		Object.defineProperty(this, "volume", {
+			get() {
+				return self._playbin()?.volume ?? 1;
+			},
+			set(v) {
+				const pb = self._playbin();
+				if (pb) pb.volume = Math.max(0, Math.min(1, v));
+			},
+			configurable: true,
+			enumerable: true
+		});
+		Object.defineProperty(this, "muted", {
+			get() {
+				return self._playbin()?.mute ?? false;
+			},
+			set(v) {
+				const pb = self._playbin();
+				if (pb) pb.mute = v;
+			},
+			configurable: true,
+			enumerable: true
+		});
+	}
+	async play() {
+		this._pipeline?.set_state(GST_STATE_PLAYING);
+		this.dispatchEvent(new Event("play"));
+		this.dispatchEvent(new Event("playing"));
+	}
+	pause() {
+		this._pipeline?.set_state(GST_STATE_PAUSED);
+		this.dispatchEvent(new Event("pause"));
+	}
+	/** Intrinsic width of the video (set by bridge when media metadata loads). */
+	get videoWidth() {
+		return this._videoWidth;
+	}
+	set videoWidth(value) {
+		this._videoWidth = value;
+	}
+	/** Intrinsic height of the video (set by bridge when media metadata loads). */
+	get videoHeight() {
+		return this._videoHeight;
+	}
+	set videoHeight(value) {
+		this._videoHeight = value;
+	}
+	get [Symbol.toStringTag]() {
+		return "HTMLVideoElement";
+	}
+	_playbin() {
+		return this._pipeline?.get_by_name("playbin") ?? null;
+	}
 };
+
+//#endregion
+export { HTMLVideoElement };

package/lib/esm/image.js

@@ -1,23 +1,29 @@
 import { HTMLImageElement } from "./html-image-element.js";
-class Image extends HTMLImageElement {
-  /**
-   * Constructor.
-   *
-   * @param [width] Width.
-   * @param [height] Height.
-   */
-  constructor(width = null, height = null) {
-    super();
-    if (width !== null) {
-      this.width = width;
-    }
-    if (height !== null) {
-      this.height = height;
-    }
-  }
-}
-export {
-  HTMLImageElement,
-  Image,
-  Image as default
+
+//#region src/image.ts
+/**
+* Image as constructor.
+*
+* Reference:
+* https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image.
+*/
+var Image = class extends HTMLImageElement {
+	/**
+	* Constructor.
+	*
+	* @param [width] Width.
+	* @param [height] Height.
+	*/
+	constructor(width = null, height = null) {
+		super();
+		if (width !== null) {
+			this.width = width;
+		}
+		if (height !== null) {
+			this.height = height;
+		}
+	}
 };
+
+//#endregion
+export { HTMLImageElement, Image, Image as default };

package/lib/esm/index.js

@@ -1,61 +1,29 @@
+import { property_symbol_exports } from "./property-symbol.js";
 import { Attr } from "./attr.js";
-import { NamedNodeMap } from "./named-node-map.js";
+import { NodeType } from "./node-type.js";
 import { NodeList } from "./node-list.js";
 import { Node } from "./node.js";
 import { CharacterData } from "./character-data.js";
-import { Text } from "./text.js";
 import { Comment } from "./comment.js";
+import { Text } from "./text.js";
 import { DocumentFragment } from "./document-fragment.js";
-import { DOMTokenList } from "./dom-token-list.js";
+import { NamespaceURI } from "./namespace-uri.js";
+import { NamedNodeMap } from "./named-node-map.js";
 import { Element } from "./element.js";
-import { HTMLElement, CSSStyleDeclaration } from "./html-element.js";
-import { HTMLCanvasElement } from "./html-canvas-element.js";
+import { CSSStyleDeclaration, HTMLElement } from "./html-element.js";
 import { HTMLImageElement } from "./html-image-element.js";
 import { HTMLMediaElement } from "./html-media-element.js";
 import { HTMLVideoElement } from "./html-video-element.js";
-import { Image } from "./image.js";
+import { HTMLCanvasElement } from "./html-canvas-element.js";
 import { Document, document } from "./document.js";
+import { DOMMatrix, DOMMatrixReadOnly } from "./dom-matrix.js";
+import { DOMTokenList } from "./dom-token-list.js";
+import { FontFace, FontFaceSet } from "./font-face.js";
+import { Image } from "./image.js";
 import { MutationObserver } from "./mutation-observer.js";
 import { ResizeObserver } from "./resize-observer.js";
 import { IntersectionObserver } from "./intersection-observer.js";
-import { NodeType } from "./node-type.js";
-import { NamespaceURI } from "./namespace-uri.js";
-import * as PropertySymbol from "./property-symbol.js";
-import { FontFace, FontFaceSet } from "./font-face.js";
 import { MediaQueryList, matchMedia } from "./match-media.js";
 import { location } from "./location-stub.js";
-import { DOMMatrix, DOMMatrixReadOnly } from "./dom-matrix.js";
-export {
-  Attr,
-  CSSStyleDeclaration,
-  CharacterData,
-  Comment,
-  DOMMatrix,
-  DOMMatrixReadOnly,
-  DOMTokenList,
-  Document,
-  DocumentFragment,
-  Element,
-  FontFace,
-  FontFaceSet,
-  HTMLCanvasElement,
-  HTMLElement,
-  HTMLImageElement,
-  HTMLMediaElement,
-  HTMLVideoElement,
-  Image,
-  IntersectionObserver,
-  MediaQueryList,
-  MutationObserver,
-  NamedNodeMap,
-  NamespaceURI,
-  Node,
-  NodeList,
-  NodeType,
-  PropertySymbol,
-  ResizeObserver,
-  Text,
-  document,
-  location,
-  matchMedia
-};
+
+export { Attr, CSSStyleDeclaration, CharacterData, Comment, DOMMatrix, DOMMatrixReadOnly, DOMTokenList, Document, DocumentFragment, Element, FontFace, FontFaceSet, HTMLCanvasElement, HTMLElement, HTMLImageElement, HTMLMediaElement, HTMLVideoElement, Image, IntersectionObserver, MediaQueryList, MutationObserver, NamedNodeMap, NamespaceURI, Node, NodeList, NodeType, property_symbol_exports as PropertySymbol, ResizeObserver, Text, document, location, matchMedia };

package/lib/esm/intersection-observer.js

@@ -1,19 +1,23 @@
-class IntersectionObserver {
-  constructor(_callback, options) {
-    this.root = options?.root ?? null;
-    this.rootMargin = options?.rootMargin ?? "0px";
-    this.thresholds = Array.isArray(options?.threshold) ? options.threshold : [options?.threshold ?? 0];
-  }
-  observe(_target) {
-  }
-  unobserve(_target) {
-  }
-  disconnect() {
-  }
-  takeRecords() {
-    return [];
-  }
-}
-export {
-  IntersectionObserver
+//#region src/intersection-observer.ts
+/**
+* IntersectionObserver stub.
+* Many libraries check for IntersectionObserver existence; this prevents crashes.
+*
+* Reference: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
+*/
+var IntersectionObserver = class {
+	constructor(_callback, options) {
+		this.root = options?.root ?? null;
+		this.rootMargin = options?.rootMargin ?? "0px";
+		this.thresholds = Array.isArray(options?.threshold) ? options.threshold : [options?.threshold ?? 0];
+	}
+	observe(_target) {}
+	unobserve(_target) {}
+	disconnect() {}
+	takeRecords() {
+		return [];
+	}
 };
+
+//#endregion
+export { IntersectionObserver };