Merge branch 'master' of https://github.com/jellyfin/jellyfin-web into item-detail-page-

# Conflicts:
#	src/assets/css/librarybrowser.css
#	src/itemdetails.html

.ci/azure-pipelines.yml

@@ -20,24 +20,21 @@ jobs:
 
     steps:
     - task: NodeTool@0
-      displayName: 'Install Node.js'
+      displayName: 'Install Node'
       inputs:
         versionSpec: '10.x'
 
-    - script: |
+    - script: 'yarn install'
-        yarn install
+      displayName: 'Install Dependencies'
-      displayName: 'Install dependencies'
 
-    - script: |
+    - script: 'test -d dist'
-        test -d dist
+      displayName: 'Check Build'
-      displayName: 'Check dist directory'
 
-    - script: |
+    - script: 'yarn pack --filename jellyfin-web.tgz'
-        yarn pack --filename jellyfin-web.tgz
+      displayName: 'Bundle Release'
-      displayName: 'Build package'
 
     - task: PublishPipelineArtifact@1
-      displayName: 'Publish package'
+      displayName: 'Publish Release'
       condition: succeeded()
       inputs:
         targetPath: '$(Build.SourcesDirectory)/jellyfin-web.tgz'
@@ -51,14 +48,12 @@ jobs:
 
     steps:
     - task: NodeTool@0
-      displayName: 'Install Node.js'
+      displayName: 'Install Node'
       inputs:
         versionSpec: '10.x'
 
-    - script: |
+    - script: 'yarn install'
-        yarn install
+      displayName: 'Install Dependencies'
-      displayName: 'Install dependencies'
 
-    - script: |
+    - script: 'yarn run lint'
-        yarn run lint
       displayName: 'Run ESLint'

package.json

@@ -5,14 +5,12 @@
   "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",
     "webpack": "^4.41.0",
     "webpack-cli": "^3.3.9",

postcss.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-    plugins: [
-        require('autoprefixer')
-    ]
-}

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')

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()

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')

src/addplugin.html

@@ -1,10 +1,7 @@
 <div id="addPluginPage" data-role="page" class="page type-interior pluginConfigurationPage" data-backbutton="true">
-
     <div>
         <div class="content-primary">
-
             <div class="readOnlyContent">
-
                 <div class="verticalSection">
                     <div class="sectionTitleContainer flex align-items-center">
                         <h1 class="sectionTitle pluginName"></h1>
@@ -13,9 +10,7 @@
 
                     <p id="tagline" style="font-style: italic;"></p>
                     <p id="pPreviewImage"></p>
-
                     <p id="overview"></p>
-
                 </div>
 
                 <div class="verticalSection">
@@ -27,12 +22,12 @@
                             <select id="selectVersion" name="selectVersion" is="emby-select" label="${LabelSelectVersionToInstall}"></select>
                         </div>
 
-                        <p id="btnInstallDiv" class="hide">
+                        <div id="btnInstallDiv" class="hide">
                             <button is="emby-button" type="submit" id="btnInstall" class="raised button-submit block">
                                 <span>${Install}</span>
                             </button>
                             <div class="fieldDescription">${ServerRestartNeededAfterPluginInstall}</div>
-                        </p>
+                        </div>
                         <p id="nonServerMsg"></p>
                     </form>
                 </div>

src/apikeys.html

@@ -2,9 +2,7 @@
     <div>
         <div class="content-primary">
             <div class="detailSectionHeader">
-                <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
+                <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">${HeaderApiKeys}</h2>
-                    ${HeaderApiKeys}
-                </h2>
                 <button is="emby-button" type="button" class="fab btnNewKey submit" style="margin-left:1em;" title="${ButtonAdd}">
                     <i class="md-icon">add</i>
                 </button>

src/assets/css/dashboard.css

@@ -1,6 +1,8 @@
 .dashboardColumn,
 .dashboardSections {
     flex-direction: column;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal
 }
 
 .dashboardFooter {
@@ -14,6 +16,8 @@
 
 progress {
     appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
     margin: 0;
     background: #ccc !important
 }
@@ -73,17 +77,23 @@ progress[aria-valuenow]:before {
 div[data-role=controlgroup] a[data-role=button] {
     display: inline-block !important;
     margin: 0 !important;
+    -webkit-box-shadow: none !important;
     box-shadow: none !important;
+    -webkit-border-radius: 0;
     border-radius: 0
 }
 
 div[data-role=controlgroup] a[data-role=button]:first-child {
+    -webkit-border-bottom-left-radius: .3125em;
     border-bottom-left-radius: .3125em;
+    -webkit-border-top-left-radius: .3125em;
     border-top-left-radius: .3125em
 }
 
 div[data-role=controlgroup] a[data-role=button]:last-child {
+    -webkit-border-bottom-right-radius: .3125em;
     border-bottom-right-radius: .3125em;
+    -webkit-border-top-right-radius: .3125em;
     border-top-right-radius: .3125em
 }
 
@@ -137,14 +147,23 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .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
 }
 
@@ -153,6 +172,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .dashboardSection {
+    -webkit-flex-shrink: 0;
     flex-shrink: 0;
     margin: 0 0 2em
 }
@@ -168,7 +188,11 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 @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
     }
 
@@ -273,6 +297,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .sessionNowPlayingContent {
+    -webkit-background-size: cover;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
@@ -371,6 +396,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .disabledUser {
+    -webkit-filter: grayscale(100%);
     filter: grayscale(100%)
 }
 
@@ -392,6 +418,9 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 a[data-role=button] {
     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;
@@ -403,21 +432,37 @@ a[data-role=button] {
     background: #292929 !important;
 }
 
-@keyframes rotating {
+@-webkit-keyframes rotating {
     from {
+        -webkit-transform: rotate(0);
         transform: rotate(0)
     }
 
     to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg)
+    }
+}
+
+@keyframes rotating {
+    from {
+        -webkit-transform: rotate(0);
+        transform: rotate(0)
+    }
+
+    to {
+        -webkit-transform: rotate(360deg);
         transform: rotate(360deg)
     }
 }
 
 .rotatingCircle {
+    -webkit-animation: rotating 2s linear infinite;
     animation: rotating 2s linear infinite
 }
 
 .pluginPreviewImg {
+    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
     box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
 }
 

src/assets/css/fonts.css

@@ -4,6 +4,7 @@ html {
 
 html {
     font-size: 93%;
+    -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
 }
 

src/assets/css/librarybrowser.css

@@ -15,6 +15,7 @@
 .headerSelectedPlayer,
 .itemMiscInfo,
 .navMenuOptionText {
+    -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     overflow: hidden
 }
@@ -47,6 +48,8 @@
     z-index: 1;
     margin: 0 !important;
     top: 6.9em !important;
+    -webkit-transition: -webkit-transform .2s ease-out;
+    -o-transition: transform .2s ease-out;
     transition: transform .2s ease-out
 }
 
@@ -55,14 +58,17 @@
 }
 
 .headerUserImage {
+    -webkit-background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
+    -webkit-border-radius: 100em;
     border-radius: 100em;
     display: inline-block
 }
 
 .headerUserButtonRound div {
+    -webkit-border-radius: 100em;
     border-radius: 100em;
     background-size: cover;
     background-repeat: no-repeat;
@@ -70,6 +76,7 @@
 }
 
 .headerButton {
+    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -83,25 +90,35 @@
 }
 
 .pageTitle {
+    display: -webkit-inline-box;
+    display: -webkit-inline-flex;
     display: inline-flex;
     margin: .3em 0 0 .5em;
     height: 1.7em;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center;
+    -webkit-flex-shrink: 1;
     flex-shrink: 1
 }
 
 .headerLeft,
 .skinHeader {
-    display: flex;
+    display: -webkit-box;
+    display: -webkit-flex
 }
 
 .detailButton,
 .skinHeader {
     flex-direction: column;
+    -webkit-flex-direction: column;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal
 }
 
 .pageTitleWithLogo {
     background-position: left center;
+    -webkit-background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     width: 13.2em
@@ -121,7 +138,7 @@
 
 .headerLeft,
 .headerRight {
-    justify-content: center;
+    -webkit-box-align: center
 }
 
 .hiddenViewMenuBar .skinHeader {
@@ -134,10 +151,13 @@
 
 .headerLeft {
     display: flex;
+    -webkit-align-items: center;
     align-items: center;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
     flex-grow: 1;
     overflow: hidden;
-    justify-content: left;
+    justify-content: flex-start;
 }
 
 .sectionTabs {
@@ -145,8 +165,13 @@
 }
 
 .headerRight {
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-align-items: center;
     align-items: center;
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
     justify-content: flex-end
 }
 
@@ -155,19 +180,27 @@
 }
 
 .navMenuOption {
+    display: -webkit-box !important;
+    display: -webkit-flex !important;
     display: flex !important;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center;
     text-decoration: none;
     color: inherit;
     padding: .9em 0 .9em 2.4em !important;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
     flex-grow: 1;
     font-weight: 400 !important;
     margin: 0 !important;
+    -webkit-border-radius: 0 !important;
     border-radius: 0 !important
 }
 
 .navMenuOptionIcon {
     margin-right: 1.2em;
+    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -181,6 +214,8 @@
 }
 
 .dashboardDocument .skinBody {
+    -webkit-transition: left ease-in-out .3s, padding ease-in-out .3s;
+    -o-transition: left ease-in-out .3s, padding ease-in-out .3s;
     transition: left ease-in-out .3s, padding ease-in-out .3s;
     position: absolute;
     top: 0;
@@ -210,7 +245,9 @@
         z-index: inherit !important;
         left: 0 !important;
         top: 0 !important;
+        -webkit-transform: none !important;
         transform: none !important;
+        -webkit-box-shadow: none !important;
         box-shadow: none !important;
         width: 20.205em !important;
         font-size: 94%
@@ -293,6 +330,8 @@
 }
 
 .flexPageTabContent.is-active {
+    display: -webkit-box !important;
+    display: -webkit-flex !important;
     display: flex !important
 }
 
@@ -308,6 +347,7 @@
     margin: 1.5em 0;
     background: #222;
     padding: .8em .8em .8em 3em;
+    -webkit-border-radius: .3em;
     border-radius: .3em;
     position: relative
 }
