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:
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 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
|
|
||||||
};
|
};
|
||||||
});
|
});
|
|
@ -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);
|
||||||
|
|
|
@ -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>';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue