mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update tv view
This commit is contained in:
parent
e73b3a1603
commit
464dca5b92
5 changed files with 104 additions and 119 deletions
|
@ -75,7 +75,7 @@
|
|||
|
||||
function loadResume(page, userId, parentId) {
|
||||
|
||||
var screenWidth = $(window).width();
|
||||
var screenWidth = window.innerWidth;
|
||||
|
||||
var options = {
|
||||
|
||||
|
@ -83,7 +83,7 @@
|
|||
SortOrder: "Descending",
|
||||
IncludeItemTypes: "Movie",
|
||||
Filters: "IsResumable",
|
||||
Limit: screenWidth >= 1920 ? 6 : (screenWidth >= 1600 ? 4 : 3),
|
||||
Limit: screenWidth >= 1920 ? 5 : (screenWidth >= 1600 ? 4 : 3),
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio,MediaSourceCount,SyncInfo",
|
||||
CollapseBoxSetItems: false,
|
||||
|
|
|
@ -1,81 +0,0 @@
|
|||
define([], function () {
|
||||
|
||||
function getView() {
|
||||
|
||||
return 'Thumb';
|
||||
}
|
||||
|
||||
function loadLatest(context, params) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var userId = Dashboard.getCurrentUserId();
|
||||
|
||||
var parentId = params.topParentId;
|
||||
|
||||
var options = {
|
||||
|
||||
IncludeItemTypes: "Episode",
|
||||
Limit: 30,
|
||||
Fields: "PrimaryImageAspectRatio,SyncInfo",
|
||||
ParentId: parentId,
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
|
||||
};
|
||||
|
||||
ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
|
||||
|
||||
var view = getView();
|
||||
var html = '';
|
||||
|
||||
if (view == 'ThumbCard') {
|
||||
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
items: items,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
inheritThumb: false,
|
||||
showUnplayedIndicator: false,
|
||||
showChildCountIndicator: true,
|
||||
overlayText: false,
|
||||
showParentTitle: true,
|
||||
lazy: true,
|
||||
showTitle: true,
|
||||
cardLayout: true
|
||||
});
|
||||
|
||||
} else if (view == 'Thumb') {
|
||||
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
items: items,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
inheritThumb: false,
|
||||
showParentTitle: false,
|
||||
showUnplayedIndicator: false,
|
||||
showChildCountIndicator: true,
|
||||
overlayText: false,
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
showTitle: false,
|
||||
overlayPlayButton: AppInfo.enableAppLayouts
|
||||
});
|
||||
}
|
||||
|
||||
var elem = context.querySelector('#latestEpisodes');
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
return function (view, params, tabContent) {
|
||||
|
||||
var self = this;
|
||||
|
||||
self.renderTab = function() {
|
||||
|
||||
loadLatest(tabContent, params);
|
||||
};
|
||||
};
|
||||
});
|
|
@ -20,13 +20,79 @@
|
|||
|
||||
loadResume();
|
||||
loadNextUp();
|
||||
loadLatest();
|
||||
}
|
||||
|
||||
function loadLatest() {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var userId = Dashboard.getCurrentUserId();
|
||||
|
||||
var parentId = params.topParentId;
|
||||
|
||||
var options = {
|
||||
|
||||
IncludeItemTypes: "Episode",
|
||||
Limit: 30,
|
||||
Fields: "PrimaryImageAspectRatio,SyncInfo",
|
||||
ParentId: parentId,
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
|
||||
};
|
||||
|
||||
ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
|
||||
|
||||
var viewStyle = getView();
|
||||
var html = '';
|
||||
|
||||
if (viewStyle == 'ThumbCard') {
|
||||
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
items: items,
|
||||
shape: getThumbShape(),
|
||||
preferThumb: true,
|
||||
inheritThumb: false,
|
||||
showUnplayedIndicator: false,
|
||||
showChildCountIndicator: true,
|
||||
overlayText: false,
|
||||
showParentTitle: true,
|
||||
lazy: true,
|
||||
showTitle: true,
|
||||
cardLayout: true
|
||||
});
|
||||
|
||||
} else if (viewStyle == 'Thumb') {
|
||||
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
items: items,
|
||||
shape: getThumbShape(),
|
||||
preferThumb: true,
|
||||
inheritThumb: false,
|
||||
showParentTitle: false,
|
||||
showUnplayedIndicator: false,
|
||||
showChildCountIndicator: true,
|
||||
overlayText: false,
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
showTitle: false,
|
||||
overlayPlayButton: AppInfo.enableAppLayouts
|
||||
});
|
||||
}
|
||||
|
||||
var elem = view.querySelector('#latestEpisodes');
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
|
||||
function loadNextUp() {
|
||||
|
||||
var query = {
|
||||
|
||||
Limit: 24,
|
||||
Limit: enableScrollX() ? 24 : 15,
|
||||
Fields: "PrimaryImageAspectRatio,SeriesInfo,DateCreated,SyncInfo",
|
||||
UserId: Dashboard.getCurrentUserId(),
|
||||
ImageTypeLimit: 1,
|
||||
|
@ -50,7 +116,7 @@
|
|||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
shape: getThumbShape(),
|
||||
showTitle: true,
|
||||
preferThumb: true,
|
||||
showParentTitle: true,
|
||||
|
@ -63,7 +129,7 @@
|
|||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
shape: getThumbShape(),
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
overlayText: false,
|
||||
|
@ -94,7 +160,7 @@
|
|||
|
||||
var parentId = LibraryMenu.getTopParentId();
|
||||
|
||||
var limit = 6;
|
||||
var screenWidth = window.innerWidth;
|
||||
|
||||
var options = {
|
||||
|
||||
|
@ -102,7 +168,7 @@
|
|||
SortOrder: "Descending",
|
||||
IncludeItemTypes: "Episode",
|
||||
Filters: "IsResumable",
|
||||
Limit: limit,
|
||||
Limit: screenWidth >= 1920 ? 5 : (screenWidth >= 1600 ? 4 : 3),
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio,SeriesInfo,UserData,SyncInfo",
|
||||
ExcludeLocationTypes: "Virtual",
|
||||
|
@ -160,12 +226,23 @@
|
|||
self.initTab = function () {
|
||||
|
||||
var tabContent = self.tabContent;
|
||||
|
||||
var resumableItems = tabContent.querySelector('#resumableItems');
|
||||
var nextUpItems = tabContent.querySelector('#nextUpItems');
|
||||
var latestEpisodes = tabContent.querySelector('#latestEpisodes');
|
||||
|
||||
if (enableScrollX()) {
|
||||
tabContent.querySelector('#resumableItems').classList.add('hiddenScrollX');
|
||||
resumableItems.classList.add('hiddenScrollX');
|
||||
nextUpItems.classList.add('hiddenScrollX');
|
||||
latestEpisodes.classList.add('hiddenScrollX');
|
||||
} else {
|
||||
tabContent.querySelector('#resumableItems').classList.remove('hiddenScrollX');
|
||||
resumableItems.classList.remove('hiddenScrollX');
|
||||
nextUpItems.classList.remove('hiddenScrollX');
|
||||
latestEpisodes.classList.remove('hiddenScrollX');
|
||||
}
|
||||
libraryBrowser.createCardMenus(tabContent.querySelector('#resumableItems'));
|
||||
libraryBrowser.createCardMenus(resumableItems);
|
||||
libraryBrowser.createCardMenus(nextUpItems);
|
||||
libraryBrowser.createCardMenus(latestEpisodes);
|
||||
};
|
||||
|
||||
self.renderTab = function () {
|
||||
|
@ -185,21 +262,18 @@
|
|||
case 0:
|
||||
break;
|
||||
case 1:
|
||||
depends.push('scripts/tvlatest');
|
||||
break;
|
||||
case 2:
|
||||
depends.push('scripts/tvupcoming');
|
||||
break;
|
||||
case 3:
|
||||
case 2:
|
||||
depends.push('scripts/tvshows');
|
||||
break;
|
||||
case 4:
|
||||
case 3:
|
||||
depends.push('scripts/episodes');
|
||||
break;
|
||||
case 5:
|
||||
case 4:
|
||||
depends.push('scripts/tvgenres');
|
||||
break;
|
||||
case 6:
|
||||
case 5:
|
||||
depends.push('scripts/tvstudios');
|
||||
break;
|
||||
default:
|
||||
|
@ -248,11 +322,6 @@
|
|||
baseUrl += '?topParentId=' + topParentId;
|
||||
}
|
||||
|
||||
if (enableScrollX()) {
|
||||
view.querySelector('#resumableItems').classList.add('hiddenScrollX');
|
||||
} else {
|
||||
view.querySelector('#resumableItems').classList.remove('hiddenScrollX');
|
||||
}
|
||||
libraryBrowser.createCardMenus(view.querySelector('#resumableItems'));
|
||||
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs, view.querySelectorAll('.pageTabContent'), [0, 1, 2, 4, 5, 6]);
|
||||
|
||||
|
|
|
@ -39,7 +39,7 @@
|
|||
color: #52B54B;
|
||||
}
|
||||
|
||||
paper-button[raised].submit {
|
||||
paper-button[raised].submit, paper-button[raised] {
|
||||
background: #52B54B;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
@ -2,12 +2,11 @@
|
|||
|
||||
<div class="libraryViewNav">
|
||||
<button class="pageTabButton is-active" data-index="0">${TabSuggestions}</button>
|
||||
<button class="pageTabButton" data-index="1">${TabLatest}</button>
|
||||
<button class="pageTabButton" data-index="2">${TabUpcoming}</button>
|
||||
<button class="pageTabButton" data-index="3">${TabShows}</button>
|
||||
<button class="pageTabButton tvEpisodesTab" data-index="4">${TabEpisodes}</button>
|
||||
<button class="pageTabButton" data-index="5">${TabGenres}</button>
|
||||
<button class="pageTabButton" data-index="6">${TabNetworks}</button>
|
||||
<button class="pageTabButton" data-index="1">${TabUpcoming}</button>
|
||||
<button class="pageTabButton" data-index="2">${TabShows}</button>
|
||||
<button class="pageTabButton tvEpisodesTab" data-index="3">${TabEpisodes}</button>
|
||||
<button class="pageTabButton" data-index="4">${TabGenres}</button>
|
||||
<button class="pageTabButton" data-index="5">${TabNetworks}</button>
|
||||
</div>
|
||||
<div class="is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
|
||||
<div id="resumableSection" class="homePageSection">
|
||||
|
@ -25,22 +24,20 @@
|
|||
<h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
|
||||
<paper-button raised class="submit mini categorySyncButton" data-category="NextUp"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
|
||||
</div>
|
||||
<div id="nextUpItems" class="itemsContainer">
|
||||
<div id="nextUpItems" class="itemsContainer noautoinit">
|
||||
</div>
|
||||
</div>
|
||||
<p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
|
||||
</div>
|
||||
<div class="pageTabContent ehsContent" id="latestTab" data-index="1">
|
||||
<div class="homePageSection">
|
||||
<div>
|
||||
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestEpisodes}</h1>
|
||||
<paper-button raised class="submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
|
||||
</div>
|
||||
<div id="latestEpisodes" class="itemsContainer">
|
||||
<div id="latestEpisodes" class="itemsContainer noautoinit">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pageTabContent ehsContent" id="upcomingTab" data-index="2">
|
||||
<div class="pageTabContent ehsContent" id="upcomingTab" data-index="1">
|
||||
<div id="upcomingItems">
|
||||
</div>
|
||||
<div class="noItemsMessage" style="display: none;">
|
||||
|
@ -50,7 +47,7 @@
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pageTabContent ehsContent" id="seriesTab" data-index="3">
|
||||
<div class="pageTabContent ehsContent" id="seriesTab" data-index="2">
|
||||
<div style="text-align: center;padding:.7em 0;">
|
||||
<div style="text-align: center; display: flex; align-items: center; justify-content: center;">
|
||||
<div class="paging"></div>
|
||||
|
@ -69,7 +66,7 @@
|
|||
<div class="paging"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pageTabContent ehsContent" id="episodesTab" data-index="4">
|
||||
<div class="pageTabContent ehsContent" id="episodesTab" data-index="3">
|
||||
<div style="text-align: center; display: flex; align-items: center; justify-content: center;">
|
||||
<div class="paging"></div>
|
||||
<button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
|
||||
|
@ -82,13 +79,13 @@
|
|||
<div class="paging"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pageTabContent ehsContent" id="genresTab" data-index="5">
|
||||
<div class="pageTabContent ehsContent" id="genresTab" data-index="4">
|
||||
<div style="text-align: center; display: flex; align-items: center; justify-content: center;">
|
||||
<button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
|
||||
</div>
|
||||
<div id="items" class="itemsContainer paddedItemsContainer"></div>
|
||||
</div>
|
||||
<div class="pageTabContent ehsContent" id="studiosTab" data-index="6">
|
||||
<div class="pageTabContent ehsContent" id="studiosTab" data-index="5">
|
||||
<div class="viewSettings">
|
||||
<div class="listTopPaging">
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue