Merge remote-tracking branch 'upstream/master' into exit_on_back2

Conflicts: src/components/apphost.js
2024-11-17 10:58:20 -07:00 · 2020-01-27 17:47:19 +03:00 · 2020-01-27 17:47:19 +03:00 · ddf7eae55b
commit ddf7eae55b
parent 23c6b5daaf 08b4d9aa73
136 changed files with 4985 additions and 2523 deletions
--- a/.ci/azure-pipelines.yml
+++ b/.ci/azure-pipelines.yml
@ -57,3 +57,7 @@ jobs:

    - script: 'yarn run lint'
      displayName: 'Run ESLint'
+
+    - script: |
+        yarn run stylelint
+      displayName: 'Run stylelint'
--- a/.stylelintrc
+++ b/.stylelintrc
@ -0,0 +1,143 @@
+{
+  "plugins": [
+		"stylelint-no-browser-hacks/lib",
+	],
+  "rules": {
+    "at-rule-empty-line-before": [ "always", {
+      except: [
+        "blockless-after-same-name-blockless",
+        "first-nested",
+      ],
+      ignore: ["after-comment"],
+    } ],
+    "at-rule-name-case": "lower",
+    "at-rule-name-space-after": "always-single-line",
+    "at-rule-no-unknown": true,
+    "at-rule-semicolon-newline-after": "always",
+    "block-closing-brace-empty-line-before": "never",
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-newline-before": "always-multi-line",
+    "block-closing-brace-space-before": "always-single-line",
+    "block-no-empty": true,
+    "block-opening-brace-newline-after": "always-multi-line",
+    "block-opening-brace-space-after": "always-single-line",
+    "block-opening-brace-space-before": "always",
+    "color-hex-case": "lower",
+    "color-hex-length": "short",
+    "color-no-invalid-hex": true,
+    "comment-empty-line-before": [ "always", {
+      except: ["first-nested"],
+      ignore: ["stylelint-commands"],
+    } ],
+    "comment-no-empty": true,
+    "comment-whitespace-inside": "always",
+    "custom-property-empty-line-before": [ "always", {
+      except: [
+        "after-custom-property",
+        "first-nested",
+      ],
+      ignore: [
+        "after-comment",
+        "inside-single-line-block",
+      ],
+    } ],
+    "declaration-bang-space-after": "never",
+    "declaration-bang-space-before": "always",
+    "declaration-block-no-duplicate-properties": [
+      true,
+      {
+        ignore: ["consecutive-duplicates-with-different-values"]
+      }
+    ],
+    "declaration-block-no-shorthand-property-overrides": true,
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "declaration-block-semicolon-space-after": "always-single-line",
+    "declaration-block-semicolon-space-before": "never",
+    "declaration-block-single-line-max-declarations": 1,
+    "declaration-block-trailing-semicolon": "always",
+    "declaration-colon-newline-after": "always-multi-line",
+    "declaration-colon-space-after": "always-single-line",
+    "declaration-colon-space-before": "never",
+    "font-family-no-duplicate-names": true,
+    "function-calc-no-invalid": true,
+    "function-calc-no-unspaced-operator": true,
+    "function-comma-newline-after": "always-multi-line",
+    "function-comma-space-after": "always-single-line",
+    "function-comma-space-before": "never",
+    "function-linear-gradient-no-nonstandard-direction": true,
+    "function-max-empty-lines": 0,
+    "function-name-case": "lower",
+    "function-parentheses-newline-inside": "always-multi-line",
+    "function-parentheses-space-inside": "never-single-line",
+    "function-whitespace-after": "always",
+    "indentation": 4,
+    "keyframe-declaration-no-important": true,
+    "length-zero-no-unit": true,
+    "max-empty-lines": 1,
+    "media-feature-colon-space-after": "always",
+    "media-feature-colon-space-before": "never",
+    "media-feature-name-case": "lower",
+    "media-feature-name-no-unknown": true,
+    "media-feature-parentheses-space-inside": "never",
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-range-operator-space-before": "always",
+    "media-query-list-comma-newline-after": "always-multi-line",
+    "media-query-list-comma-space-after": "always-single-line",
+    "media-query-list-comma-space-before": "never",
+    "no-descending-specificity": true,
+    "no-duplicate-at-import-rules": true,
+    "no-duplicate-selectors": true,
+    "no-empty-source": true,
+    "no-eol-whitespace": true,
+    "no-extra-semicolons": true,
+    "no-invalid-double-slash-comments": true,
+    "no-missing-end-of-source-newline": true,
+    "number-leading-zero": "always",
+    "number-no-trailing-zeros": true,
+    "plugin/no-browser-hacks": true,
+    "property-case": "lower",
+    "property-no-unknown": [
+      true,
+      {
+        "ignoreProperties": [
+          "user-drag"
+        ]
+      }
+    ],
+    "rule-empty-line-before": [ "always-multi-line", {
+      except: ["first-nested"],
+      ignore: ["after-comment"],
+    } ],
+    "selector-attribute-brackets-space-inside": "never",
+    "selector-attribute-operator-space-after": "never",
+    "selector-attribute-operator-space-before": "never",
+    "selector-combinator-space-after": "always",
+    "selector-combinator-space-before": "always",
+    "selector-descendant-combinator-no-non-space": true,
+    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-space-before": "never",
+    "selector-max-empty-lines": 0,
+    "selector-pseudo-class-case": "lower",
+    "selector-pseudo-class-no-unknown": true,
+    "selector-pseudo-class-parentheses-space-inside": "never",
+    "selector-pseudo-element-case": "lower",
+    "selector-pseudo-element-colon-notation": "double",
+    "selector-pseudo-element-no-unknown": [
+      true,
+      {
+        "ignorePseudoElements": [
+          "cue"
+        ]
+      }
+    ],
+    "selector-type-case": "lower",
+    "selector-type-no-unknown": true,
+    "string-no-newline": true,
+    "unit-case": "lower",
+    "unit-no-unknown": true,
+    "value-list-comma-newline-after": "always-multi-line",
+    "value-list-comma-space-after": "always-single-line",
+    "value-list-comma-space-before": "never",
+    "value-list-max-empty-lines": 0,
+  }
+}
--- a/package.json
+++ b/package.json
@ -5,15 +5,17 @@
  "repository": "https://github.com/jellyfin/jellyfin-web",
  "license": "GPL-2.0-or-later",
  "devDependencies": {
-    "autoprefixer": "^9.7.3",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^2.1.0",
    "eslint": "^5.16.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
-    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
+    "stylelint": "^13.0.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-cli": "^3.3.9",
    "webpack-concat-plugin": "^3.0.0",
@ -28,6 +30,7 @@
    "howler": "^2.1.2",
    "jquery": "^3.4.1",
    "jstree": "^3.3.7",
+    "libass-wasm": "^2.1.1",
    "libjass": "^0.11.0",
    "native-promise-only": "^0.8.0-a",
    "requirejs": "^2.3.5",
@ -35,7 +38,6 @@
    "shaka-player": "^2.5.5",
    "sortablejs": "^1.9.0",
    "swiper": "^3.4.2",
-    "libass-wasm": "^2.1.1",
    "webcomponents.js": "^0.7.24",
    "whatwg-fetch": "^1.1.1"
  },
@ -51,13 +53,13 @@
    "Chrome 53",
    "Chrome 56",
    "Chrome 63",
