Merge pull request #6474 from thornbill/dashboard-controllers

Move dashboard controllers to app directory

src/apps/dashboard/controllers/dashboard.js

@@ -1,36 +1,36 @@
 import escapeHtml from 'escape-html';
 
-import datetime from '../../scripts/datetime';
-import Events from '../../utils/events.ts';
-import itemHelper from '../../components/itemHelper';
-import serverNotifications from '../../scripts/serverNotifications';
-import dom from '../../scripts/dom';
-import globalize from '../../lib/globalize';
+import datetime from 'scripts/datetime';
+import Events from 'utils/events.ts';
+import itemHelper from 'components/itemHelper';
+import serverNotifications from 'scripts/serverNotifications';
+import dom from 'scripts/dom';
+import globalize from 'lib/globalize';
 import { formatDistanceToNow } from 'date-fns';
-import { getLocaleWithSuffix } from '../../utils/dateFnsLocale.ts';
-import loading from '../../components/loading/loading';
-import playMethodHelper from '../../components/playback/playmethodhelper';
-import cardBuilder from '../../components/cardbuilder/cardBuilder';
-import imageLoader from '../../components/images/imageLoader';
-import ActivityLog from '../../components/activitylog';
-import imageHelper from '../../utils/image';
-import indicators from '../../components/indicators/indicators';
-import taskButton from '../../scripts/taskbutton';
-import Dashboard from '../../utils/dashboard';
-import ServerConnections from '../../components/ServerConnections';
-import alert from '../../components/alert';
-import confirm from '../../components/confirm/confirm';
-import { getDefaultBackgroundClass } from '../../components/cardbuilder/cardBuilderUtils';
+import { getLocaleWithSuffix } from 'utils/dateFnsLocale.ts';
+import loading from 'components/loading/loading';
+import playMethodHelper from 'components/playback/playmethodhelper';
+import cardBuilder from 'components/cardbuilder/cardBuilder';
+import imageLoader from 'components/images/imageLoader';
+import ActivityLog from 'components/activitylog';
+import imageHelper from 'utils/image';
+import indicators from 'components/indicators/indicators';
+import taskButton from 'scripts/taskbutton';
+import Dashboard from 'utils/dashboard';
+import ServerConnections from 'components/ServerConnections';
+import alert from 'components/alert';
+import confirm from 'components/confirm/confirm';
+import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
 
 import { getSystemInfoQuery } from 'hooks/useSystemInfo';
 import { toApi } from 'utils/jellyfin-apiclient/compat';
 import { queryClient } from 'utils/query/queryClient';
 
-import '../../elements/emby-button/emby-button';
-import '../../elements/emby-itemscontainer/emby-itemscontainer';
+import 'elements/emby-button/emby-button';
+import 'elements/emby-itemscontainer/emby-itemscontainer';
 
-import '../../components/listview/listview.scss';
-import '../../styles/flexstyles.scss';
+import 'components/listview/listview.scss';
+import 'styles/flexstyles.scss';
 import './dashboard.scss';
 
 function showPlaybackInfo(btn, session) {
@@ -72,7 +72,7 @@ function showPlaybackInfo(btn, session) {
 }
 
 function showSendMessageForm(btn, session) {
-    import('../../components/prompt/prompt').then(({ default: prompt }) => {
+    import('components/prompt/prompt').then(({ default: prompt }) => {
         prompt({
             title: globalize.translate('HeaderSendMessage'),
             label: globalize.translate('LabelMessageText'),
@@ -89,7 +89,7 @@ function showSendMessageForm(btn, session) {
 }
 
 function showOptionsMenu(btn, session) {
-    import('../../components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
+    import('components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
         const menuItems = [];
 
         if (session.ServerId && session.DeviceId !== ServerConnections.deviceId()) {

src/apps/dashboard/controllers/devices/device.js

@@ -1,9 +1,9 @@
-import loading from '../../../components/loading/loading';
-import dom from '../../../scripts/dom';
-import '../../../elements/emby-input/emby-input';
-import '../../../elements/emby-button/emby-button';
-import Dashboard from '../../../utils/dashboard';
-import { getParameterByName } from '../../../utils/url.ts';
+import loading from 'components/loading/loading';
+import dom from 'scripts/dom';
+import 'elements/emby-input/emby-input';
+import 'elements/emby-button/emby-button';
+import Dashboard from 'utils/dashboard';
+import { getParameterByName } from 'utils/url.ts';
 
 function load(page, device, deviceOptions) {
     page.querySelector('#txtCustomName', page).value = deviceOptions?.CustomName || '';

src/apps/dashboard/controllers/devices/devices.js

@@ -1,16 +1,17 @@
-import escapeHtml from 'escape-html';
-import loading from '../../../components/loading/loading';
-import dom from '../../../scripts/dom';
-import globalize from '../../../lib/globalize';
-import imageHelper from '../../../utils/image';
 import { formatDistanceToNow } from 'date-fns';
-import { getLocaleWithSuffix } from '../../../utils/dateFnsLocale.ts';
-import '../../../elements/emby-button/emby-button';
-import '../../../elements/emby-itemscontainer/emby-itemscontainer';
-import '../../../components/cardbuilder/card.scss';
-import Dashboard from '../../../utils/dashboard';
-import confirm from '../../../components/confirm/confirm';
-import { getDefaultBackgroundClass } from '../../../components/cardbuilder/cardBuilderUtils';
+import escapeHtml from 'escape-html';
+
+import loading from 'components/loading/loading';
+import dom from 'scripts/dom';
+import globalize from 'lib/globalize';
+import imageHelper from 'utils/image';
+import { getLocaleWithSuffix } from 'utils/dateFnsLocale.ts';
+import 'elements/emby-button/emby-button';
+import 'elements/emby-itemscontainer/emby-itemscontainer';
+import 'components/cardbuilder/card.scss';
+import Dashboard from 'utils/dashboard';
+import confirm from 'components/confirm/confirm';
+import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
 
 // Local cache of loaded
 let deviceIds = [];
@@ -66,7 +67,7 @@ function showDeviceMenu(view, btn, deviceId) {
         });
     }
 
-    import('../../../components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
+    import('components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
         actionsheet.show({
             items: menuItems,
             positionTo: btn,

src/apps/dashboard/controllers/encodingsettings.js

@@ -1,9 +1,9 @@
 import 'jquery';
-import loading from '../../components/loading/loading';
-import globalize from '../../lib/globalize';
-import dom from '../../scripts/dom';
-import Dashboard from '../../utils/dashboard';
-import alert from '../../components/alert';
+import loading from 'components/loading/loading';
+import globalize from 'lib/globalize';
+import dom from 'scripts/dom';
+import Dashboard from 'utils/dashboard';
+import alert from 'components/alert';
 
 function loadPage(page, config, systemInfo) {
     Array.prototype.forEach.call(page.querySelectorAll('.chkDecodeCodec'), function (c) {
@@ -263,7 +263,7 @@ $(document).on('pageinit', '#encodingSettingsPage', function () {
         setDecodingCodecsVisible(page, this.value);
     });
     $('#btnSelectTranscodingTempPath', page).on('click.selectDirectory', function () {
-        import('../../components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
+        import('components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
             const picker = new DirectoryBrowser();
             picker.show({
                 callback: function (path) {
@@ -280,7 +280,7 @@ $(document).on('pageinit', '#encodingSettingsPage', function () {
         });
     });
     $('#btnSelectFallbackFontPath', page).on('click.selectDirectory', function () {
-        import('../../components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
+        import('components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
             const picker = new DirectoryBrowser();
             picker.show({
                 includeDirectories: true,

src/apps/dashboard/controllers/general.js

@@ -1,14 +1,14 @@
 import 'jquery';
 
-import loading from '../../components/loading/loading';
-import globalize from '../../lib/globalize';
-import '../../elements/emby-checkbox/emby-checkbox';
-import '../../elements/emby-textarea/emby-textarea';
-import '../../elements/emby-input/emby-input';
-import '../../elements/emby-select/emby-select';
-import '../../elements/emby-button/emby-button';
-import Dashboard from '../../utils/dashboard';
-import alert from '../../components/alert';
+import loading from 'components/loading/loading';
+import globalize from 'lib/globalize';
+import 'elements/emby-checkbox/emby-checkbox';
+import 'elements/emby-textarea/emby-textarea';
+import 'elements/emby-input/emby-input';
+import 'elements/emby-select/emby-select';
+import 'elements/emby-button/emby-button';
+import Dashboard from 'utils/dashboard';
+import alert from 'components/alert';
 
 function loadPage(page, config, languageOptions, systemInfo) {
     page.querySelector('#txtServerName').value = systemInfo.ServerName;
@@ -53,7 +53,7 @@ function onSubmit() {
 
 export default function (view) {
     $('#btnSelectCachePath', view).on('click.selectDirectory', function () {
-        import('../../components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
+        import('components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
             const picker = new DirectoryBrowser();
             picker.show({
                 callback: function (path) {
@@ -70,7 +70,7 @@ export default function (view) {
         });
     });
     $('#btnSelectMetadataPath', view).on('click.selectDirectory', function () {
-        import('../../components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
+        import('components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
             const picker = new DirectoryBrowser();
             picker.show({
                 path: view.querySelector('#txtMetadataPath').value,

src/apps/dashboard/controllers/library.js

@@ -1,17 +1,18 @@
 import escapeHtml from 'escape-html';
-import taskButton from '../../scripts/taskbutton';
-import loading from '../../components/loading/loading';
-import globalize from '../../lib/globalize';
-import dom from '../../scripts/dom';
-import imageHelper from '../../utils/image';
-import '../../components/cardbuilder/card.scss';
-import '../../elements/emby-itemrefreshindicator/emby-itemrefreshindicator';
-import Dashboard, { pageClassOn, pageIdOn } from '../../utils/dashboard';
-import confirm from '../../components/confirm/confirm';
-import { getDefaultBackgroundClass } from '../../components/cardbuilder/cardBuilderUtils';
+
+import taskButton from 'scripts/taskbutton';
+import loading from 'components/loading/loading';
+import globalize from 'lib/globalize';
+import dom from 'scripts/dom';
+import imageHelper from 'utils/image';
+import 'components/cardbuilder/card.scss';
+import 'elements/emby-itemrefreshindicator/emby-itemrefreshindicator';
+import Dashboard, { pageClassOn, pageIdOn } from 'utils/dashboard';
+import confirm from 'components/confirm/confirm';
+import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
 
 function addVirtualFolder(page) {
-    import('../../components/mediaLibraryCreator/mediaLibraryCreator').then(({ default: MediaLibraryCreator }) => {
+    import('components/mediaLibraryCreator/mediaLibraryCreator').then(({ default: MediaLibraryCreator }) => {
         new MediaLibraryCreator({
             collectionTypeOptions: getCollectionTypeOptions().filter(function (f) {
                 return !f.hidden;
@@ -26,7 +27,7 @@ function addVirtualFolder(page) {
 }
 
 function editVirtualFolder(page, virtualFolder) {
-    import('../../components/mediaLibraryEditor/mediaLibraryEditor').then(({ default: MediaLibraryEditor }) => {
+    import('components/mediaLibraryEditor/mediaLibraryEditor').then(({ default: MediaLibraryEditor }) => {
         new MediaLibraryEditor({
             refresh: shouldRefreshLibraryAfterChanges(page),
             library: virtualFolder
@@ -60,7 +61,7 @@ function deleteVirtualFolder(page, virtualFolder) {
 }
 
 function refreshVirtualFolder(page, virtualFolder) {
-    import('../../components/refreshdialog/refreshdialog').then(({ default: RefreshDialog }) => {
+    import('components/refreshdialog/refreshdialog').then(({ default: RefreshDialog }) => {
         new RefreshDialog({
             itemIds: [virtualFolder.ItemId],
             serverId: ApiClient.serverId(),
@@ -70,7 +71,7 @@ function refreshVirtualFolder(page, virtualFolder) {
 }
 
 function renameVirtualFolder(page, virtualFolder) {
-    import('../../components/prompt/prompt').then(({ default: prompt }) => {
+    import('components/prompt/prompt').then(({ default: prompt }) => {
         prompt({
             label: globalize.translate('LabelNewName'),
             description: globalize.translate('MessageRenameMediaFolder'),
@@ -117,7 +118,7 @@ function showCardMenu(page, elem, virtualFolders) {
         icon: 'delete'
     });
 
-    import('../../components/actionSheet/actionSheet').then((actionsheet) => {
+    import('components/actionSheet/actionSheet').then((actionsheet) => {
         actionsheet.show({
             items: menuItems,
             positionTo: elem,
@@ -206,7 +207,7 @@ function reloadVirtualFolders(page, virtualFolders) {
 }
 
 function editImages(page, virtualFolder) {
-    import('../../components/imageeditor/imageeditor').then((imageEditor) => {
+    import('components/imageeditor/imageeditor').then((imageEditor) => {
         imageEditor.show({
             itemId: virtualFolder.ItemId,
             serverId: ApiClient.serverId()

src/apps/dashboard/controllers/librarydisplay.js

@@ -1,7 +1,7 @@
-import loading from '../../components/loading/loading';
-import '../../elements/emby-checkbox/emby-checkbox';
-import '../../elements/emby-button/emby-button';
-import Dashboard from '../../utils/dashboard';
+import loading from 'components/loading/loading';
+import 'elements/emby-checkbox/emby-checkbox';
+import 'elements/emby-button/emby-button';
+import Dashboard from 'utils/dashboard';
 
 export default function(view) {
     function loadData() {

src/apps/dashboard/controllers/livetvguideprovider.js

@@ -1,15 +1,15 @@
-import loading from '../components/loading/loading';
-import globalize from '../lib/globalize';
-import Dashboard, { pageIdOn } from '../utils/dashboard';
-import { getParameterByName } from '../utils/url.ts';
-import Events from '../utils/events.ts';
+import loading from 'components/loading/loading';
+import globalize from 'lib/globalize';
+import Dashboard, { pageIdOn } from 'utils/dashboard';
+import { getParameterByName } from 'utils/url';
+import Events from 'utils/events';
 
 function onListingsSubmitted() {
     Dashboard.navigate('dashboard/livetv');
 }
 
 function init(page, type, providerId) {
-    import(`../components/tvproviders/${type}`).then(({ default: ProviderFactory }) => {
+    import(`components/tvproviders/${type}`).then(({ default: ProviderFactory }) => {
         const instance = new ProviderFactory(page, providerId, {});
         Events.on(instance, 'submitted', onListingsSubmitted);
         instance.init();
@@ -17,7 +17,7 @@ function init(page, type, providerId) {
 }
 
 function loadTemplate(page, type, providerId) {
-    import(`../components/tvproviders/${type}.template.html`).then(({ default: html }) => {
+    import(`components/tvproviders/${type}.template.html`).then(({ default: html }) => {
         page.querySelector('.providerTemplate').innerHTML = globalize.translateHtml(html);
         init(page, type, providerId);
     });

src/apps/dashboard/controllers/livetvsettings.js

@@ -1,9 +1,10 @@
 import 'jquery';
-import loading from '../components/loading/loading';
-import globalize from '../lib/globalize';
-import '../elements/emby-button/emby-button';
-import Dashboard from '../utils/dashboard';
-import alert from '../components/alert';
+
+import loading from 'components/loading/loading';
+import globalize from 'lib/globalize';
+import 'elements/emby-button/emby-button';
+import Dashboard from 'utils/dashboard';
+import alert from 'components/alert';
 
 function loadPage(page, config) {
     page.querySelector('.liveTvSettingsForm').classList.remove('hide');
@@ -64,7 +65,7 @@ $(document).on('pageinit', '#liveTvSettingsPage', function () {
     const page = this;
     $('.liveTvSettingsForm').off('submit', onSubmit).on('submit', onSubmit);
     $('#btnSelectRecordingPath', page).on('click.selectDirectory', function () {
-        import('../components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
+        import('components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
             const picker = new DirectoryBrowser();
             picker.show({
                 callback: function (path) {
@@ -79,7 +80,7 @@ $(document).on('pageinit', '#liveTvSettingsPage', function () {
         });
     });
     $('#btnSelectMovieRecordingPath', page).on('click.selectDirectory', function () {
-        import('../components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
+        import('components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
             const picker = new DirectoryBrowser();
             picker.show({
                 callback: function (path) {
@@ -94,7 +95,7 @@ $(document).on('pageinit', '#liveTvSettingsPage', function () {
         });
     });
     $('#btnSelectSeriesRecordingPath', page).on('click.selectDirectory', function () {
-        import('../components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
+        import('components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
             const picker = new DirectoryBrowser();
             picker.show({
                 callback: function (path) {
@@ -109,7 +110,7 @@ $(document).on('pageinit', '#liveTvSettingsPage', function () {
         });
     });
     $('#btnSelectPostProcessorPath', page).on('click.selectDirectory', function () {
-        import('../components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
+        import('components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
             const picker = new DirectoryBrowser();
             picker.show({
                 includeFiles: true,

src/apps/dashboard/controllers/livetvstatus.js

@@ -1,19 +1,20 @@
 import 'jquery';
-import globalize from '../lib/globalize';
-import taskButton from '../scripts/taskbutton';
-import dom from '../scripts/dom';
-import layoutManager from '../components/layoutManager';
-import loading from '../components/loading/loading';
-import browser from '../scripts/browser';
-import '../components/listview/listview.scss';
-import '../styles/flexstyles.scss';
-import '../elements/emby-itemscontainer/emby-itemscontainer';
-import '../components/cardbuilder/card.scss';
+
+import globalize from 'lib/globalize';
+import taskButton from 'scripts/taskbutton';
+import dom from 'scripts/dom';
+import layoutManager from 'components/layoutManager';
+import loading from 'components/loading/loading';
+import browser from 'scripts/browser';
+import 'components/listview/listview.scss';
+import 'styles/flexstyles.scss';
+import 'elements/emby-itemscontainer/emby-itemscontainer';
+import 'components/cardbuilder/card.scss';
 import 'material-design-icons-iconfont';
-import '../elements/emby-button/emby-button';
-import Dashboard from '../utils/dashboard';
-import confirm from '../components/confirm/confirm';
-import { getDefaultBackgroundClass } from '../components/cardbuilder/cardBuilderUtils';
+import 'elements/emby-button/emby-button';
+import Dashboard from 'utils/dashboard';
+import confirm from 'components/confirm/confirm';
+import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
 
 const enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -153,7 +154,7 @@ function showProviderOptions(page, providerId, button) {
         id: 'map'
     });
 
-    import('../components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
+    import('components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
         actionsheet.show({
             items: items,
             positionTo: button
@@ -171,7 +172,7 @@ function showProviderOptions(page, providerId, button) {
 }
 
 function mapChannels(page, providerId) {
-    import('../components/channelMapper/channelMapper').then(({ default: ChannelMapper }) => {
+    import('components/channelMapper/channelMapper').then(({ default: ChannelMapper }) => {
         new ChannelMapper({
             serverId: ApiClient.serverInfo().Id,
             providerId: providerId
@@ -243,7 +244,7 @@ function addProvider(button) {
         id: 'xmltv'
     });
 
-    import('../components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
+    import('components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
         actionsheet.show({
             items: menuItems,
             positionTo: button,
@@ -269,7 +270,7 @@ function showDeviceMenu(button, tunerDeviceId) {
         id: 'edit'
     });
 
-    import('../components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
+    import('components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
         actionsheet.show({
             items: items,
             positionTo: button

src/apps/dashboard/controllers/livetvtuner.js

@@ -1,12 +1,12 @@
-import globalize from '../lib/globalize';
-import loading from '../components/loading/loading';
-import dom from '../scripts/dom';
-import '../elements/emby-input/emby-input';
-import '../elements/emby-button/emby-button';
-import '../elements/emby-checkbox/emby-checkbox';
-import '../elements/emby-select/emby-select';
-import Dashboard from '../utils/dashboard';
-import { getParameterByName } from '../utils/url.ts';
+import globalize from 'lib/globalize';
+import loading from 'components/loading/loading';
+import dom from 'scripts/dom';
+import 'elements/emby-input/emby-input';
+import 'elements/emby-button/emby-button';
+import 'elements/emby-checkbox/emby-checkbox';
+import 'elements/emby-select/emby-select';
+import Dashboard from 'utils/dashboard';
+import { getParameterByName } from 'utils/url';
 
 function isM3uVariant(type) {
     return ['nextpvr'].indexOf(type || '') !== -1;
@@ -112,7 +112,7 @@ function submitForm(page) {
 }
 
 function getDetectedDevice() {
-    return import('../components/tunerPicker').then(({ default: TunerPicker }) => {
+    return import('components/tunerPicker').then(({ default: TunerPicker }) => {
         return new TunerPicker().show({
             serverId: ApiClient.serverId()
         });
@@ -235,7 +235,7 @@ export default function (view, params) {
         });
     });
     view.querySelector('.btnSelectPath').addEventListener('click', function () {
-        import('../components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
+        import('components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
             const picker = new DirectoryBrowser();
             picker.show({
                 includeFiles: true,

src/apps/dashboard/controllers/metadataImages.js

@@ -2,11 +2,11 @@ import { ImageResolution } from '@jellyfin/sdk/lib/generated-client/models/image
 
 import 'jquery';
 
-import loading from '../../components/loading/loading';
-import globalize from '../../lib/globalize';
-import Dashboard from '../../utils/dashboard';
+import loading from 'components/loading/loading';
+import globalize from 'lib/globalize';
+import Dashboard from 'utils/dashboard';
 
-import '../../components/listview/listview.scss';
+import 'components/listview/listview.scss';
 
 function populateImageResolutionOptions(select) {
     let html = '';

src/apps/dashboard/controllers/metadatanfo.js

@@ -1,9 +1,10 @@
 import escapeHtml from 'escape-html';
 import 'jquery';
-import loading from '../../components/loading/loading';
-import globalize from '../../lib/globalize';
-import Dashboard from '../../utils/dashboard';
-import alert from '../../components/alert';
+
+import loading from 'components/loading/loading';
+import globalize from 'lib/globalize';
+import Dashboard from 'utils/dashboard';
+import alert from 'components/alert';
 
 function loadPage(page, config, users) {
     let html = '<option value="" selected="selected">' + globalize.translate('None') + '</option>';

src/apps/dashboard/controllers/networking.js

@@ -1,9 +1,9 @@
-import loading from '../../components/loading/loading';
-import globalize from '../../lib/globalize';
-import '../../elements/emby-checkbox/emby-checkbox';
-import '../../elements/emby-select/emby-select';
-import Dashboard from '../../utils/dashboard';
-import alert from '../../components/alert';
+import loading from 'components/loading/loading';
+import globalize from 'lib/globalize';
+import 'elements/emby-checkbox/emby-checkbox';
+import 'elements/emby-select/emby-select';
+import Dashboard from 'utils/dashboard';
+import alert from 'components/alert';
 
 function onSubmit(e) {
     const form = this;
@@ -159,7 +159,7 @@ export default function (view) {
         }
     });
     view.querySelector('#btnSelectCertPath').addEventListener('click', function () {
-        import('../../components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
+        import('components/directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
             const picker = new DirectoryBrowser();
             picker.show({
                 includeFiles: true,

src/apps/dashboard/controllers/playback.js

@@ -1,6 +1,7 @@
 import 'jquery';
-import loading from '../../components/loading/loading';
-import Dashboard from '../../utils/dashboard';
+
+import loading from 'components/loading/loading';
+import Dashboard from 'utils/dashboard';
 
 function loadPage(page, config) {
     page.querySelector('#txtMinResumePct').value = config.MinResumePct;

src/apps/dashboard/controllers/plugins/installed/index.js

@@ -1,11 +1,11 @@
-import loading from '../../../../components/loading/loading';
-import dom from '../../../../scripts/dom';
-import globalize from '../../../../lib/globalize';
-import '../../../../components/cardbuilder/card.scss';
-import '../../../../elements/emby-button/emby-button';
-import Dashboard, { pageIdOn } from '../../../../utils/dashboard';
-import confirm from '../../../../components/confirm/confirm';
-import { getDefaultBackgroundClass } from '../../../../components/cardbuilder/cardBuilderUtils';
+import loading from 'components/loading/loading';
+import dom from 'scripts/dom';
+import globalize from 'lib/globalize';
+import 'components/cardbuilder/card.scss';
+import 'elements/emby-button/emby-button';
+import Dashboard, { pageIdOn } from 'utils/dashboard';
+import confirm from 'components/confirm/confirm';
+import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
 
 function deletePlugin(page, uniqueid, version, name) {
     const msg = globalize.translate('UninstallPluginConfirmation', name);
@@ -187,7 +187,7 @@ function showPluginMenu(page, elem) {
         });
     }
 
-    import('../../../../components/actionSheet/actionSheet').then((actionsheet) => {
+    import('components/actionSheet/actionSheet').then((actionsheet) => {
         actionsheet.show({
             items: menuItems,
             positionTo: elem,

src/apps/dashboard/controllers/plugins/repositories/index.js

@@ -1,14 +1,14 @@
-import loading from '../../../../components/loading/loading';
-import globalize from '../../../../lib/globalize';
-import dialogHelper from '../../../../components/dialogHelper/dialogHelper';
-import confirm from '../../../../components/confirm/confirm';
+import loading from 'components/loading/loading';
+import globalize from 'lib/globalize';
+import dialogHelper from 'components/dialogHelper/dialogHelper';
+import confirm from 'components/confirm/confirm';
 
-import '../../../../elements/emby-button/emby-button';
-import '../../../../elements/emby-checkbox/emby-checkbox';
-import '../../../../elements/emby-select/emby-select';
+import 'elements/emby-button/emby-button';
+import 'elements/emby-checkbox/emby-checkbox';
+import 'elements/emby-select/emby-select';
 
-import '../../../../components/formdialog.scss';
-import '../../../../components/listview/listview.scss';
+import 'components/formdialog.scss';
+import 'components/listview/listview.scss';
 
 let repositories = [];
 

src/apps/dashboard/controllers/scheduledtasks/scheduledtask.js

@@ -1,12 +1,12 @@
-import loading from '../../../components/loading/loading';
-import datetime from '../../../scripts/datetime';
-import dom from '../../../scripts/dom';
-import globalize from '../../../lib/globalize';
-import '../../../elements/emby-input/emby-input';
-import '../../../elements/emby-button/emby-button';
-import '../../../elements/emby-select/emby-select';
-import confirm from '../../../components/confirm/confirm';
-import { getParameterByName } from '../../../utils/url.ts';
+import loading from 'components/loading/loading';
+import datetime from 'scripts/datetime';
+import dom from 'scripts/dom';
+import globalize from 'lib/globalize';
+import 'elements/emby-input/emby-input';
+import 'elements/emby-button/emby-button';
+import 'elements/emby-select/emby-select';
+import confirm from 'components/confirm/confirm';
+import { getParameterByName } from 'utils/url.ts';
 
 function fillTimeOfDay(select) {
     const options = [];
@@ -35,7 +35,7 @@ const ScheduledTaskPage = {
         view.querySelector('.taskName').innerHTML = task.Name;
         view.querySelector('#pTaskDescription').innerHTML = task.Description;
 
-        import('../../../components/listview/listview.scss').then(() => {
+        import('components/listview/listview.scss').then(() => {
             ScheduledTaskPage.loadTaskTriggers(view, task);
         });
 

src/apps/dashboard/controllers/scheduledtasks/scheduledtasks.js

@@ -1,14 +1,15 @@
-import 'jquery';
-import loading from '../../../components/loading/loading';
-import globalize from '../../../lib/globalize';
-import serverNotifications from '../../../scripts/serverNotifications';
 import { formatDistance, formatDistanceToNow } from 'date-fns';
-import { getLocale, getLocaleWithSuffix } from '../../../utils/dateFnsLocale.ts';
-import Events from '../../../utils/events.ts';
+import 'jquery';
 
-import '../../../components/listview/listview.scss';
-import '../../../elements/emby-button/emby-button';
+import loading from 'components/loading/loading';
+import globalize from 'lib/globalize';
 import dom from 'scripts/dom';
+import serverNotifications from 'scripts/serverNotifications';
+import { getLocale, getLocaleWithSuffix } from 'utils/dateFnsLocale.ts';
+import Events from 'utils/events.ts';
+
+import 'components/listview/listview.scss';
+import 'elements/emby-button/emby-button';
 
 function reloadList(page) {
     ApiClient.getScheduledTasks({

src/apps/dashboard/controllers/streaming.js

@@ -1,6 +1,7 @@
 import 'jquery';
-import loading from '../../components/loading/loading';
-import Dashboard from '../../utils/dashboard';
+
+import loading from 'components/loading/loading';
+import Dashboard from 'utils/dashboard';
 
 function loadPage(page, config) {
     page.querySelector('#txtRemoteClientBitrateLimit').value = config.RemoteClientBitrateLimit / 1e6 || '';

src/apps/dashboard/routes/_legacyRoutes.ts

@@ -6,92 +6,92 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
         path: '/dashboard',
         pageProps: {
             appType: AppType.Dashboard,
-            controller: 'dashboard/dashboard',
-            view: 'dashboard/dashboard.html'
+            controller: 'dashboard',
+            view: 'dashboard.html'
         }
     }, {
         path: 'settings',
         pageProps: {
             appType: AppType.Dashboard,
-            controller: 'dashboard/general',
-            view: 'dashboard/general.html'
+            controller: 'general',
+            view: 'general.html'
         }
     }, {
         path: 'networking',
         pageProps: {
             appType: AppType.Dashboard,
-            controller: 'dashboard/networking',
-            view: 'dashboard/networking.html'
+            controller: 'networking',
+            view: 'networking.html'
         }
     }, {
         path: 'devices',
         pageProps: {
             appType: AppType.Dashboard,
-            controller: 'dashboard/devices/devices',
-            view: 'dashboard/devices/devices.html'
+            controller: 'devices/devices',
+            view: 'devices/devices.html'
         }
     }, {
         path: 'devices/edit',
         pageProps: {
             appType: AppType.Dashboard,
-            controller: 'dashboard/devices/device',
-            view: 'dashboard/devices/device.html'
+            controller: 'devices/device',
+            view: 'devices/device.html'
         }
     }, {
         path: 'libraries',
         pageProps: {
             appType: AppType.Dashboard,
-            controller: 'dashboard/library',
-            view: 'dashboard/library.html'
+            controller: 'library',
+            view: 'library.html'
         }
     }, {
         path: 'libraries/display',
         pageProps: {
             appType: AppType.Dashboard,
-            controller: 'dashboard/librarydisplay',
-            view: 'dashboard/librarydisplay.html'
+            controller: 'librarydisplay',
+            view: 'librarydisplay.html'
         }
     }, {
         path: 'playback/transcoding',
         pageProps: {
             appType: AppType.Dashboard,
-            controller: 'dashboard/encodingsettings',
-            view: 'dashboard/encodingsettings.html'
+            controller: 'encodingsettings',
+            view: 'encodingsettings.html'
         }
     }, {
         path: 'libraries/metadata',
         pageProps: {
             appType: AppType.Dashboard,
-            controller: 'dashboard/metadataImages',
-            view: 'dashboard/metadataimages.html'
+            controller: 'metadataImages',
+            view: 'metadataimages.html'
         }
     }, {
         path: 'libraries/nfo',
         pageProps: {
             appType: AppType.Dashboard,
-            controller: 'dashboard/metadatanfo',
-            view: 'dashboard/metadatanfo.html'
+            controller: 'metadatanfo',
+            view: 'metadatanfo.html'
         }
     }, {
         path: 'playback/resume',
         pageProps: {
             appType: AppType.Dashboard,
-            controller: 'dashboard/playback',
-            view: 'dashboard/playback.html'
+            controller: 'playback',
+            view: 'playback.html'
         }
     }, {
         path: 'plugins/catalog',
         pageProps: {
             appType: AppType.Dashboard,
-            controller: 'dashboard/plugins/available/index',
-            view: 'dashboard/plugins/available/index.html'
+            controller: 'plugins/available/index',
+            view: 'plugins/available/index.html'
         }
     }, {
         path: 'plugins/repositories',
         pageProps: {
             appType: AppType.Dashboard,
-            controller: 'dashboard/plugins/repositories/index',
-            view: 'dashboard/plugins/repositories/index.html'
+            controller: 'plugins/repositories/index',
+            view: 'plugins/repositories/index.html'
         }
     }, {
         path: 'livetv/guide',
@@ -125,29 +125,29 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
         path: 'plugins',
         pageProps: {
             appType: AppType.Dashboard,
-            controller: 'dashboard/plugins/installed/index',
-            view: 'dashboard/plugins/installed/index.html'
+            controller: 'plugins/installed/index',
+            view: 'plugins/installed/index.html'
         }
     }, {
         path: 'tasks/edit',
         pageProps: {
             appType: AppType.Dashboard,
-            controller: 'dashboard/scheduledtasks/scheduledtask',
-            view: 'dashboard/scheduledtasks/scheduledtask.html'
+            controller: 'scheduledtasks/scheduledtask',
+            view: 'scheduledtasks/scheduledtask.html'
         }
     }, {
         path: 'tasks',
         pageProps: {
             appType: AppType.Dashboard,
-            controller: 'dashboard/scheduledtasks/scheduledtasks',
-            view: 'dashboard/scheduledtasks/scheduledtasks.html'
+            controller: 'scheduledtasks/scheduledtasks',
+            view: 'scheduledtasks/scheduledtasks.html'
         }
     }, {
         path: 'playback/streaming',
         pageProps: {
             appType: AppType.Dashboard,
-            view: 'dashboard/streaming.html',
-            controller: 'dashboard/streaming'
+            view: 'streaming.html',
+            controller: 'streaming'
         }
     }
 ];

src/components/viewManager/ViewManagerPage.tsx

@@ -33,17 +33,33 @@ interface ViewOptions {
     }
 }
 
+const importController = (
+    appType: AppType,
+    controller: string,
+    view: string
+) => {
+    if (appType === AppType.Dashboard) {
+        return Promise.all([
+            import(/* webpackChunkName: "[request]" */ `../../apps/dashboard/controllers/${controller}`),
+            import(/* webpackChunkName: "[request]" */ `../../apps/dashboard/controllers/${view}`)
+                .then(html => globalize.translateHtml(html))
+        ]);
+    }
+
+    return Promise.all([
+        import(/* webpackChunkName: "[request]" */ `../../controllers/${controller}`),
+        import(/* webpackChunkName: "[request]" */ `../../controllers/${view}`)
+            .then(html => globalize.translateHtml(html))
+    ]);
+};
+
 const loadView = async (
     appType: AppType,
     controller: string,
     view: string,
     viewOptions: ViewOptions
 ) => {
-    const [ controllerFactory, viewHtml ] = await Promise.all([
-        import(/* webpackChunkName: "[request]" */ `../../controllers/${controller}`),
-        import(/* webpackChunkName: "[request]" */ `../../controllers/${view}`)
-            .then(html => globalize.translateHtml(html))
-    ]);
+    const [ controllerFactory, viewHtml ] = await importController(appType, controller, view);
 
     viewManager.loadView({
         ...viewOptions,