Merge remote-tracking branch 'upstream/master' into exit_on_back2

Conflicts:
	src/components/apphost.js
This commit is contained in:
Dmitry Lyzo 2020-01-27 17:47:19 +03:00
commit ddf7eae55b
136 changed files with 4985 additions and 2523 deletions

View File

@ -57,3 +57,7 @@ jobs:
- script: 'yarn run lint'
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

@ -5,15 +5,17 @@
"repository": "https://github.com/jellyfin/jellyfin-web",
"license": "GPL-2.0-or-later",
"devDependencies": {
"autoprefixer": "^9.7.3",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^2.1.0",
"eslint": "^5.16.0",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"stylelint": "^13.0.0",
"stylelint-config-rational-order": "^0.1.2",
"stylelint-no-browser-hacks": "^1.2.1",
"stylelint-order": "^4.0.0",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-concat-plugin": "^3.0.0",
@ -28,6 +30,7 @@
"howler": "^2.1.2",
"jquery": "^3.4.1",
"jstree": "^3.3.7",
"libass-wasm": "^2.1.1",
"libjass": "^0.11.0",
"native-promise-only": "^0.8.0-a",
"requirejs": "^2.3.5",
@ -35,7 +38,6 @@
"shaka-player": "^2.5.5",
"sortablejs": "^1.9.0",
"swiper": "^3.4.2",
"libass-wasm": "^2.1.1",
"webcomponents.js": "^0.7.24",
"whatwg-fetch": "^1.1.1"
},
@ -51,13 +53,13 @@
"Chrome 53",
"Chrome 56",
"Chrome 63",
"Explorer 11",
"Firefox ESR"
],
"scripts": {
"serve": "webpack-dev-server --config webpack.dev.js --open",
"build": "webpack --config webpack.prod.js",
"lint": "eslint \"src\"",
"stylelint": "stylelint src/**/*.css",
"prepare": "webpack --config webpack.prod.js"
}
}

View File

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

View File

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

View File

