Soundnode · weblancaster · Sep 15, 2015 · Sep 15, 2015 · Sep 15, 2015
diff --git a/app/public/js/common/queueCtrl.js b/app/public/js/common/queueCtrl.js
@@ -1,6 +1,6 @@
 'use strict';
 
-app.controller('QueueCtrl', function($scope, $rootScope, queueService, $log, $timeout) {
+app.controller('QueueCtrl', function($scope, $rootScope, queueService, $log, $timeout, playerService, SCapiService, ngDialog, notificationFactory, $location, $anchorScroll) {
     $scope.data = queueService.getAll();
 
     $scope.$on('activateQueue', function(event, data) {
@@ -28,8 +28,7 @@ app.controller('QueueCtrl', function($scope, $rootScope, queueService, $log, $ti
         addDOMmutationListener();
     }, 1000);
 
-    $scope.activateTrackInQueue = function() {
-
+    $scope.activateTrackInQueue = function($event) {
         if ( $scope.data.length < 1 ) {
             return;
         }
@@ -47,4 +46,65 @@ app.controller('QueueCtrl', function($scope, $rootScope, queueService, $log, $ti
         }
     };
 
+    /**
+     * remove track from the queue
+     * @param $event
+     */
+    $scope.remove = function($event) {
+        var trackData = $($event.target).closest('.queueListView_list_item').data();
+        var trackPosition = queueService.find(trackData.songId);
+
+        queueService.remove(trackPosition);
+        playerService.playNewSong();
+    };
+
+    /**
+     * like track from the queue
+     * @param $event
+     */
+    $scope.like = function($event) {
+        var trackData = $($event.target).closest('.queueListView_list_item').data();
+        var userId = $rootScope.userId;
+        var songId = trackData.songId;
+
+        SCapiService.saveFavorite(userId, songId)
+            .then(function(status) {
+                if ( typeof status == "object" ) {
+                    notificationFactory.success("Song added to likes!");
+                }
+            }, function(status) {
+                notificationFactory.error("Something went wrong!");
+            });
+    };
+
+    /**
+     * add track to playlist
+     * @param $event
+     */
+    $scope.addToPlaylist = function($event) {
+        var trackData = $($event.target).closest('.queueListView_list_item').data();
+
+        $scope.playlistSongId = trackData.songId;
+        $scope.playlistSongName = trackData.songTitle;
+
+        ngDialog.open({
+            showClose: false,
+            scope: $scope,
+            controller: 'PlaylistDashboardCtrl',
+            template: 'views/playlists/playlistDashboard.html'
+        });
+    };
+
+    /**
+     * scroll view to track
+     * @param $event
+     */
+    $scope.gotoTrack = function($event) {
+        var trackData = $($event.target).closest('.queueListView_list_item').data();
+        var trackId = trackData.songId;
+
+        $location.hash(trackId);
+        $anchorScroll();
+    }
+
 });
diff --git a/app/public/js/common/queueService.js b/app/public/js/common/queueService.js
@@ -143,15 +143,29 @@ app.factory('queueService', function() {
      */
     Queue.find = function(id) {
 
-        if ( ! this.isEmpty() ) {
-            for ( var i = 0; i < this.list.length; i++ ) {
-                if ( this.list[i].songId === id ) {
-                    return i;
-                }
+        if ( this.isEmpty() ) {
+            return false;
+        }
+
+        for ( var i = 0; i < this.list.length; i++ ) {
+            if ( this.list[i].songId === id ) {
+                return i;
             }
         }
+    };
+
+    /**
+     * Remove song from the Queue list by track id
+     * @param id [track id]
+     * @method remove
+     * @returns {false} or {true}
+     */
+    Queue.remove = function(position) {
+        if ( this.isEmpty() ) {
+            return false;
+        }
 
-        return false;
+        this.list.splice(position, 1);
     };
 
     // expose Queue for ONLY debugging

diff --git a/app/public/stylesheets/sass/_components/_queueList.scss b/app/public/stylesheets/sass/_components/_queueList.scss
@@ -29,7 +29,6 @@
         font-size: 12px;
         color: #fff;
         border-bottom: 1px solid $separatorDarkColor;
-        overflow: hidden;
         padding: 10px 20px;
         white-space: nowrap;
         cursor: pointer;
@@ -46,7 +45,8 @@
 
     & .queueListView_list_item_index,
     & .queueListView_list_item_title,
-    & .queueListView_list_item_user {
+    & .queueListView_list_item_user,
+    & .queueListView_list_item_options{
         display: inline-block;
         font-weight: 100;
     }
@@ -70,4 +70,39 @@
         text-overflow: ellipsis;
         overflow: hidden;
     }
+}
+
+.queueListView_list_item_options {
+    position: relative;
+    width: 10px;
+    text-align: center;
+    height: 17px;
+
+    &.active .queueListView_list_item_options_list {
+        display: block;
+    }
+}
+
+.queueListView_list_item_options_list {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 17px;
+    background: $separatorCleanColor;
+    z-index: 10;
+    border-radius: 2px;
+
+    & li:last-child {
+        border-bottom: none;
+    }
+}
+
+.queueListView_list_item_options_list_button {
+    padding: 10px;
+    text-align: center;
+    border-bottom: 1px solid $separatorDarkColor;
+
+    &:hover {
+        background: $separatorDarkColor;
+    }
 }
diff --git a/app/views/common/queueList.html b/app/views/common/queueList.html
@@ -15,11 +15,23 @@
             data-song-title="{{ item.songTitle }}"
             data-song-user="{{ item.songUser }}"
             data-song-id="{{ item.songId }}"
-            ng-click="activateTrackInQueue()">
+            ng-click="activateTrackInQueue($event)">
 
             <small class="queueListView_list_item_index">{{ $index + 1 }}</small>
             <span class="queueListView_list_item_title" title="{{ item.songTitle }}">{{ item.songTitle }}</span>
             <span class="queueListView_list_item_user" title="by: {{ item.songUser }}">by: {{ item.songUser }} </span>
+            <div class="queueListView_list_item_options"
+                 ng-class="{ active: hover }"
+                 ng-mouseover="hover = true"
+                 ng-mouseleave="hover = false" >
+                <i class="fa fa-ellipsis-v"></i>
+                <ul class="queueListView_list_item_options_list" >
+                    <li class="queueListView_list_item_options_list_button" ng-click="remove($event); $event.stopPropagation();">Remove</li>
+                    <li class="queueListView_list_item_options_list_button" ng-click="like($event); $event.stopPropagation();">Like</li>
+                    <li class="queueListView_list_item_options_list_button" ng-click="addToPlaylist($event); $event.stopPropagation();">Add to playlist</li>
+                    <li class="queueListView_list_item_options_list_button" ng-click="gotoTrack($event); $event.stopPropagation();">Go to track</li>
+                </ul>
+            </div>
 
         </li>
     </ul>

diff --git a/app/views/common/tracks.html b/app/views/common/tracks.html
@@ -3,6 +3,7 @@
      ng-mouseover="hover = true"
      ng-mouseleave="hover = false">
                     <span class="songList_item_song_button"
+                          id="{{ data.id }}"
                           song
                           data-song-url="{{ data.stream_url }}"
                           data-song-thumbnail="{{ data.artwork_url }}"