lexgui 0.1.35 → 0.1.37

package/build/components/videoeditor.js

@@ -491,6 +491,7 @@ class VideoEditor {
             await new Promise(r => setTimeout(r, 1000));
             this.video.currentTime = 10000000 * Math.random();
         }
+        this.video.currentTime = -1; // BUG: some videos will not play unless this line is present 
         this.video.currentTime = 0;
         this.endTime = this.video.duration;
         this.timebar.currentX = this._timeToX(0);
@@ -498,7 +499,10 @@ class VideoEditor {
         this._setStartValue(this.timebar.startX);
         this._setCurrentValue(this.timebar.currentX);
         this.timebar.update(this.timebar.currentX);
-        this._update();
+        
+        if ( !this.requestId ){ // only have one update on flight
+            this._update();
+        } 
         this.controls = options.controls ?? true;
         if(!this.controls) {
             this.hideControls();
@@ -615,12 +619,16 @@ class VideoEditor {
         this.controlsArea.hide();
     }
 
-    delete ( ) {
+    stopUpdates(){
+
         if(this.requestId) {
             cancelAnimationFrame(this.requestId);
             this.requestId = null;
         }
+    }
 
+    delete ( ) {
+        this.stopUpdates();
         delete this;
     }
 }

package/build/lexgui.css

@@ -776,6 +776,7 @@ body.noevents * {
   margin-top: 0.3em;
   margin-right: 0.7em;
   color: var(--global-selected-light);
+  font-size: 11px;
 }
 
 .lextitle.link {
@@ -934,6 +935,10 @@ body.noevents * {
   padding: 2px 3px;
 }
 
+.lexdropdown .lexfilter a {
+  transform: translateX(-10px);
+}
+
 .lexdropdown .lexoptions .lexlistitem {
   font-size: 11px;
 }
@@ -960,7 +965,8 @@ body.noevents * {
 	background-color: var(--global-blur-background);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
-  padding: 4px 0px;
+  padding: 0px;
+  transform: translateY(-4px);
   z-index: 10;
   margin-top: 5px;
   width: 100%;
@@ -1277,6 +1283,17 @@ input[type=number] {
   border: 2px solid var(--global-selected);
 }
 
+.lexwidget .numberbox span {
+  position: absolute;
+  top: -2px;
+  pointer-events: none;
+}
+
+.lexinputmeasure {
+  font-family: var(--global-font);
+  font-size: var(--global-font-size);
+}
+
 .lexinputslider {
   appearance: none;
   -moz-appearance: none;
@@ -1662,7 +1679,7 @@ meter::-webkit-meter-even-less-good-value {
 
 .lexcontextmenu {
   position: absolute;
-  padding-right: 14px;
+  padding-right: 8px;
   z-index: 1001;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.63) !important;
   background-color: var(--global-blur-background);
@@ -1692,7 +1709,7 @@ meter::-webkit-meter-even-less-good-value {
   width: 100%;
   color: #d5d7dbee;
   padding: 4px;
-  padding-left: 14px;
+  padding-left: 8px;
   padding-right: 0px;
   padding-bottom: 6px;
   cursor: pointer;
@@ -1782,12 +1799,9 @@ meter::-webkit-meter-even-less-good-value {
   float: right;
   margin-top: 3px;
   font-weight: bold;
-  color: var(--global-button-color);
+  color: var(--global-text-primary);
   margin-right: 12px;
-}
-
-.lexcontextmenu .lexcontextmenuentry:hover .lexentryshort {
-  color: #f5f5f5;
+  text-align: right;
 }
 
 .lexmenubar .lexmenubuttons {
@@ -2088,7 +2102,7 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lexoverlaybuttons .lexbutton {
-  padding: 18px 12px;
+  padding: 16px 12px;
   font-size: var(--global-font-size-big);
   border-radius: 10px;
   justify-content: center;
@@ -2499,6 +2513,76 @@ meter::-webkit-meter-even-less-good-value {
   width: 95%;
 }
 
+/* Knob Widget */
+
+.lexknob {
+  padding: 8px;
+}
+
+.lexknob .knobcircle {
+  background: rgb(62,62,62);
+  background: linear-gradient(180deg, rgba(82,82,82,1) 0%, rgba(40,40,40,1) 100%);
+  width: 64px;
+  height: 64px;
+  margin: 0 auto;
+  border-radius: 50%;
+  position: relative;
+  box-shadow: 0px 3px 9px 2px #121212a9;
+}
+
+.lexknob.sm .knobcircle {
+  width: 48px;
+  height: 48px;
+}
+
+.lexknob.bg .knobcircle {
+  width: 81px;
+  height: 81px;
+}
+
+.lexknob .innerknobcircle {
+  background-color:rgba(62,62,62,1);
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+
+.lexknob.sm .innerknobcircle {
+  width: 39px;
+  height: 39px;
+}
+
+.lexknob.bg .innerknobcircle {
+  width: 73px;
+  height: 73px;
+}
+
+.lexknob .knobmarker {
+  background-color: var(--global-selected);
+  filter: brightness(1.5);
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin: 0 auto;
+  margin-top: 6px;
+}
+
+.lexknob.sm .knobmarker {
+  width: 5px;
+  height: 5px;
+}
+
+.lexknob.bg .knobmarker {
+  width: 7px;
+  height: 7px;
+  margin-top: 8px;
+}
+
 /** Timeline */
 
 .lextimeline {