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

update detail page

This commit is contained in:
Luke Pulverenti 2015-08-18 00:22:45 -04:00
parent c6f885aee8
commit 84edab7fb0
19 changed files with 317 additions and 442 deletions

View file

@ -255,12 +255,6 @@
$('#txtSignupPassword', page).val('');
$('#txtSignupPasswordConfirm', page).val('');
if (AppInfo.isNativeApp) {
$('.skip', page).show();
} else {
$('.skip', page).hide();
}
var link = '<a href="http://emby.media" target="_blank">http://emby.media</a>';
$('.embyIntroDownloadMessage', page).html(Globalize.translate('EmbyIntroDownloadMessage', link));

View file

@ -40,18 +40,22 @@
LibraryBrowser.renderDetailPageBackdrop(page, item);
}
var canPlay = false;
if (item.Type == 'Program') {
var now = new Date();
if (now >= parseISO8601Date(item.StartDate, { toLocal: true }) && now < parseISO8601Date(item.EndDate, { toLocal: true })) {
$('.btnPlay', page).removeClass('hide');
canPlay = true;
} else {
$('.btnPlay', page).addClass('hide');
}
}
else if (MediaController.canPlay(item)) {
$('.btnPlay', page).removeClass('hide');
canPlay = true;
}
else {
$('.btnPlay', page).addClass('hide');
@ -82,9 +86,17 @@
}
if (item.Type == 'Program' && (!item.TimerId && !item.SeriesTimerId)) {
$('.btnRecord', page).removeClass('hide');
if (canPlay) {
$('.btnRecord', page).removeClass('hide');
$('.btnFloatingRecord', page).addClass('hide');
} else {
$('.btnRecord', page).addClass('hide');
$('.btnFloatingRecord', page).removeClass('hide');
}
} else {
$('.btnRecord', page).addClass('hide');
$('.btnFloatingRecord', page).addClass('hide');
}
if (!item.LocalTrailerCount && item.RemoteTrailers.length && item.PlayAccess == 'Full') {
@ -182,7 +194,6 @@
if (userData) {
currentItem.UserData = userData;
renderUserDataIcons(page, currentItem);
Dashboard.getCurrentUser().done(function (user) {
@ -229,7 +240,12 @@
$('.collectionItems', page).empty();
if (item.IsFolder) {
if (item.Type == 'TvChannel') {
$('#childrenCollapsible', page).removeClass('hide');
renderChannelGuide(page, item, user);
}
else if (item.IsFolder) {
if (item.Type == "BoxSet") {
$('#childrenCollapsible', page).addClass('hide');
@ -811,6 +827,15 @@
}
}
function renderChannelGuide(page, item, user) {
require('scripts/livetvcomponents,scripts/livetvchannel,livetvcss'.split(','), function () {
LiveTvChannelPage.renderPrograms(page, item.Id);
});
}
function renderCollectionItems(page, types, items, user) {
for (var i = 0, length = types.length; i < length; i++) {
@ -890,7 +915,7 @@
function renderUserDataIcons(page, item) {
$('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item));
$('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item, true, 'fab'));
}
function renderCriticReviews(page, item, limit) {
@ -1586,7 +1611,7 @@
});
});
$('.btnRecord', page).on('click', function () {
$('.btnRecord,.btnFloatingRecord', page).on('click', function () {
var id = getParameterByName('id');

View file

@ -797,7 +797,7 @@
return "playlistedit.html?id=" + id;
}
if (item.Type == "TvChannel") {
return "livetvchannel.html?id=" + id;
return "itemdetails.html?id=" + id;
}
if (item.Type == "Channel") {
return "channelitems.html?id=" + id;
@ -2501,17 +2501,17 @@
html += '<div class="criticRating" title="Rotten Tomatoes">' + item.CriticRating + '%</div>';
}
if (item.Metascore && metascore !== false) {
//if (item.Metascore && metascore !== false) {
if (item.Metascore >= 60) {
html += '<div class="metascore metascorehigh" title="Metascore">' + item.Metascore + '</div>';
}
else if (item.Metascore >= 40) {
html += '<div class="metascore metascoremid" title="Metascore">' + item.Metascore + '</div>';
} else {
html += '<div class="metascore metascorelow" title="Metascore">' + item.Metascore + '</div>';
}
}
// if (item.Metascore >= 60) {
// html += '<div class="metascore metascorehigh" title="Metascore">' + item.Metascore + '</div>';
// }
// else if (item.Metascore >= 40) {
// html += '<div class="metascore metascoremid" title="Metascore">' + item.Metascore + '</div>';
// } else {
// html += '<div class="metascore metascorelow" title="Metascore">' + item.Metascore + '</div>';
// }
//}
return html;
},
@ -2534,20 +2534,21 @@
return null;
},
getUserDataButtonHtml: function (method, itemId, btnCssClass, icon, tooltip) {
getUserDataButtonHtml: function (method, itemId, btnCssClass, icon, tooltip, style) {
return '<paper-icon-button data-itemid="' + itemId + '" icon="' + icon + '" class="' + btnCssClass + '" onclick="LibraryBrowser.' + method + '(this);return false;"></paper-icon-button>';
var tagName = style == 'fab' ? 'paper-fab' : 'paper-icon-button';
return '<' + tagName + ' title="' + tooltip + '" data-itemid="' + itemId + '" icon="' + icon + '" class="' + btnCssClass + '" onclick="LibraryBrowser.' + method + '(this);return false;"></' + tagName + '>';
},
getUserDataIconsHtml: function (item, includePlayed) {
getUserDataIconsHtml: function (item, includePlayed, style) {
var html = '';
var userData = item.UserData || {};
var itemId = item.Id;
var type = item.Type;
if (includePlayed !== false) {
var tooltipPlayed = Globalize.translate('TooltipPlayed');
@ -2555,37 +2556,37 @@
if (item.MediaType == 'Video' || item.Type == 'Series' || item.Type == 'Season' || item.Type == 'BoxSet' || item.Type == 'Playlist') {
if (item.Type != 'TvChannel') {
if (userData.Played) {
html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating btnUserItemRatingOn', 'check', tooltipPlayed);
html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating btnUserItemRatingOn', 'check', tooltipPlayed, style);
} else {
html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating', 'check', tooltipPlayed);
html += LibraryBrowser.getUserDataButtonHtml('markPlayed', itemId, 'btnUserItemRating', 'check', tooltipPlayed, style);
}
}
}
}
var tooltipLike = Globalize.translate('TooltipLike');
var tooltipDislike = Globalize.translate('TooltipDislike');
//var tooltipLike = Globalize.translate('TooltipLike');
//var tooltipDislike = Globalize.translate('TooltipDislike');
if (typeof userData.Likes == "undefined") {
html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating', 'thumb-down', tooltipDislike);
html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating', 'thumb-up', tooltipLike);
}
else if (userData.Likes) {
html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating', 'thumb-down', tooltipDislike);
html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating btnUserItemRatingOn', 'thumb-up', tooltipLike);
}
else {
html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating btnUserItemRatingOn', 'thumb-down', tooltipDislike);
html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating', 'thumb-up', tooltipLike);
}
//if (typeof userData.Likes == "undefined") {
// html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating', 'thumb-down', tooltipDislike, style);
// html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating', 'thumb-up', tooltipLike, style);
//}
//else if (userData.Likes) {
// html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating', 'thumb-down', tooltipDislike, style);
// html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating btnUserItemRatingOn', 'thumb-up', tooltipLike, style);
//}
//else {
// html += LibraryBrowser.getUserDataButtonHtml('markDislike', itemId, 'btnUserItemRating btnUserItemRatingOn', 'thumb-down', tooltipDislike, style);
// html += LibraryBrowser.getUserDataButtonHtml('markLike', itemId, 'btnUserItemRating', 'thumb-up', tooltipLike, style);
//}
var tooltipFavorite = Globalize.translate('TooltipFavorite');
if (userData.IsFavorite) {
//var tooltipFavorite = Globalize.translate('TooltipFavorite');
//if (userData.IsFavorite) {
html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating btnUserItemRatingOn', 'favorite', tooltipFavorite);
} else {
html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating', 'favorite', tooltipFavorite);
}
// html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating btnUserItemRatingOn', 'favorite', tooltipFavorite, style);
//} else {
// html += LibraryBrowser.getUserDataButtonHtml('markFavorite', itemId, 'btnUserItemRating', 'favorite', tooltipFavorite, style);
//}
return html;
},
@ -2882,14 +2883,7 @@
}
}
var screenWidth = $(window).width();
// Take a guess about whether we should lazy load or not
if (screenWidth > 600) {
html += "<img class='itemDetailImage' src='" + url + "' />";
} else {
html += "<img class='itemDetailImage lazy' data-src='" + url + "' src='css/images/empty.png' />";
}
html += "<img class='itemDetailImage' src='" + url + "' />";
if (href) {
html += "</a>";
@ -2907,43 +2901,16 @@
elem.innerHTML = html;
function addClass(elems, name) {
for (var i = 0, length = elems.length; i < length; i++) {
elems[i].classList.add(name);
}
}
function removeClass(elems, name) {
for (var i = 0, length = elems.length; i < length; i++) {
elems[i].classList.remove(name);
}
}
var page = $(elem).parents('.page')[0];
var detailContentEffectedByImage = page.querySelectorAll('.detailContentEffectedByImage');
if (shape == 'thumb') {
addClass(detailContentEffectedByImage, 'detailContentEffectedByThumbImage');
removeClass(detailContentEffectedByImage, 'detailContentEffectedBySquareImage');
removeClass(detailContentEffectedByImage, 'detailContentEffectedByPortraitImage');
elem.classList.add('thumbDetailImageContainer');
elem.classList.remove('portraitDetailImageContainer');
elem.classList.remove('squareDetailImageContainer');
}
else if (shape == 'square') {
removeClass(detailContentEffectedByImage, 'detailContentEffectedByThumbImage');
removeClass(detailContentEffectedByImage, 'detailContentEffectedByPortraitImage');
addClass(detailContentEffectedByImage, 'detailContentEffectedBySquareImage');
elem.classList.remove('thumbDetailImageContainer');
elem.classList.remove('portraitDetailImageContainer');
elem.classList.add('squareDetailImageContainer');
} else {
removeClass(detailContentEffectedByImage, 'detailContentEffectedByThumbImage');
removeClass(detailContentEffectedByImage, 'detailContentEffectedBySquareImage');
addClass(detailContentEffectedByImage, 'detailContentEffectedByPortraitImage');
elem.classList.remove('thumbDetailImageContainer');
elem.classList.add('portraitDetailImageContainer');
elem.classList.remove('squareDetailImageContainer');
@ -3138,15 +3105,17 @@
var elem = this;
var overview = item.Overview || '';
elem.innerHTML = overview;
$('a', elem).each(function () {
this.setAttribute("target", "_blank");
});
if (overview) {
elem.innerHTML = overview;
elem.classList.remove('empty');
} else {
elem.innerHTML = '';
elem.classList.add('empty');
}
});

View file

@ -756,15 +756,15 @@
LibraryMenu.setTitle(Globalize.translate(titleKey));
}
var mainDrawerButton = document.querySelector('.mainDrawerButton');
//var mainDrawerButton = document.querySelector('.mainDrawerButton');
if (mainDrawerButton) {
if (page.getAttribute('data-menubutton') == 'false' && $.browser.mobile) {
mainDrawerButton.classList.add('hide');
} else {
mainDrawerButton.classList.remove('hide');
}
}
//if (mainDrawerButton) {
// if (page.getAttribute('data-menubutton') == 'false' && $.browser.mobile) {
// mainDrawerButton.classList.add('hide');
// } else {
// mainDrawerButton.classList.remove('hide');
// }
//}
if (isLibraryPage) {

View file

@ -1,8 +1,5 @@
(function ($, document) {
var currentItem;
var programs;
function renderPrograms(page, result) {
var html = '';
@ -62,13 +59,13 @@
html += '<div class="tvProgramTime">';
if (program.IsLive) {
html += '<span class="liveTvProgram">'+Globalize.translate('LabelLiveProgram')+'&nbsp;&nbsp;</span>';
html += '<span class="liveTvProgram">' + Globalize.translate('LabelLiveProgram') + '&nbsp;&nbsp;</span>';
}
else if (program.IsPremiere) {
html += '<span class="premiereTvProgram">'+Globalize.translate('LabelPremiereProgram')+'&nbsp;&nbsp;</span>';
html += '<span class="premiereTvProgram">' + Globalize.translate('LabelPremiereProgram') + '&nbsp;&nbsp;</span>';
}
else if (program.IsSeries && !program.IsRepeat) {
html += '<span class="newTvProgram">'+Globalize.translate('LabelNewProgram')+'&nbsp;&nbsp;</span>';
html += '<span class="newTvProgram">' + Globalize.translate('LabelNewProgram') + '&nbsp;&nbsp;</span>';
}
var minutes = program.RunTimeTicks / 600000000;
@ -98,94 +95,26 @@
html += '</a>';
}
$('#programList', page).html(html).trigger('create').createGuideHoverMenu('.tvProgramInfo');
$('#childrenContent', page).html(html).trigger('create').createGuideHoverMenu('.tvProgramInfo');
}
function loadPrograms(page) {
function loadPrograms(page, channelId) {
ApiClient.getLiveTvPrograms({
ChannelIds: currentItem.Id,
ChannelIds: channelId,
UserId: Dashboard.getCurrentUserId()
}).done(function (result) {
renderPrograms(page, result);
programs = result.Items;
Dashboard.hideLoadingMsg();
});
}
function reload(page) {
Dashboard.showLoadingMsg();
ApiClient.getLiveTvChannel(getParameterByName('id'), Dashboard.getCurrentUserId()).done(function (item) {
currentItem = item;
var name = item.Name;
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
Dashboard.setPageTitle(name);
$('.itemName', page).html(item.Number + ' ' + name);
$('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item));
$(page).trigger('displayingitem', [{
item: item,
context: 'livetv'
}]);
Dashboard.getCurrentUser().done(function (user) {
if (MediaController.canPlay(item)) {
$('#playButtonContainer', page).show();
} else {
$('#playButtonContainer', page).hide();
}
if (user.Policy.IsAdministrator && item.LocationType !== "Offline") {
$('#editButtonContainer', page).show();
} else {
$('#editButtonContainer', page).hide();
}
});
loadPrograms(page);
});
}
$(document).on('pageinitdepends', "#liveTvChannelPage", function () {
var page = this;
$('.btnPlay', page).on('click', function () {
var userdata = currentItem.UserData || {};
LibraryBrowser.showPlayMenu(null, currentItem.Id, currentItem.Type, false, currentItem.MediaType, userdata.PlaybackPositionTicks);
});
$('.btnEdit', page).on('click', function () {
Dashboard.navigate("edititemmetadata.html?channelid=" + currentItem.Id);
});
}).on('pagebeforeshowready', "#liveTvChannelPage", function () {
var page = this;
reload(page);
}).on('pagebeforehide', "#liveTvChannelPage", function () {
currentItem = null;
programs = null;
});
window.LiveTvChannelPage = {
renderPrograms: loadPrograms
};
})(jQuery, document);

View file

@ -41,7 +41,7 @@
}
if (obj.ChannelId) {
html.push('<a class="textlink" href="livetvchannel.html?id=' + obj.ChannelId + '">' + obj.ChannelName + '</a>');
html.push('<a class="textlink" href="itemdetails.html?id=' + obj.ChannelId + '">' + obj.ChannelName + '</a>');
}
if (obj.IsHD) {

View file

@ -285,7 +285,7 @@
html += '<div class="channelHeaderCellContainer">';
html += '<div class="channelHeaderCell">';
html += '<a class="channelHeaderCellInner" href="livetvchannel.html?id=' + channel.Id + '">';
html += '<a class="channelHeaderCellInner" href="itemdetails.html?id=' + channel.Id + '">';
var hasChannelImage = channel.ImageTags.Primary;
var cssClass = hasChannelImage ? 'guideChannelInfo guideChannelInfoWithImage' : 'guideChannelInfo';

View file

@ -41,7 +41,7 @@
channelHtml += Globalize.translate('LabelAllChannels');
}
else if (item.ChannelId) {
channelHtml += '<a href="livetvchannel.html?id=' + item.ChannelId + '">' + item.ChannelName + '</a>';
channelHtml += '<a href="itemdetails.html?id=' + item.ChannelId + '">' + item.ChannelName + '</a>';
}
$('.channel', page).html(channelHtml).trigger('create');

View file

@ -43,7 +43,7 @@
if (tuner.Status == 'RecordingTv') {
if (tuner.ChannelName) {
html += '<a href="livetvchannel.html?id=' + tuner.ChannelId + '">';
html += '<a href="itemdetails.html?id=' + tuner.ChannelId + '">';
html += Globalize.translate('StatusRecordingProgram').replace('{0}', tuner.ChannelName);
html += '</a>';
} else {
@ -55,7 +55,7 @@
if (tuner.ChannelName) {
html += '<a href="livetvchannel.html?id=' + tuner.ChannelId + '">';
html += '<a href="itemdetails.html?id=' + tuner.ChannelId + '">';
html += Globalize.translate('StatusWatchingProgram').replace('{0}', tuner.ChannelName);
html += '</a>';
} else {

View file

@ -398,12 +398,6 @@
} else {
$(page).removeClass('libraryPage').removeClass('noSecondaryNavPage').addClass('standalonePage');
}
if (AppInfo.isNativeApp) {
$('.addServer', page).show();
} else {
$('.addServer', page).hide();
}
}
$(document).on('pageinitdepends pagebeforeshowready', "#selectServerPage", function () {