lexgui 8.2.0 → 8.2.1

package/build/lexgui.all.js

@@ -16,7 +16,7 @@
     exports.LX = g$2.LX;
     if (!exports.LX) {
         exports.LX = {
-            version: '8.2',
+            version: '8.2.1',
             ready: false,
             extensions: [], // Store extensions used
             extraCommandbarEntries: [], // User specific entries for command bar
@@ -7619,14 +7619,14 @@
             if (options.id) {
                 root.id = options.id;
             }
-            root.className = exports.LX.mergeClass('lexbranch w-full rounded-lg my-0 mx-auto', options.className);
+            root.className = exports.LX.mergeClass('lexbranch bg-secondary/50 dark:bg-card text-secondary-foreground dark:text-card-foreground w-full rounded-lg my-0 mx-auto', options.className);
             var that = this;
             this.closed = options.closed ?? false;
             this.root = root;
             this.components = [];
             this.panel = null;
             // Create element
-            const title = exports.LX.makeElement('div', 'lexbranchtitle flex cursor-pointer select-none pad-lg bg-card text-card-foreground text-lg', '', root);
+            const title = exports.LX.makeElement('div', 'lexbranchtitle flex cursor-pointer select-none pad-lg text-lg', '', root);
             if (options.icon) {
                 const branchIcon = exports.LX.makeIcon(options.icon, { iconClass: 'mr-2' });
                 title.appendChild(branchIcon);
@@ -7634,7 +7634,7 @@
             title.innerHTML += name || 'Branch';
             const collapseIcon = exports.LX.makeIcon('Right', { iconClass: 'switch-branch-button', svgClass: 'sm' });
             title.appendChild(collapseIcon);
-            var branchContent = exports.LX.makeElement('div', 'lexbranchcontent pad-xs bg-card', '', root);
+            var branchContent = exports.LX.makeElement('div', 'lexbranchcontent pad-xs', '', root);
             branchContent.id = name.replace(/\s/g, '');
             this.content = branchContent;
             this._addBranchSeparator();
@@ -13443,6 +13443,27 @@
         }
         exports.LX.signals[name].push(obj);
     };
+    /**
+     * @method removeSignal
+     * @param {String} name
+     * @param {Object} targetObj
+     */
+    exports.LX.removeSignal = function (name, targetObj) {
+        const data = exports.LX.signals[name];
+        if (!data) {
+            return;
+        }
+        if (!targetObj) {
+            delete exports.LX.signals[name];
+            return;
+        }
+        for (let i = 0; i < data.length; ++i) {
+            if (data[i] == targetObj) {
+                data.splice(i, 1);
+                break;
+            }
+        }
+    };
     /**
      * @method emitSignal
      * @param {String} name
@@ -14449,9 +14470,8 @@
         _subscribeTreeEvents(tree) {
             // If some of these events we don't have to call "resolve" since the AV itself
             // will update the data and refresh when necessary
-            tree.on("select", (event, resolve) => {
-                if (event.items.length > 1) // Do nothing if multiple selection
-                 {
+            tree.on('select', (event, resolve) => {
+                if (event.items.length > 1) { // Do nothing if multiple selection
                     return;
                 }
                 const node = event.items[0];
@@ -14475,7 +14495,7 @@
                     this.selectedItem = node;
                 }
             });
-            tree.on("beforeMove", (event, resolve) => {
+            tree.on('beforeMove', (event, resolve) => {
                 const onBeforeNodeDragged = this._callbacks['beforeNodeDragged'];
                 const onNodeDragged = this._callbacks['nodeDragged'];
                 const node = event.items[0];
@@ -14517,11 +14537,11 @@
                     av_resolve();
                 }
             });
-            tree.on("beforeDelete", (event, resolve) => {
+            tree.on('beforeDelete', (event, resolve) => {
                 const node = event.items[0];
                 this._requestDeleteItem(node);
             });
-            tree.on("beforeRename", (event, resolve) => {
+            tree.on('beforeRename', (event, resolve) => {
                 const node = event.items[0];
                 this._requestRenameItem(node, event.newName, true);
             });
@@ -16010,11 +16030,11 @@
                     rename: false,
                     skipDefaultIcon: true
                 });
-                this.explorer.on("dblClick", (event) => {
+                this.explorer.on('dblClick', (event) => {
                     const node = event.items[0];
                     this.loadTab(node.id);
                 });
-                this.explorer.on("delete", (event) => {
+                this.explorer.on('delete', (event) => {
                     const node = event.items[0];
                     this.closeTab(node.id);
                 });
@@ -16830,12 +16850,12 @@
                 this.codeArea.root.style.height = `calc(100% - ${this._fullVerticalOffset}px)`;
                 // Process lines on finish computing final sizes
                 this.processLines();
+                this._preparedAt = performance.now();
+                if (this.onReady) {
+                    this.onReady(this);
+                }
+                console.log(`[LX.CodeEditor] Ready! (font size: ${this.fontSize}px)`);
             }, 50);
-            if (this.onReady) {
-                this.onReady(this);
-            }
-            this._preparedAt = performance.now();
-            console.log(`[LX.CodeEditor] Ready! (font size: ${this.fontSize}px)`);
         }
         // Clear signals
         clear() {
@@ -20829,6 +20849,7 @@
             console.log('Copied!');
         }
     }
+    exports.LX.DocMaker = DocMaker;
 
     // GraphEditor.ts @jxarco
     if (!exports.LX) {
@@ -24148,7 +24169,7 @@
                 treeTracks = this.generateSelectedItemsTreeData();
             }
             this.trackTreesComponent = p.addTree(null, treeTracks, { filter: false, rename: false, draggable: false });
-            this.trackTreesComponent.on("select", (event, resolve) => {
+            this.trackTreesComponent.on('select', (event, resolve) => {
                 const node = event.items[0];
                 if (!event.domEvent.shiftKey) {
                     this.deselectAllTracks(false); // no need to update left panel
@@ -24158,7 +24179,7 @@
                     this.setTrackSelection(node.trackData.trackIdx, flag, false, false); // do callback, do not update left panel
                 }
             });
-            this.trackTreesComponent.on("visibleChanged", (event, resolve) => {
+            this.trackTreesComponent.on('visibleChanged', (event, resolve) => {
                 const node = event.items[0];
                 if (node.trackData) {
                     this.setTrackState(node.trackData.trackIdx, node.visible, false, false); // do not update left panel
@@ -27775,17 +27796,22 @@
         duration = 1.0;
         canvas;
         ctx;
+        options;
         markerWidth = 8;
         markerHeight;
         offset;
         lineWidth;
         lineHeight;
-        position;
+        linePosition;
         startX;
         endX;
         currentX;
         hovering;
         dragging;
+        _onMouseUpListener;
+        _onMouseMoveListener;
+        _mouseDownCanvasRect = null;
+        updateTheme;
         onChangeCurrent;
         onChangeStart;
         onChangeEnd;
@@ -27793,46 +27819,65 @@
         onMouse;
         constructor(area, type, options = {}) {
             this.type = type ?? TimeBar.TIMEBAR_PLAY;
+            this.options = options ?? {};
             this.duration = options.duration ?? this.duration;
             // Create canvas
             this.canvas = document.createElement('canvas');
+            this.canvas.style.borderRadius = '6px';
             this.canvas.width = area.size[0];
             this.canvas.height = area.size[1];
             area.attach(this.canvas);
             this.ctx = this.canvas.getContext('2d');
             this.markerWidth = options.markerWidth ?? this.markerWidth;
-            this.markerHeight = options.markerHeight ?? (this.canvas.height * 0.5);
-            this.offset = options.offset || (this.markerWidth * 0.5 + 5);
+            this.markerHeight = (options.markerHeight ?? 0.5) * this.canvas.height;
+            const defaultOffset = this.markerWidth * 0.5 + 5;
+            if (typeof (options.offset) == 'number') {
+                this.offset = new vec2(options.offset, options.offset);
+            }
+            else if (Array.isArray(options.offset)) {
+                this.offset = new vec2(options.offset[0] ?? defaultOffset, options.offset[1] ?? defaultOffset);
+            }
+            else {
+                this.offset = new vec2(defaultOffset, defaultOffset);
+            }
             // dimensions of line (not canvas)
-            this.lineWidth = this.canvas.width - this.offset * 2;
+            this.lineWidth = this.canvas.width - this.offset.x * 2;
             this.lineHeight = options.barHeight ?? 5;
-            this.position = new vec2(this.offset, this.canvas.height * 0.5 - this.lineHeight * 0.5);
-            this.startX = this.position.x;
-            this.endX = this.position.x + this.lineWidth;
+            this.linePosition = new vec2(this.offset.x, this.canvas.height * 0.5 - this.lineHeight * 0.5);
+            this.startX = this.linePosition.x;
+            this.endX = this.linePosition.x + this.lineWidth;
             this.currentX = this.startX;
             this._draw();
+            function updateTheme() {
+                TimeBar.BACKGROUND_COLOR = exports.LX.getCSSVariable('secondary');
+                TimeBar.COLOR = exports.LX.getCSSVariable('accent');
+                TimeBar.ACTIVE_COLOR = exports.LX.getCSSVariable('color-blue-400');
+            }
+            this.updateTheme = updateTheme.bind(this);
+            exports.LX.addSignal('@on_new_color_scheme', this.updateTheme);
             this.updateTheme();
-            exports.LX.addSignal('@on_new_color_scheme', () => {
-                // Retrieve again the color using LX.getCSSVariable, which checks the applied theme
-                this.updateTheme();
-            });
+            // prepare event listeners' functions
+            this._onMouseUpListener = this.onMouseUp.bind(this);
+            this._onMouseMoveListener = this.onMouseMove.bind(this);
             this.canvas.onmousedown = (e) => this.onMouseDown(e);
-            this.canvas.onmousemove = (e) => this.onMouseMove(e);
-            this.canvas.onmouseup = (e) => this.onMouseUp(e);
+            this.canvas.onmousemove = (e) => {
+                if (this.dragging)
+                    return; // already handled by _onMouseMoveListener
+                this.onMouseMove(e);
+            };
         }
-        updateTheme() {
-            TimeBar.BACKGROUND_COLOR = exports.LX.getCSSVariable('secondary');
-            TimeBar.COLOR = exports.LX.getCSSVariable('accent');
-            TimeBar.ACTIVE_COLOR = exports.LX.getCSSVariable('color-blue-400');
+        unbind() {
+            removeEventListener('mousemove', this._onMouseMoveListener);
+            removeEventListener('mouseup', this._onMouseUpListener);
         }
         setDuration(duration) {
             this.duration = duration;
         }
         xToTime(x) {
-            return ((x - this.offset) / (this.lineWidth)) * this.duration;
+            return ((x - this.offset.x) / (this.lineWidth)) * this.duration;
         }
         timeToX(time) {
-            return (time / this.duration) * (this.lineWidth) + this.offset;
+            return (time / this.duration) * (this.lineWidth) + this.offset.x;
         }
         setCurrentTime(time) {
             this.currentX = this.timeToX(time);
@@ -27877,10 +27922,10 @@
             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.lineWidth, this.lineHeight);
+            ctx.fillRect(this.linePosition.x, this.linePosition.y, this.lineWidth, this.lineHeight);
             // Draw background trimed timeline
             ctx.fillStyle = TimeBar.ACTIVE_COLOR;
-            ctx.fillRect(this.startX, this.position.y, this.endX - this.startX, this.lineHeight);
+            ctx.fillRect(this.startX, this.linePosition.y, this.endX - this.startX, this.lineHeight);
             ctx.restore();
             // Min-Max time markers
             this._drawTrimMarker('start', this.startX, { color: null, fillColor: TimeBar.ACTIVE_COLOR || '#5f88c9' });
@@ -27917,9 +27962,9 @@
             ctx.shadowBlur = 0;
         }
         _drawTimeMarker(name, x, options = {}) {
-            let y = this.offset;
+            let y = this.offset.y;
             const w = options.width ? options.width : (this.dragging == name ? 6 : 4);
-            const h = this.canvas.height - this.offset * 2;
+            this.canvas.height - this.offset.y * 2;
             let ctx = this.ctx;
             if (!ctx)
                 return;
@@ -27934,15 +27979,14 @@
             ctx.fillStyle = ctx.strokeStyle = 'white';
             ctx.beginPath();
             ctx.moveTo(x, y);
-            ctx.lineTo(x, y + h * 0.5);
+            ctx.lineTo(x, this.linePosition.y + this.lineHeight * 0.5);
             ctx.stroke();
             ctx.closePath();
             ctx.fillStyle = ctx.strokeStyle = options.fillColor || '#111'; // "#FFF";
-            y -= this.offset + 8;
             // Current time ball grab
             ctx.fillStyle = options.fillColor || '#e5e5e5';
             ctx.beginPath();
-            ctx.roundRect(x - w * 0.5, y + this.offset, w, w, 5);
+            ctx.roundRect(x - w * 0.5, y - w * 0.5, w, w, 5);
             ctx.fill();
             ctx.shadowBlur = 0;
         }
@@ -27964,13 +28008,11 @@
             const y = e.offsetY;
             // Check if some marker is clicked
             const threshold = this.markerWidth;
+            const startDist = Math.abs(this.startX - x);
+            const endDist = Math.abs(this.endX - x);
             // grab trim markers only from the bottom
-            if (Math.abs(this.startX - x) < threshold && this.position.y < y) {
-                this.dragging = 'start';
-                canvas.style.cursor = 'grabbing';
-            }
-            else if (Math.abs(this.endX - x) < threshold && this.position.y < y) {
-                this.dragging = 'end';
+            if ((startDist < threshold || endDist < threshold) && this.linePosition.y < y) {
+                this.dragging = (startDist < endDist || x < this.startX) ? 'start' : 'end';
                 canvas.style.cursor = 'grabbing';
             }
             else {
@@ -27987,9 +28029,14 @@
                 }
                 this.onSetCurrentValue(this.currentX);
             }
+            this._mouseDownCanvasRect = canvas.getBoundingClientRect(); // cache this to avoid stalls during mousemove
+            window.addEventListener('mousemove', this._onMouseMoveListener);
+            window.addEventListener('mouseup', this._onMouseUpListener);
             this._draw();
         }
         onMouseUp(e) {
+            window.removeEventListener('mousemove', this._onMouseMoveListener);
+            window.removeEventListener('mouseup', this._onMouseUpListener);
             if (this.onMouse) {
                 this.onMouse(e);
             }
@@ -28012,17 +28059,17 @@
             e.preventDefault();
             const canvas = this.canvas;
             // Process mouse
-            const x = e.target == canvas ? e.offsetX : e.clientX - canvas.offsetLeft;
-            e.target == canvas ? e.offsetY : e.clientY - canvas.offsetTop;
+            const x = e.target == canvas ? e.offsetX : (e.clientX - this._mouseDownCanvasRect.left);
+            e.target == canvas ? e.offsetY : (e.clientY - this._mouseDownCanvasRect.top);
             if (this.dragging) {
                 switch (this.dragging) {
                     case 'start':
-                        this.startX = Math.max(this.position.x, Math.min(this.endX, x));
+                        this.startX = Math.max(this.linePosition.x, Math.min(this.endX, x));
                         this.currentX = this.startX;
                         this.onSetStartValue(this.startX);
                         break;
                     case 'end':
-                        this.endX = Math.max(this.startX, Math.min(this.position.x + this.lineWidth, x));
+                        this.endX = Math.max(this.startX, Math.min(this.linePosition.x + this.lineWidth, x));
                         this.currentX = this.endX;
                         this.onSetEndValue(this.endX);
                         break;
@@ -28056,15 +28103,18 @@
         resize(size) {
             this.canvas.width = Math.max(0, size[0]);
             this.canvas.height = Math.max(0, size[1]);
-            let newWidth = size[0] - this.offset * 2;
+            this.markerHeight = (this.options.markerHeight ?? 0.5) * this.canvas.height;
+            let newWidth = size[0] - this.offset.x * 2;
             newWidth = newWidth < 0.00001 ? 0.00001 : newWidth; // actual width of the line = canvas.width - offsetleft - offsetRight
-            const startRatio = (this.startX - this.offset) / this.lineWidth;
-            const currentRatio = (this.currentX - this.offset) / this.lineWidth;
-            const endRatio = (this.endX - this.offset) / this.lineWidth;
+            const startRatio = (this.startX - this.offset.x) / this.lineWidth;
+            const currentRatio = (this.currentX - this.offset.x) / this.lineWidth;
+            const endRatio = (this.endX - this.offset.x) / this.lineWidth;
             this.lineWidth = newWidth;
-            this.startX = Math.min(Math.max(newWidth * startRatio, 0), newWidth) + this.offset;
-            this.currentX = Math.min(Math.max(newWidth * currentRatio, 0), newWidth) + this.offset;
-            this.endX = Math.min(Math.max(newWidth * endRatio, 0), newWidth) + this.offset;
+            this.linePosition.x = this.offset.x;
+            this.linePosition.y = this.canvas.height * 0.5 - this.lineHeight * 0.5;
+            this.startX = Math.min(Math.max(newWidth * startRatio, 0), newWidth) + this.offset.x;
+            this.currentX = Math.min(Math.max(newWidth * currentRatio, 0), newWidth) + this.offset.x;
+            this.endX = Math.min(Math.max(newWidth * endRatio, 0), newWidth) + this.offset.x;
             this._draw();
         }
     }
@@ -28085,10 +28135,7 @@
         playing = false;
         videoReady = false;
         controls = true;
-        startTimeString = '0:0';
-        endTimeString = '0:0';
         speed = 1.0;
-        currentTime = 0.0;
         startTime = 0.0;
         endTime = 0.0;
         requestId;
@@ -28099,27 +28146,29 @@
         crop = false;
         dragOffsetX = 0.0;
         dragOffsetY = 0.0;
-        currentTimeString = '';
-        timebar;
+        timebar = null;
         mainArea;
         cropArea; // HTMLElement with normCoord attribute;
+        videoArea;
         controlsArea;
-        controlsPanelLeft;
-        controlsPanelRight;
-        controlsCurrentPanel;
+        controlsComponents;
         onChangeCurrent;
         onChangeStart;
         onChangeEnd;
         onKeyUp;
         onSetTime;
         onVideoLoaded;
-        onCropArea;
         onResize;
+        onCropArea;
         onChangeSpeed;
+        onChangeState;
+        onChangeLoop;
         _updateTime = true;
         _onCropMouseUp;
         _onCropMouseMove;
-        resize;
+        resize = null;
+        resizeControls = null;
+        resizeVideo = null;
         constructor(area, options = {}) {
             this.options = options ?? {};
             this.speed = options.speed ?? this.speed;
@@ -28162,120 +28211,42 @@
                 videoArea.root.classList.add('lexvideoeditor');
             }
             videoArea.root.style.position = 'relative';
+            this.videoArea = videoArea;
             this.controlsArea = controlsArea;
-            // 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 exports.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 exports.LX.Panel({ className: 'lexcontrolspanel' });
-            this.controlsPanelLeft.refresh = () => {
-                this.controlsPanelLeft.clear();
-                this.controlsPanelLeft.sameLine();
-                let playbtn = this.controlsPanelLeft.addButton(null, 'PlayButton', (v) => {
-                    this.playing = v;
-                    if (this.playing) {
-                        if (this.video.currentTime + 0.000001 >= this.endTime) {
-                            this.video.currentTime = this.startTime;
-                        }
-                        this.video.play();
-                    }
-                    else {
-                        this.video.pause();
-                    }
-                }, { icon: 'Play@solid', swap: 'Pause@solid', hideName: true, title: 'Play', tooltip: true, className: 'justify-center' });
-                playbtn.setState(this.playing, true);
-                this.controlsPanelLeft.addButton(null, '', (v, e) => {
-                    const panel = new exports.LX.Panel();
-                    panel.addRange('Speed', this.speed, (v) => {
-                        this.speed = v;
-                        this.video.playbackRate = v;
-                        if (this.onChangeSpeed) {
-                            this.onChangeSpeed(v);
-                        }
-                    }, { min: 0, max: 2.5, step: 0.01, hideName: true });
-                    new exports.LX.Popover(e.target, [panel], { align: 'start', side: 'top', sideOffset: 12 });
-                }, { icon: 'Timer@solid', title: 'Speed', tooltip: true, className: 'justify-center' });
-                this.controlsPanelLeft.addButton(null, 'Loop', (v) => {
-                    this.loop = v;
-                }, { title: 'Loop', tooltip: true, icon: ('Repeat@solid'), className: `justify-center`, selectable: true, selected: this.loop });
-                this.controlsPanelLeft.addLabel(this.startTimeString, { width: '100px' });
-                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.root.classList.add();
-            controlsLeft.attach(this.controlsPanelLeft);
-            // Create right controls panel (ens time)
-            this.controlsPanelRight = new exports.LX.Panel({ className: 'lexcontrolspanel' });
-            this.controlsPanelRight.refresh = () => {
-                this.controlsPanelRight.clear();
-                this.controlsPanelRight.addLabel(this.endTimeString, { width: 100 });
+            this.controlsComponents = {
+                timebar: null,
+                playBtn: null,
+                speedBtn: null,
+                loopBtn: null,
+                trimStartText: null,
+                trimEndText: null,
+                curTimeText: null,
+                resetCropBtn: null
             };
-            this.controlsPanelRight.refresh();
-            controlsRight.root.style.minWidth = 'fit-content';
-            controlsRight.attach(this.controlsPanelRight);
-            this.timebar.onChangeCurrent = this._setCurrentTime.bind(this);
-            this.timebar.onChangeStart = this._setStartTime.bind(this);
-            this.timebar.onChangeEnd = this._setEndTime.bind(this);
-            this.resize = () => {
-                bottomArea.setSize([this.controlsArea.root.clientWidth, 40]);
-                let availableWidth = this.controlsArea.root.clientWidth - controlsLeft.root.clientWidth
-                    - controlsRight.root.clientWidth;
-                this.timebar.resize([availableWidth, timeBarArea.root.clientHeight]);
+            this.createControls();
+            this.resizeVideo = () => {
                 this.moveCropArea(this.cropArea.normCoords.x, this.cropArea.normCoords.y, true);
                 this.resizeCropArea(this.cropArea.normCoords.w, this.cropArea.normCoords.h, true);
                 if (this.onResize) {
                     this.onResize([videoArea.root.clientWidth, videoArea.root.clientHeight]);
                 }
             };
+            this.resize = () => {
+                this.resizeVideo();
+                this.resizeControls();
+            };
             area.onresize = this.resize.bind(this);
             window.addEventListener('resize', area.onresize);
             this.onKeyUp = (e) => {
                 if (this.controls && e.key == ' ') {
                     e.preventDefault();
                     e.stopPropagation();
-                    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.controlsPanelLeft.refresh();
+                    // do not skip callback
+                    this.controlsComponents.playBtn?.setState(!this.playing, false);
                 }
             };
             window.addEventListener('keyup', this.onKeyUp);
-            const parent = controlsArea.parentElement ? controlsArea.parentElement : controlsArea.root.parentElement;
-            // Add canvas event listeneres
-            parent.addEventListener('mousedown', (e) => {
-                // if( this.controls) {
-                //     this.timebar.onMouseDown(e);
-                // }
-            });
             this._onCropMouseUp = (event) => {
-                // if(this.controls) {
-                //     this.timebar.onMouseUp(event);
-                // }
                 event.preventDefault();
                 event.stopPropagation();
                 if ((this.isDragging || this.isResizing) && this.onCropArea) {
@@ -28287,9 +28258,6 @@
                 document.removeEventListener('mousemove', this._onCropMouseMove); // self destroy. Added during mouseDown on cropArea and handles
             };
             this._onCropMouseMove = (event) => {
-                // if(this.controls) {
-                //     this.timebar.onMouseMove(event);
-                // }
                 window.getSelection()?.removeAllRanges();
                 event.preventDefault();
                 event.stopPropagation();
@@ -28350,6 +28318,182 @@
             this.onChangeStart = null;
             this.onChangeEnd = null;
         }
+        createControls(options = null) {
+            const controlsArea = this.controlsArea;
+            options = options ?? this.options;
+            // clear area. Signals are not cleared !!! (not a problem if there are no signals)
+            while (controlsArea.root.children.length) {
+                controlsArea.root.children[0].remove();
+            }
+            controlsArea.sections.length = 0;
+            // start trimming text
+            this.controlsComponents.trimStartText = new exports.LX.TextInput(null, this.timeToString(this.startTime), null, { width: '100px',
+                title: 'Trimmed Start Time', disabled: true, inputClass: 'bg-none' });
+            this.controlsComponents.trimEndText = new exports.LX.TextInput(null, this.timeToString(this.endTime), null, { width: '100px',
+                title: 'Trimmed End Time', disabled: true, inputClass: 'bg-none' });
+            this.controlsComponents.curTimeText = new exports.LX.TextInput(null, this.video.currentTime, null, { title: 'Current Time', float: 'center',
+                disabled: true, inputClass: 'bg-none' });
+            // reset crop area
+            this.controlsComponents.resetCropBtn = new exports.LX.Button('ResetCrop', null, (v) => {
+                this.moveCropArea(0, 0, true);
+                this.resizeCropArea(1, 1, true);
+                if (this.onCropArea) {
+                    this.onCropArea(this.getCroppedArea());
+                }
+            }, { width: '40px', title: 'Reset Crop Area', icon: 'Crop@solid', hideName: true,
+                className: 'justify-center' + (this.crop ? '' : ' hidden') });
+            // play button
+            this.controlsComponents.playBtn = new exports.LX.Button('Play', '', (v) => {
+                this.playing = v;
+                if (this.playing) {
+                    if (this.video.currentTime + 0.000001 >= this.endTime) {
+                        this.video.currentTime = this.startTime;
+                    }
+                    this.video.play();
+                }
+                else {
+                    this.video.pause();
+                }
+                if (this.onChangeState) {
+                    this.onChangeState(v);
+                }
+            }, { width: '40px', title: 'Play/Pause', icon: 'Play@solid', swap: 'Pause@solid', hideName: true, className: 'justify-center' });
+            this.controlsComponents.playBtn.setState(this.playing, true);
+            // speed button
+            this.controlsComponents.speedBtn = new exports.LX.Button('Speed', '', (v, e) => {
+                const panel = new exports.LX.Panel();
+                panel.addRange('Speed', this.speed, (v) => {
+                    this.speed = v;
+                    this.video.playbackRate = v;
+                    if (this.onChangeSpeed) {
+                        this.onChangeSpeed(v);
+                    }
+                }, { min: 0, max: 2.5, step: 0.01, hideName: true });
+                new exports.LX.Popover(e.target, [panel], { align: 'start', side: 'top', sideOffset: 12 });
+            }, { width: '40px', title: 'Speed', hideName: true, icon: 'Timer@solid', className: 'justify-center' });
+            // loop button
+            this.controlsComponents.loopBtn = new exports.LX.Button('', 'Loop', (v) => {
+                this.loop = v;
+                if (this.onChangeLoop) {
+                    this.onChangeLoop(v);
+                }
+            }, { width: '40px', hideName: true, title: 'Loop', icon: 'Repeat@solid', className: `justify-center`, selectable: true,
+                selected: this.loop });
+            let timeBarArea = null;
+            if (typeof (options.controlsLayout) == 'function') {
+                timeBarArea = options.controlsLayout;
+            }
+            else if (options.controlsLayout == 1) {
+                timeBarArea = this._createControlsLayout_1();
+            }
+            else {
+                timeBarArea = this._createControlsLayout_0();
+            }
+            if (this.timebar) {
+                this.timebar.unbind();
+            }
+            this.timebar = this.controlsComponents.timebar = new TimeBar(timeBarArea, TimeBar.TIMEBAR_TRIM, { offset: [12, null] });
+            this.timebar.onChangeCurrent = this._setCurrentTime.bind(this);
+            this.timebar.onChangeStart = this._setStartTime.bind(this);
+            this.timebar.onChangeEnd = this._setEndTime.bind(this);
+            let duration = 1;
+            if (this.video.duration !== Infinity && !isNaN(this.video.duration)) {
+                duration = this.video.duration;
+            }
+            this.timebar.setDuration(duration);
+            this.timebar.setEndTime(this.endTime);
+            this.timebar.setStartTime(this.startTime);
+            this.timebar.setCurrentTime(this.startTime);
+            this.resizeControls();
+        }
+        /**
+         * Creates the areas where components will be.
+         * Attaches all (desired) components of controlsComponents except the timebar
+         * @returns {Area} for the timebar
+         * Layout:
+         * |--------------------------timebar--------------------------|
+         * play speed loop resetCrop     curTime     trimStart / trimEnd
+         */
+        _createControlsLayout_1() {
+            const controlsArea = this.controlsArea;
+            // Create playing timeline area and attach panels
+            let [timeBarArea, bottomArea] = controlsArea.split({ type: 'vertical', sizes: ['50%', null], minimizable: false, resize: false });
+            bottomArea.root.classList.add('relative');
+            let separator = document.createElement('p');
+            separator.style.alignContent = 'center';
+            separator.innerText = '/';
+            let trimDiv = exports.LX.makeContainer(['fit-content', '100%'], 'relative flex flex-row pb-2', null, bottomArea, { float: 'right' });
+            trimDiv.appendChild(this.controlsComponents.trimStartText.root);
+            trimDiv.appendChild(separator);
+            trimDiv.appendChild(this.controlsComponents.trimEndText.root);
+            this.controlsComponents.trimStartText.root.querySelector('input').classList.add('text-end');
+            this.controlsComponents.trimStartText.root.classList.add('top-0', 'bottom-0');
+            this.controlsComponents.trimEndText.root.classList.add('top-0', 'bottom-0');
+            // current time
+            let curTimeDiv = exports.LX.makeContainer(['100%', '100%'], 'absolute top-0 left-0 flex flex-row justify-center items-center pb-2', null, bottomArea, {});
+            curTimeDiv.appendChild(this.controlsComponents.curTimeText.root);
+            // Buttons
+            const buttonsPanel = bottomArea.addPanel({ className: 'absolute top-0 left-0 flex flex-row pl-4 pr-4 pt-1 pb-2' });
+            buttonsPanel.root.classList.remove('pad-md');
+            buttonsPanel._attachComponent(this.controlsComponents.playBtn);
+            buttonsPanel._attachComponent(this.controlsComponents.speedBtn);
+            buttonsPanel._attachComponent(this.controlsComponents.loopBtn);
+            buttonsPanel._attachComponent(this.controlsComponents.resetCropBtn);
+            this.controlsComponents.playBtn.root.classList.add('pl-0');
+            this.controlsComponents.resetCropBtn.root.classList.add('pr-0');
+            // timebar
+            timeBarArea.root.classList.add('p-4', 'pb-0');
+            this.resizeControls = () => {
+                const style = getComputedStyle(timeBarArea.root);
+                let pleft = parseFloat(style.paddingLeft);
+                let pright = parseFloat(style.paddingRight);
+                let ptop = parseFloat(style.paddingTop);
+                let pbot = parseFloat(style.paddingBottom);
+                // assuming timeBarArea will not overflow
+                this.timebar.resize([timeBarArea.root.clientWidth - pleft - pright, timeBarArea.root.clientHeight - ptop - pbot]);
+            };
+            return timeBarArea;
+        }
+        /**
+         * Creates the areas where components will be.
+         * Attaches all (desired) components of controlsComponents except the timebar
+         * @returns {Area} for the timebar
+         * Layout:
+         *                              curTime
+         * play speed loop trimStart |---timebar---| trimend
+         */
+        _createControlsLayout_0() {
+            const controlsArea = this.controlsArea;
+            // 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 });
+            const controlsCurrentPanel = topArea.addPanel({ className: 'flex' });
+            controlsCurrentPanel._attachComponent(this.controlsComponents.curTimeText);
+            // Create controls panel (play/pause button and start time)
+            controlsLeft.root.classList.add('min-w-fit');
+            const controlsPanelLeft = controlsLeft.addPanel({ className: 'lexcontrolspanel p-0 pl-2' });
+            controlsPanelLeft.root.classList.remove('pad-md');
+            controlsPanelLeft.sameLine();
+            controlsPanelLeft._attachComponent(this.controlsComponents.playBtn);
+            controlsPanelLeft._attachComponent(this.controlsComponents.speedBtn);
+            controlsPanelLeft._attachComponent(this.controlsComponents.loopBtn);
+            controlsPanelLeft._attachComponent(this.controlsComponents.trimStartText);
+            controlsPanelLeft.endLine();
+            // Create right controls panel (end time)
+            controlsRight.root.classList.add('min-w-fit');
+            const controlsPanelRight = controlsRight.addPanel({ className: 'lexcontrolspanel p-0' });
+            controlsPanelRight.root.classList.remove('pad-md');
+            controlsPanelRight._attachComponent(this.controlsComponents.trimEndText);
+            this.resizeControls = () => {
+                bottomArea.setSize([this.controlsArea.root.clientWidth, 40]);
+                let availableWidth = this.controlsArea.root.clientWidth - controlsLeft.root.clientWidth
+                    - controlsRight.root.clientWidth;
+                this.timebar.resize([availableWidth, timeBarArea.root.clientHeight]);
+            };
+            return timeBarArea;
+        }
         setCropAreaHandles(flags) {
             // remove existing resizer handles
             const resizers = this.cropArea.getElementsByClassName('resize-handle');
@@ -28478,18 +28622,12 @@
                 this.video.currentTime = this.startTime;
                 this.timebar.setCurrentTime(this.video.currentTime);
             };
-            this.timebar.startX = this.timebar.position.x;
-            this.timebar.endX = this.timebar.position.x + this.timebar.lineWidth;
             this.startTime = 0;
             this.endTime = this.video.duration;
             this.timebar.setDuration(this.endTime);
             this.timebar.setEndTime(this.video.duration);
             this.timebar.setStartTime(this.startTime);
             this.timebar.setCurrentTime(this.startTime);
-            // this.timebar.setStartValue( this.timebar.startX);
-            // this.timebar.currentX = this._timeToX( this.video.currentTime);
-            // this.timebar.setCurrentValue( this.timebar.currentX);
-            // this.timebar.update( this.timebar.currentX );
             // only have one update on flight
             if (!this.requestId) {
                 this._update();
@@ -28522,7 +28660,7 @@
                     this.video.pause();
                     if (!this.loop) {
                         this.playing = false;
-                        this.controlsPanelLeft.refresh();
+                        this.controlsComponents.playBtn?.setState(false, true); // skip callback
                     }
                     else {
                         this.video.currentTime = this.startTime;
@@ -28548,8 +28686,7 @@
             if (this.video.currentTime != t && this._updateTime) {
                 this.video.currentTime = t;
             }
-            this.currentTimeString = this.timeToString(t);
-            this.controlsCurrentPanel.refresh();
+            this.controlsComponents.curTimeText?.set(this.timeToString(t));
             if (this.onSetTime) {
                 this.onSetTime(t);
             }
@@ -28559,8 +28696,7 @@
         }
         _setStartTime(t) {
             this.startTime = this.video.currentTime = t;
-            this.startTimeString = this.timeToString(t);
-            this.controlsPanelLeft.refresh();
+            this.controlsComponents.trimStartText?.set(this.timeToString(t));
             if (this.onSetTime) {
                 this.onSetTime(t);
             }
@@ -28570,8 +28706,7 @@
         }
         _setEndTime(t) {
             this.endTime = this.video.currentTime = t;
-            this.endTimeString = this.timeToString(t);
-            this.controlsPanelRight.refresh();
+            this.controlsComponents.trimEndText?.set(this.timeToString(t));
             if (this.onSetTime) {
                 this.onSetTime(t);
             }
@@ -28592,7 +28727,9 @@
             return this.cropArea.getBoundingClientRect();
         }
         showCropArea() {
+            this.crop = true;
             this.cropArea.classList.remove('hidden');
+            this.controlsComponents.resetCropBtn?.root.classList.remove('hidden');
             const nodes = this.cropArea.parentElement?.childNodes ?? [];
             const rect = this.cropArea.getBoundingClientRect();
             for (let i = 0; i < nodes.length; i++) {
@@ -28605,7 +28742,9 @@
             }
         }
         hideCropArea() {
+            this.crop = false;
             this.cropArea.classList.add('hidden');
+            this.controlsComponents.resetCropBtn?.root.classList.add('hidden');
             const nodes = this.cropArea.parentElement?.childNodes ?? [];
             for (let i = 0; i < nodes.length; i++) {
                 const node = nodes[i];
@@ -28633,8 +28772,11 @@
             this.stopUpdates();
             this.video.pause();
             this.playing = false;
-            this.controlsPanelLeft.refresh();
+            this.controlsComponents.playBtn?.setState(false, true); // skip callback
             this.video.src = '';
+            if (this.timebar) {
+                this.timebar.unbind();
+            }
             window.removeEventListener('keyup', this.onKeyUp);
             document.removeEventListener('mouseup', this._onCropMouseUp);
             document.removeEventListener('mousemove', this._onCropMouseMove);