mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update video player osd
This commit is contained in:
Luke Pulverenti
parent
547493024a
commit
af129fb92d
7 changed files with 251 additions and 44 deletions
|
|
@ -619,21 +619,21 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.libraryPage ::-webkit-scrollbar {
|
||||
.darkScrollbars ::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.libraryPage ::-webkit-scrollbar-button:start:decrement,
|
||||
.libraryPage ::-webkit-scrollbar-button:end:increment {
|
||||
.darkScrollbars ::-webkit-scrollbar-button:start:decrement,
|
||||
.darkScrollbars ::-webkit-scrollbar-button:end:increment {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.libraryPage ::-webkit-scrollbar-track-piece {
|
||||
.darkScrollbars ::-webkit-scrollbar-track-piece {
|
||||
background-color: #3b3b3b;
|
||||
}
|
||||
|
||||
.libraryPage ::-webkit-scrollbar-thumb:vertical, .libraryPage ::-webkit-scrollbar-thumb:horizontal {
|
||||
.darkScrollbars ::-webkit-scrollbar-thumb:vertical, .darkScrollbars ::-webkit-scrollbar-thumb:horizontal {
|
||||
-webkit-border-radius: 2px;
|
||||
background: #888 no-repeat center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,8 +75,7 @@
|
|||
|
||||
.nowPlayingInfo {
|
||||
text-align: center;
|
||||
padding: 1em 1em 0 1em;
|
||||
|
||||
padding: 1em 1em 2em 1em;
|
||||
}
|
||||
|
||||
#videoPlayer .nowPlayingImage img {
|
||||
|
|
@ -85,6 +84,56 @@
|
|||
max-height: 200px;
|
||||
}
|
||||
|
||||
#videoPlayer .nowPlayingTabs {
|
||||
margin: 0 0 0 1em;
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
color: #eee;
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
font-weight: normal;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 1200px) {
|
||||
#videoPlayer .nowPlayingTabs {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.nowPlayingTabButtons {
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
.nowPlayingTabButton {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
color: #ddd !important;
|
||||
font-weight: 500 !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nowPlayingTabButton + .nowPlayingTabButton {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
.nowPlayingTabButton:not(.selectedNowPlayingTabButton):hover {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.selectedNowPlayingTabButton {
|
||||
color: #2ad !important;
|
||||
}
|
||||
|
||||
.nowPlayingTab {
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#videoPlayer .nowPlayingText {
|
||||
font-weight: normal;
|
||||
margin: 0 0 0 1em;
|
||||
|
|
@ -96,7 +145,6 @@
|
|||
vertical-align: top;
|
||||
position: static;
|
||||
color: #eee;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.videoNowPlayingName {
|
||||
|
|
@ -173,10 +221,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 1000px), all and (max-height: 600px) {
|
||||
@media all and (max-width: 800px), all and (max-height: 600px) {
|
||||
|
||||
#mediaPlayer .nowPlayingImage, #mediaPlayer .nowPlayingText {
|
||||
display: none;
|
||||
#mediaPlayer .nowPlayingInfo {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -197,10 +245,14 @@
|
|||
}
|
||||
|
||||
@media all and (min-width: 1300px) {
|
||||
.nowPlayingInfo {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#videoPlayer .nowPlayingImage img {
|
||||
height: auto !important;
|
||||
max-width: 400px;
|
||||
max-height: 250px;
|
||||
max-height: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.tileItem {
|
||||
background: #1e1e1e;
|
||||
background: rgba(30, 30, 30, .7);
|
||||
padding: 10px 7px 5px;
|
||||
margin: 3px 0;
|
||||
font-weight: normal !important;
|
||||
|
|
|
|||
|
|
@ -1405,10 +1405,6 @@
|
|||
|
||||
var cssClass = "card";
|
||||
|
||||
if (options.transparent !== false) {
|
||||
cssClass += " transparentCard";
|
||||
}
|
||||
|
||||
cssClass += ' ' + options.shape + 'Card';
|
||||
|
||||
var mediaSourceCount = item.MediaSourceCount || 1;
|
||||
|
|
|
|||
|
|
@ -291,7 +291,7 @@
|
|||
|
||||
var url = "";
|
||||
var imageWidth = 400;
|
||||
var imageHeight = 250;
|
||||
var imageHeight = 280;
|
||||
|
||||
if (state.NowPlayingItem.PrimaryImageTag) {
|
||||
|
||||
|
|
@ -328,9 +328,6 @@
|
|||
});
|
||||
}
|
||||
|
||||
var nowPlayingTextElement = $('.nowPlayingText', mediaControls);
|
||||
var nameHtml = MediaController.getNowPlayingNameHtml(state.NowPlayingItem, false);
|
||||
|
||||
if (url) {
|
||||
$('.nowPlayingImage', mediaControls).html('<img src="' + url + '" />');
|
||||
} else {
|
||||
|
|
@ -350,6 +347,44 @@
|
|||
$('.videoTopControlsLogo', mediaControls).html('');
|
||||
}
|
||||
|
||||
var elem = $('.nowPlayingTabs', mediaControls).html(getNowPlayingTabsHtml(item)).lazyChildren();
|
||||
|
||||
$('.nowPlayingTabButton', elem).on('click', function () {
|
||||
|
||||
if (!$(this).hasClass('selectedNowPlayingTabButton')) {
|
||||
$('.selectedNowPlayingTabButton').removeClass('selectedNowPlayingTabButton');
|
||||
$(this).addClass('selectedNowPlayingTabButton');
|
||||
$('.nowPlayingTab').hide();
|
||||
$('.' + this.getAttribute('data-tab')).show('slide').trigger('scroll');
|
||||
}
|
||||
});
|
||||
|
||||
$('.chapterCard', elem).on('click', function () {
|
||||
|
||||
self.seek(parseInt(this.getAttribute('data-position')));
|
||||
});
|
||||
};
|
||||
|
||||
function getNowPlayingTabsHtml(item) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<div class="nowPlayingTabButtons">';
|
||||
|
||||
html += '<a href="#" class="nowPlayingTabButton selectedNowPlayingTabButton" data-tab="tabInfo">' + Globalize.translate('TabInfo') + '</a>';
|
||||
|
||||
if (item.Chapters && item.Chapters.length) {
|
||||
html += '<a href="#" class="nowPlayingTabButton" data-tab="tabScenes">' + Globalize.translate('TabScenes') + '</a>';
|
||||
}
|
||||
|
||||
if (item.People && item.People.length) {
|
||||
html += '<a href="#" class="nowPlayingTabButton" data-tab="tabCast">' + Globalize.translate('TabCast') + '</a>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="tabInfo nowPlayingTab">';
|
||||
var nameHtml = MediaController.getNowPlayingNameHtml(item, false);
|
||||
nameHtml = '<div class="videoNowPlayingName">' + nameHtml + '</div>';
|
||||
|
||||
var miscInfo = LibraryBrowser.getMiscInfoHtml(item);
|
||||
|
|
@ -369,8 +404,113 @@
|
|||
nameHtml += '<div class="videoNowPlayingOverview">' + item.Overview + '</div>';
|
||||
}
|
||||
|
||||
nowPlayingTextElement.html(nameHtml);
|
||||
};
|
||||
html += nameHtml;
|
||||
html += '</div>';
|
||||
|
||||
if (item.Chapters && item.Chapters.length) {
|
||||
html += '<div class="tabScenes nowPlayingTab" style="display:none;white-space:nowrap;margin-bottom:2em;">';
|
||||
var chapterIndex = 0;
|
||||
html += item.Chapters.map(function (c) {
|
||||
|
||||
var width = 360;
|
||||
var chapterHtml = '<a class="card backdropCard chapterCard" href="#" style="margin-right:1em;width:' + width + 'px;" data-position="' + c.StartPositionTicks + '">';
|
||||
chapterHtml += '<div class="cardBox">';
|
||||
chapterHtml += '<div class="cardScalable">';
|
||||
chapterHtml += '<div class="cardPadder"></div>';
|
||||
|
||||
chapterHtml += '<div class="cardContent">';
|
||||
|
||||
if (c.ImageTag) {
|
||||
|
||||
var chapterImageUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
width: width,
|
||||
tag: c.ImageTag,
|
||||
type: "Chapter",
|
||||
index: chapterIndex
|
||||
});
|
||||
chapterHtml += '<div class="cardImage lazy" data-src="' + chapterImageUrl + '"></div>';
|
||||
|
||||
} else {
|
||||
chapterHtml += '<div class="cardImage" style="background:#444;"></div>';
|
||||
}
|
||||
|
||||
chapterHtml += '<div class="cardFooter">';
|
||||
if (c.Name) {
|
||||
chapterHtml += '<div class="cardText">' + c.Name + '</div>';
|
||||
}
|
||||
chapterHtml += '<div class="cardText">' + Dashboard.getDisplayTime(c.StartPositionTicks) + '</div>';
|
||||
chapterHtml += '</div>';
|
||||
chapterHtml += '</div>';
|
||||
|
||||
chapterHtml += '</div>';
|
||||
chapterHtml += '</div>';
|
||||
chapterHtml += '</a>';
|
||||
|
||||
chapterIndex++;
|
||||
|
||||
return chapterHtml;
|
||||
|
||||
}).join('');
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
if (item.People && item.People.length) {
|
||||
html += '<div class="tabCast nowPlayingTab" style="display:none;white-space:nowrap;">';
|
||||
html += item.People.map(function (cast) {
|
||||
|
||||
var personHtml = '<div class="tileItem smallPosterTileItem" style="width:300px;">';
|
||||
|
||||
var imgUrl;
|
||||
|
||||
if (cast.PrimaryImageTag) {
|
||||
|
||||
imgUrl = ApiClient.getScaledImageUrl(cast.Id, {
|
||||
height: 160,
|
||||
tag: cast.PrimaryImageTag,
|
||||
type: "primary",
|
||||
minScale: 2
|
||||
});
|
||||
|
||||
} else {
|
||||
|
||||
imgUrl = "css/images/items/list/person.png";
|
||||
}
|
||||
|
||||
personHtml += '<div class="tileImage lazy" data-src="' + imgUrl + '" style="height:160px;"></div>';
|
||||
|
||||
|
||||
|
||||
personHtml += '<div class="tileContent">';
|
||||
|
||||
personHtml += '<p>' + cast.Name + '</p>';
|
||||
|
||||
var role = cast.Role ? Globalize.translate('ValueAsRole', cast.Role) : cast.Type;
|
||||
|
||||
if (role == "GuestStar") {
|
||||
role = Globalize.translate('ValueGuestStar');
|
||||
}
|
||||
|
||||
role = role || "";
|
||||
|
||||
var maxlength = 40;
|
||||
|
||||
if (role.length > maxlength) {
|
||||
role = role.substring(0, maxlength - 3) + '...';
|
||||
}
|
||||
|
||||
personHtml += '<p>' + role + '</p>';
|
||||
|
||||
personHtml += '</div>';
|
||||
|
||||
personHtml += '</div>';
|
||||
return personHtml;
|
||||
|
||||
}).join('');
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function onPositionSliderChange() {
|
||||
|
||||
|
|
@ -520,7 +660,7 @@
|
|||
idleState = true;
|
||||
$('.hiddenOnIdle').addClass("inactive");
|
||||
$('#videoPlayer').addClass('idlePlayer');
|
||||
}, 4000);
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function updateVolumeButtons(vol) {
|
||||
|
|
@ -905,7 +1045,7 @@
|
|||
});
|
||||
|
||||
if (hideElementsOnIdle) {
|
||||
$(document.body).on("mousemove.videplayer", "#itemVideo", function () {
|
||||
$(document.body).on("mousemove.videoplayer", function () {
|
||||
|
||||
idleHandler(this);
|
||||
});
|
||||
|
|
@ -919,7 +1059,7 @@
|
|||
// Stop playback on browser back button nav
|
||||
$(window).off("popstate.videoplayer");
|
||||
|
||||
$(document.body).off("mousemove.videplayer");
|
||||
$(document.body).off("mousemove.videoplayer");
|
||||
|
||||
$('.itemVideo').off('mousemove.videoplayer keydown.videoplayer scroll.videoplayer');
|
||||
}
|
||||
|
|
@ -930,7 +1070,7 @@
|
|||
return true;
|
||||
}
|
||||
|
||||
if ($.browser.msie || $.browser.mobile) {
|
||||
if ($.browser.mobile) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
@ -1092,7 +1232,14 @@
|
|||
volumeSlider.val(initialVolume).slider('refresh');
|
||||
updateVolumeButtons(initialVolume);
|
||||
|
||||
video.one("playing.mediaplayerevent", function (e) {
|
||||
video.one("loadedmetadata.mediaplayerevent", function (e) {
|
||||
|
||||
// The IE video player won't autoplay without this
|
||||
if ($.browser.msie) {
|
||||
this.play();
|
||||
}
|
||||
|
||||
}).one("playing.mediaplayerevent", function (e) {
|
||||
|
||||
// TODO: This is not working in chrome. Is it too early?
|
||||
|
||||
|
|
|
|||
|
|
@ -467,7 +467,14 @@
|
|||
|
||||
clearProgressInterval();
|
||||
|
||||
$(element).off('ended.playbackstopped').off('ended.playnext').one("play", function () {
|
||||
$(element).off('ended.playbackstopped').off('ended.playnext').one("loadedmetadata.mediaplayerevent", function (e) {
|
||||
|
||||
// The IE video player won't autoplay without this
|
||||
if ($.browser.msie && self.currentItem.MediaType == "Video") {
|
||||
this.play();
|
||||
}
|
||||
|
||||
}).one("play", function () {
|
||||
|
||||
self.updateCanClientSeek(this);
|
||||
|
||||
|
|
|
|||
|
|
@ -1691,7 +1691,7 @@ var AppInfo = {};
|
|||
|
||||
videoPlayerHtml += '<div class="nowPlayingInfo hiddenOnIdle">';
|
||||
videoPlayerHtml += '<div class="nowPlayingImage"></div>';
|
||||
videoPlayerHtml += '<div class="nowPlayingText"></div>';
|
||||
videoPlayerHtml += '<div class="nowPlayingTabs"></div>';
|
||||
videoPlayerHtml += '</div>'; // nowPlayingInfo
|
||||
|
||||
videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton videoTrackControl imageButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-role="none"><i class="fa fa-step-backward"></i></button>';
|
||||
|
|
@ -1801,9 +1801,7 @@ $(document).on('pagecreate', ".page", function () {
|
|||
var page = $(this);
|
||||
|
||||
var current = page.data('theme');
|
||||
if (current) {
|
||||
return;
|
||||
}
|
||||
if (!current) {
|
||||
|
||||
var newTheme;
|
||||
|
||||
|
|
@ -1818,6 +1816,13 @@ $(document).on('pagecreate', ".page", function () {
|
|||
if (current && current != newTheme) {
|
||||
page.page("option", "theme", newTheme);
|
||||
}
|
||||
}
|
||||
|
||||
if (current == 'b') {
|
||||
$(document.body).addClass('darkScrollbars');
|
||||
} else {
|
||||
$(document.body).addClass('removeScrollbars');
|
||||
}
|
||||
|
||||
}).on('pagebeforeshow', ".page", function () {
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue