Faders load value from source when selected and stay synced

jmkao · Dec 11, 2020 · 2f78b91 · 2f78b91
1 parent d4981f8
commit 2f78b91
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 11 deletions.
diff --git a/src/components/Fader.vue b/src/components/Fader.vue
@@ -1,15 +1,16 @@
 <template>
   <div class="col fader">
     <div class="row">
-      <div class="col-4 fader">
+      <div class="col-auto fader">
         <q-select v-model="selectedSource" :options="sources" option-label="name" option-value="name"
+            @input="sourceChanged"
             map-options emit-value dark dense borderless hide-bottom-space
           />
       </div>
       <div class="col fader">
         <q-slider
             v-model="value" color="red"
-            :min="0" :max="127" :label-value="calcDB(value).toFixed(1)"
+            :min="0" :max="127" :label-value="sevenbitToDB(value).toFixed(1)"
             label dark
           />
       </div>
@@ -38,7 +39,8 @@ export default {
   data () {
     return {
       value: 0,
-      selectedSource: ''
+      selectedSource: '',
+      obsUpdateInProgress: false
     }
   },
   created: function () {
@@ -48,12 +50,12 @@ export default {
     this.$root.$off('midiFader' + this.index)
   },
   watch: {
-    value: function (value) {
-      if (!this.selectedSource || this.selectedSource.length === 0 || this.selectedSource === '') {
+    value: function (newValue, oldValue) {
+      if (newValue === oldValue || this.obsUpdateInProgress) {
+        this.obsUpdateInProgress = false
         return
       }
-      const dB = this.calcDB(value)
-      this.obs.send('SetVolume', { source: this.selectedSource, volume: dB, useDecibel: true })
+      this.sendValueToObs(newValue)
     }
   },
   computed: {
@@ -62,16 +64,57 @@ export default {
     }
   },
   methods: {
-    calcDB (sevenbit) {
-      let dB = (sevenbit - 127) / 2.1167
+    sevenbitToDB (sevenbit) {
+      let dB = (sevenbit - 127) / 2.11666
       if (sevenbit === 0) {
         dB = -100.0
       }
       return dB
     },
+    dbToMul (db) {
+      return Math.pow(10, db / 20.0)
+    },
+    mulToDB (mul) {
+      return 20 * Math.log10(mul)
+    },
+    dbToSevenbit (db) {
+      if (db < -60) {
+        db = -60
+      }
+      return Math.round(db * 2.11666) + 127
+    },
+    sendValueToObs (value) {
+      if (!this.selectedSource || this.selectedSource.length === 0 || this.selectedSource === '') {
+        return
+      }
+      const dB = this.sevenbitToDB(value)
+      this.obs.send('SetVolume', { source: this.selectedSource, volume: this.dbToMul(dB), useDecibel: false })
+    },
     onMidiEvent (data) {
       // console.log(data)
       this.value = data.value
+    },
+    obsVolumeChanged (data) {
+      if (data.sourceName === this.selectedSource) {
+        const mul = data.volume
+        const db = this.mulToDB(mul)
+        const value = this.dbToSevenbit(db)
+
+        console.log(`OBS volume for ${this.selectedSource} changed to ${mul}, ${db}, ${value}`)
+        if (value !== this.value) {
+          this.obsUpdateInProgress = true
+          this.value = value
+        }
+      }
+    },
+    sourceChanged (newSource) {
+      if (this.selectedSource === '') {
+        return
+      }
+      (async () => {
+        var data = await (this.obs.send('GetVolume', { source: this.selectedSource, useDecibel: false }))
+        this.obsVolumeChanged({ sourceName: data.name, volume: data.volume })
+      })()
     }
   }
 }

diff --git a/src/components/FaderPanel.vue b/src/components/FaderPanel.vue
@@ -24,7 +24,8 @@ export default {
   components: { Fader },
   props: {
     obs: Object,
-    sources: Array
+    sources: Array,
+    obsIsConnected: Boolean
   },
   data () {
     return {
@@ -40,6 +41,11 @@ export default {
     }
   },
   methods: {
+    obsVolumeChanged (data) {
+      this.$refs.faders.forEach(fader => {
+        fader.obsVolumeChanged(data)
+      })
+    },
     updateFaderValue (index, value) {
       if (index < 0 || index >= this.$refs.faders.length) {
         return

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -20,7 +20,7 @@
         </div>
       </q-toolbar>
       <div class="row flex-nowrap" style="background-color: black;">
-        <FaderPanel :obs="obs" :sources="sources" ref="faderPanel" />
+        <FaderPanel :obs="obs" :sources="sources" :obsIsConnected="obsIsConnected" ref="faderPanel" />
       </div>
       <div class="row">
         <q-btn color="grey" stack icon="navigate_before" class="col-auto mini" label="Timetable" @click="timetable('retract')" />
@@ -287,6 +287,10 @@ export default {
       this.obs.on('MediaEnded', data => { this.notifySourceUpdate(data.sourceName) })
       this.obs.on('MediaPaused', data => { this.notifySourceUpdate(data.sourceName) })
       this.obs.on('MediaRestarted', data => { this.notifySourceUpdate(data.sourceName) })
+      this.obs.on('SourceVolumeChanged', data => {
+        // console.log(this.$refs.faderPanel)
+        this.$refs.faderPanel.obsVolumeChanged(data)
+      })
     },
     notifySourceUpdate (sourceName) {
       console.log('notifySourceUpdate to ' + sourceName)