Get and display album art (also made album listing items larger)

Basic navigation path implementation (not complete yet)

Author: matt

html/css/crdlna.css

@@ -27,6 +27,11 @@ div.devices {
 	width 					: 180px;
 }
 
+/** Header/path listing */
+#header div {
+	display 				: inline-block;
+}
+
 /** The right/main pane that contains a a header, main content area and footer */
 div.rightStack {
 	align-items			: stretch; 
@@ -61,8 +66,8 @@ div.contentItem {
 	border 					: 1px solid silver;
 	border-radius 	: 3px;
 	box-shadow 			: 0 0 0.6em #ccc;
-	width 					: 64px;
-	height 					: 64px;
+	width 					: 96px;
+	height 					: 96px;
 	margin 					: 8px;
 	padding 				: 4px;
 	cursor 					: pointer;

html/window.html

@@ -17,13 +17,13 @@
       </div>
 
       <div class="rightStack">
-          <div>
-              Header
+          <div id="header">
+              
           </div>
           <div class="contentItemsContainer">
             <div id="content" class="contentItems">
 
-              content
+              
             </div>
           </div>
 

scripts/upnp/MediaServerClient.js

@@ -146,25 +146,34 @@ MediaServerClient.prototype.parseDidl = function (didlDoc) {
   var containers = didlDoc.querySelectorAll('container');  
   var files = didlDoc.querySelectorAll('item');
 
+  // Parse containers
   [].forEach.call(containers, (function (container, i, a){
     var title = container.querySelector('title').textContent;
     var type = container.querySelector('class').textContent;
     var id = container.getAttribute('id');
     var parentId = container.getAttribute('parentID');
     var childCount = container.getAttribute('childCount');
+    
+    // Potentially empty music related bits
+    var albumArt = container.querySelector('albumArtURI');
+    var genre = container.querySelector('genre');
+    var artist = container.querySelector('artist');
 
     if (type && type.indexOf('object.container') >= 0) {
       items.push({
         title: title,
         id: id,
         parentId: parentId,
         childCount: childCount,
-        type: type
+        type: type,
+        albumArt:  (albumArt ? albumArt.textContent : ''),
+        genre: (genre ? genre.textContent : ''),
+        artist: (artist ? artist.textContent : '')
       });
     }
   }));
 
-
+  // Parse files
   [].forEach.call(files, (function (item, i, a){
     var title = item.querySelector('title').textContent;
     var type = item.querySelector('class').textContent;

scripts/window/main.js

@@ -4,6 +4,12 @@
  */
 var CrDlna = function() {
 	this.clients = {};
+	
+	// Navigation path stack
+	this.navigationPath = [];
+
+	// The device we are currently looking at
+	this.currentDevice = undefined;
 };
 
 /**
@@ -36,14 +42,13 @@ CrDlna.prototype.updateDeviceList = function () {
 			}
 			var container = document.createElement('div');			
 			var device = document.createElement('div');
-			var listing = document.querySelector('#content')
 			device.innerText = v.name;
 			device.setAttribute('objectId', '0');
 
 			// If this client has a content directory service, add a click listener
 			if (that.clients[v.name] && that.clients[v.name].contentDirectory) {
 				device.addEventListener('click', function (){				
-					
+					that.currentDevice = v;
 					var sendBrowseRequest = new Promise(function(resolve, reject) {
 						var client = that.clients[v.name];
 						if (client) {
@@ -55,7 +60,7 @@ CrDlna.prototype.updateDeviceList = function () {
 
 					sendBrowseRequest.then(
 						function (data) {
-							that.drawChildFolders(that.clients[v.name].device, listing, data);
+							that.drawChildFolders(data);
 						}, function (error) {
 							console.log("error getting child folders");
 					});
@@ -70,18 +75,54 @@ CrDlna.prototype.updateDeviceList = function () {
 
 };
 
+/**
+ * Draws the navigation path
+ */
+CrDlna.prototype.drawPath = function() {
+	var that = this;
+
+	var heading = document.querySelector('#header');
+	heading.innerHTML = '';
+
+	var item = document.createElement('div');
+	item.innerHTML = "Device root";
+	heading.appendChild(item);
+
+	this.navigationPath.forEach(function (folder, i, a){
+		
+		item = document.createElement('div');
+		item.innerHTML = " > ";
+		heading.appendChild(item);
+		
+		item = document.createElement('div');
+		item.innerHTML = folder.title;
+		item.addEventListener('click', function() {
+			
+			while (folder !== that.navigationPath.pop()) {
+				// keep popping off anything else in the list
+			}
+			that.browseFolder(folder);
+		});
+		heading.appendChild(item);
+
+	});
+
+
+};
+
 /**
  * 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 || !elem) return;
+CrDlna.prototype.drawChildFolders = function (data) {
 
 	var that = this;
+	var elem = document.querySelector('#content');
 	elem.innerHTML = '';
 
+	if (!data || !elem) return;
+
 	var playback = document.querySelector('#playback');
 
 	data.forEach(function (v, i, a){
@@ -91,15 +132,16 @@ CrDlna.prototype.drawChildFolders = function (device, elem, data) {
 		child.setAttribute('type', v.type);
 		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>';
-		
+			child.innerHTML = '<p>' + v.title + '</p>';
+			child.addEventListener('click', function() {
+				playback.innerHTML = '<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>';
@@ -109,32 +151,57 @@ CrDlna.prototype.drawChildFolders = function (device, elem, data) {
 		} else {
 			// Container
 			child.classList.add('contentFolder');
-			child.innerText = v.title;
-			child.addEventListener('click', function () {			
-
-				var sendBrowseRequest = new Promise(function(resolve, reject) {				
-						var client = that.clients[device.name];
-							if (client) {
-								client.browseFolder(v.id, resolve);
-							} else {
-								reject(new Error('No client was found for the device ' + v.name));
-							}
-				});
 
-				sendBrowseRequest.then(
-					function (data) {
-						that.drawChildFolders(device, elem, data);
-					}, function (error) {
-						console.log("error getting child folders");
-				});
+			// Fairly inefficient albumArt retrieval - have to do it this way due to security restrictions
+			// of chrome apps.  Could be improved by caching to file system
+			if (v.albumArt !== '') {
+				var xhr = new XMLHttpRequest();
+				xhr.open('GET', v.albumArt, true);
+				xhr.responseType = 'blob';
+				xhr.onload = function(e) {
+				  child.style.backgroundImage = 'url("' + window.URL.createObjectURL(this.response) + '")';
+					child.style.backgroundSize = 'cover';
+				};
+				xhr.send();
+			} else {
+				// load local backup placeholder when we have one
+			}
 
+			child.innerText = v.title;
+			child.title = v.title;
+			child.addEventListener('click', function () {			
+				that.browseFolder(v);
 			});
 		}
 		elem.appendChild(child);
 	});
 
 };
 
+/**
+ * Browse the folder of this device
+ */
+CrDlna.prototype.browseFolder = function(folder) {
+	var that = this;
+	var sendBrowseRequest = new Promise(function(resolve, reject) {				
+		var client = that.clients[that.currentDevice.name];
+			if (client) {
+				that.navigationPath.push(folder);
+				client.browseFolder(folder.id, resolve);
+			} else {
+				reject(new Error('No client was found for the device ' + v.name));
+			}
+	});
+
+	sendBrowseRequest.then(
+		function (data) {
+			that.drawPath();
+			that.drawChildFolders(data);
+		}, function (error) {
+			console.log("error getting child folders");
+	});
+};
+
 /**
  * Binds the various UI controls to any handlers that are needed
  */
@@ -151,6 +218,9 @@ CrDlna.prototype.bindControls = function() {
 
 };
 
+/**
+ * Kicks off everything by creating a new CrDlna object as well as SSDP and UPNP handlers.
+ */
 document.addEventListener("DOMContentLoaded", function() {
 	console.log("Starting Chrome DLNA...");
 	var c = new CrDlna();
@@ -166,8 +236,6 @@ document.addEventListener("DOMContentLoaded", function() {
 	c.ssdp.init();
 	c.upnp.init();
 
-
-
 	// Make sure the SSDP cache resets periodically (doing it here as we have
 	// access to window.setInterval)
 	window.setInterval(function(){