From 29a70525da39059a9d61fe6fad5bd4e7fc78fec0 Mon Sep 17 00:00:00 2001
From: artie <artiehime@gmail.com>
Date: Thu, 21 Nov 2024 21:29:01 +0100
Subject: [PATCH] press and hold for audio interaction

---
 src/components/Model.svelte | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/Model.svelte b/src/components/Model.svelte
index dd58b05..e94eb4f 100644
--- a/src/components/Model.svelte
+++ b/src/components/Model.svelte
@@ -19,11 +19,12 @@
 
   let canvas = $state<HTMLCanvasElement>();
   let isLoaded = $state(false);
+  let holdTimeout = $state<number>();
 
   let audio = $state<HTMLAudioElement>();
   let volume = $state(50);
   let volumeLabel = $state<string>();
-  let volumeLabelTimeout = $state<ReturnType<typeof setTimeout>>();
+  let volumeLabelTimeout = $state<number>();
 
   let app: PIXI.Application;
   let model: Live2DModel;
@@ -75,7 +76,22 @@
     }
   }
 
-  function handleModelDoubleClick() {
+  function handleMouseDown() {
+    model.motion("Tap");
+
+    holdTimeout = window.setTimeout(() => {
+      if (holdTimeout) {
+        handleAudioInteraction();
+      }
+    }, 500);
+  }
+
+  function handleMouseUp() {
+    clearTimeout(holdTimeout);
+    holdTimeout = undefined;
+  }
+
+  function handleAudioInteraction() {
     if (!audio && isLoaded) {
       showVolumeLabel();
       audio = new Audio(audioSrc);
@@ -96,7 +112,10 @@
   function showVolumeLabel() {
     volumeLabel = `${volume}%`;
     clearTimeout(volumeLabelTimeout);
-    volumeLabelTimeout = setTimeout(() => (volumeLabel = undefined), 1000);
+    volumeLabelTimeout = window.setTimeout(
+      () => (volumeLabel = undefined),
+      1000
+    );
   }
 
   onMount(async () => {
@@ -168,9 +187,9 @@
   </div>
   <canvas
     bind:this={canvas}
-    ondblclick={handleModelDoubleClick}
+    onmousedown={handleMouseDown}
+    onmouseup={handleMouseUp}
     id="live2d"
-    onpointerdown={() => model.motion("Tap")}
     class="lg:w-96 w-44 transition-opacity {isLoaded
       ? 'opacity-1'
       : 'opacity-0'}"