@gjsify/video 0.3.19 → 0.3.21

package/lib/esm/gst-init.js

@@ -1,4 +1,4 @@
-import e from"gi://Gst?version=1.0";import{DOMException as t}from"@gjsify/dom-exception";let n=!1;function r(){n||=(e.init(null),!0)}function i(){r(),e.ElementFactory.find(`gtk4paintablesink`)||a(`GStreamer element "gtk4paintablesink" not available. Install gst-plugins-rs:
+import e from"gi://Gst?version=1.0";import{DOMException as t}from"@gjsify/dom-exception";let n=!1;function ensureGstInit(){n||=(e.init(null),!0)}function ensurePaintableSinkAvailable(){ensureGstInit(),e.ElementFactory.find(`gtk4paintablesink`)||throwNotSupported(`GStreamer element "gtk4paintablesink" not available. Install gst-plugins-rs:
   Fedora:        dnf install gstreamer1-plugin-gtk4
   Ubuntu/Debian: apt install gstreamer1.0-gtk4
-  Verify with:   gst-inspect-1.0 gtk4paintablesink`)}function a(e){throw new t(e,`NotSupportedError`)}export{e as Gst,r as ensureGstInit,i as ensurePaintableSinkAvailable};
+  Verify with:   gst-inspect-1.0 gtk4paintablesink`)}function throwNotSupported(e){throw new t(e,`NotSupportedError`)}export{e as Gst,ensureGstInit,ensurePaintableSinkAvailable};

package/lib/esm/pipeline-builder.js

@@ -1 +1 @@
-import{Gst as e,ensureGstInit as t,ensurePaintableSinkAvailable as n}from"./gst-init.js";function r(){n();let t=e.ElementFactory.make(`gtk4paintablesink`,`videosink`);if(!t)throw Error(`Failed to create gtk4paintablesink element`);let r=t.paintable;if(!r)throw Error(`gtk4paintablesink has no paintable property`);let i=null;return r.gl_context&&(i=e.ElementFactory.make(`glsinkbin`,`glsink`),i&&(i.sink=t)),{sink:i??t,paintable:r,glSink:i}}function i(n,i){t();let{sink:a,paintable:o}=r();i&&(i.set_state(e.State.NULL),i.remove(n));let s=new e.Pipeline({name:`video-bridge-pipeline`}),c=e.ElementFactory.make(`tee`,`source-tee`);if(!c)throw Error(`Failed to create tee element`);c.allow_not_linked=!0;let l=e.ElementFactory.make(`queue`,`preview-queue`);if(!l)throw Error(`Failed to create queue element`);let u=e.ElementFactory.make(`videoconvert`,`convert`);if(!u)throw Error(`Failed to create videoconvert element`);if(s.add(n),s.add(c),s.add(l),s.add(u),s.add(a),!n.link(c))throw Error(`Failed to link source → tee`);let d=c.request_pad_simple?c.request_pad_simple(`src_%u`):c.get_request_pad(`src_%u`),f=l.get_static_pad(`sink`);if(d&&f)d.link(f);else throw Error(`Failed to link tee → queue`);if(!l.link(u))throw Error(`Failed to link queue → videoconvert`);if(!u.link(a))throw Error(`Failed to link videoconvert → sink`);return{pipeline:s,paintable:o,tee:c}}function a(n){t();let{sink:i,paintable:a}=r(),o=e.ElementFactory.make(`playbin`,`playbin`);if(!o)throw Error(`Failed to create playbin element`);o.uri=n,o.video_sink=i;let s=new e.Pipeline({name:`video-bridge-uri-pipeline`});return s.add(o),{pipeline:s,paintable:a}}export{i as buildMediaStreamPipeline,a as buildUriPipeline,r as createPaintableSink};
+import{Gst as e,ensureGstInit as t,ensurePaintableSinkAvailable as n}from"./gst-init.js";function createPaintableSink(){n();let t=e.ElementFactory.make(`gtk4paintablesink`,`videosink`);if(!t)throw Error(`Failed to create gtk4paintablesink element`);let r=t.paintable;if(!r)throw Error(`gtk4paintablesink has no paintable property`);let i=null;return r.gl_context&&(i=e.ElementFactory.make(`glsinkbin`,`glsink`),i&&(i.sink=t)),{sink:i??t,paintable:r,glSink:i}}function buildMediaStreamPipeline(n,r){t();let{sink:i,paintable:a}=createPaintableSink();r&&(r.set_state(e.State.NULL),r.remove(n));let o=new e.Pipeline({name:`video-bridge-pipeline`}),s=e.ElementFactory.make(`tee`,`source-tee`);if(!s)throw Error(`Failed to create tee element`);s.allow_not_linked=!0;let c=e.ElementFactory.make(`queue`,`preview-queue`);if(!c)throw Error(`Failed to create queue element`);let l=e.ElementFactory.make(`videoconvert`,`convert`);if(!l)throw Error(`Failed to create videoconvert element`);if(o.add(n),o.add(s),o.add(c),o.add(l),o.add(i),!n.link(s))throw Error(`Failed to link source → tee`);let u=s.request_pad_simple?s.request_pad_simple(`src_%u`):s.get_request_pad(`src_%u`),d=c.get_static_pad(`sink`);if(u&&d)u.link(d);else throw Error(`Failed to link tee → queue`);if(!c.link(l))throw Error(`Failed to link queue → videoconvert`);if(!l.link(i))throw Error(`Failed to link videoconvert → sink`);return{pipeline:o,paintable:a,tee:s}}function buildUriPipeline(n){t();let{sink:r,paintable:i}=createPaintableSink(),a=e.ElementFactory.make(`playbin`,`playbin`);if(!a)throw Error(`Failed to create playbin element`);a.uri=n,a.video_sink=r;let o=new e.Pipeline({name:`video-bridge-uri-pipeline`});return o.add(a),{pipeline:o,paintable:i}}export{buildMediaStreamPipeline,buildUriPipeline,createPaintableSink};

