Merge pull request #32183 from justindarc/bug996410

Bug 996410 - [Music] Use fastSeek API in Gaia Music app

apps/music/elements/music-seek-bar.js

@@ -67,6 +67,7 @@ var template =
     width: 2.3rem;
     height: 2.3rem;
     pointer-events: none;
+    will-change: transform;
   }
   #seek-bar-indicator:after {
     content: '';
@@ -79,6 +80,9 @@ var template =
     width: 2.1rem;
     height: 2.1rem;
   }
+  #seek-bar-indicator.highlight {
+    transition: transform 50ms linear;
+  }
   #seek-bar-indicator.highlight:before {
     content: '';
     background-color: #00caf2;
@@ -121,7 +125,7 @@ proto.createdCallback = function() {
     this.dispatchEvent(new CustomEvent('seek', {
       detail: { elapsedTime: this.elapsedTime }
     }));
-  }, 100);
+  }, 250);
 
   container.addEventListener(isTouch ? 'touchstart' : 'mousedown', (evt) => {
     container.addEventListener(isTouch ? 'touchmove' : 'mousemove',
@@ -245,7 +249,9 @@ Object.defineProperty(proto, 'remainingTime', {
       x = this.els.seekBar.offsetWidth - x;
     }
 
-    this.els.seekBarIndicator.style.transform = 'translateX(' + x + 'px)';
+    window.requestAnimationFrame(() => {
+      this.els.seekBarIndicator.style.transform = 'translateX(' + x + 'px)';
+    });
   }
 });
 

apps/music/js/endpoint.js

@@ -145,8 +145,7 @@ function stop() {
 }
 
 function seek(time) {
-  time = parseInt(time, 10);
-  audio.currentTime = time;
+  audio.fastSeek(parseInt(time, 10));
 }
 
 function startFastSeek(reverse) {
@@ -160,9 +159,11 @@ function startFastSeek(reverse) {
 
   function fastSeek() {
     if (!isFastSeeking) {
+      audio.volume = 1;
       return;
     }
 
+    audio.volume = 0.5;
     seek(audio.currentTime + (reverse ? -2 : 2));
     setTimeout(fastSeek, 50);
   }