Added basic Spotify display.

backend/logic/actions/apis.js

@@ -45,6 +45,25 @@ module.exports = {
 		});
 	},
 
+	/**
+	 * Gets Spotify data
+	 *
+	 * @param session
+	 * @param title - the title of the song
+	 * @param artist - an artist for that song
+	 * @param cb
+	 */
+	getSpotifySongs: hooks.adminRequired((session, title, artist, cb, userId) => {
+		async.waterfall([
+			(next) => {
+				utils.getSongsFromSpotify(title, artist, next);
+			}
+		], (songs) => {
+			logger.success('APIS_GET_SPOTIFY_SONGS', `User "${userId}" got Spotify songs for title "${title}" successfully.`);
+			cb({status: 'success', songs: songs});
+		});
+	}),
+
 	/**
 	 * Joins a room
 	 *

backend/logic/utils.js

@@ -351,6 +351,43 @@ module.exports = {
 			cb(song);
 		});
 	},
+	getSongsFromSpotify: (title, artist, cb) => {
+		const spotifyParams = [
+			`q=${encodeURIComponent(title)}`,
+			`type=track`
+		].join('&');
+
+		request(`https://api.spotify.com/v1/search?${spotifyParams}`, (err, res, body) => {
+			if (err) return console.error(err);
+			body = JSON.parse(body);
+			let songs = [];
+
+			for (let i in body) {
+				let items = body[i].items;
+				for (let j in items) {
+					let item = items[j];
+					let hasArtist = false;
+					for (let k = 0; k < item.artists.length; k++) {
+						let localArtist = item.artists[k];
+						if (artist.toLowerCase() === localArtist.name.toLowerCase()) hasArtist = true;
+					}
+					if (hasArtist && (title.indexOf(item.name) !== -1 || item.name.indexOf(title) !== -1)) {
+						let song = {};
+						song.duration = item.duration_ms / 1000;
+						song.artists = item.artists.map(artist => {
+							return artist.name;
+						});
+						song.title = item.name;
+						song.explicit = item.explicit;
+						song.thumbnail = item.album.images[1].url;
+						songs.push(song);
+					}
+				}
+			}
+
+			cb(songs);
+		});
+	},
 	shuffle: (array) => {
 		let currentIndex = array.length, temporaryValue, randomIndex;
 

frontend/components/Modals/EditSong.vue

@@ -96,6 +96,37 @@
 				<p class='control'>
 					<input class='input' type='text' v-model='editing.song.skipDuration'>
 				</p>
+				<hr>
+				<h5 class='has-text-centered'>Spotify info</h5>
+				<label class='label'>Song title</label>
+				<p class='control'>
+					<input class='input' type='text' v-model='spotify.title'>
+				</p>
+				<label class='label'>Song artist (1 artist full name)</label>
+				<p class='control'>
+					<input class='input' type='text' v-model='spotify.artist'>
+				</p>
+				<button class='button is-success' @click='getSpotifySongs()'>
+					Get Spotify songs
+				</button>
+				<hr v-if="spotify.songs.length > 0">
+				<h5 class='has-text-centered' v-if="spotify.songs.length > 0">Spotify results</h5>
+				<div v-for='song in spotify.songs'>
+					<p><b>Title:</b> {{song.title}}</p>
+					<p>
+						<b>Artists:</b>
+						<ul>
+							<li v-for='artist in song.artists'>{{artist}}</li>
+						</ul>
+					</p>
+					<p><b>Duration:</b> {{song.duration}}</p>
+					<p><b>Explicit:</b> {{song.explicit}}</p>
+					<p>
+						<b>Thumbnail:</b> {{song.thumbnail}}
+						<img :src='song.thumbnail' onerror="this.src='/assets/notes-transparent.png'">
+					</p>
+					<hr>
+				</div>
 			</div>
 			<div slot='footer'>
 				<button class='button is-success' @click='save(editing.song, false)'>
@@ -133,6 +164,11 @@
 					player: null,
 					paused: false,
 					playerReady: false
+				},
+				spotify: {
+					title: '',
+					artist: '',
+					songs: []
 				}
 			}
 		},
@@ -201,6 +237,13 @@
 				if (type == 'genres') this.editing.song.genres.splice(index, 1);
 				else if (type == 'artists') this.editing.song.artists.splice(index, 1);
 			},
+			getSpotifySongs: function() {
+				this.socket.emit('apis.getSpotifySongs', this.spotify.title, this.spotify.artist, (res) => {
+					if (res.status === 'success') {
+						this.spotify.songs = res.songs;
+					}
+				});
+			}
 		},
 		ready: function () {