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

rework genre views

Browse source
This commit is contained in:
Luke Pulverenti 2016-11-15 14:42:43 -05:00
parent 28dbf41487
commit 0dacc82ab7
20 changed files with 541 additions and 380 deletions
Download patch file Download diff file Expand all files Collapse all files

116
dashboard-ui/scripts/moviegenres.js
View file

@ -1,4 +1,4 @@
define(['libraryBrowser', 'cardBuilder'], function (libraryBrowser, cardBuilder) {
define(['libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost'], function (libraryBrowser, cardBuilder, lazyLoader, appHost) {
'use strict';
return function (view, params, tabContent) {
@ -17,10 +17,9 @@
SortOrder: "Ascending",
IncludeItemTypes: "Movie",
Recursive: true,
Fields: "DateCreated,ItemCounts,PrimaryImageAspectRatio",
StartIndex: 0
EnableTotalRecordCount: false
},
view: libraryBrowser.getSavedView(key) || 'Thumb'
view: libraryBrowser.getSavedView(key) || 'PosterCard'
};
pageData.query.ParentId = params.topParentId;
@ -36,7 +35,7 @@
function getSavedQueryKey() {
return libraryBrowser.getSavedQueryKey('genres');
return libraryBrowser.getSavedQueryKey('moviegenres');
}
function getPromise() {
@ -47,65 +46,136 @@
return ApiClient.getGenres(Dashboard.getCurrentUserId(), query);
}
function reloadItems(context, promise) {
function enableScrollX() {
return browserInfo.mobile && AppInfo.enableAppLayouts;
}
var query = getQuery();
function getThumbShape() {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}
promise.then(function (result) {
function getPortraitShape() {
return enableScrollX() ? 'overflowPortrait' : 'portrait';
}
function fillItemsContainer(elem) {
var html = '';
var id = elem.getAttribute('data-id');
var viewStyle = self.getCurrentViewStyle();
var elem = context.querySelector('#items');
var viewStyle = self.getCurrentViewStyle();
var limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ?
5 :
8;
var enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ?
"Primary,Backdrop,Thumb" :
"Primary";
var query = {
SortBy: "SortName",
SortOrder: "Ascending",
IncludeItemTypes: "Movie",
Recursive: true,
Fields: "PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo",
ImageTypeLimit: 1,
EnableImageTypes: enableImageTypes,
Limit: limit,
GenreIds: id,
EnableTotalRecordCount: false
};
ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
var supportsImageAnalysis = appHost.supports('imageanalysis');
if (viewStyle == "Thumb") {
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "backdrop",
shape: getThumbShape(),
preferThumb: true,
showTitle: true,
scalable: true,
showItemCounts: true,
centerText: true,
overlayMoreButton: true
overlayMoreButton: true,
allowBottomPadding: false
});
}
else if (viewStyle == "ThumbCard") {
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "backdrop",
shape: getThumbShape(),
preferThumb: true,
showTitle: true,
scalable: true,
showItemCounts: true,
centerText: false,
cardLayout: true
cardLayout: true,
vibrant: supportsImageAnalysis,
showYear: true
});
}
else if (viewStyle == "PosterCard") {
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "auto",
shape: getPortraitShape(),
showTitle: true,
scalable: true,
showItemCounts: true,
centerText: false,
cardLayout: true
cardLayout: true,
vibrant: supportsImageAnalysis,
showYear: true
});
}
else if (viewStyle == "Poster") {
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "auto",
shape: getPortraitShape(),
showTitle: true,
scalable: true,
showItemCounts: true,
centerText: true,
overlayMoreButton: true
overlayMoreButton: true,
allowBottomPadding: false
});
}
});
}
function reloadItems(context, promise) {
var query = getQuery();
promise.then(function (result) {
var elem = context.querySelector('#items');
var html = '';
var items = result.Items;
for (var i = 0, length = items.length; i < length; i++) {
var item = items[i];
html += '<div class="homePageSection">';
html += '<h1 class="listHeader">';
html += item.Name;
html += '</h1>';
if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX lazy" data-id="' + item.Id + '">';
} else {
html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap lazy" data-id="' + item.Id + '">';
}
html += '</div>';
html += '</div>';
}
elem.innerHTML = html;
lazyLoader.lazyChildren(elem, fillItemsContainer);
libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
Dashboard.hideLoadingMsg();

2
dashboard-ui/scripts/sections.js
View file

@ -299,7 +299,7 @@
showUnplayedIndicator: false,
showChildCountIndicator: true,
context: 'home',
overlayText: !cardLayout,
overlayText: false,
centerText: !cardLayout,
overlayPlayButton: viewType !== 'photos',
allowBottomPadding: !enableScrollX() && !cardLayout,

1
dashboard-ui/scripts/site.js
View file

@ -1222,6 +1222,7 @@ var AppInfo = {};
define("libjass", [bowerPath + "/libjass/libjass.min", "css!" + bowerPath + "/libjass/libjass"], returnFirstDependency);
define("lazyLoader", [embyWebComponentsBowerPath + "/images/lazyloader"], returnFirstDependency);
define("imageLoader", [embyWebComponentsBowerPath + "/images/imagehelper"], returnFirstDependency);
define("syncJobList", ["components/syncjoblist/syncjoblist"], returnFirstDependency);
define("appfooter", ["components/appfooter/appfooter"], returnFirstDependency);

116
dashboard-ui/scripts/tvgenres.js
View file

@ -1,4 +1,4 @@
define(['libraryBrowser', 'cardBuilder'], function (libraryBrowser, cardBuilder) {
define(['libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost'], function (libraryBrowser, cardBuilder, lazyLoader, appHost) {
'use strict';
return function (view, params, tabContent) {
@ -17,10 +17,9 @@
SortOrder: "Ascending",
IncludeItemTypes: "Series",
Recursive: true,
Fields: "DateCreated,ItemCounts,PrimaryImageAspectRatio",
StartIndex: 0
EnableTotalRecordCount: false
},
view: libraryBrowser.getSavedView(key) || 'Thumb'
view: libraryBrowser.getSavedView(key) || 'PosterCard'
};
pageData.query.ParentId = params.topParentId;
@ -36,7 +35,7 @@
function getSavedQueryKey() {
return libraryBrowser.getSavedQueryKey('genres');
return libraryBrowser.getSavedQueryKey('seriesgenres');
}
function getPromise() {
@ -47,65 +46,136 @@
return ApiClient.getGenres(Dashboard.getCurrentUserId(), query);
}
function reloadItems(context, promise) {
function enableScrollX() {
return browserInfo.mobile && AppInfo.enableAppLayouts;
}
var query = getQuery();
function getThumbShape() {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}
promise.then(function (result) {
function getPortraitShape() {
return enableScrollX() ? 'overflowPortrait' : 'portrait';
}
function fillItemsContainer(elem) {
var html = '';
var id = elem.getAttribute('data-id');
var viewStyle = self.getCurrentViewStyle();
var elem = context.querySelector('#items');
var viewStyle = self.getCurrentViewStyle();
var limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ?
5 :
8;
var enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ?
"Primary,Backdrop,Thumb" :
"Primary";
var query = {
SortBy: "SortName",
SortOrder: "Ascending",
IncludeItemTypes: "Series",
Recursive: true,
Fields: "PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo",
ImageTypeLimit: 1,
EnableImageTypes: enableImageTypes,
Limit: limit,
GenreIds: id,
EnableTotalRecordCount: false
};
ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
var supportsImageAnalysis = appHost.supports('imageanalysis');
if (viewStyle == "Thumb") {
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "backdrop",
shape: getThumbShape(),
preferThumb: true,
showTitle: true,
scalable: true,
showItemCounts: true,
centerText: true,
overlayMoreButton: true
overlayMoreButton: true,
allowBottomPadding: false
});
}
else if (viewStyle == "ThumbCard") {
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "backdrop",
shape: getThumbShape(),
preferThumb: true,
showTitle: true,
scalable: true,
showItemCounts: true,
centerText: false,
cardLayout: true
cardLayout: true,
vibrant: supportsImageAnalysis,
showYear: true
});
}
else if (viewStyle == "PosterCard") {
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "auto",
shape: getPortraitShape(),
showTitle: true,
scalable: true,
showItemCounts: true,
centerText: false,
cardLayout: true
cardLayout: true,
vibrant: supportsImageAnalysis,
showYear: true
});
}
else if (viewStyle == "Poster") {
cardBuilder.buildCards(result.Items, {
itemsContainer: elem,
shape: "auto",
shape: getPortraitShape(),
showTitle: true,
scalable: true,
showItemCounts: true,
centerText: true,
overlayMoreButton: true
overlayMoreButton: true,
allowBottomPadding: false
});
}
});
}
function reloadItems(context, promise) {
var query = getQuery();
promise.then(function (result) {
var elem = context.querySelector('#items');
var html = '';
var items = result.Items;
for (var i = 0, length = items.length; i < length; i++) {
var item = items[i];
html += '<div class="homePageSection">';
html += '<h1 class="listHeader">';
html += item.Name;
html += '</h1>';
if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX lazy" data-id="' + item.Id + '">';
} else {
html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap lazy" data-id="' + item.Id + '">';
}
html += '</div>';
html += '</div>';
}
elem.innerHTML = html;
lazyLoader.lazyChildren(elem, fillItemsContainer);
libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
Dashboard.hideLoadingMsg();

8
dashboard-ui/scripts/tvrecommended.js
View file

@ -159,14 +159,14 @@
depends.push('scripts/tvshows');
break;
case 4:
depends.push('scripts/episodes');
break;
case 5:
depends.push('scripts/tvgenres');
break;
case 6:
case 5:
depends.push('scripts/tvstudios');
break;
case 6:
depends.push('scripts/episodes');
break;
default:
break;
}

18
dashboard-ui/scripts/tvshows.js
View file

@ -1,4 +1,4 @@
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'apphost', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, appHost) {
define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'apphost', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView, cardBuilder, appHost) {
'use strict';
return function (view, params, tabContent) {
@ -220,26 +220,10 @@
function updateFilterControls(tabContent) {
var query = getQuery(tabContent);
self.alphaPicker.value(query.NameStartsWithOrGreater);
}
function initPage(tabContent) {
var alphaPickerElement = tabContent.querySelector('.alphaPicker');
alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
var newValue = e.detail.value;
var query = getQuery(tabContent);
query.NameStartsWithOrGreater = newValue;
query.StartIndex = 0;
reloadItems(tabContent);
});
self.alphaPicker = new alphaPicker({
element: alphaPickerElement,
valueChangeEvent: 'click'
});
tabContent.querySelector('.btnFilter').addEventListener('click', function () {
self.showFilterMenu();
});