mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
add chapter image error handling
This commit is contained in:
parent
638fe11131
commit
3a5dad0e64
14 changed files with 123 additions and 190 deletions
|
@ -104,10 +104,11 @@
|
|||
}
|
||||
|
||||
.btnCardOptions {
|
||||
text-align: right;
|
||||
float: right;
|
||||
padding: 5px 0 2px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0 !important;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mediaSourceIndicator {
|
||||
|
@ -202,6 +203,7 @@
|
|||
|
||||
.cardFooter {
|
||||
padding: .5em .3em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.visualCardBox-cardScalable, .visualCardBox-cardFooter {
|
||||
|
@ -253,10 +255,39 @@
|
|||
opacity: .6;
|
||||
}
|
||||
|
||||
.cardText-rightmargin {
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
.cardCenteredText {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.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;
|
||||
/*display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;*/
|
||||
}
|
||||
|
||||
.textActionButton:hover {
|
||||
text-decoration: underline;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cardFooterLogo {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.cardImageIcon {
|
||||
width: 12vh;
|
||||
height: 12vh;
|
||||
|
|
|
@ -669,7 +669,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
return 'defaultCardColor' + getDefaultColorIndex(str);
|
||||
}
|
||||
|
||||
function getCardTextLines(lines, cssClass, forceLines, addSecondaryClass) {
|
||||
function getCardTextLines(lines, cssClass, forceLines, isOuterFooter, cardLayout) {
|
||||
|
||||
var html = '';
|
||||
|
||||
|
@ -680,10 +680,14 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
var text = lines[i];
|
||||
|
||||
if (i == 1 && addSecondaryClass) {
|
||||
if (i == 1 && isOuterFooter) {
|
||||
cssClass += ' cardText-secondary';
|
||||
}
|
||||
|
||||
if (isOuterFooter && cardLayout) {
|
||||
cssClass += ' cardText-rightmargin';
|
||||
}
|
||||
|
||||
if (text) {
|
||||
html += "<div class='" + cssClass + "'>";
|
||||
html += text;
|
||||
|
@ -702,15 +706,21 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
return html;
|
||||
}
|
||||
|
||||
function getCardFooterText(item, options, showTitle, forceName, overlayText, imgUrl, footerClass, progressHtml, isOuterFooter) {
|
||||
function getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerClass, progressHtml, isOuterFooter) {
|
||||
|
||||
var html = '';
|
||||
|
||||
var showOtherText = isOuterFooter ? !overlayText : overlayText;
|
||||
|
||||
if (isOuterFooter && options.cardLayout && !layoutManager.tv) {
|
||||
var moreIcon = appHost.moreIcon == 'dots-horiz' ? '' : '';
|
||||
html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><i class="md-icon">' + moreIcon + '</i></button>';
|
||||
|
||||
if (options.cardFooterAside == 'logo') {
|
||||
|
||||
}
|
||||
else if (options.cardFooterAside != 'none') {
|
||||
var moreIcon = appHost.moreIcon == 'dots-horiz' ? '' : '';
|
||||
html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions autoSize" data-action="menu"><i class="md-icon">' + moreIcon + '</i></button>';
|
||||
}
|
||||
}
|
||||
|
||||
var cssClass = options.centerText && !options.cardLayout ? "cardText cardTextCentered" : "cardText";
|
||||
|
@ -867,7 +877,33 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
lines.push(text || ' ');
|
||||
|
||||
lines.push(item.ChannelName || ' ');
|
||||
if (item.ChannelId) {
|
||||
|
||||
var channelText = item.ChannelName;
|
||||
//var logoHeight = 32;
|
||||
|
||||
//if (item.ChannelPrimaryImageTag) {
|
||||
// channelText = '<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" class="lazy cardFooterLogo" style="height:' + logoHeight + 'px" data-src="' + apiClient.getScaledImageUrl(item.ChannelId, {
|
||||
// type: "Primary",
|
||||
// height: logoHeight,
|
||||
// tag: item.ChannelPrimaryImageTag
|
||||
// }) + '" />' + channelText;
|
||||
//} else {
|
||||
// channelText += '<div style="height:' + logoHeight + 'px;width:0;"></div>';
|
||||
//}
|
||||
|
||||
lines.push(getTextActionButton({
|
||||
|
||||
Id: item.ChannelId,
|
||||
Name: item.ChannelName,
|
||||
Type: 'TvChannel',
|
||||
MediaType: item.MediaType,
|
||||
IsFolder: false
|
||||
|
||||
}, channelText));
|
||||
} else {
|
||||
lines.push(item.ChannelName || ' ');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -875,7 +911,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
lines = [];
|
||||
}
|
||||
|
||||
html += getCardTextLines(lines, cssClass, !options.overlayText, isOuterFooter);
|
||||
html += getCardTextLines(lines, cssClass, !options.overlayText, isOuterFooter, options.cardLayout);
|
||||
|
||||
if (progressHtml) {
|
||||
html += progressHtml;
|
||||
|
@ -1062,7 +1098,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
if (overlayText) {
|
||||
|
||||
footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter';
|
||||
innerCardFooter += getCardFooterText(item, options, showTitle, forceName, overlayText, imgUrl, footerCssClass, progressHtml, false);
|
||||
innerCardFooter += getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerCssClass, progressHtml, false);
|
||||
footerOverlayed = true;
|
||||
}
|
||||
else if (progressHtml) {
|
||||
|
@ -1081,7 +1117,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
var outerCardFooter = '';
|
||||
if (!overlayText && !footerOverlayed) {
|
||||
footerCssClass = options.cardLayout ? 'cardFooter visualCardBox-cardFooter' : 'cardFooter transparent';
|
||||
outerCardFooter = getCardFooterText(item, options, showTitle, forceName, overlayText, imgUrl, footerCssClass, progressHtml, true);
|
||||
outerCardFooter = getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerCssClass, progressHtml, true);
|
||||
}
|
||||
|
||||
if (outerCardFooter && !options.cardLayout && options.allowBottomPadding !== false) {
|
||||
|
|
|
@ -383,3 +383,22 @@
|
|||
.timerIcon, .seriesTimerIcon {
|
||||
color: #cc3333 !important;
|
||||
}
|
||||
|
||||
.visibleGuideScroller::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.visibleGuideScroller::-webkit-scrollbar-button:start:decrement,
|
||||
.visibleGuideScroller::-webkit-scrollbar-button:end:increment {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.visibleGuideScroller::-webkit-scrollbar-track-piece {
|
||||
background-color: #3b3b3b;
|
||||
}
|
||||
|
||||
.visibleGuideScroller::-webkit-scrollbar-thumb:vertical, .visibleGuideScroller::-webkit-scrollbar-thumb:horizontal {
|
||||
-webkit-border-radius: 2px;
|
||||
background: #888 no-repeat center;
|
||||
}
|
||||
|
|
|
@ -2,13 +2,13 @@
|
|||
<div class="channelTimeslotHeader">
|
||||
<button class="btnSelectDate clearButton" style="display:block;"></button>
|
||||
</div>
|
||||
<div class="timeslotHeaders smoothScrollX" style="scroll-behavior: auto;"></div>
|
||||
<div class="timeslotHeaders smoothScrollX visibleGuideScroller" style="scroll-behavior: auto;"></div>
|
||||
</div>
|
||||
|
||||
<div class="smoothScrollY guideVerticalScroller programContainer" style="flex-grow: 1;">
|
||||
<div class="smoothScrollY guideVerticalScroller programContainer visibleGuideScroller" style="flex-grow: 1;">
|
||||
<div class="channelList"></div>
|
||||
|
||||
<div class="programGridContainer programGrid smoothScrollX" style="white-space: nowrap;">
|
||||
<div class="programGridContainer programGrid smoothScrollX visibleGuideScroller" style="white-space: nowrap;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue