See who added and what was added (#84)

Utilizes get title and user var to alert the room who added what and who
added it! Beginning of creating a new system for notify alerts for
future alerts. See notify.js file.

Author: kyle8998

index.html

@@ -353,6 +353,7 @@ <h2>About Vynchronize</h2>
         var socket = io.connect();
         var roomnum = 1
         var id = "M7lc1UVf-VE"
+        var username = ""
 
         // Chat stuff
         $(function() {
@@ -446,6 +447,7 @@ <h2>About Vynchronize</h2>
                     var noname2 = document.getElementById('missinginfo2')
                     noname2.innerHTML = "Please enter a room ID without symbols or leading/trailing whitespace!"
                 } else {
+                    username = $username.val()
                     socket.emit('new user', $username.val(), function(data) {
                         if (data) {
                             $userFormArea.hide();
@@ -627,6 +629,7 @@ <h2>About Vynchronize</h2>
     <script src="js/player.js"></script>
     <script src="js/host.js"></script>
     <script src="js/events.js"></script>
+    <script src="js/notify.js"></script>
 
     <!-- Youtube -->
     <script src="js/yt.js"></script>

js/notify.js

@@ -0,0 +1,26 @@
+// Enqueue Notify (0)
+socket.on('enqueueNotify', function(data) {
+    console.log("Enqueue Notify Alert")
+    var title = data.title
+    var user = data.user
+    // Generate notify alert
+    $.notify({
+        title: '<strong>' + user + '</strong>',
+        icon: 'fas fa-plus',
+        message: 'added ' + title + ' to the queue'
+    }, {
+        type: 'info',
+        delay: 800,
+        animate: {
+            enter: 'animated fadeInUp',
+            exit: 'animated fadeOutRight'
+        },
+        placement: {
+            from: "bottom",
+            align: "right"
+        },
+        offset: 20,
+        spacing: 10,
+        z_index: 1031,
+    })
+})

js/sync.js

@@ -102,7 +102,7 @@ function getTime() {
             return player.getCurrentTime();
             break;
         case 1:
-            return  dailyPlayer.currentTime;
+            return dailyPlayer.currentTime;
             break;
         case 2:
             vimeoPlayer.getCurrentTime().then(function(seconds) {
@@ -200,28 +200,8 @@ function enqueueVideo(roomnum) {
     // Actually change the video!
     socket.emit('enqueue video', {
         room: roomnum,
-        videoId: videoId
-    });
-
-    // Generate notify alert
-    $.notify({
-        title: '<strong>Video Added to Queue:  </strong>',
-        icon: 'fas fa-plus',
-        message: videoId
-    }, {
-        type: 'info',
-        delay: 800,
-        animate: {
-            enter: 'animated fadeInUp',
-            exit: 'animated fadeOutRight'
-        },
-        placement: {
-            from: "bottom",
-            align: "right"
-        },
-        offset: 20,
-        spacing: 10,
-        z_index: 1031,
+        videoId: videoId,
+        user: username
     });
 }
 
@@ -262,7 +242,7 @@ function changeVideo(roomnum) {
     videoId = idParse(videoId)
 
     var time = getTime()
-    console.log("The time is this man: "+time)
+    console.log("The time is this man: " + time)
     // Actually change the video!
     socket.emit('change video', {
         room: roomnum,
@@ -297,7 +277,7 @@ function prevVideo(roomnum) {
             videoId: data.videoId,
             time: time,
             prev: true
-        }, function(data){
+        }, function(data) {
             // Set to the previous time
             setTimeout(function() {
                 seekTo(prevTime)

js/yt.js

@@ -98,13 +98,20 @@ function play() {
 
 socket.on('get title', function(data, callback) {
     var videoId = data.videoId
+    var user = data.user
     $.get(
         "https://www.googleapis.com/youtube/v3/videos", {
             part: 'snippet',
             id: videoId,
             key: yt3_api
         },
         function(data) {
+            // enqueueNotify(user, data.items[0].snippet.title)
+            socket.emit('notify alerts', {
+                alert: 0,
+                user: user,
+                title: data.items[0].snippet.title
+            });
             // Does a callback and returns title
             callback({
                 videoId: videoId,

server.js

@@ -150,10 +150,12 @@ io.sockets.on('connection', function(socket) {
     // Enqueue video
     // 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
+            videoId: data.videoId,
+            user: user
         }, function(data) {
             // Data contains videoId and title
             var videoId = data.videoId
@@ -181,6 +183,16 @@ io.sockets.on('connection', function(socket) {
                     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()
         })
     })
@@ -727,6 +739,28 @@ io.sockets.on('connection', function(socket) {
 
     });
 
+    // Calls notify functions
+    // NOT YET FINISHED
+    socket.on('notify alerts', function(data) {
+        var alert = data.alert
+
+        switch (alert) {
+            // Enqueue alert
+            case 0:
+                io.sockets.in("room-" + socket.roomnum).emit('enqueueNotify', {
+                    user: data.user,
+                    title: data.title
+                });
+                break;
+            case 1:
+                break;
+            case 2:
+                break;
+            default:
+                console.log("Error alert id")
+        }
+    })
+
     //------------------------------------------------------------------------------
     // Async get current time
     socket.on('auto sync', function(data) {