@@ -366,6 +406,7 @@
 }
 
 .itemBackdrop {
+    -webkit-background-size: cover;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
@@ -468,6 +509,7 @@
     position: absolute;
     top: 14.5%;
     right: 10.5%;
+    -webkit-background-size: contain;
     background-size: contain
 }
 
@@ -498,6 +540,7 @@
 .itemDetailImage {
     width: 100% !important;
     box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
 }
 
 @media all and (max-width:62.5em) {
@@ -528,8 +571,7 @@
     top: 50%;
     left: 50%;
     margin: -2.2em 0 0 -2.2em;
-    border: 2.7px solid rgba(255, 255, 255, .6);
+    padding: 0.4em !important;
-    padding: .38em !important;
     color: rgba(255, 255, 255, .76)
 }
 
@@ -566,6 +608,8 @@
 .detailButton,
 .mainDetailButtons {
     display: flex;
+    display: -webkit-box;
+    display: -webkit-flex
 }
 
 .itemName {
@@ -586,7 +630,10 @@
 
 .mainDetailButtons {
     display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center;
+    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
     margin: 1em 0;
 }
@@ -594,6 +641,7 @@
 .recordingFields button {
     margin-left: 0;
     margin-right: .5em;
+    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -604,7 +652,11 @@
 .detailButton {
     display: flex;
     flex-direction: column;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
     justify-content: center;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center;
     margin: 0 !important;
     padding: .5em .7em !important
@@ -632,9 +684,18 @@
 }
 
 .detailButton-content {
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
     flex-direction: column;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
     justify-content: center;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center
 }
 
@@ -706,14 +767,21 @@
 }
 
 .itemMiscInfo {
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center
 }
 
 @media all and (max-width:31.25em) {
     .mobileDetails .itemMiscInfo {
         text-align: center;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
         justify-content: center
     }
 
@@ -793,6 +861,7 @@
 }
 
 .btnSyncComplete i {
+    -webkit-border-radius: 100em;
     border-radius: 100em
 }
 
@@ -801,9 +870,14 @@
 }
 
 .mediaInfoIcons {
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center;
     margin: 1em 0;
+    -webkit-flex-wrap: wrap;
     flex-wrap: wrap
 }
 
@@ -841,6 +915,7 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 
 .sectionTitleButton {
     margin-left: 1.5em !important;
+    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -850,17 +925,22 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 
 .sectionTitleIconButton {
     margin-left: 1.5em !important;
+    -webkit-flex-shrink: 0;
     flex-shrink: 0;
     font-size: 84% !important;
     padding: .5em !important
 }
 
 .horizontalItemsContainer {
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex
 }
 
 .sectionTitleTextButton {
     margin: 0 !important;
+    display: -webkit-inline-box !important;
+    display: -webkit-inline-flex !important;
     display: inline-flex !important;
     color: inherit !important
 }
@@ -932,6 +1012,8 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 }
 
 .itemsViewSettingsContainer {
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
     justify-content: center
 }
 

src/assets/css/metadataeditor.css

@@ -28,13 +28,17 @@
 
 .jstree-wholerow-hovered {
     background: #38c !important;
+    -webkit-border-radius: 0 !important;
     border-radius: 0 !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
 }

src/assets/css/scrollstyles.css

@@ -1,5 +1,6 @@
 .scrollX {
     overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
     overflow-y: hidden;
     white-space: nowrap;
 }
@@ -9,11 +10,11 @@
 }
 
 .hiddenScrollX, .layout-tv .scrollX {
-    scrollbar-width: none;
+    -ms-overflow-style: none;
 }
 
 .hiddenScrollX-forced {
-    scrollbar-width: none;
+    overflow: -moz-scrollbars-none;
 }
 
 .hiddenScrollX::-webkit-scrollbar, .layout-tv .scrollX::-webkit-scrollbar {
@@ -23,21 +24,25 @@
 
 .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;
+    -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 {

src/assets/css/site.css

@@ -20,12 +20,18 @@ html {
 
 .layout-mobile,
 .layout-tv {
+    -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 {

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,
@@ -12,10 +15,13 @@
 }
 
 .osdHeader {
+    -webkit-transition: opacity .3s ease-out;
+    -o-transition: opacity .3s ease-out;
     transition: opacity .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;
 }
@@ -29,13 +35,17 @@
 }
 
 .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
 }
 
 .chapterThumb {
     background-position: center center;
+    -webkit-background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     border: 0;
@@ -81,12 +91,20 @@
     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 {
@@ -94,35 +112,51 @@
 }
 
 .osdControls {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
     flex-grow: 1
 }
 
 .videoOsdBottom .buttons {
     padding: .25em 0 0;
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center
 }
 
 .osdVolumeSliderContainer {
     width: 9em;
+    -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;
     display: flex;
+    -webkit-align-items: center;
     align-items: center
 }
 
 .osdTimeText {
     margin-left: 1em;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none
 }
 
@@ -136,10 +170,15 @@
     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;
     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,
@@ -149,6 +188,7 @@
 
 .osdMediaInfo {
     display: flex;
+    -webkit-align-items: center;
     align-items: center
 }
 
@@ -157,14 +197,23 @@
 }
 
 .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
 }
 
 .osdMainTextContainer {
+    -webkit-box-align: baseline;
+    -webkit-align-items: baseline;
     align-items: baseline
 }
 
@@ -172,13 +221,28 @@
     margin-left: auto;
 }
 
+@-moz-keyframes spin {
+    100% {
+        -moz-transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes spin {
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
 @keyframes spin {
     100% {
+        -webkit-transform: rotate(360deg);
         transform:rotate(360deg);
     }
 }
 
 .osdMediaStatus .animate {
+    -webkit-animation:spin 4s linear infinite;
+    -moz-animation:spin 4s linear infinite;
     animation:spin 4s linear infinite;
 }
 

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

src/components/backdrop/backdrop.js

@@ -1,4 +1,4 @@
-define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./backdrop'], function (browser, connectionManager, playbackManager, dom) {
+define(['browser', 'connectionManager', 'playbackManager', 'dom', "userSettings", 'css!./backdrop'], function (browser, connectionManager, playbackManager, dom, userSettings) {
     'use strict';
 
     function enableAnimation(elem) {
@@ -236,10 +236,15 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./backdro
         return true;
     }
 
+    function enabled() {
+        return userSettings.enableBackdrops();
+    }
+
     var rotationInterval;
     var currentRotatingImages = [];
     var currentRotationIndex = -1;
     function setBackdrops(items, imageOptions, enableImageRotation) {
+        if (enabled()) {
             var images = getImageUrls(items, imageOptions);
 
             if (images.length) {
@@ -248,6 +253,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./backdro
                 clearBackdrop();
             }
         }
+    }
 
     function startRotation(images, enableImageRotation) {
         if (arraysEqual(images, currentRotatingImages)) {

src/components/cardbuilder/card.css

@@ -18,6 +18,7 @@ button {
     padding: 0;
     display: block;
     color: inherit !important;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none !important;
     cursor: pointer;
     contain: layout style;
@@ -79,6 +80,8 @@ 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;
@@ -146,6 +149,7 @@ button {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
+    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -179,6 +183,7 @@ button {
     margin: 0 !important;
     /* Needed in safari */
     height: 100%;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none !important;
     contain: strict;
 }
@@ -342,6 +347,7 @@ button {
     border: 0 !important;
     padding: 0 !important;
     cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none !important;
     color: inherit;
     vertical-align: middle;

src/components/dialogHelper/dialoghelper.css

@@ -16,6 +16,7 @@
 .dialog {
     margin: 0;
     border-radius: .2em;
+    -webkit-font-smoothing: antialiased;
     border: 0;
     padding: 0;
     will-change: transform, opacity;

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

src/components/filterdialog/style.css

@@ -5,6 +5,7 @@
     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
@@ -28,8 +29,8 @@
 
 @media all and (min-width:400px) {
     .dynamicFilterDialog {
-        width: 300px;
+        width: 20.16em;
-        margin-left: -150px !important;
+        margin-left: -10.08em !important;
         left: 50% !important
     }
 }

src/components/homesections/homesections.css

@@ -13,11 +13,13 @@
 .homeLibraryIcon {
     margin-left: .5em;
     margin-right: .5em;
+    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
 .homeLibraryText {
     white-space: nowrap;
+    -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     overflow: hidden
 }

src/components/htmlvideoplayer/plugin.js

@@ -95,23 +95,19 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
     }
 
     function getMediaStreamAudioTracks(mediaSource) {
-
         return mediaSource.MediaStreams.filter(function (s) {
             return s.Type === 'Audio';
         });
     }
 
     function getMediaStreamTextTracks(mediaSource) {
-
         return mediaSource.MediaStreams.filter(function (s) {
             return s.Type === 'Subtitle';
         });
     }
 
     function zoomIn(elem) {
-
         return new Promise(function (resolve, reject) {
-
             var duration = 240;
             elem.style.animation = 'htmlvideoplayer-zoomin ' + duration + 'ms ease-in normal';
             dom.addEventListener(elem, dom.whichAnimationEvent(), resolve, {
@@ -1429,7 +1425,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                         if (!appHost.supports('htmlvideoautoplay')) {
                             html += '<video class="' + cssClass + '" preload="metadata" autoplay="autoplay" controls="controls" webkit-playsinline playsinline>';
                         } else {
-
                             // Chrome 35 won't play with preload none
                             html += '<video class="' + cssClass + '" preload="metadata" autoplay="autoplay" webkit-playsinline playsinline>';
                         }
@@ -1805,7 +1800,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
     };
 
     HtmlVideoPlayer.prototype.getAspectRatio = function () {
-        return this._currentAspectRatio;
+        return this._currentAspectRatio || "auto";
     };
 
     HtmlVideoPlayer.prototype.getSupportedAspectRatios = function () {

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

src/components/images/style.css

@@ -18,9 +18,21 @@
 
 .lazy-image-fadein {
     opacity: 0;
+    -webkit-animation-duration: .8s;
+    -moz-animation-duration: .8s;
+    -o-animation-duration: .8s;
     animation-duration: .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,.5,1);
+    -moz-animation-timing-function: cubic-bezier(0,0,.5,1);
+    -o-animation-timing-function: cubic-bezier(0,0,.5,1);
     animation-timing-function: cubic-bezier(0,0,.5,1);
 }
 

src/components/indicators/indicators.css

@@ -14,6 +14,7 @@
 
 .indicator {
     border-radius: 100em;
+    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -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;

src/components/itemcontextmenu.js

@@ -70,7 +70,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
                 commands.push({
                     name: globalize.translate("InstantMix"),
                     id: "instantmix",
-                    icon: "shuffle"
+                    icon: "explore"
                 });
             }
         }
@@ -178,7 +178,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
                 commands.push({
                     name: globalize.translate("EditImages"),
                     id: "editimages",
-                    icon: "edit"
+                    icon: "image"
                 });
             }
         }

src/components/listview/listview.css

@@ -35,6 +35,8 @@
 }
 
 .listItem-indexnumberleft {
+    min-width: 2%;
+    text-align: center;
     margin-right: 1em;
 }
 

src/components/loading/loading.css

@@ -7,11 +7,20 @@
 
 .mdlSpinnerActive {
     display: inline-block;
+    -webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
     animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
 }
 
+@-webkit-keyframes mdl-spinner__container-rotate {
+    to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
 @keyframes mdl-spinner__container-rotate {
     to {
+        -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }
@@ -28,6 +37,7 @@
 }
 
 .mdl-spinner__layer-1-active {
+    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
@@ -36,6 +46,7 @@
 }
 
 .mdl-spinner__layer-2-active {
+    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
@@ -44,6 +55,7 @@
 }
 
 .mdl-spinner__layer-3-active {
+    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
@@ -52,39 +64,90 @@
 }
 
 .mdl-spinner__layer-4-active {
+    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
-@keyframes mdl-spinner__fill-unfill-rotate {
+@-webkit-keyframes mdl-spinner__fill-unfill-rotate {
     12.5% {
+        -webkit-transform: rotate(135deg);
         transform: rotate(135deg);
     }
 
     25% {
+        -webkit-transform: rotate(270deg);
         transform: rotate(270deg);
     }
 
     37.5% {
+        -webkit-transform: rotate(405deg);
         transform: rotate(405deg);
     }
 
     50% {
+        -webkit-transform: rotate(540deg);
         transform: rotate(540deg);
     }
 
     62.5% {
+        -webkit-transform: rotate(675deg);
         transform: rotate(675deg);
     }
 
     75% {
+        -webkit-transform: rotate(810deg);
         transform: rotate(810deg);
     }
 
     87.5% {
+        -webkit-transform: rotate(945deg);
         transform: rotate(945deg);
     }
 
     to {
+        -webkit-transform: rotate(1080deg);
+        transform: rotate(1080deg);
+    }
+}
+
+@keyframes mdl-spinner__fill-unfill-rotate {
+    12.5% {
+        -webkit-transform: rotate(135deg);
+        transform: rotate(135deg);
+    }
+
+    25% {
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+    }
+
+    37.5% {
+        -webkit-transform: rotate(405deg);
+        transform: rotate(405deg);
+    }
+
+    50% {
+        -webkit-transform: rotate(540deg);
+        transform: rotate(540deg);
+    }
+
+    62.5% {
+        -webkit-transform: rotate(675deg);
+        transform: rotate(675deg);
+    }
+
+    75% {
+        -webkit-transform: rotate(810deg);
+        transform: rotate(810deg);
+    }
+
+    87.5% {
+        -webkit-transform: rotate(945deg);
+        transform: rotate(945deg);
+    }
+
+    to {
+        -webkit-transform: rotate(1080deg);
         transform: rotate(1080deg);
     }
 }
@@ -98,6 +161,32 @@
 * - https://github.com/Polymer/paper-spinner/issues/9
 * - https://code.google.com/p/chromium/issues/detail?id=436255
 */
+@-webkit-keyframes mdl-spinner__layer-1-fade-in-out {
+    from {
+        opacity: 0.99;
+    }
+
+    25% {
+        opacity: 0.99;
+    }
+
+    26% {
+        opacity: 0;
+    }
+
+    89% {
+        opacity: 0;
+    }
+
+    90% {
+        opacity: 0.99;
+    }
+
+    100% {
+        opacity: 0.99;
+    }
+}
+
 @keyframes mdl-spinner__layer-1-fade-in-out {
     from {
         opacity: 0.99;
@@ -124,6 +213,28 @@
     }
 }
 
+@-webkit-keyframes mdl-spinner__layer-2-fade-in-out {
+    from {
+        opacity: 0;
+    }
+
+    15% {
+        opacity: 0;
+    }
+
+    25% {
+        opacity: 0.99;
+    }
+
+    50% {
+        opacity: 0.99;
+    }
+
+    51% {
+        opacity: 0;
+    }
+}
+
 @keyframes mdl-spinner__layer-2-fade-in-out {
     from {
         opacity: 0;
@@ -146,6 +257,28 @@
     }
 }
 
+@-webkit-keyframes mdl-spinner__layer-3-fade-in-out {
+    from {
+        opacity: 0;
+    }
+
+    40% {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 0.99;
+    }
+
+    75% {
+        opacity: 0.99;
+    }
+
+    76% {
+        opacity: 0;
+    }
+}
+
 @keyframes mdl-spinner__layer-3-fade-in-out {
     from {
         opacity: 0;
@@ -168,6 +301,28 @@
     }
 }
 
+@-webkit-keyframes mdl-spinner__layer-4-fade-in-out {
+    from {
+        opacity: 0;
+    }
+
+    65% {
+        opacity: 0;
+    }
+
+    75% {
+        opacity: 0.99;
+    }
+
+    90% {
+        opacity: 0.99;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
 @keyframes mdl-spinner__layer-4-fade-in-out {
     from {
         opacity: 0;
@@ -211,6 +366,7 @@
     border-color: inherit;
     border-bottom-color: transparent !important;
     border-radius: 50%;
+    -webkit-animation: none;
     animation: none;
     position: absolute;
     top: 0;
@@ -221,47 +377,91 @@
 
 .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);
     }
 }

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();

src/components/navdrawer/navdrawer.css

@@ -9,20 +9,29 @@
 .touch-menu-la {
     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
 }
 
 .touch-menu-la.transition {
+    -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 {
+    -webkit-box-shadow: 2px 0 12px rgba(0, 0, 0, .4);
     box-shadow: 2px 0 12px rgba(0, 0, 0, .4)
 }
 
 .scrollContainer {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
     flex-grow: 1
 }
 
@@ -32,6 +41,8 @@
     background-color: #000;
     opacity: 0;
     z-index: 1098;
+    -webkit-transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
+    -o-transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
     transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
     will-change: opacity;
     background-color: rgba(0, 0, 0, .3)

src/components/remotecontrol/remotecontrol.css

@@ -1,5 +1,10 @@
 .nowPlayingInfoContainer {
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: row;
     flex-direction: row
 }
 
@@ -7,6 +12,26 @@
     text-align: center
 }
 
+.btnArrowUp{
+    border-radius: 40% 40% 10% 10%;
+}
+
+.btnArrowLeft{
+    border-radius: 40% 10% 10% 40%;
+}
+
+.btnArrowRight{
+    border-radius: 10% 40% 40% 10%;
+}
+
+.btnArrowDown{
+    border-radius: 10% 10% 40% 40%;
+}
+
+.btnOk{
+    border-radius: 10%;
+}
+
 .nowPlayingPageTitle {
     margin: 0 0 .5em .5em
 }
@@ -16,20 +41,28 @@
 }
 
 .nowPlayingInfoButtons {
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center;
+    -webkit-flex-wrap: wrap;
     flex-wrap: wrap
 }
 
 .nowPlayingInfoControls,
 .nowPlayingTime {
     display: flex;
+    display: -webkit-box;
+    display: -webkit-flex
 }
 
 .nowPlayingPageImageContainer {
     width: 20%;
     margin-right: .25em;
     position: relative;
+    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -40,9 +73,16 @@
 }
 
 .nowPlayingInfoControls {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
     flex-grow: 1;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
     flex-direction: column;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
     justify-content: center
 }
 
@@ -51,15 +91,25 @@
     left: 0;
     right: 0;
     width: 100%;
+    -webkit-box-shadow: 0 0 1.9vh #000;
     box-shadow: 0 0 1.9vh #000;
     border: .1em solid #222;
     user-drag: none;
     user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none
 }
 
 @media all and (orientation:portrait) and (max-width:50em) {
     .nowPlayingInfoContainer {
+        -webkit-box-orient: vertical !important;
+        -webkit-box-direction: normal !important;
+        -webkit-flex-direction: column !important;
         flex-direction: column !important;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
         align-items: center
     }
 
@@ -73,6 +123,8 @@
     }
 
     .nowPlayingInfoButtons {
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
         justify-content: center
     }
 
@@ -100,20 +152,33 @@
 
 .nowPlayingTime {
     display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center;
     margin: 0 1em
 }
 
 .nowPlayingSecondaryButtons {
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center;
+    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
     justify-content: center
 }
 
 @media all and (min-width:50em) {
     .nowPlayingSecondaryButtons {
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
         flex-grow: 1;
+        -webkit-box-pack: end;
+        -webkit-justify-content: flex-end;
         justify-content: flex-end
     }
 }
@@ -130,11 +195,13 @@
 
 .smallBackdropPosterItem .cardOverlayInner>div {
     white-space: nowrap;
+    -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     overflow: hidden
 }
 
 .playlistIndexIndicatorImage {
+    -webkit-background-size: initial initial !important;
     background-size: initial !important;
     background-image: url(assets/img/equalizer.gif) !important;
 }
@@ -151,6 +218,9 @@
     .nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
         display: none !important
     }
+    .navigationSection .collapseContent i{
+        font-size: 4em;
+    }
 }
 
 @media all and (max-width:47em) {

src/components/remotecontrol/remotecontrol.js

@@ -215,23 +215,12 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 context.querySelector(".sendTextSection").classList.add("hide");
             }
 
-            if (!currentPlayer.isLocalPlayer) {
+            if (-1 != supportedCommands.indexOf("Select") && !currentPlayer.isLocalPlayer) {
                 context.querySelector(".navigationSection").classList.remove("hide");
             } else {
                 context.querySelector(".navigationSection").classList.add("hide");
             }
 
-            buttonVisible(context.querySelector(".btnArrowUp"), -1 != supportedCommands.indexOf("MoveUp"));
-            buttonVisible(context.querySelector(".btnArrowLeft"), -1 != supportedCommands.indexOf("MoveDown"));
-            buttonVisible(context.querySelector(".btnArrowRight"), -1 != supportedCommands.indexOf("MoveRight"));
-            buttonVisible(context.querySelector(".btnArrowDown"), -1 != supportedCommands.indexOf("MoveLeft"));
-            buttonVisible(context.querySelector(".btnOk"), -1 != supportedCommands.indexOf("Select"));
-            buttonVisible(context.querySelector(".btnBack"), -1 != supportedCommands.indexOf("Back"));
-            buttonVisible(context.querySelector(".btnContextMenu"), -1 != supportedCommands.indexOf("ToggleContextMenu"));
-            buttonVisible(context.querySelector(".btnShowSearch"), -1 != supportedCommands.indexOf("GoToSearch"));
-            buttonVisible(context.querySelector(".bthShowSettings"), -1 != supportedCommands.indexOf("GoToSettings"));
-            buttonVisible(context.querySelector(".btnGoHome"), -1 != supportedCommands.indexOf("GoHome"));
-
             buttonVisible(context.querySelector(".btnStop"), null != item);
             buttonVisible(context.querySelector(".btnNextTrack"), null != item);
             buttonVisible(context.querySelector(".btnPreviousTrack"), null != item);

src/components/skinManager.js

@@ -34,15 +34,12 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
             id: "dark",
             isDefault: true,
             isDefaultServerDashboard: true
-        }, {
-            name: "Emby",
-            id: "emby"
         }, {
             name: "Light",
             id: "light"
         }, {
             name: "Purple Haze",
-            id: "purple-haze"
+            id: "purplehaze"
         }, {
             name: "Windows Media Center",
             id: "wmc"

src/components/slideshow/style.css

@@ -41,6 +41,9 @@
     height: auto;
     max-width: 100%;
     max-height: 100%;
+    -ms-transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     position: absolute;
     left: 50%;

src/components/subtitlesync/subtitlesync.css

@@ -40,6 +40,8 @@
     margin-right: 1%;
     top: 2.5em;
     height: 1.4em;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
     flex-grow: 1;
     border-radius: .3em;
     z-index: 1; 

src/components/upnextdialog/upnextdialog.css

@@ -11,6 +11,7 @@
     background-color: rgba(0, 0, 0, 0.7);
     color: #fff;
     user-select: none;
+    -webkit-touch-callout: none;
 }
 
 .upNextDialog-hidden {
@@ -66,4 +67,8 @@
     border: 0;
     user-drag: none;
     user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
 }

src/controllers/itemdetailpage.js

@@ -1,4 +1,4 @@
-define(["loading", "appRouter", "layoutManager", "userSettings", "connectionManager", "cardBuilder", "datetime", "mediaInfo", "backdrop", "listView", "itemContextMenu", "itemHelper", "dom", "indicators", "apphost", "imageLoader", "libraryMenu", "globalize", "browser", "events", "scrollHelper", "playbackManager", "libraryBrowser", "scrollStyles", "emby-itemscontainer", "emby-checkbox", "emby-button", "emby-playstatebutton", "emby-ratingbutton", "emby-scroller", "emby-select"], function (loading, appRouter, layoutManager, userSettings, connectionManager, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, dom, indicators, appHost, imageLoader, libraryMenu, globalize, browser, events, scrollHelper, playbackManager, libraryBrowser) {
+define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuilder", "datetime", "mediaInfo", "backdrop", "listView", "itemContextMenu", "itemHelper", "dom", "indicators", "apphost", "imageLoader", "libraryMenu", "globalize", "browser", "events", "scrollHelper", "playbackManager", "libraryBrowser", "scrollStyles", "emby-itemscontainer", "emby-checkbox", "emby-button", "emby-playstatebutton", "emby-ratingbutton", "emby-scroller", "emby-select"], function (loading, appRouter, layoutManager, connectionManager, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, dom, indicators, appHost, imageLoader, libraryMenu, globalize, browser, events, scrollHelper, playbackManager, libraryBrowser) {
     "use strict";
 
     function getPromise(apiClient, params) {
@@ -445,19 +445,13 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
         }
     }
 
-    function enabled() {
-        return userSettings.enableBackdrops();
-    }
-
     function renderBackdrop(page, item, apiClient) {
-        if (enabled()) {
         if (dom.getWindowSize().innerWidth >= 1000) {
             backdrop.setBackdrops([item]);
         } else {
             backdrop.clear();
         }
     }
-    }
 
     function renderDetailPageBackdrop(page, item, apiClient) {
         var imgUrl;

src/controllers/livetvstatus.js

@@ -187,16 +187,12 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
         switch (providerId = providerId.toLowerCase()) {
             case "m3u":
                 return "M3U";
-
             case "hdhomerun":
-                return "HDHomerun";
+                return "HDHomeRun";
-
             case "hauppauge":
                 return "Hauppauge";
-
             case "satip":
                 return "DVB";
-
             default:
                 return "Unknown";
         }
@@ -206,13 +202,8 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
         switch (providerId = providerId.toLowerCase()) {
             case "schedulesdirect":
                 return "Schedules Direct";
-
             case "xmltv":
-                return "Xml TV";
+                return "XMLTV";
-
-            case "emby":
-                return "Emby Guide";
-
             default:
                 return "Unknown";
         }
@@ -222,12 +213,8 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
         switch (providerId = providerId.toLowerCase()) {
             case "xmltv":
                 return "livetvguideprovider.html?type=xmltv";
-
             case "schedulesdirect":
                 return "livetvguideprovider.html?type=schedulesdirect";
-
-            case "emby":
-                return "livetvguideprovider.html?type=emby";
         }
     }
 
@@ -238,7 +225,7 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
             id: "SchedulesDirect"
         });
         menuItems.push({
-            name: "Xml TV",
+            name: "XMLTV",
             id: "xmltv"
         });
 

src/controllers/movies/moviegenres.js

@@ -114,7 +114,10 @@ define(["layoutManager", "loading", "libraryBrowser", "cardBuilder", "lazyLoader
                         shape: getPortraitShape(),
                         scalable: true,
                         overlayMoreButton: true,
-                        allowBottomPadding: false
+                        allowBottomPadding: true,
+                        showTitle: true,
+                        centerText: true,
+                        showYear: true
                     });
                 }
                 if (result.Items.length >= query.Limit) {

src/dashboard.html

@@ -105,10 +105,8 @@
                             </div>
                         </div>
                     </div>
-
                 </div>
             </div>
-
         </div>
 
         <div class="dashboardFooter">
@@ -118,5 +116,4 @@
             </div>
         </div>
     </div>
-
 </div>

src/dashboardgeneral.html

@@ -1,10 +1,7 @@
 <div id="dashboardGeneralPage" data-role="page" class="page type-interior dashboardHomePage">
-
     <div>
         <div class="content-primary">
-
             <form class="dashboardGeneralForm">
-
                 <div class="verticalSection">
                     <div class="sectionTitleContainer flex align-items-center">
                         <h2 class="sectionTitle">${TabSettings}</h2>
@@ -31,9 +28,7 @@
                             <input is="emby-checkbox" type="checkbox" id="chkAutoRunWebApp" />
                             <span>${LaunchWebAppOnStartup}</span>
                         </label>
-                        <div class="fieldDescription checkboxFieldDescription">
+                        <div class="fieldDescription checkboxFieldDescription">${LaunchWebAppOnStartupHelp}</div>
-                            ${LaunchWebAppOnStartupHelp}
-                        </div>
                     </div>
                 </div>
 
@@ -94,7 +89,6 @@
                     </button>
                 </div>
             </form>
-
         </div>
     </div>
 </div>

src/device.html

@@ -1,11 +1,7 @@
 <div id="devicePage" data-role="page" class="page type-interior devicesPage noSecondaryNavPage">
-
     <div>
         <div class="content-primary">
-
-
             <form class="deviceForm">
-
                 <div class="verticalSection verticalSection-extrabottompadding">
                     <div class="sectionTitleContainer flex align-items-center">
                         <h2 class="sectionTitle reportedName"></h2>
@@ -18,10 +14,11 @@
                     </div>
                 </div>
                 <div>
-                    <button is="emby-button" type="submit" class="raised button-submit block"><span>${ButtonSave}</span></button>
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${ButtonSave}</span>
+                    </button>
                 </div>
             </form>
-
         </div>
     </div>
 </div>

src/devices.html

@@ -7,9 +7,7 @@
                     <a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/devices.html">${Help}</a>
                 </div>
             </div>
-
+            <div is="emby-itemscontainer" class="devicesList vertical-wrap" data-multiselect="false"></div>
-            <div is="emby-itemscontainer" class="devicesList vertical-wrap" data-multiselect="false">
-            </div>
         </div>
     </div>
 </div>

src/dlnasettings.html

@@ -8,7 +8,7 @@
                 <div class="verticalSection">
                     <div class="sectionTitleContainer flex align-items-center">
                         <h2 class="sectionTitle">${TabSettings}</h2>
-                        <a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/administration/connectivity.html#DLNA">${Help}</a>
+                        <a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/administration/connectivity.html#DLNA">${Help}</a>
                     </div>
                 </div>
 

src/elements/emby-button/emby-button.css

@@ -9,6 +9,9 @@
     font-family: inherit;
     color: inherit;
     outline-width: 0;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
     user-select: none;
     cursor: pointer;
     z-index: 0;
@@ -21,6 +24,8 @@
     outline: none !important;
     position: relative;
     font-weight: 600;
+    /* Disable webkit tap highlighting */
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     text-decoration: none;
     /* Not crazy about this but it normalizes heights between anchors and buttons */
     line-height: 1.35;
@@ -94,6 +99,9 @@
     font-size: inherit;
     font-family: inherit;
     color: inherit;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
     user-select: none;
     cursor: pointer;
     z-index: 0;
@@ -110,6 +118,8 @@
     position: relative;
     overflow: hidden;
     border-radius: 50%;
+    /* Disable webkit tap highlighting */
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     justify-content: center;
     transform-origin: center;
     transition: 0.2s;

src/elements/emby-checkbox/emby-checkbox.css

@@ -38,6 +38,9 @@
     margin: 0;
     padding: 0;
     opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
     appearance: none;
     border: none;
 }
@@ -121,3 +124,13 @@
         padding: 0;
     }
 }
+
+@-webkit-keyframes repaintChrome {
+    from {
+        padding: 0;
+    }
+
+    to {
+        padding: 0;
+    }
+}

src/elements/emby-input/emby-input.css

@@ -10,8 +10,10 @@
     font-weight: inherit;
     padding: .4em .25em;
     /* Prevent padding from causing width overflow */
+    -webkit-box-sizing: border-box;
     box-sizing: border-box;
     outline: none !important;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     width: 100%;
 }
 
@@ -33,5 +35,6 @@
 }
 
 .emby-input-iconbutton {
+    -webkit-align-self: flex-end;
     align-self: flex-end;
 }

src/elements/emby-radio/emby-radio.css

@@ -27,6 +27,9 @@
     margin: 0;
     padding: 0;
     opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
     appearance: none;
     border: none;
 }
@@ -67,13 +70,17 @@
     cursor: pointer;
     transition-duration: 0.28s;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-property: -webkit-transform;
     transition-property: transform;
+    transition-property: transform, -webkit-transform;
+    -webkit-transform: scale3d(0, 0, 0);
     transform: scale3d(0, 0, 0);
     border-radius: 50%;
     background: #00a4dc;
 }
 
 .mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
+    -webkit-transform: scale3d(1, 1, 1);
     transform: scale3d(1, 1, 1);
 }
 

src/elements/emby-select/emby-select.css

@@ -12,6 +12,7 @@
     /* Prevent padding from causing width overflow */
     box-sizing: border-box;
     outline: none !important;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     width: 100%;
 }
 
@@ -19,6 +20,8 @@
         background: none !important;
         border-color: transparent !important;
         color: inherit !important;
+        -webkit-appearance: none;
+        -moz-appearance: none;
         appearance: none;
     }
 
