update tabs

dashboard-ui/appservices.html

@@ -1,4 +1,4 @@
-<div id="appServicesPage" data-role="page" class="page type-interior appServicesPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Sync" data-require="scripts/appservices">
+<div id="appServicesPage" data-role="page" class="page type-interior appServicesPage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Sync" data-require="scripts/appservices">
 
     <div data-role="content">
         <div class="content-primary">

dashboard-ui/autoorganizelog.html

@@ -1,13 +1,7 @@
-<div id="libraryFileOrganizerLogPage" data-role="page" class="page type-interior organizePage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Auto-Organize" data-require="jqmtable,scripts/autoorganizelog,scripts/taskbutton,detailtablecss">
+<div id="libraryFileOrganizerLogPage" data-role="page" class="page type-interior organizePage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Auto-Organize" data-require="jqmtable,scripts/autoorganizelog,scripts/taskbutton,detailtablecss">
     <div data-role="content">
         <div class="content-primary">
 
-            <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                <a href="#" data-role="button" class="ui-btn-active">${TabActivityLog}</a>
-                <a href="autoorganizetv.html" data-role="button">${TabTV}</a>
-                <a href="autoorganizesmart.html" data-role="button">${TabSmartMatches}</a>
-            </div>
-
             <div style="margin: -25px 0 1em; text-align: right;">
                 <div class="listTopPaging" style="float: left; position: relative; top: 15px;">
                 </div>

dashboard-ui/autoorganizesmart.html

@@ -1,14 +1,8 @@
-<div id="libraryFileOrganizerSmartMatchPage" data-role="page" class="page type-interior organizePage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Auto-Organize" data-require="scripts/autoorganizesmart,paper-icon-item,paper-fab,paper-item-body">
+<div id="libraryFileOrganizerSmartMatchPage" data-role="page" class="page type-interior organizePage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Auto-Organize" data-require="scripts/autoorganizesmart,paper-icon-item,paper-fab,paper-item-body">
 
     <div data-role="content">
         <div class="content-primary">
 
-            <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                <a href="autoorganizelog.html" data-role="button">${TabActivityLog}</a>
-                <a href="autoorganizetv.html" data-role="button">${TabTV}</a>
-                <a href="#" data-role="button" class="ui-btn-active">${TabSmartMatches}</a>
-            </div>
-
             <div class="readOnlyContent">
                 <p>${TabSmartMatchInfo}</p>
                 <div class="divMatchInfos"></div>

dashboard-ui/autoorganizetv.html

@@ -1,12 +1,7 @@
-<div id="libraryFileOrganizerPage" data-role="page" class="page type-interior organizePage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Auto-Organize" data-require="emby-collapsible,jqmtable,scripts/autoorganizetv,paper-input,paper-checkbox">
+<div id="libraryFileOrganizerPage" data-role="page" class="page type-interior organizePage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Auto-Organize" data-require="emby-collapsible,jqmtable,scripts/autoorganizetv,paper-input,paper-checkbox">
 
     <div data-role="content">
         <div class="content-primary">
-            <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                <a href="autoorganizelog.html" data-role="button">${TabActivityLog}</a>
-                <a href="#" data-role="button" class="ui-btn-active">${TabTV}</a>
-                <a href="autoorganizesmart.html" data-role="button">${TabSmartMatches}</a>
-            </div>
 
             <form class="libraryFileOrganizerForm">
 

dashboard-ui/bower_components/emby-webcomponents/.bower.json

