Player selector and template cleanup

resources/css/player.css

@@ -1,5 +1,5 @@
 
-body > div.ui-layout-north #daaprPlayerViewport {
+body > div.ui-layout-north > div:last-child {
 	margin: 6px auto 0 auto;
 	background: transparent url('../img/player_background.png') repeat-x;
 	height: 40px;
@@ -13,7 +13,7 @@ body > div.ui-layout-north #daaprPlayerViewport {
 	z-index: 10;
 }
 
-body > div.ui-layout-north #daaprPlayerViewport h1 {
+body > div.ui-layout-north > div:last-child > h1 {
 	color: #5F5F5F;
 	font-size: 2em;
 	font-style: oblique;

resources/js/views/player.js

@@ -10,6 +10,7 @@ define([
 	, "backbone"
 
 	, "text!../../templates/player/layout.html"
+	, "text!../../templates/player/player-status.html"
 ]
 , function (
 _
@@ -17,6 +18,7 @@ _
 , Backbone
 
 , tmplPlayerLayout
+, tmplPlayerStatus
 ) {
 	"use strict";
 
@@ -35,6 +37,8 @@ _
 
 			that.$el.html(tmplPlayerLayout);
 
+			that.$el.find("div:last").html(_.template(tmplPlayerStatus)({}));
+
 			return that;
 		}
 
@@ -44,6 +48,30 @@ _
 
 		}
 
+		, __buttonPlayPause:	function (event) {
+
+		}
+
+		, __buttonNext:			function (event) {
+
+		}
+
+		, __buttonPrevious:		function (event) {
+
+		}
+
+		, __buttonVolumeUp:		function (event) {
+
+		}
+
+		, __buttonVolumeDown:	function (event) {
+
+		}
+
+		, __buttonVolumeClick:	function (event) {
+
+		}
+
 		, _createWebAudio:	function () {
 			var that	= this
 			;

resources/templates/player/layout.html

@@ -15,6 +15,4 @@
 		<input type="text" tabindex="1" class="span3 search-query">
 	</div>
 </form>
-<div id="daaprPlayerViewport">
+<div></div>
-	<h1>DAAPr<sup>3</sup></h1>
-</div>

resources/templates/player/player-status.html

@@ -1,7 +1,11 @@
-<div class="daaprPlayerTitleIndicator">{{dmap_itemname}}</div>
+<% if (typeof dmap_itemnname !== "undefined") { %>
-<div class="daaprPlayerInfoIndicator">{{daap_songartist}}</div>
+	<div class="daaprPlayerTitleIndicator">{{dmap_itemname}}</div>
-<div class="daaprProgressWrap">
+	<div class="daaprPlayerInfoIndicator">{{daap_songartist}}</div>
-	<span id="daaprProgressTimeElapsed">0:00</span>
+	<div class="daaprProgressWrap">
-	<progress min="0" max="1" value="0" id="daaprPlayerProgress"></progress>
+		<span id="daaprProgressTimeElapsed">0:00</span>
-	<span id="daaprProgressTimeRemain">-0:00</span>
+		<progress min="0" max="1" value="0" id="daaprPlayerProgress"></progress>
-</div>
+		<span id="daaprProgressTimeRemain">-0:00</span>
+	</div>
+<% } else { %>
+	<h1>DAAPr<sup>3</sup></h1>
+<% } %>