';
86 | },
87 | });
88 | };
89 |
90 | info_cover_popover();
91 |
92 | // they want to find the cover for the song
93 | $('.find_cover_art').click(function(ev) {
94 | $('.find_cover_art').replaceWith('');
95 | var lastfm = new LastFM({
96 | apiKey: '4795cbddcdec3a6b3f622235caa4b504',
97 | apiSecret: 'cbe22daa03f35df599746f590bf015a5',
98 | });
99 |
100 | // fetch the cover from last fm by the artist and album
101 | lastfm.album.getInfo({artist: $('#artist').val(), album: $('#album').val()}, {success: function(data) {
102 | if (data.album.image.length > 0 && data.album.image[data.album.image.length - 1]['#text'] !== '') {
103 | // set the image as the preview image
104 | var cover_url = data.album.image[data.album.image.length - 1]['#text'];
105 | $('.img_block').html('');
106 | info_cover_popover();
107 | islastfm = true;
108 | } else {
109 | // cover art could not be found
110 | bootbox.alert('Artwork not found on LastFM');
111 | $('.lastfm_spinner').replaceWith('
');
117 | }, });
118 | });
119 |
120 | // auto correct info button
121 | $('.correct_info').click(function(ev) {
122 | // build the search string
123 | var title = $('#title').val();
124 | var album = $('#album').val();
125 | var artist = $('#artist').val();
126 |
127 | // defailts
128 | var prefix = '/proxy/search?term=';
129 | var suffix = '&entity=song&limit=10' + (country_code) ? '&country=' + country_code : '';
130 |
131 | // call the api with all three first
132 | $.getJSON(prefix + encodeURI([title, album, artist].join(' ')) + suffix, function(data) {
133 | console.log('searched with title and artist and album and found ' + data.resultCount + ' tracks');
134 |
135 | // were there results?
136 | if (data.resultCount) {
137 | foundInfo(data.results);
138 | } else {
139 | // call the api with title and artist
140 | $.getJSON(prefix + encodeURI([title, artist].join(' ')) + suffix, function(data) {
141 | console.log('searched with title and artist and found ' + data.resultCount + ' tracks');
142 |
143 | // were there results?
144 | if (data.resultCount) {
145 | foundInfo(data.results);
146 | } else {
147 | // call the api with only title
148 | $.getJSON(prefix + encodeURI([title].join(' ')) + suffix, function(data) {
149 | console.log('searched with only title and found ' + data.resultCount + ' tracks');
150 | if (data.resultCount) {
151 | foundInfo(data.results);
152 | } else {
153 | bootbox.alert('Unable to find song info on itunes. Maybe try tweaking the title/album/artist so it can be found better.');
154 | }
155 | });
156 | }
157 | });
158 | }
159 | });
160 |
161 | // function to run when song info found
162 | var foundInfo = function(results) {
163 | console.log('Found results:');
164 | console.log(results);
165 |
166 | // only use the first result
167 | var result = results[0];
168 | $('#title').val(result.trackName);
169 | $('#album').val(result.collectionName);
170 | $('#artist').val(result.artistName);
171 |
172 | // set the image as the preview image and upgrade it's size
173 | var cover_url = result.artworkUrl100.replace('100x100', '600x600');
174 | $('.img_block').html('');
175 | info_cover_popover();
176 | islastfm = true;
177 | };
178 | });
179 |
180 | // tie the enter key on the inputs to the save function
181 | $('.edit_form :input').keydown(function(ev) {
182 | // if enter key
183 | if (ev.keyCode == 13) {
184 | save_func();
185 |
186 | // manually hide the modal, because it wasn't called from the button press
187 | $('.bootbox').modal('hide');
188 | }
189 | });
190 |
191 | // open the directory in a file manager
192 | $('.open_dir').click(function(ev) {
193 | var location = $(this).attr('title');
194 | socket.emit('open_dir', location);
195 | });
196 |
197 | // dismiss the modal on backdrop click
198 | $('.bootbox').click(function(ev) {
199 | if (ev.target != this) return;
200 | $('.bootbox').modal('hide');
201 | });
202 |
203 | dropZone = $('body');
204 | var drop_visible = false;
205 | var dragover_handler = function(e) {
206 | e.stopPropagation();
207 | e.preventDefault();
208 | if (!drop_visible) {
209 | $('body').append('
Drop File
');
210 | drop_visible = true;
211 | }
212 | };
213 |
214 | var dropped_handler = function(e) {
215 | drop_visible = false;
216 | dropZone.unbind('dragover', dragover_handler);
217 | dropZone.unbind('drop', dropped_handler);
218 |
219 | // remove the drop file div
220 | $('.dropping_file').remove();
221 |
222 | // stop the event propogating (i.e. don't load the image as the page in the browser)
223 | e.preventDefault();
224 | e.stopPropagation();
225 | if (e.originalEvent.dataTransfer) {
226 | // only if there was more than one file
227 | if (e.originalEvent.dataTransfer.files.length) {
228 | // get the first file
229 | var file = e.originalEvent.dataTransfer.files[0];
230 |
231 | // only if it is an image
232 | if (file.type.indexOf('image') === 0) {
233 | // read the file and set the data onto the preview image
234 | var reader = new FileReader();
235 | reader.onload = function(e) {
236 | filedropdata = e.target.result;
237 | $('.img_block').html('');
238 | info_cover_popover();
239 | };
240 |
241 | reader.readAsDataURL(file);
242 | }
243 | }
244 | }
245 | };
246 |
247 | dropZone.on('dragover', dragover_handler);
248 | dropZone.on('drop', dropped_handler);
249 | }
250 |
--------------------------------------------------------------------------------
/static/js/player/footer.js:
--------------------------------------------------------------------------------
1 | MusicApp.start();
2 |
--------------------------------------------------------------------------------
/static/js/player/infoview.js:
--------------------------------------------------------------------------------
1 | InfoView = Backbone.View.extend({
2 | template: '#current_info_template',
3 | render: function() {
4 | this.$el.html(render(this.template, {song: player.current_song}));
5 | },
6 |
7 | events: {
8 | 'click .colsearch': 'triggerSearch',
9 | 'click .info_cover': 'triggerCover',
10 | 'click .info_options': 'triggerOptions',
11 | },
12 | triggerCover: function(ev) {
13 | showCover($(ev.target).attr('src'));
14 | return false;
15 | },
16 |
17 | triggerOptions: function(ev) {
18 | if (!optionsVisible) {
19 | // clear the options, they selected this indiviual item
20 | clearSelection();
21 |
22 | // add the current selection and display the options
23 | addToSelection(player.playing_id, false);
24 | createOptions(ev.clientX, ev.clientY);
25 | }
26 | else {
27 | hideOptions();
28 | }
29 |
30 | return false;
31 | },
32 |
33 | triggerSearch: function(ev) {
34 | search = $(ev.target).text();
35 | player.updateSearch(search);
36 | },
37 | });
38 |
--------------------------------------------------------------------------------
/static/js/player/models.js:
--------------------------------------------------------------------------------
1 | // this file contains the models/collections in needed by the player
2 |
3 | var PlaylistCollection = Backbone.Collection.extend({
4 | comparator: function(playlist) {
5 | return [playlist.get('editable'), playlist.get('title')];
6 | },
7 |
8 | fetch: function(options) {
9 | socket.emit('fetch_playlists');
10 | },
11 |
12 | getByTitle: function(name) {
13 | for (var i = 0; i < this.models.length; i++) {
14 | if (this.models[i].attributes.title == name) {
15 | return this.models[i];
16 | }
17 | }
18 |
19 | return false;
20 | },
21 |
22 | getBy_Id: function(id) {
23 | for (var i = 0; i < this.models.length; i++) {
24 | if (this.models[i].attributes._id == id) {
25 | return this.models[i];
26 | }
27 | }
28 |
29 | return false;
30 | },
31 | });
32 |
33 | var SongModel = Backbone.Model.extend({
34 | getCover: function() {
35 | if (this.get('is_youtube')) {
36 | return this.attributes.cover_location;
37 | } else if (this.get('cover_location')) {
38 | return 'cover/' + this.attributes.cover_location;
39 | } else {
40 | return 'https://unsplash.it/g/512?random&'+this.attributes._id;
41 | }
42 | },
43 |
44 | isYoutube: function() {
45 | return this.get('is_youtube') === true;
46 | },
47 | });
48 |
49 | var SongCollection = Backbone.Collection.extend({
50 | model: SongModel,
51 |
52 | fetch: function(options) {
53 | socket.emit('fetch_songs');
54 | },
55 |
56 | findBy_Id: function(id) {
57 | for (var i = 0; i < this.models.length; i++) {
58 | if (this.models[i].attributes._id == id) {
59 | return this.models[i];
60 | }
61 | }
62 |
63 | return false;
64 | },
65 |
66 | getByIds: function(playlist) {
67 | if (playlist !== undefined && playlist.songs !== undefined) {
68 | if (playlist._id == 'QUEUE') {
69 | return (player.shuffle_state) ? player.shuffle_pool : player.queue_pool;
70 | }
71 |
72 | songs = [];
73 | for (var i = 0; i < playlist.songs.length; i++) {
74 | var song = this.findBy_Id(playlist.songs[i]._id);
75 | if (song) {
76 | // set the index in the playlist
77 | song.attributes.index = i + 1;
78 | songs.push(song);
79 | }
80 | }
81 |
82 | return songs;
83 | }
84 |
85 | return false;
86 | },
87 |
88 | findItem: function(item) {
89 | for (var i = 0; i < this.models.length; i++) {
90 | if (this.models[i].attributes.title == item.attributes.title &&
91 | this.models[i].attributes.album == item.attributes.album &&
92 | this.models[i].attributes.display_artist == item.attributes.display_artist) {
93 | return this.models[i];
94 | }
95 | }
96 |
97 | return false;
98 | },
99 | });
100 |
--------------------------------------------------------------------------------
/static/js/player/music-search.js:
--------------------------------------------------------------------------------
1 | var search_button = document.getElementById("search-button");
2 | var overlay_search_button = document.getElementById("overlay-search-button");
3 | // Default search state
4 | var search_state = false;
5 | var search_overlay = document.getElementById("search-overlay");
6 | var content = document.getElementById("content");
7 | var wrapper = document.getElementById("wrapper");
8 |
9 | function activateSearch() {
10 | // Show search overlay
11 | search_overlay.style.display = "block";
12 | // Keep search initialised with previously saved search value
13 | // player.updateSearch($("#input").val());
14 | // Keep focus on search
15 | $('#input').val('');
16 | $('#input').focus();
17 | $('#music_ui').addClass('blur');
18 | }
19 |
20 | function deactivateSearch() {
21 | // Hide search overlay
22 | search_overlay.style.display = "none";
23 | // Redirect to our main library
24 | window.location.href = "/#playlist/LIBRARY";
25 | $('#music_ui').removeClass('blur');
26 | }
27 |
28 | // Add instant search to our custom search feature
29 | $(".search-input").on("keyup", function (evt) {
30 | player.updateSearch(evt.target.value);
31 | });
32 |
33 | search_button.addEventListener("click", function () {
34 |
35 | // Display search results under our search input
36 | search_overlay.appendChild(content);
37 | search_state = true;
38 | activateSearch();
39 | });
40 | overlay_search_button.addEventListener("click", function () {
41 | search_overlay.removeChild(content);
42 | wrapper.appendChild(content);
43 | search_state = false;
44 | deactivateSearch();
45 | });
46 |
--------------------------------------------------------------------------------
/static/js/player/onload.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function() {
2 | player.setScubElem($('#scrub_bar'));
3 |
4 | // variable for keeping track of seeking
5 | var is_seeking = false;
6 | /*
7 | * use this flag to mark a keydown has happened before a keyup happens
8 | * this is to work with a stupid bug in windows that lets the desktop-level
9 | * workspace change shortcuts leak keys (like right/left arrow) though to the
10 | * application...
11 | */
12 | var prevNextDown = false;
13 | var seek_interval = 0;
14 | var HOLD_TIME = 500;
15 | $('body').keydown(function(event) {
16 | // don't fire the controls if the user is editing an input
17 | if (event.target.localName == 'input') {
18 | return;
19 | }
20 |
21 | if (event.which == 37 || event.which == 39) {
22 | prevNextDown = true;
23 | }
24 |
25 | switch (event.which){
26 | case 191: // '?' key
27 | case 83: // 's' key
28 | // focus search box
29 | $('.search-input').select();
30 | return false;
31 | case 32: // space key
32 | player.togglePlayState();
33 | event.preventDefault();
34 | break;
35 | case 39: // right key
36 | // block to only run on first key down
37 | if (!seek_interval) {
38 | is_seeking = false;
39 |
40 | // call function every HOLD_TIME, if we don't get called, then it wasn't held down
41 | seek_interval = setInterval(function() {
42 | is_seeking = true;
43 | player.PlayMethodAbstracter.setCurrentTime(player.PlayMethodAbstracter.getCurrentTime() + 5);
44 | }, HOLD_TIME);
45 | }
46 |
47 | event.preventDefault();
48 | break;
49 | case 37: // left key
50 | // block to only run on first key down
51 | if (!seek_interval) {
52 | is_seeking = false;
53 |
54 | // call function every HOLD_TIME, if we don't get called, then it wasn't held down
55 | seek_interval = setInterval(function() {
56 | is_seeking = true;
57 | player.PlayMethodAbstracter.setCurrentTime(player.PlayMethodAbstracter.getCurrentTime() - 5);
58 | }, HOLD_TIME);
59 | }
60 |
61 | event.preventDefault();
62 | break;
63 | case 38: // up key
64 | MusicApp.router.songview.moveSelection('up');
65 | event.preventDefault();
66 | break;
67 | case 40: // down key
68 | MusicApp.router.songview.moveSelection('down');
69 | event.preventDefault();
70 | break;
71 | case 13: // enter key
72 | // play the last selected item
73 | player.playSong(lastSelection);
74 |
75 | // add it to the history and reset the history
76 | player.play_history.unshift(lastSelection);
77 | player.play_history_idx = 0;
78 | }
79 | });
80 |
81 | $('body').keyup(function(event) {
82 | // don't fire the controls if the user is editing an input
83 | if (event.target.localName == 'input') {
84 | return;
85 | }
86 |
87 | // left or right repectively
88 | if (event.which == 37 || event.which == 39) {
89 | // clear the seeking interval
90 | clearInterval(seek_interval);
91 | seek_interval = 0;
92 |
93 | // decide if we should move to the next/prev track
94 | if (prevNextDown) {
95 | prevNextDown = false;
96 |
97 | // don't go next if we are seeking
98 | if (!is_seeking) {
99 | // based on the keycode, call prev/next on the player
100 | event.which == 37 ? player.prevTrack() : player.nextTrack();
101 | }
102 | }
103 |
104 | // prevent the event from propagating
105 | event.preventDefault();
106 | }
107 | });
108 |
109 | // disable the options on scroll
110 | $('#content').scroll(hideOptions);
111 |
112 | // add click handler on menu items
113 | $('#soundcloud_fetch').click(function() {
114 | bootbox.prompt({
115 | title: 'Enter the SoundCloud URL',
116 | callback: function(result) {
117 | if (result !== null) {
118 | socket.emit('soundcloud_download', {url: result});
119 | }
120 | },
121 | });
122 | });
123 |
124 | $('#youtube_fetch').click(function() {
125 | bootbox.prompt({
126 | title: 'Enter the Youtube URL (also works for playlist downloads)',
127 | callback: function(result) {
128 | if (result !== null) {
129 | socket.emit('youtube_download', {url: result});
130 | }
131 | },
132 | });
133 | });
134 |
135 | $('#open_settings').click(function() {
136 | showSettings();
137 | });
138 |
139 | // ask them if they would like to view the settings on first load
140 | if (!music_dir_set) {
141 | showSettings('Welcome! Please ensure your music directory is correct.');
142 | }
143 |
144 | // scan library handlers
145 | $('#soft_scan').click(function() {
146 | socket.emit('start_scan');
147 | });
148 |
149 | $('#hard_scan').click(function() {
150 | socket.emit('start_scan_hard');
151 | });
152 |
153 | // sync button handlers
154 | $('#load_sync_view').click(function() {
155 | MusicApp.router.syncview = new SyncView();
156 | MusicApp.contentRegion.show(MusicApp.router.syncview);
157 | });
158 |
159 | // setup messenger
160 | Messenger.options = {
161 | extraClasses: 'messenger-fixed messenger-on-top',
162 | theme: 'air',
163 | messageDefaults: {
164 | showCloseButton: true,
165 | },
166 | };
167 | });
168 |
--------------------------------------------------------------------------------
/static/js/player/selection_options.js:
--------------------------------------------------------------------------------
1 | // these functions handle selection of songs and drawing the (right click) context menu
2 |
3 | var optionsVisible = false;
4 | var selectedItems = [];
5 | var recentPlaylists = [];
6 | var lastSelection = '';
7 | function createOptions(x, y) {
8 | // calculate if the menu should 'drop up'
9 | var dropup = '';
10 | if (y + 300 > $(window).height()) {
11 | dropup = 'dropup';
12 | }
13 |
14 | var foundYoutube = false;
15 | var foundNormal = false;
16 | selectedItems.forEach(function(item) {
17 | var model = player.song_collection.findBy_Id(item);
18 | if (model.isYoutube()) {
19 | foundYoutube = true;
20 | } else {
21 | foundNormal = true;
22 | }
23 | });
24 |
25 | var type = foundYoutube ? (foundNormal ? 'mix' : 'youtube') : 'normal';
26 |
27 | $('.options_container').html(render('#options_template', {
28 | playlists: player.playlist_collection.models,
29 | current_playlist: player.playlist,
30 | recents: recentPlaylists,
31 | dropup: dropup,
32 | type: type,
33 | numSelected: selectedItems.length,
34 | }))
35 | .css({top: y + 'px', left: x + 'px'});
36 | $('.add_to_queue').click(function(ev) {
37 | for (var x = 0; x < selectedItems.length; x++) {
38 | player.play_history.unshift(selectedItems[x]);
39 | player.play_history_idx++;
40 | }
41 |
42 | hideOptions();
43 | });
44 |
45 | $('.add_to_playlist').click(function(ev) {
46 | id = $(ev.target).closest('li').attr('id');
47 | socket.emit('add_to_playlist', {add: selectedItems, playlist: id});
48 | hideOptions();
49 |
50 | // add to recents
51 | var this_playlist = player.playlist_collection.getBy_Id(id);
52 |
53 | // take it out if it's in the recents
54 | for (var x = 0; x < recentPlaylists.length; x++) {
55 | if (recentPlaylists[x].attributes._id == this_playlist.attributes._id) {
56 | // remove it from recents
57 | recentPlaylists.splice(x, 1);
58 | }
59 | }
60 |
61 | // add to the start of recents
62 | recentPlaylists.unshift(this_playlist);
63 |
64 | // remove if too many
65 | if (recentPlaylists.length > 3) {
66 | recentPlaylists.pop();
67 | }
68 | });
69 |
70 | $('.remove_from_playlist').click(function(ev) {
71 | id = $(ev.target).closest('li').attr('id');
72 |
73 | // get a handle on the playlist
74 | for (var i = 0; i < selectedItems.length; i++) {
75 | $('#' + selectedItems[i]).remove();
76 |
77 | // remove the song from the queue_pool
78 | for (var j = 0; j < player.songs.length; j++) {
79 | if (player.songs[j].attributes._id == selectedItems[i]) {
80 | // remove the element
81 | player.songs.splice(j, 1);
82 | }
83 | }
84 | }
85 |
86 | // fix bug with infinite scroll having elements removed
87 | if (MusicApp.router.songview.how_many_drawn > player.songs.length) {
88 | MusicApp.router.songview.how_many_drawn = player.songs.length;
89 | }
90 |
91 | // update the server
92 | socket.emit('remove_from_playlist', {remove: selectedItems, playlist: id});
93 | hideOptions();
94 | });
95 |
96 | $('.hard_rescan').click(function(ev) {
97 | socket.emit('hard_rescan', {items: selectedItems});
98 | hideOptions();
99 | });
100 |
101 | $('.rewrite_tags').click(function(ev) {
102 | socket.emit('rewrite_tags', {items: selectedItems});
103 | hideOptions();
104 | });
105 |
106 | $('.view_info').click(function(ev) {
107 | showInfoView(selectedItems);
108 | hideOptions();
109 | });
110 |
111 | $('.similar_songs').click(function(ev) {
112 | // use the first selected option
113 | var song = player.song_collection.findBy_Id(lastSelection);
114 |
115 | // send it to the server to start the search
116 | socket.emit('similar_songs', {title: song.attributes.title, artist: song.attributes.display_artist, _id: song.attributes._id});
117 |
118 | // notify the user that we are looking for a mix
119 | Messenger().post('Searching for similar songs...');
120 |
121 | // hide the context menu
122 | hideOptions();
123 | });
124 |
125 | $('.save_youtube').click(function(ev) {
126 | var results = selectedItems.map(function(id) {
127 | return player.song_collection.findBy_Id(id).attributes;
128 | });
129 |
130 | socket.emit('youtube_import', {songs: results});
131 |
132 | // hide the context menu
133 | hideOptions();
134 | });
135 |
136 | $('.hide_options').click(function(ev) {
137 | console.log("closing");
138 | hideOptions();
139 | });
140 |
141 | optionsVisible = true;
142 | }
143 |
144 | function hideOptions() {
145 | $('.options_container').css({'top:': '-1000px', left: '-1000px'});
146 | optionsVisible = false;
147 | }
148 |
149 | function addToSelection(id, clearIfIn) {
150 | lastSelection = id;
151 | for (var i = 0; i < selectedItems.length; i++) {
152 | if (selectedItems[i] == id) {
153 | if (clearIfIn) {
154 | selectedItems.splice(i, 1);
155 | $('#' + id).removeClass('selected');
156 | }
157 |
158 | return;
159 | }
160 | }
161 |
162 | selectedItems.push(id);
163 | $('#' + id).addClass('selected');
164 | }
165 |
166 | function delFromSelection(id) {
167 | for (var i = 0; i < selectedItems.length; i++) {
168 | if (selectedItems[i] == id) {
169 | selectedItems.splice(i, 1);
170 | $('#' + id).removeClass('selected');
171 | }
172 | }
173 | }
174 |
175 | function selectBetween(id, id2) {
176 | loc1 = indexInSongView(id);
177 | loc2 = indexInSongView(id2);
178 |
179 | // make sure loc1 is less than loc2
180 | if (loc1 > loc2) {
181 | temp = loc1;
182 | loc1 = loc2;
183 | loc2 = temp;
184 | }
185 |
186 | for (var i = loc1; i <= loc2; i++) {
187 | addToSelection(player.songs[i].attributes._id, false);
188 | }
189 | }
190 |
191 | function indexInSongView(id) {
192 | for (var i = 0; i < player.songs.length; i++) {
193 | if (player.songs[i].attributes._id == id) {
194 | return i;
195 | }
196 | }
197 |
198 | return -1;
199 | }
200 |
201 | function clearSelection() {
202 | selectedItems = [];
203 | $('tr').removeClass('selected');
204 | }
205 |
--------------------------------------------------------------------------------
/static/js/player/settingsview.js:
--------------------------------------------------------------------------------
1 | var save_func = function() {
2 | music_dir = $('#music_dir_val').val();
3 | country_code = $('#country_code').val();
4 | socket.emit('update_settings', {music_dir: music_dir, country_code: country_code});
5 | };
6 |
7 | var showSettings = function(message) {
8 | // render the template
9 | var options = {
10 | music_dir: music_dir,
11 | country_code: country_code,
12 | message: message,
13 | };
14 | var body = render('#settings_template', options);
15 |
16 | // show the dialog
17 | bootbox.dialog({
18 | title: 'Settings',
19 | message: body,
20 | buttons: {
21 | success: {
22 | label: 'Save',
23 | className: 'btn-success',
24 | callback: save_func,
25 | },
26 | main: {
27 | label: 'Close Without Saving',
28 | className: 'btn-default',
29 | },
30 | },
31 | });
32 | };
33 |
--------------------------------------------------------------------------------
/static/js/player/sidebarview.js:
--------------------------------------------------------------------------------
1 | SidebarView = Backbone.View.extend({
2 | template: '#sidebar_template',
3 | render: function () {
4 | var editable = player.playlist_collection.where({
5 | editable: true
6 | });
7 | var fixed = player.playlist_collection.where({
8 | editable: false
9 | });
10 | this.setElement(render(this.template, {
11 | title: 'Playlists',
12 | search: player.searchText,
13 | editable: editable,
14 | fixed: fixed
15 | }));
16 | },
17 |
18 | events: {
19 | 'click .add_playlist': 'addPlaylist',
20 | 'click .search-youtube': 'searchYoutube',
21 | 'keyup .search-input': 'searchItems',
22 | },
23 | addPlaylist: function () {
24 | bootbox.prompt('Playlist title?', function (result) {
25 | if (result !== null && result !== '') {
26 | socket.emit('create_playlist', {
27 | title: result,
28 | songs: []
29 | });
30 | }
31 | });
32 | },
33 |
34 | searchItems: function () {
35 | searchText = $('.search-input').val();
36 | player.updateSearch(searchText);
37 | return true;
38 | },
39 |
40 | searchYoutube: function () {
41 | var searchText = $('.search-input').val();
42 | socket.emit('youtube_search', {
43 | search: searchText
44 | });
45 | Messenger().post('Searching youtube for songs...');
46 | },
47 | });
48 |
49 | SettingsBarView = Backbone.View.extend({
50 | template: '#settings_bar_template',
51 | render: function () {
52 | this.$el.html(render(this.template, {
53 | vol: player.getVolume()
54 | }));
55 | _.defer(function () {
56 | var volElem = $('#vol_bar');
57 | if (volElem.length > 0) {
58 | player.setVolElem(volElem);
59 | }
60 | });
61 | },
62 |
63 | events: {
64 | 'click #remote_setup': 'openOptions',
65 | },
66 | openOptions: function () {
67 | bootbox.dialog({
68 | message: render('#control_template', {
69 | comp_name: player.comp_name,
70 | host: window.location.host
71 | }),
72 | title: 'Setup Remote Control',
73 | buttons: {
74 | danger: {
75 | label: 'Cancel',
76 | className: 'btn-danger',
77 | },
78 | success: {
79 | label: 'Save',
80 | className: 'btn-success',
81 | callback: function () {
82 | comp_name = $('#comp_name_input').val();
83 | player.setCompName(comp_name);
84 | },
85 | },
86 | },
87 | });
88 | },
89 | });
90 |
--------------------------------------------------------------------------------
/static/js/player/socket.js:
--------------------------------------------------------------------------------
1 | // soccet connection and events
2 | socket.on('connect', function() {
3 | console.log('Socket connected');
4 |
5 | // notify the server we have connected
6 | socket.emit('player_page_connected');
7 |
8 | // let the server know our remote name (if set)
9 | if (player.comp_name) {
10 | socket.emit('set_comp_name', {name: player.comp_name});
11 | }
12 | });
13 |
14 | socket.on('songs', function(data) {
15 | player.song_collection.add(data.songs);
16 | loadedRestart('songs');
17 | });
18 |
19 | socket.on('playlists', function(data) {
20 | player.playlist_collection.reset();
21 | player.playlist_collection.add(data.playlists);
22 |
23 | // redraw the sidebar
24 | MusicApp.router.sidebar();
25 |
26 | // when they are viewing a playlist that has been updated, refresh it
27 | data.playlists.forEach(function(playlist, index) {
28 | if (player.playlist &&
29 | player.playlist.title === playlist.title &&
30 | player.playlist.songs.length !== playlist.songs.length) {
31 | // trigger a re-route, this will refresh the songview
32 | MusicApp.router.playlist(playlist._id);
33 | }
34 | });
35 |
36 | // restart the router if we are loading for the first time
37 | loadedRestart('playlists');
38 | });
39 |
40 | // mask to either update or initialise a messenger
41 | var updateMask = function(messenger, message) {
42 | if (messenger) {
43 | messenger.update(message);
44 | } else {
45 | messenger = Messenger().post(message);
46 | }
47 |
48 | return messenger;
49 | };
50 |
51 | var SCMessenger = null;
52 | socket.on('sc_update', function(data) {
53 | console.log(data);
54 | if (data.type == 'started') {
55 | SCMessenger = Messenger().post('Starting download from SoundCloud of ' + data.count + ' tracks' + (data.not_streamable > 0 ? ' (' + data.not_streamable + ' not streamable)' : ''));
56 | } else if (data.type == 'added') {
57 | // it came with a song
58 | player.song_collection.add(data.content);
59 |
60 | // show an updated message
61 | var msg = 'song ' + data.completed + ' out of ' + data.count;
62 | if (data.complete == data.count) {
63 | msg = 'last song of SoundCloud download';
64 | }
65 |
66 | SCMessenger = updateMask(SCMessenger, 'Added ' + msg + ' (' + data.content.title + ')');
67 |
68 | // grab the soundcloud playlist from the collection
69 | var sc_plist = player.playlist_collection.getByTitle('SoundCloud');
70 |
71 | // if it existed, do something, otherwise wait for the addPlaylist event
72 | if (sc_plist) {
73 | sc_plist = sc_plist.attributes;
74 |
75 | // add the track to the soundcloud playlist
76 | sc_plist.songs.push({_id: data.content._id});
77 |
78 | // render if we are on the SoundCloud playlist
79 | if (player.playlist.title == 'SoundCloud') {
80 | // update the model data
81 | player.playlist = sc_plist;
82 | player.songs = player.song_collection.getByIds(player.playlist);
83 | player.queue_pool = player.songs.slice(0);
84 | player.genShufflePool();
85 |
86 | // resort the model data
87 | player.resortSongs();
88 | redrawSongsChangedModel();
89 | }
90 | }
91 |
92 | // add the track to the library playlist
93 | addToLibraryPlaylist(data.content._id);
94 | } else if (data.type == 'skipped') {
95 | SCMessenger = updateMask(SCMessenger, 'Skipped song ' + data.completed + '. Unable to read from SoundCloud');
96 | } else if (data.type == 'error') {
97 | SCMessenger = updateMask(SCMessenger, 'Soundcloud track already exists');
98 | }
99 | });
100 |
101 | var YTMessenger = null;
102 | socket.on('yt_update', function(data) {
103 | console.log(data);
104 | if (data.type == 'started') {
105 | YTMessenger = Messenger().post('Starting download from Youtube');
106 | } else if (data.type == 'added') {
107 | player.song_collection.add(data.content);
108 | YTMessenger = updateMask(YTMessenger, 'Added ' + data.content.title);
109 | var yt_plist = player.playlist_collection.getByTitle('Youtube');
110 | if (yt_plist) {
111 | yt_plist = yt_plist.attributes;
112 |
113 | // add the track to the youtube playlist
114 | yt_plist.songs.push({_id: data.content._id});
115 |
116 | // if the user currently has the youtube playlist focussed, refresh it
117 | if (player.playlist.title == 'Youtube') {
118 | // update the model data
119 | player.playlist = yt_plist;
120 | player.songs = player.song_collection.getByIds(player.playlist);
121 | player.queue_pool = player.songs.slice(0);
122 | player.genShufflePool();
123 |
124 | // resort the model data
125 | player.resortSongs();
126 |
127 | // redraw the songs view
128 | redrawSongsChangedModel();
129 | }
130 | }
131 |
132 | // add the track to the library playlist
133 | addToLibraryPlaylist(data.content._id);
134 | } else if (data.type == 'error') {
135 | YTMessenger = updateMask(YTMessenger, data.content);
136 | } else if (data.type === 'updated') {
137 | YTMessenger = updateMask(YTMessenger, 'Updated ' + data.content.title);
138 | songUpdated([data]);
139 | }
140 | });
141 |
142 | var SongMessenger = null;
143 | socket.on('song_update', function(data) {
144 | console.log('Updating song info');
145 | songUpdated(data);
146 | });
147 |
148 | var ScanMessenger = null;
149 | var ScanTemplate = 'Scanned {{completed}} out of {{count}}{% if details %}: {{details}}{% endif %}';
150 | socket.on('scan_update', function(data) {
151 | console.log(data);
152 | if (ScanMessenger === null) {
153 | ScanMessenger = Messenger().post(swig.render(ScanTemplate, {locals: data}));
154 | } else {
155 | ScanMessenger.update(swig.render(ScanTemplate, {locals: data}));
156 | }
157 |
158 | // do we need to remove it first?
159 | if (data.type == 'update') {
160 | // remove the track
161 | player.song_collection.remove(player.song_collection.where({_id: data.doc._id}));
162 | }
163 |
164 | // add the track
165 | player.song_collection.add(data.doc);
166 |
167 | // add the id to the library
168 | if (data.type == 'add') {
169 | addToLibraryPlaylist(data.doc._id);
170 | }
171 | });
172 |
173 | // for when the sync between servers has progressed
174 | var SyncMessenger = null;
175 | var SyncTemplate = 'Synced {{completed}} out of {{count}}{% if content %} - Added {{content.title}}{% endif %}';
176 | socket.on('sync_update', function(data) {
177 | // log the sync data to the developer tools
178 | console.log(data);
179 |
180 | if (SyncMessenger === null) {
181 | SyncMessenger = Messenger().post(swig.render(SyncTemplate, {locals: data}));
182 | } else {
183 | SyncMessenger.update(swig.render(SyncTemplate, {locals: data}));
184 | }
185 |
186 | // add the track to the songs collection
187 | player.song_collection.add(data.content);
188 |
189 | // add the id to the library
190 | if (data.type == 'add') {
191 | addToLibraryPlaylist(data.content._id);
192 | }
193 |
194 | // if it's completed, refresh the playlists
195 | if (data.completed == data.count) {
196 | socket.emit('fetch_playlists');
197 | }
198 | });
199 |
200 | // for when the durations are added
201 | socket.on('duration_update', function(data) {
202 | player.song_collection.where({_id: data._id})[0].attributes.duration = data.new_duration;
203 | });
204 |
205 | // remote controll events
206 | var CommandMessenger = null;
207 | var CommandTemplate = 'Received command \'{{command}}\'.';
208 | socket.on('command', function(data) {
209 | var command = data.command;
210 |
211 | // show command
212 | if (CommandMessenger === null) {
213 | CommandMessenger = Messenger().post(swig.render(CommandTemplate, {locals: data}));
214 | } else {
215 | CommandMessenger.update(swig.render(CommandTemplate, {locals: data}));
216 | }
217 |
218 | // run command
219 | switch (command){
220 | case 'next':
221 | player.nextTrack();
222 | break;
223 | case 'prev':
224 | player.prevTrack();
225 | break;
226 | case 'playpause':
227 | player.togglePlayState();
228 | break;
229 | default:
230 | break;
231 | }
232 | });
233 |
234 | // similar songs data received
235 | socket.on('similar_songs', function(data) {
236 | if (data.error) {
237 | Messenger().post('Error generating mix, see log for more info');
238 | } else {
239 | if (data.songs.length === 0) {
240 | Messenger().post('Error generating mix, lastfm failed to find similar songs');
241 | } else {
242 | // map them to models we understand
243 | var songsConverted = data.songs.map(function (song) {
244 | // remove the song from the song collection if it already exists
245 | if (song.youtubeId && song.youtubeId.length > 0) {
246 | player.song_collection.remove(
247 | player.song_collection.where({youtube_id: song.youtubeId})
248 | );
249 | }
250 |
251 | return {
252 | _id: 'YOUTUBE_' + song.youtubeId,
253 | title: song.title,
254 | album: song.album,
255 | artist: song.artist,
256 | albumartist: song.artist,
257 | display_artist: song.artist,
258 | genre: song.genre,
259 | cover_location: song.coverUrl,
260 | disc: song.discNumber,
261 | track: song.trackNumber,
262 | duration: 0,
263 | play_count: 0,
264 | is_youtube: true,
265 | youtube_id: song.youtubeId,
266 | };
267 | });
268 |
269 | // add the tracks into the song_collection
270 | // NOTE: this doesn't add them to the library playlist
271 | player.song_collection.add(songsConverted);
272 |
273 | // instruct the player to create a view for the mix
274 | player.showMix(data.title, songsConverted);
275 |
276 | // update the url without navigating
277 | MusicApp.router.navigate(data.url, true);
278 | }
279 | }
280 | });
281 |
282 | // add a new playlist
283 | socket.on('addPlaylist', function(data) {
284 | // add the playlist to the collection
285 | player.playlist_collection.add(data);
286 |
287 | // redraw the sidebar
288 | MusicApp.router.sidebar();
289 | });
290 |
291 | // generic info message reciever
292 | socket.on('message', function(data) {
293 | Messenger().post(data.message);
294 | });
295 |
296 | function redrawSongsChangedModel() {
297 | MusicApp.router.songview.render();
298 | }
299 |
300 | function redrawInfoView() {
301 | MusicApp.infoRegion.currentView.render();
302 | }
303 |
304 | function addToLibraryPlaylist(id) {
305 | var libraryPlaylist = player.playlist_collection.where({_id: 'LIBRARY'})[0].attributes;
306 | libraryPlaylist.songs.push({_id: id});
307 |
308 | // if they are focussed on the Library playlist, refresh it
309 | if (player.playlist.title == 'Library') {
310 | // update the model data
311 | player.playlist = libraryPlaylist;
312 | player.songs = player.song_collection.getByIds(player.playlist);
313 | player.queue_pool = player.songs.slice(0);
314 | player.genShufflePool();
315 |
316 | // resort the model data
317 | player.resortSongs();
318 | redrawSongsChangedModel();
319 | }
320 | }
321 |
322 | function songUpdated(data) {
323 |
324 | // iterate over tracks and update them
325 | for (var x = 0; x < data.length; x++) {
326 | // remove the track
327 | player.song_collection.remove(player.song_collection.where({_id: data[x]._id}));
328 |
329 | // add the track
330 | player.song_collection.add(data[x]);
331 |
332 | // if it was the current track, update the player reference
333 | if (data[x]._id == player.current_song.attributes._id) {
334 | // refetch it from the song collection
335 | player.current_song = player.song_collection.where({_id: player.current_song.attributes._id})[0];
336 | }
337 | }
338 |
339 | // regenerate the list of current songs
340 | player.songs = player.song_collection.getByIds(player.playlist);
341 | player.queue_pool = player.songs.slice(0);
342 | player.genShufflePool();
343 |
344 | // resort the model data
345 | player.resortSongs();
346 |
347 | // redraw the view
348 | redrawSongsChangedModel();
349 |
350 | // redraw info view
351 | redrawInfoView();
352 | }
353 |
--------------------------------------------------------------------------------
/static/js/player/songview.js:
--------------------------------------------------------------------------------
1 | SongView = Backbone.View.extend({
2 | template: '#song_template',
3 | render: function() {
4 | var self = this;
5 |
6 | // cache scrolltop (incase this is the second render, see bottom of function)
7 | var tmp_scrolltop = this.scrollTop;
8 |
9 | // calculate the duration
10 | var totalDuration = 0;
11 | for (var song = 0; song < player.songs.length; song++) {
12 | totalDuration += parseInt(player.songs[song].attributes.duration) || 0;
13 | }
14 |
15 | // render the view
16 | this.$el.html(render(this.template, {
17 | title: player.playlist.title,
18 | editable: player.playlist.editable,
19 | is_youtube: player.playlist.is_youtube,
20 | _id: player.playlist._id,
21 | sort_col: player.sort_col,
22 | sort_asc: player.sort_asc,
23 | songs: player.songs,
24 | numSongs: player.songs.length,
25 | totalDuration: prettyPrintSecondsorNA(totalDuration),
26 | }));
27 | this.$el.addClass('custom_scrollbar');
28 |
29 | // add scroll event handler
30 | this.scrollElem = player.onMobile ? $('#wrapper') : this.$el;
31 | this.scrollElem.scroll(function() {
32 | MusicApp.router.songview.renderSong();
33 | });
34 |
35 | // logic to manually order the songs in a playlist
36 | if (player.playlist.editable && // playlist is editable
37 | // it is sorted in a way that makes sense for sorting
38 | (player.sort_col === null && player.sort_asc === null)) {
39 | this.$el.find('.song_table tbody').sortable({
40 | delay: 100,
41 | items: 'tr',
42 | helper: fixHelper,
43 | update: function(event, ui) {
44 | // get where the item has moved from - to
45 | var item = player.song_collection.findBy_Id(ui.item.attr('id'));
46 | var oldIndex = item.attributes.index - 1;
47 | var newIndex = self.lastmin + ui.item.index() - 1;
48 |
49 | // remove the item from it's old place
50 | item = player.playlist.songs.splice(oldIndex, 1)[0];
51 |
52 | // add the item into it's new place
53 | player.playlist.songs.splice(newIndex, 0, item);
54 |
55 | // refresh the songs array from the playlist
56 | player.songs = player.song_collection.getByIds(player.playlist);
57 |
58 | // send the data back to the server
59 | socket.emit('song_moved_in_playlist', {
60 | playlist_id: player.playlist._id,
61 | oldIndex: oldIndex,
62 | newIndex: newIndex,
63 | });
64 | },
65 | });
66 | }
67 |
68 | // set the defaults and start rendering songs
69 | // init the processing variable
70 | this.processing = false;
71 |
72 | // content height
73 | this.contentHeight = $('#content').height();
74 |
75 | // get the spacers
76 | this.top_spacer = this.$el.find('#top-spacer');
77 | this.bottom_spacer = this.$el.find('#bottom-spacer');
78 |
79 | // height of one item
80 | this.individual_height = 42;
81 |
82 | // how many to show at a time
83 | this.how_many_drawn = Math.ceil(window.innerHeight / this.individual_height) * 2;
84 | if (this.how_many_drawn > player.songs.length) {
85 | this.how_many_drawn = player.songs.length;
86 | }
87 |
88 | // initialise the lastmin and lastmax
89 | this.lastmin = 0;
90 | if (player.songs.length > 0) {
91 | this.lastmin = 1;
92 | }
93 |
94 | this.lastmax = 0;
95 |
96 | // if the viewport has been drawn at least once
97 | self.drawn_full = false;
98 |
99 | // height of number drawn
100 | this.height_of_drawn = this.how_many_drawn * this.individual_height;
101 |
102 | // how high is the table in total
103 | this.total_table_height = player.songs.length * this.individual_height;
104 |
105 | // precompile the song rendering tempalte
106 | this.song_template = swig.compile($('#song_item').html());
107 |
108 | // default meta height until the defered function below evaluates
109 | this.meta_height = 40;
110 | _.defer(function() {
111 | // get hight of elems above table body incl header row
112 | self.meta_height = $('.playlist_meta').height() + 40;
113 | if (player.onMobile) {
114 | // mobile view has the playlists section in the scrollable view, add it to the meta_height
115 | self.meta_height += $('#sidebar').height();
116 | }
117 |
118 | // draw the songs
119 | self.renderSong();
120 | });
121 |
122 | // if they have already rendered this, scroll to last postition
123 | if (this.scrollTop) {
124 | _.defer(function() {
125 | self.scrollElem.animate({scrollTop: tmp_scrolltop + 'px'},
126 | 0);
127 | });
128 | }
129 | },
130 |
131 | events: {
132 | 'click .colsearch': 'triggerSearch',
133 | 'click thead > tr': 'triggerSort',
134 | 'click tbody > tr': 'triggerSong',
135 | 'click .options': 'triggerOptions',
136 | 'contextmenu td': 'triggerOptions',
137 | 'click .cover': 'triggerCover',
138 | 'click .rename_playlist': 'renamePlaylist',
139 | 'click .delete_playlist': 'deletePlaylist',
140 | },
141 |
142 | triggerSearch: function(ev) {
143 | var search = $(ev.target).text();
144 | player.updateSearch(search);
145 | },
146 |
147 | triggerSort: function(ev) {
148 | var column_name = $(ev.target).closest('th').attr('class').replace('_th', '');
149 | console.log(column_name);
150 | player.sortSongs(column_name);
151 | this.render();
152 | },
153 |
154 | triggerSong: function(ev) {
155 | if ($(ev.target).hasClass('options') || $(ev.target).hasClass('colsearch')) {
156 | return;
157 | }
158 |
159 | id = $(ev.target).closest('tr').attr('id');
160 | hideOptions();
161 | if (ev.ctrlKey) {
162 | // ctrlKey pressed, add to selection
163 | addToSelection(id, true);
164 | } else if (ev.shiftKey) {
165 | // shiftkey pressed, add to selection
166 | selectBetween(id, lastSelection);
167 | } else {
168 | // just play the song
169 | clearSelection();
170 | player.queue_pool = player.songs.slice(0);
171 | player.playSong(id, false);
172 | player.genShufflePool();
173 |
174 | // add the song to the history and reset it to the top
175 | player.play_history.unshift(id);
176 | player.play_history_idx = 0;
177 | }
178 | },
179 |
180 | triggerOptions: function(ev) {
181 | if (!optionsVisible) {
182 | id = $(ev.target).closest('tr').attr('id');
183 | if ($.inArray(id, selectedItems) == -1) {
184 | // right click on non-selected item should select only that item
185 | clearSelection();
186 | }
187 |
188 | addToSelection(id, false);
189 | createOptions(ev.clientX, ev.clientY);
190 | } else {
191 | hideOptions();
192 | }
193 |
194 | return false;
195 | },
196 |
197 | triggerCover: function(ev) {
198 | showCover($(ev.target).attr('src'));
199 | return false;
200 | },
201 |
202 | // move the selection up and down
203 | moveSelection: function(direction) {
204 | var index_in_queue = player.findSongIndex(lastSelection);
205 | var new_index = index_in_queue || 0;
206 | if (direction == 'up' && index_in_queue - 1 >= 0) {
207 | new_index--;
208 | } else if (direction == 'down' && index_in_queue + 1 < player.queue_pool.length) {
209 | new_index++;
210 | }
211 |
212 | var newly_selected = player.queue_pool[new_index];
213 |
214 | // get the offset
215 | var new_item = $('#' + newly_selected.attributes._id);
216 | var offset = new_item.offset();
217 |
218 | // it is actually in the view
219 | if (offset !== undefined) {
220 | // do we need to scroll to show the full item?
221 | var doc_height = $(document).height();
222 |
223 | // how far past the top minus navbar
224 | var top_diff = offset.top - 51;
225 |
226 | // how far past the bottom plus control bar and height of element
227 | var bottom_diff = offset.top - doc_height + 63 + this.individual_height;
228 | if (top_diff <= 0) {
229 | // move one item up
230 | this.$el.scrollTop(this.$el.scrollTop() - this.individual_height);
231 | } else if (bottom_diff > 0) {
232 | // move one item down
233 | this.$el.scrollTop(this.$el.scrollTop() + this.individual_height);
234 | }
235 | }
236 |
237 | // remove the old selection
238 | if (index_in_queue !== null) {
239 | delFromSelection(player.queue_pool[index_in_queue].attributes._id);
240 | }
241 |
242 | // select the new item
243 | addToSelection(newly_selected.attributes._id, false);
244 | },
245 |
246 | renamePlaylist: function(ev) {
247 | bootbox.prompt({
248 | title: 'What would you like to rename "' + player.playlist.title +
249 | '" to?',
250 | value: player.playlist.title,
251 | callback: function(result) {
252 | if (result !== null) {
253 | socket.emit('rename_playlist', {
254 | title: result,
255 | id: player.playlist._id,
256 | });
257 | $('#playlist_header').text(result);
258 | }
259 | },
260 | });
261 | },
262 |
263 | deletePlaylist: function(ev) {
264 | bootbox.dialog({
265 | message: 'Do you really want to delete this playlist?',
266 | title: 'Delete Playlist',
267 | buttons: {
268 | cancel: {
269 | label: 'Cancel',
270 | className: 'btn-default',
271 | },
272 |
273 | del: {
274 | label: 'Delete',
275 | className: 'btn-danger',
276 | callback: function() {
277 | socket.emit('delete_playlist', {del: player.playlist._id});
278 | MusicApp.router.playlist('LIBRARY');
279 | },
280 | },
281 | },
282 | });
283 | },
284 |
285 | renderSong: function() {
286 | // simple block to make sure it is only processing a render once at any point in time
287 | if (!this.processing) {
288 | this.processing = true;
289 |
290 | // cache scroll top variable
291 | this.scrollTop = this.scrollElem.scrollTop();
292 |
293 | // get the index of the item in the center of the screen
294 | // if contentHeight is 0, contentHeight / 2 is NaN, so default to 0
295 | var middle_of_viewport = this.scrollTop + (this.contentHeight / 2 || 0) - this.meta_height;
296 | this.middle_item = Math.floor(middle_of_viewport / this.individual_height);
297 |
298 | // get the bounds of items to draw
299 | var min = Math.floor(this.middle_item - this.how_many_drawn / 2);
300 | var max = Math.floor(this.middle_item + this.how_many_drawn / 2);
301 |
302 | // if the min is less than 0, set it to 0
303 | if (min < 0) {
304 | min = 0;
305 | max = Math.min(this.how_many_drawn, player.songs.length - 1);
306 | } else if (max > player.songs.length - 1) {
307 | // set the max item to the last item
308 | max = player.songs.length - 1;
309 |
310 | // only let it go as low as 0
311 | min = Math.max(max - this.how_many_drawn, 0);
312 | }
313 |
314 | if (min != this.lastmin || max != this.lastmax) {
315 | // shortcut to remove all items easily
316 | if (min > this.lastmax || max < this.lastmin) {
317 | this.$el.find('.song_row').remove();
318 | this.drawn_full = false;
319 | }
320 |
321 | // add the elements from the side they can be added from
322 | var index = 0;
323 | var diff;
324 | var render_item;
325 | if (max > this.lastmax) {
326 | // add them to the bottom
327 | diff = Math.min(max - this.lastmax, this.how_many_drawn) - 1;
328 | while (diff >= 0) {
329 | index = max - diff;
330 | render_item = this.song_template({
331 | song: player.songs[index],
332 | selected: (player.songs[index] ? selectedItems.indexOf(player.songs[index].attributes._id) != -1 : false),
333 | index: index,
334 | });
335 |
336 | // if we are redrawing, remove from the other side
337 | if (this.drawn_full) {
338 | this.top_spacer.next().remove();
339 | }
340 |
341 | this.bottom_spacer.before(render_item);
342 | diff--;
343 | }
344 | }
345 |
346 | if (min < this.lastmin) {
347 | // add them to the top
348 | diff = Math.min(this.lastmin - min, this.how_many_drawn) - 1;
349 | while (diff >= 0) {
350 | index = min + diff;
351 | render_item = this.song_template({
352 | song: player.songs[index],
353 | selected: (selectedItems.indexOf(player.songs[index].attributes._id) != -1),
354 | index: index,
355 | });
356 |
357 | // if we are redrawing, remove from the other side
358 | if (this.drawn_full) {
359 | this.bottom_spacer.prev().remove();
360 | }
361 |
362 | this.top_spacer.after(render_item);
363 | diff--;
364 | }
365 | }
366 |
367 | this.lastmax = max;
368 | this.lastmin = min;
369 | }
370 |
371 | // calculate the spacer heights based off what is missing
372 | var top = this.individual_height * this.lastmin;
373 | var bottom = this.individual_height * (player.songs.length - this.lastmax);
374 |
375 | // set the spacing heights
376 | this.top_spacer.css('height', top);
377 | this.bottom_spacer.css('height', bottom);
378 |
379 | // set some finish variables
380 | this.processing = false;
381 | this.drawn_full = true;
382 | }
383 | },
384 |
385 | redrawSong: function(_id) {
386 | // check if the song is already visible
387 | var song_tr = this.$el.find('#' + _id);
388 | if (song_tr.length !== 0) {
389 | // now replace the item
390 | this.$el.find('#' + _id).replaceWith(this.song_template({ song: player.song_collection.findBy_Id(_id)}));
391 | }
392 | },
393 | });
394 |
--------------------------------------------------------------------------------
/static/js/player/syncview.js:
--------------------------------------------------------------------------------
1 | SyncView = Backbone.View.extend({
2 | template: '#sync_body_template',
3 | events: {
4 | 'click #fetch_data': 'connectB',
5 | 'click .sync_div': 'sync',
6 | 'click .back_to_songs': 'goBack',
7 | },
8 | initialize: function() {
9 | this.a = {
10 | socket: socket,
11 | server_ip: this_ip,
12 | song_collection: player.song_collection,
13 | playlist_collection: player.playlist_collection,
14 | loaded: true,
15 | };
16 | this.b = {
17 | socket: null,
18 | server_ip: '',
19 | song_collection: new SongCollection(),
20 | playlist_collection: new PlaylistCollection(),
21 | loaded: false,
22 | };
23 | },
24 |
25 | render: function() {
26 | this.b.server_ip = localStorage.getItem('server_b_ip') || '';
27 |
28 | this.setElement(render(this.template, {this_ip: this_ip, remote_ip: this.b.server_ip}));
29 |
30 | if (this.b.server_ip.length > 0) {
31 | this.connectB();
32 | }
33 | },
34 |
35 | connectB: function() {
36 | var self = this;
37 |
38 | // save the setting
39 | this.b.server_ip = this.$el.find('#remote_b').val();
40 | localStorage.setItem('server_b_ip', this.b.server_ip);
41 |
42 | // connect
43 | this.b.socket = io.connect(this.b.server_ip, {'force new connection': true});
44 | this.b.socket.on('connect', function() {
45 | self.b.socket.emit('sync_page_connected');
46 | console.log('Socket_b connected');
47 | });
48 |
49 | this.b.socket.on('alldata', function(data) {
50 | // reset the playlists
51 | self.b.playlist_collection.reset();
52 | self.b.playlist_collection.add(data.playlists);
53 |
54 | // reset the songs
55 | self.b.song_collection.reset();
56 | self.b.song_collection.add(data.songs);
57 | self.b.loaded = true;
58 | self.drawSync();
59 | });
60 | },
61 |
62 | drawSync: function() {
63 | if (this.b.loaded) {
64 | // render the left and right panes
65 | this.left = new SyncListView({
66 | el: this.$el.find('.playlists_left')[0],
67 | model: {
68 | playlists: this.a.playlist_collection,
69 | title: 'This Server',
70 | side: 'left',
71 | },
72 | });
73 | this.left.render();
74 | this.right = new SyncListView({
75 | el: this.$el.find('.playlists_right')[0],
76 | model: {
77 | playlists: this.b.playlist_collection,
78 | title: 'Remote Server',
79 | side: 'right',
80 | },
81 | });
82 | this.right.render();
83 |
84 | // show the sync button
85 | this.$el.find('.sync_div').css('visibility', 'visible');
86 | }
87 | },
88 |
89 | sync: function() {
90 | var left_items = this.left.getSelected();
91 | var right_items = this.right.getSelected();
92 |
93 | var data_to_send = null;
94 | if (left_items.length > 0) {
95 | // filter the lists and work out the new songs
96 | data_to_send = this.filter_out(left_items, this.a, this.b);
97 | data_to_send.remote_url = this.a.server_ip;
98 |
99 | // sync the playlists
100 | console.log(data_to_send);
101 | this.b.socket.emit('sync_playlists', data_to_send);
102 | }
103 |
104 | if (right_items.length > 0) {
105 | // filter the lists and work out the new songs
106 | data_to_send = this.filter_out(right_items, this.b, this.a);
107 | data_to_send.remote_url = this.b.server_ip;
108 |
109 | // sync the playlists
110 | console.log(data_to_send);
111 | this.a.socket.emit('sync_playlists', data_to_send);
112 | }
113 | },
114 | /* this function replaces the uids of songs that share the same title + artist
115 | * + album on the playlists that are being synced across. This allows for syncing
116 | * to be skipped for items that seem to be the same track.
117 | */
118 | filter_out: function(selected_lists, from, to) {
119 | var new_songs = [];
120 | for (var list_cnt = 0; list_cnt < selected_lists.length; list_cnt++) {
121 | for (var item_cnt = 0; item_cnt < selected_lists[list_cnt].songs.length; item_cnt++) {
122 | // if the song is already in the library, set the correct _id
123 | var uid = selected_lists[list_cnt].songs[item_cnt]._id;
124 | var from_song = from.song_collection.findBy_Id(uid);
125 | if (from_song) {
126 | var match_song = to.song_collection.findItem(from_song);
127 | if (match_song) {
128 | selected_lists[list_cnt].songs[item_cnt]._id = match_song.attributes._id;
129 | } else {
130 | new_songs.push(from_song.attributes);
131 | }
132 | }
133 | }
134 |
135 | // check if the playlist is a dupe, if so merge it
136 | var match_playlist = to.playlist_collection.getByTitle(selected_lists[list_cnt].title);
137 | if (match_playlist) {
138 | selected_lists[list_cnt] = this.mergePlaylists(selected_lists[list_cnt], match_playlist.attributes);
139 | }
140 | }
141 |
142 | return {songs: new_songs, playlists: selected_lists};
143 | },
144 |
145 | mergePlaylists: function(list_one, list_two) {
146 | list_one._id = list_two._id;
147 | for (var song_cnt = 0; song_cnt < list_two.songs.length; song_cnt++) {
148 | // see if we can find the song in the first playlist
149 | var found = false;
150 | for (var inner_cnt = 0; inner_cnt < list_one.songs.length; inner_cnt++) {
151 | if (list_one.songs[inner_cnt]._id == list_two.songs[song_cnt]._id) {
152 | found = true;
153 | }
154 | }
155 |
156 | // if it isn't found, add it
157 | if (!found) {
158 | list_one.songs.push(list_two.songs[song_cnt]);
159 | }
160 | }
161 |
162 | return list_one;
163 | },
164 |
165 | goBack: function() {
166 | MusicApp.contentRegion.show(MusicApp.router.songview);
167 | MusicApp.router.songview.delegateEvents();
168 | },
169 | });
170 |
171 | // viewing the playlists from each server
172 | SyncListView = Backbone.View.extend({
173 | template: '#sync_template',
174 | render: function() {
175 | this.$el.html(render(this.template, {
176 | playlists: this.model.playlists.models,
177 | side: this.model.side,
178 | title: this.model.title,
179 | }));
180 | },
181 |
182 | getSelected: function() {
183 | var selected = [];
184 | var self = this;
185 | this.$el.find(':input').each(function(index) {
186 | if ($(this).is(':checked')) {
187 | // add the playlist by _id
188 | selected.push(self.model.playlists.getBy_Id($(this).attr('id').replace(self.model.side + '_', '')).attributes);
189 | }
190 | });
191 |
192 | return selected;
193 | },
194 | });
195 |
--------------------------------------------------------------------------------
/static/js/player/utils.js:
--------------------------------------------------------------------------------
1 | // this file stores utility functions and misc setup that happens
2 | // before the rest of the JS is loaded
3 |
4 | // define swig functions before swig is used at all
5 | function prettyPrintSeconds(seconds) {
6 | var pretty = '';
7 |
8 | // days
9 | if (seconds > 86400) {
10 | pretty += Math.floor(seconds / 86400) + ' day';
11 |
12 | // is it plural
13 | if (Math.floor(seconds / 86400) != 1.0) {
14 | pretty += 's';
15 | }
16 |
17 | pretty += ' ';
18 | }
19 |
20 | // hours
21 | if (seconds > 3600) {
22 | pretty += Math.floor(seconds % 86400 / 3600) + ':';
23 | }
24 |
25 | // minutes
26 | if (seconds > 60) {
27 | pretty += ('0' + Math.floor(seconds % 3600 / 60)).slice(-2) + ':';
28 | } else {
29 | pretty += '0:';
30 | }
31 |
32 | // seconds
33 | pretty += ('0' + Math.floor(seconds % 60)).slice(-2);
34 | return pretty;
35 | }
36 |
37 | // pretty print the date_added milliseconds
38 | function prettyPrintDateAdded(milliseconds) {
39 | // convert it to a javascript date object
40 | var date = new Date(milliseconds);
41 |
42 | // get the format of it
43 | var dateFormat = date.toString('yyyy-MM-dd HH:mm:ss');
44 | return dateFormat;
45 | }
46 |
47 | function prettyPrintSecondsorNA(seconds) {
48 | if (seconds <= 0) {
49 | return 'N/A';
50 | } else {
51 | return prettyPrintSeconds(seconds);
52 | }
53 | }
54 |
55 | // make it usable in swig
56 | swig.setFilter('prettyPrintSeconds', prettyPrintSecondsorNA);
57 | swig.setFilter('prettyPrintDateAdded', prettyPrintDateAdded);
58 |
59 | var cover_is_current = false;
60 | var cover_is_visible = false;
61 | var box; // coverbox ref
62 | function showCover(src) {
63 | // deactivate it if it's visible already
64 | if (cover_is_visible && box) {
65 | box.deactivate();
66 | }
67 |
68 | // check if the new cover art is from the current track
69 | cover_is_current = ('cover/' + player.current_song.attributes.cover_location == src);
70 |
71 | // create and activate the cover art
72 | box = new CoverBox(src, function() {
73 | cover_is_visible = false;
74 | });
75 |
76 | box.activate();
77 | cover_is_visible = true;
78 | }
79 |
80 | // utility functions
81 | function render(template, data) {
82 | return swig.render($(template).html(), {locals: data});
83 | }
84 |
85 | function loadedRestart(item) {
86 | itemsLoaded.push(item);
87 | if (arraysEqual(items, itemsLoaded)) {
88 | Backbone.history.stop();
89 | Backbone.history.start();
90 |
91 | // if the player is showing nothing, show the default place
92 | if (MusicApp.router.songview === null) {
93 | MusicApp.router.playlist();
94 | }
95 |
96 | // if they last played a song, continue playing
97 | var play_state = localStorage.getItem('last_play_state'); // must be fetched before the song is played
98 | var song_id = localStorage.getItem('last_playing_id');
99 | if (song_id) {
100 | player.playSong(song_id);
101 |
102 | // set the currentTime
103 | var currentTime = parseInt(localStorage.getItem('currentTime'));
104 | if (currentTime) {
105 | player.PlayMethodAbstracter.setCurrentTime(currentTime);
106 | }
107 | }
108 |
109 | // it is stored as a string
110 | if (play_state == 'false') {
111 | player.togglePlayState();
112 | }
113 | }
114 | }
115 |
116 | function arraysEqual(a, b) {
117 | if (a === b) return true;
118 | if (a === null || b === null) return false;
119 | if (a.length != b.length) return false;
120 |
121 | a.sort();
122 | b.sort();
123 |
124 | for (var i = 0; i < a.length; ++i) {
125 | if (a[i] !== b[i]) return false;
126 | }
127 |
128 | return true;
129 | }
130 |
131 | function searchMatchesSong(songString, searchWords) {
132 | for (var i = 0; i < searchWords.length; i++) {
133 | if (songString.indexOf(searchWords[i]) == -1) {
134 | return false;
135 | }
136 | }
137 |
138 | return true;
139 | }
140 |
141 | function imageToBase64(img) {
142 | // create the canvas
143 | var canvas = document.createElement('canvas');
144 | canvas.height = img.height;
145 | canvas.width = img.width;
146 |
147 | // grab the context for drawing
148 | var ctx = canvas.getContext('2d');
149 |
150 | // draw the image to the context
151 | ctx.drawImage(img, 0, 0, img.width, img.height);
152 |
153 | // return the dataURL
154 | return canvas.toDataURL('image/png');
155 | }
156 |
157 | // implementation of knuth-shuffle by @coolaj86
158 | // https://github.com/coolaj86/knuth-shuffle
159 | function shuffle_array(array) {
160 | var currentIndex = array.length;
161 | var temporaryValue;
162 | var randomIndex;
163 |
164 | while (currentIndex !== 0) {
165 | randomIndex = Math.floor(Math.random() * currentIndex);
166 | currentIndex -= 1;
167 | temporaryValue = array[currentIndex];
168 | array[currentIndex] = array[randomIndex];
169 | array[randomIndex] = temporaryValue;
170 | }
171 |
172 | return array;
173 | }
174 |
175 | function randomIntFromInterval(min, max) {
176 | return Math.floor(Math.random() * (max - min + 1) + min);
177 | }
178 |
179 | function deAttribute(collection) {
180 | var newCollection = [];
181 | for (var i = 0; i < collection.length; i++) {
182 | newCollection.push(collection[i].attributes);
183 | }
184 |
185 | return newCollection;
186 | }
187 |
188 | // make table row widths be correct when dragging
189 | var fixHelper = function(e, ui) {
190 | ui.children().each(function() {
191 | $(this).width($(this).width());
192 | });
193 |
194 | return ui;
195 | };
196 |
197 | // define things before they are used
198 | var socket = io.connect('//' + window.location.host, {path: window.location.pathname + 'socket.io'});
199 |
200 |
--------------------------------------------------------------------------------
/static/js/preloader/preloader.js:
--------------------------------------------------------------------------------
1 | //State to check whether app has loaded
2 | var state_reached = false;
3 | Pace.on("change", function (progress) {
4 | // Clock our load progress
5 | console.log(progress);
6 | if (progress >= 90 && !(state_reached)) {
7 | state_reached = true;
8 | var preloader = document.getElementById("preloader-overlay");
9 | // Add hide class
10 | preloader.className += " preloader-hide";
11 | }
12 |
13 | });
14 |
--------------------------------------------------------------------------------
/util.js:
--------------------------------------------------------------------------------
1 | // This file is a bunch of utility functions
2 | var fs = require('fs');
3 | var path = require('path');
4 |
5 | var walk = function(dir, done) {
6 | var results = [];
7 | var strip_results = [];
8 | fs.readdir(dir, function(err, list) {
9 | if (err) return done(err);
10 | var pending = list.length;
11 | if (!pending) return done(null, results);
12 | list.forEach(function(file) {
13 | if (file[0] === '.') {
14 | if (!--pending) done(null, results, strip_results);
15 | return;
16 | }
17 |
18 | file = path.join(dir, file);
19 | fs.stat(file, function(err, stat) {
20 | if (stat && stat.isDirectory()) {
21 | walk(file, function(err, res) {
22 | results = results.concat(res);
23 | if (!--pending) done(null, results, strip_results);
24 | });
25 | } else {
26 | results.push(file);
27 | if (!--pending) done(null, results, strip_results);
28 | }
29 | });
30 | });
31 | });
32 | };
33 |
34 | exports.walk = walk;
35 |
36 | var contains = function(a, obj) {
37 | var i = a.length;
38 | while (i--) {
39 | if (a[i] === obj) {
40 | return true;
41 | }
42 | }
43 |
44 | return false;
45 | };
46 |
47 | exports.contains = contains;
48 |
49 | // function to get the IP of the current machine on the network
50 | var cached_ip = null;
51 | var getip = function(callback) {
52 | if (cached_ip === null) {
53 | require('dns').lookup(require('os').hostname(), function(err, add, fam) {
54 | callback(add);
55 |
56 | // save it for the next call
57 | cached_ip = add;
58 | });
59 | } else {
60 | callback(cached_ip);
61 | }
62 | };
63 |
64 | exports.getip = getip;
65 |
66 | exports.decodeBase64Image = function(dataString) {
67 | var matches = dataString.match(/^data:image\/([A-Za-z-+\/]+);base64,(.+)$/);
68 | var response = {};
69 |
70 | if (matches === null) {
71 | console.log(dataString);
72 | console.log('Invalid file uploaded');
73 | }
74 |
75 | response.type = matches[1];
76 | response.data = new Buffer(matches[2], 'base64');
77 |
78 | return response;
79 | };
80 |
--------------------------------------------------------------------------------
/views/admin.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Admin Login
7 |
136 |
137 |
138 |
139 |