Merge pull request #4183 from SenorSmartyPants/SeriesTimerUI

Display whole channel icon and new/repeat/live/premiere flags on timer list

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

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;
@@ -316,3 +320,13 @@
 .listItemCheckboxContainer {
     width: auto !important;
 }
+
+.listItemMediaInfo + .timerIndicator {
+    [dir="ltr"] & {
+        margin-left: 0.25em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0.25em;
+    }
+}

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: `<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) {
+            if ((program.IsSeries || program.EpisodeTitle) && options.episodeTitle !== false) {
-                text = itemHelper.getDisplayName(item, {
+                text = itemHelper.getDisplayName(program, {
                     includeIndexNumber: options.episodeTitleIndexNumber
                 });
 
                 if (text) {
                     miscInfo.push(escapeHtml(text));
                 }
-            } else if (item.IsMovie && item.ProductionYear && options.originalAirDate !== false) {
+            } else if (program.IsMovie && program.ProductionYear && options.originalAirDate !== false) {
-                miscInfo.push(item.ProductionYear);
+                miscInfo.push(program.ProductionYear);
-            } else if (item.PremiereDate && options.originalAirDate !== false) {
+            } 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) {
+            } else if (program.ProductionYear && options.year !== false ) {
-                miscInfo.push(item.ProductionYear);
+                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'

src/controllers/itemDetails/index.html

@@ -152,9 +152,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>

src/controllers/itemDetails/index.js

@@ -96,33 +96,26 @@ function getContextMenuOptions(item, user, button) {
     };
 }
 
-function getProgramScheduleHtml(items) {
+function getProgramScheduleHtml(items, action = 'none') {
-    let html = '';
+    return listView.getListViewHtml({
-
-    html += '<div is="emby-itemscontainer" class="itemsContainer vertical-list" data-contextmenu="false">';
-    html += listView.getListViewHtml({
         items: items,
         enableUserDataButtons: false,
         image: true,
         imageSource: 'channel',
         showProgramDateTime: true,
         showChannel: false,
-        mediaInfo: false,
+        mediaInfo: true,
-        action: 'none',
+        runtime: false,
+        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,
@@ -134,7 +127,7 @@ function renderSeriesTimerSchedule(page, apiClient, seriesTimerId) {
         }
 
         const html = getProgramScheduleHtml(result.Items);
-        const scheduleTab = page.querySelector('.seriesTimerSchedule');
+        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');
 }
 
@@ -1623,13 +1616,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) {
@@ -1638,17 +1631,11 @@ function renderSeriesSchedule(page, item) {
             page.querySelector('#seriesScheduleSection').classList.add('hide');
         }
 
-        page.querySelector('#seriesScheduleList').innerHTML = listView.getListViewHtml({
+        const html = getProgramScheduleHtml(result.Items, 'programdialog');
-            items: result.Items,
+        const scheduleTab = page.querySelector('#seriesScheduleList');
-            enableUserDataButtons: false,
+        scheduleTab.innerHTML = html;
-            showParentTitle: false,
+        imageLoader.lazyChildren(scheduleTab);
-            image: false,
+
-            showProgramDateTime: true,
-            mediaInfo: false,
-            showTitle: true,
-            moreButton: false,
-            action: 'programdialog'
-        });
         loading.hide();
     });
 }