@@ -38,6 +41,7 @@
 
 .emby-select-focusscale {
     transition: transform 180ms ease-out !important;
+    -webkit-transform-origin: center center;
     transform-origin: center center;
 }
 
@@ -73,6 +77,7 @@
 }
 
 .emby-select-withcolor {
+    -webkit-appearance: none;
     appearance: none;
     border-radius: .2em;
 }

src/elements/emby-slider/emby-slider.css

@@ -1,21 +1,32 @@
 _:-ms-input-placeholder {
     appearance: none;
+    -ms-appearance: none;
     height: 2.223em;
     margin: 0;
 }
 
 .mdl-slider {
     width: 100%;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
     appearance: none;
     height: 150%;/*150% is needed, else ie and edge won't display the thumb properly*/
     background: transparent;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
     outline: 0;
     color: #00a4dc;
+    -webkit-align-self: center;
+    -ms-flex-item-align: center;
     align-self: center;
     z-index: 1;
     cursor: pointer;
     margin: 0;
+    /* Disable webkit tap highlighting */
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     display: block;
 }
 
@@ -59,7 +70,7 @@ _:-ms-input-placeholder {
     }
 
     .mdl-slider::-webkit-slider-thumb {
-        appearance: none;
+        -webkit-appearance: none;
         width: 1.2em;
         height: 1.2em;
         box-sizing: border-box;
@@ -98,7 +109,7 @@ _:-ms-input-placeholder {
 }
 
 .mdl-slider::-ms-thumb {
-    appearance: none;
+    -webkit-appearance: none;
     width: 1.8em;
     height: 1.8em;
     box-sizing: border-box;

src/elements/emby-textarea/emby-textarea.css

@@ -13,6 +13,7 @@
     /* Prevent padding from causing width overflow */
     box-sizing: border-box;
     outline: none !important;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     width: 100%;
 }
 

src/elements/emby-toggle/emby-toggle.css

@@ -9,6 +9,10 @@
     margin: 0;
     padding: 0;
     overflow: visible;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
     flex-direction: row-reverse;
     justify-content: flex-end;
@@ -24,6 +28,9 @@
     margin: 0;
     padding: 0;
     opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
     appearance: none;
     border: none;
 }
