From 8dbc00635bc78171912bf5707bff06260cd3e757 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Wed, 11 Sep 2024 00:26:59 -0700
Subject: [PATCH] create interruptible animation

---
 src/music/record-player.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/music/record-player.ts b/src/music/record-player.ts
index 777140d..15348b8 100644
--- a/src/music/record-player.ts
+++ b/src/music/record-player.ts
@@ -279,11 +279,33 @@ export class RecordPlayer extends HTMLElement {
   stop() {
     if (this.paused) return;
 
+    const arm = this.shadowRoot!.querySelector('.tone-arm') as HTMLElement;
+    const animation = arm.getAnimations()[0];
+
+    if (animation) {
+      animation.commitStyles();
+      animation.cancel();
+      const rotate = arm.style.rotate;
+      arm.style.rotate = '';
+      arm.animate(
+        [
+          { rotate },
+          { rotate, transform: 'rotateX(20deg)', offset: 0.2 },
+          { transform: 'rotateX(20deg)', offset: 0.8 },
+        ],
+        {
+          duration: 3000,
+        }
+      );
+    }
+
     clearTimeout(this.#playTimeout);
     this.#internals.states.delete('playing');
     this.#audio.pause();
     this.#audio.currentTime = 0;
     this.dispatchEvent(new Event('stopped', { bubbles: true }));
+
+    // console.log(a);
   }
 
   handleEvent(event: Event) {