mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

update video player osd

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

169
dashboard-ui/scripts/mediaplayer-video.js
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?