User favorite status synced across app (fixes #659) (#731)

* Heart updates based on saved value when song changes

* Broadcasting favorites and unfavorites to sync them (stream & player)

* All songs now update themselves when broadcasted to

Author: dgattey

app/public/js/common/favoriteSongDirective.js

@@ -27,6 +27,7 @@ app.directive('favoriteSong', function(
                                 notificationFactory.warn("Song removed from likes!");
                                 $scope.favorite = false;
 								$scope.count -= 1;
+                                $rootScope.$broadcast("track::unfavorited", songId);
                             }
                         }, function() {
                             notificationFactory.error("Something went wrong!");
@@ -38,6 +39,7 @@ app.directive('favoriteSong', function(
                                 notificationFactory.success("Song added to likes!");
                                 $scope.favorite = true;
 								$scope.count += 1;
+                                $rootScope.$broadcast("track::favorited", songId);
                             }
                         }, function(status) {
                             notificationFactory.error("Something went wrong!");

app/public/js/common/playerService.js

@@ -61,6 +61,7 @@ app.factory('playerService', function(
     player.elPlayerProgress = document.getElementById('player-progress');
     player.elPlayerDuration = document.getElementById('player-duration');
     player.elPlayerTimeCurrent = document.getElementById('player-timecurrent');
+    player.elPlayerFavorite = angular.element( document.querySelector('.player_favorite') );
     player.elThumb = document.getElementById('playerThumb');
     player.elTitle = document.getElementById('playerTitle');
     player.elUser = document.getElementById('playerUser');
@@ -165,6 +166,15 @@ app.factory('playerService', function(
             };
         }
 
+        // Make sure the favorite heart is active if user liked it
+        var fav = this.elPlayerFavorite;
+        utilsService.updateTracksLikes([trackObj], true) // use cache to start
+        .then(function() {
+            if ( trackObj.user_favorite ) {
+                fav.addClass('active');
+            }
+        });
+
         $rootScope.isSongPlaying = true;
         $rootScope.$broadcast('activateQueue');
 
@@ -173,6 +183,14 @@ app.factory('playerService', function(
         document.querySelector('.player_favorite').classList.remove('active');
     };
 
+    // Updates cache when liking or unliking a song, so future checks will be correct
+    $rootScope.$on('track::favorited', function(event, trackId) {
+        utilsService.addCachedFavorite(trackId);
+    });
+    $rootScope.$on('track::unfavorited', function(event, trackId) {
+        utilsService.removeCachedFavorite(trackId);
+    });
+
     /**
      * Responsible to play song
      * @method playSong

app/public/js/common/queueCtrl.js

@@ -83,6 +83,7 @@ app.controller('QueueCtrl', function(
                 if ( typeof status == "object" ) {
                     notificationFactory.success("Song added to likes!");
                     utilsService.markTrackAsFavorite(songId);
+                    $rootScope.$broadcast("track::favorited", songId);
                 }
             }, function(status) {
                 notificationFactory.error("Something went wrong!");

app/public/js/common/songDirective.js

@@ -14,6 +14,18 @@ app.directive('song', function ($rootScope, $window, playerService) {
                 });
             });
 
+            // Updating favorites when they get sent from other scope like the queue, stream, and player
+            $scope.$on('track::favorited', function(event, trackId) {
+                if ($scope.data.id == parseInt(trackId)) {
+                    $scope.data.user_favorite = true;
+                }
+            });
+            $scope.$on('track::unfavorited', function(event, trackId) {
+                if ($scope.data.id == parseInt(trackId)) {
+                    $scope.data.user_favorite = false;
+                }
+            });
+
         }
     }
 });

app/public/js/common/utilsService.js

@@ -125,13 +125,42 @@ app.factory('utilsService', function(
             }
             collection.forEach(function (item) {
                 var track = item.track || item;
+                var id = track.id || track.songId;
                 // modify each track by reference
-                track.user_favorite = Utils.likesIds.indexOf(track.id) > -1;
+                track.user_favorite = Utils.likesIds.indexOf(id) > -1;
             });
             return collection;
         });
     };
 
+    /**
+     * When manipulating likes after a page is loaded, it's necessary to
+     * manipulate the likesIds cache when you modify user_favorite like
+     * above. Used to sync the likes between player and everything else
+     * @param  {number or string} id - the song id to add to likes
+     */
+    Utils.addCachedFavorite = function(id) {
+        id = parseInt(id);
+        var index = Utils.likesIds.indexOf(id);
+        if (index == -1) {
+            Utils.likesIds.push(id);
+        }
+    }
+
+    /**
+     * When manipulating likes after a page is loaded, it's necessary to
+     * manipulate the likesIds cache when you modify user_favorite like
+     * above. Used to sync the likes between player and everything else
+     * @param  {number or string} id - the song id to remove from likes
+     */
+    Utils.removeCachedFavorite = function(id) {
+        id = parseInt(id);
+        var index = Utils.likesIds.indexOf(id);
+        if (index > -1) {
+            Utils.likesIds.splice(index, 1);
+        }
+    }
+
     /**
      * Fetch ids of reposted tracks and apply them to existing collection
      * @param  {array} collection - stream collection or tracks array

app/public/js/player/playerCtrl.js

@@ -112,6 +112,7 @@ app.controller('PlayerCtrl', function (
                     if ( typeof status == "object" ) {
                         notificationFactory.warn("Song removed from likes!");
                         $event.currentTarget.classList.remove('active');
+                        $rootScope.$broadcast("track::unfavorited", track.songId);
                     }
                 }, function() {
                     notificationFactory.error("Something went wrong!");
@@ -122,13 +123,30 @@ app.controller('PlayerCtrl', function (
                     if ( typeof status == "object" ) {
                         notificationFactory.success("Song added to likes!");
                         $event.currentTarget.classList.add('active');
+                        $rootScope.$broadcast("track::favorited",  track.songId);
                     }
                 }, function(status) {
                     notificationFactory.error("Something went wrong!");
                 });
         }
     };
 
+    // Listen for updates from other scopes about favorites and unfavorites
+    $scope.$on('track::favorited', function(event, trackId) {
+        var track = queueService.getTrack();
+        if ( track && trackId == track.songId ) {
+            var elFavorite = document.querySelector('.player_favorite');
+            elFavorite.classList.add('active');
+        }
+    });
+    $scope.$on('track::unfavorited', function(event, trackId) {
+        var track = queueService.getTrack();
+        if ( track && trackId == track.songId ) {
+            var elFavorite = document.querySelector('.player_favorite');
+            elFavorite.classList.remove('active');
+        }
+    });
+
 
     /*
     * Add native media shortcuts