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 = '
' + nameHtml + '
'; + + var miscInfo = LibraryBrowser.getMiscInfoHtml(item); + if (miscInfo) { + + nameHtml += '
' + miscInfo + '
'; + } + + var ratingHtml = LibraryBrowser.getRatingHtml(item); + if (ratingHtml) { + + nameHtml += '
' + ratingHtml + '
'; + } + + if (item.Overview) { + + nameHtml += '
' + item.Overview + '
'; + } + nowPlayingTextElement.html(nameHtml); };