improve display of active recordings

dashboard-ui/css/librarybrowser.css

@@ -874,6 +874,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     position: absolute;
     top: 5px;
     right: 5px;
+    font-size: 200%;
 }
 
 .playedIndicator + .syncIndicator {

dashboard-ui/scripts/livetvcomponents.js

@@ -8,8 +8,9 @@
         return enableScrollX() ? 'overflowSquare' : 'square';
     }
 
-    function getTimersHtml(timers) {
+    function getTimersHtml(timers, options) {
 
+        options = options || {};
         var items = timers.map(function (t) {
             t.Type = 'Timer';
             return t;
@@ -28,7 +29,7 @@
 
             var dateText = '';
 
-            if (item.StartDate) {
+            if (options.indexByDate !== false && item.StartDate) {
                 try {
 
                     var premiereDate = datetime.parseISO8601Date(item.StartDate, true);
@@ -55,14 +56,24 @@
             }
         }
 
+        if (currentGroup.length) {
+            groups.push({
+                name: currentGroupName,
+                items: currentGroup
+            });
+        }
+
         var html = '';
 
         for (i = 0, length = groups.length; i < length; i++) {
 
             var group = groups[i];
 
+            if (group.name) {
                 html += '<div class="homePageSection">';
+
                 html += '<h1 class="listHeader">' + group.name + '</h1>';
+            }
 
             if (enableScrollX()) {
                 html += '<div class="itemsContainer hiddenScrollX">';
@@ -84,8 +95,10 @@
             });
             html += '</div>';
 
+            if (group.name) {
                 html += '</div>';
             }
+        }
 
         return Promise.resolve(html);
     }

dashboard-ui/scripts/livetvrecordings.js

@@ -89,17 +89,33 @@
 
     function renderActiveRecordings(context) {
 
-        ApiClient.getLiveTvRecordings({
+        ApiClient.getLiveTvTimers({
 
-            userId: Dashboard.getCurrentUserId(),
-            IsInProgress: true,
-            Fields: 'CanDelete'
+            IsActive: true
 
         }).then(function (result) {
 
-            renderRecordings(context.querySelector('#activeRecordings'), result.Items);
+            // The IsActive param is new, so handle older servers that don't support it
+            if (result.Items.length && result.Items[0].Status != 'InProgress') {
+                result.Items = [];
+            }
 
+            renderTimers(context.querySelector('#activeRecordings'), result.Items, {
+                indexByDate: false
             });
+        });
+
+        //ApiClient.getLiveTvRecordings({
+
+        //    userId: Dashboard.getCurrentUserId(),
+        //    IsInProgress: true,
+        //    Fields: 'CanDelete'
+
+        //}).then(function (result) {
+
+        //    renderRecordings(context.querySelector('#activeRecordings'), result.Items);
+
+        //});
     }
 
     function renderLatestRecordings(context) {
@@ -117,11 +133,11 @@
         });
     }
 
-    function renderTimers(context, timers) {
+    function renderTimers(context, timers, options) {
 
-        LiveTvHelpers.getTimersHtml(timers).then(function (html) {
+        LiveTvHelpers.getTimersHtml(timers, options).then(function (html) {
 
-            var elem = context.querySelector('#upcomingRecordings');
+            var elem = context;
 
             if (html) {
                 elem.classList.remove('hide');
@@ -138,9 +154,11 @@
 
     function renderUpcomingRecordings(context) {
 
-        ApiClient.getLiveTvTimers().then(function (result) {
+        ApiClient.getLiveTvTimers({
+            IsActive: false
+        }).then(function (result) {
 
-            renderTimers(context, result.Items);
+            renderTimers(context.querySelector('#upcomingRecordings'), result.Items);
         });
     }
 
@@ -167,6 +185,9 @@
     return function (view, params, tabContent) {
 
         var self = this;
+
        tabContent.querySelector('#activeRecordings .recordingItems').addEventListener('timercancelled', function () {
+            reload(tabContent);
+        });
 
        tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () {
             reload(tabContent);
         });

dashboard-ui/thirdparty/paper-button-style.css

@@ -419,6 +419,11 @@ div.dialogHeader {
     color: #fff;
 }
 
+.ui-body-a .dialogHeader a {
+    color: #fff!important;
+    text-transform: uppercase;
+}
+
 .ui-body-b div.dialogHeader {
     background-color: #101010;
 }