updats

index2.html

@@ -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">

js/modules/video.js

@@ -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() {
+        
+    }
+}

js/new-app.js

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

style.css

@@ -9,6 +9,10 @@
 	font-style: normal;
 }
 
+.hide {
+    display: none;
+}
+
 [class^="icon-"], [class*=" icon-"] {
 	font-family: 'icomoon';
 	speak: none;