hide virtual keyboard when useHotkeys disabled

TeemuKoivisto · Mar 26, 2024 · e7ac007 · e7ac007
1 parent 5b6ca7f
commit e7ac007
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/packages/client/src/components/IOSettings.svelte b/packages/client/src/components/IOSettings.svelte
@@ -8,6 +8,7 @@
 
   import { inputsActions, inputs, midiInput } from '$stores/inputs'
   import { reset, persist } from '$stores/persist'
+  import { keyboardActions } from '$stores/keyboard'
 
   const hidden = persist(writable(false), { key: 'inputs-hidden' })
   let fixedVelocity = $inputs.fixedVelocity ?? ''
@@ -42,6 +43,17 @@
       fixedVelocity = $inputs.fixedVelocity || ''
     }
   }
+  function handleSetUseHotkeys(
+    e: Event & {
+      currentTarget: EventTarget & HTMLInputElement
+    }
+  ) {
+    inputsActions.setInputValue('useHotkeys', e.currentTarget.checked)
+    if (!e.currentTarget.checked) {
+      setKeys = false
+      keyboardActions.cancelCapture()
+    }
+  }
   function handleSetFadeTimeout(
     e: Event & {
       currentTarget: EventTarget & HTMLInputElement
@@ -134,7 +146,7 @@
             id="hotkeys"
             type="checkbox"
             checked={$inputs.useHotkeys}
-            on:change={e => inputsActions.setInputValue('useHotkeys', e.currentTarget.checked)}
+            on:change={handleSetUseHotkeys}
           />
         </div>
         <div class="my-1 flex justify-between mr-12">
@@ -151,8 +163,10 @@
       <div class="flex flex-col h-full">
         <div class="h-[28px]">&nbsp;</div>
         <div class="my-[2px] flex justify-between">
-          <button class="w-full btn-sm primary" on:click={() => (setKeys = !setKeys)}
-            >Set hotkeys</button
+          <button
+            class="w-full btn-sm primary"
+            disabled={!$inputs.useHotkeys}
+            on:click={() => (setKeys = !setKeys)}>Set hotkeys</button
           >
         </div>
         <div class="my-1 flex justify-between">

diff --git a/packages/client/src/stores/keyboard/store.ts b/packages/client/src/stores/keyboard/store.ts
@@ -207,6 +207,10 @@ export const keyboardActions = {
     }
     return false
   },
+  cancelCapture() {
+    capturingHotkeys.set(undefined)
+    captured.clear()
+  },
   reset() {
     keyboardOptions.set({
       isCustom: false,

diff --git a/packages/client/src/tailwind.css b/packages/client/src/tailwind.css
@@ -32,5 +32,8 @@ html {
   }
   .primary {
     @apply bg-blue-500 hover:bg-blue-700 text-white;
+    &:disabled {
+      @apply bg-gray-300 hover:bg-gray-300;
+    }
   }
 }