1
0
Fork 0
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 2020-01-30 20:11:40 +03:00
commit b06afa3305
247 changed files with 5884 additions and 3079 deletions

View file

@ -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
View 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,
}
}

View file

@ -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"
} }
} }

View file

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

View file

@ -9,4 +9,4 @@
vertical-align: middle; vertical-align: middle;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
} }

View file

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

View file

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

View file

@ -44,4 +44,4 @@
.align-self-flex-end { .align-self-flex-end {
align-self: flex-end; align-self: flex-end;
} }

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -8,6 +8,6 @@
contain: layout style; contain: layout style;
} }
.appfooter.headroom--unpinned { .appfooter.headroom--unpinned {
transform: translateY(100%)!important; transform: translateY(100%) !important;
} }

View file

@ -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]) {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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) {

View file

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

View file

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

View file

@ -8,4 +8,4 @@
.headroom--unpinned:not(.headroomDisabled) { .headroom--unpinned:not(.headroomDisabled) {
transform: translateY(-100%); transform: translateY(-100%);
} }

View file

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

View file

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

View file

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

View file

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

View file

@ -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 {

View file

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

View file

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

View file

@ -6,4 +6,4 @@
.first-imageEditor-buttons { .first-imageEditor-buttons {
margin-top: 2em; margin-top: 2em;
} }

View file

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

View file

@ -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">

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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("&amp;", "&"); var name = this.options[index].innerHTML.replace("*", "").replace("&amp;", "&");
$("#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
}); });

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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,

View file

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

View file

@ -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 {

View file

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

View file

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

View file

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

View file

@ -9,7 +9,7 @@
} }
.recordingDialog-itemName { .recordingDialog-itemName {
margin-top: .7em; margin-top: 0.7em;
} }
.recordingDetailsContainer { .recordingDetailsContainer {

View file

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