Conversion to Glimmer components – dynamic property in service

Question

I am trying to build a Glimmer component that reacts to changes to properties in a service, see below where I am trying to make the component to update the get playing in response to changes in the audioPlayer url and status – which are changed when the play button is pressed in the play action below.... This is not working, and I haven’t been able to find any documentation to support this type of behaviour.

import { action } from '@ember/object';
import { inject as service } from '@ember/service'; 

export default class ShowAudioEpisodeComponent extends Component {
  
  @service audioPlayer;
  
  get playing() {
    return this.audioPlayer.url == this.args.epi.audioUrl && this.audioPlayer.status == "playing";
  }

  @action
  play() {
    if (this.playing) {
      this.audioPlayer.pause(this.args.epi);
    } else {
      this.audioPlayer.playEpisode(this.args.epi);
    }
  }

}

Answer 1

The audio-player service must declare url and status as @tracked, OR must always update them using set