update now playing bar

dashboard-ui/camerauploadsettings.html

@@ -7,9 +7,9 @@
                 ${HeaderCameraUpload}
             </h1>
 
+            <br />
             <p>${SelectCameraUploadServers}</p>
 
-            <br />
             <div class="checkboxList uploadServerList">
             </div>
 

dashboard-ui/components/appfooter/appfooter.js

@@ -20,7 +20,7 @@
         });
     }
 
-    function dockedTabs(options) {
+    function appFooter(options) {
 
         var self = this;
 
@@ -41,7 +41,7 @@
         initHeadRoom(self, self.element);
     }
 
-    dockedTabs.prototype.destroy = function () {
+    appFooter.prototype.destroy = function () {
         var self = this;
 
         if (self.headroom) {
@@ -52,5 +52,5 @@
         self.element = null;
     };
 
-    return dockedTabs;
+    return appFooter;
 });

dashboard-ui/css/nowplayingbar.css

@@ -56,7 +56,6 @@
     bottom: 0;
     left: 0;
     right: 0;
-    top : 100%;
     /* Above everything, except for the video player and popup overlays */
     z-index: 1097;
     color: #fff;
@@ -65,8 +64,6 @@
     /*box-shadow: 0 -2px 2px 0 rgba(0,0,0,.14),-1px 5px 1px rgba(0,0,0,.12);*/
     will-change: transform;
     contain: layout style;
-    height: 100%;
-    transform: translateY(-64px);
 }
 
 .hiddenNowPlayingBar .nowPlayingBar {

dashboard-ui/legacy/selectmenu.js

@@ -1,5 +1,7 @@
-// TODO: This needs to be deprecated, but it's used heavily by plugins
+define(['jQuery'], function ($) {
-$.fn.selectmenu = function () {
+    // TODO: This needs to be deprecated, but it's used heavily by plugins
-    // No-op. This implementation only exists to prevent script errors
+    $.fn.selectmenu = function () {
-    return this;
+        // No-op. This implementation only exists to prevent script errors
-};
+        return this;
+    };
+});

dashboard-ui/mypreferencesmenu.html

@@ -1,4 +1,4 @@
-<div id="myPreferencesMenuPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-contextname="${HeaderSettings}" data-require="scripts/mypreferencescommon,listViewStyle">
+<div id="myPreferencesMenuPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-contextname="${HeaderSettings}">
 
     <div data-role="content">
         <div class="readOnlyContent" style="margin: 0 auto;">
@@ -6,7 +6,7 @@
             <div>
                 <a href="#" class="clearLink lnkDisplayPreferences">
                     <div class="listItem">
-                        <button type="button" is="emby-button" class="fab mini autoSize blue listItemButton" item-icon><i class="md-icon">tv</i></button>
+                        <i class="md-icon listItemIcon" style="background-color: #03a9f4;">tv</i>
                         <div class="listItemBody two-line">
                             <div>${ButtonDisplaySettings}</div>
                             <div class="secondary">${ButtonDisplaySettingsHelp}</div>
@@ -16,7 +16,7 @@
 
                 <a href="#" class="clearLink lnkHomeScreenPreferences">
                     <div class="listItem">
-                        <button type="button" is="emby-button" class="fab mini autoSize red listItemButton" item-icon><i class="md-icon">home</i></button>
+                        <i class="md-icon listItemIcon" style="background-color: #e57373;">home</i>
                         <div class="listItemBody two-line">
                             <div>${ButtonHomeScreenSettings}</div>
                             <div class="secondary">${ButtonHomeScreenSettingsHelp}</div>
@@ -26,7 +26,7 @@
 
                 <a href="#" class="clearLink lnkLanguagePreferences">
                     <div class="listItem">
-                        <button type="button" is="emby-button" class="fab mini autoSize green listItemButton" item-icon><i class="md-icon">play_circle_filled</i></button>
+                        <i class="md-icon listItemIcon" style="background-color: #81c784;">play_circle_filled</i>
                         <div class="listItemBody two-line">
                             <div>${ButtonPlaybackSettings}</div>
                             <div class="secondary">${ButtonPlaybackSettingsHelp}</div>
@@ -36,7 +36,7 @@
 
                 <a href="#" class="clearLink lnkMyProfile">
                     <div class="listItem">
-                        <button type="button" is="emby-button" class="fab mini autoSize orange listItemButton" item-icon><i class="md-icon">person</i></button>
+                        <i class="md-icon listItemIcon" style="background-color: #ffd54f;">person</i>
                         <div class="listItemBody two-line">
                             <div>${ButtonProfile}</div>
                             <div class="secondary">${ButtonProfileHelp}</div>
@@ -44,12 +44,20 @@
                     </div>
                 </a>
 
+                <a href="#" class="clearLink lnkCameraUpload hide">
+                    <div class="listItem">
+                        <i class="md-icon listItemIcon" style="background-color: #673AB7;">photo</i>
+                        <div class="listItemBody">
+                            <div>${TabCameraUpload}</div>
+                        </div>
+                    </div>
+                </a>
+
                 <a href="#" class="clearLink lnkSync hide">
                     <div class="listItem">
-                        <button type="button" is="emby-button" class="fab mini autoSize listItemButton" style="background-color: #673AB7;" item-icon><i class="md-icon">sync</i></button>
+                        <i class="md-icon listItemIcon">file_download</i>
-                        <div class="listItemBody two-line">
+                        <div class="listItemBody">
-                            <div>${ButtonSyncSettings}</div>
+                            <div>${HeaderOfflineSync}</div>
-                            <div class="secondary">${ButtonSyncSettingsHelp}</div>
                         </div>
                     </div>
                 </a>
@@ -60,15 +68,15 @@
                 <div>
                     <a href="selectserver.html" class="clearLink selectServer hide">
                         <div class="listItem">
-                            <button type="button" is="emby-button" class="fab mini autoSize"><i class="md-icon">wifi</i></button>
+                            <i class="md-icon listItemIcon">wifi</i>
-                            <div class="listItemBody two-line">
+                            <div class="listItemBody">
                                 <div>${HeaderSelectServer}</div>
                             </div>
                         </div>
                     </a>
                     <div class="listItem btnLogout">
-                        <button type="button" is="emby-button" class="fab mini autoSize"><i class="md-icon">lock</i></button>
+                        <i class="md-icon listItemIcon" style="background-color:#444;">lock</i>
-                        <div class="listItemBody two-line">
+                        <div class="listItemBody">
                             <div>${ButtonSignOut}</div>
                         </div>
                     </div>
@@ -81,8 +89,8 @@
                 <div>
                     <a href="dashboard.html" class="clearLink">
                         <div class="listItem">
-                            <button type="button" is="emby-button" class="fab mini autoSize"><i class="md-icon">settings</i></button>
+                            <i class="md-icon listItemIcon">settings</i>
-                            <div class="listItemBody two-line">
+                            <div class="listItemBody">
                                 <div>${ButtonServerDashboard}</div>
                             </div>
                         </div>

dashboard-ui/mysyncsettings.html

@@ -4,7 +4,7 @@
         <form class="userProfileSettingsForm" style="margin: 0 auto;">
 
             <h1>
-                ${HeaderSync}
+                ${HeaderOfflineSync}
             </h1>
 
             <br />

dashboard-ui/scripts/camerauploadsettings.js

@@ -1,4 +1,4 @@
-define(['appSettings'], function (appSettings) {
+define(['appSettings', 'emby-checkbox'], function (appSettings) {
 
     function loadForm(page, user) {
 
@@ -34,7 +34,7 @@
             toast(Globalize.translate('SettingsSaved'));
         });
 
-        if (cameraUploadServers.length || syncPath) {
+        if (cameraUploadServers.length) {
             if (window.MainActivity) {
                 MainActivity.authorizeStorage();
             }
@@ -60,18 +60,6 @@
             return false;
         });
 
-        view.querySelector('#btnSelectSyncPath').addEventListener('click', function () {
-
-            require(['nativedirectorychooser'], function () {
-                NativeDirectoryChooser.chooseDirectory().then(function (path) {
-
-                    if (path) {
-                        view.querySelector('#txtSyncPath').value = path;
-                    }
-                });
-            });
-        });
-
         view.addEventListener('viewshow', function () {
             var page = this;
 
@@ -83,12 +71,6 @@
 
                 loadForm(page, user);
             });
-
-            if (AppInfo.supportsSyncPathSetting) {
-                page.querySelector('.fldSyncPath').classList.remove('hide');
-            } else {
-                page.querySelector('.fldSyncPath').classList.add('hide');
-            }
         });
     };
 

dashboard-ui/scripts/librarymenu.js

@@ -1046,12 +1046,9 @@
 
     setDrawerClass();
 
-    //require(['appfooter'], function (appfooter) {
+    //require(['appfooter-shared', 'dockedtabs'], function (footer, dockedtabs) {
-    //    var footer = new appfooter({});
+    //    new dockedtabs({
-    //    require(['dockedtabs'], function (dockedtabs) {
+    //        appFooter: footer
-    //        new dockedtabs({
-    //            appFooter: footer
-    //        });
     //    });
     //});
 });

dashboard-ui/scripts/mypreferencescommon.js

@@ -1,47 +1,53 @@
-pageIdOn('pageinit', 'myPreferencesMenuPage', function () {
+define(['apphost', 'listViewStyle'], function (appHost) {
 
-    var page = this;
+    return function (view, params) {
 
-    page.querySelector('.btnLogout').addEventListener('click', function () {
+        view.querySelector('.btnLogout').addEventListener('click', function () {
 
-        Dashboard.logout();
+            Dashboard.logout();
-    });
+        });
 
-});
+        view.addEventListener('viewshow', function () {
 
-pageIdOn('pageshow', 'myPreferencesMenuPage', function () {
+            var page = this;
 
-    var page = this;
+            var userId = params.userId || Dashboard.getCurrentUserId();
 
-    var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
+            page.querySelector('.lnkDisplayPreferences').setAttribute('href', 'mypreferencesdisplay.html?userId=' + userId);
+            page.querySelector('.lnkLanguagePreferences').setAttribute('href', 'mypreferenceslanguages.html?userId=' + userId);
+            page.querySelector('.lnkHomeScreenPreferences').setAttribute('href', 'mypreferenceshome.html?userId=' + userId);
+            page.querySelector('.lnkMyProfile').setAttribute('href', 'myprofile.html?userId=' + userId);
+            page.querySelector('.lnkSync').setAttribute('href', 'mysyncsettings.html?userId=' + userId);
+            page.querySelector('.lnkCameraUpload').setAttribute('href', 'camerauploadsettings.html?userId=' + userId);
 
-    page.querySelector('.lnkDisplayPreferences').setAttribute('href', 'mypreferencesdisplay.html?userId=' + userId);
+            if (appHost.supports('cameraupload')) {
-    page.querySelector('.lnkLanguagePreferences').setAttribute('href', 'mypreferenceslanguages.html?userId=' + userId);
+                page.querySelector('.lnkCameraUpload').classList.remove('hide');
-    page.querySelector('.lnkHomeScreenPreferences').setAttribute('href', 'mypreferenceshome.html?userId=' + userId);
+            } else {
-    page.querySelector('.lnkMyProfile').setAttribute('href', 'myprofile.html?userId=' + userId);
+                page.querySelector('.lnkCameraUpload').classList.add('hide');
-    page.querySelector('.lnkSync').setAttribute('href', 'mysyncsettings.html?userId=' + userId);
+            }
 
-    if (Dashboard.capabilities().SupportsSync) {
+            if (appHost.supports('sync')) {
-        page.querySelector('.lnkSync').classList.remove('hide');
+                page.querySelector('.lnkSync').classList.remove('hide');
-    } else {
+            } else {
-        page.querySelector('.lnkSync').classList.add('hide');
+                page.querySelector('.lnkSync').classList.add('hide');
-    }
+            }
 
-    Dashboard.getCurrentUser().then(function (user) {
+            Dashboard.getCurrentUser().then(function (user) {
 
-        page.querySelector('.headerUser').innerHTML = user.Name;
+                page.querySelector('.headerUser').innerHTML = user.Name;
 
-        if (user.Policy.IsAdministrator) {
+                if (user.Policy.IsAdministrator) {
-            page.querySelector('.adminSection').classList.remove('hide');
+                    page.querySelector('.adminSection').classList.remove('hide');
-        } else {
+                } else {
-            page.querySelector('.adminSection').classList.add('hide');
+                    page.querySelector('.adminSection').classList.add('hide');
-        }
+                }
-    });
+            });
-
-    if (Dashboard.isConnectMode()) {
-        page.querySelector('.selectServer').classList.remove('hide');
-    } else {
-        page.querySelector('.selectServer').classList.add('hide');
-    }
 
+            if (Dashboard.isConnectMode()) {
+                page.querySelector('.selectServer').classList.remove('hide');
+            } else {
+                page.querySelector('.selectServer').classList.add('hide');
+            }
+        });
+    };
 });

dashboard-ui/scripts/mysyncsettings.js

@@ -1,4 +1,4 @@
-define(['appSettings'], function (appSettings) {
+define(['appSettings', 'apphost'], function (appSettings, appHost) {
 
     function loadForm(page, user) {
 
@@ -20,7 +20,7 @@
             toast(Globalize.translate('SettingsSaved'));
         });
 
-        if (cameraUploadServers.length || syncPath) {
+        if (syncPath) {
             if (window.MainActivity) {
                 MainActivity.authorizeStorage();
             }
@@ -70,7 +70,7 @@
                 loadForm(page, user);
             });
 
-            if (AppInfo.supportsSyncPathSetting) {
+            if (appHost.supports('customsyncpath')) {
                 page.querySelector('.fldSyncPath').classList.remove('hide');
             } else {
                 page.querySelector('.fldSyncPath').classList.add('hide');

dashboard-ui/scripts/nowplayingbar.js

@@ -75,7 +75,6 @@
         return html;
     }
 
-    var translateY = '-64px';
     function slideDown(elem) {
 
         if (elem.classList.contains('hide')) {
@@ -93,8 +92,8 @@
 
         requestAnimationFrame(function () {
             var keyframes = [
-              { transform: 'translateY(' + translateY + ')', offset: 0 },
+              { transform: 'none', offset: 0 },
-              { transform: 'none', offset: 1 }];
+              { transform: 'translateY(100%)', offset: 1 }];
             var timing = { duration: 200, iterations: 1, fill: 'both', easing: 'ease-out' };
             elem.animate(keyframes, timing).onfinish = onfinish;
         });
@@ -115,8 +114,8 @@
         requestAnimationFrame(function () {
 
             var keyframes = [
-              { transform: 'none', offset: 0 },
+              { transform: 'translateY(100%)', offset: 0 },
-              { transform: 'translateY(' + translateY + ')', offset: 1 }];
+              { transform: 'none', offset: 1 }];
             var timing = { duration: 200, iterations: 1, fill: 'both', easing: 'ease-out' };
             elem.animate(keyframes, timing);
         });
@@ -308,17 +307,18 @@
 
         return new Promise(function (resolve, reject) {
 
-            require(['itemShortcuts', 'css!css/nowplayingbar.css', 'emby-slider'], function (itemShortcuts) {
+            require(['appfooter-shared', 'itemShortcuts', 'css!css/nowplayingbar.css', 'emby-slider'], function (appfooter, itemShortcuts) {
 
-                nowPlayingBarElement = document.querySelector('.nowPlayingBar');
+                var parentContainer = appfooter.element;
+                nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar');
 
                 if (nowPlayingBarElement) {
                     resolve(nowPlayingBarElement);
                     return;
                 }
 
-                document.body.insertAdjacentHTML('beforeend', getNowPlayingBarHtml());
+                parentContainer.insertAdjacentHTML('beforeend', getNowPlayingBarHtml());
-                nowPlayingBarElement = document.querySelector('.nowPlayingBar');
+                nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar');
 
                 if (browser.safari && browser.slow) {
                     // Not handled well here. The wrong elements receive events, bar doesn't update quickly enough, etc.

dashboard-ui/scripts/site.js

@@ -861,7 +861,7 @@ var Dashboard = {
                 if (enableVlcAudio) {
 
                     profile.DirectPlayProfiles.push({
-                        Container: "aac,mp3,mpa,wav,wma,mp2,ogg,oga,webma,ape,opus",
+                        Container: "aac,mp3,mpa,wav,wma,mp2,ogg,oga,webma,ape,m4a,opus,flac",
                         Type: 'Audio'
                     });
 
@@ -987,8 +987,6 @@ var AppInfo = {};
 
         AppInfo.enableBackButton = isIOS && (window.navigator.standalone || AppInfo.isNativeApp);
 
-        AppInfo.supportsSyncPathSetting = isCordova && isAndroid;
-
         if (isCordova && isIOS) {
             AppInfo.moreIcon = 'more-horiz';
         } else {
@@ -1206,6 +1204,11 @@ var AppInfo = {};
         return hammer;
     }
 
+    function createSharedAppFooter(appFooter) {
+        var footer = new appFooter({});
+        return footer;
+    }
+
     function initRequire() {
 
         var urlArgs = "v=" + (window.dashboardVersion || new Date().getDate());
@@ -1503,6 +1506,7 @@ var AppInfo = {};
 
         define("headroom-window", ['headroom'], createWindowHeadroom);
         define("hammer-main", ['hammer'], createMainContentHammer);
+        define("appfooter-shared", ['appfooter'], createSharedAppFooter);
 
         // mock this for now. not used in this app
         define("playbackManager", [], function () {
@@ -2330,7 +2334,8 @@ var AppInfo = {};
             path: '/mypreferencesmenu.html',
             dependencies: ['emby-button'],
             autoFocus: false,
-            transition: 'fade'
+            transition: 'fade',
+            controller: 'scripts/mypreferencescommon'
         });
 
         defineRoute({
@@ -2753,10 +2758,7 @@ var AppInfo = {};
                     postInitDependencies.push('cordova/ios/orientation');
                     postInitDependencies.push('cordova/ios/remotecontrols');
 
-                    if (Dashboard.capabilities().SupportsSync) {
+                    //postInitDependencies.push('cordova/ios/backgroundfetch');
-
-                        postInitDependencies.push('cordova/ios/backgroundfetch');
-                    }
                 }
 
             } else if (browserInfo.chrome) {

dashboard-ui/thirdparty/paper-button-style.css

@@ -6,10 +6,6 @@
         background: #e1f5f3;
     }
 
-button.emby-button.fab.blue {
-    background: #03a9f4;
-}
-
 button.emby-button.menuButton {
     color: #212121;
     text-align: left;
@@ -126,18 +122,6 @@ button.emby-button.notext {
     padding-right: .25em !important;
 }
 
-.fab.green {
-    background-color: #81c784 !important;
-}
-
-.fab.orange {
-    background-color: #ffd54f !important;
-}
-
-.fab.red {
-    background-color: #e57373 !important;
-}
-
 .ui-body-b .paperListLabel, .ui-body-b .fieldDescription, .ui-body-b .selectLabelUnfocused, .ui-body-b .inputLabelUnfocused, .ui-body-b .textareaLabelUnfocused {
     color: #ccc;
 }