fix: update {{sound-position-progress}} bar on audio-position-will-ch…

…ange event as well as audio-position-changed event
jkeen · Nov 8, 2021 · 4dcea0d · 4dcea0d
1 parent 9c48a18
commit 4dcea0d
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/addon/modifiers/sound-position-progress.js b/addon/modifiers/sound-position-progress.js
@@ -24,8 +24,8 @@ export default class SoundPositionProgressModifier extends Modifier {
     return this.stereo.findSound(this.url);
   }
 
-  @action onPositionChange() {
-    this.element.style.width = `${(this.loadedSound.position / this.loadedSound.duration) * 100}%`;
+  @action onPositionChange({ newPosition }) {
+    this.element.style.width = `${((newPosition || this.loadedSound.position) / this.loadedSound.duration) * 100}%`;
     this.element.style.pointerEvents = 'none';
   }
 
@@ -36,6 +36,7 @@ export default class SoundPositionProgressModifier extends Modifier {
   didReceiveArguments() {
     if (this.url) {
       this.stereo.soundProxy(this.url).afterLoad(sound => {
+        sound.on('audio-position-will-change', this.onPositionChange);
         sound.on('audio-position-changed', this.onPositionChange);
       })
     }

diff --git a/tests/dummy/app/components/sound-display/position.hbs b/tests/dummy/app/components/sound-display/position.hbs
@@ -13,9 +13,7 @@
     </div>
     <div
       data-position-percent={{sound-position @url format='percentage'}}
-      style={{html-safe
-        (concat 'width: ' (sound-position @url format='percentage') '%')
-      }}
+      {{sound-position-progress @url}}
       class='h-full transition-all pointer-events-none rounded-xl bg-accent-0'
     ></div>
   </div>