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 movie tabs

Browse source
This commit is contained in:
Luke Pulverenti 2016-04-03 14:47:49 -04:00
parent 98fbc2497c
commit 746135c2f7
8 changed files with 651 additions and 662 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dashboard-ui/movies.html
View file

@ -1,4 +1,4 @@
<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage pageWithAbsoluteTabs collectionEditorPage" data-backdroptype="movie" data-require="scripts/moviesrecommended,paper-tabs,paper-checkbox,paper-fab,scripts/alphapicker">
<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage pageWithAbsoluteTabs collectionEditorPage" data-backdroptype="movie">
<div class="libraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink>

24
dashboard-ui/scripts/moviecollections.js
View file

@ -71,13 +71,10 @@
if (result.TotalRecordCount) {
var context = getParameterByName('context');
if (view == "List") {
html = LibraryBrowser.getListViewHtml({
items: result.Items,
context: context,
sortBy: query.SortBy
});
}
@ -85,7 +82,6 @@
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "auto",
context: context,
showTitle: true,
centerText: true,
lazy: true,
@ -96,7 +92,6 @@
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "auto",
context: context,
showTitle: true,
cardLayout: true,
lazy: true,
@ -107,7 +102,6 @@
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
context: context,
showTitle: true,
centerText: true,
lazy: true,
@ -119,7 +113,6 @@
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
context: context,
showTitle: true,
lazy: true,
preferThumb: true,
@ -223,16 +216,19 @@
});
window.MoviesPage = window.MoviesPage || {};
window.MoviesPage.renderCollectionsTab = function (page, tabContent) {
return function (view, params, tabContent) {
if (LibraryBrowser.needsRefresh(tabContent)) {
reloadItems(tabContent);
}
};
window.MoviesPage.initCollectionsTab = function (page, tabContent) {
var self = this;
self.initTab = function () {
initPage(tabContent);
};
self.renderTab = function () {
reloadItems(tabContent);
};
};
});

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

@ -1,5 +1,9 @@
define(['jQuery'], function ($) {
return function (view, params, tabContent) {
var self = this;
var data = {};
function getPageData() {
var key = getSavedQueryKey();
@ -19,7 +23,7 @@
view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
};
pageData.query.ParentId = LibraryMenu.getTopParentId();
pageData.query.ParentId = params.topParentId;
LibraryBrowser.loadSavedQueryValues(key, pageData.query);
}
return pageData;
@ -35,11 +39,11 @@
return LibraryBrowser.getSavedQueryKey('genres');
}
function reloadItems(page) {
function reloadItems(context) {
Dashboard.showLoadingMsg();
var query = getQuery();
ApiClient.getGenres(Dashboard.getCurrentUserId(), query).then(function (result) {
// Scroll back up so they can see the results from the beginning
@ -47,8 +51,9 @@
var html = '';
var view = getPageData().view;
$('.listTopPaging', page).html(LibraryBrowser.getQueryPagingHtml({
var viewStyle = getPageData().view;
$('.listTopPaging', context).html(LibraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex,
limit: query.Limit,
totalRecordCount: result.TotalRecordCount,
@ -56,58 +61,46 @@
showLimit: false,
updatePageSizeSetting: false,
addLayoutButton: true,
currentLayout: view
currentLayout: viewStyle
}));
if (view == "List") {
html = LibraryBrowser.getListViewHtml({
items: result.Items,
sortBy: query.SortBy
});
}
else if (view == "Thumb") {
if (viewStyle == "Thumb") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
preferThumb: true,
context: 'movies',
showItemCounts: true,
centerText: true,
lazy: true,
overlayPlayButton: true
});
}
else if (view == "ThumbCard") {
else if (viewStyle == "ThumbCard") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
preferThumb: true,
context: 'movies',
showItemCounts: true,
cardLayout: true,
showTitle: true,
lazy: true
});
}
else if (view == "PosterCard") {
else if (viewStyle == "PosterCard") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "portrait",
context: 'movies',
showItemCounts: true,
lazy: true,
cardLayout: true,
showTitle: true
});
}
else if (view == "Poster") {
else if (viewStyle == "Poster") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "portrait",
context: 'movies',
centerText: true,
showItemCounts: true,
lazy: true,
@ -115,24 +108,24 @@
});
}
var elem = page.querySelector('.itemsContainer');
var elem = context.querySelector('.itemsContainer');
elem.innerHTML = html;
ImageLoader.lazyChildren(elem);
$('.btnNextPage', page).on('click', function () {
$('.btnNextPage', context).on('click', function () {
query.StartIndex += query.Limit;
reloadItems(page);
reloadItems(context);
});
$('.btnPreviousPage', page).on('click', function () {
$('.btnPreviousPage', context).on('click', function () {
query.StartIndex -= query.Limit;
reloadItems(page);
reloadItems(context);
});
$('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
$('.btnChangeLayout', context).on('layoutchange', function (e, layout) {
getPageData().view = layout;
LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
reloadItems(page);
reloadItems(context);
});
LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
@ -140,12 +133,9 @@
Dashboard.hideLoadingMsg();
});
}
self.renderTab = function () {
window.MoviesPage.renderGenresTab = function (page, tabContent) {
if (LibraryBrowser.needsRefresh(tabContent)) {
reloadItems(tabContent);
}
};
};
});

