Merge remote-tracking branch 'upstream/master' into servernotifications-fixes

.eslintrc.yml

@@ -1,27 +1,71 @@
 env:
-  es6: true
+  es6: false
   browser: true
   amd: true
 
+globals:
+  # New browser globals
+  DataView: readonly
+  MediaMetadata: readonly
+  Promise: readonly
+  # Deprecated browser globals
+  DocumentTouch: readonly
+  # Tizen globals
+  tizen: readonly
+  webapis: readonly
+  # WebOS globals
+  webOS: readonly
+  # Dependency globals
+  $: readonly
+  jQuery: readonly
+  queryString: readonly
+  requirejs: readonly
+  # Jellyfin globals
+  ApiClient: writable
+  AppInfo: writable
+  chrome: writable
+  ConnectionManager: writable
+  DlnaProfilePage: writable
+  Dashboard: writable
+  DashboardPage: writable
+  Emby: readonly
+  Events: writable
+  getParameterByName: writable
+  getWindowLocationSearch: writable
+  Globalize: writable
+  Hls: writable
+  humaneDate: writable
+  humaneElapsed: writable
+  LibraryMenu: writable
+  LinkParser: writable
+  LiveTvHelpers: writable
+  MetadataEditor: writable
+  pageClassOn: writable
+  pageIdOn: writable
+  PlaylistViewer: writable
+  UserParentalControlPage: writable
+  Windows: readonly
+
+extends:
+  - eslint:recommended
+
 rules:
   block-spacing: ["error"]
   brace-style: ["error"]
   comma-dangle: ["error", "never"]
   comma-spacing: ["error"]
-  eol-last: ["off"]
+  eol-last: ["error"]
   indent: ["error", 4, { "SwitchCase": 1 }]
   keyword-spacing: ["error"]
-  line-comment-position: ["off"]
   max-statements-per-line: ["error"]
-  no-empty: ["error"]
-  no-extra-semi: ["error"]
   no-floating-decimal: ["error"]
   no-multi-spaces: ["error"]
   no-multiple-empty-lines: ["error", { "max": 1 }]
   no-trailing-spaces: ["error"]
-  no-void: ["off"]
   one-var: ["error", "never"]
-  padding-line-between-statements: ["off"]
+  semi: ["warn"]
-  semi: ["off"]
   space-before-blocks: ["error"]
-  yoda: ["off"]
+  # TODO: Fix warnings and remove these rules
+  no-redeclare: ["warn"]
+  no-unused-vars: ["warn"]
+  no-useless-escape: ["warn"]

.gitignore

@@ -575,4 +575,4 @@ healthchecksdb
 # End of https://www.gitignore.io/api/node,rider,macos,linux,windows,visualstudio,visualstudiocode
 
 # dist for webpack output
-dist
+dist

.stylelintrc

@@ -140,4 +140,4 @@
     "value-list-comma-space-before": "never",
     "value-list-max-empty-lines": 0,
   }
-}
+}

CONTRIBUTORS.md

