Merge pull request #1 from jellyfin/master

merge
2024-11-17 10:58:20 -07:00 · 2020-02-02 18:32:28 +08:00 · 2020-02-02 18:32:28 +08:00 · 17514b6d2f
commit 17514b6d2f
parent 86484bc9b4 b273853f0c
271 changed files with 6992 additions and 3578 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,14 +30,15 @@
    "howler": "^2.1.2",
    "jquery": "^3.4.1",
    "jstree": "^3.3.7",
+    "libass-wasm": "^2.1.1",
    "libjass": "^0.11.0",
+    "material-design-icons-iconfont": "^5.0.1",
    "native-promise-only": "^0.8.0-a",
    "requirejs": "^2.3.5",
    "resize-observer-polyfill": "^1.5.1",
    "shaka-player": "^2.5.5",
    "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 +54,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/scripts/scdup.py
+++ b/scripts/scdup.py
@ -0,0 +1,41 @@
+import sys
+import os
+import json
+
+# load every key in the source language
+# check the keys in all translations
+# remove keys that only exist in translations
+
+cwd = os.getcwd()
+langdir = cwd + '/../src/strings'
+langlst = os.listdir(langdir)
+
+langlst.remove('en-us.json')
+print(langlst)
+input('press enter to continue')
+
+keysus = []
+with open(langdir + '/' + 'en-us.json') as en:
+    langus = json.load(en)
+    for key in langus:
+        keysus.append(key)
+
+for lang in langlst:
+    with open(langdir + '/' + lang, 'r') as f:
+        inde = 2
+        if '\n    \"' in f.read():
+            inde = 4
+        f.close()
+    with open(langdir + '/' + lang, 'r+') as f:
+        langjson = json.load(f)
+        langjnew = {}
+        for key in langjson:
+            if key in keysus:
+                langjnew[key] = langjson[key]
+        f.seek(0)
+        f.write(json.dumps(langjnew, indent=inde, sort_keys=False, ensure_ascii=False))
+        f.write('\n')
+        f.truncate()
+        f.close()
+
+print('DONE')
--- a/scripts/scgen.py
+++ b/scripts/scgen.py
@ -0,0 +1,40 @@
+import os
+import subprocess
+import json
+
+# load all keys in the source language
+# check entire codebase for usages
+# print unused keys to a text file
+# TODO: dynamic string usages cause false positives
+
+cwd = os.getcwd()
+langdir = cwd + '/../src/strings'
+langlst = []
+langlst.append('en-us.json')
+
+# unused keys
+dep = []
+
+def grep(key):
+    command = 'grep -r -E "(\(\\\"|\(\'|\{)%s(\\\"|\'|\})" --include=\*.{js,html} --exclude-dir=../src/strings ../src' % key
+    p = subprocess.Popen(command, shell=True, stdout=subprocess.PIPE, stderr=subprocess.STDOUT)
+    output = p.stdout.readlines()
+    if output:
+        print('DONE: ' + key)
+        return True
+    print('UNUSED: ' + key)
+    dep.append(key)
+    return False
+
+for lang in langlst:
+    with open(langdir + '/' + lang) as f:
+        langjson = json.load(f)
+        for key in langjson:
+            grep(key)
+
+print(dep)
+print('LENGTH: ' + str(len(dep)))
+with open('scout.txt', 'w') as out:
+    for item in dep:
+        out.write(item + '\n')
+    out.close()
--- a/scripts/scrm.py
+++ b/scripts/scrm.py
@ -0,0 +1,34 @@
+import sys
+import os
+import json
+
+# load text file containing unused keys
+# remove the keys from all string files
+
+cwd = os.getcwd()
+langdir = cwd + '/../src/strings'
+langlst = os.listdir(langdir)
+
+keys = []
+
+with open('scout.txt', 'r') as f:
+    for line in f:
+        keys.append(line.strip('\n'))
+
+for lang in langlst:
+    with open(langdir + '/' + lang, 'r') as f:
+        inde = 2
+        if '\n    \"' in f.read():
+            inde = 4
+        f.close()
+    with open(langdir + '/' + lang, 'r+') as f:
+        langjson = json.load(f)
+        for key in keys:
+            langjson.pop(key, None)
+        f.seek(0)
+        f.write(json.dumps(langjson, indent=inde, sort_keys=False, ensure_ascii=False))
+        f.write('\n')
+        f.truncate()
+        f.close()
+
+print('DONE')
--- a/src/apikeys.html
+++ b/src/apikeys.html
@ -4,7 +4,7 @@
            <div class="detailSectionHeader">
                <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">${HeaderApiKeys}</h2>
                <button is="emby-button" type="button" class="fab btnNewKey submit" style="margin-left:1em;" title="${ButtonAdd}">
-                    <i class="md-icon">add</i>
+                    <i class="material-icons">add</i>
                </button>
            </div>
            <p>${HeaderApiKeysHelp}</p>
--- a/src/assets/css/clearbutton.css
+++ b/src/assets/css/clearbutton.css
@ -9,4 +9,4 @@
    vertical-align: middle;
    font-family: inherit;
    font-size: inherit;
-}
+}
--- a/src/assets/css/dashboard.css
+++ b/src/assets/css/dashboard.css
@ -1,262 +1,314 @@
 .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] {
+@media all and (min-width: 50em) {
+    .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] {
+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;
 }

-.scheduledTaskPaperIconItem {
-    outline: 0 !important
+.header .imageLink {
+    display: inline-block;
 }

-.activeSession {
-    width: 100% !important
+.header .imageLink img {
+    height: 2.1em;
+    vertical-align: middle;
 }

-.activitylogUserPhoto {
-    height:1.71em;
-    width:1.71em;
-    border-radius:100%;
-    margin-right:.5em;
-    background-size:cover;
-    background-repeat:no-repeat;
-    background-position:center;
+.content-primary {
+    padding-top: 6em;
+    padding-right: 1em;
+    padding-left: 1em;
 }

-@media all and (min-width:40em) {
-    .activeSession {
-        width: 100% !important
+.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:50em) {
+@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;
+}
+
+.activeSession {
+    width: 100% !important;
+}
+
+.activitylogUserPhoto {
+    height: 1.71em;
+    width: 1.71em;
+    border-radius: 100%;
+    margin-right: 0.5em;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+@media all and (min-width: 40em) {
    .activeSession {
-        width: 50% !important
+        width: 100% !important;
+    }
+}
+
+@media all and (min-width: 50em) {
+    .activeSession {
+        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 {
+.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;
@ -358,70 +393,70 @@ div[data-role=controlgroup] a.ui-btn-active {
    background-color: #dd4919;
 }

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

-@media all and (max-width:31.25em) {
+@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
-}
-
-.appLinks a+a {
-    margin-left: 5px
-}
-
-.appLinks img {
-    height: 36px
-}
-
-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;
+}
+
+.appLinks a + a {
+    margin-left: 5px;
+}
+
+@-webkit-keyframes rotating {
+    from {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+
+    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{
+.ui-bar-a {
    text-align: center;
    padding: 0 20px;
 }
--- 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/flexstyles.css
+++ b/src/assets/css/flexstyles.css
@ -44,4 +44,4 @@

 .align-self-flex-end {
    align-self: flex-end;
-}
+}
--- 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) {
+@media all and (min-width: 62.5em) {
    #guideTab {
-        padding-left: .5em
+        padding-left: 0.5em;
    }
-}
+}
--- a/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff
+++ b/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff
--- a/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2
+++ b/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2
--- a/src/assets/css/material-icons/style.css
+++ b/src/assets/css/material-icons/style.css
@ -1,25 +0,0 @@
-@font-face {
-    font-family: 'Material Icons';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Material Icons'), local('MaterialIcons-Regular'), url(flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2'), url(flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff) format('woff');
-}
-
-.md-icon {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-    font-feature-settings: "liga" 1;
-    line-height: 1;
-    overflow: hidden;
-    vertical-align: middle;
-}
--- a/src/assets/css/metadataeditor.css
+++ b/src/assets/css/metadataeditor.css
@ -1,53 +1,57 @@
 .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) {
+@media all and (min-width: 50em) {
    .editPageSidebar {
        position: fixed;
        top: 5.2em;
@ -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) {
+@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
+.fieldDescription + .fieldDescription {
+    margin-top: 0.3em;
 }

 .content-primary,
@ -67,21 +73,21 @@ div[data-role=page] {
    padding-bottom: 5em !important;
 }

-@media all and (min-width:50em) {
+@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) {
+@media all and (orientation: portrait) {
    .chapterThumb {
        height: 30vw;
-        min-width: 30vw
+        min-width: 30vw;
    }
 }

-@media all and (max-height:50em) and (orientation:landscape) {
+@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% {
-        transform:rotate(360deg);
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
    }
 }

 .osdMediaStatus .animate {
-    animation:spin 4s linear infinite;
+    -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) {
-
+@media all and (max-width: 30em) {
    .btnFastForward,
    .btnRewind,
    .osdMediaInfo,
    .osdPoster {
-        display: none !important
+        display: none !important;
    }
 }

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

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

-@media all and (max-width:75em) {
-    .videoOsdBottom .endsAtText {
-        display: none !important
+@media all and (max-width: 50em) {
+    .videoOsdBottom .btnFastForward,
+    .videoOsdBottom .btnRewind {
+        display: none !important;
+    }
+}
+
+@media all and (max-width: 75em) {
+    .videoOsdBottom .endsAtText {
+        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;
 });
@ -96,3 +96,9 @@ var libass_wasm = require("libass-wasm");
 _define("JavascriptSubtitlesOctopus", function() {
    return libass_wasm;
 });
+
+// material-icons
+var material_icons = require("material-design-icons-iconfont/dist/material-design-icons.css");
+_define("material-icons", function() {
+    return material_icons;
+});
--- a/src/components/accessschedule/accessschedule.template.html
+++ b/src/components/accessschedule/accessschedule.template.html
@ -1,6 +1,6 @@
 <div class="formDialogHeader">
    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-        <i class="md-icon">arrow_back</i>
+        <i class="material-icons">arrow_back</i>
    </button>
    <h3 class="formDialogHeaderTitle">
        ${HeaderAccessSchedule}
--- 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/actionsheet/actionsheet.js
+++ b/src/components/actionsheet/actionsheet.js
@ -158,7 +158,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-bu
        }

        if (layoutManager.tv) {
-            html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="material-icons">arrow_back</i></button>';
        }

        // If any items have an icon, give them all an icon just to make sure they're all lined up evenly
@ -226,9 +226,9 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-bu

            if (itemIcon) {

-                html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent md-icon">' + itemIcon + '</i>';
+                html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons">' + itemIcon + '</i>';
            } else if (renderIcon && !center) {
-                html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent md-icon" style="visibility:hidden;">check</i>';
+                html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons" style="visibility:hidden;">check</i>';
            }

            html += '<div class="listItemBody actionsheetListItemBody">';
--- a/src/components/activitylog.js
+++ b/src/components/activitylog.js
@ -13,12 +13,12 @@ define(["events", "globalize", "dom", "datetime", "userSettings", "serverNotific
        }

        if (entry.UserId && entry.UserPrimaryImageTag) {
-            html += '<i class="listItemIcon md-icon" style="width:2em!important;height:2em!important;padding:0;color:transparent;background-color:' + color + ";background-image:url('" + apiClient.getUserImageUrl(entry.UserId, {
+            html += '<i class="listItemIcon material-icons" style="width:2em!important;height:2em!important;padding:0;color:transparent;background-color:' + color + ";background-image:url('" + apiClient.getUserImageUrl(entry.UserId, {
                type: "Primary",
                tag: entry.UserPrimaryImageTag
            }) + "');background-repeat:no-repeat;background-position:center center;background-size: cover;\">dvr</i>"
        } else {
-            html += '<i class="listItemIcon md-icon" style="background-color:' + color + '">' + icon + '</i>';
+            html += '<i class="listItemIcon material-icons" style="background-color:' + color + '">' + icon + '</i>';
        }

        html += '<div class="listItemBody three-line">';
@ -35,7 +35,7 @@ define(["events", "globalize", "dom", "datetime", "userSettings", "serverNotific
        html += "</div>";

        if (entry.Overview) {
-            html += '<button type="button" is="paper-icon-button-light" class="btnEntryInfo" data-id="' + entry.Id + '" title="' + globalize.translate("Info") + '"><i class="md-icon">info</i></button>';
+            html += '<button type="button" is="paper-icon-button-light" class="btnEntryInfo" data-id="' + entry.Id + '" title="' + globalize.translate("Info") + '"><i class="material-icons">info</i></button>';
        }

        return html += "</div>";
--- a/src/components/alphapicker/alphapicker.js
+++ b/src/components/alphapicker/alphapicker.js
@ -67,7 +67,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b

        html += '<div class="' + rowClassName + '">';
        if (options.mode === 'keyboard') {
-            html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="md-icon alphaPickerButtonIcon">space_bar</i></button>';
+            html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="material-icons alphaPickerButtonIcon">space_bar</i></button>';
        } else {
            letters = ['#'];
            html += mapLetters(letters, vertical).join('');
@ -77,7 +77,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
        html += mapLetters(letters, vertical).join('');

        if (options.mode === 'keyboard') {
-            html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="md-icon alphaPickerButtonIcon">backspace</i></button>';
+            html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="material-icons alphaPickerButtonIcon">backspace</i></button>';
            html += '</div>';

            letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
--- 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%;
    }
@ -112,27 +107,18 @@
    bottom: 1%;
 }

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

@media all and (min-width: 62.5em) {

-    .alphaPicker-fixed-left {
-        left: 1em;
-    }
-
    .alphaPicker-fixed-right {
        right: 1em;
    }
 }

@media all and (max-height: 31.25em) {
-
    .alphaPicker-fixed {
        display: none !important;
    }
--- a/src/components/appRouter.js
+++ b/src/components/appRouter.js
@ -545,13 +545,18 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
        page.back();
    }

+    /**
+     * Pages of "no return" (when "Go back" should behave differently, probably quitting the application).
+     */
+    var startPages = ['home', 'login', 'selectserver'];
+
    function canGoBack() {
        var curr = current();
        if (!curr) {
            return false;
        }

-        if (curr.type === 'home') {
+        if (!document.querySelector('.dialogContainer') && startPages.indexOf(curr.type) !== -1) {
            return false;
        }
        return page.canGoBack();
--- a/src/components/appfooter/appfooter.css
+++ b/src/components/appfooter/appfooter.css
@ -8,6 +8,6 @@
    contain: layout style;
 }

-    .appfooter.headroom--unpinned {
-        transform: translateY(100%)!important;
-    }
+.appfooter.headroom--unpinned {
+    transform: translateY(100%) !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,14 +299,48 @@ 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
+      */
+    function doExit() {
+        try {
+            if (window.NativeShell) {
+                window.NativeShell.AppHost.exit();
+            } else if (browser.tizen) {
+                tizen.application.getCurrentApplication().exit();
+            } else if (browser.web0s) {
+                webOS.platformBack();
+            } else {
+                window.close();
+            }
+        } catch (err) {
+            console.log("error closing application: " + err);
+        }
+    }
+
+    var exitPromise;
+
+    /**
+      * Ask user for exit
+      */
+    function askForExit() {
+        if (!!exitPromise) {
+            return;
+        }
+
+        require(["actionsheet"], function (actionsheet) {
+            exitPromise = actionsheet.show({
+                title: Globalize.translate("MessageConfirmAppExit"),
+                items: [
+                    {id: "yes", name: Globalize.translate("Yes")},
+                    {id: "no", name: Globalize.translate("No")}
+                ]
+            }).then(function (value) {
+                if (value === "yes") {
+                    doExit();
+                }
+            }).finally(function () {
+                exitPromise = null;
            });
        });
    }
@ -326,16 +360,10 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
            alert("setWindowState is not supported and should not be called");
        },
        exit: function () {
-            if (window.NativeShell) {
-                window.NativeShell.AppHost.exit();
-            } else if (browser.tizen) {
-                try {
-                    tizen.application.getCurrentApplication().exit();
-                } catch (err) {
-                    console.log("error closing application: " + err);
-                }
+            if (!!window.appMode && browser.tizen) {
+                askForExit();
            } else {
-                window.close();
+                doExit();
            }
        },
        supports: function (command) {
@ -395,7 +423,9 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
            }
        }
    };
+
    var doc = self.document;
+    var isHidden = false;

    if (doc) {
        if (void 0 !== doc.visibilityState) {
@ -419,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;
 }

@ -729,9 +765,9 @@ button {
 }

 .cardOverlayContainer {
-    background: rgba(0,0,0,0.5);
+    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
-    transition: opacity .2s;
+    transition: opacity 0.2s;
    position: absolute;
    top: 0;
    left: 0;
@ -760,7 +796,7 @@ button {
 }

 .cardOverlayFab-primary {
-    background-color: rgba(0,0,0,0.7);
+    background-color: rgba(0, 0, 0, 0.7);
    font-size: 130%;
    padding: 0;
    width: 3em;
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@ -758,7 +758,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
            if (isOuterFooter && options.cardLayout && layoutManager.mobile) {

                if (options.cardFooterAside !== 'none') {
-                    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><i class="md-icon">more_horiz</i></button>';
+                    html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><i class="material-icons">more_horiz</i></button>';
                }
            }

@ -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>';

@ -1316,15 +1316,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                var btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction';

                if (options.centerPlayButton) {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="md-icon cardOverlayButtonIcon">play_arrow</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="material-icons cardOverlayButtonIcon">play_arrow</i></button>';
                }

                if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType !== 'Virtual' || !item.MediaType || item.Type === 'Program') && item.Type !== 'Person') {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><i class="md-icon cardOverlayButtonIcon">play_arrow</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><i class="material-icons cardOverlayButtonIcon">play_arrow</i></button>';
                }

                if (options.overlayMoreButton) {
-                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon">more_horiz</i></button>';
+                    overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="material-icons cardOverlayButtonIcon">more_horiz</i></button>';
                }
            }

@ -1457,7 +1457,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
            var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';

            if (playbackManager.canPlay(item)) {
-                html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">play_arrow</i></button>';
+                html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">play_arrow</i></button>';
            }

            html += '<div class="cardOverlayButton-br">';
@ -1466,7 +1466,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana

            if (itemHelper.canMarkPlayed(item)) {
                require(['emby-playstatebutton']);
-                html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">check</i></button>';
+                html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">check</i></button>';
            }

            if (itemHelper.canRate(item)) {
@ -1474,10 +1474,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                var likes = userData.Likes == null ? '' : userData.Likes;

                require(['emby-ratingbutton']);
-                html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">favorite</i></button>';
+                html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">favorite</i></button>';
            }

-            html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">more_horiz</i></button>';
+            html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">more_horiz</i></button>';

            html += '</div>';
            html += '</div>';
@ -1487,16 +1487,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana

        function getCardDefaultText(item, options) {
            if (item.CollectionType) {
-                return '<i class="cardImageIcon md-icon">' + imageHelper.getLibraryIcon(item.CollectionType) + '</i>'
+                return '<i class="cardImageIcon material-icons">' + imageHelper.getLibraryIcon(item.CollectionType) + '</i>'
            }
            if (item.Type === 'MusicAlbum') {
-                return '<i class="cardImageIcon md-icon">album</i>';
+                return '<i class="cardImageIcon material-icons">album</i>';
            }
            if (item.Type === 'MusicArtist' || item.Type === 'Person') {
-                return '<i class="cardImageIcon md-icon">person</i>';
+                return '<i class="cardImageIcon material-icons">person</i>';
            }
            if (options.defaultCardImageIcon) {
-                return '<i class="cardImageIcon md-icon">' + options.defaultCardImageIcon + '</i>';
+                return '<i class="cardImageIcon material-icons">' + options.defaultCardImageIcon + '</i>';
            }

            var defaultName = isUsingLiveTvNaming(item) ? item.Name : itemHelper.getDisplayName(item);
@ -1585,7 +1585,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                    indicatorsElem = ensureIndicators(card, indicatorsElem);
                    indicatorsElem.appendChild(playedIndicator);
                }
-                playedIndicator.innerHTML = '<i class="md-icon indicatorIcon">check</i>';
+                playedIndicator.innerHTML = '<i class="material-icons indicatorIcon">check</i>';
            } else {

                playedIndicator = card.querySelector('.playedIndicator');
@ -1666,7 +1666,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                var icon = cell.querySelector('.timerIndicator');
                if (!icon) {
                    var indicatorsElem = ensureIndicators(cell);
-                    indicatorsElem.insertAdjacentHTML('beforeend', '<i class="md-icon timerIndicator indicatorIcon">fiber_manual_record</i>');
+                    indicatorsElem.insertAdjacentHTML('beforeend', '<i class="material-icons timerIndicator indicatorIcon">fiber_manual_record</i>');
                }
                cell.setAttribute('data-timerid', newTimerId);
            }
--- a/src/components/cardbuilder/chaptercardbuilder.js
+++ b/src/components/cardbuilder/chaptercardbuilder.js
@ -90,7 +90,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
        var cardImageContainer = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');

        if (!imgUrl) {
-            cardImageContainer += '<i class="md-icon cardImageIcon">local_movies</i>';
+            cardImageContainer += '<i class="material-icons cardImageIcon">local_movies</i>';
        }

        var nameHtml = '';
--- a/src/components/channelmapper/channelmapper.js
+++ b/src/components/channelmapper/channelmapper.js
@ -71,7 +71,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee
        function getTunerChannelHtml(channel, providerName) {
            var html = "";
            html += '<div class="listItem">';
-            html += '<i class="md-icon listItemIcon">dvr</i>';
+            html += '<i class="material-icons listItemIcon">dvr</i>';
            html += '<div class="listItemBody two-line">';
            html += '<h3 class="listItemBodyText">';
            html += channel.Name;
@ -84,7 +84,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee

            html += "</div>";
            html += "</div>";
-            html += '<button class="btnMap autoSize" is="paper-icon-button-light" type="button" data-id="' + channel.Id + '" data-providerid="' + channel.ProviderChannelId + '"><i class="md-icon">mode_edit</i></button>';
+            html += '<button class="btnMap autoSize" is="paper-icon-button-light" type="button" data-id="' + channel.Id + '" data-providerid="' + channel.ProviderChannelId + '"><i class="material-icons">mode_edit</i></button>';
            return html += "</div>";
        }

@ -127,7 +127,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee
            var html = "";
            var title = globalize.translate("MapChannels");
            html += '<div class="formDialogHeader">';
-            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>';
            html += '<h3 class="formDialogHeaderTitle">';
            html += title;
            html += "</h3>";
--- a/src/components/chromecast/chromecastplayer.js
+++ b/src/components/chromecast/chromecastplayer.js
@ -686,6 +686,13 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
            });
        }

+        if (options.items.length > 1 && options && options.ids) {
+            // Use the original request id array for sorting the result in the proper order
+            options.items.sort(function (a, b) {
+                return options.ids.indexOf(a.Id) - options.ids.indexOf(b.Id);
+            });
+        }
+
        return this._castPlayer.loadMedia(options, command);
    };

--- a/src/components/collectioneditor/collectioneditor.js
+++ b/src/components/collectioneditor/collectioneditor.js
@ -243,13 +243,13 @@ define(['dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManage
        var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection');

        html += '<div class="formDialogHeader">';
-        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
+        html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>';
        html += '<h3 class="formDialogHeaderTitle">';
        html += title;
        html += '</h3>';

        if (appHost.supports('externallinks')) {
-            html += '<a is="emby-linkbutton" class="button-link btnHelp flex align-items-center" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="' + globalize.translate('Help') + '"><i class="md-icon">info</i><span style="margin-left:.25em;">' + globalize.translate('Help') + '</span></a>';
+            html += '<a is="emby-linkbutton" class="button-link btnHelp flex align-items-center" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="' + globalize.translate('Help') + '"><i class="material-icons">info</i><span style="margin-left:.25em;">' + globalize.translate('Help') + '</span></a>';
        }

        html += '</div>';
--- 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/directorybrowser/directorybrowser.js
+++ b/src/components/directorybrowser/directorybrowser.js
@ -76,7 +76,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
        html += name;
        html += "</div>";
        html += "</div>";
-        html += '<i class="md-icon" style="font-size:inherit;">arrow_forward</i>';
+        html += '<i class="material-icons" style="font-size:inherit;">arrow_forward</i>';
        html += "</div>";
        return html;
    }
@ -116,7 +116,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
        html += '<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ' + readOnlyAttribute + ' label="' + Globalize.translate(labelKey) + '"/>';
        html += "</div>";
        if (!readOnlyAttribute) {
-            html += '<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="' + Globalize.translate("ButtonRefresh") + '"><i class="md-icon">search</i></button>';
+            html += '<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="' + Globalize.translate("ButtonRefresh") + '"><i class="material-icons">search</i></button>';
        }
        html += "</div>";
        if (!readOnlyAttribute) {
@ -265,7 +265,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-

                    var html = "";
                    html += '<div class="formDialogHeader">';
-                    html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
+                    html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>';
                    html += '<h3 class="formDialogHeaderTitle">';
                    html += options.header || Globalize.translate("HeaderSelectPath");
                    html += "</h3>";
--- a/src/components/emby-scrollbuttons/emby-scrollbuttons.css
+++ b/src/components/emby-scrollbuttons/emby-scrollbuttons.css
@ -4,11 +4,11 @@
    right: 0;
    align-items: center;
    justify-content: center;
-    min-width:104px;
-    min-height:24px;
+    min-width: 104px;
+    min-height: 24px;
    padding-top: 1.25em;
    z-index: 1;
-    color: #ffffff;
+    color: #fff;
    display: flex;
 }

--- a/src/components/emby-scrollbuttons/emby-scrollbuttons.js
+++ b/src/components/emby-scrollbuttons/emby-scrollbuttons.js
@ -10,7 +10,7 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
        var icon = direction === 'left' ? 'chevron_left' : 'chevron_right';

        html += '<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="' + direction + '" class="emby-scrollbuttons-button">';
-        html += '<i class="md-icon">' + icon + '</i>';
+        html += '<i class="material-icons">' + icon + '</i>';
        html += '</button>';

        return html;
--- 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/emby-tabs/emby-tabs.css
+++ b/src/components/emby-tabs/emby-tabs.css
@ -31,6 +31,10 @@
    overflow: hidden;
 }

+.layout-mobile .emby-tabs-slider {
+    overflow: auto;
+}
+
 .tabContent:not(.is-active) {
    display: none;
 }
--- a/src/components/favoriteitems.js
+++ b/src/components/favoriteitems.js
@ -136,7 +136,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
                    html += '<h2 class="sectionTitle sectionTitle-cards">';
                    html += globalize.translate(section.name);
                    html += "</h2>";
-                    html += '<i class="md-icon">chevron_right</i>';
+                    html += '<i class="material-icons">chevron_right</i>';
                    html += "</a>";
                } else {
                    html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + "</h2>";
--- a/src/components/filterdialog/style.css
+++ b/src/components/filterdialog/style.css
@ -5,31 +5,32 @@
    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) {
+@media all and (min-height: 600px) {
    .dynamicFilterDialog {
        top: 10% !important;
-        bottom: 25% !important
+        bottom: 25% !important;
    }
 }

-@media all and (max-width:400px) {
+@media all and (max-width: 400px) {
    .dynamicFilterDialog {
        width: auto;
        left: 10vw !important;
        right: 10vw !important;
-        margin-left: 0 !important
+        margin-left: 0 !important;
    }
 }

-@media all and (min-width:400px) {
+@media all and (min-width: 400px) {
    .dynamicFilterDialog {
-        width: 300px;
-        margin-left: -150px !important;
-        left: 50% !important
+        width: 20.16em;
+        margin-left: -10.08em !important;
+        left: 50% !important;
    }
 }
--- a/src/components/filtermenu/filtermenu.js
+++ b/src/components/filtermenu/filtermenu.js
@ -279,7 +279,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                var html = '';

                html += '<div class="formDialogHeader">';
-                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
+                html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="material-icons">arrow_back</i></button>';
                html += '<h3 class="formDialogHeaderTitle">${Filters}</h3>';

                html += '</div>';
--- 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-settings.template.html
+++ b/src/components/guide/guide-settings.template.html
@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
    <h3 class="formDialogHeaderTitle">
        ${Settings}
    </h3>
--- 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 {
+@media all and (min-width: 31.25em) {
+    .channelsContainer,
+    .guide-channelTimeslotHeader {
        width: 16vw;
    }
 }

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

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

-@media all and (min-width:80em) {
-    .channelsContainer, .guide-channelTimeslotHeader {
+@media all and (min-width: 80em) {
+    .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 {
+    margin-top: -1px;
 }

-    .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,7 +278,8 @@
    position: relative;
    flex-grow: 1;
    contain: layout style paint;
-    /*transition: transform 60ms ease-out;*/
+
+    /* transition: transform 60ms ease-out; */
 }

 .guide-programNameCaret {
@ -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,16 +420,16 @@
 }

 .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;
 }

-    .guide-date-tab-button.emby-tab-button-active {
-        border-color: transparent !important;
-    }
+.guide-date-tab-button.emby-tab-button-active {
+    border-color: transparent !important;
+}

-    .guide-date-tab-button.show-focus:focus {
-        border-radius: .15em !important;
-        transform: none !important;
-    }
+.guide-date-tab-button.show-focus:focus {
+    border-radius: 0.15em !important;
+    transform: none !important;
+}
--- a/src/components/guide/guide.js
+++ b/src/components/guide/guide.js
@ -416,7 +416,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
            var status;

            if (item.Type === 'SeriesTimer') {
-                return '<i class="md-icon programIcon seriesTimerIcon">fiber_smart_record</i>';
+                return '<i class="material-icons programIcon seriesTimerIcon">fiber_smart_record</i>';
            } else if (item.TimerId || item.SeriesTimerId) {

                status = item.Status || 'Cancelled';
@ -430,13 +430,13 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
            if (item.SeriesTimerId) {

                if (status !== 'Cancelled') {
-                    return '<i class="md-icon programIcon seriesTimerIcon">fiber_smart_record</i>';
+                    return '<i class="material-icons programIcon seriesTimerIcon">fiber_smart_record</i>';
                }

-                return '<i class="md-icon programIcon seriesTimerIcon seriesTimerIcon-inactive">fiber_smart_record</i>';
+                return '<i class="material-icons programIcon seriesTimerIcon seriesTimerIcon-inactive">fiber_smart_record</i>';
            }

-            return '<i class="md-icon programIcon timerIcon">fiber_manual_record</i>';
+            return '<i class="material-icons programIcon timerIcon">fiber_manual_record</i>';
        }

        function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) {
@ -550,7 +550,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',

                    html += '<div class="' + guideProgramNameClass + '">';

-                    html += '<div class="guide-programNameCaret hide"><i class="guideProgramNameCaretIcon md-icon">keyboard_arrow_left</i></div>';
+                    html += '<div class="guide-programNameCaret hide"><i class="guideProgramNameCaretIcon material-icons">keyboard_arrow_left</i></div>';

                    html += '<div class="guideProgramNameText">' + program.Name;

@ -578,7 +578,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
                    html += '</div>';

                    if (program.IsHD && options.showHdIcon) {
-                        //html += '<i class="guideHdIcon md-icon programIcon">hd</i>';
+                        //html += '<i class="guideHdIcon material-icons programIcon">hd</i>';
                        if (layoutManager.tv) {
                            html += '<div class="programIcon guide-programTextIcon guide-programTextIcon-tv">HD</div>';
                        } else {
@ -1106,7 +1106,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',

                var icon = cell.querySelector('.timerIcon');
                if (!icon) {
-                    cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<i class="timerIcon md-icon programIcon">fiber_manual_record</i>');
+                    cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<i class="timerIcon material-icons programIcon">fiber_manual_record</i>');
                }

                if (newTimerId) {
--- 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/guide/tvguide.template.html
+++ b/src/components/guide/tvguide.template.html
@ -10,7 +10,7 @@
    <div class="guide-headerTimeslots">
        <div class="guide-channelTimeslotHeader">
            <button is="paper-icon-button-light" type="button" class="btnGuideViewSettings">
-                <i class="md-icon btnGuideViewSettingsIcon">more_horiz</i>
+                <i class="material-icons btnGuideViewSettingsIcon">more_horiz</i>
            </button>
        </div>
        <div class="timeslotHeaders scrollX guideScroller"></div>
@ -30,9 +30,9 @@

 <div class="guideOptions hide">
    <button is="paper-icon-button-light" type="button" class="btnPreviousPage">
-        <i class="md-icon">arrow_back</i>
+        <i class="material-icons">arrow_back</i>
    </button>
    <button is="paper-icon-button-light" type="button" class="btnNextPage">
-        <i class="md-icon">arrow_forward</i>
+        <i class="material-icons">arrow_forward</i>
    </button>
 </div>
--- a/src/components/headroom/headroom.css
+++ b/src/components/headroom/headroom.css
@ -8,4 +8,4 @@

 .headroom--unpinned:not(.headroomDisabled) {
    transform: translateY(-100%);
-}
+}
--- a/src/components/homescreensettings/homescreensettings.js
+++ b/src/components/homescreensettings/homescreensettings.js
@ -149,7 +149,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa

            currentHtml += '<div class="listItem viewItem" data-viewid="' + view.Id + '">';

-            currentHtml += '<i class="md-icon listItemIcon">folder_open</i>';
+            currentHtml += '<i class="material-icons listItemIcon">folder_open</i>';

            currentHtml += '<div class="listItemBody">';

@ -159,8 +159,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa

            currentHtml += '</div>';

-            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><i class="md-icon">keyboard_arrow_up</i></button>';
-            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><i class="md-icon">keyboard_arrow_down</i></button>';
+            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><i class="material-icons">keyboard_arrow_up</i></button>';
+            currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><i class="material-icons">keyboard_arrow_down</i></button>';

            currentHtml += '</div>';

--- 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/homesections/homesections.js
+++ b/src/components/homesections/homesections.js
@ -161,7 +161,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
        for (var i = 0, length = items.length; i < length; i++) {
            var item = items[i];
            var icon = imageHelper.getLibraryIcon(item.CollectionType);
-            html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><i class="md-icon homeLibraryIcon">' + icon + '</i><span class="homeLibraryText">' + item.Name + '</span></a>';
+            html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><i class="material-icons homeLibraryIcon">' + icon + '</i><span class="homeLibraryText">' + item.Name + '</span></a>';
        }

        html += '</div>';
@ -260,7 +260,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
            html += '<h2 class="sectionTitle sectionTitle-cards">';
            html += globalize.translate('LatestFromLibrary', parent.Name);
            html += '</h2>';
-            html += '<i class="md-icon">chevron_right</i>';
+            html += '<i class="material-icons">chevron_right</i>';
            html += '</a>';
        } else {
            html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LatestFromLibrary', parent.Name) + '</h2>';
@ -608,7 +608,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                    html += '<h2 class="sectionTitle sectionTitle-cards">';
                    html += globalize.translate('HeaderOnNow');
                    html += '</h2>';
-                    html += '<i class="md-icon">chevron_right</i>';
+                    html += '<i class="material-icons">chevron_right</i>';
                    html += '</a>';

                } else {
@ -683,7 +683,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
            html += '<h2 class="sectionTitle sectionTitle-cards">';
            html += globalize.translate('HeaderNextUp');
            html += '</h2>';
-            html += '<i class="md-icon">chevron_right</i>';
+            html += '<i class="material-icons">chevron_right</i>';
            html += '</a>';
        } else {
            html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderNextUp') + '</h2>';
--- 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/imagedownloader/imagedownloader.js
+++ b/src/components/imagedownloader/imagedownloader.js
@ -116,8 +116,8 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
        if (showControls) {
            html += '<div data-role="controlgroup" data-type="horizontal" style="display:inline-block;">';

-            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><i class="md-icon">arrow_back</i></button>';
-            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Next') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><i class="md-icon">arrow_forward</i></button>';
+            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><i class="material-icons">arrow_back</i></button>';
+            html += '<button is="paper-icon-button-light" title="' + globalize.translate('Next') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><i class="material-icons">arrow_forward</i></button>';
            html += '</div>';
        }

@ -277,7 +277,7 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
        if (enableFooterButtons) {
            html += '<div class="cardText cardTextCentered">';

-            html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><i class="md-icon">cloud_download</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><i class="material-icons">cloud_download</i></button>';
            html += '</div>';
        }

--- a/src/components/imagedownloader/imagedownloader.template.html
+++ b/src/components/imagedownloader/imagedownloader.template.html
@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
    <h3 class="formDialogHeaderTitle">
        ${Search}
    </h3>
--- a/src/components/imageeditor/imageeditor.css
+++ b/src/components/imageeditor/imageeditor.css
@ -6,4 +6,4 @@

 .first-imageEditor-buttons {
    margin-top: 2em;
-}
+}
--- a/src/components/imageeditor/imageeditor.js
+++ b/src/components/imageeditor/imageeditor.js
@ -155,23 +155,23 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
            if (image.ImageType === "Backdrop" || image.ImageType === "Screenshot") {

                if (index > 0) {
-                    html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + globalize.translate('MoveLeft') + '"><i class="md-icon">chevron_left</i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + globalize.translate('MoveLeft') + '"><i class="material-icons">chevron_left</i></button>';
                } else {
-                    html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveLeft') + '"><i class="md-icon">chevron_left</i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveLeft') + '"><i class="material-icons">chevron_left</i></button>';
                }

                if (index < numImages - 1) {
-                    html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + globalize.translate('MoveRight') + '"><i class="md-icon">chevron_right</i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + globalize.translate('MoveRight') + '"><i class="material-icons">chevron_right</i></button>';
                } else {
-                    html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveRight') + '"><i class="md-icon">chevron_right</i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveRight') + '"><i class="material-icons">chevron_right</i></button>';
                }
            } else {
                if (imageProviders.length) {
-                    html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" class="btnSearchImages autoSize" title="' + globalize.translate('Search') + '"><i class="md-icon">search</i></button>';
+                    html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" class="btnSearchImages autoSize" title="' + globalize.translate('Search') + '"><i class="material-icons">search</i></button>';
                }
            }

-            html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" data-index="' + (image.ImageIndex != null ? image.ImageIndex : "null") + '" class="btnDeleteImage autoSize" title="' + globalize.translate('Delete') + '"><i class="md-icon">delete</i></button>';
+            html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" data-index="' + (image.ImageIndex != null ? image.ImageIndex : "null") + '" class="btnDeleteImage autoSize" title="' + globalize.translate('Delete') + '"><i class="material-icons">delete</i></button>';
            html += '</div>';
        }

--- a/src/components/imageeditor/imageeditor.template.html
+++ b/src/components/imageeditor/imageeditor.template.html
@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
    <h3 class="formDialogHeaderTitle">
        ${HeaderEditImages}
    </h3>
@ -12,10 +12,10 @@
            <div class="imageEditor-buttons first-imageEditor-buttons">
                <h2 style="margin:0;">${Images}</h2>
                <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;">
-                    <i class="md-icon">search</i>
+                    <i class="material-icons">search</i>
                </button>
                <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;">
-                    <i class="md-icon">add</i>
+                    <i class="material-icons">add</i>
                </button>
            </div>
            <div id="images" class="itemsContainer vertical-wrap">
@ -27,10 +27,10 @@
            <div class="imageEditor-buttons">
                <h2 style="margin:0;">${Backdrops}</h2>
                <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop">
-                    <i class="md-icon">search</i>
+                    <i class="material-icons">search</i>
                </button>
                <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Backdrop">
-                    <i class="md-icon">add</i>
+                    <i class="material-icons">add</i>
                </button>
            </div>
            <div id="backdrops" class="itemsContainer vertical-wrap">
@ -42,10 +42,10 @@
            <div class="imageEditor-buttons">
                <h2 style="margin: 0;">${Screenshots}</h2>
                <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Screenshot">
-                    <i class="md-icon">search</i>
+                    <i class="material-icons">search</i>
                </button>
                <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Screenshot">
-                    <i class="md-icon">add</i>
+                    <i class="material-icons">add</i>
                </button>
            </div>
            <div id="screenshots" class="itemsContainer vertical-wrap">
--- a/src/components/imageoptionseditor/imageoptionseditor.template.html
+++ b/src/components/imageoptionseditor/imageoptionseditor.template.html
@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
    <h3 class="formDialogHeaderTitle">
        ${HeaderImageOptions}
    </h3>
--- 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;
@ -32,4 +41,4 @@
    100% {
        opacity: 1;
    }
-}
+}
--- a/src/components/imageuploader/imageuploader.template.html
+++ b/src/components/imageuploader/imageuploader.template.html
@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
    <h3 class="formDialogHeaderTitle">
        ${HeaderUploadImage}
    </h3>
@ -14,7 +14,7 @@
                <h2 style="margin:0;">${HeaderAddUpdateImage}</h2>

                <button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;">
-                    <i class="md-icon">folder</i>
+                    <i class="material-icons">folder</i>
                    <span>${Browse}</span>
                </button>
            </div>
--- 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;
@ -8,4 +9,4 @@
    display: flex;
    align-items: center;
    justify-content: center;
-}
+}
--- 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/indicators/indicators.js
+++ b/src/components/indicators/indicators.js
@ -90,7 +90,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
            }

            if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
-                return '<div class="playedIndicator indicator"><i class="md-icon indicatorIcon">check</i></div>';
+                return '<div class="playedIndicator indicator"><i class="material-icons indicatorIcon">check</i></div>';
            }
        }

@ -118,7 +118,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
        var status;

        if (item.Type === 'SeriesTimer') {
-            return '<i class="md-icon timerIndicator indicatorIcon">fiber_smart_record</i>';
+            return '<i class="material-icons timerIndicator indicatorIcon">fiber_smart_record</i>';
        } else if (item.TimerId || item.SeriesTimerId) {
            status = item.Status || 'Cancelled';
        } else if (item.Type === 'Timer') {
@ -129,20 +129,20 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun

        if (item.SeriesTimerId) {
            if (status !== 'Cancelled') {
-                return '<i class="md-icon timerIndicator indicatorIcon">fiber_smart_record</i>';
+                return '<i class="material-icons timerIndicator indicatorIcon">fiber_smart_record</i>';
            }

-            return '<i class="md-icon timerIndicator timerIndicator-inactive indicatorIcon">fiber_smart_record</i>';
+            return '<i class="material-icons timerIndicator timerIndicator-inactive indicatorIcon">fiber_smart_record</i>';
        }

-        return '<i class="md-icon timerIndicator indicatorIcon">fiber_manual_record</i>';
+        return '<i class="material-icons timerIndicator indicatorIcon">fiber_manual_record</i>';
    }

    function getSyncIndicator(item) {
        if (item.SyncPercent === 100) {
-            return '<div class="syncIndicator indicator fullSyncIndicator"><i class="md-icon indicatorIcon">file_download</i></div>';
+            return '<div class="syncIndicator indicator fullSyncIndicator"><i class="material-icons indicatorIcon">file_download</i></div>';
        } else if (item.SyncPercent != null) {
-            return '<div class="syncIndicator indicator emptySyncIndicator"><i class="md-icon indicatorIcon">file_download</i></div>';
+            return '<div class="syncIndicator indicator emptySyncIndicator"><i class="material-icons indicatorIcon">file_download</i></div>';
        }

        return '';
@ -150,13 +150,13 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun

    function getTypeIndicator(item) {
        if (item.Type === 'Video') {
-            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">videocam</i></div>';
+            return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon">videocam</i></div>';
        }
        if (item.Type === 'Folder' || item.Type === 'PhotoAlbum') {
-            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">folder</i></div>';
+            return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon">folder</i></div>';
        }
        if (item.Type === 'Photo') {
-            return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">photo</i></div>';
+            return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon">photo</i></div>';
        }

        return '';
--- a/src/components/itemMediaInfo/itemMediaInfo.template.html
+++ b/src/components/itemMediaInfo/itemMediaInfo.template.html
@ -1,6 +1,6 @@
 <div class="formDialogHeader">
    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-        <i class="md-icon">arrow_back</i>
+        <i class="material-icons">arrow_back</i>
    </button>
    <h3 class="formDialogHeaderTitle">${HeaderMediaInfo}</h3>
 </div>
--- a/src/components/itemcontextmenu.js
+++ b/src/components/itemcontextmenu.js
@ -351,14 +351,15 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
                    document.body.appendChild(textArea);
                    textArea.focus();
                    textArea.select();
-                    try {
-                        document.execCommand("copy");
-
+                    if (document.execCommand("copy")) {
                        require(["toast"], function (toast) {
                            toast(globalize.translate("CopyStreamURLSuccess"));
                        });
-                    } catch (err) {
+                    } else {
                        console.error("Failed to copy to clipboard");
+                        require(["toast"], function (toast) {
+                            toast(globalize.translate("CopyStreamURLError"));
+                        });
                    }

                    document.body.removeChild(textArea);
--- a/src/components/itemidentifier/itemidentifier.template.html
+++ b/src/components/itemidentifier/itemidentifier.template.html
@ -1,6 +1,6 @@
 <div class="formDialogHeader">
    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-        <i class="md-icon">arrow_back</i>
+        <i class="material-icons">arrow_back</i>
    </button>
    <h3 class="formDialogHeaderTitle">${Identify}</h3>
 </div>
--- 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');
    };

@ -64,4 +62,4 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
    };

    return new LayoutManager();
-});
+});
--- 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/libraryoptionseditor/libraryoptionseditor.js
+++ b/src/components/libraryoptionseditor/libraryoptionseditor.js
@ -58,16 +58,16 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
        for (var i = 0; i < plugins.length; i++) {
            var plugin = plugins[i];
            html += '<div class="listItem localReaderOption sortableOption" data-pluginname="' + plugin.Name + '">';
-            html += '<i class="listItemIcon md-icon">live_tv</i>';
+            html += '<i class="listItemIcon material-icons">live_tv</i>';
            html += '<div class="listItemBody">';
            html += '<h3 class="listItemBodyText">';
            html += plugin.Name;
            html += "</h3>";
            html += "</div>";
            if (i > 0) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_up</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_up</i></button>';
            } else if (plugins.length > 1) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_down</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_down</i></button>';
            }
            html += "</div>";
        }
@ -120,7 +120,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
            html += plugin.Name;
            html += "</h3>";
            html += "</div>";
-            i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_up</i></button>' : plugins.length > 1 && (html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_down</i></button>'), html += "</div>"
+            i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_up</i></button>' : plugins.length > 1 && (html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_down</i></button>'), html += "</div>"
        }
        html += "</div>";
        html += '<div class="fieldDescription">' + globalize.translate("LabelMetadataDownloadersHelp") + "</div>";
@ -181,9 +181,9 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
            html += "</h3>";
            html += "</div>";
            if (i > 0) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_up</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_up</i></button>';
            } else if (plugins.length > 1) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_down</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_down</i></button>';
            }
            html += "</div>";
        }
