Rather intensive redo of webinterface

git-svn-id: https://xbmc.svn.sourceforge.net/svnroot/xbmc/trunk@28480 568bbfeb-2a22-0410-94d2-cc84cf5bfa90
author: topfs2 <topfs2@svn> 2010-03-09 17:11:51 +0000
committer: topfs2 <topfs2@svn> 2010-03-09 17:11:51 +0000
commit: 036e2eb7e0c2a74400580947040ccaa2a5372ca9 (patch)
tree: 655dd02378483d715a12c969f82bb9176e9589cc /web/poc_jsonrpc
parent: a6a64dd829af2b709b3120c76d0722c932675fc7 (diff)
16 files changed, 606 insertions, 101 deletions
diff --git a/web/poc_jsonrpc/albums.html b/web/poc_jsonrpc/albums.html
index 77d02edbb4..5feee87391 100644
--- a/web/poc_jsonrpc/albums.html
+++ b/web/poc_jsonrpc/albums.html
@@ -1,12 +1,29 @@
 <html>
 <head>
 <title>XBMC - Albums</title> 
-<link type="text/css" rel="stylesheet" href="basic.css">
-<script type="text/javascript" src="json.js"> // FOR browsers which doesn't have it included
-</script>
+<link type="text/css" rel="stylesheet" href="basic.css" />
+<script type="text/javascript" src="json.js" />
 </head>
 <body>
-<h1><a href="nowplaying.html">Now playing</a>   <a href="movies.html">Movies</a>   <a href="tvshows.html">TV Shows</a>   Albums    <a href="development.html">Development</a></h1>
+<table class="Navigation">
+<tr class="primary">
+  <td class="unselected"><a href="nowplaying.html">Now playing</a></td>
+  <td class="unselected"><a href="movies.html">Videos</a></td>
+  <td class="selected">Music</td>
+  <td class="unselected"><a href="development.html">Development</a></td>
+</tr>
+<tr>
+  <td></td><td></td><td>
+  <table>
+  <tr class="secondary">
+    <td><a href="musicfiles.html">Music files</a></td>
+    <td><a href="artists.html">Artists</a></td>
+    <td>Albums</td>
+  </tr>
+  </table></td>
+</tr>
+</table>
+<br />
 
 <script type="text/javascript">
 var http_request = new XMLHttpRequest();
diff --git a/web/poc_jsonrpc/artists.html b/web/poc_jsonrpc/artists.html
new file mode 100644
index 0000000000..ae19840051
--- /dev/null
+++ b/web/poc_jsonrpc/artists.html
@@ -0,0 +1,73 @@
+<html>
+<head>
+<title>XBMC - Artists</title> 
+<link type="text/css" rel="stylesheet" href="basic.css" />
+<script type="text/javascript" src="json.js" />
+<script type="text/javascript">
+function writeArtist( artist ) {
+  document.write("<h2>" + artist["label"] + "</h2>");
+
+  var http_request = new XMLHttpRequest();
+  http_request.open( "POST", "jsonrpc", false );
+  http_request.send("{\"jsonrpc\": \"2.0\", \"method\": \"MusicLibrary.GetAlbums\", \"params\": { \"artistid\": " + artist["artistid"] + " }, \"id\": 1}");
+
+  var the_object = JSON.parse(http_request.responseText);
+  var result = the_object["result"];
+  var array = result["albums"];
+
+  for (var property in array) {
+    var item = array[property];
+    document.write("<a href=\"nowplaying.html\">");
+    if (item["thumbnail"])
+      document.write("<img src=\"thumb/" + item["thumbnail"] + ".jpg\" class=\"cover\" alt=\"" + item["label"] + "\"></img>");
+    else
+      document.write("<img src=\"images/DefaultAlbumCover.png\" class=\"cover\" alt=\"" + item["label"] + "\"></img>");
+    document.write("</a>");
+  }
+}
+</script>
+</head>
+<body>
+<table class="Navigation">
+<tr class="primary">
+  <td class="unselected"><a href="nowplaying.html">Now playing</a></td>
+  <td class="unselected"><a href="movies.html">Videos</a></td>
+  <td class="selected">Music</td>
+  <td class="unselected"><a href="development.html">Development</a></td>
+</tr>
+<tr>
+  <td></td><td></td><td>
+  <table>
+  <tr class="secondary">
+    <td><a href="musicfiles.html">Music files</a></td>
+    <td>Artists</td>
+    <td><a href="albums.html">Albums</a></td>
+  </tr>
+  </table></td>
+</tr>
+</table>
+<br />
+
+<script type="text/javascript">
+var http_request = new XMLHttpRequest();
+http_request.open( "POST", "jsonrpc", false );
+http_request.send("{\"jsonrpc\": \"2.0\", \"method\": \"MusicLibrary.GetArtists\", \"id\": 1}");
+
+var the_object = JSON.parse(http_request.responseText);
+var result = the_object["result"];
+var array = result["artists"];
+
+document.write("<table>");
+for (var property in array) {
+  document.write("<tr class=\"" + (property % 2 == 0 ? "even" : "odd") + "\"><td>");
+
+  var item = array[property];
+
+  writeArtist(item);
+
+  document.write("</td></tr>");
+}
+document.write("</table>");
+</script>
+</body>
+</html>
diff --git a/web/poc_jsonrpc/basic.css b/web/poc_jsonrpc/basic.css
index 73b3d4e20d..faa7fa3072 100644
--- a/web/poc_jsonrpc/basic.css
+++ b/web/poc_jsonrpc/basic.css
@@ -4,8 +4,9 @@ body
   color:grey;
 }
 