@@ -32,6 +32,8 @@
  - [bilde2910](https://github.com/bilde2910)
  - [Daniel Hartung](https://github.com/dhartung)
  - [Ryan Hartzell](https://github.com/ryan-hartzell)
+ - [Thibault Nocchi](https://github.com/ThibaultNocchi)
+ - [MrTimscampi](https://github.com/MrTimscampi)
 
 # Emby Contributors
 

package.json

@@ -7,40 +7,40 @@
   "devDependencies": {
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^2.1.0",
+    "css-loader": "^3.4.2",
-    "eslint": "^5.16.0",
+    "eslint": "^6.8.0",
-    "file-loader": "^3.0.1",
+    "file-loader": "^5.0.2",
     "html-webpack-plugin": "^3.2.0",
-    "style-loader": "^0.23.1",
+    "style-loader": "^1.1.3",
-    "stylelint": "^13.0.0",
+    "stylelint": "^13.1.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-no-browser-hacks": "^1.2.1",
     "stylelint-order": "^4.0.0",
-    "webpack": "^4.41.0",
+    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.9",
+    "webpack-cli": "^3.3.10",
     "webpack-concat-plugin": "^3.0.0",
-    "webpack-dev-server": "^3.8.1",
+    "webpack-dev-server": "^3.10.3",
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
-    "alameda": "^1.3.0",
+    "alameda": "^1.4.0",
-    "document-register-element": "^0.5.4",
+    "document-register-element": "^1.14.3",
     "flv.js": "^1.5.0",
-    "hls.js": "^0.12.4",
+    "hls.js": "^0.13.1",
-    "howler": "^2.1.2",
+    "howler": "^2.1.3",
+    "jellyfin-noto": "https://github.com/jellyfin/jellyfin-noto",
     "jquery": "^3.4.1",
     "jstree": "^3.3.7",
     "libass-wasm": "^2.1.1",
     "libjass": "^0.11.0",
     "material-design-icons-iconfont": "^5.0.1",
     "native-promise-only": "^0.8.0-a",
-    "requirejs": "^2.3.5",
     "resize-observer-polyfill": "^1.5.1",
-    "shaka-player": "^2.5.5",
+    "shaka-player": "^2.5.9",
-    "sortablejs": "^1.9.0",
+    "sortablejs": "^1.10.2",
-    "swiper": "^3.4.2",
+    "swiper": "^5.3.1",
     "webcomponents.js": "^0.7.24",
-    "whatwg-fetch": "^1.1.1"
+    "whatwg-fetch": "^3.0.0"
   },
   "browserslist": [
     "last 2 Firefox versions",
@@ -60,7 +60,7 @@
     "serve": "webpack-dev-server --config webpack.dev.js --open",
     "build": "webpack --config webpack.prod.js",
     "lint": "eslint \"src\"",
-    "stylelint": "stylelint src/**/*.css",
+    "stylelint": "stylelint \"src/**/*.css\"",
     "prepare": "webpack --config webpack.prod.js"
   }
 }

src/assets/css/fonts.css

@@ -1,29 +1,30 @@
 html {
-    font-family: -apple-system, "Helvetica", system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
+    font-family: "Noto Sans", sans-serif;
     font-size: 93%;
     -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
 }
 
 h1,
 h2,
 h3 {
-    /* For better bolding, since Helvetica does not support 500 weight, and 600 is too thick */
+    font-family: "Noto Sans", sans-serif;
-    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
 }
 
 h1 {
-    font-weight: 500;
+    font-weight: 400;
     font-size: 1.8em;
 }
 
 h2 {
-    font-weight: 500;
+    font-weight: 400;
     font-size: 1.5em;
 }
 
 h3 {
-    font-weight: 500;
+    font-weight: 400;
     font-size: 1.17em;
 }
 

src/assets/css/fonts.sized.css

@@ -1,5 +1,5 @@
 h1 {
-    font-weight: 500;
+    font-weight: 400;
     font-size: 1.8em;
 }
 
@@ -8,12 +8,12 @@ h1 {
 }
 
 h2 {
-    font-weight: 500;
+    font-weight: 400;
     font-size: 1.5em;
 }
 
 h3 {
-    font-weight: 500;
+    font-weight: 400;
     font-size: 1.17em;
 }
 

src/assets/css/librarybrowser.css

@@ -4,7 +4,7 @@
     vertical-align: middle;
 }
 
-.detailButton-mobile,
+.detailButton,
 .itemLinks,
 .listPaging,
 .sectionTabs,
@@ -124,13 +124,17 @@
     flex-shrink: 1;
 }
 
+.pageTitleWithDefaultLogo {
+    margin-top: 0;
+}
+
 .headerLeft,
 .skinHeader {
     display: -webkit-box;
     display: -webkit-flex;
 }
 
-.detailButton-mobile,
+.detailButton,
 .skinHeader {
     flex-direction: column;
     -webkit-flex-direction: column;
@@ -201,6 +205,7 @@
 
 .navMenuOptionText {
     white-space: nowrap;
+    margin-top: 0.25em;
 }
 
 .sidebarHeader {
@@ -219,6 +224,13 @@
     left: 0;
 }
 
+.centerMessage {
+    margin: auto;
+    width: 30%;
+    padding: 5em 0;
+    text-align: center;
+}
+
 .layout-desktop .searchTabButton,
 .layout-mobile .searchTabButton,
 .layout-tv .headerSearchButton {
@@ -264,7 +276,7 @@
 
 @media all and (max-width: 84em) {
     .withSectionTabs .headerTop {
-        padding-bottom: 0.2em;
+        padding-bottom: 0.55em;
     }
 
     .sectionTabs {
@@ -274,7 +286,7 @@
 
 @media all and (min-width: 84em) {
     .headerTop {
-        padding: 1.489em 0;
+        padding: 0.8em 0.8em;
     }
 
     .headerTabs {
@@ -287,9 +299,8 @@
         -webkit-box-pack: center;
         -webkit-justify-content: center;
         justify-content: center;
-        margin-top: -3.34em;
         position: relative;
-        top: -1.05em;
+        margin-top: -4.3em;
     }
 
     .libraryPage:not(.noSecondaryNavPage) {
@@ -432,6 +443,10 @@
     position: relative;
 }
 
+.personBackdrop {
+    background-size: contain;
+}
+
 .itemBackdropProgressBar {
     position: absolute !important;
     bottom: 0;
@@ -444,23 +459,74 @@
     bottom: 0.75em;
 }
 
+.parentName {
+    display: block;
+    margin-bottom: 0.5em;
+}
+
+.mainDetailButtons {
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    margin: 1em 0;
+}
+
+.detailButton,
+.mainDetailButtons {
+    display: flex;
+    display: -webkit-box;
+    display: -webkit-flex;
+}
+
+.itemName {
+    margin: 0.5em 0;
+}
+
+.itemMiscInfo {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+.layout-mobile .parentName,
+.layout-mobile .itemName,
+.layout-mobile .itemMiscInfo,
+.layout-mobile .mainDetailButtons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .detailPagePrimaryContainer {
     display: flex;
     align-items: center;
     align-content: center;
     position: sticky;
-    background-color: #101010;
+    top: 3.85em;
-    top: 0;
     z-index: 2;
 }
 
 .layout-mobile .detailPagePrimaryContainer {
     display: block;
     position: relative;
+    top: 0;
 }
 
 .layout-tv .detailPagePrimaryContainer {
     position: relative;
+    top: 0;
+}
+
+.detailSticky {
+    background-color: #101010;
 }
 
 .infoWrapper {
@@ -474,8 +540,15 @@
     text-align: left;
 }
 
+.layout-mobile .infoText {
+    white-space: normal;
+}
+
 .detailPageSecondaryContainer {
     margin: 1.25em 0;
+}
+
+.detailPageContent {
     display: flex;
     flex-direction: column;
     padding-left: 2%;
@@ -483,9 +556,8 @@
 }
 
 .detailImageContainer {
-    margin: 1.25em 0;
     position: sticky;
-    top: 15%;
+    top: 25%;
     float: left;
     width: 22.786458333333332vw;
 }
@@ -497,9 +569,6 @@
 
 .detailPagePrimaryContent {
     position: relative;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    flex-grow: 1;
 }
 
 .detailLogo {
@@ -542,8 +611,27 @@
     -webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
 }
 
+div.itemDetailGalleryLink.defaultCardBackground {
+    text-align: center;
+}
+
+.itemDetailGalleryLink.defaultCardBackground {
+    height: 23vw; /* Dirty hack to get it to look somewhat square. Less than ideal. */
+}
+
+.btnSyncComplete i {
+    -webkit-border-radius: 100em;
+    border-radius: 100em;
+}
+
+.itemDetailGalleryLink.defaultCardBackground > i {
+    font-size: 15vw;
+    margin-top: 50%;
+    transform: translateY(-50%);
+}
+
 @media all and (max-width: 62.5em) {
-    .detailPageContent {
+    .detailPageWrapperContainer {
         position: relative;
     }
 
@@ -558,20 +646,10 @@
     }
 }
 
-.parentName {
-    display: block;
-    margin-bottom: 0.5em;
-}
-
 .btnSyncComplete {
     background: #673ab7 !important;
 }
 
-.btnSyncComplete i {
-    -webkit-border-radius: 100em;
-    border-radius: 100em;
-}
-
 .emby-button.detailFloatingButton {
     position: absolute;
     background-color: rgba(0, 0, 0, 0.5) !important;
@@ -613,17 +691,6 @@
     }
 }
 
-.detailButton-mobile,
-.mainDetailButtons {
-    display: flex;
-    display: -webkit-box;
-    display: -webkit-flex;
-}
-
-.itemName {
-    margin: 0.5em 0;
-}
-
 .empty {
     margin: 0;
 }
@@ -636,16 +703,6 @@
     margin-top: 0;
 }
 
-.mainDetailButtons {
-    display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-    -webkit-flex-wrap: wrap;
-    flex-wrap: wrap;
-    margin: 1em 0;
-}
-
 .recordingFields button {
     margin-left: 0;
     margin-right: 0.5em;
@@ -657,7 +714,7 @@
     margin-top: 1.5em !important;
 }
 
-.detailButton-mobile {
+.detailButton {
     display: flex;
     flex-direction: column;
     -webkit-box-pack: center;
@@ -670,32 +727,28 @@
     padding: 0.5em 0.7em !important;
 }
 
-.detailButton {
-    margin: 0 0.5em 0 0 !important;
-}
-
 @media all and (min-width: 29em) {
-    .detailButton-mobile {
+    .detailButton {
         padding-left: 0.75em !important;
         padding-right: 0.75em !important;
     }
 }
 
 @media all and (min-width: 32em) {
-    .detailButton-mobile {
+    .detailButton {
         padding-left: 0.8em !important;
         padding-right: 0.8em !important;
     }
 }
 
 @media all and (min-width: 35em) {
-    .detailButton-mobile {
+    .detailButton {
         padding-left: 0.85em !important;
         padding-right: 0.85em !important;
     }
 }
 
-.detailButton-mobile-content {
+.detailButton-content {
     display: -webkit-box;
     display: -webkit-flex;
     display: flex;
@@ -711,18 +764,19 @@
     align-items: center;
 }
 
-.detailButton-mobile-icon {
+.detailButton-icon {
     font-size: 1.6em !important;
     width: 1em;
     height: 1em;
 }
 
 .detailImageProgressContainer {
-    margin-left: 6px;
+    position: absolute;
-    width: 21.886458333333332vw;
+    bottom: 0;
+    width: 22.786458333333332vw;
 }
 
-.detailButton-mobile-text {
+.detailButton-text {
     margin-top: 0.7em;
     font-size: 80%;
     font-weight: 400;
@@ -733,16 +787,34 @@
         margin-left: -0.5em;
     }
 
-    .detailButton {
+    .detailButtonHideonMobile {
         display: none !important;
     }
 }
 
 @media all and (min-width: 62.5em) {
+    .headerTop {
+        padding-left: 0.8em;
+        padding-right: 0.8em;
+    }
+
+    .headerTabs {
+        align-self: center;
+        width: auto;
+        align-items: center;
+        justify-content: center;
+        margin-top: -4.3em;
+        position: relative;
+    }
+
     .detailFloatingButton {
         display: none !important;
     }
 
+    .personBackdrop {
+        display: none !important;
+    }
+
     .mainDetailButtons {
         font-size: 108%;
         margin: 1.25em 0;
@@ -755,17 +827,6 @@
     }
 }
 
-.itemMiscInfo {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-}
-
 @media all and (max-width: 31.25em) {
     .mobileDetails .itemMiscInfo {
         text-align: center;
@@ -783,17 +844,11 @@
     margin-bottom: 3.4em !important;
 }
 
-.detailPageContent {
+.detailPageWrapperContainer {
     border-spacing: 0;
     border-collapse: collapse;
 }
 
-@media all and (max-width: 62.5em) {
-    .detailPageContent-nodetailimg {
-        padding-top: 0;
-    }
-}
-
 .mediaInfoStream {
     margin: 0 3em 0 0;
     display: inline-block;
@@ -843,16 +898,9 @@
     }
 }
 
-@media all and (max-width: 75em) {
+.listViewUserDataButtons {
-    .listViewUserDataButtons {
+    display: flex;
-        display: none !important;
+    align-items: center;
-    }
-}
-
-@media all and (max-width: 62.5em) {
-    .detailsHiddenOnMobile {
-        display: none;
-    }
 }
 
 .bulletSeparator {
@@ -946,7 +994,7 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 }
 
 .sectionTitleTextButton > .sectionTitle {
-    margin-bottom: 0;
+    margin-bottom: 0.35em;
     margin-top: 0;
 }
 
@@ -977,10 +1025,6 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 }
 
 @media all and (min-height: 31.25em) {
-    .padded-left-withalphapicker {
-        padding-left: 7.5%;
-    }
-
     .padded-right-withalphapicker {
         padding-right: 7.5%;
     }

src/assets/css/site.css

@@ -5,6 +5,11 @@ html {
     height: 100%;
 }
 
+.material-icons {
+    /* Fix font ligatures on older WebOS versions */
+    -webkit-font-feature-settings: "liga";
+}
+
 .backgroundContainer {
     position: fixed;
     top: 0;

src/assets/img/devices/android.svg

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M24 19H0a13.6 13.6 0 0 1 2.21-6.07A11.2 11.2 0 0 1 5.87 9.4l.41-.23-2.02-3.41a.51.51 0 0 1 .17-.7.5.5 0 0 1 .69.18l2.08 3.5a12.62 12.62 0 0 1 4.84-.9 12.2 12.2 0 0 1 4.75.9l2.07-3.5a.5.5 0 0 1 .7-.17.51.51 0 0 1 .16.7L17.7 9.19l.5.28a11.38 11.38 0 0 1 3.63 3.62A14.48 14.48 0 0 1 24 19zm-7.5-4.48a1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1 1 1 0 0 0-1 1zm-11 0a1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1 1 1 0 0 0-1 1z"/>
+    <path d="M24 19H0a13.6 13.6 0 0 1 2.21-6.07A11.2 11.2 0 0 1 5.87 9.4l.41-.23-2.02-3.41a.51.51 0 0 1 .17-.7.5.5 0 0 1 .69.18l2.08 3.5a12.62 12.62 0 0 1 4.84-.9 12.2 12.2 0 0 1 4.75.9l2.07-3.5a.5.5 0 0 1 .7-.17.51.51 0 0 1 .16.7L17.7 9.19l.5.28a11.38 11.38 0 0 1 3.63 3.62A14.48 14.48 0 0 1 24 19zm-7.5-4.48a1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1 1 1 0 0 0-1 1zm-11 0a1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1 1 1 0 0 0-1 1z" fill="#fff"/>
 </svg>

src/assets/img/fresh.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg id="svg3390" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="141.25" viewBox="0 0 138.75 141.25" width="138.75" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <metadata id="metadata3396">
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g id="layer1" fill="#f93208">
+  <path id="path3412" d="m20.154 40.829c-28.149 27.622-13.657 61.011-5.734 71.931 35.254 41.954 92.792 25.339 111.89-5.9071 4.7608-8.2027 22.554-53.467-23.976-78.009z"/>
+  <path id="path3471" d="m39.613 39.265 4.7778-8.8607 28.406-5.0384 11.119 9.2082z"/>
+ </g>
+ <g id="layer2">
+  <path id="path3437" d="m39.436 8.5696 8.9682-5.2826 6.7569 15.479c3.7925-6.3226 13.79-16.316 24.939-4.6684-4.7281 1.2636-7.5161 3.8553-7.7397 8.4768 15.145-4.1697 31.343 3.2127 33.539 9.0911-10.951-4.314-27.695 10.377-41.771 2.334 0.009 15.045-12.617 16.636-19.902 17.076 2.077-4.996 5.591-9.994 1.474-14.987-7.618 8.171-13.874 10.668-33.17 4.668 4.876-1.679 14.843-11.39 24.448-11.425-6.775-2.467-12.29-2.087-17.814-1.475 2.917-3.961 12.149-15.197 28.625-8.476z" fill="#02902e"/>
+ </g>
+</svg>

src/assets/img/rotten.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="145" height="140"><path fill="#0fc755" d="M47.4 35.342c-13.607-7.935-12.32-25.203 2.097-31.88 26.124-6.531 29.117 13.78 22.652 30.412-6.542 24.11 18.095 23.662 19.925 10.067 3.605-18.412 19.394-26.695 31.67-16.359 12.598 12.135 7.074 36.581-17.827 34.187-16.03-1.545-19.552 19.585.839 21.183 32.228 1.915 42.49 22.167 31.04 35.865-15.993 15.15-37.691-4.439-45.512-19.505-6.8-9.307-17.321.11-13.423 6.502 12.983 19.465 2.923 31.229-10.906 30.62-13.37-.85-20.96-9.06-13.214-29.15 3.897-12.481-8.595-15.386-16.57-5.45-11.707 19.61-28.865 13.68-33.976 4.19-3.243-7.621-2.921-25.846 24.119-23.696 16.688 4.137 11.776-12.561-.63-13.633-9.245-.443-30.501-7.304-22.86-24.54 7.34-11.056 24.958-11.768 33.348 6.293 3.037 4.232 8.361 11.042 18.037 5.033 3.51-5.197 1.21-13.9-8.809-20.135z"/></svg>

src/availableplugins.html

@@ -5,4 +5,4 @@
             <div id="pluginTiles" style="text-align:left;"></div>
         </div>
     </div>
-</div>
+</div>

src/bundle.js

@@ -47,12 +47,6 @@ _define("howler", function() {
     return howler;
 });
 
-// native-promise-only
-var nativePromise = require("native-promise-only");
-_define("native-promise-only", function() {
-    return nativePromise;
-});
-
 // resize-observer-polyfill
 var resize = require("resize-observer-polyfill").default;
 _define("resize-observer-polyfill", function() {
@@ -66,8 +60,8 @@ _define("shaka", function() {
 });
 
 // swiper
-var swiper = require("swiper");
+var swiper = require("swiper/js/swiper");
-require("swiper/dist/css/swiper.min.css");
+require("swiper/css/swiper.min.css");
 _define("swiper", function() {
     return swiper;
 });
@@ -102,3 +96,8 @@ var material_icons = require("material-design-icons-iconfont/dist/material-desig
 _define("material-icons", function() {
     return material_icons;
 });
+
+var jellyfin_noto = require("jellyfin-noto");
+_define("jellyfin-noto", function () {
+    return jellyfin_noto;
+});

src/components/accessschedule/accessschedule.template.html

@@ -1,6 +1,6 @@
 <div class="formDialogHeader">
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-        <i class="material-icons">arrow_back</i>
+        <i class="material-icons arrow_back"></i>
     </button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderAccessSchedule}

src/components/actionsheet/actionsheet.js

@@ -158,7 +158,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-bu
         }
 
         if (layoutManager.tv) {
-            html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="material-icons">arrow_back</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
         }
 
         // If any items have an icon, give them all an icon just to make sure they're all lined up evenly

src/components/alert.js

@@ -42,4 +42,4 @@ define(['browser', 'dialog', 'globalize'], function (browser, dialog, globalize)
 
         return Promise.resolve();
     };
-});
+});

src/components/alphanumericshortcuts/alphanumericshortcuts.js

@@ -10,7 +10,7 @@ define(['dom', 'focusManager'], function (dom, focusManager) {
         if (e.ctrlKey) {
             return;
         }
-        if (!!e.shiftKey) {
+        if (e.shiftKey) {
             return;
         }
         if (e.altKey) {
@@ -127,4 +127,4 @@ define(['dom', 'focusManager'], function (dom, focusManager) {
     };
 
     return AlphaNumericShortcuts;
-});
+});

src/components/alphapicker/alphapicker.js

@@ -67,7 +67,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
 
         html += '<div class="' + rowClassName + '">';
         if (options.mode === 'keyboard') {
-            html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="material-icons alphaPickerButtonIcon">space_bar</i></button>';
+            html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="material-icons alphaPickerButtonIcon space_bar"></i></button>';
         } else {
             letters = ['#'];
             html += mapLetters(letters, vertical).join('');
@@ -241,7 +241,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
                     try {
                         btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']');
                     } catch (err) {
-                        console.log('Error in querySelector: ' + err);
+                        console.error('error in querySelector: ' + err);
                     }
 
                     if (btn && btn !== selected) {

src/components/alphapicker/style.css

@@ -107,19 +107,11 @@
     bottom: 1%;
 }
 
-.alphaPicker-fixed-left {
-    left: 0.4em;
-}
-
 .alphaPicker-fixed-right {
     right: 0.4em;
 }
 
 @media all and (min-width: 62.5em) {
-    .alphaPicker-fixed-left {
-        left: 1em;
-    }
-
     .alphaPicker-fixed-right {
         right: 1em;
     }

src/components/appRouter.js

@@ -14,6 +14,9 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
         },
         showSettings: function () {
             show('/settings/settings.html');
+        },
+        showNowPlaying: function () {
+            show("/nowplaying.html");
         }
     };
 
@@ -387,13 +390,13 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
         var apiClient = connectionManager.currentApiClient();
         var pathname = ctx.pathname.toLowerCase();
 
-        console.log('appRouter - processing path request ' + pathname);
+        console.debug('appRouter - processing path request ' + pathname);
 
         var isCurrentRouteStartup = currentRouteInfo ? currentRouteInfo.route.startup : true;
         var shouldExitApp = ctx.isBack && route.isDefaultRoute && isCurrentRouteStartup;
 
         if (!shouldExitApp && (!apiClient || !apiClient.isLoggedIn()) && !route.anonymous) {
-            console.log('appRouter - route does not allow anonymous access, redirecting to login');
+            console.debug('appRouter - route does not allow anonymous access, redirecting to login');
             beginConnectionWizard();
             return;
         }
@@ -408,10 +411,10 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
 
         if (apiClient && apiClient.isLoggedIn()) {
 
-            console.log('appRouter - user is authenticated');
+            console.debug('appRouter - user is authenticated');
 
             if (route.isDefaultRoute) {
-                console.log('appRouter - loading skin home page');
+                console.debug('appRouter - loading skin home page');
                 loadUserSkinWithOptions(ctx);
                 return;
             } else if (route.roles) {
@@ -425,7 +428,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
             }
         }
 
-        console.log('appRouter - proceeding to ' + pathname);
+        console.debug('appRouter - proceeding to ' + pathname);
         callback();
     }
 
@@ -545,13 +548,18 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
         page.back();
     }
 
+    /**
+     * Pages of "no return" (when "Go back" should behave differently, probably quitting the application).
+     */
+    var startPages = ['home', 'login', 'selectserver'];
+
     function canGoBack() {
         var curr = current();
         if (!curr) {
             return false;
         }
 
-        if (curr.type === 'home') {
+        if (!document.querySelector('.dialogContainer') && startPages.indexOf(curr.type) !== -1) {
             return false;
         }
         return page.canGoBack();
@@ -667,7 +675,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
             baseRoute = baseRoute.substring(0, baseRoute.length - 1);
         }
 
-        console.log('Setting page base to ' + baseRoute);
+        console.debug('setting page base to ' + baseRoute);
         page.base(baseRoute);
     }
 

src/components/appfooter/appfooter.js

@@ -2,24 +2,18 @@ define(['browser', 'css!./appfooter'], function (browser) {
     'use strict';
 
     function render(options) {
-
         var elem = document.createElement('div');
-
         elem.classList.add('appfooter');
 
-        elem.classList.add('appfooter-blurred');
-
         document.body.appendChild(elem);
 
         return elem;
     }
 
     function appFooter(options) {
-
         var self = this;
 
         self.element = render(options);
-
         self.add = function (elem) {
             self.element.appendChild(elem);
         };

src/components/apphost.js

@@ -104,7 +104,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
 
     function getDeviceName() {
         var deviceName;
-        deviceName = browser.tizen ? "Samsung Smart TV" : browser.web0s ? "LG Smart TV" : browser.operaTv ? "Opera TV" : browser.xboxOne ? "Xbox One" : browser.ps4 ? "Sony PS4" : browser.chrome ? "Chrome" : browser.edge ? "Edge" : browser.firefox ? "Firefox" : browser.msie ? "Internet Explorer" : browser.opera ? "Opera" : "Web Browser";
+        deviceName = browser.tizen ? "Samsung Smart TV" : browser.web0s ? "LG Smart TV" : browser.operaTv ? "Opera TV" : browser.xboxOne ? "Xbox One" : browser.ps4 ? "Sony PS4" : browser.chrome ? "Chrome" : browser.edge ? "Edge" : browser.firefox ? "Firefox" : browser.msie ? "Internet Explorer" : browser.opera ? "Opera" : browser.safari ? "Safari" : "Web Browser";
 
         if (browser.ipad) {
             deviceName += " iPad";
@@ -186,7 +186,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
 
             return !!cue.length;
         } catch (err) {
-            console.log("error detecting cue support: " + err);
+            console.error("error detecting cue support: " + err);
             return false;
         }
     }
@@ -194,7 +194,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
     function onAppVisible() {
         if (isHidden) {
             isHidden = false;
-            console.log("triggering app resume event");
+            console.debug("triggering app resume event");
             events.trigger(appHost, "resume");
         }
     }
@@ -202,7 +202,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
     function onAppHidden() {
         if (!isHidden) {
             isHidden = true;
-            console.log("app is hidden");
+            console.debug("app is hidden");
         }
     }
 
@@ -299,6 +299,52 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
         return features;
     }();
 
+    /**
+      * Do exit according to platform
+      */
+    function doExit() {
+        try {
+            if (window.NativeShell) {
+                window.NativeShell.AppHost.exit();
+            } else if (browser.tizen) {
+                tizen.application.getCurrentApplication().exit();
+            } else if (browser.web0s) {
+                webOS.platformBack();
+            } else {
+                window.close();
+            }
+        } catch (err) {
+            console.error("error closing application: " + err);
+        }
+    }
+
+    var exitPromise;
+
+    /**
+      * Ask user for exit
+      */
+    function askForExit() {
+        if (exitPromise) {
+            return;
+        }
+
+        require(["actionsheet"], function (actionsheet) {
+            exitPromise = actionsheet.show({
+                title: Globalize.translate("MessageConfirmAppExit"),
+                items: [
+                    {id: "yes", name: Globalize.translate("Yes")},
+                    {id: "no", name: Globalize.translate("No")}
+                ]
+            }).then(function (value) {
+                if (value === "yes") {
+                    doExit();
+                }
+            }).finally(function () {
+                exitPromise = null;
+            });
+        });
+    }
+
     var deviceId;
     var deviceName;
     var appName = "Jellyfin Web";
@@ -314,16 +360,10 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
             alert("setWindowState is not supported and should not be called");
         },
         exit: function () {
-            if (window.NativeShell) {
+            if (!!window.appMode && browser.tizen) {
-                window.NativeShell.AppHost.exit();
+                askForExit();
-            } else if (browser.tizen) {
-                try {
-                    tizen.application.getCurrentApplication().exit();
-                } catch (err) {
-                    console.log("error closing application: " + err);
-                }
             } else {
-                window.close();
+                doExit();
             }
         },
         supports: function (command) {
@@ -334,7 +374,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
             return -1 !== supportedFeatures.indexOf(command.toLowerCase());
         },
         preferVisualCards: browser.android || browser.chrome,
-        moreIcon: browser.android ? "dots-vert" : "dots-horiz",
+        moreIcon: browser.android ? "more_vert" : "more_horiz",
         getSyncProfile: getSyncProfile,
         getDefaultLayout: function () {
             if (window.NativeShell) {

src/components/autoFocuser.js

@@ -25,7 +25,7 @@ define(["focusManager", "layoutManager"], function (focusManager, layoutManager)
             activeElement = e.target;
         });
 
-        console.log("AutoFocuser enabled");
+        console.debug("AutoFocuser enabled");
     }
 
     /**

src/components/cardbuilder/card.css

@@ -370,13 +370,13 @@ button::-moz-focus-inner {
     text-align: center;
 }
 
-.cardImageIcon {
+.cardImageContainer .cardImageIcon {
     font-size: 5em;
     color: inherit;
 }
 
 .cardImageIcon-small {
-    font-size: 3em;
+    font-size: 3em !important;
     margin-bottom: 0.1em;
 }
 
@@ -725,7 +725,7 @@ button::-moz-focus-inner {
 @media (min-width: 120em) {
     .overflowSquareCard,
     .overflowPortraitCard {
-        width: 10.3vw;
+        width: 10.41vw;
     }
 }
 

src/components/cardbuilder/cardBuilder.js

@@ -140,7 +140,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                         }
                         return 100 / 72;
                     }
-                    break;
                 case 'overflowPortrait':
 
                     if (layoutManager.tv) {
@@ -166,7 +165,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                         }
                         return 100 / 42;
                     }
-                    break;
                 case 'overflowSquare':
                     if (layoutManager.tv) {
                         return 100 / 15.5;
@@ -191,7 +189,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                         }
                         return 100 / 42;
                     }
-                    break;
                 case 'overflowBackdrop':
                     if (layoutManager.tv) {
                         return 100 / 23.3;
@@ -216,7 +213,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                         }
                         return 100 / 72;
                     }
-                    break;
                 default:
                     return 4;
             }
@@ -342,7 +338,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                             try {
                                 newIndexValue = datetime.toLocaleDateString(datetime.parseISO8601Date(item.PremiereDate), { weekday: 'long', month: 'long', day: 'numeric' });
                             } catch (err) {
-                                console.log('error parsing timestamp for premiere date');
+                                console.error('error parsing timestamp for premiere date');
                             }
                         }
                     } else if (options.indexBy === 'ProductionYear') {
@@ -738,7 +734,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                         airTimeText += ' - ' + datetime.getDisplayTime(date);
                     }
                 } catch (e) {
-                    console.log("Error parsing date: " + item.StartDate);
+                    console.error("error parsing date: " + item.StartDate);
                 }
             }
 
@@ -758,7 +754,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             if (isOuterFooter && options.cardLayout && layoutManager.mobile) {
 
                 if (options.cardFooterAside !== 'none') {
-                    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><i class="material-icons">more_horiz</i></button>';
+                    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><i class="material-icons more_horiz"></i></button>';
                 }
             }
 
@@ -870,9 +866,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                     if (item.PremiereDate) {
                         try {
-
+                            lines.push(datetime.toLocaleDateString(
-                            lines.push(getPremiereDateText(item));
+                                datetime.parseISO8601Date(item.PremiereDate),
-
+                                { weekday: 'long', month: 'long', day: 'numeric' }
+                            ));
                         } catch (err) {
                             lines.push('');
 
@@ -1316,15 +1313,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 var btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction';
 
                 if (options.centerPlayButton) {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="material-icons cardOverlayButtonIcon">play_arrow</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="material-icons cardOverlayButtonIcon play_arrow"></i></button>';
                 }
 
                 if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType !== 'Virtual' || !item.MediaType || item.Type === 'Program') && item.Type !== 'Person') {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><i class="material-icons cardOverlayButtonIcon">play_arrow</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><i class="material-icons cardOverlayButtonIcon play_arrow"></i></button>';
                 }
 
                 if (options.overlayMoreButton) {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="material-icons cardOverlayButtonIcon">more_horiz</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="material-icons cardOverlayButtonIcon more_horiz"></i></button>';
                 }
             }
 
@@ -1383,7 +1380,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             }
 
             if (item.Type === 'CollectionFolder' || item.CollectionType) {
-                var refreshClass = item.RefreshProgress || (item.RefreshStatus && virtualFolder.item !== 'Idle') ? '' : ' class="hide"';
+                var refreshClass = item.RefreshProgress ? '' : ' class="hide"';
                 indicatorsHtml += '<div is="emby-itemrefreshindicator"' + refreshClass + ' data-progress="' + (item.RefreshProgress || 0) + '" data-status="' + item.RefreshStatus + '"></div>';
                 requireRefreshIndicator();
             }
@@ -1397,7 +1394,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             //}
 
             if (!imgUrl) {
-                cardImageContainerOpen += getCardDefaultText(item, options);
+                cardImageContainerOpen += getDefaultText(item, options);
             }
 
             var tagName = (layoutManager.tv) && !overlayButtons ? 'button' : 'div';
@@ -1457,7 +1454,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
 
             if (playbackManager.canPlay(item)) {
-                html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">play_arrow</i></button>';
+                html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover play_arrow"></i></button>';
             }
 
             html += '<div class="cardOverlayButton-br">';
@@ -1477,7 +1474,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">favorite</i></button>';
             }
 
-            html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">more_horiz</i></button>';
+            html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_horiz"></i></button>';
 
             html += '</div>';
             html += '</div>';
@@ -1485,17 +1482,28 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             return html;
         }
 
-        function getCardDefaultText(item, options) {
+        function getDefaultText(item, options) {
             if (item.CollectionType) {
                 return '<i class="cardImageIcon material-icons">' + imageHelper.getLibraryIcon(item.CollectionType) + '</i>'
             }
-            if (item.Type === 'MusicAlbum') {
+
-                return '<i class="cardImageIcon material-icons">album</i>';
+            switch (item.Type) {
+                case 'MusicAlbum':
+                    return '<i class="cardImageIcon material-icons">album</i>';
+                case 'MusicArtist':
+                case 'Person':
+                    return '<i class="cardImageIcon material-icons">person</i>';
+                case 'Movie':
+                    return '<i class="cardImageIcon material-icons">movie</i>';
+                case 'Series':
+                    return '<i class="cardImageIcon material-icons">tv</i>';
+                case 'Book':
+                    return '<i class="cardImageIcon material-icons">book</i>';
+                case 'Folder':
+                    return '<i class="cardImageIcon material-icons">folder</i>';
             }
-            if (item.Type === 'MusicArtist' || item.Type === 'Person') {
+
-                return '<i class="cardImageIcon material-icons">person</i>';
+            if (options && options.defaultCardImageIcon) {
-            }
-            if (options.defaultCardImageIcon) {
                 return '<i class="cardImageIcon material-icons">' + options.defaultCardImageIcon + '</i>';
             }
 
@@ -1666,7 +1674,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 var icon = cell.querySelector('.timerIndicator');
                 if (!icon) {
                     var indicatorsElem = ensureIndicators(cell);
-                    indicatorsElem.insertAdjacentHTML('beforeend', '<i class="material-icons timerIndicator indicatorIcon">fiber_manual_record</i>');
+                    indicatorsElem.insertAdjacentHTML('beforeend', '<i class="material-icons timerIndicator indicatorIcon fiber_manual_record"></i>');
                 }
                 cell.setAttribute('data-timerid', newTimerId);
             }
@@ -1702,6 +1710,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
         return {
             getCardsHtml: getCardsHtml,
+            getDefaultBackgroundClass: getDefaultBackgroundClass,
+            getDefaultText: getDefaultText,
             buildCards: buildCards,
             onUserDataChanged: onUserDataChanged,
             onTimerCreated: onTimerCreated,

src/components/cardbuilder/chaptercardbuilder.js

@@ -90,7 +90,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
         var cardImageContainer = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
 
         if (!imgUrl) {
-            cardImageContainer += '<i class="material-icons cardImageIcon">local_movies</i>';
+            cardImageContainer += '<i class="material-icons cardImageIcon local_movies"></i>';
         }
 
         var nameHtml = '';

src/components/channelmapper/channelmapper.js

@@ -84,7 +84,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee
 
             html += "</div>";
             html += "</div>";
-            html += '<button class="btnMap autoSize" is="paper-icon-button-light" type="button" data-id="' + channel.Id + '" data-providerid="' + channel.ProviderChannelId + '"><i class="material-icons">mode_edit</i></button>';
+            html += '<button class="btnMap autoSize" is="paper-icon-button-light" type="button" data-id="' + channel.Id + '" data-providerid="' + channel.ProviderChannelId + '"><i class="material-icons mode_edit"></i></button>';
             return html += "</div>";
         }
 
@@ -127,7 +127,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee
             var html = "";
             var title = globalize.translate("MapChannels");
             html += '<div class="formDialogHeader">';
-            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
             html += '<h3 class="formDialogHeaderTitle">';
             html += title;
             html += "</h3>";

src/components/chromecast/chromecasthelpers.js

@@ -131,8 +131,9 @@ define(['events'], function (events) {
                 var links = [];
                 var match;
 
+                // eslint-disable-next-line no-cond-assign
                 while (match = linkRegExp.exec(text)) {
-                    // console.log(matches);
+                    console.debug(match);
                     var txt = match[0];
                     var pos = match.index;
                     var len = txt.length;
@@ -189,7 +190,7 @@ define(['events'], function (events) {
                 return apiClient.getPublicSystemInfo().then(function (info) {
                     var localAddress = info.LocalAddress
                     if (!localAddress) {
-                        console.log("No valid local address returned, defaulting to external one")
+                        console.debug("No valid local address returned, defaulting to external one")
                         localAddress = serverAddress;
                     }
                     addToCache(serverAddress, localAddress);
@@ -230,4 +231,4 @@ define(['events'], function (events) {
     return {
         getServerAddress: getServerAddress
     };
-});
+});

src/components/chromecast/chromecastplayer.js

@@ -105,7 +105,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
             this.sessionListener.bind(this),
             this.receiverListener.bind(this));
 
-        console.log('chromecast.initialize');
+        console.debug('chromecast.initialize');
         chrome.cast.initialize(apiConfig, this.onInitSuccess.bind(this), this.errorHandler);
     };
 
@@ -114,14 +114,14 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
      */
     CastPlayer.prototype.onInitSuccess = function () {
         this.isInitialized = true;
-        console.log("chromecast init success");
+        console.debug("chromecast init success");
     };
 
     /**
      * Generic error callback function
      */
     CastPlayer.prototype.onError = function () {
-        console.log("chromecast error");
+        console.debug("chromecast error");
     };
 
     /**
@@ -177,10 +177,10 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
      */
     CastPlayer.prototype.receiverListener = function (e) {
         if (e === 'available') {
-            console.log("chromecast receiver found");
+            console.debug("chromecast receiver found");
             this.hasReceivers = true;
         } else {
-            console.log("chromecast receiver list empty");
+            console.debug("chromecast receiver list empty");
             this.hasReceivers = false;
         }
     };
@@ -190,7 +190,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
      */
     CastPlayer.prototype.sessionUpdateListener = function (isAlive) {
         if (isAlive) {
-            console.log('sessionUpdateListener: already alive');
+            console.debug('sessionUpdateListener: already alive');
         } else {
             this.session = null;
             this.deviceState = DEVICE_STATE.IDLE;
@@ -198,7 +198,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
             document.removeEventListener("volumeupbutton", onVolumeUpKeyDown, false);
             document.removeEventListener("volumedownbutton", onVolumeDownKeyDown, false);
 
-            console.log('sessionUpdateListener: setting currentMediaSession to null');
+            console.debug('sessionUpdateListener: setting currentMediaSession to null');
             this.currentMediaSession = null;
 
             sendConnectionResult(false);
@@ -211,7 +211,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
      * session request in opt_sessionRequest.
      */
     CastPlayer.prototype.launchApp = function () {
-        console.log("chromecast launching app...");
+        console.debug("chromecast launching app...");
         chrome.cast.requestSession(this.onRequestSessionSuccess.bind(this), this.onLaunchError.bind(this));
     };
 
@@ -220,7 +220,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
      * @param {Object} e A chrome.cast.Session object
      */
     CastPlayer.prototype.onRequestSessionSuccess = function (e) {
-        console.log("chromecast session success: " + e.sessionId);
+        console.debug("chromecast session success: " + e.sessionId);
         this.onSessionConnected(e);
     };
 
@@ -262,7 +262,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
      * Callback function for launch error
      */
     CastPlayer.prototype.onLaunchError = function () {
-        console.log("chromecast launch error");
+        console.debug("chromecast launch error");
         this.deviceState = DEVICE_STATE.ERROR;
         sendConnectionResult(false);
     };
@@ -280,7 +280,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
      * Callback function for stop app success
      */
     CastPlayer.prototype.onStopAppSuccess = function (message) {
-        console.log(message);
+        console.debug(message);
 
         this.deviceState = DEVICE_STATE.IDLE;
         this.castPlayerState = PLAYER_STATE.IDLE;
@@ -296,7 +296,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
      */
     CastPlayer.prototype.loadMedia = function (options, command) {
         if (!this.session) {
-            console.log("no session");
+            console.debug("no session");
             return Promise.reject();
         }
 
@@ -377,7 +377,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
     };
 
     CastPlayer.prototype.onPlayCommandSuccess = function () {
-        //console.log('Message was sent to receiver ok.');
+        console.debug('Message was sent to receiver ok.');
     };
 
     /**
@@ -386,7 +386,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
      */
     CastPlayer.prototype.onMediaDiscovered = function (how, mediaSession) {
 
-        //console.log("chromecast new media session ID:" + mediaSession.mediaSessionId + ' (' + how + ')');
+        console.debug("chromecast new media session ID:" + mediaSession.mediaSessionId + ' (' + how + ')');
         this.currentMediaSession = mediaSession;
 
         if (how === 'loadMedia') {
@@ -405,7 +405,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
      * @param {!Boolean} e true/false
      */
     CastPlayer.prototype.onMediaStatusUpdate = function (e) {
-        //console.log("chromecast updating media: " + e);
+        console.debug("chromecast updating media: " + e);
         if (e === false) {
             this.castPlayerState = PLAYER_STATE.IDLE;
         }
@@ -417,7 +417,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
      */
     CastPlayer.prototype.setReceiverVolume = function (mute, vol) {
         if (!this.currentMediaSession) {
-            //console.log('this.currentMediaSession is null');
+            console.debug('this.currentMediaSession is null');
             return;
         }
 
@@ -443,7 +443,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
      * Callback function for media command success
      */
     CastPlayer.prototype.mediaCommandSuccessCallback = function (info, e) {
-        //console.log(info);
+        console.debug(info);
     };
 
     function normalizeImages(state) {
@@ -493,7 +493,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
 
         events.on(instance._castPlayer, eventName, function (e, data) {
 
-            //console.log('cc: ' + eventName);
+            console.debug('cc: ' + eventName);
             var state = instance.getPlayerStateInternal(data);
 
             events.trigger(instance, eventName, [state]);
@@ -520,14 +520,14 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
                 playbackManager.setActivePlayer(PlayerName, instance.getCurrentTargetInfo());
             }
 
-            console.log('cc: connect');
+            console.debug('cc: connect');
             // Reset this so that statechange will fire
             instance.lastPlayerData = null;
         });
 
         events.on(instance._castPlayer, "playbackstart", function (e, data) {
 
-            console.log('cc: playbackstart');
+            console.debug('cc: playbackstart');
 
             instance._castPlayer.initializeCastPlayer();
 
@@ -537,7 +537,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
 
         events.on(instance._castPlayer, "playbackstop", function (e, data) {
 
-            console.log('cc: playbackstop');
+            console.debug('cc: playbackstop');
             var state = instance.getPlayerStateInternal(data);
 
             events.trigger(instance, "playbackstop", [state]);
@@ -555,7 +555,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
 
         events.on(instance._castPlayer, "playbackprogress", function (e, data) {
 
-            //console.log('cc: positionchange');
+            console.debug('cc: positionchange');
             var state = instance.getPlayerStateInternal(data);
 
             events.trigger(instance, "timeupdate", [state]);
@@ -569,7 +569,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
 
         events.on(instance._castPlayer, "playstatechange", function (e, data) {
 
-            //console.log('cc: playstatechange');
+            console.debug('cc: playstatechange');
             var state = instance.getPlayerStateInternal(data);
 
             events.trigger(instance, "pause", [state]);
@@ -664,7 +664,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
 
         normalizeImages(data);
 
-        //console.log(JSON.stringify(data));
+        console.debug(JSON.stringify(data));
 
         if (triggerStateChange) {
             events.trigger(this, "statechange", [data]);
@@ -686,6 +686,13 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
             });
         }
 
+        if (options.items.length > 1 && options && options.ids) {
+            // Use the original request id array for sorting the result in the proper order
+            options.items.sort(function (a, b) {
+                return options.ids.indexOf(a.Id) - options.ids.indexOf(b.Id);
+            });
+        }
+
         return this._castPlayer.loadMedia(options, command);
     };
 

src/components/collectioneditor/collectioneditor.js

@@ -243,7 +243,7 @@ define(['dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManage
         var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection');
 
         html += '<div class="formDialogHeader">';
-        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>';
+        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
         html += '<h3 class="formDialogHeaderTitle">';
         html += title;
         html += '</h3>';

src/components/confirm/nativeconfirm.js

@@ -24,4 +24,4 @@ define([], function () {
             return Promise.reject();
         }
     };
-});
+});

src/components/dialog/dialog.template.html

@@ -12,4 +12,4 @@
 </div>
 
 <div class="formDialogFooter formDialogFooter-clear formDialogFooter-flex" style="padding-bottom: 1.5em;">
-</div>
+</div>

src/components/dialogHelper/dialogHelper.js

@@ -32,7 +32,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
             try {
                 parentNode.removeChild(elem);
             } catch (err) {
-                console.log('Error removing dialog element: ' + err);
+                console.error('error removing dialog element: ' + err);
             }
         }
     }
@@ -481,4 +481,4 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
             globalOnOpenCallback = val;
         }
     };
-});
+});

src/components/directorybrowser/directorybrowser.js

@@ -76,7 +76,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
         html += name;
         html += "</div>";
         html += "</div>";
-        html += '<i class="material-icons" style="font-size:inherit;">arrow_forward</i>';
+        html += '<i class="material-icons arrow_forward" style="font-size:inherit;"></i>';
         html += "</div>";
         return html;
     }
@@ -265,7 +265,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
 
                     var html = "";
                     html += '<div class="formDialogHeader">';
-                    html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>';
+                    html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
                     html += '<h3 class="formDialogHeaderTitle">';
                     html += options.header || Globalize.translate("HeaderSelectPath");
                     html += "</h3>";

src/components/displaysettings/displaysettings.js

@@ -180,6 +180,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
 
         context.querySelector('#chkThemeSong').checked = userSettings.enableThemeSongs();
         context.querySelector('#chkThemeVideo').checked = userSettings.enableThemeVideos();
+        context.querySelector('#chkFadein').checked = userSettings.enableFastFadein();
         context.querySelector('#chkBackdrops').checked = userSettings.enableBackdrops();
 
         context.querySelector('#selectLanguage').value = userSettings.language() || '';
@@ -216,6 +217,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
 
         userSettingsInstance.skin(context.querySelector('.selectSkin').value);
 
+        userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked);
         userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked);
 
         if (user.Id === apiClient.getCurrentUserId()) {

src/components/displaysettings/displaysettings.template.html

@@ -3,6 +3,7 @@
     <h2 class="sectionTitle">
         ${Display}
     </h2>
+
     <div class="selectContainer languageSection hide">
         <select id="selectLanguage" is="emby-select" label="${LabelDisplayLanguage}">
             <option value="">${Auto}</option>
@@ -133,6 +134,7 @@
     <div class="selectContainer selectDashboardThemeContainer hide">
         <select id="selectDashboardTheme" is="emby-select" label="${LabelDashboardTheme}"></select>
     </div>
+
     <div class="selectContainer hide selectScreensaverContainer">
         <select is="emby-select" class="selectScreensaver" label="${LabelScreensaver}"></select>
     </div>
@@ -141,6 +143,14 @@
         <select is="emby-select" class="selectSoundEffects" label="${LabelSoundEffects}"></select>
     </div>
 
+    <div class="checkboxContainer checkboxContainer-withDescription fldFadein">
+        <label>
+            <input type="checkbox" is="emby-checkbox" id="chkFadein" />
+            <span>${EnableFastImageFadeIn}</span>
+        </label>
+        <div class="fieldDescription checkboxFieldDescription">${EnableFastImageFadeInHelp}</div>
+    </div>
+
     <div class="checkboxContainer checkboxContainer-withDescription fldBackdrops hide">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkBackdrops" />
@@ -148,6 +158,7 @@
         </label>
         <div class="fieldDescription checkboxFieldDescription">${EnableBackdropsHelp}</div>
     </div>
+
     <div class="checkboxContainer checkboxContainer-withDescription fldThemeSong hide">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkThemeSong" />
@@ -155,6 +166,7 @@
         </label>
         <div class="fieldDescription checkboxFieldDescription">${EnableThemeSongsHelp}</div>
     </div>
+
     <div class="checkboxContainer checkboxContainer-withDescription fldThemeVideo hide">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkThemeVideo" />

src/components/dom.js

@@ -63,13 +63,14 @@ define([], function () {
     var supportsCaptureOption = false;
     try {
         var opts = Object.defineProperty({}, 'capture', {
+            // eslint-disable-next-line getter-return
             get: function () {
                 supportsCaptureOption = true;
             }
         });
         window.addEventListener("test", null, opts);
     } catch (e) {
-        console.log('error checking capture support');
+        console.debug('error checking capture support');
     }
 
     function addEventListenerWithOptions(target, type, handler, options) {
@@ -178,4 +179,4 @@ define([], function () {
         whichAnimationEvent: whichAnimationEvent,
         whichAnimationCancelEvent: whichAnimationCancelEvent
     };
-});
+});

src/components/emby-itemrefreshindicator/emby-itemrefreshindicator.js

@@ -74,4 +74,4 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl
         prototype: EmbyItemRefreshIndicatorPrototype,
         extends: 'div'
     });
-});
+});

src/components/emby-itemscontainer/emby-itemscontainer.js

@@ -467,7 +467,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
                     focusManager.focus(newElement);
                     return;
                 } catch (err) {
-                    console.log(err);
+                    console.error(err);
                 }
             }
         }
@@ -479,4 +479,4 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
         prototype: ItemsContainerPrototype,
         extends: 'div'
     });
-});
+});

