add more to video osd

dashboard-ui/css/mediaplayer-video.css

@@ -74,10 +74,8 @@
 }
 
 .nowPlayingInfo {
-    position: fixed;
+    text-align: center;
-    bottom: 8px;
+    padding: 1em 1em 1.5em;
-    left: 10px;
-    z-index: 99999;
 }
 
 #videoPlayer .nowPlayingImage img {
@@ -88,14 +86,24 @@
 
 #videoPlayer .nowPlayingText {
     font-weight: normal;
-    margin: 0 0 0 5px;
+    margin: 0 0 0 1em;
-    max-width: 150px;
+    max-width: initial;
     overflow: hidden;
-    white-space: nowrap;
+    white-space: normal;
     text-overflow: ellipsis;
     text-align: left;
-    vertical-align: bottom;
+    vertical-align: top;
     position: static;
+    color: #eee;
+    max-width: 800px;
+}
+
+.videoNowPlayingName {
+    font-size: 26px;
+}
+
+.videoNowPlayingOverview, .videoNowPlayingRating {
+    margin: 1em 0;
 }
 
 .videoTopControlsLogo {
@@ -155,20 +163,6 @@
         margin-right: 0;
         min-width: 120px;
     }
-
-    .videoControls .nowPlayingText {
-        max-width: 160px;
-    }
-
-    #mediaPlayer .nowPlayingImage {
-        display: none;
-    }
-}
-
-@media all and (max-width: 960px), all and (max-height: 550px) {
-    .videoControls .nowPlayingText {
-        max-width: 90px;
-    }
 }
 
 @media all and (max-width: 800px), all and (max-height: 460px) {
@@ -178,7 +172,7 @@
     }
 }
 
-@media all and (max-width: 1000px), all and (max-height: 460px) {
+@media all and (max-width: 1000px), all and (max-height: 600px) {
 
     #mediaPlayer .nowPlayingImage, #mediaPlayer .nowPlayingText {
         display: none;
@@ -204,7 +198,7 @@
 @media all and (min-width: 1300px) {
     #videoPlayer .nowPlayingImage img {
         height: auto !important;
-        max-width: 150px;
+        max-width: 250px;
         max-height: 300px;
     }
 }

dashboard-ui/scripts/mediacontroller.js

@@ -389,7 +389,7 @@
         };
 
         // TOOD: This doesn't really belong here
-        self.getNowPlayingNameHtml = function (nowPlayingItem) {
+        self.getNowPlayingNameHtml = function (nowPlayingItem, includeNonNameInfo) {
 
             var topText = nowPlayingItem.Name;
 
@@ -412,7 +412,7 @@
                 bottomText = topText;
                 topText = nowPlayingItem.SeriesName || nowPlayingItem.Album;
             }
-            else if (nowPlayingItem.ProductionYear) {
+            else if (nowPlayingItem.ProductionYear && includeNonNameInfo !== false) {
                 bottomText = nowPlayingItem.ProductionYear;
             }
 

dashboard-ui/scripts/mediaplayer-video.js

@@ -290,12 +290,14 @@
             var state = self.getPlayerStateInternal(self.currentMediaElement, item, self.currentMediaSource);
 
             var url = "";
+            var imageWidth = 250;
+            var imageHeight = 400;
 
             if (state.NowPlayingItem.PrimaryImageTag) {
 
                 url = ApiClient.getScaledImageUrl(state.NowPlayingItem.PrimaryImageItemId, {
                     type: "Primary",
-                    width: 150,
+                    width: imageWidth,
                     tag: state.NowPlayingItem.PrimaryImageTag
                 });
             }
@@ -303,7 +305,7 @@
 
                 url = ApiClient.getScaledImageUrl(state.NowPlayingItem.PrimaryImageItemId, {
                     type: "Primary",
-                    width: 150,
+                    width: imageWidth,
                     tag: state.NowPlayingItem.PrimaryImageTag
                 });
             }
@@ -311,7 +313,7 @@
 
                 url = ApiClient.getScaledImageUrl(state.NowPlayingItem.BackdropItemId, {
                     type: "Backdrop",
-                    height: 300,
+                    height: imageHeight,
                     tag: state.NowPlayingItem.BackdropImageTag,
                     index: 0
                 });
@@ -321,19 +323,13 @@
 
                 url = ApiClient.getScaledImageUrl(state.NowPlayingItem.ThumbImageItemId, {
                     type: "Thumb",
-                    height: 300,
+                    height: imageHeight,
                     tag: state.NowPlayingItem.ThumbImageTag
                 });
             }
 
             var nowPlayingTextElement = $('.nowPlayingText', mediaControls);
-            var nameHtml = MediaController.getNowPlayingNameHtml(state.NowPlayingItem);
+            var nameHtml = MediaController.getNowPlayingNameHtml(state.NowPlayingItem, false);
-
-            if (nameHtml.indexOf('<br/>') != -1) {
-                nowPlayingTextElement.addClass('nowPlayingDoubleText');
-            } else {
-                nowPlayingTextElement.removeClass('nowPlayingDoubleText');
-            }
 
             if (url) {
                 $('.nowPlayingImage', mediaControls).html('<img src="' + url + '" />');
@@ -354,6 +350,25 @@
                 $('.videoTopControlsLogo', mediaControls).html('');
             }
 
+            nameHtml = '<div class="videoNowPlayingName">' + nameHtml + '</div>';
+
+            var miscInfo = LibraryBrowser.getMiscInfoHtml(item);
+            if (miscInfo) {
+
+                nameHtml += '<div class="videoNowPlayingRating">' + miscInfo + '</div>';
+            }
+
+            var ratingHtml = LibraryBrowser.getRatingHtml(item);
+            if (ratingHtml) {
+
+                nameHtml += '<div class="videoNowPlayingRating">' + ratingHtml + '</div>';
+            }
+
+            if (item.Overview) {
+
+                nameHtml += '<div class="videoNowPlayingOverview">' + item.Overview + '</div>';
+            }
+
             nowPlayingTextElement.html(nameHtml);
         };