UI: b/*.js: add hacky user interface for track mute/solo/volume

Signed-off-by: Stefan Westerfeld <[email protected]>
tim-janik · Sep 23, 2023 · 342000c · 342000c
1 parent 0dc2e50
commit 342000c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/ui/b/numberinput.js b/ui/b/numberinput.js
@@ -38,9 +38,10 @@ b-numberinput {
     flex-grow: 1;
     margin: auto 1em auto 0;
     @include b-style-hrange-input;
-    flex: 1 1 auto;  /* grow beyond minimum width */
-    max-width: 50%;  /* avoid excessive sizes */
-    width: 1.5em;    /* minimum width */
+    // FIXME: track volume
+    //flex: 1 1 auto;  /* grow beyond minimum width */
+    //max-width: 50%;  /* avoid excessive sizes */
+    //width: 1.5em;    /* minimum width */
   }
   input[type='number'] {
     text-align: right;
@@ -50,18 +51,24 @@ b-numberinput {
 }`;
 
 // <HTML/>
-const HTML = t =>
+const HTML = t => [
 html`
 <label class="tabular-nums">
   <input ${ref (h => t.slidertype = h)} type="range"
          tabindex=${CONFIG.slidertabindex} min=${t.min} max=${t.max}
          step=${t.slidersteps()} ?disabled=${t.readonly}
          .value=${t.value} @input=${e => t.emit_input_value (e.target.value)} >
+</label>
+`
+];
+/* FIXME: track-volume
+html`
   <input ${ref (h => t.numbertype = h)} type="number" style=${t.numberstyle()}
          min=${t.min} max=${t.max} step=${t.step} ?readonly=${t.readonly}
          .value=${t.value} @input=${e => t.emit_input_value (e.target.value)} >
 </label>
-`;
+];
+*/
 
 // <SCRIPT/>
 class BNumberInput extends LitComponent {

diff --git a/ui/b/trackview.js b/ui/b/trackview.js
@@ -61,6 +61,10 @@ b-trackview {
   .-track-name {
     display: inline-flex; position: relative; width: 7em; overflow: hidden;
   }
+  .-mute-solo {
+    display: flex;
+    flex-direction: row;
+  }
 }
 b-trackview[current-track] .b-trackview-control {
   background-color: zmod($b-button-border, Jz+=25%);
@@ -76,6 +80,11 @@ const HTML = (t, d) => html`
         selectall @change=${event => t.track.name (event.detail.value.trim())}
         >${t.wtrack_.name}</b-editable>
     </span>
+    <span class="-mute-solo">
+      <b-toggle @valuechange=${event => t.track.mute (event.target.value)} label="M"></b-toggle>
+      <b-toggle @valuechange=${event => t.track.solo (event.target.value)} label="S"></b-toggle>
+      <b-numberinput value=0.5407418735601 @valuechange=${event => t.track.volume (event.target.value)} type="range" min="0" max="1" allowfloat="true"></b-number-input>
+    </span>
     <div class="-lvm-main">
       <div class="-lvm-levelbg" ${ref (h => t.levelbg_ = h)}></div>
       <div class="-lvm-covermid0" ${ref (h => t.covermid0_ = h)}></div>