week6
This commit is contained in:
gauthiier
@@ -0,0 +1,113 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>SEARCH SPOTIFY</title>
|
||||
<style>
|
||||
/* CSS Styling */
|
||||
#frame {
|
||||
width: 100%;
|
||||
}
|
||||
#inputs{
|
||||
width: 50em;
|
||||
}
|
||||
.track {
|
||||
bborder: 1px solid green;
|
||||
display: inline-block;
|
||||
padding: 1em;
|
||||
max-width: 400px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.track img {
|
||||
max-width: 400px;
|
||||
margin: 0.3em;
|
||||
}
|
||||
</style>
|
||||
<!-- SCRIPTS -->
|
||||
<!-- import handlebars -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
|
||||
<!-- import jquery -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- HTML -->
|
||||
<label>SEARCH SPOTIFY</label>
|
||||
<div id="frame">
|
||||
<!-- inputs for the search to send to server -->
|
||||
<div id="inputs">
|
||||
<label>keyword: </label>
|
||||
<input id="keyword_field" type="text"/>
|
||||
<input id="search_button" type="button" value="Search" onclick="search();">
|
||||
</div>
|
||||
|
||||
<div id="tracks">
|
||||
<script id="tracks-template" type="text/x-handlebars-template">
|
||||
{{#each this}}
|
||||
<div class="track">
|
||||
<div class="Artist">Artist: {{artist}}</div>
|
||||
<div class="Album">Album: {{album}}</div>
|
||||
<div class="Image"><img src={{album_url}} /></div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!-- import socket.io -->
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script>
|
||||
// connect to localhost on its port (see server.js -- 8088)
|
||||
var socket = io().connect('http://localhost:8088');
|
||||
|
||||
// when connecting
|
||||
socket.on('connect', function (data) {
|
||||
console.log('connected');
|
||||
});
|
||||
|
||||
// when receiving a custom message form the server ('search_SPOTIFY_results')
|
||||
socket.on('search_spotify_results', function(msg) {
|
||||
console.log('search_spotify_results: ' + JSON.stringify(msg));
|
||||
|
||||
var filtered_results = [];
|
||||
|
||||
for(t of msg) {
|
||||
// console.log('\n\n\n\n\n --------------------')
|
||||
// console.log(t);
|
||||
filtered_results.push({
|
||||
artist: t.artists[0].name,
|
||||
album: t.album.name,
|
||||
album_url: t.album.images[0].url
|
||||
});
|
||||
}
|
||||
|
||||
compile_results_and_dispay(filtered_results);
|
||||
|
||||
});
|
||||
|
||||
// when search button is pressed
|
||||
function search() {
|
||||
|
||||
var input_keyword = document.getElementById('keyword_field').value;
|
||||
|
||||
socket.emit('search_spotify', {keyword: input_keyword});
|
||||
|
||||
}
|
||||
|
||||
function compile_results_and_dispay(results) {
|
||||
|
||||
var template_script = $("#tracks-template").html();
|
||||
|
||||
var template = Handlebars.compile(template_script);
|
||||
|
||||
$('.track').remove();
|
||||
|
||||
$('#tracks').append(template(results));
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "spotify",
|
||||
"version": "1.0.0",
|
||||
"description": "spotify api sandbox",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "gauthier",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"express": "^4.14.0",
|
||||
"socket.io": "^1.7.1",
|
||||
"spotify-web-api-node": "^2.3.6"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
// import express
|
||||
var express = require('express'); // npm install --save express
|
||||
var app = express();
|
||||
|
||||
// import node.js http
|
||||
var server = require('http').Server(app);
|
||||
|
||||
// import socket.io
|
||||
var io = require('socket.io')(server); // npm install --save socket.io
|
||||
|
||||
// import filesystem (aka fs)
|
||||
var fs = require('fs');
|
||||
|
||||
// import spotify we api
|
||||
var SpotifyWebApi = require('spotify-web-api-node');
|
||||
|
||||
/* -----------------------------------
|
||||
Spotify Authetication (OAuth) Configuration
|
||||
--------------------------------------*/
|
||||
|
||||
// access token use to autheticate with Instagram
|
||||
var access_token = null;
|
||||
|
||||
// load configuration file with credentials, secrets, etc.
|
||||
var config_file = "./spotify_credentials.json";
|
||||
var config = JSON.parse(fs.readFileSync(config_file, "utf8"));
|
||||
|
||||
var spotify = new SpotifyWebApi({
|
||||
clientId : config.client_id,
|
||||
clientSecret : config.client_secret
|
||||
});
|
||||
|
||||
|
||||
spotify.clientCredentialsGrant()
|
||||
.then(function(data) {
|
||||
spotify.setAccessToken(data.body.access_token);
|
||||
}, function(err) {
|
||||
console.log('Something went wrong when retrieving an access token', err.message);
|
||||
});
|
||||
|
||||
/*------------------------
|
||||
SPOTIFY FUNCTIONS
|
||||
--------------------------*/
|
||||
|
||||
function search_for_tracks(keyword, callback) {
|
||||
|
||||
console.log('search_for_tracks: ' + keyword);
|
||||
|
||||
spotify.searchTracks(keyword, null, function(err, data) {
|
||||
|
||||
if (err) {
|
||||
console.error('Something went wrong', err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
callback(data.body.tracks.items);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* -----------------------------
|
||||
Configure Socket.io
|
||||
--------------------------------*/
|
||||
|
||||
// configure socket.io
|
||||
// (1) when there is a connection
|
||||
io.on('connection', function(socket) {
|
||||
|
||||
console.log('got a connection');
|
||||
|
||||
// (2) configure the connected socket to receive custom messages ('message from human')
|
||||
socket.on('search_spotify', function(msg) {
|
||||
|
||||
console.log('searching spotify with: ' + JSON.stringify(msg));
|
||||
|
||||
search_for_tracks(msg.keyword, function(results) {
|
||||
// send raw results
|
||||
io.emit('search_spotify_results', results);
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
socket.on('disconnet', function() {
|
||||
|
||||
console.log('got a disconnection');
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/* ------------------------------------
|
||||
Main entry point for the server
|
||||
----------------------------------------*/
|
||||
|
||||
app.get('/', function(req, res) {
|
||||
res.sendFile(__dirname + '/index.html');
|
||||
});
|
||||
|
||||
/* -------------------
|
||||
Start the server
|
||||
----------------------*/
|
||||
|
||||
// listen to connection on port 8088 --> http://localhost:8088
|
||||
server.listen(8088, function () {
|
||||
console.log('listening on port: ' + 8088);
|
||||
});
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"client_id": "503a0d7805bf49e9ae1d3880c9b15af4",
|
||||
"client_secret": "2bd7aebb3d5a4b7c96d4352659a5b045"
|
||||
}
|
||||
Reference in New Issue
Block a user