lexgui 0.1.31 → 0.1.32

package/build/components/videoeditor.js

@@ -0,0 +1,539 @@
+import { LX } from 'lexgui';
+
+if(!LX) {
+    throw("lexgui.js missing!");
+}
+
+LX.components.push( 'VideoEditor' );
+
+/**
+ * @class TimeBar
+ */
+
+class TimeBar {
+
+    static TIMEBAR_PLAY       = 1;
+    static TIMEBAR_TRIM       = 2;
+
+    static BACKGROUND_COLOR = LX.getThemeColor("global-branch-darker");
+    static COLOR = LX.getThemeColor("global-button-color");
+    static ACTIVE_COLOR = LX.getThemeColor("global-selected-light");
+
+    constructor( area, type, options = {} ) {
+
+        this.type = type;
+        
+        // Create canvas
+        this.canvas = document.createElement( 'canvas' );
+        this.canvas.width = area.size[0];
+        this.canvas.height = area.size[1];
+        area.attach( this.canvas );
+        
+        this.ctx = this.canvas.getContext("2d");
+        
+        const barHeight = options.barHeight ?? 5;
+        this.markerWidth = options.markerWidth ?? 8;
+        this.offset = options.offset ?? 5;
+        
+        this.width = this.canvas.width - this.offset * 2;
+        this.height = barHeight;
+
+        this.position = new LX.vec2( this.offset, this.canvas.height * 0.5 - this.height * 0.5);
+        this.startX = this.position.x;
+        this.endX = this.width;
+        this.currentX = this.startX;
+
+        const y = this.offset * 2;
+        const w = this.markerWidth;
+        const h = this.canvas.height - y * 2;
+        this.trimRec = [this.startX, y, w, h];
+
+        this._draw();
+
+        this.lastPosition = new LX.vec2( 0, 0 );
+    }
+
+    _draw() {
+        const ctx = this.ctx;
+    
+        ctx.save();
+        ctx.fillStyle = TimeBar.BACKGROUND_COLOR;
+        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        
+        // // Draw background timeline
+        ctx.fillStyle = TimeBar.COLOR;
+        ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
+
+        // Draw background trimed timeline
+        ctx.fillStyle = TimeBar.ACTIVE_COLOR;
+        ctx.fillRect(this.startX, this.position.y, this.endX - this.offset - this.startX, this.height);
+        
+        ctx.restore();
+
+        // Min-Max time markers
+        this._addTrim('start', this.startX, { color: null, fillColor: TimeBar.ACTIVE_COLOR || '#5f88c9'});
+        this._addTrim('end', this.endX, { color: null, fillColor: TimeBar.ACTIVE_COLOR || '#5f88c9'});
+        this._addMarker('current', this.currentX, { color: '#e5e5e5', fillColor: TimeBar.ACTIVE_COLOR || '#5f88c9', width: this.markerWidth });
+    }
+
+    _addTrim(name, x, options) {
+
+        options = options || {};
+                       
+        const y = this.trimRec[1];
+        const w = this.trimRec[2];
+        const h = this.trimRec[3];
+        
+        const ctx = this.ctx;
+        if(this.hovering == name) {
+            // Shadow
+            ctx.shadowColor = "white";
+            ctx.shadowBlur = 2;       
+        }
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = ctx.strokeStyle = options.fillColor || '#111' // "#FFF";
+        
+        ctx.beginPath();
+        ctx.roundRect(x - w * 0.5, y, w, h, 2);
+        ctx.fill();
+        ctx.fillStyle = ctx.strokeStyle = options.fillColor || '#111' // "#FFF";
+    
+        ctx.strokeStyle = "white";
+        ctx.beginPath();
+        ctx.lineWitdh = 2;
+        ctx.moveTo(x, y + 4);
+        ctx.lineTo(x, y + h - 4);
+        ctx.stroke();   
+        ctx.shadowBlur = 0;
+
+    }
+
+    _addMarker(name, x, options) {
+
+        options = options || {};
+                       
+        let y = this.offset;
+        const w = options.width ? options.width : (this.dragging == name ? 6 : 4);
+        const h = this.canvas.height - this.offset * 2;
+        
+        let ctx = this.ctx;
+        
+        ctx.globalAlpha = 1;
+
+        ctx.fillStyle = ctx.strokeStyle = options.fillColor || '#111' // "#FFF";
+
+        
+        if(this.hovering == name) {
+           // Shadow
+            ctx.shadowColor = "white";
+            ctx.shadowBlur = 2;       
+        }
+        
+        // Current time line
+        ctx.fillStyle = ctx.strokeStyle = "white"; 
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        ctx.lineTo(x, y + h * 0.5);
+        ctx.stroke();       
+        ctx.closePath();
+        ctx.fillStyle = ctx.strokeStyle = options.fillColor || '#111' // "#FFF";
+        
+        
+        y -= this.offset + 4;
+        // Current time ball grab
+        ctx.fillStyle = options.fillColor || '#e5e5e5';
+        ctx.beginPath();
+        ctx.roundRect(x - w * 0.5, y + this.offset, w, w, 5);
+       
+        ctx.fill();
+        ctx.shadowBlur = 0;        
+    }
+
+    onMouseDown (e) {
+
+        e.preventDefault();
+        
+        if(!this.canvas || e.target != this.canvas) {
+            return;
+        }
+        const canvas = this.canvas;
+
+        // Process mouse
+        const x = e.offsetX;
+        const y = e.offsetY;
+   
+        // Check if some marker is clicked
+        const threshold = this.markerWidth;
+
+        if(Math.abs(this.startX - x) < threshold && this.trimRec[1] < y &&  y < this.trimRec[3] + this.trimRec[1] ) {
+            this.dragging = 'start';
+            canvas.style.cursor = "grabbing";
+        } 
+        else if(Math.abs(this.endX - x) < threshold && this.trimRec[1] < y &&  y < this.trimRec[3] + this.trimRec[1] ) {
+            this.dragging = 'end';
+            canvas.style.cursor = "grabbing";
+        } 
+        else if(Math.abs(this.currentX - x) < threshold) {
+            this.dragging = 'current';
+            canvas.style.cursor = "grabbing";
+        } 
+        else {
+            if(x < this.startX) {
+                this.currentX = this.startX;        
+            }
+            else if(x > this.endX) {
+                this.currentX = this.endX;
+            }
+            else {
+                this.currentX = x;
+            }
+        }
+
+        this._draw();
+    }
+
+    update (x) {
+        this.currentX = Math.min(Math.max(this.startX, x), this.endX);  
+        this._draw();
+    }
+
+    onMouseUp (e) {
+        e.preventDefault();
+        
+        this.dragging = false;
+        this.hovering = false;
+        
+        if(!this.canvas) {
+            return;
+        }
+
+        const canvas = this.canvas;
+        canvas.style.cursor = "default";
+    }
+
+    onMouseMove (e) {
+
+        e.preventDefault();
+
+        // Process mouse
+        const x = e.target == this.canvas ? e.offsetX : e.offsetX - this.canvas.offsetLeft ;
+        const y = e.target == this.canvas ? e.offsetY : e.offsetY - this.canvas.offsetTop ;
+        const threshold = 5;
+
+        if(this.dragging) {
+            switch(this.dragging) {
+                case 'start':
+                        if(x < this.position.x) {
+                            this.currentX = this.startX = this.position.x;        
+                        }
+                        else if(x > this.endX) {
+                            this.currentX = this.startX = this.endX;        
+                        }
+                        else {
+                            this.currentX = this.startX = x; 
+                        }
+
+                        if(this.onChangeStart) {
+                            this.onChangeStart(this.startX);
+                        }
+                        if(this.onChangeCurrent) {
+                            this.onChangeCurrent(this.currentX);
+                        }
+                    break;
+                case 'end':
+                        if(x > this.width || x <= 0) {
+                            this.currentX = this.endX = this.width;        
+                        }
+                        else if(x < this.startX) {
+                            this.currentX = this.endX = this.startX;        
+                        }
+                        else {
+                            this.currentX = this.endX = x; 
+                        }
+            
+                        if(this.onChangeEnd) {
+                            this.onChangeEnd(this.endX);
+                        }
+                        if(this.onChangeCurrent) {
+                            this.onChangeCurrent(this.currentX);
+                        }
+                    break;
+                case 'current':
+                    
+                    if(x < this.startX) {
+                        this.currentX = this.startX;        
+                    }
+                    else if(x > this.endX) {
+                        this.currentX = this.endX;
+                    }
+                    else {
+                        this.currentX = x;
+                    }
+                    if(this.onChangeCurrent) {
+                        this.onChangeCurrent(this.currentX);
+                    }
+                    break;
+            }
+        }
+        else {
+            if(!this.canvas) {
+                return;
+            }
+    
+            const canvas = this.canvas;
+
+            if(Math.abs(this.startX - x) < threshold && this.trimRec[1] < y &&  y < this.trimRec[3] + this.trimRec[1] ) {
+                this.hovering = 'start';
+                canvas.style.cursor = "grab";
+            }
+            else if(Math.abs(this.endX - x) < threshold) {
+                this.hovering = 'end';
+                canvas.style.cursor = "grab";
+            }
+            else if(Math.abs(this.currentX - x) < threshold) {
+                this.hovering = 'current';
+                canvas.style.cursor = "grab";
+            }
+            else {
+                this.hovering = false;
+                canvas.style.cursor = "default";
+            }
+        }
+        this._draw();
+    }
+
+    resize (size) {
+        this.canvas.width = size[0];
+        this.canvas.height = size[1];
+
+        const startRatio = this.startX / this.width;
+        const currentRatio = this.currentX / this.width;
+        const endRatio = this.endX / this.width;
+        this.width = this.canvas.width - this.offset * 2;
+        
+        this.startX = Math.max(this.width * startRatio, this.offset); 
+        this.currentX = Math.min(Math.max(this.width * currentRatio, this.offset), this.width); 
+        this.endX = Math.min(this.width * endRatio, this.width); 
+        
+        this._draw();
+    }
+}
+
+/**
+ * @class VideoEditor
+ */
+
+class VideoEditor {
+
+    constructor( area, options = {} ) {
+
+        this.playing = false;
+        this.requestId = null;
+
+        this.currentTime = this.startTime = 0;
+        this.startTimeString = "0:0";
+        this.endTimeString = "0:0";
+
+        area.root.classList.add("lexvideoeditor");
+        let [videoArea, controlsArea] = area.split({ type: 'vertical', sizes:["80%", null], minimizable: false, resize: false });
+        controlsArea.root.classList.add('lexconstrolsarea');
+        
+        // Create video element and load it
+        let video = this.video = document.createElement( 'video' );
+        this.video.src = options.src ?? '';
+        this.video.loop = true;
+        this._loadVideo(options);
+        videoArea.attach(video);
+
+        // Create playing timeline area and attach panels
+        let [topArea, bottomArea] = controlsArea.split({ type: 'vertical', sizes:["50%", null], minimizable: false, resize: false });
+        bottomArea.setSize([bottomArea.size[0], 40]);
+        let [leftArea, controlsRight] = bottomArea.split({ type: 'horizontal', sizes:["92%", null], minimizable: false, resize: false });
+        let [controlsLeft, timeBarArea] = leftArea.split({ type: 'horizontal', sizes:["10%", null], minimizable: false, resize: false });
+
+        topArea.root.classList.add('lexbar');
+        bottomArea.root.classList.add('lexbar');
+        this.controlsCurrentPanel = new LX.Panel({className: 'lexcontrolspanel lextime'});  
+        this.controlsCurrentPanel.refresh = () => {
+            this.controlsCurrentPanel.clear();
+            this.controlsCurrentPanel.addLabel(this.currentTimeString, {float: "center"});
+        }
+        topArea.root.classList.add('lexflexarea')
+        topArea.attach(this.controlsCurrentPanel);
+        this.controlsCurrentPanel.refresh();
+
+        const style = getComputedStyle(bottomArea.root);
+        let padding = Number(style.getPropertyValue('padding').replace("px",""));
+        this.timebar = new TimeBar(timeBarArea, TimeBar.TIMEBAR_TRIM, {offset: padding});   
+
+        // Create controls panel (play/pause button and start time)
+        this.controlsPanelLeft = new LX.Panel({className: 'lexcontrolspanel'});        
+        this.controlsPanelLeft.refresh = () => {
+            this.controlsPanelLeft.clear();
+            this.controlsPanelLeft.sameLine();
+            this.controlsPanelLeft.addButton('', '<i class="fa-solid ' + (this.playing ? 'fa-pause' : 'fa-play') + '"></>', (v) => {
+                this.playing = !this.playing;
+                if(this.playing) {
+                    
+                    this.video.play();
+                    if(!this.requestId) {
+                        this.requestId = requestAnimationFrame(this._update.bind(this))
+                    }
+                }
+                else {
+                    if(this.requestId) {
+                        cancelAnimationFrame(this.requestId);
+                        this.requestId = null;
+                    }
+                    this.video.pause();
+                }
+                this.controlsPanelLeft.refresh();
+            }, { width: '40px'});
+            
+            this.controlsPanelLeft.addLabel(this.startTimeString, {width: 50});
+            this.controlsPanelLeft.endLine();
+            
+            let availableWidth = leftArea.root.clientWidth - controlsLeft.root.clientWidth;    
+            this.timebar.resize([availableWidth, timeBarArea.root.clientHeight]);
+        }
+
+        this.controlsPanelLeft.refresh();
+        controlsLeft.root.style.minWidth = 'fit-content';
+        controlsLeft.attach(this.controlsPanelLeft);
+
+        // Create right controls panel (ens time)
+        this.controlsPanelRight = new LX.Panel({className: 'lexcontrolspanel'});        
+        this.controlsPanelRight.refresh = () => {
+            this.controlsPanelRight.clear();            
+            this.controlsPanelRight.addLabel(this.endTimeString, {width: 50});
+        }
+        this.controlsPanelRight.refresh();
+        controlsRight.root.style.minWidth = 'fit-content';
+        controlsRight.attach(this.controlsPanelRight);            
+       
+        this.timebar.onChangeCurrent = this._setCurrentValue.bind(this); 
+        this.timebar.onChangeStart = this._setStartValue.bind(this); 
+        this.timebar.onChangeEnd = this._setEndValue.bind(this); 
+
+        window.addEventListener('resize', (v) => {
+            let availableWidth = leftArea.root.clientWidth - controlsLeft.root.clientWidth;            
+            this.timebar.resize([availableWidth, timeBarArea.root.clientHeight]);
+        })
+
+        timeBarArea.onresize = (v) => {
+            let availableWidth = leftArea.root.clientWidth - controlsLeft.root.clientWidth;
+            this.timebar.resize([availableWidth, v.height]);
+        }
+
+        // Add canvas event listeneres
+        area.root.addEventListener( "mousedown", this.timebar.onMouseDown.bind(this.timebar) );
+        area.root.addEventListener( "mouseup", this.timebar.onMouseUp.bind(this.timebar) );
+        area.root.addEventListener( "mousemove", this.timebar.onMouseMove.bind(this.timebar) );
+    }
+
+    async _loadVideo( ) {
+        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;
+        this.endTime = this.video.duration;                             
+       
+        this._setEndValue(this.timebar.endX);
+        this._setStartValue(this.timebar.startX);
+        this._setCurrentValue(this.timebar.currentX);
+        this.timebar.update(this.timebar.currentX);
+    }
+
+    _update () {
+       
+       if(this.video.currentTime >= this.endTime) {
+            this.video.currentTime = this.startTime;
+        }
+        const x = this._timeToX(this.video.currentTime);
+        this._setCurrentValue(x, false);
+        this.timebar.update(x);
+
+        if(this.playing) {
+            this.requestId = requestAnimationFrame(this._update.bind(this));
+        }
+    }
+
+    _xToTime (x) {
+        return ((x - this.timebar.offset) / (this.timebar.width - this.timebar.offset)) *  this.video.duration;
+    }
+
+    _timeToX (time) {
+        return (time / this.video.duration) *  (this.timebar.width - this.timebar.offset ) + this.timebar.offset;
+    }
+
+    _setCurrentValue ( x, updateTime = true ) {
+        const t = this._xToTime(x);
+
+        if(updateTime) {
+            this.video.currentTime = t;
+        }
+        //console.log( "Computed: " + t)
+        let mzminutes = Math.floor(t / 60);
+        let mzseconds = Math.floor(t - (mzminutes * 60));
+        let mzmiliseconds = Math.floor((t - mzseconds)*100);
+
+        mzmiliseconds = mzmiliseconds < 10 ? ('0' + mzmiliseconds) : mzmiliseconds;
+        mzseconds = mzseconds < 10 ? ('0' + mzseconds) : mzseconds;
+        mzminutes = mzminutes < 10 ? ('0' + mzminutes) : mzminutes;
+        this.currentTimeString = mzminutes+':'+mzseconds+'.'+mzmiliseconds;
+        this.controlsCurrentPanel.refresh();
+
+        if(this.onSetTime) {
+            this.onSetTime(x);
+        }
+    }
+
+    _setStartValue ( x ) {
+        const t = this._xToTime(x);
+        this.startTime = this.video.currentTime = t;
+        
+        let mzminutes = Math.floor(t / 60);
+        let mzseconds = Math.floor(t - (mzminutes * 60));
+        let mzmiliseconds = Math.floor((t - mzseconds)*100);
+        
+        mzmiliseconds = mzmiliseconds < 10 ? ('0' + mzmiliseconds) : mzmiliseconds;
+        mzseconds = mzseconds < 10 ? ('0' + mzseconds) : mzseconds;
+        mzminutes = mzminutes < 10 ? ('0' + mzminutes) : mzminutes;
+        this.startTimeString =  mzminutes+':'+mzseconds+'.'+mzmiliseconds;
+        this.controlsPanelLeft.refresh();
+    }
+
+    _setEndValue ( x ) {
+        const t = this._xToTime(x);
+        this.endTime = this.video.currentTime = t;
+
+        let mzminutes = Math.floor(t / 60);
+        let mzseconds = Math.floor(t - (mzminutes * 60));
+        let mzmiliseconds = Math.floor((t - mzseconds)*100);
+        
+        mzmiliseconds = mzmiliseconds < 10 ? ('0' + mzmiliseconds) : mzmiliseconds;
+        mzseconds = mzseconds < 10 ? ('0' + mzseconds) : mzseconds;
+        mzminutes = mzminutes < 10 ? ('0' + mzminutes) : mzminutes;
+            
+        this.endTimeString =  mzminutes+':'+mzseconds+'.'+mzmiliseconds;
+        this.controlsPanelRight.refresh();
+    }
+
+    getStartTime ( ) {
+        return this.startTime;
+    }
+
+    getEndTime ( ) {
+        return this.endTime;
+    }
+
+    getTrimedTimes ( ) {
+        return {start: this.startTime, end: this.endTime};
+    }
+}
+
+LX.VideoEditor = VideoEditor;
+
+export { VideoEditor }

package/build/lexgui.css

@@ -2489,7 +2489,7 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lextimelinepanel {
-  overflow: hidden;
+  /* overflow: hidden; */
 }
 /* .lextimeline .lexarea, .lextimelinepanel {
   background-color: var(--global-dark-background);
@@ -2513,7 +2513,7 @@ meter::-webkit-meter-even-less-good-value {
 .lextimeline .lexinlinewidgets {
   padding-right: 10px;
   /* background-color: var(--global-color-secondary); */
-  height: 100%;
+  /* height: 100%; */
 }
 
 .lextimeline .lexbutton:hover {
@@ -2546,6 +2546,11 @@ meter::-webkit-meter-even-less-good-value {
   height: unset;
 }
 
+.lextimeline .lexbutton.accept:hover{
+  background-color: var(--global-button-color-hovered);
+}
+
+/**/
 .lexmin {
   display: inline-block;
   color: var(--global-selected-light);
@@ -3639,4 +3644,83 @@ pre .line-gutter {
   font-family: var(--global-title-font);
   font-weight: 600;
   color: var(--global-text);
-}
+}
+
+/* Video Editor */
+
+.lexvideoeditor {
+
+}
+
+.lexvideoeditor video {
+  width: 100%;
+  height: 100%;
+}
+
+.lexvideoeditor .lexarea {
+  /* background-color: var(--global-branch-darker)!important; */
+}
+
+.lexvideoeditor .lexarea .lexflexarea {
+  display: flex;
+  justify-content: center;
+  padding: 4px 0px;
+}
+
+.lexvideoeditor .lexconstrolsarea {
+  /* background-color: var(--global-branch-darker); */
+  /* padding: 5px;
+  margin: 10px; */
+  /* width: calc(100% - 30px)!important; */
+  min-height: 88px!important;
+  border-radius: 8px;
+  display: flex;
+  align-content: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.lexvideoeditor .lexcontrolspanel {
+  background-color: var(--global-branch-darker);
+  margin: 0;
+  display: flex;
+  align-content: center;
+  width: 100%!important;
+}
+
+.lexvideoeditor .lexcontrolspanel.lextime {
+  width: auto!important;
+  border-radius: 5px;
+}
+
+.lexvideoeditor .lextimebar {
+  width: 100%;
+  height: inherit;
+}
+
+.lexvideoeditor .lexwidget.nobranch {
+  padding: 0;
+  width: 100%!important;
+}
+.lexvideoeditor .lextext {
+  padding-left: 0;
+  padding: 6px;
+}
+
+.lexvideoeditor .lexbar {
+  height: 40px!important;
+  margin: 5px 10px;
+  padding: 5px;
+  width: calc(100% - 40px)!important;
+}
+/* .lexvideoeditor .lexvideotimebar {
+  width: calc(100% - 40px);
+  height: 100%;
+  background-color: var(--global-branch-darker);
+} */
+
+/* .lexvideoeditor .lexvideotimebar canvas {
+  width: calc(100%);
+  height: calc(100% );
+  padding: 5px; 
+}  */