@gjsify/dom-elements 0.1.15 → 0.3.0

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-video-element.js

@@ -1,24 +1,105 @@
 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
+    });
   }
-  /** Intrinsic width of the video (set by the bridge when media metadata loads). */
+  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 the bridge when media metadata loads). */
+  /** Intrinsic height of the video (set by bridge when media metadata loads). */
   get videoHeight() {
     return this._videoHeight;
   }
@@ -28,6 +109,9 @@ class HTMLVideoElement extends HTMLMediaElement {
   get [Symbol.toStringTag]() {
     return "HTMLVideoElement";
   }
+  _playbin() {
+    return this._pipeline?.get_by_name("playbin") ?? null;
+  }
 }
 export {
   HTMLVideoElement

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-video-element.d.ts

@@ -1,20 +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 (for bridge containers).
- * Dispatches 'srcchange' when src is set.
+ * 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();
-    /** Intrinsic width of the video (set by the bridge when media metadata loads). */
+    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 the bridge when media metadata loads). */
+    /** 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjsify/dom-elements",
-  "version": "0.1.15",
+  "version": "0.3.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.15",
-    "@gjsify/canvas2d-core": "^0.1.15",
-    "@gjsify/dom-events": "^0.1.15",
-    "@gjsify/fetch": "^0.1.15"
+    "@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.3.0",
+    "@gjsify/canvas2d-core": "^0.3.0",
+    "@gjsify/dom-events": "^0.3.0",
+    "@gjsify/fetch": "^0.3.0"
   },
   "devDependencies": {
-    "@gjsify/cli": "^0.1.15",
-    "@gjsify/unit": "^0.1.15",
+    "@girs/gst-1.0": "^1.28.1-4.0.0-rc.9",
+    "@gjsify/cli": "^0.3.0",
+    "@gjsify/unit": "^0.3.0",
     "@types/node": "^25.6.0",
-    "typescript": "^6.0.2"
+    "typescript": "^6.0.3"
   }
 }

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-video-element.ts

@@ -1,21 +1,44 @@
-// HTMLVideoElement for GJS — video element stub.
+// HTMLVideoElement for GJS — video element with optional GStreamer pipeline wiring.
 // Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement
-// Reference: refs/happy-dom/packages/happy-dom/src/nodes/html-video-element/HTMLVideoElement.ts
 //
-// Pure DOM class — stores video dimensions and poster. The VideoBridge
-// listens for 'srcobjectchange' / 'srcchange' events and handles GStreamer.
+// The attached pipeline is set by VideoBridge after each swap. Types come from
+// a type-only Gst import so dom-elements has no runtime dependency on GStreamer
+// (mirrors the HTMLImageElement / GdkPixbuf split). Numeric enum values are
+// still used at runtime because pulling the Gst module eagerly would break the
+// "dom-elements works without gst-init" contract.
 
+import type Gst from '@girs/gst-1.0';
 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';
+
+// Gst.State / Gst.Format / Gst.SeekFlags / Gst.SeekType numeric values, hardcoded
+// to avoid a runtime `gi://Gst` import. Cross-checked against the GStreamer GIR.
+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;
+
+type Playbin = Gst.Element & { volume?: number; mute?: boolean };
 
 /**
  * HTML Video Element.
  *
- * Dispatches 'srcobjectchange' when srcObject is set (for bridge containers).
- * Dispatches 'srcchange' when src is set.
+ * 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 class HTMLVideoElement extends HTMLMediaElement {
+    /** Set by VideoBridge after every pipeline swap. Null when no media is loaded. */
+    _pipeline: Gst.Pipeline | null = null;
+
     private _videoWidth = 0;
     private _videoHeight = 0;
     poster = '';
@@ -25,25 +48,96 @@ export class HTMLVideoElement extends HTMLMediaElement {
         this[PropertySymbol.tagName] = 'VIDEO';
         this[PropertySymbol.localName] = 'video';
         this[PropertySymbol.namespaceURI] = NamespaceURI.html;
-    }
 
-    /** Intrinsic width of the video (set by the bridge when media metadata loads). */
-    get videoWidth(): number {
-        return this._videoWidth;
-    }
-    set videoWidth(value: number) {
-        this._videoWidth = value;
+        // HTMLMediaElement defines paused/currentTime/duration/volume/muted as plain
+        // fields. TypeScript forbids overriding a field with an accessor in the
+        // subclass, so we install GStreamer-backed descriptors via defineProperty.
+        const self = this;
+
+        Object.defineProperty(this, 'paused', {
+            get(): boolean {
+                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(): number {
+                if (!self._pipeline) return 0;
+                const [ok, pos] = self._pipeline.query_position(GST_FORMAT_TIME);
+                return ok ? gstTimeToSeconds(pos) : 0;
+            },
+            set(seconds: number) {
+                self._pipeline?.seek(
+                    1.0,
+                    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(): number {
+                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(): number { return self._playbin()?.volume ?? 1.0; },
+            set(v: number) {
+                const pb = self._playbin();
+                if (pb) pb.volume = Math.max(0, Math.min(1, v));
+            },
+            configurable: true,
+            enumerable: true,
+        });
+
+        Object.defineProperty(this, 'muted', {
+            get(): boolean { return self._playbin()?.mute ?? false; },
+            set(v: boolean) {
+                const pb = self._playbin();
+                if (pb) pb.mute = v;
+            },
+            configurable: true,
+            enumerable: true,
+        });
     }
 
-    /** Intrinsic height of the video (set by the bridge when media metadata loads). */
-    get videoHeight(): number {
-        return this._videoHeight;
+    override async play(): Promise<void> {
+        this._pipeline?.set_state(GST_STATE_PLAYING);
+        this.dispatchEvent(new Event('play'));
+        this.dispatchEvent(new Event('playing'));
     }
-    set videoHeight(value: number) {
-        this._videoHeight = value;
+
+    override pause(): void {
+        this._pipeline?.set_state(GST_STATE_PAUSED);
+        this.dispatchEvent(new Event('pause'));
     }
 
-    get [Symbol.toStringTag](): string {
-        return 'HTMLVideoElement';
+    /** Intrinsic width of the video (set by bridge when media metadata loads). */
+    get videoWidth(): number { return this._videoWidth; }
+    set videoWidth(value: number) { this._videoWidth = value; }
+
+    /** Intrinsic height of the video (set by bridge when media metadata loads). */
+    get videoHeight(): number { return this._videoHeight; }
+    set videoHeight(value: number) { this._videoHeight = value; }
+
+    get [Symbol.toStringTag](): string { return 'HTMLVideoElement'; }
+
+    private _playbin(): Playbin | null {
+        return (this._pipeline?.get_by_name('playbin') as Playbin | null) ?? null;
     }
 }