lexgui 0.7.8 → 0.7.9

package/build/extensions/videoeditor.js

@@ -34,7 +34,7 @@ class TimeBar {
   
         this.markerWidth = options.markerWidth ?? 8;
         this.markerHeight = options.markerHeight ?? (this.canvas.height * 0.5);
-        this.offset = options.offset || (this.markerWidth*0.5 + 8);
+        this.offset = options.offset || (this.markerWidth*0.5 + 5);
 
         // dimensions of line (not canvas)
         this.lineWidth = this.canvas.width - this.offset * 2;
@@ -147,7 +147,7 @@ class TimeBar {
         ctx.fillStyle = ctx.strokeStyle = options.fillColor || '#111' // "#FFF";
 
 
-        y -= this.offset + 4;
+        y -= this.offset + 8;
         // Current time ball grab
         ctx.fillStyle = options.fillColor || '#e5e5e5';
         ctx.beginPath();
@@ -318,7 +318,7 @@ class VideoEditor {
 
         this.playing = false;
         this.requestId = null;
-
+        this.videoReady = false;
         this.currentTime = this.startTime = 0;
         this.startTimeString = "0:0";
         this.endTimeString = "0:0";
@@ -349,7 +349,7 @@ class VideoEditor {
         this.dragOffsetY = 0;
         // Create video element and load it
         let video = this.video = options.video ?? document.createElement( 'video' );
-        this.video.loop = true;
+        this.loop = options.loop ?? false;
         
         if(options.src) {
             this.video.src = options.src;
@@ -397,7 +397,10 @@ class VideoEditor {
             this.controlsPanelLeft.addButton('', "", (v) => {
                 this.playing = !this.playing;
                 if(this.playing) {
-                    this.video.play();
+                    if( this.video.currentTime + 0.000001 >= this.endTime) {
+                        this.video.currentTime = this.startTime;
+                    }
+                    this.video.play()
                 }
                 else {
                     this.video.pause();
@@ -447,13 +450,16 @@ class VideoEditor {
                 event.preventDefault();
                 event.stopPropagation();
 
-                if(!this.playing) {
+                this.playing = !this.playing;
+                if(this.playing) {
+                    if( this.video.currentTime + 0.000001 >= this.endTime) {
+                        this.video.currentTime = this.startTime;
+                    }
                     this.video.play();
                 }
                 else {
                     this.video.pause();
                 }
-                this.playing = !this.playing;
                 this.controlsPanelLeft.refresh();
             }
         }
@@ -610,15 +616,41 @@ class VideoEditor {
     }
 
     async _loadVideo( options = {} ) {
+        this.videoReady = false;
         while(this.video.duration === Infinity || isNaN(this.video.duration) || !this.timebar) {
             await new Promise(r => setTimeout(r, 1000));
             this.video.currentTime = 10000000 * Math.random();
         }
+        this.video.currentTime = 0.01; // BUG: some videos will not play unless this line is present 
         
+        // Duration can change if the video is dynamic (stream). This function is to ensure to load all buffer data
+        const forceLoadChunks =  () => {    
+            const state = this.videoReady;
+            if(this.video.readyState > 3) {
+                this.videoReady = true;
+            }
+            if(!state) {
+                this.video.currentTime = this.video.duration;
+            }
+        }
+
+        this.video.addEventListener( "canplaythrough", forceLoadChunks, {passive :true} );
+
+        this.video.ondurationchange = (v) => {
+            if( this.video.duration != this.endTime ) {
+
+                this.video.currentTime = this.startTime;
+                console.log("duration changed from", this.endTime, " to ", this.video.duration);
+                this.endTime = this.video.duration;
+                const x = this._timeToX(this.endTime);
+                this._setEndValue(x);
+            }
+            this.video.currentTime = this.startTime;
+        }
+ 
         this.timebar.startX = this.timebar.position.x;
         this.timebar.endX = this.timebar.position.x + this.timebar.lineWidth;
 
-        this.video.currentTime = 0.01; // BUG: some videos will not play unless this line is present 
         this.endTime = this.video.duration;
         
         this._setEndValue(this.timebar.endX);
@@ -660,8 +692,16 @@ class VideoEditor {
             this.onDraw();
         }
         if(this.playing) {
-            if(this.video.currentTime >= this.endTime) {
-                this.video.currentTime = this.startTime;
+            if( this.video.currentTime + 0.000001 >= this.endTime) {
+                this.video.pause();
+                if(!this.loop) {
+                    this.playing = false;
+                    this.controlsPanelLeft.refresh();
+                }
+                else {
+                    this.video.currentTime = this.startTime;
+                    this.video.play();
+                }
             }
             const x = this._timeToX(this.video.currentTime);
             this._setCurrentValue(x, false);

package/build/lexgui.js

@@ -14,7 +14,7 @@ console.warn( 'Script _build/lexgui.js_ is depracated and will be removed soon.
 */
 
 const LX = {
-    version: "0.7.8",
+    version: "0.7.9",
     ready: false,
     extensions: [], // Store extensions used
     signals: {}, // Events and triggers
@@ -1332,18 +1332,18 @@ class DropdownMenu {
         else
         {
             menuItem.addEventListener( "click", () => {
-                const f = item.callback;
-                if( f )
-                {
-                    f.call( this, key, menuItem );
-                }
-
                 const radioName = menuItem.getAttribute( "data-radioname" );
                 if( radioName )
                 {
                     this._trigger[ radioName ] = key;
                 }
 
+                const f = item.callback;
+                if( f )
+                {
+                    f.call( this, key, menuItem, radioName );
+                }
+
                 // If has options, it's a radio group label, so don't close the menu
                 if( !item.options && ( item.closeOnClick ?? true ) )
                 {
@@ -15169,17 +15169,26 @@ class Menubar {
                 } });
             };
 
-            entry.addEventListener("click", () => {
+            entry.addEventListener("mousedown", (e) => {
+                e.preventDefault();
+            });
+
+            entry.addEventListener("mouseup", (e) => {
+
+                e.preventDefault();
+
                 const f = item[ 'callback' ];
                 if( f )
                 {
-                    f.call( this, key, entry );
+                    f.call( this, key, entry, e );
                     return;
                 }
 
                 _showEntry();
 
                 this.focused = true;
+
+                return false;
             });
 
             entry.addEventListener( "mouseover", (e) => {
@@ -15346,7 +15355,12 @@ class Menubar {
         }
 
         const _b = button.querySelector('a');
-        _b.addEventListener("click", (e) => {
+
+        _b.addEventListener( "mousedown", (e) => {
+            e.preventDefault();
+        });
+
+        _b.addEventListener( "mouseup", (e) => {
             if( callback && !disabled )
             {
                 callback.call( this, _b, e );