mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Display whole channel icon and new/repeat/live/premiere flags
- Make timer list visually identical when displayed on Series Timer page, or Series page. - Display full channel icon (background-size: contain) - Display New/Repeat/etc in timer list. Respects user guide settings for which flags to display - Add margin before timerIndicator if mediainfo is present - Add option to display officialRating display in mediainfo - Use ids instead of CSS class for seriesTimerSchedule*
This commit is contained in:
SenorSmartyPants
parent
fceb8f31ee
commit
65543e77a4
6 changed files with 60 additions and 48 deletions
|
|
@ -38,6 +38,16 @@
|
|||
color: #888;
|
||||
}
|
||||
|
||||
.listItemMediaInfo + .timerIndicator {
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator + .indicator {
|
||||
[dir="ltr"] & {
|
||||
margin-left: 0.25em;
|
||||
|
|
|
|||
|
|
@ -261,6 +261,10 @@ import ServerConnections from '../ServerConnections';
|
|||
const imgUrl = options.imageSource === 'channel' ? getChannelImageUrl(item, downloadWidth) : getImageUrl(item, downloadWidth);
|
||||
let imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
|
||||
|
||||
if (options.imageSource === 'channel') {
|
||||
imageClass += ' listItemImage-channel';
|
||||
}
|
||||
|
||||
if (isLargeStyle && layoutManager.tv) {
|
||||
imageClass += ' listItemImage-large-tv';
|
||||
}
|
||||
|
|
@ -428,6 +432,7 @@ import ServerConnections from '../ServerConnections';
|
|||
container: false,
|
||||
episodeTitle: false,
|
||||
criticRating: false,
|
||||
officialRating: false,
|
||||
endsAt: false
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -153,6 +153,10 @@
|
|||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
.listItemImage-channel {
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.listItemImageButton {
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import 'material-design-icons-iconfont';
|
|||
import './mediainfo.scss';
|
||||
import '../guide/programs.scss';
|
||||
import '../../elements/emby-button/emby-button';
|
||||
import * as userSettings from '../../scripts/settings/userSettings';
|
||||
|
||||
/* eslint-disable indent */
|
||||
function getTimerIndicator(item) {
|
||||
|
|
@ -158,7 +159,7 @@ import '../../elements/emby-button/emby-button';
|
|||
}
|
||||
}
|
||||
|
||||
if (item.StartDate && item.Type !== 'Program' && item.Type !== 'SeriesTimer') {
|
||||
if (item.StartDate && item.Type !== 'Program' && item.Type !== 'SeriesTimer' && item.Type !== 'Timer') {
|
||||
try {
|
||||
date = datetime.parseISO8601Date(item.StartDate);
|
||||
|
||||
|
|
@ -196,47 +197,52 @@ import '../../elements/emby-button/emby-button';
|
|||
}
|
||||
}
|
||||
|
||||
if (item.Type === 'Program') {
|
||||
if (item.Type === 'Program' || item.Type === 'Timer') {
|
||||
let program = item;
|
||||
if (item.Type === 'Timer') {
|
||||
program = item.ProgramInfo;
|
||||
}
|
||||
|
||||
if (options.programIndicator !== false) {
|
||||
if (item.IsLive) {
|
||||
if (program.IsLive && userSettings.get('guide-indicator-live') === 'true') {
|
||||
miscInfo.push({
|
||||
html: `<div class="mediaInfoProgramAttribute mediaInfoItem liveTvProgram">${globalize.translate('Live')}</div>`
|
||||
});
|
||||
} else if (item.IsPremiere) {
|
||||
} else if (program.IsPremiere && userSettings.get('guide-indicator-premiere') === 'true') {
|
||||
miscInfo.push({
|
||||
html: `<div class="mediaInfoProgramAttribute mediaInfoItem premiereTvProgram">${globalize.translate('Premiere')}</div>`
|
||||
});
|
||||
} else if (item.IsSeries && !item.IsRepeat) {
|
||||
} else if (program.IsSeries && !program.IsRepeat && userSettings.get('guide-indicator-new') === 'true') {
|
||||
miscInfo.push({
|
||||
html: `<div class="mediaInfoProgramAttribute mediaInfoItem newTvProgram">${globalize.translate('New')}</div>`
|
||||
});
|
||||
} else if (item.IsSeries && item.IsRepeat) {
|
||||
} else if (program.IsSeries && program.IsRepeat && userSettings.get('guide-indicator-repeat') === 'true') {
|
||||
miscInfo.push({
|
||||
html: `<div class="mediaInfoProgramAttribute mediaInfoItem repeatTvProgram">${globalize.translate('Repeat')}</div>`
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if ((item.IsSeries || item.EpisodeTitle) && options.episodeTitle !== false) {
|
||||
text = itemHelper.getDisplayName(item, {
|
||||
if ((program.IsSeries || program.EpisodeTitle) && options.episodeTitle !== false) {
|
||||
text = itemHelper.getDisplayName(program, {
|
||||
includeIndexNumber: options.episodeTitleIndexNumber
|
||||
});
|
||||
|
||||
if (text) {
|
||||
miscInfo.push(escapeHtml(text));
|
||||
}
|
||||
} else if (item.IsMovie && item.ProductionYear && options.originalAirDate !== false) {
|
||||
miscInfo.push(item.ProductionYear);
|
||||
} else if (item.PremiereDate && options.originalAirDate !== false) {
|
||||
} else if (program.IsMovie && program.ProductionYear && options.originalAirDate !== false) {
|
||||
miscInfo.push(program.ProductionYear);
|
||||
} else if (program.PremiereDate && options.originalAirDate !== false) {
|
||||
try {
|
||||
date = datetime.parseISO8601Date(item.PremiereDate);
|
||||
date = datetime.parseISO8601Date(program.PremiereDate);
|
||||
text = globalize.translate('OriginalAirDateValue', datetime.toLocaleDateString(date));
|
||||
miscInfo.push(text);
|
||||
} catch (e) {
|
||||
console.error('error parsing date:', item.PremiereDate);
|
||||
console.error('error parsing date:', program.PremiereDate);
|
||||
}
|
||||
} else if (item.ProductionYear) {
|
||||
miscInfo.push(item.ProductionYear);
|
||||
} else if (program.ProductionYear && options.year !== false ) {
|
||||
miscInfo.push(program.ProductionYear);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -255,7 +261,7 @@ import '../../elements/emby-button/emby-button';
|
|||
}
|
||||
}
|
||||
|
||||
if (item.RunTimeTicks && item.Type !== 'Series' && item.Type !== 'Program' && item.Type !== 'Book' && !showFolderRuntime && options.runtime !== false) {
|
||||
if (item.RunTimeTicks && item.Type !== 'Series' && item.Type !== 'Program' && item.Type !== 'Timer' && item.Type !== 'Book' && !showFolderRuntime && options.runtime !== false) {
|
||||
if (item.Type === 'Audio') {
|
||||
miscInfo.push(datetime.getDisplayRunningTime(item.RunTimeTicks));
|
||||
} else {
|
||||
|
|
@ -263,7 +269,7 @@ import '../../elements/emby-button/emby-button';
|
|||
}
|
||||
}
|
||||
|
||||
if (item.OfficialRating && item.Type !== 'Season' && item.Type !== 'Episode') {
|
||||
if (options.officialRating !== false && item.OfficialRating && item.Type !== 'Season' && item.Type !== 'Episode') {
|
||||
miscInfo.push({
|
||||
text: item.OfficialRating,
|
||||
cssClass: 'mediaInfoOfficialRating'
|
||||
|
|
|
|||
|
|
@ -147,9 +147,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="seriesTimerScheduleSection verticalSection detailVerticalSection hide" style="margin-top: -3em;">
|
||||
<div id="seriesTimerScheduleSection" class="verticalSection detailVerticalSection hide" style="margin-top: -3em;">
|
||||
<h2 class="sectionTitle">${Schedule}</h2>
|
||||
<div class="seriesTimerSchedule padded-right"></div>
|
||||
<div id="seriesTimerSchedule" is="emby-itemscontainer" class="itemsContainer vertical-list padded-right" data-contextmenu="false"></div>
|
||||
</div>
|
||||
|
||||
<div class="collectionItems hide"></div>
|
||||
|
|
|
|||
|
|
@ -96,33 +96,26 @@ function getContextMenuOptions(item, user, button) {
|
|||
};
|
||||
}
|
||||
|
||||
function getProgramScheduleHtml(items) {
|
||||
let html = '';
|
||||
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer vertical-list" data-contextmenu="false">';
|
||||
html += listView.getListViewHtml({
|
||||
function getProgramScheduleHtml(items, action) {
|
||||
return listView.getListViewHtml({
|
||||
items: items,
|
||||
enableUserDataButtons: false,
|
||||
image: true,
|
||||
imageSource: 'channel',
|
||||
showProgramDateTime: true,
|
||||
showChannel: false,
|
||||
mediaInfo: false,
|
||||
action: 'none',
|
||||
mediaInfo: true,
|
||||
runtime: false,
|
||||
action: action,
|
||||
moreButton: false,
|
||||
recordButton: false
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderSeriesTimerSchedule(page, apiClient, seriesTimerId) {
|
||||
apiClient.getLiveTvTimers({
|
||||
UserId: apiClient.getCurrentUserId(),
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Thumb',
|
||||
SortBy: 'StartDate',
|
||||
EnableTotalRecordCount: false,
|
||||
EnableUserData: false,
|
||||
|
|
@ -133,8 +126,8 @@ function renderSeriesTimerSchedule(page, apiClient, seriesTimerId) {
|
|||
result.Items = [];
|
||||
}
|
||||
|
||||
const html = getProgramScheduleHtml(result.Items);
|
||||
const scheduleTab = page.querySelector('.seriesTimerSchedule');
|
||||
const html = getProgramScheduleHtml(result.Items, 'none');
|
||||
const scheduleTab = page.querySelector('#seriesTimerSchedule');
|
||||
scheduleTab.innerHTML = html;
|
||||
imageLoader.lazyChildren(scheduleTab);
|
||||
});
|
||||
|
|
@ -162,13 +155,13 @@ function renderSeriesTimerEditor(page, item, apiClient, user) {
|
|||
});
|
||||
});
|
||||
|
||||
page.querySelector('.seriesTimerScheduleSection').classList.remove('hide');
|
||||
page.querySelector('#seriesTimerScheduleSection').classList.remove('hide');
|
||||
hideAll(page, 'btnCancelSeriesTimer', true);
|
||||
renderSeriesTimerSchedule(page, apiClient, item.Id);
|
||||
return;
|
||||
}
|
||||
|
||||
page.querySelector('.seriesTimerScheduleSection').classList.add('hide');
|
||||
page.querySelector('#seriesTimerScheduleSection').classList.add('hide');
|
||||
hideAll(page, 'btnCancelSeriesTimer');
|
||||
}
|
||||
|
||||
|
|
@ -1599,13 +1592,13 @@ function renderSeriesSchedule(page, item) {
|
|||
const apiClient = ServerConnections.getApiClient(item.ServerId);
|
||||
apiClient.getLiveTvPrograms({
|
||||
UserId: apiClient.getCurrentUserId(),
|
||||
ImageTypeLimit: 1,
|
||||
HasAired: false,
|
||||
SortBy: 'StartDate',
|
||||
EnableTotalRecordCount: false,
|
||||
EnableImages: false,
|
||||
ImageTypeLimit: 0,
|
||||
Limit: 50,
|
||||
EnableUserData: false,
|
||||
Fields: 'ChannelInfo,ChannelImage',
|
||||
LibrarySeriesId: item.Id
|
||||
}).then(function (result) {
|
||||
if (result.Items.length) {
|
||||
|
|
@ -1614,17 +1607,11 @@ function renderSeriesSchedule(page, item) {
|
|||
page.querySelector('#seriesScheduleSection').classList.add('hide');
|
||||
}
|
||||
|
||||
page.querySelector('#seriesScheduleList').innerHTML = listView.getListViewHtml({
|
||||
items: result.Items,
|
||||
enableUserDataButtons: false,
|
||||
showParentTitle: false,
|
||||
image: false,
|
||||
showProgramDateTime: true,
|
||||
mediaInfo: false,
|
||||
showTitle: true,
|
||||
moreButton: false,
|
||||
action: 'programdialog'
|
||||
});
|
||||
const html = getProgramScheduleHtml(result.Items, 'programdialog');
|
||||
const scheduleTab = page.querySelector('#seriesScheduleList');
|
||||
scheduleTab.innerHTML = html;
|
||||
imageLoader.lazyChildren(scheduleTab);
|
||||
|
||||
loading.hide();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue