';
letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
- html += '
';
+ html += `
`;
html += '
';
html += mapLetters(letters, vertical).join('');
html += '
';
@@ -95,227 +106,228 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
element.focus = focus;
}
- function AlphaPicker(options) {
+ export class AlphaPicker {
+ constructor(options) {
- var self = this;
- this.options = options;
+ this.options = options;
- var element = options.element;
- var itemsContainer = options.itemsContainer;
- var itemClass = options.itemClass;
+ const element = options.element;
+ const itemsContainer = options.itemsContainer;
+ const itemClass = options.itemClass;
- var itemFocusValue;
- var itemFocusTimeout;
+ let itemFocusValue;
+ let itemFocusTimeout;
- function onItemFocusTimeout() {
- itemFocusTimeout = null;
- self.value(itemFocusValue);
- }
-
- var alphaFocusedElement;
- var alphaFocusTimeout;
-
- function onAlphaFocusTimeout() {
-
- alphaFocusTimeout = null;
-
- if (document.activeElement === alphaFocusedElement) {
- var value = alphaFocusedElement.getAttribute('data-value');
- self.value(value, true);
+ function onItemFocusTimeout() {
+ itemFocusTimeout = null;
+ this.value(itemFocusValue);
}
- }
- function onAlphaPickerInKeyboardModeClick(e) {
+ let alphaFocusedElement;
+ let alphaFocusTimeout;
- var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
+ function onAlphaFocusTimeout() {
- if (alphaPickerButton) {
- var value = alphaPickerButton.getAttribute('data-value');
-
- element.dispatchEvent(new CustomEvent('alphavalueclicked', {
- cancelable: false,
- detail: {
- value: value
- }
- }));
- }
- }
-
- function onAlphaPickerClick(e) {
-
- var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
-
- if (alphaPickerButton) {
- var value = alphaPickerButton.getAttribute('data-value');
- if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) {
- self.value(null, true);
- } else {
- self.value(value, true);
- }
- }
- }
-
- function onAlphaPickerFocusIn(e) {
-
- if (alphaFocusTimeout) {
- clearTimeout(alphaFocusTimeout);
alphaFocusTimeout = null;
+
+ if (document.activeElement === alphaFocusedElement) {
+ const value = alphaFocusedElement.getAttribute('data-value');
+ this.value(value, true);
+ }
}
- var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
+ function onAlphaPickerInKeyboardModeClick(e) {
- if (alphaPickerButton) {
- alphaFocusedElement = alphaPickerButton;
- alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 600);
+ const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
+
+ if (alphaPickerButton) {
+ const value = alphaPickerButton.getAttribute('data-value');
+
+ element.dispatchEvent(new CustomEvent('alphavalueclicked', {
+ cancelable: false,
+ detail: {
+ value
+ }
+ }));
+ }
}
- }
- function onItemsFocusIn(e) {
+ function onAlphaPickerClick(e) {
- var item = dom.parentWithClass(e.target, itemClass);
+ const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
- if (item) {
- var prefix = item.getAttribute('data-prefix');
- if (prefix && prefix.length) {
-
- itemFocusValue = prefix[0];
- if (itemFocusTimeout) {
- clearTimeout(itemFocusTimeout);
+ if (alphaPickerButton) {
+ const value = alphaPickerButton.getAttribute('data-value');
+ if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) {
+ this.value(null, true);
+ } else {
+ this.value(value, true);
}
- itemFocusTimeout = setTimeout(onItemFocusTimeout, 100);
}
}
- }
- self.enabled = function (enabled) {
+ function onAlphaPickerFocusIn(e) {
- if (enabled) {
-
- if (itemsContainer) {
- itemsContainer.addEventListener('focus', onItemsFocusIn, true);
+ if (alphaFocusTimeout) {
+ clearTimeout(alphaFocusTimeout);
+ alphaFocusTimeout = null;
}
- if (options.mode === 'keyboard') {
- element.addEventListener('click', onAlphaPickerInKeyboardModeClick);
- }
+ const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
+
+ if (alphaPickerButton) {
+ alphaFocusedElement = alphaPickerButton;
+ alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 600);
+ }
+ }
+
+ function onItemsFocusIn(e) {
+
+ const item = dom.parentWithClass(e.target, itemClass);
+
+ if (item) {
+ const prefix = item.getAttribute('data-prefix');
+ if (prefix && prefix.length) {
+
+ itemFocusValue = prefix[0];
+ if (itemFocusTimeout) {
+ clearTimeout(itemFocusTimeout);
+ }
+ itemFocusTimeout = setTimeout(onItemFocusTimeout, 100);
+ }
+ }
+ }
+
+ this.enabled = function (enabled) {
+
+ if (enabled) {
+
+ if (itemsContainer) {
+ itemsContainer.addEventListener('focus', onItemsFocusIn, true);
+ }
+
+ if (options.mode === 'keyboard') {
+ element.addEventListener('click', onAlphaPickerInKeyboardModeClick);
+ }
+
+ if (options.valueChangeEvent !== 'click') {
+ element.addEventListener('focus', onAlphaPickerFocusIn, true);
+ } else {
+ element.addEventListener('click', onAlphaPickerClick.bind(this));
+ }
- if (options.valueChangeEvent !== 'click') {
- element.addEventListener('focus', onAlphaPickerFocusIn, true);
} else {
- element.addEventListener('click', onAlphaPickerClick.bind(this));
- }
- } else {
-
- if (itemsContainer) {
- itemsContainer.removeEventListener('focus', onItemsFocusIn, true);
- }
-
- element.removeEventListener('click', onAlphaPickerInKeyboardModeClick);
- element.removeEventListener('focus', onAlphaPickerFocusIn, true);
- element.removeEventListener('click', onAlphaPickerClick.bind(this));
- }
- };
-
- render(element, options);
-
- this.enabled(true);
- this.visible(true);
- }
-
- AlphaPicker.prototype.value = function (value, applyValue) {
-
- var element = this.options.element;
- var btn;
- var selected;
-
- if (value !== undefined) {
- if (value != null) {
-
- value = value.toUpperCase();
- this._currentValue = value;
-
- if (this.options.mode !== 'keyboard') {
- selected = element.querySelector('.' + selectedButtonClass);
-
- try {
- btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']');
- } catch (err) {
- console.error('error in querySelector: ' + err);
+ if (itemsContainer) {
+ itemsContainer.removeEventListener('focus', onItemsFocusIn, true);
}
- if (btn && btn !== selected) {
- btn.classList.add(selectedButtonClass);
+ element.removeEventListener('click', onAlphaPickerInKeyboardModeClick);
+ element.removeEventListener('focus', onAlphaPickerFocusIn, true);
+ element.removeEventListener('click', onAlphaPickerClick.bind(this));
+ }
+ };
+
+ render(element, options);
+
+ this.enabled(true);
+ this.visible(true);
+ }
+
+ value(value, applyValue) {
+
+ const element = this.options.element;
+ let btn;
+ let selected;
+
+ if (value !== undefined) {
+ if (value != null) {
+
+ value = value.toUpperCase();
+ this._currentValue = value;
+
+ if (this.options.mode !== 'keyboard') {
+ selected = element.querySelector(`.${selectedButtonClass}`);
+
+ try {
+ btn = element.querySelector(`.alphaPickerButton[data-value='${value}']`);
+ } catch (err) {
+ console.error('error in querySelector:', err);
+ }
+
+ if (btn && btn !== selected) {
+ btn.classList.add(selectedButtonClass);
+ }
+ if (selected && selected !== btn) {
+ selected.classList.remove(selectedButtonClass);
+ }
}
- if (selected && selected !== btn) {
+ } else {
+ this._currentValue = value;
+
+ selected = element.querySelector(`.${selectedButtonClass}`);
+ if (selected) {
selected.classList.remove(selectedButtonClass);
}
}
- } else {
- this._currentValue = value;
-
- selected = element.querySelector('.' + selectedButtonClass);
- if (selected) {
- selected.classList.remove(selectedButtonClass);
- }
}
+
+ if (applyValue) {
+ element.dispatchEvent(new CustomEvent('alphavaluechanged', {
+ cancelable: false,
+ detail: {
+ value
+ }
+ }));
+ }
+
+ return this._currentValue;
}
- if (applyValue) {
- element.dispatchEvent(new CustomEvent('alphavaluechanged', {
- cancelable: false,
- detail: {
- value: value
- }
- }));
+ on(name, fn) {
+ const element = this.options.element;
+ element.addEventListener(name, fn);
}
- return this._currentValue;
- };
-
- AlphaPicker.prototype.on = function (name, fn) {
- var element = this.options.element;
- element.addEventListener(name, fn);
- };
-
- AlphaPicker.prototype.off = function (name, fn) {
- var element = this.options.element;
- element.removeEventListener(name, fn);
- };
-
- AlphaPicker.prototype.visible = function (visible) {
-
- var element = this.options.element;
- element.style.visibility = visible ? 'visible' : 'hidden';
- };
-
- AlphaPicker.prototype.values = function () {
-
- var element = this.options.element;
- var elems = element.querySelectorAll('.alphaPickerButton');
- var values = [];
- for (var i = 0, length = elems.length; i < length; i++) {
-
- values.push(elems[i].getAttribute('data-value'));
-
+ off(name, fn) {
+ const element = this.options.element;
+ element.removeEventListener(name, fn);
}
- return values;
- };
+ visible(visible) {
- AlphaPicker.prototype.focus = function () {
+ const element = this.options.element;
+ element.style.visibility = visible ? 'visible' : 'hidden';
+ }
- var element = this.options.element;
- focusManager.autoFocus(element, true);
- };
+ values() {
- AlphaPicker.prototype.destroy = function () {
+ const element = this.options.element;
+ const elems = element.querySelectorAll('.alphaPickerButton');
+ const values = [];
+ for (let i = 0, length = elems.length; i < length; i++) {
- var element = this.options.element;
- this.enabled(false);
- element.classList.remove('focuscontainer-x');
- this.options = null;
- };
+ values.push(elems[i].getAttribute('data-value'));
- return AlphaPicker;
-});
+ }
+
+ return values;
+ }
+
+ focus() {
+
+ const element = this.options.element;
+ focusManager.autoFocus(element, true);
+ }
+
+ destroy() {
+
+ const element = this.options.element;
+ this.enabled(false);
+ element.classList.remove('focuscontainer-x');
+ this.options = null;
+ }
+ }
+
+/* eslint-enable indent */
+export default AlphaPicker;
diff --git a/src/components/appRouter.js b/src/components/appRouter.js
index 0861cf7e0..1791aef7e 100644
--- a/src/components/appRouter.js
+++ b/src/components/appRouter.js
@@ -21,7 +21,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
};
function beginConnectionWizard() {
- backdrop.clear();
+ backdrop.clearBackdrop();
loading.show();
connectionManager.connect({
enableAutoLogin: appSettings.enableAutoLogin()
@@ -657,7 +657,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
}
if (level === 'full' || level === 2) {
- backdrop.clear(true);
+ backdrop.clearBackdrop(true);
document.documentElement.classList.add('transparentDocument');
backgroundContainer.classList.add('backgroundContainer-transparent');
backdropContainer.classList.add('hide');
diff --git a/src/components/backdrop/backdrop.js b/src/components/backdrop/backdrop.js
index c15e35524..d3c9e58b5 100644
--- a/src/components/backdrop/backdrop.js
+++ b/src/components/backdrop/backdrop.js
@@ -1,5 +1,11 @@
-define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings', 'css!./backdrop'], function (browser, connectionManager, playbackManager, dom, userSettings) {
- 'use strict';
+import browser from 'browser';
+import connectionManager from 'connectionManager';
+import playbackManager from 'playbackManager';
+import dom from 'dom';
+import * as userSettings from 'userSettings';
+import 'css!./backdrop';
+
+/* eslint-disable indent */
function enableAnimation(elem) {
if (browser.slow) {
@@ -22,71 +28,70 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
return true;
}
- function Backdrop() {
- }
+ class Backdrop {
+ load(url, parent, existingBackdropImage) {
+ const img = new Image();
+ const self = this;
- Backdrop.prototype.load = function (url, parent, existingBackdropImage) {
- var img = new Image();
- var self = this;
-
- img.onload = function () {
- if (self.isDestroyed) {
- return;
- }
-
- var backdropImage = document.createElement('div');
- backdropImage.classList.add('backdropImage');
- backdropImage.classList.add('displayingBackdropImage');
- backdropImage.style.backgroundImage = "url('" + url + "')";
- backdropImage.setAttribute('data-url', url);
-
- backdropImage.classList.add('backdropImageFadeIn');
- parent.appendChild(backdropImage);
-
- if (!enableAnimation(backdropImage)) {
- if (existingBackdropImage && existingBackdropImage.parentNode) {
- existingBackdropImage.parentNode.removeChild(existingBackdropImage);
+ img.onload = () => {
+ if (self.isDestroyed) {
+ return;
}
- internalBackdrop(true);
- return;
- }
- var onAnimationComplete = function () {
- dom.removeEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
+ const backdropImage = document.createElement('div');
+ backdropImage.classList.add('backdropImage');
+ backdropImage.classList.add('displayingBackdropImage');
+ backdropImage.style.backgroundImage = `url('${url}')`;
+ backdropImage.setAttribute('data-url', url);
+
+ backdropImage.classList.add('backdropImageFadeIn');
+ parent.appendChild(backdropImage);
+
+ if (!enableAnimation(backdropImage)) {
+ if (existingBackdropImage && existingBackdropImage.parentNode) {
+ existingBackdropImage.parentNode.removeChild(existingBackdropImage);
+ }
+ internalBackdrop(true);
+ return;
+ }
+
+ const onAnimationComplete = () => {
+ dom.removeEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
+ once: true
+ });
+ if (backdropImage === self.currentAnimatingElement) {
+ self.currentAnimatingElement = null;
+ }
+ if (existingBackdropImage && existingBackdropImage.parentNode) {
+ existingBackdropImage.parentNode.removeChild(existingBackdropImage);
+ }
+ };
+
+ dom.addEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
once: true
});
- if (backdropImage === self.currentAnimatingElement) {
- self.currentAnimatingElement = null;
- }
- if (existingBackdropImage && existingBackdropImage.parentNode) {
- existingBackdropImage.parentNode.removeChild(existingBackdropImage);
- }
+
+ internalBackdrop(true);
};
- dom.addEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
- once: true
- });
-
- internalBackdrop(true);
- };
-
- img.src = url;
- };
-
- Backdrop.prototype.cancelAnimation = function () {
- var elem = this.currentAnimatingElement;
- if (elem) {
- elem.classList.remove('backdropImageFadeIn');
- this.currentAnimatingElement = null;
+ img.src = url;
}
- };
- Backdrop.prototype.destroy = function () {
- this.isDestroyed = true;
- this.cancelAnimation();
- };
+ cancelAnimation() {
+ const elem = this.currentAnimatingElement;
+ if (elem) {
+ elem.classList.remove('backdropImageFadeIn');
+ this.currentAnimatingElement = null;
+ }
+ }
- var backdropContainer;
+ destroy() {
+ this.isDestroyed = true;
+ this.cancelAnimation();
+ }
+ }
+
+ let backdropContainer;
function getBackdropContainer() {
if (!backdropContainer) {
backdropContainer = document.querySelector('.backdropContainer');
@@ -101,7 +106,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
return backdropContainer;
}
- function clearBackdrop(clearAll) {
+ export function clearBackdrop(clearAll) {
clearRotation();
if (currentLoadingBackdrop) {
@@ -109,7 +114,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
currentLoadingBackdrop = null;
}
- var elem = getBackdropContainer();
+ const elem = getBackdropContainer();
elem.innerHTML = '';
if (clearAll) {
@@ -119,7 +124,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
internalBackdrop(false);
}
- var backgroundContainer;
+ let backgroundContainer;
function getBackgroundContainer() {
if (!backgroundContainer) {
backgroundContainer = document.querySelector('.backgroundContainer');
@@ -135,31 +140,27 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
}
}
- var hasInternalBackdrop;
+ let hasInternalBackdrop;
function internalBackdrop(enabled) {
hasInternalBackdrop = enabled;
setBackgroundContainerBackgroundEnabled();
}
- var hasExternalBackdrop;
- function externalBackdrop(enabled) {
+ let hasExternalBackdrop;
+ export function externalBackdrop(enabled) {
hasExternalBackdrop = enabled;
setBackgroundContainerBackgroundEnabled();
}
- function getRandom(min, max) {
- return Math.floor(Math.random() * (max - min) + min);
- }
-
- var currentLoadingBackdrop;
+ let currentLoadingBackdrop;
function setBackdropImage(url) {
if (currentLoadingBackdrop) {
currentLoadingBackdrop.destroy();
currentLoadingBackdrop = null;
}
- var elem = getBackdropContainer();
- var existingBackdropImage = elem.querySelector('.displayingBackdropImage');
+ const elem = getBackdropContainer();
+ const existingBackdropImage = elem.querySelector('.displayingBackdropImage');
if (existingBackdropImage && existingBackdropImage.getAttribute('data-url') === url) {
if (existingBackdropImage.getAttribute('data-url') === url) {
@@ -168,7 +169,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
existingBackdropImage.classList.remove('displayingBackdropImage');
}
- var instance = new Backdrop();
+ const instance = new Backdrop();
instance.load(url, elem, existingBackdropImage);
currentLoadingBackdrop = instance;
}
@@ -176,9 +177,9 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
function getItemImageUrls(item, imageOptions) {
imageOptions = imageOptions || {};
- var apiClient = connectionManager.getApiClient(item.ServerId);
+ const apiClient = connectionManager.getApiClient(item.ServerId);
if (item.BackdropImageTags && item.BackdropImageTags.length > 0) {
- return item.BackdropImageTags.map(function (imgTag, index) {
+ return item.BackdropImageTags.map((imgTag, index) => {
return apiClient.getScaledImageUrl(item.BackdropItemId || item.Id, Object.assign(imageOptions, {
type: 'Backdrop',
tag: imgTag,
@@ -189,7 +190,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
}
if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
- return item.ParentBackdropImageTags.map(function (imgTag, index) {
+ return item.ParentBackdropImageTags.map((imgTag, index) => {
return apiClient.getScaledImageUrl(item.ParentBackdropItemId, Object.assign(imageOptions, {
type: 'Backdrop',
tag: imgTag,
@@ -203,13 +204,13 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
}
function getImageUrls(items, imageOptions) {
- var list = [];
- var onImg = function (img) {
+ const list = [];
+ const onImg = img => {
list.push(img);
};
- for (var i = 0, length = items.length; i < length; i++) {
- var itemImages = getItemImageUrls(items[i], imageOptions);
+ for (let i = 0, length = items.length; i < length; i++) {
+ const itemImages = getItemImageUrls(items[i], imageOptions);
itemImages.forEach(onImg);
}
@@ -229,7 +230,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
// If you don't care about the order of the elements inside
// the array, you should sort both arrays here.
- for (var i = 0; i < a.length; ++i) {
+ for (let i = 0; i < a.length; ++i) {
if (a[i] !== b[i]) {
return false;
}
@@ -242,12 +243,12 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
return userSettings.enableBackdrops();
}
- var rotationInterval;
- var currentRotatingImages = [];
- var currentRotationIndex = -1;
- function setBackdrops(items, imageOptions, enableImageRotation) {
+ let rotationInterval;
+ let currentRotatingImages = [];
+ let currentRotationIndex = -1;
+ export function setBackdrops(items, imageOptions, enableImageRotation) {
if (enabled()) {
- var images = getImageUrls(items, imageOptions);
+ const images = getImageUrls(items, imageOptions);
if (images.length) {
startRotation(images, enableImageRotation);
@@ -279,7 +280,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
return;
}
- var newIndex = currentRotationIndex + 1;
+ let newIndex = currentRotationIndex + 1;
if (newIndex >= currentRotatingImages.length) {
newIndex = 0;
}
@@ -289,7 +290,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
}
function clearRotation() {
- var interval = rotationInterval;
+ const interval = rotationInterval;
if (interval) {
clearInterval(interval);
}
@@ -299,7 +300,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
currentRotationIndex = -1;
}
- function setBackdrop(url, imageOptions) {
+ export function setBackdrop(url, imageOptions) {
if (url && typeof url !== 'string') {
url = getImageUrls([url], imageOptions)[0];
}
@@ -312,10 +313,11 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
}
}
- return {
- setBackdrops: setBackdrops,
- setBackdrop: setBackdrop,
- clear: clearBackdrop,
- externalBackdrop: externalBackdrop
- };
-});
+/* eslint-enable indent */
+
+export default {
+ setBackdrops: setBackdrops,
+ setBackdrop: setBackdrop,
+ clearBackdrop: clearBackdrop,
+ externalBackdrop: externalBackdrop
+};
diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css
index c24fcf6ba..d77fe5660 100644
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@@ -192,9 +192,14 @@ button::-moz-focus-inner {
/* Needed in case this is a button */
display: block;
-
- /* Needed in case this is a button */
margin: 0 !important;
+ border: 0 !important;
+ padding: 0 !important;
+ cursor: pointer;
+ color: inherit;
+ width: 100%;
+ font-family: inherit;
+ font-size: inherit;
/* Needed in safari */
height: 100%;
@@ -203,19 +208,12 @@ button::-moz-focus-inner {
contain: strict;
}
-.cardContent-button {
- border: 0 !important;
- padding: 0 !important;
- cursor: pointer;
- color: inherit;
- width: 100%;
- vertical-align: middle;
- font-family: inherit;
- font-size: inherit;
+.cardContent:not(.defaultCardBackground) {
+ background-color: transparent;
}
-.cardContent-button:not(.defaultCardBackground) {
- background-color: transparent;
+.cardBox:not(.visualCardBox) .cardPadder {
+ background-color: #242424;
}
.visualCardBox .cardContent {
@@ -223,7 +221,8 @@ button::-moz-focus-inner {
border-bottom-right-radius: 0;
}
-.cardContent-shadow {
+.cardContent-shadow,
+.cardBox:not(.visualCardBox) .cardPadder {
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
}
diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index e540a4021..52d5ed202 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -368,9 +368,7 @@ import 'programStyles';
let apiClient;
let lastServerId;
- for (let i = 0; i < items.length; i++) {
-
- let item = items[i];
+ for (const [i, item] of items.entries()) {
let serverId = item.ServerId || options.serverId;
if (serverId !== lastServerId) {
@@ -541,7 +539,7 @@ import 'programStyles';
imgType = 'Backdrop';
imgTag = item.ParentBackdropImageTags[0];
itemId = item.ParentBackdropItemId;
- } else if (item.ImageTags && item.ImageTags.Primary) {
+ } else if (item.ImageTags && item.ImageTags.Primary && (item.Type !== 'Episode' || item.ChildCount !== 0)) {
imgType = 'Primary';
imgTag = item.ImageTags.Primary;
height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
@@ -556,7 +554,10 @@ import 'programStyles';
coverImage = (Math.abs(primaryImageAspectRatio - uiAspect) / uiAspect) <= 0.2;
}
}
-
+ } else if (item.SeriesPrimaryImageTag) {
+ imgType = 'Primary';
+ imgTag = item.SeriesPrimaryImageTag;
+ itemId = item.SeriesId;
} else if (item.PrimaryImageTag) {
imgType = 'Primary';
imgTag = item.PrimaryImageTag;
@@ -577,10 +578,6 @@ import 'programStyles';
imgType = 'Primary';
imgTag = item.ParentPrimaryImageTag;
itemId = item.ParentPrimaryImageItemId;
- } else if (item.SeriesPrimaryImageTag) {
- imgType = 'Primary';
- imgTag = item.SeriesPrimaryImageTag;
- itemId = item.SeriesId;
} else if (item.AlbumId && item.AlbumPrimaryImageTag) {
imgType = 'Primary';
imgTag = item.AlbumPrimaryImageTag;
@@ -1370,9 +1367,6 @@ import 'programStyles';
let cardScalableClose = '';
let cardContentClass = 'cardContent';
- if (!options.cardLayout) {
- cardContentClass += ' cardContent-shadow';
- }
let blurhashAttrib = '';
if (blurhash && blurhash.length > 0) {
@@ -1380,21 +1374,20 @@ import 'programStyles';
}
if (layoutManager.tv) {
-
// Don't use the IMG tag with safari because it puts a white border around it
cardImageContainerOpen = imgUrl ? ('
') : ('
');
cardImageContainerClose = '
';
} else {
// Don't use the IMG tag with safari because it puts a white border around it
- cardImageContainerOpen = imgUrl ? ('