Merge branch 'master' of github.com:nko/umeboshi-fireteam

nko · Aug 29, 2010 · 0a0eae1 · 0a0eae1
2 parents b0795a3 + 04ad4c0
commit 0a0eae1
Show file tree

Hide file tree

Showing 13 changed files with 929 additions and 30 deletions.
diff --git a/public/demos/video/controls.html b/public/demos/video/controls.html
@@ -7,7 +7,16 @@
 </head>
 
 <body onload="init()">
-  <textarea id="debug-area"></textarea>
+  <textarea id="debug-area" style="width:500px;height:500px;"></textarea>
+  <div id="video-controls">
+    <div id="play-button"><img src="play.png" id="play-image" style="display:block;"/></div>
+    <div id="seek-container" >
+      <div id="seek-bar-inside">
+        <div id="loaded-bar"></div>
+        <div id="played-bar"></div>
+      </div>
+    </div>
+  </div>
 <script src="http://umeboshi-fireteam.no.de:8000/pubsubhub.js"></script>
 <script src="controls.js"></script>
 </body>

diff --git a/public/demos/video/controls.js b/public/demos/video/controls.js
@@ -9,18 +9,67 @@ if (!console) {
 var  channel_key
     ,pubsub_client
     ,domain_name =  window.location.hostname
-    ,pubsub_server_url = 'http://'+domain_name+':8000';
+    ,pubsub_server_url = 'http://'+domain_name+':8000'
+    ,debug_element
+    ,video_progress_bar
+    ,video_location_bar
+    ,playpausebtn
+    ,playpausebtn_play_img
 
 function init(){
-  console.log(domain_name)
   var querystring = window.location.search
-  var debug_element = document.getElementById('debug-area')
+  debug_element = document.getElementById('debug-area')
+  video_progress_bar = document.getElementById('loaded-bar')
+  video_location_bar = document.getElementById('played-bar')
+  playpausebtn = document.getElementById('play-button')
+  playpausebtn_play_img = document.getElementById('play-image')
+  playpausebtn.addEventListener('click', playPauseVideo, false)
   channel_key = querystring.substring(querystring.indexOf('channel=')+'channel='.length, querystring.length)
-  debug_element.value = channel_key
+  debugLog('Connected on channel:'+channel_key);
   pubsub_client = new Faye.Client(pubsub_server_url+'/pubsubhub', {
       timeout: 120
   });
+  pub({'event':'controls_client_connected'})
   pubsub_client.subscribe('/'+channel_key, function(message) {
-    console.log('Got a message: ' + message.text);
+    switch(message.event){
+      case 'progress':
+        updateLoadingBar({'loaded':message.loaded, 'total':message.total})
+        break;
+      case 'timeupdate':
+        updateTimeBar({'currentTime':message.currentTime, 'duration':message.duration})
+        break;
+      default:
+        break;
+    }
   });
-}
+}
+
+function pub(obj) {
+  pubsub_client.publish('/'+channel_key, obj);
+}
+
+function updateLoadingBar(e){
+  video_progress_bar.style.width = ((e.loaded/e.total)*100)+'%';
+}
+function updateTimeBar(e){
+  debugLog(JSON.stringify(e))
+  video_location_bar.style.width = ((e.currentTime/e.duration)*100)+'%';
+}
+
+function debugLog(msg){
+  debug_element.value += msg+'\n';
+}
+
+function playPauseVideo(){
+  if (playpausebtn_play_img.style.display == 'block'){
+    playpausebtn_play_img.style.display = 'none'
+    debugLog('play')
+  } else{
+    playpausebtn_play_img.style.display = 'block'
+    debugLog('pause')
+  }
+  pub({
+     'event': 'click'
+    ,'dispatcher': 'playpausebtn'
+  });
+}
diff --git a/public/demos/video/index.html b/public/demos/video/index.html
@@ -26,11 +26,33 @@
       </div>
     </div>
   </div>
+  <div id="ume-ballon">
+    <p>
+      The author of this page have made it in a way that allows you to distribute interface elements over multiple devices (mobile ones included)!
+    </p>
+    <p>
+      Try it now by typing the following adress(es) on web-enabled device(s):
+    </p>
+    <!-- <h2>Video Display</h2>
+    <hr />
+    <p>
+      <span id="display-page-url" class="module-link">generating URL…</span><br />
+      <span class="requirement">* Requires multitouch Apple device</span>
+    </p> -->
+    <hr />
+    <h2>Video Controls</h2>
+    <p>
+      <span id="control-page-url" class="module-link">generating URL…</span><br />
+    </p>
+    <hr />
+    <p>
+      Check the prokect’s <a href="#">Home Page</a>, more <a href="#">examples</a> and (if you like it) <a href="#">vote for us int the Node Knockout Competition</a>.
+    </p>
+  </div>
   <div class="ume-ribbon"><img src="sliceMe.png" /></div>