src/components/emby-scrollbuttons/emby-scrollbuttons.js

@@ -7,7 +7,7 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
 
     function getScrollButtonHtml(direction) {
         var html = '';
-        var icon = direction === 'left' ? 'chevron_left' : 'chevron_right';
+        var icon = direction === 'left' ? '' : '';
 
         html += '<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="' + direction + '" class="emby-scrollbuttons-button">';
         html += '<i class="material-icons">' + icon + '</i>';

src/components/emby-scroller/emby-scroller.css

@@ -13,6 +13,11 @@
     margin-right: 1.2em;
 }
 
+.servers > .card > .cardBox {
+    margin-left: 0.6em;
+    margin-right: 0.6em;
+}
+
 .layout-tv .emby-scroller,
 .layout-mobile .emby-scroller {
     padding-left: 3.3%;

src/components/emby-scroller/emby-scroller.js

@@ -206,4 +206,4 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
         prototype: ScrollerPrototype,
         extends: 'div'
     });
-});
+});

src/components/emby-tabs/emby-tabs.css

@@ -1,4 +1,7 @@
 .emby-tab-button {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
     background: transparent;
     box-shadow: none;
     cursor: pointer;
@@ -10,7 +13,7 @@
     vertical-align: middle;
     flex-shrink: 0;
     margin: 0;
-    padding: 1em 0.9em;
+    padding: 1.5em;
     position: relative;
     height: auto;
     min-width: initial;
@@ -31,6 +34,10 @@
     overflow: hidden;
 }
 
+.layout-mobile .emby-tabs-slider {
+    overflow: auto;
+}
+
 .tabContent:not(.is-active) {
     display: none;
 }

src/components/emby-tabs/emby-tabs.js

@@ -338,4 +338,4 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register
         prototype: EmbyTabs,
         extends: 'div'
     });
-});
+});

src/components/favoriteitems.js

@@ -136,7 +136,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
                     html += '<h2 class="sectionTitle sectionTitle-cards">';
                     html += globalize.translate(section.name);
                     html += "</h2>";
-                    html += '<i class="material-icons">chevron_right</i>';
+                    html += '<i class="material-icons chevron_right"></i>';
                     html += "</a>";
                 } else {
                     html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + "</h2>";

src/components/fetchhelper.js

@@ -51,7 +51,7 @@ define([], function () {
 
     function fetchWithTimeout(url, options, timeoutMs) {
 
-        console.log('fetchWithTimeout: timeoutMs: ' + timeoutMs + ', url: ' + url);
+        console.debug('fetchWithTimeout: timeoutMs: ' + timeoutMs + ', url: ' + url);
 
         return new Promise(function (resolve, reject) {
 
@@ -63,14 +63,14 @@ define([], function () {
             fetch(url, options).then(function (response) {
                 clearTimeout(timeout);
 
-                console.log('fetchWithTimeout: succeeded connecting to url: ' + url);
+                console.debug('fetchWithTimeout: succeeded connecting to url: ' + url);
 
                 resolve(response);
             }, function (error) {
 
                 clearTimeout(timeout);
 
-                console.log('fetchWithTimeout: timed out connecting to url: ' + url);
+                console.debug('fetchWithTimeout: timed out connecting to url: ' + url);
 
                 reject();
             });
@@ -93,21 +93,17 @@ define([], function () {
     }
 
     function ajax(request) {
-
         if (!request) {
             throw new Error("Request cannot be null");
         }
 
         request.headers = request.headers || {};
 
-        console.log('requesting url: ' + request.url);
+        console.debug('requesting url: ' + request.url);
 
         return getFetchPromise(request).then(function (response) {
-
+            console.debug('response status: ' + response.status + ', url: ' + request.url);
-            console.log('response status: ' + response.status + ', url: ' + request.url);
-
             if (response.status < 400) {
-
                 if (request.dataType === 'json' || request.headers.accept === 'application/json') {
                     return response.json();
                 } else if (request.dataType === 'text' || (response.headers.get('Content-Type') || '').toLowerCase().indexOf('text/') === 0) {
@@ -118,10 +114,8 @@ define([], function () {
             } else {
                 return Promise.reject(response);
             }
-
         }, function (err) {
-
+            console.error('request failed to url: ' + request.url);
-            console.log('request failed to url: ' + request.url);
             throw err;
         });
     }
@@ -129,4 +123,4 @@ define([], function () {
         getFetchPromise: getFetchPromise,
         ajax: ajax
     };
-});
+});

src/components/filedownloader.js

@@ -15,4 +15,4 @@ define(['multi-download'], function (multiDownload) {
             }
         }
     };
-});
+});

src/components/filesystem.js

@@ -15,4 +15,4 @@ define([], function () {
             return Promise.reject();
         }
     };
-});
+});

