Skip to content

Commit 0fc9dff

Browse files
kyle8998kyle8998
committed
Video Change on Join Fix (#95)
When a user joins a room playing a different video, it now changes properly on all players.
1 parent d1d15b4 commit 0fc9dff

File tree

5 files changed

+98
-18
lines changed

5 files changed

+98
-18
lines changed

‎index.html‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@
22
<html lang="en">
33

44
<head>
5+
<!-- Global site tag (gtag.js) - Google Analytics -->
6+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-121783460-1"></script>
7+
<script>
8+
window.dataLayer = window.dataLayer || [];
9+
function gtag(){dataLayer.push(arguments);}
10+
gtag('js', new Date());
11+
12+
gtag('config', 'UA-121783460-1');
13+
</script>
514

615
<meta charset="utf-8">
716
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -121,7 +130,7 @@ <h2> Join a Room! </h2>
121130
<a class="dropdown-item" onclick="changePlayer(roomnum, 0)"><i class="fab fa-youtube"></i> YouTube</a>
122131
<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>
123132
<a class="dropdown-item" onclick="changePlayer(roomnum, 2)"><i class="fab fa-vimeo"></i> Vimeo</a>
124-
<a class="dropdown-item" onclick="changePlayer(roomnum, 3)"><i class="fas fa-file-video"></i> HTML5 Player (Not Working Yet!)</a>
133+
<a class="dropdown-item" onclick="changePlayer(roomnum, 3)"><i class="fas fa-file-video"></i> HTML5 Player (.mp4/.webm) (Beta)</a>
125134
</div>
126135
</div>
127136

@@ -147,7 +156,7 @@ <h2><span id="hostlabel" class="label label-default"><i class="fas fa-user"></i>
147156
</div>
148157
<div id='HTML5Area'>
149158
<div class="html5player">
150-
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="640" height="360" class="video html5video" id="html5src" controls>
159+
<video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="640" height="360" class="video html5video" id="html5src" controls>
151160
<!-- <source src="video/sintel-short.mp4" type="video/mp4">
152161
<source src="video/sintel-short.webm" type="video/webm"> -->
153162
<!-- fallback content here -->

‎js/events.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -92,30 +92,30 @@ function seekOther(roomnum, currTime) {
9292

9393
// Weird for YouTube because there is no built in seek event
9494
// It seeks on an buffer event
95-
// Only syncs if off by over .1 seconds
95+
// Only syncs if off by over .2 seconds
9696
socket.on('justSeek', function(data) {
9797
console.log("Seeking Event!")
9898
currTime = data.time
9999
switch (currPlayer) {
100100
case 0:
101101
var clientTime = player.getCurrentTime();
102-
if (clientTime < currTime - .1 || clientTime > currTime + .1) {
102+
if (clientTime < currTime - .2 || clientTime > currTime + .2) {
103103
player.seekTo(currTime);
104104
// Forces video to play right after seek
105105
player.playVideo()
106106
}
107107
break;
108108
case 1:
109109
var clientTime = dailyPlayer.currentTime;
110-
if (clientTime < currTime - .1 || clientTime > currTime + .1) {
110+
if (clientTime < currTime - .2 || clientTime > currTime + .2) {
111111
dailyPlayer.seek(currTime);
112112
}
113113
playOther(roomnum)
114114
break;
115115
case 2:
116116
vimeoPlayer.getCurrentTime().then(function(seconds) {
117117
// seconds = the current playback position
118-
if (seconds < currTime - .1 || seconds > currTime + .1) {
118+
if (seconds < currTime - .2 || seconds > currTime + .2) {
119119
vimeoPlayer.setCurrentTime(currTime).then(function(seconds) {
120120
// seconds = the actual time that the player seeked to
121121

@@ -139,7 +139,7 @@ socket.on('justSeek', function(data) {
139139
break;
140140
case 3:
141141
var clientTime = media.currentTime
142-
if (clientTime < currTime - .1 || clientTime > currTime + .1) {
142+
if (clientTime < currTime - .2 || clientTime > currTime + .2) {
143143
media.currentTime = currTime
144144
}
145145
// playOther(roomnum)

‎js/notify.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// 0. Enqueue
22
// 1. Host Change
33
// 2. Empty Queue
4+
// 3. Beta Message
45

56
// Enqueue Notify (0)
67
socket.on('enqueueNotify', function(data) {
@@ -81,6 +82,30 @@ socket.on('emptyQueueNotify', function(data) {
8182
});
8283
})
8384

85+
// Beta Message (3)
86+
socket.on('betaNotify', function(data) {
87+
console.log("Beta Notify Alert")
88+
89+
$.notify({
90+
title: '<strong>Warning: </strong>',
91+
icon: 'fas fa-trash',
92+
message: "HTML5 Player is in beta. It does not work 100% with more than 2 people."
93+
}, {
94+
type: 'warning',
95+
delay: 800,
96+
animate: {
97+
enter: 'animated fadeInUp',
98+
exit: 'animated fadeOutRight'
99+
},
100+
placement: {
101+
from: "bottom",
102+
align: "right"
103+
},
104+
offset: 20,
105+
spacing: 10,
106+
z_index: 1031,
107+
});
108+
})
84109

85110
//------------------------------------------------------------------------------
86111
// Not part of the server function
@@ -180,3 +205,25 @@ function invalidURL() {
180205
z_index: 1031,
181206
})
182207
}
208+
209+
function betaAlert() {
210+
$.notify({
211+
title: '<strong>Warning: </strong>',
212+
icon: 'fas fa-trash',
213+
message: "HTML5 Player is in beta. It does not work 100% with long videos"
214+
}, {
215+
type: 'warning',
216+
delay: 3200,
217+
animate: {
218+
enter: 'animated fadeInUp',
219+
exit: 'animated fadeOutRight'
220+
},
221+
placement: {
222+
from: "bottom",
223+
align: "right"
224+
},
225+
offset: 20,
226+
spacing: 10,
227+
z_index: 1031,
228+
})
229+
}

‎js/player.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ var currPlayer = 0
33
// 0 - YouTube
44
// 1 - Daily Motion
55
// 2 - Vimeo
6+
// 3 - HTML5
67

78
// Gets all the player data
89
socket.on('getPlayerData', function(data) {
@@ -200,8 +201,6 @@ socket.on('createVimeo', function(data) {
200201

201202
// Create HTML5 Player
202203
socket.on('createHTML5', function(data) {
203-
console.log("55555")
204-
console.log(currPlayer)
205204
if (currPlayer != 3) {
206205

207206
var you = document.getElementById('playerArea');
@@ -229,6 +228,7 @@ socket.on('createHTML5', function(data) {
229228
document.getElementById('inputVideoId').placeholder = 'Direct mp4/webm URL'
230229
// document.getElementById('html5-message').style.display = 'block'
231230

231+
betaAlert()
232232
}
233233
});
234234

‎server.js‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ io.sockets.on('connection', function(socket) {
177177
yt: 'M7lc1UVf-VE',
178178
dm: 'x26m1j4',
179179
vimeo: '76979871',
180-
html5: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
180+
html5: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
181181
}
182182
// Previous Video
183183
io.sockets.adapter.rooms['room-' + socket.roomnum].prevVideo = {
@@ -194,7 +194,7 @@ io.sockets.on('connection', function(socket) {
194194
time: 0
195195
},
196196
html5: {
197-
id: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
197+
id: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
198198
time: 0
199199
}
200200
}
@@ -238,7 +238,25 @@ io.sockets.on('connection', function(socket) {
238238
}
239239
var currYT = io.sockets.adapter.rooms['room-' + socket.roomnum].currVideo.yt
240240

241-
// Change the video to current One
241+
// Change the video player to current One
242+
switch (io.sockets.adapter.rooms['room-' + socket.roomnum].currPlayer) {
243+
case 0:
244+
// YouTube is default so do nothing
245+
break;
246+
case 1:
247+
io.sockets.in("room-" + socket.roomnum).emit('createDaily', {});
248+
break;
249+
case 2:
250+
io.sockets.in("room-" + socket.roomnum).emit('createVimeo', {});
251+
break;
252+
case 3:
253+
io.sockets.in("room-" + socket.roomnum).emit('createHTML5', {});
254+
break;
255+
default:
256+
console.log("Error invalid player id")
257+
}
258+
259+
// Change the video to the current one
242260
socket.emit('changeVideoClient', {
243261
videoId: currVideo
244262
});
@@ -295,20 +313,22 @@ io.sockets.on('connection', function(socket) {
295313
io.sockets.in("room-" + roomnum).emit('playVideoClient');
296314
});
297315

316+
// Event Listener Functions
317+
// Broadcast so host doesn't continuously call it on itself!
298318
socket.on('play other', function(data) {
299319
var roomnum = data.room
300-
io.sockets.in("room-" + roomnum).emit('justPlay');
320+
socket.broadcast.to("room-" + roomnum).emit('justPlay');
301321
});
302322

303323
socket.on('pause other', function(data) {
304324
var roomnum = data.room
305-
io.sockets.in("room-" + roomnum).emit('justPause');
325+
socket.broadcast.to("room-" + roomnum).emit('justPause');
306326
});
307327

308328
socket.on('seek other', function(data) {
309329
var roomnum = data.room
310330
var currTime = data.time
311-
io.sockets.in("room-" + roomnum).emit('justSeek', {
331+
socket.broadcast.to("room-" + roomnum).emit('justSeek', {
312332
time: currTime
313333
});
314334

@@ -537,7 +557,7 @@ io.sockets.on('connection', function(socket) {
537557
io.sockets.adapter.rooms['room-' + socket.roomnum].prevVideo.html5.id = io.sockets.adapter.rooms['room-' + socket.roomnum].currVideo.html5
538558
io.sockets.adapter.rooms['room-' + socket.roomnum].prevVideo.html5.time = time
539559
// Set new video id
540-
io.sockets.adapter.rooms['room-' + socket.roomnum].currVideo.html5= videoId
560+
io.sockets.adapter.rooms['room-' + socket.roomnum].currVideo.html5 = videoId
541561
break;
542562
default:
543563
console.log("Error invalid player id")
@@ -653,7 +673,7 @@ io.sockets.on('connection', function(socket) {
653673

654674
// This changes the room variable to the player id
655675
io.sockets.adapter.rooms['room-' + roomnum].currPlayer = playerId
656-
console.log(io.sockets.adapter.rooms['room-' + socket.roomnum].currPlayer)
676+
// console.log(io.sockets.adapter.rooms['room-' + socket.roomnum].currPlayer)
657677

658678
// This syncs the host whenever the player changes
659679
host = io.sockets.adapter.rooms['room-' + socket.roomnum].host
@@ -802,7 +822,6 @@ io.sockets.on('connection', function(socket) {
802822
})
803823

804824
// Calls notify functions
805-
// NOT YET FINISHED
806825
socket.on('notify alerts', function(data) {
807826
var alert = data.alert
808827
console.log("entered notify alerts")
@@ -835,6 +854,11 @@ io.sockets.on('connection', function(socket) {
835854
user: encodedUser
836855
})
837856
break;
857+
// Beta Message Alert
858+
case 3:
859+
console.log("yoyoyoyoyo")
860+
io.sockets.in("room-" + socket.roomnum).emit('betaNotify', {})
861+
break;
838862
default:
839863
console.log("Error alert id")
840864
}

0 commit comments

Comments
 (0)