mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge branch 'master' of https://github.com/jellyfin/jellyfin-web into item-detail-page-
# Resolve Conflicts: # src/assets/css/librarybrowser.css # src/itemdetails.html
This commit is contained in:
grafixeyehero
commit
b06afa3305
247 changed files with 5884 additions and 3079 deletions
|
|
@ -57,3 +57,7 @@ jobs:
|
||||||
|
|
||||||
- script: 'yarn run lint'
|
- script: 'yarn run lint'
|
||||||
displayName: 'Run ESLint'
|
displayName: 'Run ESLint'
|
||||||
|
|
||||||
|
- script: |
|
||||||
|
yarn run stylelint
|
||||||
|
displayName: 'Run stylelint'
|
||||||
|
|
|
||||||
143
.stylelintrc
Normal file
143
.stylelintrc
Normal file
|
|
@ -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,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -12,6 +12,10 @@
|
||||||
"file-loader": "^3.0.1",
|
"file-loader": "^3.0.1",
|
||||||
"html-webpack-plugin": "^3.2.0",
|
"html-webpack-plugin": "^3.2.0",
|
||||||
"style-loader": "^0.23.1",
|
"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": "^4.41.0",
|
||||||
"webpack-cli": "^3.3.9",
|
"webpack-cli": "^3.3.9",
|
||||||
"webpack-concat-plugin": "^3.0.0",
|
"webpack-concat-plugin": "^3.0.0",
|
||||||
|
|
@ -26,14 +30,15 @@
|
||||||
"howler": "^2.1.2",
|
"howler": "^2.1.2",
|
||||||
"jquery": "^3.4.1",
|
"jquery": "^3.4.1",
|
||||||
"jstree": "^3.3.7",
|
"jstree": "^3.3.7",
|
||||||
|
"libass-wasm": "^2.1.1",
|
||||||
"libjass": "^0.11.0",
|
"libjass": "^0.11.0",
|
||||||
|
"material-design-icons-iconfont": "^5.0.1",
|
||||||
"native-promise-only": "^0.8.0-a",
|
"native-promise-only": "^0.8.0-a",
|
||||||
"requirejs": "^2.3.5",
|
"requirejs": "^2.3.5",
|
||||||
"resize-observer-polyfill": "^1.5.1",
|
"resize-observer-polyfill": "^1.5.1",
|
||||||
"shaka-player": "^2.5.5",
|
"shaka-player": "^2.5.5",
|
||||||
"sortablejs": "^1.9.0",
|
"sortablejs": "^1.9.0",
|
||||||
"swiper": "^3.4.2",
|
"swiper": "^3.4.2",
|
||||||
"libass-wasm": "^2.1.1",
|
|
||||||
"webcomponents.js": "^0.7.24",
|
"webcomponents.js": "^0.7.24",
|
||||||
"whatwg-fetch": "^1.1.1"
|
"whatwg-fetch": "^1.1.1"
|
||||||
},
|
},
|
||||||
|
|
@ -49,13 +54,13 @@
|
||||||
"Chrome 53",
|
"Chrome 53",
|
||||||
"Chrome 56",
|
"Chrome 56",
|
||||||
"Chrome 63",
|
"Chrome 63",
|
||||||
"Explorer 11",
|
|
||||||
"Firefox ESR"
|
"Firefox ESR"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "webpack-dev-server --config webpack.dev.js --open",
|
"serve": "webpack-dev-server --config webpack.dev.js --open",
|
||||||
"build": "webpack --config webpack.prod.js",
|
"build": "webpack --config webpack.prod.js",
|
||||||
"lint": "eslint \"src\"",
|
"lint": "eslint \"src\"",
|
||||||
|
"stylelint": "stylelint src/**/*.css",
|
||||||
"prepare": "webpack --config webpack.prod.js"
|
"prepare": "webpack --config webpack.prod.js"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<div class="detailSectionHeader">
|
<div class="detailSectionHeader">
|
||||||
<h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">${HeaderApiKeys}</h2>
|
<h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">${HeaderApiKeys}</h2>
|
||||||
<button is="emby-button" type="button" class="fab btnNewKey submit" style="margin-left:1em;" title="${ButtonAdd}">
|
<button is="emby-button" type="button" class="fab btnNewKey submit" style="margin-left:1em;" title="${ButtonAdd}">
|
||||||
<i class="md-icon">add</i>
|
<i class="material-icons">add</i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<p>${HeaderApiKeysHelp}</p>
|
<p>${HeaderApiKeysHelp}</p>
|
||||||
|
|
|
||||||
|
|
@ -9,4 +9,4 @@
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,16 +2,16 @@
|
||||||
.dashboardSections {
|
.dashboardSections {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
-webkit-box-direction: normal
|
-webkit-box-direction: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboardFooter {
|
.dashboardFooter {
|
||||||
margin-top: 3.5em;
|
margin-top: 3.5em;
|
||||||
text-align: center
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboardFooter a {
|
.dashboardFooter a {
|
||||||
margin: 0 .7em
|
margin: 0 0.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress {
|
progress {
|
||||||
|
|
@ -19,59 +19,74 @@ progress {
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: #ccc !important
|
background: #ccc !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress[role]:after {
|
progress[role]::after {
|
||||||
background-image: none
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress::-webkit-progress-bar {
|
progress::-webkit-progress-bar {
|
||||||
background: #ccc
|
background: #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress::-moz-progress-bar {
|
progress::-moz-progress-bar {
|
||||||
background-color: #00a4dc
|
background-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress::-webkit-progress-value {
|
progress::-webkit-progress-value {
|
||||||
background-color: #00a4dc
|
background-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress[aria-valuenow]:before {
|
progress[aria-valuenow]::before {
|
||||||
border-radius: .4em;
|
border-radius: 0.4em;
|
||||||
background-color: #00a4dc
|
background-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.localnav {
|
.localnav {
|
||||||
margin-bottom: 2.2em !important
|
margin-bottom: 2.2em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:50em) {
|
@media all and (min-width: 50em) {
|
||||||
|
.type-interior > div[data-role=content],
|
||||||
.type-interior>.ui-panel-content-wrap>div[data-role=content],
|
.type-interior > .ui-panel-content-wrap > div[data-role=content] {
|
||||||
.type-interior>div[data-role=content] {
|
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
overflow: hidden
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboardDocument .dashboardEntryHeaderButton,
|
.dashboardDocument .dashboardEntryHeaderButton,
|
||||||
.dashboardDocument .lnkManageServer {
|
.dashboardDocument .lnkManageServer {
|
||||||
display: none !important
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.adminDrawerLogo {
|
.adminDrawerLogo {
|
||||||
padding: 1.5em 1em 1.2em;
|
padding: 1.5em 1em 1.2em;
|
||||||
border-bottom: 1px solid #e0e0e0;
|
border-bottom: 1px solid #e0e0e0;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
display: block
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.adminDrawerLogo img {
|
.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] {
|
div[data-role=controlgroup] a[data-role=button] {
|
||||||
|
|
@ -80,70 +95,88 @@ div[data-role=controlgroup] a[data-role=button] {
|
||||||
-webkit-box-shadow: none !important;
|
-webkit-box-shadow: none !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
-webkit-border-radius: 0;
|
-webkit-border-radius: 0;
|
||||||
border-radius: 0
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
div[data-role=controlgroup] a[data-role=button]:first-child {
|
div[data-role=controlgroup] a[data-role=button]:first-child {
|
||||||
-webkit-border-bottom-left-radius: .3125em;
|
-webkit-border-bottom-left-radius: 0.3125em;
|
||||||
border-bottom-left-radius: .3125em;
|
border-bottom-left-radius: 0.3125em;
|
||||||
-webkit-border-top-left-radius: .3125em;
|
-webkit-border-top-left-radius: 0.3125em;
|
||||||
border-top-left-radius: .3125em
|
border-top-left-radius: 0.3125em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div[data-role=controlgroup] a[data-role=button]:last-child {
|
div[data-role=controlgroup] a[data-role=button]:last-child {
|
||||||
-webkit-border-bottom-right-radius: .3125em;
|
-webkit-border-bottom-right-radius: 0.3125em;
|
||||||
border-bottom-right-radius: .3125em;
|
border-bottom-right-radius: 0.3125em;
|
||||||
-webkit-border-top-right-radius: .3125em;
|
-webkit-border-top-right-radius: 0.3125em;
|
||||||
border-top-right-radius: .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;
|
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 {
|
div[data-role=controlgroup] a.ui-btn-active {
|
||||||
background: #00a4dc !important;
|
background: #00a4dc !important;
|
||||||
color: #292929 !important
|
color: #292929 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sessionAppInfo img {
|
||||||
|
max-width: 40px;
|
||||||
|
max-height: 40px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appLinks img {
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizardContent h2 img {
|
||||||
|
height: 2.5em;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
position: relative;
|
||||||
|
top: -0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .imageLink {
|
.header .imageLink {
|
||||||
display: inline-block
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .imageLink img {
|
.header .imageLink img {
|
||||||
height: 2.1em;
|
height: 2.1em;
|
||||||
vertical-align: middle
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-primary {
|
.content-primary {
|
||||||
padding-top: 6em;
|
padding-top: 6em;
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
padding-left: 1em
|
padding-left: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.withTabs .content-primary {
|
.withTabs .content-primary {
|
||||||
padding-top: 9em !important
|
padding-top: 9em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:40em) {
|
@media all and (min-width: 40em) {
|
||||||
.content-primary {
|
.content-primary {
|
||||||
padding-top: 7em
|
padding-top: 7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.withTabs .content-primary {
|
.withTabs .content-primary {
|
||||||
padding-top: 10em !important
|
padding-top: 10em !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:84em) {
|
@media all and (min-width: 84em) {
|
||||||
.withTabs .content-primary {
|
.withTabs .content-primary {
|
||||||
padding-top: 7em !important
|
padding-top: 7em !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-primary ul:first-child {
|
.content-primary ul:first-child {
|
||||||
margin-top: 0
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboardSections {
|
.dashboardSections {
|
||||||
|
|
@ -151,7 +184,7 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: flex;
|
display: flex;
|
||||||
-webkit-flex-direction: column;
|
-webkit-flex-direction: column;
|
||||||
flex-direction: column
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboardColumn {
|
.dashboardColumn {
|
||||||
|
|
@ -164,136 +197,7 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
-webkit-flex-grow: 1;
|
-webkit-flex-grow: 1;
|
||||||
flex-grow: 1
|
flex-grow: 1;
|
||||||
}
|
|
||||||
|
|
||||||
.activeSession:not(.playingSession) .sessionNowPlayingContent {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboardSection {
|
|
||||||
-webkit-flex-shrink: 0;
|
|
||||||
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 {
|
|
||||||
-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%
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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%
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizardContent h2 img {
|
|
||||||
height: 2.5em;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-right: .5em;
|
|
||||||
position: relative;
|
|
||||||
top: -.3em
|
|
||||||
}
|
|
||||||
|
|
||||||
.scheduledTaskPaperIconItem {
|
|
||||||
outline: 0 !important
|
|
||||||
}
|
|
||||||
|
|
||||||
.activeSession {
|
|
||||||
width: 100% !important
|
|
||||||
}
|
|
||||||
|
|
||||||
.activitylogUserPhoto {
|
|
||||||
height:1.71em;
|
|
||||||
width:1.71em;
|
|
||||||
border-radius:100%;
|
|
||||||
margin-right:.5em;
|
|
||||||
background-size:cover;
|
|
||||||
background-repeat:no-repeat;
|
|
||||||
background-position:center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width:40em) {
|
|
||||||
.activeSession {
|
|
||||||
width: 100% !important
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width:50em) {
|
|
||||||
.activeSession {
|
|
||||||
width: 50% !important
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sessionCardFooter {
|
|
||||||
padding-top: .5em !important;
|
|
||||||
padding-bottom: 1em !important;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
text-align: center;
|
|
||||||
position: relative
|
|
||||||
}
|
|
||||||
|
|
||||||
.sessionAppInfo {
|
|
||||||
padding: 0.5em;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sessionCardButtons {
|
|
||||||
min-height: 2.7em
|
|
||||||
}
|
|
||||||
|
|
||||||
.sessionCardButton {
|
|
||||||
margin: 0
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sessionNowPlayingContent {
|
.sessionNowPlayingContent {
|
||||||
|
|
@ -305,7 +209,119 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 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: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 50em) {
|
||||||
|
.activeSession {
|
||||||
|
width: 50% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sessionCardFooter {
|
||||||
|
padding-top: 0.5em !important;
|
||||||
|
padding-bottom: 1em !important;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sessionAppInfo {
|
||||||
|
padding: 0.5em;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sessionCardButtons {
|
||||||
|
min-height: 2.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sessionCardButton {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sessionNowPlayingInnerContent {
|
.sessionNowPlayingInnerContent {
|
||||||
|
|
@ -314,23 +330,23 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
font-weight: 400
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sessionNowPlayingContent-withbackground+.sessionNowPlayingInnerContent {
|
.sessionNowPlayingContent-withbackground + .sessionNowPlayingInnerContent {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
background: rgba(0, 0, 0, .7)
|
background: rgba(0, 0, 0, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sessionAppName {
|
.sessionAppName {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
max-width: 200px
|
max-width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sessionNowPlayingDetails {
|
.sessionNowPlayingDetails {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0px;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -340,12 +356,6 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||||
padding: 0.8em 0.5em;
|
padding: 0.8em 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sessionAppInfo img {
|
|
||||||
max-width: 40px;
|
|
||||||
max-height: 40px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sessionNowPlayingTime {
|
.sessionNowPlayingTime {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
|
|
@ -357,6 +367,13 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.playbackProgress,
|
||||||
|
.transcodingProgress {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
.activeSession .playbackProgress,
|
.activeSession .playbackProgress,
|
||||||
.activeSession .transcodingProgress {
|
.activeSession .transcodingProgress {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -367,13 +384,6 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playbackProgress,
|
|
||||||
.transcodingProgress {
|
|
||||||
margin: 0px;
|
|
||||||
width: 100%;
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playbackProgress > div {
|
.playbackProgress > div {
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
|
|
@ -383,90 +393,70 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||||
background-color: #dd4919;
|
background-color: #dd4919;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:34.375em) {
|
@media all and (max-width: 34.375em) {
|
||||||
.sessionAppName {
|
.sessionAppName {
|
||||||
max-width: 160px
|
max-width: 160px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:31.25em) {
|
@media all and (max-width: 31.25em) {
|
||||||
.sessionAppName {
|
.sessionAppName {
|
||||||
max-width: 150px
|
max-width: 150px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabledUser {
|
.disabledUser {
|
||||||
-webkit-filter: grayscale(100%);
|
-webkit-filter: grayscale(100%);
|
||||||
filter: grayscale(100%)
|
filter: grayscale(100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabledUserBanner {
|
.disabledUserBanner {
|
||||||
margin: 0 0 2em
|
margin: 0 0 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.appLinks a {
|
.appLinks a {
|
||||||
text-decoration: none !important
|
|
||||||
}
|
|
||||||
|
|
||||||
.appLinks a+a {
|
|
||||||
margin-left: 5px
|
|
||||||
}
|
|
||||||
|
|
||||||
.appLinks img {
|
|
||||||
height: 36px
|
|
||||||
}
|
|
||||||
|
|
||||||
a[data-role=button] {
|
|
||||||
background-clip: padding-box;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-webkit-background-clip: padding-box;
|
|
||||||
cursor: pointer !important;
|
|
||||||
font-family: inherit !important;
|
|
||||||
font-weight: 500 !important;
|
|
||||||
margin: 0 .25em !important;
|
|
||||||
display: inline-block;
|
|
||||||
padding: .8em 1em;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
background: #292929 !important;
|
}
|
||||||
|
|
||||||
|
.appLinks a + a {
|
||||||
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes rotating {
|
@-webkit-keyframes rotating {
|
||||||
from {
|
from {
|
||||||
-webkit-transform: rotate(0);
|
-webkit-transform: rotate(0);
|
||||||
transform: rotate(0)
|
transform: rotate(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
-webkit-transform: rotate(360deg);
|
-webkit-transform: rotate(360deg);
|
||||||
transform: rotate(360deg)
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes rotating {
|
@keyframes rotating {
|
||||||
from {
|
from {
|
||||||
-webkit-transform: rotate(0);
|
-webkit-transform: rotate(0);
|
||||||
transform: rotate(0)
|
transform: rotate(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
-webkit-transform: rotate(360deg);
|
-webkit-transform: rotate(360deg);
|
||||||
transform: rotate(360deg)
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.rotatingCircle {
|
.rotatingCircle {
|
||||||
-webkit-animation: rotating 2s linear infinite;
|
-webkit-animation: rotating 2s linear infinite;
|
||||||
animation: rotating 2s linear infinite
|
animation: rotating 2s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pluginPreviewImg {
|
.pluginPreviewImg {
|
||||||
-webkit-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 .0725em .29em 0 rgba(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;
|
text-align: center;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
.detailTableBodyCell,
|
.detailTableBodyCell,
|
||||||
.detailTableHeaderCell {
|
.detailTableHeaderCell {
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
padding: .4em
|
padding: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailTable {
|
.detailTable {
|
||||||
|
|
@ -9,11 +9,11 @@
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailTableHeaderCell {
|
.detailTableHeaderCell {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
vertical-align: top
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -44,4 +44,4 @@
|
||||||
|
|
||||||
.align-self-flex-end {
|
.align-self-flex-end {
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,13 @@
|
||||||
html {
|
html {
|
||||||
font-family: -apple-system, "Helvetica", system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
|
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%;
|
font-size: 93%;
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
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 */
|
/* 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;
|
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
html {
|
html {
|
||||||
font-size: 82% !important
|
font-size: 82% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formDialogFooter {
|
.formDialogFooter {
|
||||||
position: static !important;
|
position: static !important;
|
||||||
margin: 0 -1em !important
|
margin: 0 -1em !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,9 +1,9 @@
|
||||||
.guideVerticalScroller {
|
.guideVerticalScroller {
|
||||||
padding-bottom: 15em
|
padding-bottom: 15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:62.5em) {
|
@media all and (min-width: 62.5em) {
|
||||||
#guideTab {
|
#guideTab {
|
||||||
padding-left: .5em
|
padding-left: 0.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,29 +1,29 @@
|
||||||
.editPageSidebar {
|
.editPageSidebar {
|
||||||
display: block
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editPageSidebar-withcontent {
|
.editPageSidebar-withcontent {
|
||||||
display: none
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.libraryTree {
|
.libraryTree {
|
||||||
margin-left: .25em
|
margin-left: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.offlineEditorNode {
|
.offlineEditorNode {
|
||||||
color: #c33
|
color: #c33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editorNode img {
|
.editorNode img {
|
||||||
height: 18px;
|
height: 18px;
|
||||||
margin: 0 .35em;
|
margin: 0 0.35em;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2px
|
top: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jstree-anchor {
|
.jstree-anchor {
|
||||||
font-weight: 400 !important
|
font-weight: 400 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jstree-wholerow-hovered {
|
.jstree-wholerow-hovered {
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
-webkit-border-radius: 0 !important;
|
-webkit-border-radius: 0 !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
-webkit-box-shadow: none !important;
|
-webkit-box-shadow: none !important;
|
||||||
box-shadow: none !important
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jstree-default .jstree-hovered {
|
.jstree-default .jstree-hovered {
|
||||||
|
|
@ -40,18 +40,18 @@
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
-webkit-box-shadow: none !important;
|
-webkit-box-shadow: none !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
color: #fff !important
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jstree-default .jstree-wholerow-clicked {
|
.jstree-default .jstree-wholerow-clicked {
|
||||||
background: #00a4dc !important
|
background: #00a4dc !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metadataSidebarIcon {
|
.metadataSidebarIcon {
|
||||||
margin-right: .4em
|
margin-right: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:50em) {
|
@media all and (min-width: 50em) {
|
||||||
.editPageSidebar {
|
.editPageSidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 5.2em;
|
top: 5.2em;
|
||||||
|
|
@ -59,21 +59,21 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
border-right: 1px solid #555;
|
border-right: 1px solid #555;
|
||||||
display: block
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editPageInnerContent {
|
.editPageInnerContent {
|
||||||
float: right;
|
float: right;
|
||||||
width: 68.5%
|
width: 68.5%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:112.5em) {
|
@media all and (min-width: 112.5em) {
|
||||||
.editPageSidebar {
|
.editPageSidebar {
|
||||||
width: 25%
|
width: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editPageInnerContent {
|
.editPageInnerContent {
|
||||||
width: 73.5%
|
width: 73.5%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,8 @@
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hiddenScrollX, .layout-tv .scrollX {
|
.hiddenScrollX,
|
||||||
|
.layout-tv .scrollX {
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -17,7 +18,8 @@
|
||||||
overflow: -moz-scrollbars-none;
|
overflow: -moz-scrollbars-none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hiddenScrollX::-webkit-scrollbar, .layout-tv .scrollX::-webkit-scrollbar {
|
.hiddenScrollX::-webkit-scrollbar,
|
||||||
|
.layout-tv .scrollX::-webkit-scrollbar {
|
||||||
height: 0 !important;
|
height: 0 !important;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -35,17 +37,22 @@
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hiddenScrollY, .layout-tv .smoothScrollY {
|
.hiddenScrollY,
|
||||||
|
.layout-tv .smoothScrollY {
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
|
|
||||||
/* Can't do this because it not only hides the scrollbar, but also prevents scrolling */
|
/* Can't do this because it not only hides the scrollbar, but also prevents scrolling */
|
||||||
/*overflow: -moz-scrollbars-none;*/
|
|
||||||
|
/* overflow: -moz-scrollbars-none; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.hiddenScrollY-forced {
|
.hiddenScrollY-forced {
|
||||||
overflow: -moz-scrollbars-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;
|
width: 0 !important;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ body,
|
||||||
html {
|
html {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100%
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundContainer {
|
.backgroundContainer {
|
||||||
|
|
@ -11,11 +11,11 @@ html {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
contain: strict
|
contain: strict;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
line-height: 1.35
|
line-height: 1.35;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-mobile,
|
.layout-mobile,
|
||||||
|
|
@ -25,44 +25,44 @@ html {
|
||||||
-khtml-user-select: none;
|
-khtml-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
-webkit-font-smoothing: antialiased
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainAnimatedPage {
|
.mainAnimatedPage {
|
||||||
contain: style size !important
|
contain: style size !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageContainer {
|
.pageContainer {
|
||||||
overflow-x: visible !important
|
overflow-x: visible !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bodyWithPopupOpen {
|
.bodyWithPopupOpen {
|
||||||
overflow-y: hidden !important
|
overflow-y: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
div[data-role=page] {
|
div[data-role=page] {
|
||||||
outline: 0
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageTitle {
|
.pageTitle {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
font-family: inherit
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fieldDescription {
|
.fieldDescription {
|
||||||
padding-left: .15em;
|
padding-left: 0.15em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
white-space: normal !important
|
white-space: normal !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fieldDescription+.fieldDescription {
|
.fieldDescription + .fieldDescription {
|
||||||
margin-top: .3em
|
margin-top: 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-primary,
|
.content-primary,
|
||||||
|
|
@ -73,21 +73,21 @@ div[data-role=page] {
|
||||||
padding-bottom: 5em !important;
|
padding-bottom: 5em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:50em) {
|
@media all and (min-width: 50em) {
|
||||||
.readOnlyContent,
|
.readOnlyContent,
|
||||||
form {
|
form {
|
||||||
max-width: 54em
|
max-width: 54em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerHelpButton {
|
.headerHelpButton {
|
||||||
margin-left: 1.25em !important;
|
margin-left: 1.25em !important;
|
||||||
padding-bottom: .4em !important;
|
padding-bottom: 0.4em !important;
|
||||||
padding-top: .4em !important
|
padding-top: 0.4em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoContent {
|
.mediaInfoContent {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
width: 85%
|
width: 85%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none
|
-ms-user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdPoster img,
|
.osdPoster img,
|
||||||
|
|
@ -11,13 +11,13 @@
|
||||||
.videoOsdBottom {
|
.videoOsdBottom {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdHeader {
|
.osdHeader {
|
||||||
-webkit-transition: opacity .3s ease-out;
|
-webkit-transition: opacity 0.3s ease-out;
|
||||||
-o-transition: opacity .3s ease-out;
|
-o-transition: opacity 0.3s ease-out;
|
||||||
transition: opacity .3s ease-out;
|
transition: opacity 0.3s ease-out;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background: rgba(0, 0, 0, 0.7) !important;
|
background: rgba(0, 0, 0, 0.7) !important;
|
||||||
|
|
@ -27,11 +27,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdHeader-hidden {
|
.osdHeader-hidden {
|
||||||
opacity: 0
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton) {
|
.osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton) {
|
||||||
display: none
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapterThumbContainer {
|
.chapterThumbContainer {
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
-webkit-flex-grow: 1;
|
-webkit-flex-grow: 1;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
position: relative
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapterThumb {
|
.chapterThumb {
|
||||||
|
|
@ -50,20 +50,20 @@
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
border: 0;
|
border: 0;
|
||||||
height: 20vh;
|
height: 20vh;
|
||||||
min-width: 20vh
|
min-width: 20vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (orientation:portrait) {
|
@media all and (orientation: portrait) {
|
||||||
.chapterThumb {
|
.chapterThumb {
|
||||||
height: 30vw;
|
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 {
|
.chapterThumb {
|
||||||
height: 30vh;
|
height: 30vh;
|
||||||
min-width: 30vh
|
min-width: 30vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -72,19 +72,19 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background: rgba(0, 0, 0, .7);
|
background: rgba(0, 0, 0, 0.7);
|
||||||
padding: .25em .5em;
|
padding: 0.25em 0.5em;
|
||||||
user-select: none
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapterThumbText {
|
.chapterThumbText {
|
||||||
padding: .25em 0;
|
padding: 0.25em 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
opacity: 1
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapterThumbText-dim {
|
.chapterThumbText-dim {
|
||||||
opacity: .6
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.videoOsdBottom {
|
.videoOsdBottom {
|
||||||
|
|
@ -104,21 +104,21 @@
|
||||||
transition: opacity 0.3s ease-out;
|
transition: opacity 0.3s ease-out;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-touch-callout: none
|
-webkit-touch-callout: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.videoOsdBottom-hidden {
|
.videoOsdBottom-hidden {
|
||||||
opacity: 0
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdControls {
|
.osdControls {
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
-webkit-flex-grow: 1;
|
-webkit-flex-grow: 1;
|
||||||
flex-grow: 1
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.videoOsdBottom .buttons {
|
.videoOsdBottom .buttons {
|
||||||
padding: .25em 0 0;
|
padding: 0.25em 0 0;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -126,14 +126,14 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
align-items: center
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdVolumeSliderContainer {
|
.osdVolumeSliderContainer {
|
||||||
width: 9em;
|
width: 9em;
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
-webkit-flex-grow: 1;
|
-webkit-flex-grow: 1;
|
||||||
flex-grow: 1
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdMediaInfo,
|
.osdMediaInfo,
|
||||||
|
|
@ -142,14 +142,14 @@
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
-webkit-box-align: center
|
-webkit-box-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.volumeButtons {
|
.volumeButtons {
|
||||||
margin: 0 .5em 0 auto;
|
margin: 0 0.5em 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
align-items: center
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdTimeText {
|
.osdTimeText {
|
||||||
|
|
@ -157,13 +157,13 @@
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdPoster {
|
.osdPoster {
|
||||||
width: 10%;
|
width: 10%;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-right: .5em
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdPoster img {
|
.osdPoster img {
|
||||||
|
|
@ -172,28 +172,28 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
-webkit-box-shadow: 0 0 1.9vh #000;
|
-webkit-box-shadow: 0 0 1.9vh #000;
|
||||||
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-drag: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-webkit-user-drag: none;
|
-webkit-user-drag: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-ms-user-select: none
|
-ms-user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdTitle,
|
.osdTitle,
|
||||||
.osdTitleSmall {
|
.osdTitleSmall {
|
||||||
margin: 0 1em 0 0
|
margin: 0 1em 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdMediaInfo {
|
.osdMediaInfo {
|
||||||
display: flex;
|
display: flex;
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
align-items: center
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdSecondaryMediaInfo {
|
.osdSecondaryMediaInfo {
|
||||||
padding-left: .6em !important
|
padding-left: 0.6em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdTextContainer {
|
.osdTextContainer {
|
||||||
|
|
@ -207,14 +207,14 @@
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
margin-bottom: .7em;
|
margin-bottom: 0.7em;
|
||||||
padding-left: .5em
|
padding-left: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdMainTextContainer {
|
.osdMainTextContainer {
|
||||||
-webkit-box-align: baseline;
|
-webkit-box-align: baseline;
|
||||||
-webkit-align-items: baseline;
|
-webkit-align-items: baseline;
|
||||||
align-items: baseline
|
align-items: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdMediaStatus {
|
.osdMediaStatus {
|
||||||
|
|
@ -224,63 +224,66 @@
|
||||||
@-moz-keyframes spin {
|
@-moz-keyframes spin {
|
||||||
100% {
|
100% {
|
||||||
-moz-transform: rotate(360deg);
|
-moz-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes spin {
|
@-webkit-keyframes spin {
|
||||||
100% {
|
100% {
|
||||||
-webkit-transform: rotate(360deg);
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
100% {
|
100% {
|
||||||
-webkit-transform: rotate(360deg);
|
-webkit-transform: rotate(360deg);
|
||||||
transform:rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdMediaStatus .animate {
|
.osdMediaStatus .animate {
|
||||||
-webkit-animation:spin 4s linear infinite;
|
-webkit-animation: spin 4s linear infinite;
|
||||||
-moz-animation:spin 4s linear infinite;
|
-moz-animation: spin 4s linear infinite;
|
||||||
animation:spin 4s linear infinite;
|
animation: spin 4s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageContainer {
|
.pageContainer {
|
||||||
top: 0;
|
top: 0;
|
||||||
position: fixed
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:30em) {
|
@media all and (max-width: 30em) {
|
||||||
|
|
||||||
.btnFastForward,
|
.btnFastForward,
|
||||||
.btnRewind,
|
.btnRewind,
|
||||||
.osdMediaInfo,
|
.osdMediaInfo,
|
||||||
.osdPoster {
|
.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 {
|
.videoOsdBottom .paper-icon-button-light {
|
||||||
margin: 0
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:43em) {
|
@media all and (max-width: 43em) {
|
||||||
.videoOsdBottom .volumeButtons,
|
.videoOsdBottom .volumeButtons,
|
||||||
.osdMediaStatus span {
|
.osdMediaStatus span {
|
||||||
display: none !important
|
display: none !important;
|
||||||
}
|
|
||||||
}
|
|
||||||
@media all and (max-width:50em) {
|
|
||||||
.videoOsdBottom .btnFastForward, .videoOsdBottom .btnRewind {
|
|
||||||
display: none !important
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:75em) {
|
@media all and (max-width: 50em) {
|
||||||
.videoOsdBottom .endsAtText {
|
.videoOsdBottom .btnFastForward,
|
||||||
display: none !important
|
.videoOsdBottom .btnRewind {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 75em) {
|
||||||
|
.videoOsdBottom .endsAtText {
|
||||||
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -96,3 +96,9 @@ var libass_wasm = require("libass-wasm");
|
||||||
_define("JavascriptSubtitlesOctopus", function() {
|
_define("JavascriptSubtitlesOctopus", function() {
|
||||||
return libass_wasm;
|
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;
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="formDialogHeader">
|
<div class="formDialogHeader">
|
||||||
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
|
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
|
||||||
<i class="md-icon">arrow_back</i>
|
<i class="material-icons">arrow_back</i>
|
||||||
</button>
|
</button>
|
||||||
<h3 class="formDialogHeaderTitle">
|
<h3 class="formDialogHeaderTitle">
|
||||||
${HeaderAccessSchedule}
|
${HeaderAccessSchedule}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
max-height: 84%;
|
max-height: 84%;
|
||||||
border-radius: .1em !important;
|
border-radius: 0.1em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionsheet-not-fullscreen {
|
.actionsheet-not-fullscreen {
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
|
|
||||||
.actionSheetContent {
|
.actionSheetContent {
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
padding: .4em 0 !important;
|
padding: 0.4em 0 !important;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -45,7 +45,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionsheetListItemBody {
|
.actionsheetListItemBody {
|
||||||
padding: .4em 1em .4em .6em !important;
|
padding: 0.4em 1em 0.4em 0.6em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionSheetItemText {
|
.actionSheetItemText {
|
||||||
|
|
@ -59,13 +59,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionSheetItemAsideText {
|
.actionSheetItemAsideText {
|
||||||
opacity: .7;
|
opacity: 0.7;
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-left: 5em;
|
margin-left: 5em;
|
||||||
margin-right: .5em;
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionSheetScroller {
|
.actionSheetScroller {
|
||||||
|
|
@ -83,14 +83,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionsheetDivider {
|
.actionsheetDivider {
|
||||||
height: .07em;
|
height: 0.07em;
|
||||||
margin: .25em 0;
|
margin: 0.25em 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionSheetTitle {
|
.actionSheetTitle {
|
||||||
margin: .6em 0 .7em !important;
|
margin: 0.6em 0 0.7em !important;
|
||||||
padding: 0 .9em;
|
padding: 0 0.9em;
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -100,7 +100,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionsheetMenuItemIcon {
|
.actionsheetMenuItemIcon {
|
||||||
margin: 0 .85em 0 .45em !important;
|
margin: 0 0.85em 0 0.45em !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -110,6 +110,6 @@
|
||||||
|
|
||||||
.btnCloseActionSheet {
|
.btnCloseActionSheet {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: .75em;
|
top: 0.75em;
|
||||||
left: .5em;
|
left: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -158,7 +158,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'browser', 'dom', 'emby-bu
|
||||||
}
|
}
|
||||||
|
|
||||||
if (layoutManager.tv) {
|
if (layoutManager.tv) {
|
||||||
html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
|
html += '<button is="paper-icon-button-light" class="btnCloseActionSheet hide-mouse-idle-tv" tabindex="-1"><i class="material-icons">arrow_back</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
// If any items have an icon, give them all an icon just to make sure they're all lined up evenly
|
// 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) {
|
if (itemIcon) {
|
||||||
|
|
||||||
html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent md-icon">' + itemIcon + '</i>';
|
html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons">' + itemIcon + '</i>';
|
||||||
} else if (renderIcon && !center) {
|
} else if (renderIcon && !center) {
|
||||||
html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent md-icon" style="visibility:hidden;">check</i>';
|
html += '<i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons" style="visibility:hidden;">check</i>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '<div class="listItemBody actionsheetListItemBody">';
|
html += '<div class="listItemBody actionsheetListItemBody">';
|
||||||
|
|
|
||||||
|
|
@ -13,12 +13,12 @@ define(["events", "globalize", "dom", "datetime", "userSettings", "serverNotific
|
||||||
}
|
}
|
||||||
|
|
||||||
if (entry.UserId && entry.UserPrimaryImageTag) {
|
if (entry.UserId && entry.UserPrimaryImageTag) {
|
||||||
html += '<i class="listItemIcon md-icon" style="width:2em!important;height:2em!important;padding:0;color:transparent;background-color:' + color + ";background-image:url('" + apiClient.getUserImageUrl(entry.UserId, {
|
html += '<i class="listItemIcon material-icons" style="width:2em!important;height:2em!important;padding:0;color:transparent;background-color:' + color + ";background-image:url('" + apiClient.getUserImageUrl(entry.UserId, {
|
||||||
type: "Primary",
|
type: "Primary",
|
||||||
tag: entry.UserPrimaryImageTag
|
tag: entry.UserPrimaryImageTag
|
||||||
}) + "');background-repeat:no-repeat;background-position:center center;background-size: cover;\">dvr</i>"
|
}) + "');background-repeat:no-repeat;background-position:center center;background-size: cover;\">dvr</i>"
|
||||||
} else {
|
} else {
|
||||||
html += '<i class="listItemIcon md-icon" style="background-color:' + color + '">' + icon + '</i>';
|
html += '<i class="listItemIcon material-icons" style="background-color:' + color + '">' + icon + '</i>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '<div class="listItemBody three-line">';
|
html += '<div class="listItemBody three-line">';
|
||||||
|
|
@ -35,7 +35,7 @@ define(["events", "globalize", "dom", "datetime", "userSettings", "serverNotific
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
|
|
||||||
if (entry.Overview) {
|
if (entry.Overview) {
|
||||||
html += '<button type="button" is="paper-icon-button-light" class="btnEntryInfo" data-id="' + entry.Id + '" title="' + globalize.translate("Info") + '"><i class="md-icon">info</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" class="btnEntryInfo" data-id="' + entry.Id + '" title="' + globalize.translate("Info") + '"><i class="material-icons">info</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
return html += "</div>";
|
return html += "</div>";
|
||||||
|
|
|
||||||
|
|
@ -67,7 +67,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
|
||||||
|
|
||||||
html += '<div class="' + rowClassName + '">';
|
html += '<div class="' + rowClassName + '">';
|
||||||
if (options.mode === 'keyboard') {
|
if (options.mode === 'keyboard') {
|
||||||
html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="md-icon alphaPickerButtonIcon">space_bar</i></button>';
|
html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="material-icons alphaPickerButtonIcon">space_bar</i></button>';
|
||||||
} else {
|
} else {
|
||||||
letters = ['#'];
|
letters = ['#'];
|
||||||
html += mapLetters(letters, vertical).join('');
|
html += mapLetters(letters, vertical).join('');
|
||||||
|
|
@ -77,7 +77,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
|
||||||
html += mapLetters(letters, vertical).join('');
|
html += mapLetters(letters, vertical).join('');
|
||||||
|
|
||||||
if (options.mode === 'keyboard') {
|
if (options.mode === 'keyboard') {
|
||||||
html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="md-icon alphaPickerButtonIcon">backspace</i></button>';
|
html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><i class="material-icons alphaPickerButtonIcon">backspace</i></button>';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
|
letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
|
||||||
|
|
|
||||||
|
|
@ -35,16 +35,15 @@
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
min-width: initial;
|
min-width: initial;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: .1em .4em;
|
padding: 0.1em 0.4em;
|
||||||
width: auto;
|
width: auto;
|
||||||
border-radius: .1em;
|
border-radius: 0.1em;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 50em) {
|
@media all and (max-height: 50em) {
|
||||||
|
|
||||||
.alphaPicker-fixed {
|
.alphaPicker-fixed {
|
||||||
bottom: 5em;
|
bottom: 5em;
|
||||||
}
|
}
|
||||||
|
|
@ -56,14 +55,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 49em) {
|
@media all and (max-height: 49em) {
|
||||||
|
|
||||||
.alphaPicker-vertical {
|
.alphaPicker-vertical {
|
||||||
font-size: 94%;
|
font-size: 94%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 44em) {
|
@media all and (max-height: 44em) {
|
||||||
|
|
||||||
.alphaPicker-vertical {
|
.alphaPicker-vertical {
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
}
|
}
|
||||||
|
|
@ -75,14 +72,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 37em) {
|
@media all and (max-height: 37em) {
|
||||||
|
|
||||||
.alphaPicker-vertical {
|
.alphaPicker-vertical {
|
||||||
font-size: 82%;
|
font-size: 82%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 32em) {
|
@media all and (max-height: 32em) {
|
||||||
|
|
||||||
.alphaPicker-vertical {
|
.alphaPicker-vertical {
|
||||||
font-size: 74%;
|
font-size: 74%;
|
||||||
}
|
}
|
||||||
|
|
@ -113,15 +108,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPicker-fixed-left {
|
.alphaPicker-fixed-left {
|
||||||
left: .4em;
|
left: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPicker-fixed-right {
|
.alphaPicker-fixed-right {
|
||||||
right: .4em;
|
right: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 62.5em) {
|
@media all and (min-width: 62.5em) {
|
||||||
|
|
||||||
.alphaPicker-fixed-left {
|
.alphaPicker-fixed-left {
|
||||||
left: 1em;
|
left: 1em;
|
||||||
}
|
}
|
||||||
|
|
@ -132,7 +126,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 31.25em) {
|
@media all and (max-height: 31.25em) {
|
||||||
|
|
||||||
.alphaPicker-fixed {
|
.alphaPicker-fixed {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -545,13 +545,18 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
|
||||||
page.back();
|
page.back();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pages of "no return" (when "Go back" should behave differently, probably quitting the application).
|
||||||
|
*/
|
||||||
|
var startPages = ['home', 'login', 'selectserver'];
|
||||||
|
|
||||||
function canGoBack() {
|
function canGoBack() {
|
||||||
var curr = current();
|
var curr = current();
|
||||||
if (!curr) {
|
if (!curr) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (curr.type === 'home') {
|
if (!document.querySelector('.dialogContainer') && startPages.indexOf(curr.type) !== -1) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
return page.canGoBack();
|
return page.canGoBack();
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,6 @@
|
||||||
contain: layout style;
|
contain: layout style;
|
||||||
}
|
}
|
||||||
|
|
||||||
.appfooter.headroom--unpinned {
|
.appfooter.headroom--unpinned {
|
||||||
transform: translateY(100%)!important;
|
transform: translateY(100%) !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -168,23 +168,25 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
var savedResult = appSettings.get(htmlMediaAutoplayAppStorageKey);
|
return true;
|
||||||
return "true" === savedResult || "false" !== savedResult && null;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function cueSupported() {
|
function supportsCue() {
|
||||||
try {
|
try {
|
||||||
var video = document.createElement("video");
|
var video = document.createElement("video");
|
||||||
var style = document.createElement("style");
|
var style = document.createElement("style");
|
||||||
|
|
||||||
style.textContent = "video::cue {background: inherit}";
|
style.textContent = "video::cue {background: inherit}";
|
||||||
document.body.appendChild(style);
|
document.body.appendChild(style);
|
||||||
document.body.appendChild(video);
|
document.body.appendChild(video);
|
||||||
|
|
||||||
var cue = window.getComputedStyle(video, "::cue").background;
|
var cue = window.getComputedStyle(video, "::cue").background;
|
||||||
document.body.removeChild(style);
|
document.body.removeChild(style);
|
||||||
document.body.removeChild(video);
|
document.body.removeChild(video);
|
||||||
|
|
||||||
return !!cue.length;
|
return !!cue.length;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log("Error detecting cue support:" + err);
|
console.log("error detecting cue support: " + err);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -204,8 +206,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var htmlMediaAutoplayAppStorageKey = "supportshtmlmediaautoplay0";
|
|
||||||
|
|
||||||
var supportedFeatures = function () {
|
var supportedFeatures = function () {
|
||||||
var features = [];
|
var features = [];
|
||||||
|
|
||||||
|
|
@ -280,7 +280,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
|
||||||
//features.push("multiserver");
|
//features.push("multiserver");
|
||||||
features.push("screensaver");
|
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");
|
features.push("subtitleappearancesettings");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -299,14 +299,48 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
|
||||||
return features;
|
return features;
|
||||||
}();
|
}();
|
||||||
|
|
||||||
if (supportedFeatures.indexOf("htmlvideoautoplay") === -1 && supportsHtmlMediaAutoplay() !== false) {
|
/**
|
||||||
require(["autoPlayDetect"], function (autoPlayDetect) {
|
* Do exit according to platform
|
||||||
autoPlayDetect.supportsHtmlMediaAutoplay().then(function () {
|
*/
|
||||||
appSettings.set(htmlMediaAutoplayAppStorageKey, "true");
|
function doExit() {
|
||||||
supportedFeatures.push("htmlvideoautoplay");
|
try {
|
||||||
supportedFeatures.push("htmlaudioautoplay");
|
if (window.NativeShell) {
|
||||||
}, function () {
|
window.NativeShell.AppHost.exit();
|
||||||
appSettings.set(htmlMediaAutoplayAppStorageKey, "false");
|
} 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");
|
alert("setWindowState is not supported and should not be called");
|
||||||
},
|
},
|
||||||
exit: function () {
|
exit: function () {
|
||||||
if (window.NativeShell) {
|
if (!!window.appMode && browser.tizen) {
|
||||||
window.NativeShell.AppHost.exit();
|
askForExit();
|
||||||
} else if (browser.tizen) {
|
|
||||||
try {
|
|
||||||
tizen.application.getCurrentApplication().exit();
|
|
||||||
} catch (err) {
|
|
||||||
console.log("error closing application: " + err);
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
window.close();
|
doExit();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
supports: function (command) {
|
supports: function (command) {
|
||||||
|
|
@ -395,7 +423,9 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var doc = self.document;
|
var doc = self.document;
|
||||||
|
var isHidden = false;
|
||||||
|
|
||||||
if (doc) {
|
if (doc) {
|
||||||
if (void 0 !== doc.visibilityState) {
|
if (void 0 !== doc.visibilityState) {
|
||||||
|
|
@ -419,8 +449,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var isHidden = false;
|
|
||||||
|
|
||||||
if (doc) {
|
if (doc) {
|
||||||
doc.addEventListener(visibilityChange, function () {
|
doc.addEventListener(visibilityChange, function () {
|
||||||
if (document[visibilityState]) {
|
if (document[visibilityState]) {
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,24 @@
|
||||||
|
button {
|
||||||
|
-webkit-border-fit: border !important;
|
||||||
|
}
|
||||||
|
|
||||||
button::-moz-focus-inner {
|
button::-moz-focus-inner {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
|
||||||
-webkit-border-fit: border !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
border: 0;
|
border: 0;
|
||||||
font-size: inherit !important;
|
font-size: inherit !important;
|
||||||
font-family: inherit !important;
|
font-family: inherit !important;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
background-color: transparent !important;
|
|
||||||
background: none !important;
|
background: none !important;
|
||||||
|
background-color: transparent !important;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: block;
|
display: block;
|
||||||
color: inherit !important;
|
color: inherit !important;
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
contain: layout style;
|
contain: layout style;
|
||||||
|
|
@ -55,17 +55,27 @@ button {
|
||||||
contain: layout style;
|
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%;
|
padding-bottom: 56.25%;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardPadder-square, .cardPadder-mixedSquare, .cardPadder-overflowSquare, .overflowSquareCard-textCardPadder {
|
.cardPadder-square,
|
||||||
|
.cardPadder-mixedSquare,
|
||||||
|
.cardPadder-overflowSquare,
|
||||||
|
.overflowSquareCard-textCardPadder {
|
||||||
padding-bottom: 100%;
|
padding-bottom: 100%;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardPadder-portrait, .cardPadder-mixedPortrait, .cardPadder-overflowPortrait, .overflowPortraitCard-textCardPadder {
|
.cardPadder-portrait,
|
||||||
|
.cardPadder-mixedPortrait,
|
||||||
|
.cardPadder-overflowPortrait,
|
||||||
|
.overflowPortraitCard-textCardPadder {
|
||||||
padding-bottom: 150%;
|
padding-bottom: 150%;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
}
|
}
|
||||||
|
|
@ -80,25 +90,26 @@ button {
|
||||||
margin: 0.6em;
|
margin: 0.6em;
|
||||||
transition: none;
|
transition: none;
|
||||||
border: 0 solid transparent;
|
border: 0 solid transparent;
|
||||||
|
|
||||||
/* These both are needed in case cardBox is a button */
|
/* These both are needed in case cardBox is a button */
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
contain: layout;
|
contain: layout;
|
||||||
contain: style;
|
contain: style;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card.show-animation .cardBox {
|
||||||
|
will-change: transform;
|
||||||
|
transition: transform 200ms ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
.card.show-focus:not(.show-animation) .cardBox {
|
.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.visualCardBox,
|
||||||
.card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
|
.card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
|
||||||
border: .5em solid transparent;
|
border: 0.5em solid transparent;
|
||||||
}
|
|
||||||
|
|
||||||
.card.show-animation .cardBox {
|
|
||||||
will-change: transform;
|
|
||||||
transition: transform 200ms ease-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.show-animation:focus > .cardBox {
|
.card.show-animation:focus > .cardBox {
|
||||||
|
|
@ -123,7 +134,7 @@ button {
|
||||||
|
|
||||||
.btnCardOptions {
|
.btnCardOptions {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: .25em;
|
bottom: 0.25em;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
@ -134,8 +145,8 @@ button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
top: .3em;
|
top: 0.3em;
|
||||||
left: .3em;
|
left: 0.3em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 1.6em;
|
width: 1.6em;
|
||||||
|
|
@ -156,6 +167,7 @@ button {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-clip: content-box !important;
|
background-clip: content-box !important;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
||||||
/* This is only needed for scalable cards */
|
/* This is only needed for scalable cards */
|
||||||
height: 100%;
|
height: 100%;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
|
|
@ -177,13 +189,16 @@ button {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
||||||
/* Needed in case this is a button */
|
/* Needed in case this is a button */
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
/* Needed in case this is a button */
|
/* Needed in case this is a button */
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
|
|
||||||
/* Needed in safari */
|
/* Needed in safari */
|
||||||
height: 100%;
|
height: 100%;
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
}
|
}
|
||||||
|
|
@ -212,10 +227,6 @@ button {
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardImageContainer {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cardImage {
|
.cardImage {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -231,6 +242,7 @@ button {
|
||||||
.cardImage-img {
|
.cardImage-img {
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
||||||
/* This is simply for lazy image purposes, to ensure the image is visible sooner when scrolling */
|
/* This is simply for lazy image purposes, to ensure the image is visible sooner when scrolling */
|
||||||
min-height: 70%;
|
min-height: 70%;
|
||||||
min-width: 70%;
|
min-width: 70%;
|
||||||
|
|
@ -257,17 +269,17 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardFooter {
|
.cardFooter {
|
||||||
padding: .3em .3em .5em .3em;
|
padding: 0.3em 0.3em 0.5em 0.3em;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.visualCardBox {
|
.visualCardBox {
|
||||||
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);
|
||||||
border-radius: .145em;
|
border-radius: 0.145em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.innerCardFooter {
|
.innerCardFooter {
|
||||||
background: rgba(0,0,0,.7);
|
background: rgba(0, 0, 0, 0.7);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -287,7 +299,7 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardText {
|
.cardText {
|
||||||
padding: .06em .5em;
|
padding: 0.06em 0.5em;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -299,7 +311,24 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardText-first {
|
.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 {
|
.cardText > .textActionButton {
|
||||||
|
|
@ -309,7 +338,7 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.innerCardFooter > .cardText {
|
.innerCardFooter > .cardText {
|
||||||
padding: .3em .5em;
|
padding: 0.3em 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardFooter-withlogo {
|
.cardFooter-withlogo {
|
||||||
|
|
@ -341,24 +370,6 @@ button {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.textActionButton {
|
|
||||||
border: 0 !important;
|
|
||||||
background: transparent;
|
|
||||||
border: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
||||||
outline: none !important;
|
|
||||||
color: inherit;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.textActionButton:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cardImageIcon {
|
.cardImageIcon {
|
||||||
font-size: 5em;
|
font-size: 5em;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -366,12 +377,12 @@ button {
|
||||||
|
|
||||||
.cardImageIcon-small {
|
.cardImageIcon-small {
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
margin-bottom: .1em;
|
margin-bottom: 0.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardIndicators {
|
.cardIndicators {
|
||||||
right: .225em;
|
right: 0.225em;
|
||||||
top: .225em;
|
top: 0.225em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -388,16 +399,16 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.programAttributeIndicator {
|
.programAttributeIndicator {
|
||||||
padding: .18em .5em;
|
padding: 0.18em 0.5em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardOverlayButton {
|
.cardOverlayButton {
|
||||||
color: rgba(255, 255, 255, .76);
|
color: rgba(255, 255, 255, 0.76);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding: .75em;
|
padding: 0.75em;
|
||||||
font-size: 88%;
|
font-size: 88%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -408,7 +419,7 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardOverlayButtonIcon {
|
.cardOverlayButtonIcon {
|
||||||
background-color: rgba(0,0,0,.7) !important;
|
background-color: rgba(0, 0, 0, 0.7) !important;
|
||||||
border-radius: 100em;
|
border-radius: 100em;
|
||||||
width: 1.5em !important;
|
width: 1.5em !important;
|
||||||
height: 1.5em !important;
|
height: 1.5em !important;
|
||||||
|
|
@ -430,10 +441,10 @@ button {
|
||||||
height: 2.6em;
|
height: 2.6em;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
background-color: rgba(0,0,0,.5) !important;
|
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||||
border: .06em solid rgba(255,255,255,.6);
|
border: 0.06em solid rgba(255, 255, 255, 0.6);
|
||||||
padding: .38em !important;
|
padding: 0.38em !important;
|
||||||
color: rgba(255, 255, 255, .76);
|
color: rgba(255, 255, 255, 0.76);
|
||||||
transition: transform 200ms ease-out;
|
transition: transform 200ms ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -480,13 +491,15 @@ button {
|
||||||
width: 33.333333333333333333333333333333%;
|
width: 33.333333333333333333333333333333%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.squareCard, .portraitCard {
|
.squareCard,
|
||||||
|
.portraitCard {
|
||||||
width: 33.333333333333333333333333333333%;
|
width: 33.333333333333333333333333333333%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 43.75em) {
|
@media (min-width: 43.75em) {
|
||||||
.squareCard, .portraitCard {
|
.squareCard,
|
||||||
|
.portraitCard {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -502,7 +515,8 @@ button {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.squareCard, .portraitCard {
|
.squareCard,
|
||||||
|
.portraitCard {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -522,7 +536,8 @@ button {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.squareCard, .portraitCard {
|
.squareCard,
|
||||||
|
.portraitCard {
|
||||||
width: 16.666666666666666666666666666667%;
|
width: 16.666666666666666666666666666667%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -535,9 +550,9 @@ button {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media (min-width: 87.5em) {
|
@media (min-width: 87.5em) {
|
||||||
.squareCard, .portraitCard {
|
.squareCard,
|
||||||
|
.portraitCard {
|
||||||
width: 14.285714285714285714285714285714%;
|
width: 14.285714285714285714285714285714%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -555,13 +570,15 @@ button {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.squareCard, .portraitCard {
|
.squareCard,
|
||||||
|
.portraitCard {
|
||||||
width: 12.5%;
|
width: 12.5%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 120em) {
|
@media (min-width: 120em) {
|
||||||
.squareCard, .portraitCard {
|
.squareCard,
|
||||||
|
.portraitCard {
|
||||||
width: 11.111111111111111111111111111111%;
|
width: 11.111111111111111111111111111111%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -571,7 +588,8 @@ button {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.squareCard, .portraitCard {
|
.squareCard,
|
||||||
|
.portraitCard {
|
||||||
width: 10%;
|
width: 10%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -602,7 +620,8 @@ button {
|
||||||
width: 72vw;
|
width: 72vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowSquareCard,
|
||||||
|
.overflowPortraitCard {
|
||||||
width: 40vw;
|
width: 40vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -627,29 +646,34 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 43.75em) {
|
@media (min-width: 43.75em) {
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowSquareCard,
|
||||||
|
.overflowPortraitCard {
|
||||||
width: 23.1vw;
|
width: 23.1vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 48.125em) {
|
@media (min-width: 48.125em) {
|
||||||
.overflowBackdropCard, .overflowSmallBackdropCard {
|
.overflowBackdropCard,
|
||||||
|
.overflowSmallBackdropCard {
|
||||||
width: 30vw;
|
width: 30vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (orientation: landscape) {
|
@media (orientation: landscape) {
|
||||||
.overflowBackdropCard, .overflowSmallBackdropCard {
|
.overflowBackdropCard,
|
||||||
|
.overflowSmallBackdropCard {
|
||||||
width: 30vw;
|
width: 30vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowSquareCard,
|
||||||
|
.overflowPortraitCard {
|
||||||
width: 23.1vw;
|
width: 23.1vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (orientation: landscape) and (min-width: 48.125em) {
|
@media (orientation: landscape) and (min-width: 48.125em) {
|
||||||
.overflowBackdropCard, .overflowSmallBackdropCard {
|
.overflowBackdropCard,
|
||||||
|
.overflowSmallBackdropCard {
|
||||||
width: 23.1vw;
|
width: 23.1vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -661,55 +685,60 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 50em) {
|
@media (min-width: 50em) {
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowSquareCard,
|
||||||
|
.overflowPortraitCard {
|
||||||
width: 18.5vw;
|
width: 18.5vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 75em) {
|
@media (min-width: 75em) {
|
||||||
.overflowBackdropCard, .overflowSmallBackdropCard {
|
.overflowBackdropCard,
|
||||||
|
.overflowSmallBackdropCard {
|
||||||
width: 23.1vw;
|
width: 23.1vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowSquareCard,
|
||||||
|
.overflowPortraitCard {
|
||||||
width: 15.5vw;
|
width: 15.5vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 87.5em) {
|
@media (min-width: 87.5em) {
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowSquareCard,
|
||||||
|
.overflowPortraitCard {
|
||||||
width: 13.3vw;
|
width: 13.3vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 100em) {
|
@media (min-width: 100em) {
|
||||||
|
.overflowBackdropCard,
|
||||||
.overflowBackdropCard, .overflowSmallBackdropCard {
|
.overflowSmallBackdropCard {
|
||||||
width: 18.7vw;
|
width: 18.7vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowSquareCard,
|
||||||
|
.overflowPortraitCard {
|
||||||
width: 11.6vw;
|
width: 11.6vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 120em) {
|
@media (min-width: 120em) {
|
||||||
|
.overflowSquareCard,
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowPortraitCard {
|
||||||
width: 10.3vw;
|
width: 10.3vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 131.25em) {
|
@media (min-width: 131.25em) {
|
||||||
|
.overflowSquareCard,
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowPortraitCard {
|
||||||
width: 9.3vw;
|
width: 9.3vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 156.25em) {
|
@media (min-width: 156.25em) {
|
||||||
|
.overflowBackdropCard,
|
||||||
.overflowBackdropCard, .overflowSmallBackdropCard {
|
.overflowSmallBackdropCard {
|
||||||
width: 15.6vw;
|
width: 15.6vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -726,7 +755,8 @@ button {
|
||||||
padding-bottom: 87.75%;
|
padding-bottom: 87.75%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemsContainer-tv > .overflowSquareCard, .itemsContainer-tv > .overflowPortraitCard {
|
.itemsContainer-tv > .overflowSquareCard,
|
||||||
|
.itemsContainer-tv > .overflowPortraitCard {
|
||||||
width: 15.6vw;
|
width: 15.6vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -735,9 +765,9 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardOverlayContainer {
|
.cardOverlayContainer {
|
||||||
background: rgba(0,0,0,0.5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity .2s;
|
transition: opacity 0.2s;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -766,7 +796,7 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardOverlayFab-primary {
|
.cardOverlayFab-primary {
|
||||||
background-color: rgba(0,0,0,0.7);
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
font-size: 130%;
|
font-size: 130%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 3em;
|
width: 3em;
|
||||||
|
|
|
||||||
|
|
@ -758,7 +758,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
||||||
if (isOuterFooter && options.cardLayout && layoutManager.mobile) {
|
if (isOuterFooter && options.cardLayout && layoutManager.mobile) {
|
||||||
|
|
||||||
if (options.cardFooterAside !== 'none') {
|
if (options.cardFooterAside !== 'none') {
|
||||||
html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><i class="md-icon">more_horiz</i></button>';
|
html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><i class="material-icons">more_horiz</i></button>';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1018,7 +1018,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
||||||
return text;
|
return text;
|
||||||
}
|
}
|
||||||
|
|
||||||
var html = '<button ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' type="button" class="itemAction textActionButton" data-action="link">';
|
var html = '<button ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' type="button" class="itemAction textActionButton" title="' + text + '" data-action="link">';
|
||||||
html += text;
|
html += text;
|
||||||
html += '</button>';
|
html += '</button>';
|
||||||
|
|
||||||
|
|
@ -1316,15 +1316,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
||||||
var btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction';
|
var btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction';
|
||||||
|
|
||||||
if (options.centerPlayButton) {
|
if (options.centerPlayButton) {
|
||||||
overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="md-icon cardOverlayButtonIcon">play_arrow</i></button>';
|
overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayButton-centered" data-action="play"><i class="material-icons cardOverlayButtonIcon">play_arrow</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType !== 'Virtual' || !item.MediaType || item.Type === 'Program') && item.Type !== 'Person') {
|
if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType !== 'Virtual' || !item.MediaType || item.Type === 'Program') && item.Type !== 'Person') {
|
||||||
overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><i class="md-icon cardOverlayButtonIcon">play_arrow</i></button>';
|
overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="play"><i class="material-icons cardOverlayButtonIcon">play_arrow</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.overlayMoreButton) {
|
if (options.overlayMoreButton) {
|
||||||
overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon">more_horiz</i></button>';
|
overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="material-icons cardOverlayButtonIcon">more_horiz</i></button>';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1457,7 +1457,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
||||||
var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
|
var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
|
||||||
|
|
||||||
if (playbackManager.canPlay(item)) {
|
if (playbackManager.canPlay(item)) {
|
||||||
html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">play_arrow</i></button>';
|
html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">play_arrow</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '<div class="cardOverlayButton-br">';
|
html += '<div class="cardOverlayButton-br">';
|
||||||
|
|
@ -1466,7 +1466,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
||||||
|
|
||||||
if (itemHelper.canMarkPlayed(item)) {
|
if (itemHelper.canMarkPlayed(item)) {
|
||||||
require(['emby-playstatebutton']);
|
require(['emby-playstatebutton']);
|
||||||
html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">check</i></button>';
|
html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">check</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (itemHelper.canRate(item)) {
|
if (itemHelper.canRate(item)) {
|
||||||
|
|
@ -1474,10 +1474,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
||||||
var likes = userData.Likes == null ? '' : userData.Likes;
|
var likes = userData.Likes == null ? '' : userData.Likes;
|
||||||
|
|
||||||
require(['emby-ratingbutton']);
|
require(['emby-ratingbutton']);
|
||||||
html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">favorite</i></button>';
|
html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">favorite</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">more_horiz</i></button>';
|
html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover">more_horiz</i></button>';
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
@ -1487,16 +1487,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
||||||
|
|
||||||
function getCardDefaultText(item, options) {
|
function getCardDefaultText(item, options) {
|
||||||
if (item.CollectionType) {
|
if (item.CollectionType) {
|
||||||
return '<i class="cardImageIcon md-icon">' + imageHelper.getLibraryIcon(item.CollectionType) + '</i>'
|
return '<i class="cardImageIcon material-icons">' + imageHelper.getLibraryIcon(item.CollectionType) + '</i>'
|
||||||
}
|
}
|
||||||
if (item.Type === 'MusicAlbum') {
|
if (item.Type === 'MusicAlbum') {
|
||||||
return '<i class="cardImageIcon md-icon">album</i>';
|
return '<i class="cardImageIcon material-icons">album</i>';
|
||||||
}
|
}
|
||||||
if (item.Type === 'MusicArtist' || item.Type === 'Person') {
|
if (item.Type === 'MusicArtist' || item.Type === 'Person') {
|
||||||
return '<i class="cardImageIcon md-icon">person</i>';
|
return '<i class="cardImageIcon material-icons">person</i>';
|
||||||
}
|
}
|
||||||
if (options.defaultCardImageIcon) {
|
if (options.defaultCardImageIcon) {
|
||||||
return '<i class="cardImageIcon md-icon">' + options.defaultCardImageIcon + '</i>';
|
return '<i class="cardImageIcon material-icons">' + options.defaultCardImageIcon + '</i>';
|
||||||
}
|
}
|
||||||
|
|
||||||
var defaultName = isUsingLiveTvNaming(item) ? item.Name : itemHelper.getDisplayName(item);
|
var defaultName = isUsingLiveTvNaming(item) ? item.Name : itemHelper.getDisplayName(item);
|
||||||
|
|
@ -1585,7 +1585,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
||||||
indicatorsElem = ensureIndicators(card, indicatorsElem);
|
indicatorsElem = ensureIndicators(card, indicatorsElem);
|
||||||
indicatorsElem.appendChild(playedIndicator);
|
indicatorsElem.appendChild(playedIndicator);
|
||||||
}
|
}
|
||||||
playedIndicator.innerHTML = '<i class="md-icon indicatorIcon">check</i>';
|
playedIndicator.innerHTML = '<i class="material-icons indicatorIcon">check</i>';
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
playedIndicator = card.querySelector('.playedIndicator');
|
playedIndicator = card.querySelector('.playedIndicator');
|
||||||
|
|
@ -1666,7 +1666,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
||||||
var icon = cell.querySelector('.timerIndicator');
|
var icon = cell.querySelector('.timerIndicator');
|
||||||
if (!icon) {
|
if (!icon) {
|
||||||
var indicatorsElem = ensureIndicators(cell);
|
var indicatorsElem = ensureIndicators(cell);
|
||||||
indicatorsElem.insertAdjacentHTML('beforeend', '<i class="md-icon timerIndicator indicatorIcon">fiber_manual_record</i>');
|
indicatorsElem.insertAdjacentHTML('beforeend', '<i class="material-icons timerIndicator indicatorIcon">fiber_manual_record</i>');
|
||||||
}
|
}
|
||||||
cell.setAttribute('data-timerid', newTimerId);
|
cell.setAttribute('data-timerid', newTimerId);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -90,7 +90,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
|
||||||
var cardImageContainer = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
|
var cardImageContainer = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
|
||||||
|
|
||||||
if (!imgUrl) {
|
if (!imgUrl) {
|
||||||
cardImageContainer += '<i class="md-icon cardImageIcon">local_movies</i>';
|
cardImageContainer += '<i class="material-icons cardImageIcon">local_movies</i>';
|
||||||
}
|
}
|
||||||
|
|
||||||
var nameHtml = '';
|
var nameHtml = '';
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee
|
||||||
function getTunerChannelHtml(channel, providerName) {
|
function getTunerChannelHtml(channel, providerName) {
|
||||||
var html = "";
|
var html = "";
|
||||||
html += '<div class="listItem">';
|
html += '<div class="listItem">';
|
||||||
html += '<i class="md-icon listItemIcon">dvr</i>';
|
html += '<i class="material-icons listItemIcon">dvr</i>';
|
||||||
html += '<div class="listItemBody two-line">';
|
html += '<div class="listItemBody two-line">';
|
||||||
html += '<h3 class="listItemBodyText">';
|
html += '<h3 class="listItemBodyText">';
|
||||||
html += channel.Name;
|
html += channel.Name;
|
||||||
|
|
@ -84,7 +84,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee
|
||||||
|
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
html += '<button class="btnMap autoSize" is="paper-icon-button-light" type="button" data-id="' + channel.Id + '" data-providerid="' + channel.ProviderChannelId + '"><i class="md-icon">mode_edit</i></button>';
|
html += '<button class="btnMap autoSize" is="paper-icon-button-light" type="button" data-id="' + channel.Id + '" data-providerid="' + channel.ProviderChannelId + '"><i class="material-icons">mode_edit</i></button>';
|
||||||
return html += "</div>";
|
return html += "</div>";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -127,7 +127,7 @@ define(["dialogHelper", "loading", "connectionManager", "globalize", "actionshee
|
||||||
var html = "";
|
var html = "";
|
||||||
var title = globalize.translate("MapChannels");
|
var title = globalize.translate("MapChannels");
|
||||||
html += '<div class="formDialogHeader">';
|
html += '<div class="formDialogHeader">';
|
||||||
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
|
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>';
|
||||||
html += '<h3 class="formDialogHeaderTitle">';
|
html += '<h3 class="formDialogHeaderTitle">';
|
||||||
html += title;
|
html += title;
|
||||||
html += "</h3>";
|
html += "</h3>";
|
||||||
|
|
|
||||||
|
|
@ -243,13 +243,13 @@ define(['dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManage
|
||||||
var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection');
|
var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection');
|
||||||
|
|
||||||
html += '<div class="formDialogHeader">';
|
html += '<div class="formDialogHeader">';
|
||||||
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
|
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>';
|
||||||
html += '<h3 class="formDialogHeaderTitle">';
|
html += '<h3 class="formDialogHeaderTitle">';
|
||||||
html += title;
|
html += title;
|
||||||
html += '</h3>';
|
html += '</h3>';
|
||||||
|
|
||||||
if (appHost.supports('externallinks')) {
|
if (appHost.supports('externallinks')) {
|
||||||
html += '<a is="emby-linkbutton" class="button-link btnHelp flex align-items-center" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="' + globalize.translate('Help') + '"><i class="md-icon">info</i><span style="margin-left:.25em;">' + globalize.translate('Help') + '</span></a>';
|
html += '<a is="emby-linkbutton" class="button-link btnHelp flex align-items-center" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="' + globalize.translate('Help') + '"><i class="material-icons">info</i><span style="margin-left:.25em;">' + globalize.translate('Help') + '</span></a>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
|
||||||
|
|
@ -15,11 +15,12 @@
|
||||||
|
|
||||||
.dialog {
|
.dialog {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-radius: .2em;
|
border-radius: 0.2em;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
will-change: transform, opacity;
|
will-change: transform, opacity;
|
||||||
|
|
||||||
/* Strict does not work well with actionsheet */
|
/* Strict does not work well with actionsheet */
|
||||||
contain: style paint;
|
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);
|
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);
|
||||||
|
|
@ -51,13 +52,13 @@
|
||||||
|
|
||||||
to {
|
to {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(.5);
|
transform: scale(0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes scaleup {
|
@keyframes scaleup {
|
||||||
from {
|
from {
|
||||||
transform: scale(.5);
|
transform: scale(0.5);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -78,7 +79,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeout {
|
@keyframes fadeout {
|
||||||
|
|
||||||
from {
|
from {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -101,7 +101,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slidedown {
|
@keyframes slidedown {
|
||||||
|
|
||||||
from {
|
from {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: none;
|
transform: none;
|
||||||
|
|
@ -114,8 +113,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 80em), all and (max-height: 45em) {
|
@media all and (max-width: 80em), all and (max-height: 45em) {
|
||||||
|
.dialog-fixedSize,
|
||||||
.dialog-fixedSize, .dialog-fullscreen-lowres {
|
.dialog-fullscreen-lowres {
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
top: 0 !important;
|
top: 0 !important;
|
||||||
bottom: 0 !important;
|
bottom: 0 !important;
|
||||||
|
|
@ -127,7 +126,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 80em) and (min-height: 45em) {
|
@media all and (min-width: 80em) and (min-height: 45em) {
|
||||||
|
|
||||||
.dialog-medium {
|
.dialog-medium {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
height: 80%;
|
height: 80%;
|
||||||
|
|
@ -169,5 +167,5 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialogBackdropOpened {
|
.dialogBackdropOpened {
|
||||||
opacity: .5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
#ulDirectoryPickerList a {
|
#ulDirectoryPickerList a {
|
||||||
padding-top: .4em;
|
padding-top: 0.4em;
|
||||||
padding-bottom: .4em
|
padding-bottom: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lblDirectoryPickerPath {
|
.lblDirectoryPickerPath {
|
||||||
white-space: nowrap
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -76,7 +76,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
|
||||||
html += name;
|
html += name;
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
html += '<i class="md-icon" style="font-size:inherit;">arrow_forward</i>';
|
html += '<i class="material-icons" style="font-size:inherit;">arrow_forward</i>';
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
return html;
|
return html;
|
||||||
}
|
}
|
||||||
|
|
@ -116,7 +116,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
|
||||||
html += '<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ' + readOnlyAttribute + ' label="' + Globalize.translate(labelKey) + '"/>';
|
html += '<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ' + readOnlyAttribute + ' label="' + Globalize.translate(labelKey) + '"/>';
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
if (!readOnlyAttribute) {
|
if (!readOnlyAttribute) {
|
||||||
html += '<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="' + Globalize.translate("ButtonRefresh") + '"><i class="md-icon">search</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="' + Globalize.translate("ButtonRefresh") + '"><i class="material-icons">search</i></button>';
|
||||||
}
|
}
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
if (!readOnlyAttribute) {
|
if (!readOnlyAttribute) {
|
||||||
|
|
@ -265,7 +265,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
|
||||||
|
|
||||||
var html = "";
|
var html = "";
|
||||||
html += '<div class="formDialogHeader">';
|
html += '<div class="formDialogHeader">';
|
||||||
html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
|
html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>';
|
||||||
html += '<h3 class="formDialogHeaderTitle">';
|
html += '<h3 class="formDialogHeaderTitle">';
|
||||||
html += options.header || Globalize.translate("HeaderSelectPath");
|
html += options.header || Globalize.translate("HeaderSelectPath");
|
||||||
html += "</h3>";
|
html += "</h3>";
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,11 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width:104px;
|
min-width: 104px;
|
||||||
min-height:24px;
|
min-height: 24px;
|
||||||
padding-top: 1.25em;
|
padding-top: 1.25em;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
color: #ffffff;
|
color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
|
||||||
var icon = direction === 'left' ? 'chevron_left' : 'chevron_right';
|
var icon = direction === 'left' ? 'chevron_left' : 'chevron_right';
|
||||||
|
|
||||||
html += '<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="' + direction + '" class="emby-scrollbuttons-button">';
|
html += '<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="' + direction + '" class="emby-scrollbuttons-button">';
|
||||||
html += '<i class="md-icon">' + icon + '</i>';
|
html += '<i class="material-icons">' + icon + '</i>';
|
||||||
html += '</button>';
|
html += '</button>';
|
||||||
|
|
||||||
return html;
|
return html;
|
||||||
|
|
|
||||||
|
|
@ -136,7 +136,7 @@ define(["loading", "libraryBrowser", "cardBuilder", "dom", "apphost", "imageLoad
|
||||||
html += '<h2 class="sectionTitle sectionTitle-cards">';
|
html += '<h2 class="sectionTitle sectionTitle-cards">';
|
||||||
html += globalize.translate(section.name);
|
html += globalize.translate(section.name);
|
||||||
html += "</h2>";
|
html += "</h2>";
|
||||||
html += '<i class="md-icon">chevron_right</i>';
|
html += '<i class="material-icons">chevron_right</i>';
|
||||||
html += "</a>";
|
html += "</a>";
|
||||||
} else {
|
} else {
|
||||||
html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + "</h2>";
|
html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + "</h2>";
|
||||||
|
|
|
||||||
|
|
@ -8,29 +8,29 @@
|
||||||
-webkit-border-radius: 0 !important;
|
-webkit-border-radius: 0 !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
max-height: none !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 {
|
.dynamicFilterDialog {
|
||||||
top: 10% !important;
|
top: 10% !important;
|
||||||
bottom: 25% !important
|
bottom: 25% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:400px) {
|
@media all and (max-width: 400px) {
|
||||||
.dynamicFilterDialog {
|
.dynamicFilterDialog {
|
||||||
width: auto;
|
width: auto;
|
||||||
left: 10vw !important;
|
left: 10vw !important;
|
||||||
right: 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 {
|
.dynamicFilterDialog {
|
||||||
width: 20.16em;
|
width: 20.16em;
|
||||||
margin-left: -10.08em !important;
|
margin-left: -10.08em !important;
|
||||||
left: 50% !important
|
left: 50% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -279,7 +279,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
html += '<div class="formDialogHeader">';
|
html += '<div class="formDialogHeader">';
|
||||||
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
|
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><i class="material-icons">arrow_back</i></button>';
|
||||||
html += '<h3 class="formDialogHeaderTitle">${Filters}</h3>';
|
html += '<h3 class="formDialogHeaderTitle">${Filters}</h3>';
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
|
||||||
|
|
@ -5,14 +5,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.formDialogHeader {
|
.formDialogHeader {
|
||||||
padding: 1em .5em;
|
padding: 1em 0.5em;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formDialogHeaderTitle {
|
.formDialogHeaderTitle {
|
||||||
margin-left: .25em;
|
margin-left: 0.25em;
|
||||||
|
|
||||||
/* In case of h1, h2, h3 */
|
/* In case of h1, h2, h3 */
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -23,7 +24,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialogContentInner {
|
.dialogContentInner {
|
||||||
padding: .5em 1em 20em 1em;
|
padding: 0.5em 1em 20em 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialogContentInner-mini {
|
.dialogContentInner-mini {
|
||||||
|
|
@ -46,6 +47,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 1.25em 1em;
|
padding: 1.25em 1em;
|
||||||
|
|
||||||
/* Without this emby-checkbox is able to appear on top */
|
/* Without this emby-checkbox is able to appear on top */
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -62,11 +64,11 @@
|
||||||
padding-bottom: 1.5em;
|
padding-bottom: 1.5em;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 80% !important;
|
width: 80% !important;
|
||||||
padding-top: .5em;
|
padding-top: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formDialogFooterItem {
|
.formDialogFooterItem {
|
||||||
margin: .5em !important;
|
margin: 0.5em !important;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
|
|
@ -91,7 +93,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 50em) {
|
@media all and (min-width: 50em) {
|
||||||
|
|
||||||
.formDialogFooterItem {
|
.formDialogFooterItem {
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
}
|
}
|
||||||
|
|
@ -103,7 +104,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 80em) {
|
@media all and (min-width: 80em) {
|
||||||
|
|
||||||
.formDialogFooterItem {
|
.formDialogFooterItem {
|
||||||
max-width: 70%;
|
max-width: 70%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="formDialogHeader">
|
<div class="formDialogHeader">
|
||||||
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
|
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
|
||||||
<h3 class="formDialogHeaderTitle">
|
<h3 class="formDialogHeaderTitle">
|
||||||
${Settings}
|
${Settings}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
|
||||||
|
|
@ -14,12 +14,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-desktop .tvGuideHeader {
|
.layout-desktop .tvGuideHeader {
|
||||||
margin-bottom: .5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guideHeaderDateSelection {
|
.guideHeaderDateSelection {
|
||||||
font-size: 86%;
|
font-size: 86%;
|
||||||
padding: .4em 0;
|
padding: 0.4em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-headerTimeslots {
|
.guide-headerTimeslots {
|
||||||
|
|
@ -39,10 +39,10 @@
|
||||||
|
|
||||||
.guideProgramIndicator {
|
.guideProgramIndicator {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
border-radius: .25em;
|
border-radius: 0.25em;
|
||||||
margin-right: .5em;
|
margin-right: 0.5em;
|
||||||
font-size: 82%;
|
font-size: 82%;
|
||||||
padding: .2em .25em;
|
padding: 0.2em 0.25em;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -51,6 +51,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-channelTimeslotHeader {
|
.guide-channelTimeslotHeader {
|
||||||
|
border: 0 !important;
|
||||||
|
border-right-color: transparent;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
@ -69,9 +71,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelPrograms {
|
.channelPrograms {
|
||||||
|
height: 4.42em;
|
||||||
|
contain: strict;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px 0 1px 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
position: relative;
|
position: relative;
|
||||||
contain: strict;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -80,31 +87,32 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.guideSpacer {
|
.guideSpacer {
|
||||||
width: .3em;
|
width: 0.3em;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelPrograms, .timeslotHeadersInner {
|
.channelPrograms,
|
||||||
|
.timeslotHeadersInner {
|
||||||
width: 1800vw;
|
width: 1800vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 37.5em) {
|
@media all and (min-width: 37.5em) {
|
||||||
|
.channelPrograms,
|
||||||
.channelPrograms, .timeslotHeadersInner {
|
.timeslotHeadersInner {
|
||||||
width: 1400vw;
|
width: 1400vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 50em) {
|
@media all and (min-width: 50em) {
|
||||||
|
.channelPrograms,
|
||||||
.channelPrograms, .timeslotHeadersInner {
|
.timeslotHeadersInner {
|
||||||
width: 1200vw;
|
width: 1200vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 80em) {
|
@media all and (min-width: 80em) {
|
||||||
|
.channelPrograms,
|
||||||
.channelPrograms, .timeslotHeadersInner {
|
.timeslotHeadersInner {
|
||||||
width: 810vw;
|
width: 810vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -112,11 +120,17 @@
|
||||||
.timeslotHeader {
|
.timeslotHeader {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-indent: .25em;
|
text-indent: 0.25em;
|
||||||
width: 2.0833333333333333333333333333333%;
|
width: 2.0833333333333333333333333333333%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-channelHeaderCell, .guide-channelTimeslotHeader {
|
.programCell,
|
||||||
|
.guide-channelHeaderCell {
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-channelHeaderCell,
|
||||||
|
.guide-channelTimeslotHeader {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
|
|
@ -130,11 +144,12 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
/* Needed in firefox */
|
/* Needed in firefox */
|
||||||
text-align: left;
|
text-align: left;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
border-radius: .12em;
|
border-radius: 0.12em;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -148,37 +163,38 @@
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-channelTimeslotHeader {
|
|
||||||
border: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Important - have to put the fixed width on channelsContainer, not the individual channelHeaderCell
|
/* 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.
|
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;
|
width: 24vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:31.25em) {
|
@media all and (min-width: 31.25em) {
|
||||||
.channelsContainer, .guide-channelTimeslotHeader {
|
.channelsContainer,
|
||||||
|
.guide-channelTimeslotHeader {
|
||||||
width: 16vw;
|
width: 16vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:37.5em) {
|
@media all and (min-width: 37.5em) {
|
||||||
.channelsContainer, .guide-channelTimeslotHeader {
|
.channelsContainer,
|
||||||
|
.guide-channelTimeslotHeader {
|
||||||
width: 16vw;
|
width: 16vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:50em) {
|
@media all and (min-width: 50em) {
|
||||||
.channelsContainer, .guide-channelTimeslotHeader {
|
.channelsContainer,
|
||||||
|
.guide-channelTimeslotHeader {
|
||||||
width: 14vw;
|
width: 14vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:80em) {
|
@media all and (min-width: 80em) {
|
||||||
.channelsContainer, .guide-channelTimeslotHeader {
|
.channelsContainer,
|
||||||
|
.guide-channelTimeslotHeader {
|
||||||
width: 12vw;
|
width: 12vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -197,34 +213,26 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 50em) {
|
@media all and (max-width: 50em) {
|
||||||
|
.newTvProgram,
|
||||||
.newTvProgram, .liveTvProgram, .premiereTvProgram, .guideHdIcon {
|
.liveTvProgram,
|
||||||
|
.premiereTvProgram,
|
||||||
|
.guideHdIcon {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelPrograms {
|
.channelPrograms + .channelPrograms,
|
||||||
height: 4.42em;
|
.guide-channelHeaderCell + .guide-channelHeaderCell {
|
||||||
contain: strict;
|
margin-top: -1px;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 1px 0 1px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelPrograms + .channelPrograms, .guide-channelHeaderCell + .guide-channelHeaderCell {
|
.channelPrograms-tv,
|
||||||
margin-top: -1px;
|
.guide-channelHeaderCell-tv {
|
||||||
}
|
|
||||||
|
|
||||||
.channelPrograms-tv, .guide-channelHeaderCell-tv {
|
|
||||||
height: 3em;
|
height: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-channelTimeslotHeader {
|
.guide-channelTimeslotHeader,
|
||||||
border-right-color: transparent;
|
.timeslotHeader {
|
||||||
}
|
|
||||||
|
|
||||||
.guide-channelTimeslotHeader, .timeslotHeader {
|
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
height: 2.8em;
|
height: 2.8em;
|
||||||
}
|
}
|
||||||
|
|
@ -253,6 +261,7 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
/* Needed for Firefox */
|
/* Needed for Firefox */
|
||||||
text-align: left;
|
text-align: left;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
|
|
@ -261,7 +270,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.guideProgramName {
|
.guideProgramName {
|
||||||
padding: 0 .7em 0;
|
padding: 0 0.7em 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -269,7 +278,8 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
contain: layout style paint;
|
contain: layout style paint;
|
||||||
/*transition: transform 60ms ease-out;*/
|
|
||||||
|
/* transition: transform 60ms ease-out; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-programNameCaret {
|
.guide-programNameCaret {
|
||||||
|
|
@ -289,11 +299,11 @@
|
||||||
.guideProgramSecondaryInfo {
|
.guideProgramSecondaryInfo {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: .1em;
|
margin-top: 0.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programIcon {
|
.programIcon {
|
||||||
margin-left: .5em;
|
margin-left: 0.5em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
|
|
@ -304,16 +314,16 @@
|
||||||
|
|
||||||
.guide-programTextIcon {
|
.guide-programTextIcon {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: .9em;
|
font-size: 0.9em;
|
||||||
padding: .16em .3em;
|
padding: 0.16em 0.3em;
|
||||||
border-radius: .25em;
|
border-radius: 0.25em;
|
||||||
margin-right: .35em;
|
margin-right: 0.35em;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-programTextIcon-tv {
|
.guide-programTextIcon-tv {
|
||||||
font-size: .74em;
|
font-size: 0.74em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guideChannelNumber {
|
.guideChannelNumber {
|
||||||
|
|
@ -345,14 +355,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 62.5em) {
|
@media all and (min-width: 62.5em) {
|
||||||
|
|
||||||
.guideChannelName {
|
.guideChannelName {
|
||||||
max-width: 40%;
|
max-width: 40%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 62.5em) {
|
@media all and (max-width: 62.5em) {
|
||||||
|
|
||||||
.guideChannelNumber {
|
.guideChannelNumber {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -368,21 +376,19 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelsContainer, .programGrid {
|
.channelsContainer,
|
||||||
|
.programGrid {
|
||||||
contain: layout style paint;
|
contain: layout style paint;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell, .guide-channelHeaderCell {
|
.timerIcon,
|
||||||
outline: none !important;
|
.seriesTimerIcon {
|
||||||
}
|
color: #c33 !important;
|
||||||
|
|
||||||
.timerIcon, .seriesTimerIcon {
|
|
||||||
color: #cc3333 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.seriesTimerIcon-inactive {
|
.seriesTimerIcon-inactive {
|
||||||
color: inherit !important;
|
color: inherit !important;
|
||||||
opacity: .7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guideOptions {
|
.guideOptions {
|
||||||
|
|
@ -392,7 +398,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 50em), all and (max-height: 37.5em) {
|
@media all and (max-width: 50em), all and (max-height: 37.5em) {
|
||||||
|
|
||||||
.tvGuideHeader {
|
.tvGuideHeader {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -415,16 +420,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button {
|
.guide-date-tab-button {
|
||||||
padding: .3em .7em !important;
|
padding: 0.3em 0.7em !important;
|
||||||
margin: 0 .3em !important;
|
margin: 0 0.3em !important;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button.emby-tab-button-active {
|
.guide-date-tab-button.emby-tab-button-active {
|
||||||
border-color: transparent !important;
|
border-color: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button.show-focus:focus {
|
.guide-date-tab-button.show-focus:focus {
|
||||||
border-radius: .15em !important;
|
border-radius: 0.15em !important;
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -416,7 +416,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
|
||||||
var status;
|
var status;
|
||||||
|
|
||||||
if (item.Type === 'SeriesTimer') {
|
if (item.Type === 'SeriesTimer') {
|
||||||
return '<i class="md-icon programIcon seriesTimerIcon">fiber_smart_record</i>';
|
return '<i class="material-icons programIcon seriesTimerIcon">fiber_smart_record</i>';
|
||||||
} else if (item.TimerId || item.SeriesTimerId) {
|
} else if (item.TimerId || item.SeriesTimerId) {
|
||||||
|
|
||||||
status = item.Status || 'Cancelled';
|
status = item.Status || 'Cancelled';
|
||||||
|
|
@ -430,13 +430,13 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
|
||||||
if (item.SeriesTimerId) {
|
if (item.SeriesTimerId) {
|
||||||
|
|
||||||
if (status !== 'Cancelled') {
|
if (status !== 'Cancelled') {
|
||||||
return '<i class="md-icon programIcon seriesTimerIcon">fiber_smart_record</i>';
|
return '<i class="material-icons programIcon seriesTimerIcon">fiber_smart_record</i>';
|
||||||
}
|
}
|
||||||
|
|
||||||
return '<i class="md-icon programIcon seriesTimerIcon seriesTimerIcon-inactive">fiber_smart_record</i>';
|
return '<i class="material-icons programIcon seriesTimerIcon seriesTimerIcon-inactive">fiber_smart_record</i>';
|
||||||
}
|
}
|
||||||
|
|
||||||
return '<i class="md-icon programIcon timerIcon">fiber_manual_record</i>';
|
return '<i class="material-icons programIcon timerIcon">fiber_manual_record</i>';
|
||||||
}
|
}
|
||||||
|
|
||||||
function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) {
|
function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) {
|
||||||
|
|
@ -550,7 +550,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
|
||||||
|
|
||||||
html += '<div class="' + guideProgramNameClass + '">';
|
html += '<div class="' + guideProgramNameClass + '">';
|
||||||
|
|
||||||
html += '<div class="guide-programNameCaret hide"><i class="guideProgramNameCaretIcon md-icon">keyboard_arrow_left</i></div>';
|
html += '<div class="guide-programNameCaret hide"><i class="guideProgramNameCaretIcon material-icons">keyboard_arrow_left</i></div>';
|
||||||
|
|
||||||
html += '<div class="guideProgramNameText">' + program.Name;
|
html += '<div class="guideProgramNameText">' + program.Name;
|
||||||
|
|
||||||
|
|
@ -578,7 +578,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
if (program.IsHD && options.showHdIcon) {
|
if (program.IsHD && options.showHdIcon) {
|
||||||
//html += '<i class="guideHdIcon md-icon programIcon">hd</i>';
|
//html += '<i class="guideHdIcon material-icons programIcon">hd</i>';
|
||||||
if (layoutManager.tv) {
|
if (layoutManager.tv) {
|
||||||
html += '<div class="programIcon guide-programTextIcon guide-programTextIcon-tv">HD</div>';
|
html += '<div class="programIcon guide-programTextIcon guide-programTextIcon-tv">HD</div>';
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -1106,7 +1106,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
|
||||||
|
|
||||||
var icon = cell.querySelector('.timerIcon');
|
var icon = cell.querySelector('.timerIcon');
|
||||||
if (!icon) {
|
if (!icon) {
|
||||||
cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<i class="timerIcon md-icon programIcon">fiber_manual_record</i>');
|
cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<i class="timerIcon material-icons programIcon">fiber_manual_record</i>');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (newTimerId) {
|
if (newTimerId) {
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
.newTvProgram {
|
.newTvProgram {
|
||||||
background: #3388cc;
|
background: #38c;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.liveTvProgram {
|
.liveTvProgram {
|
||||||
background: #cc3333;
|
background: #c33;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.premiereTvProgram {
|
.premiereTvProgram {
|
||||||
background: #EF6C00;
|
background: #ef6c00;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
<div class="guide-headerTimeslots">
|
<div class="guide-headerTimeslots">
|
||||||
<div class="guide-channelTimeslotHeader">
|
<div class="guide-channelTimeslotHeader">
|
||||||
<button is="paper-icon-button-light" type="button" class="btnGuideViewSettings">
|
<button is="paper-icon-button-light" type="button" class="btnGuideViewSettings">
|
||||||
<i class="md-icon btnGuideViewSettingsIcon">more_horiz</i>
|
<i class="material-icons btnGuideViewSettingsIcon">more_horiz</i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="timeslotHeaders scrollX guideScroller"></div>
|
<div class="timeslotHeaders scrollX guideScroller"></div>
|
||||||
|
|
@ -30,9 +30,9 @@
|
||||||
|
|
||||||
<div class="guideOptions hide">
|
<div class="guideOptions hide">
|
||||||
<button is="paper-icon-button-light" type="button" class="btnPreviousPage">
|
<button is="paper-icon-button-light" type="button" class="btnPreviousPage">
|
||||||
<i class="md-icon">arrow_back</i>
|
<i class="material-icons">arrow_back</i>
|
||||||
</button>
|
</button>
|
||||||
<button is="paper-icon-button-light" type="button" class="btnNextPage">
|
<button is="paper-icon-button-light" type="button" class="btnNextPage">
|
||||||
<i class="md-icon">arrow_forward</i>
|
<i class="material-icons">arrow_forward</i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,4 @@
|
||||||
|
|
||||||
.headroom--unpinned:not(.headroomDisabled) {
|
.headroom--unpinned:not(.headroomDisabled) {
|
||||||
transform: translateY(-100%);
|
transform: translateY(-100%);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -149,7 +149,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
|
||||||
|
|
||||||
currentHtml += '<div class="listItem viewItem" data-viewid="' + view.Id + '">';
|
currentHtml += '<div class="listItem viewItem" data-viewid="' + view.Id + '">';
|
||||||
|
|
||||||
currentHtml += '<i class="md-icon listItemIcon">folder_open</i>';
|
currentHtml += '<i class="material-icons listItemIcon">folder_open</i>';
|
||||||
|
|
||||||
currentHtml += '<div class="listItemBody">';
|
currentHtml += '<div class="listItemBody">';
|
||||||
|
|
||||||
|
|
@ -159,8 +159,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
|
||||||
|
|
||||||
currentHtml += '</div>';
|
currentHtml += '</div>';
|
||||||
|
|
||||||
currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><i class="md-icon">keyboard_arrow_up</i></button>';
|
currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><i class="material-icons">keyboard_arrow_up</i></button>';
|
||||||
currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><i class="md-icon">keyboard_arrow_down</i></button>';
|
currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><i class="material-icons">keyboard_arrow_down</i></button>';
|
||||||
|
|
||||||
currentHtml += '</div>';
|
currentHtml += '</div>';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,24 @@
|
||||||
.homeLibraryButton {
|
.homeLibraryButton {
|
||||||
min-width: 18%;
|
min-width: 18%;
|
||||||
margin: .5em !important;
|
margin: 0.5em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 50em) {
|
@media all and (max-width: 50em) {
|
||||||
|
|
||||||
.homeLibraryButton {
|
.homeLibraryButton {
|
||||||
width: 46% !important;
|
width: 46% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.homeLibraryIcon {
|
.homeLibraryIcon {
|
||||||
margin-left: .5em;
|
margin-left: 0.5em;
|
||||||
margin-right: .5em;
|
margin-right: 0.5em;
|
||||||
-webkit-flex-shrink: 0;
|
-webkit-flex-shrink: 0;
|
||||||
flex-shrink: 0
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.homeLibraryText {
|
.homeLibraryText {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
-o-text-overflow: ellipsis;
|
-o-text-overflow: ellipsis;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -161,7 +161,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
|
||||||
for (var i = 0, length = items.length; i < length; i++) {
|
for (var i = 0, length = items.length; i < length; i++) {
|
||||||
var item = items[i];
|
var item = items[i];
|
||||||
var icon = imageHelper.getLibraryIcon(item.CollectionType);
|
var icon = imageHelper.getLibraryIcon(item.CollectionType);
|
||||||
html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><i class="md-icon homeLibraryIcon">' + icon + '</i><span class="homeLibraryText">' + item.Name + '</span></a>';
|
html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><i class="material-icons homeLibraryIcon">' + icon + '</i><span class="homeLibraryText">' + item.Name + '</span></a>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
@ -260,7 +260,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
|
||||||
html += '<h2 class="sectionTitle sectionTitle-cards">';
|
html += '<h2 class="sectionTitle sectionTitle-cards">';
|
||||||
html += globalize.translate('LatestFromLibrary', parent.Name);
|
html += globalize.translate('LatestFromLibrary', parent.Name);
|
||||||
html += '</h2>';
|
html += '</h2>';
|
||||||
html += '<i class="md-icon">chevron_right</i>';
|
html += '<i class="material-icons">chevron_right</i>';
|
||||||
html += '</a>';
|
html += '</a>';
|
||||||
} else {
|
} else {
|
||||||
html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LatestFromLibrary', parent.Name) + '</h2>';
|
html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LatestFromLibrary', parent.Name) + '</h2>';
|
||||||
|
|
@ -608,7 +608,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
|
||||||
html += '<h2 class="sectionTitle sectionTitle-cards">';
|
html += '<h2 class="sectionTitle sectionTitle-cards">';
|
||||||
html += globalize.translate('HeaderOnNow');
|
html += globalize.translate('HeaderOnNow');
|
||||||
html += '</h2>';
|
html += '</h2>';
|
||||||
html += '<i class="md-icon">chevron_right</i>';
|
html += '<i class="material-icons">chevron_right</i>';
|
||||||
html += '</a>';
|
html += '</a>';
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -683,7 +683,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
|
||||||
html += '<h2 class="sectionTitle sectionTitle-cards">';
|
html += '<h2 class="sectionTitle sectionTitle-cards">';
|
||||||
html += globalize.translate('HeaderNextUp');
|
html += globalize.translate('HeaderNextUp');
|
||||||
html += '</h2>';
|
html += '</h2>';
|
||||||
html += '<i class="md-icon">chevron_right</i>';
|
html += '<i class="material-icons">chevron_right</i>';
|
||||||
html += '</a>';
|
html += '</a>';
|
||||||
} else {
|
} else {
|
||||||
html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderNextUp') + '</h2>';
|
html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderNextUp') + '</h2>';
|
||||||
|
|
|
||||||
|
|
@ -1054,7 +1054,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
|
||||||
var options = {
|
var options = {
|
||||||
video: videoElement,
|
video: videoElement,
|
||||||
subUrl: getTextTrackUrl(track, item),
|
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",
|
workerUrl: appRouter.baseUrl() + "/libraries/subtitles-octopus-worker.js",
|
||||||
onError: function() {
|
onError: function() {
|
||||||
htmlMediaHelper.onErrorInternal(self, 'mediadecodeerror')
|
htmlMediaHelper.onErrorInternal(self, 'mediadecodeerror')
|
||||||
|
|
@ -1401,7 +1403,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
|
||||||
dlg.classList.add('videoPlayerContainer');
|
dlg.classList.add('videoPlayerContainer');
|
||||||
|
|
||||||
if (options.backdropUrl) {
|
if (options.backdropUrl) {
|
||||||
|
|
||||||
dlg.classList.add('videoPlayerContainer-withBackdrop');
|
dlg.classList.add('videoPlayerContainer-withBackdrop');
|
||||||
dlg.style.backgroundImage = "url('" + options.backdropUrl + "')";
|
dlg.style.backgroundImage = "url('" + options.backdropUrl + "')";
|
||||||
}
|
}
|
||||||
|
|
@ -1410,11 +1411,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
|
||||||
dlg.classList.add('videoPlayerContainer-onTop');
|
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 html = '';
|
||||||
|
|
||||||
var cssClass = 'htmlvideoplayer';
|
var cssClass = 'htmlvideoplayer';
|
||||||
|
|
||||||
if (!browser.chromecast) {
|
if (!browser.chromecast) {
|
||||||
|
|
@ -1449,7 +1446,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
|
||||||
self._mediaElement = videoElement;
|
self._mediaElement = videoElement;
|
||||||
|
|
||||||
if (mediaManager) {
|
if (mediaManager) {
|
||||||
|
|
||||||
if (!mediaManager.embyInit) {
|
if (!mediaManager.embyInit) {
|
||||||
initMediaManager();
|
initMediaManager();
|
||||||
mediaManager.embyInit = true;
|
mediaManager.embyInit = true;
|
||||||
|
|
@ -1465,9 +1461,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
|
||||||
} else {
|
} else {
|
||||||
resolve(videoElement);
|
resolve(videoElement);
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
if (options.backdropUrl) {
|
if (options.backdropUrl) {
|
||||||
dlg.classList.add('videoPlayerContainer-withBackdrop');
|
dlg.classList.add('videoPlayerContainer-withBackdrop');
|
||||||
|
|
|
||||||
|
|
@ -72,7 +72,7 @@ video::-webkit-media-controls {
|
||||||
@keyframes htmlvideoplayer-zoomin {
|
@keyframes htmlvideoplayer-zoomin {
|
||||||
from {
|
from {
|
||||||
transform: scale3d(0.2, 0.2, 0.2);
|
transform: scale3d(0.2, 0.2, 0.2);
|
||||||
opacity: .6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
|
|
|
||||||
|
|
@ -116,8 +116,8 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
|
||||||
if (showControls) {
|
if (showControls) {
|
||||||
html += '<div data-role="controlgroup" data-type="horizontal" style="display:inline-block;">';
|
html += '<div data-role="controlgroup" data-type="horizontal" style="display:inline-block;">';
|
||||||
|
|
||||||
html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><i class="md-icon">arrow_back</i></button>';
|
html += '<button is="paper-icon-button-light" title="' + globalize.translate('Previous') + '" class="btnPreviousPage autoSize" ' + (startIndex ? '' : 'disabled') + '><i class="material-icons">arrow_back</i></button>';
|
||||||
html += '<button is="paper-icon-button-light" title="' + globalize.translate('Next') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><i class="md-icon">arrow_forward</i></button>';
|
html += '<button is="paper-icon-button-light" title="' + globalize.translate('Next') + '" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? 'disabled' : '') + '><i class="material-icons">arrow_forward</i></button>';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -277,7 +277,7 @@ define(['loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader'
|
||||||
if (enableFooterButtons) {
|
if (enableFooterButtons) {
|
||||||
html += '<div class="cardText cardTextCentered">';
|
html += '<div class="cardText cardTextCentered">';
|
||||||
|
|
||||||
html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><i class="md-icon">cloud_download</i></button>';
|
html += '<button is="paper-icon-button-light" class="btnDownloadRemoteImage autoSize" raised" title="' + globalize.translate('Download') + '"><i class="material-icons">cloud_download</i></button>';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="formDialogHeader">
|
<div class="formDialogHeader">
|
||||||
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
|
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
|
||||||
<h3 class="formDialogHeaderTitle">
|
<h3 class="formDialogHeaderTitle">
|
||||||
${Search}
|
${Search}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
|
||||||
|
|
@ -6,4 +6,4 @@
|
||||||
|
|
||||||
.first-imageEditor-buttons {
|
.first-imageEditor-buttons {
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -155,23 +155,23 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
|
||||||
if (image.ImageType === "Backdrop" || image.ImageType === "Screenshot") {
|
if (image.ImageType === "Backdrop" || image.ImageType === "Screenshot") {
|
||||||
|
|
||||||
if (index > 0) {
|
if (index > 0) {
|
||||||
html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + globalize.translate('MoveLeft') + '"><i class="md-icon">chevron_left</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + globalize.translate('MoveLeft') + '"><i class="material-icons">chevron_left</i></button>';
|
||||||
} else {
|
} else {
|
||||||
html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveLeft') + '"><i class="md-icon">chevron_left</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveLeft') + '"><i class="material-icons">chevron_left</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (index < numImages - 1) {
|
if (index < numImages - 1) {
|
||||||
html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + globalize.translate('MoveRight') + '"><i class="md-icon">chevron_right</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + globalize.translate('MoveRight') + '"><i class="material-icons">chevron_right</i></button>';
|
||||||
} else {
|
} else {
|
||||||
html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveRight') + '"><i class="md-icon">chevron_right</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('MoveRight') + '"><i class="material-icons">chevron_right</i></button>';
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (imageProviders.length) {
|
if (imageProviders.length) {
|
||||||
html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" class="btnSearchImages autoSize" title="' + globalize.translate('Search') + '"><i class="md-icon">search</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" class="btnSearchImages autoSize" title="' + globalize.translate('Search') + '"><i class="material-icons">search</i></button>';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" data-index="' + (image.ImageIndex != null ? image.ImageIndex : "null") + '" class="btnDeleteImage autoSize" title="' + globalize.translate('Delete') + '"><i class="md-icon">delete</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" data-index="' + (image.ImageIndex != null ? image.ImageIndex : "null") + '" class="btnDeleteImage autoSize" title="' + globalize.translate('Delete') + '"><i class="material-icons">delete</i></button>';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="formDialogHeader">
|
<div class="formDialogHeader">
|
||||||
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
|
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
|
||||||
<h3 class="formDialogHeaderTitle">
|
<h3 class="formDialogHeaderTitle">
|
||||||
${HeaderEditImages}
|
${HeaderEditImages}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -12,10 +12,10 @@
|
||||||
<div class="imageEditor-buttons first-imageEditor-buttons">
|
<div class="imageEditor-buttons first-imageEditor-buttons">
|
||||||
<h2 style="margin:0;">${Images}</h2>
|
<h2 style="margin:0;">${Images}</h2>
|
||||||
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;">
|
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;">
|
||||||
<i class="md-icon">search</i>
|
<i class="material-icons">search</i>
|
||||||
</button>
|
</button>
|
||||||
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;">
|
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;">
|
||||||
<i class="md-icon">add</i>
|
<i class="material-icons">add</i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="images" class="itemsContainer vertical-wrap">
|
<div id="images" class="itemsContainer vertical-wrap">
|
||||||
|
|
@ -27,10 +27,10 @@
|
||||||
<div class="imageEditor-buttons">
|
<div class="imageEditor-buttons">
|
||||||
<h2 style="margin:0;">${Backdrops}</h2>
|
<h2 style="margin:0;">${Backdrops}</h2>
|
||||||
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop">
|
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop">
|
||||||
<i class="md-icon">search</i>
|
<i class="material-icons">search</i>
|
||||||
</button>
|
</button>
|
||||||
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Backdrop">
|
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Backdrop">
|
||||||
<i class="md-icon">add</i>
|
<i class="material-icons">add</i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="backdrops" class="itemsContainer vertical-wrap">
|
<div id="backdrops" class="itemsContainer vertical-wrap">
|
||||||
|
|
@ -42,10 +42,10 @@
|
||||||
<div class="imageEditor-buttons">
|
<div class="imageEditor-buttons">
|
||||||
<h2 style="margin: 0;">${Screenshots}</h2>
|
<h2 style="margin: 0;">${Screenshots}</h2>
|
||||||
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Screenshot">
|
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Screenshot">
|
||||||
<i class="md-icon">search</i>
|
<i class="material-icons">search</i>
|
||||||
</button>
|
</button>
|
||||||
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Screenshot">
|
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Screenshot">
|
||||||
<i class="md-icon">add</i>
|
<i class="material-icons">add</i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="screenshots" class="itemsContainer vertical-wrap">
|
<div id="screenshots" class="itemsContainer vertical-wrap">
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="formDialogHeader">
|
<div class="formDialogHeader">
|
||||||
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
|
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
|
||||||
<h3 class="formDialogHeaderTitle">
|
<h3 class="formDialogHeaderTitle">
|
||||||
${HeaderImageOptions}
|
${HeaderImageOptions}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,22 @@
|
||||||
.lazy-image-fadein {
|
.lazy-image-fadein {
|
||||||
|
opacity: 0;
|
||||||
animation: lazy-image-fadein 330ms ease-in normal both;
|
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 {
|
.lazy-image-fadein-fast {
|
||||||
|
|
@ -16,26 +33,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.lazy-image-fadein {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-animation-duration: .8s;
|
|
||||||
-moz-animation-duration: .8s;
|
|
||||||
-o-animation-duration: .8s;
|
|
||||||
animation-duration: .8s;
|
|
||||||
-webkit-animation-name: popInAnimation;
|
|
||||||
-moz-animation-name: popInAnimation;
|
|
||||||
-o-animation-name: popInAnimation;
|
|
||||||
animation-name: popInAnimation;
|
|
||||||
-webkit-animation-fill-mode: forwards;
|
|
||||||
-moz-animation-fill-mode: forwards;
|
|
||||||
-o-animation-fill-mode: forwards;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
-webkit-animation-timing-function: cubic-bezier(0,0,.5,1);
|
|
||||||
-moz-animation-timing-function: cubic-bezier(0,0,.5,1);
|
|
||||||
-o-animation-timing-function: cubic-bezier(0,0,.5,1);
|
|
||||||
animation-timing-function: cubic-bezier(0,0,.5,1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes popInAnimation {
|
@keyframes popInAnimation {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -44,4 +41,4 @@
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="formDialogHeader">
|
<div class="formDialogHeader">
|
||||||
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
|
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
|
||||||
<h3 class="formDialogHeaderTitle">
|
<h3 class="formDialogHeaderTitle">
|
||||||
${HeaderUploadImage}
|
${HeaderUploadImage}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
<h2 style="margin:0;">${HeaderAddUpdateImage}</h2>
|
<h2 style="margin:0;">${HeaderAddUpdateImage}</h2>
|
||||||
|
|
||||||
<button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;">
|
<button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;">
|
||||||
<i class="md-icon">folder</i>
|
<i class="material-icons">folder</i>
|
||||||
<span>${Browse}</span>
|
<span>${Browse}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
.imageEditor-dropZone {
|
.imageEditor-dropZone {
|
||||||
border: .2em dashed currentcolor;
|
border: 0.2em dashed currentcolor;
|
||||||
border-radius: .25em;
|
border-radius: 0.25em;
|
||||||
|
|
||||||
/* padding: 1.6em; */
|
/* padding: 1.6em; */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -8,4 +9,4 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
.itemProgressBar {
|
.itemProgressBar {
|
||||||
background: #333;
|
background: #333;
|
||||||
background: rgba(51,51,51,.8);
|
background: rgba(51, 51, 51, 0.8);
|
||||||
position: relative;
|
position: relative;
|
||||||
height: .28em;
|
height: 0.28em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemProgressBarForeground {
|
.itemProgressBarForeground {
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.timerIndicator {
|
.timerIndicator {
|
||||||
color: #CB272A;
|
color: #cb272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timerIndicator-inactive {
|
.timerIndicator-inactive {
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.indicator + .indicator {
|
.indicator + .indicator {
|
||||||
margin-left: .25em;
|
margin-left: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.indicatorIcon {
|
.indicatorIcon {
|
||||||
|
|
@ -85,12 +85,13 @@
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.missingIndicator, .unairedIndicator {
|
.missingIndicator,
|
||||||
background: #cc3333;
|
.unairedIndicator {
|
||||||
padding: .25em .5em;
|
background: #c33;
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
border-radius: 100em;
|
border-radius: 100em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 84%;
|
font-size: 84%;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin: 0 .25em;
|
margin: 0 0.25em;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -90,7 +90,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
|
||||||
}
|
}
|
||||||
|
|
||||||
if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
|
if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
|
||||||
return '<div class="playedIndicator indicator"><i class="md-icon indicatorIcon">check</i></div>';
|
return '<div class="playedIndicator indicator"><i class="material-icons indicatorIcon">check</i></div>';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -118,7 +118,7 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
|
||||||
var status;
|
var status;
|
||||||
|
|
||||||
if (item.Type === 'SeriesTimer') {
|
if (item.Type === 'SeriesTimer') {
|
||||||
return '<i class="md-icon timerIndicator indicatorIcon">fiber_smart_record</i>';
|
return '<i class="material-icons timerIndicator indicatorIcon">fiber_smart_record</i>';
|
||||||
} else if (item.TimerId || item.SeriesTimerId) {
|
} else if (item.TimerId || item.SeriesTimerId) {
|
||||||
status = item.Status || 'Cancelled';
|
status = item.Status || 'Cancelled';
|
||||||
} else if (item.Type === 'Timer') {
|
} else if (item.Type === 'Timer') {
|
||||||
|
|
@ -129,20 +129,20 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
|
||||||
|
|
||||||
if (item.SeriesTimerId) {
|
if (item.SeriesTimerId) {
|
||||||
if (status !== 'Cancelled') {
|
if (status !== 'Cancelled') {
|
||||||
return '<i class="md-icon timerIndicator indicatorIcon">fiber_smart_record</i>';
|
return '<i class="material-icons timerIndicator indicatorIcon">fiber_smart_record</i>';
|
||||||
}
|
}
|
||||||
|
|
||||||
return '<i class="md-icon timerIndicator timerIndicator-inactive indicatorIcon">fiber_smart_record</i>';
|
return '<i class="material-icons timerIndicator timerIndicator-inactive indicatorIcon">fiber_smart_record</i>';
|
||||||
}
|
}
|
||||||
|
|
||||||
return '<i class="md-icon timerIndicator indicatorIcon">fiber_manual_record</i>';
|
return '<i class="material-icons timerIndicator indicatorIcon">fiber_manual_record</i>';
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSyncIndicator(item) {
|
function getSyncIndicator(item) {
|
||||||
if (item.SyncPercent === 100) {
|
if (item.SyncPercent === 100) {
|
||||||
return '<div class="syncIndicator indicator fullSyncIndicator"><i class="md-icon indicatorIcon">file_download</i></div>';
|
return '<div class="syncIndicator indicator fullSyncIndicator"><i class="material-icons indicatorIcon">file_download</i></div>';
|
||||||
} else if (item.SyncPercent != null) {
|
} else if (item.SyncPercent != null) {
|
||||||
return '<div class="syncIndicator indicator emptySyncIndicator"><i class="md-icon indicatorIcon">file_download</i></div>';
|
return '<div class="syncIndicator indicator emptySyncIndicator"><i class="material-icons indicatorIcon">file_download</i></div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
return '';
|
return '';
|
||||||
|
|
@ -150,13 +150,13 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
|
||||||
|
|
||||||
function getTypeIndicator(item) {
|
function getTypeIndicator(item) {
|
||||||
if (item.Type === 'Video') {
|
if (item.Type === 'Video') {
|
||||||
return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">videocam</i></div>';
|
return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon">videocam</i></div>';
|
||||||
}
|
}
|
||||||
if (item.Type === 'Folder' || item.Type === 'PhotoAlbum') {
|
if (item.Type === 'Folder' || item.Type === 'PhotoAlbum') {
|
||||||
return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">folder</i></div>';
|
return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon">folder</i></div>';
|
||||||
}
|
}
|
||||||
if (item.Type === 'Photo') {
|
if (item.Type === 'Photo') {
|
||||||
return '<div class="indicator videoIndicator"><i class="md-icon indicatorIcon">photo</i></div>';
|
return '<div class="indicator videoIndicator"><i class="material-icons indicatorIcon">photo</i></div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
return '';
|
return '';
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="formDialogHeader">
|
<div class="formDialogHeader">
|
||||||
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
|
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
|
||||||
<i class="md-icon">arrow_back</i>
|
<i class="material-icons">arrow_back</i>
|
||||||
</button>
|
</button>
|
||||||
<h3 class="formDialogHeaderTitle">${HeaderMediaInfo}</h3>
|
<h3 class="formDialogHeaderTitle">${HeaderMediaInfo}</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="formDialogHeader">
|
<div class="formDialogHeader">
|
||||||
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
|
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
|
||||||
<i class="md-icon">arrow_back</i>
|
<i class="material-icons">arrow_back</i>
|
||||||
</button>
|
</button>
|
||||||
<h3 class="formDialogHeaderTitle">${Identify}</h3>
|
<h3 class="formDialogHeaderTitle">${Identify}</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,133 @@
|
||||||
define(['inputManager', 'focusManager'], function(inputManager, focusManager) {
|
define(["inputManager", "layoutManager"], function (inputManager, layoutManager) {
|
||||||
'use strict';
|
"use strict";
|
||||||
|
|
||||||
console.log("keyboardnavigation");
|
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() {
|
function enable() {
|
||||||
document.addEventListener('keydown', function(e) {
|
document.addEventListener("keydown", function (e) {
|
||||||
var capture = true;
|
var capture = true;
|
||||||
|
|
||||||
switch (e.keyCode) {
|
switch (getKeyName(e)) {
|
||||||
case 37: // ArrowLeft
|
case "ArrowLeft":
|
||||||
inputManager.handle('left');
|
inputManager.handle("left");
|
||||||
break;
|
break;
|
||||||
case 38: // ArrowUp
|
case "ArrowUp":
|
||||||
inputManager.handle('up');
|
inputManager.handle("up");
|
||||||
break;
|
break;
|
||||||
case 39: // ArrowRight
|
case "ArrowRight":
|
||||||
inputManager.handle('right');
|
inputManager.handle("right");
|
||||||
break;
|
break;
|
||||||
case 40: // ArrowDown
|
case "ArrowDown":
|
||||||
inputManager.handle('down');
|
inputManager.handle("down");
|
||||||
break;
|
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:
|
default:
|
||||||
capture = false;
|
capture = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (capture) {
|
if (capture) {
|
||||||
console.log("Disabling default event handling");
|
console.log("Disabling default event handling");
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
enable: enable
|
enable: enable,
|
||||||
|
getKeyName: getKeyName
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function setLayout(instance, layout, selectedLayout) {
|
function setLayout(instance, layout, selectedLayout) {
|
||||||
|
|
||||||
if (layout === selectedLayout) {
|
if (layout === selectedLayout) {
|
||||||
instance[layout] = true;
|
instance[layout] = true;
|
||||||
document.documentElement.classList.add('layout-' + layout);
|
document.documentElement.classList.add('layout-' + layout);
|
||||||
|
|
@ -38,7 +37,6 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
|
||||||
};
|
};
|
||||||
|
|
||||||
LayoutManager.prototype.getSavedLayout = function (layout) {
|
LayoutManager.prototype.getSavedLayout = function (layout) {
|
||||||
|
|
||||||
return appSettings.get('layout');
|
return appSettings.get('layout');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -64,4 +62,4 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
|
||||||
};
|
};
|
||||||
|
|
||||||
return new LayoutManager();
|
return new LayoutManager();
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
.lazy {
|
.lazy {
|
||||||
/* In edge, intersection observer will not fire on 0px sized elements */
|
/* In edge, intersection observer will not fire on 0px sized elements */
|
||||||
min-width: .1em;
|
min-width: 0.1em;
|
||||||
min-height: .1em;
|
min-height: 0.1em;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -58,16 +58,16 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
|
||||||
for (var i = 0; i < plugins.length; i++) {
|
for (var i = 0; i < plugins.length; i++) {
|
||||||
var plugin = plugins[i];
|
var plugin = plugins[i];
|
||||||
html += '<div class="listItem localReaderOption sortableOption" data-pluginname="' + plugin.Name + '">';
|
html += '<div class="listItem localReaderOption sortableOption" data-pluginname="' + plugin.Name + '">';
|
||||||
html += '<i class="listItemIcon md-icon">live_tv</i>';
|
html += '<i class="listItemIcon material-icons">live_tv</i>';
|
||||||
html += '<div class="listItemBody">';
|
html += '<div class="listItemBody">';
|
||||||
html += '<h3 class="listItemBodyText">';
|
html += '<h3 class="listItemBodyText">';
|
||||||
html += plugin.Name;
|
html += plugin.Name;
|
||||||
html += "</h3>";
|
html += "</h3>";
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
if (i > 0) {
|
if (i > 0) {
|
||||||
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_up</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_up</i></button>';
|
||||||
} else if (plugins.length > 1) {
|
} else if (plugins.length > 1) {
|
||||||
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_down</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_down</i></button>';
|
||||||
}
|
}
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
}
|
}
|
||||||
|
|
@ -120,7 +120,7 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
|
||||||
html += plugin.Name;
|
html += plugin.Name;
|
||||||
html += "</h3>";
|
html += "</h3>";
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_up</i></button>' : plugins.length > 1 && (html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_down</i></button>'), html += "</div>"
|
i > 0 ? html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_up</i></button>' : plugins.length > 1 && (html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_down</i></button>'), html += "</div>"
|
||||||
}
|
}
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
html += '<div class="fieldDescription">' + globalize.translate("LabelMetadataDownloadersHelp") + "</div>";
|
html += '<div class="fieldDescription">' + globalize.translate("LabelMetadataDownloadersHelp") + "</div>";
|
||||||
|
|
@ -181,9 +181,9 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
|
||||||
html += "</h3>";
|
html += "</h3>";
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
if (i > 0) {
|
if (i > 0) {
|
||||||
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_up</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_up</i></button>';
|
||||||
} else if (plugins.length > 1) {
|
} else if (plugins.length > 1) {
|
||||||
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_down</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_down</i></button>';
|
||||||
}
|
}
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
}
|
}
|
||||||
|
|
@ -220,9 +220,9 @@ define(["globalize", "dom", "emby-checkbox", "emby-select", "emby-input"], funct
|
||||||
html += "</h3>";
|
html += "</h3>";
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
if (i > 0) {
|
if (i > 0) {
|
||||||
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_up</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonUp") + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_up</i></button>';
|
||||||
} else if (plugins.length > 1) {
|
} else if (plugins.length > 1) {
|
||||||
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_down</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDown") + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><i class="material-icons">keyboard_arrow_down</i></button>';
|
||||||
}
|
}
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
display: block;
|
display: block;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: .25em .25em .25em .5em;
|
padding: 0.25em 0.25em 0.25em 0.5em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
@ -50,14 +50,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem-border.show-focus:focus {
|
.listItem-border.show-focus:focus {
|
||||||
transform: scale(1.0) !important;
|
transform: scale(1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemImage, .listItemIcon, .listItemAside {
|
.listItemImage,
|
||||||
|
.listItemIcon,
|
||||||
|
.listItemAside {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemBody, .listItemImage, .listItemIcon {
|
.listItemBody,
|
||||||
|
.listItemImage,
|
||||||
|
.listItemIcon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
@ -71,13 +75,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.listViewDragHandle {
|
.listViewDragHandle {
|
||||||
margin-left: -.25em !important;
|
margin-left: -0.25em !important;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemBody {
|
.listItemBody {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
padding: .85em .75em;
|
padding: 0.85em 0.75em;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -85,8 +89,15 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.listItem,
|
||||||
|
.listItemBody,
|
||||||
|
.listItemMediaInfo {
|
||||||
|
display: flex;
|
||||||
|
contain: layout style;
|
||||||
|
}
|
||||||
|
|
||||||
.layout-tv .listItemBody {
|
.layout-tv .listItemBody {
|
||||||
padding: .35em .75em;
|
padding: 0.35em 0.75em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemBody-noleftpadding {
|
.listItemBody-noleftpadding {
|
||||||
|
|
@ -95,7 +106,7 @@
|
||||||
|
|
||||||
.listItemBodyText {
|
.listItemBodyText {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: .1em 0;
|
padding: 0.1em 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
@ -121,7 +132,7 @@
|
||||||
width: 19.5vw;
|
width: 19.5vw;
|
||||||
height: 13vw;
|
height: 13vw;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
margin-right: .75em;
|
margin-right: 0.75em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemImageButton {
|
.listItemImageButton {
|
||||||
|
|
@ -162,13 +173,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemBody {
|
.listItemBody {
|
||||||
padding-left: .75em;
|
padding-left: 0.75em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 50em) {
|
@media all and (max-width: 50em) {
|
||||||
.listItemBody {
|
.listItemBody {
|
||||||
padding-right: .5em;
|
padding-right: 0.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -181,15 +192,15 @@
|
||||||
width: 1em !important;
|
width: 1em !important;
|
||||||
height: 1em !important;
|
height: 1em !important;
|
||||||
font-size: 143%;
|
font-size: 143%;
|
||||||
padding: 0 .25em 0 0;
|
padding: 0 0.25em 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemIcon:not(.listItemIcon-transparent) {
|
.listItemIcon:not(.listItemIcon-transparent) {
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: .5em;
|
padding: 0.5em;
|
||||||
border-radius: 100em;
|
border-radius: 100em;
|
||||||
margin: 0 .2em 0 .4em;
|
margin: 0 0.2em 0 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemProgressBar {
|
.listItemProgressBar {
|
||||||
|
|
@ -200,7 +211,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem:focus {
|
.listItem:focus {
|
||||||
border-radius: .2em;
|
border-radius: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem:focus .secondary {
|
.listItem:focus .secondary {
|
||||||
|
|
@ -208,7 +219,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem-focusscale {
|
.listItem-focusscale {
|
||||||
transition: transform .2s ease-out;
|
transition: transform 0.2s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem-focusscale:focus {
|
.listItem-focusscale:focus {
|
||||||
|
|
@ -216,7 +227,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.paperList {
|
.paperList {
|
||||||
margin: .5em auto;
|
margin: 0.5em auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.paperList-clear {
|
.paperList-clear {
|
||||||
|
|
@ -235,26 +246,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemIndicators {
|
.listItemIndicators {
|
||||||
right: .324em;
|
right: 0.324em;
|
||||||
top: .324em;
|
top: 0.324em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem, .listItemBody, .listItemMediaInfo {
|
|
||||||
display: flex;
|
|
||||||
contain: layout style;
|
|
||||||
}
|
|
||||||
|
|
||||||
.listItem-bottomoverview {
|
.listItem-bottomoverview {
|
||||||
font-size: 88%;
|
font-size: 88%;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
margin-top: .2em;
|
margin-top: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 50em) {
|
@media all and (max-width: 50em) {
|
||||||
.listItem .endsAt, .listItem .criticRating, .listItem-overview {
|
.listItem .endsAt,
|
||||||
|
.listItem .criticRating,
|
||||||
|
.listItem-overview {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -160,7 +160,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
|
||||||
|
|
||||||
var button = options.rightButtons[i];
|
var button = options.rightButtons[i];
|
||||||
|
|
||||||
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="' + button.id + '" title="' + button.title + '"><i class="md-icon">' + button.icon + '</i></button>';
|
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="' + button.id + '" title="' + button.title + '"><i class="material-icons">' + button.icon + '</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
return html;
|
return html;
|
||||||
|
|
@ -262,9 +262,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!clickEntireItem && options.dragHandle) {
|
if (!clickEntireItem && options.dragHandle) {
|
||||||
//html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><i class="md-icon">drag_handle</i></button>';
|
//html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><i class="material-icons">drag_handle</i></button>';
|
||||||
// Firefox and Edge are not allowing the button to be draggable
|
// Firefox and Edge are not allowing the button to be draggable
|
||||||
html += '<i class="listViewDragHandle md-icon listItemIcon listItemIcon-transparent">drag_handle</i>';
|
html += '<i class="listViewDragHandle material-icons listItemIcon listItemIcon-transparent">drag_handle</i>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.image !== false) {
|
if (options.image !== false) {
|
||||||
|
|
@ -298,7 +298,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
|
||||||
}
|
}
|
||||||
|
|
||||||
if (playOnImageClick) {
|
if (playOnImageClick) {
|
||||||
html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><i class="md-icon listItemImageButton-icon">play_arrow</i></button>';
|
html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><i class="material-icons listItemImageButton-icon">play_arrow</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
var progressHtml = indicators.getProgressBarHtml(item, {
|
var progressHtml = indicators.getProgressBarHtml(item, {
|
||||||
|
|
@ -476,15 +476,15 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
|
||||||
if (!clickEntireItem) {
|
if (!clickEntireItem) {
|
||||||
|
|
||||||
if (options.addToListButton) {
|
if (options.addToListButton) {
|
||||||
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><i class="md-icon">playlist_add</i></button>';
|
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><i class="material-icons">playlist_add</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.moreButton !== false) {
|
if (options.moreButton !== false) {
|
||||||
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="menu"><i class="md-icon">' + moreIcon + '</i></button>';
|
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="menu"><i class="material-icons">' + moreIcon + '</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.infoButton) {
|
if (options.infoButton) {
|
||||||
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><i class="md-icon">info_outline</i></button>';
|
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><i class="material-icons">info_outline</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.rightButtons) {
|
if (options.rightButtons) {
|
||||||
|
|
@ -497,11 +497,11 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
|
||||||
var likes = userData.Likes == null ? '' : userData.Likes;
|
var likes = userData.Likes == null ? '' : userData.Likes;
|
||||||
|
|
||||||
if (itemHelper.canMarkPlayed(item)) {
|
if (itemHelper.canMarkPlayed(item)) {
|
||||||
html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon">check</i></button>';
|
html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="material-icons">check</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (itemHelper.canRate(item)) {
|
if (itemHelper.canRate(item)) {
|
||||||
html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">favorite</i></button>';
|
html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons">favorite</i></button>';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__layer-1 {
|
.mdl-spinner__layer-1 {
|
||||||
border-color: rgb(66,165,245);
|
border-color: rgb(66, 165, 245);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__layer-1-active {
|
.mdl-spinner__layer-1-active {
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__layer-2 {
|
.mdl-spinner__layer-2 {
|
||||||
border-color: rgb(244,67,54);
|
border-color: rgb(244, 67, 54);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__layer-2-active {
|
.mdl-spinner__layer-2-active {
|
||||||
|
|
@ -51,7 +51,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__layer-3 {
|
.mdl-spinner__layer-3 {
|
||||||
border-color: rgb(253,216,53);
|
border-color: rgb(253, 216, 53);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__layer-3-active {
|
.mdl-spinner__layer-3-active {
|
||||||
|
|
@ -60,7 +60,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__layer-4 {
|
.mdl-spinner__layer-4 {
|
||||||
border-color: rgb(76,175,80);
|
border-color: rgb(76, 175, 80);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__layer-4-active {
|
.mdl-spinner__layer-4-active {
|
||||||
|
|
@ -345,23 +345,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__circle-clipper {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
width: 50%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
border-color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mdl-spinner__circle-clipper .mdl-spinner__circle {
|
|
||||||
width: 200%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mdl-spinner__circle {
|
.mdl-spinner__circle {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-width: .21em;
|
border-width: 0.21em;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: inherit;
|
border-color: inherit;
|
||||||
border-bottom-color: transparent !important;
|
border-bottom-color: transparent !important;
|
||||||
|
|
@ -375,6 +362,19 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mdl-spinner__circle-clipper {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
border-color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdl-spinner__circle-clipper .mdl-spinner__circle {
|
||||||
|
width: 200%;
|
||||||
|
}
|
||||||
|
|
||||||
.mdl-spinner__circleLeft {
|
.mdl-spinner__circleLeft {
|
||||||
border-right-color: transparent !important;
|
border-right-color: transparent !important;
|
||||||
-webkit-transform: rotate(129deg);
|
-webkit-transform: rotate(129deg);
|
||||||
|
|
|
||||||
|
|
@ -4,13 +4,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoText {
|
.mediaInfoText {
|
||||||
padding: .22em .5em;
|
padding: 0.22em 0.5em;
|
||||||
border-radius: .25em;
|
border-radius: 0.25em;
|
||||||
font-size: 92%;
|
font-size: 92%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin: 0 .5em 0 0;
|
margin: 0 0.5em 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoText-upper {
|
.mediaInfoText-upper {
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
margin-right: .6em;
|
margin-right: 0.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoItem:last-child {
|
.mediaInfoItem:last-child {
|
||||||
|
|
@ -63,8 +63,8 @@
|
||||||
|
|
||||||
.mediaInfoProgramAttribute {
|
.mediaInfoProgramAttribute {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
padding: .16em .6em;
|
padding: 0.16em 0.6em;
|
||||||
border-radius: .15em;
|
border-radius: 0.15em;
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -73,13 +73,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoOfficialRating {
|
.mediaInfoOfficialRating {
|
||||||
border: .09em solid currentColor;
|
border: 0.09em solid currentColor;
|
||||||
padding: 0 .6em;
|
padding: 0 0.6em;
|
||||||
height: 1.3em;
|
height: 1.3em;
|
||||||
line-height: 1.8em;
|
line-height: 1.8em;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: .1em;
|
border-radius: 0.1em;
|
||||||
font-size: 96%;
|
font-size: 96%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
|
||||||
var status;
|
var status;
|
||||||
|
|
||||||
if (item.Type === 'SeriesTimer') {
|
if (item.Type === 'SeriesTimer') {
|
||||||
return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
|
return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
|
||||||
} else if (item.TimerId || item.SeriesTimerId) {
|
} else if (item.TimerId || item.SeriesTimerId) {
|
||||||
|
|
||||||
status = item.Status || 'Cancelled';
|
status = item.Status || 'Cancelled';
|
||||||
|
|
@ -20,13 +20,13 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
|
||||||
if (item.SeriesTimerId) {
|
if (item.SeriesTimerId) {
|
||||||
|
|
||||||
if (status !== 'Cancelled') {
|
if (status !== 'Cancelled') {
|
||||||
return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
|
return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_smart_record</i>';
|
||||||
}
|
}
|
||||||
|
|
||||||
return '<i class="md-icon mediaInfoItem mediaInfoIconItem">fiber_smart_record</i>';
|
return '<i class="material-icons mediaInfoItem mediaInfoIconItem">fiber_smart_record</i>';
|
||||||
}
|
}
|
||||||
|
|
||||||
return '<i class="md-icon mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_manual_record</i>';
|
return '<i class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon">fiber_manual_record</i>';
|
||||||
}
|
}
|
||||||
|
|
||||||
function getProgramInfoHtml(item, options) {
|
function getProgramInfoHtml(item, options) {
|
||||||
|
|
@ -393,7 +393,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
|
||||||
if (rating) {
|
if (rating) {
|
||||||
html += '<div class="starRatingContainer mediaInfoItem">';
|
html += '<div class="starRatingContainer mediaInfoItem">';
|
||||||
|
|
||||||
html += '<i class="md-icon starIcon">star</i>';
|
html += '<i class="material-icons starIcon">star</i>';
|
||||||
html += rating;
|
html += rating;
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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";
|
"use strict";
|
||||||
|
|
||||||
function onAddLibrary() {
|
function onAddLibrary() {
|
||||||
if (isCreating) return false;
|
if (isCreating) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
if (pathInfos.length == 0) {
|
if (pathInfos.length == 0) {
|
||||||
require(["alert"], function(alert) {
|
require(["alert"], function (alert) {
|
||||||
alert({
|
alert({
|
||||||
text: Globalize.translate("PleaseAddAtLeastOneFolder"),
|
text: Globalize.translate("PleaseAddAtLeastOneFolder"),
|
||||||
type: "error"
|
type: "error"
|
||||||
})
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
isCreating = true;
|
isCreating = true;
|
||||||
loading.show();
|
loading.show();
|
||||||
|
|
||||||
var dlg = dom.parentWithClass(this, "dlg-librarycreator");
|
var dlg = dom.parentWithClass(this, "dlg-librarycreator");
|
||||||
var name = $("#txtValue", dlg).val();
|
var name = $("#txtValue", dlg).val();
|
||||||
var type = $("#selectCollectionType", dlg).val();
|
var type = $("#selectCollectionType", dlg).val();
|
||||||
if (type == "mixed") type = null;
|
|
||||||
|
if (type == "mixed") {
|
||||||
|
type = null;
|
||||||
|
}
|
||||||
|
|
||||||
var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector(".libraryOptions"));
|
var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector(".libraryOptions"));
|
||||||
libraryOptions.PathInfos = pathInfos;
|
libraryOptions.PathInfos = pathInfos;
|
||||||
ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(function() {
|
ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(function () {
|
||||||
hasChanges = true;
|
hasChanges = true;
|
||||||
isCreating = false;
|
isCreating = false;
|
||||||
loading.hide();
|
loading.hide();
|
||||||
dialogHelper.close(dlg);
|
dialogHelper.close(dlg);
|
||||||
}, function() {
|
}, function () {
|
||||||
require(["toast"], function(toast) {
|
require(["toast"], function (toast) {
|
||||||
toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
|
toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
|
||||||
});
|
});
|
||||||
|
|
||||||
isCreating = false;
|
isCreating = false;
|
||||||
loading.hide();
|
loading.hide();
|
||||||
});
|
});
|
||||||
|
|
@ -39,16 +46,17 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
|
||||||
}
|
}
|
||||||
|
|
||||||
function getCollectionTypeOptionsHtml(collectionTypeOptions) {
|
function getCollectionTypeOptionsHtml(collectionTypeOptions) {
|
||||||
return collectionTypeOptions.map(function(i) {
|
return collectionTypeOptions.map(function (i) {
|
||||||
return '<option value="' + i.value + '">' + i.name + "</option>";
|
return '<option value="' + i.value + '">' + i.name + "</option>";
|
||||||
}).join("");
|
}).join("");
|
||||||
}
|
}
|
||||||
|
|
||||||
function initEditor(page, collectionTypeOptions) {
|
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 value = this.value;
|
||||||
var dlg = $(this).parents(".dialog")[0];
|
var dlg = $(this).parents(".dialog")[0];
|
||||||
libraryoptionseditor.setContentType(dlg.querySelector(".libraryOptions"), value == "mixed" ? "" : value);
|
libraryoptionseditor.setContentType(dlg.querySelector(".libraryOptions"), value == "mixed" ? "" : value);
|
||||||
|
|
||||||
if (value) {
|
if (value) {
|
||||||
dlg.querySelector(".libraryOptions").classList.remove("hide");
|
dlg.querySelector(".libraryOptions").classList.remove("hide");
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -57,17 +65,17 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
|
||||||
|
|
||||||
if (value != "mixed") {
|
if (value != "mixed") {
|
||||||
var index = this.selectedIndex;
|
var index = this.selectedIndex;
|
||||||
|
|
||||||
if (index != -1) {
|
if (index != -1) {
|
||||||
var name = this.options[index].innerHTML.replace("*", "").replace("&", "&");
|
var name = this.options[index].innerHTML.replace("*", "").replace("&", "&");
|
||||||
$("#txtValue", dlg).val(name);
|
$("#txtValue", dlg).val(name);
|
||||||
var folderOption = collectionTypeOptions.filter(function(i) {
|
var folderOption = collectionTypeOptions.filter(function (i) {
|
||||||
return i.value == value
|
return i.value == value;
|
||||||
})[0];
|
})[0];
|
||||||
$(".collectionTypeFieldDescription", dlg).html(folderOption.message || "")
|
$(".collectionTypeFieldDescription", dlg).html(folderOption.message || "");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
page.querySelector(".btnAddFolder").addEventListener("click", onAddButtonClick);
|
page.querySelector(".btnAddFolder").addEventListener("click", onAddButtonClick);
|
||||||
page.querySelector(".btnSubmit").addEventListener("click", onAddLibrary);
|
page.querySelector(".btnSubmit").addEventListener("click", onAddLibrary);
|
||||||
page.querySelector(".folderList").addEventListener("click", onRemoveClick);
|
page.querySelector(".folderList").addEventListener("click", onRemoveClick);
|
||||||
|
|
@ -81,40 +89,65 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
|
||||||
|
|
||||||
function onAddButtonClick() {
|
function onAddButtonClick() {
|
||||||
var page = dom.parentWithClass(this, "dlg-librarycreator");
|
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({
|
picker.show({
|
||||||
enableNetworkSharePath: true,
|
enableNetworkSharePath: true,
|
||||||
callback: function(path, networkSharePath) {
|
callback: function (path, networkSharePath) {
|
||||||
path && addMediaLocation(page, path, networkSharePath);
|
if (path) {
|
||||||
|
addMediaLocation(page, path, networkSharePath);
|
||||||
|
}
|
||||||
|
|
||||||
picker.close();
|
picker.close();
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function getFolderHtml(pathInfo, index) {
|
function getFolderHtml(pathInfo, index) {
|
||||||
var html = "";
|
var html = "";
|
||||||
return html += '<div class="listItem listItem-border lnkPath" style="padding-left:.5em;">', html += '<div class="' + (pathInfo.NetworkPath ? "listItemBody two-line" : "listItemBody") + '">', html += '<div class="listItemBodyText">' + pathInfo.Path + "</div>", pathInfo.NetworkPath && (html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + "</div>"), html += "</div>", html += '<button type="button" is="paper-icon-button-light"" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="md-icon">remove_circle</i></button>', html += "</div>"
|
html += '<div class="listItem listItem-border lnkPath" style="padding-left:.5em;">';
|
||||||
|
html += '<div class="' + (pathInfo.NetworkPath ? "listItemBody two-line" : "listItemBody") + '">';
|
||||||
|
html += '<div class="listItemBodyText">' + pathInfo.Path + "</div>";
|
||||||
|
|
||||||
|
if (pathInfo.NetworkPath) {
|
||||||
|
html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + "</div>";
|
||||||
|
}
|
||||||
|
|
||||||
|
html += "</div>";
|
||||||
|
html += '<button type="button" is="paper-icon-button-light"" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="material-icons">remove_circle</i></button>';
|
||||||
|
html += "</div>";
|
||||||
|
return html;
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderPaths(page) {
|
function renderPaths(page) {
|
||||||
var foldersHtml = pathInfos.map(getFolderHtml).join("");
|
var foldersHtml = pathInfos.map(getFolderHtml).join("");
|
||||||
var folderList = page.querySelector(".folderList");
|
var folderList = page.querySelector(".folderList");
|
||||||
folderList.innerHTML = foldersHtml;
|
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) {
|
function addMediaLocation(page, path, networkSharePath) {
|
||||||
var pathLower = path.toLowerCase();
|
var pathLower = path.toLowerCase();
|
||||||
var pathFilter = pathInfos.filter(function(p) {
|
var pathFilter = pathInfos.filter(function (p) {
|
||||||
return p.Path.toLowerCase() == pathLower;
|
return p.Path.toLowerCase() == pathLower;
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!pathFilter.length) {
|
if (!pathFilter.length) {
|
||||||
var pathInfo = {
|
var pathInfo = {
|
||||||
Path: path
|
Path: path
|
||||||
};
|
};
|
||||||
networkSharePath && (pathInfo.NetworkPath = networkSharePath);
|
|
||||||
|
if (networkSharePath) {
|
||||||
|
pathInfo.NetworkPath = networkSharePath;
|
||||||
|
}
|
||||||
|
|
||||||
pathInfos.push(pathInfo);
|
pathInfos.push(pathInfo);
|
||||||
renderPaths(page);
|
renderPaths(page);
|
||||||
}
|
}
|
||||||
|
|
@ -125,7 +158,7 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
|
||||||
var index = parseInt(button.getAttribute("data-index"));
|
var index = parseInt(button.getAttribute("data-index"));
|
||||||
var location = pathInfos[index].Path;
|
var location = pathInfos[index].Path;
|
||||||
var locationLower = location.toLowerCase();
|
var locationLower = location.toLowerCase();
|
||||||
pathInfos = pathInfos.filter(function(p) {
|
pathInfos = pathInfos.filter(function (p) {
|
||||||
return p.Path.toLowerCase() != locationLower;
|
return p.Path.toLowerCase() != locationLower;
|
||||||
});
|
});
|
||||||
renderPaths(dom.parentWithClass(button, "dlg-librarycreator"));
|
renderPaths(dom.parentWithClass(button, "dlg-librarycreator"));
|
||||||
|
|
@ -136,21 +169,22 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
|
||||||
}
|
}
|
||||||
|
|
||||||
function initLibraryOptions(dlg) {
|
function initLibraryOptions(dlg) {
|
||||||
libraryoptionseditor.embed(dlg.querySelector(".libraryOptions")).then(function() {
|
libraryoptionseditor.embed(dlg.querySelector(".libraryOptions")).then(function () {
|
||||||
$("#selectCollectionType", dlg).trigger("change");
|
$("#selectCollectionType", dlg).trigger("change");
|
||||||
onToggleAdvancedChange.call(dlg.querySelector(".chkAdvanced"));
|
onToggleAdvancedChange.call(dlg.querySelector(".chkAdvanced"));
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function editor() {
|
function editor() {
|
||||||
this.show = function(options) {
|
this.show = function (options) {
|
||||||
return new Promise(function(resolve, reject) {
|
return new Promise(function (resolve, reject) {
|
||||||
currentOptions = options;
|
currentOptions = options;
|
||||||
currentResolve = resolve;
|
currentResolve = resolve;
|
||||||
hasChanges = false;
|
hasChanges = false;
|
||||||
var xhr = new XMLHttpRequest;
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open("GET", "components/medialibrarycreator/medialibrarycreator.template.html", true);
|
xhr.open("GET", "components/medialibrarycreator/medialibrarycreator.template.html", true);
|
||||||
xhr.onload = function(e) {
|
|
||||||
|
xhr.onload = function (e) {
|
||||||
var template = this.response;
|
var template = this.response;
|
||||||
var dlg = dialogHelper.createDialog({
|
var dlg = dialogHelper.createDialog({
|
||||||
size: "medium-tall",
|
size: "medium-tall",
|
||||||
|
|
@ -166,24 +200,23 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
|
||||||
initEditor(dlg, options.collectionTypeOptions);
|
initEditor(dlg, options.collectionTypeOptions);
|
||||||
dlg.addEventListener("close", onDialogClosed);
|
dlg.addEventListener("close", onDialogClosed);
|
||||||
dialogHelper.open(dlg);
|
dialogHelper.open(dlg);
|
||||||
dlg.querySelector(".btnCancel").addEventListener("click", function() {
|
dlg.querySelector(".btnCancel").addEventListener("click", function () {
|
||||||
dialogHelper.close(dlg)
|
dialogHelper.close(dlg);
|
||||||
});
|
});
|
||||||
pathInfos = [];
|
pathInfos = [];
|
||||||
renderPaths(dlg);
|
renderPaths(dlg);
|
||||||
initLibraryOptions(dlg);
|
initLibraryOptions(dlg);
|
||||||
};
|
};
|
||||||
|
|
||||||
xhr.send();
|
xhr.send();
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
var pathInfos = [];
|
var pathInfos = [];
|
||||||
var currentResolve;
|
var currentResolve;
|
||||||
var currentOptions;
|
var currentOptions;
|
||||||
|
|
||||||
var hasChanges = false;
|
var hasChanges = false;
|
||||||
var isCreating = false;
|
var isCreating = false;
|
||||||
|
return editor;
|
||||||
return editor
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="formDialogHeader">
|
<div class="formDialogHeader">
|
||||||
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
|
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
|
||||||
<h3 class="formDialogHeaderTitle">${ButtonAddMediaLibrary}</h3>
|
<h3 class="formDialogHeaderTitle">${ButtonAddMediaLibrary}</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
<div style="display: flex; align-items: center;">
|
<div style="display: flex; align-items: center;">
|
||||||
<h1 style="margin: .5em 0;">${HeadersFolders}</h1>
|
<h1 style="margin: .5em 0;">${HeadersFolders}</h1>
|
||||||
<button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}">
|
<button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}">
|
||||||
<i class="md-icon">add</i>
|
<i class="material-icons">add</i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="paperList folderList hide" style="margin-bottom:2em;"></div>
|
<div class="paperList folderList hide" style="margin-bottom:2em;"></div>
|
||||||
|
|
|
||||||
|
|
@ -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";
|
"use strict";
|
||||||
|
|
||||||
function onEditLibrary() {
|
function onEditLibrary() {
|
||||||
if (isCreating) return false;
|
if (isCreating) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
isCreating = true;
|
isCreating = true;
|
||||||
loading.show();
|
loading.show();
|
||||||
|
|
||||||
var dlg = dom.parentWithClass(this, "dlg-libraryeditor");
|
var dlg = dom.parentWithClass(this, "dlg-libraryeditor");
|
||||||
var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector(".libraryOptions"));
|
var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector(".libraryOptions"));
|
||||||
libraryOptions = Object.assign(currentOptions.library.LibraryOptions || {}, 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;
|
hasChanges = true;
|
||||||
isCreating = false;
|
isCreating = false;
|
||||||
loading.hide();
|
loading.hide();
|
||||||
dialogHelper.close(dlg);
|
dialogHelper.close(dlg);
|
||||||
}, function() {
|
}, function () {
|
||||||
isCreating = false;
|
isCreating = false;
|
||||||
loading.hide();
|
loading.hide();
|
||||||
});
|
});
|
||||||
|
|
@ -26,11 +26,11 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
|
||||||
function addMediaLocation(page, path, networkSharePath) {
|
function addMediaLocation(page, path, networkSharePath) {
|
||||||
var virtualFolder = currentOptions.library;
|
var virtualFolder = currentOptions.library;
|
||||||
var refreshAfterChange = currentOptions.refresh;
|
var refreshAfterChange = currentOptions.refresh;
|
||||||
ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(function() {
|
ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(function () {
|
||||||
hasChanges = true;
|
hasChanges = true;
|
||||||
refreshLibraryFromServer(page);
|
refreshLibraryFromServer(page);
|
||||||
}, function() {
|
}, function () {
|
||||||
require(["toast"], function(toast) {
|
require(["toast"], function (toast) {
|
||||||
toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
|
toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -41,11 +41,11 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
|
||||||
ApiClient.updateMediaPath(virtualFolder.Name, {
|
ApiClient.updateMediaPath(virtualFolder.Name, {
|
||||||
Path: path,
|
Path: path,
|
||||||
NetworkPath: networkSharePath
|
NetworkPath: networkSharePath
|
||||||
}).then(function() {
|
}).then(function () {
|
||||||
hasChanges = true;
|
hasChanges = true;
|
||||||
refreshLibraryFromServer(page);
|
refreshLibraryFromServer(page);
|
||||||
}, function() {
|
}, function () {
|
||||||
require(["toast"], function(toast) {
|
require(["toast"], function (toast) {
|
||||||
toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
|
toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -54,19 +54,20 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
|
||||||
function onRemoveClick(btnRemovePath, location) {
|
function onRemoveClick(btnRemovePath, location) {
|
||||||
var button = btnRemovePath;
|
var button = btnRemovePath;
|
||||||
var virtualFolder = currentOptions.library;
|
var virtualFolder = currentOptions.library;
|
||||||
require(["confirm"], function(confirm) {
|
|
||||||
|
require(["confirm"], function (confirm) {
|
||||||
confirm({
|
confirm({
|
||||||
title: Globalize.translate("HeaderRemoveMediaLocation"),
|
title: Globalize.translate("HeaderRemoveMediaLocation"),
|
||||||
text: Globalize.translate("MessageConfirmRemoveMediaLocation"),
|
text: Globalize.translate("MessageConfirmRemoveMediaLocation"),
|
||||||
confirmText: Globalize.translate("ButtonDelete"),
|
confirmText: Globalize.translate("ButtonDelete"),
|
||||||
primary: "delete"
|
primary: "delete"
|
||||||
}).then(function() {
|
}).then(function () {
|
||||||
var refreshAfterChange = currentOptions.refresh;
|
var refreshAfterChange = currentOptions.refresh;
|
||||||
ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(function() {
|
ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(function () {
|
||||||
hasChanges = true;
|
hasChanges = true;
|
||||||
refreshLibraryFromServer(dom.parentWithClass(button, "dlg-libraryeditor"));
|
refreshLibraryFromServer(dom.parentWithClass(button, "dlg-libraryeditor"));
|
||||||
}, function() {
|
}, function () {
|
||||||
require(["toast"], function(toast) {
|
require(["toast"], function (toast) {
|
||||||
toast(Globalize.translate("DefaultErrorMessage"));
|
toast(Globalize.translate("DefaultErrorMessage"));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -76,13 +77,19 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
|
||||||
|
|
||||||
function onListItemClick(e) {
|
function onListItemClick(e) {
|
||||||
var listItem = dom.parentWithClass(e.target, "listItem");
|
var listItem = dom.parentWithClass(e.target, "listItem");
|
||||||
|
|
||||||
if (listItem) {
|
if (listItem) {
|
||||||
var index = parseInt(listItem.getAttribute("data-index"));
|
var index = parseInt(listItem.getAttribute("data-index"));
|
||||||
var pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || [];
|
var pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || [];
|
||||||
var pathInfo = null == index ? {} : pathInfos[index] || {};
|
var pathInfo = null == index ? {} : pathInfos[index] || {};
|
||||||
var originalPath = pathInfo.Path || (null == index ? null : currentOptions.library.Locations[index]);
|
var originalPath = pathInfo.Path || (null == index ? null : currentOptions.library.Locations[index]);
|
||||||
var btnRemovePath = dom.parentWithClass(e.target, "btnRemovePath");
|
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);
|
showDirectoryBrowser(dom.parentWithClass(listItem, "dlg-libraryeditor"), originalPath, pathInfo.NetworkPath);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -94,20 +101,23 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
|
||||||
html += '<h3 class="listItemBodyText">';
|
html += '<h3 class="listItemBodyText">';
|
||||||
html += pathInfo.Path;
|
html += pathInfo.Path;
|
||||||
html += "</h3>";
|
html += "</h3>";
|
||||||
|
|
||||||
if (pathInfo.NetworkPath) {
|
if (pathInfo.NetworkPath) {
|
||||||
html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + "</div>";
|
html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + "</div>";
|
||||||
}
|
}
|
||||||
|
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
html += '<button type="button" is="paper-icon-button-light" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="md-icon">remove_circle</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" class="listItemButton btnRemovePath" data-index="' + index + '"><i class="material-icons">remove_circle</i></button>';
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
return html;
|
return html;
|
||||||
}
|
}
|
||||||
|
|
||||||
function refreshLibraryFromServer(page) {
|
function refreshLibraryFromServer(page) {
|
||||||
ApiClient.getVirtualFolders().then(function(result) {
|
ApiClient.getVirtualFolders().then(function (result) {
|
||||||
var library = result.filter(function(f) {
|
var library = result.filter(function (f) {
|
||||||
return f.Name === currentOptions.library.Name
|
return f.Name === currentOptions.library.Name;
|
||||||
})[0];
|
})[0];
|
||||||
|
|
||||||
if (library) {
|
if (library) {
|
||||||
currentOptions.library = library;
|
currentOptions.library = library;
|
||||||
renderLibrary(page, currentOptions);
|
renderLibrary(page, currentOptions);
|
||||||
|
|
@ -117,16 +127,21 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
|
||||||
|
|
||||||
function renderLibrary(page, options) {
|
function renderLibrary(page, options) {
|
||||||
var pathInfos = (options.library.LibraryOptions || {}).PathInfos || [];
|
var pathInfos = (options.library.LibraryOptions || {}).PathInfos || [];
|
||||||
pathInfos.length || (pathInfos = options.library.Locations.map(function(p) {
|
|
||||||
return {
|
if (!pathInfos.length) {
|
||||||
Path: p
|
pathInfos = options.library.Locations.map(function (p) {
|
||||||
}
|
return {
|
||||||
}));
|
Path: p
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
if (options.library.CollectionType === 'boxsets') {
|
if (options.library.CollectionType === 'boxsets') {
|
||||||
page.querySelector(".folders").classList.add("hide");
|
page.querySelector(".folders").classList.add("hide");
|
||||||
} else {
|
} else {
|
||||||
page.querySelector(".folders").classList.remove("hide");
|
page.querySelector(".folders").classList.remove("hide");
|
||||||
}
|
}
|
||||||
|
|
||||||
page.querySelector(".folderList").innerHTML = pathInfos.map(getFolderHtml).join("");
|
page.querySelector(".folderList").innerHTML = pathInfos.map(getFolderHtml).join("");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -135,24 +150,31 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
|
||||||
}
|
}
|
||||||
|
|
||||||
function showDirectoryBrowser(context, originalPath, networkPath) {
|
function showDirectoryBrowser(context, originalPath, networkPath) {
|
||||||
require(["directorybrowser"], function(directoryBrowser) {
|
require(["directorybrowser"], function (directoryBrowser) {
|
||||||
var picker = new directoryBrowser;
|
var picker = new directoryBrowser();
|
||||||
picker.show({
|
picker.show({
|
||||||
enableNetworkSharePath: !0,
|
enableNetworkSharePath: true,
|
||||||
pathReadOnly: null != originalPath,
|
pathReadOnly: null != originalPath,
|
||||||
path: originalPath,
|
path: originalPath,
|
||||||
networkSharePath: networkPath,
|
networkSharePath: networkPath,
|
||||||
callback: function(path, networkSharePath) {
|
callback: function (path, networkSharePath) {
|
||||||
path && (originalPath ? updateMediaLocation(context, originalPath, networkSharePath) : addMediaLocation(context, path, networkSharePath));
|
if (path) {
|
||||||
|
if (originalPath) {
|
||||||
|
updateMediaLocation(context, originalPath, networkSharePath);
|
||||||
|
} else {
|
||||||
|
addMediaLocation(context, path, networkSharePath);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
picker.close();
|
picker.close();
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function onToggleAdvancedChange() {
|
function onToggleAdvancedChange() {
|
||||||
var dlg = dom.parentWithClass(this, "dlg-libraryeditor");
|
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) {
|
function initEditor(dlg, options) {
|
||||||
|
|
@ -161,7 +183,7 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
|
||||||
dlg.querySelector(".folderList").addEventListener("click", onListItemClick);
|
dlg.querySelector(".folderList").addEventListener("click", onListItemClick);
|
||||||
dlg.querySelector(".chkAdvanced").addEventListener("change", onToggleAdvancedChange);
|
dlg.querySelector(".chkAdvanced").addEventListener("change", onToggleAdvancedChange);
|
||||||
dlg.querySelector(".btnSubmit").addEventListener("click", onEditLibrary);
|
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"));
|
onToggleAdvancedChange.call(dlg.querySelector(".chkAdvanced"));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -171,14 +193,15 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
|
||||||
}
|
}
|
||||||
|
|
||||||
function editor() {
|
function editor() {
|
||||||
this.show = function(options) {
|
this.show = function (options) {
|
||||||
var deferred = jQuery.Deferred();
|
var deferred = jQuery.Deferred();
|
||||||
currentOptions = options;
|
currentOptions = options;
|
||||||
currentDeferred = deferred;
|
currentDeferred = deferred;
|
||||||
hasChanges = false;
|
hasChanges = false;
|
||||||
var xhr = new XMLHttpRequest;
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open("GET", "components/medialibraryeditor/medialibraryeditor.template.html", true);
|
xhr.open("GET", "components/medialibraryeditor/medialibraryeditor.template.html", true);
|
||||||
xhr.onload = function(e) {
|
|
||||||
|
xhr.onload = function (e) {
|
||||||
var template = this.response;
|
var template = this.response;
|
||||||
var dlg = dialogHelper.createDialog({
|
var dlg = dialogHelper.createDialog({
|
||||||
size: "medium-tall",
|
size: "medium-tall",
|
||||||
|
|
@ -195,21 +218,20 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
|
||||||
initEditor(dlg, options);
|
initEditor(dlg, options);
|
||||||
dlg.addEventListener("close", onDialogClosed);
|
dlg.addEventListener("close", onDialogClosed);
|
||||||
dialogHelper.open(dlg);
|
dialogHelper.open(dlg);
|
||||||
dlg.querySelector(".btnCancel").addEventListener("click", function() {
|
dlg.querySelector(".btnCancel").addEventListener("click", function () {
|
||||||
dialogHelper.close(dlg);
|
dialogHelper.close(dlg);
|
||||||
});
|
});
|
||||||
refreshLibraryFromServer(dlg);
|
refreshLibraryFromServer(dlg);
|
||||||
};
|
};
|
||||||
|
|
||||||
xhr.send();
|
xhr.send();
|
||||||
return deferred.promise();
|
return deferred.promise();
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
var currentDeferred;
|
var currentDeferred;
|
||||||
var currentOptions;
|
var currentOptions;
|
||||||
|
|
||||||
var hasChanges = false;
|
var hasChanges = false;
|
||||||
var isCreating = false;
|
var isCreating = false;
|
||||||
|
|
||||||
return editor;
|
return editor;
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="formDialogHeader">
|
<div class="formDialogHeader">
|
||||||
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
|
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
|
||||||
<h3 class="formDialogHeaderTitle"></h3>
|
<h3 class="formDialogHeaderTitle"></h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
<div style="display: flex; align-items: center;">
|
<div style="display: flex; align-items: center;">
|
||||||
<h1 style="margin: .5em 0;">${HeadersFolders}</h1>
|
<h1 style="margin: .5em 0;">${HeadersFolders}</h1>
|
||||||
<button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}">
|
<button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}">
|
||||||
<i class="md-icon">add</i>
|
<i class="material-icons">add</i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="paperList folderList" style="margin-bottom:2em;"></div>
|
<div class="paperList folderList" style="margin-bottom:2em;"></div>
|
||||||
|
|
|
||||||
|
|
@ -477,7 +477,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
if (formatString) {
|
if (formatString) {
|
||||||
html += '<button type="button" is="paper-icon-button-light" class="btnOpenExternalId align-self-flex-end" data-fieldid="' + id + '"><i class="md-icon">open_in_browser</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" class="btnOpenExternalId align-self-flex-end" data-fieldid="' + id + '"><i class="material-icons">open_in_browser</i></button>';
|
||||||
}
|
}
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
|
|
@ -917,7 +917,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
|
||||||
for (var i = 0; i < items.length; i++) {
|
for (var i = 0; i < items.length; i++) {
|
||||||
html += '<div class="listItem">';
|
html += '<div class="listItem">';
|
||||||
|
|
||||||
html += '<i class="md-icon listItemIcon" style="background-color:#333;">live_tv</i>';
|
html += '<i class="material-icons listItemIcon" style="background-color:#333;">live_tv</i>';
|
||||||
|
|
||||||
html += '<div class="listItemBody">';
|
html += '<div class="listItemBody">';
|
||||||
|
|
||||||
|
|
@ -927,7 +927,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '<button type="button" is="paper-icon-button-light" data-index="' + i + '" class="btnRemoveFromEditorList autoSize"><i class="md-icon">delete</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" data-index="' + i + '" class="btnRemoveFromEditorList autoSize"><i class="material-icons">delete</i></button>';
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
}
|
}
|
||||||
|
|
@ -948,7 +948,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
|
||||||
|
|
||||||
html += '<div class="listItem">';
|
html += '<div class="listItem">';
|
||||||
|
|
||||||
html += '<i class="md-icon listItemIcon" style="background-color:#333;">person</i>';
|
html += '<i class="material-icons listItemIcon" style="background-color:#333;">person</i>';
|
||||||
|
|
||||||
html += '<div class="listItemBody">';
|
html += '<div class="listItemBody">';
|
||||||
html += '<button style="text-align:left;" type="button" class="btnEditPerson clearButton" data-index="' + i + '">';
|
html += '<button style="text-align:left;" type="button" class="btnEditPerson clearButton" data-index="' + i + '">';
|
||||||
|
|
@ -964,7 +964,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
|
||||||
html += '</button>';
|
html += '</button>';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '<button type="button" is="paper-icon-button-light" data-index="' + i + '" class="btnDeletePerson autoSize"><i class="md-icon">delete</i></button>';
|
html += '<button type="button" is="paper-icon-button-light" data-index="' + i + '" class="btnDeletePerson autoSize"><i class="material-icons">delete</i></button>';
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
<div class="formDialogHeader">
|
<div class="formDialogHeader">
|
||||||
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
|
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
|
||||||
<h3 class="formDialogHeaderTitle">
|
<h3 class="formDialogHeaderTitle">
|
||||||
${Edit}
|
${Edit}
|
||||||
</h3>
|
</h3>
|
||||||
<div style="margin-left: auto;" class="flex align-items-center justify-content-center">
|
<div style="margin-left: auto;" class="flex align-items-center justify-content-center">
|
||||||
<button is="emby-button" type="button" class="btnHeaderSave button-accent-flat button-flat hide" tabindex="-1">
|
<button is="emby-button" type="button" class="btnHeaderSave button-accent-flat button-flat hide" tabindex="-1">
|
||||||
<i class="md-icon">check</i>
|
<i class="material-icons">check</i>
|
||||||
<span>${Save}</span>
|
<span>${Save}</span>
|
||||||
</button>
|
</button>
|
||||||
<button is="paper-icon-button-light" class="btnMore autoSize" tabindex="-1">
|
<button is="paper-icon-button-light" class="btnMore autoSize" tabindex="-1">
|
||||||
<i class="md-icon">more_horiz</i>
|
<i class="material-icons">more_horiz</i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -184,7 +184,7 @@
|
||||||
${Genres}
|
${Genres}
|
||||||
</h2>
|
</h2>
|
||||||
<button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
|
<button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
|
||||||
<i class="md-icon">add</i>
|
<i class="material-icons">add</i>
|
||||||
</button>
|
</button>
|
||||||
<div class="paperList" id="listGenres"></div>
|
<div class="paperList" id="listGenres"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -193,7 +193,7 @@
|
||||||
${People}
|
${People}
|
||||||
</h2>
|
</h2>
|
||||||
<button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson" style="margin-left:1em;" title="${Add}">
|
<button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson" style="margin-left:1em;" title="${Add}">
|
||||||
<i class="md-icon">add</i>
|
<i class="material-icons">add</i>
|
||||||
</button>
|
</button>
|
||||||
<div id="peopleList" class="paperList">
|
<div id="peopleList" class="paperList">
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -203,7 +203,7 @@
|
||||||
${Studios}
|
${Studios}
|
||||||
</h2>
|
</h2>
|
||||||
<button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
|
<button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
|
||||||
<i class="md-icon">add</i>
|
<i class="material-icons">add</i>
|
||||||
</button>
|
</button>
|
||||||
<div class="paperList" id="listStudios"></div>
|
<div class="paperList" id="listStudios"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -212,7 +212,7 @@
|
||||||
${Tags}
|
${Tags}
|
||||||
</h2>
|
</h2>
|
||||||
<button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
|
<button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
|
||||||
<i class="md-icon">add</i>
|
<i class="material-icons">add</i>
|
||||||
</button>
|
</button>
|
||||||
<div class="paperList" id="listTags"></div>
|
<div class="paperList" id="listTags"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="formDialogHeader">
|
<div class="formDialogHeader">
|
||||||
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
|
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
|
||||||
<h3 class="formDialogHeaderTitle">
|
<h3 class="formDialogHeaderTitle">
|
||||||
${Edit}
|
${Edit}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
background-color: rgba(0, 0, 0, .3);
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
z-index: 99998;
|
z-index: 99998;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding: 1em .5em;
|
padding: 1em 0.5em;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
z-index: 99999;
|
z-index: 99999;
|
||||||
|
|
|
||||||
|
|
@ -126,11 +126,11 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
|
||||||
|
|
||||||
var html = "";
|
var html = "";
|
||||||
|
|
||||||
html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><i class="md-icon">close</i></button>';
|
html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><i class="material-icons">close</i></button>';
|
||||||
html += '<h1 class="itemSelectionCount"></h1>';
|
html += '<h1 class="itemSelectionCount"></h1>';
|
||||||
|
|
||||||
var moreIcon = "more_horiz";
|
var moreIcon = "more_horiz";
|
||||||
html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><i class="md-icon">' + moreIcon + '</i></button>';
|
html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><i class="material-icons">' + moreIcon + '</i></button>';
|
||||||
|
|
||||||
selectionCommandsPanel.innerHTML = html;
|
selectionCommandsPanel.innerHTML = html;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,11 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
contain: strict
|
contain: strict;
|
||||||
}
|
}
|
||||||
|
|
||||||
.touch-menu-la {
|
.touch-menu-la {
|
||||||
background-color: #FFF;
|
background-color: #fff;
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
|
|
@ -15,39 +15,38 @@
|
||||||
-webkit-transition: -webkit-transform ease-out 40ms, left ease-out 260ms;
|
-webkit-transition: -webkit-transform ease-out 40ms, left ease-out 260ms;
|
||||||
-o-transition: 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;
|
transition: transform ease-out 40ms, left ease-out 260ms;
|
||||||
z-index: 1099
|
z-index: 1099;
|
||||||
}
|
}
|
||||||
|
|
||||||
.touch-menu-la.transition {
|
.touch-menu-la.transition {
|
||||||
-webkit-transition: -webkit-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;
|
-o-transition: transform ease-out 240ms, left ease-out 260ms;
|
||||||
transition: transform ease-out 240ms, left ease-out 260ms
|
transition: transform ease-out 240ms, left ease-out 260ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-open {
|
.drawer-open {
|
||||||
-webkit-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, .4)
|
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.scrollContainer {
|
.scrollContainer {
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
-webkit-flex-grow: 1;
|
-webkit-flex-grow: 1;
|
||||||
flex-grow: 1
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tmla-mask {
|
.tmla-mask {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: #000;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 1098;
|
z-index: 1098;
|
||||||
-webkit-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 .38s, visibility ease-in-out .38s;
|
-o-transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
|
||||||
transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
|
transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
|
||||||
will-change: opacity;
|
will-change: opacity;
|
||||||
background-color: rgba(0, 0, 0, .3)
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tmla-mask.backdrop {
|
.tmla-mask.backdrop {
|
||||||
opacity: 1
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser, dom) {
|
define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, dom) {
|
||||||
"use strict";
|
"use strict";
|
||||||
return function(options) {
|
|
||||||
|
return function (options) {
|
||||||
function getTouches(e) {
|
function getTouches(e) {
|
||||||
return e.changedTouches || e.targetTouches || e.touches;
|
return e.changedTouches || e.targetTouches || e.touches;
|
||||||
}
|
}
|
||||||
|
|
@ -9,14 +10,13 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
|
||||||
options.target.classList.remove("transition");
|
options.target.classList.remove("transition");
|
||||||
var touches = getTouches(e);
|
var touches = getTouches(e);
|
||||||
var touch = touches[0] || {};
|
var touch = touches[0] || {};
|
||||||
|
|
||||||
menuTouchStartX = touch.clientX;
|
menuTouchStartX = touch.clientX;
|
||||||
menuTouchStartY = touch.clientY;
|
menuTouchStartY = touch.clientY;
|
||||||
menuTouchStartTime = (new Date).getTime();
|
menuTouchStartTime = new Date().getTime();
|
||||||
}
|
}
|
||||||
|
|
||||||
function setVelocity(deltaX) {
|
function setVelocity(deltaX) {
|
||||||
var time = (new Date).getTime() - (menuTouchStartTime || 0);
|
var time = new Date().getTime() - (menuTouchStartTime || 0);
|
||||||
velocity = Math.abs(deltaX) / time;
|
velocity = Math.abs(deltaX) / time;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -28,21 +28,36 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
|
||||||
var endY = touch.clientY || 0;
|
var endY = touch.clientY || 0;
|
||||||
var deltaX = endX - (menuTouchStartX || 0);
|
var deltaX = endX - (menuTouchStartX || 0);
|
||||||
var deltaY = endY - (menuTouchStartY || 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) {
|
function onMenuTouchEnd(e) {
|
||||||
options.target.classList.add("transition");
|
options.target.classList.add("transition");
|
||||||
scrollContainer.removeEventListener("scroll", disableEvent);
|
scrollContainer.removeEventListener("scroll", disableEvent);
|
||||||
dragMode = 0;
|
dragMode = 0;
|
||||||
|
|
||||||
var touches = getTouches(e);
|
var touches = getTouches(e);
|
||||||
var touch = touches[0] || {};
|
var touch = touches[0] || {};
|
||||||
var endX = touch.clientX || 0;
|
var endX = touch.clientX || 0;
|
||||||
var endY = touch.clientY || 0;
|
var endY = touch.clientY || 0;
|
||||||
var deltaX = endX - (menuTouchStartX || 0);
|
var deltaX = endX - (menuTouchStartX || 0);
|
||||||
var deltaY = endY - (menuTouchStartY || 0);
|
var deltaY = endY - (menuTouchStartY || 0);
|
||||||
|
|
||||||
currentPos = deltaX;
|
currentPos = deltaX;
|
||||||
self.checkMenuState(deltaX, deltaY);
|
self.checkMenuState(deltaX, deltaY);
|
||||||
}
|
}
|
||||||
|
|
@ -53,10 +68,12 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
|
||||||
} else {
|
} else {
|
||||||
if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
|
if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
|
||||||
isPeeking = true;
|
isPeeking = true;
|
||||||
|
|
||||||
if (e.type === "touchstart") {
|
if (e.type === "touchstart") {
|
||||||
dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
|
dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
|
||||||
dom.addEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
|
dom.addEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
|
||||||
}
|
}
|
||||||
|
|
||||||
onMenuTouchStart(e);
|
onMenuTouchStart(e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -65,38 +82,52 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
|
||||||
function onEdgeTouchMove(e) {
|
function onEdgeTouchMove(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
||||||
onEdgeTouchStart(e);
|
onEdgeTouchStart(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onEdgeTouchEnd(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) {
|
function disableEvent(e) {
|
||||||
e.preventDefault(), e.stopPropagation()
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
}
|
}
|
||||||
|
|
||||||
function onBackgroundTouchStart(e) {
|
function onBackgroundTouchStart(e) {
|
||||||
var touches = getTouches(e);
|
var touches = getTouches(e);
|
||||||
var touch = touches[0] || {};
|
var touch = touches[0] || {};
|
||||||
backgroundTouchStartX = touch.clientX, backgroundTouchStartTime = (new Date).getTime()
|
backgroundTouchStartX = touch.clientX;
|
||||||
|
backgroundTouchStartTime = new Date().getTime();
|
||||||
}
|
}
|
||||||
|
|
||||||
function onBackgroundTouchMove(e) {
|
function onBackgroundTouchMove(e) {
|
||||||
var touches = getTouches(e);
|
var touches = getTouches(e);
|
||||||
var touch = touches[0] || {};
|
var touch = touches[0] || {};
|
||||||
var endX = touch.clientX || 0;
|
var endX = touch.clientX || 0;
|
||||||
|
|
||||||
if (endX <= options.width && self.isVisible) {
|
if (endX <= options.width && self.isVisible) {
|
||||||
countStart++;
|
countStart++;
|
||||||
var deltaX = endX - (backgroundTouchStartX || 0);
|
var deltaX = endX - (backgroundTouchStartX || 0);
|
||||||
if (1 === countStart && (startPoint = deltaX), deltaX < 0 && 2 !== dragMode) {
|
|
||||||
dragMode = 1, newPos = deltaX - startPoint + options.width, self.changeMenuPos();
|
if (countStart == 1) {
|
||||||
var time = (new Date).getTime() - (backgroundTouchStartTime || 0);
|
startPoint = deltaX;
|
||||||
velocity = Math.abs(deltaX) / time
|
}
|
||||||
|
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) {
|
function onBackgroundTouchEnd(e) {
|
||||||
|
|
@ -104,13 +135,18 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
|
||||||
var touch = touches[0] || {};
|
var touch = touches[0] || {};
|
||||||
var endX = touch.clientX || 0;
|
var endX = touch.clientX || 0;
|
||||||
var deltaX = endX - (backgroundTouchStartX || 0);
|
var deltaX = endX - (backgroundTouchStartX || 0);
|
||||||
self.checkMenuState(deltaX), countStart = 0
|
self.checkMenuState(deltaX);
|
||||||
|
countStart = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMaskTransitionEnd() {
|
function onMaskTransitionEnd() {
|
||||||
var classList = mask.classList;
|
var classList = mask.classList;
|
||||||
classList.contains("backdrop") || classList.add("hide")
|
|
||||||
|
if (!classList.contains("backdrop")) {
|
||||||
|
classList.add("hide");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var self;
|
var self;
|
||||||
var defaults;
|
var defaults;
|
||||||
var mask;
|
var mask;
|
||||||
|
|
@ -123,83 +159,195 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function(browser,
|
||||||
var dragMode = 0;
|
var dragMode = 0;
|
||||||
var scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer");
|
var scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer");
|
||||||
scrollContainer.classList.add("scrollY");
|
scrollContainer.classList.add("scrollY");
|
||||||
var TouchMenuLA = function() {
|
|
||||||
self = this, defaults = {
|
var TouchMenuLA = function () {
|
||||||
|
self = this;
|
||||||
|
defaults = {
|
||||||
width: 260,
|
width: 260,
|
||||||
handleSize: 10,
|
handleSize: 10,
|
||||||
disableMask: !1,
|
disableMask: false,
|
||||||
maxMaskOpacity: 0.5
|
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, {
|
TouchMenuLA.prototype.initElements = function () {
|
||||||
passive: !0
|
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 menuTouchStartX;
|
||||||
var menuTouchStartY;
|
var menuTouchStartY;
|
||||||
var menuTouchStartTime;
|
var menuTouchStartTime;
|
||||||
var edgeContainer = document.querySelector(".mainDrawerHandle");
|
var edgeContainer = document.querySelector(".mainDrawerHandle");
|
||||||
var isPeeking = false;
|
var isPeeking = false;
|
||||||
TouchMenuLA.prototype.animateToPosition = function(pos) {
|
|
||||||
requestAnimationFrame(function() {
|
TouchMenuLA.prototype.animateToPosition = function (pos) {
|
||||||
options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none"
|
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.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 backgroundTouchStartX;
|
||||||
var backgroundTouchStartTime;
|
var backgroundTouchStartTime;
|
||||||
TouchMenuLA.prototype.showMask = function() {
|
|
||||||
mask.classList.remove("hide"), mask.offsetWidth, mask.classList.add("backdrop")
|
TouchMenuLA.prototype.showMask = function () {
|
||||||
}, TouchMenuLA.prototype.hideMask = function() {
|
mask.classList.remove("hide");
|
||||||
mask.classList.remove("backdrop")
|
mask.offsetWidth;
|
||||||
}, TouchMenuLA.prototype.invoke = function(fn) {
|
mask.classList.add("backdrop");
|
||||||
fn && fn.apply(self)
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
TouchMenuLA.prototype.hideMask = function () {
|
||||||
|
mask.classList.add("hide");
|
||||||
|
mask.classList.remove("backdrop");
|
||||||
|
};
|
||||||
|
|
||||||
|
TouchMenuLA.prototype.invoke = function (fn) {
|
||||||
|
if (fn) {
|
||||||
|
fn.apply(self);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
var _edgeSwipeEnabled;
|
var _edgeSwipeEnabled;
|
||||||
return TouchMenuLA.prototype.setEdgeSwipeEnabled = function(enabled) {
|
|
||||||
options.disableEdgeSwipe || browser.touch && (enabled ? _edgeSwipeEnabled || (_edgeSwipeEnabled = !0, dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
|
TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) {
|
||||||
passive: !0
|
if (!options.disableEdgeSwipe) {
|
||||||
}), dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
|
if (browser.touch) {
|
||||||
passive: !0
|
if (enabled) {
|
||||||
}), dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
|
if (!_edgeSwipeEnabled) {
|
||||||
passive: !0
|
_edgeSwipeEnabled = true;
|
||||||
})) : _edgeSwipeEnabled && (_edgeSwipeEnabled = !1, dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
|
dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
|
||||||
passive: !0
|
passive: true
|
||||||
}), dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
|
});
|
||||||
passive: !0
|
dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
|
||||||
}), dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
|
passive: true
|
||||||
passive: !0
|
});
|
||||||
})))
|
dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
|
||||||
}, TouchMenuLA.prototype.initialize = function() {
|
passive: true
|
||||||
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, {
|
} else {
|
||||||
passive: !0
|
if (_edgeSwipeEnabled) {
|
||||||
}), dom.addEventListener(options.target, "touchend", onMenuTouchEnd, {
|
_edgeSwipeEnabled = false;
|
||||||
passive: !0
|
dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
|
||||||
}), dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, {
|
passive: true
|
||||||
passive: !0
|
});
|
||||||
}), dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, {
|
dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
|
||||||
passive: !0
|
passive: true
|
||||||
}), dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {}), dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, {
|
});
|
||||||
passive: !0
|
dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
|
||||||
}), dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, {
|
passive: true
|
||||||
passive: !0
|
});
|
||||||
})), self.clickMaskClose()
|
}
|
||||||
}, new TouchMenuLA
|
}
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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();
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingBar-hidden {
|
.nowPlayingBar-hidden {
|
||||||
transform: translate3d(0,100%,0);
|
transform: translate3d(0, 100%, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingBarTop {
|
.nowPlayingBarTop {
|
||||||
|
|
@ -28,7 +28,8 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
|
.mediaButton,
|
||||||
|
.nowPlayingBarUserDataButtons .btnUserItemRating {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -62,6 +63,7 @@
|
||||||
.nowPlayingBarCenter {
|
.nowPlayingBarCenter {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
/* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
|
/* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
@ -74,7 +76,7 @@
|
||||||
.nowPlayingBarPositionContainer {
|
.nowPlayingBarPositionContainer {
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: -.56em;
|
top: -0.56em;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -89,7 +91,8 @@
|
||||||
|
|
||||||
.nowPlayingBarRight {
|
.nowPlayingBarRight {
|
||||||
position: relative;
|
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 */
|
/* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -121,7 +124,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 70em) {
|
@media all and (max-width: 70em) {
|
||||||
|
|
||||||
.nowPlayingBarRight .nowPlayingBarUserDataButtons {
|
.nowPlayingBarRight .nowPlayingBarUserDataButtons {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -155,13 +157,15 @@
|
||||||
.nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
|
.nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingBarInfoContainer {
|
.nowPlayingBarInfoContainer {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 24em) {
|
@media all and (max-width: 24em) {
|
||||||
.nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
|
.nowPlayingBar .muteButton,
|
||||||
|
.nowPlayingBar .unmuteButton {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -42,31 +42,31 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
|
||||||
// The onclicks are needed due to the return false above
|
// The onclicks are needed due to the return false above
|
||||||
html += '<div class="nowPlayingBarCenter">';
|
html += '<div class="nowPlayingBarCenter">';
|
||||||
|
|
||||||
html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton"><i class="md-icon">skip_previous</i></button>';
|
html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton"><i class="material-icons">skip_previous</i></button>';
|
||||||
|
|
||||||
html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="md-icon">pause</i></button>';
|
html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="material-icons">pause</i></button>';
|
||||||
|
|
||||||
html += '<button is="paper-icon-button-light" class="stopButton mediaButton"><i class="md-icon">stop</i></button>';
|
html += '<button is="paper-icon-button-light" class="stopButton mediaButton"><i class="material-icons">stop</i></button>';
|
||||||
html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><i class="md-icon">skip_next</i></button>';
|
html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><i class="material-icons">skip_next</i></button>';
|
||||||
|
|
||||||
html += '<div class="nowPlayingBarCurrentTime"></div>';
|
html += '<div class="nowPlayingBarCurrentTime"></div>';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '<div class="nowPlayingBarRight">';
|
html += '<div class="nowPlayingBarRight">';
|
||||||
|
|
||||||
html += '<button is="paper-icon-button-light" class="muteButton mediaButton"><i class="md-icon">volume_up</i></button>';
|
html += '<button is="paper-icon-button-light" class="muteButton mediaButton"><i class="material-icons">volume_up</i></button>';
|
||||||
|
|
||||||
html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer hide" style="width:9em;vertical-align:middle;display:inline-flex;">';
|
html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer hide" style="width:9em;vertical-align:middle;display:inline-flex;">';
|
||||||
html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarVolumeSlider"/>';
|
html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarVolumeSlider"/>';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><i class="md-icon">repeat</i></button>';
|
html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><i class="material-icons">repeat</i></button>';
|
||||||
|
|
||||||
html += '<div class="nowPlayingBarUserDataButtons">';
|
html += '<div class="nowPlayingBarUserDataButtons">';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="md-icon">pause</i></button>';
|
html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="material-icons">pause</i></button>';
|
||||||
html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton"><i class="md-icon">playlist_play</i></button>';
|
html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton"><i class="material-icons">playlist_play</i></button>';
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
@ -571,7 +571,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
|
||||||
var userData = item.UserData || {};
|
var userData = item.UserData || {};
|
||||||
var likes = userData.Likes == null ? '' : userData.Likes;
|
var likes = userData.Likes == null ? '' : userData.Likes;
|
||||||
|
|
||||||
nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">favorite</i></button>';
|
nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons">favorite</i></button>';
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
@ -11,7 +11,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
||||||
function getOsdElementHtml() {
|
function getOsdElementHtml() {
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
html += '<i class="md-icon iconOsdIcon">brightness_high</i>';
|
html += '<i class="material-icons iconOsdIcon">brightness_high</i>';
|
||||||
|
|
||||||
html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner brightnessOsdProgressInner"></div></div>';
|
html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner brightnessOsdProgressInner"></div></div>';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,11 @@
|
||||||
right: 3%;
|
right: 3%;
|
||||||
z-index: 100000;
|
z-index: 100000;
|
||||||
background: #222;
|
background: #222;
|
||||||
background: rgba(0, 0, 0, .8);
|
background: rgba(0, 0, 0, 0.8);
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
backdrop-filter: blur(5px);
|
backdrop-filter: blur(5px);
|
||||||
border-radius: .25em;
|
border-radius: 0.25em;
|
||||||
transition: opacity 200ms ease-out;
|
transition: opacity 200ms ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -19,22 +19,22 @@
|
||||||
.iconOsdIcon {
|
.iconOsdIcon {
|
||||||
font-size: 320%;
|
font-size: 320%;
|
||||||
display: block;
|
display: block;
|
||||||
margin: .25em .7em;
|
margin: 0.25em 0.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconOsdProgressOuter {
|
.iconOsdProgressOuter {
|
||||||
margin: 1.5em .25em 1em;
|
margin: 1.5em 0.25em 1em;
|
||||||
height: .35em;
|
height: 0.35em;
|
||||||
background: #222;
|
background: #222;
|
||||||
border-radius: .25em;
|
border-radius: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconOsdProgressInner {
|
.iconOsdProgressInner {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: .25em;
|
border-radius: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brightnessOsdProgressInner {
|
.brightnessOsdProgressInner {
|
||||||
background: #FF9800;
|
background: #ff9800;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -97,6 +97,12 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
|
||||||
}
|
}
|
||||||
|
|
||||||
function updatePlayerState(player, state, eventName) {
|
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;
|
var item = state.NowPlayingItem;
|
||||||
|
|
||||||
|
|
@ -118,19 +124,9 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
|
||||||
}
|
}
|
||||||
|
|
||||||
var playState = state.PlayState || {};
|
var playState = state.PlayState || {};
|
||||||
|
|
||||||
var parts = nowPlayingHelper.getNowPlayingNames(item);
|
var parts = nowPlayingHelper.getNowPlayingNames(item);
|
||||||
|
var artist = parts[parts.length - 1].text;
|
||||||
var artist = parts.length === 1 ? '' : parts[0].text;
|
var title = 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 albumArtist;
|
var albumArtist;
|
||||||
|
|
||||||
if (item.AlbumArtists && item.AlbumArtists[0]) {
|
if (item.AlbumArtists && item.AlbumArtists[0]) {
|
||||||
|
|
@ -147,17 +143,6 @@ define(['playbackManager', 'nowPlayingHelper', 'events', 'connectionManager'], f
|
||||||
var isPaused = playState.IsPaused || false;
|
var isPaused = playState.IsPaused || false;
|
||||||
var canSeek = playState.CanSeek || 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) {
|
if (navigator.mediaSession) {
|
||||||
navigator.mediaSession.metadata = new MediaMetadata({
|
navigator.mediaSession.metadata = new MediaMetadata({
|
||||||
title: title,
|
title: title,
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
||||||
function getOsdElementHtml() {
|
function getOsdElementHtml() {
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
html += '<i class="md-icon iconOsdIcon">volume_up</i>';
|
html += '<i class="material-icons iconOsdIcon">volume_up</i>';
|
||||||
|
|
||||||
html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner"></div></div>';
|
html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner"></div></div>';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,10 @@
|
||||||
.playerStats {
|
.playerStats {
|
||||||
background: rgba(28,28,28,0.8);
|
background: rgba(28, 28, 28, 0.8);
|
||||||
border-radius: .3em;
|
border-radius: 0.3em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
left: 1.5em;
|
left: 1.5em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5em;
|
top: 5em;
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.playerStats-tv {
|
.playerStats-tv {
|
||||||
|
|
@ -23,8 +22,8 @@
|
||||||
|
|
||||||
.playerStats-closeButton {
|
.playerStats-closeButton {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: .25em;
|
top: 0.25em;
|
||||||
right: .25em;
|
right: 0.25em;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -44,7 +43,7 @@
|
||||||
|
|
||||||
.playerStats-stat-label {
|
.playerStats-stat-label {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin: 0 .5em 0 0;
|
margin: 0 0.5em 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playerStats-stat-header {
|
.playerStats-stat-header {
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'playMeth
|
||||||
if (layoutManager.tv) {
|
if (layoutManager.tv) {
|
||||||
button = '';
|
button = '';
|
||||||
} else {
|
} else {
|
||||||
button = '<button type="button" is="paper-icon-button-light" class="playerStats-closeButton"><i class="md-icon">close</i></button>';
|
button = '<button type="button" is="paper-icon-button-light" class="playerStats-closeButton"><i class="material-icons">close</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
var contentClass = layoutManager.tv ? 'playerStats-content playerStats-content-tv' : 'playerStats-content';
|
var contentClass = layoutManager.tv ? 'playerStats-content playerStats-content-tv' : 'playerStats-content';
|
||||||
|
|
|
||||||
|
|
@ -258,7 +258,7 @@ define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager',
|
||||||
var title = globalize.translate('HeaderAddToPlaylist');
|
var title = globalize.translate('HeaderAddToPlaylist');
|
||||||
|
|
||||||
html += '<div class="formDialogHeader">';
|
html += '<div class="formDialogHeader">';
|
||||||
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
|
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>';
|
||||||
html += '<h3 class="formDialogHeaderTitle">';
|
html += '<h3 class="formDialogHeaderTitle">';
|
||||||
html += title;
|
html += title;
|
||||||
html += '</h3>';
|
html += '</h3>';
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="formDialogHeader">
|
<div class="formDialogHeader">
|
||||||
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
|
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
|
||||||
<i class="md-icon">arrow_back</i>
|
<i class="material-icons">arrow_back</i>
|
||||||
</button>
|
</button>
|
||||||
<h3 class="formDialogHeaderTitle"></h3>
|
<h3 class="formDialogHeaderTitle"></h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.recordingDialog-itemName {
|
.recordingDialog-itemName {
|
||||||
margin-top: .7em;
|
margin-top: 0.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recordingDetailsContainer {
|
.recordingDetailsContainer {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="formDialogHeader">
|
<div class="formDialogHeader">
|
||||||
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
|
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="material-icons">arrow_back</i></button>
|
||||||
<h3 class="formDialogHeaderTitle"></h3>
|
<h3 class="formDialogHeaderTitle"></h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="formDialogContent smoothScrollY">
|
<div class="formDialogContent smoothScrollY">
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue