Blog Part II

app.js

angular.module('tutorial', ['ionic', 'ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
    when('/', {
      templateUrl: 'partials/player.html',
      controller: 'PlayerCtrl'
    });
}])
.service('Playlist', ['$http', '$q', function ($http, $q) {
  return {get: function (params) {
    var deferred = $q.defer();
    $http.get('http://hypem.com/playlist/' + params.playlist + '/all/json/' + params.pagenum + '/data.json')
    .success(function (data) {
      deferred.resolve(data);
    })
    .error(function(data){
      deferred.reject(data);
    });
    return deferred.promise;
  }};
}])

.service('Media', ['$http', '$q', function ($http, $q) {
  return {get: function (id) {
    var deferred = $q.defer();
    $http.get('http://hypem-server.herokuapp.com/?mediaid=' + id)
    .success(function (data) {
      deferred.resolve(data);
    })
    .error(function (e) {
      deferred.reject(e);
    });
    return deferred.promise;
  }};
}])

.service('Async', ['$window', function ($window) {
  return $window.async;
}])

.controller('PlayerCtrl',
['$scope','Playlist', '$routeParams', '$document', 'Media', '$window', 'Async',
function ($scope, Playlist, $routeParams, $document, Media, $window, Async) {
  var addToQueue = function(songs, cb) {
    var pending = [];
    for (var key in songs) {
      if (songs.hasOwnProperty(key) && angular.isObject(songs[key])) {
        pending.push(songs[key]);
      }
    }

    Async.map(pending, function (song, callback) {
      Media.get(song.mediaid).then(function (media) {
        song.url = media.url;
        callback(null, song);
      }).catch (function (e) {
        callback(e);
      });
    }, function (e, mutated) {
      queue = queue.concat(mutated);
      cb();
    });
  };

  var getPlaylist = function (cb) {
    Playlist.get({playlist: $routeParams.playlist || 'popular', pagenum: currentPage}).then(function(songs) {
      currentPage++;
      addToQueue(songs, function () {
        cb();
      });
    }).catch(function(e) {
      cb();
    });
  };

  $scope.playerControl = function () {
    if (!$scope.isPlaying) {
      if (audio.getAttribute('src') === null) {
        setPlayer();
      }
      audio.play();
      $scope.isPlaying = true;
    } else {
      audio.pause();
      $scope.isPlaying = false;
    }
  };

  $scope.nextSong = function () {
    currentSongIdx++;
    setPlayer();
    audio.play();
    $scope.isPlaying = true;
    if (currentSongIdx > 0 && currentSongIdx % 20 === 0) {
      getPlaylist(function () {
        console.log('updated!');
      });
    }
  };

  $scope.previousSong = function () {
    if (currentSongIdx > 0 ) {
      currentSongIdx--;
      setPlayer();
      audio.play();
      $scope.isPlaying = true;
    }
  };

  var setPlayer = function () {
    console.log(queue[currentSongIdx]);
    $scope.ArtistImage = queue[currentSongIdx].thumb_url_artist;
    $scope.ArtistName = queue[currentSongIdx].artist;
    $scope.SongName = queue[currentSongIdx].title;
    $scope.Cover = queue[currentSongIdx].thumb_url_large;
    audio.src = queue[currentSongIdx].url;
  };

  $scope.ArtistImage = null;
  $scope.ArtistName = null;
  $scope.SongName = null;
  $scope.Cover = null;
  $scope.isPlaying = false;
  var currentSongIdx = 0;
  var queue = [];
  var currentPage = 1;
  var audio = $window.document.getElementById('player');
  //init
  getPlaylist(function () {
    $scope.playerControl();
  });

  audio.addEventListener('ended', function () {
    $scope.$apply($scope.nextSong());
  });


}]);

async.js

.service('Async', ['$window', function ($window) {
  return $window.async;
}])

controller.js

.controller('PlayerCtrl',
['$scope','Playlist', '$routeParams', '$document', 'Media', '$window', 'Async',
function ($scope, Playlist, $routeParams, $document, Media, $window, Async) {
  var addToQueue = function(songs, cb) {
    var pending = [];
    for (var key in songs) {
      if (songs.hasOwnProperty(key) && angular.isObject(songs[key])) {
        pending.push(songs[key]);
      }
    }

    Async.map(pending, function (song, callback) {
      Media.get(song.mediaid).then(function (media) {
        song.url = media.url;
        callback(null, song);
      }).catch (function (e) {
        callback(e);
      });
    }, function (e, mutated) {
      queue = queue.concat(mutated);
      cb();
    });
  };

  var getPlaylist = function (cb) {
    Playlist.get({playlist: $routeParams.playlist || 'popular', pagenum: currentPage}).then(function(songs) {
      currentPage++;
      addToQueue(songs, function () {
        cb();
      });
    }).catch(function(e) {
      cb();
    });
  };

  $scope.playerControl = function () {
    if (!$scope.isPlaying) {
      if (audio.getAttribute('src') === null) {
        setPlayer();
      }
      audio.play();
      $scope.isPlaying = true;
    } else {
      audio.pause();
      $scope.isPlaying = false;
    }
  };

  $scope.nextSong = function () {
    currentSongIdx++;
    setPlayer();
    audio.play();
    $scope.isPlaying = true;
    if (currentSongIdx > 0 && currentSongIdx % 20 === 0) {
      getPlaylist(function () {
        console.log('updated!');
      });
    }
  };

  $scope.previousSong = function () {
    if (currentSongIdx > 0 ) {
      currentSongIdx--;
      setPlayer();
      audio.play();
      $scope.isPlaying = true;
    }
  };

  var setPlayer = function () {
    console.log(queue[currentSongIdx]);
    $scope.ArtistImage = queue[currentSongIdx].thumb_url_artist;
    $scope.ArtistName = queue[currentSongIdx].artist;
    $scope.SongName = queue[currentSongIdx].title;
    $scope.Cover = queue[currentSongIdx].thumb_url_large;
    audio.src = queue[currentSongIdx].url;
  };

  $scope.ArtistImage = null;
  $scope.ArtistName = null;
  $scope.SongName = null;
  $scope.Cover = null;
  $scope.isPlaying = false;
  var currentSongIdx = 0;
  var queue = [];
  var currentPage = 1;
  var audio = $window.document.getElementById('player');
  //init
  getPlaylist(function () {
    $scope.playerControl();
  });

  audio.addEventListener('ended', function () {
    $scope.$apply($scope.nextSong());
  });


}]);

index.html

  <body>
    <header class="bar bar-header bar-light">
      <h1 class="title">HypeM</h1>
    </header>
    <content has-header="true" scroll="false">
      <div ng-view></div>
    </content>
  </body>

media.js

.service('Media', ['$http', '$q', function ($http, $q) {
  return {get: function (id) {
    var deferred = $q.defer();
    $http.get('http://hypem-server.herokuapp.com/?mediaid=' + id)
    .success(function (data) {
      deferred.resolve(data);
    })
    .error(function (e) {
      deferred.reject(e);
    });
    return deferred.promise;
  }};
}])

partial.html

<div class="list card">
  <audio id="player"></audio>
  <div class="item">
    <h2>{{SongName}}</h2>
    <p>{{ArtistName}}</p>
  </div>
  <div class="item item-image">
    <img src={{Cover}}>
  </div>
</div>
<div class="tabs tabs-icon-only">
  <div class="tab-item">
    <i class="icon ion-ios7-skipbackward" ng-click="previousSong()"></i>
  </div>
  <div class="tab-item">
    <i class="icon ion-pause" ng-click="playerControl()" ng-show="isPlaying"></i>
    <i class="icon ion-play" ng-click="playerControl()" ng-hide="isPlaying"></i>
  </div>
  <div class="tab-item">
    <i class="icon ion-ios7-skipforward" ng-click="nextSong()"></i>
  </div>
</div>