src/components/filtermenu/filtermenu.js

@@ -279,7 +279,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                 var html = '';
 
                 html += '<div class="formDialogHeader">';
-                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="material-icons">arrow_back</i></button>';
+                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
                 html += '<h3 class="formDialogHeaderTitle">${Filters}</h3>';
 
                 html += '</div>';

src/components/filtermenu/filtermenu.template.html

@@ -105,4 +105,4 @@
             </div>
         </form>
     </div>
-</div>
+</div>

src/components/focusManager.js

@@ -43,7 +43,7 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
                 preventScroll: scrollManager.isEnabled()
             });
         } catch (err) {
-            console.log('Error in focusManager.autoFocus: ' + err);
+            console.error('Error in focusManager.autoFocus: ' + err);
         }
     }
 

src/components/guide/guide-settings.js

@@ -89,20 +89,6 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
         }
     }
 
-    function onSortByChange() {
-        var newValue = this.value;
-        if (this.checked) {
-            var changed = options.query.SortBy !== newValue;
-
-            options.query.SortBy = newValue.replace('_', ',');
-            options.query.StartIndex = 0;
-
-            if (options.callback && changed) {
-                options.callback();
-            }
-        }
-    }
-
     function showEditor(options) {
 
         return new Promise(function (resolve, reject) {
@@ -171,4 +157,4 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
     return {
         show: showEditor
     };
-});
+});

src/components/guide/guide-settings.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">
         ${Settings}
     </h3>

src/components/guide/guide.js

@@ -29,7 +29,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
         var offset = newPct - left;
         var pctOfWidth = (offset / width) * 100;
 
-        //console.log(pctOfWidth);
         var guideProgramName = cell.guideProgramName;
         if (!guideProgramName) {
             guideProgramName = cell.querySelector('.guideProgramName');
@@ -396,7 +395,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                 try {
                     program.StartDateLocal = datetime.parseISO8601Date(program.StartDate, { toLocal: true });
                 } catch (err) {
-                    console.log('error parsing timestamp for start date');
+                    console.error('error parsing timestamp for start date');
                 }
             }
 
@@ -404,7 +403,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                 try {
                     program.EndDateLocal = datetime.parseISO8601Date(program.EndDate, { toLocal: true });
                 } catch (err) {
-                    console.log('error parsing timestamp for end date');
+                    console.error('error parsing timestamp for end date');
                 }
             }
 
@@ -416,7 +415,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             var status;
 
             if (item.Type === 'SeriesTimer') {
-                return '<i class="material-icons programIcon seriesTimerIcon">fiber_smart_record</i>';
+                return '<i class="material-icons programIcon seriesTimerIcon fiber_smart_record"></i>';
             } else if (item.TimerId || item.SeriesTimerId) {
 
                 status = item.Status || 'Cancelled';
@@ -430,13 +429,13 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
             if (item.SeriesTimerId) {
 
                 if (status !== 'Cancelled') {
-                    return '<i class="material-icons programIcon seriesTimerIcon">fiber_smart_record</i>';
+                    return '<i class="material-icons programIcon seriesTimerIcon fiber_smart_record"></i>';
                 }
 
-                return '<i class="material-icons programIcon seriesTimerIcon seriesTimerIcon-inactive">fiber_smart_record</i>';
+                return '<i class="material-icons programIcon seriesTimerIcon seriesTimerIcon-inactive fiber_smart_record"></i>';
             }
 
-            return '<i class="material-icons programIcon timerIcon">fiber_manual_record</i>';
+            return '<i class="material-icons programIcon timerIcon fiber_manual_record"></i>';
         }
 
         function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) {
@@ -550,7 +549,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
                     html += '<div class="' + guideProgramNameClass + '">';
 
-                    html += '<div class="guide-programNameCaret hide"><i class="guideProgramNameCaretIcon material-icons">keyboard_arrow_left</i></div>';
+                    html += '<div class="guide-programNameCaret hide"><i class="guideProgramNameCaretIcon material-icons keyboard_arrow_left"></i></div>';
 
                     html += '<div class="guideProgramNameText">' + program.Name;
 
@@ -1106,7 +1105,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
 
                 var icon = cell.querySelector('.timerIcon');
                 if (!icon) {
-                    cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<i class="timerIcon material-icons programIcon">fiber_manual_record</i>');
+                    cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<i class="timerIcon material-icons programIcon fiber_manual_record"></i>');
                 }
 
                 if (newTimerId) {

src/components/guide/tvguide.template.html

@@ -10,7 +10,7 @@
     <div class="guide-headerTimeslots">
         <div class="guide-channelTimeslotHeader">
             <button is="paper-icon-button-light" type="button" class="btnGuideViewSettings">
-                <i class="material-icons btnGuideViewSettingsIcon">more_horiz</i>
+                <i class="material-icons btnGuideViewSettingsIcon more_horiz"></i>
             </button>
         </div>
         <div class="timeslotHeaders scrollX guideScroller"></div>
@@ -30,9 +30,9 @@
 
 <div class="guideOptions hide">
     <button is="paper-icon-button-light" type="button" class="btnPreviousPage">
-        <i class="material-icons">arrow_back</i>
+        <i class="material-icons arrow_back"></i>
     </button>
     <button is="paper-icon-button-light" type="button" class="btnNextPage">
-        <i class="material-icons">arrow_forward</i>
+        <i class="material-icons arrow_forward"></i>
     </button>
 </div>

src/components/headroom/headroom.js

@@ -340,4 +340,4 @@ define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, lay
     };
 
     return Headroom;
-});
+});

src/components/homescreensettings/homescreensettings.js

@@ -149,7 +149,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
             currentHtml += '<div class="listItem viewItem" data-viewid="' + view.Id + '">';
 
-            currentHtml += '<i class="material-icons listItemIcon">folder_open</i>';
+            currentHtml += '<i class="material-icons listItemIcon folder_open"></i>';
 
             currentHtml += '<div class="listItemBody">';
 
@@ -159,8 +159,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
 
             currentHtml += '</div>';
 
-            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><i class="material-icons">keyboard_arrow_up</i></button>';
+            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><i class="material-icons keyboard_arrow_up"></i></button>';
-            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><i class="material-icons">keyboard_arrow_down</i></button>';
+            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><i class="material-icons keyboard_arrow_down"></i></button>';
 
             currentHtml += '</div>';
 

src/components/homescreensettings/homescreensettings.template.html

@@ -129,4 +129,4 @@
     <button is="emby-button" type="submit" class="raised button-submit block btnSave hide">
         <span>${Save}</span>
     </button>
-</form>
+</form>

src/components/homesections/homesections.js

