Skip to content

Commit

Permalink
Video Change on Join Fix (#95)
Browse files Browse the repository at this point in the history 
When a user joins a room playing a different video, it now changes
properly on all players.
  • Loading branch information
@kyle8998
kyle8998 committed Jul 3, 2018
1 parent d1d15b4 commit 0fc9dff
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 18 deletions.
13 changes: 11 additions & 2 deletions index.html
View file
Expand Up @@ -2,6 +2,15 @@
<html lang="en">

<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-121783460-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-121783460-1');
</script>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Expand Down Expand Up @@ -121,7 +130,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>

Expand All @@ -147,7 +156,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 -->
Expand Down
10 changes: 5 additions & 5 deletions js/events.js
View file
Expand Up @@ -92,30 +92,30 @@ 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()
}
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)
break;
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

Expand All @@ -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)
Expand Down
47 changes: 47 additions & 0 deletions js/notify.js
View file
@@ -1,6 +1,7 @@
// 0. Enqueue
// 1. Host Change
// 2. Empty Queue
// 3. Beta Message

// Enqueue Notify (0)
socket.on('enqueueNotify', function(data) {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
})
}
4 changes: 2 additions & 2 deletions js/player.js
View file
Expand Up @@ -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) {
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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()
}
});

Expand Down
42 changes: 33 additions & 9 deletions server.js
View file
Expand Up @@ -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 = {
Expand All @@ -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
}
}
Expand Down Expand Up @@ -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
});
Expand Down Expand Up @@ -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
});

Expand Down Expand Up @@ -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")
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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")
Expand Down Expand Up @@ -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")
}
Expand Down

0 comments on commit 0fc9dff

Please sign in to comment.