mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
add xframe setting
This commit is contained in:
Luke Pulverenti
parent
2f544f923b
commit
8590d1bd10
5 changed files with 463 additions and 464 deletions
|
|
@ -4,7 +4,7 @@
|
||||||
<title>Emby</title>
|
<title>Emby</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="channelsLatestPage" data-role="page" class="page libraryPage channelsPage" data-contextname="${HeaderChannels}" data-require="scripts/channelslatest">
|
<div id="channelsLatestPage" data-role="page" class="page libraryPage channelsPage" data-contextname="${HeaderChannels}" data-require="scripts/sections,scripts/channelslatest">
|
||||||
|
|
||||||
<div class="libraryViewNav scopedLibraryViewNav">
|
<div class="libraryViewNav scopedLibraryViewNav">
|
||||||
<a href="#" class="ui-btn-active latestChannelItemsTab">${TabLatest}</a>
|
<a href="#" class="ui-btn-active latestChannelItemsTab">${TabLatest}</a>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<title>Emby</title>
|
<title>Emby</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="homeLatestPage" data-role="page" class="page type-home libraryPage allLibraryPage backdropPage" data-backdroptype="movie,series,game,book" data-require="scripts/homelatest">
|
<div id="homeLatestPage" data-role="page" class="page type-home libraryPage allLibraryPage backdropPage" data-backdroptype="movie,series,game,book" data-require="scripts/sections,scripts/homelatest">
|
||||||
|
|
||||||
<div class="libraryViewNav scopedLibraryViewNav">
|
<div class="libraryViewNav scopedLibraryViewNav">
|
||||||
<a href="index.html">${TabHome}</a>
|
<a href="index.html">${TabHome}</a>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<title>Emby</title>
|
<title>Emby</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="indexPage" data-role="page" class="page type-home libraryPage allLibraryPage backdropPage" data-backdroptype="movie,series,game,book">
|
<div id="indexPage" data-role="page" class="page type-home libraryPage allLibraryPage backdropPage" data-backdroptype="movie,series,game,book" data-require="scripts/sections,scripts/indexpage">
|
||||||
|
|
||||||
<div class="libraryViewNav scopedLibraryViewNav">
|
<div class="libraryViewNav scopedLibraryViewNav">
|
||||||
<a href="#" class="ui-btn-active">${TabHome}</a>
|
<a href="#" class="ui-btn-active">${TabHome}</a>
|
||||||
|
|
|
||||||
|
|
@ -1,466 +1,5 @@
|
||||||
(function ($, document) {
|
(function ($, document) {
|
||||||
|
|
||||||
function getUserViews(userId) {
|
|
||||||
|
|
||||||
var deferred = $.Deferred();
|
|
||||||
|
|
||||||
ApiClient.getUserViews(userId).done(function (result) {
|
|
||||||
|
|
||||||
var items = result.Items;
|
|
||||||
|
|
||||||
deferred.resolveWith(null, [items]);
|
|
||||||
});
|
|
||||||
|
|
||||||
return deferred.promise();
|
|
||||||
}
|
|
||||||
|
|
||||||
function enableScrollX() {
|
|
||||||
return $.browser.mobile && AppInfo.enableAppLayouts;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getThumbShape() {
|
|
||||||
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
|
|
||||||
}
|
|
||||||
|
|
||||||
function getLibraryButtonsHtml(items) {
|
|
||||||
|
|
||||||
var html = "";
|
|
||||||
|
|
||||||
// "My Library" backgrounds
|
|
||||||
for (var i = 0, length = items.length; i < length; i++) {
|
|
||||||
|
|
||||||
var item = items[i];
|
|
||||||
|
|
||||||
var icon;
|
|
||||||
var backgroundColor = 'rgba(82, 181, 75, 0.9)';
|
|
||||||
|
|
||||||
switch (item.CollectionType) {
|
|
||||||
case "movies":
|
|
||||||
icon = "fa-film";
|
|
||||||
backgroundColor = 'rgba(176, 94, 81, 0.9)';
|
|
||||||
break;
|
|
||||||
case "music":
|
|
||||||
icon = "fa-music";
|
|
||||||
backgroundColor = 'rgba(217, 145, 67, 0.9)';
|
|
||||||
break;
|
|
||||||
case "photos":
|
|
||||||
icon = "fa-photo";
|
|
||||||
backgroundColor = 'rgba(127, 0, 0, 0.9)';
|
|
||||||
break;
|
|
||||||
case "livetv":
|
|
||||||
icon = "fa-video-camera";
|
|
||||||
backgroundColor = 'rgba(217, 145, 67, 0.9)';
|
|
||||||
break;
|
|
||||||
case "tvshows":
|
|
||||||
icon = "fa-video-camera";
|
|
||||||
backgroundColor = 'rgba(77, 88, 164, 0.9)';
|
|
||||||
break;
|
|
||||||
case "games":
|
|
||||||
icon = "fa-gamepad";
|
|
||||||
backgroundColor = 'rgba(183, 202, 72, 0.9)';
|
|
||||||
break;
|
|
||||||
case "trailers":
|
|
||||||
icon = "fa-film";
|
|
||||||
backgroundColor = 'rgba(176, 94, 81, 0.9)';
|
|
||||||
break;
|
|
||||||
case "homevideos":
|
|
||||||
icon = "fa-video-camera";
|
|
||||||
backgroundColor = 'rgba(110, 52, 32, 0.9)';
|
|
||||||
break;
|
|
||||||
case "musicvideos":
|
|
||||||
icon = "fa-video-camera";
|
|
||||||
backgroundColor = 'rgba(143, 54, 168, 0.9)';
|
|
||||||
break;
|
|
||||||
case "books":
|
|
||||||
icon = "fa-book";
|
|
||||||
break;
|
|
||||||
case "channels":
|
|
||||||
icon = "fa-globe";
|
|
||||||
backgroundColor = 'rgba(51, 136, 204, 0.9)';
|
|
||||||
break;
|
|
||||||
case "playlists":
|
|
||||||
icon = "fa-list";
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
icon = "fa-folder-o";
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
var cssClass = 'card smallBackdropCard buttonCard';
|
|
||||||
|
|
||||||
if (item.CollectionType) {
|
|
||||||
cssClass += ' ' + item.CollectionType + 'buttonCard';
|
|
||||||
}
|
|
||||||
|
|
||||||
var href = item.url || LibraryBrowser.getHref(item);
|
|
||||||
|
|
||||||
html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" href="' + href + '">';
|
|
||||||
html += '<div class="cardBox" style="background-color:' + backgroundColor + ';margin:4px;border-radius:4px;">';
|
|
||||||
|
|
||||||
html += "<div class='cardText' style='padding:8px 10px;color:#fff;font-size:14px;'>";
|
|
||||||
html += '<i class="fa ' + icon + '"></i>';
|
|
||||||
html += '<span style="margin-left:.7em;">' + item.Name + '</span>';
|
|
||||||
html += "</div>";
|
|
||||||
|
|
||||||
html += "</div>";
|
|
||||||
|
|
||||||
html += "</a>";
|
|
||||||
}
|
|
||||||
|
|
||||||
return html;
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadlibraryButtons(elem, userId, index) {
|
|
||||||
|
|
||||||
return getUserViews(userId).done(function (items) {
|
|
||||||
|
|
||||||
var html = '<br/>';
|
|
||||||
|
|
||||||
if (index) {
|
|
||||||
html += '<h1 class="listHeader">' + Globalize.translate('HeaderMyMedia') + '</h1>';
|
|
||||||
}
|
|
||||||
html += '<div>';
|
|
||||||
html += getLibraryButtonsHtml(items);
|
|
||||||
html += '</div>';
|
|
||||||
|
|
||||||
$(elem).html(html);
|
|
||||||
|
|
||||||
handleLibraryLinkNavigations(elem);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadRecentlyAdded(elem, user, context) {
|
|
||||||
|
|
||||||
var limit = AppInfo.hasLowImageBandwidth ?
|
|
||||||
16 :
|
|
||||||
24;
|
|
||||||
|
|
||||||
var options = {
|
|
||||||
|
|
||||||
Limit: limit,
|
|
||||||
Fields: "PrimaryImageAspectRatio,SyncInfo",
|
|
||||||
ImageTypeLimit: 1,
|
|
||||||
EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
|
|
||||||
};
|
|
||||||
|
|
||||||
return ApiClient.getJSON(ApiClient.getUrl('Users/' + user.Id + '/Items/Latest', options)).done(function (items) {
|
|
||||||
|
|
||||||
var html = '';
|
|
||||||
|
|
||||||
var cardLayout = false;
|
|
||||||
|
|
||||||
if (items.length) {
|
|
||||||
html += '<div>';
|
|
||||||
html += '<h1 style="display:inline-block; vertical-align:middle;" class="listHeader">' + Globalize.translate('HeaderLatestMedia') + '</h1>';
|
|
||||||
|
|
||||||
if (user.Policy.EnableUserPreferenceAccess && !AppInfo.isNativeApp) {
|
|
||||||
html += '<a href="mypreferencesdisplay.html" class="accentButton"><i class="fa fa-pencil"></i>' + Globalize.translate('ButtonEdit') + '</a>';
|
|
||||||
}
|
|
||||||
|
|
||||||
html += '</div>';
|
|
||||||
|
|
||||||
html += '<div class="itemsContainer">';
|
|
||||||
|
|
||||||
html += LibraryBrowser.getPosterViewHtml({
|
|
||||||
items: items,
|
|
||||||
preferThumb: true,
|
|
||||||
shape: 'backdrop',
|
|
||||||
context: context || 'home',
|
|
||||||
showUnplayedIndicator: false,
|
|
||||||
showChildCountIndicator: true,
|
|
||||||
lazy: true,
|
|
||||||
cardLayout: cardLayout,
|
|
||||||
showTitle: cardLayout,
|
|
||||||
showYear: cardLayout,
|
|
||||||
showDetailsMenu: true
|
|
||||||
});
|
|
||||||
html += '</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
$(elem).html(html).lazyChildren().createCardMenus();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadLatestChannelMedia(elem, userId) {
|
|
||||||
|
|
||||||
var screenWidth = $(window).width();
|
|
||||||
|
|
||||||
var options = {
|
|
||||||
|
|
||||||
Limit: screenWidth >= 2400 ? 10 : (screenWidth >= 1600 ? 10 : (screenWidth >= 1440 ? 8 : (screenWidth >= 800 ? 7 : 6))),
|
|
||||||
Fields: "PrimaryImageAspectRatio,SyncInfo",
|
|
||||||
Filters: "IsUnplayed",
|
|
||||||
UserId: userId
|
|
||||||
};
|
|
||||||
|
|
||||||
return ApiClient.getJSON(ApiClient.getUrl("Channels/Items/Latest", options)).done(function (result) {
|
|
||||||
|
|
||||||
var html = '';
|
|
||||||
|
|
||||||
if (result.Items.length) {
|
|
||||||
html += '<h1 class="listHeader">' + Globalize.translate('HeaderLatestChannelMedia') + '</h1>';
|
|
||||||
html += '<div class="itemsContainer">';
|
|
||||||
html += LibraryBrowser.getPosterViewHtml({
|
|
||||||
items: result.Items,
|
|
||||||
preferThumb: true,
|
|
||||||
shape: 'auto',
|
|
||||||
showTitle: true,
|
|
||||||
centerText: true,
|
|
||||||
lazy: true,
|
|
||||||
showDetailsMenu: true
|
|
||||||
});
|
|
||||||
html += '</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
$(elem).html(html).lazyChildren().createCardMenus();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadLibraryTiles(elem, user, shape, index, autoHideOnMobile, showTitles) {
|
|
||||||
|
|
||||||
return getUserViews(user.Id).done(function (items) {
|
|
||||||
|
|
||||||
var html = '';
|
|
||||||
|
|
||||||
if (autoHideOnMobile) {
|
|
||||||
html += '<div class="hiddenSectionOnMobile">';
|
|
||||||
} else {
|
|
||||||
html += '<div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (items.length) {
|
|
||||||
|
|
||||||
var cssClass = index !== 0 ? 'listHeader' : 'listHeader firstListHeader';
|
|
||||||
|
|
||||||
html += '<div>';
|
|
||||||
html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + Globalize.translate('HeaderMyMedia') + '</h1>';
|
|
||||||
|
|
||||||
if (user.Policy.EnableUserPreferenceAccess && !AppInfo.isNativeApp) {
|
|
||||||
html += '<a href="mypreferencesdisplay.html" class="accentButton"><i class="fa fa-pencil"></i>' + Globalize.translate('ButtonEdit') + '</a>';
|
|
||||||
}
|
|
||||||
|
|
||||||
html += '</div>';
|
|
||||||
|
|
||||||
html += '<div class="homeTopViews">';
|
|
||||||
html += LibraryBrowser.getPosterViewHtml({
|
|
||||||
items: items,
|
|
||||||
shape: shape,
|
|
||||||
showTitle: showTitles,
|
|
||||||
centerText: true,
|
|
||||||
lazy: true,
|
|
||||||
autoThumb: true
|
|
||||||
});
|
|
||||||
html += '</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
html += '</div>';
|
|
||||||
|
|
||||||
if (autoHideOnMobile) {
|
|
||||||
html += '<div class="hiddenSectionOnNonMobile" style="margin-top:1em;">';
|
|
||||||
html += getLibraryButtonsHtml(items);
|
|
||||||
html += '</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
$(elem).html(html).lazyChildren().createCardMenus({ showDetailsMenu: false });
|
|
||||||
|
|
||||||
handleLibraryLinkNavigations(elem);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadResume(elem, userId) {
|
|
||||||
|
|
||||||
var screenWidth = $(window).width();
|
|
||||||
|
|
||||||
var options = {
|
|
||||||
|
|
||||||
SortBy: "DatePlayed",
|
|
||||||
SortOrder: "Descending",
|
|
||||||
MediaTypes: "Video",
|
|
||||||
Filters: "IsResumable",
|
|
||||||
Limit: screenWidth >= 1920 ? 10 : (screenWidth >= 1600 ? 8 : (screenWidth >= 1200 ? 9 : 6)),
|
|
||||||
Recursive: true,
|
|
||||||
Fields: "PrimaryImageAspectRatio,SyncInfo",
|
|
||||||
CollapseBoxSetItems: false,
|
|
||||||
ExcludeLocationTypes: "Virtual",
|
|
||||||
ImageTypeLimit: 1,
|
|
||||||
EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
|
|
||||||
};
|
|
||||||
|
|
||||||
return ApiClient.getItems(userId, options).done(function (result) {
|
|
||||||
|
|
||||||
var html = '';
|
|
||||||
|
|
||||||
var cardLayout = AppInfo.hasLowImageBandwidth;
|
|
||||||
|
|
||||||
if (result.Items.length) {
|
|
||||||
html += '<h1 class="listHeader">' + Globalize.translate('HeaderResume') + '</h1>';
|
|
||||||
if (enableScrollX()) {
|
|
||||||
html += '<div class="hiddenScrollX itemsContainer">';
|
|
||||||
} else {
|
|
||||||
html += '<div class="itemsContainer">';
|
|
||||||
}
|
|
||||||
html += LibraryBrowser.getPosterViewHtml({
|
|
||||||
items: result.Items,
|
|
||||||
preferThumb: true,
|
|
||||||
shape: getThumbShape(),
|
|
||||||
overlayText: screenWidth >= 800 && !cardLayout,
|
|
||||||
showTitle: true,
|
|
||||||
showParentTitle: true,
|
|
||||||
context: 'home',
|
|
||||||
lazy: true,
|
|
||||||
cardLayout: cardLayout,
|
|
||||||
showDetailsMenu: true
|
|
||||||
});
|
|
||||||
html += '</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
$(elem).html(html).lazyChildren().createCardMenus();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleLibraryLinkNavigations(elem) {
|
|
||||||
|
|
||||||
$('a.posterItem', elem).on('click', function () {
|
|
||||||
|
|
||||||
var textElem = $('.posterItemText span', this);
|
|
||||||
|
|
||||||
if (!textElem.length) {
|
|
||||||
textElem = $('.posterItemText', this);
|
|
||||||
}
|
|
||||||
var text = textElem.html();
|
|
||||||
|
|
||||||
LibraryMenu.setText(text);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadLatestChannelItems(elem, userId, options) {
|
|
||||||
|
|
||||||
options = $.extend(options || {}, {
|
|
||||||
|
|
||||||
UserId: userId,
|
|
||||||
SupportsLatestItems: true
|
|
||||||
});
|
|
||||||
|
|
||||||
return ApiClient.getJSON(ApiClient.getUrl("Channels", options)).done(function (result) {
|
|
||||||
|
|
||||||
var channels = result.Items;
|
|
||||||
|
|
||||||
var channelsHtml = channels.map(function (c) {
|
|
||||||
|
|
||||||
return '<div id="channel' + c.Id + '"></div>';
|
|
||||||
|
|
||||||
}).join('');
|
|
||||||
|
|
||||||
$(elem).html(channelsHtml);
|
|
||||||
|
|
||||||
for (var i = 0, length = channels.length; i < length; i++) {
|
|
||||||
|
|
||||||
var channel = channels[i];
|
|
||||||
|
|
||||||
loadLatestChannelItemsFromChannel(elem, channel, i);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadLatestChannelItemsFromChannel(page, channel, index) {
|
|
||||||
|
|
||||||
var screenWidth = $(window).width();
|
|
||||||
|
|
||||||
var options = {
|
|
||||||
|
|
||||||
Limit: screenWidth >= 1600 ? 10 : (screenWidth >= 1440 ? 5 : (screenWidth >= 800 ? 6 : 6)),
|
|
||||||
Fields: "PrimaryImageAspectRatio,SyncInfo",
|
|
||||||
Filters: "IsUnplayed",
|
|
||||||
UserId: Dashboard.getCurrentUserId(),
|
|
||||||
ChannelIds: channel.Id
|
|
||||||
};
|
|
||||||
|
|
||||||
ApiClient.getJSON(ApiClient.getUrl("Channels/Items/Latest", options)).done(function (result) {
|
|
||||||
|
|
||||||
var html = '';
|
|
||||||
|
|
||||||
if (result.Items.length) {
|
|
||||||
|
|
||||||
var cssClass = index !== 0 ? 'listHeader' : 'listHeader firstListHeader';
|
|
||||||
|
|
||||||
html += '<div>';
|
|
||||||
var text = Globalize.translate('HeaderLatestFromChannel').replace('{0}', channel.Name);
|
|
||||||
html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + text + '</h1>';
|
|
||||||
html += '<a href="channelitems.html?context=channels&id=' + channel.Id + '" data-role="button" data-icon="arrow-r" data-mini="true" data-inline="true" data-iconpos="notext" class="sectionHeaderButton"></a>';
|
|
||||||
html += '</div>';
|
|
||||||
}
|
|
||||||
html += '<div class="itemsContainer">';
|
|
||||||
html += LibraryBrowser.getPosterViewHtml({
|
|
||||||
items: result.Items,
|
|
||||||
shape: 'autohome',
|
|
||||||
defaultShape: 'square',
|
|
||||||
showTitle: true,
|
|
||||||
centerText: true,
|
|
||||||
context: 'channels',
|
|
||||||
lazy: true,
|
|
||||||
showDetailsMenu: true
|
|
||||||
});
|
|
||||||
html += '</div>';
|
|
||||||
|
|
||||||
$('#channel' + channel.Id + '', page).html(html).lazyChildren().trigger('create').createCardMenus();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadLatestLiveTvRecordings(elem, userId, index) {
|
|
||||||
|
|
||||||
return ApiClient.getLiveTvRecordings({
|
|
||||||
|
|
||||||
userId: userId,
|
|
||||||
limit: 5,
|
|
||||||
IsInProgress: false
|
|
||||||
|
|
||||||
}).done(function (result) {
|
|
||||||
|
|
||||||
var html = '';
|
|
||||||
|
|
||||||
if (result.Items.length) {
|
|
||||||
|
|
||||||
var cssClass = index !== 0 ? 'listHeader' : 'listHeader firstListHeader';
|
|
||||||
|
|
||||||
html += '<div>';
|
|
||||||
html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + Globalize.translate('HeaderLatestTvRecordings') + '</h1>';
|
|
||||||
html += '<a href="livetvrecordings.html?context=livetv" data-role="button" data-icon="arrow-r" data-mini="true" data-inline="true" data-iconpos="notext" class="sectionHeaderButton"></a>';
|
|
||||||
html += '</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
var screenWidth = $(window).width();
|
|
||||||
|
|
||||||
html += LibraryBrowser.getPosterViewHtml({
|
|
||||||
items: result.Items,
|
|
||||||
shape: "autohome",
|
|
||||||
showTitle: true,
|
|
||||||
showParentTitle: true,
|
|
||||||
overlayText: screenWidth >= 600,
|
|
||||||
coverImage: true,
|
|
||||||
lazy: true,
|
|
||||||
showDetailsMenu: true
|
|
||||||
});
|
|
||||||
|
|
||||||
elem.html(html).lazyChildren().trigger('create');
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
window.Sections = {
|
|
||||||
loadRecentlyAdded: loadRecentlyAdded,
|
|
||||||
loadLatestChannelMedia: loadLatestChannelMedia,
|
|
||||||
loadLibraryTiles: loadLibraryTiles,
|
|
||||||
loadResume: loadResume,
|
|
||||||
loadLatestChannelItems: loadLatestChannelItems,
|
|
||||||
loadLatestLiveTvRecordings: loadLatestLiveTvRecordings,
|
|
||||||
loadlibraryButtons: loadlibraryButtons
|
|
||||||
};
|
|
||||||
|
|
||||||
})(jQuery, document);
|
|
||||||
|
|
||||||
(function ($, document) {
|
|
||||||
|
|
||||||
var defaultFirstSection = 'smalllibrarytiles';
|
var defaultFirstSection = 'smalllibrarytiles';
|
||||||
|
|
||||||
function getDefaultSection(index) {
|
function getDefaultSection(index) {
|
||||||
|
|
|
||||||
460
dashboard-ui/scripts/sections.js
Normal file
460
dashboard-ui/scripts/sections.js
Normal file
|
|
@ -0,0 +1,460 @@
|
||||||
|
(function ($, document) {
|
||||||
|
|
||||||
|
function getUserViews(userId) {
|
||||||
|
|
||||||
|
var deferred = $.Deferred();
|
||||||
|
|
||||||
|
ApiClient.getUserViews(userId).done(function (result) {
|
||||||
|
|
||||||
|
var items = result.Items;
|
||||||
|
|
||||||
|
deferred.resolveWith(null, [items]);
|
||||||
|
});
|
||||||
|
|
||||||
|
return deferred.promise();
|
||||||
|
}
|
||||||
|
|
||||||
|
function enableScrollX() {
|
||||||
|
return $.browser.mobile && AppInfo.enableAppLayouts;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getThumbShape() {
|
||||||
|
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
|
||||||
|
}
|
||||||
|
|
||||||
|
function getLibraryButtonsHtml(items) {
|
||||||
|
|
||||||
|
var html = "";
|
||||||
|
|
||||||
|
// "My Library" backgrounds
|
||||||
|
for (var i = 0, length = items.length; i < length; i++) {
|
||||||
|
|
||||||
|
var item = items[i];
|
||||||
|
|
||||||
|
var icon;
|
||||||
|
var backgroundColor = 'rgba(82, 181, 75, 0.9)';
|
||||||
|
|
||||||
|
switch (item.CollectionType) {
|
||||||
|
case "movies":
|
||||||
|
icon = "fa-film";
|
||||||
|
backgroundColor = 'rgba(176, 94, 81, 0.9)';
|
||||||
|
break;
|
||||||
|
case "music":
|
||||||
|
icon = "fa-music";
|
||||||
|
backgroundColor = 'rgba(217, 145, 67, 0.9)';
|
||||||
|
break;
|
||||||
|
case "photos":
|
||||||
|
icon = "fa-photo";
|
||||||
|
backgroundColor = 'rgba(127, 0, 0, 0.9)';
|
||||||
|
break;
|
||||||
|
case "livetv":
|
||||||
|
icon = "fa-video-camera";
|
||||||
|
backgroundColor = 'rgba(217, 145, 67, 0.9)';
|
||||||
|
break;
|
||||||
|
case "tvshows":
|
||||||
|
icon = "fa-video-camera";
|
||||||
|
backgroundColor = 'rgba(77, 88, 164, 0.9)';
|
||||||
|
break;
|
||||||
|
case "games":
|
||||||
|
icon = "fa-gamepad";
|
||||||
|
backgroundColor = 'rgba(183, 202, 72, 0.9)';
|
||||||
|
break;
|
||||||
|
case "trailers":
|
||||||
|
icon = "fa-film";
|
||||||
|
backgroundColor = 'rgba(176, 94, 81, 0.9)';
|
||||||
|
break;
|
||||||
|
case "homevideos":
|
||||||
|
icon = "fa-video-camera";
|
||||||
|
backgroundColor = 'rgba(110, 52, 32, 0.9)';
|
||||||
|
break;
|
||||||
|
case "musicvideos":
|
||||||
|
icon = "fa-video-camera";
|
||||||
|
backgroundColor = 'rgba(143, 54, 168, 0.9)';
|
||||||
|
break;
|
||||||
|
case "books":
|
||||||
|
icon = "fa-book";
|
||||||
|
break;
|
||||||
|
case "channels":
|
||||||
|
icon = "fa-globe";
|
||||||
|
backgroundColor = 'rgba(51, 136, 204, 0.9)';
|
||||||
|
break;
|
||||||
|
case "playlists":
|
||||||
|
icon = "fa-list";
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
icon = "fa-folder-o";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
var cssClass = 'card smallBackdropCard buttonCard';
|
||||||
|
|
||||||
|
if (item.CollectionType) {
|
||||||
|
cssClass += ' ' + item.CollectionType + 'buttonCard';
|
||||||
|
}
|
||||||
|
|
||||||
|
var href = item.url || LibraryBrowser.getHref(item);
|
||||||
|
|
||||||
|
html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" href="' + href + '">';
|
||||||
|
html += '<div class="cardBox" style="background-color:' + backgroundColor + ';margin:4px;border-radius:4px;">';
|
||||||
|
|
||||||
|
html += "<div class='cardText' style='padding:8px 10px;color:#fff;font-size:14px;'>";
|
||||||
|
html += '<i class="fa ' + icon + '"></i>';
|
||||||
|
html += '<span style="margin-left:.7em;">' + item.Name + '</span>';
|
||||||
|
html += "</div>";
|
||||||
|
|
||||||
|
html += "</div>";
|
||||||
|
|
||||||
|
html += "</a>";
|
||||||
|
}
|
||||||
|
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadlibraryButtons(elem, userId, index) {
|
||||||
|
|
||||||
|
return getUserViews(userId).done(function (items) {
|
||||||
|
|
||||||
|
var html = '<br/>';
|
||||||
|
|
||||||
|
if (index) {
|
||||||
|
html += '<h1 class="listHeader">' + Globalize.translate('HeaderMyMedia') + '</h1>';
|
||||||
|
}
|
||||||
|
html += '<div>';
|
||||||
|
html += getLibraryButtonsHtml(items);
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
$(elem).html(html);
|
||||||
|
|
||||||
|
handleLibraryLinkNavigations(elem);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadRecentlyAdded(elem, user, context) {
|
||||||
|
|
||||||
|
var limit = AppInfo.hasLowImageBandwidth ?
|
||||||
|
16 :
|
||||||
|
24;
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
|
||||||
|
Limit: limit,
|
||||||
|
Fields: "PrimaryImageAspectRatio,SyncInfo",
|
||||||
|
ImageTypeLimit: 1,
|
||||||
|
EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
|
||||||
|
};
|
||||||
|
|
||||||
|
return ApiClient.getJSON(ApiClient.getUrl('Users/' + user.Id + '/Items/Latest', options)).done(function (items) {
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
var cardLayout = false;
|
||||||
|
|
||||||
|
if (items.length) {
|
||||||
|
html += '<div>';
|
||||||
|
html += '<h1 style="display:inline-block; vertical-align:middle;" class="listHeader">' + Globalize.translate('HeaderLatestMedia') + '</h1>';
|
||||||
|
|
||||||
|
if (user.Policy.EnableUserPreferenceAccess && !AppInfo.isNativeApp) {
|
||||||
|
html += '<a href="mypreferencesdisplay.html" class="accentButton"><i class="fa fa-pencil"></i>' + Globalize.translate('ButtonEdit') + '</a>';
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
html += '<div class="itemsContainer">';
|
||||||
|
|
||||||
|
html += LibraryBrowser.getPosterViewHtml({
|
||||||
|
items: items,
|
||||||
|
preferThumb: true,
|
||||||
|
shape: 'backdrop',
|
||||||
|
context: context || 'home',
|
||||||
|
showUnplayedIndicator: false,
|
||||||
|
showChildCountIndicator: true,
|
||||||
|
lazy: true,
|
||||||
|
cardLayout: cardLayout,
|
||||||
|
showTitle: cardLayout,
|
||||||
|
showYear: cardLayout,
|
||||||
|
showDetailsMenu: true
|
||||||
|
});
|
||||||
|
html += '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
$(elem).html(html).lazyChildren().createCardMenus();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadLatestChannelMedia(elem, userId) {
|
||||||
|
|
||||||
|
var screenWidth = $(window).width();
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
|
||||||
|
Limit: screenWidth >= 2400 ? 10 : (screenWidth >= 1600 ? 10 : (screenWidth >= 1440 ? 8 : (screenWidth >= 800 ? 7 : 6))),
|
||||||
|
Fields: "PrimaryImageAspectRatio,SyncInfo",
|
||||||
|
Filters: "IsUnplayed",
|
||||||
|
UserId: userId
|
||||||
|
};
|
||||||
|
|
||||||
|
return ApiClient.getJSON(ApiClient.getUrl("Channels/Items/Latest", options)).done(function (result) {
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
if (result.Items.length) {
|
||||||
|
html += '<h1 class="listHeader">' + Globalize.translate('HeaderLatestChannelMedia') + '</h1>';
|
||||||
|
html += '<div class="itemsContainer">';
|
||||||
|
html += LibraryBrowser.getPosterViewHtml({
|
||||||
|
items: result.Items,
|
||||||
|
preferThumb: true,
|
||||||
|
shape: 'auto',
|
||||||
|
showTitle: true,
|
||||||
|
centerText: true,
|
||||||
|
lazy: true,
|
||||||
|
showDetailsMenu: true
|
||||||
|
});
|
||||||
|
html += '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
$(elem).html(html).lazyChildren().createCardMenus();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadLibraryTiles(elem, user, shape, index, autoHideOnMobile, showTitles) {
|
||||||
|
|
||||||
|
return getUserViews(user.Id).done(function (items) {
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
if (autoHideOnMobile) {
|
||||||
|
html += '<div class="hiddenSectionOnMobile">';
|
||||||
|
} else {
|
||||||
|
html += '<div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (items.length) {
|
||||||
|
|
||||||
|
var cssClass = index !== 0 ? 'listHeader' : 'listHeader firstListHeader';
|
||||||
|
|
||||||
|
html += '<div>';
|
||||||
|
html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + Globalize.translate('HeaderMyMedia') + '</h1>';
|
||||||
|
|
||||||
|
if (user.Policy.EnableUserPreferenceAccess && !AppInfo.isNativeApp) {
|
||||||
|
html += '<a href="mypreferencesdisplay.html" class="accentButton"><i class="fa fa-pencil"></i>' + Globalize.translate('ButtonEdit') + '</a>';
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
html += '<div class="homeTopViews">';
|
||||||
|
html += LibraryBrowser.getPosterViewHtml({
|
||||||
|
items: items,
|
||||||
|
shape: shape,
|
||||||
|
showTitle: showTitles,
|
||||||
|
centerText: true,
|
||||||
|
lazy: true,
|
||||||
|
autoThumb: true
|
||||||
|
});
|
||||||
|
html += '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
if (autoHideOnMobile) {
|
||||||
|
html += '<div class="hiddenSectionOnNonMobile" style="margin-top:1em;">';
|
||||||
|
html += getLibraryButtonsHtml(items);
|
||||||
|
html += '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
$(elem).html(html).lazyChildren().createCardMenus({ showDetailsMenu: false });
|
||||||
|
|
||||||
|
handleLibraryLinkNavigations(elem);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadResume(elem, userId) {
|
||||||
|
|
||||||
|
var screenWidth = $(window).width();
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
|
||||||
|
SortBy: "DatePlayed",
|
||||||
|
SortOrder: "Descending",
|
||||||
|
MediaTypes: "Video",
|
||||||
|
Filters: "IsResumable",
|
||||||
|
Limit: screenWidth >= 1920 ? 10 : (screenWidth >= 1600 ? 8 : (screenWidth >= 1200 ? 9 : 6)),
|
||||||
|
Recursive: true,
|
||||||
|
Fields: "PrimaryImageAspectRatio,SyncInfo",
|
||||||
|
CollapseBoxSetItems: false,
|
||||||
|
ExcludeLocationTypes: "Virtual",
|
||||||
|
ImageTypeLimit: 1,
|
||||||
|
EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
|
||||||
|
};
|
||||||
|
|
||||||
|
return ApiClient.getItems(userId, options).done(function (result) {
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
var cardLayout = AppInfo.hasLowImageBandwidth;
|
||||||
|
|
||||||
|
if (result.Items.length) {
|
||||||
|
html += '<h1 class="listHeader">' + Globalize.translate('HeaderResume') + '</h1>';
|
||||||
|
if (enableScrollX()) {
|
||||||
|
html += '<div class="hiddenScrollX itemsContainer">';
|
||||||
|
} else {
|
||||||
|
html += '<div class="itemsContainer">';
|
||||||
|
}
|
||||||
|
html += LibraryBrowser.getPosterViewHtml({
|
||||||
|
items: result.Items,
|
||||||
|
preferThumb: true,
|
||||||
|
shape: getThumbShape(),
|
||||||
|
overlayText: screenWidth >= 800 && !cardLayout,
|
||||||
|
showTitle: true,
|
||||||
|
showParentTitle: true,
|
||||||
|
context: 'home',
|
||||||
|
lazy: true,
|
||||||
|
cardLayout: cardLayout,
|
||||||
|
showDetailsMenu: true
|
||||||
|
});
|
||||||
|
html += '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
$(elem).html(html).lazyChildren().createCardMenus();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleLibraryLinkNavigations(elem) {
|
||||||
|
|
||||||
|
$('a.posterItem', elem).on('click', function () {
|
||||||
|
|
||||||
|
var textElem = $('.posterItemText span', this);
|
||||||
|
|
||||||
|
if (!textElem.length) {
|
||||||
|
textElem = $('.posterItemText', this);
|
||||||
|
}
|
||||||
|
var text = textElem.html();
|
||||||
|
|
||||||
|
LibraryMenu.setText(text);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadLatestChannelItems(elem, userId, options) {
|
||||||
|
|
||||||
|
options = $.extend(options || {}, {
|
||||||
|
|
||||||
|
UserId: userId,
|
||||||
|
SupportsLatestItems: true
|
||||||
|
});
|
||||||
|
|
||||||
|
return ApiClient.getJSON(ApiClient.getUrl("Channels", options)).done(function (result) {
|
||||||
|
|
||||||
|
var channels = result.Items;
|
||||||
|
|
||||||
|
var channelsHtml = channels.map(function (c) {
|
||||||
|
|
||||||
|
return '<div id="channel' + c.Id + '"></div>';
|
||||||
|
|
||||||
|
}).join('');
|
||||||
|
|
||||||
|
$(elem).html(channelsHtml);
|
||||||
|
|
||||||
|
for (var i = 0, length = channels.length; i < length; i++) {
|
||||||
|
|
||||||
|
var channel = channels[i];
|
||||||
|
|
||||||
|
loadLatestChannelItemsFromChannel(elem, channel, i);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadLatestChannelItemsFromChannel(page, channel, index) {
|
||||||
|
|
||||||
|
var screenWidth = $(window).width();
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
|
||||||
|
Limit: screenWidth >= 1600 ? 10 : (screenWidth >= 1440 ? 5 : (screenWidth >= 800 ? 6 : 6)),
|
||||||
|
Fields: "PrimaryImageAspectRatio,SyncInfo",
|
||||||
|
Filters: "IsUnplayed",
|
||||||
|
UserId: Dashboard.getCurrentUserId(),
|
||||||
|
ChannelIds: channel.Id
|
||||||
|
};
|
||||||
|
|
||||||
|
ApiClient.getJSON(ApiClient.getUrl("Channels/Items/Latest", options)).done(function (result) {
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
if (result.Items.length) {
|
||||||
|
|
||||||
|
var cssClass = index !== 0 ? 'listHeader' : 'listHeader firstListHeader';
|
||||||
|
|
||||||
|
html += '<div>';
|
||||||
|
var text = Globalize.translate('HeaderLatestFromChannel').replace('{0}', channel.Name);
|
||||||
|
html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + text + '</h1>';
|
||||||
|
html += '<a href="channelitems.html?context=channels&id=' + channel.Id + '" data-role="button" data-icon="arrow-r" data-mini="true" data-inline="true" data-iconpos="notext" class="sectionHeaderButton"></a>';
|
||||||
|
html += '</div>';
|
||||||
|
}
|
||||||
|
html += '<div class="itemsContainer">';
|
||||||
|
html += LibraryBrowser.getPosterViewHtml({
|
||||||
|
items: result.Items,
|
||||||
|
shape: 'autohome',
|
||||||
|
defaultShape: 'square',
|
||||||
|
showTitle: true,
|
||||||
|
centerText: true,
|
||||||
|
context: 'channels',
|
||||||
|
lazy: true,
|
||||||
|
showDetailsMenu: true
|
||||||
|
});
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
$('#channel' + channel.Id + '', page).html(html).lazyChildren().trigger('create').createCardMenus();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadLatestLiveTvRecordings(elem, userId, index) {
|
||||||
|
|
||||||
|
return ApiClient.getLiveTvRecordings({
|
||||||
|
|
||||||
|
userId: userId,
|
||||||
|
limit: 5,
|
||||||
|
IsInProgress: false
|
||||||
|
|
||||||
|
}).done(function (result) {
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
if (result.Items.length) {
|
||||||
|
|
||||||
|
var cssClass = index !== 0 ? 'listHeader' : 'listHeader firstListHeader';
|
||||||
|
|
||||||
|
html += '<div>';
|
||||||
|
html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + Globalize.translate('HeaderLatestTvRecordings') + '</h1>';
|
||||||
|
html += '<a href="livetvrecordings.html?context=livetv" data-role="button" data-icon="arrow-r" data-mini="true" data-inline="true" data-iconpos="notext" class="sectionHeaderButton"></a>';
|
||||||
|
html += '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
var screenWidth = $(window).width();
|
||||||
|
|
||||||
|
html += LibraryBrowser.getPosterViewHtml({
|
||||||
|
items: result.Items,
|
||||||
|
shape: "autohome",
|
||||||
|
showTitle: true,
|
||||||
|
showParentTitle: true,
|
||||||
|
overlayText: screenWidth >= 600,
|
||||||
|
coverImage: true,
|
||||||
|
lazy: true,
|
||||||
|
showDetailsMenu: true
|
||||||
|
});
|
||||||
|
|
||||||
|
elem.html(html).lazyChildren().trigger('create');
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
window.Sections = {
|
||||||
|
loadRecentlyAdded: loadRecentlyAdded,
|
||||||
|
loadLatestChannelMedia: loadLatestChannelMedia,
|
||||||
|
loadLibraryTiles: loadLibraryTiles,
|
||||||
|
loadResume: loadResume,
|
||||||
|
loadLatestChannelItems: loadLatestChannelItems,
|
||||||
|
loadLatestLiveTvRecordings: loadLatestLiveTvRecordings,
|
||||||
|
loadlibraryButtons: loadlibraryButtons
|
||||||
|
};
|
||||||
|
|
||||||
|
})(jQuery, document);
|
||||||
Loading…
Add table
Add a link
Reference in a new issue