lexgui 0.1.36 → 0.1.39

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 {
@@ -1282,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;
@@ -1339,6 +1351,40 @@ input[type="range"] {
   right: 0.8em;
 }
 
+.lexwidget .lexunit {
+  -webkit-user-select: none; /* Safari 3.1+ */
+  -moz-user-select: none; /* Firefox 2+ */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none; /* Standard syntax */
+}
+
+/* Size Widget */
+
+.lexwidget .lexsizecross {
+  color: var(--global-selected);
+  font-weight: 800;
+}
+
+/* Pad Widget */
+
+.lexwidget .lexpad {
+  place-items: center;
+}
+
+.lexwidget .lexpad .lexinnerpad {
+  border-radius: 4px;
+  background-color: var(--global-dark-background);
+}
+
+.lexwidget .lexpad .lexinnerpad .lexpadthumb {
+  background-color: var(--global-selected-light);
+  width: 10%;
+  height: 10%;
+  border-radius: 2px;
+  transform: translate(0px, 0px);
+}
+
+
 /* Tabs Widget */
 
 .lextabscontainer {
@@ -2090,7 +2136,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;
@@ -2146,7 +2192,6 @@ meter::-webkit-meter-even-less-good-value {
   background: none;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
-  aspect-ratio: 1;
 }
 
 .lexoverlaybuttons.vertical .lexoverlaygroup {
@@ -2502,6 +2547,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 {