Skip to content

Commit 9f156ee

Browse files
tyler-boydtyler-boyd
committed
Playlist add/remove
1 parent 0678fee commit 9f156ee

File tree

9 files changed

+108
-25
lines changed

9 files changed

+108
-25
lines changed

‎app/assets/javascripts/controllers.js.coffee

+29-8
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,9 @@ app.controller 'PlayerCtrl',['$scope', 'AuthFactory', 'ApiFactory', '$sce', '$ro
6868
$scope.current_playlist = $scope.all_songs
6969
else
7070
$scope.current_playlist = playlist
71+
ApiFactory.getPlaylist(playlist.id).then (updated_playlist) ->
72+
playlist = updated_playlist
73+
$scope.current_playlist = updated_playlist
7174
$scope.removePlaylist = (playlist) ->
7275
ApiFactory.deletePlaylist(playlist.id).then (val) ->
7376
if $scope.current_playlist.id == playlist.id
@@ -89,6 +92,12 @@ app.controller 'PlayerCtrl',['$scope', 'AuthFactory', 'ApiFactory', '$sce', '$ro
8992
$scope.last_clicked_song = song
9093
song.selected = true
9194

95+
$scope.softClickSong = (song) ->
96+
if $scope.last_clicked_song
97+
$scope.last_clicked_song.selected = false
98+
$scope.last_clicked_song = song
99+
song.selected = true
100+
92101
$scope.playSong = (index) ->
93102
$scope.current_song = $scope.current_playlist.songs[index]
94103
$scope.last_clicked_song.selected = false
@@ -100,16 +109,26 @@ app.controller 'PlayerCtrl',['$scope', 'AuthFactory', 'ApiFactory', '$sce', '$ro
100109
$rootScope.$broadcast('audio.play')
101110
, 0
102111

103-
$scope.openAddToPlaylistModal = () ->
112+
$scope.openAddToPlaylistModal = (songs, playlists) ->
113+
modalInstance = $modal.open({
114+
templateUrl: '/partial/modal/add_to_playlist'
115+
controller: 'AddToPlaylistCtrl'
116+
resolve: {
117+
songs: ()-> songs
118+
playlists: ()-> playlists
119+
}
120+
})
104121

105122
$scope.rename = () ->
106-
$scope.remove = (song) ->
107-
song_id = song.id
108-
if $scope.current_playlist.id == 'all'
109-
ApiFactory.deleteSong(song_id)
110-
_.each $scope.playlists, (playlist) ->
111-
playlist.songs = _.reject playlist.songs, (song) -> song.id == song_id
112-
$scope.current_playlist.songs = _.without($scope.current_playlist.songs, song)
123+
$scope.remove = (songs) ->
124+
if $scope.current_playlist.id == '-1'
125+
_.each songs, (song) ->
126+
ApiFactory.deleteSong(song.id)
127+
$scope.current_playlist.songs = _.without($scope.current_playlist.songs, song)
128+
else
129+
ApiFactory.removeFromPlaylist(_.pluck(songs, 'id'), $scope.current_playlist.id).then (playlist) ->
130+
$scope.current_playlist = playlist
131+
$scope.current_playlist.songs = _.reject($scope.current_playlist.songs, (song)-> _.has(_.pluck(songs, 'id'), song.id))
113132

114133
$scope.localUpload = (playlist) ->
115134
modalInstance = $modal.open({
@@ -121,4 +140,6 @@ app.controller 'PlayerCtrl',['$scope', 'AuthFactory', 'ApiFactory', '$sce', '$ro
121140
})
122141
modalInstance.result.then (result) ->
123142
console.log result
143+
$scope.selectedSongs = () ->
144+
_.select($scope.current_playlist.songs, (song) -> song.selected)
124145
]

‎app/assets/javascripts/directives.js.coffee

+1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ app.directive('audioPlayer', ($rootScope) ->
3535
$rootScope.$on 'audio.set', (r, file, info, currentNum, totalNum, start_time) ->
3636
playing = !$scope.audio.paused
3737
$scope.audio.src = file
38+
$scope.audio.volume = 0.1
3839
$scope.currentTime = start_time
3940
if playing
4041
a = $scope.audio.play()

‎app/assets/javascripts/modal_controllers.js.coffee

+11
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,15 @@ app.controller 'localUploadCtrl', ['$scope', 'ApiFactory', '$upload', 'AuthFacto
2020
console.log("Error", data)
2121
)
2222
)
23+
]
24+
25+
app.controller 'AddToPlaylistCtrl',['$scope', 'AuthFactory', 'ApiFactory', 'songs', 'playlists', '$modalInstance', ($scope, AuthFactory, ApiFactory, songs, playlists, $modalInstance)->
26+
$scope.songs = songs
27+
$scope.playlists = playlists
28+
$scope.selected = { playlist: playlists[0] }
29+
$scope.cancel = () -> $modalInstance.dismiss()
30+
$scope.save = () ->
31+
ApiFactory.addToPlaylist(_.pluck(songs, 'id'), $scope.selected.playlist.id).then (playlist) ->
32+
$scope.selected.playlist = playlist
33+
$modalInstance.close()
2334
]

‎app/assets/javascripts/services.js.coffee

+4
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ app.factory 'ApiFactory', ['Restangular', (Restangular) ->
3232
)
3333
getPlayback: () ->
3434
Restangular.one('playback').get()
35+
addToPlaylist: (song_ids, playlist_id)->
36+
Restangular.one('playlists', playlist_id).all('add').customPOST({song_ids: song_ids})
37+
removeFromPlaylist: (song_ids, playlist_id) ->
38+
Restangular.one('playlists', playlist_id).all('remove').customPOST({song_ids: song_ids})
3539
}
3640
]
3741
app.factory 'AuthFactory', ['Restangular', '$window', '$q', (Restangular, $window, $q) ->

‎app/assets/stylesheets/pages.css.scss

+8-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ $clouds: #ECF0F1;
44
$wet-asphalt: #34495E;
55
$midnight-blue: #2C3E50;
66
$asbestos: #7F8C8D;
7+
$silver: #BDC3C7;
78

89
body {
910
margin-top: 53px !important;
@@ -26,6 +27,12 @@ body {
2627
overflow-x: hidden;
2728
}
2829

30+
.hoverable {
31+
&:hover {
32+
background-color: $silver;
33+
}
34+
}
35+
2936
#home-page {
3037
//background-color: #2c3e50;
3138
background-image: url("Background.JPG");
@@ -133,7 +140,7 @@ div.oauth-badges {
133140
background-color: $asbestos;
134141
}
135142

136-
form {
143+
form#login-form {
137144
display: block;
138145
padding-top: 270px;
139146
/*background-color: red;*/

‎app/controllers/api/v1/playlists_controller.rb

+13
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,19 @@ def destroy
2121
render json: @playlist.destroy
2222
end
2323

24+
def add
25+
@playlist.song_ids += params[:song_ids]
26+
@playlist.song_ids.uniq!
27+
@playlist.save
28+
render json: @playlist
29+
end
30+
31+
def remove
32+
@playlist.song_ids -= params[:song_ids]
33+
@playlist.save
34+
render json: @playlist
35+
end
36+
2437
private
2538
def playlist_params
2639
params.require(:playlist).permit(:name)

‎app/views/pages/partial/modal/add_to_playlist.html.slim

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.modal-header
2+
h3.modal-title Add Song(s) to Playlist
3+
.modal-body
4+
.row
5+
.col-lg-6
6+
h6 Add:
7+
div ng-repeat='song in songs'
8+
| {{song.name}}
9+
.col-lg-6
10+
h6 To:
11+
select.form-control ng-options='o as o.name for o in playlists' ng-model='selected.playlist'
12+
.modal-footer
13+
button.btn.btn-danger ng-click='cancel()' Cancel
14+
button.btn.btn-primary ng-click='save()' Save

‎app/views/pages/partial/player.html.slim

+25-15
Original file line numberDiff line numberDiff line change
@@ -39,32 +39,42 @@
3939
h3
4040
span ng-show='current_playlist'  {{current_playlist.name}}
4141
span ng-show='!current_playlist' Select a Playlist...
42-
.btn-group.pull-right
43-
button.btn.btn-lg.btn-primary.dropdown-toggle data-toggle='dropdown'
44-
span.fui-plus
45-
| Upload
46-
span.caret
47-
ul.dropdown-menu
48-
li: a href='javascript:void(0)' ng-click='localUpload(playlist)' From your computer
49-
li: a href='javascript:void(0)' ng-click='youtubeImport(playlist)' From YouTube
42+
.pull-right
43+
.btn-group ng-show='selectedSongs().length > 1'
44+
button.btn.btn-lg.btn-info.dropdown-toggle data-toggle='dropdown'
45+
| Bulk Options
46+
span.caret
47+
ul.dropdown-menu
48+
li: a href='javascript:void(0)' ng-click='openAddToPlaylistModal(selectedSongs(), playlists)' Add to Playlist
49+
li: a href='javascript:void(0)' ng-click='remove(selectedSongs())' Remove
50+
.btn-group
51+
button.btn.btn-lg.btn-primary.dropdown-toggle data-toggle='dropdown'
52+
span.fui-plus
53+
| Upload
54+
span.caret
55+
ul.dropdown-menu
56+
li: a href='javascript:void(0)' ng-click='localUpload(playlist)' From your computer
57+
li: a href='javascript:void(0)' ng-click='youtubeImport(playlist)' From YouTube
5058
hr
51-
.row ng-repeat='song in current_playlist.songs' style='padding: 2px;' ng-class="{'selected': song.selected}"
52-
.col-xs-10 ng-click='clickSong(song)'
53-
| {{$index+1}}.
59+
.row.hoverable ng-repeat='song in current_playlist.songs' style='padding: 2px;' ng-class="{'selected': song.selected}"
60+
.col-xs-1
61+
input type='checkbox' ng-model='song.selected' style='margin-top: 12px;'
62+
.col-xs-1
5463
span.fui-play ng-click='playSong($index)'
55-
| {{song.name}}
64+
.col-xs-8 ng-click='clickSong(song)'
65+
| {{song.name}}
5666
.col-xs-2
5767
.btn-group
58-
button.btn.btn-primary.dropdown-toggle data-toggle='dropdown'
68+
button.btn.btn-primary.dropdown-toggle data-toggle='dropdown' ng-click='softClickSong(song)'
5969
| Options
6070
span.caret
6171
ul.dropdown-menu
6272
li
6373
a href='javascript:void(0)' ng-click='playSong($index)' Play
6474
li
65-
a href='javascript:void(0)' ng-click='openAddToPlaylistModal(song, playlists)' Add to Playlist
75+
a href='javascript:void(0)' ng-click='openAddToPlaylistModal([song], playlists)' Add to Playlist
6676
li
6777
a href='javascript:void(0)' ng-click='rename(song)' Rename
6878
li.divider
6979
li
70-
a href='javascript:void(0)' ng-click='remove(song)' Remove
80+
a href='javascript:void(0)' ng-click='remove([song])' Remove

‎config/routes.rb

+3-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212
namespace :api, defaults: {format: 'json'} do
1313
namespace :v1 do
1414
resources :songs
15-
resources :playlists
15+
resources :playlists do
16+
member { post :add ; post :remove }
17+
end
1618
resources :users
1719
resources :playback
1820
end

0 commit comments

Comments
 (0)