From 98fd36bd4ff388759c258bbb2ae5e0151d1ac66d Mon Sep 17 00:00:00 2001
From: Jeff Keen <jeff@keen.me>
Date: Thu, 21 Mar 2024 08:17:16 -0500
Subject: [PATCH] fix: use requestAnimationFrame on volume slider drag to
 prevent jitter

---
 ember-stereo/src/modifiers/stereo-volume.js | 24 +++++++++++----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/ember-stereo/src/modifiers/stereo-volume.js b/ember-stereo/src/modifiers/stereo-volume.js
index 380f593c..b0a209cf 100644
--- a/ember-stereo/src/modifiers/stereo-volume.js
+++ b/ember-stereo/src/modifiers/stereo-volume.js
@@ -24,17 +24,19 @@ export default class StereoVolumeModifier extends Modifier {
 
   @action
   handleTap(e) {
-    e.preventDefault();
-    var rect = this.element.getBoundingClientRect();
-    // Check if the event is a touch event
-    let x;
-    if (e.type === 'touchmove') {
-      x = e.touches[0].clientX - rect.left; // x position within the element for touch event
-    } else {
-      x = e.clientX - rect.left; // x position within the element for mouse click
-    }
-    let volumeLevel = parseInt((x / rect.width) * 100, 10);
-    this.setVolume(volumeLevel)
+    window.requestAnimationFrame(() => {
+      e.preventDefault();
+      var rect = this.element.getBoundingClientRect();
+      // Check if the event is a touch event
+      let x;
+      if (e.type === 'touchmove') {
+        x = e.touches[0].clientX - rect.left; // x position within the element for touch event
+      } else {
+        x = e.clientX - rect.left; // x position within the element for mouse click
+      }
+      let volumeLevel = parseInt((x / rect.width) * 100, 10);
+      this.setVolume(volumeLevel)
+    })
   }
 
   @action