@gjsify/video 0.1.15 → 0.3.0

package/lib/esm/gst-init.js

@@ -1,4 +1,5 @@
 import Gst from "gi://Gst?version=1.0";
+import { DOMException } from "@gjsify/dom-exception";
 let initialized = false;
 function ensureGstInit() {
   if (initialized) return;
@@ -15,11 +16,7 @@ function ensurePaintableSinkAvailable() {
   }
 }
 function throwNotSupported(message) {
-  const DOMExceptionCtor = globalThis.DOMException;
-  if (DOMExceptionCtor) {
-    throw new DOMExceptionCtor(message, "NotSupportedError");
-  }
-  throw new Error(message);
+  throw new DOMException(message, "NotSupportedError");
 }
 export {
   Gst,

package/lib/esm/index.js

@@ -1,12 +1,8 @@
 import { VideoBridge } from "./video-bridge.js";
 import { buildMediaStreamPipeline, buildUriPipeline, createPaintableSink } from "./pipeline-builder.js";
 import { HTMLVideoElement } from "@gjsify/dom-elements";
-Object.defineProperty(globalThis, "HTMLVideoElement", {
-  value: HTMLVideoElement,
-  writable: true,
-  configurable: true
-});
 export {
+  HTMLVideoElement,
   VideoBridge,
   buildMediaStreamPipeline,
   buildUriPipeline,

package/lib/esm/video-bridge.js

@@ -1,42 +1,60 @@
 import GObject from "gi://GObject";
 import GLib from "gi://GLib?version=2.0";
 import Gtk from "gi://Gtk?version=4.0";
-import { HTMLVideoElement } from "@gjsify/dom-elements";
 import { attachEventControllers } from "@gjsify/event-bridge";
 import { Event } from "@gjsify/dom-events";
 import { BridgeEnvironment } from "@gjsify/bridge-types";
+import { HTMLVideoElement } from "@gjsify/dom-elements";
 import { buildMediaStreamPipeline, buildUriPipeline } from "./pipeline-builder.js";
-import { Gst } from "./gst-init.js";
+import { Gst as GstRuntime } from "./gst-init.js";
+const PLAY_ICON = "media-playback-start-symbolic";
+const PAUSE_ICON = "media-playback-pause-symbolic";
+const AUTO_HIDE_SECONDS = 2;
+const POSITION_TICK_MS = 200;
+function formatTime(seconds) {
+  if (!isFinite(seconds) || isNaN(seconds)) return "--:--";
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
 const VideoBridge = GObject.registerClass(
   { GTypeName: "GjsifyVideoBridge" },
   class VideoBridge2 extends Gtk.Box {
     constructor(params) {
-      super({
-        ...params,
-        orientation: Gtk.Orientation.VERTICAL
-      });
+      super({ ...params, orientation: Gtk.Orientation.VERTICAL });
+      this._timeOrigin = GLib.get_monotonic_time();
       this._pipeline = null;
-      // Gst.Pipeline
+      // Bus associated with _pipeline; stored so `_destroyPipeline` can
+      // disconnect the handlers + `remove_signal_watch` before the pipeline
+      // is nulled. Without cleanup, changing `video.src` repeatedly
+      // accumulates handler connections on each pipeline's bus.
+      this._pipelineBus = null;
+      this._pipelineBusHandlers = [];
       this._readyCallbacks = [];
       this._resizeCallbacks = [];
-      this._timeOrigin = GLib.get_monotonic_time();
       this._ready = false;
-      this._picture = new Gtk.Picture();
-      this._picture.set_hexpand(true);
-      this._picture.set_vexpand(true);
-      this.append(this._picture);
+      // Control bar + its per-tick change-detection state (null when
+      // showControls(false) or never called). Keeping _lastSeekValue /
+      // _lastTimeText on the same object lets them live and die with the
+      // controls; no separate reset needed.
+      this._controls = null;
+      this._positionTimerId = null;
+      // change-value on seekScale fires on user interaction only; the guard prevents
+      // programmatic set_value from bouncing through the signal on some compositors.
+      this._updatingFromTimer = false;
+      // Auto-hide: a single re-armed GLib source. Mouse motion re-starts the
+      // 2s timer by removing and re-adding, so we never pile up pending sources.
+      this._hideTimerId = null;
+      this._overlay = new Gtk.Overlay({ hexpand: true, vexpand: true });
+      this.append(this._overlay);
+      this._picture = new Gtk.Picture({ hexpand: true, vexpand: true });
+      this._overlay.set_child(this._picture);
       this._video = new HTMLVideoElement();
       const host = {
         performanceNow: () => (GLib.get_monotonic_time() - this._timeOrigin) / 1e3,
         getWidth: () => this.get_allocated_width(),
         getHeight: () => this.get_allocated_height(),
-        getDevicePixelRatio: () => {
-          const display = this.get_display();
-          const surface = this.get_native()?.get_surface();
-          if (surface) return surface.get_scale_factor();
-          if (display) return display.get_scale?.() ?? 1;
-          return 1;
-        }
+        getDevicePixelRatio: () => this.get_native()?.get_surface()?.get_scale_factor() ?? 1
       };
       this._environment = new BridgeEnvironment(host);
       this._environment.document.body.appendChild(this._video);
@@ -56,38 +74,30 @@ const VideoBridge = GObject.registerClass(
       const checkResize = () => {
         const width = this.get_allocated_width();
         const height = this.get_allocated_height();
-        if (width !== lastWidth || height !== lastHeight) {
-          lastWidth = width;
-          lastHeight = height;
-          this._video.dispatchEvent(new Event("resize"));
-          for (const cb of this._resizeCallbacks) {
-            cb(width, height);
-          }
-        }
+        if (width === lastWidth && height === lastHeight) return;
+        lastWidth = width;
+        lastHeight = height;
+        this._video.dispatchEvent(new Event("resize"));
+        for (const cb of this._resizeCallbacks) cb(width, height);
       };
       this.connect("notify::width-request", checkResize);
       this.connect("notify::height-request", checkResize);
       this.connect("map", checkResize);
       this.connect("unrealize", () => {
         this._destroyPipeline();
+        this._stopPositionTimer();
+        this._resizeCallbacks = [];
       });
     }
-    /** The HTMLVideoElement backing this bridge. */
     get element() {
       return this._video;
     }
-    /** Alias for element — matches browser naming. */
     get videoElement() {
       return this._video;
     }
-    /** The isolated browser environment for this bridge. */
     get environment() {
       return this._environment;
     }
-    /**
-     * Register a callback to be invoked once the video element is ready.
-     * If already ready, the callback fires synchronously.
-     */
     onReady(cb) {
       if (this._ready) {
         cb(this._video);
@@ -95,75 +105,214 @@ const VideoBridge = GObject.registerClass(
       }
       this._readyCallbacks.push(cb);
     }
-    /** Register a callback invoked whenever the widget is resized. */
     onResize(cb) {
       this._resizeCallbacks.push(cb);
     }
-    /** Sets browser globals for video support. */
     installGlobals() {
       globalThis.HTMLVideoElement = HTMLVideoElement;
-      const timeOrigin = this._timeOrigin;
       if (typeof globalThis.performance === "undefined") {
+        const timeOrigin = this._timeOrigin;
         globalThis.performance = {
           now: () => (GLib.get_monotonic_time() - timeOrigin) / 1e3,
           timeOrigin: Date.now()
         };
       }
     }
-    /** @internal Handle srcObject change (MediaStream) */
+    /**
+     * Show or hide the built-in play/pause + seek + time + volume control bar.
+     * Controls auto-hide after 2 seconds of mouse inactivity.
+     */
+    showControls(show = true) {
+      if (show && !this._controls) {
+        this._controls = this._buildControlBar();
+        const { bar } = this._controls;
+        bar.set_halign(Gtk.Align.FILL);
+        bar.set_valign(Gtk.Align.END);
+        bar.set_visible(false);
+        this._overlay.add_overlay(bar);
+        this._startPositionTimer();
+        this._setupAutoHideMotion(bar);
+      } else if (!show && this._controls) {
+        this._overlay.remove_overlay(this._controls.bar);
+        this._controls = null;
+        this._stopPositionTimer();
+        if (this._hideTimerId !== null) {
+          GLib.Source.remove(this._hideTimerId);
+          this._hideTimerId = null;
+        }
+      }
+    }
+    _setupAutoHideMotion(controlBar) {
+      for (const widget of [this, controlBar]) {
+        const motion = new Gtk.EventControllerMotion();
+        motion.connect("motion", () => this._revealControls());
+        motion.connect("enter", () => this._revealControls());
+        widget.add_controller(motion);
+      }
+    }
+    _revealControls() {
+      if (!this._controls) return;
+      this._controls.bar.set_visible(true);
+      if (this._hideTimerId !== null) GLib.Source.remove(this._hideTimerId);
+      this._hideTimerId = GLib.timeout_add_seconds(GLib.PRIORITY_DEFAULT, AUTO_HIDE_SECONDS, () => {
+        this._hideTimerId = null;
+        this._controls?.bar.set_visible(false);
+        return GLib.SOURCE_REMOVE;
+      });
+    }
+    _buildControlBar() {
+      const bar = new Gtk.Box({
+        orientation: Gtk.Orientation.HORIZONTAL,
+        spacing: 6,
+        margin_start: 6,
+        margin_end: 6,
+        margin_top: 4,
+        margin_bottom: 4
+      });
+      bar.add_css_class("osd");
+      const playBtn = new Gtk.Button({ icon_name: PAUSE_ICON });
+      playBtn.connect("clicked", () => {
+        if (this._video.paused) {
+          this._video.play();
+          playBtn.set_icon_name(PAUSE_ICON);
+        } else {
+          this._video.pause();
+          playBtn.set_icon_name(PLAY_ICON);
+        }
+      });
+      bar.append(playBtn);
+      const seekAdj = new Gtk.Adjustment({ lower: 0, upper: 1, step_increment: 1, page_increment: 10 });
+      const seekScale = Gtk.Scale.new(Gtk.Orientation.HORIZONTAL, seekAdj);
+      seekScale.set_hexpand(true);
+      seekScale.set_draw_value(false);
+      seekScale.connect("change-value", (_scale, _scroll, value) => {
+        if (!this._updatingFromTimer && isFinite(value)) {
+          this._video.currentTime = value;
+        }
+        return false;
+      });
+      bar.append(seekScale);
+      const timeLabel = new Gtk.Label({ label: "--:-- / --:--", use_markup: false });
+      bar.append(timeLabel);
+      const volumeBtn = new Gtk.VolumeButton({ value: 1 });
+      volumeBtn.connect("value-changed", (_btn, value) => {
+        this._video.volume = value;
+      });
+      bar.append(volumeBtn);
+      return { bar, playBtn, seekAdj, seekScale, timeLabel, volumeBtn, lastSeekValue: NaN, lastTimeText: "" };
+    }
+    _startPositionTimer() {
+      if (this._positionTimerId !== null) return;
+      this._positionTimerId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, POSITION_TICK_MS, () => {
+        const controls = this._controls;
+        if (!controls) return GLib.SOURCE_REMOVE;
+        const cur = this._video.currentTime;
+        const dur = this._video.duration;
+        if (isFinite(dur) && dur > 0) {
+          if (controls.seekAdj.upper !== dur) controls.seekAdj.upper = dur;
+          if (cur !== controls.lastSeekValue) {
+            this._updatingFromTimer = true;
+            controls.seekAdj.set_value(cur);
+            this._updatingFromTimer = false;
+            controls.lastSeekValue = cur;
+          }
+        }
+        const text = `${formatTime(cur)} / ${formatTime(dur)}`;
+        if (text !== controls.lastTimeText) {
+          controls.timeLabel.set_label(text);
+          controls.lastTimeText = text;
+        }
+        const icon = this._video.paused ? PLAY_ICON : PAUSE_ICON;
+        if (controls.playBtn.get_icon_name() !== icon) controls.playBtn.set_icon_name(icon);
+        return GLib.SOURCE_CONTINUE;
+      });
+    }
+    _stopPositionTimer() {
+      if (this._positionTimerId !== null) {
+        GLib.Source.remove(this._positionTimerId);
+        this._positionTimerId = null;
+      }
+    }
     _onSrcObjectChange() {
       this._destroyPipeline();
       const stream = this._video.srcObject;
       if (!stream) return;
-      const videoTracks = stream.getVideoTracks?.() ?? [];
-      const track = videoTracks.find((t) => t._gstSource != null);
+      const tracks = stream.getVideoTracks?.() ?? [];
+      const track = tracks.find((t) => t._gstSource != null);
       if (!track?._gstSource) {
         console.warn("VideoBridge: MediaStream has no video track with GStreamer source");
         return;
       }
       try {
         const { pipeline, paintable, tee } = buildMediaStreamPipeline(track._gstSource, track._gstPipeline);
-        this._pipeline = pipeline;
-        this._picture.set_paintable(paintable);
+        this._attachPipeline(pipeline, paintable);
         track._gstPipeline = pipeline;
         track._gstTee = tee;
-        pipeline.set_state(Gst.State.PLAYING);
-        this._video.readyState = 4;
-        this._video.paused = false;
-        this._video.dispatchEvent(new Event("loadedmetadata"));
-        this._video.dispatchEvent(new Event("canplay"));
-        this._video.dispatchEvent(new Event("playing"));
       } catch (err) {
         console.error("VideoBridge: Failed to build MediaStream pipeline:", err);
       }
     }
-    /** @internal Handle src change (URI) */
     _onSrcChange() {
       this._destroyPipeline();
-      const src = this._video.src;
-      if (!src) return;
+      if (!this._video.src) return;
       try {
-        const { pipeline, paintable } = buildUriPipeline(src);
-        this._pipeline = pipeline;
-        this._picture.set_paintable(paintable);
-        pipeline.set_state(Gst.State.PLAYING);
-        this._video.readyState = 4;
-        this._video.paused = false;
-        this._video.dispatchEvent(new Event("loadedmetadata"));
-        this._video.dispatchEvent(new Event("canplay"));
-        this._video.dispatchEvent(new Event("playing"));
+        const { pipeline, paintable } = buildUriPipeline(this._video.src);
+        this._attachPipeline(pipeline, paintable);
       } catch (err) {
         console.error("VideoBridge: Failed to build URI pipeline:", err);
       }
     }
-    /** @internal Tear down the GStreamer pipeline */
+    _attachPipeline(pipeline, paintable) {
+      this._pipeline = pipeline;
+      this._video._pipeline = pipeline;
+      this._picture.set_paintable(paintable);
+      const bus = pipeline.get_bus();
+      if (bus) {
+        bus.add_signal_watch();
+        this._pipelineBus = bus;
+        this._pipelineBusHandlers = [
+          bus.connect("message::error", (_b, msg) => {
+            const [err, debug] = msg.parse_error();
+            console.error(`VideoBridge pipeline error: ${err?.message ?? "unknown"} (${debug ?? ""})`);
+            this._video.dispatchEvent(new Event("error"));
+          }),
+          bus.connect("message::warning", (_b, msg) => {
+            const [err, debug] = msg.parse_warning();
+            console.warn(`VideoBridge pipeline warning: ${err?.message ?? "unknown"} (${debug ?? ""})`);
+          })
+        ];
+      }
+      const ret = pipeline.set_state(GstRuntime.State.PLAYING);
+      if (ret === GstRuntime.StateChangeReturn.FAILURE) {
+        console.error("VideoBridge: pipeline state change to PLAYING failed");
+      }
+      this._video.readyState = 4;
+      this._video.dispatchEvent(new Event("loadedmetadata"));
+      this._video.dispatchEvent(new Event("canplay"));
+      this._video.dispatchEvent(new Event("playing"));
+    }
     _destroyPipeline() {
+      if (this._pipelineBus) {
+        for (const id of this._pipelineBusHandlers) {
+          try {
+            this._pipelineBus.disconnect(id);
+          } catch {
+          }
+        }
+        try {
+          this._pipelineBus.remove_signal_watch();
+        } catch {
+        }
+        this._pipelineBus = null;
+        this._pipelineBusHandlers = [];
+      }
       if (this._pipeline) {
         try {
-          this._pipeline.set_state(Gst.State.NULL);
+          this._pipeline.set_state(GstRuntime.State.NULL);
         } catch {
         }
         this._pipeline = null;
+        this._video._pipeline = null;
       }
       this._picture.set_paintable(null);
     }

package/lib/types/index.d.ts

@@ -1,2 +1,3 @@
 export { VideoBridge } from './video-bridge.js';
 export { buildMediaStreamPipeline, buildUriPipeline, createPaintableSink } from './pipeline-builder.js';
+export { HTMLVideoElement } from '@gjsify/dom-elements';