Added delay option & same scenes option

package.json

@@ -1,7 +1,7 @@
 {
   "name": "obs-rcontrol",
   "productName": "OBS Remote Control",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Switch scene in OBS by keybind and remotely",
   "main": "src/index.js",
   "scripts": {

src/App.vue

@@ -15,7 +15,7 @@
           </button>
         </div>
       </div>
-      <div class="flex -mx-3 mb-6">
+      <div class="flex -mx-3">
         <div class="w-full px-3 mb-6">
           <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="Address">
             Address
@@ -31,7 +31,7 @@
       </div>
     </div>
     <div class="w-full pt-4 border-t border-grey-light" v-if="status">
-      <div class="flex -mx-3 mb-6">
+      <div class="flex -mx-3">
         <div class="w-full px-3 mb-6">
           <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="Scene">Active Scene</label>
           <div class="relative">
@@ -55,6 +55,21 @@
           </div>
         </div>
       </div>
+      <div class="flex -mx-3 mb-6">
+        <div class="w-full px-3 mb-6">
+          <div class="md:w-1/3"></div>
+          <label class="md:w-2/3 block text-grey font-bold">
+            <input class="mr-2 leading-tight" type="checkbox" v-model="isSameScenes">
+            <span class="text-sm">
+              Activate overlay only when active scene is same as selected scene in OBS
+            </span>
+          </label>
+        </div>
+        <div class="w-full px-3 mb-6">
+          <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="Timeout">Delay after keybind is released</label>
+          <input class="bg-grey-lighter appearance-none border-2 border-grey-lighter rounded block w-full py-2 px-4 text-grey-darker leading-tight focus:outline-none focus:bg-white focus:border-indigo" id="Timeout" type="text" v-model="timeout">
+        </div>
+      </div>
       <div class="mb-6">
         <div class="md:w-1/3">
           <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="Keycode">
@@ -91,18 +106,22 @@ export default {
   data () {
     return {
       obs: null,
+      obsActiveScene: '',
       activeScene: '',
       overlayScene: '',
       sceneList: [],
-      keycodes: keycodes,
 
+      keycodes: keycodes,
       keycode: 34,
 
       login: {
         address: 'localhost:4444',
         password: ''
       },
 
+      timeout: 1000,
+      isSameScenes: false,
+
       keybindStatus: 0,
       status: 0,
 
@@ -129,15 +148,23 @@ export default {
     },
     detectKeybindState: debounce(async function({ keycode, type }) {
       let scene
+      let timeout = 0
+      if (this.isSameScenes) {
+        const getCurrentScene = await this.obs.getCurrentScene()
+        if (getCurrentScene.name !== this.activeScene && getCurrentScene.name !== this.overlayScene) return
+      }
       if (keycode == this.keycode) {
         if (type == 'keydown') {
           scene = this.overlayScene
         } else if (type == 'keyup') {
           scene = this.activeScene
+          timeout = this.timeout
         }
-        this.history.unshift(`Action ${type} - ${keycode}, Scene: ${scene}`)
+        this.history.unshift(`Action ${type} - ${this.keycodes[keycode]}, Scene: ${scene}`)
         try {
-          await this.obs.setCurrentScene({ 'scene-name': scene })
+          await setTimeout(async () => {
+            await this.obs.setCurrentScene({ 'scene-name': scene })
+          }, timeout)
         } catch ({ error }) {
           this.history.unshift(`Error: ${error}`)
         }