1
0
Fork 0
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 2015-05-13 23:24:25 -04:00
parent 547493024a
commit af129fb92d
7 changed files with 251 additions and 44 deletions

View file

@ -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;
}

View file

@ -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;
}
}

View file

@ -1,5 +1,5 @@
.tileItem {
background: #1e1e1e;
background: rgba(30, 30, 30, .7);
padding: 10px 7px 5px;
margin: 3px 0;
font-weight: normal !important;

View file

@ -1405,10 +1405,6 @@
var cssClass = "card";
if (options.transparent !== false) {
cssClass += " transparentCard";
}
cssClass += ' ' + options.shape + 'Card';
var mediaSourceCount = item.MediaSourceCount || 1;

View file

@ -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?

View file

@ -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);

View file

@ -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 () {