fix: Resolve some more bugs with sound-position modifiers

addon/-private/utils/sound-proxy.js

@@ -13,7 +13,7 @@ import { cached } from 'tracked-toolbox';
 
 export default class SoundProxy extends Evented {
   @tracked isLoading = false;
-  @tracked url;
+  @tracked identifier;
 
   constructor(identifier, stereo) {
     super(...arguments);
@@ -35,19 +35,24 @@ export default class SoundProxy extends Evented {
     });
   }
 
-  @cached
+  @tracked _value;
+  set value(val) {
+    this._value = val;
+  }
+
   get value() {
-    return this.stereo.findLoadedSound(this.url);
+    return this._value || this.stereo.findLoadedSound(this.identifier);
   }
 
   @task({ debug: true })
   *waitForLoadTask() {
-    yield waitForProperty(this, 'url', (v) => !!v);
-    debug('ember-stereo:sound-proxy')(`waiting for ${this.url} to load`);
+    yield waitForProperty(this, 'identifier', (v) => !!v);
+    debug('ember-stereo:sound-proxy')(`waiting for ${this.identifier} to load`);
     while (!this.value) {
       yield timeout(200);
 
       if (this.value) {
+        this.value = this.stereo.findLoadedSound(this.identifier);
         break;
       }
 
@@ -56,7 +61,7 @@ export default class SoundProxy extends Evented {
       }
     }
     debug('ember-stereo:sound-proxy')(
-      `the wait is over for ${this.url} to load`
+      `the wait is over for ${this.identifier} to load`
     );
   }
 
@@ -71,8 +76,12 @@ export default class SoundProxy extends Evented {
 
   @task
   *resolveUrlTask(identifier) {
-    this.url = yield this.stereo.resolveIdentifierTask.perform(identifier);
-    debug('ember-stereo:sound-proxy')(`resolved identifier to ${this.url}`);
+    this.identifier = yield this.stereo.resolveIdentifierTask.perform(
+      identifier
+    );
+    debug('ember-stereo:sound-proxy')(
+      `resolved identifier to ${this.identifier}`
+    );
   }
 
   get isPending() {
@@ -89,7 +98,7 @@ export default class SoundProxy extends Evented {
 
   get errors() {
     return this.stereo.cachedErrors.find((error) =>
-      hasEqualUrls(error.url, this.url)
+      hasEqualUrls(error.url, this.identifier)
     );
   }
 
@@ -98,7 +107,7 @@ export default class SoundProxy extends Evented {
       taskInstance.args[0]
     );
 
-    let match = hasEqualUrls(urls, this.url);
+    let match = hasEqualUrls(urls, this.identifier);
     if (match) {
       this.isLoading = true;
     }
@@ -108,7 +117,7 @@ export default class SoundProxy extends Evented {
     let urls = await this.stereo.resolveIdentifierTask.perform(
       taskInstance.args[0]
     );
-    let match = hasEqualUrls(urls, this.url);
+    let match = hasEqualUrls(urls, this.identifier);
     if (match) {
       this.isLoading = false;
     }

addon/modifiers/sound-position-progress.js

@@ -10,9 +10,10 @@
 */
 
 import { inject as service } from '@ember/service';
-import { cached } from 'tracked-toolbox';
 import Modifier from 'ember-modifier';
 import { macroCondition, isTesting } from '@embroider/macros';
+import { tracked } from '@glimmer/tracking';
+import debug from 'debug';
 
 import {
   task,
@@ -25,59 +26,60 @@ import {
 export default class SoundPositionProgressModifier extends Modifier {
   @service stereo;
   element = null;
+  identifier = null;
 
-  @cached
   get loadedSound() {
-    return this.stereo.findLoadedSound(this.url);
+    return this.stereo.findLoadedSound(this.identifier);
   }
 
-  modifyPosition({ sound }) {
-    let position = sound?.position ?? 0;
+  modifyPosition({ sound, position }) {
     let duration = sound?.duration ?? 1;
 
-    this.element.style.width = `${(position / duration) * 100}%`;
+    this.element.style.width = `${
+      ((position ?? sound?.position ?? 0) / duration) * 100
+    }%`;
     this.element.style.pointerEvents = 'none';
   }
 
-  modify(element, [url], options) {
-    this.url = url;
+  modify(element, [identifier], options) {
     this.options = options;
 
+    if (this.identifier != identifier) {
+      this.identifier = identifier;
+    }
     if (!this.element) {
       this.element = element;
       this.element.setAttribute('data-sound-position-progress', true);
       this.modifyPosition({ sound: this.loadedSound });
     }
-    this.watchPositionTask.perform().catch(() => {
-      /* noop */
+    this.watchPositionTask.perform().catch((e) => {
+      debug(`ember-stereo:sound-position-progress ${this.identifier}`, e);
     });
   }
 
-  @task({ drop: true })
+  @task
   *watchPositionTask() {
     while (true) {
+      yield waitForProperty(this, 'loadedSound', (v) => v);
       let position = this.loadedSound?.position;
       yield timeout(100);
 
-      let result = yield race([
-        waitForEvent(this.loadedSound, 'audio-position-will-change'),
-        waitForEvent(this.loadedSound, 'audio-position-changed'),
-        waitForProperty(
-          this,
-          'loadedSound',
-          (sound) => sound?.position != position
-        ),
-        timeout(500),
-      ]);
-
-      if (result?.sound) {
-        this.modifyPosition({ sound: result.sound });
-      } else if (this.loadedSound) {
-        this.modifyPosition({ sound: this.loadedSound });
-      }
+      if (this.loadedSound) {
+        let result = yield race([
+          waitForEvent(this.loadedSound, 'audio-position-will-change'),
+          waitForEvent(this.loadedSound, 'audio-position-changed'),
+          waitForProperty(
+            this,
+            'loadedSound',
+            (sound) => sound?.position != position
+          ),
+        ]);
 
-      if (macroCondition(isTesting())) {
-        break;
+        if (result?.sound) {
+          this.modifyPosition({ sound: result.sound });
+        } else if (this.loadedSound) {
+          this.modifyPosition({ sound: this.loadedSound });
+        }
       }
     }
   }

addon/modifiers/sound-position-slider.js

@@ -25,10 +25,6 @@ export default class SoundPositionSliderModifier extends DidPanModifier {
     registerDestructor(this, this.unregisterListeners.bind(this));
   }
 
-  get loadedSound() {
-    return this.stereo.findLoadedSound(this.url);
-  }
-
   get isRangeControl() {
     return this.element.tagName === 'INPUT' && this.element.type === 'range';
   }
@@ -78,7 +74,15 @@ export default class SoundPositionSliderModifier extends DidPanModifier {
     }
   }
 
-  modify(element, [url], options) {
+  get loadedSound() {
+    return this.stereo.findSound(this.identifier);
+  }
+
+  modify(element, [identifier], options) {
+    if (this.identifier != identifier) {
+      this.identifier = identifier;
+    }
+
     if (!this.element) {
       this.element = element;
       this.options = options;
@@ -96,8 +100,8 @@ export default class SoundPositionSliderModifier extends DidPanModifier {
       this.element.setAttribute('data-sound-position-slider', true);
     }
 
-    if (this.isRangeControl && this.url !== url) {
-      this.url = url;
+    if (this.isRangeControl && this.identifier !== identifier) {
+      this.identifier = identifier;
 
       if (this.loadedSound) {
         this.loadedSound.off(
@@ -115,8 +119,8 @@ export default class SoundPositionSliderModifier extends DidPanModifier {
           }
         })
         .catch(() => {});
-    } else if (this.url !== url) {
-      this.url = url;
+    } else if (this.identifier !== identifier) {
+      this.identifier = identifier;
     }
 
     if (!this.isRangeControl) {