initial import of web client code

jinzora · Feb 23, 2010 · 7ac278a · 7ac278a
commit 7ac278a
Show file tree

Hide file tree

Showing 5 changed files with 247 additions and 0 deletions.
diff --git a/README b/README
@@ -0,0 +1,3 @@
+This is a simple client for Jinzora built entirely from HTML, CSS, and Javascript, using the Jinzora API. The script can be run from anywhere, including your local machine, while still connecting to a remote server.
+
+Edit the file 'creds.js' to change servers.
diff --git a/cred.js b/cred.js
@@ -0,0 +1,5 @@
+var jz = {
+           catalog : "http://live.jinzora.org/api.php"
+         , username : ""
+         , password : ""
+         };
diff --git a/index.html b/index.html
@@ -0,0 +1,79 @@
+<html>
+  <head>
+    <script type="text/javascript"
+     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+
+    <script type="text/javascript" src="cred.js"></script>
+    <script type="text/javascript" src="style.js"></script>
+    <script type="text/javascript" src="jinzora.js"></script>
+
+  <style type="text/css">
+.hidden { display:none; }
+.instanceNode {
+  background: #eee;
+  padding: 5px;
+  border-bottom: 1px solid #aaa;
+  border-left: 1px solid #aaa;
+  border-right: 1px solid #aaa;
+}
+
+#navBar ul {
+  list-style-type:none;
+}
+
+#navBar ul li {
+  display:inline;
+  background: #ace;
+  padding:5px;
+  cursor:pointer;
+}
+
+.mediaNodeImg {
+  padding-right:20px;
+}
+
+.mediaNodeText {
+  vertical-align:middle;
+}
+
+</style>
+
+
+  </head>
+  <body>
+  <!--
+    <div id="navBar">
+      <ul>
+        <li id="navBrowse">Browse</li>
+        <li id="navPlayback">Playback</li>
+        <li id="navFriends">Friends (?)</li>
+      </ul>
+    </div>
+  -->
+    <div id="contentBrowse" class="contentDiv">
+      <a id="homelink" href="#">home</a>
+      <a id="backlink" href="#" >back</a>
+      <a id="refreshlink" href="#" >refresh</a>
+      <a id="fwdlink" href="#" >fwd</a>
+        <div id="browseBodyDiv">
+        </div>
+      </div>
+    </div>
+
+
+    <div class="hidden">
+
+      <div id="templateNode" class="instanceNode">
+        <table class="mediaNodeTable">
+          <tr><td class="mediaNodeImg">
+            <img class ="thumbnail"/>
+          </td><td class="mediaNodeText">
+            <a class="browselink" href="{url}">{name}</a>
+            <span class="sep">-</span>
+            <a class="playlink" href="{url}">Play</a>
+          </td></tr>
+        </table>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/jinzora.js b/jinzora.js
@@ -0,0 +1,58 @@
+// jinzora API demo
+
+var homelink = jz.catalog;
+    homelink += "?output=jsonp&user="+jz.username+"&pass="+jz.password+"&request=home&jsoncallback=?"; // standardize: output => format
+
+  var APIPos = -1;
+  var APICalls = new Array();
+  function callBrowseAPI(service, skipHistory) { // opt request
+    if (!skipHistory) {
+      APIPos++;
+      APICalls.length = APIPos;
+      APICalls.push(service);
+    }
+    $.getJSON(service,
+						 // parametrize this.
+        function(data){
+          // this syntax works well even for asynchronous results,
+	  // where the size of data is not stable.
+	  // We probably have to change this outer function to
+	  // be intended for a single item from a list of items.
+	  // compare speed with array iteration
+          $('#browseBodyDiv').empty();
+
+	  if (data.tracks && data.tracks.length > 0) {
+  	    $.each(data.tracks, function(i,item){
+	     	var html = '<div class="instanceNode"><a href="' + item['playlink']+'">';
+	        html += "Play: " + item['name'] + "</a>";
+              $('#browseBodyDiv').append(html + "</div>");
+	    });
+            $('#browseBodyDiv').append("<br/>");
+	  }
+
+	  $.each(data.nodes, function(i,item){
+            var node = $("#templateNode").clone();
+		$(node).find('.browselink').attr('href',window.location + '?apiurl=' + escape(item['browse']));
+		$(node).find('.browselink').click(
+		  function(e) {
+		    //window.location = window.location + '?apiurl=' + escape(item['browse']);
+		    callBrowseAPI(item['browse'] + "&jsoncallback=?");
+		    return false;
+		  }
+		);
+		$(node).find('.browselink').text(item['name']);
+		if (item['playlink']) {
+			$(node).find('.playlink').attr('href',item['playlink']);
+		} else {
+			$(node).find('.playlink,.sep').remove();
+		}
+		if (item['thumbnail']) {
+			$(node).find('.thumbnail').attr('src',item['thumbnail']);
+		} else {
+			$(node).find('.mediaNodeImg').remove();
+		}
+		node.show().appendTo('#browseBodyDiv');
+	  });
+
+        });
+}
diff --git a/style.js b/style.js
@@ -0,0 +1,102 @@
+// css constants
+var colors = { nav: {
+                 bg: '#ace'
+		,over: '#89b'
+		}
+	     }
+
+
+
+// helper methods
+
+function showContent(content) {
+  $('.contentDiv:not('+content+')').hide();
+  $(content).show();
+}
+
+
+
+// properties set after document loaded:
+$(function() {
+
+/* Nav Bar */
+
+$('#navBar ul li').bind('click',
+  function(e) {
+    showContent('#'+e.target.id.replace('nav','content'));
+  }
+);
+
+$('#navBar ul li').bind('mouseover',
+  function(e) {
+    $(e.target).css('background',colors.nav.over);
+  }
+);
+
+$('#navBar ul li').bind('mouseleave',
+  function(e) {
+    $(e.target).css('background',colors.nav.bg);
+  }
+);
+
+
+/* Browser */
+
+$('#homelink').click(
+  function(e) {
+    callBrowseAPI(homelink);
+  }
+);
+$('#backlink').click(
+  function(e) {
+    if (APICalls.length > 0 && APIPos > 0) {
+      APIPos--; // one gets added on call
+      callBrowseAPI(APICalls[APIPos],true);
+    }
+  }
+);
+$('#refreshlink').click(
+  function(e) {
+    if (APICalls.length > 0 && APIPos > 0) {
+      callBrowseAPI(APICalls[APIPos],true);
+    }
+  }
+);
+$('#fwdlink').click(
+  function(e) {
+    if (APICalls.length > 0 && APIPos > 0) {
+      if (APIPos+1 < APICalls.length)
+        callBrowseAPI(APICalls[++APIPos],true);
+    }
+  }
+);
+
+
+$('#browseBodyDiv div').live('mouseover',
+  function(e) {
+    var me = e.target;
+    while ($(me).parents('.instanceNode').length>0) me=$(me).parent()[0];
+    $(me).css('background','#eea');
+  }
+);
+
+$('#browseBodyDiv div').live('mouseout',
+  function(e) {
+    var me = e.target;
+    while ($(me).parents('.instanceNode').length>0) me=$(me).parent()[0];
+    $(me).css('background','#eee');
+  }
+);
+
+var service = homelink;
+var i = window.location.toString().indexOf('apiurl=');
+if (0 <= i) {
+  service = unescape(window.location.toString().substring(i+7));
+  service += '&jsoncallback=?';
+}
+callBrowseAPI(service);
+
+$('#navBrowse').click();
+$('#homelink').click();
+
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		This is a simple client for Jinzora built entirely from HTML, CSS, and Javascript, using the Jinzora API. The script can be run from anywhere, including your local machine, while still connecting to a remote server.

		Edit the file 'creds.js' to change servers.