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

optimize dlna views

This commit is contained in:
Luke Pulverenti 2016-05-16 14:20:08 -04:00
parent 3cc014002e
commit 146daaccd0
4 changed files with 48 additions and 53 deletions

View file

@ -3,7 +3,6 @@ define(['browser'], function (browser) {
var allPages = document.querySelectorAll('.mainAnimatedPage'); var allPages = document.querySelectorAll('.mainAnimatedPage');
var currentUrls = []; var currentUrls = [];
var pageContainerCount = allPages.length; var pageContainerCount = allPages.length;
var animationDuration = 500;
var allowAnimation = true; var allowAnimation = true;
var selectedPageIndex = -1; var selectedPageIndex = -1;
@ -104,6 +103,11 @@ define(['browser'], function (browser) {
afterAnimate(allPages, pageIndex); afterAnimate(allPages, pageIndex);
} }
// Temporary hack
// If a view renders UI in viewbeforeshow the lazy image loader will think the images aren't visible and won't load images
// The views need to be updated to start loading data in beforeshow, but not render until show
document.dispatchEvent(new CustomEvent('scroll', {}));
$.mobile = $.mobile || {}; $.mobile = $.mobile || {};
$.mobile.activePage = view; $.mobile.activePage = view;
@ -249,7 +253,7 @@ define(['browser'], function (browser) {
function fade(newAnimatedPage, oldAnimatedPage, transition, isBack) { function fade(newAnimatedPage, oldAnimatedPage, transition, isBack) {
var timings = { var timings = {
duration: animationDuration, duration: 140,
iterations: 1, iterations: 1,
easing: 'ease-out', easing: 'ease-out',
fill: 'both' fill: 'both'
@ -305,16 +309,6 @@ define(['browser'], function (browser) {
onBeforeChange = fn; onBeforeChange = fn;
} }
function sendResolve(resolve, view) {
// Don't report completion until the animation has finished, otherwise rendering may not perform well
setTimeout(function () {
resolve(view);
}, animationDuration);
}
function getSelectedIndex(allPages) { function getSelectedIndex(allPages) {
return selectedPageIndex; return selectedPageIndex;
@ -354,6 +348,11 @@ define(['browser'], function (browser) {
afterAnimate(allPages, index); afterAnimate(allPages, index);
} }
// Temporary hack
// If a view renders UI in viewbeforeshow the lazy image loader will think the images aren't visible and won't load images
// The views need to be updated to start loading data in beforeshow, but not render until show
document.dispatchEvent(new CustomEvent('scroll', {}));
$.mobile = $.mobile || {}; $.mobile = $.mobile || {};
$.mobile.activePage = view; $.mobile.activePage = view;
@ -374,31 +373,14 @@ define(['browser'], function (browser) {
currentUrls = []; currentUrls = [];
} }
function parentWithClass(elem, className) { if (enableAnimation() && !browser.animate) {
require(['webAnimations']);
while (!elem.classList || !elem.classList.contains(className)) {
elem = elem.parentNode;
if (!elem) {
return null;
}
}
return elem;
}
function init(isAnimationAllowed) {
if (allowAnimation && enableAnimation() && !browser.animate) {
require(['webAnimations']);
}
} }
return { return {
loadView: loadView, loadView: loadView,
tryRestoreView: tryRestoreView, tryRestoreView: tryRestoreView,
reset: reset, reset: reset,
setOnBeforeChange: setOnBeforeChange, setOnBeforeChange: setOnBeforeChange
init: init
}; };
}); });

View file

@ -63,6 +63,8 @@
Dashboard.getCurrentUser().then(function (user) { Dashboard.getCurrentUser().then(function (user) {
window.scrollTo(0, 0);
renderImage(page, item, user); renderImage(page, item, user);
setInitialCollapsibleState(page, item, context, user); setInitialCollapsibleState(page, item, context, user);

View file

@ -737,12 +737,14 @@
var html = title; var html = title;
var page = $.mobile.activePage; if (window.$ && $.mobile) {
if (page) { var page = $.mobile.activePage;
var helpUrl = page.getAttribute('data-helpurl'); if (page) {
var helpUrl = page.getAttribute('data-helpurl');
if (helpUrl) { if (helpUrl) {
html += '<a href="' + helpUrl + '" target="_blank" class="clearLink" style="margin-left:2em;" title="' + Globalize.translate('ButtonHelp') + '"><paper-button class="accent" style="margin:0;font-weight:normal;font-size:13px;padding:.25em;display:flex;align-items:center;"><iron-icon icon="info"></iron-icon><span>Help</span></paper-button></a>'; html += '<a href="' + helpUrl + '" target="_blank" class="clearLink" style="margin-left:2em;" title="' + Globalize.translate('ButtonHelp') + '"><paper-button class="accent" style="margin:0;font-weight:normal;font-size:13px;padding:.25em;display:flex;align-items:center;"><iron-icon icon="info"></iron-icon><span>Help</span></paper-button></a>';
}
} }
} }

View file

@ -1752,7 +1752,8 @@ var AppInfo = {};
globalize: embyWebComponentsBowerPath + "/globalize", globalize: embyWebComponentsBowerPath + "/globalize",
itemHelper: embyWebComponentsBowerPath + '/itemhelper', itemHelper: embyWebComponentsBowerPath + '/itemhelper',
itemShortcuts: embyWebComponentsBowerPath + "/shortcuts", itemShortcuts: embyWebComponentsBowerPath + "/shortcuts",
imageLoader: embyWebComponentsBowerPath + "/images/imagehelper" imageLoader: embyWebComponentsBowerPath + "/images/imagehelper",
webAnimations: bowerPath + '/web-animations-js/web-animations-next-lite.min'
}; };
if (navigator.webkitPersistentStorage) { if (navigator.webkitPersistentStorage) {
@ -2348,13 +2349,15 @@ var AppInfo = {};
defineRoute({ defineRoute({
path: '/channelitems.html', path: '/channelitems.html',
dependencies: [], dependencies: [],
autoFocus: false autoFocus: false,
transition: 'fade'
}); });
defineRoute({ defineRoute({
path: '/channels.html', path: '/channels.html',
dependencies: [], dependencies: [],
autoFocus: false autoFocus: false,
transition: 'fade'
}); });
defineRoute({ defineRoute({
@ -2522,7 +2525,8 @@ var AppInfo = {};
path: '/home.html', path: '/home.html',
dependencies: [], dependencies: [],
autoFocus: false, autoFocus: false,
controller: 'scripts/indexpage' controller: 'scripts/indexpage',
transition: 'fade'
}); });
defineRoute({ defineRoute({
@ -2535,14 +2539,16 @@ var AppInfo = {};
defineRoute({ defineRoute({
path: '/itemdetails.html', path: '/itemdetails.html',
dependencies: ['paper-button'], dependencies: ['paper-button'],
autoFocus: false autoFocus: false,
transition: 'fade'
}); });
defineRoute({ defineRoute({
path: '/itemlist.html', path: '/itemlist.html',
dependencies: ['paper-checkbox', 'scripts/alphapicker'], dependencies: ['paper-checkbox', 'scripts/alphapicker'],
autoFocus: false, autoFocus: false,
controller: 'scripts/itemlistpage' controller: 'scripts/itemlistpage',
transition: 'fade'
}); });
defineRoute({ defineRoute({
@ -2576,7 +2582,8 @@ var AppInfo = {};
path: '/livetv.html', path: '/livetv.html',
dependencies: ['paper-button', 'livetvcss'], dependencies: ['paper-button', 'livetvcss'],
controller: 'scripts/livetvsuggested', controller: 'scripts/livetvsuggested',
autoFocus: false autoFocus: false,
transition: 'fade'
}); });
defineRoute({ defineRoute({
@ -2692,14 +2699,16 @@ var AppInfo = {};
path: '/movies.html', path: '/movies.html',
dependencies: ['paper-checkbox', 'paper-fab', 'scripts/alphapicker', 'paper-button'], dependencies: ['paper-checkbox', 'paper-fab', 'scripts/alphapicker', 'paper-button'],
autoFocus: false, autoFocus: false,
controller: 'scripts/moviesrecommended' controller: 'scripts/moviesrecommended',
transition: 'fade'
}); });
defineRoute({ defineRoute({
path: '/music.html', path: '/music.html',
dependencies: ['scripts/alphapicker'], dependencies: ['scripts/alphapicker'],
controller: 'scripts/musicrecommended', controller: 'scripts/musicrecommended',
autoFocus: false autoFocus: false,
transition: 'fade'
}); });
defineRoute({ defineRoute({
@ -2781,7 +2790,8 @@ var AppInfo = {};
defineRoute({ defineRoute({
path: '/photos.html', path: '/photos.html',
dependencies: [], dependencies: [],
autoFocus: false autoFocus: false,
transition: 'fade'
}); });
defineRoute({ defineRoute({
@ -2794,7 +2804,8 @@ var AppInfo = {};
defineRoute({ defineRoute({
path: '/playlists.html', path: '/playlists.html',
dependencies: [], dependencies: [],
autoFocus: false autoFocus: false,
transition: 'fade'
}); });
defineRoute({ defineRoute({
@ -2908,7 +2919,8 @@ var AppInfo = {};
path: '/tv.html', path: '/tv.html',
dependencies: ['paper-checkbox', 'paper-icon-button-light', 'paper-button'], dependencies: ['paper-checkbox', 'paper-icon-button-light', 'paper-button'],
autoFocus: false, autoFocus: false,
controller: 'scripts/tvrecommended' controller: 'scripts/tvrecommended',
transition: 'fade'
}); });
defineRoute({ defineRoute({
@ -3242,6 +3254,7 @@ pageClassOn('viewinit', "page", function () {
page.classList.add("ui-page"); page.classList.add("ui-page");
page.classList.add("ui-page-theme-" + current); page.classList.add("ui-page-theme-" + current);
page.classList.add("ui-body-" + current);
var contents = page.querySelectorAll("div[data-role='content']"); var contents = page.querySelectorAll("div[data-role='content']");
@ -3269,13 +3282,9 @@ pageClassOn('viewshow', "page", function () {
if (currentTheme == 'a') { if (currentTheme == 'a') {
docElem.classList.add('background-theme-a'); docElem.classList.add('background-theme-a');
docElem.classList.remove('background-theme-b'); docElem.classList.remove('background-theme-b');
page.classList.add('ui-body-a');
page.classList.remove('ui-body-b');
} else { } else {
docElem.classList.add('background-theme-b'); docElem.classList.add('background-theme-b');
docElem.classList.remove('background-theme-a'); docElem.classList.remove('background-theme-a');
page.classList.add('ui-body-b');
page.classList.remove('ui-body-a');
} }
var apiClient = window.ApiClient; var apiClient = window.ApiClient;