From 0c5c393be6d1a5ecb8ddb986d82a8dbb03e77b6e Mon Sep 17 00:00:00 2001
From: Kyle Lim <kylelim8998@gmail.com>
Date: Sun, 1 Jul 2018 10:57:52 -0700
Subject: [PATCH] Video Change on Join Fix (#95)

When a user joins a room playing a different video, it now changes
properly on all players.
---
 index.html   |  4 ++--
 js/events.js | 10 +++++-----
 js/notify.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 js/player.js |  4 ++--
 server.js    | 42 +++++++++++++++++++++++++++++++++---------
 5 files changed, 89 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index 16ba577..131c3ce 100644
--- a/index.html
+++ b/index.html
@@ -121,7 +121,7 @@ <h2> Join a Room! </h2>
                             <a class="dropdown-item" onclick="changePlayer(roomnum, 0)"><i class="fab fa-youtube"></i> YouTube</a>
                             <a class="dropdown-item" onclick="changePlayer(roomnum, 1)"><img width="14px" height="14px" src="img/dailymotion-logo.svg" alt="Daily Motion Logo"> Daily Motion</a>
                             <a class="dropdown-item" onclick="changePlayer(roomnum, 2)"><i class="fab fa-vimeo"></i> Vimeo</a>
-                            <a class="dropdown-item" onclick="changePlayer(roomnum, 3)"><i class="fas fa-file-video"></i> HTML5 Player (Not Working Yet!)</a>
+                            <a class="dropdown-item" onclick="changePlayer(roomnum, 3)"><i class="fas fa-file-video"></i> HTML5 Player (.mp4/.webm) (Beta)</a>
                         </div>
                     </div>
 
@@ -147,7 +147,7 @@ <h2><span id="hostlabel" class="label label-default"><i class="fas fa-user"></i>
                     </div>
                     <div id='HTML5Area'>
                         <div class="html5player">
-                            <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="640" height="360" class="video html5video" id="html5src" controls>
+                            <video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="640" height="360" class="video html5video" id="html5src" controls>
                             <!-- <source src="video/sintel-short.mp4" type="video/mp4">
                             <source src="video/sintel-short.webm" type="video/webm"> -->
                             <!-- fallback content here -->
diff --git a/js/events.js b/js/events.js
index 79a69ed..662d7d5 100644
--- a/js/events.js
+++ b/js/events.js
@@ -92,14 +92,14 @@ function seekOther(roomnum, currTime) {
 
 // Weird for YouTube because there is no built in seek event
 // It seeks on an buffer event
-// Only syncs if off by over .1 seconds
+// Only syncs if off by over .2 seconds
 socket.on('justSeek', function(data) {
     console.log("Seeking Event!")
     currTime = data.time
     switch (currPlayer) {
         case 0:
             var clientTime = player.getCurrentTime();
-            if (clientTime < currTime - .1 || clientTime > currTime + .1) {
+            if (clientTime < currTime - .2 || clientTime > currTime + .2) {
                 player.seekTo(currTime);
                 // Forces video to play right after seek
                 player.playVideo()
@@ -107,7 +107,7 @@ socket.on('justSeek', function(data) {
             break;
         case 1:
             var clientTime = dailyPlayer.currentTime;
-            if (clientTime < currTime - .1 || clientTime > currTime + .1) {
+            if (clientTime < currTime - .2 || clientTime > currTime + .2) {
                 dailyPlayer.seek(currTime);
             }
             playOther(roomnum)
@@ -115,7 +115,7 @@ socket.on('justSeek', function(data) {
         case 2:
             vimeoPlayer.getCurrentTime().then(function(seconds) {
                 // seconds = the current playback position
-                if (seconds < currTime - .1 || seconds > currTime + .1) {
+                if (seconds < currTime - .2 || seconds > currTime + .2) {
                     vimeoPlayer.setCurrentTime(currTime).then(function(seconds) {
                         // seconds = the actual time that the player seeked to
 
@@ -139,7 +139,7 @@ socket.on('justSeek', function(data) {
             break;
         case 3:
             var clientTime = media.currentTime
-            if (clientTime < currTime - .1 || clientTime > currTime + .1) {
+            if (clientTime < currTime - .2 || clientTime > currTime + .2) {
                 media.currentTime = currTime
             }
             // playOther(roomnum)
diff --git a/js/notify.js b/js/notify.js
index 5de52a4..62c4aac 100644
--- a/js/notify.js
+++ b/js/notify.js
@@ -1,6 +1,7 @@
 // 0. Enqueue
 // 1. Host Change
 // 2. Empty Queue
+// 3. Beta Message
 
 // Enqueue Notify (0)
 socket.on('enqueueNotify', function(data) {
@@ -81,6 +82,30 @@ socket.on('emptyQueueNotify', function(data) {
     });
 })
 
+// Beta Message (3)
+socket.on('betaNotify', function(data) {
+    console.log("Beta Notify Alert")
+
+    $.notify({
+        title: '<strong>Warning: </strong>',
+        icon: 'fas fa-trash',
+        message: "HTML5 Player is in beta. It does not work 100% with more than 2 people."
+    }, {
+        type: 'warning',
+        delay: 800,
+        animate: {
+            enter: 'animated fadeInUp',
+            exit: 'animated fadeOutRight'
+        },
+        placement: {
+            from: "bottom",
+            align: "right"
+        },
+        offset: 20,
+        spacing: 10,
+        z_index: 1031,
+    });
+})
 
 //------------------------------------------------------------------------------
 // Not part of the server function
@@ -180,3 +205,25 @@ function invalidURL() {
         z_index: 1031,
     })
 }
+
+function betaAlert() {
+    $.notify({
+        title: '<strong>Warning: </strong>',
+        icon: 'fas fa-trash',
+        message: "HTML5 Player is in beta. It does not work 100% with long videos"
+    }, {
+        type: 'warning',
+        delay: 3200,
+        animate: {
+            enter: 'animated fadeInUp',
+            exit: 'animated fadeOutRight'
+        },
+        placement: {
+            from: "bottom",
+            align: "right"
+        },
+        offset: 20,
+        spacing: 10,
+        z_index: 1031,
+    })
+}
diff --git a/js/player.js b/js/player.js
index 5a67f86..ce99aa5 100644
--- a/js/player.js
+++ b/js/player.js
@@ -3,6 +3,7 @@ var currPlayer = 0
 // 0 - YouTube
 // 1 - Daily Motion
 // 2 - Vimeo
+// 3 - HTML5
 
 // Gets all the player data
 socket.on('getPlayerData', function(data) {
@@ -200,8 +201,6 @@ socket.on('createVimeo', function(data) {
 
 // Create HTML5 Player
 socket.on('createHTML5', function(data) {
-    console.log("55555")
-    console.log(currPlayer)
     if (currPlayer != 3) {
 
         var you = document.getElementById('playerArea');
@@ -229,6 +228,7 @@ socket.on('createHTML5', function(data) {
         document.getElementById('inputVideoId').placeholder = 'Direct mp4/webm URL'
         // document.getElementById('html5-message').style.display = 'block'
 
+        betaAlert()
     }
 });
 
diff --git a/server.js b/server.js
index 188cc5e..5743f86 100644
--- a/server.js
+++ b/server.js
@@ -177,7 +177,7 @@ io.sockets.on('connection', function(socket) {
                 yt: 'M7lc1UVf-VE',
                 dm: 'x26m1j4',
                 vimeo: '76979871',
-                html5: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
+                html5: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
             }
             // Previous Video
             io.sockets.adapter.rooms['room-' + socket.roomnum].prevVideo = {
@@ -194,7 +194,7 @@ io.sockets.on('connection', function(socket) {
                     time: 0
                 },
                 html5: {
-                    id: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+                    id: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
                     time: 0
                 }
             }
@@ -238,7 +238,25 @@ io.sockets.on('connection', function(socket) {
         }
         var currYT = io.sockets.adapter.rooms['room-' + socket.roomnum].currVideo.yt
 
-        // Change the video to current One
+        // Change the video player to current One
+        switch (io.sockets.adapter.rooms['room-' + socket.roomnum].currPlayer) {
+            case 0:
+                // YouTube is default so do nothing
+                break;
+            case 1:
+                io.sockets.in("room-" + socket.roomnum).emit('createDaily', {});
+                break;
+            case 2:
+                io.sockets.in("room-" + socket.roomnum).emit('createVimeo', {});
+                break;
+            case 3:
+                io.sockets.in("room-" + socket.roomnum).emit('createHTML5', {});
+                break;
+            default:
+                console.log("Error invalid player id")
+        }
+
+        // Change the video to the current one
         socket.emit('changeVideoClient', {
             videoId: currVideo
         });
@@ -295,20 +313,22 @@ io.sockets.on('connection', function(socket) {
         io.sockets.in("room-" + roomnum).emit('playVideoClient');
     });
 
+    // Event Listener Functions
+    // Broadcast so host doesn't continuously call it on itself!
     socket.on('play other', function(data) {
         var roomnum = data.room
-        io.sockets.in("room-" + roomnum).emit('justPlay');
+        socket.broadcast.to("room-" + roomnum).emit('justPlay');
     });
 
     socket.on('pause other', function(data) {
         var roomnum = data.room
-        io.sockets.in("room-" + roomnum).emit('justPause');
+        socket.broadcast.to("room-" + roomnum).emit('justPause');
     });
 
     socket.on('seek other', function(data) {
         var roomnum = data.room
         var currTime = data.time
-        io.sockets.in("room-" + roomnum).emit('justSeek', {
+        socket.broadcast.to("room-" + roomnum).emit('justSeek', {
             time: currTime
         });
 
@@ -537,7 +557,7 @@ io.sockets.on('connection', function(socket) {
                     io.sockets.adapter.rooms['room-' + socket.roomnum].prevVideo.html5.id = io.sockets.adapter.rooms['room-' + socket.roomnum].currVideo.html5
                     io.sockets.adapter.rooms['room-' + socket.roomnum].prevVideo.html5.time = time
                     // Set new video id
-                    io.sockets.adapter.rooms['room-' + socket.roomnum].currVideo.html5= videoId
+                    io.sockets.adapter.rooms['room-' + socket.roomnum].currVideo.html5 = videoId
                     break;
                 default:
                     console.log("Error invalid player id")
@@ -653,7 +673,7 @@ io.sockets.on('connection', function(socket) {
 
             // This changes the room variable to the player id
             io.sockets.adapter.rooms['room-' + roomnum].currPlayer = playerId
-            console.log(io.sockets.adapter.rooms['room-' + socket.roomnum].currPlayer)
+            // console.log(io.sockets.adapter.rooms['room-' + socket.roomnum].currPlayer)
 
             // This syncs the host whenever the player changes
             host = io.sockets.adapter.rooms['room-' + socket.roomnum].host
@@ -802,7 +822,6 @@ io.sockets.on('connection', function(socket) {
     })
 
     // Calls notify functions
-    // NOT YET FINISHED
     socket.on('notify alerts', function(data) {
         var alert = data.alert
         console.log("entered notify alerts")
@@ -835,6 +854,11 @@ io.sockets.on('connection', function(socket) {
                     user: encodedUser
                 })
                 break;
+                // Beta Message Alert
+            case 3:
+                console.log("yoyoyoyoyo")
+                io.sockets.in("room-" + socket.roomnum).emit('betaNotify', {})
+                break;
             default:
                 console.log("Error alert id")
         }