mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
cleanup and module resolution in webpack for skinManager
This commit is contained in:
vitorsemeano
parent
9c758a8d85
commit
be505da8ac
3 changed files with 55 additions and 304 deletions
|
|
@ -14,31 +14,6 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
|
|||
},
|
||||
showSettings: function () {
|
||||
show('/settings/settings.html');
|
||||
},
|
||||
showSearch: function () {
|
||||
skinManager.getCurrentSkin().search();
|
||||
},
|
||||
showGenre: function (options) {
|
||||
skinManager.getCurrentSkin().showGenre(options);
|
||||
},
|
||||
showGuide: function () {
|
||||
skinManager.getCurrentSkin().showGuide({
|
||||
serverId: connectionManager.currentApiClient().serverId()
|
||||
});
|
||||
},
|
||||
showLiveTV: function () {
|
||||
skinManager.getCurrentSkin().showLiveTV({
|
||||
serverId: connectionManager.currentApiClient().serverId()
|
||||
});
|
||||
},
|
||||
showRecordedTV: function () {
|
||||
skinManager.getCurrentSkin().showRecordedTV();
|
||||
},
|
||||
showFavorites: function () {
|
||||
skinManager.getCurrentSkin().showFavorites();
|
||||
},
|
||||
showNowPlaying: function () {
|
||||
skinManager.getCurrentSkin().showNowPlaying();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -435,12 +410,8 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
|
|||
if (apiClient && apiClient.isLoggedIn()) {
|
||||
|
||||
console.log('appRouter - user is authenticated');
|
||||
|
||||
if (ctx.isBack && (route.isDefaultRoute || route.startup) && !isCurrentRouteStartup) {
|
||||
handleBackToDefault();
|
||||
return;
|
||||
}
|
||||
else if (route.isDefaultRoute) {
|
||||
|
||||
if (route.isDefaultRoute) {
|
||||
console.log('appRouter - loading skin home page');
|
||||
loadUserSkinWithOptions(ctx);
|
||||
return;
|
||||
|
|
@ -499,30 +470,6 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
|
|||
var isHandlingBackToDefault;
|
||||
var isDummyBackToHome;
|
||||
|
||||
function handleBackToDefault() {
|
||||
|
||||
if (!appHost.supports('exitmenu') && appHost.supports('exit')) {
|
||||
appHost.exit();
|
||||
return;
|
||||
}
|
||||
|
||||
isDummyBackToHome = true;
|
||||
skinManager.loadUserSkin();
|
||||
|
||||
if (isHandlingBackToDefault) {
|
||||
return;
|
||||
}
|
||||
|
||||
// This must result in a call to either
|
||||
// skinManager.loadUserSkin();
|
||||
// Logout
|
||||
// Or exit app
|
||||
skinManager.getCurrentSkin().showBackMenu().then(function () {
|
||||
|
||||
isHandlingBackToDefault = false;
|
||||
});
|
||||
}
|
||||
|
||||
function loadContent(ctx, route, html, request) {
|
||||
|
||||
html = globalize.translateDocument(html, route.dictionary);
|
||||
|
|
@ -668,30 +615,6 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
|
|||
return currentRouteInfo ? currentRouteInfo.route : null;
|
||||
}
|
||||
|
||||
function goHome() {
|
||||
|
||||
var skin = skinManager.getCurrentSkin();
|
||||
|
||||
if (skin.getHomeRoute) {
|
||||
var homePath = skin.getHomeRoute();
|
||||
return show(pluginManager.mapRoute(skin, homePath));
|
||||
} else {
|
||||
var homeRoute = skin.getRoutes().filter(function (r) {
|
||||
return r.type === 'home';
|
||||
})[0];
|
||||
|
||||
return show(pluginManager.mapRoute(skin, homeRoute));
|
||||
}
|
||||
}
|
||||
|
||||
function getRouteUrl(item, options) {
|
||||
if (item === 'settings') {
|
||||
return 'settings/settings.html';
|
||||
}
|
||||
|
||||
return skinManager.getCurrentSkin().getRouteUrl(item, options);
|
||||
}
|
||||
|
||||
function showItem(item, serverId, options) {
|
||||
|
||||
if (typeof (item) === 'string') {
|
||||
|
|
@ -712,20 +635,6 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
|
|||
}
|
||||
}
|
||||
|
||||
function setTitle(title) {
|
||||
skinManager.getCurrentSkin().setTitle(title);
|
||||
}
|
||||
|
||||
function showVideoOsd() {
|
||||
var skin = skinManager.getCurrentSkin();
|
||||
|
||||
var homeRoute = skin.getRoutes().filter(function (r) {
|
||||
return r.type === 'video-osd';
|
||||
})[0];
|
||||
|
||||
return show(pluginManager.mapRoute(skin, homeRoute));
|
||||
}
|
||||
|
||||
var allRoutes = [];
|
||||
|
||||
function addRoute(path, newRoute) {
|
||||
|
|
@ -832,15 +741,11 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
|
|||
appRouter.canGoBack = canGoBack;
|
||||
appRouter.current = current;
|
||||
appRouter.beginConnectionWizard = beginConnectionWizard;
|
||||
appRouter.goHome = goHome;
|
||||
appRouter.showItem = showItem;
|
||||
appRouter.setTitle = setTitle;
|
||||
appRouter.setTransparency = setTransparency;
|
||||
appRouter.getRoutes = getRoutes;
|
||||
appRouter.getRouteUrl = getRouteUrl;
|
||||
appRouter.pushState = pushState;
|
||||
appRouter.enableNativeHistory = enableNativeHistory;
|
||||
appRouter.showVideoOsd = showVideoOsd;
|
||||
appRouter.handleAnchorClick = page.handleAnchorClick;
|
||||
appRouter.TransparencyLevel = {
|
||||
None: 0,
|
||||
|
|
|
|||
|
|
@ -1,148 +1,9 @@
|
|||
define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdrop', 'globalize', 'require', 'appSettings'], function (appHost, userSettings, browser, events, pluginManager, backdrop, globalize, require, appSettings) {
|
||||
define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdrop', 'globalize', 'require', 'appSettings', 'appRouter'], function (appHost, userSettings, browser, events, pluginManager, backdrop, globalize, require, appSettings, appRouter) {
|
||||
'use strict';
|
||||
|
||||
var currentSkin;
|
||||
|
||||
function getCurrentSkin() {
|
||||
return currentSkin;
|
||||
}
|
||||
|
||||
function getRequirePromise(deps) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
require(deps, resolve);
|
||||
});
|
||||
}
|
||||
|
||||
function loadSkin(id) {
|
||||
var newSkin = pluginManager.plugins().filter(function (p) {
|
||||
return p.id === id;
|
||||
})[0];
|
||||
|
||||
if (!newSkin) {
|
||||
newSkin = pluginManager.plugins().filter(function (p) {
|
||||
return p.id === 'defaultskin';
|
||||
})[0];
|
||||
}
|
||||
|
||||
var unloadPromise;
|
||||
|
||||
if (currentSkin) {
|
||||
if (currentSkin.id === newSkin.id) {
|
||||
// Nothing to do, it's already the active skin
|
||||
return Promise.resolve(currentSkin);
|
||||
}
|
||||
unloadPromise = unloadSkin(currentSkin);
|
||||
} else {
|
||||
unloadPromise = Promise.resolve();
|
||||
}
|
||||
|
||||
return unloadPromise.then(function () {
|
||||
var deps = newSkin.getDependencies();
|
||||
|
||||
console.log('Loading skin dependencies');
|
||||
|
||||
return getRequirePromise(deps).then(function () {
|
||||
|
||||
console.log('Skin dependencies loaded');
|
||||
|
||||
var strings = newSkin.getTranslations ? newSkin.getTranslations() : [];
|
||||
|
||||
return globalize.loadStrings({
|
||||
|
||||
name: newSkin.id,
|
||||
strings: strings
|
||||
|
||||
}).then(function () {
|
||||
|
||||
globalize.defaultModule(newSkin.id);
|
||||
return loadSkinHeader(newSkin);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function unloadSkin(skin) {
|
||||
|
||||
unloadTheme();
|
||||
backdrop.clear();
|
||||
|
||||
console.log('Unloading skin: ' + skin.name);
|
||||
|
||||
// TODO: unload css
|
||||
return skin.unload().then(function () {
|
||||
document.dispatchEvent(new CustomEvent("skinunload", {
|
||||
detail: {
|
||||
name: skin.name
|
||||
}
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
function loadSkinHeader(skin) {
|
||||
return getSkinHeader(skin).then(function (headerHtml) {
|
||||
document.querySelector('.skinHeader').innerHTML = headerHtml;
|
||||
|
||||
currentSkin = skin;
|
||||
skin.load();
|
||||
|
||||
return skin;
|
||||
});
|
||||
}
|
||||
|
||||
var cacheParam = new Date().getTime();
|
||||
|
||||
function getSkinHeader(skin) {
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
|
||||
if (!skin.getHeaderTemplate) {
|
||||
resolve('');
|
||||
return;
|
||||
}
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
||||
var url = skin.getHeaderTemplate();
|
||||
url += url.indexOf('?') === -1 ? '?' : '&';
|
||||
url += 'v=' + cacheParam;
|
||||
|
||||
xhr.open('GET', url, true);
|
||||
|
||||
xhr.onload = function (e) {
|
||||
if (this.status < 400) {
|
||||
resolve(this.response);
|
||||
} else {
|
||||
resolve('');
|
||||
}
|
||||
};
|
||||
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
function loadUserSkin(options) {
|
||||
|
||||
var skin = userSettings.get('skin', false) || 'defaultskin';
|
||||
|
||||
loadSkin(skin).then(function (skin) {
|
||||
|
||||
options = options || {};
|
||||
if (options.start) {
|
||||
Emby.Page.invokeShortcut(options.start);
|
||||
} else {
|
||||
Emby.Page.goHome();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
events.on(userSettings, 'change', function (e, name) {
|
||||
if (name === 'skin' || name === 'language') {
|
||||
loadUserSkin();
|
||||
}
|
||||
});
|
||||
|
||||
var themeStyleElement;
|
||||
var currentThemeId;
|
||||
|
||||
function unloadTheme() {
|
||||
var elem = themeStyleElement;
|
||||
if (elem) {
|
||||
|
|
@ -153,20 +14,61 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
|
|||
}
|
||||
}
|
||||
|
||||
function getThemes() {
|
||||
function loadUserSkin(options) {
|
||||
options = options || {};
|
||||
|
||||
if (currentSkin.getThemes) {
|
||||
return currentSkin.getThemes();
|
||||
if (options.start) {
|
||||
appRouter.invokeShortcut(options.start);
|
||||
} else {
|
||||
appRouter.goHome();
|
||||
}
|
||||
};
|
||||
|
||||
return [];
|
||||
}
|
||||
function getThemes() {
|
||||
return [{
|
||||
name: "Apple TV",
|
||||
id: "appletv"
|
||||
}, {
|
||||
name: "Blue Radiance",
|
||||
id: "blueradiance"
|
||||
}, {
|
||||
name: "Dark",
|
||||
id: "dark",
|
||||
isDefault: true,
|
||||
isDefaultServerDashboard: true
|
||||
}, {
|
||||
name: "Dark (green accent)",
|
||||
id: "dark-green"
|
||||
}, {
|
||||
name: "Dark (red accent)",
|
||||
id: "dark-red"
|
||||
}, {
|
||||
name: "Light",
|
||||
id: "light"
|
||||
}, {
|
||||
name: "Light (blue accent)",
|
||||
id: "light-blue"
|
||||
}, {
|
||||
name: "Light (green accent)",
|
||||
id: "light-green"
|
||||
}, {
|
||||
name: "Light (pink accent)",
|
||||
id: "light-pink"
|
||||
}, {
|
||||
name: "Light (purple accent)",
|
||||
id: "light-purple"
|
||||
}, {
|
||||
name: "Light (red accent)",
|
||||
id: "light-red"
|
||||
}, {
|
||||
name: "Windows Media Center",
|
||||
id: "wmc"
|
||||
}];
|
||||
};
|
||||
|
||||
var skinManager = {
|
||||
getCurrentSkin: getCurrentSkin,
|
||||
loadSkin: loadSkin,
|
||||
loadUserSkin: loadUserSkin,
|
||||
getThemes: getThemes
|
||||
getThemes: getThemes,
|
||||
loadUserSkin: loadUserSkin
|
||||
};
|
||||
|
||||
function getThemeStylesheetInfo(id, requiresRegistration, isDefaultProperty) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue