Home Explore Help
Register Sign In
jhb2345
/
lan-jukebox
mirror of https://github.com/jibby0/lan-jukebox
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Added play/pause button

Josh Bicking 6 years ago
parent
e61e1448da
commit
898212eeda
4 changed files with 718 additions and 269 deletions
Split View Show Diff Stats
  1. 0 6
      app.js
  2. 616 245
      package-lock.json
  3. 38 7
      routes/index.js
  4. 64 11
      views/index.hbs

+ 0 - 6
app.js
View File 

@@ -25,12 +25,6 @@ var routes = require('./routes/index')(io);
 
 //app.use(cookieParser());
 
 app.use(express.static(path.join(__dirname, 'public')));
 
 
-// // Add socket.io to res in the event loop.
 
-// app.use(function(req, res, next){
 
-//   res.io = io;
 
-//   next();
 
-// });
 
-
 
 // Add the route.
 
 app.use('/', routes);

File diff suppressed because it is too large
+ 616 - 245
package-lock.json


+ 38 - 7
routes/index.js
View File 

@@ -23,10 +23,6 @@ module.exports = function (io) {
 
 
     var Player = require('player');
 
 
-    io.on('connection', function (socket) {
 
-	console.log('a user connected');
 
-    });
 
-
 
     // Create a player with the proper error handling.
 
     function playerCreator(song) {
 
 	if (song)
 
@@ -38,6 +34,41 @@ module.exports = function (io) {
 
 
     player = playerCreator();
 
 
+    playerState = 'playing';
 
+
 
+    io.on('connection', function(socket){
 
+	io.emit(playerState);
 
+	socket.on('chat message', function(msg){
 
+	    io.emit('chat message', msg);
 
+	});
 
+	// TODO handle button when nothing is playing.
 
+	socket.on('pause', function() {
 
+	    console.log('pausing');
 
+	    io.emit('player-transition', 'Pausing');
 
+	    player.pause();
 
+	    playerState = 'paused';
 
+
 
+	    // Player is a high quality plugin, and breaks if you spam
 
+	    // pause(). So put a 3 second delay in between
 
+	    // transitions.
 
+	    // TODO Find a better way to handle this.
 
+	    setTimeout(function() {
 
+		io.emit('paused');
 
+	    }, 3000);
 
+	});
 
+	socket.on('play', function() {
 
+	    console.log('playing');
 
+	    io.emit('player-transition', 'Playing');
 
+	    player.pause();
 
+	    playerState = 'playing';
 
+	    setTimeout(function() {
 
+		io.emit('playing');
 
+	    }, 3000);
 
+	});
 
+	
+    });
 
+
 
+
 
     // Player functionality
 
 
     // Songs move from playlist (if nothing is playing presently), to playing, to played.
 
@@ -131,7 +162,7 @@ module.exports = function (io) {
 
 
 		// DEBUG: for when I forget to change the var
 
 		if(youtube_dl.stderr == null) {
 
-		    console.log("Your youtube-dl location is probably invalid.");
 
+		    console.log('Your youtube-dl location is probably invalid.');
 
 		}
 
 
 		if (youtube_dl.stderr.toString()) {
 
@@ -157,7 +188,7 @@ module.exports = function (io) {
 
 	} else {
 
 	    var youtube_dl = child_process.spawn(YOUTUBE_DL_LOC, ['-x', '--audio-format', 'mp3', '-o', 'downloads/%(title)s.%(ext)s', video]);
 
 	    youtube_dl.on('close', (code) => {
 
-		console.log("Done getting " + video);
 
+		console.log('Done getting ' + video);
 
 		var error;
 
 		youtube_dl.stderr.on('data', (data) => {
 
 		    error = data;
 
@@ -171,7 +202,7 @@ module.exports = function (io) {
 
 		    playerAddSong('./downloads/' + youtube_dl_get_title.stdout.toString()
 
 				  .replace('\n', '')
 
 				  .replace(new RegExp('"', 'g'), '\'')
 
-				  + ".mp3");
 
+				  + '.mp3');
 
 		}
 
 		res.redirect('/');
 
 	    });

+ 64 - 11
views/index.hbs
View File 

@@ -1,11 +1,64 @@
 
-<h1>LAN Jukebox</h1>
 
-<a href="/youtube">Add a Youtube video</a><br/>
 
-<a href="/file">Add a music file</a><br/>
 
-{{{playlist_view}}}
 
-{{{playing_view}}}
 
-{{{played_view}}}
 
-<p>Allan put music player here</p>
 
-<script src="/socket.io/socket.io.js"></script>
 
-<script>
 
-  var socket = io();
 
-</script>
 
+<!doctype html>
 
+<html>
 
+  <head>
 
+    <title>Socket.IO chat</title>
 
+    <style>
 
+      * { margin: 0; padding: 0; box-sizing: border-box; }
 
+      body { font: 13px Helvetica, Arial; }
 
+      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
 
+      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
 
+      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
 
+      #messages { list-style-type: none; margin: 0; padding: 0; }
 
+      #messages li { padding: 5px 10px; }
 
+      #messages li:nth-child(odd) { background: #eee; }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <h1>LAN Jukebox</h1>
 
+    <a href='/youtube'>Add a Youtube video</a><br/>
 
+    <a href='/file'>Add a music file</a><br/>
 
+    {{{playlist_view}}}
 
+    {{{playing_view}}}
 
+    {{{played_view}}}
 
+    <button type='button' id='control-button'></button>
 
+    <p>Allan put music player here</p>
 
+    <script src='/socket.io/socket.io.js'></script>
 
+    <script src='https://code.jquery.com/jquery-1.11.1.js'></script>
 
+    <script>
 
+     $(function () {
 
+         var socket = io();
 
+         $('form').submit(function(){
 
+             socket.emit('chat message', $('#m').val());
 
+             $('#m').val('');
 
+             return false;
 
+         });
 
+         socket.on('chat message', function(msg){
 
+             $('#messages').append($('<li>').text(msg));
 
+         });
 
+	 socket.on('player-transition', function(state) {
 
+		$('#control-button').attr('disabled', 'disabled');
 
+		$('#control-button').html(state);
 
+	 });
 
+	 socket.on('paused', function() {
 
+	    $('#control-button').removeAttr('disabled');
 
+	    $('#control-button').html('Play');
 
+	    $('#control-button').unbind('click').click(function() {
 
+		socket.emit('play');
 
+	    });
 
+	 });
 
+	 socket.on('playing', function() {
 
+	    $('#control-button').removeAttr('disabled');
 
+	    $('#control-button').html('Pause');
 
+	    $('#control-button').unbind('click').click(function() {
 
+		socket.emit('pause');
 
+	    });
 
+	 });
 
+     });
 
+    </script>
 
+    <h3>Chat Log:</h3>
 
+    <ul id='messages'></ul>
 
+    <form action=''>
 
+      <input id='m' autocomplete='off' /><button>Send</button>
 
+    </form>
 
+  </body>
 
+</html>

Some files were not shown because too many files changed in this diff