fix release piano keys when mouse cursor leaves them while pressed

TeemuKoivisto · Apr 7, 2024 · 4d1ace1 · 4d1ace1
1 parent 6b4ea76
commit 4d1ace1
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/packages/client/src/components/virtual-piano/VirtualPiano.svelte b/packages/client/src/components/virtual-piano/VirtualPiano.svelte
@@ -17,7 +17,7 @@
   const C0_MIDI = 12
   const C7_MIDI = 96
 
-  let innerWidth = window.innerWidth
+  let innerWidth = typeof window !== 'undefined' ? window.innerWidth : 500
   $: pianoWidth = Math.min(innerWidth, 780)
 
   const bottomNoteMidi = writable(findClosestC($midiRange[0]))

diff --git a/packages/client/src/components/virtual-piano/VirtualPianoKey.svelte b/packages/client/src/components/virtual-piano/VirtualPianoKey.svelte
@@ -8,6 +8,9 @@
     isLast: boolean,
     pianoWidth: number
 
+  type Mouse = MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }
+  type Touch = TouchEvent & { currentTarget: EventTarget & HTMLButtonElement }
+
   let keyHeld = false
   let timeout: ReturnType<typeof setTimeout> | undefined
 
@@ -28,13 +31,13 @@
   $: width = isWhite ? whiteWidth : blackWidth
   $: zIndex = isWhite ? 0 : 1
 
-  function handlePointerDown(e: any) {
+  function handlePointerDown(_e: Mouse | Touch) {
     if (!keyHeld && !timeout) {
       dispatch('pressed', { idx: key.idx, row })
       keyHeld = true
     }
   }
-  function handlePointerUp(e: any) {
+  function handlePointerUp(_e: Mouse | Touch) {
     keyHeld = false
     timeout = setTimeout(() => {
       timeout = undefined
@@ -55,6 +58,7 @@
     class:is-held={keyHeld}
     on:mousedown={handlePointerDown}
     on:mouseup={handlePointerUp}
+    on:mouseleave={handlePointerUp}
     on:touchstart|passive={handlePointerDown}
     on:touchend|passive={handlePointerUp}
   >