|
|
@@ -34,6 +34,7 @@ connection.onclose = function(e) { |
|
|
|
// using firebase for signaling |
|
|
|
connection.firebase = 'signaling'; |
|
|
|
|
|
|
|
//////// peer connection //////// |
|
|
|
function hideServerBtns() { |
|
|
|
startBtn.parentElement.removeChild(startBtn); |
|
|
|
connectBtn.parentElement.removeChild(connectBtn); |
|
|
@@ -49,6 +50,8 @@ connectBtn.onclick = function() { |
|
|
|
connection.check(roomid); |
|
|
|
} |
|
|
|
|
|
|
|
//////// playlist //////// |
|
|
|
|
|
|
|
var form = document.querySelector('form'); |
|
|
|
form.onsubmit = function(e) { |
|
|
|
addNewVideo({ |
|
|
@@ -102,4 +105,43 @@ function addNewVideo(video, addedLocally) { |
|
|
|
connection.send(JSON.stringify(video)); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
//////// controls //////// |
|
|
|
|
|
|
|
|
|
|
|
//TODO: volume controls |
|
|
|
var player = document.querySelector('video'); |
|
|
|
var pause = document.getElementById("pause"); |
|
|
|
var play = document.getElementById("play"); |
|
|
|
var previous = document.getElementById("previous"); |
|
|
|
var next = document.getElementById("next"); |
|
|
|
var progress = document.querySelector('progress'); |
|
|
|
player.addEventListener("timeupdate", reportProgress, false); |
|
|
|
player.addEventListener("ended", endPlayback, false); |
|
|
|
// enable and disable the controls buttons to reflect the player state |
|
|
|
player.addEventListener("play",function() { |
|
|
|
play.classList.add('hide'); |
|
|
|
pause.classList.remove('hide'); |
|
|
|
}); |
|
|
|
player.addEventListener("pause",function() { |
|
|
|
play.classList.remove('hide'); |
|
|
|
pause.classList.add('hide'); |
|
|
|
}); |
|
|
|
play.addEventListener("click",startPlayback,false); |
|
|
|
pause.addEventListener("click",pausePlayback,false); |
|
|
|
|
|
|
|
function startPlayback() { |
|
|
|
player.play(); |
|
|
|
} |
|
|
|
|
|
|
|
function pausePlayback() { |
|
|
|
player.pause(); |
|
|
|
} |
|
|
|
|
|
|
|
function reportProgress() { |
|
|
|
var percent = player.currentTime/ player.duration; |
|
|
|
if(isNaN(percent)) return; |
|
|
|
progress.value = percent; |
|
|
|
} |
|
|
|
|