@@ -16,12 +16,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.2.21",
+  "version": "1.2.23",
-  "_release": "1.2.21",
+  "_release": "1.2.23",
   "_resolution": {
     "type": "version",
-    "tag": "1.2.21",
+    "tag": "1.2.23",
-    "commit": "562008a40ddd38451acd2eaee618541fbf3472d3"
+    "commit": "dd2ac882405ff68e910711e43704d1adfb3100d9"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.0",

dashboard-ui/bower_components/hls.js/.bower.json

@@ -1,6 +1,6 @@
 {
   "name": "hls.js",
-  "version": "0.5.19",
+  "version": "0.5.20",
   "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.19",
+  "_release": "0.5.20",
   "_resolution": {
     "type": "version",
-    "tag": "v0.5.19",
+    "tag": "v0.5.20",
-    "commit": "ad5665b216b04d1dd5a44dbf9242664e2da323e0"
+    "commit": "3fb06c59d0df49961c057b522dc08eba4b8b0f08"
   },
   "_source": "git://github.com/dailymotion/hls.js.git",
   "_target": "~0.5.7",

dashboard-ui/bower_components/hls.js/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "hls.js",
-  "version": "0.5.19",
+  "version": "0.5.20",
   "license": "Apache-2.0",
   "description": "Media Source Extension - HLS library, by/for Dailymotion",
   "homepage": "https://github.com/dailymotion/hls.js",

dashboard-ui/bower_components/hls.js/dist/hls.js

@@ -454,6 +454,13 @@ var AbrController = function (_EventHandler) {
       var hls = this.hls,
           v = hls.media,
           frag = this.fragCurrent;
+
+      // if loader has been destroyed or loading has been aborted, stop timer and return
+      if (!frag.loader || frag.loader.stats && frag.loader.stats.aborted) {
+        _logger.logger.warn('frag loader destroy or aborted, disarm abandonRulesCheck');
+        this.clearTimer();
+        return;
+      }
       /* only monitor frag retrieval time if
       (video not paused OR first fragment being loaded(ready state === HAVE_NOTHING = 0)) AND autoswitching enabled AND not lowest level (=> means that we have several levels) */
       if (v && (!v.paused || !v.readyState) && frag.autoLevel && frag.level) {

dashboard-ui/bower_components/hls.js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hls.js",
-  "version": "0.5.19",
+  "version": "0.5.20",
   "license": "Apache-2.0",
   "description": "Media Source Extension - HLS library, by/for Dailymotion",
   "homepage": "https://github.com/dailymotion/hls.js",

dashboard-ui/bower_components/hls.js/src/controller/abr-controller.js

@@ -53,6 +53,13 @@ class AbrController extends EventHandler {
       we compare it to expected time of buffer starvation
     */
     let hls = this.hls, v = hls.media,frag = this.fragCurrent;
+
+    // if loader has been destroyed or loading has been aborted, stop timer and return
+    if(!frag.loader || ( frag.loader.stats && frag.loader.stats.aborted)) {
+      logger.warn(`frag loader destroy or aborted, disarm abandonRulesCheck`);
+      this.clearTimer();
+      return;
+    }
     /* only monitor frag retrieval time if
     (video not paused OR first fragment being loaded(ready state === HAVE_NOTHING = 0)) AND autoswitching enabled AND not lowest level (=> means that we have several levels) */
     if (v && (!v.paused || !v.readyState) && frag.autoLevel && frag.level) {

dashboard-ui/bower_components/iron-selector/.bower.json

@@ -36,7 +36,7 @@
     "tag": "v1.4.0",
     "commit": "554f7418fdbd97688eb21518b5f8172167d53a95"
   },
-  "_source": "git://github.com/PolymerElements/iron-selector.git",
+  "_source": "git://github.com/polymerelements/iron-selector.git",
   "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/iron-selector"
+  "_originalSource": "polymerelements/iron-selector"
 }

dashboard-ui/bower_components/paper-item/.bower.json

@@ -1,6 +1,6 @@
 {
   "name": "paper-item",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "A material-design styled list item",
   "authors": [
     "The Polymer Authors"
@@ -40,11 +40,11 @@
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
     "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
   },
-  "_release": "1.1.4",
+  "_release": "1.2.0",
   "_resolution": {
     "type": "version",
-    "tag": "v1.1.4",
+    "tag": "v1.2.0",
-    "commit": "5dcf21d5f7c13bafa24122c73aac28bd86213191"
+    "commit": "04568bc89c181222d53d8d166aef07708640484f"
   },
   "_source": "git://github.com/PolymerElements/paper-item.git",
   "_target": "^1.0.0",

dashboard-ui/bower_components/paper-item/.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,33 @@
+<!-- Instructions: https://github.com/PolymerElements/paper-item/CONTRIBUTING.md#filing-issues -->
+### Description
+<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
+
+### Expected outcome
+
+<!-- Example: The page stays the same color. -->
+
+### Actual outcome
+
+<!-- Example: The page turns pink. -->
+
+### Live Demo
+<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
+
+### Steps to reproduce
+
+<!-- Example
+1. Put a `paper-foo` element in the page.
+2. Open the page in a web browser.
+3. Click the `paper-foo` element.
+-->
+
+### Browsers Affected
+<!-- Check all that apply -->
+- [ ] Chrome
+- [ ] Firefox
+- [ ] Safari 9
+- [ ] Safari 8
+- [ ] Safari 7
+- [ ] Edge
+- [ ] IE 11
+- [ ] IE 10

dashboard-ui/bower_components/paper-item/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "paper-item",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "A material-design styled list item",
   "authors": [
     "The Polymer Authors"

dashboard-ui/bower_components/paper-item/paper-item-shared-styles.html

@@ -9,43 +9,53 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../paper-styles/default-theme.html">
 <link rel="import" href="../paper-styles/color.html">
+<link rel="import" href="../paper-styles/default-theme.html">
+<llink rel="import" href="../paper-styles/typography.html">
 
 <dom-module id="paper-item-shared-styles">
   <template>
     <style>
-      :host {
+      :host, .paper-item {
         display: block;
         position: relative;
         min-height: var(--paper-item-min-height, 48px);
         padding: 0px 16px;
       }
 
-      :host([hidden]) {
+      .paper-item {
+        @apply(--paper-font-subhead);
+        border:none;
+        outline: none;
+        background: white;
+        width: 100%;
+        text-align: left;
+      }
+
+      :host([hidden]), .paper-item[hidden] {
         display: none !important;
       }
 
-      :host(.iron-selected) {
+      :host(.iron-selected), .paper-item.iron-selected {
         font-weight: var(--paper-item-selected-weight, bold);
 
         @apply(--paper-item-selected);
       }
 
-      :host([disabled]) {
+      :host([disabled]), .paper-item[disabled] {
         color: var(--paper-item-disabled-color, --disabled-text-color);
 
         @apply(--paper-item-disabled);
       }
 
-      :host(:focus) {
+      :host(:focus), .paper-item:focus {
         position: relative;
         outline: 0;
 
         @apply(--paper-item-focused);
       }
 
-      :host(:focus):before {
+      :host(:focus):before, .paper-item:focus:before {
         @apply(--layout-fit);
 
         background: currentColor;

dashboard-ui/bower_components/paper-item/paper-item.html

@@ -39,6 +39,18 @@ focus as well by setting its tabindex to -1.
       <paper-item raised>Polymer Project</paper-item>
     </a>
 
+If you are concerned about performance and want to use `paper-item` in a `paper-listbox`
+with many items, you can just use a native `button` with the `paper-item` class
+applied (provided you have correctly included the shared styles):
+
+    <style is="custom-style" include="paper-item-shared-styles"></style>
+
+    <paper-listbox>
+      <button class="paper-item" role="option">Inbox</button>
+      <button class="paper-item" role="option">Starred</button>
+      <button class="paper-item" role="option">Sent mail</button>
+    </paper-listbox>
+
 ### Styling
 
 The following custom properties and mixins are available for styling:

dashboard-ui/bower_components/paper-item/test/paper-item.html

@@ -37,6 +37,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       </template>
     </test-fixture>
 
+    <test-fixture id="button">
+      <template>
+        <div role="listbox">
+          <button class="paper-item" role="option">item</button>
+        </div>
+      </template>
+    </test-fixture>
+
     <test-fixture id="iconItem">
       <template>
         <div role="listbox">
@@ -91,12 +99,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
           }, 1);
         });
 
-        test('click triggers a click event', function(done) {
+        test('enter triggers a click event', function(done) {
-          MockInteractions.tap(item);
+          MockInteractions.pressEnter(item);
+          Polymer.Base.async(function(){
+            // You need two ticks, one for the MockInteractions event, and one
+            // for the button event.
             Polymer.Base.async(function(){
               expect(clickHandler.callCount).to.be.equal(1);
               done();
             }, 1);
+          }, 1);
         });
       });
 
@@ -196,6 +208,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         });
 
         a11ySuite('item');
+        a11ySuite('button');
         a11ySuite('iconItem');
       });
 

dashboard-ui/cinemamodeconfiguration.html

@@ -1,4 +1,4 @@
-<div id="cinemaModeConfigurationPage" data-role="page" class="page type-interior playbackConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Cinema-Mode" data-require="scripts/cinemamodeconfiguration,paper-checkbox,paper-input">
+<div id="cinemaModeConfigurationPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Cinema-Mode" data-require="scripts/cinemamodeconfiguration,paper-checkbox,paper-input">
 
     <div data-role="content">
         <div class="content-primary">

dashboard-ui/css/librarymenu.css

@@ -144,7 +144,7 @@
     border: 0;
     height: 50px;
     display: flex;
-    align-items: center;
+    flex-direction: column;
 }
 
 .hiddenViewMenuBar .viewMenuBar {
@@ -182,10 +182,85 @@
     color: #fff;
 }
 
+    .viewMenuBar .primaryIcons {
+        display: flex;
+        flex-grow: 1;
+        width: 100%;
+        align-items: center;
+    }
+
 .dashboardDocument .viewMenuBar {
     background-color: #43A047;
     box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
-    height: 64px;
+    height: auto;
+}
+
+    .dashboardDocument .viewMenuBar .primaryIcons {
+        padding: .92em 0;
+    }
+
+.dashboardDocument .withTallToolbar .primaryIcons {
+    padding-bottom: 0;
+}
+
+.dashboardDocument .viewMenuBar #selectionBar {
+    background: #fff !important;
+}
+
+.viewMenuBarTabs {
+    width: 100%;
+}
+
+    .viewMenuBarTabs paper-tabs {
+        background: none;
+        box-shadow: none;
+    }
+
+    .viewMenuBarTabs .paperTabLink {
+        align-items: center;
+        justify-content: center;
+        display: flex;
+    }
+
+.mainDrawerPanel:not([narrow]) .viewMenuBarTabs {
+    width: auto;
+    padding-left: 272px;
+}
+
+.mainDrawerPanel .viewMenuBarTabs #tabsContent {
+    display: block !important;
+    width: 100%;
+}
+
+.mainDrawerPanel:not([narrow]) .viewMenuBarTabs paper-tab {
+    width: auto !important;
+}
+
+.viewMenuBarTabs #tabsContainer {
+    margin: auto;
+    -ms-flex: none;
+    -webkit-flex: none;
+    flex: none;
+    flex-shrink: 0;
+    flex-grow: 1;
+    touch-action: auto !important;
+}
+
+.viewMenuBarTabs paper-tabs {
+    overflow: visible !important;
+}
+
+.viewMenuBarTabs .paperTabLink {
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+}
+
+.mainDrawerPanel:not([narrow]) .viewMenuBarTabs .tab-content {
+    display: block !important;
+}
+
+.viewMenuBar paper-icon-button.paper-tabs {
+    display: none !important;
 }
 
 .viewMenuBar.semiTransparent {
@@ -227,10 +302,7 @@
     }
 
 .viewMenuSecondary {
-    position: absolute;
+    margin-left: auto;
-    top: 0;
-    bottom: 0;
-    right: 0;
     display: flex;
     align-items: center;
 }
@@ -426,13 +498,8 @@ body:not(.dashboardDocument) .btnNotifications {
     font-weight: 500 !important;
 }
 
-.adminDrawerPanel .sidebarDivider {
-    display: none;
-}
-
 .adminDrawerPanel .sidebarLinkIcon {
-    color: #666 !important;
+    color: #666;
-    height: 12px;
     margin-right: 1em;
 }
 

dashboard-ui/css/site.css

@@ -774,13 +774,21 @@ paper-input + .fieldDescription {
     padding-top: 70px;
 }
 
+.withTabs .content-primary {
+    padding-top: 110px;
+}
+
 .mainDrawerPanel:not([narrow]) .content-primary {
     padding: 110px 1.5em 3em 3em;
 }
 
-    .mainDrawerPanel:not([narrow]) .content-primary ul:first-child {
+.mainDrawerPanel:not([narrow]) .withTabs .content-primary {
+    padding-top: 128px!important;
+}
+
+.mainDrawerPanel:not([narrow]) .content-primary ul:first-child {
     margin-top: 0;
-    }
+}
 
 .background-theme-a, .dialog.background-theme-a {
     background-color: #f5f5f5;

dashboard-ui/encodingsettings.html

@@ -1,4 +1,4 @@
-<div id="encodingSettingsPage" data-role="page" class="page type-interior playbackConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Transcoding" data-require="scripts/encodingsettings,paper-input,paper-checkbox">
+<div id="encodingSettingsPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Transcoding" data-require="scripts/encodingsettings,paper-input,paper-checkbox">
 
     <div data-role="content">
         <div class="content-primary">

dashboard-ui/notificationsetting.html

@@ -1,4 +1,4 @@
-<div id="notificationSettingPage" data-role="page" class="page type-interior notificationConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Notifications" data-require="scripts/notificationsetting,paper-input,jqmcheckbox">
+<div id="notificationSettingPage" data-role="page" class="page type-interior notificationConfigurationPage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Notifications" data-require="scripts/notificationsetting,paper-input,jqmcheckbox">
 
     <div data-role="content">
         <div class="content-primary">

dashboard-ui/notificationsettings.html

@@ -1,13 +1,8 @@
-<div id="notificationSettingsPage" data-role="page" class="page type-interior notificationConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Notifications" data-require="scripts/notificationsettings">
+<div id="notificationSettingsPage" data-role="page" class="page type-interior notificationConfigurationPage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Notifications">
 
     <div data-role="content">
         <div class="content-primary">
 
-            <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                <a href="#" data-role="button" class="ui-btn-active">${TabNotifications}</a>
-                <a href="appservices.html?context=notifications" data-role="button">${TabServices}</a>
-            </div>
-
             <div class="readOnlyContent">
                 <p>${HeaderNotificationList}</p>
                 <p>${HeaderSendNotificationHelp}</p>

dashboard-ui/playbackconfiguration.html

@@ -1,4 +1,4 @@
-<div id="playbackConfigurationPage" data-role="page" class="page type-interior playbackConfigurationPage" data-require="scripts/playbackconfiguration,paper-input">
+<div id="playbackConfigurationPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs" data-require="scripts/playbackconfiguration,paper-input">
 
     <div data-role="content">
         <div class="content-primary">

dashboard-ui/scripts/autoorganizelog.js

@@ -293,6 +293,22 @@
         }
     }
 
