1
0
Fork 0
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:
Luke Pulverenti 2016-09-05 16:07:36 -04:00
parent 638fe11131
commit 3a5dad0e64
14 changed files with 123 additions and 190 deletions

View file

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

View file

@ -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' ? '&#xE5D3;' : '&#xE5D4;';
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' ? '&#xE5D3;' : '&#xE5D4;';
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 || '&nbsp;');
lines.push(item.ChannelName || '&nbsp;');
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 || '&nbsp;');
}
}
}
@ -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) {

View file

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

View file

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