Queue Quick Fix For DM/Vimeo (#86)

Queue was refactored for dm/vimeo. It now works to an extent, it is
still in beta. Disabled the visual queue for now.

Author: kyle8998

README.md

@@ -1,6 +1,8 @@
 # Vynchronize
 [Access the application here!](https://vynchronize.herokuapp.com/)
 
+![Vynchronize Screenshot](https://raw.githubusercontent.com/kyle8998/Vynchronize/master/img/screenshot2.PNG)
+
 Vynchronize is a online video synchronization platform where you can watch videos online with friends in real time!
 
 Vynchronize currently supports YouTube, Daily Motion, and Vimeo!

img/screenshot1.PNG

@@ -171,7 +171,7 @@ <h2><span id="hostlabel" class="label label-default"><i class="fas fa-user"></i>
                     </div>
 
                     <!-- Playlist shit -->
-                    <div class="vid-list-container">
+                    <div id="visual-queue" class="vid-list-container">
                         <ul class="vid-list" id="vidlist">
                             <li class="vid-item">
                                 <!-- <div class="thumb">
@@ -184,14 +184,16 @@ <h2><span id="hostlabel" class="label label-default"><i class="fas fa-user"></i>
                             </li>
                         </ul>
                     </div>
-                    <div class="arrows">
+                    <div id="queue-arrows" class="arrows">
                         <div class="arrow-left">
                             <i class="fa fa-chevron-left fa-lg"></i>
                         </div>
                         <div class="arrow-right">
                             <i class="fa fa-chevron-right fa-lg"></i>
                         </div>
                     </div>
+                    <br/>
+                    <p style="display: none" id="beta-message" class="lead">Queue is currently in beta for DailyMotion/Vimeo</p>
 
 
 

img/screenshot2.PNG

@@ -81,7 +81,12 @@ socket.on('createYoutube', function(data) {
         you.style.display = 'block';
         currPlayer = 0
 
-        console.log("Player state: "+playerStatus)
+        // The visual queue
+        document.getElementById('visual-queue').style.display = 'block'
+        document.getElementById('queue-arrows').style.display = 'block'
+        document.getElementById('beta-message').style.display = 'none'
+
+        console.log("Player state: " + playerStatus)
         // If it is -1, there was an error and needs to resync to host
         if (playerStatus == -1) {
             socket.emit('get video', function(id) {
@@ -114,6 +119,11 @@ socket.on('createDaily', function(data) {
         daily.style.display = 'block';
         currPlayer = 1
 
+        // disable for dm/vimeo
+        document.getElementById('visual-queue').style.display = 'none'
+        document.getElementById('queue-arrows').style.display = 'none'
+        document.getElementById('beta-message').style.display = 'block'
+
         // Special call to pause youtube player
         // Only have to do on youtube player as it is the default player that autoplays
         player.pauseVideo();
@@ -137,6 +147,11 @@ socket.on('createVimeo', function(data) {
         vimeo.style.display = 'block';
         currPlayer = 2
 
+        // disable for dm/vimeo
+        document.getElementById('visual-queue').style.display = 'none'
+        document.getElementById('queue-arrows').style.display = 'none'
+        document.getElementById('beta-message').style.display = 'block'
+
         // Special call to pause youtube player
         // Only have to do on youtube player as it is the default player that autoplays
         player.pauseVideo();

index.html

@@ -151,50 +151,41 @@ io.sockets.on('connection', function(socket) {
     // Gets title then calls back
     socket.on('enqueue video', function(data) {
         var user = data.user
-        // callback
-        // See yt.js file
-        socket.emit('get title', {
-            videoId: data.videoId,
-            user: user
-        }, function(data) {
-            // Data contains videoId and title
-            var videoId = data.videoId
-            var title = data.title
-            switch (io.sockets.adapter.rooms['room-' + socket.roomnum].currPlayer) {
-                case 0:
+        var videoId = data.videoId
+        var title = ""
+        switch (io.sockets.adapter.rooms['room-' + socket.roomnum].currPlayer) {
+            case 0:
+                // See yt.js file
+                socket.emit('get title', {
+                    videoId: videoId,
+                    user: user
+                }, function(data) {
+                    videoId = data.videoId
+                    title = data.title
                     io.sockets.adapter.rooms['room-' + socket.roomnum].queue.yt.push({
                         videoId: videoId,
                         title: title
                     })
-                    break;
-                case 1:
-                    io.sockets.adapter.rooms['room-' + socket.roomnum].queue.dm.push({
-                        videoId: videoId,
-                        title: title
-                    })
-                    break;
-                case 2:
-                    io.sockets.adapter.rooms['room-' + socket.roomnum].queue.vimeo.push({
-                        videoId: videoId,
-                        title: title
-                    })
-                    break;
-                default:
-                    console.log("Error invalid player id")
-            }
-            console.log(io.sockets.adapter.rooms['room-' + socket.roomnum].queue.yt)
-
-            // Call notify
-            // DEPRECATED - NOW THE SOCKET ITSELF CALLS 'notify alerts' from within the get title function
-            // io.sockets.in("room-"+socket.roomnum).emit('enqueueNotify', {
-            //     videoId: videoId,
-            //     title: title,
-            //     user: user
-            // })
-
-            // Update front end
-            updateQueueVideos()
-        })
+                    console.log(io.sockets.adapter.rooms['room-' + socket.roomnum].queue.yt)
+                    // Update front end
+                    updateQueueVideos()
+                })
+                break;
+            case 1:
+                io.sockets.adapter.rooms['room-' + socket.roomnum].queue.dm.push({
+                    videoId: videoId,
+                    title: title
+                })
+                break;
+            case 2:
+                io.sockets.adapter.rooms['room-' + socket.roomnum].queue.vimeo.push({
+                    videoId: videoId,
+                    title: title
+                })
+                break;
+            default:
+                console.log("Error invalid player id")
+        }
     })
 
     // Empty the queue