@@ -82,6 +89,7 @@
     position: absolute;
     top: 50%;
     left: 50%;
+    -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     display: inline-block;
     box-sizing: border-box;

src/encodingsettings.html

@@ -22,6 +22,7 @@
                     </select>
                     <div class="fieldDescription">${LabelHardwareAccelerationTypeHelp}</div>
                 </div>
+
                 <div class="inputContainer hide fldVaapiDevice">
                     <input is="emby-input" type="text" id="txtVaapiDevice" label="${LabelVaapiDevice}" />
                     <div class="fieldDescription">${LabelVaapiDeviceHelp}</div>
@@ -142,7 +143,9 @@
                 </div>
 
                 <div>
-                    <button is="emby-button" type="submit" class="raised button-submit block"><span>${ButtonSave}</span></button>
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${ButtonSave}</span>
+                    </button>
                 </div>
             </form>
         </div>

src/forgotpassword.html

@@ -1,9 +1,6 @@
 <div data-role="page" id="forgotPasswordPage" class="page standalonePage forgotPasswordPage">
-
     <div>
-
         <form class="forgotPasswordForm" style="text-align: center; margin: 0 auto;">
-
             <div style="text-align: left;">
                 <h1>${HeaderForgotPassword}</h1>
 
@@ -23,6 +20,5 @@
                 </div>
             </div>
         </form>
-
     </div>
 </div>

src/forgotpasswordpin.html

@@ -1,9 +1,6 @@
 <div data-role="page" class="page standalonePage forgotPasswordPinPage">
-
     <div>
-
         <form class="forgotPasswordPinForm" style="text-align: center; margin: 0 auto;">
-
             <div style="text-align: left;">
                 <h2>${HeaderPasswordReset}</h2>
 
@@ -22,6 +19,5 @@
                 </div>
             </div>
         </form>
-
     </div>
 </div>

src/itemdetails.html

@@ -45,7 +45,7 @@
 
                 <button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton">
                     <div class="detailButton-content">
-                        <i class="md-icon detailButton-icon">shuffle</i>
+                        <i class="md-icon detailButton-icon">explore</i>
                         <div class="detailButton-text">${HeaderInstantMix}</div>
                     </div>
                 </button>

src/livetvguideprovider.html

@@ -1,11 +1,7 @@
 <div id="liveTvGuideProviderPage" data-role="page" class="page type-interior liveTvSettingsPage">
-
     <div>
         <div class="content-primary">
-
+            <div class="readOnlyContent providerTemplate" style="margin-top: 2em;"></div>
-            <div class="readOnlyContent providerTemplate" style="margin-top: 2em;">
-
-            </div>
         </div>
     </div>
 </div>

src/login.html

@@ -1,11 +1,7 @@
 <div id="loginPage" data-role="page" class="page standalonePage" data-backbutton="false">
-
     <div class="padded-left padded-right padded-bottom-page">
-
         <form class="manualLoginForm hide" style="margin: 0 auto;">
-
             <h1 style="margin-top:1em;text-align: left;">${HeaderPleaseSignIn}</h1>
-
             <div style="height:0; overflow: hidden;">
                 <input type="text" name="fakeusernameremembered" tabindex="-1" />
                 <input type="password" name="fakepasswordremembered" tabindex="-1" />
@@ -27,6 +23,7 @@
             <button is="emby-button" type="submit" class="raised button-submit block">
                 <span>${ButtonSignIn}</span>
             </button>
+
             <div style="margin-top:.5em;">
                 <button is="emby-button" type="button" class="raised cancel block btnCancel">
                     <span>${ButtonCancel}</span>
@@ -56,6 +53,5 @@
 
             <p class="disclaimer" style="text-align: center; margin-top: 2em;"></p>
         </div>
-
     </div>
 </div>

src/manifest.json

@@ -1,5 +1,4 @@
 {
-
     "name": "Jellyfin",
     "description": "Jellyfin: the Free Software Media System.",
     "lang": "en-US",
@@ -8,7 +7,8 @@
     "theme_color": "#101010",
     "background_color": "#101010",
     "display": "standalone",
-    "icons": [{
+    "icons": [
+        {
             "sizes": "72x72",
             "src": "touchicon72.png",
             "type": "image/png"

src/networking.html

@@ -5,7 +5,7 @@
                 <div class="verticalSection verticalSection-extrabottompadding">
                     <div class="sectionTitleContainer flex align-items-center">
                         <h2 class="sectionTitle">${TabNetworking}</h2>
-                        <a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.org/docs/general/administration/networking.html">${Help}</a>
+                        <a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/administration/networking.html">${Help}</a>
                     </div>
 
                     <div class="inputContainer">

src/nowplaying.html

@@ -72,22 +72,24 @@
                 </div>
             </div>
         </div>
-        <div class="navigationSection">
-            <br />
         <div>
-                <button is="paper-icon-button-light" class="btnArrowUp btnCommand autoSize raised" title="${ButtonArrowUp}" data-command="MoveUp">
+            <div class="navigationSection">
+                <div is="emby-collapse" title="${HeaderNavigation}">
+                    <div class="collapseContent">
+                        <div>
+                            <button is="paper-icon-button-light" class="btnArrowUp btnCommand autoSize button-submit" title="${ButtonArrowUp}" data-command="MoveUp">
                                 <i class="md-icon">keyboard_arrow_up</i>
                             </button>
                         </div>
                         <br />
                         <div>
-                <button is="paper-icon-button-light" class="btnArrowLeft btnCommand autoSize raised" title="${ButtonArrowLeft}" data-command="MoveLeft">
+                            <button is="paper-icon-button-light" class="btnArrowLeft btnCommand autoSize button-submit" title="${ButtonArrowLeft}" data-command="MoveLeft">
                                 <i class="md-icon">keyboard_arrow_left</i>
                             </button>
-                <button is="paper-icon-button-light" class="btnOk btnCommand autoSize raised" title="${ButtonOk}" data-command="Select">
+                            <button is="paper-icon-button-light" class="btnOk btnCommand autoSize button-submit" title="${ButtonOk}" data-command="Select">
                                 <i class="md-icon">keyboard_return</i>
                             </button>
-                <button is="paper-icon-button-light" class="btnArrowRight btnCommand autoSize raised" title="${ButtonArrowRight}" data-command="MoveRight">
+                            <button is="paper-icon-button-light" class="btnArrowRight btnCommand autoSize button-submit" title="${ButtonArrowRight}" data-command="MoveRight">
                                 <i class="md-icon">keyboard_arrow_right</i>
                             </button>
                         </div>
@@ -96,7 +98,7 @@
                             <button is="paper-icon-button-light" class="btnBack btnCommand autoSize" title="${ButtonBack}" data-command="Back">
                                 <i class="md-icon">arrow_back</i>
                             </button>
-                <button is="paper-icon-button-light" class="btnArrowDown btnCommand autoSize raised" title="${ButtonArrowDown}" data-command="MoveDown">
+                            <button is="paper-icon-button-light" class="btnArrowDown btnCommand autoSize button-submit" title="${ButtonArrowDown}" data-command="MoveDown">
                                 <i class="md-icon">keyboard_arrow_down</i>
                             </button>
                             <button is="paper-icon-button-light" class="btnContextMenu btnCommand autoSize" title="${ButtonInfo}" data-command="ToggleContextMenu">
@@ -116,6 +118,9 @@
                             </button>
                         </div>
                     </div>
+                </div>
+            </div>
+        </div>
         <div>
             <div class="sendMessageSection">
                 <div is="emby-collapse" title="${HeaderSendMessage}">

src/scheduledtask.html

@@ -1,7 +1,6 @@
 <div id="scheduledTaskPage" data-role="page" class="page type-interior scheduledTasksConfigurationPage">
     <div>
         <div class="content-primary">
-
             <div class="verticalSection">
                 <div class="sectionTitleContainer flex align-items-center">
                     <h2 class="sectionTitle taskName"></h2>
@@ -12,9 +11,7 @@
 
             <div class="readOnlyContent">
                 <div>
-                    <h2 style="vertical-align: middle; display: inline-block;">
+                    <h2 style="vertical-align: middle; display: inline-block;">${HeaderTaskTriggers}</h2>
-                        ${HeaderTaskTriggers}
-                    </h2>
                     <button is="emby-button" type="button" class="fab fab-mini btnAddTrigger submit" style="margin-left: 1em;" title="${ButtonAddScheduledTaskTrigger}">
                         <i class="md-icon">add</i>
                     </button>

src/scheduledtasks.html

@@ -1,5 +1,4 @@
 <div id="scheduledTasksPage" data-role="page" class="page type-interior scheduledTasksConfigurationPage">
-
     <style>
         .taskProgressOuter {
             height: 6px;
@@ -15,7 +14,6 @@
     </style>
     <div>
         <div class="content-primary">
-
             <div class="divScheduledTasks readOnlyContent"></div>
         </div>
     </div>

src/scripts/browserdeviceprofile.js

@@ -6,15 +6,12 @@ define(['browser'], function (browser) {
     }
 
     function canPlayH265(videoTestElement, options) {
-
         if (browser.tizen || browser.orsay || browser.xboxOne || browser.web0s || options.supportsHevc) {
             return true;
         }
 
         var userAgent = navigator.userAgent.toLowerCase();
-
         if (browser.chromecast) {
-
             var isChromecastUltra = userAgent.indexOf('aarch64') !== -1;
             if (isChromecastUltra) {
                 return true;
@@ -31,7 +28,6 @@ define(['browser'], function (browser) {
 
     var _supportsTextTracks;
     function supportsTextTracks() {
-
         if (browser.tizen || browser.orsay) {
             return true;
         }
@@ -46,15 +42,14 @@ define(['browser'], function (browser) {
 
     var _canPlayHls;
     function canPlayHls(src) {
-
         if (_canPlayHls == null) {
             _canPlayHls = canPlayNativeHls() || canPlayHlsWithMSE();
         }
+
         return _canPlayHls;
     }
 
     function canPlayNativeHls() {
-
         if (browser.tizen || browser.orsay) {
             return true;
         }
@@ -77,8 +72,23 @@ define(['browser'], function (browser) {
         return false;
     }
 
-    function canPlayAudioFormat(format) {
+    function supportsAc3(videoTestElement) {
+        if (browser.edgeUwp || browser.tizen || browser.orsay || browser.web0s) {
+            return true;
+        }
 
+        return videoTestElement.canPlayType('audio/mp4; codecs="ac-3"').replace(/no/, '');
+    }
+
+    function supportsEac3(videoTestElement) {
+        if (browser.tizen || browser.orsay || browser.web0s) {
+            return true;
+        }
+
+        return videoTestElement.canPlayType('audio/mp4; codecs="ec-3"').replace(/no/, '');
+    }
+
+    function canPlayAudioFormat(format) {
         var typeString;
 
         if (format === 'flac') {
@@ -97,14 +107,12 @@ define(['browser'], function (browser) {
             }
         } else if (format === 'opus') {
             typeString = 'audio/ogg; codecs="opus"';
-
             if (document.createElement('audio').canPlayType(typeString).replace(/no/, '')) {
                 return true;
             }
 
             return false;
         } else if (format === 'mp2') {
-
             // For now
             return false;
         }
@@ -113,14 +121,6 @@ define(['browser'], function (browser) {
             typeString = 'audio/webm';
         } else if (format === 'mp2') {
             typeString = 'audio/mpeg';
-        } else if (format === 'ogg' || format === 'oga') {
-
-            // chrome says probably, but seeing failures
-            if (browser.chrome) {
-                return false;
-            }
-            typeString = 'audio/' + format;
-
         } else {
             typeString = 'audio/' + format;
         }
@@ -133,7 +133,6 @@ define(['browser'], function (browser) {
     }
 
     function testCanPlayMkv(videoTestElement) {
-
         if (browser.tizen || browser.orsay || browser.web0s) {
             return true;
         }
@@ -147,7 +146,6 @@ define(['browser'], function (browser) {
 
         // Unfortunately there's no real way to detect mkv support
         if (browser.chrome) {
-
             // Not supported on opera tv
             if (browser.operaTv) {
                 return false;
@@ -162,7 +160,6 @@ define(['browser'], function (browser) {
         }
 
         if (browser.edgeUwp) {
-
             return true;
         }
 
@@ -174,17 +171,15 @@ define(['browser'], function (browser) {
     }
 
     function supportsMpeg2Video() {
-        return browser.orsay || browser.tizen || browser.edgeUwp || browser.web0s;
+        return browser.tizen || browser.orsay || browser.web0s || browser.edgeUwp;
     }
 
     function supportsVc1() {
-        return browser.orsay || browser.tizen || browser.edgeUwp || browser.web0s;
+        return browser.tizen || browser.orsay || browser.web0s || browser.edgeUwp;
     }
 
     function getFlvMseDirectPlayProfile() {
-
         var videoAudioCodecs = ['aac'];
-
         if (!browser.edge && !browser.msie) {
             videoAudioCodecs.push('mp3');
         }
@@ -198,13 +193,11 @@ define(['browser'], function (browser) {
     }
 
     function getDirectPlayProfileForVideoContainer(container, videoAudioCodecs, videoTestElement, options) {
-
         var supported = false;
         var profileContainer = container;
         var videoCodecs = [];
 
         switch (container) {
-
             case 'asf':
                 supported = browser.tizen || browser.orsay || browser.edgeUwp;
                 videoAudioCodecs = [];
@@ -279,16 +272,12 @@ define(['browser'], function (browser) {
     }
 
     function getMaxBitrate() {
-
         return 120000000;
     }
 
     function getGlobalMaxVideoBitrate() {
-
         var userAgent = navigator.userAgent.toLowerCase();
-
         if (browser.chromecast) {
-
             var isChromecastUltra = userAgent.indexOf('aarch64') !== -1;
             if (isChromecastUltra) {
                 return null;
@@ -319,27 +308,9 @@ define(['browser'], function (browser) {
                     (browser.tizen && isTizenFhd ? 20000000 : null)));
     }
 
-    function supportsAc3(videoTestElement) {
-
-        if (browser.edgeUwp || browser.tizen || browser.orsay || browser.web0s) {
-            return true;
-        }
-
-        return (videoTestElement.canPlayType('audio/mp4; codecs="ac-3"').replace(/no/, '') && !browser.osx && !browser.iOS);
-    }
-
-    function supportsEac3(videoTestElement) {
-
-        if (browser.tizen || browser.orsay || browser.web0s) {
-            return true;
-        }
-
-        return videoTestElement.canPlayType('audio/mp4; codecs="ec-3"').replace(/no/, '');
-    }
-
     return function (options) {
-
         options = options || {};
+
         var physicalAudioChannels = options.audioChannels || (browser.tv || browser.ps4 || browser.xboxOne ? 6 : 2);
 
         var bitrateSetting = getMaxBitrate();
@@ -417,7 +388,6 @@ define(['browser'], function (browser) {
 
             // PS4 fails to load HLS with mp3 audio
             if (!browser.ps4) {
-
                 // mp3 encoder only supports 2 channels, so only make that preferred if we're only requesting 2 channels
                 // Also apply it for chromecast because it no longer supports AAC 5.1
                 if (physicalAudioChannels <= 2) {
@@ -425,14 +395,15 @@ define(['browser'], function (browser) {
                 }
             }
         }
-        if (canPlayAacVideoAudio) {
 
+        if (canPlayAacVideoAudio) {
             if (videoAudioCodecs.indexOf('aac') === -1) {
                 videoAudioCodecs.push('aac');
             }
 
             hlsVideoAudioCodecs.push('aac');
         }
+
         if (supportsMp3VideoAudio) {
             // PS4 fails to load HLS with mp3 audio
             if (!browser.ps4) {
@@ -525,6 +496,7 @@ define(['browser'], function (browser) {
         if (canPlayVp8) {
             mp4VideoCodecs.push('vp8');
         }
+
         if (canPlayVp9) {
             mp4VideoCodecs.push('vp9');
         }
@@ -563,20 +535,17 @@ define(['browser'], function (browser) {
         ['opus', 'mp3', 'mp2', 'aac', 'flac', 'alac', 'webma', 'wma', 'wav', 'ogg', 'oga'].filter(canPlayAudioFormat).forEach(function (audioFormat) {
 
             if (audioFormat === 'mp2') {
-
                 profile.DirectPlayProfiles.push({
                     Container: 'mp2,mp3',
                     Type: 'Audio',
                     AudioCodec: audioFormat
                 });
             } else if (audioFormat === 'mp3') {
-
                 profile.DirectPlayProfiles.push({
                     Container: audioFormat,
                     Type: 'Audio',
                     AudioCodec: audioFormat
                 });
-
             } else {
                 profile.DirectPlayProfiles.push({
                     Container: audioFormat === 'webma' ? 'webma,webm' : audioFormat,
@@ -586,7 +555,6 @@ define(['browser'], function (browser) {
 
             // aac also appears in the m4a container
             if (audioFormat === 'aac' || audioFormat === 'alac') {
-
                 profile.DirectPlayProfiles.push({
                     Container: 'm4a',
                     AudioCodec: audioFormat,
@@ -619,7 +587,6 @@ define(['browser'], function (browser) {
 
         if (canPlayHls() && browser.enableHlsAudio !== false) {
             profile.TranscodingProfiles.push({
-
                 // hlsjs, edge, and android all seem to require ts container
                 Container: !canPlayNativeHls() || browser.edge || browser.android ? 'ts' : 'aac',
                 Type: 'Audio',
@@ -636,7 +603,6 @@ define(['browser'], function (browser) {
         // But for static (offline sync), it will be just fine.
         // Prioritize aac higher because the encoder can accept more channels than mp3
         ['aac', 'mp3', 'opus', 'wav'].filter(canPlayAudioFormat).forEach(function (audioFormat) {
-
             profile.TranscodingProfiles.push({
                 Container: audioFormat,
                 Type: 'Audio',
@@ -648,7 +614,6 @@ define(['browser'], function (browser) {
         });
 
         ['opus', 'mp3', 'aac', 'wav'].filter(canPlayAudioFormat).forEach(function (audioFormat) {
-
             profile.TranscodingProfiles.push({
                 Container: audioFormat,
                 Type: 'Audio',
@@ -804,7 +769,8 @@ define(['browser'], function (browser) {
                     Condition: 'LessThanEqual',
                     Property: 'VideoLevel',
                     Value: maxH264Level.toString()
-                }]
+                }
+            ]
         });
 
         if (!browser.edgeUwp && !browser.tizen && !browser.orsay && !browser.web0s) {
@@ -888,7 +854,6 @@ define(['browser'], function (browser) {
         // External vtt or burn in
         profile.SubtitleProfiles = [];
         if (supportsTextTracks()) {
-
             profile.SubtitleProfiles.push({
                 Format: 'vtt',
                 Method: 'External'
@@ -896,7 +861,6 @@ define(['browser'], function (browser) {
         }
 
         profile.ResponseProfiles = [];
-
         profile.ResponseProfiles.push({
             Type: 'Video',
             Container: 'm4v',

src/scripts/librarymenu.js

@@ -108,8 +108,10 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
             headerCastButton.addEventListener("click", onCastButtonClicked);
         }
 
+        if (layoutManager.mobile) {
             initHeadRoom(skinHeader);
         }
+    }
 
     function onCastButtonClicked() {
         var btn = this;
@@ -424,7 +426,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
         return getToolsMenuHtml(apiClient).then(function (toolsMenuHtml) {
             var html = "";
             html += '<a class="adminDrawerLogo clearLink" is="emby-linkbutton" href="home.html">';
-            html += '<img src="assets/img/logo.png" />';
+            html += '<img src="assets/img/icon-transparent.png" />';
             html += "</a>";
             html += toolsMenuHtml;
             navDrawerScrollContainer.innerHTML = html;

src/scripts/routes.js

@@ -16,44 +16,72 @@ define([
 
     function defineRoute(newRoute) {
         var path = newRoute.path;
-        console.log("Defining route: " + path);
+        console.log("defining route: " + path);
         newRoute.dictionary = "core";
         Emby.Page.addRoute(path, newRoute);
     }
 
-    console.log("Defining core routes");
+    console.log("defining core routes");
 
     defineRoute({
         path: "/addplugin.html",
         autoFocus: false,
         roles: "admin",
-        controller: "addpluginpage"
+        controller: "dashboard/plugins/add"
     });
     defineRoute({
-        path: "/autoorganizelog.html",
+        path: "/mypreferencesmenu.html",
-        roles: "admin"
-    });
-    defineRoute({
-        path: "/channelsettings.html",
         autoFocus: false,
-        roles: "admin"
+        transition: "fade",
+        controller: "user/menu"
+    });
+    defineRoute({
+        path: "/myprofile.html",
+        autoFocus: false,
+        transition: "fade",
+        controller: "user/profile"
     });
     defineRoute({
         path: "/addserver.html",
         autoFocus: false,
         anonymous: true,
         startup: true,
-        controller: "addserver"
+        controller: "auth/addserver"
     });
+    defineRoute({
+        path: "/mypreferencesdisplay.html",
+        autoFocus: false,
+        transition: "fade",
+        controller: "user/display"
+    });
+    defineRoute({
+        path: "/mypreferenceshome.html",
+        autoFocus: false,
+        transition: "fade",
+        controller: "user/home"
+    });
+    defineRoute({
+        path: "/mypreferencesplayback.html",
+        autoFocus: false,
+        transition: "fade",
+        controller: "user/playback"
+    });
+    defineRoute({
+        path: "/mypreferencessubtitles.html",
+        autoFocus: false,
+        transition: "fade",
+        controller: "user/subtitles"
+    });
+
     defineRoute({
         path: "/dashboard.html",
         autoFocus: false,
         roles: "admin",
-        controller: "dashboardpage"
+        controller: "dashboard/dashboard"
     });
     defineRoute({
         path: "/dashboardgeneral.html",
-        controller: "dashboardgeneral",
+        controller: "dashboard/general",
         autoFocus: false,
         roles: "admin"
     });
@@ -61,7 +89,7 @@ define([
         path: "/networking.html",
         autoFocus: false,
         roles: "admin",
-        controller: "networking"
+        controller: "dashboard/networking"
     });
     defineRoute({
         path: "/devices.html",
@@ -108,14 +136,14 @@ define([
         path: "/forgotpassword.html",
         anonymous: true,
         startup: true,
-        controller: "forgotpassword"
+        controller: "auth/forgotpassword"
     });
     defineRoute({
         path: "/forgotpasswordpin.html",
         autoFocus: false,
         anonymous: true,
         startup: true,
-        controller: "forgotpasswordpin"
+        controller: "auth/forgotpasswordpin"
     });
     defineRoute({
         path: "/home.html",
@@ -191,19 +219,14 @@ define([
     defineRoute({
         path: "/log.html",
         roles: "admin",
-        controller: "logpage"
+        controller: "dashboard/logs"
     });
     defineRoute({
         path: "/login.html",
         autoFocus: false,
         anonymous: true,
         startup: true,
-        controller: "loginpage"
+        controller: "auth/login"
-    });
-    defineRoute({
-        path: "/metadataadvanced.html",
-        autoFocus: false,
-        roles: "admin"
     });
     defineRoute({
         path: "/metadataimages.html",
@@ -229,57 +252,21 @@ define([
         autoFocus: false,
         transition: "fade"
     });
-    defineRoute({
-        path: "/mypreferencesmenu.html",
-        autoFocus: false,
-        transition: "fade",
-        controller: "user/menu"
-    });
-    defineRoute({
-        path: "/myprofile.html",
-        autoFocus: false,
-        transition: "fade",
-        controller: "user/profile"
-    });
-    defineRoute({
-        path: "/mypreferencesdisplay.html",
-        autoFocus: false,
-        transition: "fade",
-        controller: "user/display"
-    });
-    defineRoute({
-        path: "/mypreferenceshome.html",
-        autoFocus: false,
-        transition: "fade",
-        controller: "user/home"
-    });
-    defineRoute({
-        path: "/mypreferencesplayback.html",
-        autoFocus: false,
-        transition: "fade",
-        controller: "user/playback"
-    });
-    defineRoute({
-        path: "/mypreferencessubtitles.html",
-        autoFocus: false,
-        transition: "fade",
-        controller: "user/subtitles"
-    });
     defineRoute({
         path: "/notificationsetting.html",
         autoFocus: false,
         roles: "admin",
-        controller: "notificationsetting"
+        controller: "dashboard/notifications/notification"
     });
     defineRoute({
         path: "/notificationsettings.html",
-        controller: "notificationsettings",
+        controller: "dashboard/notifications/notifications",
         autoFocus: false,
         roles: "admin"
     });
     defineRoute({
         path: "/nowplaying.html",
-        controller: "nowplayingpage",
+        controller: "playback/nowplaying",
         autoFocus: false,
         transition: "fade",
         fullscreen: true,
@@ -296,25 +283,25 @@ define([
         path: "/availableplugins.html",
         autoFocus: false,
         roles: "admin",
-        controller: "availableplugins"
+        controller: "dashboard/plugins/available"
     });
     defineRoute({
         path: "/installedplugins.html",
         autoFocus: false,
         roles: "admin",
-        controller: "installedplugins"
+        controller: "dashboard/plugins/installed"
     });
     defineRoute({
         path: "/scheduledtask.html",
         autoFocus: false,
         roles: "admin",
-        controller: "scheduledtaskpage"
+        controller: "dashboard/scheduledtasks/scheduledtask"
     });
     defineRoute({
         path: "/scheduledtasks.html",
         autoFocus: false,
         roles: "admin",
-        controller: "scheduledtaskspage"
+        controller: "dashboard/scheduledtasks/scheduledtasks"
     });
     defineRoute({
         path: "/search.html",
@@ -325,7 +312,7 @@ define([
         autoFocus: false,
         anonymous: true,
         startup: true,
-        controller: "selectserver"
+        controller: "auth/selectserver"
     });
     defineRoute({
         path: "/serveractivity.html",
@@ -345,11 +332,6 @@ define([
         roles: "admin",
         controller: "streamingsettings"
     });
-    defineRoute({
-        path: "/support.html",
-        autoFocus: false,
-        roles: "admin"
-    });
     defineRoute({
         path: "/tv.html",
         autoFocus: false,
@@ -391,17 +373,18 @@ define([
         roles: "admin",
         controller: "userprofilespage"
     });
+
     defineRoute({
         path: "/wizardremoteaccess.html",
         autoFocus: false,
         anonymous: true,
-        controller: "wizardremoteaccess"
+        controller: "wizard/remoteaccess"
     });
     defineRoute({
         path: "/wizardfinish.html",
         autoFocus: false,
         anonymous: true,
-        controller: "wizardfinishpage"
+        controller: "wizard/finish"
     });
     defineRoute({
         path: "/wizardlibrary.html",
@@ -413,24 +396,25 @@ define([
         path: "/wizardsettings.html",
         autoFocus: false,
         anonymous: true,
-        controller: "wizardsettings"
+        controller: "wizard/settings"
     });
     defineRoute({
         path: "/wizardstart.html",
         autoFocus: false,
         anonymous: true,
-        controller: "wizardstart"
+        controller: "wizard/start"
     });
     defineRoute({
         path: "/wizarduser.html",
-        controller: "wizarduserpage",
+        controller: "wizard/user",
         autoFocus: false,
         anonymous: true
     });
+
     defineRoute({
         path: "/videoosd.html",
         transition: "fade",
-        controller: "videoosd",
+        controller: "playback/videoosd",
         autoFocus: false,
         type: "video-osd",
         supportsThemeMedia: true,
@@ -444,6 +428,7 @@ define([
         enableContentQueryString: true,
         roles: "admin"
     });
+
     defineRoute({
         path: "/",
         isDefaultRoute: true,

src/serveractivity.html

@@ -2,12 +2,10 @@
     <div>
         <div class="content-primary">
             <div class="verticalSection">
-                <h2 class="sectionTitle">
+                <h2 class="sectionTitle"></h2>
-                </h2>
             </div>
             <div class="readOnlyContent">
-                <div class="paperList activityItems" data-activitylimit="100">
+                <div class="paperList activityItems" data-activitylimit="100"></div>
-                </div>
             </div>
         </div>
     </div>

src/strings/el.json

@@ -1228,5 +1228,5 @@
     "ButtonAddImage": "Προσθήκη Εικόνας",
     "BoxRear": "Κουτί(πίσω)",
     "BookLibraryHelp": "Ήχος και βιβλία υποστηρίζονται.Ελέγξτε τον {0}ονομαστικό οδηγό βιβλίων{1}.",
-    "AuthProviderHelp": "Επιλέξτε ένα Πάροχο Επαλήθευσης για να επαληθεύσετε το κωδικό του χρήστη."
+    "AuthProviderHelp": "Επιλέξτε ένα Πάροχο Επαλήθευσης για να επαληθεύσετε το κωδικό αυτού του χρήστη."
 }

src/strings/en-gb.json

@@ -83,7 +83,7 @@
     "Art": "Art",
     "AsManyAsPossible": "As many as possible",
     "Ascending": "Ascending",
-    "AspectRatio": "Aspect ratio",
+    "AspectRatio": "Aspect Ratio",
     "AttributeNew": "New",
     "Audio": "Audio",
     "AuthProviderHelp": "Select an Authentication Provider to be used to authenticate this user's password.",
@@ -565,7 +565,7 @@
     "ReplaceExistingImages": "Replace existing images",
     "ReplaceAllMetadata": "Replace all metadata",
     "RepeatOne": "Repeat one",
-    "RepeatMode": "Repeat mode",
+    "RepeatMode": "Repeat Mode",
     "RepeatEpisodes": "Repeat episodes",
     "RepeatAll": "Repeat all",
     "Repeat": "Repeat",
@@ -1459,5 +1459,8 @@
     "HeaderFavoritePeople": "Favourite People",
     "FetchingData": "Fetching additional data",
     "ButtonAddImage": "Add Image",
-    "OptionRandom": "Random"
+    "OptionRandom": "Random",
+    "SelectAdminUsername": "Please select a username for the admin account.",
+    "ButtonSplit": "Split",
+    "HeaderNavigation": "Navigation"
 }

src/strings/en-us.json

@@ -36,7 +36,7 @@
     "Artists": "Artists",
     "AsManyAsPossible": "As many as possible",
     "Ascending": "Ascending",
-    "AspectRatio": "Aspect ratio",
+    "AspectRatio": "Aspect Ratio",
     "AttributeNew": "New",
     "Audio": "Audio",
     "AuthProviderHelp": "Select an Authentication Provider to be used to authenticate this user's password.",
@@ -408,6 +408,7 @@
     "HeaderMyDevice": "My Device",
     "HeaderMyMedia": "My Media",
     "HeaderMyMediaSmall": "My Media (small)",
+    "HeaderNavigation": "Navigation",
     "HeaderNewApiKey": "New API Key",
     "HeaderNewDevices": "New Devices",
     "HeaderNextEpisodePlayingInValue": "Next Episode Playing in {0}",
@@ -1258,7 +1259,7 @@
     "Repeat": "Repeat",
     "RepeatAll": "Repeat all",
     "RepeatEpisodes": "Repeat episodes",
-    "RepeatMode": "Repeat mode",
+    "RepeatMode": "Repeat Mode",
     "RepeatOne": "Repeat one",
     "ReplaceAllMetadata": "Replace all metadata",
     "ReplaceExistingImages": "Replace existing images",
@@ -1282,6 +1283,7 @@
     "SearchForMissingMetadata": "Search for missing metadata",
     "SearchForSubtitles": "Search for Subtitles",
     "SearchResults": "Search Results",
+    "SelectAdminUsername": "Please select a username for the admin account.",
     "SendMessage": "Send message",
     "Series": "Series",
     "SeriesCancelled": "Series cancelled.",

src/strings/es.json

@@ -1,7 +1,7 @@
 {
     "AccessRestrictedTryAgainLater": "El acceso está restringido actualmente. Por favor, inténtalo más tarde.",
     "Add": "Añadir",
-    "AddItemToCollectionHelp": "Agregue elementos a las colecciones buscando en ellos y utilizando sus menús con el botón derecho del ratón o pulsando en los menús para agregarlos a una colección.",
+    "AddItemToCollectionHelp": "Agregue elementos a las colecciones buscándolos y haciendo clic con el botón derecho o tocando los menús para agregarlos a una colección.",
     "AddToCollection": "Añadir a la colección",
     "AddToPlaylist": "Añadir a la lista de reproducción",
     "AddedOnValue": "Añadido {0}",
@@ -1459,5 +1459,7 @@
     "FetchingData": "Obteniendo datos adicionales",
     "ButtonAddImage": "Añadir imagen",
     "HeaderFavoritePeople": "Personas favoritas",
-    "OptionRandom": "Aleatorio"
+    "OptionRandom": "Aleatorio",
+    "SelectAdminUsername": "Por favor seleccione un nombre de usuario para la cuenta de administrador.",
+    "ButtonSplit": "Dividir"
 }

src/strings/fr.json

@@ -1454,5 +1454,6 @@
     "LabelBaseUrlHelp": "Vous pouvez ajouter un sous-répertoire personalisé ici pour accéder au serveur depuis une URL plus exclusive.",
     "HeaderFavoritePeople": "Personnes préférées",
     "OptionRandom": "Aléatoire",
-    "ButtonSplit": "Découper"
+    "ButtonSplit": "Séparer",
+    "SelectAdminUsername": "Veuillez choisir un nom d'utilisateur pour le compte administrateur."
 }

src/strings/ko.json

@@ -1253,7 +1253,7 @@
     "DisplayMissingEpisodesWithinSeasons": "시즌 내 누락된 에피소드 표시",
     "EnableBackdrops": "배경",
     "EnableBackdropsHelp": "라이브러리를 탐색하는 동안 일부 페이지의 배경을 표시합니다.",
-    "ErrorAddingXmlTvFile": "XmlTV 파일에 액세스하는 동안 오류가 발생했습니다. 파일이 존재하는지 확인한 후 다시 시도하십시오.",
+    "ErrorAddingXmlTvFile": "XMLTV 파일에 액세스하는 동안 오류가 발생했습니다. 파일이 존재하는지 확인 후 다시 시도하십시오.",
     "ErrorDeletingItem": "Jellyfin 서버에서 항목을 제거하는 중에 오류가 발생했습니다. Jellyfin 서버가 미디어 폴더에 대해 쓰기 권한이 있는지 확인한 후 다시 시도하십시오.",
     "HeaderConfigureRemoteAccess": "원격 접근 구성",
     "HeaderCastAndCrew": "배역 및 제작진",
@@ -1280,5 +1280,11 @@
     "ErrorAddingMediaPathToVirtualFolder": "미디어 경로를 추가하는 데에 오류가 발생했습니다. 경로를 다시 확인하거나 Jellyfin 서버가 해당 경로에 접근할 수 있는지 확인해 주세요.",
     "ErrorGettingTvLineups": "TV 구성을 다운로드 하는 중에 오류가 발생하였습니다. 정보가 맞는지 확인한 후 다시 시도해 주세요.",
     "BoxRear": "상자 (후면)",
-    "Absolute": "절대"
+    "Absolute": "절대",
+    "LabelDropShadow": "하단 그림자:",
+    "LabelDiscNumber": "디스크 번호:",
+    "Identify": "식별자",
+    "HeaderMoreLikeThis": "비슷한 작품",
+    "DirectorsValue": "감독: {0}",
+    "ButtonSplit": "나누기"
 }