Buffer Seek Bug Fixed

Youtube client will now autoplay when seeking with the host after a
buffer. Before when the host used an event listener to load a part of a
video that was not loaded, it would pause on the other sockets.

Author: kyle8998

index.html

@@ -112,12 +112,11 @@ <h2> Join a Room! </h2>
                     </div>
 
 
-                    <br/>
-                    NOTE: MOBILE IS CURRENTLY BROKEN, EVENT HANDLERS IN BETA
+                    <br/> NOTE: MOBILE IS CURRENTLY BROKEN, EVENT HANDLERS IN BETA
                     <br/>
                     <h2><span id="hostlabel" class="label label-default"> Current Host: Kyle </span></h2>
 
-<!----------------------------------- PLAYER AREA ----------------------------------->
+                    <!----------------------------------- PLAYER AREA ----------------------------------->
 
                     <div id='playerArea'>
                         <iframe class="video" id="player" allowfullscreen="0" rel="0" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="1" style="border: solid 4px #37474F"></iframe>
@@ -129,7 +128,7 @@ <h2><span id="hostlabel" class="label label-default"> Current Host: Kyle </span>
                         <iframe class="video" id="player-vimeo" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                     </div>
 
-<!----------------------------------- PLAYER AREA ----------------------------------->
+                    <!----------------------------------- PLAYER AREA ----------------------------------->
 
                     <div>
                         <button onclick="playVideo(roomnum)" style="margin-top:.5rem" class="btn btn-primary"><i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause</button>
@@ -172,6 +171,7 @@ <h3>Online Users</h3>
             <!-- /.row -->
 
             <div id="messageArea" class="row">
+                <br/>
                 <h2 style="color:gray">Chat</h2>
                 <div class="col-md-8">
                     <div class="chat" id="chat"></div>
@@ -240,14 +240,16 @@ <h2 class="card-title">Card Three</h2>
 
             <hr style="height:120pt; visibility:hidden;" />
             <section id="about" class="bg-light">
+                <br/>
+                <br/>
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-8 mx-auto">
                             <h2>About Vynchronize</h2>
                             <p class="lead">Vynchronize is a video synchronization platform created for viewing parties with friends!</p>
-                            <p> To use Vynchronize just enter your name and a shared room number with friends. Then all you have to do is enter in a video id which you can get from a specific youtube video link then click on change video. The video will change
-                                for everyone connected to your room. You can use the play and sync buttons to control video playback. Play simply plays/pauses the video for everyone. The sync button syncs everyone in the room to your current position
-                                in the video. Normal controls on the youtube player still work, but they only affect you! If you want to pause the video only for yourself, then just pause on the player instead of hitting the play button!</p>
+                            <p> To use Vynchronize just enter your name and a shared room number with friends. Then all you have to do is select your video client (YouTube by default), enter a video ID, and click "Change Video". All video playback should
+                                be synchronized to everyone in the room! </p>
+                            <p> There is one host per room that can control the video client directly with the native player controls. Everyone else can still use them but it will only affect them until they hit sync!</p>
                             <p> Have fun watching videos with friends!</p>
                         </div>
                     </div>

js/events.js

@@ -78,6 +78,7 @@ function seekOther(roomnum, currTime) {
         room: roomnum,
         time: currTime
     });
+    // socket.emit('getData');
 }
 
 
@@ -92,6 +93,8 @@ socket.on('justSeek', function(data) {
             var clientTime = player.getCurrentTime();
             if (clientTime < currTime - .1 || clientTime > currTime + .1) {
                 player.seekTo(currTime);
+                // Forces video to play right after seek
+                player.playVideo()
             }
             break;
         case 1:

js/yt.js

@@ -72,6 +72,7 @@ function onPlayerStateChange(event) {
             var currTime = player.getCurrentTime();
             if (host) {
                 seekOther(roomnum, currTime)
+                // syncVideo(roomnum)
             }
             break;
     }

server.js

@@ -66,6 +66,11 @@ io.sockets.on('connection', function(socket) {
         io.sockets.in("room-" + roomnum).emit('justSeek', {
             time: currTime
         });
+
+        // Sync up
+        // host = io.sockets.adapter.rooms['room-' + roomnum].host
+        // console.log("let me sync "+host)
+        // socket.broadcast.to(host).emit('getData');
     });
 
     // Sync video