mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
add more to video osd
This commit is contained in:
parent
973adc227f
commit
c14b074ab9
3 changed files with 46 additions and 37 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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('<br/>') != -1) {
|
||||
nowPlayingTextElement.addClass('nowPlayingDoubleText');
|
||||
} else {
|
||||
nowPlayingTextElement.removeClass('nowPlayingDoubleText');
|
||||
}
|
||||
var nameHtml = MediaController.getNowPlayingNameHtml(state.NowPlayingItem, false);
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue