mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge remote-tracking branch 'upstream/master' into exit_on_back2
Conflicts: src/components/apphost.js
This commit is contained in:
Dmitry Lyzo
commit
ddf7eae55b
136 changed files with 4985 additions and 2523 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,135 +0,0 @@
|
|||
define(['appStorage', 'events'], function (appStorage, events) {
|
||||
'use strict';
|
||||
|
||||
function getKey(name, userId) {
|
||||
if (userId) {
|
||||
name = userId + '-' + name;
|
||||
}
|
||||
|
||||
return name;
|
||||
}
|
||||
|
||||
function AppSettings() {
|
||||
|
||||
}
|
||||
|
||||
AppSettings.prototype.enableAutoLogin = function (val) {
|
||||
if (val != null) {
|
||||
this.set('enableAutoLogin', val.toString());
|
||||
}
|
||||
return this.get('enableAutoLogin') !== 'false';
|
||||
};
|
||||
|
||||
AppSettings.prototype.enableAutomaticBitrateDetection = function (isInNetwork, mediaType, val) {
|
||||
var key = 'enableautobitratebitrate-' + mediaType + '-' + isInNetwork;
|
||||
if (val != null) {
|
||||
if (isInNetwork && mediaType === 'Audio') {
|
||||
val = true;
|
||||
}
|
||||
|
||||
this.set(key, val.toString());
|
||||
}
|
||||
|
||||
if (isInNetwork && mediaType === 'Audio') {
|
||||
return true;
|
||||
} else {
|
||||
return this.get(key) !== 'false';
|
||||
}
|
||||
};
|
||||
|
||||
AppSettings.prototype.maxStreamingBitrate = function (isInNetwork, mediaType, val) {
|
||||
var key = 'maxbitrate-' + mediaType + '-' + isInNetwork;
|
||||
if (val != null) {
|
||||
if (isInNetwork && mediaType === 'Audio') {
|
||||
// nothing to do, this is always a max value
|
||||
} else {
|
||||
this.set(key, val);
|
||||
}
|
||||
}
|
||||
|
||||
if (isInNetwork && mediaType === 'Audio') {
|
||||
// return a huge number so that it always direct plays
|
||||
return 150000000;
|
||||
} else {
|
||||
return parseInt(this.get(key) || '0') || 1500000;
|
||||
}
|
||||
};
|
||||
|
||||
AppSettings.prototype.maxStaticMusicBitrate = function (val) {
|
||||
if (val !== undefined) {
|
||||
this.set('maxStaticMusicBitrate', val);
|
||||
}
|
||||
|
||||
var defaultValue = 320000;
|
||||
return parseInt(this.get('maxStaticMusicBitrate') || defaultValue.toString()) || defaultValue;
|
||||
};
|
||||
|
||||
AppSettings.prototype.maxChromecastBitrate = function (val) {
|
||||
if (val != null) {
|
||||
this.set('chromecastBitrate1', val);
|
||||
}
|
||||
|
||||
val = this.get('chromecastBitrate1');
|
||||
return val ? parseInt(val) : null;
|
||||
};
|
||||
|
||||
AppSettings.prototype.syncOnlyOnWifi = function (val) {
|
||||
if (val != null) {
|
||||
this.set('syncOnlyOnWifi', val.toString());
|
||||
}
|
||||
|
||||
return this.get('syncOnlyOnWifi') !== 'false';
|
||||
};
|
||||
|
||||
AppSettings.prototype.syncPath = function (val) {
|
||||
if (val != null) {
|
||||
this.set('syncPath', val);
|
||||
}
|
||||
|
||||
return this.get('syncPath');
|
||||
};
|
||||
|
||||
AppSettings.prototype.cameraUploadServers = function (val) {
|
||||
if (val != null) {
|
||||
this.set('cameraUploadServers', val.join(','));
|
||||
}
|
||||
|
||||
val = this.get('cameraUploadServers');
|
||||
if (val) {
|
||||
return val.split(',');
|
||||
}
|
||||
|
||||
return [];
|
||||
};
|
||||
|
||||
AppSettings.prototype.runAtStartup = function (val) {
|
||||
if (val != null) {
|
||||
this.set('runatstartup', val.toString());
|
||||
}
|
||||
|
||||
return this.get('runatstartup') === 'true';
|
||||
};
|
||||
|
||||
AppSettings.prototype.set = function (name, value, userId) {
|
||||
var currentValue = this.get(name, userId);
|
||||
appStorage.setItem(getKey(name, userId), value);
|
||||
|
||||
if (currentValue !== value) {
|
||||
events.trigger(this, 'change', [name]);
|
||||
}
|
||||
};
|
||||
|
||||
AppSettings.prototype.get = function (name, userId) {
|
||||
return appStorage.getItem(getKey(name, userId));
|
||||
};
|
||||
|
||||
AppSettings.prototype.enableSystemExternalPlayers = function (val) {
|
||||
if (val != null) {
|
||||
this.set('enableSystemExternalPlayers', val.toString());
|
||||
}
|
||||
|
||||
return this.get('enableSystemExternalPlayers') === 'true';
|
||||
};
|
||||
|
||||
return new AppSettings();
|
||||
});
|
||||
|
|
@ -8,6 +8,6 @@
|
|||
contain: layout style;
|
||||
}
|
||||
|
||||
.appfooter.headroom--unpinned {
|
||||
transform: translateY(100%)!important;
|
||||
}
|
||||
.appfooter.headroom--unpinned {
|
||||
transform: translateY(100%) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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]) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>';
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
|
|||
initCenterFocus(this, this.scroller);
|
||||
}
|
||||
|
||||
if (bindHeader) {
|
||||
if (bindHeader && layoutManager.mobile) {
|
||||
initHeadroom(this);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,4 +8,4 @@
|
|||
|
||||
.headroom--unpinned:not(.headroomDisabled) {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -6,4 +6,4 @@
|
|||
|
||||
.first-imageEditor-buttons {
|
||||
margin-top: 2em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
|
||||
.recordingDialog-itemName {
|
||||
margin-top: .7em;
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
|
||||
.recordingDetailsContainer {
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
}
|
||||
|
||||
.recordingIcon-active {
|
||||
color: #cc3333;
|
||||
color: #c33;
|
||||
}
|
||||
|
||||
.recordSeriesContainer {
|
||||
margin-bottom: .8em;
|
||||
}
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.originalSubtitleFileLabel {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.btnUserDataOn {
|
||||
color: #cc3333 !important;
|
||||
}
|
||||
color: #c33 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
define(['userSettingsBuilder'], function (userSettingsBuilder) {
|
||||
'use strict';
|
||||
|
||||
return new userSettingsBuilder();
|
||||
});
|
||||
|
|
@ -1,246 +0,0 @@
|
|||
define(['appSettings', 'events'], function (appSettings, events) {
|
||||
'use strict';
|
||||
|
||||
function onSaveTimeout() {
|
||||
var self = this;
|
||||
self.saveTimeout = null;
|
||||
self.currentApiClient.updateDisplayPreferences('usersettings', self.displayPrefs, self.currentUserId, 'emby');
|
||||
}
|
||||
|
||||
function saveServerPreferences(instance) {
|
||||
if (instance.saveTimeout) {
|
||||
clearTimeout(instance.saveTimeout);
|
||||
}
|
||||
|
||||
instance.saveTimeout = setTimeout(onSaveTimeout.bind(instance), 50);
|
||||
}
|
||||
|
||||
function UserSettings() {
|
||||
}
|
||||
|
||||
UserSettings.prototype.setUserInfo = function (userId, apiClient) {
|
||||
if (this.saveTimeout) {
|
||||
clearTimeout(this.saveTimeout);
|
||||
}
|
||||
|
||||
this.currentUserId = userId;
|
||||
this.currentApiClient = apiClient;
|
||||
|
||||
if (!userId) {
|
||||
this.displayPrefs = null;
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
var self = this;
|
||||
|
||||
return apiClient.getDisplayPreferences('usersettings', userId, 'emby').then(function (result) {
|
||||
result.CustomPrefs = result.CustomPrefs || {};
|
||||
self.displayPrefs = result;
|
||||
});
|
||||
};
|
||||
|
||||
UserSettings.prototype.getData = function () {
|
||||
return this.displayPrefs;
|
||||
};
|
||||
|
||||
UserSettings.prototype.importFrom = function (instance) {
|
||||
this.displayPrefs = instance.getData();
|
||||
};
|
||||
|
||||
UserSettings.prototype.set = function (name, value, enableOnServer) {
|
||||
var userId = this.currentUserId;
|
||||
var currentValue = this.get(name, enableOnServer);
|
||||
var result = appSettings.set(name, value, userId);
|
||||
|
||||
if (enableOnServer !== false && this.displayPrefs) {
|
||||
this.displayPrefs.CustomPrefs[name] = value == null ? value : value.toString();
|
||||
saveServerPreferences(this);
|
||||
}
|
||||
|
||||
if (currentValue !== value) {
|
||||
events.trigger(this, 'change', [name]);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
UserSettings.prototype.get = function (name, enableOnServer) {
|
||||
var userId = this.currentUserId;
|
||||
if (enableOnServer !== false && this.displayPrefs) {
|
||||
return this.displayPrefs.CustomPrefs[name];
|
||||
}
|
||||
|
||||
return appSettings.get(name, userId);
|
||||
};
|
||||
|
||||
UserSettings.prototype.serverConfig = function (config) {
|
||||
var apiClient = this.currentApiClient;
|
||||
if (config) {
|
||||
return apiClient.updateUserConfiguration(this.currentUserId, config);
|
||||
}
|
||||
|
||||
return apiClient.getUser(this.currentUserId).then(function (user) {
|
||||
return user.Configuration;
|
||||
});
|
||||
};
|
||||
|
||||
UserSettings.prototype.enableCinemaMode = function (val) {
|
||||
if (val != null) {
|
||||
return this.set('enableCinemaMode', val.toString(), false);
|
||||
}
|
||||
|
||||
val = this.get('enableCinemaMode', false);
|
||||
return val !== 'false';
|
||||
};
|
||||
|
||||
UserSettings.prototype.enableNextVideoInfoOverlay = function (val) {
|
||||
if (val != null) {
|
||||
return this.set('enableNextVideoInfoOverlay', val.toString());
|
||||
}
|
||||
|
||||
val = this.get('enableNextVideoInfoOverlay', false);
|
||||
return val !== 'false';
|
||||
};
|
||||
|
||||
UserSettings.prototype.enableThemeSongs = function (val) {
|
||||
if (val != null) {
|
||||
return this.set('enableThemeSongs', val.toString(), false);
|
||||
}
|
||||
|
||||
val = this.get('enableThemeSongs', false);
|
||||
return val !== 'false';
|
||||
};
|
||||
|
||||
UserSettings.prototype.enableThemeVideos = function (val) {
|
||||
if (val != null) {
|
||||
return this.set('enableThemeVideos', val.toString(), false);
|
||||
}
|
||||
|
||||
val = this.get('enableThemeVideos', false);
|
||||
return val !== 'false';
|
||||
};
|
||||
|
||||
UserSettings.prototype.enableBackdrops = function (val) {
|
||||
if (val != null) {
|
||||
return this.set('enableBackdrops', val.toString(), false);
|
||||
}
|
||||
|
||||
val = this.get('enableBackdrops', false);
|
||||
return val !== 'false';
|
||||
};
|
||||
|
||||
UserSettings.prototype.language = function (val) {
|
||||
if (val != null) {
|
||||
return this.set('language', val.toString(), false);
|
||||
}
|
||||
|
||||
return this.get('language', false);
|
||||
};
|
||||
|
||||
UserSettings.prototype.dateTimeLocale = function (val) {
|
||||
if (val != null) {
|
||||
return this.set('datetimelocale', val.toString(), false);
|
||||
}
|
||||
|
||||
return this.get('datetimelocale', false);
|
||||
};
|
||||
|
||||
UserSettings.prototype.skipBackLength = function (val) {
|
||||
if (val != null) {
|
||||
return this.set('skipBackLength', val.toString());
|
||||
}
|
||||
|
||||
return parseInt(this.get('skipBackLength') || '10000');
|
||||
};
|
||||
|
||||
UserSettings.prototype.skipForwardLength = function (val) {
|
||||
if (val != null) {
|
||||
return this.set('skipForwardLength', val.toString());
|
||||
}
|
||||
|
||||
return parseInt(this.get('skipForwardLength') || '30000');
|
||||
};
|
||||
|
||||
UserSettings.prototype.dashboardTheme = function (val) {
|
||||
if (val != null) {
|
||||
return this.set('dashboardTheme', val);
|
||||
}
|
||||
|
||||
return this.get('dashboardTheme');
|
||||
};
|
||||
|
||||
UserSettings.prototype.skin = function (val) {
|
||||
if (val != null) {
|
||||
return this.set('skin', val, false);
|
||||
}
|
||||
|
||||
return this.get('skin', false);
|
||||
};
|
||||
|
||||
UserSettings.prototype.theme = function (val) {
|
||||
if (val != null) {
|
||||
return this.set('appTheme', val, false);
|
||||
}
|
||||
|
||||
return this.get('appTheme', false);
|
||||
};
|
||||
|
||||
UserSettings.prototype.screensaver = function (val) {
|
||||
if (val != null) {
|
||||
return this.set('screensaver', val, false);
|
||||
}
|
||||
|
||||
return this.get('screensaver', false);
|
||||
};
|
||||
|
||||
UserSettings.prototype.soundEffects = function (val) {
|
||||
if (val != null) {
|
||||
return this.set('soundeffects', val, false);
|
||||
}
|
||||
|
||||
return this.get('soundeffects', false);
|
||||
};
|
||||
|
||||
UserSettings.prototype.loadQuerySettings = function (key, query) {
|
||||
var values = this.get(key);
|
||||
if (values) {
|
||||
values = JSON.parse(values);
|
||||
return Object.assign(query, values);
|
||||
}
|
||||
|
||||
return query;
|
||||
};
|
||||
|
||||
UserSettings.prototype.saveQuerySettings = function (key, query) {
|
||||
var values = {};
|
||||
if (query.SortBy) {
|
||||
values.SortBy = query.SortBy;
|
||||
}
|
||||
|
||||
if (query.SortOrder) {
|
||||
values.SortOrder = query.SortOrder;
|
||||
}
|
||||
|
||||
return this.set(key, JSON.stringify(values));
|
||||
};
|
||||
|
||||
UserSettings.prototype.getSubtitleAppearanceSettings = function (key) {
|
||||
key = key || 'localplayersubtitleappearance3';
|
||||
return JSON.parse(this.get(key, false) || '{}');
|
||||
};
|
||||
|
||||
UserSettings.prototype.setSubtitleAppearanceSettings = function (value, key) {
|
||||
key = key || 'localplayersubtitleappearance3';
|
||||
return this.set(key, JSON.stringify(value), false);
|
||||
};
|
||||
|
||||
UserSettings.prototype.setFilter = function (key, value) {
|
||||
return this.set(key, value, true);
|
||||
};
|
||||
|
||||
UserSettings.prototype.getFilter = function (key) {
|
||||
return this.get(key, true);
|
||||
};
|
||||
|
||||
return UserSettings;
|
||||
});
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue