User interface is a bit less awful after incremental improvement - still LOTS of room for improvement/redesign;

matt · matt · commit fbca56306e40 · 2015-02-03T21:01:55.000Z
Tidied up some code in SSDP module and removed verbose logging;
Changed MediaServerClient request to retireve all files, not just 30;
Updated the main window to support video &amp; image files;
diff --git a/html/css/crdlna.css b/html/css/crdlna.css
@@ -0,0 +1,55 @@
+html {
+	overflow-y			: scroll;
+}
+
+body {
+	display  				: flex;
+	margin 					: 0;
+	padding 				: 0;
+}
+/* Contains the list of devices we know about */
+#deviceList {
+	border-right  	: 1px solid silver;
+  width						: 175px;
+  overflow 				: auto;
+  position 				: absolute;
+  left 						: 0;
+  top 						: 0;
+}
+
+/* contains the content and playback section */
+#rightStack {
+	display 				: flex;
+	flex-direction 	: column;
+	position 				: absolute;
+	left 						: 176px;
+	top 						: 0px;
+}
+
+/* Container for individual content items (think folder listing ) */
+div.contentItems {
+	background-color: #eee;
+	display					: flex;
+	flex-direction	: row;
+	flex-wrap				: wrap;
+	width 					: 100%;
+}
+
+/* Individual folder item */
+div.contentItem {
+	background-color: white;
+	border 					: 1px solid silver;
+	border-radius 	: 3px;
+	box-shadow 			: 0 0 0.6em #ccc;
+	width 					: 64px;
+	height 					: 64px;
+	margin 					: 8px;
+	padding 				: 4px;
+	cursor 					: pointer;
+}
+
+/* Individual folder item */
+div.contentItem:hover {
+	box-shadow 			: 0 0 0.6em blue;
+}
+
diff --git a/html/window.html b/html/window.html
@@ -2,14 +2,30 @@
 <html>
   <head>
   	<title>Chrome DLNA Renderer</title>
-
+    <meta name="viewport" content="initial-scale=1">
+    <link rel="stylesheet" href="css/crdlna.css" />
 		<script src="../scripts/ssdp/ssdp.js"></script>
   	<script src="../scripts/upnp/upnp.js"></script>
   	<script src="../scripts/upnp/MediaServerClient.js"></script>
   	<script src="../scripts/window/main.js"></script>
   </head>
   <body>
-  	Devices <a href="#" id="refreshDevices">Refresh</a>
-    <div id="devices"></div>
+ 
+      <div id="deviceList">
+        <a href="#" id="refreshDevices">Refresh</a>
+        <div id="devices"></div>
+      </div>
+
+      <div id="rightStack">
+        <div id="content" class="contentItems">
+          
+        </div>
+        <div id="playback">
+          
+        </div>
+      </div>
+
+
+
   </body>
 </html>
diff --git a/manifest.json b/manifest.json
@@ -20,6 +20,7 @@
     {
       "socket": ["udp-send-to", "udp-bind", "udp-multicast-membership"]
     },
+    "webview",
     "http://*/" // Pretty wild but the UPnP discovery URL could be more or less anything
   ],
   "icons": {"128": "images/logo-128.png" }
diff --git a/scripts/ssdp/ssdp.js b/scripts/ssdp/ssdp.js
@@ -41,14 +41,14 @@ SSDP.prototype.init = function(callback) {
   this.log("Initialising...");
 
   var that = this;
-  var cb = callback || function(){}
+  var cb = callback || function(){};
 
   chrome.sockets.udp.create({}, function (socket) {
     var socketId = socket.socketId;
     chrome.sockets.udp.onReceive.addListener(function(result) {
         var data = that.bufferToString(result.data);
         that.processNotify(data);
-    })
+    });
     // House keeping on TTL & loopback
     chrome.sockets.udp.setMulticastTimeToLive(socketId, 12, function (result) {
       if (result !== 0) {
@@ -63,15 +63,15 @@ SSDP.prototype.init = function(callback) {
 
     function bind(port, cb) {
       chrome.sockets.udp.bind(socketId, that.address, port, function (result) {
-        if(result === 0) return cb(result)
+        if(result === 0) return cb(result);
         that.log('Unable to bind to new socket: ' + result + ", trying to bind to random port");
-        chrome.sockets.udp.bind(socketId, that.address, 0, cb)
-      })
+        chrome.sockets.udp.bind(socketId, that.address, 0, cb);
+      });
     }
     bind(that.port, function(result) {
       if(result !== 0) {
-          that.log('Unable to bind to new socket: ' + result)
-          return cb(result)
+          that.log('Unable to bind to new socket: ' + result);
+          return cb(result);
       }
       chrome.sockets.udp.joinGroup(socketId, that.multicast, function (result) {
         if (result !== 0) {
@@ -83,7 +83,7 @@ SSDP.prototype.init = function(callback) {
         }
         cb(result);
       });
-    })
+    });
 
   });
 };
