Make import paths ES6-compatible

src/bundle.js

@@ -86,7 +86,7 @@ _define('JavascriptSubtitlesOctopus', function() {
 
 // material-icons
 const materialIcons = require('material-design-icons-iconfont/dist/material-design-icons.css');
-_define('material-icons', function() {
+_define('material-design-icons-iconfont', function() {
     return materialIcons;
 });
 

src/components/accessSchedule/accessSchedule.js

@@ -1,3 +1,4 @@
+
 /* eslint-disable indent */
 
 /**
@@ -5,12 +6,12 @@
  * @module components/accessSchedule/accessSchedule
  */
 
-import dialogHelper from 'dialogHelper';
-import datetime from 'datetime';
-import globalize from 'globalize';
-import 'emby-select';
-import 'paper-icon-button-light';
-import 'formDialogStyle';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import datetime from '../../scripts/datetime';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
 
     function getDisplayTime(hours) {
         let minutes = 0;
@@ -59,7 +60,7 @@ import 'formDialogStyle';
 
     export function show(options) {
         return new Promise((resolve, reject) => {
-            import('text!./accessSchedule.template.html').then(({default: template}) => {
+            import('./accessSchedule.template.html').then(({default: template}) => {
                 const dlg = dialogHelper.createDialog({
                     removeOnClose: true,
                     size: 'small'

src/components/actionSheet/actionSheet.js

@@ -1,12 +1,12 @@
-import dialogHelper from 'dialogHelper';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import dom from 'dom';
-import 'emby-button';
-import 'css!./actionSheet';
-import 'material-icons';
-import 'scrollStyles';
-import 'listViewStyle';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import dom from '../../scripts/dom';
+import '../../elements/emby-button/emby-button';
+import './actionSheet.css';
+import 'material-design-icons-iconfont';
+import '../../assets/css/scrollstyles.css';
+import '../../components/listview/listview.css';
 
 function getOffsets(elems) {
     const results = [];
@@ -71,7 +71,7 @@ function getPosition(options, dlg) {
 }
 
 function centerFocus(elem, horiz, on) {
-    import('scrollHelper').then(({default: scrollHelper}) => {
+    import('../../scripts/scrollHelper').then((scrollHelper) => {
         const fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });

src/components/activitylog.js

@@ -1,11 +1,12 @@
-import events from 'events';
-import globalize from 'globalize';
-import dom from 'dom';
+import events from 'jellyfin-apiclient';
+import globalize from '../scripts/globalize';
+import dom from '../scripts/dom';
 import * as datefns from 'date-fns';
-import dfnshelper from 'dfnshelper';
-import serverNotifications from 'serverNotifications';
-import 'emby-button';
-import 'listViewStyle';
+import dfnshelper from '../scripts/dfnshelper';
+import serverNotifications from '../scripts/serverNotifications';
+import connectionManager from 'jellyfin-apiclient';
+import '../elements/emby-button/emby-button';
+import './listview/listview.css';
 
 /* eslint-disable indent */
 
@@ -127,7 +128,7 @@ import 'listViewStyle';
     }
 
     function showItemOverview(item) {
-        import('alert').then(({default: alert}) => {
+        import('./alert').then((alert) => {
             alert({
                 text: item.Overview
             });

src/components/alert.js

@@ -1,6 +1,7 @@
-import browser from 'browser';
-import dialog from 'dialog';
-import globalize from 'globalize';
+
+import browser from '../scripts/browser';
+import dialog from './dialog/dialog';
+import globalize from '../scripts/globalize';
 
 /* eslint-disable indent */
 

src/components/alphaPicker/alphaPicker.js

@@ -5,12 +5,12 @@
  * @module components/alphaPicker/alphaPicker
  */
 
-import focusManager from 'focusManager';
-import layoutManager from 'layoutManager';
-import dom from 'dom';
-import 'css!./style.css';
-import 'paper-icon-button-light';
-import 'material-icons';
+import focusManager from '../focusManager';
+import layoutManager from '../layoutManager';
+import dom from '../../scripts/dom';
+import './style.css';
+import '../../elements/emby-button/paper-icon-button-light';
+import 'material-design-icons-iconfont';
 
     const selectedButtonClass = 'alphaPickerButton-selected';
 

src/components/appFooter/appFooter.js

@@ -1,4 +1,4 @@
-import 'css!./appFooter';
+import './appFooter.css';
 
 function render(options) {
     const elem = document.createElement('div');

src/components/appRouter.js

@@ -1,13 +1,14 @@
-import appHost from 'apphost';
-import appSettings from 'appSettings';
-import backdrop from 'backdrop';
-import browser from 'browser';
-import events from 'events';
-import globalize from 'globalize';
-import itemHelper from 'itemHelper';
-import loading from 'loading';
+import appHost from './apphost';
+import appSettings from '../scripts/settings/appSettings';
+import backdrop from './backdrop/backdrop';
+import browser from '../scripts/browser';
+import connectionManager from 'jellyfin-apiclient';
+import events from 'jellyfin-apiclient';
+import globalize from '../scripts/globalize';
+import itemHelper from './itemHelper';
+import loading from './loading/loading';
 import page from 'page';
-import viewManager from 'viewManager';
+import viewManager from './viewManager/viewManager';
 
 class AppRouter {
     allRoutes = [];
@@ -286,7 +287,7 @@ class AppRouter {
                 this.showWelcome();
                 break;
             case 'ServerUpdateNeeded':
-                import('alert').then(({default: alert}) =>{
+                import('./alert').then((alert) =>{
                     alert({
                         text: globalize.translate('ServerUpdateNeeded', 'https://github.com/jellyfin/jellyfin'),
                         html: globalize.translate('ServerUpdateNeeded', '<a href="https://github.com/jellyfin/jellyfin">https://github.com/jellyfin/jellyfin</a>')
@@ -323,7 +324,7 @@ class AppRouter {
             url += '?' + ctx.querystring;
         }
 
-        import('text!' + url).then(({default: html}) => {
+        import('' + url).then(({default: html}) => {
             this.loadContent(ctx, route, html, request);
         });
     }
@@ -340,7 +341,7 @@ class AppRouter {
         };
 
         if (route.controller) {
-            import('controllers/' + route.controller).then(onInitComplete);
+            import('../controllers/' + route.controller).then(onInitComplete);
         } else {
             onInitComplete();
         }
@@ -407,7 +408,7 @@ class AppRouter {
         this.forcedLogoutMsg = null;
 
         if (msg) {
-            import('alert').then((alert) => {
+            import('./alert').then((alert) => {
                 alert(msg);
             });
         }

src/components/apphost.js

@@ -1,9 +1,9 @@
-import appSettings from 'appSettings';
-import browser from 'browser';
-import events from 'events';
-import * as htmlMediaHelper from 'htmlMediaHelper';
-import * as webSettings from 'webSettings';
-import globalize from 'globalize';
+import appSettings from '../scripts/settings/appSettings';
+import browser from '../scripts/browser';
+import events from 'jellyfin-apiclient';
+import * as htmlMediaHelper from '../components/htmlMediaHelper';
+import * as webSettings from '../scripts/settings/webSettings';
+import globalize from '../scripts/globalize';
 
 function getBaseProfileOptions(item) {
     const disableHlsVideoAudioCodecs = [];
@@ -26,7 +26,7 @@ function getBaseProfileOptions(item) {
 
 function getDeviceProfile(item, options = {}) {
     return new Promise(function (resolve) {
-        import('browserdeviceprofile').then(({default: profileBuilder}) => {
+        import('../scripts/browserDeviceProfile').then((profileBuilder) => {
             let profile;
 
             if (window.NativeShell) {
@@ -296,7 +296,7 @@ function askForExit() {
         return;
     }
 
-    import('actionsheet').then(({default: actionsheet}) => {
+    import('../components/actionSheet/actionSheet').then((actionsheet) => {
         exitPromise = actionsheet.show({
             title: globalize.translate('MessageConfirmAppExit'),
             items: [

src/components/autoFocuser.js

@@ -5,8 +5,8 @@
  * @module components/autoFocuser
  */
 
-import focusManager from 'focusManager';
-import layoutManager from 'layoutManager';
+import focusManager from './focusManager';
+import layoutManager from './layoutManager';
 
     /**
      * Previously selected element.

src/components/backdrop/backdrop.js

@@ -1,8 +1,9 @@
-import browser from 'browser';
-import playbackManager from 'playbackManager';
-import dom from 'dom';
-import * as userSettings from 'userSettings';
-import 'css!./backdrop';
+import browser from '../../scripts/browser';
+import connectionManager from 'jellyfin-apiclient';
+import playbackManager from '../playback/playbackmanager';
+import dom from '../../scripts/dom';
+import * as userSettings from '../../scripts/settings/userSettings';
+import './backdrop.css';
 
 /* eslint-disable indent */
 

src/components/cardbuilder/cardBuilder.js

@@ -5,21 +5,22 @@
  * @module components/cardBuilder/cardBuilder
  */
 
-import datetime from 'datetime';
-import imageLoader from 'imageLoader';
-import itemHelper from 'itemHelper';
-import focusManager from 'focusManager';
-import indicators from 'indicators';
-import globalize from 'globalize';
-import layoutManager from 'layoutManager';
-import dom from 'dom';
-import browser from 'browser';
-import playbackManager from 'playbackManager';
-import itemShortcuts from 'itemShortcuts';
-import imageHelper from 'scripts/imagehelper';
-import 'css!./card';
-import 'paper-icon-button-light';
-import 'programStyles';
+import datetime from '../../scripts/datetime';
+import imageLoader from '../images/imageLoader';
+import connectionManager from 'jellyfin-apiclient';
+import itemHelper from '../itemHelper';
+import focusManager from '../focusManager';
+import indicators from '../indicators/indicators';
+import globalize from '../../scripts/globalize';
+import layoutManager from '../layoutManager';
+import dom from '../../scripts/dom';
+import browser from '../../scripts/browser';
+import playbackManager from '../playback/playbackmanager';
+import itemShortcuts from '../shortcuts';
+import imageHelper from '../../scripts/imagehelper';
+import './card.css';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../guide/programs.css';
 
         const enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -1121,7 +1122,7 @@ import 'programStyles';
             if (!refreshIndicatorLoaded) {
                 refreshIndicatorLoaded = true;
                 /* eslint-disable-next-line  @babel/no-unused-expressions */
-                import('emby-itemrefreshindicator');
+                import('../../elements/emby-itemrefreshindicator/emby-itemrefreshindicator');
             }
         }
 
@@ -1453,7 +1454,7 @@ import 'programStyles';
 
             if (itemHelper.canMarkPlayed(item)) {
                 /* eslint-disable-next-line  @babel/no-unused-expressions */
-                import('emby-playstatebutton');
+                import('../../elements/emby-playstatebutton/emby-playstatebutton');
                 html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover check"></span></button>';
             }
 
@@ -1461,7 +1462,7 @@ import 'programStyles';
                 const likes = userData.Likes == null ? '' : userData.Likes;
 
                 /* eslint-disable-next-line  @babel/no-unused-expressions */
-                import('emby-ratingbutton');
+                import('../../elements/emby-ratingbutton/emby-ratingbutton');
                 html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite"></span></button>';
             }
 

src/components/cardbuilder/chaptercardbuilder.js

@@ -5,10 +5,11 @@
  * @module components/cardBuilder/chaptercardbuilder
  */
 
-import datetime from 'datetime';
-import imageLoader from 'imageLoader';
-import layoutManager from 'layoutManager';
-import browser from 'browser';
+import datetime from '../../scripts/datetime';
+import imageLoader from '../images/imageLoader';
+import connectionManager from 'jellyfin-apiclient';
+import layoutManager from '../layoutManager';
+import browser from '../../scripts/browser';
 
     const enableFocusTransform = !browser.slow && !browser.edge;
 

src/components/cardbuilder/peoplecardbuilder.js

@@ -5,7 +5,7 @@
  * @module components/cardBuilder/peoplecardbuilder
  */
 
-import cardBuilder from 'cardBuilder';
+import cardBuilder from '../cardbuilder/cardBuilder';
 
     export function buildPeopleCards(items, options) {
         options = Object.assign(options || {}, {

src/components/channelMapper/channelMapper.js

@@ -1,14 +1,15 @@
-import dom from 'dom';
-import dialogHelper from 'dialogHelper';
-import loading from 'loading';
-import globalize from 'globalize';
-import actionsheet from 'actionsheet';
-import 'emby-input';
-import 'paper-icon-button-light';
-import 'emby-button';
-import 'listViewStyle';
-import 'material-icons';
-import 'formDialogStyle';
+import dom from '../../scripts/dom';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import loading from '../loading/loading';
+import connectionManager from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
+import actionsheet from '../actionSheet/actionSheet';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-button/emby-button';
+import '../listview/listview.css';
+import 'material-design-icons-iconfont';
+import '../formdialog.css';
 
 export default class channelMapper {
     constructor(options) {

src/components/collectionEditor/collectionEditor.js

@@ -1,17 +1,18 @@
-import dom from 'dom';
-import dialogHelper from 'dialogHelper';
-import loading from 'loading';
-import layoutManager from 'layoutManager';
-import appRouter from 'appRouter';
-import globalize from 'globalize';
-import 'emby-checkbox';
-import 'emby-input';
-import 'paper-icon-button-light';
-import 'emby-select';
-import 'material-icons';
-import 'css!./../formdialog';
-import 'emby-button';
-import 'flexStyles';
+import dom from '../../scripts/dom';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import loading from '../loading/loading';
+import layoutManager from '../layoutManager';
+import connectionManager from 'jellyfin-apiclient';
+import appRouter from '../appRouter';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-select/emby-select';
+import 'material-design-icons-iconfont';
+import '../formdialog.css';
+import '../../assets/css/flexstyles.css';
 
 /* eslint-disable indent */
 
@@ -80,7 +81,7 @@ import 'flexStyles';
             dlg.submitted = true;
             dialogHelper.close(dlg);
 
-            import('toast').then(({default: toast}) => {
+            import('../toast/toast').then((toast) => {
                 toast(globalize.translate('MessageItemsAdded'));
             });
         });
@@ -199,7 +200,7 @@ import 'flexStyles';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then((scrollHelper) => {
+        import('../../scripts/scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/confirm/confirm.js

@@ -1,6 +1,6 @@
-import browser from 'browser';
-import dialog from 'dialog';
-import globalize from 'globalize';
+import browser from '../../scripts/browser';
+import dialog from '../dialog/dialog';
+import globalize from '../../scripts/globalize';
 
 /* eslint-disable indent */
 export default (() => {

src/components/dialog/dialog.js

@@ -1,14 +1,14 @@
-import dialogHelper from 'dialogHelper';
-import dom from 'dom';
-import layoutManager from 'layoutManager';
-import scrollHelper from 'scrollHelper';
-import globalize from 'globalize';
-import 'material-icons';
-import 'emby-button';
-import 'paper-icon-button-light';
-import 'emby-input';
-import 'formDialogStyle';
-import 'flexStyles';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import dom from '../../scripts/dom';
+import layoutManager from '../layoutManager';
+import scrollHelper from '../../scripts/scrollHelper';
+import globalize from '../../scripts/globalize';
+import 'material-design-icons-iconfont';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-input/emby-input';
+import '../formdialog.css';
+import '../../assets/css/flexstyles.css';
 
 /* eslint-disable indent */
 
@@ -80,7 +80,8 @@ import 'flexStyles';
                 buttonClass += ' formDialogFooterItem-vertical formDialogFooterItem-nomarginbottom';
             }
 
-            html += `<button is="emby-button" type="button" class="${buttonClass}" data-id="${item.id}"${autoFocus}>${item.name}</button>`;
+            html += `<button is="
+            " type="button" class="${buttonClass}" data-id="${item.id}"${autoFocus}>${item.name}</button>`;
 
             if (item.description) {
                 html += `<div class="formDialogFooterItem formDialogFooterItem-autosize fieldDescription" style="margin-top:.25em!important;margin-bottom:1.25em!important;">${item.description}</div>`;
@@ -128,7 +129,7 @@ import 'flexStyles';
             options = text;
         }
 
-        const { default: template } = await import('text!./dialog.template.html');
+        const { default: template } = await import('./dialog.template.html');
         return new Promise((resolve, reject) => {
             showDialog(options, template).then(resolve, reject);
         });

src/components/dialogHelper/dialogHelper.js

@@ -1,11 +1,11 @@
-import appRouter from 'appRouter';
-import focusManager from 'focusManager';
-import browser from 'browser';
-import layoutManager from 'layoutManager';
-import inputManager from 'inputManager';
-import dom from 'dom';
-import 'css!./dialoghelper.css';
-import 'scrollStyles';
+import appRouter from '../appRouter';
+import focusManager from '../focusManager';
+import browser from '../../scripts/browser';
+import layoutManager from '../layoutManager';
+import inputManager from '../../scripts/inputManager';
+import dom from '../../scripts/dom';
+import './dialoghelper.css';
+import '../../assets/css/scrollstyles.css';
 
 /* eslint-disable indent */
 
@@ -354,7 +354,7 @@ import 'scrollStyles';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then((scrollHelper) => {
+        import('../../scripts/scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/directorybrowser/directorybrowser.js

@@ -1,13 +1,13 @@
-import loading from 'loading';
-import dialogHelper from 'dialogHelper';
-import dom from 'dom';
-import globalize from 'globalize';
-import 'listViewStyle';
-import 'emby-input';
-import 'paper-icon-button-light';
-import 'css!./directorybrowser';
-import 'formDialogStyle';
-import 'emby-button';
+import loading from '../loading/loading';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import dom from '../../scripts/dom';
+import globalize from '../../scripts/globalize';
+import '../listview/listview.css';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-button/paper-icon-button-light';
+import './directorybrowser.css';
+import '../formdialog.css';
+import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
@@ -157,7 +157,7 @@ import 'emby-button';
     }
 
     function alertTextWithOptions(options) {
-        import('alert').then(({default: alert}) => {
+        import('../alert').then((alert) => {
             alert(options);
         });
     }

src/components/displaySettings/displaySettings.js

@@ -1,16 +1,17 @@
-import browser from 'browser';
-import layoutManager from 'layoutManager';
-import pluginManager from 'pluginManager';
-import appHost from 'apphost';
-import focusManager from 'focusManager';
-import datetime from 'datetime';
-import globalize from 'globalize';
-import loading from 'loading';
-import skinManager from 'skinManager';
-import events from 'events';
-import 'emby-select';
-import 'emby-checkbox';
-import 'emby-button';
+import browser from '../../scripts/browser';
+import layoutManager from '../layoutManager';
+import pluginManager from '../pluginManager';
+import appHost from '../apphost';
+import focusManager from '../focusManager';
+import datetime from '../../scripts/datetime';
+import globalize from '../../scripts/globalize';
+import loading from '../loading/loading';
+import connectionManager from 'jellyfin-apiclient';
+import skinManager from '../../scripts/themeManager';
+import events from 'jellyfin-apiclient';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
@@ -168,7 +169,7 @@ import 'emby-button';
             saveUser(context, user, userSettings, apiClient).then(() => {
                 loading.hide();
                 if (enableSaveConfirmation) {
-                    import('toast').then(({default: toast}) => {
+                    import('../toast/toast').then((toast) => {
                         toast(globalize.translate('SettingsSaved'));
                     });
                 }
@@ -198,7 +199,7 @@ import 'emby-button';
     }
 
     async function embed(options, self) {
-        const { default: template } = await import('text!./displaySettings.template.html');
+        const { default: template } = await import('./displaySettings.template.html');
         options.element.innerHTML = globalize.translateHtml(template, 'core');
         options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
         if (options.enableSaveButton) {

src/components/favoriteitems.js

@@ -1,12 +1,12 @@
-import loading from 'loading';
-import cardBuilder from 'cardBuilder';
-import dom from 'dom';
-import appHost from 'apphost';
-import imageLoader from 'imageLoader';
-import globalize from 'globalize';
-import layoutManager from 'layoutManager';
-import 'scrollStyles';
-import 'emby-itemscontainer';
+import loading from './loading/loading';
+import cardBuilder from './cardbuilder/cardBuilder';
+import dom from '../scripts/dom';
+import appHost from './apphost';
+import imageLoader from './images/imageLoader';
+import globalize from '../scripts/globalize';
+import layoutManager from './layoutManager';
+import '../assets/css/scrollstyles.css';
+import '../elements/emby-itemscontainer/emby-itemscontainer';
 
 /* eslint-disable indent */
 

src/components/filterdialog/filterdialog.js

@@ -1,10 +1,11 @@
-import dom from 'dom';
-import dialogHelper from 'dialogHelper';
-import globalize from 'globalize';
-import events from 'events';
-import 'emby-checkbox';
-import 'emby-collapse';
-import 'css!./style.css';
+import dom from '../../scripts/dom';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import globalize from '../../scripts/globalize';
+import connectionManager from 'jellyfin-apiclient';
+import events from 'jellyfin-apiclient';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-collapse/emby-collapse';
+import './style.css';
 
 /* eslint-disable indent */
     function renderOptions(context, selector, cssClass, items, isCheckedFn) {
@@ -401,7 +402,7 @@ import 'css!./style.css';
         }
 
         show() {
-            return import('text!./filterdialog.template.html').then(({default: template}) => {
+            return import('./filterdialog.template.html').then(({default: template}) => {
                 return new Promise((resolve) => {
                     const dlg = dialogHelper.createDialog({
                         removeOnClose: true,

src/components/filtermenu/filtermenu.js

@@ -1,18 +1,19 @@
-import dom from 'dom';
-import focusManager from 'focusManager';
-import dialogHelper from 'dialogHelper';
-import inputManager from 'inputManager';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import * as userSettings from 'userSettings';
-import 'emby-checkbox';
-import 'emby-input';
-import 'paper-icon-button-light';
-import 'emby-select';
-import 'material-icons';
-import 'css!./../formdialog';
-import 'emby-button';
-import 'flexStyles';
+import dom from '../../scripts/dom';
+import focusManager from '../focusManager';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import inputManager from '../../scripts/inputManager';
+import layoutManager from '../layoutManager';
+import connectionManager from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
+import * as userSettings from '../../scripts/settings/userSettings';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-select/emby-select';
+import 'material-design-icons-iconfont';
+import '../formdialog.css';
+import '../../assets/css/flexstyles.css';
 
 function onSubmit(e) {
     e.preventDefault();
@@ -80,7 +81,7 @@ function moveCheckboxFocus(elem, offset) {
     }
 }
 function centerFocus(elem, horiz, on) {
-    import('scrollHelper').then(({ default: scrollHelper }) => {
+    import('../../scripts/scrollHelper').then((scrollHelper) => {
         const fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
@@ -209,7 +210,7 @@ function loadDynamicFilters(context, options) {
 class FilterMenu {
     show(options) {
         return new Promise( (resolve, reject) => {
-            import('text!./filtermenu.template.html').then(({ default: template }) => {
+            import('./filtermenu.template.html').then(({ default: template }) => {
                 const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false

src/components/focusManager.js

@@ -1,7 +1,7 @@
 /* eslint-disable indent */
 
-import dom from 'dom';
-import scrollManager from 'scrollManager';
+import dom from '../scripts/dom';
+import scrollManager from './scrollManager';
 
     const scopes = [];
     function pushScope(elem) {

src/components/groupedcards.js

@@ -1,7 +1,8 @@
 /* eslint-disable indent */
 
-import dom from 'dom';
-import appRouter from 'appRouter';
+import dom from '../scripts/dom';
+import appRouter from './appRouter';
+import connectionManager from 'jellyfin-apiclient';
 
     function onGroupedCardClick(e, card) {
         const itemId = card.getAttribute('data-id');

src/components/guide/guide-settings.js

@@ -1,12 +1,12 @@
-import dialogHelper from 'dialogHelper';
-import globalize from 'globalize';
-import * as userSettings from 'userSettings';
-import layoutManager from 'layoutManager';
-import scrollHelper from 'scrollHelper';
-import 'emby-checkbox';
-import 'emby-radio';
-import 'css!./../formdialog';
-import 'material-icons';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import globalize from '../../scripts/globalize';
+import * as userSettings from '../../scripts/settings/userSettings';
+import layoutManager from '../layoutManager';
+import scrollHelper from '../../scripts/scrollHelper';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-radio/emby-radio';
+import '../formdialog.css';
+import 'material-design-icons-iconfont';
 
 function saveCategories(context, options) {
     const categories = [];
@@ -88,7 +88,7 @@ function showEditor(options) {
     return new Promise(function (resolve, reject) {
         let settingsChanged = false;
 
-        import('text!./guide-settings.template.html').then(({ default: template }) => {
+        import('./guide-settings.template.html').then(({ default: template }) => {
             const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false

src/components/guide/guide.js

@@ -1,32 +1,33 @@
-import inputManager from 'inputManager';
-import browser from 'browser';
-import globalize from 'globalize';
-import scrollHelper from 'scrollHelper';
-import serverNotifications from 'serverNotifications';
-import loading from 'loading';
-import datetime from 'datetime';
-import focusManager from 'focusManager';
-import playbackManager from 'playbackManager';
-import * as userSettings from 'userSettings';
-import imageLoader from 'imageLoader';
-import events from 'events';
-import layoutManager from 'layoutManager';
-import itemShortcuts from 'itemShortcuts';
-import dom from 'dom';
-import 'css!./guide.css';
-import 'programStyles';
-import 'material-icons';
-import 'scrollStyles';
-import 'emby-programcell';
-import 'emby-button';
-import 'paper-icon-button-light';
-import 'emby-tabs';
-import 'emby-scroller';
-import 'flexStyles';
-import 'webcomponents';
+import inputManager from '../../scripts/inputManager';
+import browser from '../../scripts/browser';
+import globalize from '../../scripts/globalize';
+import connectionManager from 'jellyfin-apiclient';
+import scrollHelper from '../../scripts/scrollHelper';
+import serverNotifications from '../../scripts/serverNotifications';
+import loading from '../loading/loading';
+import datetime from '../../scripts/datetime';
+import focusManager from '../focusManager';
+import playbackManager from '../playback/playbackmanager';
+import * as userSettings from '../../scripts/settings/userSettings';
+import imageLoader from '../images/imageLoader';
+import events from 'jellyfin-apiclient';
+import layoutManager from '../layoutManager';
+import itemShortcuts from '../shortcuts';
+import dom from '../../scripts/dom';
+import './guide.css';
+import './programs.css';
+import 'material-design-icons-iconfont';
+import '../../assets/css/scrollstyles.css';
+import '../../elements/emby-programcell/emby-programcell';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-tabs/emby-tabs';
+import '../../elements/emby-scroller/emby-scroller';
+import '../../assets/css/flexstyles.css';
+import 'webcomponents.js';
 
 function showViewSettings(instance) {
-    import('guide-settings-dialog').then(({default: guideSettingsDialog}) => {
+    import('./guide-settings').then((guideSettingsDialog) => {
         guideSettingsDialog.show(instance.categoryOptions).then(function () {
             instance.refresh();
         });
@@ -1091,7 +1092,7 @@ function Guide(options) {
         }
     }
 
-    import('text!./tvguide.template.html').then(({default: template}) => {
+    import('./tvguide.template.html').then(({default: template}) => {
         const context = options.element;
 
         context.classList.add('tvguide');

src/components/homeScreenSettings/homeScreenSettings.js

@@ -1,13 +1,15 @@
-import layoutManager from 'layoutManager';
-import focusManager from 'focusManager';
-import globalize from 'globalize';
-import loading from 'loading';
-import homeSections from 'homeSections';
-import dom from 'dom';
-import events from 'events';
-import 'listViewStyle';
-import 'emby-select';
-import 'emby-checkbox';
+
+import layoutManager from '../layoutManager';
+import focusManager from '../focusManager';
+import globalize from '../../scripts/globalize';
+import loading from '../loading/loading';
+import connectionManager from 'jellyfin-apiclient';
+import homeSections from '../homesections/homesections';
+import dom from '../../scripts/dom';
+import events from 'jellyfin-apiclient';
+import '../listview/listview.css';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-checkbox/emby-checkbox';
 
 /* eslint-disable indent */
 
@@ -369,7 +371,7 @@ import 'emby-checkbox';
             saveUser(context, user, userSettings, apiClient).then(() => {
                 loading.hide();
                 if (enableSaveConfirmation) {
-                    import('toast').then(({default: toast}) => {
+                    import('../toast/toast').then((toast) => {
                         toast(globalize.translate('SettingsSaved'));
                     });
                 }
@@ -417,7 +419,7 @@ import 'emby-checkbox';
     }
 
     function embed(options, self) {
-        return import('text!./homeScreenSettings.template.html').then(({default: template}) => {
+        return import('./homeScreenSettings.template.html').then(({default: template}) => {
             for (let i = 1; i <= numConfigurableSections; i++) {
                 template = template.replace(`{section${i}label}`, globalize.translate('LabelHomeScreenSectionValue', i));
             }

src/components/homesections/homesections.js

@@ -1,15 +1,16 @@
-import cardBuilder from 'cardBuilder';
-import dom from 'dom';
-import layoutManager from 'layoutManager';
-import imageLoader from 'imageLoader';
-import globalize from 'globalize';
-import appRouter from 'appRouter';
-import imageHelper from 'scripts/imagehelper';
-import 'paper-icon-button-light';
-import 'emby-itemscontainer';
-import 'emby-scroller';
-import 'emby-button';
-import 'css!./homesections';
+import connectionManager from 'jellyfin-apiclient';
+import cardBuilder from '../cardbuilder/cardBuilder';
+import dom from '../../scripts/dom';
+import layoutManager from '../layoutManager';
+import imageLoader from '../images/imageLoader';
+import globalize from '../../scripts/globalize';
+import appRouter from '../appRouter';
+import imageHelper from '../../scripts/imagehelper';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
+import '../../elements/emby-scroller/emby-scroller';
+import '../../elements/emby-button/emby-button';
+import './homesections';
 
 /* eslint-disable indent */
 

src/components/htmlMediaHelper.js

@@ -1,8 +1,9 @@
+
 /* eslint-disable indent */
 
-import appSettings from 'appSettings' ;
-import browser from 'browser';
-import events from 'events';
+import appSettings from '../scripts/settings/appSettings' ;
+import browser from '../scripts/browser';
+import events from 'jellyfin-apiclient';
 
     export function getSavedVolume() {
         return appSettings.get('volume') || 1;

src/components/imageDownloader/imageDownloader.js

@@ -1,17 +1,18 @@
-import dom from 'dom';
-import loading from 'loading';
-import appHost from 'apphost';
-import dialogHelper from 'dialogHelper';
-import imageLoader from 'imageLoader';
-import browser from 'browser';
-import layoutManager from 'layoutManager';
-import scrollHelper from 'scrollHelper';
-import globalize from 'globalize';
-import 'emby-checkbox';
-import 'paper-icon-button-light';
-import 'emby-button';
-import 'formDialogStyle';
-import 'cardStyle';
+import dom from '../../scripts/dom';
+import loading from '../loading/loading';
+import appHost from '../apphost';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import connectionManager from 'jellyfin-apiclient';
+import imageLoader from '../images/imageLoader';
+import browser from '../../scripts/browser';
+import layoutManager from '../layoutManager';
+import scrollHelper from '../../scripts/scrollHelper';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-button/emby-button';
+import '../formdialog.css';
+import '../cardbuilder/card.css';
 
 /* eslint-disable indent */
 
@@ -315,7 +316,7 @@ import 'cardStyle';
     function showEditor(itemId, serverId, itemType) {
         loading.show();
 
-        import('text!./imageDownloader.template.html').then(({default: template}) => {
+        import('./imageDownloader.template.html').then(({default: template}) => {
             const apiClient = window.connectionManager.getApiClient(serverId);
 
             currentItemId = itemId;

src/components/imageOptionsEditor/imageOptionsEditor.js

@@ -5,12 +5,12 @@
  * @module components/imageOptionsEditor/imageOptionsEditor
  */
 
-import globalize from 'globalize';
-import dom from 'dom';
-import dialogHelper from 'dialogHelper';
-import 'emby-checkbox';
-import 'emby-select';
-import 'emby-input';
+import globalize from '../../scripts/globalize';
+import dom from '../../scripts/dom';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-input/emby-input';
 
     function getDefaultImageConfig(itemType, type) {
         return {

src/components/imageUploader/imageUploader.js

@@ -5,16 +5,17 @@
  * @module components/imageUploader/imageUploader
  */
 
-import dialogHelper from 'dialogHelper';
-import dom from 'dom';
-import loading from 'loading';
-import scrollHelper from 'scrollHelper';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import 'emby-button';
-import 'emby-select';
-import 'formDialogStyle';
-import 'css!./style';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import connectionManager from 'jellyfin-apiclient';
+import dom from '../../scripts/dom';
+import loading from '../loading/loading';
+import scrollHelper from '../../scripts/scrollHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-select/emby-select';
+import '../formdialog.css';
+import './style.css';
 
     let currentItemId;
     let currentServerId;
@@ -26,14 +27,14 @@ import 'css!./style';
 
         switch (evt.target.error.code) {
             case evt.target.error.NOT_FOUND_ERR:
-                import('toast').then(({default: toast}) => {
+                import('../toast/toast').then((toast) => {
                     toast(globalize.translate('MessageFileReadError'));
                 });
                 break;
             case evt.target.error.ABORT_ERR:
                 break; // noop
             default:
-                import('toast').then(({default: toast}) => {
+                import('../toast/toast').then((toast) => {
                     toast(globalize.translate('MessageFileReadError'));
                 });
                 break;
@@ -87,7 +88,7 @@ import 'css!./style';
         }
 
         if (!file.type.startsWith('image/')) {
-            import('toast').then(({default: toast}) => {
+            import('../toast/toast').then((toast) => {
                 toast(globalize.translate('MessageImageFileTypeAllowed'));
             });
             e.preventDefault();
@@ -100,7 +101,7 @@ import 'css!./style';
 
         const imageType = dlg.querySelector('#selectImageType').value;
         if (imageType === 'None') {
-            import('toast').then(({default: toast}) => {
+            import('../toast/toast').then((toast) => {
                 toast(globalize.translate('MessageImageTypeNotSelected'));
             });
             e.preventDefault();
@@ -134,7 +135,7 @@ import 'css!./style';
     function showEditor(options, resolve) {
         options = options || {};
 
-        return import('text!./imageUploader.template.html').then(({default: template}) => {
+        return import('./imageUploader.template.html').then(({default: template}) => {
             currentItemId = options.itemId;
             currentServerId = options.serverId;
 

src/components/imageeditor/imageeditor.js

@@ -1,18 +1,19 @@
-import dialogHelper from 'dialogHelper';
-import loading from 'loading';
-import dom from 'dom';
-import layoutManager from 'layoutManager';
-import focusManager from 'focusManager';
-import globalize from 'globalize';
-import scrollHelper from 'scrollHelper';
-import imageLoader from 'imageLoader';
-import browser from 'browser';
-import appHost from 'apphost';
-import 'cardStyle';
-import 'formDialogStyle';
-import 'emby-button';
-import 'paper-icon-button-light';
-import 'css!./imageeditor';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import connectionManager from 'jellyfin-apiclient';
+import loading from '../loading/loading';
+import dom from '../../scripts/dom';
+import layoutManager from '../layoutManager';
+import focusManager from '../focusManager';
+import globalize from '../../scripts/globalize';
+import scrollHelper from '../../scripts/scrollHelper';
+import imageLoader from '../images/imageLoader';
+import browser from '../../scripts/browser';
+import appHost from '../apphost';
+import '../cardbuilder/card.css';
+import '../formdialog.css';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import './imageeditor.css';
 
 /* eslint-disable indent */
 
@@ -199,7 +200,7 @@ import 'css!./imageeditor';
             return;
         }
 
-        import('confirm').then(({default: confirm}) => {
+        import('../confirm/confirm').then(({default: confirm}) => {
             confirm({
 
                 text: globalize.translate('ConfirmDeleteImage'),
@@ -215,7 +216,7 @@ import 'css!./imageeditor';
             hasChanges = true;
             reload(context, null, focusContext);
         }, function () {
-            import('alert').then(({default: alert}) => {
+            import('../alert').then((alert) => {
                 alert(globalize.translate('ErrorDefault'));
             });
         });
@@ -281,7 +282,7 @@ import 'css!./imageeditor';
     }
 
     function showImageDownloader(page, imageType) {
-        import('imageDownloader').then(({default: ImageDownloader}) => {
+        import('../imageDownloader/imageDownloader').then((ImageDownloader) => {
             ImageDownloader.show(currentItem.Id, currentItem.ServerId, currentItem.Type, imageType).then(function () {
                 hasChanges = true;
                 reload(page);
@@ -299,7 +300,7 @@ import 'css!./imageeditor';
         const providerCount = parseInt(imageCard.getAttribute('data-providers'));
         const numImages = parseInt(imageCard.getAttribute('data-numimages'));
 
-        import('actionsheet').then(({default: actionSheet}) => {
+        import('../actionSheet/actionSheet').then(({default: actionSheet}) => {
             const commands = [];
 
             commands.push({
@@ -370,7 +371,7 @@ import 'css!./imageeditor';
         addListeners(context, 'btnOpenUploadMenu', 'click', function () {
             const imageType = this.getAttribute('data-imagetype');
 
-            import('imageUploader').then(({default: imageUploader}) => {
+            import('../imageUploader/imageUploader').then(({default: imageUploader}) => {
                 imageUploader.show({
 
                     theme: options.theme,
@@ -422,7 +423,7 @@ import 'css!./imageeditor';
 
         loading.show();
 
-        import('text!./imageeditor.template.html').then(({default: template}) => {
+        import('./imageeditor.template.html').then(({default: template}) => {
             const apiClient = window.connectionManager.getApiClient(serverId);
             apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
                 const dialogOptions = {

src/components/images/imageLoader.js

@@ -1,7 +1,7 @@
-import * as lazyLoader from 'lazyLoader';
-import * as userSettings from 'userSettings';
+import * as lazyLoader from '../lazyLoader/lazyLoaderIntersectionObserver';
+import * as userSettings from '../../scripts/settings/userSettings';
 import * as blurhash from 'blurhash';
-import 'css!./style';
+import './style.css';
 /* eslint-disable indent */
 
     export function lazyImage(elem, source = elem.getAttribute('data-src')) {

src/components/indicators/indicators.js

@@ -1,8 +1,8 @@
-import datetime from 'datetime';
-import itemHelper from 'itemHelper';
-import 'emby-progressbar';
-import 'css!./indicators.css';
-import 'material-icons';
+import datetime from '../../scripts/datetime';
+import itemHelper from '../itemHelper';
+import '../../elements/emby-progressbar/emby-progressbar';
+import './indicators.css';
+import 'material-design-icons-iconfont';
 
 export function enableProgressIndicator(item) {
     if (item.MediaType === 'Video' && item.Type !== 'TvChannel') {

src/components/itemContextMenu.js

@@ -1,10 +1,11 @@
-import appHost from 'apphost';
-import globalize from 'globalize';
-import itemHelper from 'itemHelper';
-import appRouter from 'appRouter';
-import playbackManager from 'playbackManager';
-import browser from 'browser';
-import actionsheet from 'actionsheet';
+import connectionManager from 'jellyfin-apiclient';
+import browser from '../scripts/browser';
+import globalize from '../scripts/globalize';
+import actionsheet from './actionSheet/actionSheet';
+import appHost from './apphost';
+import appRouter from './appRouter';
+import itemHelper from './itemHelper';
+import playbackManager from './playback/playbackmanager';
 
 /* eslint-disable indent */
     export function getCommands(options) {
@@ -334,7 +335,7 @@ import actionsheet from 'actionsheet';
         return new Promise(function (resolve, reject) {
             switch (id) {
                 case 'addtocollection':
-                    import('collectionEditor').then(({default: collectionEditor}) => {
+                    import('./collectionEditor/collectionEditor').then((collectionEditor) => {
                         new collectionEditor({
                             items: [itemId],
                             serverId: serverId
@@ -342,7 +343,7 @@ import actionsheet from 'actionsheet';
                     });
                     break;
                 case 'addtoplaylist':
-                    import('playlistEditor').then(({default: playlistEditor}) => {
+                    import('./playlisteditor/playlisteditor').then((playlistEditor) => {
                         new playlistEditor({
                             items: [itemId],
                             serverId: serverId
@@ -350,7 +351,7 @@ import actionsheet from 'actionsheet';
                     });
                     break;
                 case 'download':
-                    import('fileDownloader').then((fileDownloader) => {
+                    import('../scripts/fileDownloader').then((fileDownloader) => {
                         const downloadHref = apiClient.getItemDownloadUrl(itemId);
                         fileDownloader.download([{
                             url: downloadHref,
@@ -372,7 +373,7 @@ import actionsheet from 'actionsheet';
                         textArea.select();
 
                         if (document.execCommand('copy')) {
-                            import('toast').then(({default: toast}) => {
+                            import('./toast/toast').then((toast) => {
                                 toast(globalize.translate('CopyStreamURLSuccess'));
                             });
                         } else {
@@ -387,7 +388,7 @@ import actionsheet from 'actionsheet';
                     } else {
                         /* eslint-disable-next-line compat/compat */
                         navigator.clipboard.writeText(downloadHref).then(function () {
-                            import('toast').then(({default: toast}) => {
+                            import('./toast/toast').then((toast) => {
                                 toast(globalize.translate('CopyStreamURLSuccess'));
                             });
                         }).catch(function () {
@@ -398,7 +399,7 @@ import actionsheet from 'actionsheet';
                     break;
                 }
                 case 'editsubtitles':
-                    import('subtitleEditor').then(({default: subtitleEditor}) => {
+                    import('./subtitleeditor/subtitleeditor').then((subtitleEditor) => {
                         subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
@@ -406,7 +407,7 @@ import actionsheet from 'actionsheet';
                     editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     break;
                 case 'editimages':
-                    import('imageEditor').then(({default: imageEditor}) => {
+                    import('./imageeditor/imageeditor').then((imageEditor) => {
                         imageEditor.show({
                             itemId: itemId,
                             serverId: serverId
@@ -414,12 +415,12 @@ import actionsheet from 'actionsheet';
                     });
                     break;
                 case 'identify':
-                    import('itemIdentifier').then(({default: itemIdentifier}) => {
+                    import('./itemidentifier/itemidentifier').then((itemIdentifier) => {
                         itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
                 case 'moremediainfo':
-                    import('itemMediaInfo').then(({default: itemMediaInfo}) => {
+                    import('./itemMediaInfo/itemMediaInfo').then((itemMediaInfo) => {
                         itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id));
                     });
                     break;
@@ -454,7 +455,7 @@ import actionsheet from 'actionsheet';
                     playbackManager.clearQueue();
                     break;
                 case 'record':
-                    import('recordingCreator').then(({default: recordingCreator}) => {
+                    import('./recordingcreator/recordingcreator').then((recordingCreator) => {
                         recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
@@ -525,7 +526,7 @@ import actionsheet from 'actionsheet';
     }
 
     function deleteTimer(apiClient, item, resolve, command) {
-        import('recordingHelper').then(({default: recordingHelper}) => {
+        import('./recordingcreator/recordinghelper').then((recordingHelper) => {
             const timerId = item.TimerId || item.Id;
             recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () {
                 getResolveFunction(resolve, command, true)();
@@ -534,7 +535,7 @@ import actionsheet from 'actionsheet';
     }
 
     function deleteSeriesTimer(apiClient, item, resolve, command) {
-        import('recordingHelper').then(({default: recordingHelper}) => {
+        import('./recordingcreator/recordinghelper').then((recordingHelper) => {
             recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () {
                 getResolveFunction(resolve, command, true)();
             });
@@ -568,15 +569,15 @@ import actionsheet from 'actionsheet';
             const serverId = apiClient.serverInfo().Id;
 
             if (item.Type === 'Timer') {
-                import('recordingEditor').then(({default: recordingEditor}) => {
+                import('./recordingcreator/recordingeditor').then((recordingEditor) => {
                     recordingEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             } else if (item.Type === 'SeriesTimer') {
-                import('seriesRecordingEditor').then(({default: recordingEditor}) => {
+                import('./recordingcreator/seriesrecordingeditor').then((recordingEditor) => {
                     recordingEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             } else {
-                import('metadataEditor').then(({default: metadataEditor}) => {
+                import('./metadataEditor/metadataEditor').then((metadataEditor) => {
                     metadataEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             }
@@ -585,7 +586,7 @@ import actionsheet from 'actionsheet';
 
     function deleteItem(apiClient, item) {
         return new Promise(function (resolve, reject) {
-            import('deleteHelper').then(({default: deleteHelper}) => {
+            import('../scripts/deleteHelper').then((deleteHelper) => {
                 deleteHelper.deleteItem({
                     item: item,
                     navigate: false
@@ -597,7 +598,7 @@ import actionsheet from 'actionsheet';
     }
 
     function refresh(apiClient, item) {
-        import('refreshDialog').then(({default: refreshDialog}) => {
+        import('./refreshdialog/refreshdialog').then((refreshDialog) => {
             new refreshDialog({
                 itemIds: [item.Id],
                 serverId: apiClient.serverInfo().Id,

src/components/itemHelper.js

@@ -1,5 +1,5 @@
-import appHost from 'apphost';
-import globalize from 'globalize';
+import appHost from './apphost';
+import globalize from '../scripts/globalize';
 
 export function getDisplayName(item, options = {}) {
     if (!item) {

src/components/itemMediaInfo/itemMediaInfo.js

@@ -5,17 +5,18 @@
  * @module components/itemMediaInfo/itemMediaInfo
  */
 
-import dialogHelper from 'dialogHelper';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import loading from 'loading';
-import 'emby-select';
-import 'listViewStyle';
-import 'paper-icon-button-light';
-import 'css!./../formdialog';
-import 'material-icons';
-import 'emby-button';
-import 'flexStyles';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import connectionManager from 'jellyfin-apiclient';
+import loading from '../loading/loading';
+import '../../elements/emby-select/emby-select';
+import '../listview/listview.css';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import 'material-design-icons-iconfont';
+import '../../assets/css/flexstyles.css';
 
     function setMediaInfo(user, page, item) {
         let html = item.MediaSources.map(version => {
@@ -193,7 +194,7 @@ import 'flexStyles';
 
     export function show(itemId, serverId) {
         loading.show();
-        return import('text!./itemMediaInfo.template.html').then(({default: template}) => {
+        return import('./itemMediaInfo.template.html').then(({default: template}) => {
             return new Promise((resolve, reject) => {
                 loadMediaInfo(itemId, serverId, template).then(resolve, reject);
             });

src/components/itemidentifier/itemidentifier.js

@@ -5,19 +5,20 @@
  * @module components/itemidentifier/itemidentifier
  */
 
-import dialogHelper from 'dialogHelper';
-import loading from 'loading';
-import globalize from 'globalize';
-import scrollHelper from 'scrollHelper';
-import layoutManager from 'layoutManager';
-import focusManager from 'focusManager';
-import browser from 'browser';
-import 'emby-input';
-import 'emby-checkbox';
-import 'paper-icon-button-light';
-import 'css!./../formdialog';
-import 'material-icons';
-import 'cardStyle';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import loading from '../loading/loading';
+import connectionManager from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
+import scrollHelper from '../../scripts/scrollHelper';
+import layoutManager from '../layoutManager';
+import focusManager from '../focusManager';
+import browser from '../../scripts/browser';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import 'material-design-icons-iconfont';
+import '../cardbuilder/card.css';
 
     const enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -67,7 +68,7 @@ import 'cardStyle';
         }
 
         if (!hasId && !lookupInfo.Name) {
-            import('toast').then(({default: toast}) => {
+            import('../toast/toast').then((toast) => {
                 toast(globalize.translate('PleaseEnterNameOrId'));
             });
             return;
@@ -334,7 +335,7 @@ import 'cardStyle';
     function showEditor(itemId) {
         loading.show();
 
-        return import('text!./itemidentifier.template.html').then(({default: template}) => {
+        return import('./itemidentifier.template.html').then(({default: template}) => {
             const apiClient = getApiClient();
 
             apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
@@ -416,7 +417,7 @@ import 'cardStyle';
         currentItem = null;
         currentItemType = itemType;
 
-        return import('text!./itemidentifier.template.html').then(({default: template}) => {
+        return import('./itemidentifier.template.html').then(({default: template}) => {
             const dialogOptions = {
                 size: 'small',
                 removeOnClose: true,

src/components/itemsrefresher.js

@@ -1,6 +1,6 @@
-import playbackManager from 'playbackManager';
-import serverNotifications from 'serverNotifications';
-import events from 'events';
+import playbackManager from './playback/playbackmanager';
+import serverNotifications from '../scripts/serverNotifications';
+import events from 'jellyfin-apiclient';
 
 function onUserDataChanged(e, apiClient, userData) {
     const instance = this;

src/components/layoutManager.js

@@ -1,7 +1,7 @@
 import appHost from './apphost';
 import browser from '../scripts/browser';
 import { set, get } from '../scripts/settings/appSettings';
-import events from 'events';
+import events from 'jellyfin-apiclient';
 
 function setLayout(instance, layout, selectedLayout) {
     if (layout === selectedLayout) {

src/components/libraryoptionseditor/libraryoptionseditor.js

@@ -5,11 +5,11 @@
  * @module components/libraryoptionseditor/libraryoptionseditor
  */
 
-import globalize from 'globalize';
-import dom from 'dom';
-import 'emby-checkbox';
-import 'emby-select';
-import 'emby-input';
+import globalize from '../../scripts/globalize';
+import dom from '../../scripts/dom';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-input/emby-input';
 
     function populateLanguages(parent) {
         return ApiClient.getCultures().then(languages => {
@@ -306,7 +306,7 @@ import 'emby-input';
     }
 
     function showImageOptionsForType(type) {
-        import('imageoptionseditor').then(({default: ImageOptionsEditor}) => {
+        import('../imageOptionsEditor/imageOptionsEditor').then(({default: ImageOptionsEditor}) => {
             let typeOptions = getTypeOptions(currentLibraryOptions, type);
             if (!typeOptions) {
                 typeOptions = {

src/components/listview/listview.js

@@ -5,16 +5,17 @@
  * @module components/listview/listview
  */
 
-import itemHelper from 'itemHelper';
-import mediaInfo from 'mediaInfo';
-import indicators from 'indicators';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import datetime from 'datetime';
-import cardBuilder from 'cardBuilder';
-import 'css!./listview';
-import 'emby-ratingbutton';
-import 'emby-playstatebutton';
+import itemHelper from '../itemHelper';
+import mediaInfo from '../mediainfo/mediainfo';
+import indicators from '../indicators/indicators';
+import connectionManager from 'jellyfin-apiclient';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import datetime from '../../scripts/datetime';
+import cardBuilder from '../cardbuilder/cardBuilder';
+import './listview.css';
+import '../../elements/emby-ratingbutton/emby-ratingbutton';
+import '../../elements/emby-playstatebutton/emby-playstatebutton';
 
     function getIndex(item, options) {
         if (options.index === 'disc') {

src/components/loading/loading.js

@@ -1,4 +1,4 @@
-import 'css!./loading';
+import './loading';
 
 let loadingElem;
 let layer1;

src/components/maintabsmanager.js

@@ -1,8 +1,8 @@
-import dom from 'dom';
-import browser from 'browser';
-import events from 'events';
-import 'emby-tabs';
-import 'emby-button';
+import dom from '../scripts/dom';
+import browser from '../scripts/browser';
+import events from 'jellyfin-apiclient';
+import '../elements/emby-tabs/emby-tabs';
+import '../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
@@ -65,7 +65,7 @@ import 'emby-button';
             }
         };
 
-        import('touchHelper').then(({default: TouchHelper}) => {
+        import('../scripts/touchHelper').then((TouchHelper) => {
             const touchHelper = new TouchHelper(view.parentNode.parentNode);
 
             events.on(touchHelper, 'swipeleft', onSwipeLeft);

src/components/mediaLibraryCreator/mediaLibraryCreator.js

@@ -5,20 +5,20 @@
  * @module components/mediaLibraryCreator/mediaLibraryCreator
  */
 
-import loading from 'loading';
-import dialogHelper from 'dialogHelper';
-import dom from 'dom';
-import $ from 'jQuery';
-import libraryoptionseditor from 'components/libraryoptionseditor/libraryoptionseditor';
-import globalize from 'globalize';
-import 'emby-toggle';
-import 'emby-input';
-import 'emby-select';
-import 'paper-icon-button-light';
-import 'listViewStyle';
-import 'formDialogStyle';
-import 'emby-button';
-import 'flexStyles';
+import loading from '../loading/loading';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import dom from '../../scripts/dom';
+import 'jquery';
+import libraryoptionseditor from '../libraryoptionseditor/libraryoptionseditor';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-toggle/emby-toggle';
+import '../listview/listview.css';
+import '../formdialog.css';
+import '../../assets/css/flexstyles.css';
 
     function onAddLibrary() {
         if (isCreating) {
@@ -26,7 +26,7 @@ import 'flexStyles';
         }
 
         if (pathInfos.length == 0) {
-            import('alert').then(({default: alert}) => {
+            import('../alert').then((alert) => {
                 alert({
                     text: globalize.translate('PleaseAddAtLeastOneFolder'),
                     type: 'error'
@@ -54,7 +54,7 @@ import 'flexStyles';
             loading.hide();
             dialogHelper.close(dlg);
         }, () => {
-            import('toast').then(({default: toast}) => {
+            import('../toast/toast').then((toast) => {
                 toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
             });
 
@@ -109,7 +109,7 @@ import 'flexStyles';
     function onAddButtonClick() {
         const page = dom.parentWithClass(this, 'dlg-librarycreator');
 
-        import('directorybrowser').then(({default: directoryBrowser}) => {
+        import('../directorybrowser/directorybrowser').then((directoryBrowser) => {
             const picker = new directoryBrowser();
             picker.show({
                 enableNetworkSharePath: true,
@@ -200,7 +200,7 @@ export class showEditor {
             currentOptions = options;
             currentResolve = resolve;
             hasChanges = false;
-            import('text!./components/mediaLibraryCreator/mediaLibraryCreator.template.html').then(({default: template}) => {
+            import('./mediaLibraryCreator.template.html').then(({default: template}) => {
                 const dlg = dialogHelper.createDialog({
                     size: 'small',
                     modal: false,

src/components/mediaLibraryEditor/mediaLibraryEditor.js

@@ -5,18 +5,18 @@
  * @module components/mediaLibraryEditor/mediaLibraryEditor
  */
 
-import jQuery from 'jQuery';
-import loading from 'loading';
-import dialogHelper from 'dialogHelper';
-import dom from 'dom';
-import libraryoptionseditor from 'components/libraryoptionseditor/libraryoptionseditor';
-import globalize from 'globalize';
-import 'emby-button';
-import 'listViewStyle';
-import 'paper-icon-button-light';
-import 'formDialogStyle';
-import 'emby-toggle';
-import 'flexStyles';
+import 'jquery';
+import loading from '../loading/loading';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import dom from '../../scripts/dom';
+import libraryoptionseditor from '../libraryoptionseditor/libraryoptionseditor';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/emby-button';
+import '../listview/listview.css';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import '../../elements/emby-toggle/emby-toggle';
+import '../../assets/css/flexstyles.css';
 
     function onEditLibrary() {
         if (isCreating) {
@@ -47,7 +47,7 @@ import 'flexStyles';
             hasChanges = true;
             refreshLibraryFromServer(page);
         }, () => {
-            import('toast').then(({default: toast}) => {
+            import('../toast/toast').then((toast) => {
                 toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
             });
         });
@@ -62,7 +62,7 @@ import 'flexStyles';
             hasChanges = true;
             refreshLibraryFromServer(page);
         }, () => {
-            import('toast').then(({default: toast}) => {
+            import('../toast/toast').then((toast) => {
                 toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
             });
         });
@@ -72,7 +72,7 @@ import 'flexStyles';
         const button = btnRemovePath;
         const virtualFolder = currentOptions.library;
 
-        import('confirm').then(({default: confirm}) => {
+        import('../confirm/confirm').then(({default: confirm}) => {
             confirm({
                 title: globalize.translate('HeaderRemoveMediaLocation'),
                 text: globalize.translate('MessageConfirmRemoveMediaLocation'),
@@ -84,7 +84,7 @@ import 'flexStyles';
                     hasChanges = true;
                     refreshLibraryFromServer(dom.parentWithClass(button, 'dlg-libraryeditor'));
                 }, () => {
-                    import('toast').then(({default: toast}) => {
+                    import('../toast/toast').then((toast) => {
                         toast(globalize.translate('ErrorDefault'));
                     });
                 });
@@ -167,7 +167,7 @@ import 'flexStyles';
     }
 
     function showDirectoryBrowser(context, originalPath, networkPath) {
-        import('directorybrowser').then(({default: directoryBrowser}) => {
+        import('../directorybrowser/directorybrowser').then((directoryBrowser) => {
             const picker = new directoryBrowser();
             picker.show({
                 enableNetworkSharePath: true,
@@ -215,7 +215,7 @@ export class showEditor {
         currentOptions = options;
         currentDeferred = deferred;
         hasChanges = false;
-        import('text!./components/mediaLibraryEditor/mediaLibraryEditor.template.html').then(({default: template}) => {
+        import('./mediaLibraryEditor.template.html').then((template) => {
             const dlg = dialogHelper.createDialog({
                 size: 'small',
                 modal: false,

src/components/mediainfo/mediainfo.js

@@ -1,12 +1,12 @@
-import datetime from 'datetime';
-import globalize from 'globalize';
-import appRouter from 'appRouter';
-import itemHelper from 'itemHelper';
-import indicators from 'indicators';
-import 'material-icons';
-import 'css!./mediainfo.css';
-import 'programStyles';
-import 'emby-button';
+import datetime from '../../scripts/datetime';
+import globalize from '../../scripts/globalize';
+import appRouter from '../appRouter';
+import itemHelper from '../itemHelper';
+import indicators from '../indicators/indicators';
+import 'material-design-icons-iconfont';
+import './mediainfo.css';
+import '../guide/programs.css';
+import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
     function getTimerIndicator(item) {

src/components/metadataEditor/metadataEditor.js

@@ -1,21 +1,22 @@
-import dom from 'dom';
-import layoutManager from 'layoutManager';
-import dialogHelper from 'dialogHelper';
-import datetime from 'datetime';
-import loading from 'loading';
-import focusManager from 'focusManager';
-import globalize from 'globalize';
-import shell from 'shell';
-import 'emby-checkbox';
-import 'emby-input';
-import 'emby-select';
-import 'listViewStyle';
-import 'emby-textarea';
-import 'emby-button';
-import 'paper-icon-button-light';
-import 'css!./../formdialog';
-import 'clearButtonStyle';
-import 'flexStyles';
+import dom from '../../scripts/dom';
+import layoutManager from '../layoutManager';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import datetime from '../../scripts/datetime';
+import loading from '../loading/loading';
+import focusManager from '../focusManager';
+import connectionManager from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
+import shell from '../../scripts/shell';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-select/emby-select';
+import '../listview/listview.css';
+import '../../elements/emby-textarea/emby-textarea';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import '../../assets/css/clearbutton.css';
+import '../../assets/css/flexstyles.css';
 
 /* eslint-disable indent */
 
@@ -35,7 +36,7 @@ import 'flexStyles';
 
     function submitUpdatedItem(form, item) {
         function afterContentTypeUpdated() {
-            import('toast').then(({default: toast}) => {
+            import('../toast/toast').then(({default: toast}) => {
                 toast(globalize.translate('MessageItemSaved'));
             });
 
@@ -207,7 +208,7 @@ import 'flexStyles';
     }
 
     function addElementToList(source, sortCallback) {
-        import('prompt').then(({default: prompt}) => {
+        import('../prompt/prompt').then(({default: prompt}) => {
             prompt({
                 label: 'Value:'
             }).then(function (text) {
@@ -225,7 +226,7 @@ import 'flexStyles';
     }
 
     function editPerson(context, person, index) {
-        import('personEditor').then(({default: personEditor}) => {
+        import('./personEditor').then((personEditor) => {
             personEditor.show(person).then(function (updatedPerson) {
                 const isNew = index === -1;
 
@@ -244,14 +245,14 @@ import 'flexStyles';
         if (parentId) {
             reload(context, parentId, item.ServerId);
         } else {
-            import('appRouter').then(({default: appRouter}) => {
+            import('../appRouter').then((appRouter) => {
                 appRouter.goHome();
             });
         }
     }
 
     function showMoreMenu(context, button, user) {
-        import('itemContextMenu').then(({default: itemContextMenu}) => {
+        import('../itemContextMenu').then(({default: itemContextMenu}) => {
             const item = currentItem;
 
             itemContextMenu.show({
@@ -1020,7 +1021,7 @@ import 'flexStyles';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then(({default: scrollHelper}) => {
+        import('../../scripts/scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
@@ -1029,7 +1030,7 @@ import 'flexStyles';
     function show(itemId, serverId, resolve, reject) {
         loading.show();
 
-        import('text!./metadataEditor.template.html').then(({default: template}) => {
+        import('./metadataEditor.template.html').then(({default: template}) => {
             const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false
@@ -1084,7 +1085,7 @@ import 'flexStyles';
             return new Promise(function (resolve, reject) {
                 loading.show();
 
-                import('text!./metadataEditor.template.html').then(({default: template}) => {
+                import('./metadataEditor.template.html').then(({default: template}) => {
                     elem.innerHTML = globalize.translateHtml(template, 'core');
 
                     elem.querySelector('.formDialogFooter').classList.remove('formDialogFooter');

src/components/metadataEditor/personEditor.js

@@ -1,15 +1,16 @@
-import dialogHelper from 'dialogHelper';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import 'paper-icon-button-light';
-import 'emby-input';
-import 'emby-select';
-import 'css!./../formdialog';
+
+import dialogHelper from '../dialogHelper/dialogHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-select/emby-select';
+import '../formdialog.css';
 
 /* eslint-disable indent */
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then(({default: scrollHelper}) => {
+        import('../../scripts/scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
@@ -17,7 +18,7 @@ import 'css!./../formdialog';
 
     function show(person) {
         return new Promise(function (resolve, reject) {
-            import('text!./personEditor.template.html').then(({default: template}) => {
+            import('./personEditor.template.html').then(({default: template}) => {
                 const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false

src/components/multiSelect/multiSelect.css

@@ -1,3 +1,4 @@
+
 .itemSelectionPanel {
     position: absolute;
     bottom: 0;

src/components/multiSelect/multiSelect.js

@@ -1,9 +1,10 @@
-import browser from 'browser';
-import appHost from 'apphost';
-import loading from 'loading';
-import globalize from 'globalize';
-import dom from 'dom';
-import 'css!./multiSelect';
+import browser from '../../scripts/browser';
+import appHost from '../apphost';
+import loading from '../loading/loading';
+import connectionManager from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
+import dom from '../../scripts/dom';
+import './multiSelect.css';
 
 /* eslint-disable indent */
 
@@ -138,7 +139,7 @@ import 'css!./multiSelect';
 
     function alertText(options) {
         return new Promise((resolve, reject) => {
-            import('alert').then(({default: alert}) => {
+            import('../alert').then((alert) => {
                 alert(options).then(resolve, resolve);
             });
         });
@@ -154,7 +155,7 @@ import 'css!./multiSelect';
                 title = globalize.translate('HeaderDeleteItems');
             }
 
-            import('confirm').then(({default: confirm}) => {
+            import('../confirm/confirm').then((confirm) => {
                 confirm(msg, title).then(() => {
                     const promises = itemIds.map(itemId => {
                         apiClient.deleteItem(itemId);
@@ -229,7 +230,7 @@ import 'css!./multiSelect';
                 icon: 'refresh'
             });
 
-            import('actionsheet').then(({default: actionsheet}) => {
+            import('../actionSheet/actionSheet').then((actionsheet) => {
                 actionsheet.show({
                     items: menuItems,
                     positionTo: e.target,
@@ -239,7 +240,7 @@ import 'css!./multiSelect';
 
                         switch (id) {
                             case 'addtocollection':
-                                import('collectionEditor').then(({default: collectionEditor}) => {
+                                import('../collectionEditor/collectionEditor').then((collectionEditor) => {
                                     new collectionEditor({
                                         items: items,
                                         serverId: serverId
@@ -249,7 +250,7 @@ import 'css!./multiSelect';
                                 dispatchNeedsRefresh();
                                 break;
                             case 'playlist':
-                                import('playlistEditor').then(({default: playlistEditor}) => {
+                                import('../playlisteditor/playlisteditor').then((laylistEditor) => {
                                     new playlistEditor({
                                         items: items,
                                         serverId: serverId
@@ -281,7 +282,7 @@ import 'css!./multiSelect';
                                 dispatchNeedsRefresh();
                                 break;
                             case 'refresh':
-                                import('refreshDialog').then(({default: refreshDialog}) => {
+                                import('../refreshdialog/refreshdialog').then((refreshDialog) => {
                                     new refreshDialog({
                                         itemIds: items,
                                         serverId: serverId
@@ -317,7 +318,7 @@ import 'css!./multiSelect';
 
     function combineVersions(apiClient, selection) {
         if (selection.length < 2) {
-            import('alert').then(({default: alert}) => {
+            import('../alert').then((alert) => {
                 alert({
 
                     text: globalize.translate('PleaseSelectTwoItems')
@@ -341,7 +342,7 @@ import 'css!./multiSelect';
     }
 
     function showSelections(initialCard) {
-        import('emby-checkbox').then(() => {
+        import('../../elements/emby-checkbox/emby-checkbox').then(() => {
             const cards = document.querySelectorAll('.card');
             for (let i = 0, length = cards.length; i < length; i++) {
                 showSelection(cards[i], initialCard === cards[i]);

src/components/notifications/notifications.js

@@ -1,7 +1,7 @@
-import serverNotifications from 'serverNotifications';
-import playbackManager from 'playbackManager';
-import events from 'events';
-import globalize from 'globalize';
+import serverNotifications from '../../scripts/serverNotifications';
+import playbackManager from '../playback/playbackmanager';
+import events from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
 
 function onOneDocumentClick() {
     document.removeEventListener('click', onOneDocumentClick);

src/components/nowPlayingBar/nowPlayingBar.js

@@ -1,15 +1,16 @@
-import datetime from 'datetime';
-import events from 'events';
-import browser from 'browser';
-import imageLoader from 'imageLoader';
-import layoutManager from 'layoutManager';
-import playbackManager from 'playbackManager';
-import nowPlayingHelper from 'nowPlayingHelper';
-import appHost from 'apphost';
-import dom from 'dom';
-import itemContextMenu from 'itemContextMenu';
-import 'paper-icon-button-light';
-import 'emby-ratingbutton';
+import datetime from '../../scripts/datetime';
+import events from 'jellyfin-apiclient';
+import browser from '../../scripts/browser';
+import imageLoader from '../../scripts/imagehelper';
+import layoutManager from '../layoutManager';
+import playbackManager from '../playback/playbackmanager';
+import nowPlayingHelper from '../playback/nowplayinghelper';
+import appHost from '../apphost';
+import dom from '../../scripts/dom';
+import connectionManager from 'jellyfin-apiclient';
+import itemContextMenu from '../itemContextMenu';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-ratingbutton/emby-ratingbutton';
 
 /* eslint-disable indent */
 
@@ -243,7 +244,7 @@ import 'emby-ratingbutton';
     }
 
     function showRemoteControl() {
-        import('appRouter').then(({default: appRouter}) => {
+        import('../appRouter').then(({default: appRouter}) => {
             appRouter.showNowPlaying();
         });
     }
@@ -256,10 +257,10 @@ import 'emby-ratingbutton';
 
         return new Promise(function (resolve, reject) {
             Promise.all([
-                import('appFooter'),
-                import('itemShortcuts'),
-                import('css!./nowPlayingBar.css'),
-                import('emby-slider')
+                import('../appFooter/appFooter'),
+                import('../shortcuts'),
+                import('./nowPlayingBar.css'),
+                import('../../elements/emby-slider/emby-slider')
             ])
             .then(([appfooter, itemShortcuts]) => {
                 const parentContainer = appfooter.element;

src/components/packageManager.js

@@ -1,5 +1,5 @@
-import appSettings from 'appSettings';
-import pluginManager from 'pluginManager';
+import appSettings from '../scripts/settings/appSettings';
+import pluginManager from './pluginManager';
 /* eslint-disable indent */
 
     class PackageManager {

src/components/playback/brightnessosd.js

@@ -1,9 +1,9 @@
-import events from 'events';
-import playbackManager from 'playbackManager';
-import dom from 'dom';
-import browser from 'browser';
-import 'css!./iconosd';
-import 'material-icons';
+import events from 'jellyfin-apiclient';
+import playbackManager from './playbackmanager';
+import dom from '../../scripts/dom';
+import browser from '../../scripts/browser';
+import './iconosd.css';
+import 'material-design-icons-iconfont';
 
 let currentPlayer;
 let osdElement;

src/components/playback/mediasession.js

@@ -1,7 +1,7 @@
-import playbackManager from 'playbackManager';
-import nowPlayingHelper from 'nowPlayingHelper';
-import shell from 'shell';
-import events from 'events';
+import playbackManager from '../playback/playbackmanager';
+import nowPlayingHelper from '../playback/nowplayinghelper';
+import events from 'jellyfin-apiclient';
+import connectionManager from 'jellyfin-apiclient';
 /* eslint-disable indent */
 
     // Reports media playback to the device for lock screen control

src/components/playback/playbackmanager.js

@@ -1,13 +1,14 @@
-import events from 'events';
-import datetime from 'datetime';
-import appSettings from 'appSettings';
-import itemHelper from 'itemHelper';
-import pluginManager from 'pluginManager';
-import PlayQueueManager from 'playQueueManager';
-import * as userSettings from 'userSettings';
-import globalize from 'globalize';
-import loading from 'loading';
-import appHost from 'apphost';
+import events from 'jellyfin-apiclient';
+import datetime from '../../scripts/datetime';
+import appSettings from '../../scripts/settings/appSettings';
+import itemHelper from '../itemHelper';
+import pluginManager from '../pluginManager';
+import PlayQueueManager from './playqueuemanager';
+import * as userSettings from '../../scripts/settings/userSettings';
+import globalize from '../../scripts/globalize';
+import connectionManager from 'jellyfin-apiclient';
+import loading from '../loading/loading';
+import appHost from '../apphost';
 import screenfull from 'screenfull';
 
 function enableLocalPlaylistManagement(player) {
@@ -619,7 +620,7 @@ function supportsDirectPlay(apiClient, item, mediaSource) {
         } else if (mediaSource.Protocol === 'File') {
             return new Promise(function (resolve, reject) {
                 // Determine if the file can be accessed directly
-                import('filesystem').then((filesystem) => {
+                import('../../scripts/filesystem').then((filesystem) => {
                     const method = isFolderRip ?
                         'directoryExists' :
                         'fileExists';
@@ -647,7 +648,7 @@ function validatePlaybackInfoResult(instance, result) {
 }
 
 function showPlaybackInfoErrorMessage(instance, errorCode) {
-    import('alert').then(({ default: alert }) => {
+    import('../alert').then(({ default: alert }) => {
         alert({
             text: globalize.translate(errorCode),
             title: globalize.translate('HeaderPlaybackError')
@@ -1161,7 +1162,7 @@ class PlaybackManager {
                 if (!brightnessOsdLoaded) {
                     brightnessOsdLoaded = true;
                     // TODO: Have this trigger an event instead to get the osd out of here
-                    import('brightnessOsd').then();
+                    import('./brightnessosd').then();
                 }
                 player.setBrightness(val);
             }
@@ -3190,7 +3191,7 @@ class PlaybackManager {
         };
 
         if (appHost.supports('remotecontrol')) {
-            import('serverNotifications').then(({ default: serverNotifications }) => {
+            import('../../scripts/serverNotifications').then((serverNotifications) => {
                 events.on(serverNotifications, 'ServerShuttingDown', self.setDefaultPlayerActive.bind(self));
                 events.on(serverNotifications, 'ServerRestarting', self.setDefaultPlayerActive.bind(self));
             });

src/components/playback/playbackorientation.js

@@ -1,6 +1,7 @@
-import playbackManager from 'playbackManager';
-import layoutManager from 'layoutManager';
-import events from 'events';
+
+import playbackManager from './playbackmanager';
+import layoutManager from '../layoutManager';
+import events from 'jellyfin-apiclient';
 
 let orientationLocked;
 

src/components/playback/playerSelectionMenu.js

@@ -1,12 +1,12 @@
-import appSettings from 'appSettings';
-import events from 'events';
-import browser from 'browser';
-import loading from 'loading';
-import playbackManager from 'playbackManager';
-import appRouter from 'appRouter';
-import globalize from 'globalize';
-import appHost from 'apphost';
-import * as autocast from 'autocast';
+import appSettings from '../../scripts/settings/appSettings';
+import events from 'jellyfin-apiclient';
+import browser from '../../scripts/browser';
+import loading from '../loading/loading';
+import playbackManager from '../playback/playbackmanager';
+import appRouter from '../appRouter';
+import globalize from '../../scripts/globalize';
+import appHost from '../apphost';
+import { enable, isEnabled, supported } from '../../scripts/autocast';
 
 function mirrorItem(info, player) {
     const item = info.item;
@@ -108,7 +108,7 @@ export function show(button) {
             };
         });
 
-        import('actionsheet').then(({default: actionsheet}) => {
+        import('../actionSheet/actionSheet').then((actionsheet) => {
             loading.hide();
 
             const menuOptions = {
@@ -141,10 +141,10 @@ export function show(button) {
 
 function showActivePlayerMenu(playerInfo) {
     Promise.all([
-        import('dialogHelper'),
-        import('dialog'),
-        import('emby-checkbox'),
-        import('emby-button')
+        import('../dialogHelper/dialogHelper'),
+        import('../dialog/dialog'),
+        import('../../elements/emby-checkbox/emby-checkbox'),
+        import('../../elements/emby-button/emby-button')
     ]).then(([dialogHelper]) => {
         showActivePlayerMenuInternal(dialogHelper, playerInfo);
     });
@@ -152,7 +152,7 @@ function showActivePlayerMenu(playerInfo) {
 
 function disconnectFromPlayer(currentDeviceName) {
     if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
-        import('dialog').then(({default: dialog}) => {
+        import('../dialog/dialog').then(({default: dialog}) => {
             const menuItems = [];
 
             menuItems.push({
@@ -222,9 +222,9 @@ function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
 
     html += '</div>';
 
-    if (autocast.supported()) {
+    if (supported()) {
         html += '<div><label class="checkboxContainer">';
-        const checkedHtmlAC = autocast.isEnabled() ? ' checked' : '';
+        const checkedHtmlAC = isEnabled() ? ' checked' : '';
         html += '<input type="checkbox" is="emby-checkbox" class="chkAutoCast"' + checkedHtmlAC + '/>';
         html += '<span>' + globalize.translate('EnableAutoCast') + '</span>';
         html += '</label></div>';
@@ -285,7 +285,7 @@ function onMirrorChange() {
 }
 
 function onAutoCastChange() {
-    autocast.enable(this.checked);
+    enable(this.checked);
 }
 
 document.addEventListener('viewshow', function (e) {

src/components/playback/playersettingsmenu.js

@@ -1,7 +1,8 @@
-import actionsheet from 'actionsheet';
-import playbackManager from 'playbackManager';
-import globalize from 'globalize';
-import qualityoptions from 'qualityoptions';
+import connectionManager from 'jellyfin-apiclient';
+import actionsheet from '../actionSheet/actionSheet';
+import playbackManager from '../playback/playbackmanager';
+import globalize from '../../scripts/globalize';
+import qualityoptions from '../qualityOptions';
 
 function showQualityMenu(player, btn) {
     const videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {

src/components/playback/remotecontrolautoplay.js

@@ -1,5 +1,5 @@
-import events from 'events';
-import playbackManager from 'playbackManager';
+import events from 'jellyfin-apiclient';
+import playbackManager from '../playback/playbackmanager';
 
 function transferPlayback(oldPlayer, newPlayer) {
     const state = playbackManager.getPlayerState(oldPlayer);

src/components/playback/volumeosd.js

@@ -1,9 +1,10 @@
-import events from 'events';
-import playbackManager from 'playbackManager';
-import dom from 'dom';
-import browser from 'browser';
-import 'css!./iconosd';
-import 'material-icons';
+
+import events from 'jellyfin-apiclient';
+import playbackManager from './playbackmanager';
+import dom from '../../scripts/dom';
+import browser from '../../scripts/browser';
+import './iconosd.css';
+import 'material-design-icons-iconfont';
 
 let currentPlayer;
 let osdElement;

src/components/playbackSettings/playbackSettings.js

@@ -1,13 +1,14 @@
-import browser from 'browser';
-import appSettings from 'appSettings';
-import appHost from 'apphost';
-import focusManager from 'focusManager';
-import qualityoptions from 'qualityoptions';
-import globalize from 'globalize';
-import loading from 'loading';
-import events from 'events';
-import 'emby-select';
-import 'emby-checkbox';
+import browser from '../../scripts/browser';
+import appSettings from '../../scripts/settings/appSettings';
+import appHost from '../apphost';
+import focusManager from '../focusManager';
+import qualityoptions from '../qualityOptions';
+import globalize from '../../scripts/globalize';
+import loading from '../loading/loading';
+import connectionManager from 'jellyfin-apiclient';
+import events from 'jellyfin-apiclient';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-checkbox/emby-checkbox';
 
 /* eslint-disable indent */
 
@@ -243,7 +244,7 @@ import 'emby-checkbox';
             saveUser(context, user, userSettings, apiClient).then(() => {
                 loading.hide();
                 if (enableSaveConfirmation) {
-                    import('toast').then(({default: toast}) => {
+                    import('../toast/toast').then((toast) => {
                         toast(globalize.translate('SettingsSaved'));
                     });
                 }
@@ -274,7 +275,7 @@ import 'emby-checkbox';
     }
 
     function embed(options, self) {
-        return import('text!./playbackSettings.template.html').then(({default: template}) => {
+        return import('./playbackSettings.template.html').then(({default: template}) => {
             options.element.innerHTML = globalize.translateHtml(template, 'core');
 
             options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));

src/components/playerstats/playerstats.js

@@ -1,11 +1,12 @@
-import events from 'events';
-import globalize from 'globalize';
-import playbackManager from 'playbackManager';
-import syncPlayManager from 'syncPlayManager';
-import playMethodHelper from 'playMethodHelper';
-import layoutManager from 'layoutManager';
-import 'paper-icon-button-light';
-import 'css!./playerstats';
+import connectionManager from 'jellyfin-apiclient';
+import events from 'jellyfin-apiclient';
+import '../../elements/emby-button/paper-icon-button-light';
+import globalize from '../../scripts/globalize';
+import layoutManager from '../layoutManager';
+import playbackManager from '../playback/playbackmanager';
+import playMethodHelper from '../playback/playmethodhelper';
+import syncPlayManager from '../syncPlay/syncPlayManager';
+import './playerstats.css';
 
 /* eslint-disable indent */
 

src/components/playlisteditor/playlisteditor.js

@@ -1,17 +1,18 @@
-import dom from 'dom';
-import dialogHelper from 'dialogHelper';
-import loading from 'loading';
-import layoutManager from 'layoutManager';
-import playbackManager from 'playbackManager';
-import * as userSettings from 'userSettings';
-import appRouter from 'appRouter';
-import globalize from 'globalize';
-import 'emby-input';
-import 'paper-icon-button-light';
-import 'emby-select';
-import 'material-icons';
-import 'css!./../formdialog';
-import 'emby-button';
+import dom from '../../scripts/dom';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import loading from '../loading/loading';
+import layoutManager from '../layoutManager';
+import playbackManager from '../playback/playbackmanager';
+import connectionManager from 'jellyfin-apiclient';
+import * as userSettings from '../../scripts/settings/userSettings';
+import appRouter from '../appRouter';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-select/emby-select';
+import 'material-design-icons-iconfont';
+import '../formdialog.css';
 
 /* eslint-disable indent */
 
@@ -209,7 +210,7 @@ import 'emby-button';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then((scrollHelper) => {
+        import('../../scripts/scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });

src/components/playmenu.js

@@ -1,7 +1,7 @@
-import actionsheet from 'actionsheet';
-import datetime from 'datetime';
-import playbackManager from 'playbackManager';
-import globalize from 'globalize';
+import actionsheet from './actionSheet/actionSheet';
+import datetime from '../scripts/datetime';
+import playbackManager from './playback/playbackmanager';
+import globalize from '../scripts/globalize';
 
 export function show(options) {
     const item = options.item;

src/components/pluginManager.js

@@ -1,5 +1,5 @@
-import events from 'events';
-import globalize from 'globalize';
+import events from 'jellyfin-apiclient';
+import globalize from '../scripts/globalize';
 /* eslint-disable indent */
 
     // TODO: replace with each plugin version

src/components/prompt/prompt.js

@@ -1,14 +1,14 @@
-import browser from 'browser';
-import dialogHelper from 'dialogHelper';
-import layoutManager from 'layoutManager';
-import scrollHelper from 'scrollHelper';
-import globalize from 'globalize';
-import dom from 'dom';
-import 'material-icons';
-import 'emby-button';
-import 'paper-icon-button-light';
-import 'emby-input';
-import 'formDialogStyle';
+import browser from '../../scripts/browser';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import layoutManager from '../layoutManager';
+import scrollHelper from '../../scripts/scrollHelper';
+import globalize from '../../scripts/globalize';
+import dom from '../../scripts/dom';
+import 'material-design-icons-iconfont';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-input/emby-input';
+import '../formdialog.css';
 
 /* eslint-disable indent */
 export default (() => {
@@ -117,7 +117,7 @@ export default (() => {
     } else {
         return options => {
             return new Promise((resolve, reject) => {
-                import('text!./prompt.template.html').then(({default: template}) => {
+                import('./prompt.template.html').then(({default: template}) => {
                     if (typeof options === 'string') {
                         options = {
                             title: '',

src/components/qualityOptions.js

@@ -1,4 +1,4 @@
-import globalize from 'globalize';
+import globalize from '../scripts/globalize';
 
 export function getVideoQualityOptions(options) {
     const maxStreamingBitrate = options.currentMaxBitrate;

src/components/recordingcreator/recordingbutton.js

@@ -1,8 +1,9 @@
-import dom from 'dom';
-import recordingHelper from 'recordingHelper';
-import 'paper-icon-button-light';
-import 'emby-button';
-import 'css!./recordingfields';
+import connectionManager from 'jellyfin-apiclient';
+import dom from '../../scripts/dom';
+import recordingHelper from './recordinghelper';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-button/emby-button';
+import './recordingfields.css';
 
 function onRecordingButtonClick(e) {
     const item = this.item;

src/components/recordingcreator/recordingcreator.js

@@ -1,22 +1,22 @@
-import dialogHelper from 'dialogHelper';
-import globalize from 'globalize';
-import layoutManager from 'layoutManager';
-import mediaInfo from 'mediaInfo';
-import require from 'require';
-import loading from 'loading';
-import scrollHelper from 'scrollHelper';
-import datetime from 'datetime';
-import imageLoader from 'imageLoader';
-import recordingFields from 'recordingFields';
-import events from 'events';
-import 'emby-checkbox';
-import 'emby-button';
-import 'emby-collapse';
-import 'emby-input';
-import 'paper-icon-button-light';
-import 'css!./../formdialog';
-import 'css!./recordingcreator';
-import 'material-icons';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import globalize from '../../scripts/globalize';
+import layoutManager from '../layoutManager';
+import mediaInfo from '../mediainfo/mediainfo';
+import connectionManager from 'jellyfin-apiclient';
+import loading from '../loading/loading';
+import scrollHelper from '../../scripts/scrollHelper';
+import datetime from '../../scripts/datetime';
+import imageLoader from '../images/imageLoader';
+import recordingFields from './recordingfields';
+import events from 'jellyfin-apiclient';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-collapse/emby-collapse';
+import '../../elements/emby-input/emby-input';
+import '../formdialog.css';
+import './recordingcreator.css';
+import 'material-design-icons-iconfont';
 
 let currentDialog;
 let closeAction;
@@ -68,7 +68,7 @@ function renderRecording(context, defaultTimer, program, apiClient, refreshRecor
         const imageContainer = context.querySelector('.recordingDialog-imageContainer');
 
         if (imgUrl) {
-            imageContainer.innerHTML = '<img src="' + require.toUrl('.').split('?')[0] + '/empty.png" data-src="' + imgUrl + '" class="recordingDialog-img lazy" />';
+            imageContainer.innerHTML = '<img src="./empty.png" data-src="' + imgUrl + '" class="recordingDialog-img lazy" />';
             imageContainer.classList.remove('hide');
 
             imageLoader.lazyChildren(imageContainer);
@@ -117,8 +117,8 @@ function reload(context, programId, serverId, refreshRecordingStateOnly) {
 
 function executeCloseAction(action, programId, serverId) {
     if (action === 'play') {
-        import('playbackManager').then(({ default: playbackManager }) => {
-            const apiClient = window.connectionManager.getApiClient(serverId);
+        import('../playback/playbackmanager').then(({ default: playbackManager }) => {
+            const apiClient = connectionManager.getApiClient(serverId);
 
             apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
                 playbackManager.play({
@@ -137,7 +137,7 @@ function showEditor(itemId, serverId) {
 
         loading.show();
 
-        import('text!./recordingcreator.template.html').then(({ default: template }) => {
+        import('./recordingcreator.template.html').then(({ default: template }) => {
             const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false

src/components/recordingcreator/recordingeditor.js

@@ -1,17 +1,19 @@
-import dialogHelper from 'dialogHelper';
-import globalize from 'globalize';
-import layoutManager from 'layoutManager';
-import loading from 'loading';
-import scrollHelper from 'scrollHelper';
-import 'scrollStyles';
-import 'emby-button';
-import 'emby-collapse';
-import 'emby-input';
-import 'paper-icon-button-light';
-import 'css!./../formdialog';
-import 'css!./recordingcreator';
-import 'material-icons';
-import 'flexStyles';
+
+import dialogHelper from '../dialogHelper/dialogHelper';
+import globalize from '../../scripts/globalize';
+import layoutManager from '../layoutManager';
+import connectionManager from 'jellyfin-apiclient';
+import loading from '../loading/loading';
+import scrollHelper from '../../scripts/scrollHelper';
+import '../../assets/css/scrollstyles.css';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-collapse/emby-collapse';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import './recordingcreator.css';
+import 'material-design-icons-iconfont';
+import '../../assets/css/flexstyles.css';
 
 let currentDialog;
 let recordingDeleted = false;
@@ -20,7 +22,7 @@ let currentServerId;
 let currentResolve;
 
 function deleteTimer(apiClient, timerId) {
-    return import('recordingHelper').then(({ default: recordingHelper }) => {
+    return import('./recordinghelper').then((recordingHelper) => {
         recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId());
     });
 }
@@ -89,7 +91,7 @@ function showEditor(itemId, serverId, options) {
         options = options || {};
         currentResolve = resolve;
 
-        import('text!./recordingeditor.template.html').then(({default: template}) => {
+        import('./recordingeditor.template.html').then(({default: template}) => {
             const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false

src/components/recordingcreator/recordingfields.js

@@ -1,13 +1,14 @@
-import globalize from 'globalize';
-import serverNotifications from 'serverNotifications';
-import loading from 'loading';
-import dom from 'dom';
-import recordingHelper from 'recordingHelper';
-import events from 'events';
-import 'paper-icon-button-light';
-import 'emby-button';
-import 'css!./recordingfields';
-import 'flexStyles';
+import globalize from '../../scripts/globalize';
+import connectionManager from 'jellyfin-apiclient';
+import serverNotifications from '../../scripts/serverNotifications';
+import loading from '../loading/loading';
+import dom from '../../scripts/dom';
+import recordingHelper from './recordinghelper';
+import events from 'jellyfin-apiclient';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import './recordingfields.css';
+import '../../assets/css/flexstyles.css';
 
 /*eslint prefer-const: "error"*/
 
@@ -117,7 +118,7 @@ class RecordingEditor {
     embed() {
         const self = this;
         return new Promise(function (resolve, reject) {
-            import('text!./recordingfields.template.html').then(({default: template}) => {
+            import('./recordingfields.template.html').then(({default: template}) => {
                 const options = self.options;
                 const context = options.parent;
                 context.innerHTML = globalize.translateHtml(template, 'core');
@@ -162,7 +163,7 @@ function onManageRecordingClick(e) {
     }
 
     const self = this;
-    import('recordingEditor').then(({default: recordingEditor}) => {
+    import('./recordingeditor').then((recordingEditor) => {
         recordingEditor.show(self.TimerId, options.serverId, {
             enableCancel: false
         }).then(function () {
@@ -180,7 +181,7 @@ function onManageSeriesRecordingClick(e) {
 
     const self = this;
 
-    import('seriesRecordingEditor').then(({default: seriesRecordingEditor}) => {
+    import('./seriesrecordingeditor').then((seriesRecordingEditor) => {
         seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, {
 
             enableCancel: false
@@ -225,7 +226,7 @@ function onRecordChange(e) {
 }
 
 function sendToast(msg) {
-    import('toast').then(({default: toast}) => {
+    import('../toast/toast').then((toast) => {
         toast(msg);
     });
 }

src/components/recordingcreator/recordinghelper.js

@@ -1,5 +1,6 @@
-import globalize from 'globalize';
-import loading from 'loading';
+import globalize from '../../scripts/globalize';
+import loading from '../loading/loading';
+import connectionManager from 'jellyfin-apiclient';
 
 /*eslint prefer-const: "error"*/
 
@@ -28,7 +29,7 @@ function changeRecordingToSeries(apiClient, timerId, programId, confirmTimerCanc
 
 function cancelTimerWithConfirmation(timerId, serverId) {
     return new Promise(function (resolve, reject) {
-        import('confirm').then(({ default: confirm }) => {
+        import('../confirm/confirm').then((confirm) => {
             confirm.default({
 
                 text: globalize.translate('MessageConfirmRecordingCancellation'),
@@ -48,7 +49,7 @@ function cancelTimerWithConfirmation(timerId, serverId) {
 
 function cancelSeriesTimerWithConfirmation(timerId, serverId) {
     return new Promise(function (resolve, reject) {
-        import('confirm').then(({ default: confirm }) => {
+        import('../confirm/confirm').then((confirm) => {
             confirm.default({
 
                 text: globalize.translate('MessageConfirmRecordingCancellation'),
@@ -61,7 +62,7 @@ function cancelSeriesTimerWithConfirmation(timerId, serverId) {
 
                 const apiClient = window.connectionManager.getApiClient(serverId);
                 apiClient.cancelLiveTvSeriesTimer(timerId).then(function () {
-                    import('toast').then(({default: toast}) => {
+                    import('../toast/toast').then((toast) => {
                         toast(globalize.translate('SeriesCancelled'));
                     });
 
@@ -98,14 +99,14 @@ function createRecording(apiClient, programId, isSeries) {
 }
 
 function sendToast(msg) {
-    import('toast').then(({ default: toast }) => {
+    import('../toast/toast').then((toast) => {
         toast(msg);
     });
 }
 
 function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId) {
     return new Promise(function (resolve, reject) {
-        import('dialog').then(({ default: dialog }) => {
+        import('../dialog/dialog').then((dialog) => {
             const items = [];
 
             items.push({
@@ -150,7 +151,7 @@ function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus,
                     loading.show();
 
                     apiClient.cancelLiveTvSeriesTimer(seriesTimerId).then(function () {
-                        import('toast').then(({ default: toast }) => {
+                        import('../toast/toast').then((toast) => {
                             toast(globalize.translate('SeriesCancelled'));
                         });
 

src/components/recordingcreator/seriesrecordingeditor.js

@@ -1,19 +1,20 @@
-import dialogHelper from 'dialogHelper';
-import globalize from 'globalize';
-import layoutManager from 'layoutManager';
-import loading from 'loading';
-import scrollHelper from 'scrollHelper';
-import datetime from 'datetime';
-import 'scrollStyles';
-import 'emby-button';
-import 'emby-checkbox';
-import 'emby-input';
-import 'emby-select';
-import 'paper-icon-button-light';
-import 'css!./../formdialog';
-import 'css!./recordingcreator';
-import 'material-icons';
-import 'flexStyles';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import globalize from '../../scripts/globalize';
+import layoutManager from '../layoutManager';
+import connectionManager from 'jellyfin-apiclient';
+import loading from '../loading/loading';
+import scrollHelper from '../../scripts/scrollHelper';
+import datetime from '../../scripts/datetime';
+import '../../assets/css/scrollstyles.css';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import './recordingcreator.css';
+import 'material-design-icons-iconfont';
+import '../../assets/css/flexstyles.css';
 
 /*eslint prefer-const: "error"*/
 
@@ -25,7 +26,7 @@ let currentServerId;
 
 function deleteTimer(apiClient, timerId) {
     return new Promise(function (resolve, reject) {
-        import('recordingHelper').then(({ default: recordingHelper }) => {
+        import('./recordinghelper').then((recordingHelper) => {
             recordingHelper.cancelSeriesTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
         });
     });
@@ -150,7 +151,7 @@ function embed(itemId, serverId, options) {
     loading.show();
     options = options || {};
 
-    import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => {
+    import('./seriesrecordingeditor.template.html').then(({ default: template }) => {
         const dialogOptions = {
             removeOnClose: true,
             scrollY: false
@@ -192,7 +193,7 @@ function showEditor(itemId, serverId, options) {
         loading.show();
         options = options || {};
 
-        import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => {
+        import('./seriesrecordingeditor.template.html').then(({ default: template }) => {
             const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false

src/components/refreshdialog/refreshdialog.js

@@ -1,15 +1,16 @@
-import dom from 'dom';
-import dialogHelper from 'dialogHelper';
-import loading from 'loading';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import 'emby-input';
-import 'emby-checkbox';
-import 'paper-icon-button-light';
-import 'emby-select';
-import 'material-icons';
-import 'css!./../formdialog';
-import 'emby-button';
+import dom from '../../scripts/dom';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import loading from '../loading/loading';
+import layoutManager from '../layoutManager';
+import connectionManager from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-select/emby-select';
+import 'material-design-icons-iconfont';
+import '../formdialog.css';
 
 /*eslint prefer-const: "error"*/
 
@@ -52,7 +53,7 @@ function getEditorHtml() {
 }
 
 function centerFocus(elem, horiz, on) {
-    import('scrollHelper').then(({default: scrollHelper}) => {
+    import('../../scripts/scrollHelper').then((scrollHelper) => {
         const fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
@@ -85,7 +86,7 @@ function onSubmit(e) {
 
     dialogHelper.close(dlg);
 
-    import('toast').then(({default: toast}) => {
+    import('../toast/toast').then((toast) => {
         toast(globalize.translate('RefreshQueued'));
     });
 

src/components/remotecontrol/remotecontrol.js

@@ -1,20 +1,21 @@
-import datetime from 'datetime';
-import backdrop from 'backdrop';
-import listView from 'listView';
-import imageLoader from 'imageLoader';
-import playbackManager from 'playbackManager';
-import nowPlayingHelper from 'nowPlayingHelper';
-import events from 'events';
-import appHost from 'apphost';
-import globalize from 'globalize';
-import layoutManager from 'layoutManager';
-import * as userSettings from 'userSettings';
-import cardBuilder from 'cardBuilder';
-import itemContextMenu from 'itemContextMenu';
-import 'cardStyle';
-import 'emby-itemscontainer';
-import 'css!./remotecontrol.css';
-import 'emby-ratingbutton';
+import datetime from '../../scripts/datetime';
+import backdrop from '../backdrop/backdrop';
+import listView from '../listview/listview';
+import imageLoader from '../images/imageLoader';
+import playbackManager from '../playback/playbackmanager';
+import nowPlayingHelper from '../playback/nowplayinghelper';
+import events from 'jellyfin-apiclient';
+import connectionManager from 'jellyfin-apiclient';
+import appHost from '../apphost';
+import globalize from '../../scripts/globalize';
+import layoutManager from '../layoutManager';
+import * as userSettings from '../../scripts/settings/userSettings';
+import cardBuilder from '../cardbuilder/cardBuilder';
+import itemContextMenu from '../itemContextMenu';
+import '../cardbuilder/card.css';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
+import './remotecontrol.css';
+import '../../elements/emby-ratingbutton/emby-ratingbutton';
 
 /*eslint prefer-const: "error"*/
 
@@ -37,7 +38,7 @@ function showAudioMenu(context, player, button, item) {
         return menuItem;
     });
 
-    import('actionsheet').then(({ default: actionsheet }) => {
+    import('../actionSheet/actionSheet').then((actionsheet) => {
         actionsheet.show({
             items: menuItems,
             positionTo: button,
@@ -69,7 +70,7 @@ function showSubtitleMenu(context, player, button, item) {
         selected: currentIndex == null
     });
 
-    import('actionsheet').then(({ default: actionsheet }) => {
+    import('../actionSheet/actionSheet').then((actionsheet) => {
         actionsheet.show({
             items: menuItems,
             positionTo: button,
@@ -693,7 +694,7 @@ export default function () {
     }
 
     function savePlaylist() {
-        import('playlistEditor').then(({ default: playlistEditor }) => {
+        import('../playlisteditor/playlisteditor').then((playlistEditor) => {
             getSaveablePlaylistItems().then(function (items) {
                 const serverId = items.length ? items[0].ServerId : ApiClient.serverId();
                 new playlistEditor({
@@ -863,7 +864,7 @@ export default function () {
         }, currentPlayer);
         form.querySelector('input').value = '';
 
-        import('toast').then(({ default: toast }) => {
+        import('../toast/toast').then((toast) => {
             toast('Message sent.');
         });
 
@@ -882,7 +883,7 @@ export default function () {
         }, currentPlayer);
         form.querySelector('input').value = '';
 
-        import('toast').then(({ default: toast }) => {
+        import('../toast/toast').then((toast) => {
             toast('Text sent.');
         });
 

src/components/scrollManager.js

@@ -5,9 +5,9 @@
  * @module components/scrollManager
  */
 
-import dom from 'dom';
-import browser from 'browser';
-import layoutManager from 'layoutManager';
+import dom from '../scripts/dom';
+import browser from '../scripts/browser';
+import layoutManager from './layoutManager';
 
     /**
      * Scroll time in ms.
@@ -223,7 +223,7 @@ import layoutManager from 'layoutManager';
             let parent = element.parentElement;
 
             while (parent) {
-                // Skip 'emby-scroller' because it scrolls by itself
+                // Skip '../../elements/emby-scroller/emby-scroller' because it scrolls by itself
                 if (!parent.classList.contains('emby-scroller') &&
                     parent[nameScroll] > parent[nameClient] && parent.classList.contains(nameClass)) {
                     return parent;

src/components/search/searchfields.js

@@ -1,12 +1,12 @@
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import events from 'events';
-import browser from 'browser';
-import AlphaPicker from 'alphaPicker';
-import 'emby-input';
-import 'flexStyles';
-import 'material-icons';
-import 'css!./searchfields';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import events from 'jellyfin-apiclient';
+import browser from '../../scripts/browser';
+import AlphaPicker from '../alphaPicker/alphaPicker';
+import '../../elements/emby-input/emby-input';
+import '../../assets/css/flexstyles.css';
+import 'material-design-icons-iconfont';
+import './searchfields.css';
 
 /* eslint-disable indent */
 
@@ -61,7 +61,7 @@ import 'css!./searchfields';
     }
 
     function embed(elem, instance, options) {
-        import('text!./searchfields.template.html').then(({default: template}) => {
+        import('./searchfields.template.html').then(({default: template}) => {
             let html = globalize.translateHtml(template, 'core');
 
             if (browser.tizen || browser.orsay) {

src/components/search/searchresults.js

@@ -1,10 +1,11 @@
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import cardBuilder from 'cardBuilder';
-import appRouter from 'appRouter';
-import 'emby-scroller';
-import 'emby-itemscontainer';
-import 'emby-button';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import connectionManager from 'jellyfin-apiclient';
+import cardBuilder from '../cardbuilder/cardBuilder';
+import appRouter from '../appRouter';
+import '../../elements/emby-scroller/emby-scroller';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
+import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
@@ -584,7 +585,7 @@ import 'emby-button';
     }
 
     function embed(elem, instance, options) {
-        import('text!./searchresults.template.html').then(({default: template}) => {
+        import('./searchresults.template.html').then(({default: template}) => {
             if (!enableScrollX()) {
                 template = replaceAll(template, 'data-horizontal="true"', 'data-horizontal="false"');
                 template = replaceAll(template, 'itemsContainer scrollSlider', 'itemsContainer scrollSlider vertical-wrap');

src/components/settingshelper.js

@@ -1,4 +1,4 @@
-import globalize from 'globalize';
+import globalize from '../scripts/globalize';
 
 /**
  * Helper for handling settings.

src/components/shortcuts.js

@@ -5,12 +5,13 @@
  * @module components/shortcuts
  */
 
-import playbackManager from 'playbackManager';
-import inputManager from 'inputManager';
-import appRouter from 'appRouter';
-import globalize from 'globalize';
-import dom from 'dom';
-import recordingHelper from 'recordingHelper';
+import playbackManager from './playback/playbackmanager';
+import inputManager from '../scripts/inputManager';
+import connectionManager from 'jellyfin-apiclient';
+import appRouter from './appRouter';
+import globalize from '../scripts/globalize';
+import dom from '../scripts/dom';
+import recordingHelper from './recordingcreator/recordinghelper';
 
     function playAllFromHere(card, serverId, queue) {
         const parent = card.parentNode;
@@ -69,7 +70,8 @@ import recordingHelper from 'recordingHelper';
     }
 
     function showProgramDialog(item) {
-        import('recordingCreator').then(({default:recordingCreator}) => {
+        import('./recordingcreator/recordingcreator' +
+        '').then(({default:recordingCreator}) => {
             recordingCreator.show(item.Id, item.ServerId);
         });
     }
@@ -109,7 +111,7 @@ import recordingHelper from 'recordingHelper';
                 item.PlaylistItemId = elem ? elem.getAttribute('data-playlistitemid') : null;
             }
 
-            import('itemContextMenu').then(({default: itemContextMenu}) => {
+            import('./itemContextMenu').then((itemContextMenu) => {
                 window.connectionManager.getApiClient(item.ServerId).getCurrentUser().then(user => {
                     itemContextMenu.show(Object.assign({
                         item: item,
@@ -153,7 +155,7 @@ import recordingHelper from 'recordingHelper';
     function showPlayMenu(card, target) {
         const item = getItemInfoFromCard(card);
 
-        import('playMenu').then(({default: playMenu}) => {
+        import('./playmenu').then((playMenu) => {
             playMenu.show({
 
                 item: item,
@@ -163,7 +165,7 @@ import recordingHelper from 'recordingHelper';
     }
 
     function sendToast(text) {
-        import('toast').then(({default: toast}) => {
+        import('./toast/toast').then((toast) => {
             toast(text);
         });
     }
@@ -269,7 +271,7 @@ import recordingHelper from 'recordingHelper';
     }
 
     function addToPlaylist(item) {
-        import('playlistEditor').then(({default: playlistEditor}) => {
+        import('./playlisteditor/playlisteditor').then((playlistEditor) => {
             new playlistEditor().show({
                 items: [item.Id],
                 serverId: item.ServerId
@@ -294,16 +296,16 @@ import recordingHelper from 'recordingHelper';
 
             if (item.Type === 'Timer') {
                 if (item.ProgramId) {
-                    import('recordingCreator').then(({default: recordingCreator}) => {
+                    import('./recordingcreator/recordingcreator').then((recordingCreator) => {
                         recordingCreator.show(item.ProgramId, serverId).then(resolve, reject);
                     });
                 } else {
-                    import('recordingEditor').then(({default: recordingEditor}) => {
+                    import('./recordingcreator/recordingeditor').then((recordingEditor) => {
                         recordingEditor.show(item.Id, serverId).then(resolve, reject);
                     });
                 }
             } else {
-                import('metadataEditor').then(({default: metadataEditor}) => {
+                import('./metadataEditor/metadataEditor').then((metadataEditor) => {
                     metadataEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             }

src/components/slideshow/slideshow.js

@@ -2,16 +2,17 @@
  * Image viewer component
  * @module components/slideshow/slideshow
  */
-import dialogHelper from 'dialogHelper';
-import inputManager from 'inputManager';
-import layoutManager from 'layoutManager';
-import focusManager from 'focusManager';
-import browser from 'browser';
-import appHost from 'apphost';
-import dom from 'dom';
-import 'css!./style';
-import 'material-icons';
-import 'paper-icon-button-light';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import inputManager from '../../scripts/inputManager';
+import connectionManager from 'jellyfin-apiclient';
+import layoutManager from '../layoutManager';
+import focusManager from '../focusManager';
+import browser from '../../scripts/browser';
+import appHost from '../apphost';
+import dom from '../../scripts/dom';
+import './style.css';
+import 'material-design-icons-iconfont';
+import '../../elements/emby-button/paper-icon-button-light';
 
 /**
  * Name of transition event.
@@ -431,7 +432,7 @@ export default function (options) {
     function download() {
         const imageInfo = getCurrentImageInfo();
 
-        import('fileDownloader').then(({default: fileDownloader}) => {
+        import('../../scripts/fileDownloader').then((fileDownloader) => {
             fileDownloader.download([imageInfo]);
         });
     }

src/components/sortmenu/sortmenu.js

@@ -1,13 +1,13 @@
-import dialogHelper from 'dialogHelper';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import * as userSettings from 'userSettings';
-import 'emby-select';
-import 'paper-icon-button-light';
-import 'material-icons';
-import 'css!./../formdialog';
-import 'emby-button';
-import 'flexStyles';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import * as userSettings from '../../scripts/settings/userSettings';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-button/paper-icon-button-light';
+import 'material-design-icons-iconfont';
+import '../formdialog.css';
+import '../../elements/emby-button/emby-button';
+import '../../assets/css/flexstyles.css';
 
 function onSubmit(e) {
     e.preventDefault();
@@ -22,7 +22,7 @@ function initEditor(context, settings) {
 }
 
 function centerFocus(elem, horiz, on) {
-    import('scrollHelper').then(({default: scrollHelper}) => {
+    import('../../scripts/scrollHelper').then((scrollHelper) => {
         const fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
@@ -44,7 +44,7 @@ function saveValues(context, settingsKey) {
 class SortMenu {
     show(options) {
         return new Promise(function (resolve, reject) {
-            import('text!./sortmenu.template.html').then(({default: template}) => {
+            import('./sortmenu.template.html').then(({default: template}) => {
                 const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false

src/components/subtitleeditor/subtitleeditor.js

@@ -1,19 +1,20 @@
-import appHost from 'apphost';
-import dialogHelper from 'dialogHelper';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import * as userSettings from 'userSettings';
-import loading from 'loading';
-import focusManager from 'focusManager';
-import dom from 'dom';
-import 'emby-select';
-import 'listViewStyle';
-import 'paper-icon-button-light';
-import 'css!./../formdialog';
-import 'material-icons';
-import 'css!./subtitleeditor';
-import 'emby-button';
-import 'flexStyles';
+import appHost from '../apphost';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import * as userSettings from '../../scripts/settings/userSettings';
+import connectionManager from 'jellyfin-apiclient';
+import loading from '../loading/loading';
+import focusManager from '../focusManager';
+import dom from '../../scripts/dom';
+import '../../elements/emby-select/emby-select';
+import '../listview/listview.css';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import 'material-design-icons-iconfont';
+import './subtitleeditor.css';
+import '../../elements/emby-button/emby-button';
+import '../../assets/css/flexstyles.css';
 
 let currentItem;
 let hasChanges;
@@ -30,7 +31,7 @@ function downloadRemoteSubtitles(context, id) {
     }).then(function () {
         hasChanges = true;
 
-        import('toast').then(({default: toast}) => {
+        import('../toast/toast').then((toast) => {
             toast(globalize.translate('MessageDownloadQueued'));
         });
 
@@ -41,7 +42,7 @@ function downloadRemoteSubtitles(context, id) {
 function deleteLocalSubtitle(context, index) {
     const msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
 
-    import('confirm').then(({default: confirm}) => {
+    import('../confirm/confirm').then((confirm) => {
         confirm({
 
             title: globalize.translate('ConfirmDeletion'),
@@ -329,7 +330,7 @@ function showDownloadOptions(button, context, subtitleId) {
         id: 'download'
     });
 
-    import('actionsheet').then(({default: actionsheet}) => {
+    import('../actionSheet/actionSheet').then((actionsheet) => {
         actionsheet.show({
             items: items,
             positionTo: button
@@ -347,7 +348,7 @@ function showDownloadOptions(button, context, subtitleId) {
 }
 
 function centerFocus(elem, horiz, on) {
-    import('scrollHelper').then(({default: scrollHelper}) => {
+    import('../../scripts/scrollHelper').then(({default: scrollHelper}) => {
         const fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
@@ -431,7 +432,7 @@ function showEditor(itemId, serverId) {
     loading.show();
 
     return new Promise(function (resolve, reject) {
-        import('text!./subtitleeditor.template.html').then(({default: template}) => {
+        import('./subtitleeditor.template.html').then(({default: template}) => {
             showEditorInternal(itemId, serverId, template).then(resolve, reject);
         });
     });

src/components/subtitlesettings/subtitlesettings.js

@@ -1,20 +1,21 @@
-import globalize from 'globalize';
-import appHost from 'apphost';
-import appSettings from 'appSettings';
-import focusManager from 'focusManager';
-import layoutManager from 'layoutManager';
-import loading from 'loading';
-import subtitleAppearanceHelper from 'subtitleAppearanceHelper';
-import settingsHelper from 'settingsHelper';
-import dom from 'dom';
-import events from 'events';
-import 'listViewStyle';
-import 'emby-select';
-import 'emby-slider';
-import 'emby-input';
-import 'emby-checkbox';
-import 'flexStyles';
-import 'css!./subtitlesettings';
+import globalize from '../../scripts/globalize';
+import appHost from '../apphost';
+import appSettings from '../../scripts/settings/appSettings';
+import focusManager from '../focusManager';
+import layoutManager from '../layoutManager';
+import loading from '../loading/loading';
+import connectionManager from 'jellyfin-apiclient';
+import subtitleAppearanceHelper from './subtitleappearancehelper';
+import settingsHelper from '../settingshelper';
+import dom from '../../scripts/dom';
+import events from 'jellyfin-apiclient';
+import '../listview/listview.css';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-slider/emby-slider';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../assets/css/flexstyles.css';
+import './subtitlesettings.css';
 
 /**
  * Subtitle settings.
@@ -87,7 +88,7 @@ function save(instance, context, userId, userSettings, apiClient, enableSaveConf
         saveUser(context, user, userSettings, instance.appearanceKey, apiClient).then(function () {
             loading.hide();
             if (enableSaveConfirmation) {
-                import('toast').then(({default: toast}) => {
+                import('../toast/toast').then((toast) => {
                     toast(globalize.translate('SettingsSaved'));
                 });
             }
@@ -158,7 +159,7 @@ function hideSubtitlePreview(persistent) {
 }
 
 function embed(options, self) {
-    import('text!./subtitlesettings.template.html').then(({default: template}) => {
+    import('./subtitlesettings.template.html').then(({default: template}) => {
         options.element.classList.add('subtitlesettings');
         options.element.innerHTML = globalize.translateHtml(template, 'core');
 

src/components/subtitlesync/subtitlesync.js

@@ -1,7 +1,8 @@
-import playbackManager from 'playbackManager';
-import layoutManager from 'layoutManager';
-import template from 'text!./subtitlesync.template.html';
-import 'css!./subtitlesync';
+
+import playbackManager from '../playback/playbackmanager';
+import layoutManager from '../layoutManager';
+import template from './subtitlesync.template.html';
+import './subtitlesync.css';
 
 let player;
 let subtitleSyncSlider;

src/components/syncPlay/groupSelectionMenu.js

@@ -1,11 +1,12 @@
-import events from 'events';
-import playbackManager from 'playbackManager';
-import syncPlayManager from 'syncPlayManager';
-import loading from 'loading';
-import toast from 'toast';
-import actionsheet from 'actionsheet';
-import globalize from 'globalize';
-import playbackPermissionManager from 'playbackPermissionManager';
+import events from 'jellyfin-apiclient';
+import connectionManager from 'jellyfin-apiclient';
+import playbackManager from '../playback/playbackmanager';
+import syncPlayManager from './syncPlayManager';
+import loading from '../loading/loading';
+import toast from '../toast/toast';
+import actionsheet from '../actionSheet/actionSheet';
+import globalize from '../../scripts/globalize';
+import playbackPermissionManager from './playbackPermissionManager';
 
 /**
  * Gets active player id.
@@ -158,7 +159,7 @@ events.on(syncPlayManager, 'enabled', function (e, enabled) {
  * Shows a menu to handle SyncPlay groups.
  * @param {HTMLElement} button - Element where to place the menu.
  */
-export function show (button) {
+export default function show (button) {
     loading.show();
 
     // TODO: should feature be disabled if playback permission is missing?

src/components/syncPlay/syncPlayManager.js

@@ -3,11 +3,12 @@
  * @module components/syncPlay/syncPlayManager
  */
 
-import events from 'events';
-import playbackManager from 'playbackManager';
-import timeSyncManager from 'timeSyncManager';
-import toast from 'toast';
-import globalize from 'globalize';
+import events from 'jellyfin-apiclient';
+import connectionManager from 'jellyfin-apiclient';
+import playbackManager from '../playback/playbackmanager';
+import timeSyncManager from './timeSyncManager';
+import toast from '../toast/toast';
+import globalize from '../../scripts//globalize';
 
 /**
  * Waits for an event to be triggered on an object. An optional timeout can specified after which the promise is rejected.

src/components/syncPlay/timeSyncManager.js

@@ -3,7 +3,8 @@
  * @module components/syncPlay/timeSyncManager
  */
 
-import events from 'events';
+import events from 'jellyfin-apiclient';
+import connectionManager from 'jellyfin-apiclient';
 
 /**
  * Time estimation

src/components/tabbedview/tabbedview.js

@@ -1,7 +1,7 @@
-import backdrop from 'backdrop';
-import * as mainTabsManager from 'mainTabsManager';
-import layoutManager from 'layoutManager';
-import 'emby-tabs';
+import backdrop from '../backdrop/backdrop';
+import * as mainTabsManager from '../maintabsmanager';
+import layoutManager from '../layoutManager';
+import '../../elements/emby-tabs/emby-tabs';
 
 function onViewDestroy(e) {
     const tabControllers = this.tabControllers;

src/components/themeMediaPlayer.js

@@ -1,5 +1,6 @@
-import playbackManager from 'playbackManager';
-import * as userSettings from 'userSettings';
+import playbackManager from './playback/playbackmanager';
+import * as userSettings from '../scripts/settings/userSettings';
+import connectionManager from 'jellyfin-apiclient';
 
 let currentOwnerId;
 let currentThemeIds = [];

src/components/toast/toast.js

@@ -1,4 +1,4 @@
-import 'css!./toast';
+import './toast';
 
 function remove(elem) {
     setTimeout(function () {
@@ -21,7 +21,7 @@ export default function (options) {
     }
 
     const elem = document.createElement('div');
-    elem.classList.add('toast');
+    elem.classList.add('../toast/toast');
     elem.innerHTML = options.text;
 
     document.body.appendChild(elem);

src/components/tunerPicker.js

@@ -1,16 +1,17 @@
-import dialogHelper from 'dialogHelper';
-import dom from 'dom';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import loading from 'loading';
-import browser from 'browser';
-import focusManager from 'focusManager';
-import scrollHelper from 'scrollHelper';
-import 'material-icons';
-import 'formDialogStyle';
-import 'emby-button';
-import 'emby-itemscontainer';
-import 'cardStyle';
+import dialogHelper from './dialogHelper/dialogHelper';
+import dom from '../scripts/dom';
+import layoutManager from './layoutManager';
+import connectionManager from 'jellyfin-apiclient';
+import globalize from '../scripts/globalize';
+import loading from './loading/loading';
+import browser from '../scripts/browser';
+import focusManager from './focusManager';
+import scrollHelper from '../scripts/scrollHelper';
+import 'material-design-icons-iconfont';
+import './formdialog.css';
+import '../elements/emby-button/emby-button';
+import '../elements/emby-itemscontainer/emby-itemscontainer';
+import './cardbuilder/card.css';
 
 const enableFocusTransform = !browser.slow && !browser.edge;
 

src/components/tvproviders/schedulesdirect.js

@@ -1,13 +1,13 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import globalize from 'globalize';
-import 'emby-checkbox';
-import 'emby-input';
-import 'listViewStyle';
-import 'paper-icon-button-light';
-import 'emby-select';
-import 'emby-button';
-import 'flexStyles';
+import 'jquery';
+import loading from '../loading/loading';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-input/emby-input';
+import '../listview/listview.css';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-button/emby-button';
+import '../../assets/css/flexstyles.css';
 
 export default function (page, providerId, options) {
     function reload() {

src/components/tvproviders/xmltv.js

@@ -1,10 +1,10 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import globalize from 'globalize';
-import 'emby-checkbox';
-import 'emby-input';
-import 'listViewStyle';
-import 'paper-icon-button-light';
+import 'jquery';
+import loading from '../loading/loading';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-input/emby-input';
+import '../listview/listview.css';
+import '../../elements/emby-button/paper-icon-button-light';
 
 export default function (page, providerId, options) {
     function getListingProvider(config, id) {
@@ -143,7 +143,7 @@ export default function (page, providerId, options) {
     function onSelectPathClick(e) {
         const page = $(e.target).parents('.xmltvForm')[0];
 
-        import('directorybrowser').then(({default: directoryBrowser}) => {
+        import('../directorybrowser/directorybrowser').then((directoryBrowser) => {
             const picker = new directoryBrowser();
             picker.show({
                 includeFiles: true,

src/components/upnextdialog/upnextdialog.js

@@ -1,14 +1,15 @@
-import dom from 'dom';
-import playbackManager from 'playbackManager';
-import events from 'events';
-import mediaInfo from 'mediaInfo';
-import layoutManager from 'layoutManager';
-import focusManager from 'focusManager';
-import globalize from 'globalize';
-import itemHelper from 'itemHelper';
-import 'css!./upnextdialog';
-import 'emby-button';
-import 'flexStyles';
+import dom from '../../scripts/dom';
+import playbackManager from '../playback/playbackmanager';
+import connectionManager from 'jellyfin-apiclient';
+import events from 'jellyfin-apiclient';
+import mediaInfo from '../mediainfo/mediainfo';
+import layoutManager from '../layoutManager';
+import focusManager from '../focusManager';
+import globalize from '../../scripts/globalize';
+import itemHelper from '../itemHelper';
+import './upnextdialog.css';
+import '../../elements/emby-button/emby-button';
+import '../../assets/css/flexstyles.css';
 
 /* eslint-disable indent */