@ -220,9 +220,9 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
            html += "</h3>";
            html += "</div>";
            if (i > 0) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_up</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_up</i></button>';
            } else if (plugins.length > 1) {
-                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_down</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_down</i></button>';
            }
            html += "</div>";
        }
--- 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 {
@ -151,23 +162,24 @@

@media all and (max-width: 64em) {
    .listItemImage-large {
-        width: 33.75vw;
-        height: 22.5vw;
+        width: 22vw;
+        height: 16vw;
        margin-right: 0 !important;
    }

+    .listItemIndicators,
    .listItemImageButton {
-        font-size: 1em !important;
+        font-size: 0.6em !important;
    }

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

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

@ -180,15 +192,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 +211,7 @@
 }

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

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

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

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

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

 .paperList-clear {
@ -234,26 +246,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/listview/listview.js
+++ b/src/components/listview/listview.js
@ -160,7 +160,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan

            var button = options.rightButtons[i];

-            html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="' + button.id + '" title="' + button.title + '"><i class="md-icon">' + button.icon + '</i></button>';
+            html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="' + button.id + '" title="' + button.title + '"><i class="material-icons">' + button.icon + '</i></button>';
        }

        return html;
@ -262,9 +262,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
            }

            if (!clickEntireItem && options.dragHandle) {
-                //html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><i class="md-icon">drag_handle</i></button>';
+                //html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><i class="material-icons">drag_handle</i></button>';
                // Firefox and Edge are not allowing the button to be draggable
-                html += '<i class="listViewDragHandle md-icon listItemIcon listItemIcon-transparent">drag_handle</i>';
+                html += '<i class="listViewDragHandle material-icons listItemIcon listItemIcon-transparent">drag_handle</i>';
            }

            if (options.image !== false) {
@ -298,7 +298,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                }

                if (playOnImageClick) {
-                    html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><i class="md-icon listItemImageButton-icon">play_arrow</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><i class="material-icons listItemImageButton-icon">play_arrow</i></button>';
                }

                var progressHtml = indicators.getProgressBarHtml(item, {
@ -471,18 +471,20 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                html += indicators.getTimerIndicator(item).replace('indicatorIcon', 'indicatorIcon listItemAside');
            }

+            html += '<div class="listViewUserDataButtons">';
+
            if (!clickEntireItem) {

                if (options.addToListButton) {
-                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><i class="md-icon">playlist_add</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><i class="material-icons">playlist_add</i></button>';
                }

                if (options.moreButton !== false) {
-                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="menu"><i class="md-icon">' + moreIcon + '</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="menu"><i class="material-icons">' + moreIcon + '</i></button>';
                }

                if (options.infoButton) {
-                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><i class="md-icon">info_outline</i></button>';
+                    html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><i class="material-icons">info_outline</i></button>';
                }

                if (options.rightButtons) {
@ -491,22 +493,19 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan

                if (options.enableUserDataButtons !== false) {

-                    html += '<span class="listViewUserDataButtons flex align-items-center">';
-
                    var userData = item.UserData || {};
                    var likes = userData.Likes == null ? '' : userData.Likes;

                    if (itemHelper.canMarkPlayed(item)) {
-                        html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon">check</i></button>';
+                        html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="material-icons">check</i></button>';
                    }

                    if (itemHelper.canRate(item)) {
-                        html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">favorite</i></button>';
+                        html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons">favorite</i></button>';
                    }
-
-                    html += '</span>';
                }
            }
+            html += '</div>';

            if (enableContentWrapper) {
                html += '</div>';
--- 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);
    }
 }
