refined collection editing

2025-03-30 19:56:21 +00:00 · 2014-03-07 23:20:31 -05:00 · 2014-03-07 23:20:31 -05:00 · 67f909cd87
commit 67f909cd87
parent e829482b7a
9 changed files with 86 additions and 299 deletions
--- a/dashboard-ui/collections.html
+++ b/dashboard-ui/collections.html
@ -30,8 +30,10 @@
                <div>
                    <label for="txtNewCollectionName">Name:</label>
                    <input type="text" id="txtNewCollectionName" required="required" />
+                    <div class="fieldDescription">Example: Star Wars Collection</div>
                </div>

+                <br />
                <div>
                    <label for="chkEnableInternetMetadata">Search the internet for artwork and metadata</label>
                    <input type="checkbox" id="chkEnableInternetMetadata" data-mini="true" />
--- a/dashboard-ui/css/posteritem.css
+++ b/dashboard-ui/css/posteritem.css
@ -1,5 +1,5 @@
 .posterItem {
-    margin: 5px;
+    margin: 4px 5px;
    text-shadow: none;
    font-weight: normal!important;
    display: inline-block;
@ -132,11 +132,11 @@
 }

 .squarePosterItem {
-    width: 142px;
+    width: 148px;
 }

    .squarePosterItem .posterItemImage {
-        height: 142px;
+        height: 148px;
    }

 .storeReviewCount {
@ -145,11 +145,11 @@


 .backdropPosterItem {
-    width: 142px;
+    width: 148px;
 }

    .backdropPosterItem .posterItemImage {
-        height: 79.875px;
+        height: 83.25px;
    }

 .smallBackdropPosterItem {
@ -161,11 +161,11 @@
    }

 .portraitPosterItem {
-    width: 90px;
+    width: 96px;
 }

    .portraitPosterItem .posterItemImage {
-        height: 135px;
+        height: 144px;
    }

 .posterItemProgress .itemProgressBar {
@ -194,19 +194,19 @@
@media all and (min-width: 540px) {

    .backdropPosterItem {
-        width: 260px;
+        width: 266px;
    }

        .backdropPosterItem .posterItemImage {
-            height: 146.25px;
+            height: 149.625px;
        }

    .smallBackdropPosterItem {
-        width: 184px;
+        width: 180px;
    }

        .smallBackdropPosterItem .posterItemImage {
-            height: 103.5px;
+            height: 101.25px;
        }
 }

@ -214,55 +214,32 @@


    .squarePosterItem {
-        width: 164px;
+        width: 170px;
    }

        .squarePosterItem .posterItemImage {
-            height: 164px;
+            height: 170px;
        }

    .portraitPosterItem {
-        width: 122px;
+        width: 128px;
    }

        .portraitPosterItem .posterItemImage {
-            height: 183px;
+            height: 192px;
        }
 }

@media all and (min-width: 650px) {

    .backdropPosterItem {
-        width: 276px;
+        width: 282px;
    }

        .backdropPosterItem .posterItemImage {
-            height: 155.25px;
+            height: 158.625px;
        }

-    .smallBackdropPosterItem {
-        width: 196px;
-    }
-
-        .smallBackdropPosterItem .posterItemImage {
-            height: 110.25px;
-        }
-}
-
-@media all and (min-width: 750px) {
-
-    .portraitPosterItem {
-        width: 112px;
-    }
-
-        .portraitPosterItem .posterItemImage {
-            height: 168px;
-        }
-}
-
-@media all and (min-width: 1000px) {
-
-
    .smallBackdropPosterItem {
        width: 202px;
    }
@ -272,22 +249,37 @@
        }
 }