@ -1,262 +1,314 @@
.dashboardColumn,
.dashboardSections {
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
.dashboardFooter {
margin-top: 3.5em;
text-align: center
text-align: center;
}
.dashboardFooter a {
margin: 0 .7em
margin: 0 0.7em;
}
progress {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
margin: 0;
background: #ccc !important
background: #ccc !important;
}
progress[role]:after {
background-image: none
progress[role]::after {
background-image: none;
}
progress::-webkit-progress-bar {
background: #ccc
background: #ccc;
}
progress::-moz-progress-bar {
background-color: #00a4dc
background-color: #00a4dc;
}
progress::-webkit-progress-value {
background-color: #00a4dc
background-color: #00a4dc;
}
progress[aria-valuenow]:before {
border-radius: .4em;
background-color: #00a4dc
progress[aria-valuenow]::before {
border-radius: 0.4em;
background-color: #00a4dc;
}
.localnav {
margin-bottom: 2.2em !important
margin-bottom: 2.2em !important;
}
@media all and (min-width:50em) {
.type-interior>.ui-panel-content-wrap>div[data-role=content],
.type-interior>div[data-role=content] {
@media all and (min-width: 50em) {
.type-interior > div[data-role=content],
.type-interior > .ui-panel-content-wrap > div[data-role=content] {
padding-right: 0;
padding-left: 0;
padding-top: 0;
overflow: hidden
overflow: hidden;
}
}
.dashboardDocument .dashboardEntryHeaderButton,
.dashboardDocument .lnkManageServer {
display: none !important
display: none !important;
}
.adminDrawerLogo {
padding: 1.5em 1em 1.2em;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 1em;
display: block
display: block;
}
.adminDrawerLogo img {
height: 4em
height: 4em;
}
a[data-role=button] {
background: #292929 !important;
background-clip: padding-box;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
-webkit-background-clip: padding-box;
cursor: pointer !important;
font-family: inherit !important;
font-weight: 500 !important;
margin: 0 0.25em !important;
display: inline-block;
padding: 0.8em 1em;
text-align: center;
text-decoration: none !important;
}
div[data-role=controlgroup] a[data-role=button] {
display: inline-block !important;
margin: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-radius: 0
-webkit-border-radius: 0;
border-radius: 0;
}
div[data-role=controlgroup] a[data-role=button]:first-child {
border-bottom-left-radius: .3125em;
border-top-left-radius: .3125em
-webkit-border-bottom-left-radius: 0.3125em;
border-bottom-left-radius: 0.3125em;
-webkit-border-top-left-radius: 0.3125em;
border-top-left-radius: 0.3125em;
}
div[data-role=controlgroup] a[data-role=button]:last-child {
border-bottom-right-radius: .3125em;
border-top-right-radius: .3125em
-webkit-border-bottom-right-radius: 0.3125em;
border-bottom-right-radius: 0.3125em;
-webkit-border-top-right-radius: 0.3125em;
border-top-right-radius: 0.3125em;
}
div[data-role=controlgroup] a[data-role=button]+a[data-role=button] {
div[data-role=controlgroup] a[data-role=button] + a[data-role=button] {
border-left-width: 0 !important;
margin: 0 0 0 -.4em !important
margin: 0 0 0 -0.4em !important;
}
div[data-role=controlgroup] a.ui-btn-active {
background: #00a4dc !important;
color: #292929 !important
color: #292929 !important;
}
.header .imageLink {
display: inline-block
.sessionAppInfo img {
max-width: 40px;
max-height: 40px;
margin-right: 8px;
}
.header .imageLink img {
height: 2.1em;
vertical-align: middle
}
.content-primary {
padding-top: 6em;
padding-right: 1em;
padding-left: 1em
}
.withTabs .content-primary {
padding-top: 9em !important
}
@media all and (min-width:40em) {
.content-primary {
padding-top: 7em
}
.withTabs .content-primary {
padding-top: 10em !important
}
}
@media all and (min-width:84em) {
.withTabs .content-primary {
padding-top: 7em !important
}
}
.content-primary ul:first-child {
margin-top: 0
}
.dashboardSections {
display: flex;
flex-direction: column
}
.dashboardColumn {
display: flex;
flex-direction: column;
flex-shrink: 0;
flex-grow: 1
}
.activeSession:not(.playingSession) .sessionNowPlayingContent {
display: none
}
.dashboardSection {
flex-shrink: 0;
margin: 0 0 2em
}
.dashboardSection h3 {
margin-top: .5em;
margin-bottom: .5em
}
.activeRecordingItems>.card {
width: 50%
}
@media all and (min-width:70em) {
.dashboardSections {
flex-wrap: wrap;
flex-direction: row
}
.dashboardColumn-2-60 {
width: 46%
}
.dashboardColumn-2-40 {
width: 27%
}
.dashboardSection {
padding: 0 1.5em
}
.activeRecordingItems>.card {
width: 25%
}
}
.premiumBanner img {
position: absolute;
text-align: right;
top: 0;
right: 0;
width: 4.4em;
height: 4.4em
}
.wizardContent {
max-width: 62em;
padding: .5em 2em 1em;
margin: 0 auto;
background: #fff
}
.wizardNavigation {
text-align: right
}
.wizardContent form {
max-width: 100%
.appLinks img {
height: 36px;
}
.wizardContent h2 img {
height: 2.5em;
vertical-align: middle;
margin-right: .5em;
margin-right: 0.5em;
position: relative;
top: -.3em
top: -0.3em;
}
.scheduledTaskPaperIconItem {
outline: 0 !important
.header .imageLink {
display: inline-block;
}
.activeSession {
width: 100% !important
.header .imageLink img {
height: 2.1em;
vertical-align: middle;
}
.activitylogUserPhoto {
height:1.71em;
width:1.71em;
border-radius:100%;
margin-right:.5em;
background-size:cover;
background-repeat:no-repeat;
background-position:center;
.content-primary {
padding-top: 6em;
padding-right: 1em;
padding-left: 1em;
}
@media all and (min-width:40em) {
.activeSession {
width: 100% !important
.withTabs .content-primary {
padding-top: 9em !important;
}
@media all and (min-width: 40em) {
.content-primary {
padding-top: 7em;
}
.withTabs .content-primary {
padding-top: 10em !important;
}
}
@media all and (min-width:50em) {
@media all and (min-width: 84em) {
.withTabs .content-primary {
padding-top: 7em !important;
}
}
.content-primary ul:first-child {
margin-top: 0;
}
.dashboardSections {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.dashboardColumn {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-shrink: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.sessionNowPlayingContent {
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.activeSession:not(.playingSession) .sessionNowPlayingContent {
display: none;
}
.dashboardSection {
-webkit-flex-shrink: 0;
flex-shrink: 0;
margin: 0 0 2em;
}
.dashboardSection h3 {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.activeRecordingItems > .card {
width: 50%;
}
@media all and (min-width: 70em) {
.dashboardSections {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
}
.dashboardColumn-2-60 {
width: 46%;
}
.dashboardColumn-2-40 {
width: 27%;
}
.dashboardSection {
padding: 0 1.5em;
}
.activeRecordingItems > .card {
width: 25%;
}
}
.wizardContent {
max-width: 62em;
padding: 0.5em 2em 1em;
margin: 0 auto;
background: #fff;
}
.wizardNavigation {
text-align: right;
}
.wizardContent form {
max-width: 100%;
}
.scheduledTaskPaperIconItem {
outline: 0 !important;
}
.activeSession {
width: 100% !important;
}
.activitylogUserPhoto {
height: 1.71em;
width: 1.71em;
border-radius: 100%;
margin-right: 0.5em;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
@media all and (min-width: 40em) {
.activeSession {
width: 50% !important
width: 100% !important;
}
}
@media all and (min-width: 50em) {
.activeSession {
width: 50% !important;
}
}
.sessionCardFooter {
padding-top: .5em !important;
padding-top: 0.5em !important;
padding-bottom: 1em !important;
border-top: 1px solid #eee;
text-align: center;
position: relative
position: relative;
}
.sessionAppInfo {
@ -265,22 +317,11 @@ div[data-role=controlgroup] a.ui-btn-active {
}
.sessionCardButtons {
min-height: 2.7em
min-height: 2.7em;
}
.sessionCardButton {
margin: 0
}
.sessionNowPlayingContent {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
margin: 0;
}
.sessionNowPlayingInnerContent {
@ -289,23 +330,23 @@ div[data-role=controlgroup] a.ui-btn-active {
left: 0;
right: 0;
bottom: 0;
font-weight: 400
font-weight: 400;
}
.sessionNowPlayingContent-withbackground+.sessionNowPlayingInnerContent {
.sessionNowPlayingContent-withbackground + .sessionNowPlayingInnerContent {
color: #fff !important;
background: rgba(0, 0, 0, .7)
background: rgba(0, 0, 0, 0.7);
}
.sessionAppName {
vertical-align: top;
max-width: 200px
max-width: 200px;
}
.sessionNowPlayingDetails {
display: flex;
position: absolute;
bottom: 0px;
bottom: 0;
width: 100%;
}
@ -315,12 +356,6 @@ div[data-role=controlgroup] a.ui-btn-active {
padding: 0.8em 0.5em;
}
.sessionAppInfo img {
max-width: 40px;
max-height: 40px;
margin-right: 8px;
}
.sessionNowPlayingTime {
flex-shrink: 0;
align-self: flex-end;
@ -332,6 +367,13 @@ div[data-role=controlgroup] a.ui-btn-active {
white-space: nowrap;
}
.playbackProgress,
.transcodingProgress {
margin: 0;
width: 100%;
background: transparent !important;
}
.activeSession .playbackProgress,
.activeSession .transcodingProgress {
position: absolute;
@ -342,13 +384,6 @@ div[data-role=controlgroup] a.ui-btn-active {
width: 100%;
}
.playbackProgress,
.transcodingProgress {
margin: 0px;
width: 100%;
background: transparent !important;
}
.playbackProgress > div {
z-index: 1000;
background-color: #00a4dc;
@ -358,70 +393,70 @@ div[data-role=controlgroup] a.ui-btn-active {
background-color: #dd4919;
}
@media all and (max-width:34.375em) {
@media all and (max-width: 34.375em) {
.sessionAppName {
max-width: 160px
max-width: 160px;
}
}
@media all and (max-width:31.25em) {
@media all and (max-width: 31.25em) {
.sessionAppName {
max-width: 150px
max-width: 150px;
}
}
.disabledUser {
filter: grayscale(100%)
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.disabledUserBanner {
margin: 0 0 2em
margin: 0 0 2em;
}
.appLinks a {
text-decoration: none !important
}
.appLinks a+a {
margin-left: 5px
}
.appLinks img {
height: 36px
}
a[data-role=button] {
background-clip: padding-box;
cursor: pointer !important;
font-family: inherit !important;
font-weight: 500 !important;
margin: 0 .25em !important;
display: inline-block;
padding: .8em 1em;
text-align: center;
text-decoration: none !important;
background: #292929 !important;
}
.appLinks a + a {
margin-left: 5px;
}
@-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
transform: rotate(0)
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
transform: rotate(360deg)
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotatingCircle {
animation: rotating 2s linear infinite
-webkit-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
.pluginPreviewImg {
box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
-webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
}
.ui-bar-a{
.ui-bar-a {
text-align: center;
padding: 0 20px;
}

View File

@ -1,7 +1,7 @@
.detailTableBodyCell,
.detailTableHeaderCell {
border-spacing: 0;
padding: .4em
padding: 0.4em;
}
.detailTable {
@ -9,11 +9,11 @@
border-spacing: 0;
text-align: left;
width: 100%;
margin: 0 auto
margin: 0 auto;
}
.detailTableHeaderCell {
font-weight: 700;
text-align: left;
vertical-align: top
}
vertical-align: top;
}

View File

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

View File

@ -1,13 +1,13 @@
html {
font-family: -apple-system, "Helvetica", system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
}
html {
font-size: 93%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
h1, h2, h3 {
h1,
h2,
h3 {
/* For better bolding, since Helvetica does not support 500 weight, and 600 is too thick */
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
}

View File

@ -1,8 +1,8 @@
html {
font-size: 82% !important
font-size: 82% !important;
}
.formDialogFooter {
position: static !important;
margin: 0 -1em !important
}
margin: 0 -1em !important;
}

File diff suppressed because it is too large Load Diff

View File

@ -1,9 +1,9 @@
.guideVerticalScroller {
padding-bottom: 15em
padding-bottom: 15em;
}
@media all and (min-width:62.5em) {
@media all and (min-width: 62.5em) {
#guideTab {
padding-left: .5em
padding-left: 0.5em;
}
}
}

View File

@ -1,53 +1,57 @@
.editPageSidebar {
display: block
display: block;
}
.editPageSidebar-withcontent {
display: none
display: none;
}
.libraryTree {
margin-left: .25em
margin-left: 0.25em;
}
.offlineEditorNode {
color: #c33
color: #c33;
}
.editorNode img {
height: 18px;
margin: 0 .35em;
margin: 0 0.35em;
vertical-align: middle;
position: relative;
top: -2px
top: -2px;
}
.jstree-anchor {
font-weight: 400 !important
font-weight: 400 !important;
}
.jstree-wholerow-hovered {
background: #38c !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
box-shadow: none !important
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.jstree-default .jstree-hovered {
background: 0 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
color: #fff !important
color: #fff !important;
}
.jstree-default .jstree-wholerow-clicked {
background: #00a4dc !important
background: #00a4dc !important;
}
.metadataSidebarIcon {
margin-right: .4em
margin-right: 0.4em;
}
@media all and (min-width:50em) {
@media all and (min-width: 50em) {
.editPageSidebar {
position: fixed;
top: 5.2em;
@ -55,21 +59,21 @@
left: 0;
width: 30%;
border-right: 1px solid #555;
display: block
display: block;
}
.editPageInnerContent {
float: right;
width: 68.5%
width: 68.5%;
}
}
@media all and (min-width:112.5em) {
@media all and (min-width: 112.5em) {
.editPageSidebar {
width: 25%
width: 25%;
}
.editPageInnerContent {
width: 73.5%
width: 73.5%;
}
}

View File

@ -1,5 +1,6 @@
.scrollX {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
overflow-y: hidden;
white-space: nowrap;
}
@ -8,39 +9,50 @@
scroll-behavior: smooth;
}
.hiddenScrollX, .layout-tv .scrollX {
scrollbar-width: none;
.hiddenScrollX,
.layout-tv .scrollX {
-ms-overflow-style: none;
}
.hiddenScrollX-forced {
scrollbar-width: none;
overflow: -moz-scrollbars-none;
}
.hiddenScrollX::-webkit-scrollbar, .layout-tv .scrollX::-webkit-scrollbar {
.hiddenScrollX::-webkit-scrollbar,
.layout-tv .scrollX::-webkit-scrollbar {
height: 0 !important;
display: none;
}
.scrollY {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
}
.smoothScrollY {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
scroll-behavior: smooth;
}
.hiddenScrollY, .layout-tv .smoothScrollY {
scrollbar-width: none;
.hiddenScrollY,
.layout-tv .smoothScrollY {
-ms-overflow-style: none;
/* Can't do this because it not only hides the scrollbar, but also prevents scrolling */
/* overflow: -moz-scrollbars-none; */
}
.hiddenScrollY-forced {
scrollbar-width: none;
overflow: -moz-scrollbars-none;
}
.hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar, .layout-tv .scrollY::-webkit-scrollbar {
.hiddenScrollY::-webkit-scrollbar,
.layout-tv .smoothScrollY::-webkit-scrollbar,
.layout-tv .scrollY::-webkit-scrollbar {
width: 0 !important;
display: none;
}

View File

@ -2,7 +2,7 @@ body,
html {
margin: 0;
padding: 0;
height: 100%
height: 100%;
}
.backgroundContainer {
@ -11,52 +11,58 @@ html {
left: 0;
right: 0;
bottom: 0;
contain: strict
contain: strict;
}
html {
line-height: 1.35
line-height: 1.35;
}
.layout-mobile,
.layout-tv {
user-select: none
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
overflow-x: hidden;
background-color: transparent !important;
-webkit-font-smoothing: antialiased;
}
.mainAnimatedPage {
contain: style size !important
contain: style size !important;
}
.pageContainer {
overflow-x: visible !important
overflow-x: visible !important;
}
.bodyWithPopupOpen {
overflow-y: hidden !important
overflow-y: hidden !important;
}
div[data-role=page] {
outline: 0
outline: 0;
}
.pageTitle {
margin-top: 0;
font-family: inherit
font-family: inherit;
}
.fieldDescription {
padding-left: .15em;
padding-left: 0.15em;
font-weight: 400;
white-space: normal !important
white-space: normal !important;
}
.fieldDescription+.fieldDescription {
margin-top: .3em
.fieldDescription + .fieldDescription {
margin-top: 0.3em;
}
.content-primary,
@ -67,21 +73,21 @@ div[data-role=page] {
padding-bottom: 5em !important;
}
@media all and (min-width:50em) {
@media all and (min-width: 50em) {
.readOnlyContent,
form {
max-width: 54em
max-width: 54em;
}
}
.headerHelpButton {
margin-left: 1.25em !important;
padding-bottom: .4em !important;
padding-top: .4em !important
padding-bottom: 0.4em !important;
padding-top: 0.4em !important;
}
.mediaInfoContent {
margin-left: auto;
margin-right: auto;
width: 85%
width: 85%;
}

View File

@ -1,6 +1,9 @@
.chapterThumbTextContainer,
.videoOsdBottom {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.osdPoster img,
@ -8,52 +11,59 @@
.videoOsdBottom {
bottom: 0;
left: 0;
right: 0
right: 0;
}
.osdHeader {
transition: opacity .3s ease-out;
-webkit-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
position: relative;
z-index: 1;
background: rgba(0, 0, 0, 0.7) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
color: #eee !important;
}
.osdHeader-hidden {
opacity: 0
opacity: 0;
}
.osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton) {
display: none
display: none;
}
.chapterThumbContainer {
-webkit-box-shadow: 0 0 1.9vh #000;
box-shadow: 0 0 1.9vh #000;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
position: relative
position: relative;
}
.chapterThumb {
background-position: center center;
-webkit-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
border: 0;
height: 20vh;
min-width: 20vh
min-width: 20vh;
}
@media all and (orientation:portrait) {
@media all and (orientation: portrait) {
.chapterThumb {
height: 30vw;
min-width: 30vw
min-width: 30vw;
}
}
@media all and (max-height:50em) and (orientation:landscape) {
@media all and (max-height: 50em) and (orientation: landscape) {
.chapterThumb {
height: 30vh;
min-width: 30vh
min-width: 30vh;
}
}
@ -62,161 +72,218 @@
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .7);
padding: .25em .5em;
user-select: none
background: rgba(0, 0, 0, 0.7);
padding: 0.25em 0.5em;
user-select: none;
}
.chapterThumbText {
padding: .25em 0;
padding: 0.25em 0;
margin: 0;
opacity: 1
opacity: 1;
}
.chapterThumbText-dim {
opacity: .6
opacity: 0.6;
}
.videoOsdBottom {
position: fixed;
background-color: rgba(0, 0, 0, 0.7);
padding: 1%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
will-change: opacity;
-webkit-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
color: #fff;
user-select: none
user-select: none;
-webkit-touch-callout: none;
}
.videoOsdBottom-hidden {
opacity: 0
opacity: 0;
}
.osdControls {
flex-grow: 1
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.videoOsdBottom .buttons {
padding: .25em 0 0;
padding: 0.25em 0 0;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
align-items: center
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.osdVolumeSliderContainer {
width: 9em;
flex-grow: 1
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.osdMediaInfo,
.volumeButtons {
display: flex;
display: -webkit-box;
display: -webkit-flex;
align-items: center;
-webkit-box-align: center;
}
.volumeButtons {
margin: 0 .5em 0 auto;
margin: 0 0.5em 0 auto;
display: flex;
align-items: center
-webkit-align-items: center;
align-items: center;
}
.osdTimeText {
margin-left: 1em;
user-select: none
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.osdPoster {
width: 10%;
position: relative;
margin-right: .5em
margin-right: 0.5em;
}
.osdPoster img {
position: absolute;
height: auto;
width: 100%;
-webkit-box-shadow: 0 0 1.9vh #000;
box-shadow: 0 0 1.9vh #000;
border: .08em solid #222;
border: 0.08em solid #222;
user-drag: none;
user-select: none
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.osdTitle,
.osdTitleSmall {
margin: 0 1em 0 0
margin: 0 1em 0 0;
}
.osdMediaInfo {
display: flex;
align-items: center
-webkit-align-items: center;
align-items: center;
}
.osdSecondaryMediaInfo {
padding-left: .6em !important
padding-left: 0.6em !important;
}
.osdTextContainer {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-bottom: .7em;
padding-left: .5em
margin-bottom: 0.7em;
padding-left: 0.5em;
}
.osdMainTextContainer {
align-items: baseline
-webkit-box-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
}
.osdMediaStatus {
margin-left: auto;
}
@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
100% {
transform:rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.osdMediaStatus .animate {
animation:spin 4s linear infinite;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
.pageContainer {
top: 0;
position: fixed
position: fixed;
}
@media all and (max-width:30em) {
@media all and (max-width: 30em) {
.btnFastForward,
.btnRewind,
.osdMediaInfo,
.osdPoster {
display: none !important
display: none !important;
}
}
@media all and (max-width:33.75em) {
@media all and (max-width: 33.75em) {
.videoOsdBottom .paper-icon-button-light {
margin: 0
margin: 0;
}
}
@media all and (max-width:43em) {
@media all and (max-width: 43em) {
.videoOsdBottom .volumeButtons,
.osdMediaStatus span {
display: none !important
}
}
@media all and (max-width:50em) {
.videoOsdBottom .btnFastForward, .videoOsdBottom .btnRewind {
display: none !important
display: none !important;
}
}
@media all and (max-width:75em) {
.videoOsdBottom .endsAtText {
display: none !important
@media all and (max-width: 50em) {
.videoOsdBottom .btnFastForward,
.videoOsdBottom .btnRewind {
display: none !important;
}
}
@media all and (max-width: 75em) {
.videoOsdBottom .endsAtText {
display: none !important;
}
}

View File

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

View File

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

View File

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

View File

@ -17,7 +17,7 @@ _define("fetch", function() {
});
// flvjs
var flvjs = require("flv.js").default;
var flvjs = require("flv.js/dist/flv").default;
_define("flvjs", function() {
return flvjs;
});

View File

@ -4,7 +4,7 @@
padding: 0;
border: none;
max-height: 84%;
border-radius: .1em !important;
border-radius: 0.1em !important;
}
.actionsheet-not-fullscreen {
@ -24,7 +24,7 @@
.actionSheetContent {
margin: 0 !important;
padding: .4em 0 !important;
padding: 0.4em 0 !important;
flex-direction: column;
display: flex;
justify-content: center;
@ -45,7 +45,7 @@
}
.actionsheetListItemBody {
padding: .4em 1em .4em .6em !important;
padding: 0.4em 1em 0.4em 0.6em !important;
}
.actionSheetItemText {
@ -59,13 +59,13 @@
}
.actionSheetItemAsideText {
opacity: .7;
opacity: 0.7;
font-size: 90%;
display: flex;
justify-content: flex-end;
flex-shrink: 0;
margin-left: 5em;
margin-right: .5em;
margin-right: 0.5em;
}
.actionSheetScroller {
@ -83,14 +83,14 @@
}
.actionsheetDivider {
height: .07em;
margin: .25em 0;
height: 0.07em;
margin: 0.25em 0;
flex-shrink: 0;
}
.actionSheetTitle {
margin: .6em 0 .7em !important;
padding: 0 .9em;
margin: 0.6em 0 0.7em !important;
padding: 0 0.9em;
flex-grow: 0;
}
@ -100,7 +100,7 @@
}
.actionsheetMenuItemIcon {
margin: 0 .85em 0 .45em !important;
margin: 0 0.85em 0 0.45em !important;
padding: 0 !important;
}
@ -110,6 +110,6 @@
.btnCloseActionSheet {
position: fixed;
top: .75em;
left: .5em;
top: 0.75em;
left: 0.5em;
}

View File

@ -35,16 +35,15 @@
font-size: inherit;
min-width: initial;
margin: 0;
padding: .1em .4em;
padding: 0.1em 0.4em;
width: auto;
border-radius: .1em;
border-radius: 0.1em;
font-weight: normal;
flex-shrink: 0;
flex-grow: 1;
}
@media all and (max-height: 50em) {
.alphaPicker-fixed {
bottom: 5em;
}
@ -56,14 +55,12 @@
}
@media all and (max-height: 49em) {
.alphaPicker-vertical {
font-size: 94%;
}
}
@media all and (max-height: 44em) {
.alphaPicker-vertical {
font-size: 90%;
}
@ -75,14 +72,12 @@
}
@media all and (max-height: 37em) {
.alphaPicker-vertical {
font-size: 82%;
}
}
@media all and (max-height: 32em) {
.alphaPicker-vertical {
font-size: 74%;
}
@ -113,15 +108,14 @@
}
.alphaPicker-fixed-left {
left: .4em;
left: 0.4em;
}
.alphaPicker-fixed-right {
right: .4em;
right: 0.4em;
}
@media all and (min-width: 62.5em) {
.alphaPicker-fixed-left {
left: 1em;
}
@ -132,7 +126,6 @@
}
@media all and (max-height: 31.25em) {
.alphaPicker-fixed {
display: none !important;
}

View File

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

View File

@ -168,23 +168,25 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
return false;
}
var savedResult = appSettings.get(htmlMediaAutoplayAppStorageKey);
return "true" === savedResult || "false" !== savedResult && null;
return true;
}
function cueSupported() {
function supportsCue() {
try {
var video = document.createElement("video");
var style = document.createElement("style");
style.textContent = "video::cue {background: inherit}";
document.body.appendChild(style);
document.body.appendChild(video);
var cue = window.getComputedStyle(video, "::cue").background;
document.body.removeChild(style);
document.body.removeChild(video);
return !!cue.length;
} catch (err) {
console.log("Error detecting cue support:" + err);
console.log("error detecting cue support: " + err);
return false;
}
}
@ -204,8 +206,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
}
}
var htmlMediaAutoplayAppStorageKey = "supportshtmlmediaautoplay0";
var supportedFeatures = function () {
var features = [];
@ -280,7 +280,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
//features.push("multiserver");
features.push("screensaver");
if (!browser.orsay && !browser.tizen && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || cueSupported())) {
if (!browser.orsay && !browser.tizen && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) {
features.push("subtitleappearancesettings");
}
@ -299,18 +299,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
return features;
}();
if (supportedFeatures.indexOf("htmlvideoautoplay") === -1 && supportsHtmlMediaAutoplay() !== false) {
require(["autoPlayDetect"], function (autoPlayDetect) {
autoPlayDetect.supportsHtmlMediaAutoplay().then(function () {
appSettings.set(htmlMediaAutoplayAppStorageKey, "true");
supportedFeatures.push("htmlvideoautoplay");
supportedFeatures.push("htmlaudioautoplay");
}, function () {
appSettings.set(htmlMediaAutoplayAppStorageKey, "false");
});
});
}
/**
* Do exit according to platform
*/
@ -435,7 +423,9 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
}
}
};
var doc = self.document;
var isHidden = false;
if (doc) {
if (void 0 !== doc.visibilityState) {
@ -459,8 +449,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
}
}
var isHidden = false;
if (doc) {
doc.addEventListener(visibilityChange, function () {
if (document[visibilityState]) {

View File

@ -1,23 +1,24 @@
button {
-webkit-border-fit: border !important;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
button {
-webkit-border-fit: border !important;
}
.card {
border: 0;
font-size: inherit !important;
font-family: inherit !important;
text-transform: none;
background-color: transparent !important;
background: none !important;
background-color: transparent !important;
margin: 0;
padding: 0;
display: block;
color: inherit !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none !important;
cursor: pointer;
contain: layout style;
@ -54,17 +55,27 @@ button {
contain: layout style;
}
.cardPadder-backdrop, .cardPadder-mixedBackdrop, .cardPadder-smallBackdrop, .cardPadder-overflowBackdrop, .cardPadder-overflowSmallBackdrop {
.cardPadder-backdrop,
.cardPadder-mixedBackdrop,
.cardPadder-smallBackdrop,
.cardPadder-overflowBackdrop,
.cardPadder-overflowSmallBackdrop {
padding-bottom: 56.25%;
contain: strict;
}
.cardPadder-square, .cardPadder-mixedSquare, .cardPadder-overflowSquare, .overflowSquareCard-textCardPadder {
.cardPadder-square,
.cardPadder-mixedSquare,
.cardPadder-overflowSquare,
.overflowSquareCard-textCardPadder {
padding-bottom: 100%;
contain: strict;
}
.cardPadder-portrait, .cardPadder-mixedPortrait, .cardPadder-overflowPortrait, .overflowPortraitCard-textCardPadder {
.cardPadder-portrait,
.cardPadder-mixedPortrait,
.cardPadder-overflowPortrait,
.overflowPortraitCard-textCardPadder {
padding-bottom: 150%;
contain: strict;
}
@ -79,23 +90,26 @@ button {
margin: 0.6em;
transition: none;
border: 0 solid transparent;
/* These both are needed in case cardBox is a button */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none !important;
contain: layout;
contain: style;
}
.card.show-animation .cardBox {
will-change: transform;
transition: transform 200ms ease-out;
}
.card.show-focus:not(.show-animation) .cardBox {
margin: .4em;
margin: 0.4em;
}
.card.show-focus:not(.show-animation) .cardBox.visualCardBox,
.card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
border: .5em solid transparent;
}
.card.show-animation .cardBox {
will-change: transform;
transition: transform 200ms ease-out;
border: 0.5em solid transparent;
}
.card.show-animation:focus > .cardBox {
@ -120,7 +134,7 @@ button {
.btnCardOptions {
position: absolute;
bottom: .25em;
bottom: 0.25em;
right: 0;
margin: 0 !important;
z-index: 1;
@ -131,8 +145,8 @@ button {
position: absolute;
align-items: center;
justify-content: center;
top: .3em;
left: .3em;
top: 0.3em;
left: 0.3em;
text-align: center;
vertical-align: middle;
width: 1.6em;
@ -146,12 +160,14 @@ button {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-clip: content-box !important;
color: inherit;
/* This is only needed for scalable cards */
height: 100%;
contain: strict;
@ -173,12 +189,16 @@ button {
left: 0;
right: 0;
bottom: 0;
/* Needed in case this is a button */
display: block;
/* Needed in case this is a button */
margin: 0 !important;
/* Needed in safari */
height: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none !important;
contain: strict;
}
@ -207,10 +227,6 @@ button {
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
}
.cardImageContainer {
display: flex;
}
.cardImage {
position: absolute;
top: 0;
@ -226,6 +242,7 @@ button {
.cardImage-img {
max-height: 100%;
max-width: 100%;
/* This is simply for lazy image purposes, to ensure the image is visible sooner when scrolling */
min-height: 70%;
min-width: 70%;
@ -252,17 +269,17 @@ button {
}
.cardFooter {
padding: .3em .3em .5em .3em;
padding: 0.3em 0.3em 0.5em 0.3em;
position: relative;
}
.visualCardBox {
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
border-radius: .145em;
border-radius: 0.145em;
}
.innerCardFooter {
background: rgba(0,0,0,.7);
background: rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 0;
left: 0;
@ -282,7 +299,7 @@ button {
}
.cardText {
padding: .06em .5em;
padding: 0.06em 0.5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -294,7 +311,24 @@ button {
}
.cardText-first {
padding-top: .24em;
padding-top: 0.24em;
}
.textActionButton {
border: 0 !important;
background: transparent;
padding: 0 !important;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none !important;
color: inherit;
vertical-align: middle;
font-family: inherit;
font-size: inherit;
}
.textActionButton:hover {
text-decoration: underline;
}
.cardText > .textActionButton {
@ -304,7 +338,7 @@ button {
}
.innerCardFooter > .cardText {
padding: .3em .5em;
padding: 0.3em 0.5em;
}
.cardFooter-withlogo {
@ -336,23 +370,6 @@ button {
text-align: center;
}
.textActionButton {
border: 0 !important;
background: transparent;
border: 0 !important;
padding: 0 !important;
cursor: pointer;
outline: none !important;
color: inherit;
vertical-align: middle;
font-family: inherit;
font-size: inherit;
}
.textActionButton:hover {
text-decoration: underline;
}
.cardImageIcon {
font-size: 5em;
color: inherit;
@ -360,12 +377,12 @@ button {
.cardImageIcon-small {
font-size: 3em;
margin-bottom: .1em;
margin-bottom: 0.1em;
}
.cardIndicators {
right: .225em;
top: .225em;
right: 0.225em;
top: 0.225em;
position: absolute;
display: flex;
align-items: center;
@ -382,16 +399,16 @@ button {
}
.programAttributeIndicator {
padding: .18em .5em;
padding: 0.18em 0.5em;
color: #fff;
font-weight: 500;
}
.cardOverlayButton {
color: rgba(255, 255, 255, .76);
color: rgba(255, 255, 255, 0.76);
margin: 0;
z-index: 1;
padding: .75em;
padding: 0.75em;
font-size: 88%;
}
@ -402,7 +419,7 @@ button {
}
.cardOverlayButtonIcon {
background-color: rgba(0,0,0,.7) !important;
background-color: rgba(0, 0, 0, 0.7) !important;
border-radius: 100em;
width: 1.5em !important;
height: 1.5em !important;
@ -424,10 +441,10 @@ button {
height: 2.6em;
top: 50%;
left: 50%;
background-color: rgba(0,0,0,.5) !important;
border: .06em solid rgba(255,255,255,.6);
padding: .38em !important;
color: rgba(255, 255, 255, .76);
background-color: rgba(0, 0, 0, 0.5) !important;
border: 0.06em solid rgba(255, 255, 255, 0.6);
padding: 0.38em !important;
color: rgba(255, 255, 255, 0.76);
transition: transform 200ms ease-out;
}
@ -474,13 +491,15 @@ button {
width: 33.333333333333333333333333333333%;
}
.squareCard, .portraitCard {
.squareCard,
.portraitCard {
width: 33.333333333333333333333333333333%;
}
}
@media (min-width: 43.75em) {
.squareCard, .portraitCard {
.squareCard,
.portraitCard {
width: 25%;
}
}
@ -496,7 +515,8 @@ button {
width: 50%;
}
.squareCard, .portraitCard {
.squareCard,
.portraitCard {
width: 20%;
}
@ -516,7 +536,8 @@ button {
width: 25%;
}
.squareCard, .portraitCard {
.squareCard,
.portraitCard {
width: 16.666666666666666666666666666667%;
}
@ -529,9 +550,9 @@ button {
}
}
@media (min-width: 87.5em) {
.squareCard, .portraitCard {
.squareCard,
.portraitCard {
width: 14.285714285714285714285714285714%;
}
@ -549,13 +570,15 @@ button {
width: 20%;
}
.squareCard, .portraitCard {
.squareCard,
.portraitCard {
width: 12.5%;
}
}
@media (min-width: 120em) {
.squareCard, .portraitCard {
.squareCard,
.portraitCard {
width: 11.111111111111111111111111111111%;
}
}
@ -565,7 +588,8 @@ button {
width: 25%;
}
.squareCard, .portraitCard {
.squareCard,
.portraitCard {
width: 10%;
}
}
@ -596,7 +620,8 @@ button {
width: 72vw;
}
.overflowSquareCard, .overflowPortraitCard {
.overflowSquareCard,
.overflowPortraitCard {
width: 40vw;
}
@ -621,29 +646,34 @@ button {
}
@media (min-width: 43.75em) {
.overflowSquareCard, .overflowPortraitCard {
.overflowSquareCard,
.overflowPortraitCard {
width: 23.1vw;
}
}
@media (min-width: 48.125em) {
.overflowBackdropCard, .overflowSmallBackdropCard {
.overflowBackdropCard,
.overflowSmallBackdropCard {
width: 30vw;
}
}
@media (orientation: landscape) {
.overflowBackdropCard, .overflowSmallBackdropCard {
.overflowBackdropCard,
.overflowSmallBackdropCard {
width: 30vw;
}
.overflowSquareCard, .overflowPortraitCard {
.overflowSquareCard,
.overflowPortraitCard {
width: 23.1vw;
}
}
@media (orientation: landscape) and (min-width: 48.125em) {
.overflowBackdropCard, .overflowSmallBackdropCard {
.overflowBackdropCard,
.overflowSmallBackdropCard {
width: 23.1vw;
}
}
@ -655,55 +685,60 @@ button {
}
@media (min-width: 50em) {
.overflowSquareCard, .overflowPortraitCard {
.overflowSquareCard,
.overflowPortraitCard {
width: 18.5vw;
}
}
@media (min-width: 75em) {
.overflowBackdropCard, .overflowSmallBackdropCard {
.overflowBackdropCard,
.overflowSmallBackdropCard {
width: 23.1vw;
}
.overflowSquareCard, .overflowPortraitCard {
.overflowSquareCard,
.overflowPortraitCard {
width: 15.5vw;
}
}
@media (min-width: 87.5em) {
.overflowSquareCard, .overflowPortraitCard {
.overflowSquareCard,
.overflowPortraitCard {
width: 13.3vw;
}
}
@media (min-width: 100em) {
.overflowBackdropCard, .overflowSmallBackdropCard {
.overflowBackdropCard,
.overflowSmallBackdropCard {
width: 18.7vw;
}
.overflowSquareCard, .overflowPortraitCard {
.overflowSquareCard,
.overflowPortraitCard {
width: 11.6vw;
}
}
@media (min-width: 120em) {
.overflowSquareCard, .overflowPortraitCard {
.overflowSquareCard,
.overflowPortraitCard {
width: 10.3vw;
}
}
@media (min-width: 131.25em) {
.overflowSquareCard, .overflowPortraitCard {
.overflowSquareCard,
.overflowPortraitCard {
width: 9.3vw;
}
}
@media (min-width: 156.25em) {
.overflowBackdropCard, .overflowSmallBackdropCard {
.overflowBackdropCard,
.overflowSmallBackdropCard {
width: 15.6vw;
}
}
@ -720,7 +755,8 @@ button {
padding-bottom: 87.75%;
}
.itemsContainer-tv > .overflowSquareCard, .itemsContainer-tv > .overflowPortraitCard {
.itemsContainer-tv > .overflowSquareCard,
.itemsContainer-tv > .overflowPortraitCard {
width: 15.6vw;
}
@ -729,9 +765,9 @@ button {
}
.cardOverlayContainer {
background: rgba(0,0,0,0.5);
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity .2s;
transition: opacity 0.2s;
position: absolute;
top: 0;
left: 0;
@ -760,7 +796,7 @@ button {
}
.cardOverlayFab-primary {
background-color: rgba(0,0,0,0.7);
background-color: rgba(0, 0, 0, 0.7);
font-size: 130%;
padding: 0;
width: 3em;

View File

@ -1018,7 +1018,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
return text;
}
var html = '<button ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' type="button" class="itemAction textActionButton" data-action="link">';
var html = '<button ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' type="button" class="itemAction textActionButton" title="' + text + '" data-action="link">';
html += text;
html += '</button>';

View File

@ -15,10 +15,12 @@
.dialog {
margin: 0;
border-radius: .2em;
border-radius: 0.2em;
-webkit-font-smoothing: antialiased;
border: 0;
padding: 0;
will-change: transform, opacity;
/* Strict does not work well with actionsheet */
contain: style paint;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
@ -50,13 +52,13 @@
to {
opacity: 0;
transform: scale(.5);
transform: scale(0.5);
}
}
@keyframes scaleup {
from {
transform: scale(.5);
transform: scale(0.5);
opacity: 0;
}
@ -77,7 +79,6 @@
}
@keyframes fadeout {
from {
opacity: 1;
}
@ -100,7 +101,6 @@
}
@keyframes slidedown {
from {
opacity: 1;
transform: none;
@ -113,8 +113,8 @@
}
@media all and (max-width: 80em), all and (max-height: 45em) {
.dialog-fixedSize, .dialog-fullscreen-lowres {
.dialog-fixedSize,
.dialog-fullscreen-lowres {
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
@ -126,7 +126,6 @@
}
@media all and (min-width: 80em) and (min-height: 45em) {
.dialog-medium {
width: 80%;
height: 80%;
@ -168,5 +167,5 @@
}
.dialogBackdropOpened {
opacity: .5;
opacity: 0.5;
}

View File

@ -1,8 +1,8 @@
#ulDirectoryPickerList a {
padding-top: .4em;
padding-bottom: .4em
padding-top: 0.4em;
padding-bottom: 0.4em;
}
.lblDirectoryPickerPath {
white-space: nowrap
}
white-space: nowrap;
}

View File

@ -4,11 +4,11 @@
right: 0;
align-items: center;
justify-content: center;
min-width:104px;
min-height:24px;
min-width: 104px;
min-height: 24px;
padding-top: 1.25em;
z-index: 1;
color: #ffffff;
color: #fff;
display: flex;
}

View File

@ -155,7 +155,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
initCenterFocus(this, this.scroller);
}
if (bindHeader) {
if (bindHeader && layoutManager.mobile) {
initHeadroom(this);
}

View File

@ -5,31 +5,32 @@
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-right: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
max-height: none !important;
max-width: none !important
max-width: none !important;
}
@media all and (min-height:600px) {
@media all and (min-height: 600px) {
.dynamicFilterDialog {
top: 10% !important;
bottom: 25% !important
bottom: 25% !important;
}
}
@media all and (max-width:400px) {
@media all and (max-width: 400px) {
.dynamicFilterDialog {
width: auto;
left: 10vw !important;
right: 10vw !important;
margin-left: 0 !important
margin-left: 0 !important;
}
}
@media all and (min-width:400px) {
@media all and (min-width: 400px) {
.dynamicFilterDialog {
width: 20.16em;
margin-left: -10.08em !important;
left: 50% !important
left: 50% !important;
}
}

View File

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

View File

@ -14,12 +14,12 @@
}
.layout-desktop .tvGuideHeader {
margin-bottom: .5em;
margin-bottom: 0.5em;
}
.guideHeaderDateSelection {
font-size: 86%;
padding: .4em 0;
padding: 0.4em 0;
}
.guide-headerTimeslots {
@ -39,10 +39,10 @@
.guideProgramIndicator {
text-transform: uppercase;
border-radius: .25em;
margin-right: .5em;
border-radius: 0.25em;
margin-right: 0.5em;
font-size: 82%;
padding: .2em .25em;
padding: 0.2em 0.25em;
display: inline-flex;
align-items: center;
justify-content: center;
@ -51,6 +51,8 @@
}
.guide-channelTimeslotHeader {
border: 0 !important;
border-right-color: transparent;
flex-shrink: 0;
justify-content: center;
}
@ -69,9 +71,14 @@
}
.channelPrograms {
height: 4.42em;
contain: strict;
display: flex;
flex-direction: column;
border-style: solid;
border-width: 1px 0 1px 0;
white-space: nowrap;
position: relative;
contain: strict;
box-sizing: border-box;
}
@ -80,31 +87,32 @@
}
.guideSpacer {
width: .3em;
width: 0.3em;
flex-shrink: 0;
}
.channelPrograms, .timeslotHeadersInner {
.channelPrograms,
.timeslotHeadersInner {
width: 1800vw;
}
@media all and (min-width: 37.5em) {
.channelPrograms, .timeslotHeadersInner {
.channelPrograms,
.timeslotHeadersInner {
width: 1400vw;
}
}
@media all and (min-width: 50em) {
.channelPrograms, .timeslotHeadersInner {
.channelPrograms,
.timeslotHeadersInner {
width: 1200vw;
}
}
@media all and (min-width: 80em) {
.channelPrograms, .timeslotHeadersInner {
.channelPrograms,
.timeslotHeadersInner {
width: 810vw;
}
}
@ -112,11 +120,17 @@
.timeslotHeader {
display: inline-flex;
align-items: center;
text-indent: .25em;
text-indent: 0.25em;
width: 2.0833333333333333333333333333333%;
}
.guide-channelHeaderCell, .guide-channelTimeslotHeader {
.programCell,
.guide-channelHeaderCell {
outline: none !important;
}
.guide-channelHeaderCell,
.guide-channelTimeslotHeader {
padding: 0 !important;
cursor: pointer;
outline: none !important;
@ -130,11 +144,12 @@
display: flex;
align-items: center;
text-decoration: none;
/* Needed in firefox */
text-align: left;
contain: strict;
flex-shrink: 0;
border-radius: .12em;
border-radius: 0.12em;
color: inherit;
}
@ -148,37 +163,38 @@
background: transparent;
}
.guide-channelTimeslotHeader {
border: 0 !important;
}
/* Important - have to put the fixed width on channelsContainer, not the individual channelHeaderCell
This was causing channelsContainer to extend beyond the fixed width on ps4, tizen, lg and opera tv.
*/
.channelsContainer, .guide-channelTimeslotHeader {
.channelsContainer,
.guide-channelTimeslotHeader {
width: 24vw;
}
@media all and (min-width:31.25em) {
.channelsContainer, .guide-channelTimeslotHeader {
@media all and (min-width: 31.25em) {
.channelsContainer,
.guide-channelTimeslotHeader {
width: 16vw;
}
}
@media all and (min-width:37.5em) {
.channelsContainer, .guide-channelTimeslotHeader {
@media all and (min-width: 37.5em) {
.channelsContainer,
.guide-channelTimeslotHeader {
width: 16vw;
}
}
@media all and (min-width:50em) {
.channelsContainer, .guide-channelTimeslotHeader {
@media all and (min-width: 50em) {
.channelsContainer,
.guide-channelTimeslotHeader {
width: 14vw;
}
}
@media all and (min-width:80em) {
.channelsContainer, .guide-channelTimeslotHeader {
@media all and (min-width: 80em) {
.channelsContainer,
.guide-channelTimeslotHeader {
width: 12vw;
}
}
@ -197,34 +213,26 @@
}
@media all and (max-width: 50em) {
.newTvProgram, .liveTvProgram, .premiereTvProgram, .guideHdIcon {
.newTvProgram,
.liveTvProgram,
.premiereTvProgram,
.guideHdIcon {
display: none;
}
}
.channelPrograms {
height: 4.42em;
contain: strict;
display: flex;
flex-direction: column;
border-style: solid;
border-width: 1px 0 1px 0;
.channelPrograms + .channelPrograms,
.guide-channelHeaderCell + .guide-channelHeaderCell {
margin-top: -1px;
}
.channelPrograms + .channelPrograms, .guide-channelHeaderCell + .guide-channelHeaderCell {
margin-top: -1px;
}
.channelPrograms-tv, .guide-channelHeaderCell-tv {
.channelPrograms-tv,
.guide-channelHeaderCell-tv {
height: 3em;
}
.guide-channelTimeslotHeader {
border-right-color: transparent;
}
.guide-channelTimeslotHeader, .timeslotHeader {
.guide-channelTimeslotHeader,
.timeslotHeader {
background: transparent !important;
height: 2.8em;
}
@ -253,6 +261,7 @@
text-decoration: none;
overflow: hidden;
align-items: center;
/* Needed for Firefox */
text-align: left;
contain: strict;
@ -261,7 +270,7 @@
}
.guideProgramName {
padding: 0 .7em 0;
padding: 0 0.7em 0;
overflow: hidden;
text-overflow: ellipsis;
align-items: center;
@ -269,7 +278,8 @@
position: relative;
flex-grow: 1;
contain: layout style paint;
/*transition: transform 60ms ease-out;*/
/* transition: transform 60ms ease-out; */
}
.guide-programNameCaret {
@ -289,11 +299,11 @@
.guideProgramSecondaryInfo {
display: flex;
align-items: center;
margin-top: .1em;
margin-top: 0.1em;
}
.programIcon {
margin-left: .5em;
margin-left: 0.5em;
height: 1em;
width: 1em;
font-size: 1.6em;
@ -304,16 +314,16 @@
.guide-programTextIcon {
font-weight: bold;
font-size: .9em;
padding: .16em .3em;
border-radius: .25em;
margin-right: .35em;
font-size: 0.9em;
padding: 0.16em 0.3em;
border-radius: 0.25em;
margin-right: 0.35em;
width: auto;
height: auto;
}
.guide-programTextIcon-tv {
font-size: .74em;
font-size: 0.74em;
}
.guideChannelNumber {
@ -345,14 +355,12 @@
}
@media all and (min-width: 62.5em) {
.guideChannelName {
max-width: 40%;
}
}
@media all and (max-width: 62.5em) {
.guideChannelNumber {
display: none;
}
@ -368,21 +376,19 @@
flex-direction: column;
}
.channelsContainer, .programGrid {
.channelsContainer,
.programGrid {
contain: layout style paint;
}
.programCell, .guide-channelHeaderCell {
outline: none !important;
}
.timerIcon, .seriesTimerIcon {
color: #cc3333 !important;
.timerIcon,
.seriesTimerIcon {
color: #c33 !important;
}
.seriesTimerIcon-inactive {
color: inherit !important;
opacity: .7;
opacity: 0.7;
}
.guideOptions {
@ -392,7 +398,6 @@
}
@media all and (max-width: 50em), all and (max-height: 37.5em) {
.tvGuideHeader {
padding-left: 0;
}
@ -415,16 +420,16 @@
}
.guide-date-tab-button {
padding: .3em .7em !important;
margin: 0 .3em !important;
padding: 0.3em 0.7em !important;
margin: 0 0.3em !important;
font-weight: normal;
}
.guide-date-tab-button.emby-tab-button-active {
border-color: transparent !important;
}
.guide-date-tab-button.emby-tab-button-active {
border-color: transparent !important;
}
.guide-date-tab-button.show-focus:focus {
border-radius: .15em !important;
transform: none !important;
}
.guide-date-tab-button.show-focus:focus {
border-radius: 0.15em !important;
transform: none !important;
}

View File

@ -1,15 +1,15 @@
.newTvProgram {
background: #3388cc;
background: #38c;
color: #fff;
}
.liveTvProgram {
background: #cc3333;
background: #c33;
color: #fff;
}
.premiereTvProgram {
background: #EF6C00;
background: #ef6c00;
color: #fff;
}

View File

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

View File

@ -1,23 +1,24 @@
.homeLibraryButton {
min-width: 18%;
margin: .5em !important;
margin: 0.5em !important;
}
@media all and (max-width: 50em) {
.homeLibraryButton {
width: 46% !important;
}
}
.homeLibraryIcon {
margin-left: .5em;
margin-right: .5em;
flex-shrink: 0
margin-left: 0.5em;
margin-right: 0.5em;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.homeLibraryText {
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden
overflow: hidden;
}

View File

@ -1054,7 +1054,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
var options = {
video: videoElement,
subUrl: getTextTrackUrl(track, item),
fonts: attachments.map(i => i.DeliveryUrl),
fonts: attachments.map(function (i) {
return i.DeliveryUrl;
}),
workerUrl: appRouter.baseUrl() + "/libraries/subtitles-octopus-worker.js",
onError: function() {
htmlMediaHelper.onErrorInternal(self, 'mediadecodeerror')
@ -1401,7 +1403,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
dlg.classList.add('videoPlayerContainer');
if (options.backdropUrl) {
dlg.classList.add('videoPlayerContainer-withBackdrop');
dlg.style.backgroundImage = "url('" + options.backdropUrl + "')";
}
@ -1410,11 +1411,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
dlg.classList.add('videoPlayerContainer-onTop');
}
// playsinline new for iOS 10
// https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html
var html = '';
var cssClass = 'htmlvideoplayer';
if (!browser.chromecast) {
@ -1449,7 +1446,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
self._mediaElement = videoElement;
if (mediaManager) {
if (!mediaManager.embyInit) {
initMediaManager();
mediaManager.embyInit = true;
@ -1465,9 +1461,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
} else {
resolve(videoElement);
}
});
} else {
if (options.backdropUrl) {
dlg.classList.add('videoPlayerContainer-withBackdrop');

View File

@ -42,6 +42,7 @@ video::-webkit-media-controls {
.htmlvideoplayer::cue {
background-color: transparent;
text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1);
-webkit-font-smoothing: antialiased;
font-family: inherit;
}
@ -71,7 +72,7 @@ video::-webkit-media-controls {
@keyframes htmlvideoplayer-zoomin {
from {
transform: scale3d(0.2, 0.2, 0.2);
opacity: .6;
opacity: 0.6;
}
to {

View File

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

View File

@ -1,5 +1,22 @@
.lazy-image-fadein {
opacity: 0;
animation: lazy-image-fadein 330ms ease-in normal both;
-webkit-animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-o-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-name: popInAnimation;
-moz-animation-name: popInAnimation;
-o-animation-name: popInAnimation;
animation-name: popInAnimation;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
-moz-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
-o-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
}
.lazy-image-fadein-fast {
@ -16,14 +33,6 @@
}
}
.lazy-image-fadein {
opacity: 0;
animation-duration: .8s;
animation-name: popInAnimation;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0,0,.5,1);
}
@keyframes popInAnimation {
0% {
opacity: 0;
@ -32,4 +41,4 @@
100% {
opacity: 1;
}
}
}

View File

@ -1,6 +1,7 @@
.imageEditor-dropZone {
border: .2em dashed currentcolor;
border-radius: .25em;
border: 0.2em dashed currentcolor;
border-radius: 0.25em;
/* padding: 1.6em; */
text-align: center;
position: relative;
@ -8,4 +9,4 @@
display: flex;
align-items: center;
justify-content: center;
}
}

View File

@ -1,8 +1,8 @@
.itemProgressBar {
background: #333;
background: rgba(51,51,51,.8);
background: rgba(51, 51, 51, 0.8);
position: relative;
height: .28em;
height: 0.28em;
}
.itemProgressBarForeground {
@ -14,6 +14,7 @@
.indicator {
border-radius: 100em;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
@ -23,7 +24,7 @@
}
.timerIndicator {
color: #CB272A;
color: #cb272a;
}
.timerIndicator-inactive {
@ -31,7 +32,7 @@
}
.indicator + .indicator {
margin-left: .25em;
margin-left: 0.25em;
}
.indicatorIcon {
@ -42,6 +43,7 @@
.countIndicator {
border-radius: 100em;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
@ -53,6 +55,7 @@
.playedIndicator {
border-radius: 100em;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
@ -64,6 +67,7 @@
.videoIndicator {
background: #444;
border-radius: 100em;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
@ -81,12 +85,13 @@
color: #333;
}
.missingIndicator, .unairedIndicator {
background: #cc3333;
padding: .25em .5em;
.missingIndicator,
.unairedIndicator {
background: #c33;
padding: 0.25em 0.5em;
border-radius: 100em;
color: #fff;
font-size: 84%;
font-weight: 500;
margin: 0 .25em;
}
margin: 0 0.25em;
}

View File

@ -1,36 +1,133 @@
define(['inputManager', 'focusManager'], function(inputManager, focusManager) {
'use strict';
define(["inputManager", "layoutManager"], function (inputManager, layoutManager) {
"use strict";
console.log("keyboardnavigation");
/**
* Key name mapping.
*/
// Add more to support old browsers
var KeyNames = {
13: "Enter",
19: "Pause",
27: "Escape",
32: "Space",
37: "ArrowLeft",
38: "ArrowUp",
39: "ArrowRight",
40: "ArrowDown",
// MediaRewind (Tizen/WebOS)
412: "MediaRewind",
// MediaStop (Tizen/WebOS)
413: "MediaStop",
// MediaPlay (Tizen/WebOS)
415: "MediaPlay",
// MediaFastForward (Tizen/WebOS)
417: "MediaFastForward",
// Back (WebOS)
461: "Back",
// Back (Tizen)
10009: "Back",
// MediaTrackPrevious (Tizen)
10232: "MediaTrackPrevious",
// MediaTrackNext (Tizen)
10233: "MediaTrackNext",
// MediaPlayPause (Tizen)
10252: "MediaPlayPause"
};
var hasFieldKey = false;
try {
hasFieldKey = "key" in new KeyboardEvent("keydown");
} catch (e) {
console.log("error checking 'key' field");
}
if (!hasFieldKey) {
// Add [a..z]
for (var i = 65; i <= 90; i++) {
KeyNames[i] = String.fromCharCode(i).toLowerCase();
}
}
/**
* Returns key name from event.
*
* @param {KeyboardEvent} keyboard event
* @return {string} key name
*/
function getKeyName(event) {
return KeyNames[event.keyCode] || event.key;
}
function enable() {
document.addEventListener('keydown', function(e) {
document.addEventListener("keydown", function (e) {
var capture = true;
switch (e.keyCode) {
case 37: // ArrowLeft
inputManager.handle('left');
switch (getKeyName(e)) {
case "ArrowLeft":
inputManager.handle("left");
break;
case 38: // ArrowUp
inputManager.handle('up');
case "ArrowUp":
inputManager.handle("up");
break;
case 39: // ArrowRight
inputManager.handle('right');
case "ArrowRight":
inputManager.handle("right");
break;
case 40: // ArrowDown
inputManager.handle('down');
case "ArrowDown":
inputManager.handle("down");
break;
case "Back":
inputManager.handle("back");
break;
case "Escape":
if (layoutManager.tv) {
inputManager.handle("back");
} else {
capture = false;
}
break;
case "MediaPlay":
inputManager.handle("play");
break;
case "Pause":
inputManager.handle("pause");
break;
case "MediaPlayPause":
inputManager.handle("playpause");
break;
case "MediaRewind":
inputManager.handle("rewind");
break;
case "MediaFastForward":
inputManager.handle("fastforward");
break;
case "MediaStop":
inputManager.handle("stop");
break;
case "MediaTrackPrevious":
inputManager.handle("previoustrack");
break;
case "MediaTrackNext":
inputManager.handle("nexttrack");
break;
default:
capture = false;
}
if (capture) {
console.log("Disabling default event handling");
e.preventDefault();
}
});
}
return {
enable: enable
enable: enable,
getKeyName: getKeyName
};
});

View File

@ -2,7 +2,6 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
'use strict';
function setLayout(instance, layout, selectedLayout) {
if (layout === selectedLayout) {
instance[layout] = true;
document.documentElement.classList.add('layout-' + layout);
@ -38,7 +37,6 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
};
LayoutManager.prototype.getSavedLayout = function (layout) {
return appSettings.get('layout');
};
@ -64,4 +62,4 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
};
return new LayoutManager();
});
});

View File

@ -1,5 +1,5 @@
.lazy {
/* In edge, intersection observer will not fire on 0px sized elements */
min-width: .1em;
min-height: .1em;
min-width: 0.1em;
min-height: 0.1em;
}

View File

@ -10,7 +10,7 @@
display: block;
align-items: center;
text-align: left;
padding: .25em .25em .25em .5em;
padding: 0.25em 0.25em 0.25em 0.5em;
cursor: pointer;
overflow: hidden;
}
@ -50,14 +50,18 @@
}
.listItem-border.show-focus:focus {
transform: scale(1.0) !important;
transform: scale(1) !important;
}
.listItemImage, .listItemIcon, .listItemAside {
.listItemImage,
.listItemIcon,
.listItemAside {
flex-shrink: 0;
}
.listItemBody, .listItemImage, .listItemIcon {
.listItemBody,
.listItemImage,
.listItemIcon {
display: inline-block;
vertical-align: middle;
}
@ -71,13 +75,13 @@
}
.listViewDragHandle {
margin-left: -.25em !important;
margin-left: -0.25em !important;
touch-action: none;
}
.listItemBody {
flex-grow: 1;
padding: .85em .75em;
padding: 0.85em 0.75em;
overflow: hidden;
text-overflow: ellipsis;
flex-direction: column;
@ -85,8 +89,15 @@
justify-content: center;
}
.listItem,
.listItemBody,
.listItemMediaInfo {
display: flex;
contain: layout style;
}
.layout-tv .listItemBody {
padding: .35em .75em;
padding: 0.35em 0.75em;
}
.listItemBody-noleftpadding {
@ -95,7 +106,7 @@
.listItemBodyText {
margin: 0;
padding: .1em 0;
padding: 0.1em 0;
overflow: hidden;
text-overflow: ellipsis;
}
@ -121,7 +132,7 @@
width: 19.5vw;
height: 13vw;
background-position: center center;
margin-right: .75em;
margin-right: 0.75em;
}
.listItemImageButton {
@ -161,13 +172,13 @@
}
.listItemBody {
padding-left: .75em;
padding-left: 0.75em;
}
}
@media all and (max-width: 50em) {
.listItemBody {
padding-right: .5em;
padding-right: 0.5em;
}
}
@ -180,15 +191,15 @@
width: 1em !important;
height: 1em !important;
font-size: 143%;
padding: 0 .25em 0 0;
padding: 0 0.25em 0 0;
}
.listItemIcon:not(.listItemIcon-transparent) {
background-color: #00a4dc;
color: #fff;
padding: .5em;
padding: 0.5em;
border-radius: 100em;
margin: 0 .2em 0 .4em;
margin: 0 0.2em 0 0.4em;
}
.listItemProgressBar {
@ -199,7 +210,7 @@
}
.listItem:focus {
border-radius: .2em;
border-radius: 0.2em;
}
.listItem:focus .secondary {
@ -207,7 +218,7 @@
}
.listItem-focusscale {
transition: transform .2s ease-out;
transition: transform 0.2s ease-out;
}
.listItem-focusscale:focus {
@ -215,7 +226,7 @@
}
.paperList {
margin: .5em auto;
margin: 0.5em auto;
}
.paperList-clear {
@ -234,26 +245,23 @@
}
.listItemIndicators {
right: .324em;
top: .324em;
right: 0.324em;
top: 0.324em;
position: absolute;
display: flex;
align-items: center;
}
.listItem, .listItemBody, .listItemMediaInfo {
display: flex;
contain: layout style;
}
.listItem-bottomoverview {
font-size: 88%;
margin-bottom: 1em;
margin-top: .2em;
margin-top: 0.2em;
}
@media all and (max-width: 50em) {
.listItem .endsAt, .listItem .criticRating, .listItem-overview {
.listItem .endsAt,
.listItem .criticRating,
.listItem-overview {
display: none !important;
}
}

View File

@ -7,11 +7,20 @@
.mdlSpinnerActive {
display: inline-block;
-webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
}
@-webkit-keyframes mdl-spinner__container-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes mdl-spinner__container-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@ -24,67 +33,121 @@
}
.mdl-spinner__layer-1 {
border-color: rgb(66,165,245);
border-color: rgb(66, 165, 245);
}
.mdl-spinner__layer-1-active {
-webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.mdl-spinner__layer-2 {
border-color: rgb(244,67,54);
border-color: rgb(244, 67, 54);
}
.mdl-spinner__layer-2-active {
-webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.mdl-spinner__layer-3 {
border-color: rgb(253,216,53);
border-color: rgb(253, 216, 53);
}
.mdl-spinner__layer-3-active {
-webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.mdl-spinner__layer-4 {
border-color: rgb(76,175,80);
border-color: rgb(76, 175, 80);
}
.mdl-spinner__layer-4-active {
-webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@keyframes mdl-spinner__fill-unfill-rotate {
@-webkit-keyframes mdl-spinner__fill-unfill-rotate {
12.5% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
25% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
37.5% {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
50% {
-webkit-transform: rotate(540deg);
transform: rotate(540deg);
}
62.5% {
-webkit-transform: rotate(675deg);
transform: rotate(675deg);
}
75% {
-webkit-transform: rotate(810deg);
transform: rotate(810deg);
}
87.5% {
-webkit-transform: rotate(945deg);
transform: rotate(945deg);
}
to {
-webkit-transform: rotate(1080deg);
transform: rotate(1080deg);
}
}
@keyframes mdl-spinner__fill-unfill-rotate {
12.5% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
25% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
37.5% {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
50% {
-webkit-transform: rotate(540deg);
transform: rotate(540deg);
}
62.5% {
-webkit-transform: rotate(675deg);
transform: rotate(675deg);
}
75% {
-webkit-transform: rotate(810deg);
transform: rotate(810deg);
}
87.5% {
-webkit-transform: rotate(945deg);
transform: rotate(945deg);
}
to {
-webkit-transform: rotate(1080deg);
transform: rotate(1080deg);
}
}
@ -98,6 +161,32 @@
* - https://github.com/Polymer/paper-spinner/issues/9
* - https://code.google.com/p/chromium/issues/detail?id=436255
*/
@-webkit-keyframes mdl-spinner__layer-1-fade-in-out {
from {
opacity: 0.99;
}
25% {
opacity: 0.99;
}
26% {
opacity: 0;
}
89% {
opacity: 0;
}
90% {
opacity: 0.99;
}
100% {
opacity: 0.99;
}
}
@keyframes mdl-spinner__layer-1-fade-in-out {
from {
opacity: 0.99;
@ -124,6 +213,28 @@
}
}
@-webkit-keyframes mdl-spinner__layer-2-fade-in-out {
from {
opacity: 0;
}
15% {
opacity: 0;
}
25% {
opacity: 0.99;
}
50% {
opacity: 0.99;
}
51% {
opacity: 0;
}
}
@keyframes mdl-spinner__layer-2-fade-in-out {
from {
opacity: 0;
@ -146,6 +257,28 @@
}
}
@-webkit-keyframes mdl-spinner__layer-3-fade-in-out {
from {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0.99;
}
75% {
opacity: 0.99;
}
76% {
opacity: 0;
}
}
@keyframes mdl-spinner__layer-3-fade-in-out {
from {
opacity: 0;
@ -168,6 +301,28 @@
}
}
@-webkit-keyframes mdl-spinner__layer-4-fade-in-out {
from {
opacity: 0;
}
65% {
opacity: 0;
}
75% {
opacity: 0.99;
}
90% {
opacity: 0.99;
}
100% {
opacity: 0;
}
}
@keyframes mdl-spinner__layer-4-fade-in-out {
from {
opacity: 0;
@ -190,6 +345,23 @@
}
}
.mdl-spinner__circle {
box-sizing: border-box;
height: 100%;
border-width: 0.21em;
border-style: solid;
border-color: inherit;
border-bottom-color: transparent !important;
border-radius: 50%;
-webkit-animation: none;
animation: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mdl-spinner__circle-clipper {
display: inline-block;
position: relative;
@ -199,69 +371,97 @@
border-color: inherit;
}
.mdl-spinner__circle-clipper .mdl-spinner__circle {
width: 200%;
}
.mdl-spinner__circle {
box-sizing: border-box;
height: 100%;
border-width: .21em;
border-style: solid;
border-color: inherit;
border-bottom-color: transparent !important;
border-radius: 50%;
animation: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
.mdl-spinner__circle-clipper .mdl-spinner__circle {
width: 200%;
}
.mdl-spinner__circleLeft {
border-right-color: transparent !important;
-webkit-transform: rotate(129deg);
transform: rotate(129deg);
}
.mdl-spinner__circleLeft-active {
-webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.mdl-spinner__circleRight {
left: -100%;
border-left-color: transparent !important;
-webkit-transform: rotate(-129deg);
transform: rotate(-129deg);
}
.mdl-spinner__circleRight-active {
-webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@keyframes mdl-spinner__left-spin {
@-webkit-keyframes mdl-spinner__left-spin {
from {
-webkit-transform: rotate(130deg);
transform: rotate(130deg);
}
50% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
to {
-webkit-transform: rotate(130deg);
transform: rotate(130deg);
}
}
@keyframes mdl-spinner__left-spin {
from {
-webkit-transform: rotate(130deg);
transform: rotate(130deg);
}
50% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
to {
-webkit-transform: rotate(130deg);
transform: rotate(130deg);
}
}
@-webkit-keyframes mdl-spinner__right-spin {
from {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg);
}
50% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
to {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg);
}
}
@keyframes mdl-spinner__right-spin {
from {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg);
}
50% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
to {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg);
}
}

View File

@ -160,7 +160,7 @@ define(["pluginManager"], function (pluginManager) {
elem.classList.add("logoScreenSaver");
document.body.appendChild(elem);
elem.innerHTML = '<img class="logoScreenSaverImage" src="' + pluginManager.mapPath(self, "logowhite.png") + '" />';
elem.innerHTML = '<img class="logoScreenSaverImage" src="' + pluginManager.mapPath(self, "assets/img/banner-light.png") + '" />';
}
stopInterval();

View File

@ -4,13 +4,13 @@
}
.mediaInfoText {
padding: .22em .5em;
border-radius: .25em;
padding: 0.22em 0.5em;
border-radius: 0.25em;
font-size: 92%;
display: flex;
align-items: center;
white-space: nowrap;
margin: 0 .5em 0 0;
margin: 0 0.5em 0 0;
}
.mediaInfoText-upper {
@ -21,7 +21,7 @@
width: auto;
height: auto;
font-size: 1.6em;
margin-right: .6em;
margin-right: 0.6em;
}
.mediaInfoItem:last-child {
@ -63,8 +63,8 @@
.mediaInfoProgramAttribute {
text-transform: uppercase;
padding: .16em .6em;
border-radius: .15em;
padding: 0.16em 0.6em;
border-radius: 0.15em;
font-size: 80%;
}
@ -73,13 +73,13 @@
}
.mediaInfoOfficialRating {
border: .09em solid currentColor;
padding: 0 .6em;
border: 0.09em solid currentColor;
padding: 0 0.6em;
height: 1.3em;
line-height: 1.8em;
display: flex;
align-items: center;
justify-content: center;
border-radius: .1em;
border-radius: 0.1em;
font-size: 96%;
}

View File

@ -4,7 +4,7 @@
left: 0;
right: 0;
top: 0;
background-color: rgba(0, 0, 0, .3);
background-color: rgba(0, 0, 0, 0.3);
z-index: 99998;
}
@ -13,7 +13,7 @@
top: 0;
left: 0;
right: 0;
padding: 1em .5em;
padding: 1em 0.5em;
display: flex;
align-items: center;
z-index: 99999;

View File

@ -3,40 +3,50 @@
position: fixed;
top: 0;
bottom: 0;
contain: strict
contain: strict;
}
.touch-menu-la {
background-color: #FFF;
background-color: #fff;
will-change: transform;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-transition: -webkit-transform ease-out 40ms, left ease-out 260ms;
-o-transition: transform ease-out 40ms, left ease-out 260ms;
transition: transform ease-out 40ms, left ease-out 260ms;
z-index: 1099
z-index: 1099;
}
.touch-menu-la.transition {
transition: transform ease-out 240ms, left ease-out 260ms
-webkit-transition: -webkit-transform ease-out 240ms, left ease-out 260ms;
-o-transition: transform ease-out 240ms, left ease-out 260ms;
transition: transform ease-out 240ms, left ease-out 260ms;
}
.drawer-open {
box-shadow: 2px 0 12px rgba(0, 0, 0, .4)
-webkit-box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
}
.scrollContainer {
flex-grow: 1
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.tmla-mask {
left: 0;
right: 0;
background-color: #000;
opacity: 0;
z-index: 1098;
transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
-webkit-transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
-o-transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
will-change: opacity;
background-color: rgba(0, 0, 0, .3)
background-color: rgba(0, 0, 0, 0.3);
}
.tmla-mask.backdrop {
opacity: 1
}
opacity: 1;
}

View File

@ -16,7 +16,7 @@
}
.nowPlayingBar-hidden {
transform: translate3d(0,100%,0);
transform: translate3d(0, 100%, 0);
}
.nowPlayingBarTop {
@ -28,7 +28,8 @@
justify-content: center;
}
.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
.mediaButton,
.nowPlayingBarUserDataButtons .btnUserItemRating {
vertical-align: middle;
margin: 0;
text-align: center;
@ -62,6 +63,7 @@
.nowPlayingBarCenter {
vertical-align: middle;
text-align: center;
/* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
z-index: 2;
flex-grow: 1;
@ -74,7 +76,7 @@
.nowPlayingBarPositionContainer {
position: absolute !important;
left: 0;
top: -.56em;
top: -0.56em;
right: 0;
z-index: 1;
}
@ -89,7 +91,8 @@
.nowPlayingBarRight {
position: relative;
margin: 0 .5em 0 auto;
margin: 0 0.5em 0 auto;
/* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
z-index: 2;
display: flex;
@ -121,7 +124,6 @@
}
@media all and (max-width: 70em) {
.nowPlayingBarRight .nowPlayingBarUserDataButtons {
display: none;
}
@ -155,13 +157,15 @@
.nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
display: none !important;
}
.nowPlayingBarInfoContainer {
width: 70%;
}
}
@media all and (max-width: 24em) {
.nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
.nowPlayingBar .muteButton,
.nowPlayingBar .unmuteButton {
display: none;
}
}

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

@ -4,11 +4,11 @@
right: 3%;
z-index: 100000;
background: #222;
background: rgba(0, 0, 0, .8);
background: rgba(0, 0, 0, 0.8);
padding: 1em;
color: #fff;
backdrop-filter: blur(5px);
border-radius: .25em;
border-radius: 0.25em;
transition: opacity 200ms ease-out;
}
@ -19,22 +19,22 @@
.iconOsdIcon {
font-size: 320%;
display: block;
margin: .25em .7em;
margin: 0.25em 0.7em;
}
.iconOsdProgressOuter {
margin: 1.5em .25em 1em;
height: .35em;
margin: 1.5em 0.25em 1em;
height: 0.35em;
background: #222;
border-radius: .25em;
border-radius: 0.25em;
}
.iconOsdProgressInner {
background: #00a4dc;
height: 100%;
border-radius: .25em;
border-radius: 0.25em;
}
.brightnessOsdProgressInner {
background: #FF9800;
}
background: #ff9800;
}

View File

@ -1,11 +1,10 @@
.playerStats {
background: rgba(28,28,28,0.8);
border-radius: .3em;
background: rgba(28, 28, 28, 0.8);
border-radius: 0.3em;
color: #fff;
left: 1.5em;
position: absolute;
top: 5em;
color: #fff;
}
.playerStats-tv {
@ -23,8 +22,8 @@
.playerStats-closeButton {
position: absolute;
top: .25em;
right: .25em;
top: 0.25em;
right: 0.25em;
color: #ccc;
z-index: 1;
}
@ -44,7 +43,7 @@
.playerStats-stat-label {
font-weight: 500;
margin: 0 .5em 0 0;
margin: 0 0.5em 0 0;
}
.playerStats-stat-header {

View File

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

View File

@ -4,9 +4,9 @@
}
.recordingIcon-active {
color: #cc3333;
color: #c33;
}
.recordSeriesContainer {
margin-bottom: .8em;
}
margin-bottom: 0.8em;
}

View File

@ -1,49 +1,89 @@
.nowPlayingInfoContainer {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
}
.navigationSection {
text-align: center
text-align: center;
}
.btnArrowUp {
border-radius: 40% 40% 10% 10%;
}
.btnArrowLeft {
border-radius: 40% 10% 10% 40%;
}
.btnArrowRight {
border-radius: 10% 40% 40% 10%;
}
.btnArrowDown {
border-radius: 10% 10% 40% 40%;
}
.btnOk {
border-radius: 10%;
}
.nowPlayingPageTitle {
margin: 0 0 .5em .5em
margin: 0 0 0.5em 0.5em;
}
.nowPlayingPositionSliderContainer {
margin: .7em 0 .7em 1em
margin: 0.7em 0 0.7em 1em;
}
.nowPlayingInfoButtons {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
flex-wrap: wrap
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.nowPlayingInfoControls,
.nowPlayingTime {
display: flex;
display: -webkit-box;
display: -webkit-flex;
}
.nowPlayingPageImageContainer {
width: 20%;
margin-right: .25em;
margin-right: 0.25em;
position: relative;
flex-shrink: 0
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
@media all and (min-width:50em) {
@media all and (min-width: 50em) {
.nowPlayingPageImageContainer {
width: 16%
width: 16%;
}
}
.nowPlayingInfoControls {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
justify-content: center
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.nowPlayingPageImage {
@ -51,118 +91,149 @@
left: 0;
right: 0;
width: 100%;
-webkit-box-shadow: 0 0 1.9vh #000;
box-shadow: 0 0 1.9vh #000;
border: .1em solid #222;
border: 0.1em solid #222;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
@media all and (orientation:portrait) and (max-width:50em) {
@media all and (orientation: portrait) and (max-width: 50em) {
.nowPlayingInfoContainer {
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-webkit-flex-direction: column !important;
flex-direction: column !important;
align-items: center
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.nowPlayingPageTitle {
text-align: center;
margin: .5em 0 .75em
margin: 0.5em 0 0.75em;
}
.nowPlayingPositionSliderContainer {
margin: .7em 1em
margin: 0.7em 1em;
}
.nowPlayingInfoButtons {
justify-content: center
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.nowPlayingPageImageContainer {
width: auto;
margin-right: 0
margin-right: 0;
}
.nowPlayingInfoControls {
margin-top: 1em;
max-width: 100%
max-width: 100%;
}
.nowPlayingPageImage {
width: auto;
height: 36vh
height: 36vh;
}
}
@media all and (orientation:portrait) and (max-width:40em) {
@media all and (orientation: portrait) and (max-width: 40em) {
.nowPlayingPageImage {
height: 30vh
height: 30vh;
}
}
.nowPlayingTime {
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
margin: 0 1em
margin: 0 1em;
}
.nowPlayingSecondaryButtons {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
@media all and (min-width:50em) {
@media all and (min-width: 50em) {
.nowPlayingSecondaryButtons {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
justify-content: flex-end
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
}
@media all and (min-width:80em) {
@media all and (min-width: 80em) {
.nowPlayingPageImageContainer {
margin-right: .75em
margin-right: 0.75em;
}
}
.nowPlayingNavButtonContainer {
width: 30em
width: 30em;
}
.smallBackdropPosterItem .cardOverlayInner>div {
.smallBackdropPosterItem .cardOverlayInner > div {
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden
overflow: hidden;
}
.playlistIndexIndicatorImage {
-webkit-background-size: initial initial !important;
background-size: initial !important;
background-image: url(assets/img/equalizer.gif) !important;
background-image: url(../../assets/img/equalizer.gif) !important;
}
.hideVideoButtons .videoButton {
display: none
display: none;
}
.nowPlayingVolumeSliderContainer {
width: 9em
width: 9em;
}
@media all and (max-width:50em) {
@media all and (max-width: 50em) {
.nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
display: none !important
display: none !important;
}
.navigationSection .collapseContent i {
font-size: 4em;
}
}
@media all and (max-width:47em) {
@media all and (max-width: 47em) {
.nowPlayingInfoButtons .repeatToggleButton {
display: none !important
display: none !important;
}
}
@media all and (max-width:34em) {
@media all and (max-width: 34em) {
.nowPlayingInfoButtons .btnNowPlayingFastForward,
.nowPlayingInfoButtons .btnNowPlayingRewind,
.nowPlayingInfoButtons .playlist .listItemMediaInfo {
display: none !important
display: none !important;
}
}

View File

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

View File

@ -4,8 +4,8 @@
}
.searchfields-icon {
margin-bottom: .1em;
margin-right: .25em;
margin-bottom: 0.1em;
margin-right: 0.25em;
font-size: 2em;
align-self: flex-end;
}

View File

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

View File

@ -3,11 +3,14 @@
background: #000;
}
.slideshowSwiperContainer, .swiper-wrapper, .swiper-slide {
.slideshowSwiperContainer,
.swiper-wrapper,
.swiper-slide {
background: #000;
}
.slideshowImage, .slideshowSwiperContainer {
.slideshowImage,
.slideshowSwiperContainer {
position: fixed;
top: 0;
right: 0;
@ -27,11 +30,12 @@
.slideshowImageText {
position: fixed;
bottom: .25em;
right: .5em;
bottom: 0.25em;
right: 0.5em;
color: #fff;
z-index: 1002;
font-weight: normal;
/* Add an outline */
text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
@ -41,6 +45,9 @@
height: auto;
max-width: 100%;
max-height: 100%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
@ -49,26 +56,26 @@
.slideshowButtonIcon {
color: #fff;
opacity: .7;
opacity: 0.7;
}
.btnSlideshowPrevious {
left: .5vh;
left: 0.5vh;
top: 45vh;
z-index: 1002;
position: absolute;
}
.btnSlideshowNext {
right: .5vh;
right: 0.5vh;
top: 45vh;
z-index: 1002;
position: absolute;
}
.topActionButtons {
right: .5vh;
top: .5vh;
right: 0.5vh;
top: 0.5vh;
z-index: 1002;
position: absolute;
}
@ -78,9 +85,9 @@
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, .7);
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: .5%;
padding: 0.5%;
display: flex;
flex-direction: row;
align-items: center;
@ -92,9 +99,9 @@
left: 0;
top: 0;
right: 0;
background-color: rgba(0, 0, 0, .7);
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: .5%;
padding: 0.5%;
display: flex;
flex-direction: row;
align-items: center;
@ -118,14 +125,14 @@
.slideTextInner {
margin: 0 auto;
max-width: 60%;
background: rgba(0,0,0,.8);
background: rgba(0, 0, 0, 0.8);
display: inline-block;
padding: .5em 1em;
border-radius: .25em;
padding: 0.5em 1em;
border-radius: 0.25em;
}
.slideTitle {
margin: 0 0 .25em;
margin: 0 0 0.25em;
}
.slideSubtitle {

View File

@ -1,3 +1,3 @@
.originalSubtitleFileLabel {
margin-right: 1em;
}
}

View File

@ -3,8 +3,8 @@
margin-left: 30%;
margin-right: 30%;
height: 4.2em;
background: rgba(28,28,28,0.8);
border-radius: .3em;
background: rgba(28, 28, 28, 0.8);
border-radius: 0.3em;
color: #fff;
position: absolute;
}
@ -14,7 +14,7 @@
top: 0;
right: 0;
color: #ccc;
z-index: 2;
z-index: 2;
}
.subtitleSyncTextField {
@ -27,7 +27,7 @@
text-align: center;
font-size: 20px;
color: white;
z-index: 2;
z-index: 2;
}
#prompt {
@ -40,7 +40,9 @@
margin-right: 1%;
top: 2.5em;
height: 1.4em;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
border-radius: .3em;
z-index: 1;
}
border-radius: 0.3em;
z-index: 1;
}

View File

@ -3,9 +3,9 @@
min-width: 20em;
box-sizing: border-box;
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
border-radius: .15em;
border-radius: 0.15em;
cursor: default;
transition: transform .3s ease-out;
transition: transform 0.3s ease-out;
min-height: initial;
padding: 1em 1.5em;
bottom: 1em;

View File

@ -11,6 +11,7 @@
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
user-select: none;
-webkit-touch-callout: none;
}
.upNextDialog-hidden {
@ -27,7 +28,7 @@
position: relative;
margin-right: 1em;
flex-shrink: 0;
margin-bottom: .5em;
margin-bottom: 0.5em;
}
.upNextDialog-button {
@ -36,7 +37,6 @@
}
@media all and (orientation: landscape) {
.upNextDialog {
flex-direction: row;
}
@ -66,4 +66,8 @@
border: 0;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}

View File

@ -1,3 +1,3 @@
.btnUserDataOn {
color: #cc3333 !important;
}
color: #c33 !important;
}

View File

@ -1,5 +0,0 @@
define(['userSettingsBuilder'], function (userSettingsBuilder) {
'use strict';
return new userSettingsBuilder();
});

View File

@ -5,8 +5,10 @@
right: 0;
bottom: 0;
contain: layout style size;
/* Can't use will-change because it causes the alpha picker to move when the page scrolls*/
/*will-change: transform;*/
/* Can't use will-change because it causes the alpha picker to move when the page scrolls */
/* will-change: transform; */
}
@keyframes view-fadeout {
@ -18,6 +20,7 @@
opacity: 0;
}
}
@keyframes view-fadein {
from {
opacity: 0;
@ -66,4 +69,4 @@
to {
transform: translate3d(100%, 0, 0);
}
}
}

View File

@ -9,13 +9,13 @@
align-items: center;
}
.youtubePlayerContainer.onTop {
z-index: 1000;
}
.youtubePlayerContainer.onTop {
z-index: 1000;
}
.youtubePlayerContainer video {
margin: 0 !important;
padding: 0 !important;
width: 100%;
height: 100%;
}
.youtubePlayerContainer video {
margin: 0 !important;
padding: 0 !important;
width: 100%;
height: 100%;
}

View File

@ -16,18 +16,6 @@ define(["jQuery", "loading", "fnchecked", "emby-checkbox", "emby-textarea", "emb
return '<option value="' + language.Value + '">' + language.Name + "</option>"
})).val(config.UICulture);
currentLanguage = config.UICulture;
if (systemInfo.CanSelfUpdate) {
page.querySelector(".fldAutomaticUpdates").classList.remove("hide");
} else {
page.querySelector(".fldAutomaticUpdates").classList.add("hide");
}
$("#chkEnableAutomaticServerUpdates", page).checked(config.EnableAutoUpdate);
$("#chkEnableAutomaticRestart", page).checked(config.EnableAutomaticRestart);
if (systemInfo.CanSelfRestart) {
page.querySelector("#fldEnableAutomaticRestart").classList.remove("hide");
} else {
page.querySelector("#fldEnableAutomaticRestart").classList.add("hide");
}
if (systemInfo.CanSelfRestart || systemInfo.CanSelfUpdate) {
$(".autoUpdatesContainer", page).removeClass("hide");
} else {
@ -48,8 +36,6 @@ define(["jQuery", "loading", "fnchecked", "emby-checkbox", "emby-textarea", "emb
config.MetadataNetworkPath = $("#txtMetadataNetworkPath", form).val();
var requiresReload = (config.UICulture !== currentLanguage);
config.AutoRunWebApp = $("#chkAutoRunWebApp", form).checked();
config.EnableAutomaticRestart = $("#chkEnableAutomaticRestart", form).checked();
config.EnableAutoUpdate = $("#chkEnableAutomaticServerUpdates", form).checked();
ApiClient.updateServerConfiguration(config).then(function() {
ApiClient.getNamedConfiguration(brandingConfigKey).then(function(brandingConfig) {
brandingConfig.LoginDisclaimer = form.querySelector("#txtLoginDisclaimer").value;

View File

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

View File

@ -1,4 +1,4 @@
define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu", "mainTabsManager", "cardBuilder", "dom", "imageLoader", "playbackManager", "emby-itemscontainer", "emby-tabs", "emby-button"], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager) {
define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu", "mainTabsManager", "cardBuilder", "dom", "imageLoader", "playbackManager", "emby-scroller", "emby-itemscontainer", "emby-tabs", "emby-button"], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager) {
"use strict";
function enableScrollX() {
@ -114,18 +114,25 @@ define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu"
var allowBottomPadding = true;
if (enableScrollX()) {
allowBottomPadding = false;
html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX padded-left padded-right">';
html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
} else {
html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">';
html += '<div is="emby-itemscontainer" class="itemsContainer focuscontainer-x padded-left padded-right vertical-wrap">';
}
html += cardBuilder.getCardsHtml(recommendation.Items, {
shape: getPortraitShape(),
scalable: true,
overlayPlayButton: true,
allowBottomPadding: allowBottomPadding
allowBottomPadding: allowBottomPadding,
showTitle: true,
showYear: true,
centerText: true
});
if (enableScrollX()) {
html += '</div>';
}
html += "</div>";
html += "</div>";
return html;

View File

@ -1,4 +1,4 @@
define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "mediaInfo", "focusManager", "imageLoader", "scrollHelper", "events", "connectionManager", "browser", "globalize", "apphost", "layoutManager", "userSettings", "scrollStyles", "emby-slider", "paper-icon-button-light", "css!assets/css/videoosd"], function (playbackManager, dom, inputManager, datetime, itemHelper, mediaInfo, focusManager, imageLoader, scrollHelper, events, connectionManager, browser, globalize, appHost, layoutManager, userSettings) {
define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "mediaInfo", "focusManager", "imageLoader", "scrollHelper", "events", "connectionManager", "browser", "globalize", "apphost", "layoutManager", "userSettings", "keyboardnavigation", "scrollStyles", "emby-slider", "paper-icon-button-light", "css!assets/css/videoosd"], function (playbackManager, dom, inputManager, datetime, itemHelper, mediaInfo, focusManager, imageLoader, scrollHelper, events, connectionManager, browser, globalize, appHost, layoutManager, userSettings, keyboardnavigation) {
"use strict";
function seriesImageUrl(item, options) {
@ -437,6 +437,11 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
});
currentVisibleMenu = null;
toggleSubtitleSync("hide");
// Firefox does not blur by itself
if (document.activeElement) {
document.activeElement.blur();
}
}
}
@ -1087,64 +1092,79 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
*/
var NavigationKeys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
/**
* Clicked element.
* To skip 'click' handling on Firefox/Edge.
*/
var clickedElement;
function onWindowKeyDown(e) {
clickedElement = e.srcElement;
var key = keyboardnavigation.getKeyName(e);
if (!currentVisibleMenu && 32 === e.keyCode) {
playbackManager.playPause(currentPlayer);
showOsd();
return;
}
if (layoutManager.tv && NavigationKeys.indexOf(e.key) != -1) {
if (layoutManager.tv && NavigationKeys.indexOf(key) != -1) {
showOsd();
return;
}
switch (e.key) {
switch (key) {
case "Enter":
showOsd();
break;
case "Escape":
case "Back":
// Ignore key when some dialog is opened
if (currentVisibleMenu === "osd" && !document.querySelector(".dialogContainer")) {
hideOsd();
e.stopPropagation();
}
break;
case "k":
playbackManager.playPause(currentPlayer);
showOsd();
break;
case "l":
case "ArrowRight":
case "Right":
playbackManager.fastForward(currentPlayer);
showOsd();
break;
case "j":
case "ArrowLeft":
case "Left":
playbackManager.rewind(currentPlayer);
showOsd();
break;
case "f":
if (!e.ctrlKey && !e.metaKey) {
playbackManager.toggleFullscreen(currentPlayer);
showOsd();
}
break;
case "m":
playbackManager.toggleMute(currentPlayer);
showOsd();
break;
case "NavigationLeft":
case "GamepadDPadLeft":
case "GamepadLeftThumbstickLeft":
// Ignores gamepad events that are always triggered, even when not focused.
// Ignores gamepad events that are always triggered, even when not focused.
if (document.hasFocus()) {
playbackManager.rewind(currentPlayer);
showOsd();
}
break;
case "NavigationRight":
case "GamepadDPadRight":
case "GamepadLeftThumbstickRight":
// Ignores gamepad events that are always triggered, even when not focused.
// Ignores gamepad events that are always triggered, even when not focused.
if (document.hasFocus()) {
playbackManager.fastForward(currentPlayer);
showOsd();
@ -1152,6 +1172,14 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
}
}
function onWindowMouseDown(e) {
clickedElement = e.srcElement;
}
function onWindowTouchStart(e) {
clickedElement = e.srcElement;
}
function getImgUrl(item, chapter, index, maxWidth, apiClient) {
if (chapter.ImageTag) {
return apiClient.getScaledImageUrl(item.Id, {
@ -1280,6 +1308,12 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
showOsd();
inputManager.on(window, onInputCommand);
dom.addEventListener(window, "keydown", onWindowKeyDown, {
capture: true
});
dom.addEventListener(window, window.PointerEvent ? "pointerdown" : "mousedown", onWindowMouseDown, {
passive: true
});
dom.addEventListener(window, "touchstart", onWindowTouchStart, {
passive: true
});
} catch (e) {
@ -1294,6 +1328,12 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
}
dom.removeEventListener(window, "keydown", onWindowKeyDown, {
capture: true
});
dom.removeEventListener(window, window.PointerEvent ? "pointerdown" : "mousedown", onWindowMouseDown, {
passive: true
});
dom.removeEventListener(window, "touchstart", onWindowTouchStart, {
passive: true
});
stopOsdHideTimer();
@ -1465,7 +1505,10 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
playbackManager.previousTrack(currentPlayer);
});
view.querySelector(".btnPause").addEventListener("click", function () {
playbackManager.playPause(currentPlayer);
// Ignore 'click' if another element was originally clicked (Firefox/Edge issue)
if (this.contains(clickedElement)) {
playbackManager.playPause(currentPlayer);
}
});
view.querySelector(".btnNextTrack").addEventListener("click", function () {
playbackManager.nextTrack(currentPlayer);

View File

@ -56,21 +56,6 @@
</div>
</div>
<div class="verticalSection autoUpdatesContainer hide">
<h2>${HeaderAutomaticUpdates}</h2>
<label class="fldAutomaticUpdates checkboxContainer">
<input is="emby-checkbox" type="checkbox" id="chkEnableAutomaticServerUpdates" />
<span>${OptionEnableAutomaticServerUpdates}</span>
</label>
<div id="fldEnableAutomaticRestart" class="checkboxContainer checkboxContainer-withDescription hide">
<label>
<input is="emby-checkbox" type="checkbox" id="chkEnableAutomaticRestart" />
<span>${LabelAllowServerAutoRestart}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${LabelAllowServerAutoRestartHelp}</div>
</div>
</div>
<div class="verticalSection">
<h2>${HeaderBranding}</h2>
<div class="inputContainer">

View File

@ -8,20 +8,26 @@
font-size: inherit;
font-family: inherit;
color: inherit;
/* These are getting an outline in opera tv browsers, which run chrome 30 */
outline: none !important;
outline-width: 0;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
z-index: 0;
padding: 0.9em 1em;
vertical-align: middle;
border: 0;
vertical-align: middle;
border-radius: 0.2em;
/* These are getting an outline in opera tv browsers, which run chrome 30 */
outline: none !important;
position: relative;
font-weight: 600;
/* Disable webkit tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-decoration: none;
/* Not crazy about this but it normalizes heights between anchors and buttons */
line-height: 1.35;
transform-origin: center;
@ -42,7 +48,7 @@
}
.button-flat:hover {
opacity: .5;
opacity: 0.5;
}
.button-link {
@ -79,7 +85,7 @@
display: block;
align-items: center;
justify-content: center;
margin: .25em 0;
margin: 0.25em 0;
width: 100%;
}
@ -88,12 +94,15 @@
display: inline-flex;
align-items: center;
box-sizing: border-box;
margin: 0 .29em;
margin: 0 0.29em;
background: transparent;
text-align: center;
font-size: inherit;
font-family: inherit;
color: inherit;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
z-index: 0;
@ -101,15 +110,17 @@
min-height: initial;
width: auto;
height: auto;
padding: .556em;
padding: 0.556em;
vertical-align: middle;
border: 0;
vertical-align: middle;
/* These are getting an outline in opera tv browsers, which run chrome 30 */
outline: none !important;
position: relative;
overflow: hidden;
border-radius: 50%;
/* Disable webkit tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
justify-content: center;
transform-origin: center;
transition: 0.2s;
@ -120,32 +131,33 @@
z-index: 1;
}
.paper-icon-button-light::-moz-focus-inner {
border: 0;
}
.paper-icon-button-light::-moz-focus-inner {
border: 0;
}
.paper-icon-button-light:disabled {
opacity: 0.3;
cursor: default;
}
.paper-icon-button-light:disabled {
opacity: 0.3;
cursor: default;
}
.paper-icon-button-light > i {
font-size: 1.66956521739130434em;
/* Make sure its on top of the ripple */
position: relative;
z-index: 1;
vertical-align: middle;
}
.paper-icon-button-light > i {
font-size: 1.66956521739130434em;
.paper-icon-button-light > div {
max-height: 100%;
transform: scale(1.8);
position: relative;
z-index: 1;
vertical-align: middle;
display: inline;
margin: 0 auto;
}
/* Make sure its on top of the ripple */
position: relative;
z-index: 1;
vertical-align: middle;
}
.paper-icon-button-light > div {
max-height: 100%;
transform: scale(1.8);
position: relative;
z-index: 1;
vertical-align: middle;
display: inline;
margin: 0 auto;
}
.emby-button-foreground {
position: relative;
@ -159,7 +171,6 @@
.filterButtonBubble {
color: #fff;
position: absolute;
background: #444;
top: 0;
right: 0;
width: 1.6em;
@ -170,7 +181,7 @@
justify-content: center;
font-size: 82%;
border-radius: 100em;
box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
background: #03A9F4;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
background: #03a9f4;
font-weight: bold;
}

View File

@ -32,12 +32,16 @@
.emby-checkbox {
position: absolute;
/* This is for focusing purposes, so the focusManager doesn't skip over it */
width: 1px;
height: 1px;
margin: 0;
padding: 0;
opacity: 0;
-ms-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
}
@ -46,14 +50,13 @@
position: absolute;
top: 3px;
left: 0;
display: inline-block;
box-sizing: border-box;
width: 1.83em;
height: 1.83em;
margin: 0;
overflow: hidden;
border: 2px solid currentcolor;
border-radius: .14em;
border-radius: 0.14em;
z-index: 2;
display: flex;
align-items: center;
@ -98,18 +101,18 @@
flex-wrap: wrap;
}
.checkboxList-verticalwrap > .emby-checkbox-label {
display: inline-flex;
margin: .3em 0 .3em 0;
width: 12em;
}
.checkboxList-verticalwrap > .emby-checkbox-label {
display: inline-flex;
margin: 0.3em 0 0.3em 0;
width: 12em;
}
.checkboxList-paperList {
padding: 1em !important;
}
.checkboxListLabel {
margin-bottom: .25em;
margin-bottom: 0.25em;
}
@keyframes repaintChrome {
@ -121,3 +124,13 @@
padding: 0;
}
}
@-webkit-keyframes repaintChrome {
from {
padding: 0;
}
to {
padding: 0;
}
}

View File

@ -1,5 +1,5 @@
.emby-collapse {
margin: .5em 0;
margin: 0.5em 0;
}
.collapseContent {
@ -18,10 +18,9 @@
text-transform: none;
width: 100%;
text-align: left;
text-transform: none;
border-width: 0 0 .1em 0;
border-width: 0 0 0.1em 0;
border-style: solid;
padding-left: .1em;
padding-left: 0.1em;
background: transparent;
box-shadow: none;
}
@ -30,7 +29,7 @@
transform-origin: 50% 50%;
transition: transform 180ms ease-out;
position: absolute;
right: .5em;
right: 0.5em;
font-size: 1.5em;
}

View File

@ -2,22 +2,24 @@
display: block;
margin: 0;
margin-bottom: 0 !important;
/* Remove select styling */
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
font-size: 110%;
/* General select styles: change as needed */
font-family: inherit;
font-weight: inherit;
padding: .4em .25em;
/* Prevent padding from causing width overflow */
padding: 0.4em 0.25em;
/* must the 16px or larger to prevent iOS page zoom on focus */
font-size: 110%;
/* prevent padding from causing width overflow */
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
}
.emby-input::-moz-focus-inner {
border: 0;
}
.emby-input::-moz-focus-inner {
border: 0;
}
.inputContainer {
margin-bottom: 1.8em;
@ -25,13 +27,14 @@
.inputLabel {
display: inline-block;
margin-bottom: .25em;
margin-bottom: 0.25em;
}
.emby-input + .fieldDescription {
margin-top: .25em;
margin-top: 0.25em;
}
.emby-input-iconbutton {
-webkit-align-self: flex-end;
align-self: flex-end;
}

View File

@ -11,9 +11,9 @@
width: 100%;
height: 100%;
border-radius: 50%;
border: .25em solid rgba(0, 0, 0, 1);
border: 0.25em solid rgba(0, 0, 0, 1);
box-sizing: border-box;
background: rgba(0, 0, 0, .9);
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
@ -51,7 +51,7 @@
width: 200%;
height: 200%;
border-radius: 50%;
border-width: .25em;
border-width: 0.25em;
border-style: solid;
box-sizing: border-box;
}

View File

@ -4,29 +4,29 @@
display: inline-block;
box-sizing: border-box;
margin: 0;
padding-left: 0;
padding-left: 24px;
}
.radio-label-block {
display: flex;
align-items: center;
margin-top: .5em;
margin-bottom: .5em;
}
.mdl-radio {
padding-left: 24px;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.mdl-radio__button {
line-height: 24px;
position: absolute;
/* 1px is for focusing purposes, so the focusManager doesn't skip over it */
width: 1px;
height: 1px;
margin: 0;
padding: 0;
opacity: 0;
-ms-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
}
@ -51,7 +51,7 @@
}
.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle {
border: 2px solid rgba(0,0,0, 0.26);
border: 2px solid rgba(0, 0, 0, 0.26);
cursor: auto;
}
@ -67,27 +67,31 @@
cursor: pointer;
transition-duration: 0.28s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-transform: scale3d(0, 0, 0);
transform: scale3d(0, 0, 0);
border-radius: 50%;
background: #00a4dc;
}
.mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
background: rgba(0,0,0, 0.26);
background: rgba(0, 0, 0, 0.26);
cursor: auto;
}
.mdl-radio__button:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
box-shadow: 0 0 0px 10px rgba(255, 255, 255, 0.76);
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.76);
}
.mdl-radio__button:checked:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26)
box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26);
}
.mdl-radio__label {
@ -95,6 +99,6 @@
}
.mdl-radio__button:disabled + .mdl-radio__label {
color: rgba(0,0,0, 0.26);
color: rgba(0, 0, 0, 0.26);
cursor: auto;
}

View File

@ -2,52 +2,60 @@
display: block;
margin: 0;
margin-bottom: 0 !important;
/* Remove select styling */
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
font-size: 110%;
/* General select styles: change as needed */
font-family: inherit;
font-weight: inherit;
padding: .5em 1.9em .5em .5em;
padding: 0.5em 1.9em 0.5em 0.5em;
/* Prevent padding from causing width overflow */
box-sizing: border-box;
outline: none !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
}
.emby-select[disabled] {
background: none !important;
border-color: transparent !important;
color: inherit !important;
appearance: none;
}
.selectContainer-inline > .emby-select {
padding: .3em 1.9em .3em .5em;
font-size: inherit;
.emby-select[disabled] {
background: none !important;
border-color: transparent !important;
color: inherit !important;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.selectContainer-inline > .emby-select[disabled] {
padding-left: 0;
padding-right: 0;
}
.emby-select::-moz-focus-inner {
border: 0;
}
.selectContainer-inline > .emby-select {
padding: 0.3em 1.9em 0.3em 0.5em;
font-size: inherit;
}
.selectContainer-inline > .emby-select[disabled] {
padding-left: 0;
padding-right: 0;
}
.emby-select-focusscale {
transition: transform 180ms ease-out !important;
-webkit-transform-origin: center center;
transform-origin: center center;
}
.emby-select-focusscale:focus {
transform: scale(1.04);
z-index: 1;
}
.emby-select-focusscale:focus {
transform: scale(1.04);
z-index: 1;
}
.emby-select + .fieldDescription {
margin-top: .25em;
margin-top: 0.25em;
}
.selectContainer {
@ -63,31 +71,32 @@
.selectLabel {
display: block;
margin-bottom: .25em;
margin-bottom: 0.25em;
}
.selectContainer-inline > .selectLabel {
margin-bottom: 0;
margin-right: .5em;
margin-right: 0.5em;
flex-shrink: 0;
}
.emby-select-withcolor {
-webkit-appearance: none;
appearance: none;
border-radius: .2em;
border-radius: 0.2em;
}
.selectArrowContainer {
position: absolute;
right: .3em;
top: .2em;
right: 0.3em;
top: 0.2em;
color: inherit;
pointer-events: none;
}
.selectContainer-inline > .selectArrowContainer {
top: initial;
bottom: .24em;
bottom: 0.24em;
font-size: 90%;
}
@ -96,7 +105,7 @@
}
.selectArrow {
margin-top: .35em;
margin-top: 0.35em;
font-size: 1.7em;
}

View File

@ -1,73 +1,85 @@
_:-ms-input-placeholder {
:-ms-input-placeholder {
appearance: none;
-ms-appearance: none;
height: 2.223em;
margin: 0;
}
.mdl-slider {
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
height: 150%;/*150% is needed, else ie and edge won't display the thumb properly*/
height: 150%;/* 150% is needed, else ie and edge won't display the thumb properly */
background: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: 0;
color: #00a4dc;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
z-index: 1;
cursor: pointer;
margin: 0;
/* Disable webkit tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: block;
}
.mdl-slider::-moz-focus-outer {
border: 0;
}
.mdl-slider::-moz-focus-outer {
border: 0;
}
.mdl-slider::-ms-tooltip {
display: none;
}
.mdl-slider::-ms-tooltip {
display: none;
}
.mdl-slider::-webkit-slider-runnable-track {
background: transparent;
}
.mdl-slider::-webkit-slider-runnable-track {
background: transparent;
}
.mdl-slider::-moz-range-track {
background: #444;
border: none;
width: calc(100% - 20px);
}
.mdl-slider::-moz-range-track {
background: #444;
border: none;
width: calc(100% - 20px);
}
.mdl-slider::-moz-range-progress {
background: #00a4dc;
width: calc(100% - 20px);
}
.mdl-slider::-moz-range-progress {
background: #00a4dc;
width: calc(100% - 20px);
}
.mdl-slider::-ms-track {
background: none;
color: transparent;
height: .2em;
width: 100%;
border: none;
}
.mdl-slider::-ms-track {
background: none;
color: transparent;
height: 0.2em;
width: 100%;
border: none;
}
.mdl-slider::-ms-fill-lower {
display: none;
}
.mdl-slider::-ms-fill-lower {
display: none;
}
.mdl-slider::-ms-fill-upper {
display: none;
}
.mdl-slider::-ms-fill-upper {
display: none;
}
.mdl-slider::-webkit-slider-thumb {
appearance: none;
width: 1.2em;
height: 1.2em;
box-sizing: border-box;
border-radius: 50%;
background: #00a4dc;
border: none;
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.mdl-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1.2em;
height: 1.2em;
box-sizing: border-box;
border-radius: 50%;
background: #00a4dc;
border: none;
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.mdl-slider-hoverthumb::-webkit-slider-thumb {
transform: none;
@ -91,27 +103,27 @@ _:-ms-input-placeholder {
height: 0.9em;
box-sizing: border-box;
border-radius: 50%;
background-image: none;
background: #00a4dc;
background-image: none;
border: none;
transform: Scale(1.4, 1.4);
transform: scale(1.4, 1.4);
}
.mdl-slider::-ms-thumb {
appearance: none;
-webkit-appearance: none;
width: 1.8em;
height: 1.8em;
box-sizing: border-box;
border-radius: 50%;
background: #00a4dc;
border: none;
transform: scale(.9, .9);
transform: scale(0.9, 0.9);
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.mdl-slider-hoverthumb::-ms-thumb {
margin-left: -.4em;
transform: scale(.5, .5);
margin-left: -0.4em;
transform: scale(0.5, 0.5);
}
.mdl-slider:hover::-ms-thumb {
@ -149,15 +161,15 @@ _:-ms-input-placeholder {
.mdl-slider-background-flex-container {
width: 100%;
box-sizing: border-box;
margin-top: -.05em;
margin-top: -0.05em;
top: 50%;
position: absolute;
}
.mdl-slider-background-flex {
background: #333;
height: .2em;
margin-top: -.08em;
height: 0.2em;
margin-top: -0.08em;
width: 100%;
top: 50%;
left: 0;
@ -173,7 +185,7 @@ _:-ms-input-placeholder {
}
.mdl-slider-background-lower {
/*transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/
/* transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1); */
position: absolute;
left: 0;
width: 0;
@ -188,15 +200,16 @@ _:-ms-input-placeholder {
.mdl-slider-background-lower-withtransform {
width: 100%;
/*transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/
/* transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); */
transform-origin: left center;
transform: scaleX(0);
}
.mdl-slider-background-upper {
/*transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1), width 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/
/* transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1), width 0.18s cubic-bezier(0.4, 0, 0.2, 1); */
background: #666;
background: rgba(255, 255, 255, .4);
background: rgba(255, 255, 255, 0.4);
position: absolute;
left: 0;
width: 0;
@ -218,5 +231,5 @@ _:-ms-input-placeholder {
.sliderBubbleText {
margin: 0;
padding: .5em .75em;
padding: 0.5em 0.75em;
}

View File

@ -1,4 +1,4 @@
define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager) {
define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager, keyboardnavigation) {
'use strict';
var EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
@ -250,7 +250,7 @@ define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement
* Handle KeyDown event
*/
function onKeyDown(e) {
switch (e.key) {
switch (keyboardnavigation.getKeyName(e)) {
case 'ArrowLeft':
case 'Left':
stepKeyboard(this, -this.keyboardStepDown || -1);

View File

@ -2,30 +2,35 @@
display: block;
margin: 0;
margin-bottom: 0 !important;
/* Remove select styling */
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
font-size: inherit;
/* General select styles: change as needed */
font-family: inherit;
font-weight: inherit;
color: inherit;
padding: .35em .25em;
padding: 0.35em 0.25em;
/* Prevent padding from causing width overflow */
box-sizing: border-box;
outline: none !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
}
.emby-textarea::-moz-focus-inner {
border: 0;
}
.emby-textarea::-moz-focus-inner {
border: 0;
}
.textareaLabel {
display: inline-block;
transition: all .2s ease-out;
margin-bottom: .25em;
transition: all 0.2s ease-out;
margin-bottom: 0.25em;
}
.emby-textarea + .fieldDescription {
margin-top: .25em;
margin-top: 0.25em;
}

View File

@ -9,6 +9,10 @@
margin: 0;
padding: 0;
overflow: visible;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
flex-direction: row-reverse;
justify-content: flex-end;
@ -24,6 +28,9 @@
margin: 0;
padding: 0;
opacity: 0;
-ms-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
}
@ -34,7 +41,7 @@
}
.mdl-switch__track {
background: rgba(128,128,128, 0.5);
background: rgba(128, 128, 128, 0.5);
height: 1em;
border-radius: 1em;
cursor: pointer;
@ -45,7 +52,7 @@
}
.mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
background: rgba(0,0,0, 0.12);
background: rgba(0, 0, 0, 0.12);
cursor: auto;
}
@ -53,7 +60,7 @@
background: #999;
position: absolute;
left: 0;
top: -.25em;
top: -0.25em;
height: 1.44em;
width: 1.44em;
border-radius: 50%;
@ -70,11 +77,11 @@
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
background: #00a4dc;
left: 1.466em;
box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px .56em 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 0.56em 0 rgba(0, 0, 0, 0.12);
}
.mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
background: rgb(189,189,189);
background: rgb(189, 189, 189);
cursor: auto;
}
@ -82,17 +89,18 @@
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: inline-block;
box-sizing: border-box;
width: .6em;
height: .6em;
width: 0.6em;
height: 0.6em;
border-radius: 50%;
background-color: transparent;
}
.mdl-switch__input:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper {
box-shadow: 0 0 0 1.39em rgba(0, 0, 0, .05);
box-shadow: 0 0 0 1.39em rgba(0, 0, 0, 0.05);
}
.mdl-switch__input:checked:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper {
@ -105,10 +113,10 @@
margin: 0;
display: inline-flex;
align-items: center;
margin-left: .7em;
margin-left: 0.7em;
}
.mdl-switch__input[disabled] .mdl-switch__label {
color: rgb(189,189,189);
color: rgb(189, 189, 189);
cursor: auto;
}

View File

@ -72,67 +72,72 @@
</div>
</div>
</div>
<div class="navigationSection">
<br />
<div>
<button is="paper-icon-button-light" class="btnArrowUp btnCommand autoSize raised" title="${ButtonArrowUp}" data-command="MoveUp">
<i class="md-icon">keyboard_arrow_up</i>
</button>
</div>
<br />
<div>
<button is="paper-icon-button-light" class="btnArrowLeft btnCommand autoSize raised" title="${ButtonArrowLeft}" data-command="MoveLeft">
<i class="md-icon">keyboard_arrow_left</i>
</button>
<button is="paper-icon-button-light" class="btnOk btnCommand autoSize raised" title="${ButtonOk}" data-command="Select">
<i class="md-icon">keyboard_return</i>
</button>
<button is="paper-icon-button-light" class="btnArrowRight btnCommand autoSize raised" title="${ButtonArrowRight}" data-command="MoveRight">
<i class="md-icon">keyboard_arrow_right</i>
</button>
</div>
<br />
<div>
<button is="paper-icon-button-light" class="btnBack btnCommand autoSize" title="${ButtonBack}" data-command="Back">
<i class="md-icon">arrow_back</i>
</button>
<button is="paper-icon-button-light" class="btnArrowDown btnCommand autoSize raised" title="${ButtonArrowDown}" data-command="MoveDown">
<i class="md-icon">keyboard_arrow_down</i>
</button>
<button is="paper-icon-button-light" class="btnContextMenu btnCommand autoSize" title="${ButtonInfo}" data-command="ToggleContextMenu">
<i class="md-icon">menu</i>
</button>
</div>
<br />
<div>
<button is="paper-icon-button-light" class="btnGoHome btnCommand autoSize" title="${ButtonHome}" data-command="GoHome">
<i class="md-icon">home</i>
</button>
<button is="paper-icon-button-light" class="btnShowSearch btnCommand autoSize" title="${ButtonSearch}" data-command="GoToSearch">
<i class="md-icon">search</i>
</button>
<button is="paper-icon-button-light" class="bthShowSettings btnCommand autoSize" title="${ButtonSettings}" data-command="GoToSettings">
<i class="md-icon">settings</i>
</button>
<div>
<div class="navigationSection">
<div is="emby-collapse" title="${HeaderNavigation}">
<div class="collapseContent">
<div>
<button is="paper-icon-button-light" class="btnArrowUp btnCommand autoSize button-submit" title="${ButtonArrowUp}" data-command="MoveUp">
<i class="md-icon">keyboard_arrow_up</i>
</button>
</div>
<br />
<div>
<button is="paper-icon-button-light" class="btnArrowLeft btnCommand autoSize button-submit" title="${ButtonArrowLeft}" data-command="MoveLeft">
<i class="md-icon">keyboard_arrow_left</i>
</button>
<button is="paper-icon-button-light" class="btnOk btnCommand autoSize button-submit" title="${ButtonOk}" data-command="Select">
<i class="md-icon">keyboard_return</i>
</button>
<button is="paper-icon-button-light" class="btnArrowRight btnCommand autoSize button-submit" title="${ButtonArrowRight}" data-command="MoveRight">
<i class="md-icon">keyboard_arrow_right</i>
</button>
</div>
<br />
<div>
<button is="paper-icon-button-light" class="btnBack btnCommand autoSize" title="${ButtonBack}" data-command="Back">
<i class="md-icon">arrow_back</i>
</button>
<button is="paper-icon-button-light" class="btnArrowDown btnCommand autoSize button-submit" title="${ButtonArrowDown}" data-command="MoveDown">
<i class="md-icon">keyboard_arrow_down</i>
</button>
<button is="paper-icon-button-light" class="btnContextMenu btnCommand autoSize" title="${ButtonInfo}" data-command="ToggleContextMenu">
<i class="md-icon">menu</i>
</button>
</div>
<br />
<div>
<button is="paper-icon-button-light" class="btnGoHome btnCommand autoSize" title="${ButtonHome}" data-command="GoHome">
<i class="md-icon">home</i>
</button>
<button is="paper-icon-button-light" class="btnShowSearch btnCommand autoSize" title="${ButtonSearch}" data-command="GoToSearch">
<i class="md-icon">search</i>
</button>
<button is="paper-icon-button-light" class="bthShowSettings btnCommand autoSize" title="${ButtonSettings}" data-command="GoToSettings">
<i class="md-icon">settings</i>
</button>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="sendMessageSection">
<div is="emby-collapse" title="${HeaderSendMessage}">
<div class="collapseContent" style="text-align: left;">
<form class="sendMessageForm">
<div class="inputContainer">
<input is="emby-input" class="sendMessageElement" type="text" id="txtMessageTitle" label="${LabelMessageTitle}" required />
</div>
<br />
<div class="inputContainer">
<input is="emby-input" class="sendMessageElement" type="text" id="txtMessageText" label="${LabelMessageText}" required />
</div>
<p>
<button is="emby-button" class="sendMessageElement button-submit block raised" type="submit" raised>${ButtonSend}</button>
</p>
</form>
</div>
<div class="collapseContent" style="text-align: left;">
<form class="sendMessageForm">
<div class="inputContainer">
<input is="emby-input" class="sendMessageElement" type="text" id="txtMessageTitle" label="${LabelMessageTitle}" required />
</div>
<br />
<div class="inputContainer">
<input is="emby-input" class="sendMessageElement" type="text" id="txtMessageText" label="${LabelMessageText}" required />
</div>
<p>
<button is="emby-button" class="sendMessageElement button-submit block raised" type="submit" raised>${ButtonSend}</button>
</p>
</form>
</div>
</div>
</div>
<div class="sendTextSection">

View File

@ -77,10 +77,6 @@ define(['browser'], function (browser) {
return true;
}
if (browser.osx || browser.iOS) {
return false;
}
return videoTestElement.canPlayType('audio/mp4; codecs="ac-3"').replace(/no/, '');
}

View File

@ -22,9 +22,7 @@ define(['playbackManager', 'focusManager', 'appRouter', 'dom', 'apphost'], funct
var eventListenerCount = 0;
function on(scope, fn) {
if (eventListenerCount) {
eventListenerCount++;
}
eventListenerCount++;
dom.addEventListener(scope, 'command', fn, {});
}

View File

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

View File

@ -10,13 +10,13 @@ define(['appStorage', 'events'], function (appStorage, events) {
}
function AppSettings() {
}
AppSettings.prototype.enableAutoLogin = function (val) {
if (val != null) {
this.set('enableAutoLogin', val.toString());
}
return this.get('enableAutoLogin') !== 'false';
};
@ -132,4 +132,4 @@ define(['appStorage', 'events'], function (appStorage, events) {
};
return new AppSettings();
});
});

View File

@ -242,5 +242,5 @@ define(['appSettings', 'events'], function (appSettings, events) {
return this.get(key, true);
};
return UserSettings;
return new UserSettings();
});

View File

@ -315,6 +315,14 @@ var AppInfo = {};
return "components";
}
function getElementsPath() {
return "elements"
}
function getScriptsPath() {
return "scripts"
}
function getPlaybackManager(playbackManager) {
window.addEventListener("beforeunload", function () {
try {
@ -650,8 +658,12 @@ var AppInfo = {};
(function () {
var urlArgs = "v=" + (window.dashboardVersion || new Date().getDate());
var bowerPath = getBowerPath();
var componentsPath = getComponentsPath();
var elementsPath = getElementsPath();
var scriptsPath = getScriptsPath();
var paths = {
browserdeviceprofile: "scripts/browserdeviceprofile",
browser: "scripts/browser",
@ -672,7 +684,6 @@ var AppInfo = {};
itemHelper: componentsPath + "/itemhelper",
itemShortcuts: componentsPath + "/shortcuts",
playQueueManager: componentsPath + "/playback/playqueuemanager",
autoPlayDetect: componentsPath + "/playback/autoplaydetect",
nowPlayingHelper: componentsPath + "/playback/nowplayinghelper",
pluginManager: componentsPath + "/pluginManager",
packageManager: componentsPath + "/packagemanager",
@ -765,7 +776,6 @@ var AppInfo = {};
return queryString;
});
var elementsPath = "elements"
define("emby-button", [elementsPath + "/emby-button/emby-button"], returnFirstDependency);
define("paper-icon-button-light", [elementsPath + "/emby-button/paper-icon-button-light"], returnFirstDependency);
define("emby-checkbox", [elementsPath + "/emby-checkbox/emby-checkbox"], returnFirstDependency);
@ -778,6 +788,9 @@ var AppInfo = {};
define("emby-textarea", [elementsPath + "/emby-textarea/emby-textarea"], returnFirstDependency);
define("emby-toggle", [elementsPath + "/emby-toggle/emby-toggle"], returnFirstDependency);
define("appSettings", [scriptsPath + "/settings/appSettings"], returnFirstDependency);
define("userSettings", [scriptsPath + "/settings/userSettings"], returnFirstDependency);
define("chromecastHelper", [componentsPath + "/chromecast/chromecasthelpers"], returnFirstDependency);
define("mediaSession", [componentsPath + "/playback/mediasession"], returnFirstDependency);
define("actionsheet", [componentsPath + "/actionsheet/actionsheet"], returnFirstDependency);
@ -865,9 +878,6 @@ var AppInfo = {};
define("toast", [componentsPath + "/toast/toast"], returnFirstDependency);
define("scrollHelper", [componentsPath + "/scrollhelper"], returnFirstDependency);
define("touchHelper", [componentsPath + "/touchhelper"], returnFirstDependency);
define("appSettings", [componentsPath + "/appSettings"], returnFirstDependency);
define("userSettings", [componentsPath + "/usersettings/usersettings"], returnFirstDependency);
define("userSettingsBuilder", [componentsPath + "/usersettings/usersettingsbuilder", "layoutManager", "browser"], returnFirstDependency);
define("imageUploader", [componentsPath + "/imageuploader/imageuploader"], returnFirstDependency);
define("htmlMediaHelper", [componentsPath + "/htmlMediaHelper"], returnFirstDependency);
define("viewContainer", [componentsPath + "/viewContainer"], returnFirstDependency);

View File

@ -699,7 +699,6 @@
"OptionEnableAccessFromAllDevices": "تفعيل الدخول على كافة الأجهزة",
"OptionEnableAccessToAllChannels": "تفعيل الدخول على كافة القنوات",
"OptionEnableAccessToAllLibraries": "تمكين الدخول على كافة المكتبات",
"OptionEnableAutomaticServerUpdates": "تمكين التحديثات الآلية في الخادم",
"OptionEnableExternalContentInSuggestions": "تمكين المحتوى الخارجي في المقترحات",
"OptionEnableExternalContentInSuggestionsHelp": "السماح للعروض الإعلانية من الإنترنت وبرامج بث التلفزة الحي لتضمّن في المحتوى المقترح.",
"OptionEnableForAllTuners": "تمكين كل أجهزة المولفات",

View File

@ -565,7 +565,6 @@
"OptionEnableAccessFromAllDevices": "Позволяване на достъпа от всички устройства",
"OptionEnableAccessToAllChannels": "Позволяване на достъпа до всички канали",
"OptionEnableAccessToAllLibraries": "Позволяване на достъпа до всички библиотеки",
"OptionEnableAutomaticServerUpdates": "Разрешаване на автоматичните обновления",
"OptionEnded": "Приключило",
"OptionEveryday": "Всеки ден",
"OptionExternallyDownloaded": "Външно сваляне",

View File

@ -930,7 +930,6 @@
"OptionEnableAccessFromAllDevices": "Povolit přístup ze všech zařízení",
"OptionEnableAccessToAllChannels": "Povolit přístup ze všech kanálů",
"OptionEnableAccessToAllLibraries": "Povolit přístup ke všem knihovnám",
"OptionEnableAutomaticServerUpdates": "Povolit automatickou aktualizaci serveru",
"OptionEnableExternalContentInSuggestions": "Aktivovat externí obsah v návrzích",
"OptionEnableExternalContentInSuggestionsHelp": "Povolit zahrnutí internetových upoutávek a živých televizních programů do navrhovaného obsahu.",
"OptionEnableForAllTuners": "Povolit pro všechna zařízení tunerů",

View File

@ -825,7 +825,6 @@
"OptionEnableAccessFromAllDevices": "Tillad adgang fra alle enheder",
"OptionEnableAccessToAllChannels": "Tillad adgang til alle kanaler",
"OptionEnableAccessToAllLibraries": "Tillad adgang til alle biblioteker",
"OptionEnableAutomaticServerUpdates": "Aktiver automatiske serveropdateringer",
"OptionEnableExternalContentInSuggestions": "Aktiver eksternt indhold i anbefalinger",
"OptionEnableExternalContentInSuggestionsHelp": "Tillad at internet-trailers og live-tv-programmer bliver inkluderet i det anbefalede indhold.",
"OptionEnableForAllTuners": "Aktiver for alle tuner-enheder",

View File

@ -974,7 +974,6 @@
"OptionEnableAccessFromAllDevices": "Erlaube Zugriff von allen Geräten",
"OptionEnableAccessToAllChannels": "Erlaube Zugriff auf alle Kanäle",
"OptionEnableAccessToAllLibraries": "Erlaube Zugriff auf alle Bibliotheken",
"OptionEnableAutomaticServerUpdates": "Aktiviere automatische Server Updates",
"OptionEnableExternalContentInSuggestions": "Aktiviere externe Inhalte in Empfehlungen",
"OptionEnableExternalContentInSuggestionsHelp": "Erlaube Internet Trailer und Live TV Sendungen in Empfehlungen.",
"OptionEnableForAllTuners": "Aktiviere für alle Tuner",

View File

@ -868,7 +868,6 @@
"OptionEnableAccessFromAllDevices": "Πρόσβαση από όλες τις συσκευές",
"OptionEnableAccessToAllChannels": "Ενεργοποιήστε την πρόσβαση σε όλα τα κανάλια",
"OptionEnableAccessToAllLibraries": "Πρόσβαση σε όλες τις Βιβλιοθήκες",
"OptionEnableAutomaticServerUpdates": "Ενεργοποίηση αυτόματων ενημερώσεων διακομιστή",
"OptionEnableExternalContentInSuggestionsHelp": "Να επιτρέπεται η συμπερίληψη internet trailers και προγράμματα live tv στο προτεινόμενο περιεχόμενο.",
"OptionEnableM2tsMode": "Ενεργοποίηση λειτουργίας M2ts",
"OptionEnded": "Τέλος",

Some files were not shown because too many files have changed in this diff Show More