@gjsify/dom-elements 0.1.13 → 0.2.0

package/lib/esm/document.js

@@ -1,6 +1,7 @@
 import { Node } from "./node.js";
 import { HTMLElement } from "./html-element.js";
 import { HTMLImageElement } from "./html-image-element.js";
+import { HTMLVideoElement } from "./html-video-element.js";
 import { HTMLCanvasElement } from "./html-canvas-element.js";
 import { Text } from "./text.js";
 import { Comment } from "./comment.js";
@@ -36,6 +37,8 @@ class Document extends Node {
     switch (tag) {
       case "img":
         return new HTMLImageElement();
+      case "video":
+        return new HTMLVideoElement();
       case "canvas":
         return new HTMLCanvasElement();
       default: {

package/lib/esm/gst-time.js

@@ -0,0 +1,11 @@
+const NS_PER_SECOND = 1e9;
+function secondsToGstTime(seconds) {
+  return BigInt(Math.round(seconds * NS_PER_SECOND));
+}
+function gstTimeToSeconds(nanoseconds) {
+  return Number(nanoseconds) / NS_PER_SECOND;
+}
+export {
+  gstTimeToSeconds,
+  secondsToGstTime
+};

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

@@ -0,0 +1,125 @@
+import { Event } from "@gjsify/dom-events";
+import { HTMLElement } from "./html-element.js";
+const HAVE_NOTHING = 0;
+const HAVE_METADATA = 1;
+const HAVE_CURRENT_DATA = 2;
+const HAVE_FUTURE_DATA = 3;
+const HAVE_ENOUGH_DATA = 4;
+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
+};

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

@@ -0,0 +1,118 @@
+import { HTMLMediaElement } from "./html-media-element.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";
+const GST_STATE_PLAYING = 4;
+const GST_STATE_PAUSED = 3;
+const GST_FORMAT_TIME = 3;
+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
+};

package/lib/esm/index.js

@@ -11,6 +11,8 @@ import { Element } from "./element.js";
 import { HTMLElement, CSSStyleDeclaration } from "./html-element.js";
 import { HTMLCanvasElement } from "./html-canvas-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 { Document, document } from "./document.js";
 import { MutationObserver } from "./mutation-observer.js";
@@ -39,6 +41,8 @@ export {
   HTMLCanvasElement,
   HTMLElement,
   HTMLImageElement,
+  HTMLMediaElement,
+  HTMLVideoElement,
   Image,
   IntersectionObserver,
   MediaQueryList,

package/lib/types/gst-time.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Convert seconds (number) to GStreamer nanoseconds (bigint).
+ * Rounds to the nearest nanosecond to avoid floating-point drift over
+ * repeated back-and-forth conversions.
+ */
+export declare function secondsToGstTime(seconds: number): bigint;
+/**
+ * Convert GStreamer nanoseconds to seconds (number).
+ * Accepts both `bigint` (the runtime type from GStreamer queries) and `number`
+ * (what the `@girs/gst-1.0` typings currently declare — a known GIR bug for
+ * `gint64` return values in `query_position` / `query_duration`).
+ */
+export declare function gstTimeToSeconds(nanoseconds: bigint | number): number;

package/lib/types/html-media-element.d.ts

@@ -0,0 +1,67 @@
+import { HTMLElement } from './html-element.js';
+export declare const HAVE_NOTHING = 0;
+export declare const HAVE_METADATA = 1;
+export declare const HAVE_CURRENT_DATA = 2;
+export declare const HAVE_FUTURE_DATA = 3;
+export declare const HAVE_ENOUGH_DATA = 4;
+export declare const NETWORK_EMPTY = 0;
+export declare const NETWORK_IDLE = 1;
+export declare const NETWORK_LOADING = 2;
+export declare const NETWORK_NO_SOURCE = 3;
+/**
+ * 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.
+ */
+export declare class HTMLMediaElement extends HTMLElement {
+    private _src;
+    private _srcObject;
+    currentTime: number;
+    duration: number;
+    paused: boolean;
+    ended: boolean;
+    volume: number;
+    muted: boolean;
+    defaultMuted: boolean;
+    loop: boolean;
+    autoplay: boolean;
+    preload: '' | 'none' | 'metadata' | 'auto';
+    playbackRate: number;
+    defaultPlaybackRate: number;
+    readyState: number;
+    networkState: number;
+    get buffered(): {
+        length: number;
+        start(index: number): number;
+        end(index: number): number;
+    };
+    get seekable(): {
+        length: number;
+        start(index: number): number;
+        end(index: number): number;
+    };
+    get played(): {
+        length: number;
+        start(index: number): number;
+        end(index: number): number;
+    };
+    get src(): string;
+    set src(value: string);
+    get srcObject(): any;
+    set srcObject(stream: any);
+    play(): Promise<void>;
+    pause(): void;
+    load(): void;
+    canPlayType(_type: string): '' | 'maybe' | 'probably';
+    static readonly HAVE_NOTHING = 0;
+    static readonly HAVE_METADATA = 1;
+    static readonly HAVE_CURRENT_DATA = 2;
+    static readonly HAVE_FUTURE_DATA = 3;
+    static readonly HAVE_ENOUGH_DATA = 4;
+    static readonly NETWORK_EMPTY = 0;
+    static readonly NETWORK_IDLE = 1;
+    static readonly NETWORK_LOADING = 2;
+    static readonly NETWORK_NO_SOURCE = 3;
+    get [Symbol.toStringTag](): string;
+}

package/lib/types/html-video-element.d.ts

@@ -0,0 +1,29 @@
+import type Gst from '@girs/gst-1.0';
+import { HTMLMediaElement } from './html-media-element.js';
+/**
+ * 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.
+ */
+export declare class HTMLVideoElement extends HTMLMediaElement {
+    /** Set by VideoBridge after every pipeline swap. Null when no media is loaded. */
+    _pipeline: Gst.Pipeline | null;
+    private _videoWidth;
+    private _videoHeight;
+    poster: string;
+    constructor();
+    play(): Promise<void>;
+    pause(): void;
+    /** Intrinsic width of the video (set by bridge when media metadata loads). */
+    get videoWidth(): number;
+    set videoWidth(value: number);
+    /** Intrinsic height of the video (set by bridge when media metadata loads). */
+    get videoHeight(): number;
+    set videoHeight(value: number);
+    get [Symbol.toStringTag](): string;
+    private _playbin;
+}

package/lib/types/index.d.ts

@@ -11,6 +11,8 @@ export { Element } from './element.js';
 export { HTMLElement, CSSStyleDeclaration } from './html-element.js';
 export { HTMLCanvasElement } from './html-canvas-element.js';
 export { HTMLImageElement } from './html-image-element.js';
+export { HTMLMediaElement } from './html-media-element.js';
+export { HTMLVideoElement } from './html-video-element.js';
 export { Image } from './image.js';
 export { Document, document } from './document.js';
 export { MutationObserver } from './mutation-observer.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjsify/dom-elements",
-  "version": "0.1.13",
+  "version": "0.2.0",
   "description": "DOM element hierarchy (Node, Element, HTMLElement, HTMLImageElement) for GJS",
   "type": "module",
   "module": "lib/esm/index.js",
@@ -51,8 +51,9 @@
     "build:types": "tsc",
     "build:test": "yarn build:test:gjs",
     "build:test:gjs": "gjsify build src/test.mts --app gjs --outfile test.gjs.mjs",
+    "build:test:browser": "gjsify build src/test.browser.mts --app browser --outfile dist/test.browser.mjs",
     "test": "yarn build:gjsify && yarn build:test && yarn test:gjs",
-    "test:gjs": "gjs -m test.gjs.mjs"
+    "test:gjs": "gjsify run test.gjs.mjs"
   },
   "keywords": [
     "gjs",
@@ -61,18 +62,19 @@
     "node"
   ],
   "dependencies": {
-    "@girs/gdkpixbuf-2.0": "^2.0.0-4.0.0-rc.3",
-    "@girs/gjs": "^4.0.0-rc.3",
-    "@girs/glib-2.0": "^2.88.0-4.0.0-rc.3",
-    "@gjsify/abort-controller": "^0.1.13",
-    "@gjsify/canvas2d-core": "^0.1.13",
-    "@gjsify/dom-events": "^0.1.13",
-    "@gjsify/fetch": "^0.1.13"
+    "@girs/gdkpixbuf-2.0": "^2.0.0-4.0.0-rc.9",
+    "@girs/gjs": "^4.0.0-rc.9",
+    "@girs/glib-2.0": "^2.88.0-4.0.0-rc.9",
+    "@gjsify/abort-controller": "^0.2.0",
+    "@gjsify/canvas2d-core": "^0.2.0",
+    "@gjsify/dom-events": "^0.2.0",
+    "@gjsify/fetch": "^0.2.0"
   },
   "devDependencies": {
-    "@gjsify/cli": "^0.1.13",
-    "@gjsify/unit": "^0.1.13",
+    "@girs/gst-1.0": "^1.28.1-4.0.0-rc.9",
+    "@gjsify/cli": "^0.2.0",
+    "@gjsify/unit": "^0.2.0",
     "@types/node": "^25.6.0",
-    "typescript": "^6.0.2"
+    "typescript": "^6.0.3"
   }
 }

package/src/document.ts

@@ -5,6 +5,7 @@ import { Node } from './node.js';
 import { Element } from './element.js';
 import { HTMLElement } from './html-element.js';
 import { HTMLImageElement } from './html-image-element.js';
+import { HTMLVideoElement } from './html-video-element.js';
 import { HTMLCanvasElement } from './html-canvas-element.js';
 import { Text } from './text.js';
 import { Comment } from './comment.js';
@@ -48,6 +49,7 @@ export class Document extends Node {
         const tag = tagName.toLowerCase();
         switch (tag) {
             case 'img': return new HTMLImageElement();
+            case 'video': return new HTMLVideoElement();
             case 'canvas': return new HTMLCanvasElement();
             default: {
                 const factory = Document._elementFactories.get(tag);

package/src/gst-time.ts

@@ -0,0 +1,26 @@
+// Conversions between seconds (Web video API) and GStreamer's nanosecond
+// `BigInt` timebase (used by `Gst.Format.TIME` throughout GStreamer). Lives
+// in @gjsify/dom-elements so HTMLVideoElement/HTMLAudioElement can use it
+// directly; @gjsify/video re-exports these for consumers of the bridge
+// package. Kept as pure number math — no runtime Gst import required.
+
+const NS_PER_SECOND = 1_000_000_000;
+
+/**
+ * Convert seconds (number) to GStreamer nanoseconds (bigint).
+ * Rounds to the nearest nanosecond to avoid floating-point drift over
+ * repeated back-and-forth conversions.
+ */
+export function secondsToGstTime(seconds: number): bigint {
+    return BigInt(Math.round(seconds * NS_PER_SECOND));
+}
+
+/**
+ * Convert GStreamer nanoseconds to seconds (number).
+ * Accepts both `bigint` (the runtime type from GStreamer queries) and `number`
+ * (what the `@girs/gst-1.0` typings currently declare — a known GIR bug for
+ * `gint64` return values in `query_position` / `query_duration`).
+ */
+export function gstTimeToSeconds(nanoseconds: bigint | number): number {
+    return Number(nanoseconds) / NS_PER_SECOND;
+}

package/src/html-media-element.ts

@@ -0,0 +1,123 @@
+// HTMLMediaElement for GJS — base class for HTMLVideoElement and HTMLAudioElement.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
+// Reference: refs/happy-dom/packages/happy-dom/src/nodes/html-media-element/HTMLMediaElement.ts
+//
+// This is a pure DOM class — it stores media state and dispatches events but
+// does NOT interact with GStreamer. The bridge container (VideoBridge etc.)
+// listens for internal events and handles the actual pipeline.
+
+import { Event } from '@gjsify/dom-events';
+
+import { HTMLElement } from './html-element.js';
+
+// Readiness states
+export const HAVE_NOTHING = 0;
+export const HAVE_METADATA = 1;
+export const HAVE_CURRENT_DATA = 2;
+export const HAVE_FUTURE_DATA = 3;
+export const HAVE_ENOUGH_DATA = 4;
+
+// Network states
+export const NETWORK_EMPTY = 0;
+export const NETWORK_IDLE = 1;
+export const NETWORK_LOADING = 2;
+export const NETWORK_NO_SOURCE = 3;
+
+/**
+ * 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.
+ */
+export class HTMLMediaElement extends HTMLElement {
+    // -- Source --
+    private _src = '';
+    private _srcObject: any = null;
+
+    // -- Playback state --
+    currentTime = 0;
+    duration = NaN;
+    paused = true;
+    ended = false;
+    volume = 1;
+    muted = false;
+    defaultMuted = false;
+    loop = false;
+    autoplay = false;
+    preload: '' | 'none' | 'metadata' | 'auto' = '';
+    playbackRate = 1;
+    defaultPlaybackRate = 1;
+
+    // -- Readiness --
+    readyState = HAVE_NOTHING;
+    networkState = NETWORK_EMPTY;
+
+    // -- Buffered/seekable stubs --
+    get buffered(): { length: number; start(index: number): number; end(index: number): number } {
+        return { length: 0, start: () => 0, end: () => 0 };
+    }
+    get seekable(): { length: number; start(index: number): number; end(index: number): number } {
+        return { length: 0, start: () => 0, end: () => 0 };
+    }
+    get played(): { length: number; start(index: number): number; end(index: number): number } {
+        return { length: 0, start: () => 0, end: () => 0 };
+    }
+
+    // -- src property --
+    get src(): string {
+        return this._src;
+    }
+    set src(value: string) {
+        this._src = value;
+        this._srcObject = null;
+        this.dispatchEvent(new Event('srcchange'));
+    }
+
+    // -- srcObject property (MediaStream) --
+    get srcObject(): any {
+        return this._srcObject;
+    }
+    set srcObject(stream: any) {
+        this._srcObject = stream;
+        this._src = '';
+        this.dispatchEvent(new Event('srcobjectchange'));
+    }
+
+    // -- Playback control --
+    play(): Promise<void> {
+        this.paused = false;
+        this.ended = false;
+        this.dispatchEvent(new Event('play'));
+        return Promise.resolve();
+    }
+
+    pause(): void {
+        this.paused = true;
+        this.dispatchEvent(new Event('pause'));
+    }
+
+    load(): void {
+        this.readyState = HAVE_NOTHING;
+        this.networkState = NETWORK_LOADING;
+        this.dispatchEvent(new Event('loadstart'));
+    }
+
+    canPlayType(_type: string): '' | 'maybe' | 'probably' {
+        return '';
+    }
+
+    // -- Static constants --
+    static readonly HAVE_NOTHING = HAVE_NOTHING;
+    static readonly HAVE_METADATA = HAVE_METADATA;
+    static readonly HAVE_CURRENT_DATA = HAVE_CURRENT_DATA;
+    static readonly HAVE_FUTURE_DATA = HAVE_FUTURE_DATA;
+    static readonly HAVE_ENOUGH_DATA = HAVE_ENOUGH_DATA;
+    static readonly NETWORK_EMPTY = NETWORK_EMPTY;
+    static readonly NETWORK_IDLE = NETWORK_IDLE;
+    static readonly NETWORK_LOADING = NETWORK_LOADING;
+    static readonly NETWORK_NO_SOURCE = NETWORK_NO_SOURCE;
+
+    get [Symbol.toStringTag](): string {
+        return 'HTMLMediaElement';
+    }
+}