From 65543e77a46313ef025636f90729870f297d4189 Mon Sep 17 00:00:00 2001 From: SenorSmartyPants Date: Mon, 21 Nov 2022 17:45:56 -0600 Subject: [PATCH 1/2] 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* --- src/components/indicators/indicators.scss | 10 +++++ src/components/listview/listview.js | 5 +++ src/components/listview/listview.scss | 4 ++ src/components/mediainfo/mediainfo.js | 40 +++++++++++--------- src/controllers/itemDetails/index.html | 4 +- src/controllers/itemDetails/index.js | 45 ++++++++--------------- 6 files changed, 60 insertions(+), 48 deletions(-) diff --git a/src/components/indicators/indicators.scss b/src/components/indicators/indicators.scss index 3130150d31..ec875b53dc 100644 --- a/src/components/indicators/indicators.scss +++ b/src/components/indicators/indicators.scss @@ -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; diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js index eaa526dbd4..b9f156e9a2 100644 --- a/src/components/listview/listview.js +++ b/src/components/listview/listview.js @@ -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 }); diff --git a/src/components/listview/listview.scss b/src/components/listview/listview.scss index 025ce596b3..fb6d3a565f 100644 --- a/src/components/listview/listview.scss +++ b/src/components/listview/listview.scss @@ -153,6 +153,10 @@ margin-right: 0.75em; } +.listItemImage-channel { + background-size: contain; +} + .listItemImageButton { align-self: center; justify-self: center; diff --git a/src/components/mediainfo/mediainfo.js b/src/components/mediainfo/mediainfo.js index b0201162f1..6b64059041 100644 --- a/src/components/mediainfo/mediainfo.js +++ b/src/components/mediainfo/mediainfo.js @@ -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: `
${globalize.translate('Live')}
` }); - } else if (item.IsPremiere) { + } else if (program.IsPremiere && userSettings.get('guide-indicator-premiere') === 'true') { miscInfo.push({ html: `
${globalize.translate('Premiere')}
` }); - } else if (item.IsSeries && !item.IsRepeat) { + } else if (program.IsSeries && !program.IsRepeat && userSettings.get('guide-indicator-new') === 'true') { miscInfo.push({ html: `
${globalize.translate('New')}
` }); - } else if (item.IsSeries && item.IsRepeat) { + } else if (program.IsSeries && program.IsRepeat && userSettings.get('guide-indicator-repeat') === 'true') { miscInfo.push({ html: `
${globalize.translate('Repeat')}
` }); } } - 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' diff --git a/src/controllers/itemDetails/index.html b/src/controllers/itemDetails/index.html index accc5b705d..4be8648e11 100644 --- a/src/controllers/itemDetails/index.html +++ b/src/controllers/itemDetails/index.html @@ -147,9 +147,9 @@ -
+

${Schedule}

-
+
diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js index a1bcebd3aa..e45a66060c 100644 --- a/src/controllers/itemDetails/index.js +++ b/src/controllers/itemDetails/index.js @@ -96,33 +96,26 @@ function getContextMenuOptions(item, user, button) { }; } -function getProgramScheduleHtml(items) { - let html = ''; - - html += '
'; - 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 += '
'; - - 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(); }); } From 5c51b4b985def2a19d6e7cfb26d2d626c0983bd1 Mon Sep 17 00:00:00 2001 From: SenorSmartyPants Date: Tue, 7 Feb 2023 13:12:19 -0600 Subject: [PATCH 2/2] Code review changes implemented --- src/components/indicators/indicators.scss | 10 ---------- src/components/listview/listview.scss | 10 ++++++++++ src/controllers/itemDetails/index.js | 6 +++--- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/indicators/indicators.scss b/src/components/indicators/indicators.scss index ec875b53dc..3130150d31 100644 --- a/src/components/indicators/indicators.scss +++ b/src/components/indicators/indicators.scss @@ -38,16 +38,6 @@ color: #888; } -.listItemMediaInfo + .timerIndicator { - [dir="ltr"] & { - margin-left: 0.25em; - } - - [dir="rtl"] & { - margin-right: 0.25em; - } -} - .indicator + .indicator { [dir="ltr"] & { margin-left: 0.25em; diff --git a/src/components/listview/listview.scss b/src/components/listview/listview.scss index fb6d3a565f..2aafd936a2 100644 --- a/src/components/listview/listview.scss +++ b/src/components/listview/listview.scss @@ -320,3 +320,13 @@ .listItemCheckboxContainer { width: auto !important; } + +.listItemMediaInfo + .timerIndicator { + [dir="ltr"] & { + margin-left: 0.25em; + } + + [dir="rtl"] & { + margin-right: 0.25em; + } +} diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js index e45a66060c..bb3586ed1e 100644 --- a/src/controllers/itemDetails/index.js +++ b/src/controllers/itemDetails/index.js @@ -96,7 +96,7 @@ function getContextMenuOptions(item, user, button) { }; } -function getProgramScheduleHtml(items, action) { +function getProgramScheduleHtml(items, action = 'none') { return listView.getListViewHtml({ items: items, enableUserDataButtons: false, @@ -106,7 +106,7 @@ function getProgramScheduleHtml(items, action) { showChannel: false, mediaInfo: true, runtime: false, - action: action, + action, moreButton: false, recordButton: false }); @@ -126,7 +126,7 @@ function renderSeriesTimerSchedule(page, apiClient, seriesTimerId) { result.Items = []; } - const html = getProgramScheduleHtml(result.Items, 'none'); + const html = getProgramScheduleHtml(result.Items); const scheduleTab = page.querySelector('#seriesTimerSchedule'); scheduleTab.innerHTML = html; imageLoader.lazyChildren(scheduleTab);