Song flux theory post

Actions.js

angular.module('trkstr.player.actions', [
  'songFlux'
]).factory('PlayerActions', function(songFactory){
  function PlayAction(track){
    this.track = track;
    this.purpose = 'Request a track be played.';
    this.dispatcher = songFactory.getDispatcher('trkstr');
  }

  PlayAction.prototype.dispatch = function(){
    this.dispatcher.dispatch(this);
  };

  return {
    Play: PlayAction
  };
});

LibraryComponent.js

function LibraryController(Library, Actions) {
  this.Library = Library; // A library has albums, which have tracks
  this.albums = Library.albums; // Updates on Library mutation events
  this.Actions = Actions;
}

LibraryController.prototype.play = function(track) {
  return this.Actions.Play(track).dispatch();
};

LibraryController.$inject = ['TrkstrLibrary', 'TrkstrActions'];

LibraryTemplate.html

<ol ng-repeat="album in state.albums">
  <li>{{ album.name }}</li>
  <li
    ng-repeat="track in album.tracks"
    ng-click="state.play(track)"
  >{{ track.title }}</li>
</ol>

PlayerComponent.js

function PlayerController(store) {
  this.store = store;
  this.store.on(this.store.Events.TrackChanged, this.play.bind(this));
  this.play();
}

PlayerController.prototype.play = function() {
  return this.track = this.store.currentTrack;
};

PlayerController.$inject = ['PlayerStore'];

function PlayerDirective() {
  this.controller = PlayerController;
  this.templateUrl = 'player';
  this.replace = false;
  this.restrict = 'E';
  this.controllerAs = 'state';
  this.bindToController = true;
  this.scope = {};
}

PlayerDirective.factory = function() {
  return new PlayerDirective();
};
PlayerDirective.factory.$inject = [];

angular.module('trkstr.player.component', [
  'trkstr.stores.player', 'player.template'
]).directive('player', PlayerDirective);

PlayerStore.js

PlayerFactory = function(Actions, song) {
  function PlayerStore() {
    global.EventEmitter.call(this);
    this.dispatcher = song.getDispatcher('trkstr');
    this.Events = PlayerStore.Events;

    this.currentTrack = { title: "Nothing Playing..." };
    this.doPlay = this.dispatcher.register(Actions.Play, this.play.bind(this));
  }
  PlayerStore.prototype = Object.create(EventEmitter.prototype);

  PlayerStore.prototype.play = function(playAction) {
    this.currentTrack = playAction.track;
    this.emit(PlayerStore.Events.TrackChanged);
  };

  PlayerStore.Events = {
    TrackChanged: 'TrackChanged'
  };

  return new PlayerStore();
};

PlayerFactory.$inject = [ 'TrkstrActions', 'songFactory' ];
angular.module('trkstr.stores.player', [
  'trkstr.actions', 'songFlux'
]).factory('PlayerStore', PlayerFactory);

PlayerTemplate.html

<!-- PlayerController Template -->
<div class="Player">
  <pre class="title">playing {{ state.track.title }}</pre>
  <audio
    ng-if="state.track.path"
    autoplay controls
    ng-src="{{ state.track.path }}"
  />
</div>