mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge branch 'master' into artworks2

Browse source
This commit is contained in:
dkanada 2019-11-24 21:34:30 +09:00 • committed by GitHub
commit 5af72d6c9f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
262 changed files with 14501 additions and 12350 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/cardbuilder/card.css
View file

@ -26,24 +26,12 @@ button {
font-weight: inherit !important;
}
.card-nofocustransform {
.card:not(.show-animation) {
contain: layout style paint;
}
.itemsContainer {
display: flex;
margin-left: -0.6em;
margin-right: -0.6em;
}
/* TODO replace this with a proper fix */
/* doesnt work on mobile devices */
/* negative margin fixes annoying misalignment with cards and title */
@media all and (max-width:50em) {
.itemsContainer {
margin-left: 0;
margin-right: 0;
}
}
.vertical-list {
@ -98,20 +86,21 @@ button {
contain: layout style;
}
.cardBox-withfocuscontent-large {
.card.show-focus:not(.show-animation) .cardBox {
margin: .4em;
}
.card-focuscontent-large {
.card.show-focus:not(.show-animation) .cardBox.visualCardBox,
.card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
border: .5em solid transparent;
}
.cardBox-focustransform {
.card.show-animation .cardBox {
will-change: transform;
transition: transform 200ms ease-out;
}
.card:focus > .cardBox-focustransform {
.card.show-animation:focus > .cardBox {
transform: scale(1.18, 1.18);
}
@ -363,9 +352,6 @@ button {
vertical-align: middle;
font-family: inherit;
font-size: inherit;
/*display: flex;
align-items: center;
justify-content: center;*/
}
.textActionButton:hover {

103
src/components/cardbuilder/cardBuilder.js
View file

@ -3,7 +3,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
'use strict';
var devicePixelRatio = window.devicePixelRatio || 1;
var enableFocusTransfrom = !browser.slow && !browser.edge;
var enableFocusTransform = !browser.slow && !browser.edge;
function getCardsHtml(items, options) {
if (arguments.length === 1) {
@ -321,7 +321,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
var apiClient;
var lastServerId;
var i, length;
var i;
var length;
for (i = 0, length = items.length; i < length; i++) {
@ -339,19 +340,14 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
if (options.indexBy === 'PremiereDate') {
if (item.PremiereDate) {
try {
newIndexValue = datetime.toLocaleDateString(datetime.parseISO8601Date(item.PremiereDate), { weekday: 'long', month: 'long', day: 'numeric' });
} catch (err) {
console.log('error parsing timestamp for premiere date');
}
}
}
else if (options.indexBy === 'ProductionYear') {
} else if (options.indexBy === 'ProductionYear') {
newIndexValue = item.ProductionYear;
}
else if (options.indexBy === 'CommunityRating') {
} else if (options.indexBy === 'CommunityRating') {
newIndexValue = item.CommunityRating ? (Math.floor(item.CommunityRating) + (item.CommunityRating % 1 >= 0.5 ? 0.5 : 0)) + '+' : null;
}
@ -571,22 +567,19 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
coverImage = (Math.abs(primaryImageAspectRatio - uiAspect) / uiAspect) <= 0.2;
}
}
}
else if (item.ParentPrimaryImageTag) {
} else if (item.ParentPrimaryImageTag) {
imgUrl = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
type: "Primary",
tag: item.ParentPrimaryImageTag
});
}
else if (item.SeriesPrimaryImageTag) {
} else if (item.SeriesPrimaryImageTag) {
imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
type: "Primary",
tag: item.SeriesPrimaryImageTag
});
}
else if (item.AlbumId && item.AlbumPrimaryImageTag) {
} else if (item.AlbumId && item.AlbumPrimaryImageTag) {
width = primaryImageAspectRatio ? Math.round(height * primaryImageAspectRatio) : null;
@ -601,16 +594,14 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
coverImage = (Math.abs(primaryImageAspectRatio - uiAspect) / uiAspect) <= 0.2;
}
}
}
else if (item.Type === 'Season' && item.ImageTags && item.ImageTags.Thumb) {
} else if (item.Type === 'Season' && item.ImageTags && item.ImageTags.Thumb) {
imgUrl = apiClient.getScaledImageUrl(item.Id, {
type: "Thumb",
tag: item.ImageTags.Thumb
});
}
else if (item.BackdropImageTags && item.BackdropImageTags.length) {
} else if (item.BackdropImageTags && item.BackdropImageTags.length) {
imgUrl = apiClient.getScaledImageUrl(item.Id, {
type: "Backdrop",
@ -681,7 +672,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
var html = '';
var valid = 0;
var i, length;
var i;
var length;
for (i = 0, length = lines.length; i < length; i++) {
@ -745,8 +737,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
date = datetime.parseISO8601Date(item.EndDate);
airTimeText += ' - ' + datetime.getDisplayTime(date);
}
}
catch (e) {
} catch (e) {
console.log("Error parsing date: " + item.StartDate);
}
}
@ -794,8 +785,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
} else {
lines.push(item.SeriesName);
}
}
else {
} else {
if (isUsingLiveTvNaming(item)) {
@ -976,8 +966,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
if (options.showSeriesTimerChannel) {
if (item.RecordAnyChannel) {
lines.push(globalize.translate('AllChannels'));
}
else {
} else {
lines.push(item.ChannelName || globalize.translate('OneChannel'));
}
}
@ -985,8 +974,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
if (options.showPersonRoleOrType) {
if (item.Role) {
lines.push('as ' + item.Role);
}
else if (item.Type) {
} else if (item.Type) {
lines.push(globalize.translate('' + item.Type));
} else {
lines.push('');
@ -1060,8 +1048,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
counts.push(childText);
}
else if (item.Type === 'Genre' || item.Type === 'Studio') {
} else if (item.Type === 'Genre' || item.Type === 'Studio') {
if (item.MovieCount) {
@ -1140,8 +1127,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
if (item.IsPremiere) {
html += '<div class="premiereTvProgram programAttributeIndicator">' + globalize.translate('Premiere') + '</div>';
}
else if (item.IsSeries && !item.IsRepeat) {
} else if (item.IsSeries && !item.IsRepeat) {
html += '<div class="newTvProgram programAttributeIndicator">' + globalize.translate('AttributeNew') + '</div>';
}
//else if (item.IsRepeat) {
@ -1176,8 +1162,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
if (action === 'play' && item.IsFolder) {
// If this hard-coding is ever removed make sure to test nested photo albums
action = 'link';
}
else if (item.MediaType === 'Photo') {
} else if (item.MediaType === 'Photo') {
action = 'play';
}
@ -1203,6 +1188,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
shape = shape || 'mixedSquare';
}
// TODO move card creation code to Card component
var className = 'card';
if (shape) {
@ -1221,8 +1208,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
className += ' card-hoverable';
}
if (!enableFocusTransfrom || !layoutManager.tv) {
className += ' card-nofocustransform';
if (layoutManager.tv) {
className += ' show-focus';
if (enableFocusTransform) {
className += ' show-animation';
}
}
var imgInfo = getCardImageUrl(item, apiClient, options, shape);
@ -1250,23 +1241,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
var cardBoxClass = options.cardLayout ? 'cardBox visualCardBox' : 'cardBox';
if (layoutManager.tv) {
if (enableFocusTransfrom) {
cardBoxClass += ' cardBox-focustransform cardBox-withfocuscontent';
} else {
cardBoxClass += ' cardBox-withfocuscontent-large';
}
if (options.cardLayout) {
cardBoxClass += ' card-focuscontent';
if (!enableFocusTransfrom) {
cardBoxClass += ' card-focuscontent-large';
}
}
}
var footerCssClass;
var progressHtml = indicators.getProgressBarHtml(item);
@ -1283,8 +1257,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
height: logoHeight,
tag: item.ChannelPrimaryImageTag
});
}
else if (options.showLogo && item.ParentLogoImageTag) {
} else if (options.showLogo && item.ParentLogoImageTag) {
logoUrl = apiClient.getScaledImageUrl(item.ParentLogoItemId, {
type: "Logo",
height: logoHeight,
@ -1299,8 +1272,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter';
innerCardFooter += getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerCssClass, progressHtml, logoUrl, false);
footerOverlayed = true;
}
else if (progressHtml) {
} else if (progressHtml) {
innerCardFooter += '<div class="innerCardFooter fullInnerCardFooter innerCardFooterClear">';
innerCardFooter += progressHtml;
innerCardFooter += '</div>';
@ -1385,15 +1357,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
var cardScalableClass = 'cardScalable';
if (layoutManager.tv && !options.cardLayout) {
cardScalableClass += ' card-focuscontent';
if (!enableFocusTransfrom) {
cardScalableClass += ' card-focuscontent-large';
}
}
cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
cardBoxClose = '</div>';
cardScalableClose = '</div>';
@ -1414,8 +1377,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
indicatorsHtml += indicators.getChildCountIndicatorHtml(item, {
minCount: 1
});
}
else {
} else {
indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
}
@ -1676,8 +1638,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
}
itemProgressBar.innerHTML = progressHtml;
}
else {
} else {
itemProgressBar = card.querySelector('.itemProgressBar');
if (itemProgressBar) {

27
src/components/cardbuilder/chaptercardbuilder.js
View file

@ -1,12 +1,20 @@
define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browser'], function (datetime, imageLoader, connectionManager, layoutManager, browser) {
'use strict';
var enableFocusTransform = !browser.slow && !browser.edge;
function buildChapterCardsHtml(item, chapters, options) {
// TODO move card creation code to Card component
var className = 'card itemAction chapterCard';
if (layoutManager.tv && (browser.animate || browser.edge)) {
className += ' card-focusscale';
if (layoutManager.tv) {
className += ' show-focus';
if (enableFocusTransform) {
className += ' show-animation';
}
}
var mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
@ -92,19 +100,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
var cardBoxCssClass = 'cardBox';
var cardScalableClass = 'cardScalable';
if (layoutManager.tv) {
var enableFocusTransfrom = !browser.slow && !browser.edge;
cardScalableClass += ' card-focuscontent';
if (enableFocusTransfrom) {
cardBoxCssClass += ' cardBox-focustransform cardBox-withfocuscontent';
} else {
cardBoxCssClass += ' cardBox-withfocuscontent-large';
cardScalableClass += ' card-focuscontent-large';
}
}
var html = '<button type="button" class="' + className + '"' + dataAttributes + '><div class="' + cardBoxCssClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainer + '</div><div class="innerCardFooter">' + nameHtml + '</div></div></div></button>';
return html;
@ -137,4 +132,4 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
buildChapterCards: buildChapterCards
};
});
});