fix: use requestAnimationFrame on volume slider drag to prevent jitter

jkeen · Mar 21, 2024 · 98fd36b · 98fd36b
1 parent 4c5c692
commit 98fd36b
Showing 1 changed file with 13 additions and 11 deletions.
diff --git 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