fix webpack errors

files adapted to scss imports
added sass loader

src/components/collectionEditor/collectionEditor.js

@@ -11,7 +11,7 @@ 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';
+import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';
 

src/components/dialog/dialog.js

@@ -8,7 +8,7 @@ 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';
+import '../../assets/css/flexstyles.scss';
 
 /* eslint-disable indent */
 

src/components/filtermenu/filtermenu.js

@@ -12,7 +12,7 @@ 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';
+import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';
 
 function onSubmit(e) {

src/components/guide/guide.js

@@ -22,7 +22,7 @@ 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 '../../assets/css/flexstyles.scss';
 import 'webcomponents.js/webcomponents-lite';
 import ServerConnections from '../ServerConnections';
 

src/components/itemMediaInfo/itemMediaInfo.js

@@ -15,7 +15,7 @@ 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';
+import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';
 
     function setMediaInfo(user, page, item) {

src/components/mediaLibraryCreator/mediaLibraryCreator.js

@@ -18,7 +18,7 @@ import '../../elements/emby-select/emby-select';
 import '../../elements/emby-toggle/emby-toggle';
 import '../listview/listview.css';
 import '../formdialog.css';
-import '../../assets/css/flexstyles.css';
+import '../../assets/css/flexstyles.scss';
 import toast from '../toast/toast';
 import alert from '../alert';
 

src/components/mediaLibraryEditor/mediaLibraryEditor.js

@@ -16,7 +16,7 @@ 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';
+import '../../assets/css/flexstyles.scss';
 import toast from '../toast/toast';
 import confirm from '../confirm/confirm';
 

src/components/metadataEditor/metadataEditor.js

@@ -14,8 +14,8 @@ 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';
+import '../../assets/css/clearbutton.scss';
+import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';
 

src/components/recordingcreator/recordingeditor.js

@@ -12,7 +12,7 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../formdialog.css';
 import './recordingcreator.css';
 import 'material-design-icons-iconfont';
-import '../../assets/css/flexstyles.css';
+import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';
 
 let currentDialog;

src/components/recordingcreator/recordingfields.js

@@ -7,7 +7,7 @@ import recordingHelper from './recordinghelper';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
 import './recordingfields.css';
-import '../../assets/css/flexstyles.css';
+import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';
 

src/components/recordingcreator/seriesrecordingeditor.js

@@ -13,7 +13,7 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../formdialog.css';
 import './recordingcreator.css';
 import 'material-design-icons-iconfont';
-import '../../assets/css/flexstyles.css';
+import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';
 
 /*eslint prefer-const: "error"*/

src/components/search/searchfields.js

@@ -4,7 +4,7 @@ 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 '../../assets/css/flexstyles.scss';
 import 'material-design-icons-iconfont';
 import './searchfields.css';
 

src/components/sortmenu/sortmenu.js

@@ -7,7 +7,7 @@ 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';
+import '../../assets/css/flexstyles.scss';
 
 function onSubmit(e) {
     e.preventDefault();

src/components/subtitleeditor/subtitleeditor.js

@@ -1,4 +1,4 @@
-import appHost from '../apphost';
+import { appHost } from '../apphost';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import layoutManager from '../layoutManager';
 import globalize from '../../scripts/globalize';
@@ -13,7 +13,7 @@ import '../formdialog.css';
 import 'material-design-icons-iconfont';
 import './subtitleeditor.css';
 import '../../elements/emby-button/emby-button';
-import '../../assets/css/flexstyles.css';
+import '../../assets/css/flexstyles.scss';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';
 import confirm from '../confirm/confirm';

src/components/subtitlesettings/subtitlesettings.js

@@ -13,7 +13,7 @@ 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 '../../assets/css/flexstyles.scss';
 import './subtitlesettings.css';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';

src/components/tvproviders/schedulesdirect.js

@@ -7,7 +7,7 @@ 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';
+import '../../assets/css/flexstyles.scss';
 import Dashboard from '../../scripts/clientUtils';
 import { Events } from 'jellyfin-apiclient';
 

src/components/upnextdialog/upnextdialog.js

@@ -8,7 +8,7 @@ import globalize from '../../scripts/globalize';
 import itemHelper from '../itemHelper';
 import './upnextdialog.css';
 import '../../elements/emby-button/emby-button';
-import '../../assets/css/flexstyles.css';
+import '../../assets/css/flexstyles.scss';
 
 /* eslint-disable indent */
 

src/components/viewSettings/viewSettings.js

@@ -9,7 +9,7 @@ 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';
+import '../../assets/css/flexstyles.scss';
 
 function onSubmit(e) {
     e.preventDefault();

src/controllers/dashboard/dashboard.js

@@ -15,7 +15,7 @@ import imageHelper from '../../scripts/imagehelper';
 import indicators from '../../components/indicators/indicators';
 import '../../components/listview/listview.css';
 import '../../elements/emby-button/emby-button';
-import '../../assets/css/flexstyles.css';
+import '../../assets/css/flexstyles.scss';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 import taskButton from '../../scripts/taskbutton';
 import Dashboard from '../../scripts/clientUtils';

src/controllers/dashboard/devices/devices.js

@@ -22,14 +22,12 @@ import confirm from '../../../components/confirm/confirm';
     function deleteAllDevices(page) {
         const msg = globalize.translate('DeleteDevicesConfirmation');
 
-        require(['confirm'], async function (confirm) {
-            await confirm({
-                text: msg,
-                title: globalize.translate('HeaderDeleteDevices'),
-                confirmText: globalize.translate('ButtonDelete'),
-                primary: 'delete'
-            });
-
+        confirm({
+            text: msg,
+            title: globalize.translate('HeaderDeleteDevices'),
+            confirmText: globalize.translate('ButtonDelete'),
+            primary: 'delete'
+        }).then(async () => {
             loading.show();
             await Promise.all(
                 deviceIds.filter(canDelete).map((id) => ApiClient.deleteDevice(id))

src/controllers/dashboard/logs.js

@@ -2,7 +2,7 @@ import datetime from '../../scripts/datetime';
 import loading from '../../components/loading/loading';
 import '../../elements/emby-button/emby-button';
 import '../../components/listview/listview.css';
-import '../../assets/css/flexstyles.css';
+import '../../assets/css/flexstyles.scss';
 
 /* eslint-disable indent */
 

src/controllers/dashboard/users/userprofilespage.js

@@ -7,7 +7,7 @@ import '../../../elements/emby-button/paper-icon-button-light';
 import '../../../components/cardbuilder/card.css';
 import '../../../elements/emby-button/emby-button';
 import '../../../components/indicators/indicators.css';
-import '../../../assets/css/flexstyles.css';
+import '../../../assets/css/flexstyles.scss';
 import Dashboard from '../../../scripts/clientUtils';
 import confirm from '../../../components/confirm/confirm';
 

src/controllers/livetvstatus.js

@@ -6,7 +6,7 @@ import layoutManager from '../components/layoutManager';
 import loading from '../components/loading/loading';
 import browser from '../scripts/browser';
 import '../components/listview/listview.css';
-import '../assets/css/flexstyles.css';
+import '../assets/css/flexstyles.scss';
 import '../elements/emby-itemscontainer/emby-itemscontainer';
 import '../components/cardbuilder/card.css';
 import 'material-design-icons-iconfont';

src/controllers/music/musicrecommended.js

@@ -13,7 +13,7 @@ import '../../assets/css/scrollstyles.css';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';
 import '../../elements/emby-tabs/emby-tabs';
 import '../../elements/emby-button/emby-button';
-import '../../assets/css/flexstyles.css';
+import '../../assets/css/flexstyles.scss';
 import Dashboard from '../../scripts/clientUtils';
 
 /* eslint-disable indent */

src/controllers/session/selectServer/index.js

@@ -9,7 +9,7 @@ import actionSheet from '../../../components/actionSheet/actionSheet';
 import dom from '../../../scripts/dom';
 import browser from '../../../scripts/browser';
 import 'material-design-icons-iconfont';
-import '../../../assets/css/flexstyles.css';
+import '../../../assets/css/flexstyles.scss';
 import '../../../elements/emby-scroller/emby-scroller';
 import '../../../elements/emby-itemscontainer/emby-itemscontainer';
 import '../../../components/cardbuilder/card.css';

src/plugins/pdfPlayer/plugin.js

@@ -1,12 +1,11 @@
-import loading from 'loading';
-import keyboardnavigation from 'keyboardnavigation';
-import dialogHelper from 'dialogHelper';
-import dom from 'dom';
-import appRouter from 'appRouter';
-import events from 'events';
-import 'css!./style';
-import 'material-icons';
-import 'paper-icon-button-light';
+import loading from '../../components/loading/loading';
+import keyboardnavigation from '../../scripts/keyboardNavigation';
+import dialogHelper from '../../components/dialogHelper/dialogHelper';
+import dom from '../../scripts/dom';
+import { appRouter } from '../../components/appRouter';
+import './style.css';
+import '../../elements/emby-button/paper-icon-button-light';
+import { Events } from 'jellyfin-apiclient';
 
 export class PdfPlayer {
     constructor() {
@@ -189,7 +188,7 @@ export class PdfPlayer {
         const apiClient = window.connectionManager.getApiClient(serverId);
 
         return new Promise((resolve, reject) => {
-            import('pdfjs').then(({default: pdfjs}) => {
+            import('pdfjs-dist').then(({default: pdfjs}) => {
                 const downloadHref = apiClient.getItemDownloadUrl(item.Id);
 
                 this.bindEvents();
@@ -266,7 +265,7 @@ export class PdfPlayer {
 
     renderPage(canvas, number) {
         this.book.getPage(number).then(page => {
-            events.trigger(this, 'timeupdate');
+            Events.trigger(this, 'timeupdate');
 
             const original = page.getViewport({ scale: 1 });
             const context = canvas.getContext('2d');

src/scripts/libraryMenu.js

@@ -14,7 +14,7 @@ import imageHelper from './imagehelper';
 import '../elements/emby-button/paper-icon-button-light';
 import 'material-design-icons-iconfont';
 import '../assets/css/scrollstyles.css';
-import '../assets/css/flexstyles.css';
+import '../assets/css/flexstyles.scss';
 import Dashboard from './clientUtils';
 import ServerConnections from '../components/ServerConnections';
 

src/scripts/routes.js

@@ -7,10 +7,10 @@ import '../elements/emby-collapse/emby-collapse';
 import '../elements/emby-select/emby-select';
 import '../elements/emby-checkbox/emby-checkbox';
 import '../elements/emby-slider/emby-slider';
-import '../assets/css/livetv.css';
+import '../assets/css/livetv.scss';
 import '../components/listview/listview.css';
 import '../assets/css/dashboard.css';
-import '../assets/css/detailtable.css';
+import '../assets/css/detailtable.scss';
 import { appRouter } from '../components/appRouter';
 
 /* eslint-disable indent */

src/scripts/site.js

@@ -6,8 +6,7 @@ import 'intersection-observer';
 import 'classlist.js';
 import 'whatwg-fetch';
 import 'resize-observer-polyfill';
-import 'jellyfin-noto';
-import '../assets/css/site.css';
+import '../assets/css/site.scss';
 import AppInfo from '../components/AppInfo';
 import { Events } from 'jellyfin-apiclient';
 import ServerConnections from '../components/ServerConnections';
@@ -120,10 +119,10 @@ function onGlobalizeInit() {
 
     if (browser.tv && !browser.android) {
         console.debug('using system fonts with explicit sizes');
-        import('../assets/css/fonts.sized.css');
+        import('../assets/css/fonts.sized.scss');
     } else {
         console.debug('using default fonts');
-        import('../assets/css/fonts.css');
+        import('../assets/css/fonts.scss');
     }
 
     import('../assets/css/librarybrowser.css');
@@ -173,7 +172,7 @@ function onAppReady() {
     console.debug('onAppReady: loading dependencies');
 
     if (browser.iOS) {
-        import('../assets/css/ios.css');
+        import('../assets/css/ios.scss');
     }
 
     Promise.all([