Browse Source

updats

master
Jake Champion 5 years ago
parent
commit
b83330e601
4 changed files with 72 additions and 6 deletions
  1. +5
    -5
      index2.html
  2. +20
    -0
      js/modules/video.js
  3. +43
    -1
      js/new-app.js
  4. +4
    -0
      style.css

+ 5
- 5
index2.html View File

@@ -18,7 +18,7 @@
<button id="start">Start</button>
<button id="connect">Connect</button>
</div>
<!-- <video src="webm.land/media/drs7.webm"></video>-->
<video src="http://www.webm.land/media/drs7.webm"></video>
<div id="elapsedTime">1:45</div>
<div id="duration">6:01</div>
<div id="title">Johnny Day - Desert Sand</div>
@@ -26,10 +26,10 @@
</div>
<div id="controls" class="flex-container">
<progress value=0.1></progress>
<span class="icon icon-first" id="previous"></span>
<span class="icon icon-play" id="play"></span>
<!-- <span class="icon icon-pause" id="pause"></span>-->
<span class="icon icon-last" id="previous"></span>
<button class="icon icon-first" id="previous"></button>
<button class="icon icon-play" id="play"></button>
<button class="icon icon-pause hide" id="pause"></button>
<button class="icon icon-last" id="next"></button>
</div>
</div>
<div id="playlist">


+ 20
- 0
js/modules/video.js View File

@@ -0,0 +1,20 @@
export default class Video {
constructor(element, template){
this.element = element;
this.template = template;
}
render() {
var parent = this.element.parentNode;
var el = document.createElement('div');
el.innerHTML = this.template;
var dom = el.removeChild(el.firstChild);
parent.replaceChild(dom, this.element);
this.element = dom;
this.setupEvents();
}
setupEvents() {
}
}

+ 43
- 1
js/new-app.js View File

@@ -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;
}


+ 4
- 0
style.css View File

@@ -9,6 +9,10 @@
font-style: normal;
}

.hide {
display: none;
}

[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;


Loading…
Cancel
Save