@@ -97,13 +97,13 @@ SSDP.prototype.sendDiscover = function(config) {
   var that = this;
   var c = config || {};
   var respondDelay = c.delay || 3;
-  var target = c.target || 'ssdp:all'
+  var target = c.target || 'ssdp:all';
 
   var search = 'M-SEARCH * HTTP/1.1\r\n' +
     'HOST: 239.255.255.250:1900\r\n' +
     'MAN: "ssdp:discover"\r\n' +
     'MX: ' + respondDelay + '\r\n' +
-    'ST: ' + target + '\r\n\r\n'
+    'ST: ' + target + '\r\n\r\n';
 
   var buffer = this.stringToBuffer(search);
   chrome.sockets.udp.send(this.socketId, buffer, that.multicast,
@@ -121,16 +121,15 @@ SSDP.prototype.sendDiscover = function(config) {
 SSDP.prototype.processNotify = function(str) {
   var notify = {};
 
-  str.replace(/([A-Z\-]*){1}:([^\n]*){1}/gi, 
-    function (match, m1, m2) {
+  str.replace(/([A-Z\-]*){1}:([^\n]*){1}/gi, function (match, m1, m2) {
       var name = m1.toLowerCase().trim();
       name = name.replace('-',''); // remove any hypens, e.g. cache-control
       notify[name] = m2.trim();
-    });
-  if(!notify.usn)
-    return;
+  });
 
-  console.log('notify packet', notify)
+  if(!notify.usn) {
+    return;
+  }
 
   // Check for expiration/max-age
   if (notify.cachecontrol) {
diff --git a/scripts/upnp/MediaServerClient.js b/scripts/upnp/MediaServerClient.js
@@ -102,7 +102,7 @@ MediaServerClient.prototype.browseFolder = function(folderId, callback) {
             'upnp:genre,upnp:author,upnp:actor,upnp:director,upnp:producer,upnp:publisher,' +
             'container@childCount,@childCount</Filter>' + 
             '<StartingIndex>0</StartingIndex>' + 
-            '<RequestedCount>30</RequestedCount>' + 
+            '<RequestedCount>0</RequestedCount>' + 
             '<SortCriteria/>' + 
         '</u:Browse>' +
     '</s:Body>'+
diff --git a/scripts/window/main.js b/scripts/window/main.js
@@ -36,7 +36,7 @@ CrDlna.prototype.updateDeviceList = function () {
 			}
 			var container = document.createElement('div');			
 			var device = document.createElement('div');
-			var listing = document.createElement('div');
+			var listing = document.querySelector('#content')
 			device.innerText = v.name;
 			device.setAttribute('objectId', '0');
 
@@ -65,36 +65,52 @@ CrDlna.prototype.updateDeviceList = function () {
 				device.innerText += ' (not a media server)';
 			}
 			container.appendChild(device);
-			container.appendChild(listing);
 			list.appendChild(container);
 		});
 
 };
 
 /**
- * Draws any child folders
+ * Draws any child items
  *
  * @param {Object} elem The element into which to add the child items
  * @param {Object} data The object contianing the child folder data 
  */
 CrDlna.prototype.drawChildFolders = function (device, elem, data) {
-	if (!data) return;
+	if (!data || !elem) return;
 
 	var that = this;
-	var list = document.createElement('ul');
+	elem.innerHTML = '';
+
+	var playback = document.querySelector('#playback');
 
 	data.forEach(function (v, i, a){
-		var child = document.createElement('li');		
+		var child = document.createElement('div');		
+		child.classList.add('contentItem');
 		child.setAttribute('objectId', v.id);
 		child.setAttribute('type', v.type);
-		if (v.type.indexOf('object.item') >= 0) {
-			// Item
-			child.innerHTML = '<p>' + v.title + '</p><audio controls preload="none"><source src="' + v.url + '"></audio>';
+		if (v.type.indexOf('videoItem') >= 0) {
+			// Video Item
+			child.innerHTML = '<p>' + v.title + '</p><video width="300" height="240" controls preload="none"><source src="' + v.url + '"></video>';
+		
+		} else if (v.type.indexOf('imageItem') >= 0) {
+			// Image Item
+			child.innerHTML = '<p>' + v.title + '</p>';
+			child.addEventListener('click', function() {
+				playback.innerHTML = '<webview src="' + v.url + '" width="640" height="480" autosize="on"></webview>';
+			});
+
+		} else if (v.type.indexOf('object.item') >= 0) {
+			// Audio Item
+			child.innerHTML = '<p>' + v.title + '</p>';
+			child.addEventListener('click', function() {
+				playback.innerHTML = '<audio controls autoplay><source src="' + v.url + '"></audio>';
+			});
 		} else {
 			// Container
-
+			child.classList.add('contentFolder');
 			child.innerText = v.title;
-			child.addEventListener('click', function (){			
+			child.addEventListener('click', function () {			
 
 				var sendBrowseRequest = new Promise(function(resolve, reject) {				
 						var client = that.clients[device.name];
@@ -114,11 +130,9 @@ CrDlna.prototype.drawChildFolders = function (device, elem, data) {
 
 			});
 		}
-		list.appendChild(child);
+		elem.appendChild(child);
 	});
 
-	elem.innerHTML = '';
-	elem.appendChild(list);
 };
 
 /**

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,7 @@`
`20`	`20`	`{`
`21`	`21`	`"socket": ["udp-send-to", "udp-bind", "udp-multicast-membership"]`
`22`	`22`	`},`
	`23`	`+ "webview",`
`23`	`24`	`"http://*/" // Pretty wild but the UPnP discovery URL could be more or less anything`
`24`	`25`	`],`
`25`	`26`	`"icons": {"128": "images/logo-128.png" }`