@@ -40,26 +40,48 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         return getUserViews(apiClient, user.Id).then(function (userViews) {
             var html = '';
 
-            var sectionCount = 7;
+            if (userViews.length) {
-            for (var i = 0; i < sectionCount; i++) {
+                var sectionCount = 7;
-                html += '<div class="verticalSection section' + i + '"></div>';
+                for (var i = 0; i < sectionCount; i++) {
-            }
+                    html += '<div class="verticalSection section' + i + '"></div>';
+                }
 
-            elem.innerHTML = html;
+                elem.innerHTML = html;
-            elem.classList.add('homeSectionsContainer');
+                elem.classList.add('homeSectionsContainer');
 
-            var promises = [];
+                var promises = [];
-            var sections = getAllSectionsToShow(userSettings, sectionCount);
+                var sections = getAllSectionsToShow(userSettings, sectionCount);
-            for (var i = 0; i < sections.length; i++) {
+                for (var i = 0; i < sections.length; i++) {
-                promises.push(loadSection(elem, apiClient, user, userSettings, userViews, sections, i));
+                    promises.push(loadSection(elem, apiClient, user, userSettings, userViews, sections, i));
-            }
+                }
 
-            return Promise.all(promises).then(function () {
+                return Promise.all(promises).then(function () {
-                return resume(elem, {
+                    return resume(elem, {
-                    refresh: true,
+                        refresh: true,
-                    returnPromise: false
+                        returnPromise: false
+                    });
                 });
-            });
+            } else {
+                var noLibDescription;
+                if (user['Policy'] && user['Policy']['IsAdministrator']) {
+                    noLibDescription = Globalize.translate("NoCreatedLibraries", '<a id="button-createLibrary" class="button-link">', '</a>')
+                } else {
+                    noLibDescription = Globalize.translate("AskAdminToCreateLibrary");
+                }
+
+                html += '<div class="centerMessage padded-left padded-right">';
+                html += '<h2>' + Globalize.translate("MessageNothingHere") + '</h2>';
+                html += '<p>' + noLibDescription + '</p>'
+                html += '</div>';
+                elem.innerHTML = html;
+
+                var createNowLink = elem.querySelector("#button-createLibrary")
+                if (createNowLink) {
+                    createNowLink.addEventListener("click", function () {
+                        Dashboard.navigate("library.html");
+                    });
+                }
+            }
         });
     }
 
@@ -260,7 +282,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             html += '<h2 class="sectionTitle sectionTitle-cards">';
             html += globalize.translate('LatestFromLibrary', parent.Name);
             html += '</h2>';
-            html += '<i class="material-icons">chevron_right</i>';
+            html += '<i class="material-icons chevron_right"></i>';
             html += '</a>';
         } else {
             html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LatestFromLibrary', parent.Name) + '</h2>';
@@ -268,7 +290,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         html += '</div>';
 
         if (enableScrollX()) {
-            html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
+            html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
             html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
         } else {
             html += '<div is="emby-itemscontainer" class="itemsContainer focuscontainer-x padded-left padded-right vertical-wrap">';
@@ -321,7 +343,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         if (userViews.length) {
             html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
             if (enableScrollX()) {
-                html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
+                html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
                 html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
             } else {
                 html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right focuscontainer-x vertical-wrap">';
@@ -401,7 +423,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>';
         if (enableScrollX()) {
-            html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
+            html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
             html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-monitor="videoplayback,markplayed">';
         } else {
             html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-monitor="videoplayback,markplayed">';
@@ -474,7 +496,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>';
         if (enableScrollX()) {
-            html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
+            html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
             html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-monitor="audioplayback,markplayed">';
         } else {
             html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-monitor="audioplayback,markplayed">';
@@ -560,7 +582,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                 html += '</div>';
 
                 if (enableScrollX()) {
-                    html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true" data-scrollbuttons="false">';
+                    html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true" data-scrollbuttons="false">';
                     html += '<div class="padded-top padded-bottom scrollSlider focuscontainer-x">';
                 } else {
                     html += '<div class="padded-top padded-bottom focuscontainer-x">';
@@ -608,7 +630,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                     html += '<h2 class="sectionTitle sectionTitle-cards">';
                     html += globalize.translate('HeaderOnNow');
                     html += '</h2>';
-                    html += '<i class="material-icons">chevron_right</i>';
+                    html += '<i class="material-icons chevron_right"></i>';
                     html += '</a>';
 
                 } else {
@@ -617,7 +639,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                 html += '</div>';
 
                 if (enableScrollX()) {
-                    html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
+                    html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
                     html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">'
                 } else {
                     html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x">';
@@ -683,7 +705,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             html += '<h2 class="sectionTitle sectionTitle-cards">';
             html += globalize.translate('HeaderNextUp');
             html += '</h2>';
-            html += '<i class="material-icons">chevron_right</i>';
+            html += '<i class="material-icons chevron_right"></i>';
             html += '</a>';
         } else {
             html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderNextUp') + '</h2>';
@@ -691,7 +713,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         html += '</div>';
 
         if (enableScrollX()) {
-            html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
+            html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
             html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-monitor="videoplayback,markplayed">'
         } else {
             html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-monitor="videoplayback,markplayed">';
@@ -763,7 +785,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         html += '</div>';
 
         if (enableScrollX()) {
-            html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
+            html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
             html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">'
         } else {
             html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x">';

src/components/htmlMediaHelper.js

@@ -114,12 +114,12 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
 
         if (!recoverDecodingErrorDate || (now - recoverDecodingErrorDate) > 3000) {
             recoverDecodingErrorDate = now;
-            console.log('try to recover media Error ...');
+            console.debug('try to recover media Error ...');
             hlsPlayer.recoverMediaError();
         } else {
             if (!recoverSwapAudioCodecDate || (now - recoverSwapAudioCodecDate) > 3000) {
                 recoverSwapAudioCodecDate = now;
-                console.log('try to swap Audio Codec and recover media Error ...');
+                console.debug('try to swap Audio Codec and recover media Error ...');
                 hlsPlayer.swapAudioCodec();
                 hlsPlayer.recoverMediaError();
             } else {
@@ -233,7 +233,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
                 return Promise.resolve();
             }
         } catch (err) {
-            console.log('error calling video.play: ' + err);
+            console.error('error calling video.play: ' + err);
             return Promise.reject();
         }
     }
@@ -245,7 +245,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
             try {
                 player.unload();
             } catch (err) {
-                console.log(err);
+                console.error(err);
             }
 
             instance._castPlayer = null;
@@ -258,7 +258,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
             try {
                 player.destroy();
             } catch (err) {
-                console.log(err);
+                console.error(err);
             }
 
             instance._shakaPlayer = null;
@@ -271,7 +271,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
             try {
                 player.destroy();
             } catch (err) {
-                console.log(err);
+                console.error(err);
             }
 
             instance._hlsPlayer = null;
@@ -286,7 +286,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
                 player.detachMediaElement();
                 player.destroy();
             } catch (err) {
-                console.log(err);
+                console.error(err);
             }
 
             instance._flvPlayer = null;
@@ -307,14 +307,14 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
 
         hls.on(Hls.Events.ERROR, function (event, data) {
 
-            console.log('HLS Error: Type: ' + data.type + ' Details: ' + (data.details || '') + ' Fatal: ' + (data.fatal || false));
+            console.error('HLS Error: Type: ' + data.type + ' Details: ' + (data.details || '') + ' Fatal: ' + (data.fatal || false));
 
             switch (data.type) {
                 case Hls.ErrorTypes.NETWORK_ERROR:
                     // try to recover network error
                     if (data.response && data.response.code && data.response.code >= 400) {
 
-                        console.log('hls.js response error code: ' + data.response.code);
+                        console.debug('hls.js response error code: ' + data.response.code);
 
                         // Trigger failure differently depending on whether this is prior to start of playback, or after
                         hls.destroy();
@@ -343,7 +343,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
 
                             // This could be a CORS error related to access control response headers
 
-                            console.log('hls.js response error code: ' + data.response.code);
+                            console.debug('hls.js response error code: ' + data.response.code);
 
                             // Trigger failure differently depending on whether this is prior to start of playback, or after
                             hls.destroy();
@@ -355,20 +355,20 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
                                 onErrorInternal(instance, 'network');
                             }
                         } else {
-                            console.log("fatal network error encountered, try to recover");
+                            console.debug("fatal network error encountered, try to recover");
                             hls.startLoad();
                         }
 
                         break;
                     case Hls.ErrorTypes.MEDIA_ERROR:
-                        console.log("fatal media error encountered, try to recover");
+                        console.debug("fatal media error encountered, try to recover");
                         var currentReject = reject;
                         reject = null;
                         handleHlsJsMediaError(instance, currentReject);
                         break;
                     default:
 
-                        console.log('Cannot recover from hls error - destroy and trigger error');
+                        console.debug('Cannot recover from hls error - destroy and trigger error');
                         // cannot recover
                         // Trigger failure differently depending on whether this is prior to start of playback, or after
                         hls.destroy();
@@ -463,4 +463,4 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         getCrossOriginValue: getCrossOriginValue,
         getBufferedRanges: getBufferedRanges
     };
-});
+});

src/components/htmlaudioplayer/plugin.js

@@ -16,7 +16,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
         // Need to record the starting volume on each pass rather than querying elem.volume
         // This is due to iOS safari not allowing volume changes and always returning the system volume value
         var newVolume = Math.max(0, startingVolume - 0.15);
-        console.log('fading volume to ' + newVolume);
+        console.debug('fading volume to ' + newVolume);
         elem.volume = newVolume;
 
         if (newVolume <= 0) {
@@ -113,7 +113,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
             bindEvents(elem);
 
             var val = options.url;
-            console.log('playing url: ' + val);
+            console.debug('playing url: ' + val);
 
             // Convert to seconds
             var seconds = (options.playerStartPositionTicks || 0) / 10000000;
@@ -298,7 +298,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
 
             var errorCode = this.error ? (this.error.code || 0) : 0;
             var errorMessage = this.error ? (this.error.message || '') : '';
-            console.log('Media element error: ' + errorCode.toString() + ' ' + errorMessage);
+            console.error('media element error: ' + errorCode.toString() + ' ' + errorMessage);
 
             var type;
 

src/components/htmlvideoplayer/plugin.js

@@ -1,5 +1,6 @@
-define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackManager', 'appRouter', 'appSettings', 'connectionManager', 'htmlMediaHelper', 'itemHelper', 'fullscreenManager'], function (browser, require, events, appHost, loading, dom, playbackManager, appRouter, appSettings, connectionManager, htmlMediaHelper, itemHelper, fullscreenManager) {
+define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackManager', 'appRouter', 'appSettings', 'connectionManager', 'htmlMediaHelper', 'itemHelper', 'fullscreenManager', 'globalize'], function (browser, require, events, appHost, loading, dom, playbackManager, appRouter, appSettings, connectionManager, htmlMediaHelper, itemHelper, fullscreenManager, globalize) {
     "use strict";
+    /* globals cast */
 
     var mediaManager;
 
@@ -11,7 +12,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             try {
                 parentNode.removeChild(elem);
             } catch (err) {
-                console.log('Error removing dialog element: ' + err);
+                console.error('error removing dialog element: ' + err);
             }
         }
     }
@@ -242,7 +243,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
                 loading.show();
 
-                console.log('prefetching hls playlist: ' + hlsPlaylistUrl);
+                console.debug('prefetching hls playlist: ' + hlsPlaylistUrl);
 
                 return connectionManager.getApiClient(item.ServerId).ajax({
 
@@ -251,7 +252,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
                 }).then(function () {
 
-                    console.log('completed prefetching hls playlist: ' + hlsPlaylistUrl);
+                    console.debug('completed prefetching hls playlist: ' + hlsPlaylistUrl);
 
                     loading.hide();
                     streamInfo.url = hlsPlaylistUrl;
@@ -260,7 +261,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
                 }, function () {
 
-                    console.log('error prefetching hls playlist: ' + hlsPlaylistUrl);
+                    console.error('error prefetching hls playlist: ' + hlsPlaylistUrl);
 
                     loading.hide();
                     return Promise.resolve();
@@ -357,6 +358,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             return new Promise(function (resolve, reject) {
 
                 require(['shaka'], function () {
+                    /* globals shaka */
 
                     var player = new shaka.Player(elem);
 
@@ -408,7 +410,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             lrd.media.streamType = cast.receiver.media.StreamType.OTHER;
             lrd.media.customData = options;
 
-            console.log('loading media url into mediaManager');
+            console.debug('loading media url into media manager');
 
             try {
                 mediaManager.load(lrd);
@@ -418,7 +420,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 return Promise.resolve();
             } catch (err) {
 
-                console.log('mediaManager error: ' + err);
+                console.debug('media manager error: ' + err);
                 return Promise.reject();
             }
         }
@@ -460,11 +462,11 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 protocol = cast.player.api.CreateSmoothStreamingProtocol(host);
             }
 
-            console.log('loading playback url: ' + url);
+            console.debug('loading playback url: ' + url);
-            console.log('contentType: ' + contentType);
+            console.debug('content type: ' + contentType);
 
             host.onError = function (errorCode) {
-                console.log("Fatal Error - " + errorCode);
+                console.error("fatal Error - " + errorCode);
             };
 
             mediaElement.autoplay = false;
@@ -499,7 +501,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             elem.removeEventListener('error', onError);
 
             var val = options.url;
-            console.log('playing url: ' + val);
+            console.debug('playing url: ' + val);
 
             // Convert to seconds
             var seconds = (options.playerStartPositionTicks || 0) / 10000000;
@@ -608,7 +610,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 } else if (currentTrackEvents) {
                     setTrackEventsSubtitleOffset(currentTrackEvents, offsetValue);
                 } else {
-                    console.log("No available track, cannot apply offset: ", offsetValue);
+                    console.debug("No available track, cannot apply offset: ", offsetValue);
                 }
             }
         };
@@ -727,22 +729,18 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             // https://msdn.microsoft.com/en-us/library/hh772507(v=vs.85).aspx
 
             var elemAudioTracks = elem.audioTracks || [];
-            console.log('found ' + elemAudioTracks.length + ' audio tracks');
+            console.debug('found ' + elemAudioTracks.length + ' audio tracks');
 
             for (i = 0, length = elemAudioTracks.length; i < length; i++) {
 
                 if (audioIndex === i) {
-                    console.log('setting audio track ' + i + ' to enabled');
+                    console.debug('setting audio track ' + i + ' to enabled');
                     elemAudioTracks[i].enabled = true;
                 } else {
-                    console.log('setting audio track ' + i + ' to disabled');
+                    console.debug('setting audio track ' + i + ' to disabled');
                     elemAudioTracks[i].enabled = false;
                 }
             }
-
-            setTimeout(function () {
-                elem.currentTime = elem.currentTime;
-            }, 100);
         };
 
         self.stop = function (destroyPlayer) {
@@ -911,7 +909,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         function onError() {
             var errorCode = this.error ? (this.error.code || 0) : 0;
             var errorMessage = this.error ? (this.error.message || '') : '';
-            console.log('Media element error: ' + errorCode.toString() + ' ' + errorMessage);
+            console.error('media element error: ' + errorCode.toString() + ' ' + errorMessage);
 
             var type;
 
@@ -1115,9 +1113,10 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
         function renderSsaAss(videoElement, track, item) {
             if (supportsCanvas() && supportsWebWorkers()) {
+                console.debug('rendering subtitles with SubtitlesOctopus');
                 renderWithSubtitlesOctopus(videoElement, track, item);
             } else {
-                console.log('rendering subtitles with libjass');
+                console.debug('rendering subtitles with libjass');
                 renderWithLibjass(videoElement, track, item);
             }
         }
@@ -1137,7 +1136,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 var videoElement = self._mediaElement;
                 var width = videoElement.offsetWidth;
                 var height = videoElement.offsetHeight;
-                console.log('videoElement resized: ' + width + 'x' + height);
+                console.debug('videoElement resized: ' + width + 'x' + height);
                 renderer.resize(width, height, 0, 0);
             }
         }
@@ -1254,7 +1253,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                         trackElement.removeCue(trackElement.cues[0]);
                     }
                 } catch (e) {
-                    console.log('Error removing cue from textTrack');
+                    console.error('error removing cue from textTrack');
                 }
 
                 trackElement.mode = 'disabled';
@@ -1268,7 +1267,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             fetchSubtitles(track, item).then(function (data) {
 
                 // show in ui
-                console.log('downloaded ' + data.TrackEvents.length + ' track events');
+                console.debug('downloaded ' + data.TrackEvents.length + ' track events');
                 // add some cues to show the text
                 // in safari, the cues need to be added before setting the track mode to showing
                 data.TrackEvents.forEach(function (trackEvent) {
@@ -1294,7 +1293,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 try {
                     clock.seek(timeMs / 1000);
                 } catch (err) {
-                    console.log('Error in libjass: ' + err);
+                    console.error('error in libjass: ' + err);
                 }
                 return;
             }
@@ -1327,7 +1326,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
         function setCurrentTrackElement(streamIndex) {
 
-            console.log('Setting new text track index to: ' + streamIndex);
+            console.debug('setting new text track index to: ' + streamIndex);
 
             var mediaStreamTextTracks = getMediaStreamTextTracks(self._currentPlayOptions.mediaSource);
 
@@ -1348,38 +1347,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             }
         }
 
-        function updateTextStreamUrls(startPositionTicks) {
-
-            if (!supportsTextTracks()) {
-                return;
-            }
-
-            var allTracks = self._mediaElement.textTracks; // get list of tracks
-            var i;
-            var track;
-
-            for (i = 0; i < allTracks.length; i++) {
-
-                track = allTracks[i];
-
-                // This throws an error in IE, but is fine in chrome
-                // In IE it's not necessary anyway because changing the src seems to be enough
-                try {
-                    while (track.cues.length) {
-                        track.removeCue(track.cues[0]);
-                    }
-                } catch (e) {
-                    console.log('Error removing cue from textTrack');
-                }
-            }
-
-            var tracks = self._mediaElement.querySelectorAll('track');
-            for (i = 0; i < tracks.length; i++) {
-                track = tracks[i];
-                track.src = replaceQueryString(track.src, 'startPositionTicks', startPositionTicks);
-            }
-        }
-
         function createMediaElement(options) {
 
             if (browser.tv || browser.iOS || browser.mobile) {
@@ -1590,7 +1557,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
     };
 
     function onPictureInPictureError(err) {
-        console.log('Picture in picture error: ' + err.toString());
+        console.error('Picture in picture error: ' + err.toString());
     }
 
     HtmlVideoPlayer.prototype.setPictureInPictureEnabled = function (isEnabled) {
@@ -1651,9 +1618,13 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         if (document.AirPlayEnabled) {
             if (video) {
                 if (isEnabled) {
-                    video.requestAirPlay().catch(onAirPlayError);
+                    video.requestAirPlay().catch(function(err) {
+                        console.error("Error requesting AirPlay", err)
+                    });
                 } else {
-                    document.exitAirPLay().catch(onAirPlayError);
+                    document.exitAirPLay().catch(function(err) {
+                        console.error("Error exiting AirPlay", err)
+                    });
                 }
             }
         } else {
@@ -1855,7 +1826,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
             if (protocol) {
                 mediaCategory.stats.push({
-                    label: 'Protocol:',
+                    label: globalize.translate("LabelProtocol"),
                     value: protocol
                 });
             }
@@ -1865,12 +1836,12 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
         if (this._hlsPlayer || this._shakaPlayer) {
             mediaCategory.stats.push({
-                label: 'Stream type:',
+                label: globalize.translate("LabelStreamType"),
                 value: 'HLS'
             });
         } else {
             mediaCategory.stats.push({
-                label: 'Stream type:',
+                label: globalize.translate("LabelStreamType"),
                 value: 'Video'
             });
         }
@@ -1882,13 +1853,13 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         categories.push(videoCategory);
 
         var rect = mediaElement.getBoundingClientRect ? mediaElement.getBoundingClientRect() : {};
-        var height = rect.height;
+        var height = parseInt(rect.height);
-        var width = rect.width;
+        var width = parseInt(rect.width);
 
         // Don't show player dimensions on smart TVs because the app UI could be lower resolution than the video and this causes users to think there is a problem
         if (width && height && !browser.tv) {
             videoCategory.stats.push({
-                label: 'Player dimensions:',
+                label: globalize.translate("LabelPlayerDimensions"),
                 value: width + 'x' + height
             });
         }
@@ -1898,7 +1869,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
         if (width && height) {
             videoCategory.stats.push({
-                label: 'Video resolution:',
+                label: globalize.translate("LabelVideoResolution"),
                 value: width + 'x' + height
             });
         }
@@ -1908,13 +1879,13 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
             var droppedVideoFrames = playbackQuality.droppedVideoFrames || 0;
             videoCategory.stats.push({
-                label: 'Dropped frames:',
+                label: globalize.translate("LabelDroppedFrames"),
                 value: droppedVideoFrames
             });
 
             var corruptedVideoFrames = playbackQuality.corruptedVideoFrames || 0;
             videoCategory.stats.push({
-                label: 'Corrupted frames:',
+                label: globalize.translate("LabelCorruptedFrames"),
                 value: corruptedVideoFrames
             });
         }

src/components/humanedate.js

@@ -25,6 +25,7 @@ define(["datetime"], function (datetime) {
         if (seconds < 0) {
             seconds = Math.abs(seconds);
         }
+        // eslint-disable-next-line no-cond-assign
         for (; format = time_formats[i++];) {
             if (seconds < format[0]) {
                 if (2 == format.length) {

src/components/imagedownloader/imagedownloader.js

@@ -116,8 +116,8 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         if (showControls) {
             html += '<div data-role="controlgroup" data-type="horizontal" style="display:inline-block;">';
 
-            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><i class="material-icons">arrow_back</i></button>';
+            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><i class="material-icons arrow_back"></i></button>';
-            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Next') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><i class="material-icons">arrow_forward</i></button>';
+            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Next') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><i class="material-icons arrow_forward"></i></button>';
             html += '</div>';
         }
 
@@ -277,7 +277,7 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
         if (enableFooterButtons) {
             html += '<div class="cardText cardTextCentered">';
 
-            html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><i class="material-icons">cloud_download</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><i class="material-icons cloud_download"></i></button>';
             html += '</div>';
         }
 

src/components/imagedownloader/imagedownloader.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">
         ${Search}
     </h3>

src/components/imageeditor/imageeditor.js

@@ -155,15 +155,15 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
             if (image.ImageType === "Backdrop" || image.ImageType === "Screenshot") {
 
                 if (index > 0) {
-                    html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + globalize.translate('MoveLeft') + '"><i class="material-icons">chevron_left</i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + globalize.translate('MoveLeft') + '"><i class="material-icons chevron_left"></i></button>';
                 } else {
-                    html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveLeft') + '"><i class="material-icons">chevron_left</i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveLeft') + '"><i class="material-icons chevron_left"></i></button>';
                 }
 
                 if (index < numImages - 1) {
-                    html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + globalize.translate('MoveRight') + '"><i class="material-icons">chevron_right</i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + globalize.translate('MoveRight') + '"><i class="material-icons chevron_right"></i></button>';
                 } else {
-                    html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveRight') + '"><i class="material-icons">chevron_right</i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveRight') + '"><i class="material-icons chevron_right"></i></button>';
                 }
             } else {
                 if (imageProviders.length) {

src/components/imageeditor/imageeditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderEditImages}
     </h3>

src/components/imageoptionseditor/imageoptionseditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderImageOptions}
     </h3>

src/components/images/imageFetcher.js

@@ -35,4 +35,4 @@ define(['dom'], function (dom) {
         loadImage: loadImage
     };
 
-});
+});

src/components/images/imageLoader.js

@@ -1,4 +1,4 @@
-define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings', 'require', 'css!./style'], function (lazyLoader, imageFetcher, layoutManager, browser, appSettings, require) {
+define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings', 'userSettings', 'require', 'css!./style'], function (lazyLoader, imageFetcher, layoutManager, browser, appSettings, userSettings, require) {
     'use strict';
 
     var requestIdleCallback = window.requestIdleCallback || function (fn) {
@@ -7,9 +7,6 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
 
     var self = {};
 
-    // seeing slow performance with firefox
-    var enableFade = false;
-
     function fillImage(elem, source, enableEffects) {
 
         if (!elem) {
@@ -30,7 +27,7 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
     function fillImageElement(elem, source, enableEffects) {
         imageFetcher.loadImage(elem, source).then(function () {
 
-            if (enableFade && enableEffects !== false) {
+            if (enableEffects !== false) {
                 fadeIn(elem);
             }
 
@@ -39,10 +36,11 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
     }
 
     function fadeIn(elem) {
-
+        if (userSettings.enableFastFadein()) {
-        var cssClass = 'lazy-image-fadein';
+            elem.classList.add('lazy-image-fadein-fast');
-
+        } else {
-        elem.classList.add(cssClass);
+            elem.classList.add('lazy-image-fadein');
+        }
     }
 
     function lazyChildren(elem) {
@@ -124,4 +122,4 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
     self.getPrimaryImageAspectRatio = getPrimaryImageAspectRatio;
 
     return self;
-});
+});

src/components/imageuploader/imageuploader.js

@@ -47,7 +47,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
         };
         reader.onabort = function () {
             loading.hide();
-            console.log('File read cancelled');
+            console.debug('File read cancelled');
         };
 
         // Closure to capture the file information.

src/components/imageuploader/imageuploader.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderUploadImage}
     </h3>

src/components/indicators/indicators.js

@@ -62,7 +62,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
                 startDate = datetime.parseISO8601Date(item.StartDate).getTime();
                 endDate = datetime.parseISO8601Date(item.EndDate).getTime();
             } catch (err) {
-                console.log(err);
+                console.error(err);
             }
 
             var now = new Date().getTime();
@@ -118,7 +118,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
         var status;
 
         if (item.Type === 'SeriesTimer') {
-            return '<i class="material-icons timerIndicator indicatorIcon">fiber_smart_record</i>';
+            return '<i class="material-icons timerIndicator indicatorIcon fiber_smart_record"></i>';
         } else if (item.TimerId || item.SeriesTimerId) {
             status = item.Status || 'Cancelled';
         } else if (item.Type === 'Timer') {
@@ -129,20 +129,20 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
 
         if (item.SeriesTimerId) {
             if (status !== 'Cancelled') {
-                return '<i class="material-icons timerIndicator indicatorIcon">fiber_smart_record</i>';
+                return '<i class="material-icons timerIndicator indicatorIcon fiber_smart_record"></i>';
             }
 
-            return '<i class="material-icons timerIndicator timerIndicator-inactive indicatorIcon">fiber_smart_record</i>';
+            return '<i class="material-icons timerIndicator timerIndicator-inactive indicatorIcon fiber_smart_record"></i>';
         }
 
-        return '<i class="material-icons timerIndicator indicatorIcon">fiber_manual_record</i>';
+        return '<i class="material-icons timerIndicator indicatorIcon fiber_manual_record"></i>';
     }
 
     function getSyncIndicator(item) {
         if (item.SyncPercent === 100) {
-            return '<div class="syncIndicator indicator fullSyncIndicator"><i class="material-icons indicatorIcon">file_download</i></div>';
+            return '<div class="syncIndicator indicator fullSyncIndicator"><i class="material-icons indicatorIcon file_download"></i></div>';
         } else if (item.SyncPercent != null) {
-            return '<div class="syncIndicator indicator emptySyncIndicator"><i class="material-icons indicatorIcon">file_download</i></div>';
+            return '<div class="syncIndicator indicator emptySyncIndicator"><i class="material-icons indicatorIcon file_download"></i></div>';
         }
 
         return '';
@@ -152,9 +152,12 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
         if (item.Type === 'Video') {
             return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon">videocam</i></div>';
         }
-        if (item.Type === 'Folder' || item.Type === 'PhotoAlbum') {
+        if (item.Type === 'Folder') {
             return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon">folder</i></div>';
         }
+        if (item.Type === 'PhotoAlbum') {
+            return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon photo_album"></i></div>';
+        }
         if (item.Type === 'Photo') {
             return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon">photo</i></div>';
         }
@@ -171,7 +174,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
                         return '<div class="unairedIndicator">Unaired</div>';
                     }
                 } catch (err) {
-                    console.log(err);
+                    console.error(err);
                 }
             }
             return '<div class="missingIndicator">Missing</div>';

src/components/input/gamepadtokey.js

@@ -361,4 +361,4 @@ require(['apphost'], function (appHost) {
         window.navigator.gamepadInputEmulation = "gamepad";
     }
 
-});
+});

src/components/input/keyboardnavigation.js

@@ -1,8 +1,6 @@
 define(["inputManager", "layoutManager"], function (inputManager, layoutManager) {
     "use strict";
 
-    console.log("keyboardnavigation");
-
     /**
      * Key name mapping.
      */
@@ -36,11 +34,16 @@ define(["inputManager", "layoutManager"], function (inputManager, layoutManager)
         10252: "MediaPlayPause"
     };
 
+    /**
+     * Keys used for keyboard navigation.
+     */
+    var NavigationKeys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
+
     var hasFieldKey = false;
     try {
         hasFieldKey = "key" in new KeyboardEvent("keydown");
     } catch (e) {
-        console.log("error checking 'key' field");
+        console.error("error checking 'key' field");
     }
 
     if (!hasFieldKey) {
@@ -60,11 +63,28 @@ define(["inputManager", "layoutManager"], function (inputManager, layoutManager)
         return KeyNames[event.keyCode] || event.key;
     }
 
+    /**
+     * Returns _true_ if key is used for navigation.
+     *
+     * @param {string} key name
+     * @return {boolean} _true_ if key is used for navigation
+     */
+    function isNavigationKey(key) {
+        return NavigationKeys.indexOf(key) != -1;
+    }
+
     function enable() {
         document.addEventListener("keydown", function (e) {
+            var key = getKeyName(e);
+
+            // Ignore navigation keys for non-TV
+            if (!layoutManager.tv && isNavigationKey(key)) {
+                return;
+            }
+
             var capture = true;
 
-            switch (getKeyName(e)) {
+            switch (key) {
                 case "ArrowLeft":
                     inputManager.handle("left");
                     break;
@@ -120,7 +140,7 @@ define(["inputManager", "layoutManager"], function (inputManager, layoutManager)
             }
 
             if (capture) {
-                console.log("Disabling default event handling");
+                console.debug("disabling default event handling");
                 e.preventDefault();
             }
         });
@@ -159,6 +179,7 @@ define(["inputManager", "layoutManager"], function (inputManager, layoutManager)
 
     return {
         enable: enable,
-        getKeyName: getKeyName
+        getKeyName: getKeyName,
+        isNavigationKey: isNavigationKey
     };
 });

src/components/input/mouseManager.js

@@ -166,4 +166,4 @@ define(['inputManager', 'focusManager', 'browser', 'layoutManager', 'events', 'd
     events.on(layoutManager, 'modechange', initMouse);
 
     return self;
-});
+});

src/components/itemMediaInfo/itemMediaInfo.template.html

@@ -1,6 +1,6 @@
 <div class="formDialogHeader">
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-        <i class="material-icons">arrow_back</i>
+        <i class="material-icons arrow_back"></i>
     </button>
     <h3 class="formDialogHeaderTitle">${HeaderMediaInfo}</h3>
 </div>

src/components/itemcontextmenu.js

@@ -15,7 +15,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
                 commands.push({
                     name: globalize.translate("Play"),
                     id: "resume",
-                    icon: "play_arrow"
+                    icon: ""
                 });
             }
 
@@ -23,7 +23,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
                 commands.push({
                     name: globalize.translate("PlayAllFromHere"),
                     id: "playallfromhere",
-                    icon: "play_arrow"
+                    icon: ""
                 });
             }
         }
@@ -346,22 +346,25 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
                     break;
                 case "copy-stream":
                     var downloadHref = apiClient.getItemDownloadUrl(itemId);
-                    var textArea = document.createElement("textarea");
+                    navigator.clipboard.writeText(downloadHref).then(function () {
-                    textArea.value = downloadHref;
-                    document.body.appendChild(textArea);
-                    textArea.focus();
-                    textArea.select();
-                    try {
-                        document.execCommand("copy");
-
                         require(["toast"], function (toast) {
                             toast(globalize.translate("CopyStreamURLSuccess"));
                         });
-                    } catch (err) {
+                    }, function () {
-                        console.error("Failed to copy to clipboard");
+                        var textArea = document.createElement("textarea");
-                    }
+                        textArea.value = downloadHref;
-
+                        document.body.appendChild(textArea);
-                    document.body.removeChild(textArea);
+                        textArea.focus();
+                        textArea.select();
+                        if (document.execCommand("copy")) {
+                            require(["toast"], function (toast) {
+                                toast(globalize.translate("CopyStreamURLSuccess"));
+                            });
+                        } else {
+                            prompt(globalize.translate("CopyStreamURL"), downloadHref);
+                        }
+                        document.body.removeChild(textArea);
+                    });
                     getResolveFunction(resolve, id)();
                     break;
                 case "editsubtitles":

src/components/itemidentifier/itemidentifier.template.html

@@ -1,6 +1,6 @@
 <div class="formDialogHeader">
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-        <i class="material-icons">arrow_back</i>
+        <i class="material-icons arrow_back"></i>
     </button>
     <h3 class="formDialogHeaderTitle">${Identify}</h3>
 </div>

src/components/itemsrefresher.js

@@ -278,4 +278,4 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
     };
 
     return ItemsRefresher;
-});
+});

