add images to recording dialog

dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.css

@@ -6,6 +6,20 @@
     display: none;
 }
 
+.recordingDialog-imageContainer {
+    flex-shrink: 0;
+    padding: 1em 1em 1em 0;
+    max-width: 30%;
+}
+
+.recordingDialog-img {
+    max-width: 100%;
+}
+
+.recordingDialog-itemName {
+    margin-top: .5em;
+}
+
 @media all and (max-height: 1400px) {
 
     .layout-tv .recordingDialog .itemOverview {

dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.js

@@ -276,9 +276,49 @@
         }
     }
 
+    function getImageUrl(item, apiClient, imageHeight) {
+
+        var imageTags = item.ImageTags || {};
+
+        if (item.PrimaryImageTag) {
+            imageTags.Primary = item.PrimaryImageTag;
+        }
+
+        if (imageTags.Primary) {
+
+            return apiClient.getScaledImageUrl(item.Id, {
+                type: "Primary",
+                maxHeight: imageHeight,
+                tag: item.ImageTags.Primary
+            });
+        }
+        else if (imageTags.Thumb) {
+
+            return apiClient.getScaledImageUrl(item.Id, {
+                type: "Thumb",
+                maxHeight: imageHeight,
+                tag: item.ImageTags.Thumb
+            });
+        }
+
+        return null;
+    }
+
     function renderRecording(context, defaultTimer, program, apiClient) {
 
-        context.querySelector('.itemName').innerHTML = program.Name;
+        var imgUrl = getImageUrl(program, apiClient, 200);
+        var imageContainer = context.querySelector('.recordingDialog-imageContainer');
+
+        if (imgUrl) {
+            imageContainer.innerHTML = '<img src="' + imgUrl + '" class="recordingDialog-img" />';
+            imageContainer.classList.remove('hide');
+        } else {
+            imageContainer.innerHTML = '';
+            imageContainer.classList.add('hide');
+        }
+
+        context.querySelector('.recordingDialog-itemName').innerHTML = program.Name;
+        context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
 
         context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
         context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program);

dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.template.html

@@ -7,9 +7,17 @@
 <div class="formDialogContent smoothScrollY">
     <form class="dialogContentInner dialog-content-centered">
 
-        <h1 class="itemName dialogContentTitle"></h1>
+        <div style="display: flex;">
-        <p class="itemMiscInfoPrimary" style="display: flex; align-items: center; flex-wrap: wrap;"></p>
+            <div class="recordingDialog-imageContainer">
-        <p class="itemMiscInfoSecondary" style="display: flex; align-items: center; flex-wrap: wrap;"></p>
+
+            </div>
+            <div style="flex-grow:1;">
+                <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>
 
         <div id="eligibleForSeriesFields" class="hide">
             <br />
@@ -100,7 +108,7 @@
         <div class="formDialogFooter">
             <div class="supporterContainer hide formDialogFooterItem">
                 <div class="supporterContainerText"></div>
-                <br/>
+                <br />
                 <button is="emby-button" type="button" class="btnSupporter hide raised button-submit block">
                     <span>${HeaderBecomeProjectSupporter}</span>
                 </button>

dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.js

@@ -30,19 +30,56 @@
         });
     }
 
-    function renderTimer(context, item) {
+    function getImageUrl(item, apiClient, imageHeight) {
 
-        var programInfo = item.ProgramInfo || {};
+        var imageTags = item.ImageTags || {};
 
-        context.querySelector('.itemName').innerHTML = item.Name;
+        if (item.PrimaryImageTag) {
+            imageTags.Primary = item.PrimaryImageTag;
+        }
 
-        context.querySelector('.itemGenres').innerHTML = (programInfo.Genres || []).join(' / ');
+        if (imageTags.Primary) {
-        context.querySelector('.itemOverview').innerHTML = programInfo.Overview || '';
 
-        //var timerPageImageContainer = context.querySelector('.timerPageImageContainer');
+            return apiClient.getScaledImageUrl(item.Id, {
+                type: "Primary",
+                maxHeight: imageHeight,
+                tag: item.ImageTags.Primary
+            });
+        }
+        else if (imageTags.Thumb) {
 
-        context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(programInfo);
+            return apiClient.getScaledImageUrl(item.Id, {
-        context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(programInfo);
+                type: "Thumb",
+                maxHeight: imageHeight,
+                tag: item.ImageTags.Thumb
+            });
+        }
+
+        return null;
+    }
+
+    function renderTimer(context, item, apiClient) {
+
+        var program = item.ProgramInfo || {};
+
+        var imgUrl = getImageUrl(program, apiClient, 200);
+        var imageContainer = context.querySelector('.recordingDialog-imageContainer');
+
+        if (imgUrl) {
+            imageContainer.innerHTML = '<img src="' + imgUrl + '" class="recordingDialog-img" />';
+            imageContainer.classList.remove('hide');
+        } else {
+            imageContainer.innerHTML = '';
+            imageContainer.classList.add('hide');
+        }
+
+        context.querySelector('.recordingDialog-itemName').innerHTML = item.Name;
+
+        context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
+        context.querySelector('.itemOverview').innerHTML = program.Overview || '';
+
+        context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(program);
+        context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(program);
 
         context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
         context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
@@ -119,7 +156,7 @@
         var apiClient = connectionManager.getApiClient(currentServerId);
         apiClient.getLiveTvTimer(id).then(function (result) {
 
-            renderTimer(context, result);
+            renderTimer(context, result, apiClient);
             loading.hide();
         });
     }

dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.template.html

@@ -7,10 +7,19 @@
 
 <div class="formDialogContent smoothScrollY">
     <div class="dialogContentInner dialog-content-centered">
-        <h1 class="itemName dialogContentTitle"></h1>
+
-        <p class="itemMiscInfoPrimary" style="display: flex; align-items: center; flex-wrap: wrap;"></p>
+        <div style="display: flex;">
-        <p class="itemMiscInfoSecondary" style="display: flex; align-items: center; flex-wrap: wrap;"></p>
+            <div class="recordingDialog-imageContainer">
-        <p class="itemGenres"></p>
+
+            </div>
+            <div style="flex-grow:1;">
+                <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="itemOverview"></p>
 
         <p style="margin-top: 2em;" class="timerStatus hide">