Implement auto update Fader source button

jmkao · Dec 17, 2020 · ee79080 · ee79080
1 parent 827e13c
commit ee79080
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/src/components/Fader.vue b/src/components/Fader.vue
@@ -3,7 +3,7 @@
     <div class="row">
       <div class="col-auto fader">
         <q-select v-model="selectedSource" :options="sources" option-label="name" option-value="name"
-            @input="sourceChanged"
+            @input="sourceChanged" :bg-color="labelBgColor"
             map-options emit-value dark dense borderless hide-bottom-space
           />
       </div>
@@ -53,7 +53,8 @@ export default {
       selectedSource: '',
       obsUpdateInProgress: false,
       localUpdateInProgress: false,
-      localUpdateTimeout: null
+      localUpdateTimeout: null,
+      labelBgColor: 'none'
     }
   },
   created: function () {
@@ -141,11 +142,12 @@ export default {
         }
       }
     },
-    sourceChanged (newSource) {
+    sourceChanged () {
       if (this.selectedSource === '') {
         return
       }
-      this.isMidiLocked = false;
+      this.isMidiLocked = false
+      this.labelBgColor = 'none';
 
       (async () => {
         var data = await (this.obs.send('GetVolume', { source: this.selectedSource, useDecibel: false }))

diff --git a/src/components/FaderPanel.vue b/src/components/FaderPanel.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="q-pa-sm full-width">
     <div class="row">
-        <Fader v-for="(n, i) in 4" :key="i" :index="i" :obs="obs" :sources="sources" ref="faders"/>
+      <div class="col-auto">
+        <q-btn icon="insights" size="s" color="red" padding="none" @click="autoUpdateFaders"/>
+      </div>
+      <Fader v-for="(n, i) in 4" :key="i" :index="i" :obs="obs" :sources="sources" ref="faders"/>
     </div>
   </div>
 </template>
@@ -41,6 +44,30 @@ export default {
     }
   },
   methods: {
+    autoUpdateFaders () {
+      let anchorSourceIndex = -1
+      let anchorNextIndex = -1
+      for (let iter = 0; iter < 2; iter++) {
+        this.$refs.faders.forEach((fader, i) => {
+          if (fader.value === 0) {
+            if (anchorNextIndex > -1 && anchorNextIndex < this.sources.length) {
+              fader.selectedSource = this.sources[anchorNextIndex].name
+              fader.sourceChanged()
+              anchorNextIndex++
+            }
+          } else {
+            // Fader is set to non-zero value, so it's an anchor
+            anchorSourceIndex = this.sources.findIndex(source => source.name === fader.selectedSource)
+            if (anchorSourceIndex > -1) {
+              anchorNextIndex = anchorSourceIndex + 1
+              if (i > 0) {
+                fader.labelBgColor = 'red'
+              }
+            }
+          }
+        })
+      }
+    },
     obsVolumeChanged (data) {
       this.$refs.faders.forEach(fader => {
         fader.obsVolumeChanged(data)