graphical display of latest recordings

dashboard-ui/livetvrecordings.html

@@ -13,9 +13,17 @@
             <a href="livetvseriestimers.html">Series</a>
         </div>
         <div data-role="content">
-            <div style="max-width: 700px; margin: 0 auto;">
+            <div style="max-width: 720px; margin: 0 auto;">
+
+                <div id="latestRecordings" style="display: none;">
+                    <h1 class="listHeader">Latest Recordings</h1>
+                    <div id="latestRecordingItems"></div>
+                </div>
+                <br />
+                <div id="recordingGroups" style="display: none;">
                     <h1 class="listHeader">Recording Groups</h1>
-                <div id="items"></div>
+                    <div id="recordingGroupItems"></div>
+                </div>
             </div>
         </div>
     </div>

dashboard-ui/scripts/librarybrowser.js

@@ -1,6 +1,6 @@
 var LibraryBrowser = (function (window, document, $, screen, localStorage) {
 
-    var defaultBackground = "#555;";
+    var defaultBackground = "#444";
 
     return {
 
@@ -590,6 +590,9 @@
             if (item.Type == "Person") {
                 return "itembynamedetails.html?person=" + ApiClient.encodeName(item.Name) + "&context=" + itemByNameContext;
             }
+            if (item.Type == "Recording") {
+                return "livetvrecording.html?id=" + id;
+            }
 
             if (item.Type == "MusicArtist") {
                 if (itemByNameContext == "music") {
@@ -745,12 +748,22 @@
                     height = 400;
                     width = primaryImageAspectRatio ? Math.round(height * primaryImageAspectRatio) : null;
 
+                    if (item.Type == "Recording") {
+                        imgUrl = ApiClient.getUrl("LiveTV/Recordings/" + item.Id + "/Images/Primary", {
+                            type: "Primary",
+                            height: height,
+                            width: width,
+                            tag: item.ImageTags.Primary
+                        });
+
+                    } else {
                         imgUrl = ApiClient.getImageUrl(item.Id, {
                             type: "Primary",
                             height: height,
                             width: width,
                             tag: item.ImageTags.Primary
                         });
+                    }
 
                 }
                 else if (item.AlbumId && item.AlbumPrimaryImageTag) {
@@ -807,16 +820,24 @@
                         imgUrl = 'css/images/items/list/audio.png';
                         background = defaultBackground;
                     } else {
-                        background = '#555';
+                        background = defaultBackground;
                     }
                 }
+                else if (item.Type == "Recording" || item.Type == "Program") {
+
+                    if (item.Name && options.showTitle) {
+                        imgUrl = 'css/images/items/list/collection.png';
+                    }
+
+                    background = defaultBackground;
+                }
                 else if (item.MediaType == "Video" || item.Type == "Season" || item.Type == "Series") {
 
                     if (item.Name && options.showTitle) {
                         imgUrl = 'css/images/items/list/video.png';
                         background = defaultBackground;
                     } else {
-                        background = '#555';
+                        background = defaultBackground;
                     }
                 }
                 else {
@@ -824,7 +845,7 @@
                         imgUrl = 'css/images/items/list/collection.png';
                         background = LibraryBrowser.getMetroColor(item.Id);
                     } else {
-                        background = '#555';
+                        background = defaultBackground;
                     }
                 }
 
@@ -874,7 +895,7 @@
                 if (options.showParentTitle) {
 
                     html += "<div class='" + cssclass + "'>";
-                    html += item.SeriesName || item.Album || item.AlbumArtist || "&nbsp;";
+                    html += item.EpisodeTitle ? item.Name : (item.SeriesName || item.Album || item.AlbumArtist || "&nbsp;");
                     html += "</div>";
                 }
 
@@ -1010,7 +1031,7 @@
 
         getPosterViewDisplayName: function (item, displayAsSpecial) {
 
-            var name = item.Name;
+            var name = item.EpisodeTitle || item.Name;
 
             if (displayAsSpecial && item.Type == "Episode" && item.ParentIndexNumber == 0) {
 

dashboard-ui/scripts/livetvrecordings.js

@@ -39,7 +39,7 @@
 
         var html = '';
 
-        html += '<div data-role="collapsible" class="recordingGroupCollapsible" data-recordinggroupid="' + group.Id + '" style="margin-top:1em" data-mini="true">';
+        html += '<div data-role="collapsible" class="recordingGroupCollapsible" data-recordinggroupid="' + group.Id + '" style="margin-top:1em">';
 
         html += '<h3>' + group.Name + '</h3>';
 
@@ -53,6 +53,12 @@
 
     function renderRecordingGroups(page, groups) {
 
+        if (groups.length) {
+            $('#recordingGroups', page).show();
+        } else {
+            $('#recordingGroups', page).hide();
+        }
+
         var html = '';
 
         for (var i = 0, length = groups.length; i < length; i++) {
@@ -60,7 +66,7 @@
             html += getRecordingGroupHtml(groups[i]);
         }
 
-        var elem = $('#items', page).html(html).trigger('create');
+        var elem = $('#recordingGroupItems', page).html(html).trigger('create');
 
         $('.recordingGroupCollapsible', elem).on('collapsibleexpand.lazyload', function () {
 
@@ -134,6 +140,25 @@
         Dashboard.hideLoadingMsg();
     }
     
+    function renderLatestRecordings(page, recordings) {
+        
+        if (recordings.length) {
+            $('#latestRecordings', page).show();
+        } else {
+            $('#latestRecordings', page).hide();
+        }
+
+        $('#latestRecordingItems', page).html(LibraryBrowser.getPosterViewHtml({
+            items: recordings,
+            useAverageAspectRatio: true,
+            shape: "smallBackdrop",
+            showTitle: true,
+            showParentTitle: true,
+            overlayText: true
+
+        }));
+    }
+
     function reload(page) {
 
         Dashboard.showLoadingMsg();
@@ -147,6 +172,17 @@
             renderRecordingGroups(page, result.Items);
 
         });
+
+        apiClient.getLiveTvRecordings({
+
+            userId: Dashboard.getCurrentUserId(),
+            limit: 6
+
+        }).done(function (result) {
+
+            renderLatestRecordings(page, result.Items);
+
+        });
     }
 
     $(document).on('pagebeforeshow', "#liveTvRecordingsPage", function () {