support grouping behind boxsets

dashboard-ui/css/site.css

@@ -658,7 +658,7 @@ h1 .imageLink {
 
 /* Dashboard home */
 .tblConnections td {
-    padding: 1em 0 1em 1.25em;
+    padding: 1em 0 1em .75em;
     vertical-align: top;
 }
 
@@ -666,12 +666,8 @@ h1 .imageLink {
         padding-left: 0;
     }
 
-.tblConnections img {
+.tblConnections img:not(.clientNowPlayingImage) {
-    height: 48px;
+    height: 28px;
-}
-
-.nowPlayingText {
-    padding-left: .5em!important;
 }
 
 .clientNowPlayingImage {

dashboard-ui/dashboard.html

@@ -60,9 +60,11 @@
                             </div>
                         </div>
 
-                        <div class="activeDevicesCollapsible" data-role="collapsible" data-collapsed="false" style="margin-top: 2em;">
+                        <div data-role="collapsible" data-collapsed="false" style="margin-top: 2em;">
-                            <h3>Active Devices</h3>
+                            <h3>Active Connections</h3>
-                            <div class="connections">
+                            <div>
+                                <table class="tblConnections" style="border-collapse: collapse;">
+                                </table>
                             </div>
                         </div>
 

dashboard-ui/livetvrecording.html

@@ -57,7 +57,7 @@
                     </div>
                     <div class="detailSectionContent" style="padding: 0 1em;">
 
-                        <p class="status"></p>
+                        <p class="recordingStatus"></p>
                         <p class="airDate"></p>
                     </div>
                 </div>

dashboard-ui/livetvtimer.html

@@ -32,7 +32,7 @@
                 <p class="itemOverview"></p>
 
                 <p style="margin-top: 2em;">
-                    <span class="status"></span>
+                    <span class="timerStatus"></span>
                 </p>
 
             </div>

dashboard-ui/scripts/dashboardpage.js

@@ -135,9 +135,9 @@
 
         var html = '';
 
-        var container = $('.connections', page);
+        var table = $('.tblConnections', page);
 
-        $('.sessionPosterItem', container).addClass('deadSession');
+        $('.trSession', table).addClass('deadSession');
 
         var deviceId = ApiClient.deviceId();
 
@@ -145,181 +145,103 @@
 
             var connection = dashboardInfo.ActiveConnections[i];
 
-            var itemId = 'session' + connection.Id;
+            var rowId = 'trSession' + connection.Id;
 
-            var elem = $('#' + itemId, page);
+            var elem = $('#' + rowId, page);
 
             if (elem.length) {
                 DashboardPage.updateSession(elem, connection);
                 continue;
             }
 
-            html += '<div class="sessionPosterItem posterItem squarePosterItem" id="' + itemId + '" style="vertical-align:top;margin-bottom:2em;">';
+            html += '<tr class="trSession" id="' + rowId + '">';
+
+            html += '<td class="clientType" style="text-align:center;">';
+            html += DashboardPage.getClientType(connection);
+            html += '</td>';
+
+            html += '<td>';
+
+            html += '<div>';
+            if (deviceId == connection.DeviceId) {
+                html += connection.Client;
+            } else {
+                html += '<a href="#" onclick="RemoteControl.showMenu({sessionId:\'' + connection.Id + '\'});">' + connection.Client + '</a>';
+            }
+            html += '</div>';
+
+            html += '<div>' + connection.ApplicationVersion + '</div>';
+            html += '<div>' + connection.DeviceName + '</div>';
+
+            html += '<div class="username">';
+            html += DashboardPage.getUsersHtml(connection);
+            html += '</div>';
+
+            html += '</td>';
 
             var nowPlayingItem = connection.NowPlayingItem;
-            var imageUrl = DashboardPage.getNowPlayingImage(nowPlayingItem);
 
-            var style = "";
+            html += '<td>';
-
-            if (imageUrl) {
-                style += 'background-image:url(\'' + imageUrl + '\');';
-            }
-
-            var onclick = connection.DeviceId == deviceId ? '' : ' onclick="RemoteControl.showMenu({sessionId:\'' + connection.Id + '\'});"';
-
-            html += '<a' + onclick + ' data-imageurl="' + imageUrl + '" href="#" class="posterItemImage coveredPosterItemImage" style="' + style + 'background-color:#f2f2f2;display:block;">';
-
-            var defaultTextStyle = '';
-
-            if (nowPlayingItem) {
-                defaultTextStyle = "display:none;";
-            }
-            html += '<div class="posterItemDefaultText" style="' + defaultTextStyle + '">Nothing currently playing</div>';
-
-            html += '<div class="posterItemTextOverlay">';
-
-            var itemNameStyle='';
-
-            if (!nowPlayingItem) {
-                itemNameStyle = "display:none;";
-            }
-            html += '<div class="posterItemText posterItemName" style="' + itemNameStyle + '">' + (nowPlayingItem ? nowPlayingItem.Name : '') + '</div>';
-
-            var progressStyle='';
-
-            if (!nowPlayingItem) {
-                progressStyle = "display:none;";
-            }
-            html += "<div class='posterItemText posterItemProgress' style='" + progressStyle + "'>";
-
-            html += '<progress class="itemProgressBar" min="0" max="100" value="' + DashboardPage.getPlaybackProgress(connection) + '" style="opacity:.9;"></progress>';
-            html += "</div>";
-            html += "</div>";
-
-            html += '<img src="' + DashboardPage.getClientImage(connection) + '" style="top:10px;left:10px;height:24px;position:absolute;opacity: .95;" />';
-
-            html += '</a>';
-
-            html += '<div class="sessionItemText">' + DashboardPage.getSessionItemText(connection) + '</div>';
-
-            //html += '<td class="clientType" style="text-align:center;">';
-            //html += DashboardPage.getClientType(connection);
-            //html += '</td>';
-
-            //html += '<td>';
-
-            //html += '<div>';
-
-            //if (deviceId == connection.DeviceId) {
-            //    html += connection.Client;
-            //} else {
-            //    html += '<a href="#" onclick="RemoteControl.showMenu({sessionId:\'' + connection.Id + '\'});">' + connection.Client + '</a>';
-            //}
-            //html += '</div>';
-
-            //html += '</td>';
-
-            //html += '<td class="nowPlayingImage">';
-            //html += DashboardPage.getNowPlayingImage(nowPlayingItem);
-            //html += '</td>';
-
-            //html += '<td class="nowPlayingText">';
-            //html += DashboardPage.getNowPlayingText(connection, nowPlayingItem);
-            //html += '</td>';
 
+            html += '<div class="nowPlayingImage">';
+            html += DashboardPage.getNowPlayingImage(nowPlayingItem);
             html += '</div>';
+
+            html += '<div class="clientNowPlayingText">';
+            html += DashboardPage.getNowPlayingText(connection, nowPlayingItem);
+            html += '</div>';
+
+            html += '</td>';
+
+
+            html += '</tr>';
+
         }
 
-        container.append(html).trigger('create');
+        table.append(html).trigger('create');
 
-        $('.deadSession', container).remove();
+        $('.deadSession', table).remove();
-    },
-
-    getPlaybackProgress: function (session) {
-
-        if (session.NowPlayingItem) {
-            if (session.NowPlayingItem.RunTimeTicks) {
-
-                var pct = (session.NowPlayingPositionTicks || 0) / session.NowPlayingItem.RunTimeTicks;
-
-                return pct * 100;
-            }
-        }
-
-        return 0;
     },
 
     getUsersHtml: function (session) {
 
-        var html = '<div>';
+        var html = '';
 
         if (session.UserId) {
-            html += session.UserName;
+            html += '<div>' + session.UserName + '</div>';
         }
 
         html += session.AdditionalUsers.map(function (currentSession) {
 
-            return ', ' + currentSession.UserName;
+            return '<div>' + currentSession.UserName + '</div>';
         });
 
-        html += '</div>';
-
         return html;
     },
 
-    updateSession: function (elem, session) {
+    updateSession: function (row, session) {
 
-        elem.removeClass('deadSession');
+        row.removeClass('deadSession');
 
-        $('.sessionItemText', elem).html(DashboardPage.getSessionItemText(session));
+        $('.username', row).html(DashboardPage.getUsersHtml(session));
 
         var nowPlayingItem = session.NowPlayingItem;
 
-        if (nowPlayingItem) {
+        $('.clientNowPlayingText', row).html(DashboardPage.getNowPlayingText(session, nowPlayingItem)).trigger('create');
-            $('.posterItemDefaultText', elem).hide();
-            $('.posterItemProgress', elem).show();
-            $('.posterItemName', elem).show().html(nowPlayingItem.Name);
 
-            $('progress', elem).val(DashboardPage.getPlaybackProgress(session));
+        var imageRow = $('.nowPlayingImage', row);
-        } else {
-            $('.posterItemDefaultText', elem).show();
-            $('.posterItemProgress', elem).hide();
-            $('.posterItemName', elem).hide().html('');
-        }
 
-        var imageUrl = DashboardPage.getNowPlayingImage(nowPlayingItem);
+        var image = $('img', imageRow)[0];
 
-        var image = $('.posterItemImage', elem)[0];
+        var nowPlayingItemId = nowPlayingItem ? nowPlayingItem.Id : null;
+        var nowPlayingItemImageTag = nowPlayingItem ? nowPlayingItem.PrimaryImageTag : null;
 
-        if (imageUrl && imageUrl != image.getAttribute('data-imageurl')) {
+        if (!image || image.getAttribute('data-itemid') != nowPlayingItemId || image.getAttribute('data-tag') != nowPlayingItemImageTag) {
-
+            imageRow.html(DashboardPage.getNowPlayingImage(nowPlayingItem));
-            image.style.backgroundImage = 'url(\'' + imageUrl + '\')';
-            image.setAttribute('data-imageurl', imageUrl);
-
-        } else if (!imageUrl && image.getAttribute('data-imageurl')) {
-
-            image.style.backgroundImage = null;
-            image.setAttribute('data-imageurl', '');
         }
     },
 
-    getSessionItemText: function (connection) {
+    getClientType: function (connection) {
-
-        var html = '';
-        
-        html += '<div class="posterItemText">';
-        html += DashboardPage.getUsersHtml(connection);
-        html += '</div>';
-
-        //html += '<div class="posterItemText">' + connection.Client + '</div>';
-        //html += '<div class="posterItemText">' + connection.ApplicationVersion + '</div>';
-
-        html += '<div class="posterItemText">' + connection.DeviceName + '</div>';
-
-        return html;
-    },
-
-    getClientImage: function (connection) {
 
         var clientLowered = connection.Client.toLowerCase();
 
@@ -345,81 +267,91 @@
                 imgUrl = 'css/images/clients/html5.png';
             }
 
-            return imgUrl;
+            return "<img src='" + imgUrl + "' alt='Dashboard' />";
         }
         if (clientLowered == "mb-classic") {
 
-            return "css/images/clients/mbc.png";
+            return "<img src='css/images/clients/mbc.png' alt='Media Browser Classic' />";
         }
         if (clientLowered == "media browser theater") {
 
-            return "css/images/clients/mb.png";
+            return "<img src='css/images/clients/mb.png' alt='Media Browser Theater' />";
         }
         if (clientLowered == "android") {
 
-            return "css/images/clients/android.png";
+            return "<img src='css/images/clients/android.png' alt='Android' />";
         }
         if (clientLowered == "roku") {
 
-            return "css/images/clients/roku.jpg";
+            return "<img src='css/images/clients/roku.jpg' alt='Roku' />";
         }
         if (clientLowered == "ios") {
 
-            return "css/images/clients/ios.png";
+            return "<img src='css/images/clients/ios.png' alt='iOS' />";
         }
         if (clientLowered == "windows rt") {
 
-            return "css/images/clients/windowsrt.png";
+            return "<img src='css/images/clients/windowsrt.png' alt='Windows RT' />";
         }
         if (clientLowered == "windows phone") {
 
-            return "css/images/clients/windowsphone.png";
+            return "<img src='css/images/clients/windowsphone.png' alt='Windows Phone' />";
         }
         if (clientLowered == "dlna") {
 
-            return "css/images/clients/dlna.png";
+            return "<img src='css/images/clients/dlna.png' alt='Dlna' />";
         }
         if (clientLowered == "mbkinect") {
 
-            return "css/images/clients/mbkinect.png";
+            return "<img src='css/images/clients/mbkinect.png' alt='MB Kinect' />";
         }
         if (clientLowered == "xbmc") {
 
-            return "css/images/clients/xbmc.png";
+            return "<img src='css/images/clients/xbmc.png' alt='Xbmc' />";
         }
 
-        return "css/images/clients/mb.png";
+        return connection.Client;
     },
 
     getNowPlayingImage: function (item) {
 
-        if (item && item.ThumbItemId) {
-            return ApiClient.getImageUrl(item.ThumbItemId, {
-                type: "Thumb",
-                height: 300,
-                tag: item.ThumbImageTag
-            });
-        }
-
-        if (item && item.BackdropItemId) {
-            return ApiClient.getImageUrl(item.BackdropItemId, {
-                type: "Backdrop",
-                height: 300,
-                tag: item.BackdropImageTag
-            });
-        }
-
         if (item && item.PrimaryImageTag) {
-            return ApiClient.getImageUrl(item.Id, {
+            var url = ApiClient.getImageUrl(item.Id, {
                 type: "Primary",
-                height: 300,
+                height: 100,
                 tag: item.PrimaryImageTag
             });
+
+            url += "&xxx=" + new Date().getTime();
+
+            return "<img data-itemid='" + item.Id + "' data-tag='" + item.PrimaryImageTag + "' class='clientNowPlayingImage' src='" + url + "' alt='" + item.Name + "' title='" + item.Name + "' />";
         }
 
         return "";
     },
 
+    getNowPlayingText: function (connection, item) {
+
+        var html = "";
+
+        if (item) {
+
+            html += "<div><a href='itemdetails.html?id=" + item.Id + "'>" + item.Name + "</a></div>";
+
+            html += "<div>";
+
+            if (item.RunTimeTicks) {
+                html += Dashboard.getDisplayTime(connection.NowPlayingPositionTicks || 0) + " / ";
+
+                html += Dashboard.getDisplayTime(item.RunTimeTicks);
+            }
+
+            html += "</div>";
+        }
+
+        return html;
+    },
+
     renderRunningTasks: function (dashboardInfo) {
 
         var page = $.mobile.activePage;

dashboard-ui/scripts/librarymenu.js

@@ -202,6 +202,15 @@
                 });
             });
         }
+    }).on('pageshow', ".libraryPage", function () {
+
+        var page = this;
+
+        var elem = $('.libraryViewNavInner .ui-btn-active:visible', page);
+
+        if (elem.length) {
+            elem[0].scrollIntoView();
+        }
     });
 
 })(window, document, jQuery);

dashboard-ui/scripts/livetvrecording.js

@@ -64,7 +64,7 @@
             ApiClient.sendWebSocketMessage("Context", vals.join('|'));
         }
 
-        $('.status', page).html('Status:   ' + item.Status);
+        $('.recordingStatus', page).html('Status:   ' + item.Status);
 
         Dashboard.getCurrentUser().done(function (user) {
 

dashboard-ui/scripts/livetvtimer.js

@@ -62,7 +62,7 @@
         $('#chkPrePaddingRequired', page).checked(item.IsPrePaddingRequired).checkboxradio('refresh');
         $('#chkPostPaddingRequired', page).checked(item.IsPostPaddingRequired).checkboxradio('refresh');
 
-        $('.status', page).html('Status:   ' + item.Status);
+        $('.timerStatus', page).html('Status:   ' + item.Status);
 
         Dashboard.hideLoadingMsg();
     }

dashboard-ui/scripts/movies.js

@@ -10,7 +10,8 @@
         IncludeItemTypes: "Movie",
         Recursive: true,
         Fields: "PrimaryImageAspectRatio",
-        StartIndex: 0
+        StartIndex: 0,
+        CollapseBoxSetItems: true
     };
 
     function reloadItems(page) {