fixes #834 - Change view of TV Shows or Interface for plugins

dashboard-ui/css/icons.css

@@ -140,3 +140,16 @@
 .ui-nosvg .ui-icon-remote:after {
     background-image: url("images/icons/remote.png");
 }
+
+
+.ui-icon-ellipsis-v:after {
+    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%20Tiny%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11-tiny.dtd%22%3E%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22tiny%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%20500%20500%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20d%3D%22M107.143%20348.214v53.571q0%2011.161-7.813%2018.973t-18.973%207.813h-53.571q-11.161%200-18.973-7.813t-7.813-18.973v-53.571q0-11.161%207.813-18.973t18.973-7.813h53.571q11.161%200%2018.973%207.813t7.813%2018.973zM107.143%20205.357v53.571q0%2011.161-7.813%2018.973t-18.973%207.813h-53.571q-11.161%200-18.973-7.813t-7.813-18.973v-53.571q0-11.161%207.813-18.973t18.973-7.813h53.571q11.161%200%2018.973%207.813t7.813%2018.973zM107.143%2062.5v53.571q0%2011.161-7.813%2018.973t-18.973%207.813h-53.571q-11.161%200-18.973-7.813t-7.813-18.973v-53.571q0-11.161%207.813-18.973t18.973-7.813h53.571q11.161%200%2018.973%207.813t7.813%2018.973z%22%20fill%3D%22%23ffffff%22%20%2F%3E%3C%2Fsvg%3E");
+    background-repeat: no-repeat;
+    background-position: 9px 3px;
+}
+
+/* Fallback */
+.ui-nosvg .ui-icon-ellipsis-v:after {
+    background-image: url("images/icons/ellipsis-v.png");
+    background-repeat: no-repeat;
+}

dashboard-ui/css/librarybrowser.css

@@ -1247,3 +1247,37 @@ a.itemTag:hover {
         max-height: 500px;
     }
 }
+
+.itemsListview {
+    max-width: 800px;
+    margin: 0 auto!important;
+}
+
+    .itemsListview .ui-li-aside {
+        right: 1.5em;
+        font-weight: normal;
+        font-size: 13px;
+        font-family: "Open Sans";
+    }
+
+    .itemsListview .ui-li-count {
+        right: 1.2em;
+        top: 70%;
+        background: rgba(82, 181, 75, .8);
+        border: 0;
+    }
+
+.listviewImage {
+    width: 80px;
+    height: 80px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+}
+
+@media all and (max-width: 600px) {
+
+    .itemsListview .ui-li-aside {
+        display: none;
+    }
+}

dashboard-ui/movies.html

@@ -26,6 +26,7 @@
                             <option value="Thumb">${OptionThumb}</option>
                             <option value="Poster">${OptionPoster}</option>
                             <option value="Banner">${OptionBanner}</option>
+                            <option value="List">${OptionList}</option>
                             <option value="Timeline">${OptionTimeline}</option>
                         </select>
                     </div>

dashboard-ui/musicalbums.html

@@ -22,6 +22,7 @@
                     <div style="display: inline-block;">
                         <select data-mini="true" data-inline="true" id="selectView" name="selectView">
                             <option value="Poster">${OptionPoster}</option>
+                            <option value="List">${OptionList}</option>
                             <option value="Timeline">${OptionTimeline}</option>
                         </select>
                     </div>

dashboard-ui/scripts/itemdetailpage.js

@@ -40,7 +40,7 @@
 
         renderHeader(page, item, context);
 
-        LibraryBrowser.renderName(item, $('.itemName', page));
+        LibraryBrowser.renderName(item, $('.itemName', page), false, context);
         LibraryBrowser.renderParentName(item, $('.parentName', page));
 
         Dashboard.getCurrentUser().done(function (user) {

dashboard-ui/scripts/librarybrowser.js

@@ -493,6 +493,66 @@
 
         },
 
+        getListViewHtml: function (options) {
+
+            var outerHtml = "";
+
+            outerHtml += '<ul data-role="listview" data-inset="true" class="itemsListview">';
+
+            outerHtml += options.items.map(function (item) {
+
+                var html = '';
+
+                var href = LibraryBrowser.getHref(item, options.context);
+                html += '<li class="ui-li-has-thumb"><a href="' + href + '">';
+
+                var imgUrl;
+
+                if (item.ImageTags.Primary) {
+
+                    imgUrl = ApiClient.getScaledImageUrl(item.Id, {
+                        width: 80,
+                        tag: item.ImageTags.Primary,
+                        type: "Primary",
+                        index: 0
+                    });
+
+                }
+                if (imgUrl) {
+                    html += '<div class="listviewImage ui-li-thumb" style="background-image:url(\'' + imgUrl + '\');"></div>';
+                }
+
+                html += '<h3>';
+                html += LibraryBrowser.getPosterViewDisplayName(item);
+                html += '</h3>';
+
+                html += '<p>';
+                html += LibraryBrowser.getMiscInfoHtml(item);
+                html += '</p>';
+
+                html += '<div class="ui-li-aside">';
+                html += LibraryBrowser.getRatingHtml(item, false);
+                html += '</div>';
+
+                if (item.UserData.UnplayedItemCount) {
+                    html += '<span class="ui-li-count">' + item.UserData.UnplayedItemCount + '</span>';
+                }
+                html += '</a>';
+
+                html += '<a href="#" data-icon="ellipsis-v">';
+                html += '</a>';
+
+                html += '</li>';
+
+                return html;
+
+            }).join('');
+
+            outerHtml += '</ul>';
+
+            return outerHtml;
+        },
+
         getPosterViewHtml: function (options) {
 
             var items = options.items;
@@ -774,7 +834,7 @@
 
                 if (options.showChildCountIndicator && item.ChildCount) {
                     cssClass += ' groupedPosterItem';
-                    
+
                     if (item.Type == 'Series') {
                         cssClass += ' unplayedGroupings';
                     }
@@ -1212,14 +1272,14 @@
 
         },
 
-        renderName: function (item, nameElem, linkToElement) {
+        renderName: function (item, nameElem, linkToElement, context) {
 
             var name = LibraryBrowser.getPosterViewDisplayName(item, false, false);
 
             Dashboard.setPageTitle(name);
 
             if (linkToElement) {
-                nameElem.html('<a class="detailPageParentLink" href="' + LibraryBrowser.getHref(item) + '">' + name + '</a>').trigger('create');
+                nameElem.html('<a class="detailPageParentLink" href="' + LibraryBrowser.getHref(item, context) + '">' + name + '</a>').trigger('create');
             } else {
                 nameElem.html(name);
             }

dashboard-ui/scripts/librarylist.js

@@ -290,46 +290,6 @@
         return false;
     }
 
-    function getGroupingHeaderHtml(item) {
-
-        var itemHtml = '';
-
-        var href = LibraryBrowser.getHref(item);
-        itemHtml += '<li><a href="' + href + '">';
-
-        var imgUrl = "css/images/media/chapterflyout.png";
-
-        if (item.ImageTags.Primary) {
-
-            itemHtml += '<img src="' + imgUrl + '" style="visibility:hidden;" />';
-            imgUrl = ApiClient.getScaledImageUrl(item.Id, {
-                width: 160,
-                tag: item.ImageTags.Primary,
-                type: "Primary",
-                index: 0
-            });
-            itemHtml += '<div class="videoChapterPopupImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
-
-        } else {
-            itemHtml += '<img src="' + imgUrl + '" />';
-        }
-
-
-        itemHtml += '<h3>';
-        itemHtml += LibraryBrowser.getPosterViewDisplayName(item);
-        itemHtml += '</h3>';
-
-        var date = parseISO8601Date(item.DateCreated, { toLocal: true });
-
-        itemHtml += '<p>';
-        itemHtml += Globalize.translate('LabelAddedOnDate').replace('{0}', date.toLocaleDateString());
-        itemHtml += '</p>';
-
-        itemHtml += '</a></li>';
-
-        return itemHtml;
-    }
-
     function onGroupedPosterItemClick(e) {
 
         var posterItem = this;
@@ -387,25 +347,23 @@
                 var itemHtml = '';
 
                 href = LibraryBrowser.getHref(latestItem);
-                itemHtml += '<li><a href="' + href + '">';
+                itemHtml += '<li class="ui-li-has-thumb"><a href="' + href + '">';
 
-                var imgUrl = "css/images/media/chapterflyout.png";
+                var imgUrl;
 
                 if (latestItem.ImageTags.Primary) {
 
-                    itemHtml += '<img src="' + imgUrl + '" style="visibility:hidden;" />';
                     imgUrl = ApiClient.getScaledImageUrl(latestItem.Id, {
-                        width: 160,
+                        width: 80,
                         tag: latestItem.ImageTags.Primary,
                         type: "Primary",
                         index: 0
                     });
-                    itemHtml += '<div class="videoChapterPopupImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
 
-                } else {
-                    itemHtml += '<img src="' + imgUrl + '" />';
                 }
-
+                if (imgUrl) {
+                    itemHtml += '<div class="listviewImage ui-li-thumb" style="background-image:url(\'' + imgUrl + '\');"></div>';
+                }
 
                 itemHtml += '<h3>';
                 itemHtml += LibraryBrowser.getPosterViewDisplayName(latestItem);

dashboard-ui/scripts/librarymenu.js

@@ -59,9 +59,9 @@
         $('.dashboardMenuButton').createHoverTouch().on('hovertouch', showDashboardMenu);
     }
 
-    function getItemHref(item) {
+    function getItemHref(item, context) {
 
-        return LibraryBrowser.getHref(item);
+        return LibraryBrowser.getHref(item, context);
     }
 
     function getViewsHtml() {

dashboard-ui/scripts/movies.js

@@ -55,6 +55,14 @@
                 });
                 $('.itemsContainer', page).removeClass('timelineItemsContainer');
             }
+            else if (view == "List") {
+
+                html = LibraryBrowser.getListViewHtml({
+                    items: result.Items,
+                    context: 'movies'
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
             else if (view == "Poster") {
                 html = LibraryBrowser.getPosterViewHtml({
                     items: result.Items,

dashboard-ui/scripts/musicalbums.js

@@ -44,6 +44,14 @@
                 });
                 $('.itemsContainer', page).removeClass('timelineItemsContainer');
             }
+            else if (view == "List") {
+
+                html = LibraryBrowser.getListViewHtml({
+                    items: result.Items,
+                    context: 'music'
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
             else if (view == "Timeline") {
                 html = LibraryBrowser.getPosterViewHtml({
                     items: result.Items,

dashboard-ui/scripts/tvshows.js

@@ -68,6 +68,14 @@
                 });
                 $('.itemsContainer', page).removeClass('timelineItemsContainer');
             }
+            else if (view == "List") {
+
+                html = LibraryBrowser.getListViewHtml({
+                    items: result.Items,
+                    context: 'tv'
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
             else if (view == "Timeline") {
                 
                 html = LibraryBrowser.getPosterViewHtml({

dashboard-ui/tvshows.html

@@ -24,6 +24,7 @@
                             <option value="Thumb">${OptionThumb}</option>
                             <option value="Poster">${OptionPoster}</option>
                             <option value="Banner">${OptionBanner}</option>
+                            <option value="List">${OptionList}</option>
                             <option value="Timeline">${OptionTimeline}</option>
                         </select>
                     </div>