-@media all and (min-width: 1200px) {
-
-    .backdropPosterItem {
-        width: 276px;
-    }
-
-        .backdropPosterItem .posterItemImage {
-            height: 155.25px;
-        }
+@media all and (min-width: 750px) {

    .portraitPosterItem {
-        width: 138px;
+        width: 118px;
    }

        .portraitPosterItem .posterItemImage {
-            height: 207px;
+            height: 177px;
+        }
+}
+
+@media all and (min-width: 1000px) {
+
+
+    .smallBackdropPosterItem {
+        width: 208px;
+    }
+
+        .smallBackdropPosterItem .posterItemImage {
+            height: 117px;
+        }
+}
+
+@media all and (min-width: 1200px) {
+
+    .portraitPosterItem {
+        width: 144px;
+    }
+
+        .portraitPosterItem .posterItemImage {
+            height: 216px;
        }

    .storeReviewCount {
@ -298,19 +290,19 @@
@media all and (min-width: 1440px) {

    .squarePosterItem {
-        width: 174px;
+        width: 180px;
    }

        .squarePosterItem .posterItemImage {
-            height: 174px;
+            height: 180px;
        }

    .backdropPosterItem {
-        width: 292px;
+        width: 298px;
    }

        .backdropPosterItem .posterItemImage {
-            height: 164.25px;
+            height: 167.625px;
        }
 }

@ -325,10 +317,10 @@
        }

    .squarePosterItem {
-        width: 184px;
+        width: 190px;
    }

        .squarePosterItem .posterItemImage {
-            height: 184px;
+            height: 190px;
        }
 }
--- a/dashboard-ui/editcollectionitems.html
+++ b/dashboard-ui/editcollectionitems.html
@ -59,7 +59,7 @@
                        </button>
                    </div>

-                    <div class="collectionItemSearchResults">
+                    <div class="collectionItemSearchResults" style="min-height:100px;">
                    </div>

                    <button id="btnAddItems" type="button" data-icon="plus" data-mini="true">
--- a/dashboard-ui/scripts/editcollectionitems.js
+++ b/dashboard-ui/scripts/editcollectionitems.js
@ -48,7 +48,9 @@

        html += '<div style="text-align:center;margin-top:4px;max-width:100px;overflow:hidden;height: 32px;">' + item.Name + '</div>';

+        if (item.ParentId != currentItem.Id) {
            html += '<label for="chkRemove' + item.Id + '">Remove</label><input id="chkRemove' + item.Id + '" class="chkRemoveItem" type="checkbox" data-itemid="' + item.Id + '" data-mini="true" />';
+        }

        html += '</div>';

@ -138,7 +140,15 @@

    function renderSearchResults(page, items) {

-        var html = items.map(getSearchResultHtml).join('');
+        var existingIds = $('.chkRemoveItem', page).get().map(function (c) {
+            return c.getAttribute('data-itemid');
+        });
+
+        var html = items.filter(function (i) {
+
+            return existingIds.indexOf(i.ItemId) == -1;
+
+        }).map(getSearchResultHtml).join('');

        var elem = $('.collectionItemSearchResults', page).html(html).trigger('create');

--- a/dashboard-ui/scripts/itembynamedetailpage.js
+++ b/dashboard-ui/scripts/itembynamedetailpage.js
@ -477,10 +477,11 @@
            }
            else {

-                html += LibraryBrowser.getPosterDetailViewHtml({
+                html = LibraryBrowser.getPosterViewHtml({
                    items: result.Items,
-                    preferBackdrop: shape == "backdrop",
-                    shape: shape
+                    shape: "square",
+                    useAverageAspectRatio: true,
+                    showTitle: true
                });
            }

--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@ -577,13 +577,7 @@

            } else {

-                var shape = "smallPoster";
-
-                if (item.Type == "Season") {
-                    shape = "smallBackdrop";
-                }
-
-                var html;
+                var html = '';

                if (item.Type == "Series" || item.Type == "BoxSet") {
                    html = LibraryBrowser.getPosterViewHtml({
@ -613,15 +607,7 @@
                        centerText: true
                    });
                }
-                else {
-                    html = LibraryBrowser.getPosterDetailViewHtml({
-                        items: result.Items,
-                        useAverageAspectRatio: true,
-                        shape: shape,
-                        showParentName: false,
-                        displayAsSpecial: item.Type == "Season" && item.IndexNumber
-                    });
-                }
+

                $('#childrenContent', page).html(html).createPosterItemHoverMenu();

--- a/dashboard-ui/scripts/itemlistpage.js
+++ b/dashboard-ui/scripts/itemlistpage.js
@ -34,14 +34,23 @@
            $('.viewSummary', page).html(LibraryBrowser.getViewSummaryHtml(query, checkSortOption)).trigger('create');

            if (view == "Backdrop") {
-                html += LibraryBrowser.getPosterDetailViewHtml({
+
+                html = LibraryBrowser.getPosterViewHtml({
                    items: result.Items,
+                    shape: "smallBackdrop",
+                    useAverageAspectRatio: true,
+                    showTitle: true,
+                    centerText: true,
                    preferBackdrop: true
                });
            }
            else if (view == "Poster") {
-                html += LibraryBrowser.getPosterDetailViewHtml({
-                    items: result.Items
+                html = LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "portrait",
+                    useAverageAspectRatio: true,
+                    showTitle: true,
+                    centerText: true
                });
            }

--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@ -71,219 +71,6 @@
            return "" + d.getFullYear() + formatDigit(d.getMonth() + 1) + formatDigit(d.getDate()) + formatDigit(d.getHours()) + formatDigit(d.getMinutes()) + formatDigit(d.getSeconds());
        },

-        getPosterDetailViewHtml: function (options) {
-
-            var items = options.items;
-            var currentIndexValue;
-
-            if (!options.shape) {
-                options.shape = options.preferBackdrop ? "backdrop" : "poster";
-            }
-
-            var html = '';
-
-            for (var i = 0, length = items.length; i < length; i++) {
-
-                var item = items[i];
-
-                if (options.timeline) {
-                    var year = item.ProductionYear || "Unknown Year";
-
-                    if (year != currentIndexValue) {
-
-                        html += '<h2 class="timelineHeader detailSectionHeader">' + year + '</h2>';
-                        currentIndexValue = year;
-                    }
-                }
-
-                var imgUrl = null;
-                var isDefault = false;
-                var height = null;
-
-                var cssClass = "tileItem";
-
-                if (options.shape) {
-                    cssClass += " " + options.shape + "TileItem";
-                }
-
-                html += '<a class="' + cssClass + '" href="' + LibraryBrowser.getHref(item, options.context) + '">';
-
-                if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
-
-                    imgUrl = LibraryBrowser.getImageUrl(item, 'Backdrop', 0, {
-                        height: 198,
-                        width: 352
-                    });
-
-                }
-                else if (options.preferBackdrop && item.ImageTags && item.ImageTags.Thumb) {
-
-                    imgUrl = ApiClient.getImageUrl(item.Id, {
-                        type: "Thumb",
-                        height: 198,
-                        width: 352,
-                        tag: item.ImageTags.Thumb
-                    });
-                }
-                else if (item.ImageTags && item.ImageTags.Primary) {
-
-                    height = 300;
-
-                    imgUrl = LibraryBrowser.getImageUrl(item, 'Primary', 0, {
-                        maxheight: height
-                    });
-
-                }
-                else if (item.AlbumId && item.AlbumPrimaryImageTag) {
-
-                    height = 300;
-
-                    imgUrl = ApiClient.getImageUrl(item.AlbumId, {
-                        type: "Primary",
-                        height: 100,
-                        tag: item.AlbumPrimaryImageTag
-                    });
-
-                }
-                else if (item.BackdropImageTags && item.BackdropImageTags.length) {
-
-                    imgUrl = LibraryBrowser.getImageUrl(item, 'Backdrop', 0, {
-                        height: 198,
-                        width: 352
-                    });
-                }
-                else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist") {
-
-                    imgUrl = "css/images/items/list/audio.png";
-                    isDefault = true;
-                }
-                else if (item.MediaType == "Video" || item.Type == "Season" || item.Type == "Series") {
-
-                    imgUrl = "css/images/items/list/video.png";
-                    isDefault = true;
-                }
-                else if (item.Type == "Person") {
-
-                    imgUrl = "css/images/items/list/person.png";
-                    isDefault = true;
-                }
-                else if (item.Type == "MusicArtist") {
-
-                    imgUrl = "css/images/items/list/audiocollection.png";
-                    isDefault = true;
-                }
-                else if (item.MediaType == "Game") {
-
-                    imgUrl = "css/images/items/list/game.png";
-                    isDefault = true;
-                }
-                else if (item.Type == "Studio" || item.Type == "Genre" || item.Type == "MusicGenre" || item.Type == "GameGenre") {
-
-                    if (options.context == "games") {
-
-                        imgUrl = "css/images/items/list/game.png";
-                    }
-                    else if (options.context == "music") {
-
-                        imgUrl = "css/images/items/list/audio.png";
-                    }
-                    else if (options.context == "movies") {
-
-                        imgUrl = "css/images/items/list/chapter.png";
-                    }
-                    else {
-                        imgUrl = "css/images/items/list/collection.png";
-                    }
-                    isDefault = true;
-                }
-                else {
-
-                    imgUrl = "css/images/items/list/collection.png";
-                    isDefault = true;
-                }
-
-                cssClass = isDefault ? "tileImage defaultTileImage" : "tileImage";
-
-                html += '<div class="' + cssClass + '" style="background-image: url(\'' + imgUrl + '\');"></div>';
-
-                html += '<div class="tileContent">';
-
-                if (options.showParentName !== false) {
-                    if (item.SeriesName || item.Album || item.AlbumArtist) {
-                        var seriesName = item.SeriesName || item.Album || item.AlbumArtist;
-                        html += '<div class="tileName">' + seriesName + '</div>';
-                    }
-                }
-
-                var name = LibraryBrowser.getPosterViewDisplayName(item, options.displayAsSpecial);
-
-                html += '<div class="tileName">' + name + '</div>';
-
-                if (item.CommunityRating || item.CriticRating) {
-                    html += '<p>' + LibraryBrowser.getRatingHtml(item) + '</p>';
-                }
-
-                var childText = null;
-
-                if (item.Type == "BoxSet") {
-
-                    childText = item.ChildCount == 1 ? "1 Movie" : item.ChildCount + " Movies";
-
-                    html += '<p class="itemMiscInfo">' + childText + '</p>';
-                }
-                else if (item.Type == "GameSystem") {
-
-                    childText = item.ChildCount == 1 ? "1 Game" : item.ChildCount + " Games";
-
-                    html += '<p class="itemMiscInfo">' + childText + '</p>';
-                }
-                else if (item.Type == "MusicAlbum") {
-
-                    //childText = item.ChildCount == 1 ? "1 Song" : item.ChildCount + " Songs";
-
-                    //html += '<p class="itemMiscInfo">' + childText + '</p>';
-                }
-                else if (item.Type == "Genre" || item.Type == "Studio" || item.Type == "Person" || item.Type == "MusicArtist" || item.Type == "MusicGenre" || item.Type == "GameGenre") {
-
-                    var itemCountHtml = LibraryBrowser.getItemCountsHtml(options, item);
-
-                    if (itemCountHtml) {
-                        html += '<p class="itemMiscInfo">' + itemCountHtml + '</p>';
-                    }
-                }
-                else if (item.Type == "Game") {
-
-                    html += '<p class="itemMiscInfo">' + (item.GameSystem) + '</p>';
-                }
-                else if (item.Type == "Episode") {
-
-                    // Skip it. Just clutter
-                }
-                else {
-                    html += '<p class="itemMiscInfo">' + LibraryBrowser.getMiscInfoHtml(item) + '</p>';
-                }
-
-                if (item.Type == "MusicAlbum") {
-
-                    html += '<p class="itemMiscInfo">' + LibraryBrowser.getMiscInfoHtml(item) + '</p>';
-                }
-
-                html += '<p class="userDataIcons">' + LibraryBrowser.getUserDataIconsHtml(item) + '</p>';
-
-                html += '</div>';
-
-                if (item.LocationType == "Offline" || item.LocationType == "Virtual") {
-                    html += LibraryBrowser.getOfflineIndicatorHtml(item);
-                } else {
-                    html += LibraryBrowser.getPlayedIndicatorHtml(item);
-                }
-
-                html += "</a>";
-            }
-
-            return html;
-        },
-
        getItemCountsHtml: function (options, item) {

            var counts = [];
--- a/dashboard-ui/scripts/plugincatalogpage.js
+++ b/dashboard-ui/scripts/plugincatalogpage.js
@ -94,7 +94,7 @@
            }
            html += "</div>";

-            html += "<div class='posterItemText' style='color:#000;font-weight:400;font-size:16px;'>";
+            html += "<div class='posterItemText' style='color:#000;font-weight:400;font-size:14px;'>";

            var installedPlugin = plugin.isApp ? null : installedPlugins.filter(function (ip) {
                return ip.Name == plugin.name;
@ -108,7 +108,7 @@
            
            html += "</div>";

-            html += "<div class='posterItemText packageReviewText' style='color:#000;font-weight:400;font-size:15px;'>";
+            html += "<div class='posterItemText packageReviewText' style='color:#000;font-weight:400;font-size:14px;'>";
            html += plugin.price > 0 ? "$" + plugin.price.toFixed(2) : "Free";
            html += Dashboard.getStoreRatingHtml(plugin.avgRating, plugin.id, plugin.name);