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
parent
3cc014002e
commit
146daaccd0
4 changed files with 48 additions and 53 deletions
|
|
@ -3,7 +3,6 @@ define(['browser'], function (browser) {
|
|||
var allPages = document.querySelectorAll('.mainAnimatedPage');
|
||||
var currentUrls = [];
|
||||
var pageContainerCount = allPages.length;
|
||||
var animationDuration = 500;
|
||||
var allowAnimation = true;
|
||||
var selectedPageIndex = -1;
|
||||
|
||||
|
|
@ -104,6 +103,11 @@ define(['browser'], function (browser) {
|
|||
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.activePage = view;
|
||||
|
||||
|
|
@ -249,7 +253,7 @@ define(['browser'], function (browser) {
|
|||
function fade(newAnimatedPage, oldAnimatedPage, transition, isBack) {
|
||||
|
||||
var timings = {
|
||||
duration: animationDuration,
|
||||
duration: 140,
|
||||
iterations: 1,
|
||||
easing: 'ease-out',
|
||||
fill: 'both'
|
||||
|
|
@ -305,16 +309,6 @@ define(['browser'], function (browser) {
|
|||
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) {
|
||||
|
||||
return selectedPageIndex;
|
||||
|
|
@ -354,6 +348,11 @@ define(['browser'], function (browser) {
|
|||
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.activePage = view;
|
||||
|
||||
|
|
@ -374,31 +373,14 @@ define(['browser'], function (browser) {
|
|||
currentUrls = [];
|
||||
}
|
||||
|
||||
function parentWithClass(elem, className) {
|
||||
|
||||
while (!elem.classList || !elem.classList.contains(className)) {
|
||||
elem = elem.parentNode;
|
||||
|
||||
if (!elem) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
||||
function init(isAnimationAllowed) {
|
||||
|
||||
if (allowAnimation && enableAnimation() && !browser.animate) {
|
||||
if (enableAnimation() && !browser.animate) {
|
||||
require(['webAnimations']);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
loadView: loadView,
|
||||
tryRestoreView: tryRestoreView,
|
||||
reset: reset,
|
||||
setOnBeforeChange: setOnBeforeChange,
|
||||
init: init
|
||||
setOnBeforeChange: setOnBeforeChange
|
||||
};
|
||||
});
|
||||
|
|
@ -63,6 +63,8 @@
|
|||
|
||||
Dashboard.getCurrentUser().then(function (user) {
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
renderImage(page, item, user);
|
||||
|
||||
setInitialCollapsibleState(page, item, context, user);
|
||||
|
|
|
|||
|
|
@ -737,6 +737,7 @@
|
|||
|
||||
var html = title;
|
||||
|
||||
if (window.$ && $.mobile) {
|
||||
var page = $.mobile.activePage;
|
||||
if (page) {
|
||||
var helpUrl = page.getAttribute('data-helpurl');
|
||||
|
|
@ -745,6 +746,7 @@
|
|||
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>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector('.libraryMenuButtonText').innerHTML = html;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1752,7 +1752,8 @@ var AppInfo = {};
|
|||
globalize: embyWebComponentsBowerPath + "/globalize",
|
||||
itemHelper: embyWebComponentsBowerPath + '/itemhelper',
|
||||
itemShortcuts: embyWebComponentsBowerPath + "/shortcuts",
|
||||
imageLoader: embyWebComponentsBowerPath + "/images/imagehelper"
|
||||
imageLoader: embyWebComponentsBowerPath + "/images/imagehelper",
|
||||
webAnimations: bowerPath + '/web-animations-js/web-animations-next-lite.min'
|
||||
};
|
||||
|
||||
if (navigator.webkitPersistentStorage) {
|
||||
|
|
@ -2348,13 +2349,15 @@ var AppInfo = {};
|
|||
defineRoute({
|
||||
path: '/channelitems.html',
|
||||
dependencies: [],
|
||||
autoFocus: false
|
||||
autoFocus: false,
|
||||
transition: 'fade'
|
||||
});
|
||||
|
||||
defineRoute({
|
||||
path: '/channels.html',
|
||||
dependencies: [],
|
||||
autoFocus: false
|
||||
autoFocus: false,
|
||||
transition: 'fade'
|
||||
});
|
||||
|
||||
defineRoute({
|
||||
|
|
@ -2522,7 +2525,8 @@ var AppInfo = {};
|
|||
path: '/home.html',
|
||||
dependencies: [],
|
||||
autoFocus: false,
|
||||
controller: 'scripts/indexpage'
|
||||
controller: 'scripts/indexpage',
|
||||
transition: 'fade'
|
||||
});
|
||||
|
||||
defineRoute({
|
||||
|
|
@ -2535,14 +2539,16 @@ var AppInfo = {};
|
|||
defineRoute({
|
||||
path: '/itemdetails.html',
|
||||
dependencies: ['paper-button'],
|
||||
autoFocus: false
|
||||
autoFocus: false,
|
||||
transition: 'fade'
|
||||
});
|
||||
|
||||
defineRoute({
|
||||
path: '/itemlist.html',
|
||||
dependencies: ['paper-checkbox', 'scripts/alphapicker'],
|
||||
autoFocus: false,
|
||||
controller: 'scripts/itemlistpage'
|
||||
controller: 'scripts/itemlistpage',
|
||||
transition: 'fade'
|
||||
});
|
||||
|
||||
defineRoute({
|
||||
|
|
@ -2576,7 +2582,8 @@ var AppInfo = {};
|
|||
path: '/livetv.html',
|
||||
dependencies: ['paper-button', 'livetvcss'],
|
||||
controller: 'scripts/livetvsuggested',
|
||||
autoFocus: false
|
||||
autoFocus: false,
|
||||
transition: 'fade'
|
||||
});
|
||||
|
||||
defineRoute({
|
||||
|
|
@ -2692,14 +2699,16 @@ var AppInfo = {};
|
|||
path: '/movies.html',
|
||||
dependencies: ['paper-checkbox', 'paper-fab', 'scripts/alphapicker', 'paper-button'],
|
||||
autoFocus: false,
|
||||
controller: 'scripts/moviesrecommended'
|
||||
controller: 'scripts/moviesrecommended',
|
||||
transition: 'fade'
|
||||
});
|
||||
|
||||
defineRoute({
|
||||
path: '/music.html',
|
||||
dependencies: ['scripts/alphapicker'],
|
||||
controller: 'scripts/musicrecommended',
|
||||
autoFocus: false
|
||||
autoFocus: false,
|
||||
transition: 'fade'
|
||||
});
|
||||
|
||||
defineRoute({
|
||||
|
|
@ -2781,7 +2790,8 @@ var AppInfo = {};
|
|||
defineRoute({
|
||||
path: '/photos.html',
|
||||
dependencies: [],
|
||||
autoFocus: false
|
||||
autoFocus: false,
|
||||
transition: 'fade'
|
||||
});
|
||||
|
||||
defineRoute({
|
||||
|
|
@ -2794,7 +2804,8 @@ var AppInfo = {};
|
|||
defineRoute({
|
||||
path: '/playlists.html',
|
||||
dependencies: [],
|
||||
autoFocus: false
|
||||
autoFocus: false,
|
||||
transition: 'fade'
|
||||
});
|
||||
|
||||
defineRoute({
|
||||
|
|
@ -2908,7 +2919,8 @@ var AppInfo = {};
|
|||
path: '/tv.html',
|
||||
dependencies: ['paper-checkbox', 'paper-icon-button-light', 'paper-button'],
|
||||
autoFocus: false,
|
||||
controller: 'scripts/tvrecommended'
|
||||
controller: 'scripts/tvrecommended',
|
||||
transition: 'fade'
|
||||
});
|
||||
|
||||
defineRoute({
|
||||
|
|
@ -3242,6 +3254,7 @@ pageClassOn('viewinit', "page", function () {
|
|||
|
||||
page.classList.add("ui-page");
|
||||
page.classList.add("ui-page-theme-" + current);
|
||||
page.classList.add("ui-body-" + current);
|
||||
|
||||
var contents = page.querySelectorAll("div[data-role='content']");
|
||||
|
||||
|
|
@ -3269,13 +3282,9 @@ pageClassOn('viewshow', "page", function () {
|
|||
if (currentTheme == 'a') {
|
||||
docElem.classList.add('background-theme-a');
|
||||
docElem.classList.remove('background-theme-b');
|
||||
page.classList.add('ui-body-a');
|
||||
page.classList.remove('ui-body-b');
|
||||
} else {
|
||||
docElem.classList.add('background-theme-b');
|
||||
docElem.classList.remove('background-theme-a');
|
||||
page.classList.add('ui-body-b');
|
||||
page.classList.remove('ui-body-a');
|
||||
}
|
||||
|
||||
var apiClient = window.ApiClient;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue