diff --git a/dashboard-ui/css/mediaplayer-video.css b/dashboard-ui/css/mediaplayer-video.css
index b7b47742a0..950b2141c7 100644
--- a/dashboard-ui/css/mediaplayer-video.css
+++ b/dashboard-ui/css/mediaplayer-video.css
@@ -74,10 +74,8 @@
}
.nowPlayingInfo {
- position: fixed;
- bottom: 8px;
- left: 10px;
- z-index: 99999;
+ text-align: center;
+ padding: 1em 1em 1.5em;
}
#videoPlayer .nowPlayingImage img {
@@ -88,14 +86,24 @@
#videoPlayer .nowPlayingText {
font-weight: normal;
- margin: 0 0 0 5px;
- max-width: 150px;
+ margin: 0 0 0 1em;
+ 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;
}
}
diff --git a/dashboard-ui/scripts/mediacontroller.js b/dashboard-ui/scripts/mediacontroller.js
index dc8f50452d..08e5c8f663 100644
--- a/dashboard-ui/scripts/mediacontroller.js
+++ b/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;
}
diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js
index 3a4c3ce8a2..0e5a63bfde 100644
--- a/dashboard-ui/scripts/mediaplayer-video.js
+++ b/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);
-
- if (nameHtml.indexOf('
') != -1) {
- nowPlayingTextElement.addClass('nowPlayingDoubleText');
- } else {
- nowPlayingTextElement.removeClass('nowPlayingDoubleText');
- }
+ var nameHtml = MediaController.getNowPlayingNameHtml(state.NowPlayingItem, false);
if (url) {
$('.nowPlayingImage', mediaControls).html('');
@@ -354,6 +350,25 @@
$('.videoTopControlsLogo', mediaControls).html('');
}
+ nameHtml = '