From 66b4ed053b6150a2df9fd408261e5141917b3cc5 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Wed, 14 Sep 2016 12:20:03 -0400
Subject: [PATCH] update recording dialogs

---
 .../cardbuilder/cardbuilder.js                |  35 +----
 .../dialoghelper/dialoghelper.css             |   2 +-
 .../emby-webcomponents/formdialog.css         |   9 +-
 .../emby-webcomponents/guide/guide.js         |   2 +-
 .../itemhovermenu/itemhovermenu.js            |   2 +-
 .../emby-webcomponents/mediainfo/mediainfo.js |  20 +--
 .../recordingcreator/empty.png                | Bin 0 -> 156 bytes
 .../recordingcreator/recordingcreator.css     |  13 +-
 .../recordingcreator/recordingcreator.js      | 122 +++++++-----------
 .../recordingcreator.template.html            |  65 ++--------
 .../recordingcreator/recordingeditor.js       |   6 +-
 .../recordingeditor.template.html             |   2 +-
 .../emby-webcomponents/shortcuts.js           |  19 +++
 dashboard-ui/scripts/itembynamedetailpage.js  |  27 +++-
 dashboard-ui/scripts/itemdetailpage.js        |   3 +-
 dashboard-ui/scripts/livetvcomponents.js      |   3 +-
 dashboard-ui/scripts/livetvrecordings.js      |   7 +-
 dashboard-ui/scripts/livetvsuggested.js       |  14 +-
 dashboard-ui/scripts/sections.js              |   2 +-
 dashboard-ui/strings/en-US.json               |   3 +-
 20 files changed, 165 insertions(+), 191 deletions(-)
 create mode 100644 dashboard-ui/bower_components/emby-webcomponents/recordingcreator/empty.png

diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
index 34322c36ce..2bea7eb583 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
@@ -148,7 +148,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
 
             if (options.shape == 'auto' || options.shape == 'autohome' || options.shape == 'autooverflow' || options.shape == 'autoVertical') {
 
-                if (options.preferThumb || isThumbAspectRatio) {
+                if (options.preferThumb === true || isThumbAspectRatio) {
                     options.shape = options.shape == 'autooverflow' ? 'overflowBackdrop' : 'backdrop';
                 } else if (isSquareAspectRatio) {
                     options.coverImage = true;
@@ -163,6 +163,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                 }
             }
 
+            if (options.preferThumb == 'auto') {
+                options.preferThumb = options.shape == 'backdrop' || options.shape == 'overflowBackdrop';
+            }
+
             options.uiAspect = getDesiredAspect(options.shape);
             options.primaryImageAspectRatio = primaryImageAspectRatio;
 
@@ -454,34 +458,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
             var imgUrl = null;
             var coverImage = false;
 
-            if (options.autoThumb && item.ImageTags && item.ImageTags.Primary && item.PrimaryImageAspectRatio && item.PrimaryImageAspectRatio >= 1.34) {
-
-                height = primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
-
-                imgUrl = ApiClient.getScaledImageUrl(item.Id, {
-                    type: "Primary",
-                    maxHeight: height,
-                    maxWidth: width,
-                    tag: item.ImageTags.Primary
-                });
-
-                if (primaryImageAspectRatio) {
-                    if (uiAspect) {
-                        if (Math.abs(primaryImageAspectRatio - uiAspect) <= .2) {
-                            coverImage = true;
-                        }
-                    }
-                }
-
-            } else if (options.autoThumb && item.ImageTags && item.ImageTags.Thumb) {
-
-                imgUrl = ApiClient.getScaledImageUrl(item.Id, {
-                    type: "Thumb",
-                    maxWidth: width,
-                    tag: item.ImageTags.Thumb
-                });
-
-            } else if (options.preferThumb && item.ImageTags && item.ImageTags.Thumb) {
+            if (options.preferThumb && item.ImageTags && item.ImageTags.Thumb) {
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Thumb",
diff --git a/dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.css b/dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.css
index 45f09ec7b8..e8119c0671 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.css
@@ -92,5 +92,5 @@
 }
 
 .dialogBackdropOpened {
-    opacity: .7;
+    opacity: .8;
 }
diff --git a/dashboard-ui/bower_components/emby-webcomponents/formdialog.css b/dashboard-ui/bower_components/emby-webcomponents/formdialog.css
index fadaeecdae..ca95cd7e6b 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/formdialog.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/formdialog.css
@@ -27,7 +27,7 @@
 }
 
 .dialogContentInner {
-    padding: .5em 1.5em 20em 1.5em;
+    padding: .5em 1em 20em 1em;
 }
 
 .dialogContentInner-mini {
@@ -49,7 +49,7 @@
     left: 0;
     right: 0;
     display: flex;
-    padding: 1.5em;
+    padding: 1.25em;
     /* Without this emby-checkbox is able to appear on top */
     z-index: 1;
     align-items: center;
@@ -70,6 +70,11 @@
     .formDialogFooterItem {
         max-width: 80%;
     }
+
+    .dialogContentInner {
+        padding-left: 1.5em;
+        padding-right: 1.5em;
+    }
 }
 
 @media all and (min-width: 1280px) {
diff --git a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js
index 90f07e80d7..ff9f25090c 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js
@@ -367,7 +367,7 @@
                 if (program.SeriesTimerId) {
                     timerAttributes += ' data-seriestimerid="' + program.SeriesTimerId + '"';
                 }
-                html += '<button data-action="link"' + timerAttributes + ' data-isfolder="' + program.IsFolder + '" data-id="' + program.Id + '" data-serverid="' + program.ServerId + '" data-type="' + program.Type + '" class="' + cssClass + '" style="left:' + startPercent + '%;width:' + endPercent + '%;">';
+                html += '<button data-action="programdialog"' + timerAttributes + ' data-isfolder="' + program.IsFolder + '" data-id="' + program.Id + '" data-serverid="' + program.ServerId + '" data-type="' + program.Type + '" class="' + cssClass + '" style="left:' + startPercent + '%;width:' + endPercent + '%;">';
 
                 var guideProgramNameClass = "guideProgramName";
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.js b/dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.js
index 069af77642..a24fe6488d 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.js
@@ -77,7 +77,7 @@
         var isPortrait = className.indexOf('portrait') != -1;
 
         var parentName = isSmallItem || isMiniItem || isPortrait ? null : item.SeriesName;
-        var name = itemHelper.getDisplayName(item);
+        var name = item.EpisodeTitle ? item.Name : itemHelper.getDisplayName(item);
 
         html += '<div>';
         var logoHeight = 26;
diff --git a/dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.js b/dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.js
index 0bccf16917..c34c85f6e5 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/mediainfo/mediainfo.js
@@ -6,15 +6,6 @@ define(['datetime', 'globalize', 'embyRouter', 'itemHelper', 'material-icons', '
         var miscInfo = [];
         var text, date;
 
-        if (item.ChannelName) {
-
-            if (options.interactive && item.ChannelId) {
-                miscInfo.push('<a class="lnkChannel" data-id="' + item.ChannelId + '" data-serverid="' + item.ServerId + '" href="#">' + item.ChannelName + '</a>');
-            } else {
-                miscInfo.push(item.ChannelName);
-            }
-        }
-
         if (item.StartDate) {
 
             try {
@@ -22,7 +13,7 @@ define(['datetime', 'globalize', 'embyRouter', 'itemHelper', 'material-icons', '
 
                 text = datetime.toLocaleDateString(date);
 
-                text += ', ' + datetime.getDisplayTime(date);
+                text += ' ' + datetime.getDisplayTime(date);
 
                 if (item.EndDate) {
                     date = datetime.parseISO8601Date(item.EndDate);
@@ -40,6 +31,15 @@ define(['datetime', 'globalize', 'embyRouter', 'itemHelper', 'material-icons', '
             miscInfo.push('CH ' + item.ChannelNumber);
         }
 
+        if (item.ChannelName) {
+
+            if (options.interactive && item.ChannelId) {
+                miscInfo.push('<a class="lnkChannel" data-id="' + item.ChannelId + '" data-serverid="' + item.ServerId + '" href="#">' + item.ChannelName + '</a>');
+            } else {
+                miscInfo.push(item.ChannelName);
+            }
+        }
+
         if (item.SeriesTimerId) {
             miscInfo.push({
                 html: '<i class="md-icon mediaInfoItem mediaInfoTimerIcon mediaInfoIconItem">&#xE062;</i>'
diff --git a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/empty.png b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/empty.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a91a7f8a19f8dd8e86819a031a1a0e3c85f7b9f
GIT binary patch
literal 156
zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx1|;Q0k92}K#X;^)4C~IxyaaMs(j9#r85lP9
zbN@+X1@buyJR*x382Ao@Fyrz36)8YLi4xa{lHmNblJdl&REC1Y%)Ao4ywnl}6Fmbx
p%N*l6KcE_3PZ!4!iSXnEAOLb%85p~a9|IW-44$rjF6*2UngBxzB(4Ae

literal 0
HcmV?d00001

diff --git a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.css b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.css
index d1ac2da22b..ef425a7c90 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.css
@@ -9,17 +9,28 @@
 .recordingDialog-imageContainer {
     flex-shrink: 0;
     padding: 1em 1em 1em 0;
-    max-width: 30%;
+    max-width: 25%;
 }
 
 .recordingDialog-img {
     max-width: 100%;
 }
 
+.btnPlay-notplayable {
+    display: none !important;
+}
+
 .recordingDialog-itemName {
     margin-top: .5em;
 }
 
+@media all and (max-width: 800px) {
+
+    .programDialog-itemName {
+        display: none;
+    }
+}
+
 @media all and (max-height: 1400px) {
 
     .layout-tv .recordingDialog .itemOverview {
diff --git a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.js b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.js
index c9814e3000..ff2c0133dd 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.js
@@ -1,46 +1,14 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'shell', 'emby-checkbox', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, shell) {
+define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'datetime', 'imageLoader', 'shell', 'emby-checkbox', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, datetime, imageLoader, shell) {
 
     var currentProgramId;
     var currentServerId;
     var currentDialog;
     var recordingCreated = false;
-
-    function getDaysOfWeek() {
-
-        return [
-         'Sunday',
-         'Monday',
-         'Tuesday',
-         'Wednesday',
-         'Thursday',
-         'Friday',
-         'Saturday'
-        ];
-    }
-
-    function getDays(context) {
-
-        var daysOfWeek = getDaysOfWeek();
-
-        var days = [];
-
-        for (var i = 0, length = daysOfWeek.length; i < length; i++) {
-
-            var day = daysOfWeek[i];
-
-            if (context.querySelector('#chk' + day).checked) {
-                days.push(day);
-            }
-
-        }
-
-        return days;
-    }
+    var closeAction;
 
     function hideSeriesRecordingFields(context) {
 
         slideUpToHide(context.querySelector('.seriesFields'));
-        slideUpToHide(context.querySelector('.seriesDays'));
         context.querySelector('.btnSubmit').classList.remove('hide');
         context.querySelector('.supporterContainer').classList.add('hide');
     }
@@ -68,15 +36,10 @@
 
         apiClient.getNewLiveTvTimerDefaults({ programId: currentProgramId }).then(function (item) {
 
-            item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
-            item.PostPaddingSeconds = form.querySelector('#txtPostPaddingMinutes').value * 60;
-
             item.RecordNewOnly = form.querySelector('#chkNewOnly').checked;
             item.RecordAnyChannel = form.querySelector('#chkAllChannels').checked;
             item.RecordAnyTime = form.querySelector('#chkAnyTime').checked;
 
-            item.Days = getDays(form);
-
             if (form.querySelector('#chkRecordSeries').checked) {
 
                 apiClient.createLiveTvSeriesTimer(item).then(function () {
@@ -125,25 +88,26 @@
         });
     }
 
-    function showSeriesDays(context) {
+    function setPlayButtonVisible(context, visible) {
 
-        if (context.querySelector('#chkAnyTime').checked) {
-            slideUpToHide(context.querySelector('.seriesDays'));
+        var btnPlay = context.querySelector('.btnPlay');
+
+        if (!visible) {
+            btnPlay.classList.add('hide');
         } else {
-            slideDownToShow(context.querySelector('.seriesDays'));
+            btnPlay.classList.remove('hide');
         }
     }
 
     function showSeriesRecordingFields(context, apiClient) {
 
         slideDownToShow(context.querySelector('.seriesFields'));
-        showSeriesDays(context);
-        context.querySelector('.btnSubmit').classList.remove('hide');
 
         getRegistration(apiClient, currentProgramId, 'seriesrecordings').then(function (regInfo) {
 
             if (regInfo.IsRegistered) {
                 context.querySelector('.btnSubmit').classList.remove('hide');
+                setPlayButtonVisible(context, true);
                 context.querySelector('.supporterContainer').classList.add('hide');
 
             } else {
@@ -151,18 +115,18 @@
                 context.querySelector('.supporterContainerText').innerHTML = globalize.translate('sharedcomponents#MessageActiveSubscriptionRequiredSeriesRecordings');
                 context.querySelector('.supporterContainer').classList.remove('hide');
                 context.querySelector('.btnSubmit').classList.add('hide');
+                setPlayButtonVisible(context, false);
             }
         });
     }
 
     function showSingleRecordingFields(context, apiClient) {
 
-        context.querySelector('.btnSubmit').classList.remove('hide');
-
         getRegistration(apiClient, currentProgramId, 'dvr').then(function (regInfo) {
 
             if (regInfo.IsRegistered) {
                 context.querySelector('.btnSubmit').classList.remove('hide');
+                setPlayButtonVisible(context, true);
                 context.querySelector('.supporterContainer').classList.add('hide');
 
             } else {
@@ -170,6 +134,7 @@
                 context.querySelector('.supporterContainerText').innerHTML = globalize.translate('sharedcomponents#DvrSubscriptionRequired');
                 context.querySelector('.supporterContainer').classList.remove('hide');
                 context.querySelector('.btnSubmit').classList.add('hide');
+                setPlayButtonVisible(context, false);
             }
         });
     }
@@ -231,14 +196,16 @@
             }
         });
 
-        context.querySelector('.btnCancel').addEventListener('click', function () {
+        context.querySelector('.btnPlay').addEventListener('click', function () {
 
+            closeAction = 'play';
             closeDialog(false);
         });
 
-        context.querySelector('#chkAnyTime').addEventListener('change', function () {
+        context.querySelector('.btnCancel').addEventListener('click', function () {
 
-            showSeriesDays(context);
+            closeAction = null;
+            closeDialog(false);
         });
 
         context.querySelector('form', context).addEventListener('submit', onSubmit);
@@ -256,24 +223,6 @@
 
             context.querySelector('#chkConvertRecordings').checked = config.EnableRecordingEncoding;
         });
-
-        if (layoutManager.tv) {
-            context.querySelector('.advanced').classList.add('hide');
-        } else {
-            context.querySelector('.advanced').classList.remove('hide');
-        }
-    }
-
-    function selectDays(page, days) {
-
-        var daysOfWeek = getDaysOfWeek();
-
-        for (var i = 0, length = daysOfWeek.length; i < length; i++) {
-
-            var day = daysOfWeek[i];
-
-            page.querySelector('#chk' + day).checked = days.indexOf(day) != -1;
-        }
     }
 
     function getImageUrl(item, apiClient, imageHeight) {
@@ -310,16 +259,27 @@
         var imageContainer = context.querySelector('.recordingDialog-imageContainer');
 
         if (imgUrl) {
-            imageContainer.innerHTML = '<img src="' + imgUrl + '" class="recordingDialog-img" />';
+            imageContainer.innerHTML = '<img src="' + require.toUrl('.').split('?')[0] + '/empty.png" data-src="' + imgUrl + '" class="recordingDialog-img lazy" />';
             imageContainer.classList.remove('hide');
+
+            imageLoader.lazyChildren(imageContainer);
         } else {
             imageContainer.innerHTML = '';
             imageContainer.classList.add('hide');
         }
 
         context.querySelector('.recordingDialog-itemName').innerHTML = program.Name;
+        context.querySelector('.formDialogHeaderTitle').innerHTML = program.Name;
         context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
 
+        var btnPlay = context.querySelector('.btnPlay');
+        var now = new Date();
+        if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) {
+            btnPlay.classList.remove('btnPlay-notplayable');
+        } else {
+            btnPlay.classList.add('btnPlay-notplayable');
+        }
+
         context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
         context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program);
 
@@ -327,17 +287,12 @@
         context.querySelector('#chkAllChannels').checked = defaultTimer.RecordAnyChannel;
         context.querySelector('#chkAnyTime').checked = defaultTimer.RecordAnyTime;
 
-        context.querySelector('#txtPrePaddingMinutes').value = defaultTimer.PrePaddingSeconds / 60;
-        context.querySelector('#txtPostPaddingMinutes').value = defaultTimer.PostPaddingSeconds / 60;
-
         if (program.IsSeries) {
             context.querySelector('#eligibleForSeriesFields').classList.remove('hide');
         } else {
             context.querySelector('#eligibleForSeriesFields').classList.add('hide');
         }
 
-        selectDays(context, defaultTimer.Days);
-
         context.querySelector('.convertRecordingsContainer').classList.remove('hide');
         showConvertRecordingsUnlockMessage(context, apiClient);
 
@@ -386,6 +341,23 @@
         });
     }
 
+    function executeCloseAction(action, programId, serverId) {
+
+        if (action == 'play') {
+
+            require(['playbackManager'], function (playbackManager) {
+
+                var apiClient = connectionManager.getApiClient(serverId);
+
+                apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
+
+                    playbackManager.play(item.ChannelId, serverId);
+                });
+            });
+            return;
+        }
+    }
+
     function showEditor(itemId, serverId) {
 
         return new Promise(function (resolve, reject) {
@@ -423,6 +395,8 @@
 
                 dlg.addEventListener('close', function () {
 
+                    executeCloseAction(closeAction, currentProgramId, currentServerId);
+
                     if (recordingCreated) {
                         require(['toast'], function (toast) {
                             toast(globalize.translate('sharedcomponents#RecordingScheduled'));
diff --git a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.template.html b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.template.html
index 0af5666cbc..69a2963b9d 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.template.html
+++ b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.template.html
@@ -1,8 +1,6 @@
 <div class="formDialogHeader">
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
-    <h3 class="formDialogHeaderTitle">
-        ${HeaderNewRecording}
-    </h3>
+    <h3 class="formDialogHeaderTitle"></h3>
 </div>
 <div class="formDialogContent smoothScrollY">
     <form class="dialogContentInner dialog-content-centered">
@@ -12,7 +10,7 @@
 
             </div>
             <div style="flex-grow:1;">
-                <h1 class="recordingDialog-itemName dialogContentTitle"></h1>
+                <h1 class="programDialog-itemName recordingDialog-itemName dialogContentTitle"></h1>
                 <p class="itemMiscInfoPrimary" style="display: flex; align-items: center; flex-wrap: wrap;"></p>
                 <p class="itemMiscInfoSecondary" style="display: flex; align-items: center; flex-wrap: wrap;"></p>
                 <p class="itemGenres"></p>
@@ -21,7 +19,7 @@
 
         <div id="eligibleForSeriesFields" class="hide">
             <br />
-            <label class="checkboxContainer">
+            <label>
                 <input type="checkbox" is="emby-checkbox" id="chkRecordSeries" />
                 <span>${RecordSeries}</span>
             </label>
@@ -44,6 +42,7 @@
                 <br />
             </div>
         </div>
+        <br />
         <div class="convertRecordingsContainer hide checkboxContainer checkboxContainer-withDescription">
             <label>
                 <input type="checkbox" is="emby-checkbox" id="chkConvertRecordings" />
@@ -54,56 +53,6 @@
                 <a href="#" class="accent lnkPremiere">${FeatureRequiresEmbyPremiere}</a>
             </div>
         </div>
-        <div class="advanced hide">
-            <div is="emby-collapse" title="${Advanced}">
-                <div class="collapseContent">
-                    <div class="seriesDays hide">
-                        <div>
-                            <h1>${Days}</h1>
-                        </div>
-                        <div class="checkboxList">
-                            <label>
-                                <input type="checkbox" is="emby-checkbox" id="chkSunday" />
-                                <span>${Sunday}</span>
-                            </label>
-                            <label>
-                                <input type="checkbox" is="emby-checkbox" id="chkMonday" />
-                                <span>${Monday}</span>
-                            </label>
-                            <label>
-                                <input type="checkbox" is="emby-checkbox" id="chkTuesday" />
-                                <span>${Tuesday}</span>
-                            </label>
-                            <label>
-                                <input type="checkbox" is="emby-checkbox" id="chkWednesday" />
-                                <span>${Wednesday}</span>
-                            </label>
-                            <label>
-                                <input type="checkbox" is="emby-checkbox" id="chkThursday" />
-                                <span>${Thursday}</span>
-                            </label>
-                            <label>
-                                <input type="checkbox" is="emby-checkbox" id="chkFriday" />
-                                <span>${Friday}</span>
-                            </label>
-                            <label>
-                                <input type="checkbox" is="emby-checkbox" id="chkSaturday" />
-                                <span>${Saturday}</span>
-                            </label>
-                        </div>
-                        <br />
-                    </div>
-                    <br />
-                    <div class="inputContainer">
-                        <input is="emby-input" type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPrePaddingMinutes}" />
-                    </div>
-                    <div class="inputContainer">
-                        <input is="emby-input" type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPostPaddingMinutes}" />
-                    </div>
-                </div>
-            </div>
-            <br />
-        </div>
         <br />
         <div class="formDialogFooter">
             <div class="supporterContainer hide formDialogFooterItem">
@@ -113,8 +62,10 @@
                     <span>${HeaderBecomeProjectSupporter}</span>
                 </button>
             </div>
-            <button is="emby-button" type="submit" class="raised btnSubmit block formDialogFooterItem button-submit">
-                <i class="md-icon recordingDialogSubmitIcon">fiber_manual_record</i>
+            <button is="emby-button" type="button" class="raised btnPlay btnPlay-notplayable hide block formDialogFooterItem button-submit">
+                <span>${Play}</span>
+            </button>
+            <button is="emby-button" type="submit" class="raised btnSubmit block formDialogFooterItem button-submit" style="background:#cc3333;">
                 <span>${Record}</span>
             </button>
         </div>
diff --git a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.js b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.js
index 3e1f46123a..260c7885e8 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.js
@@ -1,4 +1,4 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'scrollStyles', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
+define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'scrollStyles', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader) {
 
     var currentDialog;
     var recordingUpdated = false;
@@ -66,8 +66,10 @@
         var imageContainer = context.querySelector('.recordingDialog-imageContainer');
 
         if (imgUrl) {
-            imageContainer.innerHTML = '<img src="' + imgUrl + '" class="recordingDialog-img" />';
+            imageContainer.innerHTML = '<img src="' + require.toUrl('.').split('?')[0] + '/empty.png" data-src="' + imgUrl + '" class="recordingDialog-img lazy" />';
             imageContainer.classList.remove('hide');
+
+            imageLoader.lazyChildren(imageContainer);
         } else {
             imageContainer.innerHTML = '';
             imageContainer.classList.add('hide');
diff --git a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.template.html b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.template.html
index 866803cd3e..76a06d8f67 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.template.html
+++ b/dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.template.html
@@ -16,10 +16,10 @@
                 <h1 class="recordingDialog-itemName dialogContentTitle"></h1>
                 <p class="itemMiscInfoPrimary" style="display: flex; align-items: center; flex-wrap: wrap;"></p>
                 <p class="itemMiscInfoSecondary" style="display: flex; align-items: center; flex-wrap: wrap;"></p>
-                <p class="itemGenres"></p>
             </div>
         </div>
 
+        <p class="itemGenres"></p>
         <p class="itemOverview"></p>
 
         <p style="margin-top: 2em;" class="timerStatus hide">
diff --git a/dashboard-ui/bower_components/emby-webcomponents/shortcuts.js b/dashboard-ui/bower_components/emby-webcomponents/shortcuts.js
index 92370dd4b5..80a07a0934 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/shortcuts.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/shortcuts.js
@@ -91,6 +91,19 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
         embyRouter.showItem(item, options);
     }
 
+    function showProgramDialog(item) {
+
+        if (item.TimerId) {
+            showItem(item);
+            return;
+        }
+
+        require(['recordingCreator'], function (recordingCreator) {
+
+            recordingCreator.show(item.Id, item.ServerId);
+        });
+    }
+
     function getItem(button) {
 
         button = dom.parentWithAttribute(button, 'data-id');
@@ -168,6 +181,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
         return {
             Type: card.getAttribute('data-type'),
             Id: card.getAttribute('data-id'),
+            TimerId: card.getAttribute('data-timerid'),
             CollectionType: card.getAttribute('data-collectiontype'),
             ChannelId: card.getAttribute('data-channelid'),
             SeriesId: card.getAttribute('data-seriesid'),
@@ -217,6 +231,11 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
             });
         }
 
+        else if (action == 'programdialog') {
+
+            showProgramDialog(item);
+        }
+
         else if (action == 'instantmix') {
             playbackManager.instantMix(id, serverId);
         }
diff --git a/dashboard-ui/scripts/itembynamedetailpage.js b/dashboard-ui/scripts/itembynamedetailpage.js
index 69eed11354..1cb7437bdc 100644
--- a/dashboard-ui/scripts/itembynamedetailpage.js
+++ b/dashboard-ui/scripts/itembynamedetailpage.js
@@ -10,7 +10,13 @@
                 type: 'MusicArtist'
             });
         }
+        if (item.ProgramCount) {
 
+            sections.push({
+                name: Globalize.translate('HeaderUpcomingOnTV'),
+                type: 'Program'
+            });
+        }
         if (item.MovieCount) {
 
             sections.push({
@@ -108,6 +114,24 @@
 
         switch (type) {
 
+            case 'Program':
+                loadItems(element, item, type, {
+                    MediaTypes: "",
+                    IncludeItemTypes: "Program",
+                    PersonTypes: "",
+                    ArtistIds: "",
+                    Limit: 10
+                }, {
+                    shape: "backdrop",
+                    showTitle: true,
+                    centerText: true,
+                    overlayMoreButton: true,
+                    preferThumb: true,
+                    overlayText: false,
+                    showProgramAirInfo: true
+                });
+                break;
+
             case 'Movie':
                 loadItems(element, item, type, {
                     MediaTypes: "",
@@ -119,7 +143,8 @@
                     shape: "portrait",
                     showTitle: true,
                     centerText: true,
-                    overlayMoreButton: true
+                    overlayMoreButton: true,
+                    overlayText: false
                 });
                 break;
 
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js
index 06abd20a17..4d754c1b60 100644
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@@ -565,7 +565,8 @@
         var itemMiscInfo = page.querySelectorAll('.itemMiscInfo');
         for (i = 0, length = itemMiscInfo.length; i < length; i++) {
             mediaInfo.fillPrimaryMediaInfo(itemMiscInfo[i], item, {
-                interactive: true
+                interactive: true,
+                episodeTitle: false
             });
         }
         var itemGenres = page.querySelectorAll('.itemGenres');
diff --git a/dashboard-ui/scripts/livetvcomponents.js b/dashboard-ui/scripts/livetvcomponents.js
index aec875ec20..ce5995067c 100644
--- a/dashboard-ui/scripts/livetvcomponents.js
+++ b/dashboard-ui/scripts/livetvcomponents.js
@@ -89,7 +89,8 @@
                 showChannelName: true,
                 lazy: true,
                 cardLayout: true,
-                action: 'edit'
+                action: 'edit',
+                cardFooterAside: 'none'
 
             });
             html += '</div>';
diff --git a/dashboard-ui/scripts/livetvrecordings.js b/dashboard-ui/scripts/livetvrecordings.js
index 2ffd4ebe92..bd8aaa9e24 100644
--- a/dashboard-ui/scripts/livetvrecordings.js
+++ b/dashboard-ui/scripts/livetvrecordings.js
@@ -84,7 +84,9 @@
             coverImage: true,
             lazy: true,
             cardLayout: true,
-            allowBottomPadding: !enableScrollX()
+            allowBottomPadding: !enableScrollX(),
+            preferThumb: 'auto'
+
         }, cardOptions || {}));
 
         ImageLoader.lazyChildren(recordingItems);
@@ -117,7 +119,8 @@
             Limit: enableScrollX() ? 12 : 8,
             IsInProgress: false,
             Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo',
-            EnableTotalRecordCount: false
+            EnableTotalRecordCount: false,
+            EnableImageTypes: "Primary,Thumb"
 
         }).then(function (result) {
 
diff --git a/dashboard-ui/scripts/livetvsuggested.js b/dashboard-ui/scripts/livetvsuggested.js
index 2ff0b149ba..c0536ae60d 100644
--- a/dashboard-ui/scripts/livetvsuggested.js
+++ b/dashboard-ui/scripts/livetvsuggested.js
@@ -28,7 +28,7 @@
             IsAiring: true,
             limit: limit,
             ImageTypeLimit: 1,
-            EnableImageTypes: "Primary",
+            EnableImageTypes: "Primary,Thumb",
             Fields: "ChannelInfo"
 
         }).then(function (result) {
@@ -53,7 +53,8 @@
             IsKids: false,
             IsSeries: true,
             EnableTotalRecordCount: false,
-            Fields: "ChannelInfo"
+            Fields: "ChannelInfo",
+            EnableImageTypes: "Primary,Thumb"
 
         }).then(function (result) {
 
@@ -68,7 +69,8 @@
             limit: getLimit(),
             IsMovie: true,
             EnableTotalRecordCount: false,
-            Fields: "ChannelInfo"
+            Fields: "ChannelInfo",
+            EnableImageTypes: "Primary,Thumb"
 
         }).then(function (result) {
 
@@ -83,7 +85,8 @@
             limit: getLimit(),
             IsSports: true,
             EnableTotalRecordCount: false,
-            Fields: "ChannelInfo"
+            Fields: "ChannelInfo",
+            EnableImageTypes: "Primary,Thumb"
 
         }).then(function (result) {
 
@@ -98,7 +101,8 @@
             limit: getLimit(),
             IsKids: true,
             EnableTotalRecordCount: false,
-            Fields: "ChannelInfo"
+            Fields: "ChannelInfo",
+            EnableImageTypes: "Primary,Thumb"
 
         }).then(function (result) {
 
diff --git a/dashboard-ui/scripts/sections.js b/dashboard-ui/scripts/sections.js
index 35ab9e54c3..16a61ca05d 100644
--- a/dashboard-ui/scripts/sections.js
+++ b/dashboard-ui/scripts/sections.js
@@ -457,8 +457,8 @@
                     centerText: true,
                     overlayText: false,
                     lazy: true,
-                    autoThumb: true,
                     transition: false,
+                    preferThumb: true,
                     allowBottomPadding: !enableScrollX()
                 });
                 html += '</div>';
diff --git a/dashboard-ui/strings/en-US.json b/dashboard-ui/strings/en-US.json
index 30f4a40da1..102145b5ef 100644
--- a/dashboard-ui/strings/en-US.json
+++ b/dashboard-ui/strings/en-US.json
@@ -2136,5 +2136,6 @@
   "Sports": "Sports",
   "HeaderForKids": "For Kids",
   "HeaderRecordingGroups": "Recording Groups",
-  "LabelConvertRecordingsTo": "Convert recordings to:"
+  "LabelConvertRecordingsTo": "Convert recordings to:",
+  "HeaderUpcomingOnTV":  "Upcoming On TV"
 }