src/components/lazyloader/lazyloader-intersectionobserver.js

@@ -100,4 +100,4 @@ define(['require', 'browser'], function (require, browser) {
     };
 
     return LazyLoader;
-});
+});

src/components/lazyloader/lazyloader-scroll.js

@@ -186,4 +186,4 @@ define(['visibleinviewport', 'dom', 'browser'], function (visibleinviewport, dom
     };
 
     return LazyLoader;
-});
+});

src/components/libraryoptionseditor/libraryoptionseditor.js

@@ -58,16 +58,16 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
         for (var i = 0; i < plugins.length; i++) {
             var plugin = plugins[i];
             html += '<div class="listItem localReaderOption sortableOption" data-pluginname="' + plugin.Name + '">';
-            html += '<i class="listItemIcon material-icons">live_tv</i>';
+            html += '<i class="listItemIcon material-icons live_tv"></i>';
             html += '<div class="listItemBody">';
             html += '<h3 class="listItemBodyText">';
             html += plugin.Name;
             html += "</h3>";
             html += "</div>";
             if (i > 0) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_up</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>';
             } else if (plugins.length > 1) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_down</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>';
             }
             html += "</div>";
         }
@@ -120,7 +120,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             html += plugin.Name;
             html += "</h3>";
             html += "</div>";
