From 5490394856d446e93a71a7164629ced4104bedc4 Mon Sep 17 00:00:00 2001
From: Techywarrior <techywarrior@gmail.com>
Date: Wed, 27 Mar 2013 19:01:26 -0700
Subject: [PATCH] media info for now playing item in now playing bar

---
 dashboard-ui/css/site.css           |  4 +++
 dashboard-ui/scripts/mediaplayer.js | 49 +++++++++++++++++++++++++++++
 dashboard-ui/scripts/site.js        | 10 +-----
 3 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index 159bc00228..2ba21ce4c1 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -815,6 +815,10 @@ progress {
     position: relative;
     width: 270px;
 }
+#nowPlayingBar #mediaInfo, #nowPlayingBar #mediaInfo div {
+    margin-left: 10px;
+    display: inline-block;
+}
 
 .mediaButton img {
     height: 28px;
diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js
index a61831f062..1d9b0d37ad 100644
--- a/dashboard-ui/scripts/mediaplayer.js
+++ b/dashboard-ui/scripts/mediaplayer.js
@@ -66,6 +66,55 @@
             $('#previousTrackButton', nowPlayingBar)[0].disabled = true;
             $('#nextTrackButton', nowPlayingBar)[0].disabled = true;
         }
+
+        //display image and title
+        var imageTags = item.ImageTags || {};
+        var html = '';
+
+        if (item.BackdropImageTags && item.BackdropImageTags.length) {
+
+            url = ApiClient.getImageUrl(item.Id, {
+                type: "Backdrop",
+                height: 30,
+                tag: item.BackdropImageTags[0]
+            });
+        }
+        else if (imageTags.Thumb) {
+
+            url = ApiClient.getImageUrl(item.Id, {
+                type: "Thumb",
+                height: 30,
+                tag: item.ImageTags.Thumb
+            });
+        }
+        else if (imageTags.Primary) {
+
+            url = ApiClient.getImageUrl(item.Id, {
+                type: "Primary",
+                height: 30,
+                tag: item.ImageTags.Primary
+            });
+        }else {
+            url = "css/images/items/detail/video.png";
+        }
+
+        var name = item.Name;
+        var series_name = '';
+
+        if (item.IndexNumber != null) {
+            name = item.IndexNumber + " - " + name;
+        }
+        if (item.ParentIndexNumber != null) {
+            name = item.ParentIndexNumber + "." + name;
+        }
+        if (item.SeriesName || item.Album || item.ProductionYear) {
+            series_name = item.SeriesName || item.Album || item.ProductionYear;
+        }
+
+        html += "<div><img class='clientNowPlayingImage' alt='' title='' src='" + url + "' style='height:30px;display:inline-block;' /></div>";
+        html += '<div>'+name+'<br/>'+series_name+'</div>';
+
+        $('#mediaInfo', nowPlayingBar).html(html);
     },
 
     playAudio: function (items, params) {
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 9e85253662..743f52e22e 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -1152,24 +1152,16 @@ var ApiClient = MediaBrowser.ApiClient.create("Dashboard");
 $(function () {
 
     var footerHtml = '<div id="footer" class="ui-bar-a">';
-
     footerHtml += '<div id="nowPlayingBar" style="display:none;">';
-
     footerHtml += '<button id="previousTrackButton" class="imageButton mediaButton" title="Previous Track" type="button"><img src="css/images/media/previoustrack.png" /></button>';
-
     footerHtml += '<button id="stopButton" class="imageButton mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();"><img src="css/images/media/stop.png" /></button>';
-
     footerHtml += '<button id="nextTrackButton" class="imageButton mediaButton" title="Next Track" type="button"><img src="css/images/media/nexttrack.png" /></button>';
-
     footerHtml += '<div id="mediaElement"></div>';
-
+    footerHtml += '<div id="mediaInfo"></div>';
     footerHtml += '</div>';
-
     footerHtml += '<div id="footerNotifications"></div>';
-
     footerHtml += '</div>';
 
-
     $(document.body).append(footerHtml);
 });