From 198e184d6ae673dbe75de0c1bf9082afde8c4ada Mon Sep 17 00:00:00 2001
From: James Kao <jmk17@cornell.edu>
Date: Mon, 21 Feb 2022 14:13:43 -0800
Subject: [PATCH] Add right-click context menu for transition links and save
 settings to local storage

---
 src/components/MidiHub.vue | 50 +++++++++++---------------------------
 src/layouts/MainLayout.vue | 40 ++++++++++++++++++++++++------
 2 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/src/components/MidiHub.vue b/src/components/MidiHub.vue
index 00f9d05..1178afd 100644
--- a/src/components/MidiHub.vue
+++ b/src/components/MidiHub.vue
@@ -174,6 +174,10 @@ console.log(eventData);
       this.midi.disable()
       this.midiInputsAvailable = []
       this.midiOutputsAvailable = []
+
+      let savedMidiInputName = this.$q.localStorage.getItem('lastMidiInputName')
+      let savedMidiOutputName = this.$q.localStorage.getItem('lastMidiOutputName')
+
       this.midi.enable(error => {
         if (error) {
           console.log('Webmidi Error:' + error)
@@ -181,10 +185,16 @@ console.log(eventData);
         this.midi.inputs.map(input => {
           this.midiInputsAvailable.push(input.name)
           console.log(`'${input.id} / '${input.name}`)
+          if (input.name === savedMidiInputName) {
+            this.midiInputName = savedMidiInputName
+          }
         })
         this.midi.outputs.map(output => {
           this.midiOutputsAvailable.push(output.name)
           console.log(`'${output.id} / '${output.name}`)
+          if (output.name === savedMidiOutputName) {
+            this.midiOutputName = savedMidiOutputName
+          }
         })
 
         if (typeof update !== 'undefined') {
@@ -216,6 +226,8 @@ console.log(eventData);
         return false
       }
 
+      this.$q.localStorage.set('lastMidiInputName', this.midiInputName)
+
       this.midiInput.addListener('noteon', 'all', data => {
         const channel = data.channel
         const note = data.note.number
@@ -249,42 +261,6 @@ console.log(eventData);
             this.$global.$emit(eventName, eventData)
           }
         }
-
-        // Controls: 11 12 13 14
-        // var i = FADER_CCS.indexOf(control)
-        // if (i > -1) {
-        //   this.$root.$emit('midiFader' + i, {
-        //     midi: this.midi,
-        //     channel: channel,
-        //     control: control,
-        //     value: value
-        //   })
-        //   return
-        // }
-
-        // // Buttons only test if value = 127
-        // if (value === 127) {
-        //   i = TT_ADV_CCS.indexOf(control)
-        //   if (i > -1) {
-        //     this.$root.$emit('timetable', 'advance')
-        //   }
-
-        //   i = TT_RET_CCS.indexOf(control)
-        //   if (i > -1) {
-        //     this.$root.$emit('timetable', 'retract')
-        //   }
-
-        //   i = TRANSITION_CCS.indexOf(control)
-        //   if (i > -1) {
-        //     this.$root.$emit('transition')
-        //   }
-
-        //   if (control >= SCENE_CC_ZERO && control < (SCENE_CC_ZERO + this.scenes.length)) {
-        //     const event = 'scene' + (control - SCENE_CC_ZERO)
-        //     // console.log('Sending event ' + event)
-        //     this.$root.$emit(event)
-        //   }
-        // }
       })
 
       console.log(this.midiOutputName)
@@ -296,6 +272,8 @@ console.log(eventData);
           console.log(`MIDI Output named ${this.midiOutputName} could not be opened`)
           return true
         }
+
+        this.$q.localStorage.set('lastMidiOutputName', this.midiOutputName)
       }
       this.$global.$emit('midiout', { name: 'init' })
 
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index f176299..43d8b79 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -25,12 +25,21 @@
       <div class="row">
         <q-btn color="grey" stack icon="navigate_before" class="col-auto mini" label="Timetable" @click="timetable('retract')" />
         <q-btn color="grey" stack icon="linked_camera" class="col-auto mini" label="Active" @click="screenshot('active')"/>
-        <q-btn color="red" class="col" label="Transition" @click="transition()" />
+        <q-btn color="red" class="col" label="Transition" @click="transition()">
+        </q-btn>
         <q-btn color="grey" stack icon="navigate_before" class="col-auto mini" label="Timetable" @click="timetable('retract')" />
         <q-btn color="grey" stack icon="navigate_next" class="col-auto mini" label="Timetable" @click="timetable('advance')"/>
         <q-btn color="red" class="col" label="Transition" @click="transition()" />
         <q-btn color="grey" stack icon="linked_camera" class="col-auto mini" label="Active" @click="screenshot('active')" />
         <q-btn color="grey" stack icon="navigate_next" class="col-auto mini" label="Timetable" @click="timetable('advance')"/>
+          <q-menu touch-position context-menu>
+            <div class="row q-pa-md column">
+              <q-toggle v-model="linkTransitionTTAdvance" label="Link Transition to Timetable Advance"
+                @update:model-value="(value) => $q.localStorage.set('linkTransitionTTAdvance', value) "/>
+              <q-toggle v-model="linkTransitionTTRetract" label="Link Transition to Timetable Retract"
+                @update:model-value="(value) => $q.localStorage.set('linkTransitionTTRetract', value) "/>
+            </div>
+          </q-menu>
       </div>
     </q-header>
 
@@ -99,7 +108,9 @@ export default {
       status: {
         previewIndex: -1,
         currentIndex: -1
-      }
+      },
+      linkTransitionTTAdvance: false,
+      linkTransitionTTRetract: false
     }
   },
   computed: {
@@ -111,14 +122,22 @@ export default {
       }
     }
   },
-  created: function () {
-    // if (typeof window.OBSWebSocket === 'undefined') {
-    //   window.OBSWebSocket = require('obs-websocket-js')
-    // }
-    // window.OBSWebSocket = window.obs.websocket
+  mounted: function () {
     this.$global.$on('transition', this.transition)
     this.$global.$on('timetable', this.timetable)
     this.$global.$on('screenshot', this.screenshot)
+
+    if (this.$q.localStorage.has('linkTransitionTTAdvance')) {
+      this.linkTransitionTTAdvance = this.$q.localStorage.getItem('linkTransitionTTAdvance')
+    }
+
+    if (this.$q.localStorage.has('linkTransitionTTRetract')) {
+      this.linkTransitionTTRetract = this.$q.localStorage.getItem('linkTransitionTTRetract')
+    }
+
+    if (this.$q.localStorage.has('lastObsAddress')) {
+      this.obsAddress = this.$q.localStorage.getItem('lastObsAddress')
+    }
   },
   unmounted: function () {
     try {
@@ -188,6 +207,7 @@ export default {
       this.obsBtnLabel = 'Disconnect'
       this.obsConnectionPending = false
       this.obsIsConnected = true
+      this.$q.localStorage.set('lastObsAddress', this.obsAddress)
       this.obs.send('GetSceneList').then(data => {
         console.log('GetSceneList retrieved # scenes: ' + String(data.scenes.length))
         this.scenes = data.scenes
@@ -276,6 +296,12 @@ export default {
         return
       }
       this.obs.send('TransitionToProgram')
+      if (this.linkTransitionTTAdvance) {
+        this.timetable('advance')
+      }
+      if (this.linkTransitionTTRetract) {
+        this.timetable('retract')
+      }
     },
     timetable (direction) {
       if (!this.obsIsConnected) {