package/lib/esm/video-bridge.js

@@ -1 +1 @@
-import{Gst as e}from"./gst-init.js";import{buildMediaStreamPipeline as t,buildUriPipeline as n}from"./pipeline-builder.js";import r from"gi://GObject";import i from"gi://GLib?version=2.0";import a from"gi://Gtk?version=4.0";import{attachEventControllers as o}from"@gjsify/event-bridge";import{Event as s}from"@gjsify/dom-events";import{BridgeEnvironment as c}from"@gjsify/bridge-types";import{HTMLVideoElement as l}from"@gjsify/dom-elements";const u=`media-playback-start-symbolic`,d=`media-playback-pause-symbolic`;function f(e){return!isFinite(e)||isNaN(e)?`--:--`:`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,`0`)}`}const p=r.registerClass({GTypeName:`GjsifyVideoBridge`},class extends a.Box{constructor(e){super({...e,orientation:a.Orientation.VERTICAL}),this._timeOrigin=i.get_monotonic_time(),this._pipeline=null,this._pipelineBus=null,this._pipelineBusHandlers=[],this._readyCallbacks=[],this._resizeCallbacks=[],this._ready=!1,this._controls=null,this._positionTimerId=null,this._updatingFromTimer=!1,this._hideTimerId=null,this._overlay=new a.Overlay({hexpand:!0,vexpand:!0}),this.append(this._overlay),this._picture=new a.Picture({hexpand:!0,vexpand:!0}),this._overlay.set_child(this._picture),this._video=new l;let t={performanceNow:()=>(i.get_monotonic_time()-this._timeOrigin)/1e3,getWidth:()=>this.get_allocated_width(),getHeight:()=>this.get_allocated_height(),getDevicePixelRatio:()=>this.get_native()?.get_surface()?.get_scale_factor()??1};this._environment=new c(t),this._environment.document.body.appendChild(this._video),o(this,()=>this._video),this._video.addEventListener(`srcobjectchange`,()=>this._onSrcObjectChange()),this._video.addEventListener(`srcchange`,()=>this._onSrcChange()),this.connect(`realize`,()=>{if(!this._ready){this._ready=!0;for(let e of this._readyCallbacks)e(this._video);this._readyCallbacks=[]}});let n=0,r=0,u=()=>{let e=this.get_allocated_width(),t=this.get_allocated_height();if(!(e===n&&t===r)){n=e,r=t,this._video.dispatchEvent(new s(`resize`));for(let n of this._resizeCallbacks)n(e,t)}};this.connect(`notify::width-request`,u),this.connect(`notify::height-request`,u),this.connect(`map`,u),this.connect(`unrealize`,()=>{this._destroyPipeline(),this._stopPositionTimer(),this._resizeCallbacks=[]})}get element(){return this._video}get videoElement(){return this._video}get environment(){return this._environment}onReady(e){if(this._ready){e(this._video);return}this._readyCallbacks.push(e)}onResize(e){this._resizeCallbacks.push(e)}installGlobals(){if(globalThis.HTMLVideoElement=l,globalThis.performance===void 0){let e=this._timeOrigin;globalThis.performance={now:()=>(i.get_monotonic_time()-e)/1e3,timeOrigin:Date.now()}}}showControls(e=!0){if(e&&!this._controls){this._controls=this._buildControlBar();let{bar:e}=this._controls;e.set_halign(a.Align.FILL),e.set_valign(a.Align.END),e.set_visible(!1),this._overlay.add_overlay(e),this._startPositionTimer(),this._setupAutoHideMotion(e)}else !e&&this._controls&&(this._overlay.remove_overlay(this._controls.bar),this._controls=null,this._stopPositionTimer(),this._hideTimerId!==null&&(i.Source.remove(this._hideTimerId),this._hideTimerId=null))}_setupAutoHideMotion(e){for(let t of[this,e]){let e=new a.EventControllerMotion;e.connect(`motion`,()=>this._revealControls()),e.connect(`enter`,()=>this._revealControls()),t.add_controller(e)}}_revealControls(){this._controls&&(this._controls.bar.set_visible(!0),this._hideTimerId!==null&&i.Source.remove(this._hideTimerId),this._hideTimerId=i.timeout_add_seconds(i.PRIORITY_DEFAULT,2,()=>(this._hideTimerId=null,this._controls?.bar.set_visible(!1),i.SOURCE_REMOVE)))}_buildControlBar(){let e=new a.Box({orientation:a.Orientation.HORIZONTAL,spacing:6,margin_start:6,margin_end:6,margin_top:4,margin_bottom:4});e.add_css_class(`osd`);let t=new a.Button({icon_name:d});t.connect(`clicked`,()=>{this._video.paused?(this._video.play(),t.set_icon_name(d)):(this._video.pause(),t.set_icon_name(u))}),e.append(t);let n=new a.Adjustment({lower:0,upper:1,step_increment:1,page_increment:10}),r=a.Scale.new(a.Orientation.HORIZONTAL,n);r.set_hexpand(!0),r.set_draw_value(!1),r.connect(`change-value`,(e,t,n)=>(!this._updatingFromTimer&&isFinite(n)&&(this._video.currentTime=n),!1)),e.append(r);let i=new a.Label({label:`--:-- / --:--`,use_markup:!1});e.append(i);let o=new a.VolumeButton({value:1});return o.connect(`value-changed`,(e,t)=>{this._video.volume=t}),e.append(o),{bar:e,playBtn:t,seekAdj:n,seekScale:r,timeLabel:i,volumeBtn:o,lastSeekValue:NaN,lastTimeText:``}}_startPositionTimer(){this._positionTimerId===null&&(this._positionTimerId=i.timeout_add(i.PRIORITY_DEFAULT,200,()=>{let e=this._controls;if(!e)return i.SOURCE_REMOVE;let t=this._video.currentTime,n=this._video.duration;isFinite(n)&&n>0&&(e.seekAdj.upper!==n&&(e.seekAdj.upper=n),t!==e.lastSeekValue&&(this._updatingFromTimer=!0,e.seekAdj.set_value(t),this._updatingFromTimer=!1,e.lastSeekValue=t));let r=`${f(t)} / ${f(n)}`;r!==e.lastTimeText&&(e.timeLabel.set_label(r),e.lastTimeText=r);let a=this._video.paused?u:d;return e.playBtn.get_icon_name()!==a&&e.playBtn.set_icon_name(a),i.SOURCE_CONTINUE}))}_stopPositionTimer(){this._positionTimerId!==null&&(i.Source.remove(this._positionTimerId),this._positionTimerId=null)}_onSrcObjectChange(){this._destroyPipeline();let e=this._video.srcObject;if(!e)return;let n=(e.getVideoTracks?.()??[]).find(e=>e._gstSource!=null);if(!n?._gstSource){console.warn(`VideoBridge: MediaStream has no video track with GStreamer source`);return}try{let{pipeline:e,paintable:r,tee:i}=t(n._gstSource,n._gstPipeline);this._attachPipeline(e,r),n._gstPipeline=e,n._gstTee=i}catch(e){console.error(`VideoBridge: Failed to build MediaStream pipeline:`,e)}}_onSrcChange(){if(this._destroyPipeline(),this._video.src)try{let{pipeline:e,paintable:t}=n(this._video.src);this._attachPipeline(e,t)}catch(e){console.error(`VideoBridge: Failed to build URI pipeline:`,e)}}_attachPipeline(t,n){this._pipeline=t,this._video._pipeline=t,this._picture.set_paintable(n);let r=t.get_bus();r&&(r.add_signal_watch(),this._pipelineBus=r,this._pipelineBusHandlers=[r.connect(`message::error`,(e,t)=>{let[n,r]=t.parse_error();console.error(`VideoBridge pipeline error: ${n?.message??`unknown`} (${r??``})`),this._video.dispatchEvent(new s(`error`))}),r.connect(`message::warning`,(e,t)=>{let[n,r]=t.parse_warning();console.warn(`VideoBridge pipeline warning: ${n?.message??`unknown`} (${r??``})`)})]),t.set_state(e.State.PLAYING)===e.StateChangeReturn.FAILURE&&console.error(`VideoBridge: pipeline state change to PLAYING failed`),this._video.readyState=4,this._video.dispatchEvent(new s(`loadedmetadata`)),this._video.dispatchEvent(new s(`canplay`)),this._video.dispatchEvent(new s(`playing`))}_destroyPipeline(){if(this._pipelineBus){for(let e of this._pipelineBusHandlers)try{this._pipelineBus.disconnect(e)}catch{}try{this._pipelineBus.remove_signal_watch()}catch{}this._pipelineBus=null,this._pipelineBusHandlers=[]}if(this._pipeline){try{this._pipeline.set_state(e.State.NULL)}catch{}this._pipeline=null,this._video._pipeline=null}this._picture.set_paintable(null)}});export{p as VideoBridge};
+import{Gst as e}from"./gst-init.js";import{buildMediaStreamPipeline as t,buildUriPipeline as n}from"./pipeline-builder.js";import r from"gi://GObject";import i from"gi://GLib?version=2.0";import a from"gi://Gtk?version=4.0";import{attachEventControllers as o}from"@gjsify/event-bridge";import{Event as s}from"@gjsify/dom-events";import{BridgeEnvironment as c}from"@gjsify/bridge-types";import{HTMLVideoElement as l}from"@gjsify/dom-elements";const u=`media-playback-start-symbolic`,d=`media-playback-pause-symbolic`;function formatTime(e){return!isFinite(e)||isNaN(e)?`--:--`:`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,`0`)}`}const f=r.registerClass({GTypeName:`GjsifyVideoBridge`},class extends a.Box{constructor(e){super({...e,orientation:a.Orientation.VERTICAL}),this._timeOrigin=i.get_monotonic_time(),this._pipeline=null,this._pipelineBus=null,this._pipelineBusHandlers=[],this._readyCallbacks=[],this._resizeCallbacks=[],this._ready=!1,this._controls=null,this._positionTimerId=null,this._updatingFromTimer=!1,this._hideTimerId=null,this._overlay=new a.Overlay({hexpand:!0,vexpand:!0}),this.append(this._overlay),this._picture=new a.Picture({hexpand:!0,vexpand:!0}),this._overlay.set_child(this._picture),this._video=new l;let t={performanceNow:()=>(i.get_monotonic_time()-this._timeOrigin)/1e3,getWidth:()=>this.get_allocated_width(),getHeight:()=>this.get_allocated_height(),getDevicePixelRatio:()=>this.get_native()?.get_surface()?.get_scale_factor()??1};this._environment=new c(t),this._environment.document.body.appendChild(this._video),o(this,()=>this._video),this._video.addEventListener(`srcobjectchange`,()=>this._onSrcObjectChange()),this._video.addEventListener(`srcchange`,()=>this._onSrcChange()),this.connect(`realize`,()=>{if(!this._ready){this._ready=!0;for(let e of this._readyCallbacks)e(this._video);this._readyCallbacks=[]}});let n=0,r=0,checkResize=()=>{let e=this.get_allocated_width(),t=this.get_allocated_height();if(!(e===n&&t===r)){n=e,r=t,this._video.dispatchEvent(new s(`resize`));for(let n of this._resizeCallbacks)n(e,t)}};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=[]})}get element(){return this._video}get videoElement(){return this._video}get environment(){return this._environment}onReady(e){if(this._ready){e(this._video);return}this._readyCallbacks.push(e)}onResize(e){this._resizeCallbacks.push(e)}installGlobals(){if(globalThis.HTMLVideoElement=l,globalThis.performance===void 0){let e=this._timeOrigin;globalThis.performance={now:()=>(i.get_monotonic_time()-e)/1e3,timeOrigin:Date.now()}}}showControls(e=!0){if(e&&!this._controls){this._controls=this._buildControlBar();let{bar:e}=this._controls;e.set_halign(a.Align.FILL),e.set_valign(a.Align.END),e.set_visible(!1),this._overlay.add_overlay(e),this._startPositionTimer(),this._setupAutoHideMotion(e)}else !e&&this._controls&&(this._overlay.remove_overlay(this._controls.bar),this._controls=null,this._stopPositionTimer(),this._hideTimerId!==null&&(i.Source.remove(this._hideTimerId),this._hideTimerId=null))}_setupAutoHideMotion(e){for(let t of[this,e]){let e=new a.EventControllerMotion;e.connect(`motion`,()=>this._revealControls()),e.connect(`enter`,()=>this._revealControls()),t.add_controller(e)}}_revealControls(){this._controls&&(this._controls.bar.set_visible(!0),this._hideTimerId!==null&&i.Source.remove(this._hideTimerId),this._hideTimerId=i.timeout_add_seconds(i.PRIORITY_DEFAULT,2,()=>(this._hideTimerId=null,this._controls?.bar.set_visible(!1),i.SOURCE_REMOVE)))}_buildControlBar(){let e=new a.Box({orientation:a.Orientation.HORIZONTAL,spacing:6,margin_start:6,margin_end:6,margin_top:4,margin_bottom:4});e.add_css_class(`osd`);let t=new a.Button({icon_name:d});t.connect(`clicked`,()=>{this._video.paused?(this._video.play(),t.set_icon_name(d)):(this._video.pause(),t.set_icon_name(u))}),e.append(t);let n=new a.Adjustment({lower:0,upper:1,step_increment:1,page_increment:10}),r=a.Scale.new(a.Orientation.HORIZONTAL,n);r.set_hexpand(!0),r.set_draw_value(!1),r.connect(`change-value`,(e,t,n)=>(!this._updatingFromTimer&&isFinite(n)&&(this._video.currentTime=n),!1)),e.append(r);let i=new a.Label({label:`--:-- / --:--`,use_markup:!1});e.append(i);let o=new a.VolumeButton({value:1});return o.connect(`value-changed`,(e,t)=>{this._video.volume=t}),e.append(o),{bar:e,playBtn:t,seekAdj:n,seekScale:r,timeLabel:i,volumeBtn:o,lastSeekValue:NaN,lastTimeText:``}}_startPositionTimer(){this._positionTimerId===null&&(this._positionTimerId=i.timeout_add(i.PRIORITY_DEFAULT,200,()=>{let e=this._controls;if(!e)return i.SOURCE_REMOVE;let t=this._video.currentTime,n=this._video.duration;isFinite(n)&&n>0&&(e.seekAdj.upper!==n&&(e.seekAdj.upper=n),t!==e.lastSeekValue&&(this._updatingFromTimer=!0,e.seekAdj.set_value(t),this._updatingFromTimer=!1,e.lastSeekValue=t));let r=`${formatTime(t)} / ${formatTime(n)}`;r!==e.lastTimeText&&(e.timeLabel.set_label(r),e.lastTimeText=r);let a=this._video.paused?u:d;return e.playBtn.get_icon_name()!==a&&e.playBtn.set_icon_name(a),i.SOURCE_CONTINUE}))}_stopPositionTimer(){this._positionTimerId!==null&&(i.Source.remove(this._positionTimerId),this._positionTimerId=null)}_onSrcObjectChange(){this._destroyPipeline();let e=this._video.srcObject;if(!e)return;let n=(e.getVideoTracks?.()??[]).find(e=>e._gstSource!=null);if(!n?._gstSource){console.warn(`VideoBridge: MediaStream has no video track with GStreamer source`);return}try{let{pipeline:e,paintable:r,tee:i}=t(n._gstSource,n._gstPipeline);this._attachPipeline(e,r),n._gstPipeline=e,n._gstTee=i}catch(e){console.error(`VideoBridge: Failed to build MediaStream pipeline:`,e)}}_onSrcChange(){if(this._destroyPipeline(),this._video.src)try{let{pipeline:e,paintable:t}=n(this._video.src);this._attachPipeline(e,t)}catch(e){console.error(`VideoBridge: Failed to build URI pipeline:`,e)}}_attachPipeline(t,n){this._pipeline=t,this._video._pipeline=t,this._picture.set_paintable(n);let r=t.get_bus();r&&(r.add_signal_watch(),this._pipelineBus=r,this._pipelineBusHandlers=[r.connect(`message::error`,(e,t)=>{let[n,r]=t.parse_error();console.error(`VideoBridge pipeline error: ${n?.message??`unknown`} (${r??``})`),this._video.dispatchEvent(new s(`error`))}),r.connect(`message::warning`,(e,t)=>{let[n,r]=t.parse_warning();console.warn(`VideoBridge pipeline warning: ${n?.message??`unknown`} (${r??``})`)})]),t.set_state(e.State.PLAYING)===e.StateChangeReturn.FAILURE&&console.error(`VideoBridge: pipeline state change to PLAYING failed`),this._video.readyState=4,this._video.dispatchEvent(new s(`loadedmetadata`)),this._video.dispatchEvent(new s(`canplay`)),this._video.dispatchEvent(new s(`playing`))}_destroyPipeline(){if(this._pipelineBus){for(let e of this._pipelineBusHandlers)try{this._pipelineBus.disconnect(e)}catch{}try{this._pipelineBus.remove_signal_watch()}catch{}this._pipelineBus=null,this._pipelineBusHandlers=[]}if(this._pipeline){try{this._pipeline.set_state(e.State.NULL)}catch{}this._pipeline=null,this._video._pipeline=null}this._picture.set_paintable(null)}});export{f as VideoBridge};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjsify/video",
-  "version": "0.3.19",
+  "version": "0.3.21",
   "description": "VideoBridge — GTK container for HTMLVideoElement backed by GStreamer gtk4paintablesink",
   "type": "module",
   "module": "lib/esm/index.js",
@@ -32,14 +32,14 @@
     "@girs/gobject-2.0": "2.88.0-4.0.0-rc.14",
     "@girs/gst-1.0": "1.28.1-4.0.0-rc.14",
     "@girs/gtk-4.0": "4.23.0-4.0.0-rc.14",
-    "@gjsify/bridge-types": "^0.3.19",
-    "@gjsify/dom-elements": "^0.3.19",
-    "@gjsify/dom-events": "^0.3.19",
-    "@gjsify/dom-exception": "^0.3.19",
-    "@gjsify/event-bridge": "^0.3.19"
+    "@gjsify/bridge-types": "^0.3.21",
+    "@gjsify/dom-elements": "^0.3.21",
+    "@gjsify/dom-events": "^0.3.21",
+    "@gjsify/dom-exception": "^0.3.21",
+    "@gjsify/event-bridge": "^0.3.21"
   },
   "devDependencies": {
-    "@gjsify/cli": "^0.3.19",
+    "@gjsify/cli": "^0.3.21",
     "@types/node": "^25.6.2",
     "typescript": "^6.0.3"
   }