update app footer

2024-11-18 03:18:19 -07:00 · 2016-08-31 15:17:11 -04:00 · 2016-08-31 15:17:11 -04:00 · 5cd71abd36
commit 5cd71abd36
parent a96b9dcefa
27 changed files with 432 additions and 127 deletions
--- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json
@ -14,12 +14,12 @@
  },
  "devDependencies": {},
  "ignore": [],
-  "version": "1.4.207",
-  "_release": "1.4.207",
+  "version": "1.4.208",
+  "_release": "1.4.208",
  "_resolution": {
    "type": "version",
-    "tag": "1.4.207",
-    "commit": "823ec6a2a31d712f1de9fb82f10e221c857c6650"
+    "tag": "1.4.208",
+    "commit": "e7d9ca4dc8083c9dc63d5add4d73f0179369461a"
  },
  "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
  "_target": "^1.2.1",
--- a/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js
@ -44,7 +44,10 @@

        var pos = getOffsets([options.positionTo])[0];

-        pos.top += options.positionTo.offsetHeight / 2;
+        if (options.positionY != 'top') {
+            pos.top += options.positionTo.offsetHeight / 2;
+        }
+
        pos.left += options.positionTo.offsetWidth / 2;

        var height = dlg.offsetHeight || 300;
@ -65,6 +68,9 @@
            pos.top -= (overflowY + 20);
        }

+        pos.top += (options.offsetTop || 0);
+        pos.left += (options.offsetLeft || 0);
+
        // Do some boundary checking
        pos.top = Math.max(pos.top, 10);
        pos.left = Math.max(pos.left, 10);
@ -88,7 +94,9 @@
        var dialogOptions = {
            removeOnClose: true,
            enableHistory: options.enableHistory,
-            scrollY: false
+            scrollY: false,
+            entryAnimation: options.entryAnimation,
+            exitAnimation: options.exitAnimation
        };

        var backButton = false;
@ -102,8 +110,8 @@
        } else {

            dialogOptions.modal = false;
-            dialogOptions.entryAnimationDuration = 140;
-            dialogOptions.exitAnimationDuration = 180;
+            dialogOptions.entryAnimationDuration = options.entryAnimationDuration || 140;
+            dialogOptions.exitAnimationDuration = options.exitAnimationDuration || 180;
            dialogOptions.autoFocus = false;
        }

@ -119,6 +127,10 @@

        dlg.classList.add('actionSheet');

+        if (options.dialogClass) {
+            dlg.classList.add(options.dialogClass);
+        }
+
        var html = '';

        var scrollType = layoutManager.desktop ? 'smoothScrollY' : 'hiddenScrollY';
@ -173,6 +185,10 @@

        var menuItemClass = browser.noFlex || browser.firefox ? 'actionSheetMenuItem actionSheetMenuItem-noflex' : 'actionSheetMenuItem';

+        if (options.menuItemClass) {
+            menuItemClass += ' ' + options.menuItemClass;
+        }
+
        for (i = 0, length = options.items.length; i < length; i++) {

            option = options.items[i];
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
@ -618,7 +618,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                    tag: item.ImageTags.Thumb
                });

-            } else if (item.SeriesThumbImageTag) {
+            } else if (item.SeriesThumbImageTag && options.inheritThumb !== false) {

                imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
                    type: "Thumb",
@ -626,9 +626,9 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                    tag: item.SeriesThumbImageTag
                });

-            } else if (item.ParentThumbItemId) {
+            } else if (item.ParentThumbItemId && options.inheritThumb !== false) {

-                imgUrl = apiClient.getThumbImageUrl(item.ParentThumbItemId, {
+                imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, {
                    type: "Thumb",
                    maxWidth: width,
                    tag: item.ParentThumbImageTag
--- a/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css
@ -28,6 +28,8 @@
    overflow: hidden;
    font-weight: 500;
    text-transform: uppercase;
+    /* Disable webkit tap highlighting */
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
 }

    .emby-button.raised, .emby-button.fab {
@ -142,7 +144,8 @@
    overflow: hidden;
    font-weight: 500;
    border-radius: 50%;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    /* Disable webkit tap highlighting */
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
    justify-content: center;
 }

--- a/dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.css
@ -5,7 +5,8 @@
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .85);
-    z-index: 998;
+    /* Just enough to cover poster overlay buttons */
+    z-index: 1;
    line-height: initial;
    font-size: initial;
 }
--- a/dashboard-ui/bower_components/hls.js/.bower.json
+++ b/dashboard-ui/bower_components/hls.js/.bower.json
@ -1,6 +1,6 @@
 {
  "name": "hls.js",
-  "version": "0.5.44",
+  "version": "0.5.46",
  "license": "Apache-2.0",
  "description": "Media Source Extension - HLS library, by/for Dailymotion",
  "homepage": "https://github.com/dailymotion/hls.js",
@ -16,11 +16,11 @@
    "test",
    "tests"
  ],
-  "_release": "0.5.44",
+  "_release": "0.5.46",
  "_resolution": {
    "type": "version",
-    "tag": "v0.5.44",
-    "commit": "f3800e9a8b01157c73d5847a9102137a8d73dc8e"
+    "tag": "v0.5.46",
+    "commit": "27578acdf24ae3a6d6dcccb49765ac2b835f84dd"
  },
  "_source": "git://github.com/dailymotion/hls.js.git",
  "_target": "~0.5.7",
--- a/dashboard-ui/bower_components/hls.js/bower.json
+++ b/dashboard-ui/bower_components/hls.js/bower.json
@ -1,6 +1,6 @@
 {
  "name": "hls.js",
-  "version": "0.5.44",
+  "version": "0.5.46",
  "license": "Apache-2.0",
  "description": "Media Source Extension - HLS library, by/for Dailymotion",
  "homepage": "https://github.com/dailymotion/hls.js",
--- a/dashboard-ui/bower_components/hls.js/dist/hls.min.js
+++ b/dashboard-ui/bower_components/hls.js/dist/hls.min.js
--- a/dashboard-ui/bower_components/hls.js/package.json
+++ b/dashboard-ui/bower_components/hls.js/package.json
@ -1,6 +1,6 @@
 {
  "name": "hls.js",
-  "version": "0.5.44",
+  "version": "0.5.46",
  "license": "Apache-2.0",
  "description": "Media Source Extension - HLS library, by/for Dailymotion",
  "homepage": "https://github.com/dailymotion/hls.js",
--- a/dashboard-ui/bower_components/iron-icon/.bower.json
+++ b/dashboard-ui/bower_components/iron-icon/.bower.json
@ -32,14 +32,14 @@
    "web-component-tester": "^4.0.0",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
  },
-  "homepage": "https://github.com/polymerelements/iron-icon",
+  "homepage": "https://github.com/PolymerElements/iron-icon",
  "_release": "1.0.10",
  "_resolution": {
    "type": "version",
    "tag": "v1.0.10",
    "commit": "f4e146da4982ff96bb25db85290c09e8de4ec734"
  },
-  "_source": "git://github.com/polymerelements/iron-icon.git",
+  "_source": "git://github.com/PolymerElements/iron-icon.git",
  "_target": "^1.0.0",
-  "_originalSource": "polymerelements/iron-icon"
+  "_originalSource": "PolymerElements/iron-icon"
 }
--- a/dashboard-ui/bower_components/polymer/.bower.json
+++ b/dashboard-ui/bower_components/polymer/.bower.json
@ -32,14 +32,14 @@
    "iron-component-page": "polymerElements/iron-component-page#^1.1.6"
  },
  "private": true,
-  "homepage": "https://github.com/Polymer/polymer",
+  "homepage": "https://github.com/polymer/polymer",
  "_release": "1.6.1",
  "_resolution": {
    "type": "version",
    "tag": "v1.6.1",
    "commit": "1f197d9d7874b1e5808b2a5c26f34446a7d912fc"
  },
-  "_source": "git://github.com/Polymer/polymer.git",
+  "_source": "git://github.com/polymer/polymer.git",
  "_target": "^1.1.0",
-  "_originalSource": "Polymer/polymer"
+  "_originalSource": "polymer/polymer"
 }
--- a/dashboard-ui/components/appfooter/appfooter.css
+++ b/dashboard-ui/components/appfooter/appfooter.css
@ -1,12 +1,13 @@
 .appfooter {
    background: #1c1c1c;
-    /*background: #222326;*/
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1;
    bottom: 0;
    transition: transform 180ms linear;
+
+    contain: layout style;
 }

    .appfooter.headroom--unpinned {
--- a/dashboard-ui/components/dockedtabs/dockedtabs.css
+++ b/dashboard-ui/components/dockedtabs/dockedtabs.css
@ -26,3 +26,19 @@
    margin-bottom: .25em;
    font-size: 20px;
 }
+
+.dockedtabs-dlg {
+    font-size: inherit !important;
+    background-color: #222 !important;
+    color: #eee;
+}
+
+.dockedtabs-dlg-menuitem:hover {
+    background-color: #333 !important;
+}
+
+@media all and (max-width: 800px) {
+    .dockedtab-midsize {
+        display: none !important;
+    }
+}
--- a/dashboard-ui/components/dockedtabs/dockedtabs.js
+++ b/dashboard-ui/components/dockedtabs/dockedtabs.js
@ -1,9 +1,169 @@
-define(['css!./dockedtabs', 'emby-tabs'], function () {
+define(['apphost', 'connectionManager', 'events', 'globalize', 'css!./dockedtabs', 'emby-tabs'], function (appHost, connectionManager, events, globalize) {
+
+    var currentUser = {};
+    var currentUserViews = [];
+
+    function showUserView(id) {
+
+        var view = currentUserViews.filter(function (current) {
+            return current.Id == id;
+        })[0];
+
+        if (view) {
+            Emby.Page.showItem(view);
+        }
+    }
+
+    function executeCommand(id) {
+
+        switch (id) {
+
+            case 'settings':
+                Emby.Page.showSettings();
+                break;
+            case 'signout':
+                Dashboard.logout();
+                break;
+            case 'selectserver':
+                Emby.Page.showSelectServer();
+                break;
+            case 'reports':
+                Dashboard.navigate('reports.html');
+                break;
+            case 'metadatamanager':
+                Dashboard.navigate('metadatamanager.html');
+                break;
+            case 'manageserver':
+                Dashboard.navigate('dashboard.html');
+                break;
+            case 'sync':
+                Dashboard.navigate('mysync.html');
+                break;
+            default:
+                showUserView(id);
+                break;
+        }
+    }
+
+    function showMenu(menuItems, button) {
+
+        require(['webActionSheet'], function (actionSheet) {
+
+            actionSheet.show({
+
+                items: menuItems,
+                positionTo: button,
+                entryAnimation: 'slideup',
+                exitAnimation: 'fadeout',
+                entryAnimationDuration: 160,
+                exitAnimationDuration: 100,
+                offsetTop: -30,
+                positionY: 'top',
+                dialogClass: 'dockedtabs-dlg',
+                menuItemClass: 'dockedtabs-dlg-menuitem'
+
+            }).then(executeCommand);
+        });
+    }
+
+    function showLibrariesMenu(button) {
+
+        var commands = currentUserViews.map(function (view) {
+
+            return {
+                name: view.Name,
+                id: view.Id
+            };
+        });
+
+        showMenu(commands, button);
+    }
+
+    function showMoreMenu(button) {
+
+        var commands = [];
+
+        // manage server, metadata manager, reports, sync to other devices
+        if (currentUser.Policy.IsAdministrator) {
+            commands.push({
+                name: globalize.translate('ButtonManageServer'),
+                id: 'manageserver'
+            });
+            commands.push({
+                name: globalize.translate('MetadataManager'),
+                id: 'metadatamanager'
+            });
+            commands.push({
+                name: globalize.translate('ButtonReports'),
+                id: 'reports'
+            });
+        }
+
+        if (Dashboard.isConnectMode()) {
+            commands.push({
+                name: globalize.translate('HeaderSelectServer'),
+                id: 'selectserver'
+            });
+        }
+
+        commands.push({
+            name: globalize.translate('TabSettings'),
+            id: 'settings'
+        });
+
+        if (currentUser.Policy.EnableSync) {
+            commands.push({
+                name: globalize.translate('SyncToOtherDevices'),
+                id: 'sync'
+            });
+        }
+
+        commands.push({
+            name: globalize.translate('ButtonSignOut'),
+            id: 'signout'
+        });
+
+        showMenu(commands, button);
+    }
+
+    function onTabClick(e) {
+
+        var index = parseInt(this.getAttribute('data-index'));
+
+        switch (index) {
+
+            case 0:
+                Emby.Page.goHome();
+                break;
+            case 1:
+                showLibrariesMenu(this);
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+            case 2:
+                Emby.Page.showLiveTV();
+                break;
+            case 3:
+                Emby.Page.showFavorites();
+                break;
+            case 4:
+                Dashboard.navigate('mysync.html?mode=offline');
+                break;
+            case 5:
+                showMoreMenu(this);
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+            default:
+                break;
+        }
+    }

    function render(options) {

        var elem = document.createElement('div');

+        elem.classList.add('hide');
        elem.classList.add('dockedtabs');
        elem.classList.add('dockedtabs-bottom');

@ -15,43 +175,114 @@

        var html = '';

+        var liveTVButtonClass = appHost.supports('sync') ? ' dockedtab-midsize' : '';
+
        html += '    <div is="emby-tabs" class="dockedtabs-tabs" data-selectionbar="false">\
            <button is="emby-button" class="dockedtabs-tab-button emby-tab-button emby-tab-button-active" data-index="0">\
-                <div class="dockedtabs-tab-button-foreground emby-button-foreground"><i class="dockedtabs-tab-button-icon md-icon">home</i><div>Home</div></div>\
+                <div class="dockedtabs-tab-button-foreground emby-button-foreground"><i class="dockedtabs-tab-button-icon md-icon">home</i><div>' + globalize.translate('TabHome') + '</div></div>\
            </button>\
            <button is="emby-button" class="dockedtabs-tab-button emby-tab-button" data-index="1">\
-                <div class="dockedtabs-tab-button-foreground emby-button-foreground"><i class="dockedtabs-tab-button-icon md-icon">dvr</i><div>Libraries</div></div>\
+                <div class="dockedtabs-tab-button-foreground emby-button-foreground"><i class="dockedtabs-tab-button-icon md-icon">dvr</i><div>' + globalize.translate('HeaderLibraries') + '</div></div>\
            </button>\
-            <button is="emby-button" class="dockedtabs-tab-button emby-tab-button homeFavoritesTab" data-index="2">\
-                <div class="dockedtabs-tab-button-foreground emby-button-foreground"><i class="dockedtabs-tab-button-icon md-icon">favorite</i><div>Favorites</div></div>\
+            <button is="emby-button" class="dockedtabs-tab-button emby-tab-button docked-tab-livetv' + liveTVButtonClass + '" data-index="2">\
+                <div class="dockedtabs-tab-button-foreground emby-button-foreground"><i class="dockedtabs-tab-button-icon md-icon">live_tv</i><div>' + globalize.translate('HeaderLiveTV') + '</div></div>\
            </button>\
-            <button is="emby-button" class="dockedtabs-tab-button emby-tab-button" data-index="3">\
-                <div class="dockedtabs-tab-button-foreground emby-button-foreground"><i class="dockedtabs-tab-button-icon md-icon">file_download</i><div>Downloads</div></div>\
+            <button is="emby-button" class="dockedtabs-tab-button emby-tab-button homeFavoritesTab" data-index="3">\
+                <div class="dockedtabs-tab-button-foreground emby-button-foreground"><i class="dockedtabs-tab-button-icon md-icon">favorite</i><div>' + globalize.translate('TabFavorites') + '</div></div>\
            </button>\
-            <button is="emby-button" class="dockedtabs-tab-button emby-tab-button" data-index="3">\
-                <div class="dockedtabs-tab-button-foreground emby-button-foreground"><i class="dockedtabs-tab-button-icon md-icon">menu</i><div>More</div></div>\
+';
+
+        if (appHost.supports('sync')) {
+            html += '<button is="emby-button" class="dockedtabs-tab-button emby-tab-button" data-index="4">\
+                <div class="dockedtabs-tab-button-foreground emby-button-foreground"><i class="dockedtabs-tab-button-icon md-icon">file_download</i><div>' + globalize.translate('Downloads') + '</div></div>\
+            </button>\
+            ';
+        }
+
+        html += '<button is="emby-button" class="dockedtabs-tab-button emby-tab-button" data-index="5">\
+                <div class="dockedtabs-tab-button-foreground emby-button-foreground"><i class="dockedtabs-tab-button-icon md-icon">menu</i><div>' + globalize.translate('ButtonMore') + '</div></div>\
            </button>\
    </div>\
 ';

        elem.innerHTML = html;

+        var buttons = elem.querySelectorAll('.emby-tab-button');
+        for (var i = 0, length = buttons.length; i < length; i++) {
+            buttons[i].addEventListener('click', onTabClick);
+        }
+
        options.appFooter.add(elem);

        return elem;
    }

+    function onUserViewResponse(user, views, element) {
+
+        if (views.filter(function (v) {
+
+            return v.CollectionType == 'livetv';
+
+        }).length) {
+            element.querySelector('.docked-tab-livetv').classList.remove('hide');
+        } else {
+            element.querySelector('.docked-tab-livetv').classList.add('hide');
+        }
+    }
+
+    function showUserTabs(user, element) {
+
+        currentUser = user;
+
+        var apiClient = ConnectionManager.getApiClient(user.ServerId);
+
+        apiClient.getUserViews({}, user.Id).then(function (result) {
+
+            currentUserViews = result.Items;
+            onUserViewResponse(user, result.Items, element);
+
+        }, function () {
+            currentUserViews = [];
+            onUserViewResponse(user, [], element);
+        });
+    }
+
+    function showCurrentUserTabs(element) {
+
+        if (!Dashboard.getCurrentUserId()) {
+            return;
+        }
+
+        Dashboard.getCurrentUser().then(function (user) {
+            showUserTabs(user, element);
+        });
+    }
+
    function dockedTabs(options) {

        var self = this;

        self.element = render(options);
+
+        events.on(connectionManager, 'localusersignedin', function (e, user) {
+            self.element.classList.remove('hide');
+            showUserTabs(user, self.element);
+        });
+
+        events.on(connectionManager, 'localusersignedout', function () {
+            self.element.classList.add('hide');
+        });
+
+        showCurrentUserTabs(self.element);
    }

    dockedTabs.prototype.destroy = function () {
        var self = this;

-        self.Element = null;
+        var elem = self.element;
+        if (elem) {
+        }
+        self.element = null;
    };

    return dockedTabs;
--- a/dashboard-ui/components/imagedownloader/imagedownloader.js
+++ b/dashboard-ui/components/imagedownloader/imagedownloader.js
@ -7,7 +7,14 @@
    var hasChanges = false;

    // These images can be large and we're seeing memory problems in safari
-    var browsableImagePageSize = browserInfo.slow ? 6 : 30;
+    var browsableImagePageSize;
+
+    // This can handle more
+    if (window.IntersectionObserver) {
+        browsableImagePageSize = 100;
+    } else {
+        browsableImagePageSize = browserInfo.slow ? 6 : 30;
+    }

    var browsableImageStartIndex = 0;
    var browsableImageType = 'Primary';
@ -276,7 +283,7 @@
            reloadBrowsableImages(page);
        });

-        page.addEventListener('click', function(e) {
+        page.addEventListener('click', function (e) {

            var btnDownloadRemoteImage = parentWithClass(e.target, 'btnDownloadRemoteImage');
            if (btnDownloadRemoteImage) {
--- a/dashboard-ui/css/dashboard.css
+++ b/dashboard-ui/css/dashboard.css
@ -72,7 +72,7 @@
@media all and (min-width: 640px) {

    .dashboardDocument .mainDrawer {
-        z-index: 998 !important;
+        z-index: inherit !important;
        top: 58px !important;
        left: 0 !important;
        transform: none !important;
@ -87,7 +87,8 @@
    }

    .dashboardDocument .libraryMenuButtonText {
-        font-size: 150%;
+        font-size: 125%;
+        margin-left: 0;
    }

    .dashboardDocument .mainDrawerPanelContent {
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@ -35,10 +35,6 @@
    z-index: -1;
 }

-.pageWithAbsoluteTabs neon-animatable {
-    z-index: 2;
-}
-
 .libraryPage .header {
    padding-bottom: 0;
 }
--- a/dashboard-ui/css/librarymenu.css
+++ b/dashboard-ui/css/librarymenu.css
@ -101,6 +101,7 @@
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center;
+    margin-left: 1em;
 }

 .viewMenuBar {
@ -228,7 +229,7 @@
    background-color: #1D1D20;
 }

-@media all and (max-width: 400px) {
+@media all and (max-width: 360px) {

    .libraryMenuButtonText {
        display: none;
--- a/dashboard-ui/css/nowplayingbar.css
+++ b/dashboard-ui/css/nowplayingbar.css
@ -52,18 +52,14 @@

 /* Now playing bar */
 .nowPlayingBar {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
    /* Above everything, except for the video player and popup overlays */
-    z-index: 1097;
    color: #fff;
-    background-color: #1C1C1F;
+    background: #222326;
    text-align: center;
    /*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;
+    font-size: 90%;
 }

 .hiddenNowPlayingBar .nowPlayingBar {
@ -105,17 +101,17 @@
        vertical-align: bottom;
    }

-     .nowPlayingImage img {
-        height: 64px;
+    .nowPlayingImage img {
+        height: 56px;
    }

-        .nowPlayingBar .nowPlayingImage {
-            width: 64px;
-            height: 64px;
-            background-position: center center;
-            background-repeat: no-repeat;
-            background-size: contain;
-        }
+.nowPlayingBar .nowPlayingImage {
+    width: 56px;
+    height: 56px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+}

 .nowPlayingBarText {
    display: inline-block;
@ -165,7 +161,7 @@
 .nowPlayingBarCenter {
    vertical-align: middle;
    text-align: center;
-    margin-top: 6px;
+    margin-top: 3px;
    /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
    z-index: 2;
    position: absolute;
@ -176,7 +172,7 @@

 .nowPlayingBarPositionContainer {
    position: absolute !important;
-    left: 64px;
+    left: 56px;
    top: -8px;
    right: 0;
    z-index: 1;
@ -186,6 +182,10 @@
        background: #333;
    }

+.headroom--unpinned .nowPlayingBarPositionContainer {
+    display: none;
+}
+
 .noMediaProgress .nowPlayingBarPositionContainer {
    display: none;
 }
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@ -101,7 +101,6 @@
        var context = params.context;

        LibraryMenu.setBackButtonVisible(true);
-        LibraryMenu.setMenuButtonVisible(false);

        LibraryBrowser.renderName(item, page.querySelector('.itemName'), false, context);
        LibraryBrowser.renderParentName(item, page.querySelector('.parentName'), context);
@ -1142,7 +1141,7 @@
                    overlayText: true,
                    lazy: true,
                    showDetailsMenu: true,
-                    overlayPlayButton: AppInfo.enableAppLayouts,
+                    overlayPlayButton: AppInfo.enableAppLayouts
                });
            }
            else if (item.Type == "GameSystem") {
--- a/dashboard-ui/scripts/librarymenu.js
+++ b/dashboard-ui/scripts/librarymenu.js
@ -1,9 +1,14 @@
-define(['imageLoader', 'layoutManager', 'viewManager', 'navdrawer', 'libraryBrowser', 'apphost', 'paper-icon-button-light', 'material-icons'], function (imageLoader, layoutManager, viewManager, navdrawer, libraryBrowser, appHost) {
+define(['imageLoader', 'layoutManager', 'viewManager', 'libraryBrowser', 'apphost', 'paper-icon-button-light', 'material-icons'], function (imageLoader, layoutManager, viewManager, libraryBrowser, appHost) {

-    var navDrawerElement = document.querySelector('.mainDrawer');
-    var navDrawerScrollContainer = navDrawerElement.querySelector('.scrollContainer');
+    var enableBottomTabs = AppInfo.isNativeApp;
+    var enableLibraryNavDrawer = !enableBottomTabs;
+
+    var navDrawerElement;
+    var navDrawerScrollContainer;
    var navDrawerInstance;

+    var mainDrawerButton;
+
    function renderHeader() {

        var html = '';
@ -11,10 +16,10 @@
        html += '<div class="primaryIcons">';
        var backIcon = browserInfo.safari ? 'chevron_left' : '&#xE5C4;';

-        html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonLeft headerBackButton hide autoSize"><i class="md-icon">' + backIcon + '</i></button>';
+        html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonLeft headerBackButton hide"><i class="md-icon">' + backIcon + '</i></button>';

-        html += '<button type="button" is="paper-icon-button-light" class="headerButton mainDrawerButton barsMenuButton headerButtonLeft autoSize"><i class="md-icon">menu</i></button>';
-        html += '<button type="button" is="paper-icon-button-light" class="headerButton headerAppsButton barsMenuButton headerButtonLeft autoSize"><i class="md-icon">home</i></button>';
+        html += '<button type="button" is="paper-icon-button-light" class="headerButton mainDrawerButton barsMenuButton headerButtonLeft hide"><i class="md-icon">menu</i></button>';
+        html += '<button type="button" is="paper-icon-button-light" class="headerButton headerAppsButton barsMenuButton headerButtonLeft"><i class="md-icon">home</i></button>';

        html += '<div class="libraryMenuButtonText headerButton">' + Globalize.translate('ButtonHome') + '</div>';

@ -179,7 +184,7 @@

    function bindMenuEvents() {

-        var mainDrawerButton = document.querySelector('.mainDrawerButton');
+        mainDrawerButton = document.querySelector('.mainDrawerButton');

        if (mainDrawerButton) {
            mainDrawerButton.addEventListener('click', toggleMainDrawer);
@ -331,11 +336,13 @@

    function refreshDashboardInfoInDrawer(page, user) {

-        if (!navDrawerScrollContainer.querySelector('.adminDrawerLogo')) {
-            createDashboardMenu(page);
-        } else {
-            updateDashboardMenuSelectedItem();
-        }
+        loadNavDrawer().then(function () {
+            if (!navDrawerScrollContainer.querySelector('.adminDrawerLogo')) {
+                createDashboardMenu(page);
+            } else {
+                updateDashboardMenuSelectedItem();
+            }
+        });
    }

    function updateDashboardMenuSelectedItem() {
@ -707,18 +714,6 @@
            }
        },

-        setMenuButtonVisible: function (visible) {
-
-            var mainDrawerButton = document.querySelector('.mainDrawerButton');
-
-            if (mainDrawerButton) {
-                if (!visible && browserInfo.mobile) {
-                    mainDrawerButton.classList.remove('hide');
-                } else {
-                    mainDrawerButton.classList.remove('hide');
-                }
-            }
-        },
        setTransparentMenu: function (transparent) {

            var viewMenuBar = document.querySelector('.viewMenuBar');
@ -861,9 +856,21 @@
        var isDashboardPage = page.classList.contains('type-interior');

        if (isDashboardPage) {
+            if (mainDrawerButton) {
+                mainDrawerButton.classList.remove('hide');
+            }
            refreshDashboardInfoInDrawer(page);
        } else {
-            if (navDrawerElement.classList.contains('adminDrawer')) {
+
+            if (mainDrawerButton) {
+                if (enableLibraryNavDrawer) {
+                    mainDrawerButton.classList.remove('hide');
+                } else {
+                    mainDrawerButton.classList.add('hide');
+                }
+            }
+
+            if ((navDrawerElement && navDrawerElement.classList.contains('adminDrawer')) || (!navDrawerElement && enableLibraryNavDrawer)) {
                refreshLibraryDrawer();
            }
        }
@ -974,24 +981,34 @@
            admin = true;
        }

-        if (admin) {
-            navDrawerElement.classList.add('adminDrawer');
-            navDrawerElement.classList.remove('darkDrawer');
-        } else {
-            navDrawerElement.classList.add('darkDrawer');
-            navDrawerElement.classList.remove('adminDrawer');
+        var enableNavDrawer = admin || enableLibraryNavDrawer;
+        if (enableNavDrawer) {
+            loadNavDrawer().then(function () {
+                if (admin) {
+                    navDrawerElement.classList.add('adminDrawer');
+                    navDrawerElement.classList.remove('darkDrawer');
+                } else {
+                    navDrawerElement.classList.add('darkDrawer');
+                    navDrawerElement.classList.remove('adminDrawer');
+                }
+            });
        }
    }

    function refreshLibraryDrawer(user) {

-        var promise = user ? Promise.resolve(user) : ConnectionManager.user(window.ApiClient);
+        if (!enableLibraryNavDrawer) {
+            return;
+        }

-        promise.then(function (user) {
-            refreshLibraryInfoInDrawer(user);
+        loadNavDrawer().then(function () {
+            var promise = user ? Promise.resolve(user) : ConnectionManager.user(window.ApiClient);

-            document.dispatchEvent(new CustomEvent("libraryMenuCreated", {}));
-            updateLibraryMenu(user.localUser);
+            promise.then(function (user) {
+                refreshLibraryInfoInDrawer(user);
+
+                updateLibraryMenu(user.localUser);
+            });
        });
    }

@ -1020,8 +1037,25 @@
        };
    }

-    navDrawerInstance = new navdrawer(getNavDrawerOptions());
-    navDrawerElement.classList.remove('hide');
+    function loadNavDrawer() {
+
+        if (navDrawerInstance) {
+            return Promise.resolve(navDrawerInstance);
+        }
+
+        return new Promise(function (resolve, reject) {
+
+            navDrawerElement = document.querySelector('.mainDrawer');
+            navDrawerScrollContainer = navDrawerElement.querySelector('.scrollContainer');
+
+            require(['navdrawer'], function (navdrawer) {
+                navDrawerInstance = new navdrawer(getNavDrawerOptions());
+                navDrawerElement.classList.remove('hide');
+                resolve(navDrawerInstance);
+            });
+        });
+    }
+
    renderHeader();

    Events.on(ConnectionManager, 'apiclientcreated', function (e, apiClient) {
@ -1041,9 +1075,11 @@

    setDrawerClass();

-    //require(['appfooter-shared', 'dockedtabs'], function (footer, dockedtabs) {
-    //    new dockedtabs({
-    //        appFooter: footer
-    //    });
-    //});
+    if (enableBottomTabs) {
+        require(['appfooter-shared', 'dockedtabs'], function (footer, dockedtabs) {
+            new dockedtabs({
+                appFooter: footer
+            });
+        });
+    }
 });
--- a/dashboard-ui/scripts/mediaplayer-video.js
+++ b/dashboard-ui/scripts/mediaplayer-video.js
@ -1256,7 +1256,7 @@
                errorMsg += '<br/>';
                errorMsg += Globalize.translate('MessageEnsureOpenTuner');
            }
-            if (mediaSource && mediaSource.VideoType != "VideoFile") {
+            else if (mediaSource && mediaSource.VideoType != "VideoFile") {
                errorMsg += '<br/>';
                errorMsg += '<br/>';
                errorMsg += Globalize.translate('MessageFolderRipPlaybackExperimental');
--- a/dashboard-ui/scripts/nowplayingbar.js
+++ b/dashboard-ui/scripts/nowplayingbar.js
@ -317,7 +317,7 @@
                    return;
                }

-                parentContainer.insertAdjacentHTML('beforeend', getNowPlayingBarHtml());
+                parentContainer.insertAdjacentHTML('afterbegin', getNowPlayingBarHtml());
                nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar');

                if (browser.safari && browser.slow) {
--- a/dashboard-ui/scripts/searchpage.js
+++ b/dashboard-ui/scripts/searchpage.js
@ -191,13 +191,11 @@

        view.addEventListener('viewbeforeshow', function (e) {
            document.body.classList.add('hiddenViewMenuBar');
-            LibraryMenu.setMenuButtonVisible(false);
        });

        view.addEventListener('viewbeforehide', function (e) {

            document.body.classList.remove('hiddenViewMenuBar');
-            LibraryMenu.setMenuButtonVisible(true);
        });

    };
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@ -1248,6 +1248,8 @@ var AppInfo = {};
            paths.serverdiscovery = apiClientBowerPath + "/serverdiscovery";
        }

+        define("webActionSheet", [embyWebComponentsBowerPath + "/actionsheet/actionsheet"], returnFirstDependency);
+
        if (Dashboard.isRunningInCordova()) {
            paths.sharingMenu = "cordova/sharingwidget";
            paths.wakeonlan = "cordova/wakeonlan";
@ -1256,7 +1258,7 @@ var AppInfo = {};
            paths.wakeonlan = apiClientBowerPath + "/wakeonlan";

            define("sharingMenu", [embyWebComponentsBowerPath + "/sharing/sharingmenu"], returnFirstDependency);
-            define("actionsheet", [embyWebComponentsBowerPath + "/actionsheet/actionsheet"], returnFirstDependency);
+            define("actionsheet", ["webActionSheet"], returnFirstDependency);
        }

        define("libjass", [bowerPath + "/libjass/libjass.min", "css!" + bowerPath + "/libjass/libjass"], returnFirstDependency);
@ -1619,7 +1621,11 @@ var AppInfo = {};
            };

            embyRouter.showFavorites = function () {
-                Dashboard.navigate('home.html?tab=3');
+                Dashboard.navigate('favorites.html');
+            };
+
+            embyRouter.showSettings = function () {
+                Dashboard.navigate('mypreferencesmenu.html');
            };

            function showItem(item, serverId, options) {
@ -2768,11 +2774,6 @@ var AppInfo = {};

            postInitDependencies.push('scripts/nowplayingbar');

-            if (AppInfo.isNativeApp && browserInfo.safari) {
-
-                postInitDependencies.push('cordova/ios/tabbar');
-            }
-
            postInitDependencies.push('components/remotecontrolautoplay');

            // Prefer custom font over Segoe if on desktop windows
--- a/dashboard-ui/strings/en-US.json
+++ b/dashboard-ui/strings/en-US.json
@ -2226,5 +2226,6 @@
  "LabelVaapiDeviceHelp": "This is the render node that is used for hardware acceleration.",
  "HowToConnectFromEmbyApps": "How to Connect from Emby apps",
  "MessageFolderRipPlaybackExperimental": "Support for playback of folder rips and ISOs in this app is only expirimental. For best results, try an Emby app that supports these formats natively, or use plain video files.",
-  "OptionExtractChapterImage": "Enable chapter image extraction"
+  "OptionExtractChapterImage": "Enable chapter image extraction",
+  "Downloads": "Downloads"
 }
--- a/dashboard-ui/supporterkey.html
+++ b/dashboard-ui/supporterkey.html
@ -20,14 +20,11 @@

                <form id="supporterKeyForm">

-                    <!-- Terrible, but this hidden field prevents the yellow background in chrome -->
-                    <div style="height:0; overflow: hidden;"><input type="text" name="fakeusernameremembered" tabindex="-1" /><input type="password" name="fakepasswordremembered" tabindex="-1" /></div>
-
                    <div style="margin: 3em 0 1em;">

                        <h1>${TabSupporterKey}</h1>
                        <div class="inputContainer">
-                            <input is="emby-input" type="password" id="txtSupporterKey" label="${LabelSupporterKey}" autocomplete="off" />
+                            <input is="emby-input" type="text" id="txtSupporterKey" label="${LabelSupporterKey}" autocomplete="off" />
                            <div class="fieldDescription">
                                ${LabelSupporterKeyHelp}
                            </div>