diff --git a/app/public/js/common/queueCtrl.js b/app/public/js/common/queueCtrl.js index 5136fb0b..91a8360c 100644 --- 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(); + } + }); \ No newline at end of file diff --git a/app/public/js/common/queueService.js b/app/public/js/common/queueService.js index 788ec654..89cd80e8 100644 --- 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 index 1189f64a..df6cf0b7 100644 --- 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; + } } \ No newline at end of file diff --git a/app/views/common/queueList.html b/app/views/common/queueList.html index 74768192..14e7c956 100644 --- 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)"> {{ $index + 1 }} {{ item.songTitle }} by: {{ item.songUser }} +
diff --git a/app/views/common/tracks.html b/app/views/common/tracks.html index b1c7557b..bf77088a 100644 --- a/app/views/common/tracks.html +++ b/app/views/common/tracks.html @@ -3,6 +3,7 @@ ng-mouseover="hover = true" ng-mouseleave="hover = false">