selectivePlay behaving unexpectedly

[davidjconnolly]

Thanks for creating this great plugin! I'm trying to make a page that allows users to play songs in an album. They have the option of either 'Playing All' or playing individual songs one at a time.

I've uncovered some unexpected behaviour:
1 I bind a playlist to the player in my template (using data-playlist) and load an album with 2 or more songs

2 I click the play all button which calls play(0, false) to signal the audio player to start on the first track (0) and play through all tracks (select play = false)

All songs play as expected

3 Click play next to the second song which calls play(1,true) to signal to the audio player to start at the indicated track (1) and only play that one track (select play = true)

Only the selected song plays, as expected

4 Now click Play All again which will again call play(0, false)

For some reason, the audio player now stops after playing the first track and no matter what I try I can't get it to 'Play All' again without reloading the page.

Any suggestions on how to get play(0, false) to always play through all items in the playlist? I've debugged and confirmed that the playlist isn't getting reset so I'm not sure what's causing the issue.

Any suggestions would be much appreciated, thanks!

Angular Controller:

.controller('albumsPublicDetailController', ['$scope', '$routeParams', 'albumsService',
    function($scope, $routeParams, albumsService)
      {
        $scope.audioPlayer = {};
        $scope.playlist = {};

        // STUCK HERE - Need to find a way to get playAll to reset the playlist and playSong to play just the current song
        $scope.playAll = function () {
          debugger
          $scope.audioPlayer.play(0, false);
        };

        $scope.playSelected = function (index) {
          debugger
          $scope.audioPlayer.play(index, true);
        };

        $scope.pauseSong = function () {
          $scope.audioPlayer.pause();
        };

        $scope.playSong = function () {
          $scope.audioPlayer.play();
        };

        albumsService.publicShow($routeParams.albumId)
          .success(function(data) {
            $scope.playlist = _.map(data.songs, function(song){ return { 
              src: song.file.fileUrl, 
              type: song.file.fileType, 
              name: song.title }; 
            });
            $scope.album = data;
          });
  }]);

HTML Template:

<div id="album-form" class="row">
  <div class="col-sm-8 col-sm-offset-2 text-center jumbotron">
    <span>Title: {{album.title}}</span><br>
    <span>Date: {{album.date}}</span><br>
    <span>Description: {{album.description}}</span>
  </div>

  <div class="col-sm-8 col-sm-offset-2 text-center">
    <audio media-player="audioPlayer" data-playlist="playlist"></audio>

    <button class="pull-left btn" ng-click="playAll()">Play All</button>
    <button class="pull-left btn" ng-click="pauseSong()" ng-show="audioPlayer.playing">Pause</button>
    <button class="pull-left btn" ng-click="playSong()" ng-show="!audioPlayer.playing">Play</button>

    <h4>Songs</h4>
    <div class="list-group" ng-repeat="song in album.songs">
        <button class="pull-left btn" ng-click="playSelected($index)">Play</button>
    </div>
  </div>

</div>

[davidjconnolly]

Submitted PR: #67

Work around in the meantime is to set: $scope.audioPlayer.$selective = false;

[colthreepv]

I am sorry I haven't been active on this project.
By the rate I see issues are opening, seems to me it needs a rewrite :(

As soon as I get some fresh air to breathe I'll dive into the specifics, in the meantime, Thank you all for your awesome reporting and contributions.
I'll continue to accept PR if they look like solid, thank you again

[davidjconnolly]

No worries, I think it works quite well! I'm using it right now for a WIP site I'm making for my brother: www.jonconnolly.ca

This issue is resolved with that PR#67, you just need to publish the next release :)