-    "Explorer 11",
    "Firefox ESR"
  ],
  "scripts": {
    "serve": "webpack-dev-server --config webpack.dev.js --open",
    "build": "webpack --config webpack.prod.js",
    "lint": "eslint \"src\"",
+    "stylelint": "stylelint src/**/*.css",
    "prepare": "webpack --config webpack.prod.js"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,5 +0,0 @@
-module.exports = {
-    plugins: [
-        require('autoprefixer')
-    ]
-}
--- a/src/assets/css/dashboard.css
+++ b/src/assets/css/dashboard.css
@ -1,239 +1,291 @@
 .dashboardColumn,
 .dashboardSections {
    flex-direction: column;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
 }

 .dashboardFooter {
    margin-top: 3.5em;
-    text-align: center
+    text-align: center;
 }

 .dashboardFooter a {
-    margin: 0 .7em
+    margin: 0 0.7em;
 }

 progress {
    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
    margin: 0;
-    background: #ccc !important
+    background: #ccc !important;
 }

-progress[role]:after {
-    background-image: none
+progress[role]::after {
+    background-image: none;
 }

 progress::-webkit-progress-bar {
-    background: #ccc
+    background: #ccc;
 }

 progress::-moz-progress-bar {
-    background-color: #00a4dc
+    background-color: #00a4dc;
 }

 progress::-webkit-progress-value {
-    background-color: #00a4dc
+    background-color: #00a4dc;
 }

-progress[aria-valuenow]:before {
-    border-radius: .4em;
-    background-color: #00a4dc
+progress[aria-valuenow]::before {
+    border-radius: 0.4em;
+    background-color: #00a4dc;
 }

 .localnav {
-    margin-bottom: 2.2em !important
+    margin-bottom: 2.2em !important;
 }

@media all and (min-width: 50em) {
-
-    .type-interior>.ui-panel-content-wrap>div[data-role=content],
-    .type-interior>div[data-role=content] {
+    .type-interior > div[data-role=content],
+    .type-interior > .ui-panel-content-wrap > div[data-role=content] {
        padding-right: 0;
        padding-left: 0;
        padding-top: 0;
-        overflow: hidden
+        overflow: hidden;
    }
 }

 .dashboardDocument .dashboardEntryHeaderButton,
 .dashboardDocument .lnkManageServer {
-    display: none !important
+    display: none !important;
 }

 .adminDrawerLogo {
    padding: 1.5em 1em 1.2em;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 1em;
-    display: block
+    display: block;
 }

 .adminDrawerLogo img {
-    height: 4em
+    height: 4em;
+}
+
+a[data-role=button] {
+    background: #292929 !important;
+    background-clip: padding-box;
+    -webkit-font-smoothing: antialiased;
+    -webkit-user-select: none;
+    -webkit-background-clip: padding-box;
+    cursor: pointer !important;
+    font-family: inherit !important;
+    font-weight: 500 !important;
+    margin: 0 0.25em !important;
+    display: inline-block;
+    padding: 0.8em 1em;
+    text-align: center;
+    text-decoration: none !important;
 }

 div[data-role=controlgroup] a[data-role=button] {
    display: inline-block !important;
    margin: 0 !important;
+    -webkit-box-shadow: none !important;
    box-shadow: none !important;
-    border-radius: 0
+    -webkit-border-radius: 0;
+    border-radius: 0;
 }

 div[data-role=controlgroup] a[data-role=button]:first-child {
-    border-bottom-left-radius: .3125em;
-    border-top-left-radius: .3125em
+    -webkit-border-bottom-left-radius: 0.3125em;
+    border-bottom-left-radius: 0.3125em;
+    -webkit-border-top-left-radius: 0.3125em;
+    border-top-left-radius: 0.3125em;
 }

 div[data-role=controlgroup] a[data-role=button]:last-child {
-    border-bottom-right-radius: .3125em;
-    border-top-right-radius: .3125em
+    -webkit-border-bottom-right-radius: 0.3125em;
+    border-bottom-right-radius: 0.3125em;
+    -webkit-border-top-right-radius: 0.3125em;
+    border-top-right-radius: 0.3125em;
 }

 div[data-role=controlgroup] a[data-role=button] + a[data-role=button] {
    border-left-width: 0 !important;
-    margin: 0 0 0 -.4em !important
+    margin: 0 0 0 -0.4em !important;
 }

 div[data-role=controlgroup] a.ui-btn-active {
    background: #00a4dc !important;
-    color: #292929 !important
+    color: #292929 !important;
 }

-.header .imageLink {
-    display: inline-block
+.sessionAppInfo img {
+    max-width: 40px;
+    max-height: 40px;
+    margin-right: 8px;
 }

-.header .imageLink img {
-    height: 2.1em;
-    vertical-align: middle
-}
-
-.content-primary {
-    padding-top: 6em;
-    padding-right: 1em;
-    padding-left: 1em
-}
-
-.withTabs .content-primary {
-    padding-top: 9em !important
-}
-
-@media all and (min-width:40em) {
-    .content-primary {
-        padding-top: 7em
-    }
-
-    .withTabs .content-primary {
-        padding-top: 10em !important
-    }
-}
-
-@media all and (min-width:84em) {
-    .withTabs .content-primary {
-        padding-top: 7em !important
-    }
-}
-
-.content-primary ul:first-child {
-    margin-top: 0
-}
-
-.dashboardSections {
-    display: flex;
-    flex-direction: column
-}
-
-.dashboardColumn {
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-    flex-grow: 1
-}
-
-.activeSession:not(.playingSession) .sessionNowPlayingContent {
-    display: none
-}
-
-.dashboardSection {
-    flex-shrink: 0;
-    margin: 0 0 2em
-}
-
-.dashboardSection h3 {
-    margin-top: .5em;
-    margin-bottom: .5em
-}
-
-.activeRecordingItems>.card {
-    width: 50%
-}
-
-@media all and (min-width:70em) {
-    .dashboardSections {
-        flex-wrap: wrap;
-        flex-direction: row
-    }
-
-    .dashboardColumn-2-60 {
-        width: 46%
-    }
-
-    .dashboardColumn-2-40 {
-        width: 27%
-    }
-
-    .dashboardSection {
-        padding: 0 1.5em
-    }
-
-    .activeRecordingItems>.card {
-        width: 25%
-    }
-}
-
-.premiumBanner img {
-    position: absolute;
-    text-align: right;
-    top: 0;
-    right: 0;
-    width: 4.4em;
-    height: 4.4em
-}
-
-.wizardContent {
-    max-width: 62em;
-    padding: .5em 2em 1em;
-    margin: 0 auto;
-    background: #fff
-}
-
-.wizardNavigation {
-    text-align: right
-}
-
-.wizardContent form {
-    max-width: 100%
+.appLinks img {
+    height: 36px;
 }

 .wizardContent h2 img {
    height: 2.5em;
    vertical-align: middle;
-    margin-right: .5em;
+    margin-right: 0.5em;
    position: relative;
-    top: -.3em
+    top: -0.3em;
+}
+
+.header .imageLink {
+    display: inline-block;
+}
+
+.header .imageLink img {
+    height: 2.1em;
+    vertical-align: middle;
+}
+
+.content-primary {
+    padding-top: 6em;
+    padding-right: 1em;
+    padding-left: 1em;
+}
+
+.withTabs .content-primary {
+    padding-top: 9em !important;
+}
+
+@media all and (min-width: 40em) {
+    .content-primary {
+        padding-top: 7em;
+    }
+
+    .withTabs .content-primary {
+        padding-top: 10em !important;
+    }
+}
+
+@media all and (min-width: 84em) {
+    .withTabs .content-primary {
+        padding-top: 7em !important;
+    }
+}
+
+.content-primary ul:first-child {
+    margin-top: 0;
+}
+
+.dashboardSections {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+}
+
+.dashboardColumn {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    -webkit-flex-shrink: 0;
+    flex-shrink: 0;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    flex-grow: 1;
+}
+
+.sessionNowPlayingContent {
+    -webkit-background-size: cover;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.activeSession:not(.playingSession) .sessionNowPlayingContent {
+    display: none;
+}
+
+.dashboardSection {
+    -webkit-flex-shrink: 0;
+    flex-shrink: 0;
+    margin: 0 0 2em;
+}
+
+.dashboardSection h3 {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+.activeRecordingItems > .card {
+    width: 50%;
+}
+
+@media all and (min-width: 70em) {
+    .dashboardSections {
+        -webkit-flex-wrap: wrap;
+        flex-wrap: wrap;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+        -webkit-flex-direction: row;
+        flex-direction: row;
+    }
+
+    .dashboardColumn-2-60 {
+        width: 46%;
+    }
+
+    .dashboardColumn-2-40 {
+        width: 27%;
+    }
+
+    .dashboardSection {
+        padding: 0 1.5em;
+    }
+
+    .activeRecordingItems > .card {
+        width: 25%;
+    }
+}
+
+.wizardContent {
+    max-width: 62em;
+    padding: 0.5em 2em 1em;
+    margin: 0 auto;
+    background: #fff;
+}
+
+.wizardNavigation {
+    text-align: right;
+}
+
+.wizardContent form {
+    max-width: 100%;
 }

 .scheduledTaskPaperIconItem {
-    outline: 0 !important
+    outline: 0 !important;
 }

 .activeSession {
-    width: 100% !important
+    width: 100% !important;
 }

 .activitylogUserPhoto {
    height: 1.71em;
    width: 1.71em;
    border-radius: 100%;
-    margin-right:.5em;
+    margin-right: 0.5em;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
@ -241,22 +293,22 @@ div[data-role=controlgroup] a.ui-btn-active {

@media all and (min-width: 40em) {
    .activeSession {
-        width: 100% !important
+        width: 100% !important;
    }
 }

@media all and (min-width: 50em) {
    .activeSession {
-        width: 50% !important
+        width: 50% !important;
    }
 }

 .sessionCardFooter {
-    padding-top: .5em !important;
+    padding-top: 0.5em !important;
    padding-bottom: 1em !important;
    border-top: 1px solid #eee;
    text-align: center;
-    position: relative
+    position: relative;
 }

 .sessionAppInfo {
@ -265,22 +317,11 @@ div[data-role=controlgroup] a.ui-btn-active {
 }

 .sessionCardButtons {
-    min-height: 2.7em
+    min-height: 2.7em;
 }

 .sessionCardButton {
-    margin: 0
-}
-
-.sessionNowPlayingContent {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0
+    margin: 0;
 }

 .sessionNowPlayingInnerContent {
@ -289,23 +330,23 @@ div[data-role=controlgroup] a.ui-btn-active {
    left: 0;
    right: 0;
    bottom: 0;
-    font-weight: 400
+    font-weight: 400;
 }

 .sessionNowPlayingContent-withbackground + .sessionNowPlayingInnerContent {
    color: #fff !important;
-    background: rgba(0, 0, 0, .7)
+    background: rgba(0, 0, 0, 0.7);
 }

 .sessionAppName {
    vertical-align: top;
-    max-width: 200px
+    max-width: 200px;
 }

 .sessionNowPlayingDetails {
    display: flex;
    position: absolute;
-    bottom: 0px;
+    bottom: 0;
    width: 100%;
 }

@ -315,12 +356,6 @@ div[data-role=controlgroup] a.ui-btn-active {
    padding: 0.8em 0.5em;
 }

-.sessionAppInfo img {
-    max-width: 40px;
-    max-height: 40px;
-    margin-right: 8px;
-}
-
 .sessionNowPlayingTime {
    flex-shrink: 0;
    align-self: flex-end;
@ -332,6 +367,13 @@ div[data-role=controlgroup] a.ui-btn-active {
    white-space: nowrap;
 }

+.playbackProgress,
+.transcodingProgress {
+    margin: 0;
+    width: 100%;
+    background: transparent !important;
+}
+
 .activeSession .playbackProgress,
 .activeSession .transcodingProgress {
    position: absolute;
@ -342,13 +384,6 @@ div[data-role=controlgroup] a.ui-btn-active {
    width: 100%;
 }

-.playbackProgress,
-.transcodingProgress {
-    margin: 0px;
-    width: 100%;
-    background: transparent !important;
-}
-
 .playbackProgress > div {
    z-index: 1000;
    background-color: #00a4dc;
@ -360,65 +395,65 @@ div[data-role=controlgroup] a.ui-btn-active {

@media all and (max-width: 34.375em) {
    .sessionAppName {
-        max-width: 160px
+        max-width: 160px;
    }
 }

@media all and (max-width: 31.25em) {
    .sessionAppName {
-        max-width: 150px
+        max-width: 150px;
    }
 }

 .disabledUser {
-    filter: grayscale(100%)
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
 }

 .disabledUserBanner {
-    margin: 0 0 2em
+    margin: 0 0 2em;
 }

 .appLinks a {
-    text-decoration: none !important
+    text-decoration: none !important;
 }

 .appLinks a + a {
-    margin-left: 5px
+    margin-left: 5px;
 }

-.appLinks img {
-    height: 36px
+@-webkit-keyframes rotating {
+    from {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
    }

-a[data-role=button] {
-    background-clip: padding-box;
-    cursor: pointer !important;
-    font-family: inherit !important;
-    font-weight: 500 !important;
-    margin: 0 .25em !important;
-    display: inline-block;
-    padding: .8em 1em;
-    text-align: center;
-    text-decoration: none !important;
-    background: #292929 !important;
+    to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
 }

@keyframes rotating {
    from {
-        transform: rotate(0)
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
    }

    to {
-        transform: rotate(360deg)
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
    }
 }

 .rotatingCircle {
-    animation: rotating 2s linear infinite
+    -webkit-animation: rotating 2s linear infinite;
+    animation: rotating 2s linear infinite;
 }

 .pluginPreviewImg {
-    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
+    -webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
+    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
 }

 .ui-bar-a {
--- a/src/assets/css/detailtable.css
+++ b/src/assets/css/detailtable.css
@ -1,7 +1,7 @@
 .detailTableBodyCell,
 .detailTableHeaderCell {
    border-spacing: 0;
-    padding: .4em
+    padding: 0.4em;
 }

 .detailTable {
@ -9,11 +9,11 @@
    border-spacing: 0;
    text-align: left;
    width: 100%;
-    margin: 0 auto
+    margin: 0 auto;
 }

 .detailTableHeaderCell {
    font-weight: 700;
    text-align: left;
-    vertical-align: top
+    vertical-align: top;
 }
--- a/src/assets/css/fonts.css
+++ b/src/assets/css/fonts.css
@ -1,13 +1,13 @@
 html {
    font-family: -apple-system, "Helvetica", system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
-}
-
-html {
    font-size: 93%;
+    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
 }

-h1, h2, h3 {
+h1,
+h2,
+h3 {
    /* For better bolding, since Helvetica does not support 500 weight, and 600 is too thick */
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
 }
--- a/src/assets/css/ios.css
+++ b/src/assets/css/ios.css
@ -1,8 +1,8 @@
 html {
-    font-size: 82% !important
+    font-size: 82% !important;
 }

 .formDialogFooter {
    position: static !important;
-    margin: 0 -1em !important
+    margin: 0 -1em !important;
 }
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
--- a/src/assets/css/livetv.css
+++ b/src/assets/css/livetv.css
@ -1,9 +1,9 @@
 .guideVerticalScroller {
-    padding-bottom: 15em
+    padding-bottom: 15em;
 }

@media all and (min-width: 62.5em) {
    #guideTab {
-        padding-left: .5em
+        padding-left: 0.5em;
    }
 }
--- a/src/assets/css/metadataeditor.css
+++ b/src/assets/css/metadataeditor.css
@ -1,50 +1,54 @@
 .editPageSidebar {
-    display: block
+    display: block;
 }

 .editPageSidebar-withcontent {
-    display: none
+    display: none;
 }

 .libraryTree {
-    margin-left: .25em
+    margin-left: 0.25em;
 }

 .offlineEditorNode {
-    color: #c33
+    color: #c33;
 }

 .editorNode img {
    height: 18px;
-    margin: 0 .35em;
+    margin: 0 0.35em;
    vertical-align: middle;
    position: relative;
-    top: -2px
+    top: -2px;
 }

 .jstree-anchor {
-    font-weight: 400 !important
+    font-weight: 400 !important;
 }

 .jstree-wholerow-hovered {
    background: #38c !important;
+    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
-    box-shadow: none !important
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important;
 }

 .jstree-default .jstree-hovered {
    background: 0 0 !important;
+    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
+    -webkit-box-shadow: none !important;
    box-shadow: none !important;
-    color: #fff !important
+    color: #fff !important;
 }

 .jstree-default .jstree-wholerow-clicked {
-    background: #00a4dc !important
+    background: #00a4dc !important;
 }

 .metadataSidebarIcon {
-    margin-right: .4em
+    margin-right: 0.4em;
 }

@media all and (min-width: 50em) {
@ -55,21 +59,21 @@
        left: 0;
        width: 30%;
        border-right: 1px solid #555;
-        display: block
+        display: block;
    }

    .editPageInnerContent {
        float: right;
-        width: 68.5%
+        width: 68.5%;
    }
 }

@media all and (min-width: 112.5em) {
    .editPageSidebar {
-        width: 25%
+        width: 25%;
    }

    .editPageInnerContent {
-        width: 73.5%
+        width: 73.5%;
    }
 }
--- a/src/assets/css/scrollstyles.css
+++ b/src/assets/css/scrollstyles.css
@ -1,5 +1,6 @@
 .scrollX {
    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
    overflow-y: hidden;
    white-space: nowrap;
 }
@ -8,39 +9,50 @@
    scroll-behavior: smooth;
 }

-.hiddenScrollX, .layout-tv .scrollX {
-    scrollbar-width: none;
+.hiddenScrollX,
+.layout-tv .scrollX {
+    -ms-overflow-style: none;
 }

 .hiddenScrollX-forced {
-    scrollbar-width: none;
+    overflow: -moz-scrollbars-none;
 }

-.hiddenScrollX::-webkit-scrollbar, .layout-tv .scrollX::-webkit-scrollbar {
+.hiddenScrollX::-webkit-scrollbar,
+.layout-tv .scrollX::-webkit-scrollbar {
    height: 0 !important;
    display: none;
 }

 .scrollY {
    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
 }

 .smoothScrollY {
    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    scroll-behavior: smooth;
 }

-.hiddenScrollY, .layout-tv .smoothScrollY {
-    scrollbar-width: none;
+.hiddenScrollY,
+.layout-tv .smoothScrollY {
+    -ms-overflow-style: none;
+
+    /* Can't do this because it not only hides the scrollbar, but also prevents scrolling */
+
+    /* overflow: -moz-scrollbars-none; */
 }

 .hiddenScrollY-forced {
-    scrollbar-width: none;
+    overflow: -moz-scrollbars-none;
 }

-.hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar, .layout-tv .scrollY::-webkit-scrollbar {
+.hiddenScrollY::-webkit-scrollbar,
+.layout-tv .smoothScrollY::-webkit-scrollbar,
+.layout-tv .scrollY::-webkit-scrollbar {
    width: 0 !important;
    display: none;
 }
--- a/src/assets/css/site.css
+++ b/src/assets/css/site.css
@ -2,7 +2,7 @@ body,
 html {
    margin: 0;
    padding: 0;
-    height: 100%
+    height: 100%;
 }

 .backgroundContainer {
@ -11,52 +11,58 @@ html {
    left: 0;
    right: 0;
    bottom: 0;
-    contain: strict
+    contain: strict;
 }

 html {
-    line-height: 1.35
+    line-height: 1.35;
 }

 .layout-mobile,
 .layout-tv {
-    user-select: none
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }

 body {
    overflow-x: hidden;
    background-color: transparent !important;
+    -webkit-font-smoothing: antialiased;
 }

 .mainAnimatedPage {
-    contain: style size !important
+    contain: style size !important;
 }

 .pageContainer {
-    overflow-x: visible !important
+    overflow-x: visible !important;
 }

 .bodyWithPopupOpen {
-    overflow-y: hidden !important
+    overflow-y: hidden !important;
 }

 div[data-role=page] {
-    outline: 0
+    outline: 0;
 }

 .pageTitle {
    margin-top: 0;
-    font-family: inherit
+    font-family: inherit;
 }

 .fieldDescription {
-    padding-left: .15em;
+    padding-left: 0.15em;
    font-weight: 400;
-    white-space: normal !important
+    white-space: normal !important;
 }

 .fieldDescription + .fieldDescription {
-    margin-top: .3em
+    margin-top: 0.3em;
 }

 .content-primary,
@ -70,18 +76,18 @@ div[data-role=page] {
@media all and (min-width: 50em) {
    .readOnlyContent,
    form {
-        max-width: 54em
+        max-width: 54em;
    }
 }

 .headerHelpButton {
    margin-left: 1.25em !important;
-    padding-bottom: .4em !important;
-    padding-top: .4em !important
+    padding-bottom: 0.4em !important;
+    padding-top: 0.4em !important;
 }

 .mediaInfoContent {
    margin-left: auto;
    margin-right: auto;
-    width: 85%
+    width: 85%;
 }
--- a/src/assets/css/videoosd.css
+++ b/src/assets/css/videoosd.css
@ -1,6 +1,9 @@
 .chapterThumbTextContainer,
 .videoOsdBottom {
    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
 }

 .osdPoster img,
@ -8,52 +11,59 @@
 .videoOsdBottom {
    bottom: 0;
    left: 0;
-    right: 0
+    right: 0;
 }

 .osdHeader {
-    transition: opacity .3s ease-out;
+    -webkit-transition: opacity 0.3s ease-out;
+    -o-transition: opacity 0.3s ease-out;
+    transition: opacity 0.3s ease-out;
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.7) !important;
+    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #eee !important;
 }

 .osdHeader-hidden {
-    opacity: 0
+    opacity: 0;
 }

 .osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton) {
-    display: none
+    display: none;
 }

 .chapterThumbContainer {
+    -webkit-box-shadow: 0 0 1.9vh #000;
    box-shadow: 0 0 1.9vh #000;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
    flex-grow: 1;
-    position: relative
+    position: relative;
 }

 .chapterThumb {
    background-position: center center;
+    -webkit-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    border: 0;
    height: 20vh;
-    min-width: 20vh
+    min-width: 20vh;
 }

@media all and (orientation: portrait) {
    .chapterThumb {
        height: 30vw;
-        min-width: 30vw
+        min-width: 30vw;
    }
 }

@media all and (max-height: 50em) and (orientation: landscape) {
    .chapterThumb {
        height: 30vh;
-        min-width: 30vh
+        min-width: 30vh;
    }
 }

@ -62,161 +72,218 @@
    bottom: 0;
    left: 0;
    right: 0;
-    background: rgba(0, 0, 0, .7);
-    padding: .25em .5em;
-    user-select: none
+    background: rgba(0, 0, 0, 0.7);
+    padding: 0.25em 0.5em;
+    user-select: none;
 }

 .chapterThumbText {
-    padding: .25em 0;
+    padding: 0.25em 0;
    margin: 0;
-    opacity: 1
+    opacity: 1;
 }

 .chapterThumbText-dim {
-    opacity: .6
+    opacity: 0.6;
 }

 .videoOsdBottom {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 1%;
+    display: -webkit-box;
+    display: -webkit-flex;
    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: row;
    flex-direction: row;
    will-change: opacity;
+    -webkit-transition: opacity 0.3s ease-out;
+    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
    color: #fff;
-    user-select: none
+    user-select: none;
+    -webkit-touch-callout: none;
 }

 .videoOsdBottom-hidden {
-    opacity: 0
+    opacity: 0;
 }

 .osdControls {
-    flex-grow: 1
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    flex-grow: 1;
 }

 .videoOsdBottom .buttons {
-    padding: .25em 0 0;
+    padding: 0.25em 0 0;
+    display: -webkit-box;
+    display: -webkit-flex;
    display: flex;
+    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
-    align-items: center
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
 }

 .osdVolumeSliderContainer {
    width: 9em;
-    flex-grow: 1
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    flex-grow: 1;
 }

 .osdMediaInfo,
 .volumeButtons {
    display: flex;
+    display: -webkit-box;
+    display: -webkit-flex;
    align-items: center;
+    -webkit-box-align: center;
 }

 .volumeButtons {
-    margin: 0 .5em 0 auto;
+    margin: 0 0.5em 0 auto;
    display: flex;
-    align-items: center
+    -webkit-align-items: center;
+    align-items: center;
 }

 .osdTimeText {
    margin-left: 1em;
-    user-select: none
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }

 .osdPoster {
    width: 10%;
    position: relative;
-    margin-right: .5em
+    margin-right: 0.5em;
 }

 .osdPoster img {
    position: absolute;
    height: auto;
    width: 100%;
+    -webkit-box-shadow: 0 0 1.9vh #000;
    box-shadow: 0 0 1.9vh #000;
-    border: .08em solid #222;
+    border: 0.08em solid #222;
    user-drag: none;
-    user-select: none
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
 }

 .osdTitle,
 .osdTitleSmall {
-    margin: 0 1em 0 0
+    margin: 0 1em 0 0;
 }

 .osdMediaInfo {
    display: flex;
-    align-items: center
+    -webkit-align-items: center;
+    align-items: center;
 }

 .osdSecondaryMediaInfo {
-    padding-left: .6em !important
+    padding-left: 0.6em !important;
 }

 .osdTextContainer {
+    display: -webkit-box;
+    display: -webkit-flex;
    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
    align-items: center;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
    user-select: none;
-    margin-bottom: .7em;
-    padding-left: .5em
+    margin-bottom: 0.7em;
+    padding-left: 0.5em;
 }

 .osdMainTextContainer {
-    align-items: baseline
+    -webkit-box-align: baseline;
+    -webkit-align-items: baseline;
+    align-items: baseline;
 }

 .osdMediaStatus {
    margin-left: auto;
 }

+@-moz-keyframes spin {
+    100% {
+        -moz-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes spin {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
@keyframes spin {
    100% {
+        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
 }

 .osdMediaStatus .animate {
+    -webkit-animation: spin 4s linear infinite;
+    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
 }

 .pageContainer {
    top: 0;
-    position: fixed
+    position: fixed;
 }

@media all and (max-width: 30em) {
-
    .btnFastForward,
    .btnRewind,
    .osdMediaInfo,
    .osdPoster {
-        display: none !important
+        display: none !important;
    }
 }

@media all and (max-width: 33.75em) {
    .videoOsdBottom .paper-icon-button-light {
-        margin: 0
+        margin: 0;
    }
 }

@media all and (max-width: 43em) {
    .videoOsdBottom .volumeButtons,
    .osdMediaStatus span {
-        display: none !important
+        display: none !important;
    }
 }
+
@media all and (max-width: 50em) {
-    .videoOsdBottom .btnFastForward, .videoOsdBottom .btnRewind {
-        display: none !important
+    .videoOsdBottom .btnFastForward,
+    .videoOsdBottom .btnRewind {
+        display: none !important;
    }
 }

@media all and (max-width: 75em) {
    .videoOsdBottom .endsAtText {
-        display: none !important
+        display: none !important;
    }
 }
--- a/src/assets/img/banner-dark.png
+++ b/src/assets/img/banner-dark.png
--- a/src/assets/img/banner-light.png
+++ b/src/assets/img/banner-light.png
--- a/src/assets/img/icon-transparent.png
+++ b/src/assets/img/icon-transparent.png
--- a/src/bundle.js
+++ b/src/bundle.js
@ -17,7 +17,7 @@ _define("fetch", function() {
 });

 // flvjs
-var flvjs = require("flv.js").default;
+var flvjs = require("flv.js/dist/flv").default;
 _define("flvjs", function() {
    return flvjs;
 });
--- a/src/components/actionsheet/actionsheet.css
+++ b/src/components/actionsheet/actionsheet.css
@ -4,7 +4,7 @@
    padding: 0;
    border: none;
    max-height: 84%;
-    border-radius: .1em !important;
+    border-radius: 0.1em !important;
 }

 .actionsheet-not-fullscreen {
@ -24,7 +24,7 @@

 .actionSheetContent {
    margin: 0 !important;
-    padding: .4em 0 !important;
+    padding: 0.4em 0 !important;
    flex-direction: column;
    display: flex;
    justify-content: center;
@ -45,7 +45,7 @@
 }

 .actionsheetListItemBody {
-    padding: .4em 1em .4em .6em !important;
+    padding: 0.4em 1em 0.4em 0.6em !important;
 }

 .actionSheetItemText {
@ -59,13 +59,13 @@
 }

 .actionSheetItemAsideText {
-    opacity: .7;
+    opacity: 0.7;
    font-size: 90%;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    margin-left: 5em;
-    margin-right: .5em;
+    margin-right: 0.5em;
 }

 .actionSheetScroller {
@ -83,14 +83,14 @@
 }

 .actionsheetDivider {
-    height: .07em;
-    margin: .25em 0;
+    height: 0.07em;
+    margin: 0.25em 0;
    flex-shrink: 0;
 }

 .actionSheetTitle {
-    margin: .6em 0 .7em !important;
-    padding: 0 .9em;
+    margin: 0.6em 0 0.7em !important;
+    padding: 0 0.9em;
    flex-grow: 0;
 }

@ -100,7 +100,7 @@
 }

 .actionsheetMenuItemIcon {
-    margin: 0 .85em 0 .45em !important;
+    margin: 0 0.85em 0 0.45em !important;
    padding: 0 !important;
 }

@ -110,6 +110,6 @@

 .btnCloseActionSheet {
    position: fixed;
-    top: .75em;
-    left: .5em;
+    top: 0.75em;
+    left: 0.5em;
 }
--- a/src/components/alphapicker/style.css
+++ b/src/components/alphapicker/style.css
@ -35,16 +35,15 @@
    font-size: inherit;
    min-width: initial;
    margin: 0;
-    padding: .1em .4em;
+    padding: 0.1em 0.4em;
    width: auto;
-    border-radius: .1em;
+    border-radius: 0.1em;
    font-weight: normal;
    flex-shrink: 0;
    flex-grow: 1;
 }

@media all and (max-height: 50em) {
-
    .alphaPicker-fixed {
        bottom: 5em;
    }
@ -56,14 +55,12 @@
 }

@media all and (max-height: 49em) {
-
    .alphaPicker-vertical {
        font-size: 94%;
    }
 }

@media all and (max-height: 44em) {
-
    .alphaPicker-vertical {
        font-size: 90%;
    }
@ -75,14 +72,12 @@
 }

@media all and (max-height: 37em) {
-
    .alphaPicker-vertical {
        font-size: 82%;
    }
 }

@media all and (max-height: 32em) {
-
    .alphaPicker-vertical {
        font-size: 74%;
    }
@ -113,15 +108,14 @@
 }

 .alphaPicker-fixed-left {
-    left: .4em;
+    left: 0.4em;
 }

 .alphaPicker-fixed-right {
-    right: .4em;
+    right: 0.4em;
 }

@media all and (min-width: 62.5em) {
-
    .alphaPicker-fixed-left {
        left: 1em;
    }
@ -132,7 +126,6 @@
 }

@media all and (max-height: 31.25em) {
-
    .alphaPicker-fixed {
        display: none !important;
    }
--- a/src/components/apphost.js
+++ b/src/components/apphost.js
@ -168,23 +168,25 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
            return false;
        }

-        var savedResult = appSettings.get(htmlMediaAutoplayAppStorageKey);
-        return "true" === savedResult || "false" !== savedResult && null;
+        return true;
    }

-    function cueSupported() {
+    function supportsCue() {
        try {
            var video = document.createElement("video");
            var style = document.createElement("style");
+
            style.textContent = "video::cue {background: inherit}";
            document.body.appendChild(style);
            document.body.appendChild(video);
+
            var cue = window.getComputedStyle(video, "::cue").background;
            document.body.removeChild(style);
            document.body.removeChild(video);
+
            return !!cue.length;
        } catch (err) {
-            console.log("Error detecting cue support:" + err);
+            console.log("error detecting cue support: " + err);
            return false;
        }
    }
@ -204,8 +206,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
        }
    }

-    var htmlMediaAutoplayAppStorageKey = "supportshtmlmediaautoplay0";
-
    var supportedFeatures = function () {
        var features = [];

@ -280,7 +280,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
        //features.push("multiserver");
        features.push("screensaver");

-        if (!browser.orsay && !browser.tizen && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || cueSupported())) {
+        if (!browser.orsay && !browser.tizen && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) {
            features.push("subtitleappearancesettings");
        }

@ -299,18 +299,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
        return features;
    }();

-    if (supportedFeatures.indexOf("htmlvideoautoplay") === -1 && supportsHtmlMediaAutoplay() !== false) {
-        require(["autoPlayDetect"], function (autoPlayDetect) {
-            autoPlayDetect.supportsHtmlMediaAutoplay().then(function () {
-                appSettings.set(htmlMediaAutoplayAppStorageKey, "true");
-                supportedFeatures.push("htmlvideoautoplay");
-                supportedFeatures.push("htmlaudioautoplay");
-            }, function () {
-                appSettings.set(htmlMediaAutoplayAppStorageKey, "false");
-            });
-        });
-    }
-
    /**
      * Do exit according to platform
      */
@ -435,7 +423,9 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
            }
        }
    };
+
    var doc = self.document;
+    var isHidden = false;

    if (doc) {
        if (void 0 !== doc.visibilityState) {
@ -459,8 +449,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
        }
    }

-    var isHidden = false;
-
    if (doc) {
        doc.addEventListener(visibilityChange, function () {
            if (document[visibilityState]) {
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@ -1,23 +1,24 @@
+button {
+    -webkit-border-fit: border !important;
+}
+
 button::-moz-focus-inner {
    padding: 0;
    border: 0;
 }

-button {
-    -webkit-border-fit: border !important;
-}
-
 .card {
    border: 0;
    font-size: inherit !important;
    font-family: inherit !important;
    text-transform: none;
-    background-color: transparent !important;
    background: none !important;
+    background-color: transparent !important;
    margin: 0;
    padding: 0;
    display: block;
    color: inherit !important;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none !important;
    cursor: pointer;
    contain: layout style;
@ -54,17 +55,27 @@ button {
    contain: layout style;
 }

-.cardPadder-backdrop, .cardPadder-mixedBackdrop, .cardPadder-smallBackdrop, .cardPadder-overflowBackdrop, .cardPadder-overflowSmallBackdrop {
+.cardPadder-backdrop,
+.cardPadder-mixedBackdrop,
+.cardPadder-smallBackdrop,
+.cardPadder-overflowBackdrop,
+.cardPadder-overflowSmallBackdrop {
    padding-bottom: 56.25%;
    contain: strict;
 }

-.cardPadder-square, .cardPadder-mixedSquare, .cardPadder-overflowSquare, .overflowSquareCard-textCardPadder {
+.cardPadder-square,
+.cardPadder-mixedSquare,
+.cardPadder-overflowSquare,
+.overflowSquareCard-textCardPadder {
    padding-bottom: 100%;
    contain: strict;
 }

-.cardPadder-portrait, .cardPadder-mixedPortrait, .cardPadder-overflowPortrait, .overflowPortraitCard-textCardPadder {
+.cardPadder-portrait,
+.cardPadder-mixedPortrait,
+.cardPadder-overflowPortrait,
+.overflowPortraitCard-textCardPadder {
    padding-bottom: 150%;
    contain: strict;
 }
@ -79,23 +90,26 @@ button {
    margin: 0.6em;
    transition: none;
    border: 0 solid transparent;
+
+    /* These both are needed in case cardBox is a button */
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none !important;
    contain: layout;
    contain: style;
 }

+.card.show-animation .cardBox {
+    will-change: transform;
+    transition: transform 200ms ease-out;
+}
+
 .card.show-focus:not(.show-animation) .cardBox {
-    margin: .4em;
+    margin: 0.4em;
 }

 .card.show-focus:not(.show-animation) .cardBox.visualCardBox,
 .card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
-    border: .5em solid transparent;
-}
-
-.card.show-animation .cardBox {
-    will-change: transform;
-    transition: transform 200ms ease-out;
+    border: 0.5em solid transparent;
 }

 .card.show-animation:focus > .cardBox {
@ -120,7 +134,7 @@ button {

 .btnCardOptions {
    position: absolute;
-    bottom: .25em;
+    bottom: 0.25em;
    right: 0;
    margin: 0 !important;
    z-index: 1;
@ -131,8 +145,8 @@ button {
    position: absolute;
    align-items: center;
    justify-content: center;
-    top: .3em;
-    left: .3em;
+    top: 0.3em;
+    left: 0.3em;
    text-align: center;
    vertical-align: middle;
    width: 1.6em;
@ -146,12 +160,14 @@ button {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
+    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-clip: content-box !important;
    color: inherit;
+
    /* This is only needed for scalable cards */
    height: 100%;
    contain: strict;
@ -173,12 +189,16 @@ button {
    left: 0;
    right: 0;
    bottom: 0;
+
    /* Needed in case this is a button */
    display: block;
+
    /* Needed in case this is a button */
    margin: 0 !important;
+
    /* Needed in safari */
    height: 100%;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none !important;
    contain: strict;
 }
@ -207,10 +227,6 @@ button {
    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
 }

-.cardImageContainer {
-    display: flex;
-}
-
 .cardImage {
    position: absolute;
    top: 0;
@ -226,6 +242,7 @@ button {
 .cardImage-img {
    max-height: 100%;
    max-width: 100%;
+
    /* This is simply for lazy image purposes, to ensure the image is visible sooner when scrolling */
    min-height: 70%;
    min-width: 70%;
@ -252,17 +269,17 @@ button {
 }

 .cardFooter {
-    padding: .3em .3em .5em .3em;
+    padding: 0.3em 0.3em 0.5em 0.3em;
    position: relative;
 }

 .visualCardBox {
    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
-    border-radius: .145em;
+    border-radius: 0.145em;
 }

 .innerCardFooter {
-    background: rgba(0,0,0,.7);
+    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 0;
    left: 0;
@ -282,7 +299,7 @@ button {
 }

 .cardText {
-    padding: .06em .5em;
+    padding: 0.06em 0.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
@ -294,7 +311,24 @@ button {
 }

 .cardText-first {
-    padding-top: .24em;
+    padding-top: 0.24em;
+}
+
+.textActionButton {
+    border: 0 !important;
+    background: transparent;
+    padding: 0 !important;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    outline: none !important;
+    color: inherit;
+    vertical-align: middle;
+    font-family: inherit;
+    font-size: inherit;
+}
+
+.textActionButton:hover {
+    text-decoration: underline;
 }

 .cardText > .textActionButton {
@ -304,7 +338,7 @@ button {
 }

 .innerCardFooter > .cardText {
-    padding: .3em .5em;
+    padding: 0.3em 0.5em;
 }

 .cardFooter-withlogo {
@ -336,23 +370,6 @@ button {
    text-align: center;
 }

-.textActionButton {
-    border: 0 !important;
-    background: transparent;
-    border: 0 !important;
-    padding: 0 !important;
-    cursor: pointer;
-    outline: none !important;
-    color: inherit;
-    vertical-align: middle;
-    font-family: inherit;
-    font-size: inherit;
-}
-
-.textActionButton:hover {
-    text-decoration: underline;
-}
-
 .cardImageIcon {
    font-size: 5em;
    color: inherit;
@ -360,12 +377,12 @@ button {

 .cardImageIcon-small {
    font-size: 3em;
-    margin-bottom: .1em;
+    margin-bottom: 0.1em;
 }

 .cardIndicators {
-    right: .225em;
-    top: .225em;
+    right: 0.225em;
+    top: 0.225em;
    position: absolute;
    display: flex;
    align-items: center;
@ -382,16 +399,16 @@ button {
 }

 .programAttributeIndicator {
-    padding: .18em .5em;
+    padding: 0.18em 0.5em;
    color: #fff;
    font-weight: 500;
 }

 .cardOverlayButton {
-    color: rgba(255, 255, 255, .76);
+    color: rgba(255, 255, 255, 0.76);
    margin: 0;
    z-index: 1;
-    padding: .75em;
+    padding: 0.75em;
    font-size: 88%;
 }

@ -402,7 +419,7 @@ button {
 }

 .cardOverlayButtonIcon {
-    background-color: rgba(0,0,0,.7) !important;
+    background-color: rgba(0, 0, 0, 0.7) !important;
    border-radius: 100em;
    width: 1.5em !important;
    height: 1.5em !important;
@ -424,10 +441,10 @@ button {
    height: 2.6em;
    top: 50%;
    left: 50%;
-    background-color: rgba(0,0,0,.5) !important;
-    border: .06em solid rgba(255,255,255,.6);
-    padding: .38em !important;
-    color: rgba(255, 255, 255, .76);
+    background-color: rgba(0, 0, 0, 0.5) !important;
+    border: 0.06em solid rgba(255, 255, 255, 0.6);
+    padding: 0.38em !important;
+    color: rgba(255, 255, 255, 0.76);
    transition: transform 200ms ease-out;
 }

@ -474,13 +491,15 @@ button {
        width: 33.333333333333333333333333333333%;
    }

-    .squareCard, .portraitCard {
+    .squareCard,
+    .portraitCard {
        width: 33.333333333333333333333333333333%;
    }
 }

@media (min-width: 43.75em) {
-    .squareCard, .portraitCard {
+    .squareCard,
+    .portraitCard {
        width: 25%;
    }
 }
@ -496,7 +515,8 @@ button {
        width: 50%;
    }

-    .squareCard, .portraitCard {
+    .squareCard,
+    .portraitCard {
        width: 20%;
    }

@ -516,7 +536,8 @@ button {
        width: 25%;
    }

-    .squareCard, .portraitCard {
+    .squareCard,
+    .portraitCard {
        width: 16.666666666666666666666666666667%;
    }

@ -529,9 +550,9 @@ button {
    }
 }

-
@media (min-width: 87.5em) {
-    .squareCard, .portraitCard {
+    .squareCard,
+    .portraitCard {
        width: 14.285714285714285714285714285714%;
    }

@ -549,13 +570,15 @@ button {
        width: 20%;
    }

-    .squareCard, .portraitCard {
+    .squareCard,
+    .portraitCard {
        width: 12.5%;
    }
 }

@media (min-width: 120em) {
-    .squareCard, .portraitCard {
+    .squareCard,
+    .portraitCard {
        width: 11.111111111111111111111111111111%;
    }
 }
@ -565,7 +588,8 @@ button {
        width: 25%;
    }

-    .squareCard, .portraitCard {
+    .squareCard,
+    .portraitCard {
        width: 10%;
    }
 }
@ -596,7 +620,8 @@ button {
    width: 72vw;
 }

-.overflowSquareCard, .overflowPortraitCard {
+.overflowSquareCard,
+.overflowPortraitCard {
    width: 40vw;
 }

@ -621,29 +646,34 @@ button {
 }

@media (min-width: 43.75em) {
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+    .overflowPortraitCard {
        width: 23.1vw;
    }
 }

@media (min-width: 48.125em) {
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+    .overflowSmallBackdropCard {
        width: 30vw;
    }
 }

@media (orientation: landscape) {
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+    .overflowSmallBackdropCard {
        width: 30vw;
    }

-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+    .overflowPortraitCard {
        width: 23.1vw;
    }
 }

@media (orientation: landscape) and (min-width: 48.125em) {
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+    .overflowSmallBackdropCard {
        width: 23.1vw;
    }
 }
@ -655,55 +685,60 @@ button {
 }

@media (min-width: 50em) {
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+    .overflowPortraitCard {
        width: 18.5vw;
    }
 }

@media (min-width: 75em) {
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+    .overflowSmallBackdropCard {
        width: 23.1vw;
    }

-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+    .overflowPortraitCard {
        width: 15.5vw;
    }
 }

@media (min-width: 87.5em) {
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+    .overflowPortraitCard {
        width: 13.3vw;
    }
 }

@media (min-width: 100em) {
-
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+    .overflowSmallBackdropCard {
        width: 18.7vw;
    }

-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+    .overflowPortraitCard {
        width: 11.6vw;
    }
 }

@media (min-width: 120em) {
-
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+    .overflowPortraitCard {
        width: 10.3vw;
    }
 }

@media (min-width: 131.25em) {
-
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+    .overflowPortraitCard {
        width: 9.3vw;
    }
 }

@media (min-width: 156.25em) {
-
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+    .overflowSmallBackdropCard {
        width: 15.6vw;
    }
 }
@ -720,7 +755,8 @@ button {
    padding-bottom: 87.75%;
 }

-.itemsContainer-tv > .overflowSquareCard, .itemsContainer-tv > .overflowPortraitCard {
+.itemsContainer-tv > .overflowSquareCard,
+.itemsContainer-tv > .overflowPortraitCard {
    width: 15.6vw;
 }

@ -731,7 +767,7 @@ button {
 .cardOverlayContainer {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
-    transition: opacity .2s;
+    transition: opacity 0.2s;
    position: absolute;
    top: 0;
    left: 0;
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@ -1018,7 +1018,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                return text;
            }

-            var html = '<button ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' type="button" class="itemAction textActionButton" data-action="link">';
+            var html = '<button ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' type="button" class="itemAction textActionButton" title="' + text + '" data-action="link">';
            html += text;
            html += '</button>';

--- a/src/components/dialogHelper/dialoghelper.css
+++ b/src/components/dialogHelper/dialoghelper.css
@ -15,10 +15,12 @@

 .dialog {
    margin: 0;
-    border-radius: .2em;
+    border-radius: 0.2em;
+    -webkit-font-smoothing: antialiased;
    border: 0;
    padding: 0;
    will-change: transform, opacity;
+
    /* Strict does not work well with actionsheet */
    contain: style paint;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
@ -50,13 +52,13 @@

    to {
        opacity: 0;
-        transform: scale(.5);
+        transform: scale(0.5);
    }
 }

@keyframes scaleup {
    from {
-        transform: scale(.5);
+        transform: scale(0.5);
        opacity: 0;
    }

@ -77,7 +79,6 @@
 }

@keyframes fadeout {
-
    from {
        opacity: 1;
    }
@ -100,7 +101,6 @@
 }

@keyframes slidedown {
-
    from {
        opacity: 1;
        transform: none;
@ -113,8 +113,8 @@
 }

@media all and (max-width: 80em), all and (max-height: 45em) {
-
-    .dialog-fixedSize, .dialog-fullscreen-lowres {
+    .dialog-fixedSize,
+    .dialog-fullscreen-lowres {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
@ -126,7 +126,6 @@
 }

@media all and (min-width: 80em) and (min-height: 45em) {
-
    .dialog-medium {
        width: 80%;
        height: 80%;
@ -168,5 +167,5 @@
 }

 .dialogBackdropOpened {
-    opacity: .5;
+    opacity: 0.5;
 }
--- a/src/components/directorybrowser/directorybrowser.css
+++ b/src/components/directorybrowser/directorybrowser.css
@ -1,8 +1,8 @@
 #ulDirectoryPickerList a {
-    padding-top: .4em;
-    padding-bottom: .4em
+    padding-top: 0.4em;
+    padding-bottom: 0.4em;
 }

 .lblDirectoryPickerPath {
-    white-space: nowrap
+    white-space: nowrap;
 }
--- a/src/components/emby-scrollbuttons/emby-scrollbuttons.css
+++ b/src/components/emby-scrollbuttons/emby-scrollbuttons.css
@ -8,7 +8,7 @@
    min-height: 24px;
    padding-top: 1.25em;
    z-index: 1;
-    color: #ffffff;
+    color: #fff;
    display: flex;
 }

--- a/src/components/emby-scroller/emby-scroller.js
+++ b/src/components/emby-scroller/emby-scroller.js
@ -155,7 +155,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
            initCenterFocus(this, this.scroller);
        }

-        if (bindHeader) {
+        if (bindHeader && layoutManager.mobile) {
            initHeadroom(this);
        }

--- a/src/components/filterdialog/style.css
+++ b/src/components/filterdialog/style.css
@ -5,15 +5,16 @@
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
+    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    max-height: none !important;
-    max-width: none !important
+    max-width: none !important;
 }

@media all and (min-height: 600px) {
    .dynamicFilterDialog {
        top: 10% !important;
-        bottom: 25% !important
+        bottom: 25% !important;
    }
 }

@ -22,7 +23,7 @@
        width: auto;
        left: 10vw !important;
        right: 10vw !important;
-        margin-left: 0 !important
+        margin-left: 0 !important;
    }
 }

@ -30,6 +31,6 @@
    .dynamicFilterDialog {
        width: 20.16em;
        margin-left: -10.08em !important;
-        left: 50% !important
+        left: 50% !important;
    }
 }
--- a/src/components/formdialog.css
+++ b/src/components/formdialog.css
@ -5,14 +5,15 @@
 }

 .formDialogHeader {
-    padding: 1em .5em;
+    padding: 1em 0.5em;
    display: flex;
    align-items: center;
    flex-shrink: 0;
 }

 .formDialogHeaderTitle {
-    margin-left: .25em;
+    margin-left: 0.25em;
+
    /* In case of h1, h2, h3 */
    margin-top: 0;
    margin-bottom: 0;
@ -23,7 +24,7 @@
 }

 .dialogContentInner {
-    padding: .5em 1em 20em 1em;
+    padding: 0.5em 1em 20em 1em;
 }

 .dialogContentInner-mini {
@ -46,6 +47,7 @@
    display: flex;
    position: absolute;
    padding: 1.25em 1em;
+
    /* Without this emby-checkbox is able to appear on top */
    z-index: 1;
    align-items: center;
@ -62,11 +64,11 @@
    padding-bottom: 1.5em;
    flex-direction: column;
    width: 80% !important;
-    padding-top: .5em;
+    padding-top: 0.5em;
 }

 .formDialogFooterItem {
-    margin: .5em !important;
+    margin: 0.5em !important;
    flex-grow: 1;
    text-align: center;
    flex-basis: 0;
@ -91,7 +93,6 @@
 }

@media all and (min-width: 50em) {
-
    .formDialogFooterItem {
        max-width: 80%;
    }
@ -103,7 +104,6 @@
 }

@media all and (min-width: 80em) {
-
    .formDialogFooterItem {
        max-width: 70%;
    }
--- a/src/components/guide/guide.css
+++ b/src/components/guide/guide.css
@ -14,12 +14,12 @@
 }

 .layout-desktop .tvGuideHeader {
-    margin-bottom: .5em;
+    margin-bottom: 0.5em;
 }

 .guideHeaderDateSelection {
    font-size: 86%;
-    padding: .4em 0;
+    padding: 0.4em 0;
 }

 .guide-headerTimeslots {
@ -39,10 +39,10 @@

 .guideProgramIndicator {
    text-transform: uppercase;
-    border-radius: .25em;
-    margin-right: .5em;
+    border-radius: 0.25em;
+    margin-right: 0.5em;
    font-size: 82%;
-    padding: .2em .25em;
+    padding: 0.2em 0.25em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
@ -51,6 +51,8 @@
 }

 .guide-channelTimeslotHeader {
+    border: 0 !important;
+    border-right-color: transparent;
    flex-shrink: 0;
    justify-content: center;
 }
@ -69,9 +71,14 @@
 }

 .channelPrograms {
+    height: 4.42em;
+    contain: strict;
+    display: flex;
+    flex-direction: column;
+    border-style: solid;
+    border-width: 1px 0 1px 0;
    white-space: nowrap;
    position: relative;
-    contain: strict;
    box-sizing: border-box;
 }

@ -80,31 +87,32 @@
 }

 .guideSpacer {
-    width: .3em;
+    width: 0.3em;
    flex-shrink: 0;
 }

-.channelPrograms, .timeslotHeadersInner {
+.channelPrograms,
+.timeslotHeadersInner {
    width: 1800vw;
 }

@media all and (min-width: 37.5em) {
-
-    .channelPrograms, .timeslotHeadersInner {
+    .channelPrograms,
+    .timeslotHeadersInner {
        width: 1400vw;
    }
 }

@media all and (min-width: 50em) {
-
-    .channelPrograms, .timeslotHeadersInner {
+    .channelPrograms,
+    .timeslotHeadersInner {
        width: 1200vw;
    }
 }

@media all and (min-width: 80em) {
-
-    .channelPrograms, .timeslotHeadersInner {
+    .channelPrograms,
+    .timeslotHeadersInner {
        width: 810vw;
    }
 }
@ -112,11 +120,17 @@
 .timeslotHeader {
    display: inline-flex;
    align-items: center;
-    text-indent: .25em;
+    text-indent: 0.25em;
    width: 2.0833333333333333333333333333333%;
 }

-.guide-channelHeaderCell, .guide-channelTimeslotHeader {
+.programCell,
+.guide-channelHeaderCell {
+    outline: none !important;
+}
+
+.guide-channelHeaderCell,
+.guide-channelTimeslotHeader {
    padding: 0 !important;
    cursor: pointer;
    outline: none !important;
@ -130,11 +144,12 @@
    display: flex;
    align-items: center;
    text-decoration: none;
+
    /* Needed in firefox */
    text-align: left;
    contain: strict;
    flex-shrink: 0;
-    border-radius: .12em;
+    border-radius: 0.12em;
    color: inherit;
 }

@ -148,37 +163,38 @@
    background: transparent;
 }

-.guide-channelTimeslotHeader {
-    border: 0 !important;
-}
-
 /* Important - have to put the fixed width on channelsContainer, not the individual channelHeaderCell
   This was causing channelsContainer to extend beyond the fixed width on ps4, tizen, lg and opera tv.
 */
-.channelsContainer, .guide-channelTimeslotHeader {
+.channelsContainer,
+.guide-channelTimeslotHeader {
    width: 24vw;
 }

@media all and (min-width: 31.25em) {
-    .channelsContainer, .guide-channelTimeslotHeader {
+    .channelsContainer,
+    .guide-channelTimeslotHeader {
        width: 16vw;
    }
 }

@media all and (min-width: 37.5em) {
-    .channelsContainer, .guide-channelTimeslotHeader {
+    .channelsContainer,
+    .guide-channelTimeslotHeader {
        width: 16vw;
    }
 }

@media all and (min-width: 50em) {
-    .channelsContainer, .guide-channelTimeslotHeader {
+    .channelsContainer,
+    .guide-channelTimeslotHeader {
        width: 14vw;
    }
 }

@media all and (min-width: 80em) {
-    .channelsContainer, .guide-channelTimeslotHeader {
+    .channelsContainer,
+    .guide-channelTimeslotHeader {
        width: 12vw;
    }
 }
@ -197,34 +213,26 @@
 }

@media all and (max-width: 50em) {
-
-    .newTvProgram, .liveTvProgram, .premiereTvProgram, .guideHdIcon {
+    .newTvProgram,
+    .liveTvProgram,
+    .premiereTvProgram,
+    .guideHdIcon {
        display: none;
    }
 }

-.channelPrograms {
-    height: 4.42em;
-    contain: strict;
-    display: flex;
-    flex-direction: column;
-    border-style: solid;
-    border-width: 1px 0 1px 0;
-}
-
-    .channelPrograms + .channelPrograms, .guide-channelHeaderCell + .guide-channelHeaderCell {
+.channelPrograms + .channelPrograms,
+.guide-channelHeaderCell + .guide-channelHeaderCell {
    margin-top: -1px;
 }

-.channelPrograms-tv, .guide-channelHeaderCell-tv {
+.channelPrograms-tv,
+.guide-channelHeaderCell-tv {
    height: 3em;
 }

-.guide-channelTimeslotHeader {
-    border-right-color: transparent;
-}
-
-.guide-channelTimeslotHeader, .timeslotHeader {
+.guide-channelTimeslotHeader,
+.timeslotHeader {
    background: transparent !important;
    height: 2.8em;
 }
@ -253,6 +261,7 @@
    text-decoration: none;
    overflow: hidden;
    align-items: center;
+
    /* Needed for Firefox */
    text-align: left;
    contain: strict;
@ -261,7 +270,7 @@
 }

 .guideProgramName {
-    padding: 0 .7em 0;
+    padding: 0 0.7em 0;
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center;
@ -269,6 +278,7 @@
    position: relative;
    flex-grow: 1;
    contain: layout style paint;
+
    /* transition: transform 60ms ease-out; */
 }

@ -289,11 +299,11 @@
 .guideProgramSecondaryInfo {
    display: flex;
    align-items: center;
-    margin-top: .1em;
+    margin-top: 0.1em;
 }

 .programIcon {
-    margin-left: .5em;
+    margin-left: 0.5em;
    height: 1em;
    width: 1em;
    font-size: 1.6em;
@ -304,16 +314,16 @@

 .guide-programTextIcon {
    font-weight: bold;
-    font-size: .9em;
-    padding: .16em .3em;
-    border-radius: .25em;
-    margin-right: .35em;
+    font-size: 0.9em;
+    padding: 0.16em 0.3em;
+    border-radius: 0.25em;
+    margin-right: 0.35em;
    width: auto;
    height: auto;
 }

 .guide-programTextIcon-tv {
-    font-size: .74em;
+    font-size: 0.74em;
 }

 .guideChannelNumber {
@ -345,14 +355,12 @@
 }

@media all and (min-width: 62.5em) {
-
    .guideChannelName {
        max-width: 40%;
    }
 }

@media all and (max-width: 62.5em) {
-
    .guideChannelNumber {
        display: none;
    }
@ -368,21 +376,19 @@
    flex-direction: column;
 }

-.channelsContainer, .programGrid {
+.channelsContainer,
+.programGrid {
    contain: layout style paint;
 }

-.programCell, .guide-channelHeaderCell {
-    outline: none !important;
-}
-
-.timerIcon, .seriesTimerIcon {
-    color: #cc3333 !important;
+.timerIcon,
+.seriesTimerIcon {
+    color: #c33 !important;
 }

 .seriesTimerIcon-inactive {
    color: inherit !important;
-    opacity: .7;
+    opacity: 0.7;
 }

 .guideOptions {
@ -392,7 +398,6 @@
 }

@media all and (max-width: 50em), all and (max-height: 37.5em) {
-
    .tvGuideHeader {
        padding-left: 0;
    }
@ -415,8 +420,8 @@
 }

 .guide-date-tab-button {
-    padding: .3em .7em !important;
-    margin: 0 .3em !important;
+    padding: 0.3em 0.7em !important;
+    margin: 0 0.3em !important;
    font-weight: normal;
 }

@ -425,6 +430,6 @@
 }

 .guide-date-tab-button.show-focus:focus {
-        border-radius: .15em !important;
+    border-radius: 0.15em !important;
    transform: none !important;
 }
--- a/src/components/guide/programs.css
+++ b/src/components/guide/programs.css
@ -1,15 +1,15 @@
 .newTvProgram {
-    background: #3388cc;
+    background: #38c;
    color: #fff;
 }

 .liveTvProgram {
-    background: #cc3333;
+    background: #c33;
    color: #fff;
 }

 .premiereTvProgram {
-    background: #EF6C00;
+    background: #ef6c00;
    color: #fff;
 }

--- a/src/components/homesections/homesections.css
+++ b/src/components/homesections/homesections.css
@ -1,23 +1,24 @@
 .homeLibraryButton {
    min-width: 18%;
-    margin: .5em !important;
+    margin: 0.5em !important;
 }

@media all and (max-width: 50em) {
-
    .homeLibraryButton {
        width: 46% !important;
    }
 }

 .homeLibraryIcon {
-    margin-left: .5em;
-    margin-right: .5em;
-    flex-shrink: 0
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+    -webkit-flex-shrink: 0;
+    flex-shrink: 0;
 }

 .homeLibraryText {
    white-space: nowrap;
+    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
-    overflow: hidden
+    overflow: hidden;
 }
--- a/src/components/htmlvideoplayer/plugin.js
+++ b/src/components/htmlvideoplayer/plugin.js
@ -1054,7 +1054,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
            var options = {
                video: videoElement,
                subUrl: getTextTrackUrl(track, item),
-                fonts: attachments.map(i => i.DeliveryUrl),
+                fonts: attachments.map(function (i) {
+                    return i.DeliveryUrl;
+                }),
                workerUrl: appRouter.baseUrl() + "/libraries/subtitles-octopus-worker.js",
                onError: function() {
                    htmlMediaHelper.onErrorInternal(self, 'mediadecodeerror')
@ -1401,7 +1403,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                        dlg.classList.add('videoPlayerContainer');

                        if (options.backdropUrl) {
-
                            dlg.classList.add('videoPlayerContainer-withBackdrop');
                            dlg.style.backgroundImage = "url('" + options.backdropUrl + "')";
                        }
@ -1410,11 +1411,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                            dlg.classList.add('videoPlayerContainer-onTop');
                        }

-                        // playsinline new for iOS 10
-                        // https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html
-
                        var html = '';
-
                        var cssClass = 'htmlvideoplayer';

                        if (!browser.chromecast) {
@ -1449,7 +1446,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                        self._mediaElement = videoElement;

                        if (mediaManager) {
-
                            if (!mediaManager.embyInit) {
                                initMediaManager();
                                mediaManager.embyInit = true;
@ -1465,9 +1461,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                        } else {
                            resolve(videoElement);
                        }
-
                    });
-
                } else {
                    if (options.backdropUrl) {
                        dlg.classList.add('videoPlayerContainer-withBackdrop');
--- a/src/components/htmlvideoplayer/style.css
+++ b/src/components/htmlvideoplayer/style.css
@ -42,6 +42,7 @@ video::-webkit-media-controls {
 .htmlvideoplayer::cue {
    background-color: transparent;
    text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1);
+    -webkit-font-smoothing: antialiased;
    font-family: inherit;
 }

@ -71,7 +72,7 @@ video::-webkit-media-controls {
@keyframes htmlvideoplayer-zoomin {
    from {
        transform: scale3d(0.2, 0.2, 0.2);
-        opacity: .6;
+        opacity: 0.6;
    }

    to {
--- a/src/components/images/style.css
+++ b/src/components/images/style.css
@ -1,5 +1,22 @@
 .lazy-image-fadein {
+    opacity: 0;
    animation: lazy-image-fadein 330ms ease-in normal both;
+    -webkit-animation-duration: 0.8s;
+    -moz-animation-duration: 0.8s;
+    -o-animation-duration: 0.8s;
+    animation-duration: 0.8s;
+    -webkit-animation-name: popInAnimation;
+    -moz-animation-name: popInAnimation;
+    -o-animation-name: popInAnimation;
+    animation-name: popInAnimation;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    -o-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
+    -moz-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
+    -o-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
+    animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
 }

 .lazy-image-fadein-fast {
@ -16,14 +33,6 @@
    }
 }

-.lazy-image-fadein {
-    opacity: 0;
-    animation-duration: .8s;
-    animation-name: popInAnimation;
-    animation-fill-mode: forwards;
-    animation-timing-function: cubic-bezier(0,0,.5,1);
-}
-
@keyframes popInAnimation {
    0% {
        opacity: 0;
--- a/src/components/imageuploader/style.css
+++ b/src/components/imageuploader/style.css
@ -1,6 +1,7 @@
 .imageEditor-dropZone {
-    border: .2em dashed currentcolor;
-    border-radius: .25em;
+    border: 0.2em dashed currentcolor;
+    border-radius: 0.25em;
+
    /* padding: 1.6em; */
    text-align: center;
    position: relative;
--- a/src/components/indicators/indicators.css
+++ b/src/components/indicators/indicators.css
@ -1,8 +1,8 @@
 .itemProgressBar {
    background: #333;
-    background: rgba(51,51,51,.8);
+    background: rgba(51, 51, 51, 0.8);
    position: relative;
-    height: .28em;
+    height: 0.28em;
 }

 .itemProgressBarForeground {
@ -14,6 +14,7 @@

 .indicator {
    border-radius: 100em;
+    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
@ -23,7 +24,7 @@
 }

 .timerIndicator {
-    color: #CB272A;
+    color: #cb272a;
 }

 .timerIndicator-inactive {
@ -31,7 +32,7 @@
 }

 .indicator + .indicator {
-    margin-left: .25em;
+    margin-left: 0.25em;
 }

 .indicatorIcon {
@ -42,6 +43,7 @@

 .countIndicator {
    border-radius: 100em;
+    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
@ -53,6 +55,7 @@

 .playedIndicator {
    border-radius: 100em;
+    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
@ -64,6 +67,7 @@
 .videoIndicator {
    background: #444;
    border-radius: 100em;
+    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
@ -81,12 +85,13 @@
    color: #333;
 }

-.missingIndicator, .unairedIndicator {
-    background: #cc3333;
-    padding: .25em .5em;
+.missingIndicator,
+.unairedIndicator {
+    background: #c33;
+    padding: 0.25em 0.5em;
    border-radius: 100em;
    color: #fff;
    font-size: 84%;
    font-weight: 500;
-    margin: 0 .25em;
+    margin: 0 0.25em;
 }
--- a/src/components/keyboardnavigation.js
+++ b/src/components/keyboardnavigation.js
@ -1,36 +1,133 @@
-define(['inputManager', 'focusManager'], function(inputManager, focusManager) {
-    'use strict';
+define(["inputManager", "layoutManager"], function (inputManager, layoutManager) {
+    "use strict";

    console.log("keyboardnavigation");

+    /**
+     * Key name mapping.
+     */
+    // Add more to support old browsers
+    var KeyNames = {
+        13: "Enter",
+        19: "Pause",
+        27: "Escape",
+        32: "Space",
+        37: "ArrowLeft",
+        38: "ArrowUp",
+        39: "ArrowRight",
+        40: "ArrowDown",
+        // MediaRewind (Tizen/WebOS)
+        412: "MediaRewind",
+        // MediaStop (Tizen/WebOS)
+        413: "MediaStop",
+        // MediaPlay (Tizen/WebOS)
+        415: "MediaPlay",
+        // MediaFastForward (Tizen/WebOS)
+        417: "MediaFastForward",
+        // Back (WebOS)
+        461: "Back",
+        // Back (Tizen)
+        10009: "Back",
+        // MediaTrackPrevious (Tizen)
+        10232: "MediaTrackPrevious",
+        // MediaTrackNext (Tizen)
+        10233: "MediaTrackNext",
+        // MediaPlayPause (Tizen)
+        10252: "MediaPlayPause"
+    };
+
+    var hasFieldKey = false;
+    try {
+        hasFieldKey = "key" in new KeyboardEvent("keydown");
+    } catch (e) {
+        console.log("error checking 'key' field");
+    }
+
+    if (!hasFieldKey) {
+        // Add [a..z]
+        for (var i = 65; i <= 90; i++) {
+            KeyNames[i] = String.fromCharCode(i).toLowerCase();
+        }
+    }
+
+    /**
+     * Returns key name from event.
+     *
+     * @param {KeyboardEvent} keyboard event
+     * @return {string} key name
+     */
+    function getKeyName(event) {
+        return KeyNames[event.keyCode] || event.key;
+    }
+
    function enable() {
-        document.addEventListener('keydown', function(e) {
+        document.addEventListener("keydown", function (e) {
            var capture = true;

-            switch (e.keyCode) {
-                case 37: // ArrowLeft
-                    inputManager.handle('left');
+            switch (getKeyName(e)) {
+                case "ArrowLeft":
+                    inputManager.handle("left");
                    break;
-                case 38: // ArrowUp
-                    inputManager.handle('up');
+                case "ArrowUp":
+                    inputManager.handle("up");
                    break;
-                case 39: // ArrowRight
-                    inputManager.handle('right');
+                case "ArrowRight":
+                    inputManager.handle("right");
                    break;
-                case 40: // ArrowDown
-                    inputManager.handle('down');
+                case "ArrowDown":
+                    inputManager.handle("down");
                    break;
+
+                case "Back":
+                    inputManager.handle("back");
+                    break;
+
+                case "Escape":
+                    if (layoutManager.tv) {
+                        inputManager.handle("back");
+                    } else {
+                        capture = false;
+                    }
+                    break;
+
+                case "MediaPlay":
+                    inputManager.handle("play");
+                    break;
+                case "Pause":
+                    inputManager.handle("pause");
+                    break;
+                case "MediaPlayPause":
+                    inputManager.handle("playpause");
+                    break;
+                case "MediaRewind":
+                    inputManager.handle("rewind");
+                    break;
+                case "MediaFastForward":
+                    inputManager.handle("fastforward");
+                    break;
+                case "MediaStop":
+                    inputManager.handle("stop");
+                    break;
+                case "MediaTrackPrevious":
+                    inputManager.handle("previoustrack");
+                    break;
+                case "MediaTrackNext":
+                    inputManager.handle("nexttrack");
+                    break;
+
                default:
                    capture = false;
            }
+
            if (capture) {
                console.log("Disabling default event handling");
                e.preventDefault();
            }
        });
-
    }
+
    return {
-        enable: enable
+        enable: enable,
+        getKeyName: getKeyName
    };
 });
--- a/src/components/layoutManager.js
+++ b/src/components/layoutManager.js
@ -2,7 +2,6 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
    'use strict';

    function setLayout(instance, layout, selectedLayout) {
-
        if (layout === selectedLayout) {
            instance[layout] = true;
            document.documentElement.classList.add('layout-' + layout);
@ -38,7 +37,6 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
    };

    LayoutManager.prototype.getSavedLayout = function (layout) {
-
        return appSettings.get('layout');
    };

--- a/src/components/lazyloader/lazyedgehack.css
+++ b/src/components/lazyloader/lazyedgehack.css
@ -1,5 +1,5 @@
 .lazy {
    /* In edge, intersection observer will not fire on 0px sized elements */
-    min-width: .1em;
-    min-height: .1em;
+    min-width: 0.1em;
+    min-height: 0.1em;
 }
--- a/src/components/listview/listview.css
+++ b/src/components/listview/listview.css
@ -10,7 +10,7 @@
    display: block;
    align-items: center;
    text-align: left;
-    padding: .25em .25em .25em .5em;
+    padding: 0.25em 0.25em 0.25em 0.5em;
    cursor: pointer;
    overflow: hidden;
 }
@ -50,14 +50,18 @@
 }

 .listItem-border.show-focus:focus {
-    transform: scale(1.0) !important;
+    transform: scale(1) !important;
 }

-.listItemImage, .listItemIcon, .listItemAside {
+.listItemImage,
+.listItemIcon,
+.listItemAside {
    flex-shrink: 0;
 }

-.listItemBody, .listItemImage, .listItemIcon {
+.listItemBody,
+.listItemImage,
+.listItemIcon {
    display: inline-block;
    vertical-align: middle;
 }
@ -71,13 +75,13 @@
 }

 .listViewDragHandle {
-    margin-left: -.25em !important;
+    margin-left: -0.25em !important;
    touch-action: none;
 }

 .listItemBody {
    flex-grow: 1;
-    padding: .85em .75em;
+    padding: 0.85em 0.75em;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-direction: column;
@ -85,8 +89,15 @@
    justify-content: center;
 }

+.listItem,
+.listItemBody,
+.listItemMediaInfo {
+    display: flex;
+    contain: layout style;
+}
+
 .layout-tv .listItemBody {
-    padding: .35em .75em;
+    padding: 0.35em 0.75em;
 }

 .listItemBody-noleftpadding {
@ -95,7 +106,7 @@

 .listItemBodyText {
    margin: 0;
-    padding: .1em 0;
+    padding: 0.1em 0;
    overflow: hidden;
    text-overflow: ellipsis;
 }
@ -121,7 +132,7 @@
    width: 19.5vw;
    height: 13vw;
    background-position: center center;
-    margin-right: .75em;
+    margin-right: 0.75em;
 }

 .listItemImageButton {
@ -161,13 +172,13 @@
    }

    .listItemBody {
-        padding-left: .75em;
+        padding-left: 0.75em;
    }
 }

@media all and (max-width: 50em) {
    .listItemBody {
-        padding-right: .5em;
+        padding-right: 0.5em;
    }
 }

@ -180,15 +191,15 @@
    width: 1em !important;
    height: 1em !important;
    font-size: 143%;
-    padding: 0 .25em 0 0;
+    padding: 0 0.25em 0 0;
 }

 .listItemIcon:not(.listItemIcon-transparent) {
    background-color: #00a4dc;
    color: #fff;
-    padding: .5em;
+    padding: 0.5em;
    border-radius: 100em;
-    margin: 0 .2em 0 .4em;
+    margin: 0 0.2em 0 0.4em;
 }

 .listItemProgressBar {
@ -199,7 +210,7 @@
 }

 .listItem:focus {
-    border-radius: .2em;
+    border-radius: 0.2em;
 }

 .listItem:focus .secondary {
@ -207,7 +218,7 @@
 }

 .listItem-focusscale {
-    transition: transform .2s ease-out;
+    transition: transform 0.2s ease-out;
 }

 .listItem-focusscale:focus {
@ -215,7 +226,7 @@
 }

 .paperList {
-    margin: .5em auto;
+    margin: 0.5em auto;
 }

 .paperList-clear {
@ -234,26 +245,23 @@
 }

 .listItemIndicators {
-    right: .324em;
-    top: .324em;
+    right: 0.324em;
+    top: 0.324em;
    position: absolute;
    display: flex;
    align-items: center;
 }

-.listItem, .listItemBody, .listItemMediaInfo {
-    display: flex;
-    contain: layout style;
-}
-
 .listItem-bottomoverview {
    font-size: 88%;
    margin-bottom: 1em;
-    margin-top: .2em;
+    margin-top: 0.2em;
 }

@media all and (max-width: 50em) {
-    .listItem .endsAt, .listItem .criticRating, .listItem-overview {
+    .listItem .endsAt,
+    .listItem .criticRating,
+    .listItem-overview {
        display: none !important;
    }
 }
--- a/src/components/loading/loading.css
+++ b/src/components/loading/loading.css
@ -7,11 +7,20 @@

 .mdlSpinnerActive {
    display: inline-block;
+    -webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
    animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
 }

+@-webkit-keyframes mdl-spinner__container-rotate {
+    to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
@keyframes mdl-spinner__container-rotate {
    to {
+        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
 }
@ -28,6 +37,7 @@
 }

 .mdl-spinner__layer-1-active {
+    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }

@ -36,6 +46,7 @@
 }

 .mdl-spinner__layer-2-active {
+    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }

@ -44,6 +55,7 @@
 }

 .mdl-spinner__layer-3-active {
+    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }

@ -52,39 +64,90 @@
 }

 .mdl-spinner__layer-4-active {
+    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }

-@keyframes mdl-spinner__fill-unfill-rotate {
+@-webkit-keyframes mdl-spinner__fill-unfill-rotate {
    12.5% {
+        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    25% {
+        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    37.5% {
+        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
    }

    50% {
+        -webkit-transform: rotate(540deg);
        transform: rotate(540deg);
    }

    62.5% {
+        -webkit-transform: rotate(675deg);
        transform: rotate(675deg);
    }

    75% {
+        -webkit-transform: rotate(810deg);
        transform: rotate(810deg);
    }

    87.5% {
+        -webkit-transform: rotate(945deg);
        transform: rotate(945deg);
    }

    to {
+        -webkit-transform: rotate(1080deg);
+        transform: rotate(1080deg);
+    }
+}
+
+@keyframes mdl-spinner__fill-unfill-rotate {
+    12.5% {
+        -webkit-transform: rotate(135deg);
+        transform: rotate(135deg);
+    }
+
+    25% {
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+    }
+
+    37.5% {
+        -webkit-transform: rotate(405deg);
+        transform: rotate(405deg);
+    }
+
+    50% {
+        -webkit-transform: rotate(540deg);
+        transform: rotate(540deg);
+    }
+
+    62.5% {
+        -webkit-transform: rotate(675deg);
+        transform: rotate(675deg);
+    }
+
+    75% {
+        -webkit-transform: rotate(810deg);
+        transform: rotate(810deg);
+    }
+
+    87.5% {
+        -webkit-transform: rotate(945deg);
+        transform: rotate(945deg);
+    }
+
+    to {
+        -webkit-transform: rotate(1080deg);
        transform: rotate(1080deg);
    }
 }
@ -98,6 +161,32 @@
 * - https://github.com/Polymer/paper-spinner/issues/9
 * - https://code.google.com/p/chromium/issues/detail?id=436255
 */
+@-webkit-keyframes mdl-spinner__layer-1-fade-in-out {
+    from {
+        opacity: 0.99;
+    }
+
+    25% {
+        opacity: 0.99;
+    }
+
+    26% {
+        opacity: 0;
+    }
+
+    89% {
+        opacity: 0;
+    }
+
+    90% {
+        opacity: 0.99;
+    }
+
+    100% {
+        opacity: 0.99;
+    }
+}
+
@keyframes mdl-spinner__layer-1-fade-in-out {
    from {
        opacity: 0.99;
@ -124,6 +213,28 @@
    }
 }

+@-webkit-keyframes mdl-spinner__layer-2-fade-in-out {
+    from {
+        opacity: 0;
+    }
+
+    15% {
+        opacity: 0;
+    }
+
+    25% {
+        opacity: 0.99;
+    }
+
+    50% {
+        opacity: 0.99;
+    }
+
+    51% {
+        opacity: 0;
+    }
+}
+
@keyframes mdl-spinner__layer-2-fade-in-out {
    from {
        opacity: 0;
@ -146,6 +257,28 @@
    }
 }

+@-webkit-keyframes mdl-spinner__layer-3-fade-in-out {
+    from {
+        opacity: 0;
+    }
+
+    40% {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 0.99;
+    }
+
+    75% {
+        opacity: 0.99;
+    }
+
+    76% {
+        opacity: 0;
+    }
+}
+
@keyframes mdl-spinner__layer-3-fade-in-out {
    from {
        opacity: 0;
@ -168,6 +301,28 @@
    }
 }

+@-webkit-keyframes mdl-spinner__layer-4-fade-in-out {
+    from {
+        opacity: 0;
+    }
+
+    65% {
+        opacity: 0;
+    }
+
+    75% {
+        opacity: 0.99;
+    }
+
+    90% {
+        opacity: 0.99;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
@keyframes mdl-spinner__layer-4-fade-in-out {
    from {
        opacity: 0;
@ -190,6 +345,23 @@
    }
 }

+.mdl-spinner__circle {
+    box-sizing: border-box;
+    height: 100%;
+    border-width: 0.21em;
+    border-style: solid;
+    border-color: inherit;
+    border-bottom-color: transparent !important;
+    border-radius: 50%;
+    -webkit-animation: none;
+    animation: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
 .mdl-spinner__circle-clipper {
    display: inline-block;
    position: relative;
@ -203,65 +375,93 @@
    width: 200%;
 }

-.mdl-spinner__circle {
-    box-sizing: border-box;
-    height: 100%;
-    border-width: .21em;
-    border-style: solid;
-    border-color: inherit;
-    border-bottom-color: transparent !important;
-    border-radius: 50%;
-    animation: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-
 .mdl-spinner__circleLeft {
    border-right-color: transparent !important;
+    -webkit-transform: rotate(129deg);
    transform: rotate(129deg);
 }

 .mdl-spinner__circleLeft-active {
+    -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }

 .mdl-spinner__circleRight {
    left: -100%;
    border-left-color: transparent !important;
+    -webkit-transform: rotate(-129deg);
    transform: rotate(-129deg);
 }

 .mdl-spinner__circleRight-active {
+    -webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }

-@keyframes mdl-spinner__left-spin {
+@-webkit-keyframes mdl-spinner__left-spin {
    from {
+        -webkit-transform: rotate(130deg);
        transform: rotate(130deg);
    }

    50% {
+        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

    to {
+        -webkit-transform: rotate(130deg);
        transform: rotate(130deg);
    }
 }

+@keyframes mdl-spinner__left-spin {
+    from {
+        -webkit-transform: rotate(130deg);
+        transform: rotate(130deg);
+    }
+
+    50% {
+        -webkit-transform: rotate(-5deg);
+        transform: rotate(-5deg);
+    }
+
+    to {
+        -webkit-transform: rotate(130deg);
+        transform: rotate(130deg);
+    }
+}
+
+@-webkit-keyframes mdl-spinner__right-spin {
+    from {
+        -webkit-transform: rotate(-130deg);
+        transform: rotate(-130deg);
+    }
+
+    50% {
+        -webkit-transform: rotate(5deg);
+        transform: rotate(5deg);
+    }
+
+    to {
+        -webkit-transform: rotate(-130deg);
+        transform: rotate(-130deg);
+    }
+}
+
@keyframes mdl-spinner__right-spin {
    from {
+        -webkit-transform: rotate(-130deg);
        transform: rotate(-130deg);
    }

    50% {
+        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    to {
+        -webkit-transform: rotate(-130deg);
        transform: rotate(-130deg);
    }
 }
--- a/src/components/logoscreensaver/plugin.js
+++ b/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, "logowhite.png") + '" />';
+                    elem.innerHTML = '<img class="logoScreenSaverImage" src="' + pluginManager.mapPath(self, "assets/img/banner-light.png") + '" />';
                }

                stopInterval();
--- a/src/components/mediainfo/mediainfo.css
+++ b/src/components/mediainfo/mediainfo.css
@ -4,13 +4,13 @@
 }

 .mediaInfoText {
-    padding: .22em .5em;
-    border-radius: .25em;
+    padding: 0.22em 0.5em;
+    border-radius: 0.25em;
    font-size: 92%;
    display: flex;
    align-items: center;
    white-space: nowrap;
-    margin: 0 .5em 0 0;
+    margin: 0 0.5em 0 0;
 }

 .mediaInfoText-upper {
@ -21,7 +21,7 @@
    width: auto;
    height: auto;
    font-size: 1.6em;
-    margin-right: .6em;
+    margin-right: 0.6em;
 }

 .mediaInfoItem:last-child {
@ -63,8 +63,8 @@

 .mediaInfoProgramAttribute {
    text-transform: uppercase;
-    padding: .16em .6em;
-    border-radius: .15em;
+    padding: 0.16em 0.6em;
+    border-radius: 0.15em;
    font-size: 80%;
 }

@ -73,13 +73,13 @@
 }

 .mediaInfoOfficialRating {
-    border: .09em solid currentColor;
-    padding: 0 .6em;
+    border: 0.09em solid currentColor;
+    padding: 0 0.6em;
    height: 1.3em;
    line-height: 1.8em;
    display: flex;
    align-items: center;
    justify-content: center;
-    border-radius: .1em;
+    border-radius: 0.1em;
    font-size: 96%;
 }
--- a/src/components/multiselect/multiselect.css
+++ b/src/components/multiselect/multiselect.css
@ -4,7 +4,7 @@
    left: 0;
    right: 0;
    top: 0;
-    background-color: rgba(0, 0, 0, .3);
+    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99998;
 }

@ -13,7 +13,7 @@
    top: 0;
    left: 0;
    right: 0;
-    padding: 1em .5em;
+    padding: 1em 0.5em;
    display: flex;
    align-items: center;
    z-index: 99999;
--- a/src/components/navdrawer/navdrawer.css
+++ b/src/components/navdrawer/navdrawer.css
@ -3,40 +3,50 @@
    position: fixed;
    top: 0;
    bottom: 0;
-    contain: strict
+    contain: strict;
 }

 .touch-menu-la {
-    background-color: #FFF;
+    background-color: #fff;
    will-change: transform;
+    display: -webkit-box;
+    display: -webkit-flex;
    display: flex;
+    -webkit-transition: -webkit-transform ease-out 40ms, left ease-out 260ms;
+    -o-transition: transform ease-out 40ms, left ease-out 260ms;
    transition: transform ease-out 40ms, left ease-out 260ms;
-    z-index: 1099
+    z-index: 1099;
 }

 .touch-menu-la.transition {
-    transition: transform ease-out 240ms, left ease-out 260ms
+    -webkit-transition: -webkit-transform ease-out 240ms, left ease-out 260ms;
+    -o-transition: transform ease-out 240ms, left ease-out 260ms;
+    transition: transform ease-out 240ms, left ease-out 260ms;
 }

 .drawer-open {
-    box-shadow: 2px 0 12px rgba(0, 0, 0, .4)
+    -webkit-box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
+    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
 }

 .scrollContainer {
-    flex-grow: 1
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    flex-grow: 1;
 }

 .tmla-mask {
    left: 0;
    right: 0;
-    background-color: #000;
    opacity: 0;
    z-index: 1098;
-    transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
+    -webkit-transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
+    -o-transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
+    transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
    will-change: opacity;
-    background-color: rgba(0, 0, 0, .3)
+    background-color: rgba(0, 0, 0, 0.3);
 }

 .tmla-mask.backdrop {
-    opacity: 1
+    opacity: 1;
 }
--- a/src/components/nowplayingbar/nowplayingbar.css
+++ b/src/components/nowplayingbar/nowplayingbar.css
@ -28,7 +28,8 @@
    justify-content: center;
 }

-.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
+.mediaButton,
+.nowPlayingBarUserDataButtons .btnUserItemRating {
    vertical-align: middle;
    margin: 0;
    text-align: center;
@ -62,6 +63,7 @@
 .nowPlayingBarCenter {
    vertical-align: middle;
    text-align: center;
+
    /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
    z-index: 2;
    flex-grow: 1;
@ -74,7 +76,7 @@
 .nowPlayingBarPositionContainer {
    position: absolute !important;
    left: 0;
-    top: -.56em;
+    top: -0.56em;
    right: 0;
    z-index: 1;
 }
@ -89,7 +91,8 @@

 .nowPlayingBarRight {
    position: relative;
-    margin: 0 .5em 0 auto;
+    margin: 0 0.5em 0 auto;
+
    /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
    z-index: 2;
    display: flex;
@ -121,7 +124,6 @@
 }

@media all and (max-width: 70em) {
-
    .nowPlayingBarRight .nowPlayingBarUserDataButtons {
        display: none;
    }
@ -155,13 +157,15 @@
    .nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
        display: none !important;
    }
+
    .nowPlayingBarInfoContainer {
        width: 70%;
    }
 }

@media all and (max-width: 24em) {
-    .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
+    .nowPlayingBar .muteButton,
+    .nowPlayingBar .unmuteButton {
        display: none;
    }
 }
--- a/src/components/playback/autoplaydetect.js
+++ b/src/components/playback/autoplaydetect.js
@ -1,61 +0,0 @@
-define([], function () {
-    'use strict';
-
-    function supportsHtmlMediaAutoplay() {
-
-        return new Promise(function (resolve, reject) {
-
-            var timeout;
-            var elem = document.createElement('video');
-            var elemStyle = elem.style;
-            //skip the test if video itself, or the autoplay
-            //element on it isn't supported
-            if (!('autoplay' in elem)) {
-                reject();
-                return;
-            }
-            elemStyle.position = 'absolute';
-            elemStyle.height = 0;
-            elemStyle.width = 0;
-
-            elem.setAttribute('autoplay', 'autoplay');
-            elem.style.display = 'none';
-            document.body.appendChild(elem);
-
-            var testAutoplay = function (arg) {
-                clearTimeout(timeout);
-                elem.removeEventListener('playing', testAutoplay);
-                elem.removeEventListener('play', testAutoplay);
-                var supported = (arg && arg.type === 'playing') || (arg && arg.type === 'play') || elem.currentTime !== 0;
-                elem.parentNode.removeChild(elem);
-
-                if (supported) {
-                    resolve();
-                } else {
-                    reject();
-                }
-            };
-
-            // play needed for firefox
-            elem.addEventListener('play', testAutoplay);
-            elem.addEventListener('playing', testAutoplay);
-
-            try {
-                elem.src = 'data:video/mp4;base64,AAAAHGZ0eXBtcDQyAAAAAG1wNDJpc29tYXZjMQAAAz5tb292AAAAbG12aGQAAAAAzaNacc2jWnEAAV+QAAFfkAABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAGGlvZHMAAAAAEICAgAcAT////3//AAACQ3RyYWsAAABcdGtoZAAAAAHNo1pxzaNacQAAAAEAAAAAAAFfkAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAEAAAABAAAAAAAd9tZGlhAAAAIG1kaGQAAAAAzaNacc2jWnEAAV+QAAFfkFXEAAAAAAAhaGRscgAAAAAAAAAAdmlkZQAAAAAAAAAAAAAAAAAAAAGWbWluZgAAABR2bWhkAAAAAQAAAAAAAAAAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAABVnN0YmwAAACpc3RzZAAAAAAAAAABAAAAmWF2YzEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAEAAQAEgAAABIAAAAAAAAAAEOSlZUL0FWQyBDb2RpbmcAAAAAAAAAAAAAAAAAAAAAAAAY//8AAAAxYXZjQwH0AAr/4QAZZ/QACq609NQYBBkAAAMAAQAAAwAKjxImoAEABWjOAa8gAAAAEmNvbHJuY2xjAAYAAQAGAAAAGHN0dHMAAAAAAAAAAQAAAAUAAEZQAAAAKHN0c3oAAAAAAAAAAAAAAAUAAAIqAAAACAAAAAgAAAAIAAAACAAAAChzdHNjAAAAAAAAAAIAAAABAAAABAAAAAEAAAACAAAAAQAAAAEAAAAYc3RjbwAAAAAAAAACAAADYgAABaQAAAAUc3RzcwAAAAAAAAABAAAAAQAAABFzZHRwAAAAAAREREREAAAAb3VkdGEAAABnbWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcgAAAAAAAAAAAAAAAAAAAAA6aWxzdAAAADKpdG9vAAAAKmRhdGEAAAABAAAAAEhhbmRCcmFrZSAwLjkuOCAyMDEyMDcxODAwAAACUm1kYXQAAAHkBgX/4NxF6b3m2Ui3lizYINkj7u94MjY0IC0gY29yZSAxMjAgLSBILjI2NC9NUEVHLTQgQVZDIGNvZGVjIC0gQ29weWxlZnQgMjAwMy0yMDExIC0gaHR0cDovL3d3dy52aWRlb2xhbi5vcmcveDI2NC5odG1sIC0gb3B0aW9uczogY2FiYWM9MCByZWY9MSBkZWJsb2NrPTE6MDowIGFuYWx5c2U9MHgxOjAgbWU9ZXNhIHN1Ym1lPTkgcHN5PTAgbWl4ZWRfcmVmPTAgbWVfcmFuZ2U9NCBjaHJvbWFfbWU9MSB0cmVsbGlzPTAgOHg4ZGN0PTAgY3FtPTAgZGVhZHpvbmU9MjEsMTEgZmFzdF9wc2tpcD0wIGNocm9tYV9xcF9vZmZzZXQ9MCB0aHJlYWRzPTYgc2xpY2VkX3RocmVhZHM9MCBucj0wIGRlY2ltYXRlPTEgaW50ZXJsYWNlZD0wIGJsdXJheV9jb21wYXQ9MCBjb25zdHJhaW5lZF9pbnRyYT0wIGJmcmFtZXM9MCB3ZWlnaHRwPTAga2V5aW50PTUwIGtleWludF9taW49NSBzY2VuZWN1dD00MCBpbnRyYV9yZWZyZXNoPTAgcmM9Y3FwIG1idHJlZT0wIHFwPTAAgAAAAD5liISscR8A+E4ACAACFoAAITAAAgsAAPgYCoKgoC+L4vi+KAvi+L4YfAEAACMzgABF9AAEUGUgABDJiXnf4AAAAARBmiKUAAAABEGaQpQAAAAEQZpilAAAAARBmoKU';
-                var promise = elem.play();
-                if (promise && promise.catch) {
-                    promise.catch(reject);
-                }
-
-                timeout = setTimeout(testAutoplay, 500);
-            } catch (e) {
-                reject();
-                return;
-            }
-        });
-    }
-
-    return {
-        supportsHtmlMediaAutoplay: supportsHtmlMediaAutoplay
-    };
-});
--- a/src/components/playback/iconosd.css
+++ b/src/components/playback/iconosd.css
@ -4,11 +4,11 @@
    right: 3%;
    z-index: 100000;
    background: #222;
-    background: rgba(0, 0, 0, .8);
+    background: rgba(0, 0, 0, 0.8);
    padding: 1em;
    color: #fff;
    backdrop-filter: blur(5px);
-    border-radius: .25em;
+    border-radius: 0.25em;
    transition: opacity 200ms ease-out;
 }

@ -19,22 +19,22 @@
 .iconOsdIcon {
    font-size: 320%;
    display: block;
-    margin: .25em .7em;
+    margin: 0.25em 0.7em;
 }

 .iconOsdProgressOuter {
-    margin: 1.5em .25em 1em;
-    height: .35em;
+    margin: 1.5em 0.25em 1em;
+    height: 0.35em;
    background: #222;
-    border-radius: .25em;
+    border-radius: 0.25em;
 }

 .iconOsdProgressInner {
    background: #00a4dc;
    height: 100%;
-    border-radius: .25em;
+    border-radius: 0.25em;
 }

 .brightnessOsdProgressInner {
-    background: #FF9800;
+    background: #ff9800;
 }
--- a/src/components/playerstats/playerstats.css
+++ b/src/components/playerstats/playerstats.css
@ -1,11 +1,10 @@
 .playerStats {
    background: rgba(28, 28, 28, 0.8);
-    border-radius: .3em;
+    border-radius: 0.3em;
    color: #fff;
    left: 1.5em;
    position: absolute;
    top: 5em;
-    color: #fff;
 }

 .playerStats-tv {
@ -23,8 +22,8 @@

 .playerStats-closeButton {
    position: absolute;
-    top: .25em;
-    right: .25em;
+    top: 0.25em;
+    right: 0.25em;
    color: #ccc;
    z-index: 1;
 }
@ -44,7 +43,7 @@

 .playerStats-stat-label {
    font-weight: 500;
-    margin: 0 .5em 0 0;
+    margin: 0 0.5em 0 0;
 }

 .playerStats-stat-header {
--- a/src/components/recordingcreator/recordingcreator.css
+++ b/src/components/recordingcreator/recordingcreator.css
@ -9,7 +9,7 @@
 }

 .recordingDialog-itemName {
-    margin-top: .7em;
+    margin-top: 0.7em;
 }

 .recordingDetailsContainer {
--- a/src/components/recordingcreator/recordingfields.css
+++ b/src/components/recordingcreator/recordingfields.css
@ -4,9 +4,9 @@
 }

 .recordingIcon-active {
-    color: #cc3333;
+    color: #c33;
 }

 .recordSeriesContainer {
-    margin-bottom: .8em;
+    margin-bottom: 0.8em;
 }
--- a/src/components/remotecontrol/remotecontrol.css
+++ b/src/components/remotecontrol/remotecontrol.css
@ -1,49 +1,89 @@
 .nowPlayingInfoContainer {
+    display: -webkit-box;
+    display: -webkit-flex;
    display: flex;
-    flex-direction: row
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: row;
+    flex-direction: row;
 }

 .navigationSection {
-    text-align: center
+    text-align: center;
+}
+
+.btnArrowUp {
+    border-radius: 40% 40% 10% 10%;
+}
+
+.btnArrowLeft {
+    border-radius: 40% 10% 10% 40%;
+}
+
+.btnArrowRight {
+    border-radius: 10% 40% 40% 10%;
+}
+
+.btnArrowDown {
+    border-radius: 10% 10% 40% 40%;
+}
+
+.btnOk {
+    border-radius: 10%;
 }

 .nowPlayingPageTitle {
-    margin: 0 0 .5em .5em
+    margin: 0 0 0.5em 0.5em;
 }

 .nowPlayingPositionSliderContainer {
-    margin: .7em 0 .7em 1em
+    margin: 0.7em 0 0.7em 1em;
 }

 .nowPlayingInfoButtons {
+    display: -webkit-box;
+    display: -webkit-flex;
    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
    align-items: center;
-    flex-wrap: wrap
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
 }

 .nowPlayingInfoControls,
 .nowPlayingTime {
    display: flex;
+    display: -webkit-box;
+    display: -webkit-flex;
 }

 .nowPlayingPageImageContainer {
    width: 20%;
-    margin-right: .25em;
+    margin-right: 0.25em;
    position: relative;
-    flex-shrink: 0
+    -webkit-flex-shrink: 0;
+    flex-shrink: 0;
 }

@media all and (min-width: 50em) {
    .nowPlayingPageImageContainer {
-        width: 16%
+        width: 16%;
    }
 }

 .nowPlayingInfoControls {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
    flex-grow: 1;
    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
    flex-direction: column;
-    justify-content: center
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
 }

 .nowPlayingPageImage {
@ -51,111 +91,142 @@
    left: 0;
    right: 0;
    width: 100%;
+    -webkit-box-shadow: 0 0 1.9vh #000;
    box-shadow: 0 0 1.9vh #000;
-    border: .1em solid #222;
+    border: 0.1em solid #222;
    user-drag: none;
    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
 }

@media all and (orientation: portrait) and (max-width: 50em) {
    .nowPlayingInfoContainer {
+        -webkit-box-orient: vertical !important;
+        -webkit-box-direction: normal !important;
+        -webkit-flex-direction: column !important;
        flex-direction: column !important;
-        align-items: center
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        align-items: center;
    }

    .nowPlayingPageTitle {
        text-align: center;
-        margin: .5em 0 .75em
+        margin: 0.5em 0 0.75em;
    }

    .nowPlayingPositionSliderContainer {
-        margin: .7em 1em
+        margin: 0.7em 1em;
    }

    .nowPlayingInfoButtons {
-        justify-content: center
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
    }

    .nowPlayingPageImageContainer {
        width: auto;
-        margin-right: 0
+        margin-right: 0;
    }

    .nowPlayingInfoControls {
        margin-top: 1em;
-        max-width: 100%
+        max-width: 100%;
    }

    .nowPlayingPageImage {
        width: auto;
-        height: 36vh
+        height: 36vh;
    }
 }

@media all and (orientation: portrait) and (max-width: 40em) {
    .nowPlayingPageImage {
-        height: 30vh
+        height: 30vh;
    }
 }

 .nowPlayingTime {
    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
    align-items: center;
-    margin: 0 1em
+    margin: 0 1em;
 }

 .nowPlayingSecondaryButtons {
+    display: -webkit-box;
+    display: -webkit-flex;
    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
    align-items: center;
+    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
-    justify-content: center
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
 }

@media all and (min-width: 50em) {
    .nowPlayingSecondaryButtons {
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
        flex-grow: 1;
-        justify-content: flex-end
+        -webkit-box-pack: end;
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end;
    }
 }

@media all and (min-width: 80em) {
    .nowPlayingPageImageContainer {
-        margin-right: .75em
+        margin-right: 0.75em;
    }
 }

 .nowPlayingNavButtonContainer {
-    width: 30em
+    width: 30em;
 }

 .smallBackdropPosterItem .cardOverlayInner > div {
    white-space: nowrap;
+    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
-    overflow: hidden
+    overflow: hidden;
 }

 .playlistIndexIndicatorImage {
+    -webkit-background-size: initial initial !important;
    background-size: initial !important;
-    background-image: url(assets/img/equalizer.gif) !important;
+    background-image: url(../../assets/img/equalizer.gif) !important;
 }

 .hideVideoButtons .videoButton {
-    display: none
+    display: none;
 }

 .nowPlayingVolumeSliderContainer {
-    width: 9em
+    width: 9em;
 }

@media all and (max-width: 50em) {
    .nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
-        display: none !important
+        display: none !important;
+    }
+
+    .navigationSection .collapseContent i {
+        font-size: 4em;
    }
 }

@media all and (max-width: 47em) {
    .nowPlayingInfoButtons .repeatToggleButton {
-        display: none !important
+        display: none !important;
    }
 }

@ -163,6 +234,6 @@
    .nowPlayingInfoButtons .btnNowPlayingFastForward,
    .nowPlayingInfoButtons .btnNowPlayingRewind,
    .nowPlayingInfoButtons .playlist .listItemMediaInfo {
-        display: none !important
+        display: none !important;
    }
 }
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@ -215,23 +215,12 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                context.querySelector(".sendTextSection").classList.add("hide");
            }

-            if (!currentPlayer.isLocalPlayer) {
+            if (-1 != supportedCommands.indexOf("Select") && !currentPlayer.isLocalPlayer) {
                context.querySelector(".navigationSection").classList.remove("hide");
            } else {
                context.querySelector(".navigationSection").classList.add("hide");
            }

-            buttonVisible(context.querySelector(".btnArrowUp"), -1 != supportedCommands.indexOf("MoveUp"));
-            buttonVisible(context.querySelector(".btnArrowLeft"), -1 != supportedCommands.indexOf("MoveDown"));
-            buttonVisible(context.querySelector(".btnArrowRight"), -1 != supportedCommands.indexOf("MoveRight"));
-            buttonVisible(context.querySelector(".btnArrowDown"), -1 != supportedCommands.indexOf("MoveLeft"));
-            buttonVisible(context.querySelector(".btnOk"), -1 != supportedCommands.indexOf("Select"));
-            buttonVisible(context.querySelector(".btnBack"), -1 != supportedCommands.indexOf("Back"));
-            buttonVisible(context.querySelector(".btnContextMenu"), -1 != supportedCommands.indexOf("ToggleContextMenu"));
-            buttonVisible(context.querySelector(".btnShowSearch"), -1 != supportedCommands.indexOf("GoToSearch"));
-            buttonVisible(context.querySelector(".bthShowSettings"), -1 != supportedCommands.indexOf("GoToSettings"));
-            buttonVisible(context.querySelector(".btnGoHome"), -1 != supportedCommands.indexOf("GoHome"));
-
            buttonVisible(context.querySelector(".btnStop"), null != item);
            buttonVisible(context.querySelector(".btnNextTrack"), null != item);
            buttonVisible(context.querySelector(".btnPreviousTrack"), null != item);
--- a/src/components/search/searchfields.css
+++ b/src/components/search/searchfields.css
@ -4,8 +4,8 @@
 }

 .searchfields-icon {
-    margin-bottom: .1em;
-    margin-right: .25em;
+    margin-bottom: 0.1em;
+    margin-right: 0.25em;
    font-size: 2em;
    align-self: flex-end;
 }
--- a/src/components/skinManager.js
+++ b/src/components/skinManager.js
@ -34,15 +34,12 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
            id: "dark",
            isDefault: true,
            isDefaultServerDashboard: true
-        }, {
-            name: "Emby",
-            id: "emby"
        }, {
            name: "Light",
            id: "light"
        }, {
            name: "Purple Haze",
-            id: "purple-haze"
+            id: "purplehaze"
        }, {
            name: "Windows Media Center",
            id: "wmc"
--- a/src/components/slideshow/style.css
+++ b/src/components/slideshow/style.css
@ -3,11 +3,14 @@
    background: #000;
 }

-.slideshowSwiperContainer, .swiper-wrapper, .swiper-slide {
+.slideshowSwiperContainer,
+.swiper-wrapper,
+.swiper-slide {
    background: #000;
 }

-.slideshowImage, .slideshowSwiperContainer {
+.slideshowImage,
+.slideshowSwiperContainer {
    position: fixed;
    top: 0;
    right: 0;
@ -27,11 +30,12 @@

 .slideshowImageText {
    position: fixed;
-    bottom: .25em;
-    right: .5em;
+    bottom: 0.25em;
+    right: 0.5em;
    color: #fff;
    z-index: 1002;
    font-weight: normal;
+
    /* Add an outline */
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
 }
@ -41,6 +45,9 @@
    height: auto;
    max-width: 100%;
    max-height: 100%;
+    -ms-transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
@ -49,26 +56,26 @@

 .slideshowButtonIcon {
    color: #fff;
-    opacity: .7;
+    opacity: 0.7;
 }

 .btnSlideshowPrevious {
-    left: .5vh;
+    left: 0.5vh;
    top: 45vh;
    z-index: 1002;
    position: absolute;
 }

 .btnSlideshowNext {
-    right: .5vh;
+    right: 0.5vh;
    top: 45vh;
    z-index: 1002;
    position: absolute;
 }

 .topActionButtons {
-    right: .5vh;
-    top: .5vh;
+    right: 0.5vh;
+    top: 0.5vh;
    z-index: 1002;
    position: absolute;
 }
@ -78,9 +85,9 @@
    left: 0;
    bottom: 0;
    right: 0;
-    background-color: rgba(0, 0, 0, .7);
+    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
-    padding: .5%;
+    padding: 0.5%;
    display: flex;
    flex-direction: row;
    align-items: center;
@ -92,9 +99,9 @@
    left: 0;
    top: 0;
    right: 0;
-    background-color: rgba(0, 0, 0, .7);
+    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
-    padding: .5%;
+    padding: 0.5%;
    display: flex;
    flex-direction: row;
    align-items: center;
@ -118,14 +125,14 @@
 .slideTextInner {
    margin: 0 auto;
    max-width: 60%;
-    background: rgba(0,0,0,.8);
+    background: rgba(0, 0, 0, 0.8);
    display: inline-block;
-    padding: .5em 1em;
-    border-radius: .25em;
+    padding: 0.5em 1em;
+    border-radius: 0.25em;
 }

 .slideTitle {
-    margin: 0 0 .25em;
+    margin: 0 0 0.25em;
 }

 .slideSubtitle {
--- a/src/components/subtitlesync/subtitlesync.css
+++ b/src/components/subtitlesync/subtitlesync.css
@ -4,7 +4,7 @@
    margin-right: 30%;
    height: 4.2em;
    background: rgba(28, 28, 28, 0.8);
-    border-radius: .3em;
+    border-radius: 0.3em;
    color: #fff;
    position: absolute;
 }
@ -40,7 +40,9 @@
    margin-right: 1%;
    top: 2.5em;
    height: 1.4em;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
    flex-grow: 1;
-    border-radius: .3em;
+    border-radius: 0.3em;
    z-index: 1;
 }
--- a/src/components/toast/toast.css
+++ b/src/components/toast/toast.css
@ -3,9 +3,9 @@
    min-width: 20em;
    box-sizing: border-box;
    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
-    border-radius: .15em;
+    border-radius: 0.15em;
    cursor: default;
-    transition: transform .3s ease-out;
+    transition: transform 0.3s ease-out;
    min-height: initial;
    padding: 1em 1.5em;
    bottom: 1em;
--- a/src/components/upnextdialog/upnextdialog.css
+++ b/src/components/upnextdialog/upnextdialog.css
@ -11,6 +11,7 @@
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    user-select: none;
+    -webkit-touch-callout: none;
 }

 .upNextDialog-hidden {
@ -27,7 +28,7 @@
    position: relative;
    margin-right: 1em;
    flex-shrink: 0;
-    margin-bottom: .5em;
+    margin-bottom: 0.5em;
 }

 .upNextDialog-button {
@ -36,7 +37,6 @@
 }

@media all and (orientation: landscape) {
-
    .upNextDialog {
        flex-direction: row;
    }
@ -66,4 +66,8 @@
    border: 0;
    user-drag: none;
    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
 }
--- a/src/components/userdatabuttons/userdatabuttons.css
+++ b/src/components/userdatabuttons/userdatabuttons.css
@ -1,3 +1,3 @@
 .btnUserDataOn {
-    color: #cc3333 !important;
+    color: #c33 !important;
 }
--- a/src/components/usersettings/usersettings.js
+++ b/src/components/usersettings/usersettings.js
@ -1,5 +0,0 @@
-define(['userSettingsBuilder'], function (userSettingsBuilder) {
-    'use strict';
-
-    return new userSettingsBuilder();
-});
--- a/src/components/viewManager/viewContainer.css
+++ b/src/components/viewManager/viewContainer.css
@ -5,7 +5,9 @@
    right: 0;
    bottom: 0;
    contain: layout style size;
+
    /* Can't use will-change because it causes the alpha picker to move when the page scrolls */
+
    /* will-change: transform; */
 }

@ -18,6 +20,7 @@
        opacity: 0;
    }
 }
+
@keyframes view-fadein {
    from {
        opacity: 0;
--- a/src/controllers/dashboard/general.js
+++ b/src/controllers/dashboard/general.js
@ -16,18 +16,6 @@ define(["jQuery", "loading", "fnchecked", "emby-checkbox", "emby-textarea", "emb
            return '<option value="' + language.Value + '">' + language.Name + "</option>"
        })).val(config.UICulture);
        currentLanguage = config.UICulture;
-        if (systemInfo.CanSelfUpdate) {
-            page.querySelector(".fldAutomaticUpdates").classList.remove("hide");
-        } else {
-            page.querySelector(".fldAutomaticUpdates").classList.add("hide");
-        }
-        $("#chkEnableAutomaticServerUpdates", page).checked(config.EnableAutoUpdate);
-        $("#chkEnableAutomaticRestart", page).checked(config.EnableAutomaticRestart);
-        if (systemInfo.CanSelfRestart) {
-            page.querySelector("#fldEnableAutomaticRestart").classList.remove("hide");
-        } else {
-            page.querySelector("#fldEnableAutomaticRestart").classList.add("hide");
-        }
        if (systemInfo.CanSelfRestart || systemInfo.CanSelfUpdate) {
            $(".autoUpdatesContainer", page).removeClass("hide");
        } else {
@ -48,8 +36,6 @@ define(["jQuery", "loading", "fnchecked", "emby-checkbox", "emby-textarea", "emb
            config.MetadataNetworkPath = $("#txtMetadataNetworkPath", form).val();
            var requiresReload = (config.UICulture !== currentLanguage);
            config.AutoRunWebApp = $("#chkAutoRunWebApp", form).checked();
-            config.EnableAutomaticRestart = $("#chkEnableAutomaticRestart", form).checked();
-            config.EnableAutoUpdate = $("#chkEnableAutomaticServerUpdates", form).checked();
            ApiClient.updateServerConfiguration(config).then(function() {
                ApiClient.getNamedConfiguration(brandingConfigKey).then(function(brandingConfig) {
                    brandingConfig.LoginDisclaimer = form.querySelector("#txtLoginDisclaimer").value;
--- a/src/controllers/movies/moviegenres.js
+++ b/src/controllers/movies/moviegenres.js
@ -114,7 +114,10 @@ define(["layoutManager", "loading", "libraryBrowser", "cardBuilder", "lazyLoader
                        shape: getPortraitShape(),
                        scalable: true,
                        overlayMoreButton: true,
-                        allowBottomPadding: false
+                        allowBottomPadding: true,
+                        showTitle: true,
+                        centerText: true,
+                        showYear: true
                    });
                }
                if (result.Items.length >= query.Limit) {
--- a/src/controllers/movies/moviesrecommended.js
+++ b/src/controllers/movies/moviesrecommended.js
@ -1,4 +1,4 @@
-define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu", "mainTabsManager", "cardBuilder", "dom", "imageLoader", "playbackManager", "emby-itemscontainer", "emby-tabs", "emby-button"], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager) {
+define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu", "mainTabsManager", "cardBuilder", "dom", "imageLoader", "playbackManager", "emby-scroller", "emby-itemscontainer", "emby-tabs", "emby-button"], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager) {
    "use strict";

    function enableScrollX() {
@ -114,18 +114,25 @@ define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu"
        var allowBottomPadding = true;

        if (enableScrollX()) {
-            allowBottomPadding = false;
-            html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX padded-left padded-right">';
+            html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
+            html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
        } else {
-            html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">';
+            html += '<div is="emby-itemscontainer" class="itemsContainer focuscontainer-x padded-left padded-right vertical-wrap">';
        }

        html += cardBuilder.getCardsHtml(recommendation.Items, {
            shape: getPortraitShape(),
            scalable: true,
            overlayPlayButton: true,
-            allowBottomPadding: allowBottomPadding
+            allowBottomPadding: allowBottomPadding,
+            showTitle: true,
+            showYear: true,
+            centerText: true
        });
+
+        if (enableScrollX()) {
+            html += '</div>';
+        }
        html += "</div>";
        html += "</div>";
        return html;
--- a/src/controllers/playback/nowplayingpage.js
+++ b/src/controllers/playback/nowplayingpage.js
--- a/src/controllers/playback/videoosd.js
+++ b/src/controllers/playback/videoosd.js
@ -1,4 +1,4 @@
-define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "mediaInfo", "focusManager", "imageLoader", "scrollHelper", "events", "connectionManager", "browser", "globalize", "apphost", "layoutManager", "userSettings", "scrollStyles", "emby-slider", "paper-icon-button-light", "css!assets/css/videoosd"], function (playbackManager, dom, inputManager, datetime, itemHelper, mediaInfo, focusManager, imageLoader, scrollHelper, events, connectionManager, browser, globalize, appHost, layoutManager, userSettings) {
+define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "mediaInfo", "focusManager", "imageLoader", "scrollHelper", "events", "connectionManager", "browser", "globalize", "apphost", "layoutManager", "userSettings", "keyboardnavigation", "scrollStyles", "emby-slider", "paper-icon-button-light", "css!assets/css/videoosd"], function (playbackManager, dom, inputManager, datetime, itemHelper, mediaInfo, focusManager, imageLoader, scrollHelper, events, connectionManager, browser, globalize, appHost, layoutManager, userSettings, keyboardnavigation) {
    "use strict";

    function seriesImageUrl(item, options) {
@ -437,6 +437,11 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
                });
                currentVisibleMenu = null;
                toggleSubtitleSync("hide");
+
+                // Firefox does not blur by itself
+                if (document.activeElement) {
+                    document.activeElement.blur();
+                }
            }
        }

@ -1087,50 +1092,66 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
         */
        var NavigationKeys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];

+        /**
+         * Clicked element.
+         * To skip 'click' handling on Firefox/Edge.
+         */
+        var clickedElement;
+
        function onWindowKeyDown(e) {
+            clickedElement = e.srcElement;
+
+            var key = keyboardnavigation.getKeyName(e);
+
            if (!currentVisibleMenu && 32 === e.keyCode) {
                playbackManager.playPause(currentPlayer);
                showOsd();
                return;
            }

-            if (layoutManager.tv && NavigationKeys.indexOf(e.key) != -1) {
+            if (layoutManager.tv && NavigationKeys.indexOf(key) != -1) {
                showOsd();
                return;
            }

-            switch (e.key) {
+            switch (key) {
+                case "Enter":
+                    showOsd();
+                    break;
+                case "Escape":
+                case "Back":
+                    // Ignore key when some dialog is opened
+                    if (currentVisibleMenu === "osd" && !document.querySelector(".dialogContainer")) {
+                        hideOsd();
+                        e.stopPropagation();
+                    }
+                    break;
                case "k":
                    playbackManager.playPause(currentPlayer);
                    showOsd();
                    break;
-
                case "l":
                case "ArrowRight":
                case "Right":
                    playbackManager.fastForward(currentPlayer);
                    showOsd();
                    break;
-
                case "j":
                case "ArrowLeft":
                case "Left":
                    playbackManager.rewind(currentPlayer);
                    showOsd();
                    break;
-
                case "f":
                    if (!e.ctrlKey && !e.metaKey) {
                        playbackManager.toggleFullscreen(currentPlayer);
                        showOsd();
                    }
                    break;
-
                case "m":
                    playbackManager.toggleMute(currentPlayer);
                    showOsd();
                    break;
-
                case "NavigationLeft":
                case "GamepadDPadLeft":
                case "GamepadLeftThumbstickLeft":
@ -1140,7 +1161,6 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
                        showOsd();
                    }
                    break;
-
                case "NavigationRight":
                case "GamepadDPadRight":
                case "GamepadLeftThumbstickRight":
@ -1152,6 +1172,14 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
            }
        }

+        function onWindowMouseDown(e) {
+            clickedElement = e.srcElement;
+        }
+
+        function onWindowTouchStart(e) {
+            clickedElement = e.srcElement;
+        }
+
        function getImgUrl(item, chapter, index, maxWidth, apiClient) {
            if (chapter.ImageTag) {
                return apiClient.getScaledImageUrl(item.Id, {
@ -1280,6 +1308,12 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
                showOsd();
                inputManager.on(window, onInputCommand);
                dom.addEventListener(window, "keydown", onWindowKeyDown, {
+                    capture: true
+                });
+                dom.addEventListener(window, window.PointerEvent ? "pointerdown" : "mousedown", onWindowMouseDown, {
+                    passive: true
+                });
+                dom.addEventListener(window, "touchstart", onWindowTouchStart, {
                    passive: true
                });
            } catch (e) {
@ -1294,6 +1328,12 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
            }

            dom.removeEventListener(window, "keydown", onWindowKeyDown, {
+                capture: true
+            });
+            dom.removeEventListener(window, window.PointerEvent ? "pointerdown" : "mousedown", onWindowMouseDown, {
+                passive: true
+            });
+            dom.removeEventListener(window, "touchstart", onWindowTouchStart, {
                passive: true
            });
            stopOsdHideTimer();
@ -1465,7 +1505,10 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
            playbackManager.previousTrack(currentPlayer);
        });
        view.querySelector(".btnPause").addEventListener("click", function () {
+            // Ignore 'click' if another element was originally clicked (Firefox/Edge issue)
+            if (this.contains(clickedElement)) {
                playbackManager.playPause(currentPlayer);
+            }
        });
        view.querySelector(".btnNextTrack").addEventListener("click", function () {
            playbackManager.nextTrack(currentPlayer);
--- a/src/dashboardgeneral.html
+++ b/src/dashboardgeneral.html
@ -56,21 +56,6 @@
                    </div>
                </div>

-                <div class="verticalSection autoUpdatesContainer hide">
-                    <h2>${HeaderAutomaticUpdates}</h2>
-                    <label class="fldAutomaticUpdates checkboxContainer">
-                        <input is="emby-checkbox" type="checkbox" id="chkEnableAutomaticServerUpdates" />
-                        <span>${OptionEnableAutomaticServerUpdates}</span>
-                    </label>
-                    <div id="fldEnableAutomaticRestart" class="checkboxContainer checkboxContainer-withDescription hide">
-                        <label>
-                            <input is="emby-checkbox" type="checkbox" id="chkEnableAutomaticRestart" />
-                            <span>${LabelAllowServerAutoRestart}</span>
-                        </label>
-                        <div class="fieldDescription checkboxFieldDescription">${LabelAllowServerAutoRestartHelp}</div>
-                    </div>
-                </div>
-
                <div class="verticalSection">
                    <h2>${HeaderBranding}</h2>
                    <div class="inputContainer">
--- a/src/elements/emby-button/emby-button.css
+++ b/src/elements/emby-button/emby-button.css
@ -8,20 +8,26 @@
    font-size: inherit;
    font-family: inherit;
    color: inherit;
+
+    /* These are getting an outline in opera tv browsers, which run chrome 30 */
+    outline: none !important;
    outline-width: 0;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    z-index: 0;
    padding: 0.9em 1em;
    vertical-align: middle;
    border: 0;
-    vertical-align: middle;
    border-radius: 0.2em;
-    /* These are getting an outline in opera tv browsers, which run chrome 30 */
-    outline: none !important;
-    position: relative;
    font-weight: 600;
+
+    /* Disable webkit tap highlighting */
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    text-decoration: none;
+
    /* Not crazy about this but it normalizes heights between anchors and buttons */
    line-height: 1.35;
    transform-origin: center;
@ -42,7 +48,7 @@
 }

 .button-flat:hover {
-    opacity: .5;
+    opacity: 0.5;
 }

 .button-link {
@ -79,7 +85,7 @@
    display: block;
    align-items: center;
    justify-content: center;
-    margin: .25em 0;
+    margin: 0.25em 0;
    width: 100%;
 }

@ -88,12 +94,15 @@
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
-    margin: 0 .29em;
+    margin: 0 0.29em;
    background: transparent;
    text-align: center;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    z-index: 0;
@ -101,15 +110,17 @@
    min-height: initial;
    width: auto;
    height: auto;
-    padding: .556em;
+    padding: 0.556em;
    vertical-align: middle;
    border: 0;
-    vertical-align: middle;
+
    /* These are getting an outline in opera tv browsers, which run chrome 30 */
    outline: none !important;
-    position: relative;
    overflow: hidden;
    border-radius: 50%;
+
+    /* Disable webkit tap highlighting */
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    justify-content: center;
    transform-origin: center;
    transition: 0.2s;
@ -131,6 +142,7 @@

 .paper-icon-button-light > i {
    font-size: 1.66956521739130434em;
+
    /* Make sure its on top of the ripple */
    position: relative;
    z-index: 1;
@ -159,7 +171,6 @@
 .filterButtonBubble {
    color: #fff;
    position: absolute;
-    background: #444;
    top: 0;
    right: 0;
    width: 1.6em;
@ -170,7 +181,7 @@
    justify-content: center;
    font-size: 82%;
    border-radius: 100em;
-    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
-    background: #03A9F4;
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+    background: #03a9f4;
    font-weight: bold;
 }
--- a/src/elements/emby-checkbox/emby-checkbox.css
+++ b/src/elements/emby-checkbox/emby-checkbox.css
@ -32,12 +32,16 @@

 .emby-checkbox {
    position: absolute;
+
    /* This is for focusing purposes, so the focusManager doesn't skip over it */
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
    appearance: none;
    border: none;
 }
@ -46,14 +50,13 @@
    position: absolute;
    top: 3px;
    left: 0;
-    display: inline-block;
    box-sizing: border-box;
    width: 1.83em;
    height: 1.83em;
    margin: 0;
    overflow: hidden;
    border: 2px solid currentcolor;
-    border-radius: .14em;
+    border-radius: 0.14em;
    z-index: 2;
    display: flex;
    align-items: center;
@ -100,7 +103,7 @@

 .checkboxList-verticalwrap > .emby-checkbox-label {
    display: inline-flex;
-        margin: .3em 0 .3em 0;
+    margin: 0.3em 0 0.3em 0;
    width: 12em;
 }

@ -109,7 +112,7 @@
 }

 .checkboxListLabel {
-    margin-bottom: .25em;
+    margin-bottom: 0.25em;
 }

@keyframes repaintChrome {
@ -121,3 +124,13 @@
        padding: 0;
    }
 }
+
+@-webkit-keyframes repaintChrome {
+    from {
+        padding: 0;
+    }
+
+    to {
+        padding: 0;
+    }
+}
--- a/src/elements/emby-collapse/emby-collapse.css
+++ b/src/elements/emby-collapse/emby-collapse.css
@ -1,5 +1,5 @@
 .emby-collapse {
-    margin: .5em 0;
+    margin: 0.5em 0;
 }

 .collapseContent {
@ -18,10 +18,9 @@
    text-transform: none;
    width: 100%;
    text-align: left;
-    text-transform: none;
-    border-width: 0 0 .1em 0;
+    border-width: 0 0 0.1em 0;
    border-style: solid;
-    padding-left: .1em;
+    padding-left: 0.1em;
    background: transparent;
    box-shadow: none;
 }
@ -30,7 +29,7 @@
    transform-origin: 50% 50%;
    transition: transform 180ms ease-out;
    position: absolute;
-    right: .5em;
+    right: 0.5em;
    font-size: 1.5em;
 }

--- a/src/elements/emby-input/emby-input.css
+++ b/src/elements/emby-input/emby-input.css
@ -2,16 +2,18 @@
    display: block;
    margin: 0;
    margin-bottom: 0 !important;
-    /* Remove select styling */
-    /* Font size must the 16px or larger to prevent iOS page zoom on focus */
-    font-size: 110%;
-    /* General select styles: change as needed */
    font-family: inherit;
    font-weight: inherit;
-    padding: .4em .25em;
-    /* Prevent padding from causing width overflow */
+    padding: 0.4em 0.25em;
+
+    /* must the 16px or larger to prevent iOS page zoom on focus */
+    font-size: 110%;
+
+    /* prevent padding from causing width overflow */
+    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none !important;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 100%;
 }

@ -25,13 +27,14 @@

 .inputLabel {
    display: inline-block;
-    margin-bottom: .25em;
+    margin-bottom: 0.25em;
 }

 .emby-input + .fieldDescription {
-    margin-top: .25em;
+    margin-top: 0.25em;
 }

 .emby-input-iconbutton {
+    -webkit-align-self: flex-end;
    align-self: flex-end;
 }
--- a/src/elements/emby-progressring/emby-progressring.css
+++ b/src/elements/emby-progressring/emby-progressring.css
@ -11,9 +11,9 @@
    width: 100%;
    height: 100%;
    border-radius: 50%;
-    border: .25em solid rgba(0, 0, 0, 1);
+    border: 0.25em solid rgba(0, 0, 0, 1);
    box-sizing: border-box;
-    background: rgba(0, 0, 0, .9);
+    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
@ -51,7 +51,7 @@
    width: 200%;
    height: 200%;
    border-radius: 50%;
-    border-width: .25em;
+    border-width: 0.25em;
    border-style: solid;
    box-sizing: border-box;
 }
--- a/src/elements/emby-radio/emby-radio.css
+++ b/src/elements/emby-radio/emby-radio.css
@ -4,29 +4,29 @@
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
-    padding-left: 0;
+    padding-left: 24px;
 }

 .radio-label-block {
    display: flex;
    align-items: center;
-    margin-top: .5em;
-    margin-bottom: .5em;
-}
-
-.mdl-radio {
-    padding-left: 24px;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
 }

 .mdl-radio__button {
    line-height: 24px;
    position: absolute;
+
    /* 1px is for focusing purposes, so the focusManager doesn't skip over it */
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
    appearance: none;
    border: none;
 }
@ -67,13 +67,17 @@
    cursor: pointer;
    transition-duration: 0.28s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: -webkit-transform;
    transition-property: transform;
+    transition-property: transform, -webkit-transform;
+    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    border-radius: 50%;
    background: #00a4dc;
 }

 .mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
+    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
 }

@ -83,11 +87,11 @@
 }

 .mdl-radio__button:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    box-shadow: 0 0 0px 10px rgba(255, 255, 255, 0.76);
+    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.76);
 }

 .mdl-radio__button:checked:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26)
+    box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26);
 }

 .mdl-radio__label {
--- a/src/elements/emby-select/emby-select.css
+++ b/src/elements/emby-select/emby-select.css
@ -2,16 +2,21 @@
    display: block;
    margin: 0;
    margin-bottom: 0 !important;
+
    /* Remove select styling */
+
    /* Font size must the 16px or larger to prevent iOS page zoom on focus */
    font-size: 110%;
+
    /* General select styles: change as needed */
    font-family: inherit;
    font-weight: inherit;
-    padding: .5em 1.9em .5em .5em;
+    padding: 0.5em 1.9em 0.5em 0.5em;
+
    /* Prevent padding from causing width overflow */
    box-sizing: border-box;
    outline: none !important;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 100%;
 }

@ -19,11 +24,17 @@
    background: none !important;
    border-color: transparent !important;
    color: inherit !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
    appearance: none;
 }

+.emby-select::-moz-focus-inner {
+    border: 0;
+}
+
 .selectContainer-inline > .emby-select {
-    padding: .3em 1.9em .3em .5em;
+    padding: 0.3em 1.9em 0.3em 0.5em;
    font-size: inherit;
 }

@ -32,12 +43,9 @@
    padding-right: 0;
 }

-.emby-select::-moz-focus-inner {
-    border: 0;
-}
-
 .emby-select-focusscale {
    transition: transform 180ms ease-out !important;
+    -webkit-transform-origin: center center;
    transform-origin: center center;
 }

@ -47,7 +55,7 @@
 }

 .emby-select + .fieldDescription {
-    margin-top: .25em;
+    margin-top: 0.25em;
 }

 .selectContainer {
@ -63,31 +71,32 @@

 .selectLabel {
    display: block;
-    margin-bottom: .25em;
+    margin-bottom: 0.25em;
 }

 .selectContainer-inline > .selectLabel {
    margin-bottom: 0;
-    margin-right: .5em;
+    margin-right: 0.5em;
    flex-shrink: 0;
 }

 .emby-select-withcolor {
+    -webkit-appearance: none;
    appearance: none;
-    border-radius: .2em;
+    border-radius: 0.2em;
 }

 .selectArrowContainer {
    position: absolute;
-    right: .3em;
-    top: .2em;
+    right: 0.3em;
+    top: 0.2em;
    color: inherit;
    pointer-events: none;
 }

 .selectContainer-inline > .selectArrowContainer {
    top: initial;
-    bottom: .24em;
+    bottom: 0.24em;
    font-size: 90%;
 }

@ -96,7 +105,7 @@
 }

 .selectArrow {
-    margin-top: .35em;
+    margin-top: 0.35em;
    font-size: 1.7em;
 }

--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@ -1,21 +1,33 @@
-_:-ms-input-placeholder {
+:-ms-input-placeholder {
    appearance: none;
+    -ms-appearance: none;
    height: 2.223em;
    margin: 0;
 }

 .mdl-slider {
    width: 100%;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
    appearance: none;
    height: 150%;/* 150% is needed, else ie and edge won't display the thumb properly */
    background: transparent;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
    user-select: none;
    outline: 0;
    color: #00a4dc;
+    -webkit-align-self: center;
+    -ms-flex-item-align: center;
    align-self: center;
    z-index: 1;
    cursor: pointer;
    margin: 0;
+
+    /* Disable webkit tap highlighting */
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    display: block;
 }

@ -45,7 +57,7 @@ _:-ms-input-placeholder {
 .mdl-slider::-ms-track {
    background: none;
    color: transparent;
-        height: .2em;
+    height: 0.2em;
    width: 100%;
    border: none;
 }
@ -59,7 +71,7 @@ _:-ms-input-placeholder {
 }

 .mdl-slider::-webkit-slider-thumb {
-        appearance: none;
+    -webkit-appearance: none;
    width: 1.2em;
    height: 1.2em;
    box-sizing: border-box;
@ -91,27 +103,27 @@ _:-ms-input-placeholder {
    height: 0.9em;
    box-sizing: border-box;
    border-radius: 50%;
-    background-image: none;
    background: #00a4dc;
+    background-image: none;
    border: none;
-    transform: Scale(1.4, 1.4);
+    transform: scale(1.4, 1.4);
 }

 .mdl-slider::-ms-thumb {
-    appearance: none;
+    -webkit-appearance: none;
    width: 1.8em;
    height: 1.8em;
    box-sizing: border-box;
    border-radius: 50%;
    background: #00a4dc;
    border: none;
-    transform: scale(.9, .9);
+    transform: scale(0.9, 0.9);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .mdl-slider-hoverthumb::-ms-thumb {
-    margin-left: -.4em;
-    transform: scale(.5, .5);
+    margin-left: -0.4em;
+    transform: scale(0.5, 0.5);
 }

 .mdl-slider:hover::-ms-thumb {
@ -149,15 +161,15 @@ _:-ms-input-placeholder {
 .mdl-slider-background-flex-container {
    width: 100%;
    box-sizing: border-box;
-    margin-top: -.05em;
+    margin-top: -0.05em;
    top: 50%;
    position: absolute;
 }

 .mdl-slider-background-flex {
    background: #333;
-    height: .2em;
-    margin-top: -.08em;
+    height: 0.2em;
+    margin-top: -0.08em;
    width: 100%;
    top: 50%;
    left: 0;
@ -188,6 +200,7 @@ _:-ms-input-placeholder {

 .mdl-slider-background-lower-withtransform {
    width: 100%;
+
    /* transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); */
    transform-origin: left center;
    transform: scaleX(0);
@ -196,7 +209,7 @@ _:-ms-input-placeholder {
 .mdl-slider-background-upper {
    /* transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1), width 0.18s cubic-bezier(0.4, 0, 0.2, 1); */
    background: #666;
-    background: rgba(255, 255, 255, .4);
+    background: rgba(255, 255, 255, 0.4);
    position: absolute;
    left: 0;
    width: 0;
@ -218,5 +231,5 @@ _:-ms-input-placeholder {

 .sliderBubbleText {
    margin: 0;
-    padding: .5em .75em;
+    padding: 0.5em 0.75em;
 }
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@ -1,4 +1,4 @@
-define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager) {
+define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager, keyboardnavigation) {
    'use strict';

    var EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
@ -250,7 +250,7 @@ define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement
     * Handle KeyDown event
     */
    function onKeyDown(e) {
-        switch (e.key) {
+        switch (keyboardnavigation.getKeyName(e)) {
            case 'ArrowLeft':
            case 'Left':
                stepKeyboard(this, -this.keyboardStepDown || -1);
--- a/src/elements/emby-textarea/emby-textarea.css
+++ b/src/elements/emby-textarea/emby-textarea.css
@ -2,17 +2,22 @@
    display: block;
    margin: 0;
    margin-bottom: 0 !important;
+
    /* Remove select styling */
+
    /* Font size must the 16px or larger to prevent iOS page zoom on focus */
    font-size: inherit;
+
    /* General select styles: change as needed */
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
-    padding: .35em .25em;
+    padding: 0.35em 0.25em;
+
    /* Prevent padding from causing width overflow */
    box-sizing: border-box;
    outline: none !important;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 100%;
 }

@ -22,10 +27,10 @@

 .textareaLabel {
    display: inline-block;
-    transition: all .2s ease-out;
-    margin-bottom: .25em;
+    transition: all 0.2s ease-out;
+    margin-bottom: 0.25em;
 }

 .emby-textarea + .fieldDescription {
-    margin-top: .25em;
+    margin-top: 0.25em;
 }
--- a/src/elements/emby-toggle/emby-toggle.css
+++ b/src/elements/emby-toggle/emby-toggle.css
@ -9,6 +9,10 @@
    margin: 0;
    padding: 0;
    overflow: visible;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
    user-select: none;
    flex-direction: row-reverse;
    justify-content: flex-end;
@ -24,6 +28,9 @@
    margin: 0;
    padding: 0;
    opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
    appearance: none;
    border: none;
 }
@ -53,7 +60,7 @@
    background: #999;
    position: absolute;
    left: 0;
-    top: -.25em;
+    top: -0.25em;
    height: 1.44em;
    width: 1.44em;
    border-radius: 50%;
@ -70,7 +77,7 @@
 .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
    background: #00a4dc;
    left: 1.466em;
-    box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px .56em 0 rgba(0, 0, 0, 0.12);
+    box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 0.56em 0 rgba(0, 0, 0, 0.12);
 }

 .mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
@ -82,17 +89,18 @@
    position: absolute;
    top: 50%;
    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: inline-block;
    box-sizing: border-box;
-    width: .6em;
-    height: .6em;
+    width: 0.6em;
+    height: 0.6em;
    border-radius: 50%;
    background-color: transparent;
 }

 .mdl-switch__input:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper {
-    box-shadow: 0 0 0 1.39em rgba(0, 0, 0, .05);
+    box-shadow: 0 0 0 1.39em rgba(0, 0, 0, 0.05);
 }

 .mdl-switch__input:checked:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper {
@ -105,7 +113,7 @@
    margin: 0;
    display: inline-flex;
    align-items: center;
-    margin-left: .7em;
+    margin-left: 0.7em;
 }

 .mdl-switch__input[disabled] .mdl-switch__label {
--- a/src/nowplaying.html
+++ b/src/nowplaying.html
@ -72,22 +72,24 @@
                </div>
            </div>
        </div>
-        <div class="navigationSection">
-            <br />
        <div>
-                <button is="paper-icon-button-light" class="btnArrowUp btnCommand autoSize raised" title="${ButtonArrowUp}" data-command="MoveUp">
+            <div class="navigationSection">
+                <div is="emby-collapse" title="${HeaderNavigation}">
+                    <div class="collapseContent">
+                        <div>
+                            <button is="paper-icon-button-light" class="btnArrowUp btnCommand autoSize button-submit" title="${ButtonArrowUp}" data-command="MoveUp">
                                <i class="md-icon">keyboard_arrow_up</i>
                            </button>
                        </div>
                        <br />
                        <div>
-                <button is="paper-icon-button-light" class="btnArrowLeft btnCommand autoSize raised" title="${ButtonArrowLeft}" data-command="MoveLeft">
+                            <button is="paper-icon-button-light" class="btnArrowLeft btnCommand autoSize button-submit" title="${ButtonArrowLeft}" data-command="MoveLeft">
                                <i class="md-icon">keyboard_arrow_left</i>
                            </button>
-                <button is="paper-icon-button-light" class="btnOk btnCommand autoSize raised" title="${ButtonOk}" data-command="Select">
+                            <button is="paper-icon-button-light" class="btnOk btnCommand autoSize button-submit" title="${ButtonOk}" data-command="Select">
                                <i class="md-icon">keyboard_return</i>
                            </button>
-                <button is="paper-icon-button-light" class="btnArrowRight btnCommand autoSize raised" title="${ButtonArrowRight}" data-command="MoveRight">
+                            <button is="paper-icon-button-light" class="btnArrowRight btnCommand autoSize button-submit" title="${ButtonArrowRight}" data-command="MoveRight">
                                <i class="md-icon">keyboard_arrow_right</i>
                            </button>
                        </div>
@ -96,7 +98,7 @@
                            <button is="paper-icon-button-light" class="btnBack btnCommand autoSize" title="${ButtonBack}" data-command="Back">
                                <i class="md-icon">arrow_back</i>
                            </button>
-                <button is="paper-icon-button-light" class="btnArrowDown btnCommand autoSize raised" title="${ButtonArrowDown}" data-command="MoveDown">
+                            <button is="paper-icon-button-light" class="btnArrowDown btnCommand autoSize button-submit" title="${ButtonArrowDown}" data-command="MoveDown">
                                <i class="md-icon">keyboard_arrow_down</i>
                            </button>
                            <button is="paper-icon-button-light" class="btnContextMenu btnCommand autoSize" title="${ButtonInfo}" data-command="ToggleContextMenu">
@ -116,6 +118,9 @@
                            </button>
                        </div>
                    </div>
+                </div>
+            </div>
+        </div>
        <div>
            <div class="sendMessageSection">
                <div is="emby-collapse" title="${HeaderSendMessage}">
--- a/src/scripts/browserdeviceprofile.js
+++ b/src/scripts/browserdeviceprofile.js
@ -77,10 +77,6 @@ define(['browser'], function (browser) {
            return true;
        }

-        if (browser.osx || browser.iOS) {
-            return false;
-        }
-
        return videoTestElement.canPlayType('audio/mp4; codecs="ac-3"').replace(/no/, '');
    }

--- a/src/scripts/inputManager.js
+++ b/src/scripts/inputManager.js
@ -22,9 +22,7 @@ define(['playbackManager', 'focusManager', 'appRouter', 'dom', 'apphost'], funct

    var eventListenerCount = 0;
    function on(scope, fn) {
-        if (eventListenerCount) {
        eventListenerCount++;
-        }
        dom.addEventListener(scope, 'command', fn, {});
    }

--- a/src/scripts/librarymenu.js
+++ b/src/scripts/librarymenu.js
@ -108,8 +108,10 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
            headerCastButton.addEventListener("click", onCastButtonClicked);
        }

+        if (layoutManager.mobile) {
            initHeadRoom(skinHeader);
        }
+    }

    function onCastButtonClicked() {
        var btn = this;
@ -424,7 +426,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
        return getToolsMenuHtml(apiClient).then(function (toolsMenuHtml) {
            var html = "";
            html += '<a class="adminDrawerLogo clearLink" is="emby-linkbutton" href="home.html">';
-            html += '<img src="assets/img/logo.png" />';
+            html += '<img src="assets/img/icon-transparent.png" />';
            html += "</a>";
            html += toolsMenuHtml;
            navDrawerScrollContainer.innerHTML = html;
--- a/src/scripts/settings/appSettings.js
+++ b/src/scripts/settings/appSettings.js
@ -10,13 +10,13 @@ define(['appStorage', 'events'], function (appStorage, events) {
    }

    function AppSettings() {
-
    }

    AppSettings.prototype.enableAutoLogin = function (val) {
        if (val != null) {
            this.set('enableAutoLogin', val.toString());
        }
+
        return this.get('enableAutoLogin') !== 'false';
    };

--- a/src/components/usersettings/usersettingsbuilder.js
+++ b/src/components/usersettings/usersettingsbuilder.js
@ -242,5 +242,5 @@ define(['appSettings', 'events'], function (appSettings, events) {
        return this.get(key, true);
    };

-    return UserSettings;
+    return new UserSettings();
 });
--- a/src/scripts/site.js
+++ b/src/scripts/site.js
@ -315,6 +315,14 @@ var AppInfo = {};
        return "components";
    }

+    function getElementsPath() {
+        return "elements"
+    }
+
+    function getScriptsPath() {
+        return "scripts"
+    }
+
    function getPlaybackManager(playbackManager) {
        window.addEventListener("beforeunload", function () {
            try {
@ -650,8 +658,12 @@ var AppInfo = {};

    (function () {
        var urlArgs = "v=" + (window.dashboardVersion || new Date().getDate());
+
        var bowerPath = getBowerPath();
        var componentsPath = getComponentsPath();
+        var elementsPath = getElementsPath();
+        var scriptsPath = getScriptsPath();
+
        var paths = {
            browserdeviceprofile: "scripts/browserdeviceprofile",
            browser: "scripts/browser",
@ -672,7 +684,6 @@ var AppInfo = {};
            itemHelper: componentsPath + "/itemhelper",
            itemShortcuts: componentsPath + "/shortcuts",
            playQueueManager: componentsPath + "/playback/playqueuemanager",
-            autoPlayDetect: componentsPath + "/playback/autoplaydetect",
            nowPlayingHelper: componentsPath + "/playback/nowplayinghelper",
            pluginManager: componentsPath + "/pluginManager",
            packageManager: componentsPath + "/packagemanager",
@ -765,7 +776,6 @@ var AppInfo = {};
            return queryString;
        });

-        var elementsPath = "elements"
        define("emby-button", [elementsPath + "/emby-button/emby-button"], returnFirstDependency);
        define("paper-icon-button-light", [elementsPath + "/emby-button/paper-icon-button-light"], returnFirstDependency);
        define("emby-checkbox", [elementsPath + "/emby-checkbox/emby-checkbox"], returnFirstDependency);
@ -778,6 +788,9 @@ var AppInfo = {};
        define("emby-textarea", [elementsPath + "/emby-textarea/emby-textarea"], returnFirstDependency);
        define("emby-toggle", [elementsPath + "/emby-toggle/emby-toggle"], returnFirstDependency);

+        define("appSettings", [scriptsPath + "/settings/appSettings"], returnFirstDependency);
+        define("userSettings", [scriptsPath + "/settings/userSettings"], returnFirstDependency);
+
        define("chromecastHelper", [componentsPath + "/chromecast/chromecasthelpers"], returnFirstDependency);
        define("mediaSession", [componentsPath + "/playback/mediasession"], returnFirstDependency);
        define("actionsheet", [componentsPath + "/actionsheet/actionsheet"], returnFirstDependency);
@ -865,9 +878,6 @@ var AppInfo = {};
        define("toast", [componentsPath + "/toast/toast"], returnFirstDependency);
        define("scrollHelper", [componentsPath + "/scrollhelper"], returnFirstDependency);
        define("touchHelper", [componentsPath + "/touchhelper"], returnFirstDependency);
-        define("appSettings", [componentsPath + "/appSettings"], returnFirstDependency);
-        define("userSettings", [componentsPath + "/usersettings/usersettings"], returnFirstDependency);
-        define("userSettingsBuilder", [componentsPath + "/usersettings/usersettingsbuilder", "layoutManager", "browser"], returnFirstDependency);
        define("imageUploader", [componentsPath + "/imageuploader/imageuploader"], returnFirstDependency);
        define("htmlMediaHelper", [componentsPath + "/htmlMediaHelper"], returnFirstDependency);
        define("viewContainer", [componentsPath + "/viewContainer"], returnFirstDependency);
--- a/src/strings/ar.json
+++ b/src/strings/ar.json
@ -699,7 +699,6 @@
    "OptionEnableAccessFromAllDevices": "تفعيل الدخول على كافة الأجهزة",
    "OptionEnableAccessToAllChannels": "تفعيل الدخول على كافة القنوات",
    "OptionEnableAccessToAllLibraries": "تمكين الدخول على كافة المكتبات",
-    "OptionEnableAutomaticServerUpdates": "تمكين التحديثات الآلية في الخادم",
    "OptionEnableExternalContentInSuggestions": "تمكين المحتوى الخارجي في المقترحات",
    "OptionEnableExternalContentInSuggestionsHelp": "السماح للعروض الإعلانية من الإنترنت وبرامج بث التلفزة الحي لتضمّن في المحتوى المقترح.",
    "OptionEnableForAllTuners": "تمكين كل أجهزة المولفات",
--- a/src/strings/bg-bg.json
+++ b/src/strings/bg-bg.json
@ -565,7 +565,6 @@
    "OptionEnableAccessFromAllDevices": "Позволяване на достъпа от всички устройства",
    "OptionEnableAccessToAllChannels": "Позволяване на достъпа до всички канали",
    "OptionEnableAccessToAllLibraries": "Позволяване на достъпа до всички библиотеки",
-    "OptionEnableAutomaticServerUpdates": "Разрешаване на автоматичните обновления",
    "OptionEnded": "Приключило",
    "OptionEveryday": "Всеки ден",
    "OptionExternallyDownloaded": "Външно сваляне",
--- a/src/strings/cs.json
+++ b/src/strings/cs.json
@ -930,7 +930,6 @@
    "OptionEnableAccessFromAllDevices": "Povolit přístup ze všech zařízení",
    "OptionEnableAccessToAllChannels": "Povolit přístup ze všech kanálů",
    "OptionEnableAccessToAllLibraries": "Povolit přístup ke všem knihovnám",
-    "OptionEnableAutomaticServerUpdates": "Povolit automatickou aktualizaci serveru",
    "OptionEnableExternalContentInSuggestions": "Aktivovat externí obsah v návrzích",
    "OptionEnableExternalContentInSuggestionsHelp": "Povolit zahrnutí internetových upoutávek a živých televizních programů do navrhovaného obsahu.",
    "OptionEnableForAllTuners": "Povolit pro všechna zařízení tunerů",
--- a/src/strings/da.json
+++ b/src/strings/da.json
@ -825,7 +825,6 @@
    "OptionEnableAccessFromAllDevices": "Tillad adgang fra alle enheder",
    "OptionEnableAccessToAllChannels": "Tillad adgang til alle kanaler",
    "OptionEnableAccessToAllLibraries": "Tillad adgang til alle biblioteker",
-    "OptionEnableAutomaticServerUpdates": "Aktiver automatiske serveropdateringer",
    "OptionEnableExternalContentInSuggestions": "Aktiver eksternt indhold i anbefalinger",
    "OptionEnableExternalContentInSuggestionsHelp": "Tillad at internet-trailers og live-tv-programmer bliver inkluderet i det anbefalede indhold.",
    "OptionEnableForAllTuners": "Aktiver for alle tuner-enheder",
--- a/src/strings/de.json
+++ b/src/strings/de.json
@ -974,7 +974,6 @@
    "OptionEnableAccessFromAllDevices": "Erlaube Zugriff von allen Geräten",
    "OptionEnableAccessToAllChannels": "Erlaube Zugriff auf alle Kanäle",
    "OptionEnableAccessToAllLibraries": "Erlaube Zugriff auf alle Bibliotheken",
-    "OptionEnableAutomaticServerUpdates": "Aktiviere automatische Server Updates",
    "OptionEnableExternalContentInSuggestions": "Aktiviere externe Inhalte in Empfehlungen",
    "OptionEnableExternalContentInSuggestionsHelp": "Erlaube Internet Trailer und Live TV  Sendungen in Empfehlungen.",
    "OptionEnableForAllTuners": "Aktiviere für alle Tuner",
--- a/src/strings/el.json
+++ b/src/strings/el.json
@ -868,7 +868,6 @@
    "OptionEnableAccessFromAllDevices": "Πρόσβαση από όλες τις συσκευές",
    "OptionEnableAccessToAllChannels": "Ενεργοποιήστε την πρόσβαση σε όλα τα κανάλια",
    "OptionEnableAccessToAllLibraries": "Πρόσβαση σε όλες τις Βιβλιοθήκες",
-    "OptionEnableAutomaticServerUpdates": "Ενεργοποίηση αυτόματων ενημερώσεων διακομιστή",
    "OptionEnableExternalContentInSuggestionsHelp": "Να επιτρέπεται η συμπερίληψη internet trailers και προγράμματα live tv στο προτεινόμενο περιεχόμενο.",
    "OptionEnableM2tsMode": "Ενεργοποίηση λειτουργίας M2ts",
    "OptionEnded": "Τέλος",
--- a/src/strings/en-gb.json
+++ b/src/strings/en-gb.json
@ -1303,7 +1303,6 @@
    "OptionEnableM2tsModeHelp": "Enable m2ts mode when encoding to mpegts.",
    "OptionEnableM2tsMode": "Enable M2ts mode",
    "OptionEnableExternalContentInSuggestions": "Enable external content in suggestions",
-    "OptionEnableAutomaticServerUpdates": "Enable automatic server updates",
    "OptionEnableAccessToAllLibraries": "Enable access to all libraries",
    "OptionEnableAccessToAllChannels": "Enable access to all channels",
    "OptionEnableAccessFromAllDevices": "Enable access from all devices",
@ -1461,5 +1460,6 @@
    "ButtonAddImage": "Add Image",
    "OptionRandom": "Random",
    "SelectAdminUsername": "Please select a username for the admin account.",
-    "ButtonSplit": "Split"
+    "ButtonSplit": "Split",
+    "HeaderNavigation": "Navigation"
 }
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@ -408,6 +408,7 @@
    "HeaderMyDevice": "My Device",
    "HeaderMyMedia": "My Media",
    "HeaderMyMediaSmall": "My Media (small)",
+    "HeaderNavigation": "Navigation",
    "HeaderNewApiKey": "New API Key",
    "HeaderNewDevices": "New Devices",
    "HeaderNextEpisodePlayingInValue": "Next Episode Playing in {0}",
@ -1104,7 +1105,6 @@
    "OptionEnableAccessFromAllDevices": "Enable access from all devices",
    "OptionEnableAccessToAllChannels": "Enable access to all channels",
    "OptionEnableAccessToAllLibraries": "Enable access to all libraries",
-    "OptionEnableAutomaticServerUpdates": "Enable automatic server updates",
    "OptionEnableExternalContentInSuggestions": "Enable external content in suggestions",
    "OptionEnableExternalContentInSuggestionsHelp": "Allow internet trailers and live TV programs to be included within suggested content.",
    "OptionEnableForAllTuners": "Enable for all tuner devices",
--- a/src/strings/es-mx.json
+++ b/src/strings/es-mx.json
@ -1018,7 +1018,6 @@
    "OptionEnableAccessFromAllDevices": "Habilitar acceso desde todos los dispositivos",
    "OptionEnableAccessToAllChannels": "Habilitar acceso a todos los canales",
    "OptionEnableAccessToAllLibraries": "Habilitar el acceso a todas las bibliotecas",
-    "OptionEnableAutomaticServerUpdates": "Habilitar actualizaciones automáticas del servidor",
    "OptionEnableExternalContentInSuggestions": "Habilitar contenido externo en las sugerencias",
    "OptionEnableExternalContentInSuggestionsHelp": "Permitir que los trailers de Internet y los programas de televisión en vivo se incluyan en el contenido sugerido.",
    "OptionEnableForAllTuners": "Habilitar para todos los dispositivos sintonizadores",
--- a/src/strings/es.json
+++ b/src/strings/es.json
@ -95,7 +95,7 @@
    "ButtonRestart": "Reiniciar",
    "ButtonResume": "Continuar",
    "ButtonRevoke": "Revocar",
-    "ButtonSave": "Grabar",
+    "ButtonSave": "Guardar",
    "ButtonScanAllLibraries": "Escanear todas las bibliotecas",
    "ButtonSearch": "Buscar",
    "ButtonSelectDirectory": "Seleccionar directorio",
@ -120,7 +120,7 @@
    "CancelRecording": "Cancelar grabación",
    "CancelSeries": "Cancelar series",
    "Categories": "Categorías",
-    "ChannelAccessHelp": "Seleccione los canales para compartir con este usuario. Los administradores podrán editar todos los canales mediante el gestor de metadatos.",
+    "ChannelAccessHelp": "Seleccione los canales para compartir con este usuario. Los administradores podrán editar todos los canales mediante el editor de etiquetas.",
    "ChannelNameOnly": "Canal {0} solo",
    "ChannelNumber": "Número de canal",
    "Channels": "Canales",
@ -139,8 +139,8 @@
    "DeathDateValue": "Murió: {0}",
    "Default": "Por defecto",
    "DefaultErrorMessage": "Ha habido un error procesando la solicitud. Por favor inténtalo más tarde.",
-    "DefaultMetadataLangaugeDescription": "Estos son tus ajustes y se pueden personalizar para cada librería.",
-    "DefaultSubtitlesHelp": "Los subtítulos se activan en función de los ajustes por defecto y etiquetas en los metadatos integrados. Los ajustes de idioma se tienen en cuenta cuando hay varias opciones disponibles.",
+    "DefaultMetadataLangaugeDescription": "Estos son tus ajustes y se pueden personalizar para cada biblioteca.",
+    "DefaultSubtitlesHelp": "Los subtítulos que se utilizarán dependerán de como estén etiquetadas las pistas de los archivos (si \"por defecto\" o \"forzado\"). Los ajustes de idioma se tienen en cuenta cuando hay varias opciones disponibles.",
    "Delete": "Borrar",
    "DeleteDeviceConfirmation": "¿Estás seguro de que quieres borrar este dispositivo? Volverá a aparecer la próxima vez que un usuario inicie sesión en él.",
    "DeleteImage": "Borrar imagen",
@ -304,7 +304,7 @@
    "HeaderItems": "Elementos",
    "HeaderKeepRecording": "Mantener grabación",
    "HeaderKeepSeries": "Mantener series",
-    "HeaderKodiMetadataHelp": "Para habilitar o deshabilitar metadatos NFO, edite una biblioteca en la configuración de la biblioteca Jellyfin y localice la sección de metadatos.",
+    "HeaderKodiMetadataHelp": "Puedes activar o desactivar las etiquetas en formato NFO abriendo la configuración de una biblioteca y revisando los ajustes en la sección de etiquetas.",
    "HeaderLatestEpisodes": "Últimos episodios",
    "HeaderLatestMedia": "Últimos medios",
    "HeaderLatestMovies": "Últimas películas",
@ -322,7 +322,7 @@
    "HeaderMedia": "Medios",
    "HeaderMediaFolders": "Carpetas de medios",
    "HeaderMediaInfo": "Información multimedia",
-    "HeaderMetadataSettings": "Ajustes de metadatos",
+    "HeaderMetadataSettings": "Ajustes de etiquetas",
    "HeaderMoreLikeThis": "Más como este",
    "HeaderMovies": "Películas",
    "HeaderMusicVideos": "Vídeos musicales",
@ -349,7 +349,7 @@
    "HeaderPlaybackError": "Error de reproducción",
    "HeaderPleaseSignIn": "Por favor, inicie sesión",
    "HeaderPluginInstallation": "Instalación del complemento",
-    "HeaderPreferredMetadataLanguage": "Idioma preferido para los metadatos",
+    "HeaderPreferredMetadataLanguage": "Idioma preferido para las etiquetas",
    "HeaderProfile": "Perfil",
    "HeaderProfileInformation": "Información del perfil",
    "HeaderProfileServerSettingsHelp": "Estos valores controlan como el servidor Jellyfin se presenta al dispositivo.",
@ -369,8 +369,8 @@
    "HeaderSeasons": "Temporadas",
    "HeaderSecondsValue": "{0} segundos",
    "HeaderSelectCertificatePath": "Elige la ruta del certificado",
-    "HeaderSelectMetadataPath": "Seleccione la ruta para Metadatos",
-    "HeaderSelectMetadataPathHelp": "Busque o escriba la ruta donde desea almacenar los metadatos. La carpeta debe tener permiso de escritura.",
+    "HeaderSelectMetadataPath": "Seleccione la ruta para las etiquetas",
+    "HeaderSelectMetadataPathHelp": "Busque o escriba la ruta donde almacenar las etiquetas. La carpeta debe tener permiso de escritura.",
    "HeaderSelectPath": "Elige ruta",
    "HeaderSelectServer": "Selecionar servidor",
    "HeaderSelectServerCachePath": "Seleccione la ruta para el caché del servidor",
@ -459,7 +459,7 @@
    "LabelArtists": "Artistas:",
    "LabelArtistsHelp": "Separar múltiples artistas usando ;",
    "LabelAudioLanguagePreference": "Idioma de audio preferido:",
-    "LabelAutomaticallyRefreshInternetMetadataEvery": "Actualizar los metadatos automáticamente de internet:",
+    "LabelAutomaticallyRefreshInternetMetadataEvery": "Actualizar las etiquetas automáticamente desde Internet:",
    "LabelBindToLocalNetworkAddress": "Vincular a la dirección de red local:",
    "LabelBindToLocalNetworkAddressHelp": "Opcional. Anule la dirección IP local para enlazar el servidor HTTP. Si se deja vacío, el servidor se enlazará a todas las direcciones disponibles. Para cambiar este valor, debe reiniciar el servidor Jellyfin.",
    "LabelBirthDate": "Fecha de nacimiento:",
@ -489,7 +489,7 @@
    "LabelCustomRating": "Valoración pesonalizada:",
    "LabelDateAdded": "Fecha de añadido:",
    "LabelDateAddedBehavior": "Comportamiento de la fecha añadida para contenido nuevo:",
-    "LabelDateAddedBehaviorHelp": "Si un valor de metadato está disponible su usará siempre antes que ninguna de esas opciones.",
+    "LabelDateAddedBehaviorHelp": "Si el elemento tiene etiquetas que contengan información sobre la fecha de creación, independientemente de lo seleccionado aquí, se utilizarán para ordenar el contenido.",
    "LabelDay": "Día:",
    "LabelDeathDate": "Fecha de muerte:",
    "LabelDefaultUser": "Usuario por defecto:",
@ -595,15 +595,15 @@
    "LabelMaxStreamingBitrateHelp": "Especifica la tasa de bits máxima de la transmisión.",
    "LabelMessageText": "Mensaje de texto:",
    "LabelMessageTitle": "Título del mensaje:",
-    "LabelMetadata": "Metadatos:",
+    "LabelMetadata": "Etiquetas:",
    "LabelMetadataDownloadLanguage": "Idioma preferido de visualizado:",
-    "LabelMetadataDownloadersHelp": "Activa y ordena tus descargadores de metadatos por prioridad. Los que tengan menor prioridad se sólo se utilizarán para llenar la información faltante.",
-    "LabelMetadataPath": "Ruta de los metadatos:",
-    "LabelMetadataPathHelp": "Especifica una ruta para los pósteres y metadatos.",
-    "LabelMetadataReaders": "Lectores de metadatos:",
-    "LabelMetadataReadersHelp": "Ordena tus fuentes de metadatos locales por prioridad. Se leerá el primer archivo encontrado.",
-    "LabelMetadataSavers": "Almacenadores de metadatos:",
-    "LabelMetadataSaversHelp": "Elige el formato de archivo para guardar tus metadatos.",
+    "LabelMetadataDownloadersHelp": "Activa y ordena estos proveedores de etiquetas por prioridad. Los que tengan menor prioridad sólo se utilizarán para completar la información que falte.",
+    "LabelMetadataPath": "Ruta de las etiquetas:",
+    "LabelMetadataPathHelp": "Especifica una ruta para las imágenes y las etiquetas.",
+    "LabelMetadataReaders": "Lectores de etiquetas:",
+    "LabelMetadataReadersHelp": "Ordena los proveedores de etiquetas locales por prioridad. Se leerá el primer archivo encontrado.",
+    "LabelMetadataSavers": "Formato de etiquetas:",
+    "LabelMetadataSaversHelp": "Elige el formato de archivo para guardar las etiquetas.",
    "LabelMethod": "Método:",
    "LabelMinBackdropDownloadWidth": "Anchura mínima de descarga de imágenes de fondo:",
    "LabelMinResumeDuration": "Duración mínima de reanudación:",
@ -676,8 +676,8 @@
    "LabelRemoteClientBitrateLimit": "Límite de la transmisión de tasa de bits por internet (Mbps):",
    "LabelRemoteClientBitrateLimitHelp": "Un límite opcional de tasa de bits para todos los dispositivos fuera de la red. Esto es útil para evitar que los dispositivos soliciten una tasa de bits más alta que la que su conexión a Internet puede manejar. Esto puede ocasionar una mayor carga de la CPU en su servidor para transcodificar vídeos sobre la marcha a una tasa de bits más baja.",
    "LabelRuntimeMinutes": "Tiempo de ejecución (minutos):",
-    "LabelSaveLocalMetadata": "Guardar imágenes y metadatos en las carpetas de medios",
-    "LabelSaveLocalMetadataHelp": "Guardar imágenes y metadatos directamente en las carpetas de medios, permitirá colocarlas en un lugar donde se pueden editar fácilmente.",
+    "LabelSaveLocalMetadata": "Guardar imágenes y etiquetas en las carpetas de medios",
+    "LabelSaveLocalMetadataHelp": "Guardar imágenes y etiquetas directamente en las carpetas en las que estén los elementos hará que se puedan editar más fácilmente.",
    "LabelScheduledTaskLastRan": "Última ejecución {0}, tardando {1}.",
    "LabelScreensaver": "Salvapantallas:",
    "LabelSeasonNumber": "Número de temporada:",
@ -729,7 +729,7 @@
    "LabelTunerIpAddress": "IP del sintonizador:",
    "LabelTunerType": "Tipo de sintonizador:",
    "LabelType": "Tipo:",
-    "LabelTypeMetadataDownloaders": "{0} descargadores de metadatos:",
+    "LabelTypeMetadataDownloaders": "Proveedores de etiquetas para {0}:",
    "LabelTypeText": "Texto",
    "LabelUseNotificationServices": "Usar los siguientes servicios:",
    "LabelUser": "Usuario:",
@ -754,7 +754,7 @@
    "LanNetworksHelp": "Lista de direcciones IP separadas por comas o entradas de dirección IP / máscara de red para redes que se considerarán en la red local al imponer restricciones de ancho de banda. Si se establece, todas las demás direcciones IP se considerarán en la red externa y estarán sujetas a las restricciones de ancho de banda externo. Si se deja en blanco, solo se considera que la subred del servidor está en la red local.",
    "Large": "Grande",
    "LatestFromLibrary": "Reciente en {0}",
-    "LibraryAccessHelp": "Seleccione las bibliotecas a compartir con este usuario. Los administradores podrán editar todas las carpetas usando el gestor de metadatos.",
+    "LibraryAccessHelp": "Seleccione las bibliotecas a compartir con este usuario. Los administradores podrán editar todas las carpetas usando el gestor de etiquetas.",
    "Like": "Me gusta",
    "Live": "Directo",
    "LiveBroadcasts": "Emisiones en vivo",
@ -824,7 +824,7 @@
    "MessageNoTrailersFound": "No se han encontrado tráilers. Instala el canal de tráilers para mejorar su experiencia añadiendo una biblioteca de tráilers por internet.",
    "MessageNothingHere": "Nada aquí.",
    "MessagePasswordResetForUsers": "Se ha restablecido las contraseñas a los siguientes usuarios. Ahora pueden iniciar sesión con los códigos PIN que usaron para el restablecimiento.",
-    "MessagePleaseEnsureInternetMetadata": "Por favor, asegúrese que la descarga de metadatos de internet está habilitada.",
+    "MessagePleaseEnsureInternetMetadata": "Asegúrate de que la descarga de etiquetas desde internet está activada.",
    "MessagePleaseWait": "Por favor, espere.",
    "MessagePluginConfigurationRequiresLocalAccess": "Para configurar este complemento inicia sesión en tu servidor local directamente.",
    "MessagePluginInstallDisclaimer": "Los complementos creados por los miembros de la comunidad de Jellyfin son una buena forma de mejorar tu experiencia Jellyfin con características adicionales y otros beneficios. Antes de instalarlos considera los efectos que pueden tener en tu servidor Jellyfin, como escaneos de la biblioteca más largos, procesado en segundo plano adicional y una reducción de la estabilidad del sistema.",
@ -834,9 +834,9 @@
    "MessageUnableToConnectToServer": "No podemos conectar con el servidor seleccionado ahora mismo. Por favor, asegúrate de que esta funcionando e inténtalo otra vez.",
    "MessageUnsetContentHelp": "El contenido se mostrará como carpetas planas. Para tener mejores resultados utiliza el gestor de metadatos para establecer los tipos de contenidos de las sub-carpetas.",
    "MessageYouHaveVersionInstalled": "Actualmente tienes la versión {0} instalada.",
-    "Metadata": "Metadatos",
-    "MetadataManager": "Administrador de metadatos",
-    "MetadataSettingChangeHelp": "El cambio de la configuración de metadatos afectará al nuevo contenido que se añada en el futuro. Para actualizar el contenido existente, abra la pantalla de detalles y haga clic en el botón Actualizar o realice actualizaciones masivas utilizando el administrador de metadatos.",
+    "Metadata": "Etiquetas",
+    "MetadataManager": "Administrador de etiquetas",
+    "MetadataSettingChangeHelp": "Este cambio afectará al nuevo contenido que se añada en el futuro. Para actualizar el contenido existente abra la pantalla de detalles y haga clic en el botón \"Actualizar\". También se pueden actualizar todas las etiquetas a la vez utilizando el administrador de etiquetas.",
    "MinutesAfter": "minutos después",
    "MinutesBefore": "minutos antes",
    "Mobile": "Móvil",
@ -928,7 +928,6 @@
    "OptionEnableAccessFromAllDevices": "Habilitar acceso desde todos los equipos",
    "OptionEnableAccessToAllChannels": "Habilitar acceso a todos los canales",
    "OptionEnableAccessToAllLibraries": "Habilitar acceso a todas las bibliotecas",
-    "OptionEnableAutomaticServerUpdates": "Activar actualizaciones automáticas del servidor",
    "OptionEnableExternalContentInSuggestions": "Habilitar contenido externo en sugerencias",
    "OptionEnableExternalContentInSuggestionsHelp": "Permite incluir los tráilers de Internet y los programas de TV en vivo en el contenido sugerido.",
    "OptionEnableForAllTuners": "Activar para todos los dispositivos sintonizadores",
@ -982,8 +981,8 @@
    "OptionResumable": "Se puede continuar",
    "OptionRuntime": "Tiempo",
    "OptionSaturday": "Sábado",
-    "OptionSaveMetadataAsHidden": "Guardar los metadatos e imágenes como archivos ocultos",
-    "OptionSaveMetadataAsHiddenHelp": "Cambiar esto se aplicará a los nuevos metadatos guardados en el futuro. Los archivos de metadatos existentes se actualizarán la próxima vez que sean guardados por el servidor Jellyfin.",
+    "OptionSaveMetadataAsHidden": "Guardar las etiquetas e imágenes como archivos ocultos",
+    "OptionSaveMetadataAsHiddenHelp": "La configuración se aplicará a las nuevas etiquetas que se creen. Las etiquetas existentes se actualizarán la próxima vez que sean guardadas por Jellyfin.",
    "OptionSpecialEpisode": "Especiales",
    "OptionSunday": "Domingo",
    "OptionThursday": "Jueves",
@ -1025,7 +1024,7 @@
    "PleaseSelectTwoItems": "Seleccione al menos dos elementos.",
    "PluginInstalledMessage": "El complemento se ha instalado correctamente. El servidor Jellyfin deberá reiniciarse para que los cambios surjan efecto.",
    "PreferEmbeddedTitlesOverFileNames": "Preferir títulos incrustados sobre los nombres de archivo",
-    "PreferEmbeddedTitlesOverFileNamesHelp": "Esto determina el título por defecto cuando no hay ningún metadato de internet o local.",
+    "PreferEmbeddedTitlesOverFileNamesHelp": "Esto determina el título que se utilizará cuando un elemento no tenga etiquetas ni estas se hayan podido descargar de Internet.",
    "PreferredNotRequired": "Preferido, pero no requerido",
    "Premieres": "Estrenos",
    "Previous": "Anterior",
@ -1048,7 +1047,7 @@
    "RecordingScheduled": "Grabación programada.",
    "Recordings": "Grabaciones",
    "Refresh": "Refrescar",
-    "RefreshMetadata": "Actualizar metadatos",
+    "RefreshMetadata": "Actualizar etiquetas",
    "RefreshQueued": "Actualización programada.",
    "ReleaseDate": "Fecha de lanzamiento",
    "RememberMe": "Recuérdame",
@ -1059,7 +1058,7 @@
    "RepeatEpisodes": "Repetir episodios",
    "RepeatMode": "Modo de repetición",
    "RepeatOne": "Repetir uno",
-    "ReplaceAllMetadata": "Reemplazar todos los metadatos",
+    "ReplaceAllMetadata": "Reemplazar todas las etiquetas",
    "ReplaceExistingImages": "Reemplazar imágenes existentes",
    "RequiredForAllRemoteConnections": "Requerido para todas las conexiones remotas",
    "ResumeAt": "Continuar desde {0}",
@ -1075,8 +1074,8 @@
    "Screenshot": "Captura de pantalla",
    "Screenshots": "Capturas de pantalla",
    "Search": "Buscar",
-    "SearchForCollectionInternetMetadata": "Buscar en internet ilustraciones y metadatos",
-    "SearchForMissingMetadata": "Buscar metadatos faltantes",
+    "SearchForCollectionInternetMetadata": "Buscar en internet imágenes y etiquetas",
+    "SearchForMissingMetadata": "Buscar etiquetas que falten",
    "SearchForSubtitles": "Búsqueda de subtítulos",
    "SearchResults": "Resultados de la búsqueda",
    "SendMessage": "Enviar mensaje",
@ -1097,7 +1096,7 @@
    "Shows": "Series",
    "Shuffle": "Mezclar",
    "SimultaneousConnectionLimitHelp": "Número máximo de transmisiones simultáneas permitidas. Pon 0 para no tener límite.",
-    "SkipEpisodesAlreadyInMyLibrary": "No grabar episodios que ya están en mi librería",
+    "SkipEpisodesAlreadyInMyLibrary": "No grabar episodios que ya están en mi biblioteca",
    "SkipEpisodesAlreadyInMyLibraryHelp": "Los episodios serán comparados usando el número de temporada y de episodio, cuando estén disponibles.",
    "Small": "Pequeño",
    "Smart": "Inteligente",
@ -1135,7 +1134,7 @@
    "TabLatest": "Novedades",
    "TabLibrary": "Biblioteca",
    "TabLiveTV": "Televisión en directo",
-    "TabMetadata": "Metadatos",
+    "TabMetadata": "Etiquetas",
    "TabMovies": "Películas",
    "TabMusic": "Música",
    "TabMusicVideos": "Videos musicales",
@ -1237,7 +1236,7 @@
    "Banner": "Pancarta",
    "BurnSubtitlesHelp": "Determina si el servidor debería incrustar los subtítulos al convertir el vídeo dependiendo del formato de los subtítulos. Evitar incrustar los subtítulos mejorará el rendimiento del servidor. Selecciona Auto para incrustar subtítulos basados en imágenes (VOBSUB, PGS, SUB/IDX, etc.) y algunos subtítulos de tipo ASS/SSA.",
    "ButtonInfo": "Información",
-    "ChangingMetadataImageSettingsNewContent": "Los cambios a la configuración de descarga de metadatos o arte sólo se aplicará al nuevo contenido añadido a la biblioteca. Para aplicar los cambios a los títulos existentes, necesitarás actualizar los metadatos manualmente.",
+    "ChangingMetadataImageSettingsNewContent": "Los cambios a la configuración de descarga de etiquetas e imágenes sólo se aplicará al nuevo contenido que se añada a la biblioteca. Para aplicar los cambios a los elementos existentes necesitarás actualizar las etiquetas manualmente.",
    "ColorPrimaries": "Colores primarios",
    "ColorSpace": "Espacio de color",
    "ColorTransfer": "Transferencia de color",
@ -1258,7 +1257,7 @@
    "DisplayMissingEpisodesWithinSeasons": "Mostrar episodios ausentes en las temporadas",
    "DisplayMissingEpisodesWithinSeasonsHelp": "Esto también debe ser habilitado para la biblioteca de TV en la configuración del servidor.",
    "DropShadow": "Sombra",
-    "EditMetadata": "Editar metadatos",
+    "EditMetadata": "Editar etiquetas",
    "EnableBackdrops": "Imágenes de fondo",
    "EnableBackdropsHelp": "Mostrar imágenes de fondo en algunas páginas mientras se explora la biblioteca.",
    "EnableColorCodedBackgrounds": "Fondos  con código de colores",
@ -1402,7 +1401,7 @@
    "PlayCount": "Reproducciones",
    "Premiere": "Estreno",
    "Raised": "Elevación",
-    "RefreshDialogHelp": "Los metadatos se actualizan basados en las configuraciones y los servicios de internet habilitados en el panel del servidor Jellyfin.",
+    "RefreshDialogHelp": "Las etiquetas se actualizan basándose en las configuraciones y los servicios de internet activados desde el panel de control de Jellyfin.",
    "RestartPleaseWaitMessage": "Por favor, espera mientras el servidor Jellyfin se reinicia. Esto puede tardar un minuto o dos.",
    "RunAtStartup": "Ejecutar al iniciar",
    "Series": "Series",
@ -1461,5 +1460,6 @@
    "HeaderFavoritePeople": "Personas favoritas",
    "OptionRandom": "Aleatorio",
    "SelectAdminUsername": "Por favor seleccione un nombre de usuario para la cuenta de administrador.",
-    "ButtonSplit": "Dividir"
+    "ButtonSplit": "Dividir",
+    "HeaderNavigation": "Navegación"
 }
--- a/src/strings/fr.json
+++ b/src/strings/fr.json
@ -1009,7 +1009,6 @@
    "OptionEnableAccessFromAllDevices": "Autoriser l'accès depuis tous les appareils",
    "OptionEnableAccessToAllChannels": "Activer l'accès à toutes les chaînes",
    "OptionEnableAccessToAllLibraries": "Activer l'accès à toutes les librairies",
-    "OptionEnableAutomaticServerUpdates": "Activer les mises à jour automatiques du serveur",
    "OptionEnableExternalContentInSuggestions": "Activer le contenu externe dans les suggestions",
    "OptionEnableExternalContentInSuggestionsHelp": "Autoriser les bandes-annonces sur internet et les programmes TV en direct à être inclus dans le contenu suggéré.",
    "OptionEnableForAllTuners": "Autoriser pour tous les tuners",
@ -1455,5 +1454,6 @@
    "HeaderFavoritePeople": "Personnes préférées",
    "OptionRandom": "Aléatoire",
    "ButtonSplit": "Séparer",
-    "SelectAdminUsername": "Veuillez choisir un nom d'utilisateur pour le compte administrateur."
+    "SelectAdminUsername": "Veuillez choisir un nom d'utilisateur pour le compte administrateur.",
+    "HeaderNavigation": "Navigation"
 }
--- a/src/strings/hr.json
+++ b/src/strings/hr.json
@ -755,7 +755,6 @@
    "OptionEnableAccessFromAllDevices": "Omogući pristup svim uređajima",
    "OptionEnableAccessToAllChannels": "Omogući pristup svim kanalima",
    "OptionEnableAccessToAllLibraries": "Omogući pristup svim bibliotekama",
-    "OptionEnableAutomaticServerUpdates": "Omogući automatska ažuriranja servera",
    "OptionEnableExternalContentInSuggestions": "Omogući vanjske sadržaje u prijedlozima",
    "OptionEnableExternalContentInSuggestionsHelp": "Dopusti internet kratkim filmovima i TV programima uživo da budu uključeni u preporučenom sadržaju.",
    "OptionEnableForAllTuners": "Omogući za sve TV/Radio uređaje",
--- a/src/strings/hu.json
+++ b/src/strings/hu.json
@ -411,7 +411,6 @@
    "OptionEnableAccessFromAllDevices": "Hozzáférés engedélyezése minden eszközről",
    "OptionEnableAccessToAllChannels": "Hozzáférés engedélyezése minden csatornához",
    "OptionEnableAccessToAllLibraries": "Hozzáférés engedélyezése minden könyvtárhoz",
-    "OptionEnableAutomaticServerUpdates": "Automatikus szerverfrissítés engedélyezése",
    "OptionExternallyDownloaded": "Külső letöltés",
    "OptionFavorite": "Kedvencek",
    "OptionFriday": "Péntek",
--- a/Show More
+++ b/Show More