+    function getTabs() {
+        return [
+        {
+            href: 'autoorganizelog.html',
+            name: Globalize.translate('TabActivityLog')
+        },
+         {
+             href: 'autoorganizetv.html',
+             name: Globalize.translate('TabTV')
+         },
+         {
+             href: 'autoorganizesmart.html',
+             name: Globalize.translate('TabSmartMatches')
+         }];
+    }
+
     $(document).on('pageinit', "#libraryFileOrganizerLogPage", function () {
 
         var page = this;
@@ -307,6 +323,8 @@
 
     }).on('pageshow', "#libraryFileOrganizerLogPage", function () {
 
+        LibraryMenu.setTabs('autoorganize', 0, getTabs);
+
         var page = this;
 
         reloadItems(page);

dashboard-ui/scripts/autoorganizesmart.js

@@ -105,6 +105,22 @@
         });
     }
 
+    function getTabs() {
+        return [
+        {
+            href: 'autoorganizelog.html',
+            name: Globalize.translate('TabActivityLog')
+        },
+         {
+             href: 'autoorganizetv.html',
+             name: Globalize.translate('TabTV')
+         },
+         {
+             href: 'autoorganizesmart.html',
+             name: Globalize.translate('TabSmartMatches')
+         }];
+    }
+
     $(document).on('pageinit', "#libraryFileOrganizerSmartMatchPage", function () {
 
         var page = this;
@@ -134,6 +150,8 @@
 
         var page = this;
 
+        LibraryMenu.setTabs('autoorganize', 2, getTabs);
+
         Dashboard.showLoadingMsg();
 
         reloadList(page);

dashboard-ui/scripts/autoorganizetv.js

@@ -109,6 +109,22 @@
         return false;
     }
 
+    function getTabs() {
+        return [
+        {
+            href: 'autoorganizelog.html',
+            name: Globalize.translate('TabActivityLog')
+        },
+         {
+             href: 'autoorganizetv.html',
+             name: Globalize.translate('TabTV')
+         },
+         {
+             href: 'autoorganizesmart.html',
+             name: Globalize.translate('TabSmartMatches')
+         }];
+    }
+
     $(document).on('pageinit', "#libraryFileOrganizerPage", function () {
 
         var page = this;
@@ -160,6 +176,8 @@
 
         var page = this;
 
+        LibraryMenu.setTabs('autoorganize', 1, getTabs);
+
         ApiClient.getNamedConfiguration('autoorganize').then(function (config) {
             loadPage(page, config);
         });

dashboard-ui/scripts/cinemamodeconfiguration.js

@@ -53,6 +53,26 @@
         return false;
     }
 
+    function getTabs() {
+        return [
+        {
+            href: 'cinemamodeconfiguration.html',
+            name: Globalize.translate('TabCinemaMode')
+        },
+         {
+             href: 'playbackconfiguration.html',
+             name: Globalize.translate('TabResumeSettings')
+         },
+         {
+             href: 'streamingsettings.html',
+             name: Globalize.translate('TabStreaming')
+         },
+         {
+             href: 'encodingsettings.html',
+             name: Globalize.translate('TabTranscoding')
+         }];
+    }
+
     $(document).on('pageinit', "#cinemaModeConfigurationPage", function () {
 
         var page = this;
@@ -111,6 +131,8 @@
 
     }).on('pageshow', "#cinemaModeConfigurationPage", function () {
 
+        LibraryMenu.setTabs('playback', 0, getTabs);
+
         Dashboard.showLoadingMsg();
 
         var page = this;

dashboard-ui/scripts/encodingsettings.js

@@ -50,6 +50,26 @@
         return false;
     }
 
+    function getTabs() {
+        return [
+        {
+            href: 'cinemamodeconfiguration.html',
+            name: Globalize.translate('TabCinemaMode')
+        },
+         {
+             href: 'playbackconfiguration.html',
+             name: Globalize.translate('TabResumeSettings')
+         },
+         {
+             href: 'streamingsettings.html',
+             name: Globalize.translate('TabStreaming')
+         },
+         {
+             href: 'encodingsettings.html',
+             name: Globalize.translate('TabTranscoding')
+         }];
+    }
+
     $(document).on('pageinit', "#encodingSettingsPage", function () {
 
         var page = this;
@@ -84,6 +104,7 @@
 
         Dashboard.showLoadingMsg();
 
+        LibraryMenu.setTabs('playback',3, getTabs);
         var page = this;
 
         ApiClient.getNamedConfiguration("encoding").then(function (config) {

dashboard-ui/scripts/librarymenu.js

@@ -6,6 +6,7 @@
 
         var html = '';
 
+        html += '<div class="primaryIcons">';
         var backIcon = browserInfo.safari ? 'chevron-left' : 'arrow-back';
 
         html += '<paper-icon-button icon="' + backIcon + '" class="headerButton headerButtonLeft headerBackButton hide"></paper-icon-button>';
@@ -43,6 +44,10 @@
             html += '<paper-icon-button icon="settings" class="headerButton headerButtonRight dashboardEntryHeaderButton" onclick="return LibraryMenu.onSettingsClicked(event);"></paper-icon-button>';
         }
 
+        html += '</div>';
+        html += '</div>';
+
+        html += '<div class="viewMenuBarTabs hiddenScrollX">';
         html += '</div>';
 
         var viewMenuBar = document.createElement('div');
@@ -432,20 +437,12 @@
             if (selected) {
                 link.classList.add('selectedSidebarLink');
 
-                var collapsible = parentWithTag(link, 'EMBY-COLLAPSIBLE');
-                if (collapsible) {
-                    collapsible.expanded = true;
-                }
-
                 var title = '';
 
-                title += collapsible.title || '';
-                title += '<span class="title-separator">–</span>';
-
                 var secondaryTitle = (link.innerText || link.textContent).trim();
                 title += secondaryTitle;
 
-                var documentTitle = collapsible.title || secondaryTitle;
+                var documentTitle = secondaryTitle;
 
                 Dashboard.setPageTitle(title, documentTitle);
 
@@ -456,7 +453,6 @@
     }
 
     function createDashboardMenu() {
-        require(['emby-collapsible'], function () {
         var html = '';
 
         //html += '<div class="userHeader">';
@@ -470,7 +466,7 @@
 
         html += '<a class="adminDrawerLogo clearLink" href="home.html">'
         html += '<img src="css/images/logo.png" />';
-            html += '</a>'
+        html += '</a>';
 
         html += Dashboard.getToolsMenuHtml();
 
@@ -479,7 +475,6 @@
         mainDrawerPanel.querySelector('.mainDrawer').innerHTML = html;
 
         updateDashboardMenuSelectedItem();
-        });
     }
 
     function onSidebarLinkClick() {
@@ -723,6 +718,47 @@
             return false;
         },
 
+        setTabs: function (type, selectedIndex, builder) {
+
+            var viewMenuBarTabs;
+
+            if (!type) {
+                if (LibraryMenu.tabType) {
+
+                    mainDrawerPanel.classList.remove('withTallToolbar');
+                    viewMenuBarTabs = document.querySelector('.viewMenuBarTabs');
+                    viewMenuBarTabs.innerHTML = '';
+                    viewMenuBarTabs.classList.add('hide');
+                    LibraryMenu.tabType = null;
+                }
+                return;
+            }
+
+            viewMenuBarTabs = document.querySelector('.viewMenuBarTabs');
+
+            if (!LibraryMenu.tabType) {
+                viewMenuBarTabs.classList.remove('hide');
+            }
+
+            if (LibraryMenu.tabType != type) {
+
+                require(['paper-tabs'], function () {
+
+                    viewMenuBarTabs.innerHTML = '<paper-tabs selected="' + selectedIndex + '" hidescrollbuttons noink>' + builder().map(function (t) {
+
+                        return '<paper-tab link><a class="clearLink paperTabLink" href="' + t.href + '"><div>' + t.name + '</div></a></paper-tab>';
+
+                    }).join('') + '</paper-tabs>';
+                    mainDrawerPanel.classList.add('withTallToolbar');
+                    LibraryMenu.tabType = type;
+                });
+                return;
+            }
+
+            viewMenuBarTabs.querySelector('paper-tabs').selected = selectedIndex;
+            LibraryMenu.tabType = type;
+        },
+
         setTitle: function (title) {
 
             var html = title;
@@ -885,7 +921,7 @@
         }
     }
 
-    function buildViewMenuBar(page) {
+    function updateViewMenuBar(page) {
 
         var viewMenuBar = document.querySelector('.viewMenuBar');
 
@@ -895,6 +931,12 @@
             viewMenuBar.classList.remove('hide');
         }
 
+        if (page.classList.contains('type-interior')) {
+            viewMenuBar.classList.add('headroomDisabled');
+        } else {
+            viewMenuBar.classList.remove('headroomDisabled');
+        }
+
         if (requiresUserRefresh) {
             ConnectionManager.user(window.ApiClient).then(updateUserInHeader);
         }
@@ -915,6 +957,15 @@
         }
     });
 
+    pageClassOn('pagebeforeshow', 'page', function (e) {
+
+        var page = this;
+
+        if (!page.classList.contains('withTabs')) {
+            LibraryMenu.setTabs(null);
+        }
+    });
+
     pageClassOn('pageshow', 'page', function (e) {
 
         var page = this;
@@ -935,7 +986,7 @@
 
         setDrawerClass(page);
 
-        buildViewMenuBar(page);
+        updateViewMenuBar(page);
         updateTabLinks(page);
 
         if (!e.detail.isRestored) {
@@ -1023,7 +1074,6 @@
             });
             // initialise
             headroom.init();
-            elem.classList.add('headroomEnabled');
         });
     }
 

dashboard-ui/scripts/notificationsettings.js

@@ -62,13 +62,27 @@
         });
     }
 
-    $(document).on('pageshow', "#notificationSettingsPage", function () {
+    function getTabs() {
+        return [
+        {
+            href: 'notificationsettings.html',
+            name: Globalize.translate('TabNotifications')
+        },
+        {
+            href: 'appservices.html?context=notifications',
+            name: Globalize.translate('TabServices')
+        }];
+    }
 
-        var page = this;
+    return function (view, params) {
+
+        view.addEventListener('viewshow', function () {
+
+            LibraryMenu.setTabs('notifications', 0, getTabs);
 
             require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () {
-            reload(page);
+                reload(view);
             });
         });
-
+    };
 });

dashboard-ui/scripts/playbackconfiguration.js

@@ -27,12 +27,33 @@
         return false;
     }
 
+    function getTabs() {
+        return [
+        {
+            href: 'cinemamodeconfiguration.html',
+            name: Globalize.translate('TabCinemaMode')
+        },
+         {
+             href: 'playbackconfiguration.html',
+             name: Globalize.translate('TabResumeSettings')
+         },
+         {
+             href: 'streamingsettings.html',
+             name: Globalize.translate('TabStreaming')
+         },
+         {
+             href: 'encodingsettings.html',
+             name: Globalize.translate('TabTranscoding')
+         }];
+    }
+
     $(document).on('pageinit', "#playbackConfigurationPage", function () {
 
         $('.playbackConfigurationForm').off('submit', onSubmit).on('submit', onSubmit);
 
     }).on('pageshow', "#playbackConfigurationPage", function () {
 
+        LibraryMenu.setTabs('playback', 1, getTabs);
         Dashboard.showLoadingMsg();
 
         var page = this;

dashboard-ui/scripts/site.js

@@ -684,6 +684,10 @@ var Dashboard = {
 
             item = items[i];
 
+            if (item.divider) {
+                menuHtml += "<div class='sidebarDivider'></div>";
+            }
+
             if (item.items) {
 
                 var style = item.color ? ' iconstyle="color:' + item.color + '"' : '';
@@ -714,12 +718,8 @@ var Dashboard = {
     getToolsMenuLinks: function () {
 
         return [{
-            name: Globalize.translate('TabServer'),
+            name: Globalize.translate('TabServer')
-            icon: 'dashboard',
+        }, {
-            color: '#38c',
-            expanded: true,
-            items: [
-                {
             name: Globalize.translate('TabDashboard'),
             href: "dashboard.html",
             pageIds: ['dashboardPage'],
@@ -739,229 +739,110 @@ var Dashboard = {
             href: "userprofiles.html",
             pageIds: ['userProfilesPage'],
             icon: 'people'
-                }
-            ]
         }, {
-            name: Globalize.translate('TabLibrary'),
+            divider: true,
-            icon: 'folder',
+            name: Globalize.translate('TabLibrary')
-            color: '#ECA403',
+        }, {
-            expanded: true,
-            items: [
-                {
             name: Globalize.translate('TabFolders'),
             href: "library.html",
             pageIds: ['mediaLibraryPage'],
-                    icon: 'folder'
+            icon: 'folder',
-                },
+            color: '#E5342E'
-                {
+        }, {
             name: Globalize.translate('TabMetadata'),
             href: "metadata.html",
             pageIds: ['metadataConfigurationPage'],
-                    icon: 'insert-drive-file'
+            icon: 'insert-drive-file',
-                },
+            color: '#293AAE'
-                {
+        }, {
             name: Globalize.translate('TabServices'),
             href: "metadataimages.html",
             pageIds: ['metadataImagesConfigurationPage'],
             icon: 'insert-drive-file'
-                },
+        }, {
-                {
             name: Globalize.translate('TabNfoSettings'),
             href: "metadatanfo.html",
             pageIds: ['metadataNfoPage'],
             icon: 'insert-drive-file'
-                },
+        }, {
-                {
             name: Globalize.translate('TabPathSubstitution'),
             href: "librarypathmapping.html",
             pageIds: ['libraryPathMappingPage'],
             icon: 'mode-edit'
-                },
+        }, {
-                {
             name: Globalize.translate('TabSubtitles'),
             href: "metadatasubtitles.html",
             pageIds: ['metadataSubtitlesPage'],
             icon: 'closed-caption'
-                },
+        }, {
-                {
             name: Globalize.translate('TabAdvanced'),
             href: "librarysettings.html",
             pageIds: ['librarySettingsPage'],
             icon: 'settings'
-                }
-            ]
-        }, {
-            name: Globalize.translate('DLNA'),
-            icon: 'live-tv',
-            color: '#E5342E',
-            items: [
-                {
-                    name: Globalize.translate('TabSettings'),
-                    href: "dlnasettings.html",
-                    pageIds: ['dlnaSettingsPage'],
-                    icon: 'settings'
-                },
-                {
-                    name: Globalize.translate('TabProfiles'),
-                    href: "dlnaprofiles.html",
-                    pageIds: ['dlnaProfilesPage', 'dlnaProfilePage'],
-                    icon: 'live-tv'
-                }
-            ]
-        }, {
-            name: Globalize.translate('TabLiveTV'),
-            icon: 'dvr',
-            color: '#293AAE',
-            items: [
-                {
-                    name: Globalize.translate('TabSettings'),
-                    href: "livetvstatus.html",
-                    pageIds: ['liveTvStatusPage'],
-                    icon: 'settings'
-                },
-                {
-                    name: Globalize.translate('TabAdvanced'),
-                    href: "livetvsettings.html",
-                    pageIds: ['liveTvSettingsPage'],
-                    icon: 'settings'
-                },
-                {
-                    name: Globalize.translate('TabServices'),
-                    href: "appservices.html?context=livetv",
-                    //selected: (isServicesPage && context == 'livetv'),
-                    icon: 'add-shopping-cart'
-                }
-            ]
-        }, {
-            name: Globalize.translate('TabNotifications'),
-            icon: 'notifications',
-            color: 'brown',
-            href: "notificationsettings.html"
         }, {
             name: Globalize.translate('TabPlayback'),
             icon: 'play-circle-filled',
             color: '#E5342E',
-            items: [
-                {
-                    name: Globalize.translate('TabCinemaMode'),
             href: "cinemamodeconfiguration.html",
-                    pageIds: ['cinemaModeConfigurationPage'],
+            pageIds: ['cinemaModeConfigurationPage', 'playbackConfigurationPage', 'streamingSettingsPage', 'encodingSettingsPage']
-                    icon: 'local-movies'
+        }, {
-                },
+            name: Globalize.translate('TabSync'),
-                {
+            icon: 'sync',
-                    name: Globalize.translate('TabResumeSettings'),
+            href: "syncactivity.html",
-                    href: "playbackconfiguration.html",
+            pageIds: ['syncActivityPage', 'syncJobPage', 'devicesUploadPage', 'syncSettingsPage']
-                    pageIds: ['playbackConfigurationPage'],
+        }, {
-                    icon: 'play-circle-filled'
+            divider: true,
-                },
+            name: Globalize.translate('TabExtras')
-                {
+        }, {
-                    name: Globalize.translate('TabStreaming'),
+            name: Globalize.translate('TabAutoOrganize'),
-                    href: "streamingsettings.html",
+            color: '#01C0DD',
-                    pageIds: ['streamingSettingsPage'],
+            href: "autoorganizelog.html",
-                    icon: 'wifi'
+            pageIds: ['libraryFileOrganizerPage', 'libraryFileOrganizerSmartMatchPage', 'libraryFileOrganizerLogPage'],
-                },
+            icon: 'folder'
-                {
+        }, {
-                    name: Globalize.translate('TabTranscoding'),
+            name: Globalize.translate('DLNA'),
-                    href: "encodingsettings.html",
+            href: "dlnasettings.html",
-                    pageIds: ['encodingSettingsPage'],
+            pageIds: ['dlnaSettingsPage', 'dlnaProfilesPage', 'dlnaProfilePage'],
-                    icon: 'play-circle-filled'
+            icon: 'settings'
-                }
+        }, {
-            ]
+            name: Globalize.translate('TabLiveTV'),
+            href: "livetvstatus.html",
+            pageIds: ['liveTvStatusPage', 'liveTvSettingsPage'],
+            icon: 'dvr'
+        }, {
+            name: Globalize.translate('TabNotifications'),
+            icon: 'notifications',
+            color: 'brown',
+            href: "notificationsettings.html",
+            pageIds: ['notificationSettingsPage', 'notificationSettingPage']
         }, {
             name: Globalize.translate('TabPlugins'),
             icon: 'add-shopping-cart',
             color: '#9D22B1',
-            items: [
-                {
-                    name: Globalize.translate('TabMyPlugins'),
             href: "plugins.html",
-                    pageIds: ['pluginsPage'],
+            pageIds: ['pluginsPage', 'pluginCatalogPage']
-                    icon: 'file-download'
         }, {
-                    name: Globalize.translate('TabCatalog'),
+            divider: true,
-                    href: "plugincatalog.html",
+            name: Globalize.translate('TabExpert')
-                    pageIds: ['pluginCatalogPage'],
-                    icon: 'add-shopping-cart'
-                }
-            ]
-        }, {
-            name: Globalize.translate('TabSync'),
-            icon: 'sync',
-            items: [
-                {
-                    name: Globalize.translate('TabSyncJobs'),
-                    href: "syncactivity.html",
-                    pageIds: ['syncActivityPage', 'syncJobPage'],
-                    icon: 'menu'
-                }, {
-                    name: Globalize.translate('TabCameraUpload'),
-                    href: "devicesupload.html",
-                    pageIds: ['devicesUploadPage'],
-                    icon: 'photo'
-                }, {
-                    name: Globalize.translate('TabServices'),
-                    href: "appservices.html?context=sync",
-                    //selected: (isServicesPage && context == 'sync'),
-                    icon: 'add-shopping-cart'
-                }, {
-                    name: Globalize.translate('TabSettings'),
-                    href: "syncsettings.html",
-                    pageIds: ['syncSettingsPage'],
-                    icon: 'settings'
-                }
-            ]
         }, {
             name: Globalize.translate('TabAdvanced'),
             icon: 'settings',
-            color: '#F16834',
-            items: [
-                {
-                    name: Globalize.translate('TabAutoOrganize'),
-                    href: "autoorganizelog.html",
-                    pageIds: ['libraryFileOrganizerPage', 'libraryFileOrganizerSmartMatchPage', 'libraryFileOrganizerLogPage'],
-                    icon: 'folder'
-                },
-                {
-                    name: Globalize.translate('TabHosting'),
             href: "dashboardhosting.html",
-                    pageIds: ['dashboardHostingPage'],
+            color: '#F16834',
-                    icon: 'wifi'
+            pageIds: ['dashboardHostingPage', 'serverSecurityPage']
         }, {
             name: Globalize.translate('TabScheduledTasks'),
+            color: '#38c',
             href: "scheduledtasks.html",
             pageIds: ['scheduledTasksPage', 'scheduledTaskPage'],
             icon: 'schedule'
-                },
-                {
-                    name: Globalize.translate('TabSecurity'),
-                    href: "serversecurity.html",
-                    pageIds: ['serverSecurityPage'],
-                    icon: 'lock'
-                }
-            ]
         }, {
             name: Globalize.translate('TabHelp'),
-            icon: 'info',
-            items: [
-                {
-                    name: Globalize.translate('TabAbout'),
             href: "about.html",
-                    pageIds: ['aboutPage'],
+            icon: 'help',
-                    icon: 'info'
+            color: '#679C34',
-                },
+            divider: true,
-                {
+            pageIds: ['supporterKeyPage', 'logPage', 'aboutPage']
-                    name: Globalize.translate('TabLogs'),
-                    href: "log.html",
-                    pageIds: ['logPage'],
-                    icon: 'menu'
-                },
-                {
-                    name: Globalize.translate('TabEmbyPremiere'),
-                    href: "supporterkey.html",
-                    pageIds: ['supporterKeyPage'],
-                    icon: 'add-circle'
-                }
-            ]
         }];
 
     },
@@ -2767,6 +2648,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/notificationsettings.html',
+            controller: 'scripts/notificationsettings',
             dependencies: [],
             autoFocus: false,
             roles: 'admin'

dashboard-ui/scripts/streamingsettings.js

@@ -37,6 +37,26 @@
         return false;
     }
 
+    function getTabs() {
+        return [
+        {
+            href: 'cinemamodeconfiguration.html',
+            name: Globalize.translate('TabCinemaMode')
+        },
+         {
+             href: 'playbackconfiguration.html',
+             name: Globalize.translate('TabResumeSettings')
+         },
+         {
+             href: 'streamingsettings.html',
+             name: Globalize.translate('TabStreaming')
+         },
+         {
+             href: 'encodingsettings.html',
+             name: Globalize.translate('TabTranscoding')
+         }];
+    }
+
     $(document).on('pageinit', "#streamingSettingsPage", function () {
 
         var page = this;
@@ -70,6 +90,7 @@
 
         Dashboard.showLoadingMsg();
 
+        LibraryMenu.setTabs('playback', 2, getTabs);
         var page = this;
 
         ApiClient.getServerConfiguration().then(function (config) {

dashboard-ui/streamingsettings.html

@@ -1,4 +1,4 @@
-<div id="streamingSettingsPage" data-role="page" class="page type-interior playbackConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Streaming" data-require="scripts/streamingsettings,paper-input">
+<div id="streamingSettingsPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Streaming" data-require="scripts/streamingsettings,paper-input">
 
     <div data-role="content">
         <div class="content-primary">