diff --git a/.ci/azure-pipelines.yml b/.ci/azure-pipelines.yml index 0d6b018e07..1b16b94b62 100644 --- a/.ci/azure-pipelines.yml +++ b/.ci/azure-pipelines.yml @@ -57,3 +57,7 @@ jobs: - script: 'yarn run lint' displayName: 'Run ESLint' + + - script: | + yarn run stylelint + displayName: 'Run stylelint' diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000000..93e3592099 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,143 @@ +{ + "plugins": [ + "stylelint-no-browser-hacks/lib", + ], + "rules": { + "at-rule-empty-line-before": [ "always", { + except: [ + "blockless-after-same-name-blockless", + "first-nested", + ], + ignore: ["after-comment"], + } ], + "at-rule-name-case": "lower", + "at-rule-name-space-after": "always-single-line", + "at-rule-no-unknown": true, + "at-rule-semicolon-newline-after": "always", + "block-closing-brace-empty-line-before": "never", + "block-closing-brace-newline-after": "always", + "block-closing-brace-newline-before": "always-multi-line", + "block-closing-brace-space-before": "always-single-line", + "block-no-empty": true, + "block-opening-brace-newline-after": "always-multi-line", + "block-opening-brace-space-after": "always-single-line", + "block-opening-brace-space-before": "always", + "color-hex-case": "lower", + "color-hex-length": "short", + "color-no-invalid-hex": true, + "comment-empty-line-before": [ "always", { + except: ["first-nested"], + ignore: ["stylelint-commands"], + } ], + "comment-no-empty": true, + "comment-whitespace-inside": "always", + "custom-property-empty-line-before": [ "always", { + except: [ + "after-custom-property", + "first-nested", + ], + ignore: [ + "after-comment", + "inside-single-line-block", + ], + } ], + "declaration-bang-space-after": "never", + "declaration-bang-space-before": "always", + "declaration-block-no-duplicate-properties": [ + true, + { + ignore: ["consecutive-duplicates-with-different-values"] + } + ], + "declaration-block-no-shorthand-property-overrides": true, + "declaration-block-semicolon-newline-after": "always-multi-line", + "declaration-block-semicolon-space-after": "always-single-line", + "declaration-block-semicolon-space-before": "never", + "declaration-block-single-line-max-declarations": 1, + "declaration-block-trailing-semicolon": "always", + "declaration-colon-newline-after": "always-multi-line", + "declaration-colon-space-after": "always-single-line", + "declaration-colon-space-before": "never", + "font-family-no-duplicate-names": true, + "function-calc-no-invalid": true, + "function-calc-no-unspaced-operator": true, + "function-comma-newline-after": "always-multi-line", + "function-comma-space-after": "always-single-line", + "function-comma-space-before": "never", + "function-linear-gradient-no-nonstandard-direction": true, + "function-max-empty-lines": 0, + "function-name-case": "lower", + "function-parentheses-newline-inside": "always-multi-line", + "function-parentheses-space-inside": "never-single-line", + "function-whitespace-after": "always", + "indentation": 4, + "keyframe-declaration-no-important": true, + "length-zero-no-unit": true, + "max-empty-lines": 1, + "media-feature-colon-space-after": "always", + "media-feature-colon-space-before": "never", + "media-feature-name-case": "lower", + "media-feature-name-no-unknown": true, + "media-feature-parentheses-space-inside": "never", + "media-feature-range-operator-space-after": "always", + "media-feature-range-operator-space-before": "always", + "media-query-list-comma-newline-after": "always-multi-line", + "media-query-list-comma-space-after": "always-single-line", + "media-query-list-comma-space-before": "never", + "no-descending-specificity": true, + "no-duplicate-at-import-rules": true, + "no-duplicate-selectors": true, + "no-empty-source": true, + "no-eol-whitespace": true, + "no-extra-semicolons": true, + "no-invalid-double-slash-comments": true, + "no-missing-end-of-source-newline": true, + "number-leading-zero": "always", + "number-no-trailing-zeros": true, + "plugin/no-browser-hacks": true, + "property-case": "lower", + "property-no-unknown": [ + true, + { + "ignoreProperties": [ + "user-drag" + ] + } + ], + "rule-empty-line-before": [ "always-multi-line", { + except: ["first-nested"], + ignore: ["after-comment"], + } ], + "selector-attribute-brackets-space-inside": "never", + "selector-attribute-operator-space-after": "never", + "selector-attribute-operator-space-before": "never", + "selector-combinator-space-after": "always", + "selector-combinator-space-before": "always", + "selector-descendant-combinator-no-non-space": true, + "selector-list-comma-newline-after": "always", + "selector-list-comma-space-before": "never", + "selector-max-empty-lines": 0, + "selector-pseudo-class-case": "lower", + "selector-pseudo-class-no-unknown": true, + "selector-pseudo-class-parentheses-space-inside": "never", + "selector-pseudo-element-case": "lower", + "selector-pseudo-element-colon-notation": "double", + "selector-pseudo-element-no-unknown": [ + true, + { + "ignorePseudoElements": [ + "cue" + ] + } + ], + "selector-type-case": "lower", + "selector-type-no-unknown": true, + "string-no-newline": true, + "unit-case": "lower", + "unit-no-unknown": true, + "value-list-comma-newline-after": "always-multi-line", + "value-list-comma-space-after": "always-single-line", + "value-list-comma-space-before": "never", + "value-list-max-empty-lines": 0, + } +} \ No newline at end of file diff --git a/package.json b/package.json index 76d01b1841..02ae28eaa7 100644 --- a/package.json +++ b/package.json @@ -5,15 +5,17 @@ "repository": "https://github.com/jellyfin/jellyfin-web", "license": "GPL-2.0-or-later", "devDependencies": { - "autoprefixer": "^9.7.3", "clean-webpack-plugin": "^3.0.0", "copy-webpack-plugin": "^5.1.1", "css-loader": "^2.1.0", "eslint": "^5.16.0", "file-loader": "^3.0.1", "html-webpack-plugin": "^3.2.0", - "postcss-loader": "^3.0.0", "style-loader": "^0.23.1", + "stylelint": "^13.0.0", + "stylelint-config-rational-order": "^0.1.2", + "stylelint-no-browser-hacks": "^1.2.1", + "stylelint-order": "^4.0.0", "webpack": "^4.41.0", "webpack-cli": "^3.3.9", "webpack-concat-plugin": "^3.0.0", @@ -28,14 +30,15 @@ "howler": "^2.1.2", "jquery": "^3.4.1", "jstree": "^3.3.7", + "libass-wasm": "^2.1.1", "libjass": "^0.11.0", + "material-design-icons-iconfont": "^5.0.1", "native-promise-only": "^0.8.0-a", "requirejs": "^2.3.5", "resize-observer-polyfill": "^1.5.1", "shaka-player": "^2.5.5", "sortablejs": "^1.9.0", "swiper": "^3.4.2", - "libass-wasm": "^2.1.1", "webcomponents.js": "^0.7.24", "whatwg-fetch": "^1.1.1" }, @@ -51,13 +54,13 @@ "Chrome 53", "Chrome 56", "Chrome 63", - "Explorer 11", "Firefox ESR" ], "scripts": { "serve": "webpack-dev-server --config webpack.dev.js --open", "build": "webpack --config webpack.prod.js", "lint": "eslint \"src\"", + "stylelint": "stylelint src/**/*.css", "prepare": "webpack --config webpack.prod.js" } } diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index a26de7e9f1..0000000000 --- a/postcss.config.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - plugins: [ - require('autoprefixer') - ] -} diff --git a/scripts/scdup.py b/scripts/scdup.py new file mode 100644 index 0000000000..468e31f14a --- /dev/null +++ b/scripts/scdup.py @@ -0,0 +1,41 @@ +import sys +import os +import json + +# load every key in the source language +# check the keys in all translations +# remove keys that only exist in translations + +cwd = os.getcwd() +langdir = cwd + '/../src/strings' +langlst = os.listdir(langdir) + +langlst.remove('en-us.json') +print(langlst) +input('press enter to continue') + +keysus = [] +with open(langdir + '/' + 'en-us.json') as en: + langus = json.load(en) + for key in langus: + keysus.append(key) + +for lang in langlst: + with open(langdir + '/' + lang, 'r') as f: + inde = 2 + if '\n \"' in f.read(): + inde = 4 + f.close() + with open(langdir + '/' + lang, 'r+') as f: + langjson = json.load(f) + langjnew = {} + for key in langjson: + if key in keysus: + langjnew[key] = langjson[key] + f.seek(0) + f.write(json.dumps(langjnew, indent=inde, sort_keys=False, ensure_ascii=False)) + f.write('\n') + f.truncate() + f.close() + +print('DONE') diff --git a/scripts/scgen.py b/scripts/scgen.py new file mode 100644 index 0000000000..0d831426e6 --- /dev/null +++ b/scripts/scgen.py @@ -0,0 +1,40 @@ +import os +import subprocess +import json + +# load all keys in the source language +# check entire codebase for usages +# print unused keys to a text file +# TODO: dynamic string usages cause false positives + +cwd = os.getcwd() +langdir = cwd + '/../src/strings' +langlst = [] +langlst.append('en-us.json') + +# unused keys +dep = [] + +def grep(key): + command = 'grep -r -E "(\(\\\"|\(\'|\{)%s(\\\"|\'|\})" --include=\*.{js,html} --exclude-dir=../src/strings ../src' % key + p = subprocess.Popen(command, shell=True, stdout=subprocess.PIPE, stderr=subprocess.STDOUT) + output = p.stdout.readlines() + if output: + print('DONE: ' + key) + return True + print('UNUSED: ' + key) + dep.append(key) + return False + +for lang in langlst: + with open(langdir + '/' + lang) as f: + langjson = json.load(f) + for key in langjson: + grep(key) + +print(dep) +print('LENGTH: ' + str(len(dep))) +with open('scout.txt', 'w') as out: + for item in dep: + out.write(item + '\n') + out.close() diff --git a/scripts/scrm.py b/scripts/scrm.py new file mode 100644 index 0000000000..9bd5bc2a48 --- /dev/null +++ b/scripts/scrm.py @@ -0,0 +1,34 @@ +import sys +import os +import json + +# load text file containing unused keys +# remove the keys from all string files + +cwd = os.getcwd() +langdir = cwd + '/../src/strings' +langlst = os.listdir(langdir) + +keys = [] + +with open('scout.txt', 'r') as f: + for line in f: + keys.append(line.strip('\n')) + +for lang in langlst: + with open(langdir + '/' + lang, 'r') as f: + inde = 2 + if '\n \"' in f.read(): + inde = 4 + f.close() + with open(langdir + '/' + lang, 'r+') as f: + langjson = json.load(f) + for key in keys: + langjson.pop(key, None) + f.seek(0) + f.write(json.dumps(langjson, indent=inde, sort_keys=False, ensure_ascii=False)) + f.write('\n') + f.truncate() + f.close() + +print('DONE') diff --git a/src/apikeys.html b/src/apikeys.html index 47f032c1f4..6f766ae6c9 100644 --- a/src/apikeys.html +++ b/src/apikeys.html @@ -4,7 +4,7 @@

${HeaderApiKeys}

${HeaderApiKeysHelp}

diff --git a/src/assets/css/clearbutton.css b/src/assets/css/clearbutton.css index 2d3f8d6800..9e6c105258 100644 --- a/src/assets/css/clearbutton.css +++ b/src/assets/css/clearbutton.css @@ -9,4 +9,4 @@ vertical-align: middle; font-family: inherit; font-size: inherit; -} \ No newline at end of file +} diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css index d4928db691..8c8a9ca7f1 100644 --- a/src/assets/css/dashboard.css +++ b/src/assets/css/dashboard.css @@ -1,262 +1,314 @@ .dashboardColumn, .dashboardSections { flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; } .dashboardFooter { margin-top: 3.5em; - text-align: center + text-align: center; } .dashboardFooter a { - margin: 0 .7em + margin: 0 0.7em; } progress { appearance: none; + -moz-appearance: none; + -webkit-appearance: none; margin: 0; - background: #ccc !important + background: #ccc !important; } -progress[role]:after { - background-image: none +progress[role]::after { + background-image: none; } progress::-webkit-progress-bar { - background: #ccc + background: #ccc; } progress::-moz-progress-bar { - background-color: #00a4dc + background-color: #00a4dc; } progress::-webkit-progress-value { - background-color: #00a4dc + background-color: #00a4dc; } -progress[aria-valuenow]:before { - border-radius: .4em; - background-color: #00a4dc +progress[aria-valuenow]::before { + border-radius: 0.4em; + background-color: #00a4dc; } .localnav { - margin-bottom: 2.2em !important + margin-bottom: 2.2em !important; } -@media all and (min-width:50em) { - - .type-interior>.ui-panel-content-wrap>div[data-role=content], - .type-interior>div[data-role=content] { +@media all and (min-width: 50em) { + .type-interior > div[data-role=content], + .type-interior > .ui-panel-content-wrap > div[data-role=content] { padding-right: 0; padding-left: 0; padding-top: 0; - overflow: hidden + overflow: hidden; } } .dashboardDocument .dashboardEntryHeaderButton, .dashboardDocument .lnkManageServer { - display: none !important + display: none !important; } .adminDrawerLogo { padding: 1.5em 1em 1.2em; border-bottom: 1px solid #e0e0e0; margin-bottom: 1em; - display: block + display: block; } .adminDrawerLogo img { - height: 4em + height: 4em; +} + +a[data-role=button] { + background: #292929 !important; + background-clip: padding-box; + -webkit-font-smoothing: antialiased; + -webkit-user-select: none; + -webkit-background-clip: padding-box; + cursor: pointer !important; + font-family: inherit !important; + font-weight: 500 !important; + margin: 0 0.25em !important; + display: inline-block; + padding: 0.8em 1em; + text-align: center; + text-decoration: none !important; } div[data-role=controlgroup] a[data-role=button] { display: inline-block !important; margin: 0 !important; + -webkit-box-shadow: none !important; box-shadow: none !important; - border-radius: 0 + -webkit-border-radius: 0; + border-radius: 0; } div[data-role=controlgroup] a[data-role=button]:first-child { - border-bottom-left-radius: .3125em; - border-top-left-radius: .3125em + -webkit-border-bottom-left-radius: 0.3125em; + border-bottom-left-radius: 0.3125em; + -webkit-border-top-left-radius: 0.3125em; + border-top-left-radius: 0.3125em; } div[data-role=controlgroup] a[data-role=button]:last-child { - border-bottom-right-radius: .3125em; - border-top-right-radius: .3125em + -webkit-border-bottom-right-radius: 0.3125em; + border-bottom-right-radius: 0.3125em; + -webkit-border-top-right-radius: 0.3125em; + border-top-right-radius: 0.3125em; } -div[data-role=controlgroup] a[data-role=button]+a[data-role=button] { +div[data-role=controlgroup] a[data-role=button] + a[data-role=button] { border-left-width: 0 !important; - margin: 0 0 0 -.4em !important + margin: 0 0 0 -0.4em !important; } div[data-role=controlgroup] a.ui-btn-active { background: #00a4dc !important; - color: #292929 !important + color: #292929 !important; } -.header .imageLink { - display: inline-block +.sessionAppInfo img { + max-width: 40px; + max-height: 40px; + margin-right: 8px; } -.header .imageLink img { - height: 2.1em; - vertical-align: middle -} - -.content-primary { - padding-top: 6em; - padding-right: 1em; - padding-left: 1em -} - -.withTabs .content-primary { - padding-top: 9em !important -} - -@media all and (min-width:40em) { - .content-primary { - padding-top: 7em - } - - .withTabs .content-primary { - padding-top: 10em !important - } -} - -@media all and (min-width:84em) { - .withTabs .content-primary { - padding-top: 7em !important - } -} - -.content-primary ul:first-child { - margin-top: 0 -} - -.dashboardSections { - display: flex; - flex-direction: column -} - -.dashboardColumn { - display: flex; - flex-direction: column; - flex-shrink: 0; - flex-grow: 1 -} - -.activeSession:not(.playingSession) .sessionNowPlayingContent { - display: none -} - -.dashboardSection { - flex-shrink: 0; - margin: 0 0 2em -} - -.dashboardSection h3 { - margin-top: .5em; - margin-bottom: .5em -} - -.activeRecordingItems>.card { - width: 50% -} - -@media all and (min-width:70em) { - .dashboardSections { - flex-wrap: wrap; - flex-direction: row - } - - .dashboardColumn-2-60 { - width: 46% - } - - .dashboardColumn-2-40 { - width: 27% - } - - .dashboardSection { - padding: 0 1.5em - } - - .activeRecordingItems>.card { - width: 25% - } -} - -.premiumBanner img { - position: absolute; - text-align: right; - top: 0; - right: 0; - width: 4.4em; - height: 4.4em -} - -.wizardContent { - max-width: 62em; - padding: .5em 2em 1em; - margin: 0 auto; - background: #fff -} - -.wizardNavigation { - text-align: right -} - -.wizardContent form { - max-width: 100% +.appLinks img { + height: 36px; } .wizardContent h2 img { height: 2.5em; vertical-align: middle; - margin-right: .5em; + margin-right: 0.5em; position: relative; - top: -.3em + top: -0.3em; } -.scheduledTaskPaperIconItem { - outline: 0 !important +.header .imageLink { + display: inline-block; } -.activeSession { - width: 100% !important +.header .imageLink img { + height: 2.1em; + vertical-align: middle; } -.activitylogUserPhoto { - height:1.71em; - width:1.71em; - border-radius:100%; - margin-right:.5em; - background-size:cover; - background-repeat:no-repeat; - background-position:center; +.content-primary { + padding-top: 6em; + padding-right: 1em; + padding-left: 1em; } -@media all and (min-width:40em) { - .activeSession { - width: 100% !important +.withTabs .content-primary { + padding-top: 9em !important; +} + +@media all and (min-width: 40em) { + .content-primary { + padding-top: 7em; + } + + .withTabs .content-primary { + padding-top: 10em !important; } } -@media all and (min-width:50em) { +@media all and (min-width: 84em) { + .withTabs .content-primary { + padding-top: 7em !important; + } +} + +.content-primary ul:first-child { + margin-top: 0; +} + +.dashboardSections { + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; +} + +.dashboardColumn { + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-flex-shrink: 0; + flex-shrink: 0; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + flex-grow: 1; +} + +.sessionNowPlayingContent { + -webkit-background-size: cover; + background-size: cover; + background-repeat: no-repeat; + background-position: center center; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.activeSession:not(.playingSession) .sessionNowPlayingContent { + display: none; +} + +.dashboardSection { + -webkit-flex-shrink: 0; + flex-shrink: 0; + margin: 0 0 2em; +} + +.dashboardSection h3 { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.activeRecordingItems > .card { + width: 50%; +} + +@media all and (min-width: 70em) { + .dashboardSections { + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + flex-direction: row; + } + + .dashboardColumn-2-60 { + width: 46%; + } + + .dashboardColumn-2-40 { + width: 27%; + } + + .dashboardSection { + padding: 0 1.5em; + } + + .activeRecordingItems > .card { + width: 25%; + } +} + +.wizardContent { + max-width: 62em; + padding: 0.5em 2em 1em; + margin: 0 auto; + background: #fff; +} + +.wizardNavigation { + text-align: right; +} + +.wizardContent form { + max-width: 100%; +} + +.scheduledTaskPaperIconItem { + outline: 0 !important; +} + +.activeSession { + width: 100% !important; +} + +.activitylogUserPhoto { + height: 1.71em; + width: 1.71em; + border-radius: 100%; + margin-right: 0.5em; + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} + +@media all and (min-width: 40em) { .activeSession { - width: 50% !important + width: 100% !important; + } +} + +@media all and (min-width: 50em) { + .activeSession { + width: 50% !important; } } .sessionCardFooter { - padding-top: .5em !important; + padding-top: 0.5em !important; padding-bottom: 1em !important; border-top: 1px solid #eee; text-align: center; - position: relative + position: relative; } .sessionAppInfo { @@ -265,22 +317,11 @@ div[data-role=controlgroup] a.ui-btn-active { } .sessionCardButtons { - min-height: 2.7em + min-height: 2.7em; } .sessionCardButton { - margin: 0 -} - -.sessionNowPlayingContent { - background-size: cover; - background-repeat: no-repeat; - background-position: center center; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0 + margin: 0; } .sessionNowPlayingInnerContent { @@ -289,23 +330,23 @@ div[data-role=controlgroup] a.ui-btn-active { left: 0; right: 0; bottom: 0; - font-weight: 400 + font-weight: 400; } -.sessionNowPlayingContent-withbackground+.sessionNowPlayingInnerContent { +.sessionNowPlayingContent-withbackground + .sessionNowPlayingInnerContent { color: #fff !important; - background: rgba(0, 0, 0, .7) + background: rgba(0, 0, 0, 0.7); } .sessionAppName { vertical-align: top; - max-width: 200px + max-width: 200px; } .sessionNowPlayingDetails { display: flex; position: absolute; - bottom: 0px; + bottom: 0; width: 100%; } @@ -315,12 +356,6 @@ div[data-role=controlgroup] a.ui-btn-active { padding: 0.8em 0.5em; } -.sessionAppInfo img { - max-width: 40px; - max-height: 40px; - margin-right: 8px; -} - .sessionNowPlayingTime { flex-shrink: 0; align-self: flex-end; @@ -332,6 +367,13 @@ div[data-role=controlgroup] a.ui-btn-active { white-space: nowrap; } +.playbackProgress, +.transcodingProgress { + margin: 0; + width: 100%; + background: transparent !important; +} + .activeSession .playbackProgress, .activeSession .transcodingProgress { position: absolute; @@ -342,13 +384,6 @@ div[data-role=controlgroup] a.ui-btn-active { width: 100%; } -.playbackProgress, -.transcodingProgress { - margin: 0px; - width: 100%; - background: transparent !important; -} - .playbackProgress > div { z-index: 1000; background-color: #00a4dc; @@ -358,70 +393,70 @@ div[data-role=controlgroup] a.ui-btn-active { background-color: #dd4919; } -@media all and (max-width:34.375em) { +@media all and (max-width: 34.375em) { .sessionAppName { - max-width: 160px + max-width: 160px; } } -@media all and (max-width:31.25em) { +@media all and (max-width: 31.25em) { .sessionAppName { - max-width: 150px + max-width: 150px; } } .disabledUser { - filter: grayscale(100%) + -webkit-filter: grayscale(100%); + filter: grayscale(100%); } .disabledUserBanner { - margin: 0 0 2em + margin: 0 0 2em; } .appLinks a { - text-decoration: none !important -} - -.appLinks a+a { - margin-left: 5px -} - -.appLinks img { - height: 36px -} - -a[data-role=button] { - background-clip: padding-box; - cursor: pointer !important; - font-family: inherit !important; - font-weight: 500 !important; - margin: 0 .25em !important; - display: inline-block; - padding: .8em 1em; - text-align: center; text-decoration: none !important; - background: #292929 !important; +} + +.appLinks a + a { + margin-left: 5px; +} + +@-webkit-keyframes rotating { + from { + -webkit-transform: rotate(0); + transform: rotate(0); + } + + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } @keyframes rotating { from { - transform: rotate(0) + -webkit-transform: rotate(0); + transform: rotate(0); } to { - transform: rotate(360deg) + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } .rotatingCircle { - animation: rotating 2s linear infinite + -webkit-animation: rotating 2s linear infinite; + animation: rotating 2s linear infinite; } .pluginPreviewImg { - box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37) + -webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); + box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); } -.ui-bar-a{ +.ui-bar-a { text-align: center; padding: 0 20px; } diff --git a/src/assets/css/detailtable.css b/src/assets/css/detailtable.css index 33f0608365..4e2e16511c 100644 --- a/src/assets/css/detailtable.css +++ b/src/assets/css/detailtable.css @@ -1,7 +1,7 @@ .detailTableBodyCell, .detailTableHeaderCell { border-spacing: 0; - padding: .4em + padding: 0.4em; } .detailTable { @@ -9,11 +9,11 @@ border-spacing: 0; text-align: left; width: 100%; - margin: 0 auto + margin: 0 auto; } .detailTableHeaderCell { font-weight: 700; text-align: left; - vertical-align: top -} \ No newline at end of file + vertical-align: top; +} diff --git a/src/assets/css/flexstyles.css b/src/assets/css/flexstyles.css index b35e25d57b..a5a479f2f5 100644 --- a/src/assets/css/flexstyles.css +++ b/src/assets/css/flexstyles.css @@ -44,4 +44,4 @@ .align-self-flex-end { align-self: flex-end; -} \ No newline at end of file +} diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.css index da5515fc1e..30fd1e2eb6 100644 --- a/src/assets/css/fonts.css +++ b/src/assets/css/fonts.css @@ -1,13 +1,13 @@ html { font-family: -apple-system, "Helvetica", system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif; -} - -html { font-size: 93%; + -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } -h1, h2, h3 { +h1, +h2, +h3 { /* For better bolding, since Helvetica does not support 500 weight, and 600 is too thick */ font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif; } diff --git a/src/assets/css/ios.css b/src/assets/css/ios.css index 47fa7bd538..57de0c5fdd 100644 --- a/src/assets/css/ios.css +++ b/src/assets/css/ios.css @@ -1,8 +1,8 @@ html { - font-size: 82% !important + font-size: 82% !important; } .formDialogFooter { position: static !important; - margin: 0 -1em !important -} \ No newline at end of file + margin: 0 -1em !important; +} diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index af106959e0..e5f45f7ab1 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -1,42 +1,43 @@ .headerUserImage, .navMenuOption, .pageTitle { - vertical-align: middle + vertical-align: middle; } -.detailButton-mobile, +.detailButton, .itemLinks, .listPaging, .sectionTabs, .viewSettings { - text-align: center + text-align: center; } .headerSelectedPlayer, .itemMiscInfo, .navMenuOptionText { + -o-text-overflow: ellipsis; text-overflow: ellipsis; - overflow: hidden + overflow: hidden; } .libraryPage { - padding-top: 7em !important + padding-top: 7em !important; } .itemDetailPage { - padding-top: 0em !important + padding-top: 0 !important; } .standalonePage { - padding-top: 4.5em !important + padding-top: 4.5em !important; } .wizardPage { - padding-top: 7em !important + padding-top: 7em !important; } .libraryPage:not(.noSecondaryNavPage) { - padding-top: 7.5em !important + padding-top: 7.5em !important; } .absolutePageTabContent { @@ -47,22 +48,27 @@ z-index: 1; margin: 0 !important; top: 6.9em !important; - transition: transform .2s ease-out + -webkit-transition: -webkit-transform 0.2s ease-out; + -o-transition: transform 0.2s ease-out; + transition: transform 0.2s ease-out; } .pageTabContent:not(.is-active) { - display: none !important + display: none !important; } .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 + display: inline-block; } .headerUserButtonRound div { + -webkit-border-radius: 100em; border-radius: 100em; background-size: cover; background-repeat: no-repeat; @@ -70,41 +76,74 @@ } .headerButton { - flex-shrink: 0 + -webkit-flex-shrink: 0; + flex-shrink: 0; } .hideMainDrawer .mainDrawerButton { - display: none + display: none; +} + +.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: flex-start; +} + +.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; } .noHeaderRight .headerRight, .noHomeButtonHeader .headerHomeButton { - display: none !important + display: none !important; } .pageTitle { + display: -webkit-inline-box; + display: -webkit-inline-flex; display: inline-flex; - margin: .3em 0 0 .5em; + margin: 0.3em 0 0 0.5em; height: 1.7em; + -webkit-box-align: center; + -webkit-align-items: center; align-items: center; - flex-shrink: 1 + -webkit-flex-shrink: 1; + flex-shrink: 1; } .headerLeft, .skinHeader { - display: flex; + display: -webkit-box; + display: -webkit-flex; } -.detailButton-mobile, +.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 + width: 13.2em; } .skinHeader { @@ -116,122 +155,114 @@ border: 0; display: flex; flex-direction: column; - contain: layout style paint -} - -.headerLeft, -.headerRight { - justify-content: center; + contain: layout style paint; } .hiddenViewMenuBar .skinHeader { - display: none + display: none; } .headerTop { - padding: .54em 0 -} - -.headerLeft { - display: flex; - align-items: center; - flex-grow: 1; - overflow: hidden; - justify-content: left; + padding: 0.54em 0; } .sectionTabs { - width: 100% -} - -.headerRight { - display: flex; - align-items: center; - justify-content: flex-end + width: 100%; } .selectedMediaFolder { - background-color: #f2f2f2 !important + background-color: #f2f2f2 !important; } .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; + padding: 0.9em 0 0.9em 2.4em !important; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; flex-grow: 1; font-weight: 400 !important; margin: 0 !important; - border-radius: 0 !important + -webkit-border-radius: 0 !important; + border-radius: 0 !important; } .navMenuOptionIcon { margin-right: 1.2em; - flex-shrink: 0 + -webkit-flex-shrink: 0; + flex-shrink: 0; } .navMenuOptionText { - white-space: nowrap + white-space: nowrap; } .sidebarHeader { padding-left: 1.2em; - margin: 1em 0 .5em + margin: 1em 0 0.5em; } .dashboardDocument .skinBody { - transition: left ease-in-out .3s, padding ease-in-out .3s; + -webkit-transition: left ease-in-out 0.3s, padding ease-in-out 0.3s; + -o-transition: left ease-in-out 0.3s, padding ease-in-out 0.3s; + transition: left ease-in-out 0.3s, padding ease-in-out 0.3s; position: absolute; top: 0; right: 0; bottom: 0; - left: 0 + left: 0; } .layout-desktop .searchTabButton, .layout-mobile .searchTabButton, .layout-tv .headerSearchButton { - display: none !important + display: none !important; } .mainDrawer-scrollContainer { - padding-bottom: 10vh + padding-bottom: 10vh; } -@media all and (min-width:40em) { - +@media all and (min-width: 40em) { .dashboardDocument .adminDrawerLogo, .dashboardDocument .mainDrawerButton { - display: none !important + display: none !important; } .dashboardDocument .mainDrawer { 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% + font-size: 94%; } .dashboardDocument .mainDrawer-scrollContainer { - margin-top: 5em !important + margin-top: 5em !important; } .dashboardDocument .skinBody { - left: 20em + left: 20em; } } -@media all and (max-width:60em) { +@media all and (max-width: 60em) { .libraryDocument .mainDrawerButton { - display: none + display: none; } } -@media all and (max-width:84em) { +@media all and (max-width: 84em) { .withSectionTabs .headerTop { padding-bottom: 0.2em; } @@ -242,30 +273,16 @@ } @media all and (min-width:84em) { - .headerTop { - padding: 1.489em 0 - } - - .headerTabs { - align-self: center; - width: auto; - align-items: center; - justify-content: center; - margin-top: -3.34em; - position: relative; - top: -1.05em - } - .libraryPage:not(.noSecondaryNavPage) { - padding-top: 4.6em !important + padding-top: 4.6em !important; } .pageWithAbsoluteTabs:not(.noSecondaryNavPage) { - padding-top: 6.7em !important + padding-top: 6.7em !important; } .absolutePageTabContent { - top: 5.7em !important + top: 5.7em !important; } .dashboardDocument .mainDrawer-scrollContainer { @@ -275,22 +292,22 @@ .headerSelectedPlayer { max-width: 10em; - white-space: nowrap + white-space: nowrap; } -@media all and (max-width:37.5em) { +@media all and (max-width: 37.5em) { .headerSelectedPlayer { - display: none + display: none; } } .hidingAnimatedTab { - visibility: hidden + visibility: hidden; } .headerArrowImage { height: 20px; - margin-left: .5em + margin-left: 0.5em; } .backdropContainer { @@ -299,99 +316,112 @@ left: 0; right: 0; bottom: 0; - z-index: -1 + z-index: -1; } .libraryPage .header { - padding-bottom: 0 + padding-bottom: 0; } .flexPageTabContent.is-active { - display: flex !important + display: -webkit-box !important; + display: -webkit-flex !important; + display: flex !important; } .viewSettings { - margin: 0 0 .25em + margin: 0 0 0.25em; } -.viewControls+.listTopPaging { - margin-left: .5em !important +.listTopPaging, +.viewControls { + display: inline-block; +} + +.viewControls + .listTopPaging { + margin-left: 0.5em !important; } .criticReview { margin: 1.5em 0; background: #222; - padding: .8em .8em .8em 3em; - border-radius: .3em; - position: relative + padding: 0.8em 0.8em 0.8em 3em; + -webkit-border-radius: 0.3em; + border-radius: 0.3em; + position: relative; } .detailLogo, .itemBackdrop { background-repeat: no-repeat; - background-position: center center + background-position: center center; } .criticReview:first-child { - margin-top: .5em + margin-top: 0.5em; } .criticReview img { - width: 2.4em + width: 2.4em; } .criticRatingScore { - margin-bottom: .5em + margin-bottom: 0.5em; } .itemTag { display: inline-block; - margin-right: 1em + margin-right: 1em; } .itemOverview { - white-space: pre-wrap + white-space: pre-wrap; } .itemLinks { - padding: 0 + padding: 0; } .itemLinks p { - margin: .5em 0 + margin: 0.5em 0; } .reviewLink, .reviewerName { - margin-top: .5em + margin-top: 0.5em; } .reviewerName { - color: #ccc + color: #ccc; } .reviewDate { - margin-left: 1em + margin-left: 1em; } .reviewScore { position: absolute; - left: .8em + left: 0.8em; } .itemBackdrop { + -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center; height: 50vh; - position: relative + position: relative; +} + +.personBackdrop { + background-size: contain; } .itemBackdropProgressBar { position: absolute !important; bottom: 0; left: 0; - right: 0 + right: 0; } .desktopMiscInfoContainer { @@ -404,6 +434,19 @@ position: relative; } +.layout-mobile .parentName, +.layout-mobile .itemName, +.layout-mobile .itemMiscInfo, +.layout-mobile .mainDetailButtons { + display: flex; + align-items: center; + justify-content: center; +} + +.layout-mobile .infoText { + white-space: normal; +} + .layout-tv .detailPagePrimaryContainer { position: relative; } @@ -413,11 +456,14 @@ align-items: center; align-content: center; position: sticky; - background-color: #101010; - top: 0; + top: 8%; z-index: 2; } +.detailSticky { + background-color: #101010; +} + .infoWrapper { flex: 1 0 0; } @@ -431,28 +477,29 @@ .detailPageSecondaryContainer { margin: 1.25em 0; +} + +.detailPageContent { display: flex; flex-direction: column; padding-left: 2%; padding-right: 2%; } +.detailImageContainer { + position: sticky; + top: 25%; + float: left; + width: 22.786458333333332vw; +} + .layout-mobile .detailImageContainer, .layout-tv .detailImageContainer { position: relative; } -.detailImageContainer { - margin: 1.25em 0; - position: sticky; - top: 15%; - float: left; - width: 22.786458333333332vw; -} - .detailPagePrimaryContent { position: relative; - flex-grow: 1 } .detailLogo { @@ -461,22 +508,23 @@ position: absolute; top: 14.5%; right: 10.5%; - background-size: contain + -webkit-background-size: contain; + background-size: contain; } -@media all and (max-width:87.5em) { +@media all and (max-width: 87.5em) { .detailLogo { - right: 5% + right: 5%; } } -@media all and (max-width:75em) { +@media all and (max-width: 75em) { .detailLogo { - right: 2% + right: 2%; } } -@media all and (max-width:68.75em) { +@media all and (max-width: 68.75em) { .detailLogo { width: 14.91em; height: 3.5em; @@ -484,327 +532,358 @@ bottom: 5%; top: auto; background-position: center right; - display: none + display: none; } } .itemDetailImage { width: 100% !important; - box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); + box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); + -webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); } @media all and (max-width:62.5em) { - .detailPageContent { + .detailPageWrapperContainer { position: relative } .btnPlaySimple { - display: none !important + display: none !important; } } -@media all and (max-width:75em) { +@media all and (max-width: 75em) { .lnkSibling { - display: none !important + display: none !important; } } .parentName { display: block; - margin-bottom: .5em + margin-bottom: 0.5em; +} + +.btnSyncComplete { + background: #673ab7 !important; +} + +.btnSyncComplete i { + -webkit-border-radius: 100em; + border-radius: 100em; } .emby-button.detailFloatingButton { position: absolute; - background-color: rgba(0, 0, 0, .5) !important; + background-color: rgba(0, 0, 0, 0.5) !important; z-index: 1; top: 50%; left: 50%; margin: -2.2em 0 0 -2.2em; - border: 2.7px solid rgba(255, 255, 255, .6); - padding: .38em !important; - color: rgba(255, 255, 255, .76) + padding: 0.4em !important; + color: rgba(255, 255, 255, 0.76); } .emby-button.detailFloatingButton i { - font-size: 3.5em + font-size: 3.5em; } -@media all and (max-width:62.5em) { +@media all and (max-width: 62.5em) { .parentName { - margin-bottom: 1em + margin-bottom: 1em; } .itemDetailPage { - padding-top: 0 !important + padding-top: 0 !important; } .detailimg-hidemobile { - display: none + display: none; } } -@media all and (min-width:31.25em) { +@media all and (min-width: 31.25em) { .mobileDetails { - display: none + display: none; } } -@media all and (max-width:31.25em) { +@media all and (max-width: 31.25em) { .desktopDetails { - display: none !important + display: none !important; } } -.detailButton-mobile, +.detailButton, .mainDetailButtons { display: flex; + display: -webkit-box; + display: -webkit-flex; } .itemName { - margin: .5em 0 + margin: 0.5em 0; } .empty { - margin: 0 + margin: 0; } -.detailCollapsibleSection:not(.hide)+.detailCollapsibleSection { - margin-top: -2em +.detailCollapsibleSection:not(.hide) + .detailCollapsibleSection { + margin-top: -2em; } .detailPageCollabsible { - margin-top: 0 + margin-top: 0; } .mainDetailButtons { display: flex; + -webkit-box-align: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 1em 0; } .recordingFields button { margin-left: 0; - margin-right: .5em; - flex-shrink: 0 + margin-right: 0.5em; + -webkit-flex-shrink: 0; + flex-shrink: 0; } -.mainDetailButtons.hide+.recordingFields { - margin-top: 1.5em !important -} - -.detailButton-mobile { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin: 0 !important; - padding: .5em .7em !important +.mainDetailButtons.hide + .recordingFields { + margin-top: 1.5em !important; } .detailButton { - margin: 0 .5em 0 0 !important + 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: 0.5em 0.7em !important; } @media all and (min-width:29em) { - .detailButton-mobile { + .detailButton { padding-left: .75em !important; padding-right: .75em !important } } @media all and (min-width:32em) { - .detailButton-mobile { + .detailButton { padding-left: .8em !important; padding-right: .8em !important } } @media all and (min-width:35em) { - .detailButton-mobile { + .detailButton { padding-left: .85em !important; padding-right: .85em !important } } -.detailButton-mobile-content { +.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; - align-items: center + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; } -.detailButton-mobile-icon { +.detailButton-icon { font-size: 1.6em !important; width: 1em; - height: 1em + height: 1em; } .detailImageProgressContainer { - margin-left: 6px; - width: 21.886458333333332vw; + position: absolute; + bottom: 0; + width: 22.786458333333332vw; } -.detailButton-mobile-text { +.detailButton-text { margin-top: .7em; font-size: 80%; - font-weight: 400 + font-weight: 400; } -@media all and (max-width:62.5em) { +@media all and (max-width: 62.5em) { .mainDetailButtons { - margin-left: -.5em + margin-left: -0.5em; } - .detailButton { + .detailButtonHideonMobile { display: none !important } } @media all and (min-width:62.5em) { + .headerTop { + padding: 0.8em 0 + } + + .headerTabs { + align-self: center; + width: auto; + align-items: center; + justify-content: center; + margin-top: -3.34em; + position: relative; + } + .detailFloatingButton { + display: none !important; + } + + .personBackdrop { display: none !important } .mainDetailButtons { font-size: 108%; - margin: 1.25em 0 + margin: 1.25em 0; } } -.listTopPaging, -.viewControls { - display: inline-block -} - -@media all and (max-width:50em) { +@media all and (max-width: 50em) { .editorMenuLink { - display: none + display: none; } } .itemMiscInfo { + display: -webkit-box; + display: -webkit-flex; display: flex; + -webkit-flex-wrap: wrap; flex-wrap: wrap; - align-items: center + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; } -@media all and (max-width:31.25em) { +@media all and (max-width: 31.25em) { .mobileDetails .itemMiscInfo { text-align: center; - justify-content: center + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; } .itemMiscInfo .endsAt { - display: none + display: none; } } .layout-tv .detailVerticalSection { - margin-bottom: 3.4em !important + margin-bottom: 3.4em !important; } -.detailPageContent { +.detailPageWrapperContainer { border-spacing: 0; border-collapse: collapse; } -@media all and (max-width:62.5em) { - .detailPageContent-nodetailimg { - padding-top: 0; - } -} - .mediaInfoStream { margin: 0 3em 0 0; display: inline-block; - vertical-align: top + vertical-align: top; } .mediaInfoStreamType { display: block; - margin: 1em 0 + margin: 1em 0; } .mediaInfoAttribute, .mediaInfoLabel { - display: inline-block + display: inline-block; } .mediaInfoLabel { margin-right: 1em; - font-weight: 600 + font-weight: 600; } .recordingProgressBar::-moz-progress-bar { - background-color: #c33 + background-color: #c33; } .recordingProgressBar::-webkit-progress-value { - background-color: #c33 + background-color: #c33; } -.recordingProgressBar[aria-valuenow]:before { - background-color: #c33 +.recordingProgressBar[aria-valuenow]::before { + background-color: #c33; } .timelineHeader { - margin-bottom: .25em; + margin-bottom: 0.25em; line-height: 1.25em; - line-height: initial + line-height: initial; } .itemsContainer { - margin: 0 auto + margin: 0 auto; } -@media all and (max-height:31.25em) { +@media all and (max-height: 31.25em) { .itemBackdrop { - height: 52vh + height: 52vh; } } -@media all and (max-width:75em) { +@media all and (max-width: 75em) { .listViewUserDataButtons { - display: none !important + display: flex; + align-items: center; + font-size: 65%; } } -@media all and (max-width:62.5em) { - .detailsHiddenOnMobile { - display: none - } -} - -.btnSyncComplete { - background: #673AB7 !important -} - -.btnSyncComplete i { - border-radius: 100em -} - .bulletSeparator { - margin: 0 .35em + margin: 0 0.35em; } .mediaInfoIcons { + display: -webkit-box; + display: -webkit-flex; display: flex; + -webkit-box-align: center; + -webkit-align-items: center; align-items: center; margin: 1em 0; - flex-wrap: wrap + -webkit-flex-wrap: wrap; + flex-wrap: wrap; } .verticalSection-extrabottompadding { - margin-bottom: 2.7em + margin-bottom: 2.7em; } .sectionTitleButton, .sectionTitleIconButton { margin-right: 0 !important; display: inline-block; - vertical-align: middle + vertical-align: middle; } .sectionTitleContainer { @@ -830,43 +909,49 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { .sectionTitleButton { margin-left: 1.5em !important; - flex-shrink: 0 + -webkit-flex-shrink: 0; + flex-shrink: 0; } .sectionTitleButton + .sectionTitleButton { - margin-left: .5em !important + margin-left: 0.5em !important; } .sectionTitleIconButton { margin-left: 1.5em !important; + -webkit-flex-shrink: 0; flex-shrink: 0; font-size: 84% !important; - padding: .5em !important + padding: 0.5em !important; } .horizontalItemsContainer { - display: flex + 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 + color: inherit !important; } .sectionTitleTextButton:not(.padded-left) { - padding: 0 !important + padding: 0 !important; } .sectionTitleTextButton.padded-left { padding-bottom: 0 !important; padding-right: 0 !important; - padding-top: 0 !important + padding-top: 0 !important; } -.sectionTitleTextButton>.sectionTitle { +.sectionTitleTextButton > .sectionTitle { margin-bottom: 0; - margin-top: 0 + margin-top: 0; } .padded-left { @@ -896,17 +981,13 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { } @media all and (min-height:31.25em) { - .padded-left-withalphapicker { - padding-left: 7.5%; - } - .padded-right-withalphapicker { padding-right: 7.5%; } } .searchfields-icon { - color: #aaaaaa; + color: #aaa; } .button-accent-flat { @@ -917,25 +998,27 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { text-decoration: none; font-weight: inherit !important; vertical-align: middle; - color: inherit !important + color: inherit !important; } .itemsViewSettingsContainer { - justify-content: center + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; } -@media all and (min-width:40em) { +@media all and (min-width: 40em) { .listIconButton-autohide { - display: none !important + display: none !important; } } -@media all and (max-width:40em) { +@media all and (max-width: 40em) { .listTextButton-autohide { - display: none !important + display: none !important; } } -.itemsViewSettingsContainer>.button-flat { - margin: 0 +.itemsViewSettingsContainer > .button-flat { + margin: 0; } diff --git a/src/assets/css/livetv.css b/src/assets/css/livetv.css index 93e3e029c8..695adff8c5 100644 --- a/src/assets/css/livetv.css +++ b/src/assets/css/livetv.css @@ -1,9 +1,9 @@ .guideVerticalScroller { - padding-bottom: 15em + padding-bottom: 15em; } -@media all and (min-width:62.5em) { +@media all and (min-width: 62.5em) { #guideTab { - padding-left: .5em + padding-left: 0.5em; } -} \ No newline at end of file +} diff --git a/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff b/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff deleted file mode 100644 index 9357bfc6ff..0000000000 Binary files a/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff and /dev/null differ diff --git a/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 b/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 deleted file mode 100644 index db867bc362..0000000000 Binary files a/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 and /dev/null differ diff --git a/src/assets/css/material-icons/style.css b/src/assets/css/material-icons/style.css deleted file mode 100644 index 2d410b9985..0000000000 --- a/src/assets/css/material-icons/style.css +++ /dev/null @@ -1,25 +0,0 @@ -@font-face { - font-family: 'Material Icons'; - font-style: normal; - font-weight: 400; - src: local('Material Icons'), local('MaterialIcons-Regular'), url(flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2'), url(flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff) format('woff'); -} - -.md-icon { - font-family: 'Material Icons'; - font-weight: normal; - font-style: normal; - letter-spacing: normal; - text-transform: none; - display: inline-block; - white-space: nowrap; - word-wrap: normal; - direction: ltr; - -webkit-font-feature-settings: 'liga'; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; - font-feature-settings: "liga" 1; - line-height: 1; - overflow: hidden; - vertical-align: middle; -} diff --git a/src/assets/css/metadataeditor.css b/src/assets/css/metadataeditor.css index c5de6f3efe..190f53187f 100644 --- a/src/assets/css/metadataeditor.css +++ b/src/assets/css/metadataeditor.css @@ -1,53 +1,57 @@ .editPageSidebar { - display: block + display: block; } .editPageSidebar-withcontent { - display: none + display: none; } .libraryTree { - margin-left: .25em + margin-left: 0.25em; } .offlineEditorNode { - color: #c33 + color: #c33; } .editorNode img { height: 18px; - margin: 0 .35em; + margin: 0 0.35em; vertical-align: middle; position: relative; - top: -2px + top: -2px; } .jstree-anchor { - font-weight: 400 !important + font-weight: 400 !important; } .jstree-wholerow-hovered { background: #38c !important; + -webkit-border-radius: 0 !important; border-radius: 0 !important; - box-shadow: none !important + -webkit-box-shadow: none !important; + box-shadow: none !important; } .jstree-default .jstree-hovered { background: 0 0 !important; + -webkit-border-radius: 0 !important; border-radius: 0 !important; + -webkit-box-shadow: none !important; box-shadow: none !important; - color: #fff !important + color: #fff !important; } .jstree-default .jstree-wholerow-clicked { - background: #00a4dc !important + background: #00a4dc !important; } .metadataSidebarIcon { - margin-right: .4em + margin-right: 0.4em; } -@media all and (min-width:50em) { +@media all and (min-width: 50em) { .editPageSidebar { position: fixed; top: 5.2em; @@ -55,21 +59,21 @@ left: 0; width: 30%; border-right: 1px solid #555; - display: block + display: block; } .editPageInnerContent { float: right; - width: 68.5% + width: 68.5%; } } -@media all and (min-width:112.5em) { +@media all and (min-width: 112.5em) { .editPageSidebar { - width: 25% + width: 25%; } .editPageInnerContent { - width: 73.5% + width: 73.5%; } } diff --git a/src/assets/css/scrollstyles.css b/src/assets/css/scrollstyles.css index 69039ce341..1cb3207e06 100644 --- a/src/assets/css/scrollstyles.css +++ b/src/assets/css/scrollstyles.css @@ -1,5 +1,6 @@ .scrollX { overflow-x: auto; + -webkit-overflow-scrolling: touch; overflow-y: hidden; white-space: nowrap; } @@ -8,39 +9,50 @@ scroll-behavior: smooth; } -.hiddenScrollX, .layout-tv .scrollX { - scrollbar-width: none; +.hiddenScrollX, +.layout-tv .scrollX { + -ms-overflow-style: none; } .hiddenScrollX-forced { - scrollbar-width: none; + overflow: -moz-scrollbars-none; } -.hiddenScrollX::-webkit-scrollbar, .layout-tv .scrollX::-webkit-scrollbar { +.hiddenScrollX::-webkit-scrollbar, +.layout-tv .scrollX::-webkit-scrollbar { height: 0 !important; display: none; } .scrollY { overflow-y: auto; + -webkit-overflow-scrolling: touch; overflow-x: hidden; } .smoothScrollY { overflow-y: auto; + -webkit-overflow-scrolling: touch; overflow-x: hidden; scroll-behavior: smooth; } -.hiddenScrollY, .layout-tv .smoothScrollY { - scrollbar-width: none; +.hiddenScrollY, +.layout-tv .smoothScrollY { + -ms-overflow-style: none; + + /* Can't do this because it not only hides the scrollbar, but also prevents scrolling */ + + /* overflow: -moz-scrollbars-none; */ } .hiddenScrollY-forced { - scrollbar-width: none; + overflow: -moz-scrollbars-none; } -.hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar, .layout-tv .scrollY::-webkit-scrollbar { +.hiddenScrollY::-webkit-scrollbar, +.layout-tv .smoothScrollY::-webkit-scrollbar, +.layout-tv .scrollY::-webkit-scrollbar { width: 0 !important; display: none; } diff --git a/src/assets/css/site.css b/src/assets/css/site.css index 6491799117..55ce4c8807 100644 --- a/src/assets/css/site.css +++ b/src/assets/css/site.css @@ -2,7 +2,7 @@ body, html { margin: 0; padding: 0; - height: 100% + height: 100%; } .backgroundContainer { @@ -11,52 +11,58 @@ html { left: 0; right: 0; bottom: 0; - contain: strict + contain: strict; } html { - line-height: 1.35 + line-height: 1.35; } .layout-mobile, .layout-tv { - user-select: none + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } body { overflow-x: hidden; background-color: transparent !important; + -webkit-font-smoothing: antialiased; } .mainAnimatedPage { - contain: style size !important + contain: style size !important; } .pageContainer { - overflow-x: visible !important + overflow-x: visible !important; } .bodyWithPopupOpen { - overflow-y: hidden !important + overflow-y: hidden !important; } div[data-role=page] { - outline: 0 + outline: 0; } .pageTitle { margin-top: 0; - font-family: inherit + font-family: inherit; } .fieldDescription { - padding-left: .15em; + padding-left: 0.15em; font-weight: 400; - white-space: normal !important + white-space: normal !important; } -.fieldDescription+.fieldDescription { - margin-top: .3em +.fieldDescription + .fieldDescription { + margin-top: 0.3em; } .content-primary, @@ -67,21 +73,21 @@ div[data-role=page] { padding-bottom: 5em !important; } -@media all and (min-width:50em) { +@media all and (min-width: 50em) { .readOnlyContent, form { - max-width: 54em + max-width: 54em; } } .headerHelpButton { margin-left: 1.25em !important; - padding-bottom: .4em !important; - padding-top: .4em !important + padding-bottom: 0.4em !important; + padding-top: 0.4em !important; } .mediaInfoContent { margin-left: auto; margin-right: auto; - width: 85% + width: 85%; } diff --git a/src/assets/css/videoosd.css b/src/assets/css/videoosd.css index f20abf9d07..f4f198325b 100644 --- a/src/assets/css/videoosd.css +++ b/src/assets/css/videoosd.css @@ -1,6 +1,9 @@ .chapterThumbTextContainer, .videoOsdBottom { user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } .osdPoster img, @@ -8,52 +11,59 @@ .videoOsdBottom { bottom: 0; left: 0; - right: 0 + right: 0; } .osdHeader { - transition: opacity .3s ease-out; + -webkit-transition: opacity 0.3s ease-out; + -o-transition: opacity 0.3s ease-out; + transition: opacity 0.3s ease-out; position: relative; z-index: 1; background: rgba(0, 0, 0, 0.7) !important; + -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: #eee !important; } .osdHeader-hidden { - opacity: 0 + opacity: 0; } .osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton) { - display: none + display: none; } .chapterThumbContainer { + -webkit-box-shadow: 0 0 1.9vh #000; box-shadow: 0 0 1.9vh #000; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; flex-grow: 1; - position: relative + position: relative; } .chapterThumb { background-position: center center; + -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; border: 0; height: 20vh; - min-width: 20vh + min-width: 20vh; } -@media all and (orientation:portrait) { +@media all and (orientation: portrait) { .chapterThumb { height: 30vw; - min-width: 30vw + min-width: 30vw; } } -@media all and (max-height:50em) and (orientation:landscape) { +@media all and (max-height: 50em) and (orientation: landscape) { .chapterThumb { height: 30vh; - min-width: 30vh + min-width: 30vh; } } @@ -62,161 +72,218 @@ bottom: 0; left: 0; right: 0; - background: rgba(0, 0, 0, .7); - padding: .25em .5em; - user-select: none + background: rgba(0, 0, 0, 0.7); + padding: 0.25em 0.5em; + user-select: none; } .chapterThumbText { - padding: .25em 0; + padding: 0.25em 0; margin: 0; - opacity: 1 + opacity: 1; } .chapterThumbText-dim { - opacity: .6 + opacity: 0.6; } .videoOsdBottom { position: fixed; background-color: rgba(0, 0, 0, 0.7); padding: 1%; + display: -webkit-box; + display: -webkit-flex; display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; flex-direction: row; will-change: opacity; + -webkit-transition: opacity 0.3s ease-out; + -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; color: #fff; - user-select: none + user-select: none; + -webkit-touch-callout: none; } .videoOsdBottom-hidden { - opacity: 0 + opacity: 0; } .osdControls { - flex-grow: 1 + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + flex-grow: 1; } .videoOsdBottom .buttons { - padding: .25em 0 0; + padding: 0.25em 0 0; + display: -webkit-box; + display: -webkit-flex; display: flex; + -webkit-flex-wrap: wrap; flex-wrap: wrap; - align-items: center + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; } .osdVolumeSliderContainer { width: 9em; - flex-grow: 1 + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + flex-grow: 1; } .osdMediaInfo, .volumeButtons { display: flex; + display: -webkit-box; + display: -webkit-flex; align-items: center; + -webkit-box-align: center; } .volumeButtons { - margin: 0 .5em 0 auto; + margin: 0 0.5em 0 auto; display: flex; - align-items: center + -webkit-align-items: center; + align-items: center; } .osdTimeText { margin-left: 1em; - user-select: none + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .osdPoster { width: 10%; position: relative; - margin-right: .5em + margin-right: 0.5em; } .osdPoster img { position: absolute; height: auto; width: 100%; + -webkit-box-shadow: 0 0 1.9vh #000; box-shadow: 0 0 1.9vh #000; - border: .08em solid #222; + border: 0.08em solid #222; user-drag: none; - user-select: none + user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; } .osdTitle, .osdTitleSmall { - margin: 0 1em 0 0 + margin: 0 1em 0 0; } .osdMediaInfo { display: flex; - align-items: center + -webkit-align-items: center; + align-items: center; } .osdSecondaryMediaInfo { - padding-left: .6em !important + padding-left: 0.6em !important; } .osdTextContainer { + display: -webkit-box; + display: -webkit-flex; display: flex; + -webkit-box-align: center; + -webkit-align-items: center; align-items: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; - margin-bottom: .7em; - padding-left: .5em + margin-bottom: 0.7em; + padding-left: 0.5em; } .osdMainTextContainer { - align-items: baseline + -webkit-box-align: baseline; + -webkit-align-items: baseline; + align-items: baseline; } .osdMediaStatus { margin-left: auto; } +@-moz-keyframes spin { + 100% { + -moz-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + @keyframes spin { 100% { - transform:rotate(360deg); + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } .osdMediaStatus .animate { - animation:spin 4s linear infinite; + -webkit-animation: spin 4s linear infinite; + -moz-animation: spin 4s linear infinite; + animation: spin 4s linear infinite; } .pageContainer { top: 0; - position: fixed + position: fixed; } -@media all and (max-width:30em) { - +@media all and (max-width: 30em) { .btnFastForward, .btnRewind, .osdMediaInfo, .osdPoster { - display: none !important + display: none !important; } } -@media all and (max-width:33.75em) { +@media all and (max-width: 33.75em) { .videoOsdBottom .paper-icon-button-light { - margin: 0 + margin: 0; } } -@media all and (max-width:43em) { +@media all and (max-width: 43em) { .videoOsdBottom .volumeButtons, .osdMediaStatus span { - display: none !important - } -} -@media all and (max-width:50em) { - .videoOsdBottom .btnFastForward, .videoOsdBottom .btnRewind { - display: none !important + display: none !important; } } -@media all and (max-width:75em) { - .videoOsdBottom .endsAtText { - display: none !important +@media all and (max-width: 50em) { + .videoOsdBottom .btnFastForward, + .videoOsdBottom .btnRewind { + display: none !important; + } +} + +@media all and (max-width: 75em) { + .videoOsdBottom .endsAtText { + display: none !important; } } diff --git a/src/themes/logodark.png b/src/assets/img/banner-dark.png similarity index 100% rename from src/themes/logodark.png rename to src/assets/img/banner-dark.png diff --git a/src/themes/logowhite.png b/src/assets/img/banner-light.png similarity index 100% rename from src/themes/logowhite.png rename to src/assets/img/banner-light.png diff --git a/src/assets/img/logo.png b/src/assets/img/icon-transparent.png similarity index 100% rename from src/assets/img/logo.png rename to src/assets/img/icon-transparent.png diff --git a/src/bundle.js b/src/bundle.js index 54623fab74..9e3bc4f237 100644 --- a/src/bundle.js +++ b/src/bundle.js @@ -17,7 +17,7 @@ _define("fetch", function() { }); // flvjs -var flvjs = require("flv.js").default; +var flvjs = require("flv.js/dist/flv").default; _define("flvjs", function() { return flvjs; }); @@ -96,3 +96,9 @@ var libass_wasm = require("libass-wasm"); _define("JavascriptSubtitlesOctopus", function() { return libass_wasm; }); + +// material-icons +var material_icons = require("material-design-icons-iconfont/dist/material-design-icons.css"); +_define("material-icons", function() { + return material_icons; +}); diff --git a/src/components/accessschedule/accessschedule.template.html b/src/components/accessschedule/accessschedule.template.html index 50d172ae49..a0d05537c4 100644 --- a/src/components/accessschedule/accessschedule.template.html +++ b/src/components/accessschedule/accessschedule.template.html @@ -1,6 +1,6 @@

${HeaderAccessSchedule} diff --git a/src/components/actionsheet/actionsheet.css b/src/components/actionsheet/actionsheet.css index 8e5084038a..87d6e9466c 100644 --- a/src/components/actionsheet/actionsheet.css +++ b/src/components/actionsheet/actionsheet.css @@ -4,7 +4,7 @@ padding: 0; border: none; max-height: 84%; - border-radius: .1em !important; + border-radius: 0.1em !important; } .actionsheet-not-fullscreen { @@ -24,7 +24,7 @@ .actionSheetContent { margin: 0 !important; - padding: .4em 0 !important; + padding: 0.4em 0 !important; flex-direction: column; display: flex; justify-content: center; @@ -45,7 +45,7 @@ } .actionsheetListItemBody { - padding: .4em 1em .4em .6em !important; + padding: 0.4em 1em 0.4em 0.6em !important; } .actionSheetItemText { @@ -59,13 +59,13 @@ } .actionSheetItemAsideText { - opacity: .7; + opacity: 0.7; font-size: 90%; display: flex; justify-content: flex-end; flex-shrink: 0; margin-left: 5em; - margin-right: .5em; + margin-right: 0.5em; } .actionSheetScroller { @@ -83,14 +83,14 @@ } .actionsheetDivider { - height: .07em; - margin: .25em 0; + height: 0.07em; + margin: 0.25em 0; flex-shrink: 0; } .actionSheetTitle { - margin: .6em 0 .7em !important; - padding: 0 .9em; + margin: 0.6em 0 0.7em !important; + padding: 0 0.9em; flex-grow: 0; } @@ -100,7 +100,7 @@ } .actionsheetMenuItemIcon { - margin: 0 .85em 0 .45em !important; + margin: 0 0.85em 0 0.45em !important; padding: 0 !important; } @@ -110,6 +110,6 @@ .btnCloseActionSheet { position: fixed; - top: .75em; - left: .5em; + top: 0.75em; + left: 0.5em; } diff --git a/src/components/actionsheet/actionsheet.js b/src/components/actionsheet/actionsheet.js index d4e6b61c8a..9be09c4d25 100644 --- a/src/components/actionsheet/actionsheet.js +++ b/src/components/actionsheet/actionsheet.js @@ -158,7 +158,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-bu } if (layoutManager.tv) { - html += ''; + html += ''; } // If any items have an icon, give them all an icon just to make sure they're all lined up evenly @@ -226,9 +226,9 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-bu if (itemIcon) { - html += '' + itemIcon + ''; + html += '' + itemIcon + ''; } else if (renderIcon && !center) { - html += ''; + html += ''; } html += '
'; diff --git a/src/components/activitylog.js b/src/components/activitylog.js index e02fb0c868..05971f01b8 100644 --- a/src/components/activitylog.js +++ b/src/components/activitylog.js @@ -13,12 +13,12 @@ define(["events", "globalize", "dom", "datetime", "userSettings", "serverNotific } if (entry.UserId && entry.UserPrimaryImageTag) { - html += 'dvr" } else { - html += '' + icon + ''; + html += '' + icon + ''; } html += '
'; @@ -35,7 +35,7 @@ define(["events", "globalize", "dom", "datetime", "userSettings", "serverNotific html += "
"; if (entry.Overview) { - html += ''; + html += ''; } return html += "
"; diff --git a/src/components/alphapicker/alphapicker.js b/src/components/alphapicker/alphapicker.js index b9d31be5dd..a23a7dfff3 100644 --- a/src/components/alphapicker/alphapicker.js +++ b/src/components/alphapicker/alphapicker.js @@ -67,7 +67,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b html += '
'; if (options.mode === 'keyboard') { - html += ''; + html += ''; } else { letters = ['#']; html += mapLetters(letters, vertical).join(''); @@ -77,7 +77,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b html += mapLetters(letters, vertical).join(''); if (options.mode === 'keyboard') { - html += ''; + html += ''; html += '
'; letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; diff --git a/src/components/alphapicker/style.css b/src/components/alphapicker/style.css index 29543421eb..2f396d1fec 100644 --- a/src/components/alphapicker/style.css +++ b/src/components/alphapicker/style.css @@ -35,16 +35,15 @@ font-size: inherit; min-width: initial; margin: 0; - padding: .1em .4em; + padding: 0.1em 0.4em; width: auto; - border-radius: .1em; + border-radius: 0.1em; font-weight: normal; flex-shrink: 0; flex-grow: 1; } @media all and (max-height: 50em) { - .alphaPicker-fixed { bottom: 5em; } @@ -56,14 +55,12 @@ } @media all and (max-height: 49em) { - .alphaPicker-vertical { font-size: 94%; } } @media all and (max-height: 44em) { - .alphaPicker-vertical { font-size: 90%; } @@ -75,14 +72,12 @@ } @media all and (max-height: 37em) { - .alphaPicker-vertical { font-size: 82%; } } @media all and (max-height: 32em) { - .alphaPicker-vertical { font-size: 74%; } @@ -112,27 +107,18 @@ bottom: 1%; } -.alphaPicker-fixed-left { - left: .4em; -} - .alphaPicker-fixed-right { - right: .4em; + right: 0.4em; } @media all and (min-width: 62.5em) { - .alphaPicker-fixed-left { - left: 1em; - } - .alphaPicker-fixed-right { right: 1em; } } @media all and (max-height: 31.25em) { - .alphaPicker-fixed { display: none !important; } diff --git a/src/components/appRouter.js b/src/components/appRouter.js index 8643e3f47f..7b36d01bdd 100644 --- a/src/components/appRouter.js +++ b/src/components/appRouter.js @@ -545,13 +545,18 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM page.back(); } + /** + * Pages of "no return" (when "Go back" should behave differently, probably quitting the application). + */ + var startPages = ['home', 'login', 'selectserver']; + function canGoBack() { var curr = current(); if (!curr) { return false; } - if (curr.type === 'home') { + if (!document.querySelector('.dialogContainer') && startPages.indexOf(curr.type) !== -1) { return false; } return page.canGoBack(); diff --git a/src/components/appfooter/appfooter.css b/src/components/appfooter/appfooter.css index 789bc1db20..93cb3a75a5 100644 --- a/src/components/appfooter/appfooter.css +++ b/src/components/appfooter/appfooter.css @@ -8,6 +8,6 @@ contain: layout style; } - .appfooter.headroom--unpinned { - transform: translateY(100%)!important; - } \ No newline at end of file +.appfooter.headroom--unpinned { + transform: translateY(100%) !important; +} diff --git a/src/components/apphost.js b/src/components/apphost.js index b1b1c30dc9..0c4d2a6dca 100644 --- a/src/components/apphost.js +++ b/src/components/apphost.js @@ -168,23 +168,25 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet return false; } - var savedResult = appSettings.get(htmlMediaAutoplayAppStorageKey); - return "true" === savedResult || "false" !== savedResult && null; + return true; } - function cueSupported() { + function supportsCue() { try { var video = document.createElement("video"); var style = document.createElement("style"); + style.textContent = "video::cue {background: inherit}"; document.body.appendChild(style); document.body.appendChild(video); + var cue = window.getComputedStyle(video, "::cue").background; document.body.removeChild(style); document.body.removeChild(video); + return !!cue.length; } catch (err) { - console.log("Error detecting cue support:" + err); + console.log("error detecting cue support: " + err); return false; } } @@ -204,8 +206,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet } } - var htmlMediaAutoplayAppStorageKey = "supportshtmlmediaautoplay0"; - var supportedFeatures = function () { var features = []; @@ -280,7 +280,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet //features.push("multiserver"); features.push("screensaver"); - if (!browser.orsay && !browser.tizen && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || cueSupported())) { + if (!browser.orsay && !browser.tizen && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) { features.push("subtitleappearancesettings"); } @@ -299,14 +299,48 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet return features; }(); - if (supportedFeatures.indexOf("htmlvideoautoplay") === -1 && supportsHtmlMediaAutoplay() !== false) { - require(["autoPlayDetect"], function (autoPlayDetect) { - autoPlayDetect.supportsHtmlMediaAutoplay().then(function () { - appSettings.set(htmlMediaAutoplayAppStorageKey, "true"); - supportedFeatures.push("htmlvideoautoplay"); - supportedFeatures.push("htmlaudioautoplay"); - }, function () { - appSettings.set(htmlMediaAutoplayAppStorageKey, "false"); + /** + * Do exit according to platform + */ + function doExit() { + try { + if (window.NativeShell) { + window.NativeShell.AppHost.exit(); + } else if (browser.tizen) { + tizen.application.getCurrentApplication().exit(); + } else if (browser.web0s) { + webOS.platformBack(); + } else { + window.close(); + } + } catch (err) { + console.log("error closing application: " + err); + } + } + + var exitPromise; + + /** + * Ask user for exit + */ + function askForExit() { + if (!!exitPromise) { + return; + } + + require(["actionsheet"], function (actionsheet) { + exitPromise = actionsheet.show({ + title: Globalize.translate("MessageConfirmAppExit"), + items: [ + {id: "yes", name: Globalize.translate("Yes")}, + {id: "no", name: Globalize.translate("No")} + ] + }).then(function (value) { + if (value === "yes") { + doExit(); + } + }).finally(function () { + exitPromise = null; }); }); } @@ -326,16 +360,10 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet alert("setWindowState is not supported and should not be called"); }, exit: function () { - if (window.NativeShell) { - window.NativeShell.AppHost.exit(); - } else if (browser.tizen) { - try { - tizen.application.getCurrentApplication().exit(); - } catch (err) { - console.log("error closing application: " + err); - } + if (!!window.appMode && browser.tizen) { + askForExit(); } else { - window.close(); + doExit(); } }, supports: function (command) { @@ -395,7 +423,9 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet } } }; + var doc = self.document; + var isHidden = false; if (doc) { if (void 0 !== doc.visibilityState) { @@ -419,8 +449,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet } } - var isHidden = false; - if (doc) { doc.addEventListener(visibilityChange, function () { if (document[visibilityState]) { diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css index 5520ce2c7e..96bd28e8d1 100644 --- a/src/components/cardbuilder/card.css +++ b/src/components/cardbuilder/card.css @@ -1,23 +1,24 @@ +button { + -webkit-border-fit: border !important; +} + button::-moz-focus-inner { padding: 0; border: 0; } -button { - -webkit-border-fit: border !important; -} - .card { border: 0; font-size: inherit !important; font-family: inherit !important; text-transform: none; - background-color: transparent !important; background: none !important; + background-color: transparent !important; margin: 0; padding: 0; display: block; color: inherit !important; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none !important; cursor: pointer; contain: layout style; @@ -54,17 +55,27 @@ button { contain: layout style; } -.cardPadder-backdrop, .cardPadder-mixedBackdrop, .cardPadder-smallBackdrop, .cardPadder-overflowBackdrop, .cardPadder-overflowSmallBackdrop { +.cardPadder-backdrop, +.cardPadder-mixedBackdrop, +.cardPadder-smallBackdrop, +.cardPadder-overflowBackdrop, +.cardPadder-overflowSmallBackdrop { padding-bottom: 56.25%; contain: strict; } -.cardPadder-square, .cardPadder-mixedSquare, .cardPadder-overflowSquare, .overflowSquareCard-textCardPadder { +.cardPadder-square, +.cardPadder-mixedSquare, +.cardPadder-overflowSquare, +.overflowSquareCard-textCardPadder { padding-bottom: 100%; contain: strict; } -.cardPadder-portrait, .cardPadder-mixedPortrait, .cardPadder-overflowPortrait, .overflowPortraitCard-textCardPadder { +.cardPadder-portrait, +.cardPadder-mixedPortrait, +.cardPadder-overflowPortrait, +.overflowPortraitCard-textCardPadder { padding-bottom: 150%; contain: strict; } @@ -79,23 +90,26 @@ button { margin: 0.6em; transition: none; border: 0 solid transparent; + + /* These both are needed in case cardBox is a button */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none !important; contain: layout; contain: style; } +.card.show-animation .cardBox { + will-change: transform; + transition: transform 200ms ease-out; +} + .card.show-focus:not(.show-animation) .cardBox { - margin: .4em; + margin: 0.4em; } .card.show-focus:not(.show-animation) .cardBox.visualCardBox, .card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable { - border: .5em solid transparent; -} - -.card.show-animation .cardBox { - will-change: transform; - transition: transform 200ms ease-out; + border: 0.5em solid transparent; } .card.show-animation:focus > .cardBox { @@ -120,7 +134,7 @@ button { .btnCardOptions { position: absolute; - bottom: .25em; + bottom: 0.25em; right: 0; margin: 0 !important; z-index: 1; @@ -131,8 +145,8 @@ button { position: absolute; align-items: center; justify-content: center; - top: .3em; - left: .3em; + top: 0.3em; + left: 0.3em; text-align: center; vertical-align: middle; width: 1.6em; @@ -146,12 +160,14 @@ button { background-size: cover; background-repeat: no-repeat; background-position: center center; + display: -webkit-flex; display: flex; align-items: center; justify-content: center; position: relative; background-clip: content-box !important; color: inherit; + /* This is only needed for scalable cards */ height: 100%; contain: strict; @@ -173,12 +189,16 @@ button { left: 0; right: 0; bottom: 0; + /* Needed in case this is a button */ display: block; + /* Needed in case this is a button */ margin: 0 !important; + /* Needed in safari */ height: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none !important; contain: strict; } @@ -207,10 +227,6 @@ button { box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); } -.cardImageContainer { - display: flex; -} - .cardImage { position: absolute; top: 0; @@ -226,6 +242,7 @@ button { .cardImage-img { max-height: 100%; max-width: 100%; + /* This is simply for lazy image purposes, to ensure the image is visible sooner when scrolling */ min-height: 70%; min-width: 70%; @@ -252,17 +269,17 @@ button { } .cardFooter { - padding: .3em .3em .5em .3em; + padding: 0.3em 0.3em 0.5em 0.3em; position: relative; } .visualCardBox { box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); - border-radius: .145em; + border-radius: 0.145em; } .innerCardFooter { - background: rgba(0,0,0,.7); + background: rgba(0, 0, 0, 0.7); position: absolute; bottom: 0; left: 0; @@ -282,7 +299,7 @@ button { } .cardText { - padding: .06em .5em; + padding: 0.06em 0.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -294,7 +311,24 @@ button { } .cardText-first { - padding-top: .24em; + padding-top: 0.24em; +} + +.textActionButton { + border: 0 !important; + background: transparent; + padding: 0 !important; + cursor: pointer; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + outline: none !important; + color: inherit; + vertical-align: middle; + font-family: inherit; + font-size: inherit; +} + +.textActionButton:hover { + text-decoration: underline; } .cardText > .textActionButton { @@ -304,7 +338,7 @@ button { } .innerCardFooter > .cardText { - padding: .3em .5em; + padding: 0.3em 0.5em; } .cardFooter-withlogo { @@ -336,23 +370,6 @@ button { text-align: center; } -.textActionButton { - border: 0 !important; - background: transparent; - border: 0 !important; - padding: 0 !important; - cursor: pointer; - outline: none !important; - color: inherit; - vertical-align: middle; - font-family: inherit; - font-size: inherit; -} - -.textActionButton:hover { - text-decoration: underline; -} - .cardImageIcon { font-size: 5em; color: inherit; @@ -360,12 +377,12 @@ button { .cardImageIcon-small { font-size: 3em; - margin-bottom: .1em; + margin-bottom: 0.1em; } .cardIndicators { - right: .225em; - top: .225em; + right: 0.225em; + top: 0.225em; position: absolute; display: flex; align-items: center; @@ -382,16 +399,16 @@ button { } .programAttributeIndicator { - padding: .18em .5em; + padding: 0.18em 0.5em; color: #fff; font-weight: 500; } .cardOverlayButton { - color: rgba(255, 255, 255, .76); + color: rgba(255, 255, 255, 0.76); margin: 0; z-index: 1; - padding: .75em; + padding: 0.75em; font-size: 88%; } @@ -402,7 +419,7 @@ button { } .cardOverlayButtonIcon { - background-color: rgba(0,0,0,.7) !important; + background-color: rgba(0, 0, 0, 0.7) !important; border-radius: 100em; width: 1.5em !important; height: 1.5em !important; @@ -424,10 +441,10 @@ button { height: 2.6em; top: 50%; left: 50%; - background-color: rgba(0,0,0,.5) !important; - border: .06em solid rgba(255,255,255,.6); - padding: .38em !important; - color: rgba(255, 255, 255, .76); + background-color: rgba(0, 0, 0, 0.5) !important; + border: 0.06em solid rgba(255, 255, 255, 0.6); + padding: 0.38em !important; + color: rgba(255, 255, 255, 0.76); transition: transform 200ms ease-out; } @@ -474,13 +491,15 @@ button { width: 33.333333333333333333333333333333%; } - .squareCard, .portraitCard { + .squareCard, + .portraitCard { width: 33.333333333333333333333333333333%; } } @media (min-width: 43.75em) { - .squareCard, .portraitCard { + .squareCard, + .portraitCard { width: 25%; } } @@ -496,7 +515,8 @@ button { width: 50%; } - .squareCard, .portraitCard { + .squareCard, + .portraitCard { width: 20%; } @@ -516,7 +536,8 @@ button { width: 25%; } - .squareCard, .portraitCard { + .squareCard, + .portraitCard { width: 16.666666666666666666666666666667%; } @@ -529,9 +550,9 @@ button { } } - @media (min-width: 87.5em) { - .squareCard, .portraitCard { + .squareCard, + .portraitCard { width: 14.285714285714285714285714285714%; } @@ -549,13 +570,15 @@ button { width: 20%; } - .squareCard, .portraitCard { + .squareCard, + .portraitCard { width: 12.5%; } } @media (min-width: 120em) { - .squareCard, .portraitCard { + .squareCard, + .portraitCard { width: 11.111111111111111111111111111111%; } } @@ -565,7 +588,8 @@ button { width: 25%; } - .squareCard, .portraitCard { + .squareCard, + .portraitCard { width: 10%; } } @@ -596,7 +620,8 @@ button { width: 72vw; } -.overflowSquareCard, .overflowPortraitCard { +.overflowSquareCard, +.overflowPortraitCard { width: 40vw; } @@ -621,29 +646,34 @@ button { } @media (min-width: 43.75em) { - .overflowSquareCard, .overflowPortraitCard { + .overflowSquareCard, + .overflowPortraitCard { width: 23.1vw; } } @media (min-width: 48.125em) { - .overflowBackdropCard, .overflowSmallBackdropCard { + .overflowBackdropCard, + .overflowSmallBackdropCard { width: 30vw; } } @media (orientation: landscape) { - .overflowBackdropCard, .overflowSmallBackdropCard { + .overflowBackdropCard, + .overflowSmallBackdropCard { width: 30vw; } - .overflowSquareCard, .overflowPortraitCard { + .overflowSquareCard, + .overflowPortraitCard { width: 23.1vw; } } @media (orientation: landscape) and (min-width: 48.125em) { - .overflowBackdropCard, .overflowSmallBackdropCard { + .overflowBackdropCard, + .overflowSmallBackdropCard { width: 23.1vw; } } @@ -655,55 +685,60 @@ button { } @media (min-width: 50em) { - .overflowSquareCard, .overflowPortraitCard { + .overflowSquareCard, + .overflowPortraitCard { width: 18.5vw; } } @media (min-width: 75em) { - .overflowBackdropCard, .overflowSmallBackdropCard { + .overflowBackdropCard, + .overflowSmallBackdropCard { width: 23.1vw; } - .overflowSquareCard, .overflowPortraitCard { + .overflowSquareCard, + .overflowPortraitCard { width: 15.5vw; } } @media (min-width: 87.5em) { - .overflowSquareCard, .overflowPortraitCard { + .overflowSquareCard, + .overflowPortraitCard { width: 13.3vw; } } @media (min-width: 100em) { - - .overflowBackdropCard, .overflowSmallBackdropCard { + .overflowBackdropCard, + .overflowSmallBackdropCard { width: 18.7vw; } - .overflowSquareCard, .overflowPortraitCard { + .overflowSquareCard, + .overflowPortraitCard { width: 11.6vw; } } @media (min-width: 120em) { - - .overflowSquareCard, .overflowPortraitCard { + .overflowSquareCard, + .overflowPortraitCard { width: 10.3vw; } } @media (min-width: 131.25em) { - - .overflowSquareCard, .overflowPortraitCard { + .overflowSquareCard, + .overflowPortraitCard { width: 9.3vw; } } @media (min-width: 156.25em) { - - .overflowBackdropCard, .overflowSmallBackdropCard { + .overflowBackdropCard, + .overflowSmallBackdropCard { width: 15.6vw; } } @@ -720,7 +755,8 @@ button { padding-bottom: 87.75%; } -.itemsContainer-tv > .overflowSquareCard, .itemsContainer-tv > .overflowPortraitCard { +.itemsContainer-tv > .overflowSquareCard, +.itemsContainer-tv > .overflowPortraitCard { width: 15.6vw; } @@ -729,9 +765,9 @@ button { } .cardOverlayContainer { - background: rgba(0,0,0,0.5); + background: rgba(0, 0, 0, 0.5); opacity: 0; - transition: opacity .2s; + transition: opacity 0.2s; position: absolute; top: 0; left: 0; @@ -760,7 +796,7 @@ button { } .cardOverlayFab-primary { - background-color: rgba(0,0,0,0.7); + background-color: rgba(0, 0, 0, 0.7); font-size: 130%; padding: 0; width: 3em; diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index 44c5b3b079..ac61575b14 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/src/components/cardbuilder/cardBuilder.js @@ -758,7 +758,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana if (isOuterFooter && options.cardLayout && layoutManager.mobile) { if (options.cardFooterAside !== 'none') { - html += ''; + html += ''; } } @@ -1018,7 +1018,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana return text; } - var html = ''; @@ -1316,15 +1316,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana var btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction'; if (options.centerPlayButton) { - overlayButtons += ''; + overlayButtons += ''; } if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType !== 'Virtual' || !item.MediaType || item.Type === 'Program') && item.Type !== 'Person') { - overlayButtons += ''; + overlayButtons += ''; } if (options.overlayMoreButton) { - overlayButtons += ''; + overlayButtons += ''; } } @@ -1457,7 +1457,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light'; if (playbackManager.canPlay(item)) { - html += ''; + html += ''; } html += '
'; @@ -1466,7 +1466,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana if (itemHelper.canMarkPlayed(item)) { require(['emby-playstatebutton']); - html += ''; + html += ''; } if (itemHelper.canRate(item)) { @@ -1474,10 +1474,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana var likes = userData.Likes == null ? '' : userData.Likes; require(['emby-ratingbutton']); - html += ''; + html += ''; } - html += ''; + html += ''; html += '
'; html += '