13
dashboard-ui/scripts/movies.js
View file

@ -1,5 +1,9 @@
define(['jQuery'], function ($) {
return function (view, params, tabContent) {
var self = this;
var data = {};
function getPageData(context) {
@ -22,7 +26,7 @@
view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Poster', 'Poster')
};
pageData.query.ParentId = LibraryMenu.getTopParentId();
pageData.query.ParentId = params.topParentId;
LibraryBrowser.loadSavedQueryValues(key, pageData.query);
}
return pageData;
@ -295,17 +299,16 @@
});
}
window.MoviesPage.initMoviesTab = function (page, tabContent) {
self.initTab = function () {
initPage(tabContent);
};
window.MoviesPage.renderMoviesTab = function (page, tabContent) {
self.renderTab = function () {
if (LibraryBrowser.needsRefresh(tabContent)) {
reloadItems(tabContent);
updateFilterControls(tabContent);
}
};
};
});

246
dashboard-ui/scripts/moviesrecommended.js
View file

@ -1,4 +1,4 @@
define(['jQuery'], function ($) {
define(['jQuery', 'libraryBrowser'], function ($, libraryBrowser) {
function getView() {
@ -43,7 +43,7 @@
if (view == 'PosterCard') {
html += LibraryBrowser.getPosterViewHtml({
html += libraryBrowser.getPosterViewHtml({
items: items,
lazy: true,
shape: getPortraitShape(),
@ -57,7 +57,7 @@
} else if (view == 'Poster') {
html += LibraryBrowser.getPosterViewHtml({
html += libraryBrowser.getPosterViewHtml({
items: items,
shape: getPortraitShape(),
centerText: true,
@ -71,7 +71,6 @@
var recentlyAddedItems = page.querySelector('#recentlyAddedItems');
recentlyAddedItems.innerHTML = html;
ImageLoader.lazyChildren(recentlyAddedItems);
LibraryBrowser.setLastRefreshed(page);
});
}
@ -107,7 +106,7 @@
if (view == 'ThumbCard') {
html += LibraryBrowser.getPosterViewHtml({
html += libraryBrowser.getPosterViewHtml({
items: result.Items,
preferThumb: true,
shape: getThumbShape(),
@ -121,7 +120,7 @@
} else if (view == 'Thumb') {
html += LibraryBrowser.getPosterViewHtml({
html += libraryBrowser.getPosterViewHtml({
items: result.Items,
preferThumb: true,
shape: getThumbShape(),
@ -177,7 +176,7 @@
if (view == 'PosterCard') {
html += LibraryBrowser.getPosterViewHtml({
html += libraryBrowser.getPosterViewHtml({
items: recommendation.Items,
lazy: true,
shape: getPortraitShape(),
@ -191,7 +190,7 @@
} else if (view == 'Poster') {
html += LibraryBrowser.getPosterViewHtml({
html += libraryBrowser.getPosterViewHtml({
items: recommendation.Items,
shape: getPortraitShape(),
centerText: true,
@ -251,13 +250,12 @@
$(containers).createCardMenus();
}
function loadSuggestionsTab(page, tabContent) {
function loadSuggestionsTab(view, params, tabContent) {
var parentId = LibraryMenu.getTopParentId();
var parentId = params.topParentId;
var userId = Dashboard.getCurrentUserId();
if (LibraryBrowser.needsRefresh(tabContent)) {
console.log('loadSuggestionsTab');
loadResume(tabContent, userId, parentId);
loadLatest(tabContent, userId, parentId);
@ -266,119 +264,6 @@
loadSuggestions(tabContent, userId, parentId);
}
}
}
function loadTab(page, index) {
var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
var depends = [];
var scope = 'MoviesPage';
var renderMethod = '';
var initMethod = '';
switch (index) {
case 0:
initMethod = 'initSuggestedTab';
renderMethod = 'renderSuggestedTab';
break;
case 1:
depends.push('scripts/movies');
renderMethod = 'renderMoviesTab';
initMethod = 'initMoviesTab';
break;
case 2:
depends.push('scripts/movietrailers');
renderMethod = 'renderTrailerTab';
initMethod = 'initTrailerTab';
break;
case 3:
depends.push('scripts/moviecollections');
renderMethod = 'renderCollectionsTab';
initMethod = 'initCollectionsTab';
break;
case 4:
depends.push('scripts/moviegenres');
renderMethod = 'renderGenresTab';
break;
case 5:
depends.push('scripts/moviestudios');
renderMethod = 'renderStudiosTab';
break;
default:
break;
}
require(depends, function () {
if (initMethod && !tabContent.initComplete) {
window[scope][initMethod](page, tabContent);
tabContent.initComplete = true;
}
window[scope][renderMethod](page, tabContent);
});
}
window.MoviesPage = window.MoviesPage || {};
window.MoviesPage.renderSuggestedTab = loadSuggestionsTab;
window.MoviesPage.initSuggestedTab = initSuggestedTab;
pageIdOn('pageinit', "moviesPage", function () {
var page = this;
$('.recommendations', page).createCardMenus();
var tabs = page.querySelector('paper-tabs');
var pageTabsContainer = page.querySelector('.pageTabsContainer');
var baseUrl = 'movies.html';
var topParentId = LibraryMenu.getTopParentId();
if (topParentId) {
baseUrl += '?topParentId=' + topParentId;
}
LibraryBrowser.configurePaperLibraryTabs(page, tabs, pageTabsContainer, baseUrl);
pageTabsContainer.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.detail.selectedTabIndex));
});
});
pageIdOn('pagebeforeshow', "moviesPage", function () {
var page = this;
if (!page.getAttribute('data-title')) {
var parentId = LibraryMenu.getTopParentId();
if (parentId) {
ApiClient.getItem(Dashboard.getCurrentUserId(), parentId).then(function (item) {
page.setAttribute('data-title', item.Name);
LibraryMenu.setTitle(item.Name);
});
} else {
page.setAttribute('data-title', Globalize.translate('TabMovies'));
LibraryMenu.setTitle(Globalize.translate('TabMovies'));
}
}
Events.on(MediaController, 'playbackstop', onPlaybackStop);
});
pageIdOn('pagebeforehide', "moviesPage", function () {
var page = this;
Events.off(MediaController, 'playbackstop', onPlaybackStop);
});
function onPlaybackStop(e, state) {
@ -394,4 +279,117 @@
}
}
return function (view, params) {
var self = this;
self.initTab = function() {
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
initSuggestedTab(view, tabContent);
};
self.renderTab = function () {
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
loadSuggestionsTab(view, params, tabContent);
};
$('.recommendations', view).createCardMenus();
var pageTabsContainer = view.querySelector('.pageTabsContainer');
var baseUrl = 'movies.html';
var topParentId = params.topParentId;
if (topParentId) {
baseUrl += '?topParentId=' + topParentId;
}
libraryBrowser.configurePaperLibraryTabs(view, view.querySelector('paper-tabs'), pageTabsContainer, baseUrl);
var tabControllers = [];
var renderedTabs = [];
function loadTab(page, index) {
var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
var depends = [];
switch (index) {
case 0:
break;
case 1:
depends.push('scripts/movies');
break;
case 2:
depends.push('scripts/movietrailers');
break;
case 3:
depends.push('scripts/moviecollections');
break;
case 4:
depends.push('scripts/moviegenres');
break;
case 5:
depends.push('scripts/moviestudios');
break;
default:
break;
}
require(depends, function (controllerFactory) {
if (index == 0) {
self.tabContent = tabContent;
}
var controller = tabControllers[index];
if (!controller) {
controller = index ? new controllerFactory(view, params, tabContent) : self;
tabControllers[index] = controller;
if (controller.initTab) {
controller.initTab();
}
}
if (renderedTabs.indexOf(index) == -1) {
renderedTabs.push(index);
controller.renderTab();
}
});
}
pageTabsContainer.addEventListener('tabchange', function (e) {
loadTab(view, parseInt(e.detail.selectedTabIndex));
});
view.addEventListener('viewbeforeshow', function (e) {
if (!view.getAttribute('data-title')) {
var parentId = params.topParentId;
if (parentId) {
ApiClient.getItem(Dashboard.getCurrentUserId(), parentId).then(function (item) {
view.setAttribute('data-title', item.Name);
LibraryMenu.setTitle(item.Name);
});
} else {
view.setAttribute('data-title', Globalize.translate('TabMovies'));
LibraryMenu.setTitle(Globalize.translate('TabMovies'));
}
}
});
view.addEventListener('viewshow', function (e) {
Events.on(MediaController, 'playbackstop', onPlaybackStop);
});
view.addEventListener('viewbeforehide', function (e) {
Events.off(MediaController, 'playbackstop', onPlaybackStop);
});
};
});

48
dashboard-ui/scripts/moviestudios.js
View file

@ -3,7 +3,7 @@
// The base query options
var data = {};
function getQuery() {
function getQuery(params) {
var key = getSavedQueryKey();
var pageData = data[key];
@ -21,7 +21,7 @@
}
};
pageData.query.ParentId = LibraryMenu.getTopParentId();
pageData.query.ParentId = params.topParentId;
LibraryBrowser.loadSavedQueryValues(key, pageData.query);
}
return pageData.query;
@ -32,64 +32,62 @@
return LibraryBrowser.getSavedQueryKey('studios');
}
function reloadItems(page) {
function reloadItems(context, params) {
var query = getQuery(params);
Dashboard.showLoadingMsg();
var query = getQuery();
ApiClient.getStudios(Dashboard.getCurrentUserId(), query).then(function (result) {
// Scroll back up so they can see the results from the beginning
window.scrollTo(0, 0);
var html = '';
var pagingHtml = LibraryBrowser.getQueryPagingHtml({
$('.listTopPaging', context).html(LibraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex,
limit: query.Limit,
totalRecordCount: result.TotalRecordCount,
viewButton: false,
updatePageSizeSetting: false,
showLimit: false
});
}));
page.querySelector('.listTopPaging').innerHTML = pagingHtml;
html = LibraryBrowser.getPosterViewHtml({
html += LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
showTitle: false,
preferThumb: true,
context: 'movies',
showItemCounts: true,
centerText: true,
lazy: true
});
var elem = page.querySelector('.itemsContainer');
elem.innerHTML = html + pagingHtml;
var elem = context.querySelector('.itemsContainer');
elem.innerHTML = html;
ImageLoader.lazyChildren(elem);
$('.btnNextPage', page).on('click', function () {
$('.btnNextPage', context).on('click', function () {
query.StartIndex += query.Limit;
reloadItems(page);
reloadItems(context, params);
});
$('.btnPreviousPage', page).on('click', function () {
$('.btnPreviousPage', context).on('click', function () {
query.StartIndex -= query.Limit;
reloadItems(page);
reloadItems(context, params);
});
LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
Dashboard.hideLoadingMsg();
});
}
return function (view, params, tabContent) {
window.MoviesPage.renderStudiosTab = function (page, tabContent) {
var self = this;
if (LibraryBrowser.needsRefresh(tabContent)) {
reloadItems(tabContent);
}
self.renderTab = function () {
reloadItems(tabContent, params);
};
};
});

13
dashboard-ui/scripts/movietrailers.js
View file

@ -187,17 +187,20 @@
});
}
window.MoviesPage.initTrailerTab = function (page, tabContent) {
return function (view, params, tabContent) {
initPage(page, tabContent);
var self = this;
self.initTab = function () {
initPage(view, tabContent);
};
window.MoviesPage.renderTrailerTab = function (page, tabContent) {
self.renderTab = function () {
if (LibraryBrowser.needsRefresh(tabContent)) {
reloadItems(tabContent);
updateFilterControls(tabContent);
}
};
};
});

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

@ -2698,8 +2698,9 @@ var AppInfo = {};
defineRoute({
path: '/movies.html',
dependencies: [],
autoFocus: false
dependencies: ['paper-tabs', 'paper-checkbox', 'paper-fab', 'scripts/alphapicker'],
autoFocus: false,
controller: 'scripts/moviesrecommended'
});
defineRoute({