-  <div style="background-color:#fff;">Playback control URL:<input type="text" style="width:500px;" id="playback-control-url-field" /></div>
 <script src="http://umeboshi-fireteam.no.de:8000/pubsubhub.js"></script>
-<!-- <script src="http://localhost:8000/pubsubhub.js"></script> -->
 <script src="main.js"></script>
+<!-- <script src="http://localhost:8000/pubsubhub.js"></script> -->
 <script src="/channels/new?fmt=json&callback=channelReady"></script>
 </body>
 </html>
diff --git a/public/demos/video/main.css b/public/demos/video/main.css
@@ -5,10 +5,13 @@ body{
   background-color: #dbdacd;
 }
 
+#debug-area{
+  display:none;
+}
 .ume-group{
   border: 15px solid white;
   width:640px;
-  height:420px;
+/*  height:420px;*/
   position:absolute;
   left:50%;
   top:46%;
@@ -27,7 +30,7 @@ body{
   height:61px;
   background-color:#000;
   margin-top:-1px;
-  position:absolute;
+  position:relative;
 }
 #video-controls #play-button{
   background:none;
@@ -76,10 +79,44 @@ body{
   top:0px;
 }
 
-.ume-dashed{
-  height:4px;
-  background-color:white;
-  width:100%;
+#ume-ballon{
+  background-color:#fff;
+  width:280px;
+/*  height:360px;*/
   position:absolute;
-  z-index:30;
+  right:25px;
+  top:10px;
+  -moz-border-radius: 15px 15px 15px 15px;
+  -webkit-border-radius: 15px 15px 15px 15px;
+  -o-border-radius: 15px 15px 15px 15px;
+  border-radius: 15px 15px 15px 15px;
+  -moz-box-shadow: 3px 3px 3px #666;
+  -webkit-box-shadow: 3px 3px 3px #666;
+  box-shadow: 3px 3px 3px #666;
+  padding:2em;
+  font-family: "Trebuchet MS", sans;
+}
+#ume-ballon hr{
+  border:none;
+  border-top:1px dashed #a19878;
+  margin-top:1em;
+  margin-bottom:1em;
+}
+#ume-ballon p{
+  color:#a19878;
+  font-size:14px;
+}
+#ume-ballon h2{
+  font-size:14px;
+  font-weight:bold;
+}
+#ume-ballon p .requirement{
+  color:#ec6a64;
+}
+#ume-ballon p a{
+  color:#e8a141;
+  text-decoration:none;
+}
+#ume-ballon p .module-link{
+  color:#a0c0d6;
 }
diff --git a/public/demos/video/main.js b/public/demos/video/main.js
@@ -16,11 +16,11 @@ var  channel_key
     ,video_location_bar
     ,playpausebtn
     ,playpausebtn_play_img
