Merge pull request #597 from dkanada/firefox

Minor changes to improve Firefox support

README.md

@@ -58,8 +58,7 @@ Jellyfin Web is the frontend used for most of the clients available for end user
    yarn install
    ```
 
-3. Run webpack dev server 
+3. Run the web client with webpack for local development.
    ```sh
    yarn serve
    ```
-

src/components/actionsheet/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "actionsheet.js"
-}

src/components/backdrop/backdrop.js

@@ -1,4 +1,4 @@
-define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./style'], function (browser, connectionManager, playbackManager, dom) {
+define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./backdrop'], function (browser, connectionManager, playbackManager, dom) {
     'use strict';
 
     function enableAnimation(elem) {

src/components/backdrop/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "backdrop.js"
-}

src/components/dialog/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "dialog.js"
-}

src/components/dialogHelper/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "dialogHelper.js"
-}

src/components/emby-input/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "emby-input.js"
-}

src/components/emby-radio/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "emby-radio.js"
-}

src/components/emby-tabs/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "emby-tabs.js"
-}

src/components/headroom/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "headroom.js"
-}

src/components/homescreensettings/homescreensettings.template.html

@@ -104,32 +104,21 @@
     </div>
 
     <div class="verticalSection verticalSection-extrabottompadding">
-
-        <h2 class="sectionTitle">
-            ${HeaderLibraryOrder}
-        </h2>
-        <div class="paperList viewOrderList">
-
+        <h2 class="sectionTitle">${HeaderLibraryOrder}</h2>
+        <div class="paperList viewOrderList"></div>
     </div>
 
-    </div>
-
-    <div class="perLibrarySettings">
-
-    </div>
+    <div class="perLibrarySettings"></div>
 
     <div class="verticalSection verticalSection-extrabottompadding">
         <label class="checkboxContainer">
             <input class="chkHidePlayedFromLatest" type="checkbox" is="emby-checkbox" />
             <span>${HideWatchedContentFromLatestMedia}</span>
         </label>
-
     </div>
 
     <div class="verticalSection verticalSection-extrabottompadding">
-        <h2 class="sectionTitle">
-            ${HeaderLibraryFolders}
-        </h2>
+        <h2 class="sectionTitle">${HeaderLibraryFolders}</h2>
         <div>
             <p>${LabelSelectFolderGroups}</p>
             <div class="folderGroupList"></div>

src/components/navdrawer/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "navdrawer.js"
-}

src/components/notifications/notifications.js

@@ -2,7 +2,6 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     'use strict';
 
     function onOneDocumentClick() {
-
         document.removeEventListener('click', onOneDocumentClick);
         document.removeEventListener('keydown', onOneDocumentClick);
 
@@ -10,15 +9,14 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
             Notification.requestPermission();
         }
     }
+
     document.addEventListener('click', onOneDocumentClick);
     document.addEventListener('keydown', onOneDocumentClick);
 
     var serviceWorkerRegistration;
 
     function closeAfter(notification, timeoutMs) {
-
         setTimeout(function () {
-
             if (notification.close) {
                 notification.close();
             } else if (notification.cancel) {
@@ -28,9 +26,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     }
 
     function resetRegistration() {
-
         var serviceWorker = navigator.serviceWorker;
-
         if (serviceWorker) {
             serviceWorker.ready.then(function (registration) {
                 serviceWorkerRegistration = registration;

src/components/toast/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "toast.js"
-}

src/components/usersettings/usersettingsbuilder.js

@@ -1,8 +1,7 @@
-define(['appSettings', 'events'], function (appsettings, events) {
+define(['appSettings', 'events'], function (appSettings, events) {
     'use strict';
 
     function onSaveTimeout() {
-
         var self = this;
         self.saveTimeout = null;
         self.currentApiClient.updateDisplayPreferences('usersettings', self.displayPrefs, self.currentUserId, 'emby');
@@ -12,6 +11,7 @@ define(['appSettings', 'events'], function (appsettings, events) {
         if (instance.saveTimeout) {
             clearTimeout(instance.saveTimeout);
         }
+
         instance.saveTimeout = setTimeout(onSaveTimeout.bind(instance), 50);
     }
 
@@ -19,7 +19,6 @@ define(['appSettings', 'events'], function (appsettings, events) {
     }
 
     UserSettings.prototype.setUserInfo = function (userId, apiClient) {
-
         if (this.saveTimeout) {
             clearTimeout(this.saveTimeout);
         }
@@ -49,14 +48,9 @@ define(['appSettings', 'events'], function (appsettings, events) {
     };
 
     UserSettings.prototype.set = function (name, value, enableOnServer) {
-
         var userId = this.currentUserId;
-        if (!userId) {
-            throw new Error('userId cannot be null');
-        }
-
         var currentValue = this.get(name, enableOnServer);
-        var result = appsettings.set(name, value, userId);
+        var result = appSettings.set(name, value, userId);
 
         if (enableOnServer !== false && this.displayPrefs) {
             this.displayPrefs.CustomPrefs[name] = value == null ? value : value.toString();
@@ -72,108 +66,70 @@ define(['appSettings', 'events'], function (appsettings, events) {
 
     UserSettings.prototype.get = function (name, enableOnServer) {
         var userId = this.currentUserId;
-        if (!userId) {
-            // TODO: I'd like to continue to throw this exception but it causes issues with offline use
-            // Revisit in the future and restore it
-            return null;
-            //throw new Error('userId cannot be null');
-        }
-
-        if (enableOnServer !== false) {
-            if (this.displayPrefs) {
+        if (enableOnServer !== false && this.displayPrefs) {
             return this.displayPrefs.CustomPrefs[name];
         }
-        }
 
-        return appsettings.get(name, userId);
+        return appSettings.get(name, userId);
     };
 
     UserSettings.prototype.serverConfig = function (config) {
-
         var apiClient = this.currentApiClient;
-
         if (config) {
-
             return apiClient.updateUserConfiguration(this.currentUserId, config);
-
-        } else {
+        }
 
         return apiClient.getUser(this.currentUserId).then(function (user) {
-
             return user.Configuration;
         });
-        }
     };
 
     UserSettings.prototype.enableCinemaMode = function (val) {
-
         if (val != null) {
             return this.set('enableCinemaMode', val.toString(), false);
         }
 
         val = this.get('enableCinemaMode', false);
-
-        if (val) {
         return val !== 'false';
-        }
-
-        return true;
     };
 
     UserSettings.prototype.enableNextVideoInfoOverlay = function (val) {
-
         if (val != null) {
             return this.set('enableNextVideoInfoOverlay', val.toString());
         }
 
-        val = this.get('enableNextVideoInfoOverlay');
-
+        val = this.get('enableNextVideoInfoOverlay', false);
         return val !== 'false';
     };
 
     UserSettings.prototype.enableThemeSongs = function (val) {
-
         if (val != null) {
             return this.set('enableThemeSongs', val.toString(), false);
         }
 
         val = this.get('enableThemeSongs', false);
-
         return val !== 'false';
     };
 
     UserSettings.prototype.enableThemeVideos = function (val) {
-
         if (val != null) {
             return this.set('enableThemeVideos', val.toString(), false);
         }
 
         val = this.get('enableThemeVideos', false);
-
-        if (val) {
         return val !== 'false';
-        }
-
-        return UserSettings.defaults.enableThemeVideos;
     };
 
     UserSettings.prototype.enableBackdrops = function (val) {
-
         if (val != null) {
             return this.set('enableBackdrops', val.toString(), false);
         }
 
         val = this.get('enableBackdrops', false);
-
-        if (val) {
         return val !== 'false';
-        }
-
-        return UserSettings.defaults.enableBackdrops;
     };
 
     UserSettings.prototype.language = function (val) {
-
         if (val != null) {
             return this.set('language', val.toString(), false);
         }
@@ -182,7 +138,6 @@ define(['appSettings', 'events'], function (appsettings, events) {
     };
 
     UserSettings.prototype.dateTimeLocale = function (val) {
-
         if (val != null) {
             return this.set('datetimelocale', val.toString(), false);
         }
@@ -191,7 +146,6 @@ define(['appSettings', 'events'], function (appsettings, events) {
     };
 
     UserSettings.prototype.skipBackLength = function (val) {
-
         if (val != null) {
             return this.set('skipBackLength', val.toString());
         }
@@ -200,7 +154,6 @@ define(['appSettings', 'events'], function (appsettings, events) {
     };
 
     UserSettings.prototype.skipForwardLength = function (val) {
-
         if (val != null) {
             return this.set('skipForwardLength', val.toString());
         }
@@ -209,7 +162,6 @@ define(['appSettings', 'events'], function (appsettings, events) {
     };
 
     UserSettings.prototype.dashboardTheme = function (val) {
-
         if (val != null) {
             return this.set('dashboardTheme', val);
         }
@@ -218,55 +170,41 @@ define(['appSettings', 'events'], function (appsettings, events) {
     };
 
     UserSettings.prototype.skin = function (val) {
-
         if (val != null) {
             return this.set('skin', val, false);
         }
 
-        return this.get('skin', false) || UserSettings.defaults.skin;
+        return this.get('skin', false);
     };
 
     UserSettings.prototype.theme = function (val) {
-
         if (val != null) {
             return this.set('appTheme', val, false);
         }
 
-        return this.get('appTheme', false) || UserSettings.defaults.theme;
+        return this.get('appTheme', false);
     };
 
     UserSettings.prototype.screensaver = function (val) {
-
         if (val != null) {
             return this.set('screensaver', val, false);
         }
 
-        return this.get('screensaver', false) || UserSettings.defaults.screensaver;
+        return this.get('screensaver', false);
     };
 
     UserSettings.prototype.soundEffects = function (val) {
-
         if (val != null) {
             return this.set('soundeffects', val, false);
         }
 
-        return this.get('soundeffects', false) || UserSettings.defaults.soundEffects;
-    };
-
-    // apps should set these values
-    UserSettings.defaults = {
-        theme: null,
-        enableThemeVideos: true
+        return this.get('soundeffects', false);
     };
 
     UserSettings.prototype.loadQuerySettings = function (key, query) {
-
         var values = this.get(key);
-
         if (values) {
-
             values = JSON.parse(values);
-
             return Object.assign(query, values);
         }
 
@@ -274,12 +212,11 @@ define(['appSettings', 'events'], function (appsettings, events) {
     };
 
     UserSettings.prototype.saveQuerySettings = function (key, query) {
-
         var values = {};
-
         if (query.SortBy) {
             values.SortBy = query.SortBy;
         }
+
         if (query.SortOrder) {
             values.SortOrder = query.SortOrder;
         }
@@ -288,26 +225,20 @@ define(['appSettings', 'events'], function (appsettings, events) {
     };
 
     UserSettings.prototype.getSubtitleAppearanceSettings = function (key) {
-
         key = key || 'localplayersubtitleappearance3';
-
         return JSON.parse(this.get(key, false) || '{}');
     };
 
     UserSettings.prototype.setSubtitleAppearanceSettings = function (value, key) {
-
         key = key || 'localplayersubtitleappearance3';
-
         return this.set(key, JSON.stringify(value), false);
     };
 
     UserSettings.prototype.setFilter = function (key, value) {
-
         return this.set(key, value, true);
     };
 
     UserSettings.prototype.getFilter = function (key) {
-
         return this.get(key, true);
     };
 

src/components/viewManager/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "viewManager.js"
-}

src/css/fonts.sized.css

@@ -25,7 +25,6 @@ h3 {
 
 /* This is supposed to be 1080p, but had to reduce the min height to account for possible browser chrome */
 @media all and (min-height: 1000px) {
-
     html {
         font-size: 27px;
     }

src/index.html

@@ -2,6 +2,7 @@
 <html class="preload">
 <head>
 
+    <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="manifest" href="manifest.json">
     <meta name="format-detection" content="telephone=no">
@@ -20,43 +21,43 @@
     <meta property="fb:app_id" content="1618309211750238">
     <link rel="apple-touch-icon" sizes="180x180" href="touchicon.png">
 
-    <!-------------------- iPhone 5 ------------------->
+    <!-- iPhone 5 -->
     <link href="splashscreens/iphone5_splash.png" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
     <link href="splashscreens/iphone5_splash_l.png" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
 
-    <!------------- iPhone 6, 6S, 7 and 8 ------------->
+    <!-- iPhone 6, 6S, 7 and 8 -->
     <link href="splashscreens/iphone6_splash.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
     <link href="splashscreens/iphone6_splash_l.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
 
-    <!------------- iPhone 6+, 7+ and 8+ -------------->
+    <!-- iPhone 6+, 7+ and 8+ -->
     <link href="splashscreens/iphoneplus_splash.png" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
     <link href="splashscreens/iphoneplus_splash_l.png" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image" />
 
-    <!------------------- iPhone X -------------------->
+    <!-- iPhone X -->
     <link href="splashscreens/iphonex_splash.png" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
     <link href="splashscreens/iphonex_splash_l.png" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image" />
 
-    <!------------------- iPhone Xr ------------------->
+    <!-- iPhone Xr -->
     <link href="splashscreens/iphonexr_splash.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
     <link href="splashscreens/iphonexr_splash_l.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
 
-    <!------------------- iPhone Xs ------------------->
+    <!-- iPhone Xs -->
     <link href="splashscreens/iphonexsmax_splash.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
     <link href="splashscreens/iphonexsmax_splashl.png" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image" />
 
-    <!--------------------- iPad ---------------------->
+    <!-- iPad -->
     <link href="splashscreens/ipad_splash.png" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
     <link href="splashscreens/ipad_splash_l.png" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
 
-    <!------------------ iPad Pro 1 ------------------->
+    <!-- iPad Pro 1 -->
     <link href="splashscreens/ipadpro1_splash.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
     <link href="splashscreens/ipadpro1_splash_l.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
     
-    <!------------------ iPad Pro 3 ------------------->
+    <!-- iPad Pro 3 -->
     <link href="splashscreens/ipadpro3_splash.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
     <link href="splashscreens/ipadpro3_splash_l.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
 
-    <!------------------ iPad Pro 2 ------------------->
+    <!-- iPad Pro 2 -->
     <link href="splashscreens/ipadpro2_splash.png" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
     <link href="splashscreens/ipadpro2_splash_l.png" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
 
@@ -98,7 +99,9 @@
 <body>
     <div class="backdropContainer"></div>
     <div class="backgroundContainer"></div>
-    <div class="mainDrawer hide"><div class="mainDrawer-scrollContainer scrollContainer focuscontainer-y"></div></div>
+    <div class="mainDrawer hide">
+        <div class="mainDrawer-scrollContainer scrollContainer focuscontainer-y"></div>
+    </div>
     <div class="skinHeader focuscontainer-x"></div>
     <div class="mainAnimatedPages skinBody"></div>
     <div class="mainDrawerHandle"></div>

src/scripts/site.js

@@ -724,9 +724,9 @@ var AppInfo = {};
         define("programStyles", ["css!" + componentsPath + "/guide/programs"], returnFirstDependency);
         define("listViewStyle", ["css!" + componentsPath + "/listview/listview"], returnFirstDependency);
         define("formDialogStyle", ["css!" + componentsPath + "/formdialog"], returnFirstDependency);
-        define("clearButtonStyle", ["css!" + componentsPath + "/clearbutton"], returnFirstDependency);
+        define("clearButtonStyle", ["css!css/clearbutton"], returnFirstDependency);
         define("cardStyle", ["css!" + componentsPath + "/cardbuilder/card"], returnFirstDependency);
-        define("flexStyles", ["css!" + componentsPath + "/flexstyles"], returnFirstDependency);
+        define("flexStyles", ["css!css/flexstyles"], returnFirstDependency);
 
         // define legacy features
         // TODO delete the rest of these

src/standalone.js

@@ -1,4 +1,4 @@
 (function() {
     "use strict";
-    window.appMode='standalone';
+    window.appMode = 'standalone';
 })();