'; @@ -1487,16 +1487,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana function getCardDefaultText(item, options) { if (item.CollectionType) { - return '' + imageHelper.getLibraryIcon(item.CollectionType) + '' + return '' + imageHelper.getLibraryIcon(item.CollectionType) + '' } if (item.Type === 'MusicAlbum') { - return 'album'; + return 'album'; } if (item.Type === 'MusicArtist' || item.Type === 'Person') { - return 'person'; + return 'person'; } if (options.defaultCardImageIcon) { - return '' + options.defaultCardImageIcon + ''; + return '' + options.defaultCardImageIcon + ''; } var defaultName = isUsingLiveTvNaming(item) ? item.Name : itemHelper.getDisplayName(item); @@ -1585,7 +1585,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana indicatorsElem = ensureIndicators(card, indicatorsElem); indicatorsElem.appendChild(playedIndicator); } - playedIndicator.innerHTML = 'check'; + playedIndicator.innerHTML = 'check'; } else { playedIndicator = card.querySelector('.playedIndicator'); @@ -1666,7 +1666,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana var icon = cell.querySelector('.timerIndicator'); if (!icon) { var indicatorsElem = ensureIndicators(cell); - indicatorsElem.insertAdjacentHTML('beforeend', 'fiber_manual_record'); + indicatorsElem.insertAdjacentHTML('beforeend', 'fiber_manual_record'); } cell.setAttribute('data-timerid', newTimerId); } diff --git a/src/components/cardbuilder/chaptercardbuilder.js b/src/components/cardbuilder/chaptercardbuilder.js index 0f42e14584..75b940285f 100644 --- a/src/components/cardbuilder/chaptercardbuilder.js +++ b/src/components/cardbuilder/chaptercardbuilder.js @@ -90,7 +90,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse var cardImageContainer = imgUrl ? ('
') : ('
'); if (!imgUrl) { - cardImageContainer += 'local_movies'; + cardImageContainer += 'local_movies'; } var nameHtml = ''; diff --git a/src/components/channelmapper/channelmapper.js b/src/components/channelmapper/channelmapper.js index 0247f79a55..ee89b1799d 100644 --- a/src/components/channelmapper/channelmapper.js +++ b/src/components/channelmapper/channelmapper.js @@ -71,7 +71,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee function getTunerChannelHtml(channel, providerName) { var html = ""; html += '
'; - html += 'dvr'; + html += 'dvr'; html += '
'; html += '

'; html += channel.Name; @@ -84,7 +84,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee html += "

"; html += "
"; - html += ''; + html += ''; return html += "
"; } @@ -127,7 +127,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee var html = ""; var title = globalize.translate("MapChannels"); html += '
'; - html += ''; + html += ''; html += '

'; html += title; html += "

"; diff --git a/src/components/chromecast/chromecastplayer.js b/src/components/chromecast/chromecastplayer.js index 7302b74124..112d2980ab 100644 --- a/src/components/chromecast/chromecastplayer.js +++ b/src/components/chromecast/chromecastplayer.js @@ -686,6 +686,13 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' }); } + if (options.items.length > 1 && options && options.ids) { + // Use the original request id array for sorting the result in the proper order + options.items.sort(function (a, b) { + return options.ids.indexOf(a.Id) - options.ids.indexOf(b.Id); + }); + } + return this._castPlayer.loadMedia(options, command); }; diff --git a/src/components/collectioneditor/collectioneditor.js b/src/components/collectioneditor/collectioneditor.js index a91594556e..864e03ab52 100644 --- a/src/components/collectioneditor/collectioneditor.js +++ b/src/components/collectioneditor/collectioneditor.js @@ -243,13 +243,13 @@ define(['dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManage var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection'); html += '
'; - html += ''; + html += ''; html += '

'; html += title; html += '

'; if (appHost.supports('externallinks')) { - html += 'info' + globalize.translate('Help') + ''; + html += 'info' + globalize.translate('Help') + ''; } html += '
'; diff --git a/src/components/dialogHelper/dialoghelper.css b/src/components/dialogHelper/dialoghelper.css index aa4145e016..df2adf075f 100644 --- a/src/components/dialogHelper/dialoghelper.css +++ b/src/components/dialogHelper/dialoghelper.css @@ -15,10 +15,12 @@ .dialog { margin: 0; - border-radius: .2em; + border-radius: 0.2em; + -webkit-font-smoothing: antialiased; border: 0; padding: 0; will-change: transform, opacity; + /* Strict does not work well with actionsheet */ contain: style paint; box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4); @@ -50,13 +52,13 @@ to { opacity: 0; - transform: scale(.5); + transform: scale(0.5); } } @keyframes scaleup { from { - transform: scale(.5); + transform: scale(0.5); opacity: 0; } @@ -77,7 +79,6 @@ } @keyframes fadeout { - from { opacity: 1; } @@ -100,7 +101,6 @@ } @keyframes slidedown { - from { opacity: 1; transform: none; @@ -113,8 +113,8 @@ } @media all and (max-width: 80em), all and (max-height: 45em) { - - .dialog-fixedSize, .dialog-fullscreen-lowres { + .dialog-fixedSize, + .dialog-fullscreen-lowres { position: fixed !important; top: 0 !important; bottom: 0 !important; @@ -126,7 +126,6 @@ } @media all and (min-width: 80em) and (min-height: 45em) { - .dialog-medium { width: 80%; height: 80%; @@ -168,5 +167,5 @@ } .dialogBackdropOpened { - opacity: .5; + opacity: 0.5; } diff --git a/src/components/directorybrowser/directorybrowser.css b/src/components/directorybrowser/directorybrowser.css index 0f3f22f073..ef6d58934f 100644 --- a/src/components/directorybrowser/directorybrowser.css +++ b/src/components/directorybrowser/directorybrowser.css @@ -1,8 +1,8 @@ #ulDirectoryPickerList a { - padding-top: .4em; - padding-bottom: .4em + padding-top: 0.4em; + padding-bottom: 0.4em; } .lblDirectoryPickerPath { - white-space: nowrap -} \ No newline at end of file + white-space: nowrap; +} diff --git a/src/components/directorybrowser/directorybrowser.js b/src/components/directorybrowser/directorybrowser.js index 344d4bb593..d4d25fa905 100644 --- a/src/components/directorybrowser/directorybrowser.js +++ b/src/components/directorybrowser/directorybrowser.js @@ -76,7 +76,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper- html += name; html += "
"; html += "
"; - html += 'arrow_forward'; + html += 'arrow_forward'; html += ""; return html; } @@ -116,7 +116,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper- html += ''; html += ""; if (!readOnlyAttribute) { - html += ''; + html += ''; } html += ""; if (!readOnlyAttribute) { @@ -265,7 +265,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper- var html = ""; html += '
'; - html += ''; + html += ''; html += '

'; html += options.header || Globalize.translate("HeaderSelectPath"); html += "

"; diff --git a/src/components/emby-scrollbuttons/emby-scrollbuttons.css b/src/components/emby-scrollbuttons/emby-scrollbuttons.css index 6786824bd6..32e60292ad 100644 --- a/src/components/emby-scrollbuttons/emby-scrollbuttons.css +++ b/src/components/emby-scrollbuttons/emby-scrollbuttons.css @@ -4,11 +4,11 @@ right: 0; align-items: center; justify-content: center; - min-width:104px; - min-height:24px; + min-width: 104px; + min-height: 24px; padding-top: 1.25em; z-index: 1; - color: #ffffff; + color: #fff; display: flex; } diff --git a/src/components/emby-scrollbuttons/emby-scrollbuttons.js b/src/components/emby-scrollbuttons/emby-scrollbuttons.js index deec96d9a2..0b769a9821 100644 --- a/src/components/emby-scrollbuttons/emby-scrollbuttons.js +++ b/src/components/emby-scrollbuttons/emby-scrollbuttons.js @@ -10,7 +10,7 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', ' var icon = direction === 'left' ? 'chevron_left' : 'chevron_right'; html += ''; return html; diff --git a/src/components/emby-scroller/emby-scroller.js b/src/components/emby-scroller/emby-scroller.js index 0b36483be3..f943047f52 100644 --- a/src/components/emby-scroller/emby-scroller.js +++ b/src/components/emby-scroller/emby-scroller.js @@ -155,7 +155,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro initCenterFocus(this, this.scroller); } - if (bindHeader) { + if (bindHeader && layoutManager.mobile) { initHeadroom(this); } diff --git a/src/components/emby-tabs/emby-tabs.css b/src/components/emby-tabs/emby-tabs.css index b8831b881a..8d1ac464fb 100644 --- a/src/components/emby-tabs/emby-tabs.css +++ b/src/components/emby-tabs/emby-tabs.css @@ -31,6 +31,10 @@ overflow: hidden; } +.layout-mobile .emby-tabs-slider { + overflow: auto; +} + .tabContent:not(.is-active) { display: none; } diff --git a/src/components/favoriteitems.js b/src/components/favoriteitems.js index 17129ea54e..7dff81f5ad 100644 --- a/src/components/favoriteitems.js +++ b/src/components/favoriteitems.js @@ -136,7 +136,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad html += '

'; html += globalize.translate(section.name); html += "

"; - html += 'chevron_right'; + html += 'chevron_right'; html += ""; } else { html += '

' + globalize.translate(section.name) + "

"; diff --git a/src/components/filterdialog/style.css b/src/components/filterdialog/style.css index 69a82d2408..f05ef2e4a8 100644 --- a/src/components/filterdialog/style.css +++ b/src/components/filterdialog/style.css @@ -5,31 +5,32 @@ margin-top: 0 !important; margin-bottom: 0 !important; margin-right: 0 !important; + -webkit-border-radius: 0 !important; border-radius: 0 !important; max-height: none !important; - max-width: none !important + max-width: none !important; } -@media all and (min-height:600px) { +@media all and (min-height: 600px) { .dynamicFilterDialog { top: 10% !important; - bottom: 25% !important + bottom: 25% !important; } } -@media all and (max-width:400px) { +@media all and (max-width: 400px) { .dynamicFilterDialog { width: auto; left: 10vw !important; right: 10vw !important; - margin-left: 0 !important + margin-left: 0 !important; } } -@media all and (min-width:400px) { +@media all and (min-width: 400px) { .dynamicFilterDialog { - width: 300px; - margin-left: -150px !important; - left: 50% !important + width: 20.16em; + margin-left: -10.08em !important; + left: 50% !important; } } diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js index f2196bf632..6f29064dbe 100644 --- a/src/components/filtermenu/filtermenu.js +++ b/src/components/filtermenu/filtermenu.js @@ -279,7 +279,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost', var html = ''; html += '
'; - html += ''; + html += ''; html += '

${Filters}

'; html += '
'; diff --git a/src/components/formdialog.css b/src/components/formdialog.css index b976d8130e..788331da94 100644 --- a/src/components/formdialog.css +++ b/src/components/formdialog.css @@ -5,14 +5,15 @@ } .formDialogHeader { - padding: 1em .5em; + padding: 1em 0.5em; display: flex; align-items: center; flex-shrink: 0; } .formDialogHeaderTitle { - margin-left: .25em; + margin-left: 0.25em; + /* In case of h1, h2, h3 */ margin-top: 0; margin-bottom: 0; @@ -23,7 +24,7 @@ } .dialogContentInner { - padding: .5em 1em 20em 1em; + padding: 0.5em 1em 20em 1em; } .dialogContentInner-mini { @@ -46,6 +47,7 @@ display: flex; position: absolute; padding: 1.25em 1em; + /* Without this emby-checkbox is able to appear on top */ z-index: 1; align-items: center; @@ -62,11 +64,11 @@ padding-bottom: 1.5em; flex-direction: column; width: 80% !important; - padding-top: .5em; + padding-top: 0.5em; } .formDialogFooterItem { - margin: .5em !important; + margin: 0.5em !important; flex-grow: 1; text-align: center; flex-basis: 0; @@ -91,7 +93,6 @@ } @media all and (min-width: 50em) { - .formDialogFooterItem { max-width: 80%; } @@ -103,7 +104,6 @@ } @media all and (min-width: 80em) { - .formDialogFooterItem { max-width: 70%; } diff --git a/src/components/guide/guide-settings.template.html b/src/components/guide/guide-settings.template.html index d85b4a71b9..f5a52a7475 100644 --- a/src/components/guide/guide-settings.template.html +++ b/src/components/guide/guide-settings.template.html @@ -1,5 +1,5 @@
- +

${Settings}