-            i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_up</i></button>' : plugins.length > 1 && (html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_down</i></button>'), html += "</div>"
+            i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>' : plugins.length > 1 && (html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>'), html += "</div>"
         }
         html += "</div>";
         html += '<div class="fieldDescription">' + globalize.translate("LabelMetadataDownloadersHelp") + "</div>";
@@ -181,9 +181,9 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             html += "</h3>";
             html += "</div>";
             if (i > 0) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_up</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>';
             } else if (plugins.length > 1) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_down</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>';
             }
             html += "</div>";
         }
@@ -220,9 +220,9 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
             html += "</h3>";
             html += "</div>";
             if (i > 0) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_up</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_up"></i></button>';
             } else if (plugins.length > 1) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_down</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons keyboard_arrow_down"></i></button>';
             }
             html += "</div>";
         }
@@ -463,7 +463,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
 
             if (!typeOptions) {
                 typeOptions = {
-                    Type: type
+                    Type: originalTypeOption.Type
                 };
                 options.TypeOptions.push(typeOptions);
             }

src/components/libraryoptionseditor/libraryoptionseditor.template.html

@@ -147,4 +147,4 @@
         </label>
         <div class="fieldDescription checkboxFieldDescription">${SaveSubtitlesIntoMediaFoldersHelp}</div>
     </div>
-</div>
+</div>

src/components/listview/listview.css

@@ -111,6 +111,10 @@
     text-overflow: ellipsis;
 }
 
+.layout-desktop .listItemBodyText {
+    margin: 0.25em 0 0 0;
+}
+
 .listItemBodyText-nowrap {
     white-space: nowrap;
 }
@@ -162,13 +166,14 @@
 
 @media all and (max-width: 64em) {
     .listItemImage-large {
-        width: 33.75vw;
+        width: 22vw;
-        height: 22.5vw;
+        height: 16vw;
         margin-right: 0 !important;
     }
 
+    .listItemIndicators,
     .listItemImageButton {
-        font-size: 1em !important;
+        font-size: 0.6em !important;
     }
 
     .listItemBody {

src/components/listview/listview.js

@@ -262,14 +262,13 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             }
 
             if (!clickEntireItem && options.dragHandle) {
-                //html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><i class="material-icons">drag_handle</i></button>';
+                //html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><i class="material-icons drag_handle"></i></button>';
                 // Firefox and Edge are not allowing the button to be draggable
-                html += '<i class="listViewDragHandle material-icons listItemIcon listItemIcon-transparent">drag_handle</i>';
+                html += '<i class="listViewDragHandle material-icons listItemIcon listItemIcon-transparent drag_handle"></i>';
             }
 
             if (options.image !== false) {
                 var imgUrl = options.imageSource === 'channel' ? getChannelImageUrl(item, downloadWidth) : getImageUrl(item, downloadWidth);
-                console.log(imgUrl);
                 var imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
 
                 if (isLargeStyle && layoutManager.tv) {
@@ -298,7 +297,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
 
                 if (playOnImageClick) {
-                    html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><i class="material-icons listItemImageButton-icon">play_arrow</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><i class="material-icons listItemImageButton-icon play_arrow"></i></button>';
                 }
 
                 var progressHtml = indicators.getProgressBarHtml(item, {
@@ -427,7 +426,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
             html += '<div class="' + cssClass + '">';
 
-            var moreIcon = 'more_horiz';
+            var moreIcon = '&#xE5D3;';
 
             html += getTextLinesHtml(textlines, isLargeStyle);
 
@@ -471,10 +470,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 html += indicators.getTimerIndicator(item).replace('indicatorIcon', 'indicatorIcon listItemAside');
             }
 
+            html += '<div class="listViewUserDataButtons">';
+
             if (!clickEntireItem) {
 
                 if (options.addToListButton) {
-                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><i class="material-icons">playlist_add</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><i class="material-icons playlist_add"></i></button>';
                 }
 
                 if (options.moreButton !== false) {
@@ -482,7 +483,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
 
                 if (options.infoButton) {
-                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><i class="material-icons">info_outline</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><i class="material-icons info_outline"></i></button>';
                 }
 
                 if (options.rightButtons) {
@@ -491,8 +492,6 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
                 if (options.enableUserDataButtons !== false) {
 
-                    html += '<span class="listViewUserDataButtons flex align-items-center">';
-
                     var userData = item.UserData || {};
                     var likes = userData.Likes == null ? '' : userData.Likes;
 
@@ -503,10 +502,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                     if (itemHelper.canRate(item)) {
                         html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons">favorite</i></button>';
                     }
-
-                    html += '</span>';
                 }
             }
+            html += '</div>';
 
             if (enableContentWrapper) {
                 html += '</div>';

src/components/loading/loading.js

@@ -81,4 +81,4 @@ define(['components/loading/loadingLegacy', 'browser', 'css!./loading'], functio
             }
         }
     };
-});
+});

src/components/logoscreensaver/plugin.js

@@ -160,7 +160,7 @@ define(["pluginManager"], function (pluginManager) {
                     elem.classList.add("logoScreenSaver");
                     document.body.appendChild(elem);
 
-                    elem.innerHTML = '<img class="logoScreenSaverImage" src="' + pluginManager.mapPath(self, "assets/img/banner-light.png") + '" />';
+                    elem.innerHTML = '<img class="logoScreenSaverImage" src="assets/img/banner-light.png" />';
                 }
 
                 stopInterval();

src/components/maintabsmanager.js

@@ -264,4 +264,4 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
         getTabsElement: getTabsElement,
         selectedTabIndex: selectedTabIndex
     };
-});
+});

src/components/mediainfo/mediainfo.css

@@ -54,11 +54,11 @@
 }
 
 .mediaInfoCriticRatingFresh {
-    background-image: url(fresh.png);
+    background-image: url(../../assets/img/fresh.svg);
 }
 
 .mediaInfoCriticRatingRotten {
-    background-image: url(rotten.png);
+    background-image: url(../../assets/img/rotten.svg);
 }
 
 .mediaInfoProgramAttribute {

src/components/mediainfo/mediainfo.js

@@ -6,7 +6,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         var status;
 
         if (item.Type === 'SeriesTimer') {
-            return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
+            return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></i>';
         } else if (item.TimerId || item.SeriesTimerId) {
 
             status = item.Status || 'Cancelled';
@@ -20,13 +20,13 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
         if (item.SeriesTimerId) {
 
             if (status !== 'Cancelled') {
-                return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
+                return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></i>';
             }
 
-            return '<i class="material-icons mediaInfoItem mediaInfoIconItem">fiber_smart_record</i>';
+            return '<i class="material-icons mediaInfoItem mediaInfoIconItem fiber_smart_record"></i>';
         }
 
-        return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_manual_record</i>';
+        return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_manual_record"></i>';
     }
 
     function getProgramInfoHtml(item, options) {
@@ -57,7 +57,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
 
                 miscInfo.push(text);
             } catch (e) {
-                console.log("Error parsing date: " + item.StartDate);
+                console.error("error parsing date: " + item.StartDate);
             }
         }
 
@@ -143,7 +143,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                     text = datetime.toLocaleDateString(date);
                     miscInfo.push(text);
                 } catch (e) {
-                    console.log("Error parsing date: " + item.PremiereDate);
+                    console.error("error parsing date: " + item.PremiereDate);
                 }
             }
         }
@@ -176,7 +176,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                     miscInfo.push(text);
                 }
             } catch (e) {
-                console.log("Error parsing date: " + item.StartDate);
+                console.error("error parsing date: " + item.StartDate);
             }
         }
 
@@ -200,7 +200,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                         }
 
                     } catch (e) {
-                        console.log("Error parsing date: " + item.EndDate);
+                        console.error("error parsing date: " + item.EndDate);
                     }
                 }
 
@@ -248,7 +248,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                     text = globalize.translate('OriginalAirDateValue', datetime.toLocaleDateString(date));
                     miscInfo.push(text);
                 } catch (e) {
-                    console.log("Error parsing date: " + item.PremiereDate);
+                    console.error("error parsing date: " + item.PremiereDate);
                 }
             } else if (item.ProductionYear) {
                 miscInfo.push(item.ProductionYear);
@@ -267,7 +267,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
                         text = datetime.parseISO8601Date(item.PremiereDate).getFullYear();
                         miscInfo.push(text);
                     } catch (e) {
-                        console.log("Error parsing date: " + item.PremiereDate);
+                        console.error("error parsing date: " + item.PremiereDate);
                     }
                 }
             }
@@ -385,16 +385,13 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
     }
 
     function getStarIconsHtml(item) {
-
         var html = '';
 
-        var rating = item.CommunityRating;
+        if (item.CommunityRating) {
-
-        if (rating) {
             html += '<div class="starRatingContainer mediaInfoItem">';
 
             html += '<i class="material-icons starIcon">star</i>';
-            html += rating;
+            html += item.CommunityRating.toFixed(1);
             html += '</div>';
         }
 

src/components/medialibrarycreator/medialibrarycreator.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">${ButtonAddMediaLibrary}</h3>
 </div>
 

src/components/medialibraryeditor/medialibraryeditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle"></h3>
 </div>
 

src/components/metadataeditor/metadataeditor.js

@@ -477,7 +477,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             html += '</div>';
 
             if (formatString) {
-                html += '<button type="button" is="paper-icon-button-light" class="btnOpenExternalId align-self-flex-end" data-fieldid="' + id + '"><i class="material-icons">open_in_browser</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" class="btnOpenExternalId align-self-flex-end" data-fieldid="' + id + '"><i class="material-icons open_in_browser"></i></button>';
             }
             html += '</div>';
 
@@ -917,7 +917,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
         for (var i = 0; i < items.length; i++) {
             html += '<div class="listItem">';
 
-            html += '<i class="material-icons listItemIcon" style="background-color:#333;">live_tv</i>';
+            html += '<i class="material-icons listItemIcon live_tv" style="background-color:#333;"></i>';
 
             html += '<div class="listItemBody">';
 

src/components/metadataeditor/metadataeditor.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>
     <h3 class="formDialogHeaderTitle">
         ${Edit}
     </h3>
@@ -9,7 +9,7 @@
             <span>${Save}</span>
         </button>
         <button is="paper-icon-button-light" class="btnMore autoSize" tabindex="-1">
-            <i class="material-icons">more_horiz</i>
+            <i class="material-icons more_horiz"></i>
         </button>
     </div>
 </div>

src/components/metadataeditor/personeditor.js

@@ -96,4 +96,4 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
     return {
         show: show
     };
-});
+});