+    ,control_page_url_element
+    ,display_page_url_element
 
 
 function init(){
-  console.log('init')
-  console.log(domain_name)
   video_element = document.getElementById('main-video'); 
   video_progress_bar = document.getElementById('loaded-bar')
   video_location_bar = document.getElementById('played-bar')
@@ -32,13 +32,27 @@ function init(){
   video_element.addEventListener('progress', updateLoadingBar, false);
   video_element.addEventListener('timeupdate', updateTimeBar, false);
   playpausebtn.addEventListener('click', playPauseVideo, false)
+  pubsub_client.subscribe('/'+channel_key, function(message) {
+    switch(message.event){
+      case 'controls_client_connected':
+        removeControls()
+        break;
+      case 'click':
+        playPauseVideo()
+        break;
+      default:
+        break;
+    }
+  });
 }
 
 
 function channelReady(channel){
+  control_page_url_element = document.getElementById('control-page-url') 
   channel_key = channel.channel_key;
   console.log('we have a channel, its name is: '+channel.channel_key);  
-  document.getElementById('playback-control-url-field').value = http_server_url+'/demos/video/controls.html?channel='+channel_key;
+  // document.getElementById('playback-control-url-field').value = http_server_url+'/demos/video/controls.html?channel='+channel_key;
+  control_page_url_element.innerHTML = http_server_url+'/demos/video/controls.html?channel='+channel_key;
 }
 
 function pub(obj) {
@@ -60,17 +74,40 @@ function pubTest(e){
 
 function updateLoadingBar(e){
   video_progress_bar.style.width = ((e.loaded/e.total)*100)+'%';
+  pub({
+     'event': 'progress'
+    ,'dispatcher': 'video_element'
+    ,'loaded': e.loaded
+    ,'total': e.total
+  });
 }
 function updateTimeBar(e){
-  console.log(e.target.currentTime+' / '+e.target.duration)
   video_location_bar.style.width = ((e.target.currentTime/e.target.duration)*100)+'%';
+  pub({
+     'event': 'timeupdate'
+    ,'dispatcher': 'video_element'
+    ,'currentTime': e.target.currentTime
+    ,'duration': e.target.duration
+  });
+  updatePlayPauseVisual();
 }
-function playPauseVideo(){
+
+function playPauseVideo(e){
+  updatePlayPauseVisual()
   if (video_element.paused){
     video_element.play();
-    playpausebtn_play_img.style.display = 'none'
   } else{
     video_element.pause();
+  }
+}
+function updatePlayPauseVisual(){
+  if (video_element.paused){
+    playpausebtn_play_img.style.display = 'none'
+  } else{
     playpausebtn_play_img.style.display = 'block'
   }
 }
+function removeControls(){
+  var controls = document.getElementById('video-controls')
+  controls.style.display = "none"
+}
diff --git a/public/home.css b/public/home.css
@@ -0,0 +1,55 @@
+/*CSS Reset*/
+body,h1,h2,h3,h4,a,img,div,p,video,ol,li,table,caption,thead,tr,td {margin:0px;padding:0px;border:none;}
+
+body{
+  background-color: #dbdacd;
+}
+
+#header{
+  margin:auto;
+  width:1042px;
+}
+
+#content{
+    background-color:#fff;
+    width:737px;
+    margin:auto;
+  /*  height:360px;*/
+    margin-top:-60px;
+    -moz-border-radius: 15px 15px 15px 15px;
+    -webkit-border-radius: 15px 15px 15px 15px;
+    -o-border-radius: 15px 15px 15px 15px;
+    border-radius: 15px 15px 15px 15px;
+    -moz-box-shadow: 3px 3px 3px #666;
+    -webkit-box-shadow: 3px 3px 3px #666;
+    box-shadow: 3px 3px 3px #666;
+    padding:2em;
+    font-family: "Trebuchet MS", sans;
+    color:#a0c0d6;
+    position: relative;
+}
+ol{
+  margin-left:3em;
+}
+#content h2{
+  color:#a29a7a;
+}
+#content p{
+  padding:1em;
+}
+hr{
+  border:none;
+  border-top:1px dashed #a19878;
+  margin-top:1em;
+  margin-bottom:1em;
+}
+.ume-ribbon{
+  position: absolute;
+  z-index: 100;
+  right:0px;
+  top:0px;
+}
+a{
+  color:#e8a141;
+  text-decoration:none;
+}
diff --git a/public/images/headerHome.png b/public/images/headerHome.png
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en" class="no-js">
+<head>
+  <meta charset="utf-8">
+  <title></title>
+  <link rel="stylesheet" href="home.css">  
+</head>
+
+<body>
+  <div id="header">
+    <img src="/images/headerHome.png">
+  </div>
+  <div id="content">
+    <div class="ume-ribbon"><img src="/images/sliceMe.png" /></div>
+    <h2>Have you ever seen a label like that? &nbsp;➟</h2>
+    <p>
+      It means the author of the page have made it in a way that allows you to distribute interface elements over multiple devices. Mobile ones included! <a href="/demos/video/">Check some wicked stuff here!</a> 
+    </p>
+    <hr />
+    <h2>How is that possible?</h2>
+    <p>
+      The concept is quite simple: if humans can exchange messages in a chat room, why couldn't websites? In practice, we've built a special kind of <a href="http://nodejs.org">Node.js</a> server from which you can request a channel and name some participants. From that point, it's up to the author define what the pieces of his UI will chat about ;) <a href="http://github.com/nko/umeboshi-fireteam#readme">Check out proto-documentation here.</a> Or by doing view-source on a demo.
+    </p>
+    <hr />
+    <h2>Can I use it in my website or app?</h2>
+    <p>
+      Sure! The project was born during the <a href="http://nodeknockout.com">Node Knockout</a> event (a 48-hour-do-what-you-want/can-competition) so expect some unpolished/untested stuff. Aware of that, tell your site/app to follow the step below and you should be good to go:
+      <ol>
+        <li>Access the request channel page</li>
+        <li>Tell it how many UI elements will participate in the channel</li>
+        <li>Tell them who should they listen to</li>
+        <li>Teach them to understand each other</li>
+      </ol>
+    <p>
+    Let us hope community will help each other in the <a href="http://groups.google.com.br/group/umeboshi-team">forums.</a>
+    </p>
+    <hr />
+    <h2>Who did it?</h2>
+    <p>
+      The legendary <a href="http://nodeknockout.com/teams/umeboshi-fireteam">Umeboshi Fireteam.</a> Check us out and <a href="http://nodeknockout.com/teams/umeboshi-fireteam">vote</a> for us!
+      </p>
+  </div>
+  <a href="http://nodeknockout.com/teams/umeboshi-fireteam" target="nko" title="Help me win Node.js KO!"><img style="position: fixed; top: 5px; right: 5px; border: 0px;" src="http://nodeknockout.com/images/voteko.png" alt="Help me win Node.js KO!" /></a>
+</body>
+</html>