@ -24,67 +33,121 @@
 }

 .mdl-spinner__layer-1 {
-    border-color: rgb(66,165,245);
+    border-color: rgb(66, 165, 245);
 }

 .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;
 }

 .mdl-spinner__layer-2 {
-    border-color: rgb(244,67,54);
+    border-color: rgb(244, 67, 54);
 }

 .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;
 }

 .mdl-spinner__layer-3 {
-    border-color: rgb(253,216,53);
+    border-color: rgb(253, 216, 53);
 }

 .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;
 }

 .mdl-spinner__layer-4 {
-    border-color: rgb(76,175,80);
+    border-color: rgb(76, 175, 80);
 }

 .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;
@ -199,69 +371,97 @@
    border-color: inherit;
 }

-    .mdl-spinner__circle-clipper .mdl-spinner__circle {
-        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__circle-clipper .mdl-spinner__circle {
+    width: 200%;
 }

 .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/mediainfo/mediainfo.js
+++ b/src/components/mediainfo/mediainfo.js
@ -6,7 +6,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
        var status;

        if (item.Type === 'SeriesTimer') {
-            return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
+            return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
        } else if (item.TimerId || item.SeriesTimerId) {

            status = item.Status || 'Cancelled';
@ -20,13 +20,13 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
        if (item.SeriesTimerId) {

            if (status !== 'Cancelled') {
-                return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
+                return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
            }

-            return '<i class="md-icon mediaInfoItem mediaInfoIconItem">fiber_smart_record</i>';
+            return '<i class="material-icons mediaInfoItem mediaInfoIconItem">fiber_smart_record</i>';
        }

-        return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_manual_record</i>';
+        return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_manual_record</i>';
    }

    function getProgramInfoHtml(item, options) {
@ -393,7 +393,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
        if (rating) {
            html += '<div class="starRatingContainer mediaInfoItem">';

-            html += '<i class="md-icon starIcon">star</i>';
+            html += '<i class="material-icons starIcon">star</i>';
            html += rating;
            html += '</div>';
        }
--- a/src/components/medialibrarycreator/medialibrarycreator.js
+++ b/src/components/medialibrarycreator/medialibrarycreator.js
@ -1,37 +1,44 @@
-define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionseditor/libraryoptionseditor", "emby-toggle", "emby-input", "emby-select", "paper-icon-button-light", "listViewStyle", "formDialogStyle", "emby-button", "flexStyles"], function(loading, dialogHelper, dom, $, libraryoptionseditor) {
+define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionseditor/libraryoptionseditor", "emby-toggle", "emby-input", "emby-select", "paper-icon-button-light", "listViewStyle", "formDialogStyle", "emby-button", "flexStyles"], function (loading, dialogHelper, dom, $, libraryoptionseditor) {
    "use strict";

    function onAddLibrary() {
-        if (isCreating) return false;
+        if (isCreating) {
+            return false;
+        }

        if (pathInfos.length == 0) {
-            require(["alert"], function(alert) {
+            require(["alert"], function (alert) {
                alert({
                    text: Globalize.translate("PleaseAddAtLeastOneFolder"),
                    type: "error"
-                })
+                });
            });
+
            return false;
        }

        isCreating = true;
        loading.show();
-
        var dlg = dom.parentWithClass(this, "dlg-librarycreator");
        var name = $("#txtValue", dlg).val();
        var type = $("#selectCollectionType", dlg).val();
-        if (type == "mixed") type = null;
+
+        if (type == "mixed") {
+            type = null;
+        }
+
        var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector(".libraryOptions"));
        libraryOptions.PathInfos = pathInfos;
-        ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(function() {
+        ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(function () {
            hasChanges = true;
            isCreating = false;
            loading.hide();
            dialogHelper.close(dlg);
-        }, function() {
-            require(["toast"], function(toast) {
+        }, function () {
+            require(["toast"], function (toast) {
                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
            });
+
            isCreating = false;
            loading.hide();
        });
@ -39,16 +46,17 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
    }

    function getCollectionTypeOptionsHtml(collectionTypeOptions) {
-        return collectionTypeOptions.map(function(i) {
+        return collectionTypeOptions.map(function (i) {
            return '<option value="' + i.value + '">' + i.name + "</option>";
        }).join("");
    }

    function initEditor(page, collectionTypeOptions) {
-        $("#selectCollectionType", page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val("").on("change", function() {
+        $("#selectCollectionType", page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val("").on("change", function () {
            var value = this.value;
            var dlg = $(this).parents(".dialog")[0];
            libraryoptionseditor.setContentType(dlg.querySelector(".libraryOptions"), value == "mixed" ? "" : value);
+
            if (value) {
                dlg.querySelector(".libraryOptions").classList.remove("hide");
            } else {
@ -57,17 +65,17 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed

            if (value != "mixed") {
                var index = this.selectedIndex;
+
                if (index != -1) {
                    var name = this.options[index].innerHTML.replace("*", "").replace("&amp;", "&");
                    $("#txtValue", dlg).val(name);
-                    var folderOption = collectionTypeOptions.filter(function(i) {
-                        return i.value == value
+                    var folderOption = collectionTypeOptions.filter(function (i) {
+                        return i.value == value;
                    })[0];
-                    $(".collectionTypeFieldDescription", dlg).html(folderOption.message || "")
+                    $(".collectionTypeFieldDescription", dlg).html(folderOption.message || "");
                }
            }
        });
-
        page.querySelector(".btnAddFolder").addEventListener("click", onAddButtonClick);
        page.querySelector(".btnSubmit").addEventListener("click", onAddLibrary);
        page.querySelector(".folderList").addEventListener("click", onRemoveClick);
@ -81,40 +89,65 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed

    function onAddButtonClick() {
        var page = dom.parentWithClass(this, "dlg-librarycreator");
-        require(["directorybrowser"], function(directoryBrowser) {
-            var picker = new directoryBrowser;
+
+        require(["directorybrowser"], function (directoryBrowser) {
+            var picker = new directoryBrowser();
            picker.show({
                enableNetworkSharePath: true,
-                callback: function(path, networkSharePath) {
-                    path && addMediaLocation(page, path, networkSharePath);
+                callback: function (path, networkSharePath) {
+                    if (path) {
+                        addMediaLocation(page, path, networkSharePath);
+                    }
+
                    picker.close();
                }
-            })
-        })
+            });
+        });
    }

    function getFolderHtml(pathInfo, index) {
        var html = "";
-        return html += '<div class="listItem listItem-border lnkPath" style="padding-left:.5em;">', html += '<div class="' + (pathInfo.NetworkPath ? "listItemBody two-line" : "listItemBody") + '">', html += '<div class="listItemBodyText">' + pathInfo.Path + "</div>", pathInfo.NetworkPath && (html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + "</div>"), html += "</div>", html += '<button type="button" is="paper-icon-button-light"" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="md-icon">remove_circle</i></button>', html += "</div>"
+        html += '<div class="listItem listItem-border lnkPath" style="padding-left:.5em;">';
+        html += '<div class="' + (pathInfo.NetworkPath ? "listItemBody two-line" : "listItemBody") + '">';
+        html += '<div class="listItemBodyText">' + pathInfo.Path + "</div>";
+
+        if (pathInfo.NetworkPath) {
+            html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + "</div>";
+        }
+
+        html += "</div>";
+        html += '<button type="button" is="paper-icon-button-light"" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="material-icons">remove_circle</i></button>';
+        html += "</div>";
+        return html;
    }

    function renderPaths(page) {
        var foldersHtml = pathInfos.map(getFolderHtml).join("");
        var folderList = page.querySelector(".folderList");
        folderList.innerHTML = foldersHtml;
-        foldersHtml ? folderList.classList.remove("hide") : folderList.classList.add("hide");
+
+        if (foldersHtml) {
+            folderList.classList.remove("hide");
+        } else {
+            folderList.classList.add("hide");
+        }
    }

    function addMediaLocation(page, path, networkSharePath) {
        var pathLower = path.toLowerCase();
-        var pathFilter = pathInfos.filter(function(p) {
+        var pathFilter = pathInfos.filter(function (p) {
            return p.Path.toLowerCase() == pathLower;
        });
+
        if (!pathFilter.length) {
            var pathInfo = {
                Path: path
            };
-            networkSharePath && (pathInfo.NetworkPath = networkSharePath);
+
+            if (networkSharePath) {
+                pathInfo.NetworkPath = networkSharePath;
+            }
+
            pathInfos.push(pathInfo);
            renderPaths(page);
        }
@ -125,7 +158,7 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
        var index = parseInt(button.getAttribute("data-index"));
        var location = pathInfos[index].Path;
        var locationLower = location.toLowerCase();
-        pathInfos = pathInfos.filter(function(p) {
+        pathInfos = pathInfos.filter(function (p) {
            return p.Path.toLowerCase() != locationLower;
        });
        renderPaths(dom.parentWithClass(button, "dlg-librarycreator"));
@ -136,21 +169,22 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
    }

    function initLibraryOptions(dlg) {
-        libraryoptionseditor.embed(dlg.querySelector(".libraryOptions")).then(function() {
+        libraryoptionseditor.embed(dlg.querySelector(".libraryOptions")).then(function () {
            $("#selectCollectionType", dlg).trigger("change");
            onToggleAdvancedChange.call(dlg.querySelector(".chkAdvanced"));
-        })
+        });
    }

    function editor() {
-        this.show = function(options) {
-            return new Promise(function(resolve, reject) {
+        this.show = function (options) {
+            return new Promise(function (resolve, reject) {
                currentOptions = options;
                currentResolve = resolve;
                hasChanges = false;
-                var xhr = new XMLHttpRequest;
+                var xhr = new XMLHttpRequest();
                xhr.open("GET", "components/medialibrarycreator/medialibrarycreator.template.html", true);
-                xhr.onload = function(e) {
+
+                xhr.onload = function (e) {
                    var template = this.response;
                    var dlg = dialogHelper.createDialog({
                        size: "medium-tall",
@ -166,24 +200,23 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
                    initEditor(dlg, options.collectionTypeOptions);
                    dlg.addEventListener("close", onDialogClosed);
                    dialogHelper.open(dlg);
-                    dlg.querySelector(".btnCancel").addEventListener("click", function() {
-                        dialogHelper.close(dlg)
+                    dlg.querySelector(".btnCancel").addEventListener("click", function () {
+                        dialogHelper.close(dlg);
                    });
                    pathInfos = [];
                    renderPaths(dlg);
                    initLibraryOptions(dlg);
                };
+
                xhr.send();
            });
-        }
+        };
    }

    var pathInfos = [];
    var currentResolve;
    var currentOptions;
-
    var hasChanges = false;
    var isCreating = false;
-
-    return editor
+    return editor;
 });
--- a/src/components/medialibrarycreator/medialibrarycreator.template.html
+++ b/src/components/medialibrarycreator/medialibrarycreator.template.html
@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
    <h3 class="formDialogHeaderTitle">${ButtonAddMediaLibrary}</h3>
 </div>

@ -26,7 +26,7 @@
            <div style="display: flex; align-items: center;">
                <h1 style="margin: .5em 0;">${HeadersFolders}</h1>
                <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}">
-                    <i class="md-icon">add</i>
+                    <i class="material-icons">add</i>
                </button>
            </div>
            <div class="paperList folderList hide" style="margin-bottom:2em;"></div>
--- a/src/components/medialibraryeditor/medialibraryeditor.js
+++ b/src/components/medialibraryeditor/medialibraryeditor.js
@ -1,22 +1,22 @@
-define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionseditor/libraryoptionseditor", "emby-button", "listViewStyle", "paper-icon-button-light", "formDialogStyle", "emby-toggle", "flexStyles"], function(jQuery, loading, dialogHelper, dom, libraryoptionseditor) {
+define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionseditor/libraryoptionseditor", "emby-button", "listViewStyle", "paper-icon-button-light", "formDialogStyle", "emby-toggle", "flexStyles"], function (jQuery, loading, dialogHelper, dom, libraryoptionseditor) {
    "use strict";

    function onEditLibrary() {
-        if (isCreating) return false;
+        if (isCreating) {
+            return false;
+        }

        isCreating = true;
        loading.show();
-
        var dlg = dom.parentWithClass(this, "dlg-libraryeditor");
        var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector(".libraryOptions"));
        libraryOptions = Object.assign(currentOptions.library.LibraryOptions || {}, libraryOptions);
-
-        ApiClient.updateVirtualFolderOptions(currentOptions.library.ItemId, libraryOptions).then(function() {
+        ApiClient.updateVirtualFolderOptions(currentOptions.library.ItemId, libraryOptions).then(function () {
            hasChanges = true;
            isCreating = false;
            loading.hide();
            dialogHelper.close(dlg);
-        }, function() {
+        }, function () {
            isCreating = false;
            loading.hide();
        });
@ -26,11 +26,11 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
    function addMediaLocation(page, path, networkSharePath) {
        var virtualFolder = currentOptions.library;
        var refreshAfterChange = currentOptions.refresh;
-        ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(function() {
+        ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(function () {
            hasChanges = true;
            refreshLibraryFromServer(page);
-        }, function() {
-            require(["toast"], function(toast) {
+        }, function () {
+            require(["toast"], function (toast) {
                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
            });
        });
@ -41,11 +41,11 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
        ApiClient.updateMediaPath(virtualFolder.Name, {
            Path: path,
            NetworkPath: networkSharePath
-        }).then(function() {
+        }).then(function () {
            hasChanges = true;
            refreshLibraryFromServer(page);
-        }, function() {
-            require(["toast"], function(toast) {
+        }, function () {
+            require(["toast"], function (toast) {
                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
            });
        });
@ -54,19 +54,20 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
    function onRemoveClick(btnRemovePath, location) {
        var button = btnRemovePath;
        var virtualFolder = currentOptions.library;
-        require(["confirm"], function(confirm) {
+
+        require(["confirm"], function (confirm) {
            confirm({
                title: Globalize.translate("HeaderRemoveMediaLocation"),
                text: Globalize.translate("MessageConfirmRemoveMediaLocation"),
                confirmText: Globalize.translate("ButtonDelete"),
                primary: "delete"
-            }).then(function() {
+            }).then(function () {
                var refreshAfterChange = currentOptions.refresh;
-                ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(function() {
+                ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(function () {
                    hasChanges = true;
                    refreshLibraryFromServer(dom.parentWithClass(button, "dlg-libraryeditor"));
-                }, function() {
-                    require(["toast"], function(toast) {
+                }, function () {
+                    require(["toast"], function (toast) {
                        toast(Globalize.translate("DefaultErrorMessage"));
                    });
                });
@ -76,13 +77,19 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed

    function onListItemClick(e) {
        var listItem = dom.parentWithClass(e.target, "listItem");
+
        if (listItem) {
            var index = parseInt(listItem.getAttribute("data-index"));
            var pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || [];
            var pathInfo = null == index ? {} : pathInfos[index] || {};
            var originalPath = pathInfo.Path || (null == index ? null : currentOptions.library.Locations[index]);
            var btnRemovePath = dom.parentWithClass(e.target, "btnRemovePath");
-            if (btnRemovePath) return void onRemoveClick(btnRemovePath, originalPath);
+
+            if (btnRemovePath) {
+                onRemoveClick(btnRemovePath, originalPath);
+                return;
+            }
+
            showDirectoryBrowser(dom.parentWithClass(listItem, "dlg-libraryeditor"), originalPath, pathInfo.NetworkPath);
        }
    }
@ -94,20 +101,23 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
        html += '<h3 class="listItemBodyText">';
        html += pathInfo.Path;
        html += "</h3>";
+
        if (pathInfo.NetworkPath) {
            html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + "</div>";
        }
+
        html += "</div>";
-        html += '<button type="button" is="paper-icon-button-light" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="md-icon">remove_circle</i></button>';
+        html += '<button type="button" is="paper-icon-button-light" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="material-icons">remove_circle</i></button>';
        html += "</div>";
        return html;
    }

    function refreshLibraryFromServer(page) {
-        ApiClient.getVirtualFolders().then(function(result) {
-            var library = result.filter(function(f) {
-                return f.Name === currentOptions.library.Name
+        ApiClient.getVirtualFolders().then(function (result) {
+            var library = result.filter(function (f) {
+                return f.Name === currentOptions.library.Name;
            })[0];
+
            if (library) {
                currentOptions.library = library;
                renderLibrary(page, currentOptions);
@ -117,16 +127,21 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed

    function renderLibrary(page, options) {
        var pathInfos = (options.library.LibraryOptions || {}).PathInfos || [];
-        pathInfos.length || (pathInfos = options.library.Locations.map(function(p) {
-            return {
-                Path: p
-            }
-        }));
+
+        if (!pathInfos.length) {
+            pathInfos = options.library.Locations.map(function (p) {
+                return {
+                    Path: p
+                };
+            });
+        }
+
        if (options.library.CollectionType === 'boxsets') {
            page.querySelector(".folders").classList.add("hide");
        } else {
            page.querySelector(".folders").classList.remove("hide");
        }
+
        page.querySelector(".folderList").innerHTML = pathInfos.map(getFolderHtml).join("");
    }

@ -135,24 +150,31 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
    }

    function showDirectoryBrowser(context, originalPath, networkPath) {
-        require(["directorybrowser"], function(directoryBrowser) {
-            var picker = new directoryBrowser;
+        require(["directorybrowser"], function (directoryBrowser) {
+            var picker = new directoryBrowser();
            picker.show({
-                enableNetworkSharePath: !0,
+                enableNetworkSharePath: true,
                pathReadOnly: null != originalPath,
                path: originalPath,
                networkSharePath: networkPath,
-                callback: function(path, networkSharePath) {
-                    path && (originalPath ? updateMediaLocation(context, originalPath, networkSharePath) : addMediaLocation(context, path, networkSharePath));
+                callback: function (path, networkSharePath) {
+                    if (path) {
+                        if (originalPath) {
+                            updateMediaLocation(context, originalPath, networkSharePath);
+                        } else {
+                            addMediaLocation(context, path, networkSharePath);
+                        }
+                    }
+
                    picker.close();
                }
-            })
-        })
+            });
+        });
    }

    function onToggleAdvancedChange() {
        var dlg = dom.parentWithClass(this, "dlg-libraryeditor");
-        libraryoptionseditor.setAdvancedVisible(dlg.querySelector(".libraryOptions"), this.checked)
+        libraryoptionseditor.setAdvancedVisible(dlg.querySelector(".libraryOptions"), this.checked);
    }

    function initEditor(dlg, options) {
@ -161,7 +183,7 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
        dlg.querySelector(".folderList").addEventListener("click", onListItemClick);
        dlg.querySelector(".chkAdvanced").addEventListener("change", onToggleAdvancedChange);
        dlg.querySelector(".btnSubmit").addEventListener("click", onEditLibrary);
-        libraryoptionseditor.embed(dlg.querySelector(".libraryOptions"), options.library.CollectionType, options.library.LibraryOptions).then(function() {
+        libraryoptionseditor.embed(dlg.querySelector(".libraryOptions"), options.library.CollectionType, options.library.LibraryOptions).then(function () {
            onToggleAdvancedChange.call(dlg.querySelector(".chkAdvanced"));
        });
    }
@ -171,14 +193,15 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
    }

    function editor() {
-        this.show = function(options) {
+        this.show = function (options) {
            var deferred = jQuery.Deferred();
            currentOptions = options;
            currentDeferred = deferred;
            hasChanges = false;
-            var xhr = new XMLHttpRequest;
+            var xhr = new XMLHttpRequest();
            xhr.open("GET", "components/medialibraryeditor/medialibraryeditor.template.html", true);
-            xhr.onload = function(e) {
+
+            xhr.onload = function (e) {
                var template = this.response;
                var dlg = dialogHelper.createDialog({
                    size: "medium-tall",
@ -195,21 +218,20 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
                initEditor(dlg, options);
                dlg.addEventListener("close", onDialogClosed);
                dialogHelper.open(dlg);
-                dlg.querySelector(".btnCancel").addEventListener("click", function() {
+                dlg.querySelector(".btnCancel").addEventListener("click", function () {
                    dialogHelper.close(dlg);
                });
                refreshLibraryFromServer(dlg);
            };
+
            xhr.send();
            return deferred.promise();
-        }
+        };
    }

    var currentDeferred;
    var currentOptions;
-
    var hasChanges = false;
    var isCreating = false;
-
    return editor;
 });
--- a/src/components/medialibraryeditor/medialibraryeditor.template.html
+++ b/src/components/medialibraryeditor/medialibraryeditor.template.html
@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
    <h3 class="formDialogHeaderTitle"></h3>
 </div>

@ -20,7 +20,7 @@
            <div style="display: flex; align-items: center;">
                <h1 style="margin: .5em 0;">${HeadersFolders}</h1>
                <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}">
-                    <i class="md-icon">add</i>
+                    <i class="material-icons">add</i>
                </button>
            </div>
            <div class="paperList folderList" style="margin-bottom:2em;"></div>
--- a/src/components/metadataeditor/metadataeditor.js
+++ b/src/components/metadataeditor/metadataeditor.js
@ -477,7 +477,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
            html += '</div>';

            if (formatString) {
-                html += '<button type="button" is="paper-icon-button-light" class="btnOpenExternalId align-self-flex-end" data-fieldid="' + id + '"><i class="md-icon">open_in_browser</i></button>';
+                html += '<button type="button" is="paper-icon-button-light" class="btnOpenExternalId align-self-flex-end" data-fieldid="' + id + '"><i class="material-icons">open_in_browser</i></button>';
            }
            html += '</div>';

@ -917,7 +917,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
        for (var i = 0; i < items.length; i++) {
            html += '<div class="listItem">';

-            html += '<i class="md-icon listItemIcon" style="background-color:#333;">live_tv</i>';
+            html += '<i class="material-icons listItemIcon" style="background-color:#333;">live_tv</i>';

            html += '<div class="listItemBody">';

@ -927,7 +927,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi

            html += '</div>';

-            html += '<button type="button" is="paper-icon-button-light" data-index="' + i + '" class="btnRemoveFromEditorList autoSize"><i class="md-icon">delete</i></button>';
+            html += '<button type="button" is="paper-icon-button-light" data-index="' + i + '" class="btnRemoveFromEditorList autoSize"><i class="material-icons">delete</i></button>';

            html += '</div>';
        }
@ -948,7 +948,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi

            html += '<div class="listItem">';

-            html += '<i class="md-icon listItemIcon" style="background-color:#333;">person</i>';
+            html += '<i class="material-icons listItemIcon" style="background-color:#333;">person</i>';

            html += '<div class="listItemBody">';
            html += '<button style="text-align:left;" type="button" class="btnEditPerson clearButton" data-index="' + i + '">';
@ -964,7 +964,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
            html += '</button>';
            html += '</div>';

-            html += '<button type="button" is="paper-icon-button-light" data-index="' + i + '" class="btnDeletePerson autoSize"><i class="md-icon">delete</i></button>';
+            html += '<button type="button" is="paper-icon-button-light" data-index="' + i + '" class="btnDeletePerson autoSize"><i class="material-icons">delete</i></button>';

            html += '</div>';
        }
--- a/src/components/metadataeditor/metadataeditor.template.html
+++ b/src/components/metadataeditor/metadataeditor.template.html
@ -1,15 +1,15 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
    <h3 class="formDialogHeaderTitle">
        ${Edit}
    </h3>
    <div style="margin-left: auto;" class="flex align-items-center justify-content-center">
        <button is="emby-button" type="button" class="btnHeaderSave button-accent-flat button-flat hide" tabindex="-1">
-            <i class="md-icon">check</i>
+            <i class="material-icons">check</i>
            <span>${Save}</span>
        </button>
        <button is="paper-icon-button-light" class="btnMore autoSize" tabindex="-1">
-            <i class="md-icon">more_horiz</i>
+            <i class="material-icons">more_horiz</i>
        </button>
    </div>
 </div>
@ -184,7 +184,7 @@
                    ${Genres}
                </h2>
                <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
-                    <i class="md-icon">add</i>
+                    <i class="material-icons">add</i>
                </button>
                <div class="paperList" id="listGenres"></div>
            </div>
@ -193,7 +193,7 @@
                    ${People}
                </h2>
                <button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson" style="margin-left:1em;" title="${Add}">
-                    <i class="md-icon">add</i>
+                    <i class="material-icons">add</i>
                </button>
                <div id="peopleList" class="paperList">
                </div>
@ -203,7 +203,7 @@
                    ${Studios}
                </h2>
                <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
-                    <i class="md-icon">add</i>
+                    <i class="material-icons">add</i>
                </button>
                <div class="paperList" id="listStudios"></div>
            </div>
@ -212,7 +212,7 @@
                    ${Tags}
                </h2>
                <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
-                    <i class="md-icon">add</i>
+                    <i class="material-icons">add</i>
                </button>
                <div class="paperList" id="listTags"></div>
            </div>
--- a/src/components/metadataeditor/personeditor.template.html
+++ b/src/components/metadataeditor/personeditor.template.html
@ -1,5 +1,5 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
    <h3 class="formDialogHeaderTitle">
        ${Edit}
    </h3>
--- 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/multiselect/multiselect.js
+++ b/src/components/multiselect/multiselect.js
@ -126,11 +126,11 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo

            var html = "";

-            html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><i class="md-icon">close</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><i class="material-icons">close</i></button>';
            html += '<h1 class="itemSelectionCount"></h1>';

            var moreIcon = "more_horiz";
-            html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><i class="md-icon">' + moreIcon + '</i></button>';
+            html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><i class="material-icons">' + moreIcon + '</i></button>';

            selectionCommandsPanel.innerHTML = html;

--- 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/navdrawer/navdrawer.js
+++ b/src/components/navdrawer/navdrawer.js
@ -1,6 +1,7 @@
-define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser, dom) {
+define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, dom) {
    "use strict";
-    return function(options) {
+
+    return function (options) {
        function getTouches(e) {
            return e.changedTouches || e.targetTouches || e.touches;
        }
@ -9,14 +10,13 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
            options.target.classList.remove("transition");
            var touches = getTouches(e);
            var touch = touches[0] || {};
-
            menuTouchStartX = touch.clientX;
            menuTouchStartY = touch.clientY;
-            menuTouchStartTime = (new Date).getTime();
+            menuTouchStartTime = new Date().getTime();
        }

        function setVelocity(deltaX) {
-            var time = (new Date).getTime() - (menuTouchStartTime || 0);
+            var time = new Date().getTime() - (menuTouchStartTime || 0);
            velocity = Math.abs(deltaX) / time;
        }

@ -28,21 +28,36 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
            var endY = touch.clientY || 0;
            var deltaX = endX - (menuTouchStartX || 0);
            var deltaY = endY - (menuTouchStartY || 0);
-            setVelocity(deltaX), isOpen && 1 !== dragMode && deltaX > 0 && (dragMode = 2), 0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5 ? (dragMode = 1, scrollContainer.addEventListener("scroll", disableEvent), self.showMask()) : 0 === dragMode && Math.abs(deltaY) >= 5 && (dragMode = 2), 1 === dragMode && (newPos = currentPos + deltaX, self.changeMenuPos())
+            setVelocity(deltaX);
+
+            if (isOpen && 1 !== dragMode && deltaX > 0) {
+                dragMode = 2;
+            }
+
+            if (0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
+                dragMode = 1;
+                scrollContainer.addEventListener("scroll", disableEvent);
+                self.showMask();
+            } else if (0 === dragMode && Math.abs(deltaY) >= 5) {
+                dragMode = 2;
+            }
+
+            if (1 === dragMode) {
+                newPos = currentPos + deltaX;
+                self.changeMenuPos();
+            }
        }

        function onMenuTouchEnd(e) {
            options.target.classList.add("transition");
            scrollContainer.removeEventListener("scroll", disableEvent);
            dragMode = 0;
-
            var touches = getTouches(e);
            var touch = touches[0] || {};
            var endX = touch.clientX || 0;
            var endY = touch.clientY || 0;
            var deltaX = endX - (menuTouchStartX || 0);
            var deltaY = endY - (menuTouchStartY || 0);
-
            currentPos = deltaX;
            self.checkMenuState(deltaX, deltaY);
        }
@ -53,10 +68,12 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
            } else {
                if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
                    isPeeking = true;
+
                    if (e.type === "touchstart") {
                        dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
                        dom.addEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
                    }
+
                    onMenuTouchStart(e);
                }
            }
@ -65,38 +82,52 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
        function onEdgeTouchMove(e) {
            e.preventDefault();
            e.stopPropagation();
-
            onEdgeTouchStart(e);
        }

        function onEdgeTouchEnd(e) {
-            isPeeking && (isPeeking = !1, dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {}), onMenuTouchEnd(e))
+            if (isPeeking) {
+                isPeeking = false;
+                dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
+                onMenuTouchEnd(e);
+            }
        }

        function disableEvent(e) {
-            e.preventDefault(), e.stopPropagation()
+            e.preventDefault();
+            e.stopPropagation();
        }

        function onBackgroundTouchStart(e) {
            var touches = getTouches(e);
            var touch = touches[0] || {};
-            backgroundTouchStartX = touch.clientX, backgroundTouchStartTime = (new Date).getTime()
+            backgroundTouchStartX = touch.clientX;
+            backgroundTouchStartTime = new Date().getTime();
        }

        function onBackgroundTouchMove(e) {
            var touches = getTouches(e);
            var touch = touches[0] || {};
            var endX = touch.clientX || 0;
+
            if (endX <= options.width && self.isVisible) {
                countStart++;
                var deltaX = endX - (backgroundTouchStartX || 0);
-                if (1 === countStart && (startPoint = deltaX), deltaX < 0 && 2 !== dragMode) {
-                    dragMode = 1, newPos = deltaX - startPoint + options.width, self.changeMenuPos();
-                    var time = (new Date).getTime() - (backgroundTouchStartTime || 0);
-                    velocity = Math.abs(deltaX) / time
+
+                if (countStart == 1) {
+                    startPoint = deltaX;
+                }
+                if (deltaX < 0 && dragMode !== 2) {
+                    dragMode = 1;
+                    newPos = deltaX - startPoint + options.width;
+                    self.changeMenuPos();
+                    var time = new Date().getTime() - (backgroundTouchStartTime || 0);
+                    velocity = Math.abs(deltaX) / time;
                }
            }
-            e.preventDefault(), e.stopPropagation()
+
+            e.preventDefault();
+            e.stopPropagation();
        }

        function onBackgroundTouchEnd(e) {
@ -104,13 +135,18 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
            var touch = touches[0] || {};
            var endX = touch.clientX || 0;
            var deltaX = endX - (backgroundTouchStartX || 0);
-            self.checkMenuState(deltaX), countStart = 0
+            self.checkMenuState(deltaX);
+            countStart = 0;
        }

        function onMaskTransitionEnd() {
            var classList = mask.classList;
-            classList.contains("backdrop") || classList.add("hide")
+
+            if (!classList.contains("backdrop")) {
+                classList.add("hide");
+            }
        }
+
        var self;
        var defaults;
        var mask;
@ -123,83 +159,195 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
        var dragMode = 0;
        var scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer");
        scrollContainer.classList.add("scrollY");
-        var TouchMenuLA = function() {
-            self = this, defaults = {
+
+        var TouchMenuLA = function () {
+            self = this;
+            defaults = {
                width: 260,
                handleSize: 10,
-                disableMask: !1,
+                disableMask: false,
                maxMaskOpacity: 0.5
-            }, this.isVisible = !1, this.initialize()
+            };
+            this.isVisible = false;
+            this.initialize();
        };
-        TouchMenuLA.prototype.initElements = function() {
-            options.target.classList.add("touch-menu-la"), options.target.style.width = options.width + "px", options.target.style.left = -options.width + "px", options.disableMask || (mask = document.createElement("div"), mask.className = "tmla-mask hide", document.body.appendChild(mask), dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, {
-                passive: !0
-            }))
+
+        TouchMenuLA.prototype.initElements = function () {
+            options.target.classList.add("touch-menu-la");
+            options.target.style.width = options.width + "px";
+            options.target.style.left = -options.width + "px";
+
+            if (!options.disableMask) {
+                mask = document.createElement("div");
+                mask.className = "tmla-mask hide";
+                document.body.appendChild(mask);
+                dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, {
+                    passive: true
+                });
+            }
        };
+
        var menuTouchStartX;
        var menuTouchStartY;
        var menuTouchStartTime;
        var edgeContainer = document.querySelector(".mainDrawerHandle");
        var isPeeking = false;
-        TouchMenuLA.prototype.animateToPosition = function(pos) {
-            requestAnimationFrame(function() {
-                options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none"
-            })
-        }, TouchMenuLA.prototype.changeMenuPos = function() {
-            newPos <= options.width && this.animateToPosition(newPos)
-        }, TouchMenuLA.prototype.clickMaskClose = function() {
-            mask.addEventListener("click", function() {
-                self.close()
-            })
-        }, TouchMenuLA.prototype.checkMenuState = function(deltaX, deltaY) {
-            velocity >= 0.4 ? deltaX >= 0 || Math.abs(deltaY || 0) >= 70 ? self.open() : self.close() : newPos >= 100 ? self.open() : newPos && self.close()
-        }, TouchMenuLA.prototype.open = function() {
-            this.animateToPosition(options.width), currentPos = options.width, this.isVisible = !0, options.target.classList.add("drawer-open"), self.showMask(), self.invoke(options.onChange)
-        }, TouchMenuLA.prototype.close = function() {
-            this.animateToPosition(0), currentPos = 0, self.isVisible = !1, options.target.classList.remove("drawer-open"), self.hideMask(), self.invoke(options.onChange)
-        }, TouchMenuLA.prototype.toggle = function() {
-            self.isVisible ? self.close() : self.open()
+
+        TouchMenuLA.prototype.animateToPosition = function (pos) {
+            requestAnimationFrame(function () {
+                options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none";
+            });
        };
+
+        TouchMenuLA.prototype.changeMenuPos = function () {
+            if (newPos <= options.width) {
+                this.animateToPosition(newPos);
+            }
+        };
+
+        TouchMenuLA.prototype.clickMaskClose = function () {
+            mask.addEventListener("click", function () {
+                self.close();
+            });
+        };
+
+        TouchMenuLA.prototype.checkMenuState = function (deltaX, deltaY) {
+            if (velocity >= 0.4) {
+                if (deltaX >= 0 || Math.abs(deltaY || 0) >= 70) {
+                    self.open();
+                } else {
+                    self.close();
+                }
+            } else {
+                if (newPos >= 100) {
+                    self.open();
+                } else {
+                    if (newPos) {
+                        self.close();
+                    }
+                }
+            }
+        };
+
+        TouchMenuLA.prototype.open = function () {
+            this.animateToPosition(options.width);
+            currentPos = options.width;
+            this.isVisible = true;
+            options.target.classList.add("drawer-open");
+            self.showMask();
+            self.invoke(options.onChange);
+        };
+
+        TouchMenuLA.prototype.close = function () {
+            this.animateToPosition(0);
+            currentPos = 0;
+            self.isVisible = false;
+            options.target.classList.remove("drawer-open");
+            self.hideMask();
+            self.invoke(options.onChange);
+        };
+
+        TouchMenuLA.prototype.toggle = function () {
+            if (self.isVisible) {
+                self.close();
+            } else {
+                self.open();
+            }
+        };
+
        var backgroundTouchStartX;
        var backgroundTouchStartTime;
-        TouchMenuLA.prototype.showMask = function() {
-            mask.classList.remove("hide"), mask.offsetWidth, mask.classList.add("backdrop")
-        }, TouchMenuLA.prototype.hideMask = function() {
-            mask.classList.remove("backdrop")
-        }, TouchMenuLA.prototype.invoke = function(fn) {
-            fn && fn.apply(self)
+
+        TouchMenuLA.prototype.showMask = function () {
+            mask.classList.remove("hide");
+            mask.offsetWidth;
+            mask.classList.add("backdrop");
        };
+
+        TouchMenuLA.prototype.hideMask = function () {
+            mask.classList.add("hide");
+            mask.classList.remove("backdrop");
+        };
+
+        TouchMenuLA.prototype.invoke = function (fn) {
+            if (fn) {
+                fn.apply(self);
+            }
+        };
+
        var _edgeSwipeEnabled;
-        return TouchMenuLA.prototype.setEdgeSwipeEnabled = function(enabled) {
-            options.disableEdgeSwipe || browser.touch && (enabled ? _edgeSwipeEnabled || (_edgeSwipeEnabled = !0, dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
-                passive: !0
-            }), dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
-                passive: !0
-            }), dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
-                passive: !0
-            })) : _edgeSwipeEnabled && (_edgeSwipeEnabled = !1, dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
-                passive: !0
-            }), dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
-                passive: !0
-            }), dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
-                passive: !0
-            })))
-        }, TouchMenuLA.prototype.initialize = function() {
-            options = Object.assign(defaults, options || {}), browser.edge && (options.disableEdgeSwipe = !0), self.initElements(), browser.touch && (dom.addEventListener(options.target, "touchstart", onMenuTouchStart, {
-                passive: !0
-            }), dom.addEventListener(options.target, "touchmove", onMenuTouchMove, {
-                passive: !0
-            }), dom.addEventListener(options.target, "touchend", onMenuTouchEnd, {
-                passive: !0
-            }), dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, {
-                passive: !0
-            }), dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, {
-                passive: !0
-            }), dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {}), dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, {
-                passive: !0
-            }), dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, {
-                passive: !0
-            })), self.clickMaskClose()
-        }, new TouchMenuLA
-    }
-});
+
+        TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) {
+            if (!options.disableEdgeSwipe) {
+                if (browser.touch) {
+                    if (enabled) {
+                        if (!_edgeSwipeEnabled) {
+                            _edgeSwipeEnabled = true;
+                            dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
+                                passive: true
+                            });
+                            dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
+                                passive: true
+                            });
+                            dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
+                                passive: true
+                            });
+                        }
+                    } else {
+                        if (_edgeSwipeEnabled) {
+                            _edgeSwipeEnabled = false;
+                            dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
+                                passive: true
+                            });
+                            dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
+                                passive: true
+                            });
+                            dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
+                                passive: true
+                            });
+                        }
+                    }
+                }
+            }
+        };
+
+        TouchMenuLA.prototype.initialize = function () {
+            options = Object.assign(defaults, options || {});
+
+            if (browser.edge) {
+                options.disableEdgeSwipe = true;
+            }
+
+            self.initElements();
+
+            if (browser.touch) {
+                dom.addEventListener(options.target, "touchstart", onMenuTouchStart, {
+                    passive: true
+                });
+                dom.addEventListener(options.target, "touchmove", onMenuTouchMove, {
+                    passive: true
+                });
+                dom.addEventListener(options.target, "touchend", onMenuTouchEnd, {
+                    passive: true
+                });
+                dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, {
+                    passive: true
+                });
+                dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, {
+                    passive: true
+                });
+                dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {});
+                dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, {
+                    passive: true
+                });
+                dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, {
+                    passive: true
+                });
+            }
+
+            self.clickMaskClose();
+        };
+
+        return new TouchMenuLA();
+    };
+});
--- a/src/components/nowplayingbar/nowplayingbar.css
+++ b/src/components/nowplayingbar/nowplayingbar.css
@ -16,7 +16,7 @@
 }

 .nowPlayingBar-hidden {
-    transform: translate3d(0,100%,0);
+    transform: translate3d(0, 100%, 0);
 }

 .nowPlayingBarTop {
@ -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/Show More
+++ b/Show More