-A:link {
-  color: red;
+A {
+  color:white;
+  text-decoration:none;
 }
 
 h1
@@ -13,9 +14,16 @@ h1
   color:white;
 }
 
+img.cover {
+  width:100px;
+}
+
+img.smallcover {
+  width:30px;
+}
+
 table {
   border:0px;
-  width:500px;
 }
 
 table th {
@@ -31,15 +39,14 @@ table tr.Even {
   background:rgb(30,30,30);
 }
 
-table.Movies td.Cover {
+table.Movies td.cover {
   text-align:center;
   background:black;
+  height:100px;
 }
 
-table.Info td.Title {
-  background-color:yellow;
-  text-align:right;
-  color:white;
+table.Movies td.info {
+  vertical-align:text-top;
 }
 
 table.Playlist td.playing {
@@ -51,3 +58,16 @@ table.Introspect {
   border:0px;
   width:2000px;
 }
+
+table.Navigation td {
+  width:300px;
+}
+
+table.Navigation tr.primary {
+  font-size:40px;
+  text-align:center;
+}
+
+table.Navigation tr.secondary {
+  text-align:center;
+}
diff --git a/web/poc_jsonrpc/development.html b/web/poc_jsonrpc/development.html
index 36785279a6..7e6f4175c1 100644
--- a/web/poc_jsonrpc/development.html
+++ b/web/poc_jsonrpc/development.html
@@ -1,12 +1,19 @@
 <html>
 <head>
 <title>XBMC - Development</title>
-<link type="text/css" rel="stylesheet" href="basic.css">
-<script type="text/javascript" src="json.js"> // FOR browsers which doesn't have it included
-</script>
+<link type="text/css" rel="stylesheet" href="basic.css" />
+<script type="text/javascript" src="json.js" />
 </head>
 <body>
-<h1><a href="nowplaying.html">Now playing</a>   <a href="movies.html">Movies</a>   <a href="tvshows.html">TV Shows</a>   <a href="albums.html">Albums</a>    Development</h1>
+<table class="Navigation">
+<tr class="primary">
+  <td class="unselected"><a href="nowplaying.html">Now playing</a></td>
+  <td class="unselected"><a href="movies.html">Videos</a></td>
+  <td class="unselected"><a href="artists.html">Music</a></td>
+  <td class="selected">Development</td>
+</tr>
+</table>
+<br />
 
 <script type="text/javascript">
 var http_request = new XMLHttpRequest();
@@ -17,21 +24,15 @@ var the_object = JSON.parse(http_request.responseText);
 var result = the_object["result"];
 var commands = result["commands"];
 document.write("<table class=\"Introspect\"><thead><tr><th>Command</th><th>Executable</th><th>Permission</th><th>Description</th></tr></thead><tbody>");
-var odd = false;
 for (var property in commands) {
   var item = commands[property];
-  var row = "even";
-  if (odd)
-    row = "odd";
 
-  document.write("<tr class=\"" + row + "\">");
+  document.write("<tr class=\"" + (property % 2 == 0 ? "even" : "odd") + "\">");
   document.write("<td class=\"command\">"     + item["command"]     + "</td>");
   document.write("<td class=\"executable\">"  + item["executable"]  + "</td>");
   document.write("<td class=\"permission\">"  + item["permission"]  + "</td>");
   document.write("<td class=\"description\">" + item["description"] + "</td>");
   document.write("</tr>");
-
-  odd = !odd;
 }
 document.write("</tbody></table>");
 </script>
diff --git a/web/poc_jsonrpc/help.js b/web/poc_jsonrpc/help.js
new file mode 100644
index 0000000000..af6f11a35a
--- /dev/null
+++ b/web/poc_jsonrpc/help.js
@@ -0,0 +1,98 @@
+function gup( name )
+{
+  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
+  var regexS = "[\\?&]"+name+"=([^&#]*)";
+  var regex = new RegExp( regexS );
+  var results = regex.exec( window.location.href );
+  if( results == null )
+    return "";
+  else
+    return results[1];
+}
+
+
+
+
+
+
+
+
+
+/**
+*
+*  URL encode / decode
+*  http://www.webtoolkit.info/
+*
+**/
+ 
+var Url = {
+ 
+	// public method for url encoding
+	encode : function (string) {
+		return escape(this._utf8_encode(string));
+	},
+ 
+	// public method for url decoding
+	decode : function (string) {
+		return this._utf8_decode(unescape(string));
+	},
+ 
+	// private method for UTF-8 encoding
+	_utf8_encode : function (string) {
+		string = string.replace(/\r\n/g,"\n");
+		var utftext = "";
+ 
+		for (var n = 0; n < string.length; n++) {
+ 
+			var c = string.charCodeAt(n);
+ 
+			if (c < 128) {
+				utftext += String.fromCharCode(c);
+			}
+			else if((c > 127) && (c < 2048)) {
+				utftext += String.fromCharCode((c >> 6) | 192);
+				utftext += String.fromCharCode((c & 63) | 128);
+			}
+			else {
+				utftext += String.fromCharCode((c >> 12) | 224);
+				utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+				utftext += String.fromCharCode((c & 63) | 128);
+			}
+ 
+		}
+ 
+		return utftext;
+	},
+ 
+	// private method for UTF-8 decoding
+	_utf8_decode : function (utftext) {
+		var string = "";
+		var i = 0;
+		var c = c1 = c2 = 0;
+ 
+		while ( i < utftext.length ) {
+ 
+			c = utftext.charCodeAt(i);
+ 
+			if (c < 128) {
+				string += String.fromCharCode(c);
+				i++;
+			}
+			else if((c > 191) && (c < 224)) {
+				c2 = utftext.charCodeAt(i+1);
+				string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
+				i += 2;
+			}
+			else {
+				c2 = utftext.charCodeAt(i+1);
+				c3 = utftext.charCodeAt(i+2);
+				string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
+				i += 3;
+			}
+ 
+		}
+ 
+		return string;
+	}
+ 
+}
diff --git a/web/poc_jsonrpc/images/DefaultFolder.png b/web/poc_jsonrpc/images/DefaultFolder.png
new file mode 100644
index 0000000000..2a27df61fa
--- /dev/null
+++ b/web/poc_jsonrpc/images/DefaultFolder.png
diff --git a/web/poc_jsonrpc/images/DefaultVideo.png b/web/poc_jsonrpc/images/DefaultVideo.png
new file mode 100644
index 0000000000..ce13c2a001
--- /dev/null
+++ b/web/poc_jsonrpc/images/DefaultVideo.png
diff --git a/web/poc_jsonrpc/images/play.png b/web/poc_jsonrpc/images/play.png
new file mode 100644
index 0000000000..7e9add0d3b
--- /dev/null
+++ b/web/poc_jsonrpc/images/play.png
diff --git a/web/poc_jsonrpc/index.html b/web/poc_jsonrpc/index.html
index 652d2de4f6..d8a7dcabf3 100644
--- a/web/poc_jsonrpc/index.html
+++ b/web/poc_jsonrpc/index.html
@@ -1,7 +1,7 @@
 <html>
 <head>
 <title>XBMC</title> 
-<link type="text/css" rel="stylesheet" href="basic.css">
+<link type="text/css" rel="stylesheet" href="basic.css" />
 </head>
 <body>
 <h1>XBMC Webinterface</h1>
diff --git a/web/poc_jsonrpc/movies.html b/web/poc_jsonrpc/movies.html
index 7042e77c31..31b6078c70 100644
--- a/web/poc_jsonrpc/movies.html
+++ b/web/poc_jsonrpc/movies.html
@@ -1,9 +1,8 @@
 <html>
 <head>
 <title>XBMC - Movies</title>
-<link type="text/css" rel="stylesheet" href="basic.css">
-<script type="text/javascript" src="json.js"> // FOR browsers which doesn't have it included
-</script>
+<link type="text/css" rel="stylesheet" href="basic.css" />
+<script type="text/javascript" src="json.js" />
 <script type="text/javascript">
 function PlayMovie(movieid)
 {
@@ -12,7 +11,25 @@ function PlayMovie(movieid)
 </script>
 </head>
 <body>
-<h1><a href="nowplaying.html">Now playing</a>   Movies   <a href="tvshows.html">TV Shows</a>   <a href="albums.html">Albums</a>    <a href="development.html">Development</a></h1>
+<table class="Navigation">
+<tr class="primary">
+  <td class="unselected"><a href="nowplaying.html">Now playing</a></td>
+  <td class="selected">Videos</td>
+  <td class="unselected"><a href="artists.html">Music</a></td>
+  <td class="unselected"><a href="development.html">Development</a></td>
+</tr>
+<tr>
+  <td></td><td>
+  <table>
+  <tr class="secondary">
+    <td><a href="videofiles.html">Video files</a></td>
+    <td>Movies</td>
+    <td><a href="tvshows.html">TV Shows</a></td>
+  </tr>
+  </table></td>
+</tr>
+</table>
+<br />
 
 <script type="text/javascript">
 var http_request = new XMLHttpRequest();
@@ -25,28 +42,19 @@ var result = the_object["result"];
 var array = result["movies"];
 
 document.write("<table class=\"Movies\"><thead><tr><th>Thumbnail</th><th>Info</th></tr></thead><tbody>");
-var odd = false;
 for (var property in array) {
   var item = array[property];
-  var row = "even";
-  if (odd)
-    row = "odd";
 
-  document.write("<tr class=\"" + row + "\"><td class=\"cover\">");
+  document.write("<tr class=\"" + (property % 2 == 0 ? "even" : "odd") + "\"><td class=\"cover\">");
   if (item["thumbnail"])
-    document.write("<img src=thumb/" + item["thumbnail"] + ".jpg alt=\"" + item["title"] + "\" height=200 onclick=\"PlayMovie(" + item["movieid"] + ")\"></img>");
-  document.write("</td><td>");
+    document.write("<img src=thumb/" + item["thumbnail"] + ".jpg alt=\"" + item["title"] + "\" class=\"cover\" onclick=\"PlayMovie(" + item["movieid"] + ")\"></img>");
+  document.write("</td><td class=\"info\">");
 
-  document.write("<table class\"Info\"><tr><td class=\"Title\">");
-    document.write("<h1>" + item["title"] + "</h1>");
-  document.write("</td></tr><tr><td class=\"Plot\">");
+  document.write("<h1>" + item["title"] + "</h1>");
   if (item["plot"])
     document.write(item["plot"]);
-  document.write("</td></tr></table>");
-
 
   document.write("</td></tr>");
-  odd = !odd;
 }
 document.write("</tbody></table>");
 </script>
diff --git a/web/poc_jsonrpc/musicfiles.html b/web/poc_jsonrpc/musicfiles.html
new file mode 100644
index 0000000000..13bf01dcba
--- /dev/null
+++ b/web/poc_jsonrpc/musicfiles.html
@@ -0,0 +1,88 @@
+<html>
+<head>
+<title>XBMC - Music files</title>
+<link type="text/css" rel="stylesheet" href="basic.css" />
+<script type="text/javascript" src="json.js" />
+<script type="text/javascript" src="help.js" />
+<script type="text/javascript">
+function PlayMovie(movieid)
+{
+  alert("Not implemented");
+}
+</script>
+</head>
+<body>
+<table class="Navigation">
+<tr class="primary">
+  <td class="unselected"><a href="nowplaying.html">Now playing</a></td>
+  <td class="unselected"><a href="movies.html">Videos</a></td>
+  <td class="selected">Music</td>
+  <td class="unselected"><a href="development.html">Development</a></td>
+</tr>
+<tr>
+  <td></td><td></td><td>
+  <table>
+  <tr class="secondary">
+    <td>Music files</td>
+    <td><a href="artists.html">Artists</a></td>
+    <td><a href="albums.html">Albums</a></td>
+  </tr>
+  </table></td>
+</tr>
+</table>
+<br />
+
+<script type="text/javascript">
+String.prototype.endsWith = function(str) 
+{return (this.match(str+"$")==str)}
+
+var directory = gup("directory");
+
+var http_request = new XMLHttpRequest();
+http_request.open( "POST", "jsonrpc", false );
+
+if (directory)
+  http_request.send("{\"jsonrpc\": \"2.0\", \"method\": \"Files.GetDirectory\", \"params\": { \"type\": \"music\", \"directory\": \"" + Url.decode(directory) + "\", \"sortmethod\": \"label\", \"sortorder\": \"ascending\" }, \"id\": 1}");
+else
+  http_request.send("{\"jsonrpc\": \"2.0\", \"method\": \"Files.GetShares\", \"params\": { \"type\": \"music\" }, \"id\": 1}");
+
+
+var the_object = JSON.parse(http_request.responseText);
+var result = the_object["result"];
+if (result) {
+  var array;
+  if (directory)
+    array = result["directories"];
+  else
+    array = result["shares"];
+
+  document.write("<table class=\"Files\">");
+  for (var i in array) {
+    var item = array[i];
+
+    document.write("<tr class=\"" + (i % 2 == 0 ? "even" : "odd") + "\"><td class=\"cover\">");
+    if (item["file"].endsWith("/")) {
+      document.write("<a href=\"musicfiles.html?directory=" + Url.encode(item["file"]) + "\">");
+      document.write("<img src=\"" + (item["thumbnail"] ? ("thumb/" + item["thumbnail"] + ".jpg"): "images/DefaultFolder.png") + "\" class=\"smallcover\" alt=\"" + item["label"] + "\"></img></a>");
+    } else {
+      document.write("<img src=\"images/DefaultAlbumCover.png\" class=\"smallcover\" alt=\"" + item["label"] + "\"></img>");
+    }
+
+    document.write("<td class=\"info\">");
+
+    if (item["file"].endsWith("/")) {
+      document.write("<a href=\"musicfiles.html?directory=" + Url.encode(item["file"]) + "\">");
+      document.write(item["label"] + "</a>");
+    } else {
+      document.write(item["label"]);
+    }
+
+    document.write("</td></tr>");
+  }
+  document.write("</tbody></table>");
+} else {
+  document.write("Error");
+}
+</script>
+</body>
+</html>
diff --git a/web/poc_jsonrpc/nowplaying.html b/web/poc_jsonrpc/nowplaying.html
index b07460eca0..b64059447f 100644
--- a/web/poc_jsonrpc/nowplaying.html
+++ b/web/poc_jsonrpc/nowplaying.html
@@ -1,9 +1,8 @@
 <html>
 <head>
 <title>XBMC - Now playing</title>
-<link type="text/css" rel="stylesheet" href="basic.css">
-<script type="text/javascript" src="json.js"> // FOR browsers which doesn't have it included
-</script>
+<link type="text/css" rel="stylesheet" href="basic.css" />
+<script type="text/javascript" src="json.js" />
 <script type="text/javascript">
 function CallMethod(method)
 {
@@ -21,7 +20,15 @@ function refresh()
 
 </head>
 <body>
-<h1>Now playing   <a href="movies.html">Movies</a>   <a href="tvshows.html">TV Shows</a>   <a href="albums.html">Albums</a>    <a href="development.html">Development</a></h1>
+<table class="Navigation">
+<tr class="primary">
+  <td class="selected"><a href="nowplaying.html">Now playing</a></td>
+  <td class="unselected"><a href="movies.html">Videos</a></td>
+  <td class="unselected"><a href="artists.html">Music</a></td>
+  <td class="unselected"><a href="development.html">Development</a></td>
+</tr>
+</table>
+<br />
 
 <script type="text/javascript">
 setTimeout( "refresh()", 5*1000 );
@@ -50,24 +57,16 @@ if (activeItem >= 0) {
   document.write("<br></br>");
 
   document.write("<table class=\"Playlist\"><tbody>");
-  var odd = false;
-  var i = 0;
-  for (var property in array) {
-    var item = array[property];
-    var row = "even";
-    if (odd)
-      row = "odd";
+  for (var i in array) {
+    var item = array[i];
 
-    document.write("<tr class=\"" + row + "\">");
+    document.write("<tr class=\"" + (i % 2 == 0 ? "even" : "odd") + "\">");
     document.write("<td class=\"label\">" + item["label"] + "</td>");
     if (i == activeItem)
       document.write("<td class=\"playing\"><img src=\"images/play.png\" height=16></img></td>");
     else
       document.write("<td class=\"playing\"></td>");
     document.write("</tr>");
-
-    odd = !odd;
-    i++;
   }
   document.write("</tbody></table>");
 } else {
diff --git a/web/poc_jsonrpc/tvshowepisodes.html b/web/poc_jsonrpc/tvshowepisodes.html
new file mode 100644
index 0000000000..1c0af92202
--- /dev/null
+++ b/web/poc_jsonrpc/tvshowepisodes.html
@@ -0,0 +1,60 @@
+<html>
+<head>
+<link type="text/css" rel="stylesheet" href="basic.css" />
+<script type="text/javascript" src="json.js" />
+<script type="text/javascript" src="help.js" />
+</head>
+<body>
+<table class="Navigation">
+<tr class="primary">
+  <td class="unselected"><a href="nowplaying.html">Now playing</a></td>
+  <td class="selected">Videos</td>
+  <td class="unselected"><a href="artists.html">Music</a></td>
+  <td class="unselected"><a href="development.html">Development</a></td>
+</tr>
+<tr>
+  <td></td><td>
+  <table>
+  <tr class="secondary">
+    <td><a href="videofiles.html">Video files</a></td>
+    <td><a href="movies.html">Movies</a></td>
+    <td>TV Shows</td>
+  </tr>
+  </table></td>
+</tr>
+</table>
+<br />
+
+<script type="text/javascript">
+var tvshowid = gup("tvshowid");
+var season   = gup("season");
+
+var http_request = new XMLHttpRequest();
+http_request.open( "POST", "jsonrpc", false );
+http_request.send("{\"jsonrpc\": \"2.0\", \"method\": \"VideoLibrary.GetEpisodes\", \"params\": { \"tvshowid\": " + tvshowid + ", \"season\": " + season + ", \"fields\": [\"plot\"] }, \"id\": 1}");
+
+var the_object = JSON.parse(http_request.responseText);
+var result = the_object["result"];
+if (result) {
+  var array = result["episodes"];
+
+  document.write("<table class=\"Episodes\"><thead><tr><th>Thumbnail</th><th>Info</th></tr></thead><tbody>");
+  for (var i in array) {
+    var item = array[i];
+    document.write("<tr class=\"" + (i % 2 == 0 ? "even" : "odd") + "\"><td class=\"cover\">");
+    document.write("<img src=\"" + (item["thumbnail"] ? ("thumb/" + item["thumbnail"] + ".jpg"): "images/nocover.jpg") + "\" class=\"cover\" alt=\"" + item["label"] + "\"></img>");
+    document.write("</td><td class=\"info\">");
+
+    document.write("<h1>" + item["label"] + "</h1>");
+    if (item["plot"])
+      document.write(item["plot"]);
+
+    document.write("</td></tr>");
+  }
+  document("</tbody></table>");
+} else {
+  document.write("Error");
+}
+</script>
+</body>
+</html>
diff --git a/web/poc_jsonrpc/tvshows.html b/web/poc_jsonrpc/tvshows.html
index 1dd717f1c0..c17ab86a1a 100644
--- a/web/poc_jsonrpc/tvshows.html
+++ b/web/poc_jsonrpc/tvshows.html
@@ -1,53 +1,45 @@
 <html>
 <head>
-<link type="text/css" rel="stylesheet" href="basic.css">
-<script type="text/javascript" src="json.js"> // FOR browsers which doesn't have it included
-</script>
-<script type="text/javascript">
-function PrintSeasons(tvshowid)
-{
-  document.close();
-  document.open();
-  document.write("<html><head><title>XBMC - Test</title><link type=\"text/css\" rel=\"stylesheet\" href=\"basic.css\"></head><body>");
-
-  var http_request = new XMLHttpRequest();
-  http_request.open( "POST", "jsonrpc", false );
-  http_request.send("{\"jsonrpc\": \"2.0\", \"method\": \"VideoLibrary.GetSeasons\", \"params\": { \"tvshowid\": " + tvshowid + ", \"fields\": [\"title\"] }, \"id\": 1}");
-
-  var the_object = JSON.parse(http_request.responseText);
-  var result = the_object["result"];
-  var array = result["seasons"];
-  for (var property in array) {
-    var item = array[property];
-    document.write("<h1>" + item["title"] + "</h1>");
-    document.write("<img src=thumb/" + (item["thumbnail"] ? item["thumbnail"] : "images/nocover.jpg") + ".jpg width=100></img>");
-    document.write("<br>");
-  }
-
-  document.write("</body></html>");
-}
-function PrintTVShows()
-{
-  document.write("<html><head><title>XBMC - TV Shows</title><link type=\"text/css\" rel=\"stylesheet\" href=\"basic.css\"></head><body><h1><a href=\"nowplaying.html\">Now playing</a>   <a href=\"movies.html\">Movies</a>   TV Shows   <a href=\"albums.html\">Albums</a>    <a href=\"development.html\">Development</a></h1>");
+<link type="text/css" rel="stylesheet" href="basic.css" />
+<script type="text/javascript" src="json.js" />
+</head>
+<body>
+<table class="Navigation">
+<tr class="primary">
+  <td class="unselected"><a href="nowplaying.html">Now playing</a></td>
+  <td class="selected">Videos</td>
+  <td class="unselected"><a href="artists.html">Music</a></td>
+  <td class="unselected"><a href="development.html">Development</a></td>
+</tr>
+<tr>
+  <td></td><td>
+  <table>
+  <tr class="secondary">
+    <td><a href="videofiles.html">Video files</a></td>
+    <td><a href="movies.html">Movies</a></td>
+    <td>TV Shows</td>
+  </tr>
+  </table></td>
+</tr>
+</table>
+<br />
 
-  var http_request = new XMLHttpRequest();
-  http_request.open( "POST", "jsonrpc", false );
-  var send = { "jsonrpc": "2.0", "method": "VideoLibrary.GetTVShows", "id": 1 }
-  http_request.send("{\"jsonrpc\": \"2.0\", \"method\": \"VideoLibrary.GetTVShows\", \"params\": { \"fields\": [\"title\"] }, \"id\": 1}");
+<script type="text/javascript">
+var http_request = new XMLHttpRequest();
+http_request.open( "POST", "jsonrpc", false );
+var send = { "jsonrpc": "2.0", "method": "VideoLibrary.GetTVShows", "id": 1 }
+http_request.send("{\"jsonrpc\": \"2.0\", \"method\": \"VideoLibrary.GetTVShows\", \"id\": 1}");
 
-  var the_object = JSON.parse(http_request.responseText);
-  var result = the_object["result"];
-  var array = result["tvshows"];
-  for (var property in array) {
-    var item = array[property];
-    document.write("<img src=thumb/" + (item["thumbnail"] ? item["thumbnail"] : "images/nocover.jpg") + ".jpg onclick=\"PrintSeasons(" + item["tvshowid"] + ")\"></img>");
-    document.write("<br>");
-  }
+var the_object = JSON.parse(http_request.responseText);
+var result = the_object["result"];
+var array = result["tvshows"];
+for (var property in array) {
+  var item = array[property];
+  document.write("<a href=\"tvshowseasons.html?tvshowid=" + item["tvshowid"] + "\">");
+  document.write("<img src=\"" + (item["thumbnail"] ? ("thumb/" + item["thumbnail"] + ".jpg"): "images/nocover.jpg") + "\"></img>");
+  document.write("</a>");
+  document.write("<br>");
 }
 </script>
-</head>
-<body onload="PrintTVShows()">
-
-
 </body>
 </html>
diff --git a/web/poc_jsonrpc/tvshowseasons.html b/web/poc_jsonrpc/tvshowseasons.html
new file mode 100644
index 0000000000..2ca7638a15
--- /dev/null
+++ b/web/poc_jsonrpc/tvshowseasons.html
@@ -0,0 +1,61 @@
+<html>
+<head>
+<link type="text/css" rel="stylesheet" href="basic.css" />
+<script type="text/javascript" src="json.js" />
+<script type="text/javascript" src="help.js" />
+</head>
+<body>
+<table class="Navigation">
+<tr class="primary">
+  <td class="unselected"><a href="nowplaying.html">Now playing</a></td>
+  <td class="selected">Videos</td>
+  <td class="unselected"><a href="artists.html">Music</a></td>
+  <td class="unselected"><a href="development.html">Development</a></td>
+</tr>
+<tr>
+  <td></td><td>
+  <table>
+  <tr class="secondary">
+    <td><a href="videofiles.html">Video files</a></td>
+    <td><a href="movies.html">Movies</a></td>
+    <td>TV Shows</td>
+  </tr>
+  </table></td>
+</tr>
+</table>
+<br />
+
+<script type="text/javascript">
+var tvshowid = gup("tvshowid");
+
+var http_request = new XMLHttpRequest();
+http_request.open( "POST", "jsonrpc", false );
+http_request.send("{\"jsonrpc\": \"2.0\", \"method\": \"VideoLibrary.GetSeasons\", \"params\": { \"tvshowid\": " + tvshowid + ", \"fields\": [ \"season\" ] }, \"id\": 1}");
+
+var the_object = JSON.parse(http_request.responseText);
+var result = the_object["result"];
+if (result) {
+  var array = result["seasons"];
+
+  document.write("<table class=\"Episodes\"><thead><tr><th>Thumbnail</th><th>Info</th></tr></thead><tbody>");
+  for (var i in array) {
+    var item = array[i];
+
+    document.write("<tr class=\"" + (i % 2 == 0 ? "even" : "odd") + "\"><td class=\"cover\">");
+    document.write("<a href=\"tvshowepisodes.html?tvshowid=" + tvshowid + "&season=" + item["season"] + "\">");
+    document.write("<img src=\"" + (item["thumbnail"] ? ("thumb/" + item["thumbnail"] + ".jpg"): "images/nocover.jpg") + "\" class=\"cover\" alt=\"" + item["label"] + "\"></img>");
+    document.write("</a>");
+    document.write("</td><td class=\"info\">");
+    document.write("<h1>" + item["label"] + "</h1>");
+    if (item["plot"])
+      document.write(item["plot"]);
+
+    document.write("</td></tr>");
+  }
+  document("</tbody></table>");
+} else {
+  document.write("Error");
+}
+</script>
+</body>
+</html>
diff --git a/web/poc_jsonrpc/videofiles.html b/web/poc_jsonrpc/videofiles.html
new file mode 100644
index 0000000000..3f83b92e3b
--- /dev/null
+++ b/web/poc_jsonrpc/videofiles.html
@@ -0,0 +1,88 @@
+<html>
+<head>
+<title>XBMC - Video files</title>
+<link type="text/css" rel="stylesheet" href="basic.css" />
+<script type="text/javascript" src="json.js" />
+<script type="text/javascript" src="help.js" />
+<script type="text/javascript">
+function PlayMovie(movieid)
+{
+  alert("Not implemented");
+}
+</script>
+</head>
+<body>
+<table class="Navigation">
+<tr class="primary">
+  <td class="unselected"><a href="nowplaying.html">Now playing</a></td>
+  <td class="selected">Videos</td>
+  <td class="unselected"><a href="artists.html">Music</a></td>
+  <td class="unselected"><a href="development.html">Development</a></td>
+</tr>
+<tr>
+  <td></td><td>
+  <table>
+  <tr class="secondary">
+    <td>Video files</td>
+    <td><a href="movies.html">Movies</a></td>
+    <td><a href="tvshows.html">TV Shows</a></td>
+  </tr>
+  </table></td>
+</tr>
+</table>
+<br />
+
+<script type="text/javascript">
+String.prototype.endsWith = function(str) 
+{return (this.match(str+"$")==str)}
+
+var directory = gup("directory");
+
+var http_request = new XMLHttpRequest();
+http_request.open( "POST", "jsonrpc", false );
+
+if (directory)
+  http_request.send("{\"jsonrpc\": \"2.0\", \"method\": \"Files.GetDirectory\", \"params\": { \"type\": \"video\", \"directory\": \"" + Url.decode(directory) + "\" }, \"id\": 1}");
+else
+  http_request.send("{\"jsonrpc\": \"2.0\", \"method\": \"Files.GetShares\", \"params\": { \"type\": \"video\" }, \"id\": 1}");
+
+
+var the_object = JSON.parse(http_request.responseText);
+var result = the_object["result"];
+if (result) {
+  var array;
+  if (directory)
+    array = result["directories"];
+  else
+    array = result["shares"];
+
+  document.write("<table class=\"Files\">");
+  for (var i in array) {
+    var item = array[i];
+
+    document.write("<tr class=\"" + (i % 2 == 0 ? "even" : "odd") + "\"><td class=\"cover\">");
+    if (item["file"].endsWith("/")) {
+      document.write("<a href=\"videofiles.html?directory=" + Url.encode(item["file"]) + "\">");
+      document.write("<img src=\"" + (item["thumbnail"] ? ("thumb/" + item["thumbnail"] + ".jpg"): "images/DefaultFolder.png") + "\" class=\"smallcover\" alt=\"" + item["label"] + "\"></img></a>");
+    } else {
+      document.write("<img src=\"images/DefaultVideo.png\" class=\"smallcover\" alt=\"" + item["label"] + "\"></img>");
+    }
+
+    document.write("<td class=\"info\">");
+
+    if (item["file"].endsWith("/")) {
+      document.write("<a href=\"videofiles.html?directory=" + Url.encode(item["file"]) + "\">");
+      document.write(item["label"] + "</a>");
+    } else {
+      document.write(item["label"]);
+    }
+
+    document.write("</td></tr>");
+  }
+  document.write("</tbody></table>");
+} else {
+  document.write("Error");
+}
+</script>
+</body>
+</html>
author	topfs2 <topfs2@svn>	2010-03-09 17:11:51 +0000
committer	topfs2 <topfs2@svn>	2010-03-09 17:11:51 +0000
commit	036e2eb7e0c2a74400580947040ccaa2a5372ca9 (patch)
tree	655dd02378483d715a12c969f82bb9176e9589cc /web/poc_jsonrpc
parent	a6a64dd829af2b709b3120c76d0722c932675fc7 (diff)