diff --git a/src/components/guide/guide.css b/src/components/guide/guide.css index 7dd0594149..3b776e6dde 100644 --- a/src/components/guide/guide.css +++ b/src/components/guide/guide.css @@ -14,12 +14,12 @@ } .layout-desktop .tvGuideHeader { - margin-bottom: .5em; + margin-bottom: 0.5em; } .guideHeaderDateSelection { font-size: 86%; - padding: .4em 0; + padding: 0.4em 0; } .guide-headerTimeslots { @@ -39,10 +39,10 @@ .guideProgramIndicator { text-transform: uppercase; - border-radius: .25em; - margin-right: .5em; + border-radius: 0.25em; + margin-right: 0.5em; font-size: 82%; - padding: .2em .25em; + padding: 0.2em 0.25em; display: inline-flex; align-items: center; justify-content: center; @@ -51,6 +51,8 @@ } .guide-channelTimeslotHeader { + border: 0 !important; + border-right-color: transparent; flex-shrink: 0; justify-content: center; } @@ -69,9 +71,14 @@ } .channelPrograms { + height: 4.42em; + contain: strict; + display: flex; + flex-direction: column; + border-style: solid; + border-width: 1px 0 1px 0; white-space: nowrap; position: relative; - contain: strict; box-sizing: border-box; } @@ -80,31 +87,32 @@ } .guideSpacer { - width: .3em; + width: 0.3em; flex-shrink: 0; } -.channelPrograms, .timeslotHeadersInner { +.channelPrograms, +.timeslotHeadersInner { width: 1800vw; } @media all and (min-width: 37.5em) { - - .channelPrograms, .timeslotHeadersInner { + .channelPrograms, + .timeslotHeadersInner { width: 1400vw; } } @media all and (min-width: 50em) { - - .channelPrograms, .timeslotHeadersInner { + .channelPrograms, + .timeslotHeadersInner { width: 1200vw; } } @media all and (min-width: 80em) { - - .channelPrograms, .timeslotHeadersInner { + .channelPrograms, + .timeslotHeadersInner { width: 810vw; } } @@ -112,11 +120,17 @@ .timeslotHeader { display: inline-flex; align-items: center; - text-indent: .25em; + text-indent: 0.25em; width: 2.0833333333333333333333333333333%; } -.guide-channelHeaderCell, .guide-channelTimeslotHeader { +.programCell, +.guide-channelHeaderCell { + outline: none !important; +} + +.guide-channelHeaderCell, +.guide-channelTimeslotHeader { padding: 0 !important; cursor: pointer; outline: none !important; @@ -130,11 +144,12 @@ display: flex; align-items: center; text-decoration: none; + /* Needed in firefox */ text-align: left; contain: strict; flex-shrink: 0; - border-radius: .12em; + border-radius: 0.12em; color: inherit; } @@ -148,37 +163,38 @@ background: transparent; } -.guide-channelTimeslotHeader { - border: 0 !important; -} - /* Important - have to put the fixed width on channelsContainer, not the individual channelHeaderCell This was causing channelsContainer to extend beyond the fixed width on ps4, tizen, lg and opera tv. */ -.channelsContainer, .guide-channelTimeslotHeader { +.channelsContainer, +.guide-channelTimeslotHeader { width: 24vw; } -@media all and (min-width:31.25em) { - .channelsContainer, .guide-channelTimeslotHeader { +@media all and (min-width: 31.25em) { + .channelsContainer, + .guide-channelTimeslotHeader { width: 16vw; } } -@media all and (min-width:37.5em) { - .channelsContainer, .guide-channelTimeslotHeader { +@media all and (min-width: 37.5em) { + .channelsContainer, + .guide-channelTimeslotHeader { width: 16vw; } } -@media all and (min-width:50em) { - .channelsContainer, .guide-channelTimeslotHeader { +@media all and (min-width: 50em) { + .channelsContainer, + .guide-channelTimeslotHeader { width: 14vw; } } -@media all and (min-width:80em) { - .channelsContainer, .guide-channelTimeslotHeader { +@media all and (min-width: 80em) { + .channelsContainer, + .guide-channelTimeslotHeader { width: 12vw; } } @@ -197,34 +213,26 @@ } @media all and (max-width: 50em) { - - .newTvProgram, .liveTvProgram, .premiereTvProgram, .guideHdIcon { + .newTvProgram, + .liveTvProgram, + .premiereTvProgram, + .guideHdIcon { display: none; } } -.channelPrograms { - height: 4.42em; - contain: strict; - display: flex; - flex-direction: column; - border-style: solid; - border-width: 1px 0 1px 0; +.channelPrograms + .channelPrograms, +.guide-channelHeaderCell + .guide-channelHeaderCell { + margin-top: -1px; } - .channelPrograms + .channelPrograms, .guide-channelHeaderCell + .guide-channelHeaderCell { - margin-top: -1px; - } - -.channelPrograms-tv, .guide-channelHeaderCell-tv { +.channelPrograms-tv, +.guide-channelHeaderCell-tv { height: 3em; } -.guide-channelTimeslotHeader { - border-right-color: transparent; -} - -.guide-channelTimeslotHeader, .timeslotHeader { +.guide-channelTimeslotHeader, +.timeslotHeader { background: transparent !important; height: 2.8em; } @@ -253,6 +261,7 @@ text-decoration: none; overflow: hidden; align-items: center; + /* Needed for Firefox */ text-align: left; contain: strict; @@ -261,7 +270,7 @@ } .guideProgramName { - padding: 0 .7em 0; + padding: 0 0.7em 0; overflow: hidden; text-overflow: ellipsis; align-items: center; @@ -269,7 +278,8 @@ position: relative; flex-grow: 1; contain: layout style paint; - /*transition: transform 60ms ease-out;*/ + + /* transition: transform 60ms ease-out; */ } .guide-programNameCaret { @@ -289,11 +299,11 @@ .guideProgramSecondaryInfo { display: flex; align-items: center; - margin-top: .1em; + margin-top: 0.1em; } .programIcon { - margin-left: .5em; + margin-left: 0.5em; height: 1em; width: 1em; font-size: 1.6em; @@ -304,16 +314,16 @@ .guide-programTextIcon { font-weight: bold; - font-size: .9em; - padding: .16em .3em; - border-radius: .25em; - margin-right: .35em; + font-size: 0.9em; + padding: 0.16em 0.3em; + border-radius: 0.25em; + margin-right: 0.35em; width: auto; height: auto; } .guide-programTextIcon-tv { - font-size: .74em; + font-size: 0.74em; } .guideChannelNumber { @@ -345,14 +355,12 @@ } @media all and (min-width: 62.5em) { - .guideChannelName { max-width: 40%; } } @media all and (max-width: 62.5em) { - .guideChannelNumber { display: none; } @@ -368,21 +376,19 @@ flex-direction: column; } -.channelsContainer, .programGrid { +.channelsContainer, +.programGrid { contain: layout style paint; } -.programCell, .guide-channelHeaderCell { - outline: none !important; -} - -.timerIcon, .seriesTimerIcon { - color: #cc3333 !important; +.timerIcon, +.seriesTimerIcon { + color: #c33 !important; } .seriesTimerIcon-inactive { color: inherit !important; - opacity: .7; + opacity: 0.7; } .guideOptions { @@ -392,7 +398,6 @@ } @media all and (max-width: 50em), all and (max-height: 37.5em) { - .tvGuideHeader { padding-left: 0; } @@ -415,16 +420,16 @@ } .guide-date-tab-button { - padding: .3em .7em !important; - margin: 0 .3em !important; + padding: 0.3em 0.7em !important; + margin: 0 0.3em !important; font-weight: normal; } - .guide-date-tab-button.emby-tab-button-active { - border-color: transparent !important; - } +.guide-date-tab-button.emby-tab-button-active { + border-color: transparent !important; +} - .guide-date-tab-button.show-focus:focus { - border-radius: .15em !important; - transform: none !important; - } +.guide-date-tab-button.show-focus:focus { + border-radius: 0.15em !important; + transform: none !important; +} diff --git a/src/components/guide/guide.js b/src/components/guide/guide.js index c8ed31df0f..9144886945 100644 --- a/src/components/guide/guide.js +++ b/src/components/guide/guide.js @@ -416,7 +416,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', var status; if (item.Type === 'SeriesTimer') { - return 'fiber_smart_record'; + return 'fiber_smart_record'; } else if (item.TimerId || item.SeriesTimerId) { status = item.Status || 'Cancelled'; @@ -430,13 +430,13 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', if (item.SeriesTimerId) { if (status !== 'Cancelled') { - return 'fiber_smart_record'; + return 'fiber_smart_record'; } - return 'fiber_smart_record'; + return 'fiber_smart_record'; } - return 'fiber_manual_record'; + return 'fiber_manual_record'; } function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) { @@ -550,7 +550,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', html += '
'; - html += '
keyboard_arrow_left
'; + html += '
keyboard_arrow_left
'; html += '
' + program.Name; @@ -578,7 +578,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', html += '
'; if (program.IsHD && options.showHdIcon) { - //html += 'hd'; + //html += 'hd'; if (layoutManager.tv) { html += '
HD
'; } else { @@ -1106,7 +1106,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', var icon = cell.querySelector('.timerIcon'); if (!icon) { - cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', 'fiber_manual_record'); + cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', 'fiber_manual_record'); } if (newTimerId) { diff --git a/src/components/guide/programs.css b/src/components/guide/programs.css index 7a559e173f..34976e81ec 100644 --- a/src/components/guide/programs.css +++ b/src/components/guide/programs.css @@ -1,15 +1,15 @@ .newTvProgram { - background: #3388cc; + background: #38c; color: #fff; } .liveTvProgram { - background: #cc3333; + background: #c33; color: #fff; } .premiereTvProgram { - background: #EF6C00; + background: #ef6c00; color: #fff; } diff --git a/src/components/guide/tvguide.template.html b/src/components/guide/tvguide.template.html index 7edffec6d1..3f95448523 100644 --- a/src/components/guide/tvguide.template.html +++ b/src/components/guide/tvguide.template.html @@ -10,7 +10,7 @@
@@ -30,9 +30,9 @@
diff --git a/src/components/headroom/headroom.css b/src/components/headroom/headroom.css index caac40a1b6..df985892ff 100644 --- a/src/components/headroom/headroom.css +++ b/src/components/headroom/headroom.css @@ -8,4 +8,4 @@ .headroom--unpinned:not(.headroomDisabled) { transform: translateY(-100%); -} \ No newline at end of file +} diff --git a/src/components/homescreensettings/homescreensettings.js b/src/components/homescreensettings/homescreensettings.js index 5b966327eb..152fc691f6 100644 --- a/src/components/homescreensettings/homescreensettings.js +++ b/src/components/homescreensettings/homescreensettings.js @@ -149,7 +149,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa currentHtml += '
'; - currentHtml += 'folder_open'; + currentHtml += 'folder_open'; currentHtml += '
'; @@ -159,8 +159,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa currentHtml += '
'; - currentHtml += ''; - currentHtml += ''; + currentHtml += ''; + currentHtml += ''; currentHtml += '
'; diff --git a/src/components/homesections/homesections.css b/src/components/homesections/homesections.css index 5df2440f82..2a119c0981 100644 --- a/src/components/homesections/homesections.css +++ b/src/components/homesections/homesections.css @@ -1,23 +1,24 @@ .homeLibraryButton { min-width: 18%; - margin: .5em !important; + margin: 0.5em !important; } @media all and (max-width: 50em) { - .homeLibraryButton { width: 46% !important; } } .homeLibraryIcon { - margin-left: .5em; - margin-right: .5em; - flex-shrink: 0 + margin-left: 0.5em; + margin-right: 0.5em; + -webkit-flex-shrink: 0; + flex-shrink: 0; } .homeLibraryText { white-space: nowrap; + -o-text-overflow: ellipsis; text-overflow: ellipsis; - overflow: hidden + overflow: hidden; } diff --git a/src/components/homesections/homesections.js b/src/components/homesections/homesections.js index 3f86e16796..af574200f3 100644 --- a/src/components/homesections/homesections.js +++ b/src/components/homesections/homesections.js @@ -161,7 +161,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la for (var i = 0, length = items.length; i < length; i++) { var item = items[i]; var icon = imageHelper.getLibraryIcon(item.CollectionType); - html += '' + icon + '' + item.Name + ''; + html += '' + icon + '' + item.Name + ''; } html += '
'; @@ -260,7 +260,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la html += '

'; html += globalize.translate('LatestFromLibrary', parent.Name); html += '

'; - html += 'chevron_right'; + html += 'chevron_right'; html += ''; } else { html += '

' + globalize.translate('LatestFromLibrary', parent.Name) + '

'; @@ -608,7 +608,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la html += '

'; html += globalize.translate('HeaderOnNow'); html += '

'; - html += 'chevron_right'; + html += 'chevron_right'; html += ''; } else { @@ -683,7 +683,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la html += '

'; html += globalize.translate('HeaderNextUp'); html += '

'; - html += 'chevron_right'; + html += 'chevron_right'; html += ''; } else { html += '

' + globalize.translate('HeaderNextUp') + '

'; diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js index a71b053a21..d2f9632adb 100644 --- a/src/components/htmlvideoplayer/plugin.js +++ b/src/components/htmlvideoplayer/plugin.js @@ -1054,7 +1054,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa var options = { video: videoElement, subUrl: getTextTrackUrl(track, item), - fonts: attachments.map(i => i.DeliveryUrl), + fonts: attachments.map(function (i) { + return i.DeliveryUrl; + }), workerUrl: appRouter.baseUrl() + "/libraries/subtitles-octopus-worker.js", onError: function() { htmlMediaHelper.onErrorInternal(self, 'mediadecodeerror') @@ -1401,7 +1403,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa dlg.classList.add('videoPlayerContainer'); if (options.backdropUrl) { - dlg.classList.add('videoPlayerContainer-withBackdrop'); dlg.style.backgroundImage = "url('" + options.backdropUrl + "')"; } @@ -1410,11 +1411,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa dlg.classList.add('videoPlayerContainer-onTop'); } - // playsinline new for iOS 10 - // https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html - var html = ''; - var cssClass = 'htmlvideoplayer'; if (!browser.chromecast) { @@ -1449,7 +1446,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa self._mediaElement = videoElement; if (mediaManager) { - if (!mediaManager.embyInit) { initMediaManager(); mediaManager.embyInit = true; @@ -1465,9 +1461,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa } else { resolve(videoElement); } - }); - } else { if (options.backdropUrl) { dlg.classList.add('videoPlayerContainer-withBackdrop'); diff --git a/src/components/htmlvideoplayer/style.css b/src/components/htmlvideoplayer/style.css index e1875ff332..5ecf4af66a 100644 --- a/src/components/htmlvideoplayer/style.css +++ b/src/components/htmlvideoplayer/style.css @@ -42,6 +42,7 @@ video::-webkit-media-controls { .htmlvideoplayer::cue { background-color: transparent; text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1); + -webkit-font-smoothing: antialiased; font-family: inherit; } @@ -71,7 +72,7 @@ video::-webkit-media-controls { @keyframes htmlvideoplayer-zoomin { from { transform: scale3d(0.2, 0.2, 0.2); - opacity: .6; + opacity: 0.6; } to { diff --git a/src/components/imagedownloader/imagedownloader.js b/src/components/imagedownloader/imagedownloader.js index 7bd5159a17..019875f35c 100644 --- a/src/components/imagedownloader/imagedownloader.js +++ b/src/components/imagedownloader/imagedownloader.js @@ -116,8 +116,8 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader' if (showControls) { html += '
'; - html += ''; - html += ''; + html += ''; + html += ''; html += '
'; } @@ -277,7 +277,7 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader' if (enableFooterButtons) { html += '
'; - html += ''; + html += ''; html += '
'; } diff --git a/src/components/imagedownloader/imagedownloader.template.html b/src/components/imagedownloader/imagedownloader.template.html index c192fad299..0dc3cc0661 100644 --- a/src/components/imagedownloader/imagedownloader.template.html +++ b/src/components/imagedownloader/imagedownloader.template.html @@ -1,5 +1,5 @@
- +

${Search}

diff --git a/src/components/imageeditor/imageeditor.css b/src/components/imageeditor/imageeditor.css index d45400cac9..5587e7d8d1 100644 --- a/src/components/imageeditor/imageeditor.css +++ b/src/components/imageeditor/imageeditor.css @@ -6,4 +6,4 @@ .first-imageEditor-buttons { margin-top: 2em; -} \ No newline at end of file +} diff --git a/src/components/imageeditor/imageeditor.js b/src/components/imageeditor/imageeditor.js index fade0dd04c..da3d673aa7 100644 --- a/src/components/imageeditor/imageeditor.js +++ b/src/components/imageeditor/imageeditor.js @@ -155,23 +155,23 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', if (image.ImageType === "Backdrop" || image.ImageType === "Screenshot") { if (index > 0) { - html += ''; + html += ''; } else { - html += ''; + html += ''; } if (index < numImages - 1) { - html += ''; + html += ''; } else { - html += ''; + html += ''; } } else { if (imageProviders.length) { - html += ''; + html += ''; } } - html += ''; + html += ''; html += '
'; } diff --git a/src/components/imageeditor/imageeditor.template.html b/src/components/imageeditor/imageeditor.template.html index 3524f449de..57b63550fd 100644 --- a/src/components/imageeditor/imageeditor.template.html +++ b/src/components/imageeditor/imageeditor.template.html @@ -1,5 +1,5 @@
- +

${HeaderEditImages}

@@ -12,10 +12,10 @@

${Images}

@@ -27,10 +27,10 @@

${Backdrops}

@@ -42,10 +42,10 @@

${Screenshots}

diff --git a/src/components/imageoptionseditor/imageoptionseditor.template.html b/src/components/imageoptionseditor/imageoptionseditor.template.html index 9bb1f8426b..3e9a2ae8ce 100644 --- a/src/components/imageoptionseditor/imageoptionseditor.template.html +++ b/src/components/imageoptionseditor/imageoptionseditor.template.html @@ -1,5 +1,5 @@
- +

${HeaderImageOptions}

diff --git a/src/components/images/style.css b/src/components/images/style.css index 06fbf1f9cf..2836dd0159 100644 --- a/src/components/images/style.css +++ b/src/components/images/style.css @@ -1,5 +1,22 @@ .lazy-image-fadein { + opacity: 0; animation: lazy-image-fadein 330ms ease-in normal both; + -webkit-animation-duration: 0.8s; + -moz-animation-duration: 0.8s; + -o-animation-duration: 0.8s; + animation-duration: 0.8s; + -webkit-animation-name: popInAnimation; + -moz-animation-name: popInAnimation; + -o-animation-name: popInAnimation; + animation-name: popInAnimation; + -webkit-animation-fill-mode: forwards; + -moz-animation-fill-mode: forwards; + -o-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-timing-function: cubic-bezier(0, 0, 0.5, 1); + -moz-animation-timing-function: cubic-bezier(0, 0, 0.5, 1); + -o-animation-timing-function: cubic-bezier(0, 0, 0.5, 1); + animation-timing-function: cubic-bezier(0, 0, 0.5, 1); } .lazy-image-fadein-fast { @@ -16,14 +33,6 @@ } } -.lazy-image-fadein { - opacity: 0; - animation-duration: .8s; - animation-name: popInAnimation; - animation-fill-mode: forwards; - animation-timing-function: cubic-bezier(0,0,.5,1); -} - @keyframes popInAnimation { 0% { opacity: 0; @@ -32,4 +41,4 @@ 100% { opacity: 1; } -} \ No newline at end of file +} diff --git a/src/components/imageuploader/imageuploader.template.html b/src/components/imageuploader/imageuploader.template.html index 42d894db6d..b27168075a 100644 --- a/src/components/imageuploader/imageuploader.template.html +++ b/src/components/imageuploader/imageuploader.template.html @@ -1,5 +1,5 @@
- +

${HeaderUploadImage}

@@ -14,7 +14,7 @@

${HeaderAddUpdateImage}

diff --git a/src/components/imageuploader/style.css b/src/components/imageuploader/style.css index bd86d8bff3..dc4fecb108 100644 --- a/src/components/imageuploader/style.css +++ b/src/components/imageuploader/style.css @@ -1,6 +1,7 @@ .imageEditor-dropZone { - border: .2em dashed currentcolor; - border-radius: .25em; + border: 0.2em dashed currentcolor; + border-radius: 0.25em; + /* padding: 1.6em; */ text-align: center; position: relative; @@ -8,4 +9,4 @@ display: flex; align-items: center; justify-content: center; -} \ No newline at end of file +} diff --git a/src/components/indicators/indicators.css b/src/components/indicators/indicators.css index b0d0119c05..e4e7985817 100644 --- a/src/components/indicators/indicators.css +++ b/src/components/indicators/indicators.css @@ -1,8 +1,8 @@ .itemProgressBar { background: #333; - background: rgba(51,51,51,.8); + background: rgba(51, 51, 51, 0.8); position: relative; - height: .28em; + height: 0.28em; } .itemProgressBarForeground { @@ -14,6 +14,7 @@ .indicator { border-radius: 100em; + display: -webkit-flex; display: flex; align-items: center; justify-content: center; @@ -23,7 +24,7 @@ } .timerIndicator { - color: #CB272A; + color: #cb272a; } .timerIndicator-inactive { @@ -31,7 +32,7 @@ } .indicator + .indicator { - margin-left: .25em; + margin-left: 0.25em; } .indicatorIcon { @@ -42,6 +43,7 @@ .countIndicator { border-radius: 100em; + display: -webkit-flex; display: flex; align-items: center; justify-content: center; @@ -53,6 +55,7 @@ .playedIndicator { border-radius: 100em; + display: -webkit-flex; display: flex; align-items: center; justify-content: center; @@ -64,6 +67,7 @@ .videoIndicator { background: #444; border-radius: 100em; + display: -webkit-flex; display: flex; align-items: center; justify-content: center; @@ -81,12 +85,13 @@ color: #333; } -.missingIndicator, .unairedIndicator { - background: #cc3333; - padding: .25em .5em; +.missingIndicator, +.unairedIndicator { + background: #c33; + padding: 0.25em 0.5em; border-radius: 100em; color: #fff; font-size: 84%; font-weight: 500; - margin: 0 .25em; -} \ No newline at end of file + margin: 0 0.25em; +} diff --git a/src/components/indicators/indicators.js b/src/components/indicators/indicators.js index e8813d9470..a8bd4c6200 100644 --- a/src/components/indicators/indicators.js +++ b/src/components/indicators/indicators.js @@ -90,7 +90,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun } if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) { - return '
check
'; + return '
check
'; } } @@ -118,7 +118,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun var status; if (item.Type === 'SeriesTimer') { - return 'fiber_smart_record'; + return 'fiber_smart_record'; } else if (item.TimerId || item.SeriesTimerId) { status = item.Status || 'Cancelled'; } else if (item.Type === 'Timer') { @@ -129,20 +129,20 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun if (item.SeriesTimerId) { if (status !== 'Cancelled') { - return 'fiber_smart_record'; + return 'fiber_smart_record'; } - return 'fiber_smart_record'; + return 'fiber_smart_record'; } - return 'fiber_manual_record'; + return 'fiber_manual_record'; } function getSyncIndicator(item) { if (item.SyncPercent === 100) { - return '
file_download
'; + return '
file_download
'; } else if (item.SyncPercent != null) { - return '
file_download
'; + return '
file_download
'; } return ''; @@ -150,13 +150,13 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun function getTypeIndicator(item) { if (item.Type === 'Video') { - return '
videocam
'; + return '
videocam
'; } if (item.Type === 'Folder' || item.Type === 'PhotoAlbum') { - return '
folder
'; + return '
folder
'; } if (item.Type === 'Photo') { - return '
photo
'; + return '
photo
'; } return ''; diff --git a/src/components/itemMediaInfo/itemMediaInfo.template.html b/src/components/itemMediaInfo/itemMediaInfo.template.html index 1eeab4fbd9..afe0023cdd 100644 --- a/src/components/itemMediaInfo/itemMediaInfo.template.html +++ b/src/components/itemMediaInfo/itemMediaInfo.template.html @@ -1,6 +1,6 @@

${HeaderMediaInfo}

diff --git a/src/components/itemcontextmenu.js b/src/components/itemcontextmenu.js index 63c7350fd4..4e9bab6849 100644 --- a/src/components/itemcontextmenu.js +++ b/src/components/itemcontextmenu.js @@ -351,14 +351,15 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter", document.body.appendChild(textArea); textArea.focus(); textArea.select(); - try { - document.execCommand("copy"); - + if (document.execCommand("copy")) { require(["toast"], function (toast) { toast(globalize.translate("CopyStreamURLSuccess")); }); - } catch (err) { + } else { console.error("Failed to copy to clipboard"); + require(["toast"], function (toast) { + toast(globalize.translate("CopyStreamURLError")); + }); } document.body.removeChild(textArea); diff --git a/src/components/itemidentifier/itemidentifier.template.html b/src/components/itemidentifier/itemidentifier.template.html index d921d580a7..229c047553 100644 --- a/src/components/itemidentifier/itemidentifier.template.html +++ b/src/components/itemidentifier/itemidentifier.template.html @@ -1,6 +1,6 @@

${Identify}

diff --git a/src/components/keyboardnavigation.js b/src/components/keyboardnavigation.js index 8c0bb1a3ae..d1ed03138c 100644 --- a/src/components/keyboardnavigation.js +++ b/src/components/keyboardnavigation.js @@ -1,36 +1,133 @@ -define(['inputManager', 'focusManager'], function(inputManager, focusManager) { - 'use strict'; +define(["inputManager", "layoutManager"], function (inputManager, layoutManager) { + "use strict"; console.log("keyboardnavigation"); + /** + * Key name mapping. + */ + // Add more to support old browsers + var KeyNames = { + 13: "Enter", + 19: "Pause", + 27: "Escape", + 32: "Space", + 37: "ArrowLeft", + 38: "ArrowUp", + 39: "ArrowRight", + 40: "ArrowDown", + // MediaRewind (Tizen/WebOS) + 412: "MediaRewind", + // MediaStop (Tizen/WebOS) + 413: "MediaStop", + // MediaPlay (Tizen/WebOS) + 415: "MediaPlay", + // MediaFastForward (Tizen/WebOS) + 417: "MediaFastForward", + // Back (WebOS) + 461: "Back", + // Back (Tizen) + 10009: "Back", + // MediaTrackPrevious (Tizen) + 10232: "MediaTrackPrevious", + // MediaTrackNext (Tizen) + 10233: "MediaTrackNext", + // MediaPlayPause (Tizen) + 10252: "MediaPlayPause" + }; + + var hasFieldKey = false; + try { + hasFieldKey = "key" in new KeyboardEvent("keydown"); + } catch (e) { + console.log("error checking 'key' field"); + } + + if (!hasFieldKey) { + // Add [a..z] + for (var i = 65; i <= 90; i++) { + KeyNames[i] = String.fromCharCode(i).toLowerCase(); + } + } + + /** + * Returns key name from event. + * + * @param {KeyboardEvent} keyboard event + * @return {string} key name + */ + function getKeyName(event) { + return KeyNames[event.keyCode] || event.key; + } + function enable() { - document.addEventListener('keydown', function(e) { + document.addEventListener("keydown", function (e) { var capture = true; - switch (e.keyCode) { - case 37: // ArrowLeft - inputManager.handle('left'); + switch (getKeyName(e)) { + case "ArrowLeft": + inputManager.handle("left"); break; - case 38: // ArrowUp - inputManager.handle('up'); + case "ArrowUp": + inputManager.handle("up"); break; - case 39: // ArrowRight - inputManager.handle('right'); + case "ArrowRight": + inputManager.handle("right"); break; - case 40: // ArrowDown - inputManager.handle('down'); + case "ArrowDown": + inputManager.handle("down"); break; + + case "Back": + inputManager.handle("back"); + break; + + case "Escape": + if (layoutManager.tv) { + inputManager.handle("back"); + } else { + capture = false; + } + break; + + case "MediaPlay": + inputManager.handle("play"); + break; + case "Pause": + inputManager.handle("pause"); + break; + case "MediaPlayPause": + inputManager.handle("playpause"); + break; + case "MediaRewind": + inputManager.handle("rewind"); + break; + case "MediaFastForward": + inputManager.handle("fastforward"); + break; + case "MediaStop": + inputManager.handle("stop"); + break; + case "MediaTrackPrevious": + inputManager.handle("previoustrack"); + break; + case "MediaTrackNext": + inputManager.handle("nexttrack"); + break; + default: capture = false; } + if (capture) { console.log("Disabling default event handling"); e.preventDefault(); } }); - } + return { - enable: enable + enable: enable, + getKeyName: getKeyName }; }); diff --git a/src/components/layoutManager.js b/src/components/layoutManager.js index 1059bf5758..21bcdf5933 100644 --- a/src/components/layoutManager.js +++ b/src/components/layoutManager.js @@ -2,7 +2,6 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve 'use strict'; function setLayout(instance, layout, selectedLayout) { - if (layout === selectedLayout) { instance[layout] = true; document.documentElement.classList.add('layout-' + layout); @@ -38,7 +37,6 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve }; LayoutManager.prototype.getSavedLayout = function (layout) { - return appSettings.get('layout'); }; @@ -64,4 +62,4 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve }; return new LayoutManager(); -}); \ No newline at end of file +}); diff --git a/src/components/lazyloader/lazyedgehack.css b/src/components/lazyloader/lazyedgehack.css index e0fea48c40..e358872f16 100644 --- a/src/components/lazyloader/lazyedgehack.css +++ b/src/components/lazyloader/lazyedgehack.css @@ -1,5 +1,5 @@ .lazy { /* In edge, intersection observer will not fire on 0px sized elements */ - min-width: .1em; - min-height: .1em; + min-width: 0.1em; + min-height: 0.1em; } diff --git a/src/components/libraryoptionseditor/libraryoptionseditor.js b/src/components/libraryoptionseditor/libraryoptionseditor.js index 2b289e6b77..261d20745b 100644 --- a/src/components/libraryoptionseditor/libraryoptionseditor.js +++ b/src/components/libraryoptionseditor/libraryoptionseditor.js @@ -58,16 +58,16 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct for (var i = 0; i < plugins.length; i++) { var plugin = plugins[i]; html += '
'; - html += 'live_tv'; + html += 'live_tv'; html += '
'; html += '

'; html += plugin.Name; html += "

"; html += "
"; if (i > 0) { - html += ''; + html += ''; } else if (plugins.length > 1) { - html += ''; + html += ''; } html += "
"; } @@ -120,7 +120,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct html += plugin.Name; html += ""; html += "
"; - i > 0 ? html += '' : plugins.length > 1 && (html += ''), html += "
" + i > 0 ? html += '' : plugins.length > 1 && (html += ''), html += "
" } html += "
"; html += '
' + globalize.translate("LabelMetadataDownloadersHelp") + "
"; @@ -181,9 +181,9 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct html += ""; html += "
"; if (i > 0) { - html += ''; + html += ''; } else if (plugins.length > 1) { - html += ''; + html += ''; } html += "
"; } @@ -220,9 +220,9 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct html += ""; html += "
"; if (i > 0) { - html += ''; + html += ''; } else if (plugins.length > 1) { - html += ''; + html += ''; } html += "
"; } diff --git a/src/components/listview/listview.css b/src/components/listview/listview.css index bdd9cd8acf..9c32d01222 100644 --- a/src/components/listview/listview.css +++ b/src/components/listview/listview.css @@ -10,7 +10,7 @@ display: block; align-items: center; text-align: left; - padding: .25em .25em .25em .5em; + padding: 0.25em 0.25em 0.25em 0.5em; cursor: pointer; overflow: hidden; } @@ -50,14 +50,18 @@ } .listItem-border.show-focus:focus { - transform: scale(1.0) !important; + transform: scale(1) !important; } -.listItemImage, .listItemIcon, .listItemAside { +.listItemImage, +.listItemIcon, +.listItemAside { flex-shrink: 0; } -.listItemBody, .listItemImage, .listItemIcon { +.listItemBody, +.listItemImage, +.listItemIcon { display: inline-block; vertical-align: middle; } @@ -71,13 +75,13 @@ } .listViewDragHandle { - margin-left: -.25em !important; + margin-left: -0.25em !important; touch-action: none; } .listItemBody { flex-grow: 1; - padding: .85em .75em; + padding: 0.85em 0.75em; overflow: hidden; text-overflow: ellipsis; flex-direction: column; @@ -85,8 +89,15 @@ justify-content: center; } +.listItem, +.listItemBody, +.listItemMediaInfo { + display: flex; + contain: layout style; +} + .layout-tv .listItemBody { - padding: .35em .75em; + padding: 0.35em 0.75em; } .listItemBody-noleftpadding { @@ -95,7 +106,7 @@ .listItemBodyText { margin: 0; - padding: .1em 0; + padding: 0.1em 0; overflow: hidden; text-overflow: ellipsis; } @@ -121,7 +132,7 @@ width: 19.5vw; height: 13vw; background-position: center center; - margin-right: .75em; + margin-right: 0.75em; } .listItemImageButton { @@ -151,23 +162,24 @@ @media all and (max-width: 64em) { .listItemImage-large { - width: 33.75vw; - height: 22.5vw; + width: 22vw; + height: 16vw; margin-right: 0 !important; } + .listItemIndicators, .listItemImageButton { - font-size: 1em !important; + font-size: 0.6em !important; } .listItemBody { - padding-left: .75em; + padding-left: 0.75em; } } @media all and (max-width: 50em) { .listItemBody { - padding-right: .5em; + padding-right: 0.5em; } } @@ -180,15 +192,15 @@ width: 1em !important; height: 1em !important; font-size: 143%; - padding: 0 .25em 0 0; + padding: 0 0.25em 0 0; } .listItemIcon:not(.listItemIcon-transparent) { background-color: #00a4dc; color: #fff; - padding: .5em; + padding: 0.5em; border-radius: 100em; - margin: 0 .2em 0 .4em; + margin: 0 0.2em 0 0.4em; } .listItemProgressBar { @@ -199,7 +211,7 @@ } .listItem:focus { - border-radius: .2em; + border-radius: 0.2em; } .listItem:focus .secondary { @@ -207,7 +219,7 @@ } .listItem-focusscale { - transition: transform .2s ease-out; + transition: transform 0.2s ease-out; } .listItem-focusscale:focus { @@ -215,7 +227,7 @@ } .paperList { - margin: .5em auto; + margin: 0.5em auto; } .paperList-clear { @@ -234,26 +246,23 @@ } .listItemIndicators { - right: .324em; - top: .324em; + right: 0.324em; + top: 0.324em; position: absolute; display: flex; align-items: center; } -.listItem, .listItemBody, .listItemMediaInfo { - display: flex; - contain: layout style; -} - .listItem-bottomoverview { font-size: 88%; margin-bottom: 1em; - margin-top: .2em; + margin-top: 0.2em; } @media all and (max-width: 50em) { - .listItem .endsAt, .listItem .criticRating, .listItem-overview { + .listItem .endsAt, + .listItem .criticRating, + .listItem-overview { display: none !important; } } diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js index 94535deb6f..dbe47b562f 100644 --- a/src/components/listview/listview.js +++ b/src/components/listview/listview.js @@ -160,7 +160,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan var button = options.rightButtons[i]; - html += ''; + html += ''; } return html; @@ -262,9 +262,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan } if (!clickEntireItem && options.dragHandle) { - //html += ''; + //html += ''; // Firefox and Edge are not allowing the button to be draggable - html += 'drag_handle'; + html += 'drag_handle'; } if (options.image !== false) { @@ -298,7 +298,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan } if (playOnImageClick) { - html += ''; + html += ''; } var progressHtml = indicators.getProgressBarHtml(item, { @@ -471,18 +471,20 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan html += indicators.getTimerIndicator(item).replace('indicatorIcon', 'indicatorIcon listItemAside'); } + html += '
'; + if (!clickEntireItem) { if (options.addToListButton) { - html += ''; + html += ''; } if (options.moreButton !== false) { - html += ''; + html += ''; } if (options.infoButton) { - html += ''; + html += ''; } if (options.rightButtons) { @@ -491,22 +493,19 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan if (options.enableUserDataButtons !== false) { - html += ''; - var userData = item.UserData || {}; var likes = userData.Likes == null ? '' : userData.Likes; if (itemHelper.canMarkPlayed(item)) { - html += ''; + html += ''; } if (itemHelper.canRate(item)) { - html += ''; + html += ''; } - - html += ''; } } + html += '
'; if (enableContentWrapper) { html += ''; diff --git a/src/components/loading/loading.css b/src/components/loading/loading.css index e3f10c0e2e..dae33aa9b8 100644 --- a/src/components/loading/loading.css +++ b/src/components/loading/loading.css @@ -7,11 +7,20 @@ .mdlSpinnerActive { display: inline-block; + -webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite; animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite; } +@-webkit-keyframes mdl-spinner__container-rotate { + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + @keyframes mdl-spinner__container-rotate { to { + -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @@ -24,67 +33,121 @@ } .mdl-spinner__layer-1 { - border-color: rgb(66,165,245); + border-color: rgb(66, 165, 245); } .mdl-spinner__layer-1-active { + -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .mdl-spinner__layer-2 { - border-color: rgb(244,67,54); + border-color: rgb(244, 67, 54); } .mdl-spinner__layer-2-active { + -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .mdl-spinner__layer-3 { - border-color: rgb(253,216,53); + border-color: rgb(253, 216, 53); } .mdl-spinner__layer-3-active { + -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .mdl-spinner__layer-4 { - border-color: rgb(76,175,80); + border-color: rgb(76, 175, 80); } .mdl-spinner__layer-4-active { + -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } -@keyframes mdl-spinner__fill-unfill-rotate { +@-webkit-keyframes mdl-spinner__fill-unfill-rotate { 12.5% { + -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { + -webkit-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { + -webkit-transform: rotate(405deg); transform: rotate(405deg); } 50% { + -webkit-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { + -webkit-transform: rotate(675deg); transform: rotate(675deg); } 75% { + -webkit-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { + -webkit-transform: rotate(945deg); transform: rotate(945deg); } to { + -webkit-transform: rotate(1080deg); + transform: rotate(1080deg); + } +} + +@keyframes mdl-spinner__fill-unfill-rotate { + 12.5% { + -webkit-transform: rotate(135deg); + transform: rotate(135deg); + } + + 25% { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + } + + 37.5% { + -webkit-transform: rotate(405deg); + transform: rotate(405deg); + } + + 50% { + -webkit-transform: rotate(540deg); + transform: rotate(540deg); + } + + 62.5% { + -webkit-transform: rotate(675deg); + transform: rotate(675deg); + } + + 75% { + -webkit-transform: rotate(810deg); + transform: rotate(810deg); + } + + 87.5% { + -webkit-transform: rotate(945deg); + transform: rotate(945deg); + } + + to { + -webkit-transform: rotate(1080deg); transform: rotate(1080deg); } } @@ -98,6 +161,32 @@ * - https://github.com/Polymer/paper-spinner/issues/9 * - https://code.google.com/p/chromium/issues/detail?id=436255 */ +@-webkit-keyframes mdl-spinner__layer-1-fade-in-out { + from { + opacity: 0.99; + } + + 25% { + opacity: 0.99; + } + + 26% { + opacity: 0; + } + + 89% { + opacity: 0; + } + + 90% { + opacity: 0.99; + } + + 100% { + opacity: 0.99; + } +} + @keyframes mdl-spinner__layer-1-fade-in-out { from { opacity: 0.99; @@ -124,6 +213,28 @@ } } +@-webkit-keyframes mdl-spinner__layer-2-fade-in-out { + from { + opacity: 0; + } + + 15% { + opacity: 0; + } + + 25% { + opacity: 0.99; + } + + 50% { + opacity: 0.99; + } + + 51% { + opacity: 0; + } +} + @keyframes mdl-spinner__layer-2-fade-in-out { from { opacity: 0; @@ -146,6 +257,28 @@ } } +@-webkit-keyframes mdl-spinner__layer-3-fade-in-out { + from { + opacity: 0; + } + + 40% { + opacity: 0; + } + + 50% { + opacity: 0.99; + } + + 75% { + opacity: 0.99; + } + + 76% { + opacity: 0; + } +} + @keyframes mdl-spinner__layer-3-fade-in-out { from { opacity: 0; @@ -168,6 +301,28 @@ } } +@-webkit-keyframes mdl-spinner__layer-4-fade-in-out { + from { + opacity: 0; + } + + 65% { + opacity: 0; + } + + 75% { + opacity: 0.99; + } + + 90% { + opacity: 0.99; + } + + 100% { + opacity: 0; + } +} + @keyframes mdl-spinner__layer-4-fade-in-out { from { opacity: 0; @@ -190,6 +345,23 @@ } } +.mdl-spinner__circle { + box-sizing: border-box; + height: 100%; + border-width: 0.21em; + border-style: solid; + border-color: inherit; + border-bottom-color: transparent !important; + border-radius: 50%; + -webkit-animation: none; + animation: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + .mdl-spinner__circle-clipper { display: inline-block; position: relative; @@ -199,69 +371,97 @@ border-color: inherit; } - .mdl-spinner__circle-clipper .mdl-spinner__circle { - width: 200%; - } - -.mdl-spinner__circle { - box-sizing: border-box; - height: 100%; - border-width: .21em; - border-style: solid; - border-color: inherit; - border-bottom-color: transparent !important; - border-radius: 50%; - animation: none; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; +.mdl-spinner__circle-clipper .mdl-spinner__circle { + width: 200%; } .mdl-spinner__circleLeft { border-right-color: transparent !important; + -webkit-transform: rotate(129deg); transform: rotate(129deg); } .mdl-spinner__circleLeft-active { + -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .mdl-spinner__circleRight { left: -100%; border-left-color: transparent !important; + -webkit-transform: rotate(-129deg); transform: rotate(-129deg); } .mdl-spinner__circleRight-active { + -webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } -@keyframes mdl-spinner__left-spin { +@-webkit-keyframes mdl-spinner__left-spin { from { + -webkit-transform: rotate(130deg); transform: rotate(130deg); } 50% { + -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { + -webkit-transform: rotate(130deg); transform: rotate(130deg); } } +@keyframes mdl-spinner__left-spin { + from { + -webkit-transform: rotate(130deg); + transform: rotate(130deg); + } + + 50% { + -webkit-transform: rotate(-5deg); + transform: rotate(-5deg); + } + + to { + -webkit-transform: rotate(130deg); + transform: rotate(130deg); + } +} + +@-webkit-keyframes mdl-spinner__right-spin { + from { + -webkit-transform: rotate(-130deg); + transform: rotate(-130deg); + } + + 50% { + -webkit-transform: rotate(5deg); + transform: rotate(5deg); + } + + to { + -webkit-transform: rotate(-130deg); + transform: rotate(-130deg); + } +} + @keyframes mdl-spinner__right-spin { from { + -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { + -webkit-transform: rotate(5deg); transform: rotate(5deg); } to { + -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } } diff --git a/src/components/logoscreensaver/plugin.js b/src/components/logoscreensaver/plugin.js index 521afd2690..0eb5e85d31 100644 --- a/src/components/logoscreensaver/plugin.js +++ b/src/components/logoscreensaver/plugin.js @@ -160,7 +160,7 @@ define(["pluginManager"], function (pluginManager) { elem.classList.add("logoScreenSaver"); document.body.appendChild(elem); - elem.innerHTML = ''; + elem.innerHTML = ''; } stopInterval(); diff --git a/src/components/mediainfo/mediainfo.css b/src/components/mediainfo/mediainfo.css index 2203ba6676..b957c3a5b2 100644 --- a/src/components/mediainfo/mediainfo.css +++ b/src/components/mediainfo/mediainfo.css @@ -4,13 +4,13 @@ } .mediaInfoText { - padding: .22em .5em; - border-radius: .25em; + padding: 0.22em 0.5em; + border-radius: 0.25em; font-size: 92%; display: flex; align-items: center; white-space: nowrap; - margin: 0 .5em 0 0; + margin: 0 0.5em 0 0; } .mediaInfoText-upper { @@ -21,7 +21,7 @@ width: auto; height: auto; font-size: 1.6em; - margin-right: .6em; + margin-right: 0.6em; } .mediaInfoItem:last-child { @@ -63,8 +63,8 @@ .mediaInfoProgramAttribute { text-transform: uppercase; - padding: .16em .6em; - border-radius: .15em; + padding: 0.16em 0.6em; + border-radius: 0.15em; font-size: 80%; } @@ -73,13 +73,13 @@ } .mediaInfoOfficialRating { - border: .09em solid currentColor; - padding: 0 .6em; + border: 0.09em solid currentColor; + padding: 0 0.6em; height: 1.3em; line-height: 1.8em; display: flex; align-items: center; justify-content: center; - border-radius: .1em; + border-radius: 0.1em; font-size: 96%; } diff --git a/src/components/mediainfo/mediainfo.js b/src/components/mediainfo/mediainfo.js index 04df34685d..8aaad95056 100644 --- a/src/components/mediainfo/mediainfo.js +++ b/src/components/mediainfo/mediainfo.js @@ -6,7 +6,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater var status; if (item.Type === 'SeriesTimer') { - return 'fiber_smart_record'; + return 'fiber_smart_record'; } else if (item.TimerId || item.SeriesTimerId) { status = item.Status || 'Cancelled'; @@ -20,13 +20,13 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater if (item.SeriesTimerId) { if (status !== 'Cancelled') { - return 'fiber_smart_record'; + return 'fiber_smart_record'; } - return 'fiber_smart_record'; + return 'fiber_smart_record'; } - return 'fiber_manual_record'; + return 'fiber_manual_record'; } function getProgramInfoHtml(item, options) { @@ -393,7 +393,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater if (rating) { html += '
'; - html += 'star'; + html += 'star'; html += rating; html += '
'; } diff --git a/src/components/medialibrarycreator/medialibrarycreator.js b/src/components/medialibrarycreator/medialibrarycreator.js index 183e22551f..0a8741387f 100644 --- a/src/components/medialibrarycreator/medialibrarycreator.js +++ b/src/components/medialibrarycreator/medialibrarycreator.js @@ -1,37 +1,44 @@ -define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionseditor/libraryoptionseditor", "emby-toggle", "emby-input", "emby-select", "paper-icon-button-light", "listViewStyle", "formDialogStyle", "emby-button", "flexStyles"], function(loading, dialogHelper, dom, $, libraryoptionseditor) { +define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionseditor/libraryoptionseditor", "emby-toggle", "emby-input", "emby-select", "paper-icon-button-light", "listViewStyle", "formDialogStyle", "emby-button", "flexStyles"], function (loading, dialogHelper, dom, $, libraryoptionseditor) { "use strict"; function onAddLibrary() { - if (isCreating) return false; + if (isCreating) { + return false; + } if (pathInfos.length == 0) { - require(["alert"], function(alert) { + require(["alert"], function (alert) { alert({ text: Globalize.translate("PleaseAddAtLeastOneFolder"), type: "error" - }) + }); }); + return false; } isCreating = true; loading.show(); - var dlg = dom.parentWithClass(this, "dlg-librarycreator"); var name = $("#txtValue", dlg).val(); var type = $("#selectCollectionType", dlg).val(); - if (type == "mixed") type = null; + + if (type == "mixed") { + type = null; + } + var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector(".libraryOptions")); libraryOptions.PathInfos = pathInfos; - ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(function() { + ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(function () { hasChanges = true; isCreating = false; loading.hide(); dialogHelper.close(dlg); - }, function() { - require(["toast"], function(toast) { + }, function () { + require(["toast"], function (toast) { toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder")); }); + isCreating = false; loading.hide(); }); @@ -39,16 +46,17 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed } function getCollectionTypeOptionsHtml(collectionTypeOptions) { - return collectionTypeOptions.map(function(i) { + return collectionTypeOptions.map(function (i) { return '"; }).join(""); } function initEditor(page, collectionTypeOptions) { - $("#selectCollectionType", page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val("").on("change", function() { + $("#selectCollectionType", page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val("").on("change", function () { var value = this.value; var dlg = $(this).parents(".dialog")[0]; libraryoptionseditor.setContentType(dlg.querySelector(".libraryOptions"), value == "mixed" ? "" : value); + if (value) { dlg.querySelector(".libraryOptions").classList.remove("hide"); } else { @@ -57,17 +65,17 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed if (value != "mixed") { var index = this.selectedIndex; + if (index != -1) { var name = this.options[index].innerHTML.replace("*", "").replace("&", "&"); $("#txtValue", dlg).val(name); - var folderOption = collectionTypeOptions.filter(function(i) { - return i.value == value + var folderOption = collectionTypeOptions.filter(function (i) { + return i.value == value; })[0]; - $(".collectionTypeFieldDescription", dlg).html(folderOption.message || "") + $(".collectionTypeFieldDescription", dlg).html(folderOption.message || ""); } } }); - page.querySelector(".btnAddFolder").addEventListener("click", onAddButtonClick); page.querySelector(".btnSubmit").addEventListener("click", onAddLibrary); page.querySelector(".folderList").addEventListener("click", onRemoveClick); @@ -81,40 +89,65 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed function onAddButtonClick() { var page = dom.parentWithClass(this, "dlg-librarycreator"); - require(["directorybrowser"], function(directoryBrowser) { - var picker = new directoryBrowser; + + require(["directorybrowser"], function (directoryBrowser) { + var picker = new directoryBrowser(); picker.show({ enableNetworkSharePath: true, - callback: function(path, networkSharePath) { - path && addMediaLocation(page, path, networkSharePath); + callback: function (path, networkSharePath) { + if (path) { + addMediaLocation(page, path, networkSharePath); + } + picker.close(); } - }) - }) + }); + }); } function getFolderHtml(pathInfo, index) { var html = ""; - return html += '
', html += '
', html += '
' + pathInfo.Path + "
", pathInfo.NetworkPath && (html += '
' + pathInfo.NetworkPath + "
"), html += "
", html += '', html += "
" + html += '
'; + html += '
'; + html += '
' + pathInfo.Path + "
"; + + if (pathInfo.NetworkPath) { + html += '
' + pathInfo.NetworkPath + "
"; + } + + html += "
"; + html += ''; + html += "
"; + return html; } function renderPaths(page) { var foldersHtml = pathInfos.map(getFolderHtml).join(""); var folderList = page.querySelector(".folderList"); folderList.innerHTML = foldersHtml; - foldersHtml ? folderList.classList.remove("hide") : folderList.classList.add("hide"); + + if (foldersHtml) { + folderList.classList.remove("hide"); + } else { + folderList.classList.add("hide"); + } } function addMediaLocation(page, path, networkSharePath) { var pathLower = path.toLowerCase(); - var pathFilter = pathInfos.filter(function(p) { + var pathFilter = pathInfos.filter(function (p) { return p.Path.toLowerCase() == pathLower; }); + if (!pathFilter.length) { var pathInfo = { Path: path }; - networkSharePath && (pathInfo.NetworkPath = networkSharePath); + + if (networkSharePath) { + pathInfo.NetworkPath = networkSharePath; + } + pathInfos.push(pathInfo); renderPaths(page); } @@ -125,7 +158,7 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed var index = parseInt(button.getAttribute("data-index")); var location = pathInfos[index].Path; var locationLower = location.toLowerCase(); - pathInfos = pathInfos.filter(function(p) { + pathInfos = pathInfos.filter(function (p) { return p.Path.toLowerCase() != locationLower; }); renderPaths(dom.parentWithClass(button, "dlg-librarycreator")); @@ -136,21 +169,22 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed } function initLibraryOptions(dlg) { - libraryoptionseditor.embed(dlg.querySelector(".libraryOptions")).then(function() { + libraryoptionseditor.embed(dlg.querySelector(".libraryOptions")).then(function () { $("#selectCollectionType", dlg).trigger("change"); onToggleAdvancedChange.call(dlg.querySelector(".chkAdvanced")); - }) + }); } function editor() { - this.show = function(options) { - return new Promise(function(resolve, reject) { + this.show = function (options) { + return new Promise(function (resolve, reject) { currentOptions = options; currentResolve = resolve; hasChanges = false; - var xhr = new XMLHttpRequest; + var xhr = new XMLHttpRequest(); xhr.open("GET", "components/medialibrarycreator/medialibrarycreator.template.html", true); - xhr.onload = function(e) { + + xhr.onload = function (e) { var template = this.response; var dlg = dialogHelper.createDialog({ size: "medium-tall", @@ -166,24 +200,23 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed initEditor(dlg, options.collectionTypeOptions); dlg.addEventListener("close", onDialogClosed); dialogHelper.open(dlg); - dlg.querySelector(".btnCancel").addEventListener("click", function() { - dialogHelper.close(dlg) + dlg.querySelector(".btnCancel").addEventListener("click", function () { + dialogHelper.close(dlg); }); pathInfos = []; renderPaths(dlg); initLibraryOptions(dlg); }; + xhr.send(); }); - } + }; } var pathInfos = []; var currentResolve; var currentOptions; - var hasChanges = false; var isCreating = false; - - return editor + return editor; }); diff --git a/src/components/medialibrarycreator/medialibrarycreator.template.html b/src/components/medialibrarycreator/medialibrarycreator.template.html index c7073bc9f2..4dcb7812d4 100644 --- a/src/components/medialibrarycreator/medialibrarycreator.template.html +++ b/src/components/medialibrarycreator/medialibrarycreator.template.html @@ -1,5 +1,5 @@
- +

${ButtonAddMediaLibrary}

@@ -26,7 +26,7 @@

${HeadersFolders}

diff --git a/src/components/medialibraryeditor/medialibraryeditor.js b/src/components/medialibraryeditor/medialibraryeditor.js index a1ee53f72b..7c5c8d4080 100644 --- a/src/components/medialibraryeditor/medialibraryeditor.js +++ b/src/components/medialibraryeditor/medialibraryeditor.js @@ -1,22 +1,22 @@ -define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionseditor/libraryoptionseditor", "emby-button", "listViewStyle", "paper-icon-button-light", "formDialogStyle", "emby-toggle", "flexStyles"], function(jQuery, loading, dialogHelper, dom, libraryoptionseditor) { +define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionseditor/libraryoptionseditor", "emby-button", "listViewStyle", "paper-icon-button-light", "formDialogStyle", "emby-toggle", "flexStyles"], function (jQuery, loading, dialogHelper, dom, libraryoptionseditor) { "use strict"; function onEditLibrary() { - if (isCreating) return false; + if (isCreating) { + return false; + } isCreating = true; loading.show(); - var dlg = dom.parentWithClass(this, "dlg-libraryeditor"); var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector(".libraryOptions")); libraryOptions = Object.assign(currentOptions.library.LibraryOptions || {}, libraryOptions); - - ApiClient.updateVirtualFolderOptions(currentOptions.library.ItemId, libraryOptions).then(function() { + ApiClient.updateVirtualFolderOptions(currentOptions.library.ItemId, libraryOptions).then(function () { hasChanges = true; isCreating = false; loading.hide(); dialogHelper.close(dlg); - }, function() { + }, function () { isCreating = false; loading.hide(); }); @@ -26,11 +26,11 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed function addMediaLocation(page, path, networkSharePath) { var virtualFolder = currentOptions.library; var refreshAfterChange = currentOptions.refresh; - ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(function() { + ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(function () { hasChanges = true; refreshLibraryFromServer(page); - }, function() { - require(["toast"], function(toast) { + }, function () { + require(["toast"], function (toast) { toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder")); }); }); @@ -41,11 +41,11 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed ApiClient.updateMediaPath(virtualFolder.Name, { Path: path, NetworkPath: networkSharePath - }).then(function() { + }).then(function () { hasChanges = true; refreshLibraryFromServer(page); - }, function() { - require(["toast"], function(toast) { + }, function () { + require(["toast"], function (toast) { toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder")); }); }); @@ -54,19 +54,20 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed function onRemoveClick(btnRemovePath, location) { var button = btnRemovePath; var virtualFolder = currentOptions.library; - require(["confirm"], function(confirm) { + + require(["confirm"], function (confirm) { confirm({ title: Globalize.translate("HeaderRemoveMediaLocation"), text: Globalize.translate("MessageConfirmRemoveMediaLocation"), confirmText: Globalize.translate("ButtonDelete"), primary: "delete" - }).then(function() { + }).then(function () { var refreshAfterChange = currentOptions.refresh; - ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(function() { + ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(function () { hasChanges = true; refreshLibraryFromServer(dom.parentWithClass(button, "dlg-libraryeditor")); - }, function() { - require(["toast"], function(toast) { + }, function () { + require(["toast"], function (toast) { toast(Globalize.translate("DefaultErrorMessage")); }); }); @@ -76,13 +77,19 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed function onListItemClick(e) { var listItem = dom.parentWithClass(e.target, "listItem"); + if (listItem) { var index = parseInt(listItem.getAttribute("data-index")); var pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || []; var pathInfo = null == index ? {} : pathInfos[index] || {}; var originalPath = pathInfo.Path || (null == index ? null : currentOptions.library.Locations[index]); var btnRemovePath = dom.parentWithClass(e.target, "btnRemovePath"); - if (btnRemovePath) return void onRemoveClick(btnRemovePath, originalPath); + + if (btnRemovePath) { + onRemoveClick(btnRemovePath, originalPath); + return; + } + showDirectoryBrowser(dom.parentWithClass(listItem, "dlg-libraryeditor"), originalPath, pathInfo.NetworkPath); } } @@ -94,20 +101,23 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed html += '

'; html += pathInfo.Path; html += "

"; + if (pathInfo.NetworkPath) { html += '
' + pathInfo.NetworkPath + "
"; } + html += ""; - html += ''; + html += ''; html += ""; return html; } function refreshLibraryFromServer(page) { - ApiClient.getVirtualFolders().then(function(result) { - var library = result.filter(function(f) { - return f.Name === currentOptions.library.Name + ApiClient.getVirtualFolders().then(function (result) { + var library = result.filter(function (f) { + return f.Name === currentOptions.library.Name; })[0]; + if (library) { currentOptions.library = library; renderLibrary(page, currentOptions); @@ -117,16 +127,21 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed function renderLibrary(page, options) { var pathInfos = (options.library.LibraryOptions || {}).PathInfos || []; - pathInfos.length || (pathInfos = options.library.Locations.map(function(p) { - return { - Path: p - } - })); + + if (!pathInfos.length) { + pathInfos = options.library.Locations.map(function (p) { + return { + Path: p + }; + }); + } + if (options.library.CollectionType === 'boxsets') { page.querySelector(".folders").classList.add("hide"); } else { page.querySelector(".folders").classList.remove("hide"); } + page.querySelector(".folderList").innerHTML = pathInfos.map(getFolderHtml).join(""); } @@ -135,24 +150,31 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed } function showDirectoryBrowser(context, originalPath, networkPath) { - require(["directorybrowser"], function(directoryBrowser) { - var picker = new directoryBrowser; + require(["directorybrowser"], function (directoryBrowser) { + var picker = new directoryBrowser(); picker.show({ - enableNetworkSharePath: !0, + enableNetworkSharePath: true, pathReadOnly: null != originalPath, path: originalPath, networkSharePath: networkPath, - callback: function(path, networkSharePath) { - path && (originalPath ? updateMediaLocation(context, originalPath, networkSharePath) : addMediaLocation(context, path, networkSharePath)); + callback: function (path, networkSharePath) { + if (path) { + if (originalPath) { + updateMediaLocation(context, originalPath, networkSharePath); + } else { + addMediaLocation(context, path, networkSharePath); + } + } + picker.close(); } - }) - }) + }); + }); } function onToggleAdvancedChange() { var dlg = dom.parentWithClass(this, "dlg-libraryeditor"); - libraryoptionseditor.setAdvancedVisible(dlg.querySelector(".libraryOptions"), this.checked) + libraryoptionseditor.setAdvancedVisible(dlg.querySelector(".libraryOptions"), this.checked); } function initEditor(dlg, options) { @@ -161,7 +183,7 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed dlg.querySelector(".folderList").addEventListener("click", onListItemClick); dlg.querySelector(".chkAdvanced").addEventListener("change", onToggleAdvancedChange); dlg.querySelector(".btnSubmit").addEventListener("click", onEditLibrary); - libraryoptionseditor.embed(dlg.querySelector(".libraryOptions"), options.library.CollectionType, options.library.LibraryOptions).then(function() { + libraryoptionseditor.embed(dlg.querySelector(".libraryOptions"), options.library.CollectionType, options.library.LibraryOptions).then(function () { onToggleAdvancedChange.call(dlg.querySelector(".chkAdvanced")); }); } @@ -171,14 +193,15 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed } function editor() { - this.show = function(options) { + this.show = function (options) { var deferred = jQuery.Deferred(); currentOptions = options; currentDeferred = deferred; hasChanges = false; - var xhr = new XMLHttpRequest; + var xhr = new XMLHttpRequest(); xhr.open("GET", "components/medialibraryeditor/medialibraryeditor.template.html", true); - xhr.onload = function(e) { + + xhr.onload = function (e) { var template = this.response; var dlg = dialogHelper.createDialog({ size: "medium-tall", @@ -195,21 +218,20 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed initEditor(dlg, options); dlg.addEventListener("close", onDialogClosed); dialogHelper.open(dlg); - dlg.querySelector(".btnCancel").addEventListener("click", function() { + dlg.querySelector(".btnCancel").addEventListener("click", function () { dialogHelper.close(dlg); }); refreshLibraryFromServer(dlg); }; + xhr.send(); return deferred.promise(); - } + }; } var currentDeferred; var currentOptions; - var hasChanges = false; var isCreating = false; - return editor; }); diff --git a/src/components/medialibraryeditor/medialibraryeditor.template.html b/src/components/medialibraryeditor/medialibraryeditor.template.html index dd13df4ca5..07e26b777b 100644 --- a/src/components/medialibraryeditor/medialibraryeditor.template.html +++ b/src/components/medialibraryeditor/medialibraryeditor.template.html @@ -1,5 +1,5 @@
- +

@@ -20,7 +20,7 @@

${HeadersFolders}

diff --git a/src/components/metadataeditor/metadataeditor.js b/src/components/metadataeditor/metadataeditor.js index 8843dc159c..030fdc80ce 100644 --- a/src/components/metadataeditor/metadataeditor.js +++ b/src/components/metadataeditor/metadataeditor.js @@ -477,7 +477,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi html += ''; if (formatString) { - html += ''; + html += ''; } html += ''; @@ -917,7 +917,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi for (var i = 0; i < items.length; i++) { html += '
'; - html += 'live_tv'; + html += 'live_tv'; html += '
'; @@ -927,7 +927,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi html += '
'; - html += ''; + html += ''; html += '
'; } @@ -948,7 +948,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi html += '
'; - html += 'person'; + html += 'person'; html += '
'; html += ''; html += '
'; - html += ''; + html += ''; html += '
'; } diff --git a/src/components/metadataeditor/metadataeditor.template.html b/src/components/metadataeditor/metadataeditor.template.html index d44136c6b6..a09c2dd57b 100644 --- a/src/components/metadataeditor/metadataeditor.template.html +++ b/src/components/metadataeditor/metadataeditor.template.html @@ -1,15 +1,15 @@
- +

${Edit}

@@ -184,7 +184,7 @@ ${Genres}
@@ -193,7 +193,7 @@ ${People}
@@ -203,7 +203,7 @@ ${Studios}
@@ -212,7 +212,7 @@ ${Tags}
diff --git a/src/components/metadataeditor/personeditor.template.html b/src/components/metadataeditor/personeditor.template.html index 75b011aa73..57a46a0413 100644 --- a/src/components/metadataeditor/personeditor.template.html +++ b/src/components/metadataeditor/personeditor.template.html @@ -1,5 +1,5 @@
- +

${Edit}

diff --git a/src/components/multiselect/multiselect.css b/src/components/multiselect/multiselect.css index 9c2a58cd20..e9c66c57a4 100644 --- a/src/components/multiselect/multiselect.css +++ b/src/components/multiselect/multiselect.css @@ -4,7 +4,7 @@ left: 0; right: 0; top: 0; - background-color: rgba(0, 0, 0, .3); + background-color: rgba(0, 0, 0, 0.3); z-index: 99998; } @@ -13,7 +13,7 @@ top: 0; left: 0; right: 0; - padding: 1em .5em; + padding: 1em 0.5em; display: flex; align-items: center; z-index: 99999; diff --git a/src/components/multiselect/multiselect.js b/src/components/multiselect/multiselect.js index 6b2906cb0a..b1367ef66b 100644 --- a/src/components/multiselect/multiselect.js +++ b/src/components/multiselect/multiselect.js @@ -126,11 +126,11 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo var html = ""; - html += ''; + html += ''; html += '

'; var moreIcon = "more_horiz"; - html += ''; + html += ''; selectionCommandsPanel.innerHTML = html; diff --git a/src/components/navdrawer/navdrawer.css b/src/components/navdrawer/navdrawer.css index 5d63e150d1..6d5d098de2 100644 --- a/src/components/navdrawer/navdrawer.css +++ b/src/components/navdrawer/navdrawer.css @@ -3,40 +3,50 @@ position: fixed; top: 0; bottom: 0; - contain: strict + contain: strict; } .touch-menu-la { - background-color: #FFF; + background-color: #fff; will-change: transform; + display: -webkit-box; + display: -webkit-flex; display: flex; + -webkit-transition: -webkit-transform ease-out 40ms, left ease-out 260ms; + -o-transition: transform ease-out 40ms, left ease-out 260ms; transition: transform ease-out 40ms, left ease-out 260ms; - z-index: 1099 + z-index: 1099; } .touch-menu-la.transition { - transition: transform ease-out 240ms, left ease-out 260ms + -webkit-transition: -webkit-transform ease-out 240ms, left ease-out 260ms; + -o-transition: transform ease-out 240ms, left ease-out 260ms; + transition: transform ease-out 240ms, left ease-out 260ms; } .drawer-open { - box-shadow: 2px 0 12px rgba(0, 0, 0, .4) + -webkit-box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4); + box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4); } .scrollContainer { - flex-grow: 1 + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + flex-grow: 1; } .tmla-mask { left: 0; right: 0; - background-color: #000; opacity: 0; z-index: 1098; - transition: opacity ease-in-out .38s, visibility ease-in-out .38s; + -webkit-transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s; + -o-transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s; + transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s; will-change: opacity; - background-color: rgba(0, 0, 0, .3) + background-color: rgba(0, 0, 0, 0.3); } .tmla-mask.backdrop { - opacity: 1 -} \ No newline at end of file + opacity: 1; +} diff --git a/src/components/navdrawer/navdrawer.js b/src/components/navdrawer/navdrawer.js index 69adbd1f5a..9c15fbc184 100644 --- a/src/components/navdrawer/navdrawer.js +++ b/src/components/navdrawer/navdrawer.js @@ -1,6 +1,7 @@ -define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser, dom) { +define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, dom) { "use strict"; - return function(options) { + + return function (options) { function getTouches(e) { return e.changedTouches || e.targetTouches || e.touches; } @@ -9,14 +10,13 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser, options.target.classList.remove("transition"); var touches = getTouches(e); var touch = touches[0] || {}; - menuTouchStartX = touch.clientX; menuTouchStartY = touch.clientY; - menuTouchStartTime = (new Date).getTime(); + menuTouchStartTime = new Date().getTime(); } function setVelocity(deltaX) { - var time = (new Date).getTime() - (menuTouchStartTime || 0); + var time = new Date().getTime() - (menuTouchStartTime || 0); velocity = Math.abs(deltaX) / time; } @@ -28,21 +28,36 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser, var endY = touch.clientY || 0; var deltaX = endX - (menuTouchStartX || 0); var deltaY = endY - (menuTouchStartY || 0); - setVelocity(deltaX), isOpen && 1 !== dragMode && deltaX > 0 && (dragMode = 2), 0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5 ? (dragMode = 1, scrollContainer.addEventListener("scroll", disableEvent), self.showMask()) : 0 === dragMode && Math.abs(deltaY) >= 5 && (dragMode = 2), 1 === dragMode && (newPos = currentPos + deltaX, self.changeMenuPos()) + setVelocity(deltaX); + + if (isOpen && 1 !== dragMode && deltaX > 0) { + dragMode = 2; + } + + if (0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) { + dragMode = 1; + scrollContainer.addEventListener("scroll", disableEvent); + self.showMask(); + } else if (0 === dragMode && Math.abs(deltaY) >= 5) { + dragMode = 2; + } + + if (1 === dragMode) { + newPos = currentPos + deltaX; + self.changeMenuPos(); + } } function onMenuTouchEnd(e) { options.target.classList.add("transition"); scrollContainer.removeEventListener("scroll", disableEvent); dragMode = 0; - var touches = getTouches(e); var touch = touches[0] || {}; var endX = touch.clientX || 0; var endY = touch.clientY || 0; var deltaX = endX - (menuTouchStartX || 0); var deltaY = endY - (menuTouchStartY || 0); - currentPos = deltaX; self.checkMenuState(deltaX, deltaY); } @@ -53,10 +68,12 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser, } else { if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) { isPeeking = true; + if (e.type === "touchstart") { dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {}); dom.addEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {}); } + onMenuTouchStart(e); } } @@ -65,38 +82,52 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser, function onEdgeTouchMove(e) { e.preventDefault(); e.stopPropagation(); - onEdgeTouchStart(e); } function onEdgeTouchEnd(e) { - isPeeking && (isPeeking = !1, dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {}), onMenuTouchEnd(e)) + if (isPeeking) { + isPeeking = false; + dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {}); + onMenuTouchEnd(e); + } } function disableEvent(e) { - e.preventDefault(), e.stopPropagation() + e.preventDefault(); + e.stopPropagation(); } function onBackgroundTouchStart(e) { var touches = getTouches(e); var touch = touches[0] || {}; - backgroundTouchStartX = touch.clientX, backgroundTouchStartTime = (new Date).getTime() + backgroundTouchStartX = touch.clientX; + backgroundTouchStartTime = new Date().getTime(); } function onBackgroundTouchMove(e) { var touches = getTouches(e); var touch = touches[0] || {}; var endX = touch.clientX || 0; + if (endX <= options.width && self.isVisible) { countStart++; var deltaX = endX - (backgroundTouchStartX || 0); - if (1 === countStart && (startPoint = deltaX), deltaX < 0 && 2 !== dragMode) { - dragMode = 1, newPos = deltaX - startPoint + options.width, self.changeMenuPos(); - var time = (new Date).getTime() - (backgroundTouchStartTime || 0); - velocity = Math.abs(deltaX) / time + + if (countStart == 1) { + startPoint = deltaX; + } + if (deltaX < 0 && dragMode !== 2) { + dragMode = 1; + newPos = deltaX - startPoint + options.width; + self.changeMenuPos(); + var time = new Date().getTime() - (backgroundTouchStartTime || 0); + velocity = Math.abs(deltaX) / time; } } - e.preventDefault(), e.stopPropagation() + + e.preventDefault(); + e.stopPropagation(); } function onBackgroundTouchEnd(e) { @@ -104,13 +135,18 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser, var touch = touches[0] || {}; var endX = touch.clientX || 0; var deltaX = endX - (backgroundTouchStartX || 0); - self.checkMenuState(deltaX), countStart = 0 + self.checkMenuState(deltaX); + countStart = 0; } function onMaskTransitionEnd() { var classList = mask.classList; - classList.contains("backdrop") || classList.add("hide") + + if (!classList.contains("backdrop")) { + classList.add("hide"); + } } + var self; var defaults; var mask; @@ -123,83 +159,195 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser, var dragMode = 0; var scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer"); scrollContainer.classList.add("scrollY"); - var TouchMenuLA = function() { - self = this, defaults = { + + var TouchMenuLA = function () { + self = this; + defaults = { width: 260, handleSize: 10, - disableMask: !1, + disableMask: false, maxMaskOpacity: 0.5 - }, this.isVisible = !1, this.initialize() + }; + this.isVisible = false; + this.initialize(); }; - TouchMenuLA.prototype.initElements = function() { - options.target.classList.add("touch-menu-la"), options.target.style.width = options.width + "px", options.target.style.left = -options.width + "px", options.disableMask || (mask = document.createElement("div"), mask.className = "tmla-mask hide", document.body.appendChild(mask), dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, { - passive: !0 - })) + + TouchMenuLA.prototype.initElements = function () { + options.target.classList.add("touch-menu-la"); + options.target.style.width = options.width + "px"; + options.target.style.left = -options.width + "px"; + + if (!options.disableMask) { + mask = document.createElement("div"); + mask.className = "tmla-mask hide"; + document.body.appendChild(mask); + dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, { + passive: true + }); + } }; + var menuTouchStartX; var menuTouchStartY; var menuTouchStartTime; var edgeContainer = document.querySelector(".mainDrawerHandle"); var isPeeking = false; - TouchMenuLA.prototype.animateToPosition = function(pos) { - requestAnimationFrame(function() { - options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none" - }) - }, TouchMenuLA.prototype.changeMenuPos = function() { - newPos <= options.width && this.animateToPosition(newPos) - }, TouchMenuLA.prototype.clickMaskClose = function() { - mask.addEventListener("click", function() { - self.close() - }) - }, TouchMenuLA.prototype.checkMenuState = function(deltaX, deltaY) { - velocity >= 0.4 ? deltaX >= 0 || Math.abs(deltaY || 0) >= 70 ? self.open() : self.close() : newPos >= 100 ? self.open() : newPos && self.close() - }, TouchMenuLA.prototype.open = function() { - this.animateToPosition(options.width), currentPos = options.width, this.isVisible = !0, options.target.classList.add("drawer-open"), self.showMask(), self.invoke(options.onChange) - }, TouchMenuLA.prototype.close = function() { - this.animateToPosition(0), currentPos = 0, self.isVisible = !1, options.target.classList.remove("drawer-open"), self.hideMask(), self.invoke(options.onChange) - }, TouchMenuLA.prototype.toggle = function() { - self.isVisible ? self.close() : self.open() + + TouchMenuLA.prototype.animateToPosition = function (pos) { + requestAnimationFrame(function () { + options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none"; + }); }; + + TouchMenuLA.prototype.changeMenuPos = function () { + if (newPos <= options.width) { + this.animateToPosition(newPos); + } + }; + + TouchMenuLA.prototype.clickMaskClose = function () { + mask.addEventListener("click", function () { + self.close(); + }); + }; + + TouchMenuLA.prototype.checkMenuState = function (deltaX, deltaY) { + if (velocity >= 0.4) { + if (deltaX >= 0 || Math.abs(deltaY || 0) >= 70) { + self.open(); + } else { + self.close(); + } + } else { + if (newPos >= 100) { + self.open(); + } else { + if (newPos) { + self.close(); + } + } + } + }; + + TouchMenuLA.prototype.open = function () { + this.animateToPosition(options.width); + currentPos = options.width; + this.isVisible = true; + options.target.classList.add("drawer-open"); + self.showMask(); + self.invoke(options.onChange); + }; + + TouchMenuLA.prototype.close = function () { + this.animateToPosition(0); + currentPos = 0; + self.isVisible = false; + options.target.classList.remove("drawer-open"); + self.hideMask(); + self.invoke(options.onChange); + }; + + TouchMenuLA.prototype.toggle = function () { + if (self.isVisible) { + self.close(); + } else { + self.open(); + } + }; + var backgroundTouchStartX; var backgroundTouchStartTime; - TouchMenuLA.prototype.showMask = function() { - mask.classList.remove("hide"), mask.offsetWidth, mask.classList.add("backdrop") - }, TouchMenuLA.prototype.hideMask = function() { - mask.classList.remove("backdrop") - }, TouchMenuLA.prototype.invoke = function(fn) { - fn && fn.apply(self) + + TouchMenuLA.prototype.showMask = function () { + mask.classList.remove("hide"); + mask.offsetWidth; + mask.classList.add("backdrop"); }; + + TouchMenuLA.prototype.hideMask = function () { + mask.classList.add("hide"); + mask.classList.remove("backdrop"); + }; + + TouchMenuLA.prototype.invoke = function (fn) { + if (fn) { + fn.apply(self); + } + }; + var _edgeSwipeEnabled; - return TouchMenuLA.prototype.setEdgeSwipeEnabled = function(enabled) { - options.disableEdgeSwipe || browser.touch && (enabled ? _edgeSwipeEnabled || (_edgeSwipeEnabled = !0, dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, { - passive: !0 - }), dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, { - passive: !0 - }), dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, { - passive: !0 - })) : _edgeSwipeEnabled && (_edgeSwipeEnabled = !1, dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, { - passive: !0 - }), dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, { - passive: !0 - }), dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, { - passive: !0 - }))) - }, TouchMenuLA.prototype.initialize = function() { - options = Object.assign(defaults, options || {}), browser.edge && (options.disableEdgeSwipe = !0), self.initElements(), browser.touch && (dom.addEventListener(options.target, "touchstart", onMenuTouchStart, { - passive: !0 - }), dom.addEventListener(options.target, "touchmove", onMenuTouchMove, { - passive: !0 - }), dom.addEventListener(options.target, "touchend", onMenuTouchEnd, { - passive: !0 - }), dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, { - passive: !0 - }), dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, { - passive: !0 - }), dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {}), dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, { - passive: !0 - }), dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, { - passive: !0 - })), self.clickMaskClose() - }, new TouchMenuLA - } -}); \ No newline at end of file + + TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) { + if (!options.disableEdgeSwipe) { + if (browser.touch) { + if (enabled) { + if (!_edgeSwipeEnabled) { + _edgeSwipeEnabled = true; + dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, { + passive: true + }); + dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, { + passive: true + }); + dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, { + passive: true + }); + } + } else { + if (_edgeSwipeEnabled) { + _edgeSwipeEnabled = false; + dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, { + passive: true + }); + dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, { + passive: true + }); + dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, { + passive: true + }); + } + } + } + } + }; + + TouchMenuLA.prototype.initialize = function () { + options = Object.assign(defaults, options || {}); + + if (browser.edge) { + options.disableEdgeSwipe = true; + } + + self.initElements(); + + if (browser.touch) { + dom.addEventListener(options.target, "touchstart", onMenuTouchStart, { + passive: true + }); + dom.addEventListener(options.target, "touchmove", onMenuTouchMove, { + passive: true + }); + dom.addEventListener(options.target, "touchend", onMenuTouchEnd, { + passive: true + }); + dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, { + passive: true + }); + dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, { + passive: true + }); + dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {}); + dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, { + passive: true + }); + dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, { + passive: true + }); + } + + self.clickMaskClose(); + }; + + return new TouchMenuLA(); + }; +}); diff --git a/src/components/nowplayingbar/nowplayingbar.css b/src/components/nowplayingbar/nowplayingbar.css index 120a0508a0..b1e77715ff 100644 --- a/src/components/nowplayingbar/nowplayingbar.css +++ b/src/components/nowplayingbar/nowplayingbar.css @@ -16,7 +16,7 @@ } .nowPlayingBar-hidden { - transform: translate3d(0,100%,0); + transform: translate3d(0, 100%, 0); } .nowPlayingBarTop { @@ -28,7 +28,8 @@ justify-content: center; } -.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating { +.mediaButton, +.nowPlayingBarUserDataButtons .btnUserItemRating { vertical-align: middle; margin: 0; text-align: center; @@ -62,6 +63,7 @@ .nowPlayingBarCenter { vertical-align: middle; text-align: center; + /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */ z-index: 2; flex-grow: 1; @@ -74,7 +76,7 @@ .nowPlayingBarPositionContainer { position: absolute !important; left: 0; - top: -.56em; + top: -0.56em; right: 0; z-index: 1; } @@ -89,7 +91,8 @@ .nowPlayingBarRight { position: relative; - margin: 0 .5em 0 auto; + margin: 0 0.5em 0 auto; + /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */ z-index: 2; display: flex; @@ -121,7 +124,6 @@ } @media all and (max-width: 70em) { - .nowPlayingBarRight .nowPlayingBarUserDataButtons { display: none; } @@ -155,13 +157,15 @@ .nowPlayingBarRight .nowPlayingBarVolumeSliderContainer { display: none !important; } + .nowPlayingBarInfoContainer { width: 70%; } } @media all and (max-width: 24em) { - .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton { + .nowPlayingBar .muteButton, + .nowPlayingBar .unmuteButton { display: none; } } diff --git a/src/components/nowplayingbar/nowplayingbar.js b/src/components/nowplayingbar/nowplayingbar.js index 37a1a32f56..d8191e9ef1 100644 --- a/src/components/nowplayingbar/nowplayingbar.js +++ b/src/components/nowplayingbar/nowplayingbar.js @@ -42,31 +42,31 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', // The onclicks are needed due to the return false above html += '
'; - html += ''; + html += ''; - html += ''; + html += ''; - html += ''; - html += ''; + html += ''; + html += ''; html += '
'; html += '
'; html += '
'; - html += ''; + html += ''; html += '
'; html += ''; html += '
'; - html += ''; + html += ''; html += '
'; html += '
'; - html += ''; - html += ''; + html += ''; + html += ''; html += '
'; html += '
'; @@ -571,7 +571,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', var userData = item.UserData || {}; var likes = userData.Likes == null ? '' : userData.Likes; - nowPlayingUserData.innerHTML = ''; + nowPlayingUserData.innerHTML = ''; }); } diff --git a/src/components/playback/autoplaydetect.js b/src/components/playback/autoplaydetect.js deleted file mode 100644 index 3610eef2ab..0000000000 --- a/src/components/playback/autoplaydetect.js +++ /dev/null @@ -1,61 +0,0 @@ -define([], function () { - 'use strict'; - - function supportsHtmlMediaAutoplay() { - - return new Promise(function (resolve, reject) { - - var timeout; - var elem = document.createElement('video'); - var elemStyle = elem.style; - //skip the test if video itself, or the autoplay - //element on it isn't supported - if (!('autoplay' in elem)) { - reject(); - return; - } - elemStyle.position = 'absolute'; - elemStyle.height = 0; - elemStyle.width = 0; - - elem.setAttribute('autoplay', 'autoplay'); - elem.style.display = 'none'; - document.body.appendChild(elem); - - var testAutoplay = function (arg) { - clearTimeout(timeout); - elem.removeEventListener('playing', testAutoplay); - elem.removeEventListener('play', testAutoplay); - var supported = (arg && arg.type === 'playing') || (arg && arg.type === 'play') || elem.currentTime !== 0; - elem.parentNode.removeChild(elem); - - if (supported) { - resolve(); - } else { - reject(); - } - }; - - // play needed for firefox - elem.addEventListener('play', testAutoplay); - elem.addEventListener('playing', testAutoplay); - - try { - elem.src = 'data:video/mp4;base64,AAAAHGZ0eXBtcDQyAAAAAG1wNDJpc29tYXZjMQAAAz5tb292AAAAbG12aGQAAAAAzaNacc2jWnEAAV+QAAFfkAABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAGGlvZHMAAAAAEICAgAcAT////3//AAACQ3RyYWsAAABcdGtoZAAAAAHNo1pxzaNacQAAAAEAAAAAAAFfkAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAEAAAABAAAAAAAd9tZGlhAAAAIG1kaGQAAAAAzaNacc2jWnEAAV+QAAFfkFXEAAAAAAAhaGRscgAAAAAAAAAAdmlkZQAAAAAAAAAAAAAAAAAAAAGWbWluZgAAABR2bWhkAAAAAQAAAAAAAAAAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAABVnN0YmwAAACpc3RzZAAAAAAAAAABAAAAmWF2YzEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAEAAQAEgAAABIAAAAAAAAAAEOSlZUL0FWQyBDb2RpbmcAAAAAAAAAAAAAAAAAAAAAAAAY//8AAAAxYXZjQwH0AAr/4QAZZ/QACq609NQYBBkAAAMAAQAAAwAKjxImoAEABWjOAa8gAAAAEmNvbHJuY2xjAAYAAQAGAAAAGHN0dHMAAAAAAAAAAQAAAAUAAEZQAAAAKHN0c3oAAAAAAAAAAAAAAAUAAAIqAAAACAAAAAgAAAAIAAAACAAAAChzdHNjAAAAAAAAAAIAAAABAAAABAAAAAEAAAACAAAAAQAAAAEAAAAYc3RjbwAAAAAAAAACAAADYgAABaQAAAAUc3RzcwAAAAAAAAABAAAAAQAAABFzZHRwAAAAAAREREREAAAAb3VkdGEAAABnbWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcgAAAAAAAAAAAAAAAAAAAAA6aWxzdAAAADKpdG9vAAAAKmRhdGEAAAABAAAAAEhhbmRCcmFrZSAwLjkuOCAyMDEyMDcxODAwAAACUm1kYXQAAAHkBgX/4NxF6b3m2Ui3lizYINkj7u94MjY0IC0gY29yZSAxMjAgLSBILjI2NC9NUEVHLTQgQVZDIGNvZGVjIC0gQ29weWxlZnQgMjAwMy0yMDExIC0gaHR0cDovL3d3dy52aWRlb2xhbi5vcmcveDI2NC5odG1sIC0gb3B0aW9uczogY2FiYWM9MCByZWY9MSBkZWJsb2NrPTE6MDowIGFuYWx5c2U9MHgxOjAgbWU9ZXNhIHN1Ym1lPTkgcHN5PTAgbWl4ZWRfcmVmPTAgbWVfcmFuZ2U9NCBjaHJvbWFfbWU9MSB0cmVsbGlzPTAgOHg4ZGN0PTAgY3FtPTAgZGVhZHpvbmU9MjEsMTEgZmFzdF9wc2tpcD0wIGNocm9tYV9xcF9vZmZzZXQ9MCB0aHJlYWRzPTYgc2xpY2VkX3RocmVhZHM9MCBucj0wIGRlY2ltYXRlPTEgaW50ZXJsYWNlZD0wIGJsdXJheV9jb21wYXQ9MCBjb25zdHJhaW5lZF9pbnRyYT0wIGJmcmFtZXM9MCB3ZWlnaHRwPTAga2V5aW50PTUwIGtleWludF9taW49NSBzY2VuZWN1dD00MCBpbnRyYV9yZWZyZXNoPTAgcmM9Y3FwIG1idHJlZT0wIHFwPTAAgAAAAD5liISscR8A+E4ACAACFoAAITAAAgsAAPgYCoKgoC+L4vi+KAvi+L4YfAEAACMzgABF9AAEUGUgABDJiXnf4AAAAARBmiKUAAAABEGaQpQAAAAEQZpilAAAAARBmoKU'; - var promise = elem.play(); - if (promise && promise.catch) { - promise.catch(reject); - } - - timeout = setTimeout(testAutoplay, 500); - } catch (e) { - reject(); - return; - } - }); - } - - return { - supportsHtmlMediaAutoplay: supportsHtmlMediaAutoplay - }; -}); \ No newline at end of file diff --git a/src/components/playback/brightnessosd.js b/src/components/playback/brightnessosd.js index b2bf9d4106..1a064ed39d 100644 --- a/src/components/playback/brightnessosd.js +++ b/src/components/playback/brightnessosd.js @@ -11,7 +11,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia function getOsdElementHtml() { var html = ''; - html += 'brightness_high'; + html += 'brightness_high'; html += '
'; diff --git a/src/components/playback/iconosd.css b/src/components/playback/iconosd.css index b2c4fca91a..8f197a179e 100644 --- a/src/components/playback/iconosd.css +++ b/src/components/playback/iconosd.css @@ -4,11 +4,11 @@ right: 3%; z-index: 100000; background: #222; - background: rgba(0, 0, 0, .8); + background: rgba(0, 0, 0, 0.8); padding: 1em; color: #fff; backdrop-filter: blur(5px); - border-radius: .25em; + border-radius: 0.25em; transition: opacity 200ms ease-out; } @@ -19,22 +19,22 @@ .iconOsdIcon { font-size: 320%; display: block; - margin: .25em .7em; + margin: 0.25em 0.7em; } .iconOsdProgressOuter { - margin: 1.5em .25em 1em; - height: .35em; + margin: 1.5em 0.25em 1em; + height: 0.35em; background: #222; - border-radius: .25em; + border-radius: 0.25em; } .iconOsdProgressInner { background: #00a4dc; height: 100%; - border-radius: .25em; + border-radius: 0.25em; } .brightnessOsdProgressInner { - background: #FF9800; -} \ No newline at end of file + background: #ff9800; +} diff --git a/src/components/playback/mediasession.js b/src/components/playback/mediasession.js index 7f4b9f519e..c03420c85a 100644 --- a/src/components/playback/mediasession.js +++ b/src/components/playback/mediasession.js @@ -97,6 +97,12 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f } function updatePlayerState(player, state, eventName) { + // Don't go crazy reporting position changes + if (eventName == 'timeupdate') { + // Only report if this item hasn't been reported yet, or if there's an actual playback change. + // Don't report on simple time updates + return; + } var item = state.NowPlayingItem; @@ -118,19 +124,9 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f } var playState = state.PlayState || {}; - var parts = nowPlayingHelper.getNowPlayingNames(item); - - var artist = parts.length === 1 ? '' : parts[0].text; - var title = parts[parts.length - 1].text; - - // Switch these two around for video - if (isVideo && parts.length > 1) { - var temp = artist; - artist = title; - title = temp; - } - + var artist = parts[parts.length - 1].text; + var title = parts.length === 1 ? '' : parts[0].text; var albumArtist; if (item.AlbumArtists && item.AlbumArtists[0]) { @@ -147,17 +143,6 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f var isPaused = playState.IsPaused || false; var canSeek = playState.CanSeek || false; - var now = new Date().getTime(); - - // Don't go crazy reporting position changes - if (eventName == 'timeupdate' && (now - lastUpdateTime) < 5000) { - // Only report if this item hasn't been reported yet, or if there's an actual playback change. - // Don't report on simple time updates - return; - } - - lastUpdateTime = now; - if (navigator.mediaSession) { navigator.mediaSession.metadata = new MediaMetadata({ title: title, diff --git a/src/components/playback/volumeosd.js b/src/components/playback/volumeosd.js index b622cc18b1..d1cd64c656 100644 --- a/src/components/playback/volumeosd.js +++ b/src/components/playback/volumeosd.js @@ -11,7 +11,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia function getOsdElementHtml() { var html = ''; - html += 'volume_up'; + html += 'volume_up'; html += '
'; diff --git a/src/components/playerstats/playerstats.css b/src/components/playerstats/playerstats.css index b9d6355bd2..dfdf75a2e0 100644 --- a/src/components/playerstats/playerstats.css +++ b/src/components/playerstats/playerstats.css @@ -1,11 +1,10 @@ .playerStats { - background: rgba(28,28,28,0.8); - border-radius: .3em; + background: rgba(28, 28, 28, 0.8); + border-radius: 0.3em; color: #fff; left: 1.5em; position: absolute; top: 5em; - color: #fff; } .playerStats-tv { @@ -23,8 +22,8 @@ .playerStats-closeButton { position: absolute; - top: .25em; - right: .25em; + top: 0.25em; + right: 0.25em; color: #ccc; z-index: 1; } @@ -44,7 +43,7 @@ .playerStats-stat-label { font-weight: 500; - margin: 0 .5em 0 0; + margin: 0 0.5em 0 0; } .playerStats-stat-header { diff --git a/src/components/playerstats/playerstats.js b/src/components/playerstats/playerstats.js index 4179192dd2..89adf22624 100644 --- a/src/components/playerstats/playerstats.js +++ b/src/components/playerstats/playerstats.js @@ -18,7 +18,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'playMeth if (layoutManager.tv) { button = ''; } else { - button = ''; + button = ''; } var contentClass = layoutManager.tv ? 'playerStats-content playerStats-content-tv' : 'playerStats-content'; diff --git a/src/components/playlisteditor/playlisteditor.js b/src/components/playlisteditor/playlisteditor.js index 4738211a5e..b70bdc1442 100644 --- a/src/components/playlisteditor/playlisteditor.js +++ b/src/components/playlisteditor/playlisteditor.js @@ -258,7 +258,7 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', var title = globalize.translate('HeaderAddToPlaylist'); html += '
'; - html += ''; + html += ''; html += '

'; html += title; html += '

'; diff --git a/src/components/prompt/prompt.template.html b/src/components/prompt/prompt.template.html index b1e7f580f0..8e78a64cbc 100644 --- a/src/components/prompt/prompt.template.html +++ b/src/components/prompt/prompt.template.html @@ -1,6 +1,6 @@

diff --git a/src/components/recordingcreator/recordingcreator.css b/src/components/recordingcreator/recordingcreator.css index dc1ba9b31a..031d04b860 100644 --- a/src/components/recordingcreator/recordingcreator.css +++ b/src/components/recordingcreator/recordingcreator.css @@ -9,7 +9,7 @@ } .recordingDialog-itemName { - margin-top: .7em; + margin-top: 0.7em; } .recordingDetailsContainer { diff --git a/src/components/recordingcreator/recordingcreator.template.html b/src/components/recordingcreator/recordingcreator.template.html index 2a2840aecc..e8cb850338 100644 --- a/src/components/recordingcreator/recordingcreator.template.html +++ b/src/components/recordingcreator/recordingcreator.template.html @@ -1,5 +1,5 @@
- +

diff --git a/src/components/recordingcreator/recordingeditor.template.html b/src/components/recordingcreator/recordingeditor.template.html index 6b853704f3..b5f38dbba4 100644 --- a/src/components/recordingcreator/recordingeditor.template.html +++ b/src/components/recordingcreator/recordingeditor.template.html @@ -1,5 +1,5 @@
- +

${HeaderRecordingOptions}

diff --git a/src/components/recordingcreator/recordingfields.css b/src/components/recordingcreator/recordingfields.css index c8492f5298..db0c7e0692 100644 --- a/src/components/recordingcreator/recordingfields.css +++ b/src/components/recordingcreator/recordingfields.css @@ -4,9 +4,9 @@ } .recordingIcon-active { - color: #cc3333; + color: #c33; } .recordSeriesContainer { - margin-bottom: .8em; -} \ No newline at end of file + margin-bottom: 0.8em; +} diff --git a/src/components/recordingcreator/recordingfields.template.html b/src/components/recordingcreator/recordingfields.template.html index 622b0d62e7..35f5d4412d 100644 --- a/src/components/recordingcreator/recordingfields.template.html +++ b/src/components/recordingcreator/recordingfields.template.html @@ -2,7 +2,7 @@
@@ -14,7 +14,7 @@
diff --git a/src/components/recordingcreator/seriesrecordingeditor.template.html b/src/components/recordingcreator/seriesrecordingeditor.template.html index c2e8ebd0ed..0aaa687b60 100644 --- a/src/components/recordingcreator/seriesrecordingeditor.template.html +++ b/src/components/recordingcreator/seriesrecordingeditor.template.html @@ -1,5 +1,5 @@
- +

${HeaderSeriesOptions}

diff --git a/src/components/refreshdialog/refreshdialog.js b/src/components/refreshdialog/refreshdialog.js index 30074b4d0b..07ad8e2e59 100644 --- a/src/components/refreshdialog/refreshdialog.js +++ b/src/components/refreshdialog/refreshdialog.js @@ -123,7 +123,7 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager' var title = globalize.translate('RefreshMetadata'); html += '
'; - html += ''; + html += ''; html += '

'; html += title; html += '

'; diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index 673f301c1e..83a1c48e5f 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -1,49 +1,89 @@ .nowPlayingInfoContainer { + display: -webkit-box; + display: -webkit-flex; display: flex; - flex-direction: row + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + flex-direction: row; } .navigationSection { - text-align: center + text-align: center; +} + +.btnArrowUp { + border-radius: 40% 40% 10% 10%; +} + +.btnArrowLeft { + border-radius: 40% 10% 10% 40%; +} + +.btnArrowRight { + border-radius: 10% 40% 40% 10%; +} + +.btnArrowDown { + border-radius: 10% 10% 40% 40%; +} + +.btnOk { + border-radius: 10%; } .nowPlayingPageTitle { - margin: 0 0 .5em .5em + margin: 0 0 0.5em 0.5em; } .nowPlayingPositionSliderContainer { - margin: .7em 0 .7em 1em + margin: 0.7em 0 0.7em 1em; } .nowPlayingInfoButtons { + display: -webkit-box; + display: -webkit-flex; display: flex; + -webkit-box-align: center; + -webkit-align-items: center; align-items: center; - flex-wrap: wrap + -webkit-flex-wrap: wrap; + flex-wrap: wrap; } .nowPlayingInfoControls, .nowPlayingTime { display: flex; + display: -webkit-box; + display: -webkit-flex; } .nowPlayingPageImageContainer { width: 20%; - margin-right: .25em; + margin-right: 0.25em; position: relative; - flex-shrink: 0 + -webkit-flex-shrink: 0; + flex-shrink: 0; } -@media all and (min-width:50em) { +@media all and (min-width: 50em) { .nowPlayingPageImageContainer { - width: 16% + width: 16%; } } .nowPlayingInfoControls { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; flex-grow: 1; display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; flex-direction: column; - justify-content: center + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; } .nowPlayingPageImage { @@ -51,118 +91,149 @@ left: 0; right: 0; width: 100%; + -webkit-box-shadow: 0 0 1.9vh #000; box-shadow: 0 0 1.9vh #000; - border: .1em solid #222; + border: 0.1em solid #222; user-drag: none; user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; } -@media all and (orientation:portrait) and (max-width:50em) { +@media all and (orientation: portrait) and (max-width: 50em) { .nowPlayingInfoContainer { + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -webkit-flex-direction: column !important; flex-direction: column !important; - align-items: center + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; } .nowPlayingPageTitle { text-align: center; - margin: .5em 0 .75em + margin: 0.5em 0 0.75em; } .nowPlayingPositionSliderContainer { - margin: .7em 1em + margin: 0.7em 1em; } .nowPlayingInfoButtons { - justify-content: center + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; } .nowPlayingPageImageContainer { width: auto; - margin-right: 0 + margin-right: 0; } .nowPlayingInfoControls { margin-top: 1em; - max-width: 100% + max-width: 100%; } .nowPlayingPageImage { width: auto; - height: 36vh + height: 36vh; } } -@media all and (orientation:portrait) and (max-width:40em) { +@media all and (orientation: portrait) and (max-width: 40em) { .nowPlayingPageImage { - height: 30vh + height: 30vh; } } .nowPlayingTime { display: flex; + -webkit-box-align: center; + -webkit-align-items: center; align-items: center; - margin: 0 1em + margin: 0 1em; } .nowPlayingSecondaryButtons { + display: -webkit-box; + display: -webkit-flex; display: flex; + -webkit-box-align: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-wrap: wrap; flex-wrap: wrap; - justify-content: center + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; } -@media all and (min-width:50em) { +@media all and (min-width: 50em) { .nowPlayingSecondaryButtons { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; flex-grow: 1; - justify-content: flex-end + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + justify-content: flex-end; } } -@media all and (min-width:80em) { +@media all and (min-width: 80em) { .nowPlayingPageImageContainer { - margin-right: .75em + margin-right: 0.75em; } } .nowPlayingNavButtonContainer { - width: 30em + width: 30em; } -.smallBackdropPosterItem .cardOverlayInner>div { +.smallBackdropPosterItem .cardOverlayInner > div { white-space: nowrap; + -o-text-overflow: ellipsis; text-overflow: ellipsis; - overflow: hidden + overflow: hidden; } .playlistIndexIndicatorImage { + -webkit-background-size: initial initial !important; background-size: initial !important; - background-image: url(assets/img/equalizer.gif) !important; + background-image: url(../../assets/img/equalizer.gif) !important; } .hideVideoButtons .videoButton { - display: none + display: none; } .nowPlayingVolumeSliderContainer { - width: 9em + width: 9em; } -@media all and (max-width:50em) { +@media all and (max-width: 50em) { .nowPlayingInfoButtons .nowPlayingPageUserDataButtons { - display: none !important + display: none !important; + } + + .navigationSection .collapseContent i { + font-size: 4em; } } -@media all and (max-width:47em) { +@media all and (max-width: 47em) { .nowPlayingInfoButtons .repeatToggleButton { - display: none !important + display: none !important; } } -@media all and (max-width:34em) { +@media all and (max-width: 34em) { .nowPlayingInfoButtons .btnNowPlayingFastForward, .nowPlayingInfoButtons .btnNowPlayingRewind, .nowPlayingInfoButtons .playlist .listItemMediaInfo { - display: none !important + display: none !important; } } diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index 3a48c2dbef..29e7e8f42b 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -135,7 +135,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { var userData = fullItem.UserData || {}; var likes = null == userData.Likes ? "" : userData.Likes; - context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = ''; + context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = ''; }); } else { backdrop.clear(); @@ -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); @@ -274,13 +263,13 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL var toggleRepeatButton = context.querySelector(".repeatToggleButton"); if ("RepeatAll" == repeatMode) { - toggleRepeatButton.innerHTML = "repeat"; + toggleRepeatButton.innerHTML = "repeat"; toggleRepeatButton.classList.add("repeatButton-active"); } else if ("RepeatOne" == repeatMode) { - toggleRepeatButton.innerHTML = "repeat_one"; + toggleRepeatButton.innerHTML = "repeat_one"; toggleRepeatButton.classList.add("repeatButton-active"); } else { - toggleRepeatButton.innerHTML = "repeat"; + toggleRepeatButton.innerHTML = "repeat"; toggleRepeatButton.classList.remove("repeatButton-active"); } } diff --git a/src/components/search/searchfields.css b/src/components/search/searchfields.css index 01981ed998..08d8515c86 100644 --- a/src/components/search/searchfields.css +++ b/src/components/search/searchfields.css @@ -4,8 +4,8 @@ } .searchfields-icon { - margin-bottom: .1em; - margin-right: .25em; + margin-bottom: 0.1em; + margin-right: 0.25em; font-size: 2em; align-self: flex-end; } diff --git a/src/components/search/searchfields.template.html b/src/components/search/searchfields.template.html index bad808cb7e..c1e9c64347 100644 --- a/src/components/search/searchfields.template.html +++ b/src/components/search/searchfields.template.html @@ -1,5 +1,5 @@
- search + search
diff --git a/src/components/skinManager.js b/src/components/skinManager.js index 06125e947a..b757aab3d6 100644 --- a/src/components/skinManager.js +++ b/src/components/skinManager.js @@ -34,15 +34,12 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr id: "dark", isDefault: true, isDefaultServerDashboard: true - }, { - name: "Emby", - id: "emby" }, { name: "Light", id: "light" }, { name: "Purple Haze", - id: "purple-haze" + id: "purplehaze" }, { name: "Windows Media Center", id: "wmc" diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js index a5acd042b3..70404cdd68 100644 --- a/src/components/slideshow/slideshow.js +++ b/src/components/slideshow/slideshow.js @@ -70,7 +70,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f var tabIndex = canFocus ? '' : ' tabindex="-1"'; autoFocus = autoFocus ? ' autofocus' : ''; - return ''; + return ''; } function setUserScalable(scalable) { diff --git a/src/components/slideshow/style.css b/src/components/slideshow/style.css index 1167a972c8..2bea7c9696 100644 --- a/src/components/slideshow/style.css +++ b/src/components/slideshow/style.css @@ -3,11 +3,14 @@ background: #000; } -.slideshowSwiperContainer, .swiper-wrapper, .swiper-slide { +.slideshowSwiperContainer, +.swiper-wrapper, +.swiper-slide { background: #000; } -.slideshowImage, .slideshowSwiperContainer { +.slideshowImage, +.slideshowSwiperContainer { position: fixed; top: 0; right: 0; @@ -27,11 +30,12 @@ .slideshowImageText { position: fixed; - bottom: .25em; - right: .5em; + bottom: 0.25em; + right: 0.5em; color: #fff; z-index: 1002; font-weight: normal; + /* Add an outline */ text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } @@ -41,6 +45,9 @@ height: auto; max-width: 100%; max-height: 100%; + -ms-transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; left: 50%; @@ -49,26 +56,26 @@ .slideshowButtonIcon { color: #fff; - opacity: .7; + opacity: 0.7; } .btnSlideshowPrevious { - left: .5vh; + left: 0.5vh; top: 45vh; z-index: 1002; position: absolute; } .btnSlideshowNext { - right: .5vh; + right: 0.5vh; top: 45vh; z-index: 1002; position: absolute; } .topActionButtons { - right: .5vh; - top: .5vh; + right: 0.5vh; + top: 0.5vh; z-index: 1002; position: absolute; } @@ -78,9 +85,9 @@ left: 0; bottom: 0; right: 0; - background-color: rgba(0, 0, 0, .7); + background-color: rgba(0, 0, 0, 0.7); color: #fff; - padding: .5%; + padding: 0.5%; display: flex; flex-direction: row; align-items: center; @@ -92,9 +99,9 @@ left: 0; top: 0; right: 0; - background-color: rgba(0, 0, 0, .7); + background-color: rgba(0, 0, 0, 0.7); color: #fff; - padding: .5%; + padding: 0.5%; display: flex; flex-direction: row; align-items: center; @@ -118,14 +125,14 @@ .slideTextInner { margin: 0 auto; max-width: 60%; - background: rgba(0,0,0,.8); + background: rgba(0, 0, 0, 0.8); display: inline-block; - padding: .5em 1em; - border-radius: .25em; + padding: 0.5em 1em; + border-radius: 0.25em; } .slideTitle { - margin: 0 0 .25em; + margin: 0 0 0.25em; } .slideSubtitle { diff --git a/src/components/sortmenu/sortmenu.js b/src/components/sortmenu/sortmenu.js index d4f75a0806..6820b24d23 100644 --- a/src/components/sortmenu/sortmenu.js +++ b/src/components/sortmenu/sortmenu.js @@ -66,7 +66,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana var html = ''; html += '
'; - html += ''; + html += ''; html += '

${Sort}

'; html += '
'; diff --git a/src/components/subtitleeditor/subtitleeditor.css b/src/components/subtitleeditor/subtitleeditor.css index a97b20b38a..08e6faffba 100644 --- a/src/components/subtitleeditor/subtitleeditor.css +++ b/src/components/subtitleeditor/subtitleeditor.css @@ -1,3 +1,3 @@ .originalSubtitleFileLabel { margin-right: 1em; -} \ No newline at end of file +} diff --git a/src/components/subtitleeditor/subtitleeditor.js b/src/components/subtitleeditor/subtitleeditor.js index 964aa81789..59ca98ff32 100644 --- a/src/components/subtitleeditor/subtitleeditor.js +++ b/src/components/subtitleeditor/subtitleeditor.js @@ -132,7 +132,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">'; - itemHtml += 'closed_caption'; + itemHtml += 'closed_caption'; itemHtml += '
'; @@ -149,7 +149,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', if (!layoutManager.tv) { if (s.Path) { - itemHtml += ''; + itemHtml += ''; } } @@ -248,7 +248,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', html += '<' + tagName + ' class="' + className + '" data-subid="' + result.Id + '">'; - html += 'closed_caption'; + html += 'closed_caption'; var bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line'; @@ -281,7 +281,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', html += '
'; if (!layoutManager.tv) { - html += ''; + html += ''; } html += ''; diff --git a/src/components/subtitleeditor/subtitleeditor.template.html b/src/components/subtitleeditor/subtitleeditor.template.html index dc8ae25701..4d1d737b41 100644 --- a/src/components/subtitleeditor/subtitleeditor.template.html +++ b/src/components/subtitleeditor/subtitleeditor.template.html @@ -1,8 +1,8 @@
- +

${Subtitles}

- info${Help} + info${Help}
@@ -18,7 +18,7 @@
- +
diff --git a/src/components/subtitlesync/subtitlesync.css b/src/components/subtitlesync/subtitlesync.css index 38a15be901..2ff8a3e905 100644 --- a/src/components/subtitlesync/subtitlesync.css +++ b/src/components/subtitlesync/subtitlesync.css @@ -3,8 +3,8 @@ margin-left: 30%; margin-right: 30%; height: 4.2em; - background: rgba(28,28,28,0.8); - border-radius: .3em; + background: rgba(28, 28, 28, 0.8); + border-radius: 0.3em; color: #fff; position: absolute; } @@ -14,7 +14,7 @@ top: 0; right: 0; color: #ccc; - z-index: 2; + z-index: 2; } .subtitleSyncTextField { @@ -27,7 +27,7 @@ text-align: center; font-size: 20px; color: white; - z-index: 2; + z-index: 2; } #prompt { @@ -40,7 +40,9 @@ margin-right: 1%; top: 2.5em; height: 1.4em; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; flex-grow: 1; - border-radius: .3em; - z-index: 1; -} \ No newline at end of file + border-radius: 0.3em; + z-index: 1; +} diff --git a/src/components/subtitlesync/subtitlesync.template.html b/src/components/subtitlesync/subtitlesync.template.html index 4ee344333d..2aa6b10450 100644 --- a/src/components/subtitlesync/subtitlesync.template.html +++ b/src/components/subtitlesync/subtitlesync.template.html @@ -1,5 +1,5 @@
- +
0s
diff --git a/src/components/toast/toast.css b/src/components/toast/toast.css index 09d89abca5..28d6cb52fc 100644 --- a/src/components/toast/toast.css +++ b/src/components/toast/toast.css @@ -3,9 +3,9 @@ min-width: 20em; box-sizing: border-box; box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); - border-radius: .15em; + border-radius: 0.15em; cursor: default; - transition: transform .3s ease-out; + transition: transform 0.3s ease-out; min-height: initial; padding: 1em 1.5em; bottom: 1em; diff --git a/src/components/tunerpicker.js b/src/components/tunerpicker.js index 3882f2e85a..fb6760dec4 100644 --- a/src/components/tunerpicker.js +++ b/src/components/tunerpicker.js @@ -41,7 +41,7 @@ define(["dialogHelper", "dom", "layoutManager", "connectionManager", "globalize" html += '
'; html += '
'; html += '
'; - html += '
dvr
'; + html += '
dvr
'; html += "
"; html += "
"; html += '
'; @@ -128,7 +128,7 @@ define(["dialogHelper", "dom", "layoutManager", "connectionManager", "globalize" dlg.classList.add("formDialog"); var html = ""; html += '
'; - html += ''; + html += ''; html += '

'; html += globalize.translate("HeaderLiveTvTunerSetup"); html += "

"; diff --git a/src/components/tvproviders/xmltv.template.html b/src/components/tvproviders/xmltv.template.html index 288c1ebe85..7f6490e621 100644 --- a/src/components/tvproviders/xmltv.template.html +++ b/src/components/tvproviders/xmltv.template.html @@ -12,7 +12,7 @@
- +
${XmlTvPathHelp}
diff --git a/src/components/upnextdialog/upnextdialog.css b/src/components/upnextdialog/upnextdialog.css index 784c79cbb7..15f91b29d9 100644 --- a/src/components/upnextdialog/upnextdialog.css +++ b/src/components/upnextdialog/upnextdialog.css @@ -11,6 +11,7 @@ background-color: rgba(0, 0, 0, 0.7); color: #fff; user-select: none; + -webkit-touch-callout: none; } .upNextDialog-hidden { @@ -27,7 +28,7 @@ position: relative; margin-right: 1em; flex-shrink: 0; - margin-bottom: .5em; + margin-bottom: 0.5em; } .upNextDialog-button { @@ -36,7 +37,6 @@ } @media all and (orientation: landscape) { - .upNextDialog { flex-direction: row; } @@ -66,4 +66,8 @@ border: 0; user-drag: none; user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; } diff --git a/src/components/userdatabuttons/userdatabuttons.css b/src/components/userdatabuttons/userdatabuttons.css index 0138631734..f93f47ffcc 100644 --- a/src/components/userdatabuttons/userdatabuttons.css +++ b/src/components/userdatabuttons/userdatabuttons.css @@ -1,3 +1,3 @@ .btnUserDataOn { - color: #cc3333 !important; -} \ No newline at end of file + color: #c33 !important; +} diff --git a/src/components/userdatabuttons/userdatabuttons.js b/src/components/userdatabuttons/userdatabuttons.js index 1c00e50caf..2636be1e1d 100644 --- a/src/components/userdatabuttons/userdatabuttons.js +++ b/src/components/userdatabuttons/userdatabuttons.js @@ -28,7 +28,7 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto iconCssClass = ''; } - iconCssClass += 'md-icon'; + iconCssClass += 'material-icons'; return ''; } diff --git a/src/components/usersettings/usersettings.js b/src/components/usersettings/usersettings.js deleted file mode 100644 index 6b3dc90d49..0000000000 --- a/src/components/usersettings/usersettings.js +++ /dev/null @@ -1,5 +0,0 @@ -define(['userSettingsBuilder'], function (userSettingsBuilder) { - 'use strict'; - - return new userSettingsBuilder(); -}); \ No newline at end of file diff --git a/src/components/viewManager/viewContainer.css b/src/components/viewManager/viewContainer.css index edfa101976..61d9345014 100644 --- a/src/components/viewManager/viewContainer.css +++ b/src/components/viewManager/viewContainer.css @@ -5,8 +5,10 @@ right: 0; bottom: 0; contain: layout style size; - /* Can't use will-change because it causes the alpha picker to move when the page scrolls*/ - /*will-change: transform;*/ + + /* Can't use will-change because it causes the alpha picker to move when the page scrolls */ + + /* will-change: transform; */ } @keyframes view-fadeout { @@ -18,6 +20,7 @@ opacity: 0; } } + @keyframes view-fadein { from { opacity: 0; @@ -66,4 +69,4 @@ to { transform: translate3d(100%, 0, 0); } -} \ No newline at end of file +} diff --git a/src/components/viewsettings/viewsettings.js b/src/components/viewsettings/viewsettings.js index e3c75c6293..82bafb084f 100644 --- a/src/components/viewsettings/viewsettings.js +++ b/src/components/viewsettings/viewsettings.js @@ -77,7 +77,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne var html = ''; html += '
'; - html += ''; + html += ''; html += '

${Settings}

'; html += '
'; diff --git a/src/components/youtubeplayer/style.css b/src/components/youtubeplayer/style.css index 8c59a541cf..1328e6f3d5 100644 --- a/src/components/youtubeplayer/style.css +++ b/src/components/youtubeplayer/style.css @@ -9,13 +9,13 @@ align-items: center; } - .youtubePlayerContainer.onTop { - z-index: 1000; - } +.youtubePlayerContainer.onTop { + z-index: 1000; +} - .youtubePlayerContainer video { - margin: 0 !important; - padding: 0 !important; - width: 100%; - height: 100%; - } \ No newline at end of file +.youtubePlayerContainer video { + margin: 0 !important; + padding: 0 !important; + width: 100%; + height: 100%; +} diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js index 54fb6ce5e9..ceecb2aba3 100644 --- a/src/controllers/auth/login.js +++ b/src/controllers/auth/login.js @@ -1,23 +1,31 @@ -define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layoutManager", "browser", "cardStyle", "emby-checkbox"], function(appHost, appSettings, dom, connectionManager, loading, layoutManager, browser) { +define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layoutManager", "browser", "cardStyle", "emby-checkbox"], function (appHost, appSettings, dom, connectionManager, loading, layoutManager, browser) { "use strict"; var enableFocusTransform = !browser.slow && !browser.edge; function authenticateUserByName(page, apiClient, username, password) { loading.show(); - apiClient.authenticateUserByName(username, password).then(function(result) { + apiClient.authenticateUserByName(username, password).then(function (result) { var user = result.User; var serverId = getParameterByName("serverid"); - var newUrl = user.Policy.IsAdministrator && !serverId ? "dashboard.html" : "home.html"; + var newUrl; + + if (user.Policy.IsAdministrator && !serverId) { + newUrl = "dashboard.html"; + } else { + newUrl = "home.html"; + } + loading.hide(); Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient); Dashboard.navigate(newUrl); - }, function(response) { + }, function (response) { page.querySelector("#txtManualName").value = ""; page.querySelector("#txtManualPassword").value = ""; loading.hide(); + if (response.status === 401) { - require(["toast"], function(toast) { + require(["toast"], function (toast) { toast(Globalize.translate("MessageInvalidUser")); }); } else { @@ -34,8 +42,18 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout context.querySelector(".manualLoginForm").classList.remove("hide"); context.querySelector(".visualLoginForm").classList.add("hide"); context.querySelector(".btnManual").classList.add("hide"); - focusPassword ? context.querySelector("#txtManualPassword").focus() : context.querySelector("#txtManualName").focus(); - showCancel ? context.querySelector(".btnCancel").classList.remove("hide") : context.querySelector(".btnCancel").classList.add("hide"); + + if (focusPassword) { + context.querySelector("#txtManualPassword").focus(); + } else { + context.querySelector("#txtManualName").focus(); + } + + if (showCancel) { + context.querySelector(".btnCancel").classList.remove("hide"); + } else { + context.querySelector(".btnCancel").classList.add("hide"); + } } var metroColors = ["#6FBD45", "#4BB3DD", "#4164A5", "#E12026", "#800080", "#E1B222", "#008040", "#0094FF", "#FF00C7", "#FF870F", "#7F0037"]; @@ -49,22 +67,25 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout if (str) { var character = String(str.substr(0, 1).charCodeAt()); var sum = 0; + for (var i = 0; i < character.length; i++) { sum += parseInt(character.charAt(i)); } + var index = String(sum).substr(-1); return metroColors[index]; } + return getRandomMetroColor(); } function loadUserList(context, apiClient, users) { var html = ""; + for (var i = 0; i < users.length; i++) { var user = users[i]; // TODO move card creation code to Card component - var cssClass = "card squareCard scalableCard squareCard-scalable"; if (layoutManager.tv) { @@ -76,13 +97,13 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout } var cardBoxCssClass = "cardBox cardBox-bottompadded"; - html += '"; } + context.querySelector("#divUsers").innerHTML = html; } - return function(view, params) { + return function (view, params) { function getApiClient() { var serverId = params.serverid; - return serverId ? connectionManager.getOrCreateApiClient(serverId) : ApiClient; + + if (serverId) { + return connectionManager.getOrCreateApiClient(serverId); + } + + return ApiClient; } function showVisualForm() { @@ -122,14 +150,16 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout }); } - view.querySelector("#divUsers").addEventListener("click", function(e) { + view.querySelector("#divUsers").addEventListener("click", function (e) { var card = dom.parentWithClass(e.target, "card"); var cardContent = card ? card.querySelector(".cardContent") : null; + if (cardContent) { var context = view; var id = cardContent.getAttribute("data-userid"); var name = cardContent.getAttribute("data-username"); var haspw = cardContent.getAttribute("data-haspw"); + if (id === 'manual') { context.querySelector("#txtManualName").value = ""; showManualForm(context, true); @@ -142,33 +172,30 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout } } }); - - view.querySelector(".manualLoginForm").addEventListener("submit", function(e) { + view.querySelector(".manualLoginForm").addEventListener("submit", function (e) { appSettings.enableAutoLogin(view.querySelector(".chkRememberLogin").checked); var apiClient = getApiClient(); authenticateUserByName(view, apiClient, view.querySelector("#txtManualName").value, view.querySelector("#txtManualPassword").value); e.preventDefault(); return false; }); - - view.querySelector(".btnForgotPassword").addEventListener("click", function() { + view.querySelector(".btnForgotPassword").addEventListener("click", function () { Dashboard.navigate("forgotpassword.html"); }); - view.querySelector(".btnCancel").addEventListener("click", showVisualForm); - - view.querySelector(".btnManual").addEventListener("click", function() { + view.querySelector(".btnManual").addEventListener("click", function () { view.querySelector("#txtManualName").value = ""; showManualForm(view, true); }); - - view.addEventListener("viewshow", function(e) { + view.addEventListener("viewshow", function (e) { loading.show(); + if (!appHost.supports('multiserver')) { view.querySelector(".btnSelectServer").classList.add("hide"); } + var apiClient = getApiClient(); - apiClient.getPublicUsers().then(function(users) { + apiClient.getPublicUsers().then(function (users) { if (users.length) { showVisualForm(); loadUserList(view, apiClient, users); @@ -176,13 +203,12 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout view.querySelector("#txtManualName").value = ""; showManualForm(view, false, false); } - }).catch().then(function() { + }).catch().then(function () { loading.hide(); }); - - apiClient.getJSON(apiClient.getUrl("Branding/Configuration")).then(function(options) { + apiClient.getJSON(apiClient.getUrl("Branding/Configuration")).then(function (options) { view.querySelector(".disclaimer").textContent = options.LoginDisclaimer || ""; }); }); - } + }; }); diff --git a/src/controllers/auth/selectserver.js b/src/controllers/auth/selectserver.js index b0ee5673e0..e766dbdb5c 100644 --- a/src/controllers/auth/selectserver.js +++ b/src/controllers/auth/selectserver.js @@ -18,7 +18,7 @@ define(["loading", "appRouter", "layoutManager", "appSettings", "apphost", "focu var cardImageContainer; if (item.showIcon) { - cardImageContainer = '' + item.icon + ""; + cardImageContainer = '' + item.icon + ""; } else { cardImageContainer = '
'; } diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js index 63c6f3226b..36cf80fb14 100644 --- a/src/controllers/dashboard/dashboard.js +++ b/src/controllers/dashboard/dashboard.js @@ -303,12 +303,12 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa html += '
'; var btnCssClass; btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl && session.DeviceId !== connectionManager.deviceId() ? "" : " hide"; - html += ''; - html += ''; + html += ''; + html += ''; btnCssClass = session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length ? "" : " hide"; - html += ''; + html += ''; btnCssClass = session.ServerId && -1 !== session.SupportedCommands.indexOf("DisplayMessage") && session.DeviceId !== connectionManager.deviceId() ? "" : " hide"; - html += ''; + html += ''; html += "
"; html += '
'; html += DashboardPage.getSessionNowPlayingStreamInfo(session); @@ -361,7 +361,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa html += progress + "%"; html += ""; html += "" + progress + "%"; - html += ''; + html += ''; } else if (task.State === "Cancelling") { html += '' + globalize.translate("LabelStopping") + ""; } diff --git a/src/controllers/dashboard/general.js b/src/controllers/dashboard/general.js index c37e5e9a46..7eed352329 100644 --- a/src/controllers/dashboard/general.js +++ b/src/controllers/dashboard/general.js @@ -1,38 +1,29 @@ -define(["jQuery", "loading", "fnchecked", "emby-checkbox", "emby-textarea", "emby-input", "emby-select", "emby-button"], function($, loading) { +define(["jQuery", "loading", "fnchecked", "emby-checkbox", "emby-textarea", "emby-input", "emby-select", "emby-button"], function ($, loading) { "use strict"; function loadPage(page, config, languageOptions, systemInfo) { page.querySelector("#txtServerName").value = systemInfo.ServerName; $("#chkAutoRunWebApp", page).checked(config.AutoRunWebApp); + if (systemInfo.CanLaunchWebBrowser) { page.querySelector("#fldAutoRunWebApp").classList.remove("hide"); } else { page.querySelector("#fldAutoRunWebApp").classList.add("hide"); } + page.querySelector("#txtCachePath").value = systemInfo.CachePath || ""; $("#txtMetadataPath", page).val(systemInfo.InternalMetadataPath || ""); $("#txtMetadataNetworkPath", page).val(systemInfo.MetadataNetworkPath || ""); - $("#selectLocalizationLanguage", page).html(languageOptions.map(function(language) { - return '" + $("#selectLocalizationLanguage", page).html(languageOptions.map(function (language) { + return '"; })).val(config.UICulture); currentLanguage = config.UICulture; - if (systemInfo.CanSelfUpdate) { - page.querySelector(".fldAutomaticUpdates").classList.remove("hide"); - } else { - page.querySelector(".fldAutomaticUpdates").classList.add("hide"); - } - $("#chkEnableAutomaticServerUpdates", page).checked(config.EnableAutoUpdate); - $("#chkEnableAutomaticRestart", page).checked(config.EnableAutomaticRestart); - if (systemInfo.CanSelfRestart) { - page.querySelector("#fldEnableAutomaticRestart").classList.remove("hide"); - } else { - page.querySelector("#fldEnableAutomaticRestart").classList.add("hide"); - } if (systemInfo.CanSelfRestart || systemInfo.CanSelfUpdate) { $(".autoUpdatesContainer", page).removeClass("hide"); } else { $(".autoUpdatesContainer", page).addClass("hide"); } + loading.hide(); } @@ -40,92 +31,94 @@ define(["jQuery", "loading", "fnchecked", "emby-checkbox", "emby-textarea", "emb loading.show(); var form = this; $(form).parents(".page"); - return ApiClient.getServerConfiguration().then(function(config) { + ApiClient.getServerConfiguration().then(function (config) { config.ServerName = $("#txtServerName", form).val(); config.UICulture = $("#selectLocalizationLanguage", form).val(); config.CachePath = form.querySelector("#txtCachePath").value; config.MetadataPath = $("#txtMetadataPath", form).val(); config.MetadataNetworkPath = $("#txtMetadataNetworkPath", form).val(); - var requiresReload = (config.UICulture !== currentLanguage); + var requiresReload = config.UICulture !== currentLanguage; config.AutoRunWebApp = $("#chkAutoRunWebApp", form).checked(); - config.EnableAutomaticRestart = $("#chkEnableAutomaticRestart", form).checked(); - config.EnableAutoUpdate = $("#chkEnableAutomaticServerUpdates", form).checked(); ApiClient.updateServerConfiguration(config).then(function() { ApiClient.getNamedConfiguration(brandingConfigKey).then(function(brandingConfig) { brandingConfig.LoginDisclaimer = form.querySelector("#txtLoginDisclaimer").value; brandingConfig.CustomCss = form.querySelector("#txtCustomCss").value; + if (currentBrandingOptions && brandingConfig.CustomCss !== currentBrandingOptions.CustomCss) { requiresReload = true; } - ApiClient.updateNamedConfiguration(brandingConfigKey, brandingConfig).then(function() { + + ApiClient.updateNamedConfiguration(brandingConfigKey, brandingConfig).then(function () { Dashboard.processServerConfigurationUpdateResult(); + if (requiresReload && !AppInfo.isNativeApp) { window.location.reload(true); } }); - }) - }) - }), !1 + }); + }); + }); + return false; } var currentBrandingOptions; var currentLanguage; var brandingConfigKey = "branding"; - - return function(view, params) { - $("#btnSelectCachePath", view).on("click.selectDirectory", function() { - require(["directorybrowser"], function(directoryBrowser) { - var picker = new directoryBrowser; + return function (view, params) { + $("#btnSelectCachePath", view).on("click.selectDirectory", function () { + require(["directorybrowser"], function (directoryBrowser) { + var picker = new directoryBrowser(); picker.show({ - callback: function(path) { + callback: function (path) { if (path) { view.querySelector("#txtCachePath").value = path; } + picker.close(); }, validateWriteable: true, header: Globalize.translate("HeaderSelectServerCachePath"), instruction: Globalize.translate("HeaderSelectServerCachePathHelp") - }) - }) + }); + }); }); - - $("#btnSelectMetadataPath", view).on("click.selectDirectory", function() { - require(["directorybrowser"], function(directoryBrowser) { + $("#btnSelectMetadataPath", view).on("click.selectDirectory", function () { + require(["directorybrowser"], function (directoryBrowser) { var picker = new directoryBrowser(); picker.show({ path: $("#txtMetadataPath", view).val(), networkSharePath: $("#txtMetadataNetworkPath", view).val(), - callback: function(path, networkPath) { + callback: function (path, networkPath) { if (path) { $("#txtMetadataPath", view).val(path); } + if (networkPath) { $("#txtMetadataNetworkPath", view).val(networkPath); } + picker.close(); }, validateWriteable: true, header: Globalize.translate("HeaderSelectMetadataPath"), instruction: Globalize.translate("HeaderSelectMetadataPathHelp"), enableNetworkSharePath: true - }) - }) + }); + }); }); - $(".dashboardGeneralForm", view).off("submit", onSubmit).on("submit", onSubmit); - view.addEventListener("viewshow", function() { + view.addEventListener("viewshow", function () { var promiseConfig = ApiClient.getServerConfiguration(); var promiseLanguageOptions = ApiClient.getJSON(ApiClient.getUrl("Localization/Options")); var promiseSystemInfo = ApiClient.getSystemInfo(); - Promise.all([promiseConfig, promiseLanguageOptions, promiseSystemInfo]).then(function(responses) { + Promise.all([promiseConfig, promiseLanguageOptions, promiseSystemInfo]).then(function (responses) { loadPage(view, responses[0], responses[1], responses[2]); }); - ApiClient.getNamedConfiguration(brandingConfigKey).then(function(config) { + ApiClient.getNamedConfiguration(brandingConfigKey).then(function (config) { currentBrandingOptions = config; view.querySelector("#txtLoginDisclaimer").value = config.LoginDisclaimer || ""; view.querySelector("#txtCustomCss").value = config.CustomCss || ""; }); }); - } + }; }); diff --git a/src/controllers/dashboard/networking.js b/src/controllers/dashboard/networking.js index a6e42967a4..b9f990d629 100644 --- a/src/controllers/dashboard/networking.js +++ b/src/controllers/dashboard/networking.js @@ -1,53 +1,61 @@ -define(["loading", "libraryMenu", "globalize", "emby-checkbox", "emby-select"], function(loading, libraryMenu, globalize) { +define(["loading", "libraryMenu", "globalize", "emby-checkbox", "emby-select"], function (loading, libraryMenu, globalize) { "use strict"; function onSubmit(e) { var form = this; var localAddress = form.querySelector("#txtLocalAddress").value; var enableUpnp = form.querySelector("#chkEnableUpnp").checked; - confirmSelections(localAddress, enableUpnp, function() { + confirmSelections(localAddress, enableUpnp, function () { var validationResult = getValidationAlert(form); - if (validationResult) return void alertText(validationResult); - validateHttps(form).then(function() { + + if (validationResult) { + alertText(validationResult); + return; + } + + validateHttps(form).then(function () { loading.show(); - ApiClient.getServerConfiguration().then(function(config) { - config.LocalNetworkSubnets = form.querySelector("#txtLanNetworks").value.split(",").map(function(s) { - return s.trim() - }).filter(function(s) { - return s.length > 0 + ApiClient.getServerConfiguration().then(function (config) { + config.LocalNetworkSubnets = form.querySelector("#txtLanNetworks").value.split(",").map(function (s) { + return s.trim(); + }).filter(function (s) { + return s.length > 0; }); - - config.RemoteIPFilter = form.querySelector("#txtExternalAddressFilter").value.split(",").map(function(s) { - return s.trim() - }).filter(function(s) { - return s.length > 0 + config.RemoteIPFilter = form.querySelector("#txtExternalAddressFilter").value.split(",").map(function (s) { + return s.trim(); + }).filter(function (s) { + return s.length > 0; }); - config.IsRemoteIPFilterBlacklist = "blacklist" === form.querySelector("#selectExternalAddressFilterMode").value; config.PublicPort = form.querySelector("#txtPublicPort").value; config.PublicHttpsPort = form.querySelector("#txtPublicHttpsPort").value; var httpsMode = form.querySelector("#selectHttpsMode").value; + switch (httpsMode) { case "proxy": config.EnableHttps = true; config.RequireHttps = false; config.IsBehindProxy = true; break; + case "required": config.EnableHttps = true; config.RequireHttps = true; config.IsBehindProxy = false; break; + case "enabled": config.EnableHttps = true; config.RequireHttps = false; config.IsBehindProxy = false; break; + default: config.EnableHttps = false; config.RequireHttps = false; config.IsBehindProxy = false; } + config.HttpsPortNumber = form.querySelector("#txtHttpsPort").value; config.HttpServerPortNumber = form.querySelector("#txtPortNumber").value; config.EnableUPnP = enableUpnp; @@ -57,47 +65,66 @@ define(["loading", "libraryMenu", "globalize", "emby-checkbox", "emby-select"], config.CertificatePassword = form.querySelector("#txtCertPassword").value || null; config.LocalNetworkAddresses = localAddress ? [localAddress] : []; ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult, Dashboard.processErrorResponse); - }) - }) - }), e.preventDefault() + }); + }); + }); + e.preventDefault(); } function triggerChange(select) { var evt = document.createEvent("HTMLEvents"); - evt.initEvent("change", !1, !0), select.dispatchEvent(evt) + evt.initEvent("change", false, true); + select.dispatchEvent(evt); } function getValidationAlert(form) { - return form.querySelector("#txtPublicPort").value === form.querySelector("#txtPublicHttpsPort").value ? "The public http and https ports must be different." : form.querySelector("#txtPortNumber").value === form.querySelector("#txtHttpsPort").value ? "The http and https ports must be different." : null + if (form.querySelector("#txtPublicPort").value === form.querySelector("#txtPublicHttpsPort").value) { + return "The public http and https ports must be different."; + } + + if (form.querySelector("#txtPortNumber").value === form.querySelector("#txtHttpsPort").value) { + return "The http and https ports must be different."; + } + + return null; } function validateHttps(form) { var certPath = form.querySelector("#txtCertificatePath").value || null; var httpsMode = form.querySelector("#selectHttpsMode").value; - return "enabled" !== httpsMode && "required" !== httpsMode || certPath ? Promise.resolve() : new Promise(function(resolve, reject) { + + if ("enabled" !== httpsMode && "required" !== httpsMode || certPath) { + return Promise.resolve(); + } + + return new Promise(function (resolve, reject) { return alertText({ title: globalize.translate("TitleHostingSettings"), text: globalize.translate("HttpsRequiresCert") - }).then(reject, reject) - }) + }).then(reject, reject); + }); } function alertText(options) { - return new Promise(function(resolve, reject) { - require(["alert"], function(alert) { - alert(options).then(resolve, reject) - }) - }) + return new Promise(function (resolve, reject) { + require(["alert"], function (alert) { + alert(options).then(resolve, reject); + }); + }); } function confirmSelections(localAddress, enableUpnp, callback) { - localAddress || !enableUpnp ? alertText({ - title: globalize.translate("TitleHostingSettings"), - text: globalize.translate("SettingsWarning") - }).then(callback) : callback() + if (localAddress || !enableUpnp) { + alertText({ + title: globalize.translate("TitleHostingSettings"), + text: globalize.translate("SettingsWarning") + }).then(callback); + } else { + callback(); + } } - return function(view, params) { + return function (view, params) { function loadPage(page, config) { page.querySelector("#txtPortNumber").value = config.HttpServerPortNumber; page.querySelector("#txtPublicPort").value = config.PublicPort; @@ -108,7 +135,17 @@ define(["loading", "libraryMenu", "globalize", "emby-checkbox", "emby-select"], page.querySelector("#selectExternalAddressFilterMode").value = config.IsRemoteIPFilterBlacklist ? "blacklist" : "whitelist"; page.querySelector("#chkRemoteAccess").checked = null == config.EnableRemoteAccess || config.EnableRemoteAccess; var selectHttpsMode = page.querySelector("#selectHttpsMode"); - config.IsBehindProxy ? selectHttpsMode.value = "proxy" : config.RequireHttps ? selectHttpsMode.value = "required" : config.EnableHttps ? selectHttpsMode.value = "enabled" : selectHttpsMode.value = "disabled"; + + if (config.IsBehindProxy) { + selectHttpsMode.value = "proxy"; + } else if (config.RequireHttps) { + selectHttpsMode.value = "required"; + } else if (config.EnableHttps) { + selectHttpsMode.value = "enabled"; + } else { + selectHttpsMode.value = "disabled"; + } + page.querySelector("#txtHttpsPort").value = config.HttpsPortNumber; page.querySelector("#txtBaseUrl").value = config.BaseUrl || ""; var txtCertificatePath = page.querySelector("#txtCertificatePath"); @@ -119,27 +156,50 @@ define(["loading", "libraryMenu", "globalize", "emby-checkbox", "emby-select"], loading.hide(); } - view.querySelector("#chkRemoteAccess").addEventListener("change", function() { - this.checked ? (view.querySelector(".fldExternalAddressFilter").classList.remove("hide"), view.querySelector(".fldExternalAddressFilterMode").classList.remove("hide"), view.querySelector(".fldPublicPort").classList.remove("hide"), view.querySelector(".fldPublicHttpsPort").classList.remove("hide"), view.querySelector(".fldCertificatePath").classList.remove("hide"), view.querySelector(".fldCertPassword").classList.remove("hide"), view.querySelector(".fldHttpsMode").classList.remove("hide"), view.querySelector(".fldEnableUpnp").classList.remove("hide")) : (view.querySelector(".fldExternalAddressFilter").classList.add("hide"), view.querySelector(".fldExternalAddressFilterMode").classList.add("hide"), view.querySelector(".fldPublicPort").classList.add("hide"), view.querySelector(".fldPublicHttpsPort").classList.add("hide"), view.querySelector(".fldCertificatePath").classList.add("hide"), view.querySelector(".fldCertPassword").classList.add("hide"), view.querySelector(".fldHttpsMode").classList.add("hide"), view.querySelector(".fldEnableUpnp").classList.add("hide")) - }), view.querySelector("#btnSelectCertPath").addEventListener("click", function() { - require(["directorybrowser"], function(directoryBrowser) { - var picker = new directoryBrowser; + view.querySelector("#chkRemoteAccess").addEventListener("change", function () { + if (this.checked) { + view.querySelector(".fldExternalAddressFilter").classList.remove("hide"); + view.querySelector(".fldExternalAddressFilterMode").classList.remove("hide"); + view.querySelector(".fldPublicPort").classList.remove("hide"); + view.querySelector(".fldPublicHttpsPort").classList.remove("hide"); + view.querySelector(".fldCertificatePath").classList.remove("hide"); + view.querySelector(".fldCertPassword").classList.remove("hide"); + view.querySelector(".fldHttpsMode").classList.remove("hide"); + view.querySelector(".fldEnableUpnp").classList.remove("hide"); + } else { + view.querySelector(".fldExternalAddressFilter").classList.add("hide"); + view.querySelector(".fldExternalAddressFilterMode").classList.add("hide"); + view.querySelector(".fldPublicPort").classList.add("hide"); + view.querySelector(".fldPublicHttpsPort").classList.add("hide"); + view.querySelector(".fldCertificatePath").classList.add("hide"); + view.querySelector(".fldCertPassword").classList.add("hide"); + view.querySelector(".fldHttpsMode").classList.add("hide"); + view.querySelector(".fldEnableUpnp").classList.add("hide"); + } + }); + view.querySelector("#btnSelectCertPath").addEventListener("click", function () { + require(["directorybrowser"], function (directoryBrowser) { + var picker = new directoryBrowser(); picker.show({ - includeFiles: !0, - includeDirectories: !0, - callback: function(path) { - path && (view.querySelector("#txtCertificatePath").value = path), picker.close() + includeFiles: true, + includeDirectories: true, + callback: function (path) { + if (path) { + view.querySelector("#txtCertificatePath").value = path; + } + + picker.close(); }, header: globalize.translate("HeaderSelectCertificatePath") - }) - }) + }); + }); }); - - view.querySelector(".dashboardHostingForm").addEventListener("submit", onSubmit), view.addEventListener("viewshow", function(e) { + view.querySelector(".dashboardHostingForm").addEventListener("submit", onSubmit); + view.addEventListener("viewshow", function (e) { loading.show(); - ApiClient.getServerConfiguration().then(function(config) { + ApiClient.getServerConfiguration().then(function (config) { loadPage(view, config); }); }); - } + }; }); diff --git a/src/controllers/dashboard/notifications/notifications.js b/src/controllers/dashboard/notifications/notifications.js index 8b56dc506d..466728210e 100644 --- a/src/controllers/dashboard/notifications/notifications.js +++ b/src/controllers/dashboard/notifications/notifications.js @@ -31,14 +31,14 @@ define(["loading", "libraryMenu", "globalize", "listViewStyle", "emby-button"], } itemHtml += ''; if (notification.Enabled) { - itemHtml += 'notifications_active'; + itemHtml += 'notifications_active'; } else { - itemHtml += 'notifications_off'; + itemHtml += 'notifications_off'; } itemHtml += '
'; itemHtml += '
' + notification.Name + "
"; itemHtml += "
"; - itemHtml += ''; + itemHtml += ''; itemHtml += "
"; return itemHtml; }).join(""); diff --git a/src/controllers/dashboard/plugins/available.js b/src/controllers/dashboard/plugins/available.js index 1679fec5e7..5526bd9ade 100644 --- a/src/controllers/dashboard/plugins/available.js +++ b/src/controllers/dashboard/plugins/available.js @@ -103,7 +103,7 @@ define(["loading", "libraryMenu", "globalize", "cardStyle", "emby-button", "emby html += '
"; html += "
"; } else { - html += 'folder'; + html += 'folder'; } html += ""; diff --git a/src/controllers/dashboard/plugins/installed.js b/src/controllers/dashboard/plugins/installed.js index c18673738e..9c4a631c38 100644 --- a/src/controllers/dashboard/plugins/installed.js +++ b/src/controllers/dashboard/plugins/installed.js @@ -47,14 +47,14 @@ define(["loading", "libraryMenu", "dom", "globalize", "cardStyle", "emby-button" html += '
"; html += "
"; } else { - html += 'folder'; + html += 'folder'; } html += configPageUrl ? "" : "
"; html += "
"; html += '
'; html += '
'; - html += ''; + html += ''; html += "
"; html += "
"; html += configPage ? configPage.DisplayName || plugin.Name : plugin.Name; diff --git a/src/controllers/dashboard/scheduledtasks/scheduledtask.js b/src/controllers/dashboard/scheduledtasks/scheduledtask.js index 7a3e1dbcd6..03eeeeb870 100644 --- a/src/controllers/dashboard/scheduledtasks/scheduledtask.js +++ b/src/controllers/dashboard/scheduledtasks/scheduledtask.js @@ -49,7 +49,7 @@ define(["jQuery", "loading", "datetime", "dom", "globalize", "emby-input", "emby var trigger = task.Triggers[i]; html += '
'; - html += 'schedule'; + html += 'schedule'; if (trigger.MaxRuntimeMs) { html += '
'; } else { @@ -68,7 +68,7 @@ define(["jQuery", "loading", "datetime", "dom", "globalize", "emby-input", "emby } html += "
"; - html += ''; + html += ''; html += "
"; } diff --git a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js index 87297dbcf3..cc8be8216e 100644 --- a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js +++ b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js @@ -40,7 +40,7 @@ define(["jQuery", "loading", "events", "globalize", "serverNotifications", "huma } html += '
'; html += ""; - html += 'schedule'; + html += 'schedule'; html += ""; html += '"; if (task.State === "Running") { - html += ''; + html += ''; } else if (task.State === "Idle") { - html += ''; + html += ''; } html += "
"; } diff --git a/src/controllers/devices.js b/src/controllers/devices.js index 4c8c37eedc..2013607d70 100644 --- a/src/controllers/devices.js +++ b/src/controllers/devices.js @@ -80,7 +80,7 @@ define(["loading", "dom", "libraryMenu", "globalize", "scripts/imagehelper", "hu deviceHtml += '
"; deviceHtml += "
"; } else { - deviceHtml += 'tablet_android'; + deviceHtml += 'tablet_android'; } deviceHtml += ""; @@ -89,7 +89,7 @@ define(["loading", "dom", "libraryMenu", "globalize", "scripts/imagehelper", "hu if (canEdit || canDelete(device.Id)) { deviceHtml += '
'; - deviceHtml += ''; + deviceHtml += ''; deviceHtml += "
"; } diff --git a/src/controllers/dlnaprofile.js b/src/controllers/dlnaprofile.js index e9239693d8..fb4cdb425e 100644 --- a/src/controllers/dlnaprofile.js +++ b/src/controllers/dlnaprofile.js @@ -76,12 +76,12 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in var index = 0; var html = '
' + headers.map(function (h) { var li = '
'; - li += 'info'; + li += 'info'; li += '
'; li += '

' + h.Name + ": " + (h.Value || "") + "

"; li += '
' + (h.Match || "") + "
"; li += "
"; - li += ''; + li += ''; li += "
"; index++; return li; @@ -132,11 +132,11 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in function renderXmlDocumentAttributes(page, attribute) { var html = '
' + attribute.map(function (h) { var li = '
'; - li += 'info'; + li += 'info'; li += '
'; li += '

' + h.Name + " = " + (h.Value || "") + "

"; li += "
"; - li += ''; + li += ''; return li += "
"; }).join("") + "
"; var elem = $(".xmlDocumentAttributeList", page).html(html).trigger("create"); @@ -174,11 +174,11 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in var index = 0; var html = '
' + profiles.map(function (h) { var li = '
'; - li += 'info'; + li += 'info'; li += '
'; li += '

' + (h.Format || "") + "

"; li += "
"; - li += ''; + li += ''; li += "
"; index++; return li; @@ -270,7 +270,7 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in } html += ""; - html += ''; + html += ''; html += "
"; } @@ -331,7 +331,7 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in } html += ""; - html += ''; + html += ''; html += "
"; } @@ -415,7 +415,7 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in } html += ""; - html += ''; + html += ''; html += "
"; } @@ -487,7 +487,7 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in } html += ""; - html += ''; + html += ''; html += "
"; } @@ -567,7 +567,7 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in } html += ""; - html += ''; + html += ''; html += "
"; } diff --git a/src/controllers/dlnaprofiles.js b/src/controllers/dlnaprofiles.js index ae708bcd4e..eae529c538 100644 --- a/src/controllers/dlnaprofiles.js +++ b/src/controllers/dlnaprofiles.js @@ -32,7 +32,7 @@ define(["jQuery", "globalize", "loading", "libraryMenu", "listViewStyle", "emby- for (var i = 0, length = profiles.length; i < length; i++) { var profile = profiles[i]; html += '"; diff --git a/src/controllers/favorites.js b/src/controllers/favorites.js index 0bfe3c4550..522ddd4712 100644 --- a/src/controllers/favorites.js +++ b/src/controllers/favorites.js @@ -248,7 +248,7 @@ define(["appRouter", "cardBuilder", "dom", "globalize", "connectionManager", "ap html += '

'; html += globalize.translate(section.name); html += "

"; - html += 'chevron_right'; + html += 'chevron_right'; html += "
"; } diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index d0616c1579..cb877243ec 100644 --- a/src/controllers/itemdetailpage.js +++ b/src/controllers/itemdetailpage.js @@ -461,7 +461,8 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild var usePrimaryImage = item.MediaType === "Video" && item.Type !== "Movie" && item.Type !== "Trailer" || item.MediaType && item.MediaType !== "Video" || item.Type === "MusicAlbum" || - item.Type === "MusicArtist"; + item.Type === "MusicArtist" || + item.Type === "Person"; if ("Program" === item.Type && item.ImageTags && item.ImageTags.Thumb) { imgUrl = apiClient.getScaledImageUrl(item.Id, { @@ -513,11 +514,18 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild itemBackdropElement.style.backgroundImage = ""; } + if ("Person" === item.Type) { + itemBackdropElement.classList.add("personBackdrop"); + } else { + itemBackdropElement.classList.remove("personBackdrop"); + } + return hasbackdrop; } function reloadFromItem(instance, page, params, item, user) { var context = params.context; + page.querySelector(".detailPagePrimaryContainer").classList.add("detailSticky"); renderName(item, page.querySelector(".nameContainer"), false, context); var apiClient = connectionManager.getApiClient(item.ServerId); renderSeriesTimerEditor(page, item, apiClient, user); @@ -735,12 +743,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild editable = false; } - if ("Person" !== item.Type) { - elem.classList.add("detailimg-hidemobile"); - page.querySelector(".detailPageContent").classList.add("detailPageContent-nodetailimg"); - } else { - page.querySelector(".detailPageContent").classList.remove("detailPageContent-nodetailimg"); - } + elem.classList.add("detailimg-hidemobile"); var imageTags = item.ImageTags || {}; @@ -1050,11 +1053,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild var overview = page.querySelector(".overview"); var externalLinksElem = page.querySelector(".itemExternalLinks"); - if ("Season" !== item.Type && "MusicAlbum" !== item.Type && "MusicArtist" !== item.Type) { - overview.classList.add("detailsHiddenOnMobile"); - externalLinksElem.classList.add("detailsHiddenOnMobile"); - } - renderOverview([overview], item); var i; var itemMiscInfo; @@ -1723,7 +1721,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild html += '

'; html += "" + type.name + ""; html += "

"; - html += ''; + html += ''; html += "
"; html += '
'; var shape = "MusicAlbum" == type.type ? getSquareShape(false) : getPortraitShape(false); @@ -2093,7 +2091,10 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild }); view.addEventListener("viewshow", function (e) { var page = this; - libraryMenu.setTransparentMenu(true); + + if (layoutManager.mobile) { + libraryMenu.setTransparentMenu(true); + } if (e.detail.isRestored) { if (currentItem) { diff --git a/src/controllers/list.js b/src/controllers/list.js index a554bec611..f5d601345d 100644 --- a/src/controllers/list.js +++ b/src/controllers/list.js @@ -203,15 +203,9 @@ define(["globalize", "listView", "layoutManager", "userSettings", "focusManager" if ("SortName" === values.sortBy && "Ascending" === values.sortOrder && numItems > 40) { alphaPicker.classList.remove("hide"); - - if (layoutManager.tv) { - instance.itemsContainer.parentNode.classList.add("padded-left-withalphapicker"); - } else { - instance.itemsContainer.parentNode.classList.add("padded-right-withalphapicker"); - } + instance.itemsContainer.parentNode.classList.add("padded-right-withalphapicker"); } else { alphaPicker.classList.add("hide"); - instance.itemsContainer.parentNode.classList.remove("padded-left-withalphapicker"); instance.itemsContainer.parentNode.classList.remove("padded-right-withalphapicker"); } } @@ -540,15 +534,9 @@ define(["globalize", "listView", "layoutManager", "userSettings", "focusManager" self.scroller = view.querySelector(".scrollFrameY"); var alphaPickerElement = self.alphaPickerElement; - if (layoutManager.tv) { - alphaPickerElement.classList.add("alphaPicker-fixed-left"); - alphaPickerElement.classList.add("focuscontainer-left"); - self.itemsContainer.parentNode.classList.add("padded-left-withalphapicker"); - } else { - alphaPickerElement.classList.add("alphaPicker-fixed-right"); - alphaPickerElement.classList.add("focuscontainer-right"); - self.itemsContainer.parentNode.classList.add("padded-right-withalphapicker"); - } + alphaPickerElement.classList.add("alphaPicker-fixed-right"); + alphaPickerElement.classList.add("focuscontainer-right"); + self.itemsContainer.parentNode.classList.add("padded-right-withalphapicker"); self.alphaPicker = new alphaPicker({ element: alphaPickerElement, diff --git a/src/controllers/livetvstatus.js b/src/controllers/livetvstatus.js index c25487fd32..1c6386ba9f 100644 --- a/src/controllers/livetvstatus.js +++ b/src/controllers/livetvstatus.js @@ -26,11 +26,11 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo html += '
'; html += '
'; html += '
'; - html += '
dvr
'; + html += '
dvr
'; html += "
"; html += "
"; html += '
'; - html += ''; + html += ''; html += '
' + (device.FriendlyName || getTunerName(device.Type)) + "
"; html += '
'; html += device.Url || " "; @@ -101,7 +101,7 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo for (var i = 0, length = providers.length; i < length; i++) { var provider = providers[i]; html += '"; - html += ''; + html += ''; html += "
"; } @@ -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"; - - case "emby": - return "Emby Guide"; - + return "XMLTV"; 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" }); diff --git a/src/controllers/medialibrarypage.js b/src/controllers/medialibrarypage.js index 543acf31da..b4291e41a6 100644 --- a/src/controllers/medialibrarypage.js +++ b/src/controllers/medialibrarypage.js @@ -267,7 +267,7 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl hasCardImageContainer = true; } else if (!virtualFolder.showNameWithIcon) { html += '
'; - html += '' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + ""; + html += '' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + ""; hasCardImageContainer = true; } @@ -280,7 +280,7 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl if (!imgUrl && virtualFolder.showNameWithIcon) { html += '

'; - html += '' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + ""; + html += '' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + ""; if (virtualFolder.showNameWithIcon) { html += '
'; @@ -297,7 +297,7 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl if (virtualFolder.showMenu !== false) { html += '
'; - html += ''; + html += ''; html += "
"; } diff --git a/src/controllers/movies/moviegenres.js b/src/controllers/movies/moviegenres.js index e51274d254..0067f64228 100644 --- a/src/controllers/movies/moviegenres.js +++ b/src/controllers/movies/moviegenres.js @@ -114,7 +114,10 @@ define(["layoutManager", "loading", "libraryBrowser", "cardBuilder", "lazyLoader shape: getPortraitShape(), scalable: true, overlayMoreButton: true, - allowBottomPadding: false + allowBottomPadding: true, + showTitle: true, + centerText: true, + showYear: true }); } if (result.Items.length >= query.Limit) { @@ -142,7 +145,7 @@ define(["layoutManager", "loading", "libraryBrowser", "cardBuilder", "lazyLoader html += '

'; html += item.Name; html += "

"; - html += 'chevron_right'; + html += 'chevron_right'; html += ""; html += "
"; if (enableScrollX()) { diff --git a/src/controllers/movies/movies.js b/src/controllers/movies/movies.js index 3a365acc90..ce077bd179 100644 --- a/src/controllers/movies/movies.js +++ b/src/controllers/movies/movies.js @@ -169,11 +169,9 @@ define(["loading", "layoutManager", "userSettings", "events", "libraryBrowser", valueChangeEvent: "click" }); - if (layoutManager.desktop || layoutManager.mobile) { - alphaPickerElement.classList.add("alphabetPicker-right"); - itemsContainer.classList.remove("padded-left-withalphapicker"); - itemsContainer.classList.add("padded-right-withalphapicker"); - } + tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right"); + alphaPickerElement.classList.add("alphaPicker-fixed-right"); + itemsContainer.classList.add("padded-right-withalphapicker"); } var btnFilter = tabContent.querySelector(".btnFilter"); diff --git a/src/controllers/movies/moviesrecommended.js b/src/controllers/movies/moviesrecommended.js index 0327217e44..31ded5c594 100644 --- a/src/controllers/movies/moviesrecommended.js +++ b/src/controllers/movies/moviesrecommended.js @@ -1,4 +1,4 @@ -define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu", "mainTabsManager", "cardBuilder", "dom", "imageLoader", "playbackManager", "emby-itemscontainer", "emby-tabs", "emby-button"], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager) { +define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu", "mainTabsManager", "cardBuilder", "dom", "imageLoader", "playbackManager", "emby-scroller", "emby-itemscontainer", "emby-tabs", "emby-button"], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager) { "use strict"; function enableScrollX() { @@ -114,18 +114,25 @@ define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu" var allowBottomPadding = true; if (enableScrollX()) { - allowBottomPadding = false; - html += '
'; + html += '
'; + html += '
'; } else { - html += '
'; + html += '
'; } html += cardBuilder.getCardsHtml(recommendation.Items, { shape: getPortraitShape(), scalable: true, overlayPlayButton: true, - allowBottomPadding: allowBottomPadding + allowBottomPadding: allowBottomPadding, + showTitle: true, + showYear: true, + centerText: true }); + + if (enableScrollX()) { + html += '
'; + } html += "
"; html += "
"; return html; diff --git a/src/controllers/movies/movietrailers.js b/src/controllers/movies/movietrailers.js index 3e62298613..c764190ee0 100644 --- a/src/controllers/movies/movietrailers.js +++ b/src/controllers/movies/movietrailers.js @@ -193,6 +193,7 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", " function initPage(tabContent) { var alphaPickerElement = tabContent.querySelector(".alphaPicker"); + var itemsContainer = tabContent.querySelector(".itemsContainer"); alphaPickerElement.addEventListener("alphavaluechanged", function (e) { var newValue = e.detail.value; var query = getQuery(tabContent); @@ -205,12 +206,9 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", " valueChangeEvent: "click" }); - if (layoutManager.desktop || layoutManager.mobile) { - tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right"); - var itemsContainer = tabContent.querySelector(".itemsContainer"); - itemsContainer.classList.remove("padded-left-withalphapicker"); - itemsContainer.classList.add("padded-right-withalphapicker"); - } + tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right"); + alphaPickerElement.classList.add("alphaPicker-fixed-right"); + itemsContainer.classList.add("padded-right-withalphapicker"); tabContent.querySelector(".btnFilter").addEventListener("click", function () { self.showFilterMenu(); diff --git a/src/controllers/music/musicalbums.js b/src/controllers/music/musicalbums.js index 480f0af77f..58d30e71da 100644 --- a/src/controllers/music/musicalbums.js +++ b/src/controllers/music/musicalbums.js @@ -199,6 +199,7 @@ define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser function initPage(tabContent) { var alphaPickerElement = tabContent.querySelector(".alphaPicker"); + var itemsContainer = tabContent.querySelector(".itemsContainer"); alphaPickerElement.addEventListener("alphavaluechanged", function (e) { var newValue = e.detail.value; @@ -211,12 +212,10 @@ define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser element: alphaPickerElement, valueChangeEvent: "click" }); - if (layoutManager.desktop || layoutManager.mobile) { - tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right"); - var itemsContainer = tabContent.querySelector(".itemsContainer"); - itemsContainer.classList.remove("padded-left-withalphapicker"); - itemsContainer.classList.add("padded-right-withalphapicker"); - } + + tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right"); + alphaPickerElement.classList.add("alphaPicker-fixed-right"); + itemsContainer.classList.add("padded-right-withalphapicker"); tabContent.querySelector(".btnFilter").addEventListener("click", function () { self.showFilterMenu(); diff --git a/src/controllers/music/musicartists.js b/src/controllers/music/musicartists.js index aaeea8c885..ceed448a06 100644 --- a/src/controllers/music/musicartists.js +++ b/src/controllers/music/musicartists.js @@ -181,6 +181,7 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", " function initPage(tabContent) { var alphaPickerElement = tabContent.querySelector(".alphaPicker"); + var itemsContainer = tabContent.querySelector(".itemsContainer"); alphaPickerElement.addEventListener("alphavaluechanged", function (e) { var newValue = e.detail.value; @@ -193,12 +194,10 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", " element: alphaPickerElement, valueChangeEvent: "click" }); - if (layoutManager.desktop || layoutManager.mobile) { - tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right"); - var itemsContainer = tabContent.querySelector(".itemsContainer"); - itemsContainer.classList.remove("padded-left-withalphapicker"); - itemsContainer.classList.add("padded-right-withalphapicker"); - } + + tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right"); + alphaPickerElement.classList.add("alphaPicker-fixed-right"); + itemsContainer.classList.add("padded-right-withalphapicker"); tabContent.querySelector(".btnFilter").addEventListener("click", function () { self.showFilterMenu(); diff --git a/src/controllers/playback/nowplayingpage.js b/src/controllers/playback/nowplaying.js similarity index 100% rename from src/controllers/playback/nowplayingpage.js rename to src/controllers/playback/nowplaying.js diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/videoosd.js index bd12ba5075..122b2c8080 100644 --- a/src/controllers/playback/videoosd.js +++ b/src/controllers/playback/videoosd.js @@ -1,4 +1,4 @@ -define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "mediaInfo", "focusManager", "imageLoader", "scrollHelper", "events", "connectionManager", "browser", "globalize", "apphost", "layoutManager", "userSettings", "scrollStyles", "emby-slider", "paper-icon-button-light", "css!assets/css/videoosd"], function (playbackManager, dom, inputManager, datetime, itemHelper, mediaInfo, focusManager, imageLoader, scrollHelper, events, connectionManager, browser, globalize, appHost, layoutManager, userSettings) { +define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "mediaInfo", "focusManager", "imageLoader", "scrollHelper", "events", "connectionManager", "browser", "globalize", "apphost", "layoutManager", "userSettings", "keyboardnavigation", "scrollStyles", "emby-slider", "paper-icon-button-light", "css!assets/css/videoosd"], function (playbackManager, dom, inputManager, datetime, itemHelper, mediaInfo, focusManager, imageLoader, scrollHelper, events, connectionManager, browser, globalize, appHost, layoutManager, userSettings, keyboardnavigation) { "use strict"; function seriesImageUrl(item, options) { @@ -437,6 +437,11 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med }); currentVisibleMenu = null; toggleSubtitleSync("hide"); + + // Firefox does not blur by itself + if (document.activeElement) { + document.activeElement.blur(); + } } } @@ -1087,64 +1092,79 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med */ var NavigationKeys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]; + /** + * Clicked element. + * To skip 'click' handling on Firefox/Edge. + */ + var clickedElement; + function onWindowKeyDown(e) { + clickedElement = e.srcElement; + + var key = keyboardnavigation.getKeyName(e); + if (!currentVisibleMenu && 32 === e.keyCode) { playbackManager.playPause(currentPlayer); showOsd(); return; } - if (layoutManager.tv && NavigationKeys.indexOf(e.key) != -1) { + if (layoutManager.tv && NavigationKeys.indexOf(key) != -1) { showOsd(); return; } - switch (e.key) { + switch (key) { + case "Enter": + showOsd(); + break; + case "Escape": + case "Back": + // Ignore key when some dialog is opened + if (currentVisibleMenu === "osd" && !document.querySelector(".dialogContainer")) { + hideOsd(); + e.stopPropagation(); + } + break; case "k": playbackManager.playPause(currentPlayer); showOsd(); break; - case "l": case "ArrowRight": case "Right": playbackManager.fastForward(currentPlayer); showOsd(); break; - case "j": case "ArrowLeft": case "Left": playbackManager.rewind(currentPlayer); showOsd(); break; - case "f": if (!e.ctrlKey && !e.metaKey) { playbackManager.toggleFullscreen(currentPlayer); showOsd(); } break; - case "m": playbackManager.toggleMute(currentPlayer); showOsd(); break; - case "NavigationLeft": case "GamepadDPadLeft": case "GamepadLeftThumbstickLeft": - // Ignores gamepad events that are always triggered, even when not focused. + // Ignores gamepad events that are always triggered, even when not focused. if (document.hasFocus()) { playbackManager.rewind(currentPlayer); showOsd(); } break; - case "NavigationRight": case "GamepadDPadRight": case "GamepadLeftThumbstickRight": - // Ignores gamepad events that are always triggered, even when not focused. + // Ignores gamepad events that are always triggered, even when not focused. if (document.hasFocus()) { playbackManager.fastForward(currentPlayer); showOsd(); @@ -1152,6 +1172,14 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med } } + function onWindowMouseDown(e) { + clickedElement = e.srcElement; + } + + function onWindowTouchStart(e) { + clickedElement = e.srcElement; + } + function getImgUrl(item, chapter, index, maxWidth, apiClient) { if (chapter.ImageTag) { return apiClient.getScaledImageUrl(item.Id, { @@ -1280,6 +1308,12 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med showOsd(); inputManager.on(window, onInputCommand); dom.addEventListener(window, "keydown", onWindowKeyDown, { + capture: true + }); + dom.addEventListener(window, window.PointerEvent ? "pointerdown" : "mousedown", onWindowMouseDown, { + passive: true + }); + dom.addEventListener(window, "touchstart", onWindowTouchStart, { passive: true }); } catch (e) { @@ -1294,6 +1328,12 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med } dom.removeEventListener(window, "keydown", onWindowKeyDown, { + capture: true + }); + dom.removeEventListener(window, window.PointerEvent ? "pointerdown" : "mousedown", onWindowMouseDown, { + passive: true + }); + dom.removeEventListener(window, "touchstart", onWindowTouchStart, { passive: true }); stopOsdHideTimer(); @@ -1465,7 +1505,10 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med playbackManager.previousTrack(currentPlayer); }); view.querySelector(".btnPause").addEventListener("click", function () { - playbackManager.playPause(currentPlayer); + // Ignore 'click' if another element was originally clicked (Firefox/Edge issue) + if (this.contains(clickedElement)) { + playbackManager.playPause(currentPlayer); + } }); view.querySelector(".btnNextTrack").addEventListener("click", function () { playbackManager.nextTrack(currentPlayer); diff --git a/src/controllers/shows/tvgenres.js b/src/controllers/shows/tvgenres.js index b6fa54f213..23397fd73e 100644 --- a/src/controllers/shows/tvgenres.js +++ b/src/controllers/shows/tvgenres.js @@ -141,7 +141,7 @@ define(["layoutManager", "loading", "libraryBrowser", "cardBuilder", "lazyLoader html += '

'; html += item.Name; html += "

"; - html += 'chevron_right'; + html += 'chevron_right'; html += ""; html += "
"; if (enableScrollX()) { diff --git a/src/controllers/shows/tvshows.js b/src/controllers/shows/tvshows.js index 1dec530540..24f6cb1a03 100644 --- a/src/controllers/shows/tvshows.js +++ b/src/controllers/shows/tvshows.js @@ -210,6 +210,7 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", " function initPage(tabContent) { var alphaPickerElement = tabContent.querySelector(".alphaPicker"); + var itemsContainer = tabContent.querySelector(".itemsContainer"); alphaPickerElement.addEventListener("alphavaluechanged", function (e) { var newValue = e.detail.value; @@ -222,12 +223,10 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", " element: alphaPickerElement, valueChangeEvent: "click" }); - if (layoutManager.desktop || layoutManager.mobile) { - tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right"); - var itemsContainer = tabContent.querySelector(".itemsContainer"); - itemsContainer.classList.remove("padded-left-withalphapicker"); - itemsContainer.classList.add("padded-right-withalphapicker"); - } + + tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right"); + alphaPickerElement.classList.add("alphaPicker-fixed-right"); + itemsContainer.classList.add("padded-right-withalphapicker"); tabContent.querySelector(".btnFilter").addEventListener("click", function () { self.showFilterMenu(); diff --git a/src/controllers/user/display.js b/src/controllers/user/display.js index f348f28750..e3a56e1552 100644 --- a/src/controllers/user/display.js +++ b/src/controllers/user/display.js @@ -1,4 +1,4 @@ -define(["displaySettings", "userSettingsBuilder", "userSettings", "autoFocuser"], function (DisplaySettings, userSettingsBuilder, currentUserSettings, autoFocuser) { +define(["displaySettings", "userSettings", "autoFocuser"], function (DisplaySettings, currentUserSettings, autoFocuser) { "use strict"; return function (view, params) { @@ -11,7 +11,7 @@ define(["displaySettings", "userSettingsBuilder", "userSettings", "autoFocuser"] var settingsInstance; var hasChanges; var userId = params.userId || ApiClient.getCurrentUserId(); - var userSettings = userId === ApiClient.getCurrentUserId() ? currentUserSettings : new userSettingsBuilder(); + var userSettings = userId === ApiClient.getCurrentUserId() ? currentUserSettings : new userSettings(); view.addEventListener("viewshow", function () { window.addEventListener("beforeunload", onBeforeUnload); diff --git a/src/controllers/user/home.js b/src/controllers/user/home.js index 7f12efc7fb..20a42a7dfb 100644 --- a/src/controllers/user/home.js +++ b/src/controllers/user/home.js @@ -1,4 +1,4 @@ -define(["homescreenSettings", "userSettingsBuilder", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (HomescreenSettings, userSettingsBuilder, dom, globalize, loading, currentUserSettings, autoFocuser) { +define(["homescreenSettings", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (HomescreenSettings, dom, globalize, loading, currentUserSettings, autoFocuser) { "use strict"; return function (view, params) { @@ -11,7 +11,7 @@ define(["homescreenSettings", "userSettingsBuilder", "dom", "globalize", "loadin var homescreenSettingsInstance; var hasChanges; var userId = params.userId || ApiClient.getCurrentUserId(); - var userSettings = userId === ApiClient.getCurrentUserId() ? currentUserSettings : new userSettingsBuilder(); + var userSettings = userId === ApiClient.getCurrentUserId() ? currentUserSettings : new userSettings(); view.addEventListener("viewshow", function () { window.addEventListener("beforeunload", onBeforeUnload); diff --git a/src/controllers/user/playback.js b/src/controllers/user/playback.js index 3def9d1931..d0a127efe4 100644 --- a/src/controllers/user/playback.js +++ b/src/controllers/user/playback.js @@ -1,4 +1,4 @@ -define(["playbackSettings", "userSettingsBuilder", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (PlaybackSettings, userSettingsBuilder, dom, globalize, loading, currentUserSettings, autoFocuser) { +define(["playbackSettings", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (PlaybackSettings, dom, globalize, loading, currentUserSettings, autoFocuser) { "use strict"; return function (view, params) { @@ -11,7 +11,7 @@ define(["playbackSettings", "userSettingsBuilder", "dom", "globalize", "loading" var settingsInstance; var hasChanges; var userId = params.userId || ApiClient.getCurrentUserId(); - var userSettings = userId === ApiClient.getCurrentUserId() ? currentUserSettings : new userSettingsBuilder(); + var userSettings = userId === ApiClient.getCurrentUserId() ? currentUserSettings : new userSettings(); view.addEventListener("viewshow", function () { window.addEventListener("beforeunload", onBeforeUnload); diff --git a/src/controllers/user/subtitles.js b/src/controllers/user/subtitles.js index 1f1102194e..8e2dcc8780 100644 --- a/src/controllers/user/subtitles.js +++ b/src/controllers/user/subtitles.js @@ -1,4 +1,4 @@ -define(["subtitleSettings", "userSettingsBuilder", "userSettings", "autoFocuser"], function (SubtitleSettings, userSettingsBuilder, currentUserSettings, autoFocuser) { +define(["subtitleSettings", "userSettings", "autoFocuser"], function (SubtitleSettings, currentUserSettings, autoFocuser) { "use strict"; return function (view, params) { @@ -11,7 +11,7 @@ define(["subtitleSettings", "userSettingsBuilder", "userSettings", "autoFocuser" var subtitleSettingsInstance; var hasChanges; var userId = params.userId || ApiClient.getCurrentUserId(); - var userSettings = userId === ApiClient.getCurrentUserId() ? currentUserSettings : new userSettingsBuilder(); + var userSettings = userId === ApiClient.getCurrentUserId() ? currentUserSettings : new userSettings(); view.addEventListener("viewshow", function () { window.addEventListener("beforeunload", onBeforeUnload); diff --git a/src/controllers/userparentalcontrol.js b/src/controllers/userparentalcontrol.js index 2a862912d5..333c09f266 100644 --- a/src/controllers/userparentalcontrol.js +++ b/src/controllers/userparentalcontrol.js @@ -108,7 +108,7 @@ define(["jQuery", "datetime", "loading", "libraryMenu", "listViewStyle", "paper- li += h; li += "

"; li += "
"; - li += ''; + li += ''; return li += "
"; }).join(""); @@ -143,7 +143,7 @@ define(["jQuery", "datetime", "loading", "libraryMenu", "listViewStyle", "paper- itemHtml += ""; itemHtml += '
' + getDisplayTime(a.StartHour) + " - " + getDisplayTime(a.EndHour) + "
"; itemHtml += "
"; - itemHtml += ''; + itemHtml += ''; itemHtml += "
"; index++; return itemHtml; diff --git a/src/controllers/userprofilespage.js b/src/controllers/userprofilespage.js index 7aeea9cb28..a3c247cd35 100644 --- a/src/controllers/userprofilespage.js +++ b/src/controllers/userprofilespage.js @@ -104,7 +104,7 @@ define(["loading", "dom", "globalize", "humanedate", "paper-icon-button-light", html += '
"; } else { html += '
'; - html += 'person'; + html += 'person'; } html += "
"; @@ -115,7 +115,7 @@ define(["loading", "dom", "globalize", "humanedate", "paper-icon-button-light", html += '
'; html += user.Name; html += "
"; - html += ''; + html += ''; html += "
"; html += '
'; var lastSeen = getLastSeenText(user.LastActivityDate); @@ -181,14 +181,14 @@ define(["loading", "dom", "globalize", "humanedate", "paper-icon-button-light", html += '
"; html += "
"; } else { - html += 'person'; + html += 'person'; } html += ""; html += "
"; html += '
'; html += '
'; - html += ''; + html += ''; html += "
"; html += '
'; html += user.UserName; diff --git a/src/dashboard.html b/src/dashboard.html index dc9a56abbc..4888c1110f 100644 --- a/src/dashboard.html +++ b/src/dashboard.html @@ -5,7 +5,7 @@

${TabServer}

- chevron_right + chevron_right
@@ -34,7 +34,7 @@

${HeaderActiveDevices}

- chevron_right + chevron_right
@@ -45,7 +45,7 @@

${HeaderActivity}

- chevron_right + chevron_right
@@ -62,7 +62,7 @@

${Alerts}

- chevron_right + chevron_right
@@ -71,7 +71,7 @@

${HeaderPaths}

- chevron_right + chevron_right
diff --git a/src/dashboardgeneral.html b/src/dashboardgeneral.html index 6387128d5e..d0ef17385f 100644 --- a/src/dashboardgeneral.html +++ b/src/dashboardgeneral.html @@ -39,7 +39,7 @@
- +
${LabelCachePathHelp}
@@ -49,28 +49,13 @@
- +
${LabelMetadataPathHelp}
-
-

${HeaderAutomaticUpdates}

- -
- -
${LabelAllowServerAutoRestartHelp}
-
-
-

${HeaderBranding}

diff --git a/src/dlnaprofile.html b/src/dlnaprofile.html index 2054bce3db..2420ab4c35 100644 --- a/src/dlnaprofile.html +++ b/src/dlnaprofile.html @@ -98,7 +98,7 @@

${HeaderHttpHeaders}

@@ -221,7 +221,7 @@

${HeaderXmlDocumentAttributes}

diff --git a/src/dlnaprofiles.html b/src/dlnaprofiles.html index ac9e961370..c1ae38609c 100644 --- a/src/dlnaprofiles.html +++ b/src/dlnaprofiles.html @@ -9,7 +9,7 @@

${HeaderCustomDlnaProfiles}

- add + add ${Help}
diff --git a/src/dlnasettings.html b/src/dlnasettings.html index 8c44f751a5..872d546a53 100644 --- a/src/dlnasettings.html +++ b/src/dlnasettings.html @@ -8,7 +8,7 @@

${TabSettings}

- ${Help} + ${Help}
diff --git a/src/elements/emby-button/emby-button.css b/src/elements/emby-button/emby-button.css index ee15e2e125..2776dec65d 100644 --- a/src/elements/emby-button/emby-button.css +++ b/src/elements/emby-button/emby-button.css @@ -8,20 +8,26 @@ font-size: inherit; font-family: inherit; color: inherit; + + /* These are getting an outline in opera tv browsers, which run chrome 30 */ + outline: none !important; outline-width: 0; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; user-select: none; cursor: pointer; z-index: 0; padding: 0.9em 1em; vertical-align: middle; border: 0; - vertical-align: middle; border-radius: 0.2em; - /* These are getting an outline in opera tv browsers, which run chrome 30 */ - outline: none !important; - position: relative; font-weight: 600; + + /* Disable webkit tap highlighting */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-decoration: none; + /* Not crazy about this but it normalizes heights between anchors and buttons */ line-height: 1.35; transform-origin: center; @@ -42,7 +48,7 @@ } .button-flat:hover { - opacity: .5; + opacity: 0.5; } .button-link { @@ -79,7 +85,7 @@ display: block; align-items: center; justify-content: center; - margin: .25em 0; + margin: 0.25em 0; width: 100%; } @@ -88,12 +94,15 @@ display: inline-flex; align-items: center; box-sizing: border-box; - margin: 0 .29em; + margin: 0 0.29em; background: transparent; text-align: center; font-size: inherit; font-family: inherit; color: inherit; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; user-select: none; cursor: pointer; z-index: 0; @@ -101,15 +110,17 @@ min-height: initial; width: auto; height: auto; - padding: .556em; + padding: 0.556em; vertical-align: middle; border: 0; - vertical-align: middle; + /* These are getting an outline in opera tv browsers, which run chrome 30 */ outline: none !important; - position: relative; overflow: hidden; border-radius: 50%; + + /* Disable webkit tap highlighting */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); justify-content: center; transform-origin: center; transition: 0.2s; @@ -120,32 +131,33 @@ z-index: 1; } - .paper-icon-button-light::-moz-focus-inner { - border: 0; - } +.paper-icon-button-light::-moz-focus-inner { + border: 0; +} - .paper-icon-button-light:disabled { - opacity: 0.3; - cursor: default; - } +.paper-icon-button-light:disabled { + opacity: 0.3; + cursor: default; +} - .paper-icon-button-light > i { - font-size: 1.66956521739130434em; - /* Make sure its on top of the ripple */ - position: relative; - z-index: 1; - vertical-align: middle; - } +.paper-icon-button-light > i { + font-size: 1.66956521739130434em; - .paper-icon-button-light > div { - max-height: 100%; - transform: scale(1.8); - position: relative; - z-index: 1; - vertical-align: middle; - display: inline; - margin: 0 auto; - } + /* Make sure its on top of the ripple */ + position: relative; + z-index: 1; + vertical-align: middle; +} + +.paper-icon-button-light > div { + max-height: 100%; + transform: scale(1.8); + position: relative; + z-index: 1; + vertical-align: middle; + display: inline; + margin: 0 auto; +} .emby-button-foreground { position: relative; @@ -159,7 +171,6 @@ .filterButtonBubble { color: #fff; position: absolute; - background: #444; top: 0; right: 0; width: 1.6em; @@ -170,7 +181,7 @@ justify-content: center; font-size: 82%; border-radius: 100em; - box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.2); - background: #03A9F4; + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); + background: #03a9f4; font-weight: bold; } diff --git a/src/elements/emby-checkbox/emby-checkbox.css b/src/elements/emby-checkbox/emby-checkbox.css index 4e27928e2a..e694342571 100644 --- a/src/elements/emby-checkbox/emby-checkbox.css +++ b/src/elements/emby-checkbox/emby-checkbox.css @@ -32,12 +32,16 @@ .emby-checkbox { position: absolute; + /* This is for focusing purposes, so the focusManager doesn't skip over it */ width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; + -ms-appearance: none; + -moz-appearance: none; + -webkit-appearance: none; appearance: none; border: none; } @@ -46,14 +50,13 @@ position: absolute; top: 3px; left: 0; - display: inline-block; box-sizing: border-box; width: 1.83em; height: 1.83em; margin: 0; overflow: hidden; border: 2px solid currentcolor; - border-radius: .14em; + border-radius: 0.14em; z-index: 2; display: flex; align-items: center; @@ -98,18 +101,18 @@ flex-wrap: wrap; } - .checkboxList-verticalwrap > .emby-checkbox-label { - display: inline-flex; - margin: .3em 0 .3em 0; - width: 12em; - } +.checkboxList-verticalwrap > .emby-checkbox-label { + display: inline-flex; + margin: 0.3em 0 0.3em 0; + width: 12em; +} .checkboxList-paperList { padding: 1em !important; } .checkboxListLabel { - margin-bottom: .25em; + margin-bottom: 0.25em; } @keyframes repaintChrome { @@ -121,3 +124,13 @@ padding: 0; } } + +@-webkit-keyframes repaintChrome { + from { + padding: 0; + } + + to { + padding: 0; + } +} diff --git a/src/elements/emby-checkbox/emby-checkbox.js b/src/elements/emby-checkbox/emby-checkbox.js index d6276e826c..2e49a2d185 100644 --- a/src/elements/emby-checkbox/emby-checkbox.js +++ b/src/elements/emby-checkbox/emby-checkbox.js @@ -56,8 +56,8 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b var checkedIcon = this.getAttribute('data-checkedicon') || 'check'; var uncheckedIcon = this.getAttribute('data-uncheckedicon') || ''; - var checkHtml = '' + checkedIcon + ''; - var uncheckedHtml = '' + uncheckedIcon + ''; + var checkHtml = '' + checkedIcon + ''; + var uncheckedHtml = '' + uncheckedIcon + ''; labelElement.insertAdjacentHTML('beforeend', '' + checkHtml + uncheckedHtml + ''); labelTextElement.classList.add('checkboxLabel'); diff --git a/src/elements/emby-collapse/emby-collapse.css b/src/elements/emby-collapse/emby-collapse.css index 0a982e975d..dd22c20b5b 100644 --- a/src/elements/emby-collapse/emby-collapse.css +++ b/src/elements/emby-collapse/emby-collapse.css @@ -1,5 +1,5 @@ .emby-collapse { - margin: .5em 0; + margin: 0.5em 0; } .collapseContent { @@ -18,10 +18,9 @@ text-transform: none; width: 100%; text-align: left; - text-transform: none; - border-width: 0 0 .1em 0; + border-width: 0 0 0.1em 0; border-style: solid; - padding-left: .1em; + padding-left: 0.1em; background: transparent; box-shadow: none; } @@ -30,7 +29,7 @@ transform-origin: 50% 50%; transition: transform 180ms ease-out; position: absolute; - right: .5em; + right: 0.5em; font-size: 1.5em; } diff --git a/src/elements/emby-collapse/emby-collapse.js b/src/elements/emby-collapse/emby-collapse.js index 09b8c70d8f..764e525a25 100644 --- a/src/elements/emby-collapse/emby-collapse.js +++ b/src/elements/emby-collapse/emby-collapse.js @@ -80,7 +80,7 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun var title = this.getAttribute('title'); - var html = ''; + var html = ''; this.insertAdjacentHTML('afterbegin', html); diff --git a/src/elements/emby-input/emby-input.css b/src/elements/emby-input/emby-input.css index 57a46ec7b6..683498455b 100644 --- a/src/elements/emby-input/emby-input.css +++ b/src/elements/emby-input/emby-input.css @@ -2,22 +2,28 @@ display: block; margin: 0; margin-bottom: 0 !important; - /* Remove select styling */ - /* Font size must the 16px or larger to prevent iOS page zoom on focus */ - font-size: 110%; - /* General select styles: change as needed */ font-family: inherit; font-weight: inherit; - padding: .4em .25em; - /* Prevent padding from causing width overflow */ + padding: 0.4em 0.25em; + + /* must the 16px or larger to prevent iOS page zoom on focus */ + font-size: 110%; + + /* prevent padding from causing width overflow */ + -webkit-box-sizing: border-box; box-sizing: border-box; outline: none !important; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; } - .emby-input::-moz-focus-inner { - border: 0; - } +.emby-input::-moz-focus-inner { + border: 0; +} + +.emby-input:required { + box-shadow: none; +} .inputContainer { margin-bottom: 1.8em; @@ -25,13 +31,14 @@ .inputLabel { display: inline-block; - margin-bottom: .25em; + margin-bottom: 0.25em; } .emby-input + .fieldDescription { - margin-top: .25em; + margin-top: 0.25em; } .emby-input-iconbutton { + -webkit-align-self: flex-end; align-self: flex-end; } diff --git a/src/elements/emby-progressring/emby-progressring.css b/src/elements/emby-progressring/emby-progressring.css index 7bef7c35f7..014db3aedf 100644 --- a/src/elements/emby-progressring/emby-progressring.css +++ b/src/elements/emby-progressring/emby-progressring.css @@ -11,9 +11,9 @@ width: 100%; height: 100%; border-radius: 50%; - border: .25em solid rgba(0, 0, 0, 1); + border: 0.25em solid rgba(0, 0, 0, 1); box-sizing: border-box; - background: rgba(0, 0, 0, .9); + background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; @@ -51,7 +51,7 @@ width: 200%; height: 200%; border-radius: 50%; - border-width: .25em; + border-width: 0.25em; border-style: solid; box-sizing: border-box; } diff --git a/src/elements/emby-radio/emby-radio.css b/src/elements/emby-radio/emby-radio.css index 6b8575bc86..6db3c39e4d 100644 --- a/src/elements/emby-radio/emby-radio.css +++ b/src/elements/emby-radio/emby-radio.css @@ -4,29 +4,29 @@ display: inline-block; box-sizing: border-box; margin: 0; - padding-left: 0; + padding-left: 24px; } .radio-label-block { display: flex; align-items: center; - margin-top: .5em; - margin-bottom: .5em; -} - -.mdl-radio { - padding-left: 24px; + margin-top: 0.5em; + margin-bottom: 0.5em; } .mdl-radio__button { line-height: 24px; position: absolute; + /* 1px is for focusing purposes, so the focusManager doesn't skip over it */ width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; + -ms-appearance: none; + -moz-appearance: none; + -webkit-appearance: none; appearance: none; border: none; } @@ -51,7 +51,7 @@ } .mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle { - border: 2px solid rgba(0,0,0, 0.26); + border: 2px solid rgba(0, 0, 0, 0.26); cursor: auto; } @@ -67,27 +67,31 @@ 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); } .mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle { - background: rgba(0,0,0, 0.26); + background: rgba(0, 0, 0, 0.26); cursor: auto; } .mdl-radio__button:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle { - box-shadow: 0 0 0px 10px rgba(255, 255, 255, 0.76); + box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.76); } .mdl-radio__button:checked:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle { - box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26) + box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26); } .mdl-radio__label { @@ -95,6 +99,6 @@ } .mdl-radio__button:disabled + .mdl-radio__label { - color: rgba(0,0,0, 0.26); + color: rgba(0, 0, 0, 0.26); cursor: auto; } diff --git a/src/elements/emby-select/emby-select.css b/src/elements/emby-select/emby-select.css index 4aff8cab92..b508e5d0e3 100644 --- a/src/elements/emby-select/emby-select.css +++ b/src/elements/emby-select/emby-select.css @@ -2,52 +2,60 @@ display: block; margin: 0; margin-bottom: 0 !important; + /* Remove select styling */ + /* Font size must the 16px or larger to prevent iOS page zoom on focus */ font-size: 110%; + /* General select styles: change as needed */ font-family: inherit; font-weight: inherit; - padding: .5em 1.9em .5em .5em; + padding: 0.5em 1.9em 0.5em 0.5em; + /* Prevent padding from causing width overflow */ box-sizing: border-box; outline: none !important; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; } - .emby-select[disabled] { - background: none !important; - border-color: transparent !important; - color: inherit !important; - appearance: none; - } - -.selectContainer-inline > .emby-select { - padding: .3em 1.9em .3em .5em; - font-size: inherit; +.emby-select[disabled] { + background: none !important; + border-color: transparent !important; + color: inherit !important; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } - .selectContainer-inline > .emby-select[disabled] { - padding-left: 0; - padding-right: 0; - } - .emby-select::-moz-focus-inner { border: 0; } +.selectContainer-inline > .emby-select { + padding: 0.3em 1.9em 0.3em 0.5em; + font-size: inherit; +} + +.selectContainer-inline > .emby-select[disabled] { + padding-left: 0; + padding-right: 0; +} + .emby-select-focusscale { transition: transform 180ms ease-out !important; + -webkit-transform-origin: center center; transform-origin: center center; } - .emby-select-focusscale:focus { - transform: scale(1.04); - z-index: 1; - } +.emby-select-focusscale:focus { + transform: scale(1.04); + z-index: 1; +} .emby-select + .fieldDescription { - margin-top: .25em; + margin-top: 0.25em; } .selectContainer { @@ -63,31 +71,32 @@ .selectLabel { display: block; - margin-bottom: .25em; + margin-bottom: 0.25em; } .selectContainer-inline > .selectLabel { margin-bottom: 0; - margin-right: .5em; + margin-right: 0.5em; flex-shrink: 0; } .emby-select-withcolor { + -webkit-appearance: none; appearance: none; - border-radius: .2em; + border-radius: 0.2em; } .selectArrowContainer { position: absolute; - right: .3em; - top: .2em; + right: 0.3em; + top: 0.2em; color: inherit; pointer-events: none; } .selectContainer-inline > .selectArrowContainer { top: initial; - bottom: .24em; + bottom: 0.24em; font-size: 90%; } @@ -96,7 +105,7 @@ } .selectArrow { - margin-top: .35em; + margin-top: 0.35em; font-size: 1.7em; } diff --git a/src/elements/emby-select/emby-select.js b/src/elements/emby-select/emby-select.js index 248e7ce570..e26d1921aa 100644 --- a/src/elements/emby-select/emby-select.js +++ b/src/elements/emby-select/emby-select.js @@ -144,7 +144,7 @@ define(['layoutManager', 'browser', 'actionsheet', 'css!./emby-select', 'registe this.parentNode.insertBefore(label, this); if (this.classList.contains('emby-select-withcolor')) { - this.parentNode.insertAdjacentHTML('beforeend', '
0
keyboard_arrow_down
'); + this.parentNode.insertAdjacentHTML('beforeend', '
0
keyboard_arrow_down
'); } }; diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css index 6fc861deb0..30d4ccb6d8 100644 --- a/src/elements/emby-slider/emby-slider.css +++ b/src/elements/emby-slider/emby-slider.css @@ -1,73 +1,85 @@ -_:-ms-input-placeholder { +:-ms-input-placeholder { appearance: none; + -ms-appearance: none; height: 2.223em; margin: 0; } .mdl-slider { width: 100%; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; appearance: none; - height: 150%;/*150% is needed, else ie and edge won't display the thumb properly*/ + 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; } - .mdl-slider::-moz-focus-outer { - border: 0; - } +.mdl-slider::-moz-focus-outer { + border: 0; +} - .mdl-slider::-ms-tooltip { - display: none; - } +.mdl-slider::-ms-tooltip { + display: none; +} - .mdl-slider::-webkit-slider-runnable-track { - background: transparent; - } +.mdl-slider::-webkit-slider-runnable-track { + background: transparent; +} - .mdl-slider::-moz-range-track { - background: #444; - border: none; - width: calc(100% - 20px); - } +.mdl-slider::-moz-range-track { + background: #444; + border: none; + width: calc(100% - 20px); +} - .mdl-slider::-moz-range-progress { - background: #00a4dc; - width: calc(100% - 20px); - } +.mdl-slider::-moz-range-progress { + background: #00a4dc; + width: calc(100% - 20px); +} - .mdl-slider::-ms-track { - background: none; - color: transparent; - height: .2em; - width: 100%; - border: none; - } +.mdl-slider::-ms-track { + background: none; + color: transparent; + height: 0.2em; + width: 100%; + border: none; +} - .mdl-slider::-ms-fill-lower { - display: none; - } +.mdl-slider::-ms-fill-lower { + display: none; +} - .mdl-slider::-ms-fill-upper { - display: none; - } +.mdl-slider::-ms-fill-upper { + display: none; +} - .mdl-slider::-webkit-slider-thumb { - appearance: none; - width: 1.2em; - height: 1.2em; - box-sizing: border-box; - border-radius: 50%; - background: #00a4dc; - border: none; - transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1); - } +.mdl-slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 1.2em; + height: 1.2em; + box-sizing: border-box; + border-radius: 50%; + background: #00a4dc; + border: none; + transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1); +} .mdl-slider-hoverthumb::-webkit-slider-thumb { transform: none; @@ -91,27 +103,27 @@ _:-ms-input-placeholder { height: 0.9em; box-sizing: border-box; border-radius: 50%; - background-image: none; background: #00a4dc; + background-image: none; border: none; - transform: Scale(1.4, 1.4); + transform: scale(1.4, 1.4); } .mdl-slider::-ms-thumb { - appearance: none; + -webkit-appearance: none; width: 1.8em; height: 1.8em; box-sizing: border-box; border-radius: 50%; background: #00a4dc; border: none; - transform: scale(.9, .9); + transform: scale(0.9, 0.9); transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .mdl-slider-hoverthumb::-ms-thumb { - margin-left: -.4em; - transform: scale(.5, .5); + margin-left: -0.4em; + transform: scale(0.5, 0.5); } .mdl-slider:hover::-ms-thumb { @@ -149,15 +161,15 @@ _:-ms-input-placeholder { .mdl-slider-background-flex-container { width: 100%; box-sizing: border-box; - margin-top: -.05em; + margin-top: -0.05em; top: 50%; position: absolute; } .mdl-slider-background-flex { background: #333; - height: .2em; - margin-top: -.08em; + height: 0.2em; + margin-top: -0.08em; width: 100%; top: 50%; left: 0; @@ -173,7 +185,7 @@ _:-ms-input-placeholder { } .mdl-slider-background-lower { - /*transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/ + /* transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1); */ position: absolute; left: 0; width: 0; @@ -188,15 +200,16 @@ _:-ms-input-placeholder { .mdl-slider-background-lower-withtransform { width: 100%; - /*transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/ + + /* transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); */ transform-origin: left center; transform: scaleX(0); } .mdl-slider-background-upper { - /*transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1), width 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/ + /* transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1), width 0.18s cubic-bezier(0.4, 0, 0.2, 1); */ background: #666; - background: rgba(255, 255, 255, .4); + background: rgba(255, 255, 255, 0.4); position: absolute; left: 0; width: 0; @@ -218,5 +231,5 @@ _:-ms-input-placeholder { .sliderBubbleText { margin: 0; - padding: .5em .75em; + padding: 0.5em 0.75em; } diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js index c340e79359..24592f4515 100644 --- a/src/elements/emby-slider/emby-slider.js +++ b/src/elements/emby-slider/emby-slider.js @@ -1,4 +1,4 @@ -define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager) { +define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager, keyboardnavigation) { 'use strict'; var EmbySliderPrototype = Object.create(HTMLInputElement.prototype); @@ -250,7 +250,7 @@ define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement * Handle KeyDown event */ function onKeyDown(e) { - switch (e.key) { + switch (keyboardnavigation.getKeyName(e)) { case 'ArrowLeft': case 'Left': stepKeyboard(this, -this.keyboardStepDown || -1); diff --git a/src/elements/emby-textarea/emby-textarea.css b/src/elements/emby-textarea/emby-textarea.css index 0dab1b1ece..0866664914 100644 --- a/src/elements/emby-textarea/emby-textarea.css +++ b/src/elements/emby-textarea/emby-textarea.css @@ -2,30 +2,35 @@ display: block; margin: 0; margin-bottom: 0 !important; + /* Remove select styling */ + /* Font size must the 16px or larger to prevent iOS page zoom on focus */ font-size: inherit; + /* General select styles: change as needed */ font-family: inherit; font-weight: inherit; color: inherit; - padding: .35em .25em; + padding: 0.35em 0.25em; + /* Prevent padding from causing width overflow */ box-sizing: border-box; outline: none !important; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; } - .emby-textarea::-moz-focus-inner { - border: 0; - } +.emby-textarea::-moz-focus-inner { + border: 0; +} .textareaLabel { display: inline-block; - transition: all .2s ease-out; - margin-bottom: .25em; + transition: all 0.2s ease-out; + margin-bottom: 0.25em; } .emby-textarea + .fieldDescription { - margin-top: .25em; + margin-top: 0.25em; } diff --git a/src/elements/emby-toggle/emby-toggle.css b/src/elements/emby-toggle/emby-toggle.css index 3b14b8cf09..3b5c5a5f64 100644 --- a/src/elements/emby-toggle/emby-toggle.css +++ b/src/elements/emby-toggle/emby-toggle.css @@ -9,6 +9,10 @@ margin: 0; padding: 0; overflow: visible; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; flex-direction: row-reverse; justify-content: flex-end; @@ -24,6 +28,9 @@ margin: 0; padding: 0; opacity: 0; + -ms-appearance: none; + -moz-appearance: none; + -webkit-appearance: none; appearance: none; border: none; } @@ -34,7 +41,7 @@ } .mdl-switch__track { - background: rgba(128,128,128, 0.5); + background: rgba(128, 128, 128, 0.5); height: 1em; border-radius: 1em; cursor: pointer; @@ -45,7 +52,7 @@ } .mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { - background: rgba(0,0,0, 0.12); + background: rgba(0, 0, 0, 0.12); cursor: auto; } @@ -53,7 +60,7 @@ background: #999; position: absolute; left: 0; - top: -.25em; + top: -0.25em; height: 1.44em; width: 1.44em; border-radius: 50%; @@ -70,11 +77,11 @@ .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { background: #00a4dc; left: 1.466em; - box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px .56em 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 0.56em 0 rgba(0, 0, 0, 0.12); } .mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { - background: rgb(189,189,189); + background: rgb(189, 189, 189); cursor: auto; } @@ -82,17 +89,18 @@ position: absolute; top: 50%; left: 50%; + -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: inline-block; box-sizing: border-box; - width: .6em; - height: .6em; + width: 0.6em; + height: 0.6em; border-radius: 50%; background-color: transparent; } .mdl-switch__input:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper { - box-shadow: 0 0 0 1.39em rgba(0, 0, 0, .05); + box-shadow: 0 0 0 1.39em rgba(0, 0, 0, 0.05); } .mdl-switch__input:checked:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper { @@ -105,10 +113,10 @@ margin: 0; display: inline-flex; align-items: center; - margin-left: .7em; + margin-left: 0.7em; } .mdl-switch__input[disabled] .mdl-switch__label { - color: rgb(189,189,189); + color: rgb(189, 189, 189); cursor: auto; } diff --git a/src/encodingsettings.html b/src/encodingsettings.html index 3d67544c0b..6e074936f1 100644 --- a/src/encodingsettings.html +++ b/src/encodingsettings.html @@ -94,7 +94,7 @@
- +
${LabelffmpegPathHelp}
@@ -105,7 +105,7 @@
- +
${LabelTranscodingTempPathHelp}
diff --git a/src/itemdetails.html b/src/itemdetails.html index 22c18cd9d6..ef41bc4b16 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -1,7 +1,7 @@
@@ -15,100 +15,100 @@
- - - - - - - - - - - -
-
+
diff --git a/src/list.html b/src/list.html index e31efa27e6..643d3a1baa 100644 --- a/src/list.html +++ b/src/list.html @@ -7,45 +7,45 @@ ${HeaderPlayAll}
diff --git a/src/livetv.html b/src/livetv.html index 2ff8990e4a..752b7c827b 100644 --- a/src/livetv.html +++ b/src/livetv.html @@ -7,7 +7,7 @@
@@ -16,7 +16,7 @@
@@ -25,7 +25,7 @@
@@ -34,7 +34,7 @@
@@ -43,7 +43,7 @@
@@ -52,7 +52,7 @@
@@ -63,7 +63,7 @@
- +
@@ -72,7 +72,7 @@
diff --git a/src/livetvguideprovider.html b/src/livetvguideprovider.html index 86bf3ea7d6..d0d52aac23 100644 --- a/src/livetvguideprovider.html +++ b/src/livetvguideprovider.html @@ -1,11 +1,7 @@
-
- -
- -
+
-
\ No newline at end of file +
diff --git a/src/livetvsettings.html b/src/livetvsettings.html index 044226a085..d853063ab0 100644 --- a/src/livetvsettings.html +++ b/src/livetvsettings.html @@ -34,7 +34,7 @@
- +
${LabelRecordingPathHelp}
@@ -43,7 +43,7 @@
- +
@@ -51,7 +51,7 @@
- +
@@ -84,7 +84,7 @@
- +
diff --git a/src/livetvstatus.html b/src/livetvstatus.html index 3abd14de34..fc855f32b0 100644 --- a/src/livetvstatus.html +++ b/src/livetvstatus.html @@ -8,7 +8,7 @@ ${HeaderTunerDevices} ${Help}
@@ -21,7 +21,7 @@

${HeaderGuideProviders}

diff --git a/src/livetvtuner.html b/src/livetvtuner.html index 53e8f4b01d..fecbda90aa 100644 --- a/src/livetvtuner.html +++ b/src/livetvtuner.html @@ -24,7 +24,7 @@
- +
diff --git a/src/movies.html b/src/movies.html index c211d9686a..702f1e1f40 100644 --- a/src/movies.html +++ b/src/movies.html @@ -3,15 +3,15 @@
- - - + + +
-
+
-
+
@@ -46,14 +46,14 @@
- - + +
-
+
@@ -62,7 +62,7 @@
- +
@@ -74,9 +74,9 @@
- - - + + +
@@ -90,4 +90,4 @@
-
\ No newline at end of file +
diff --git a/src/music.html b/src/music.html index e86f179208..d4d0acd8bb 100644 --- a/src/music.html +++ b/src/music.html @@ -37,17 +37,17 @@
- - - - - + + + + +
-
+
-
+
@@ -56,14 +56,14 @@
- - + +
-
+
-
+
@@ -72,14 +72,14 @@
- - + +
-
+
-
+
@@ -92,8 +92,8 @@
- - + +
diff --git a/src/mypreferencesmenu.html b/src/mypreferencesmenu.html index 0638a49d9d..96e9626899 100644 --- a/src/mypreferencesmenu.html +++ b/src/mypreferencesmenu.html @@ -5,7 +5,7 @@

- person + person
${ButtonProfile}
@@ -14,7 +14,7 @@
- tv + tv
${HeaderDisplay}
@@ -23,7 +23,7 @@
- home + home
${HeaderHome}
@@ -32,7 +32,7 @@
- play_circle_filled + play_circle_filled
${TitlePlayback}
@@ -41,7 +41,7 @@
- closed_caption + closed_caption
${Subtitles}
@@ -52,7 +52,7 @@

${HeaderAdmin}

- dashboard + dashboard
${TabDashboard}
@@ -60,7 +60,7 @@
- mode_edit + mode_edit
${Metadata}
@@ -71,7 +71,7 @@

${HeaderUser}

- wifi + wifi
${HeaderSelectServer}
@@ -79,7 +79,7 @@
- exit_to_app + exit_to_app
${ButtonSignOut}
diff --git a/src/networking.html b/src/networking.html index 35468a94c9..f7a185b743 100644 --- a/src/networking.html +++ b/src/networking.html @@ -5,7 +5,7 @@
@@ -61,7 +61,7 @@
- +
${LabelCustomCertificatePathHelp}
diff --git a/src/nowplaying.html b/src/nowplaying.html index 44b7e38163..78813255c8 100644 --- a/src/nowplaying.html +++ b/src/nowplaying.html @@ -14,35 +14,35 @@
@@ -55,15 +55,15 @@
@@ -72,67 +72,72 @@
-