Merge pull request #8 from cvium/remove_premiere_fix_crashes

Remove premiere stuff and fix crashes caused by earlier removals

src/addplugin.html

@@ -35,44 +35,6 @@
                         </p>
                         <p id="nonServerMsg"></p>
                     </form>
-
-                    <div class="premiumPackage" style="display: none; margin-top: 1.5em;">
-                        <div>
-                            <form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
-                                <p id="regStatus">
-                                </p>
-                                <div class="supporterDescription">
-
-                                    <p>${MessagePluginRequiresSubscription}</p>
-
-                                    <p><a is="emby-linkbutton" class="button-link" href="https://github.com/jellyfin/jellyfin" target="_blank">${LinkLearnMoreAboutSubscription}</a></p>
-
-                                </div>
-                                <div class="premiumDescription">
-
-                                    <p>${MessagePremiumPluginRequiresMembership}</p>
-
-                                    <p><a is="emby-linkbutton" class="button-link" href="https://github.com/jellyfin/jellyfin" target="_blank">${LinkLearnMoreAboutSubscription}</a></p>
-                                </div>
-                                <div class="premiumHasPrice" style="display: none">
-                                    <p id="regPrice">
-                                    </p>
-                                    <input type="hidden" name="cmd" value="_xclick">
-                                    <input type="hidden" id="payPalEmail" name="business" value="mb_1358534950_biz@reedsplace.com">
-                                    <input type="hidden" name="currency_code" value="USD">
-                                    <input type="hidden" id="featureName" name="item_name" value="">
-                                    <input type="hidden" id="amount" name="amount" value="10">
-                                    <input type="hidden" id="featureId" name="item_number" value="">
-                                    <input type="hidden" name="notify_url" value="https://mb3admin.local/admin/service/services/ppipn.php">
-                                    <input type="hidden" name="return" id="paypalReturnUrl" value="#">
-                                    <button is="emby-button" type="submit" id="ppButton" class="raised block button-submit" style="background-color: #179BD7;color:#fff;">
-                                        <span>${RegisterWithPayPal}</span>
-                                    </button>
-
-                                </div>
-                            </form>
-                        </div>
-                    </div>
                 </div>
             </div>
             <br />

src/components/tvproviders/xmltv.js

@@ -1,197 +1,193 @@
-define(["jQuery", "registrationServices", "loading", "emby-checkbox", "emby-input", "listViewStyle", "paper-icon-button-light"], function ($__q, registrationServices, loading) {
+define(["jQuery", "loading", "emby-checkbox", "emby-input", "listViewStyle", "paper-icon-button-light"], function ($__q, loading) {
-  "use strict";
+    "use strict";
 
-  return function (page, providerId, options) {
+    return function (page, providerId, options) {
-    function getListingProvider(config, id) {
+        function getListingProvider(config, id) {
-      if (config && id) {
+            if (config && id) {
-        var result = config.ListingProviders.filter(function (i__w) {
+                var result = config.ListingProviders.filter(function (provider) {
-          return i__w.Id === id;
+                    return provider.Id === id;
-        })[0];
+                })[0];
 
-        if (result) {
+                if (result) {
-          return Promise.resolve(result);
+                    return Promise.resolve(result);
-        }
+                }
 
-        return getListingProvider();
+                return getListingProvider();
-      }
-
-      return ApiClient.getJSON(ApiClient.getUrl("LiveTv/ListingProviders/Default"));
-    }
-
-    function reload() {
-      loading.show();
-      ApiClient.getNamedConfiguration("livetv").then(function (config) {
-        getListingProvider(config, providerId).then(function (info) {
-          page.querySelector(".txtPath").value = info.Path || "";
-          page.querySelector(".txtKids").value = (info.KidsCategories || []).join("|");
-          page.querySelector(".txtNews").value = (info.NewsCategories || []).join("|");
-          page.querySelector(".txtSports").value = (info.SportsCategories || []).join("|");
-          page.querySelector(".txtMovies").value = (info.MovieCategories || []).join("|");
-          page.querySelector(".txtMoviePrefix").value = info.MoviePrefix || "";
-          page.querySelector(".txtUserAgent").value = info.UserAgent || "";
-          page.querySelector(".chkAllTuners").checked = info.EnableAllTuners;
-
-          if (page.querySelector(".chkAllTuners").checked) {
-            page.querySelector(".selectTunersSection").classList.add("hide");
-          } else {
-            page.querySelector(".selectTunersSection").classList.remove("hide");
-          }
-
-          refreshTunerDevices(page, info, config.TunerHosts);
-          loading.hide();
-        });
-      });
-    }
-
-    function getCategories(txtInput) {
-      var value = txtInput.value;
-
-      if (value) {
-        return value.split("|");
-      }
-
-      return [];
-    }
-
-    function submitListingsForm() {
-      loading.show();
-      var id = providerId;
-      ApiClient.getNamedConfiguration("livetv").then(function (config) {
-        var info = config.ListingProviders.filter(function (i__e) {
-          return i__e.Id === id;
-        })[0] || {};
-        info.Type = "xmltv";
-        info.Path = page.querySelector(".txtPath").value;
-        info.MoviePrefix = page.querySelector(".txtMoviePrefix").value || null;
-        info.UserAgent = page.querySelector(".txtUserAgent").value || null;
-        info.MovieCategories = getCategories(page.querySelector(".txtMovies"));
-        info.KidsCategories = getCategories(page.querySelector(".txtKids"));
-        info.NewsCategories = getCategories(page.querySelector(".txtNews"));
-        info.SportsCategories = getCategories(page.querySelector(".txtSports"));
-        info.EnableAllTuners = page.querySelector(".chkAllTuners").checked;
-        info.EnabledTuners = info.EnableAllTuners ? [] : $__q(".chkTuner", page).get().filter(function (i__r) {
-          return i__r.checked;
-        }).map(function (i__t) {
-          return i__t.getAttribute("data-id");
-        });
-        ApiClient.ajax({
-          type: "POST",
-          url: ApiClient.getUrl("LiveTv/ListingProviders", {
-            ValidateListings: true
-          }),
-          data: JSON.stringify(info),
-          contentType: "application/json"
-        }).then(function (result) {
-          loading.hide();
-
-          if (false !== options.showConfirmation) {
-            Dashboard.processServerConfigurationUpdateResult();
-          }
-
-          Events.trigger(self, "submitted");
-        }, function () {
-          loading.hide();
-          Dashboard.alert({
-            message: Globalize.translate("ErrorAddingXmlTvFile")
-          });
-        });
-      });
-    }
-
-    function getTunerName(providerId) {
-      switch (providerId = providerId.toLowerCase()) {
-        case "m3u":
-          return "M3U Playlist";
-
-        case "hdhomerun":
-          return "HDHomerun";
-
-        case "satip":
-          return "DVB";
-
-        default:
-          return "Unknown";
-      }
-    }
-
-    function refreshTunerDevices(page, providerInfo, devices) {
-      var html = "";
-
-      for (var i__y = 0, length = devices.length; i__y < length; i__y++) {
-        var device = devices[i__y];
-        html += '<div class="listItem">';
-        var enabledTuners = providerInfo.EnabledTuners || [];
-        var isChecked = providerInfo.EnableAllTuners || -1 !== enabledTuners.indexOf(device.Id);
-        var checkedAttribute = isChecked ? " checked" : "";
-        html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkTuner" data-id="' + device.Id + '" ' + checkedAttribute + "><span></span></label>";
-        html += '<div class="listItemBody two-line">';
-        html += '<div class="listItemBodyText">';
-        html += device.FriendlyName || getTunerName(device.Type);
-        html += "</div>";
-        html += '<div class="listItemBodyText secondary">';
-        html += device.Url;
-        html += "</div>";
-        html += "</div>";
-        html += "</div>";
-      }
-
-      page.querySelector(".tunerList").innerHTML = html;
-    }
-
-    function onSelectPathClick(e__u) {
-      var page = $__q(e__u.target).parents(".xmltvForm")[0];
-
-      require(["directorybrowser"], function (directoryBrowser) {
-        var picker = new directoryBrowser();
-        picker.show({
-          includeFiles: true,
-          callback: function (path) {
-            if (path) {
-              var txtPath = page.querySelector(".txtPath");
-              txtPath.value = path;
-              txtPath.focus();
             }
 
-            picker.close();
+            return ApiClient.getJSON(ApiClient.getUrl("LiveTv/ListingProviders/Default"));
-          }
-        });
-      });
-    }
-
-    var self = this;
-
-    self.submit = function () {
-      page.querySelector(".btnSubmitListings").click();
-    };
-
-    self.init = function () {
-      options = options || {};
-
-      if (false !== options.showCancelButton) {
-        page.querySelector(".btnCancel").classList.remove("hide");
-      } else {
-        page.querySelector(".btnCancel").classList.add("hide");
-      }
-
-      if (false !== options.showSubmitButton) {
-        page.querySelector(".btnSubmitListings").classList.remove("hide");
-      } else {
-        page.querySelector(".btnSubmitListings").classList.add("hide");
-      }
-
-      $__q("form", page).on("submit", function () {
-        submitListingsForm();
-        return false;
-      });
-      page.querySelector("#btnSelectPath").addEventListener("click", onSelectPathClick);
-      page.querySelector(".chkAllTuners").addEventListener("change", function (e__i) {
-        if (e__i.target.checked) {
-          page.querySelector(".selectTunersSection").classList.add("hide");
-        } else {
-          page.querySelector(".selectTunersSection").classList.remove("hide");
         }
-      });
+
-      reload();
+        function reload() {
+            loading.show();
+            ApiClient.getNamedConfiguration("livetv").then(function (config) {
+                getListingProvider(config, providerId).then(function (info) {
+                    page.querySelector(".txtPath").value = info.Path || "";
+                    page.querySelector(".txtKids").value = (info.KidsCategories || []).join("|");
+                    page.querySelector(".txtNews").value = (info.NewsCategories || []).join("|");
+                    page.querySelector(".txtSports").value = (info.SportsCategories || []).join("|");
+                    page.querySelector(".txtMovies").value = (info.MovieCategories || []).join("|");
+                    page.querySelector(".txtMoviePrefix").value = info.MoviePrefix || "";
+                    page.querySelector(".txtUserAgent").value = info.UserAgent || "";
+                    page.querySelector(".chkAllTuners").checked = info.EnableAllTuners;
+
+                    if (page.querySelector(".chkAllTuners").checked) {
+                        page.querySelector(".selectTunersSection").classList.add("hide");
+                    } else {
+                        page.querySelector(".selectTunersSection").classList.remove("hide");
+                    }
+
+                    refreshTunerDevices(page, info, config.TunerHosts);
+                    loading.hide();
+                });
+            });
+        }
+
+        function getCategories(txtInput) {
+            var value = txtInput.value;
+
+            if (value) {
+                return value.split("|");
+            }
+
+            return [];
+        }
+
+        function submitListingsForm() {
+            loading.show();
+            var id = providerId;
+            ApiClient.getNamedConfiguration("livetv").then(function (config) {
+                var info = config.ListingProviders.filter(function (provider) {
+                    return provider.Id === id;
+                })[0] || {};
+                info.Type = "xmltv";
+                info.Path = page.querySelector(".txtPath").value;
+                info.MoviePrefix = page.querySelector(".txtMoviePrefix").value || null;
+                info.UserAgent = page.querySelector(".txtUserAgent").value || null;
+                info.MovieCategories = getCategories(page.querySelector(".txtMovies"));
+                info.KidsCategories = getCategories(page.querySelector(".txtKids"));
+                info.NewsCategories = getCategories(page.querySelector(".txtNews"));
+                info.SportsCategories = getCategories(page.querySelector(".txtSports"));
+                info.EnableAllTuners = page.querySelector(".chkAllTuners").checked;
+                info.EnabledTuners = info.EnableAllTuners ? [] : $__q(".chkTuner", page).get().filter(function (tuner) {
+                    return tuner.checked;
+                }).map(function (tuner) {
+                    return tuner.getAttribute("data-id");
+                });
+                ApiClient.ajax({
+                    type: "POST",
+                    url: ApiClient.getUrl("LiveTv/ListingProviders", {
+                        ValidateListings: true
+                    }),
+                    data: JSON.stringify(info),
+                    contentType: "application/json"
+                }).then(function (result) {
+                    loading.hide();
+
+                    if (false !== options.showConfirmation) {
+                        Dashboard.processServerConfigurationUpdateResult();
+                    }
+
+                    Events.trigger(self, "submitted");
+                }, function () {
+                    loading.hide();
+                    Dashboard.alert({
+                        message: Globalize.translate("ErrorAddingXmlTvFile")
+                    });
+                });
+            });
+        }
+
+        function getTunerName(providerId) {
+            switch (providerId = providerId.toLowerCase()) {
+                case "m3u":
+                    return "M3U Playlist";
+                case "hdhomerun":
+                    return "HDHomerun";
+                case "satip":
+                    return "DVB";
+                default:
+                    return "Unknown";
+            }
+        }
+
+        function refreshTunerDevices(page, providerInfo, devices) {
+            var html = "";
+
+            for (var i = 0, length = devices.length; i < length; i++) {
+                var device = devices[i];
+                html += '<div class="listItem">';
+                var enabledTuners = providerInfo.EnabledTuners || [];
+                var isChecked = providerInfo.EnableAllTuners || -1 !== enabledTuners.indexOf(device.Id);
+                var checkedAttribute = isChecked ? " checked" : "";
+                html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkTuner" data-id="' + device.Id + '" ' + checkedAttribute + "><span></span></label>";
+                html += '<div class="listItemBody two-line">';
+                html += '<div class="listItemBodyText">';
+                html += device.FriendlyName || getTunerName(device.Type);
+                html += "</div>";
+                html += '<div class="listItemBodyText secondary">';
+                html += device.Url;
+                html += "</div>";
+                html += "</div>";
+                html += "</div>";
+            }
+
+            page.querySelector(".tunerList").innerHTML = html;
+        }
+
+        function onSelectPathClick(e__u) {
+            var page = $__q(e__u.target).parents(".xmltvForm")[0];
+
+            require(["directorybrowser"], function (directoryBrowser) {
+                var picker = new directoryBrowser();
+                picker.show({
+                    includeFiles: true,
+                    callback: function (path) {
+                        if (path) {
+                            var txtPath = page.querySelector(".txtPath");
+                            txtPath.value = path;
+                            txtPath.focus();
+                        }
+                        picker.close();
+                    }
+                });
+            });
+        }
+
+        var self = this;
+
+        self.submit = function () {
+            page.querySelector(".btnSubmitListings").click();
+        };
+
+        self.init = function () {
+            options = options || {};
+
+            if (false !== options.showCancelButton) {
+                page.querySelector(".btnCancel").classList.remove("hide");
+            } else {
+                page.querySelector(".btnCancel").classList.add("hide");
+            }
+
+            if (false !== options.showSubmitButton) {
+                page.querySelector(".btnSubmitListings").classList.remove("hide");
+            } else {
+                page.querySelector(".btnSubmitListings").classList.add("hide");
+            }
+
+            $__q("form", page).on("submit", function () {
+                submitListingsForm();
+                return false;
+            });
+            page.querySelector("#btnSelectPath").addEventListener("click", onSelectPathClick);
+            page.querySelector(".chkAllTuners").addEventListener("change", function (evt) {
+                if (evt.target.checked) {
+                    page.querySelector(".selectTunersSection").classList.add("hide");
+                } else {
+                    page.querySelector(".selectTunersSection").classList.remove("hide");
+                }
+            });
+            reload();
+        };
     };
-  };
 });

src/css/dashboard.css

@@ -176,8 +176,7 @@ div[data-role=controlgroup] a.ui-btn-active {
     flex-grow: 1
 }
 
-.activeSession:not(.playingSession) .sessionNowPlayingContent,
+.activeSession:not(.playingSession) .sessionNowPlayingContent {
-.supporterMembershipDisabled .tabSupporterMembership {
     display: none
 }
 

src/css/site.css

@@ -77,42 +77,12 @@ div[data-role=page] {
     padding-bottom: 2em !important
 }
 
-.supporterPromotionContainer {
-    margin: 0 0 2em
-}
-
-@media all and (min-width:80em) {
-    .supporterPromotionContainer {
-        margin: 0
-    }
-}
-
 @media all and (min-width:50em) {
 
     .readOnlyContent,
     form {
         max-width: 54em
     }
-
-    .supporterPromotionContainer {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: flex;
-        -webkit-box-orient: horizontal;
-        -webkit-box-direction: reverse;
-        -webkit-flex-direction: row-reverse;
-        flex-direction: row-reverse
-    }
-
-    .supporterPromotion {
-        text-align: center;
-        padding: 0 2em
-    }
-
-    .supporterPromotion button {
-        padding-left: 2em;
-        padding-right: 2em
-    }
 }
 
 .imageDropZone {

src/dashboard.html

@@ -84,7 +84,36 @@
                     <div class="paperList serverActivityItems" data-activitylimit="4" data-useractivity="false">
                     </div>
                 </div>
+                <div class="dashboardSection">
+                    <h3>${HeaderPaths}</h3>
+                    <div class="paperList">
+                        <div class="listItem listItem-border">
+                            <div class="listItemBody two-line">
+                                <div class="listItemBodyText secondary" style="margin:0;">${LabelCache}</div>
+                                <div class="listItemBodyText" id="cachePath"></div>
+                            </div>
+                        </div>
+                        <div class="listItem listItem-border">
+                            <div class="listItemBody two-line">
+                                <div class="listItemBodyText secondary" style="margin:0;">${LabelLogs}</div>
+                                <div class="listItemBodyText" id="logPath"></div>
+                            </div>
+                        </div>
+                        <div class="listItem listItem-border">
+                            <div class="listItemBody two-line">
+                                <div class="listItemBodyText secondary" style="margin:0;">${LabelMetadata}</div>
+                                <div class="listItemBodyText" id="metadataPath"></div>
+                            </div>
+                        </div>
+                        <div class="listItem listItem-border">
+                            <div class="listItemBody two-line">
+                                <div class="listItemBodyText secondary" style="margin:0;">${LabelTranscodingTemporaryFiles}</div>
+                                <div class="listItemBodyText" id="transcodingTemporaryPath"></div>
+                            </div>
+                        </div>
+                    </div>
 
+                </div>
             </div>
 
         </div>

src/livetv.html

@@ -1,13 +1,6 @@
 <div id="liveTvSuggestedPage" data-dom-cache="true" data-role="page" class="page libraryPage liveTvPage pageWithAbsoluteTabs withTabs" data-title="${HeaderLiveTv}" data-backdroptype="series,movie">
 
-    <div class="unlockContainer hide padded-left padded-right">
+    <div class="liveTvContainer">
-        <p class="unlockText" style="text-align:center;"></p>
-        <button is="emby-button" type="button" class="raised button-submit block btnUnlock">
-            <span>${HeaderBecomeProjectSupporter}</span>
-        </button>
-    </div>
-
-    <div class="hide liveTvContainer">
 
         <div class="pageTabContent" id="suggestionsTab" data-index="0">
             <div id="activePrograms" class="verticalSection">

src/scripts/livetvsuggested.js

@@ -1,197 +1,222 @@
-define(["layoutManager", "userSettings", "inputManager", "loading", "registrationServices", "globalize", "libraryBrowser", "mainTabsManager", "cardBuilder", "apphost", "imageLoader", "scrollStyles", "emby-itemscontainer", "emby-tabs", "emby-button"], function(layoutManager, userSettings, inputManager, loading, registrationServices, globalize, libraryBrowser, mainTabsManager, cardBuilder, appHost, imageLoader) {
+define(["layoutManager", "userSettings", "inputManager", "loading", "globalize", "libraryBrowser", "mainTabsManager", "cardBuilder", "apphost", "imageLoader", "scrollStyles", "emby-itemscontainer", "emby-tabs", "emby-button"], function (layoutManager, userSettings, inputManager, loading, globalize, libraryBrowser, mainTabsManager, cardBuilder, appHost, imageLoader) {
     "use strict";
 
     function enableScrollX() {
-        return !layoutManager.desktop
+        return !layoutManager.desktop;
     }
 
     function getBackdropShape() {
-        return enableScrollX() ? "overflowBackdrop" : "backdrop"
+        if (enableScrollX()) {
+            return "overflowBackdrop";
+        }
+        return "backdrop";
     }
 
     function getPortraitShape() {
-        return enableScrollX() ? "overflowPortrait" : "portrait"
+        if (enableScrollX()) {
+            return "overflowPortrait";
+        }
+        return "portrait";
     }
 
     function getLimit() {
-        return enableScrollX() ? 12 : 9
+        if (enableScrollX()) {
+            return 12;
+        }
+        return 9;
     }
 
     function loadRecommendedPrograms(page) {
         loading.show();
         var limit = getLimit();
-        enableScrollX() && (limit *= 2), ApiClient.getLiveTvRecommendedPrograms({
+
+        if (enableScrollX()) {
+            limit *= 2;
+        }
+
+        ApiClient.getLiveTvRecommendedPrograms({
             userId: Dashboard.getCurrentUserId(),
-            IsAiring: !0,
+            IsAiring: true,
             limit: limit,
             ImageTypeLimit: 1,
             EnableImageTypes: "Primary,Thumb,Backdrop",
-            EnableTotalRecordCount: !1,
+            EnableTotalRecordCount: false,
             Fields: "ChannelInfo,PrimaryImageAspectRatio"
-        }).then(function(result) {
+        }).then(function (result) {
             renderItems(page, result.Items, "activeProgramItems", "play", {
-                showAirDateTime: !1,
+                showAirDateTime: false,
-                showAirEndTime: !0
+                showAirEndTime: true
-            }), loading.hide()
+            });
-        })
+            loading.hide();
+        });
     }
 
     function reload(page, enableFullRender) {
-        enableFullRender && (loadRecommendedPrograms(page), ApiClient.getLiveTvPrograms({
+        if (enableFullRender) {
-            userId: Dashboard.getCurrentUserId(),
+            loadRecommendedPrograms(page);
-            HasAired: !1,
+            ApiClient.getLiveTvPrograms({
-            limit: getLimit(),
+                userId: Dashboard.getCurrentUserId(),
-            IsMovie: !1,
+                HasAired: false,
-            IsSports: !1,
+                limit: getLimit(),
-            IsKids: !1,
+                IsMovie: false,
-            IsNews: !1,
+                IsSports: false,
-            IsSeries: !0,
+                IsKids: false,
-            EnableTotalRecordCount: !1,
+                IsNews: false,
-            Fields: "ChannelInfo,PrimaryImageAspectRatio",
+                IsSeries: true,
-            EnableImageTypes: "Primary,Thumb"
+                EnableTotalRecordCount: false,
-        }).then(function(result) {
+                Fields: "ChannelInfo,PrimaryImageAspectRatio",
-            renderItems(page, result.Items, "upcomingEpisodeItems")
+                EnableImageTypes: "Primary,Thumb"
-        }), ApiClient.getLiveTvPrograms({
+            }).then(function (result) {
-            userId: Dashboard.getCurrentUserId(),
+                renderItems(page, result.Items, "upcomingEpisodeItems");
-            HasAired: !1,
+            });
-            limit: getLimit(),
+            ApiClient.getLiveTvPrograms({
-            IsMovie: !0,
+                userId: Dashboard.getCurrentUserId(),
-            EnableTotalRecordCount: !1,
+                HasAired: false,
-            Fields: "ChannelInfo",
+                limit: getLimit(),
-            EnableImageTypes: "Primary,Thumb"
+                IsMovie: true,
-        }).then(function(result) {
+                EnableTotalRecordCount: false,
-            renderItems(page, result.Items, "upcomingTvMovieItems", null, {
+                Fields: "ChannelInfo",
-                shape: getPortraitShape(),
+                EnableImageTypes: "Primary,Thumb"
-                preferThumb: null,
+            }).then(function (result) {
-                showParentTitle: !1
+                renderItems(page, result.Items, "upcomingTvMovieItems", null, {
-            })
+                    shape: getPortraitShape(),
-        }), ApiClient.getLiveTvPrograms({
+                    preferThumb: null,
-            userId: Dashboard.getCurrentUserId(),
+                    showParentTitle: false
-            HasAired: !1,
+                });
-            limit: getLimit(),
+            });
-            IsSports: !0,
+            ApiClient.getLiveTvPrograms({
-            EnableTotalRecordCount: !1,
+                userId: Dashboard.getCurrentUserId(),
-            Fields: "ChannelInfo,PrimaryImageAspectRatio",
+                HasAired: false,
-            EnableImageTypes: "Primary,Thumb"
+                limit: getLimit(),
-        }).then(function(result) {
+                IsSports: true,
-            renderItems(page, result.Items, "upcomingSportsItems")
+                EnableTotalRecordCount: false,
-        }), ApiClient.getLiveTvPrograms({
+                Fields: "ChannelInfo,PrimaryImageAspectRatio",
-            userId: Dashboard.getCurrentUserId(),
+                EnableImageTypes: "Primary,Thumb"
-            HasAired: !1,
+            }).then(function (result) {
-            limit: getLimit(),
+                renderItems(page, result.Items, "upcomingSportsItems");
-            IsKids: !0,
+            });
-            EnableTotalRecordCount: !1,
+            ApiClient.getLiveTvPrograms({
-            Fields: "ChannelInfo,PrimaryImageAspectRatio",
+                userId: Dashboard.getCurrentUserId(),
-            EnableImageTypes: "Primary,Thumb"
+                HasAired: false,
-        }).then(function(result) {
+                limit: getLimit(),
-            renderItems(page, result.Items, "upcomingKidsItems")
+                IsKids: true,
-        }), ApiClient.getLiveTvPrograms({
+                EnableTotalRecordCount: false,
-            userId: Dashboard.getCurrentUserId(),
+                Fields: "ChannelInfo,PrimaryImageAspectRatio",
-            HasAired: !1,
+                EnableImageTypes: "Primary,Thumb"
-            limit: getLimit(),
+            }).then(function (result) {
-            IsNews: !0,
+                renderItems(page, result.Items, "upcomingKidsItems");
-            EnableTotalRecordCount: !1,
+            });
-            Fields: "ChannelInfo,PrimaryImageAspectRatio",
+            ApiClient.getLiveTvPrograms({
-            EnableImageTypes: "Primary,Thumb"
+                userId: Dashboard.getCurrentUserId(),
-        }).then(function(result) {
+                HasAired: false,
-            renderItems(page, result.Items, "upcomingNewsItems", null, {
+                limit: getLimit(),
-                showParentTitleOrTitle: !0,
+                IsNews: true,
-                showTitle: !1,
+                EnableTotalRecordCount: false,
-                showParentTitle: !1
+                Fields: "ChannelInfo,PrimaryImageAspectRatio",
-            })
+                EnableImageTypes: "Primary,Thumb"
-        }))
+            }).then(function (result) {
+                renderItems(page, result.Items, "upcomingNewsItems", null, {
+                    showParentTitleOrTitle: true,
+                    showTitle: false,
+                    showParentTitle: false
+                });
+            });
+        }
     }
 
     function renderItems(page, items, sectionClass, overlayButton, cardOptions) {
         var html = cardBuilder.getCardsHtml(Object.assign({
-                items: items,
+            items: items,
-                preferThumb: "auto",
+            preferThumb: "auto",
-                inheritThumb: !1,
+            inheritThumb: false,
-                shape: enableScrollX() ? "autooverflow" : "auto",
+            shape: enableScrollX() ? "autooverflow" : "auto",
-                defaultShape: getBackdropShape(),
+            defaultShape: getBackdropShape(),
-                showParentTitle: !0,
+            showParentTitle: true,
-                showTitle: !0,
+            showTitle: true,
-                centerText: !0,
+            centerText: true,
-                coverImage: !0,
+            coverImage: true,
-                overlayText: !1,
+            overlayText: false,
-                lazy: !0,
+            lazy: true,
-                overlayPlayButton: "play" === overlayButton,
+            overlayPlayButton: "play" === overlayButton,
-                overlayMoreButton: "more" === overlayButton,
+            overlayMoreButton: "more" === overlayButton,
-                overlayInfoButton: "info" === overlayButton,
+            overlayInfoButton: "info" === overlayButton,
-                allowBottomPadding: !enableScrollX(),
+            allowBottomPadding: !enableScrollX(),
-                showAirTime: !0,
+            showAirTime: true,
-                showAirDateTime: !0
+            showAirDateTime: true
-            }, cardOptions || {})),
+        }, cardOptions || {}));
-            elem = page.querySelector("." + sectionClass);
+        var elem = page.querySelector("." + sectionClass);
-        elem.innerHTML = html, imageLoader.lazyChildren(elem)
+        elem.innerHTML = html;
+        imageLoader.lazyChildren(elem);
     }
 
     function getTabs() {
-        return [{
+        return [
-            name: globalize.translate("Programs")
+            { name: globalize.translate("Programs") },
-        }, {
+            { name: globalize.translate("TabGuide") },
-            name: globalize.translate("TabGuide")
+            { name: globalize.translate("TabChannels") },
-        }, {
+            { name: globalize.translate("TabRecordings") },
-            name: globalize.translate("TabChannels")
+            { name: globalize.translate("HeaderSchedule") },
-        }, {
+            { name: globalize.translate("TabSeries") },
-            name: globalize.translate("TabRecordings")
+            { name: globalize.translate("ButtonSearch"), cssClass: "searchTabButton" }
-        }, {
+        ];
-            name: globalize.translate("HeaderSchedule")
-        }, {
-            name: globalize.translate("TabSeries")
-        }, {
-            name: globalize.translate("ButtonSearch"),
-            cssClass: "searchTabButton"
-        }]
-    }
-
-    function validateUnlock(view, showDialog) {
-        registrationServices.validateFeature("livetv", {
-            showDialog: showDialog,
-            viewOnly: !0
-        }).then(function() {
-            view.querySelector(".liveTvContainer").classList.remove("hide"), view.querySelector(".unlockContainer").classList.add("hide")
-        }, function() {
-            view.querySelector(".liveTvContainer").classList.add("hide"), view.querySelector(".unlockContainer").classList.remove("hide")
-        })
     }
 
     function setScrollClasses(elem, scrollX) {
-        scrollX ? (elem.classList.add("hiddenScrollX"), layoutManager.tv && elem.classList.add("smoothScrollX"), elem.classList.add("scrollX"), elem.classList.remove("vertical-wrap")) : (elem.classList.remove("hiddenScrollX"), elem.classList.remove("smoothScrollX"), elem.classList.remove("scrollX"), elem.classList.add("vertical-wrap"))
+        if (scrollX) {
+            elem.classList.add("hiddenScrollX");
+
+            if (layoutManager.tv) {
+                elem.classList.add("smoothScrollX");
+            }
+
+            elem.classList.add("scrollX");
+            elem.classList.remove("vertical-wrap");
+        } else {
+            elem.classList.remove("hiddenScrollX");
+            elem.classList.remove("smoothScrollX");
+            elem.classList.remove("scrollX");
+            elem.classList.add("vertical-wrap");
+        }
     }
 
     function getDefaultTabIndex(folderId) {
-        switch (userSettings.get("landing-" + folderId)) {
+        if (userSettings.get("landing-" + folderId) === "guide") {
-            case "guide":
+            return 1;
-                return 1;
-            default:
-                return 0
         }
+        return 0;
     }
-    return function(view, params) {
+
+    return function (view, params) {
         function enableFullRender() {
-            return (new Date).getTime() - lastFullRender > 3e5
+            return new Date().getTime() - lastFullRender > 3e5;
         }
 
-        function onBeforeTabChange(e) {
+        function onBeforeTabChange(evt) {
-            preLoadTab(view, parseInt(e.detail.selectedTabIndex))
+            preLoadTab(view, parseInt(evt.detail.selectedTabIndex));
         }
 
-        function onTabChange(e) {
+        function onTabChange(evt) {
-            var previousTabController = tabControllers[parseInt(e.detail.previousIndex)];
+            var previousTabController = tabControllers[parseInt(evt.detail.previousIndex)];
-            previousTabController && previousTabController.onHide && previousTabController.onHide(), loadTab(view, parseInt(e.detail.selectedTabIndex))
+
+            if (previousTabController && previousTabController.onHide) {
+                previousTabController.onHide();
+            }
+
+            loadTab(view, parseInt(evt.detail.selectedTabIndex));
         }
 
         function getTabContainers() {
-            return view.querySelectorAll(".pageTabContent")
+            return view.querySelectorAll(".pageTabContent");
         }
 
         function initTabs() {
-            mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange)
+            mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange);
         }
 
         function getTabController(page, index, callback) {
             var depends = [];
+
+            // TODO int is a little hard to read
             switch (index) {
                 case 0:
                     break;
@@ -211,63 +236,141 @@ define(["layoutManager", "userSettings", "inputManager", "loading", "registratio
                     depends.push("scripts/livetvseriestimers");
                     break;
                 case 6:
-                    depends.push("scripts/searchtab")
+                    depends.push("scripts/searchtab");
             }
-            require(depends, function(controllerFactory) {
+
+            require(depends, function (controllerFactory) {
                 var tabContent;
-                0 == index && (tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"), self.tabContent = tabContent);
+
+                if (0 == index) {
+                    tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
+                    self.tabContent = tabContent;
+                }
+
                 var controller = tabControllers[index];
-                controller || (tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"), controller = 0 === index ? self : 6 === index ? new controllerFactory(view, tabContent, {
+
-                    collectionType: "livetv"
+                if (!controller) {
-                }) : new controllerFactory(view, params, tabContent), tabControllers[index] = controller, controller.initTab && controller.initTab()), callback(controller)
+                    tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']");
-            })
+                    if (0 === index) {
+                        controller = self;
+                    } else if (6 === index) {
+                        controller = new controllerFactory(view, tabContent, {
+                            collectionType: "livetv"
+                        });
+                    } else {
+                        controller = new controllerFactory(view, params, tabContent);
+                    }
+                    tabControllers[index] = controller;
+
+                    if (controller.initTab) {
+                        controller.initTab();
+                    }
+                }
+
+                callback(controller);
+            });
         }
 
         function preLoadTab(page, index) {
-            getTabController(page, index, function(controller) {
+            getTabController(page, index, function (controller) {
-                -1 == renderedTabs.indexOf(index) && controller.preRender && controller.preRender()
+                if (renderedTabs.indexOf(index) === -1 && controller.preRender) {
-            })
+                    controller.preRender();
+                }
+            });
         }
 
         function loadTab(page, index) {
-            currentTabIndex = index, getTabController(page, index, function(controller) {
+            currentTabIndex = index;
-                initialTabIndex = null, 1 === index ? document.body.classList.add("autoScrollY") : document.body.classList.remove("autoScrollY"), -1 == renderedTabs.indexOf(index) ? (1 === index && renderedTabs.push(index), controller.renderTab()) : controller.onShow && controller.onShow(), currentTabController = controller
+            getTabController(page, index, function (controller) {
-            })
+                initialTabIndex = null;
+
+                if (1 === index) {
+                    document.body.classList.add("autoScrollY");
+                } else {
+                    document.body.classList.remove("autoScrollY");
+                }
+
+                if (-1 == renderedTabs.indexOf(index)) {
+                    if (1 === index) {
+                        renderedTabs.push(index);
+                    }
+
+                    controller.renderTab();
+                } else if (controller.onShow) {
+                    controller.onShow();
+                }
+
+                currentTabController = controller;
+            });
         }
 
-        function onInputCommand(e) {
+        function onInputCommand(evt) {
-            switch (e.detail.command) {
+            if (evt.detail.command === "search") {
-                case "search":
+                evt.preventDefault();
-                    e.preventDefault(), Dashboard.navigate("search.html?collectionType=livetv")
+                Dashboard.navigate("search.html?collectionType=livetv");
             }
         }
-        var isViewRestored, self = this,
+
-            currentTabIndex = parseInt(params.tab || getDefaultTabIndex("livetv")),
+        var isViewRestored;
-            initialTabIndex = currentTabIndex,
+        var self = this;
-            lastFullRender = 0;
+        var currentTabIndex = parseInt(params.tab || getDefaultTabIndex("livetv"));
-        [].forEach.call(view.querySelectorAll(".sectionTitleTextButton-programs"), function(link) {
+        var initialTabIndex = currentTabIndex;
+        var lastFullRender = 0;
+        [].forEach.call(view.querySelectorAll(".sectionTitleTextButton-programs"), function (link) {
             var href = link.href;
-            href && (link.href = href + "&serverId=" + ApiClient.serverId())
+
-        }), view.querySelector(".unlockText").innerHTML = globalize.translate("sharedcomponents#LiveTvRequiresUnlock"), validateUnlock(view, !1), self.initTab = function() {
+            if (href) {
-            for (var tabContent = view.querySelector(".pageTabContent[data-index='0']"), containers = tabContent.querySelectorAll(".itemsContainer"), i = 0, length = containers.length; i < length; i++) setScrollClasses(containers[i], enableScrollX())
+                link.href = href + "&serverId=" + ApiClient.serverId();
-        }, self.renderTab = function() {
+            }
+        });
+
+        self.initTab = function () {
             var tabContent = view.querySelector(".pageTabContent[data-index='0']");
-            enableFullRender() ? (reload(tabContent, !0), lastFullRender = (new Date).getTime()) : reload(tabContent)
+            var containers = tabContent.querySelectorAll(".itemsContainer");
+
+            for (var i = 0, length = containers.length; i < length; i++) {
+                setScrollClasses(containers[i], enableScrollX());
+            }
         };
-        var currentTabController, tabControllers = [],
+
-            renderedTabs = [];
+        self.renderTab = function () {
-        view.querySelector(".btnUnlock").addEventListener("click", function() {
+            var tabContent = view.querySelector(".pageTabContent[data-index='0']");
-            validateUnlock(view, !0)
+
-        }), view.addEventListener("viewbeforeshow", function(e) {
+            if (enableFullRender()) {
-            isViewRestored = e.detail.isRestored, initTabs()
+                reload(tabContent, true);
-        }), view.addEventListener("viewshow", function(e) {
+                lastFullRender = new Date().getTime();
-            isViewRestored = e.detail.isRestored, isViewRestored || mainTabsManager.selectedTabIndex(initialTabIndex), inputManager.on(window, onInputCommand)
+            } else {
-        }), view.addEventListener("viewbeforehide", function(e) {
+                reload(tabContent);
-            currentTabController && currentTabController.onHide && currentTabController.onHide(), document.body.classList.remove("autoScrollY"), inputManager.off(window, onInputCommand)
+            }
-        }), view.addEventListener("viewdestroy", function(e) {
+        };
-            tabControllers.forEach(function(t) {
+
-                t.destroy && t.destroy()
+        var currentTabController;
-            })
+        var tabControllers = [];
-        })
+        var renderedTabs = [];
-    }
+        view.addEventListener("viewbeforeshow", function (evt) {
+            isViewRestored = evt.detail.isRestored;
+            initTabs();
+        });
+        view.addEventListener("viewshow", function (evt) {
+            isViewRestored = evt.detail.isRestored;
+            if (!isViewRestored) {
+                mainTabsManager.selectedTabIndex(initialTabIndex);
+            }
+            inputManager.on(window, onInputCommand);
+        });
+        view.addEventListener("viewbeforehide", function (e__u) {
+            if (currentTabController && currentTabController.onHide) {
+                currentTabController.onHide();
+            }
+            document.body.classList.remove("autoScrollY");
+            inputManager.off(window, onInputCommand);
+        });
+        view.addEventListener("viewdestroy", function (evt) {
+            tabControllers.forEach(function (tabController) {
+                if (tabController.destroy) {
+                    tabController.destroy();
+                }
+            });
+        });
+    };
 });

src/scripts/plugincatalogpage.js

@@ -1,78 +1,206 @@
-define(["loading", "libraryMenu", "globalize", "cardStyle", "emby-linkbutton", "emby-checkbox", "emby-select"], function(loading, libraryMenu, globalize) {
+define(["loading", "libraryMenu", "globalize", "cardStyle", "emby-linkbutton", "emby-checkbox", "emby-select"], function (loading, libraryMenu, globalize) {
     "use strict";
 
     function reloadList(page) {
-        loading.show(), query.IsAppStoreSafe = !0;
+        loading.show();
-        var promise1 = ApiClient.getAvailablePlugins(query),
+        query.IsAppStoreSafe = true;
-            promise2 = ApiClient.getInstalledPlugins();
+        var promise1 = ApiClient.getAvailablePlugins(query);
-        Promise.all([promise1, promise2]).then(function(responses) {
+        var promise2 = ApiClient.getInstalledPlugins();
+        Promise.all([promise1, promise2]).then(function (responses) {
             populateList({
                 catalogElement: page.querySelector("#pluginTiles"),
                 noItemsElement: page.querySelector("#noPlugins"),
                 availablePlugins: responses[0],
                 installedPlugins: responses[1]
-            })
+            });
-        })
+        });
     }
 
     function populateList(options) {
-        populateListInternal(options)
+        populateListInternal(options);
     }
 
     function getHeaderText(category) {
-        category.replace(" ", "").replace(" ", "");
+        category = category.replace(" ", "");
-        return "Channel" === category ? category = "Channels" : "Theme" === category ? category = "Themes" : "LiveTV" === category ? category = "HeaderLiveTV" : "ScreenSaver" === category && (category = "HeaderScreenSavers"), globalize.translate(category)
+
+        if ("Channel" === category) {
+            category = "Channels";
+        } else if ("Theme" === category) {
+            category = "Themes";
+        } else if ("LiveTV" === category) {
+            category = "HeaderLiveTV";
+        } else if ("ScreenSaver" === category) {
+            category = "HeaderScreenSavers";
+        }
+
+        return globalize.translate(category);
     }
 
     function isUserInstalledPlugin(plugin) {
-        return -1 === ["02528C96-F727-44D7-BE87-9EEF040758C3", "0277E613-3EC0-4360-A3DE-F8AF0AABB5E9", "4DCB591C-0FA2-4C5D-A7E5-DABE37164C8B"].indexOf(plugin.guid)
+        return -1 === ["02528C96-F727-44D7-BE87-9EEF040758C3", "0277E613-3EC0-4360-A3DE-F8AF0AABB5E9", "4DCB591C-0FA2-4C5D-A7E5-DABE37164C8B"].indexOf(plugin.guid);
     }
 
     function populateListInternal(options) {
-        var availablePlugins = options.availablePlugins,
+        var availablePlugins = options.availablePlugins;
-            installedPlugins = options.installedPlugins,
+        var installedPlugins = options.installedPlugins;
-            allPlugins = availablePlugins.filter(function(p) {
+        var allPlugins = availablePlugins.filter(function (plugin) {
-                return p.category = p.category || "General", p.categoryDisplayName = getHeaderText(p.category), (!options.categories || -1 != options.categories.indexOf(p.category)) && ((!options.targetSystem || p.targetSystem == options.targetSystem) && "UserInstalled" == p.type)
+            plugin.category = plugin.category || "General";
-            });
+            plugin.categoryDisplayName = getHeaderText(plugin.category);
-        availablePlugins = allPlugins.sort(function(a, b) {
+
-            var aName = a.category,
+            if (!options.categories || -1 != options.categories.indexOf(plugin.category)) {
-                bName = b.category;
+                if (!options.targetSystem || plugin.targetSystem == options.targetSystem) {
-            return aName > bName ? 1 : bName > aName ? -1 : (aName = a.name, bName = b.name, aName > bName ? 1 : bName > aName ? -1 : 0)
+                    return "UserInstalled" == plugin.type;
+                }
+
+                return false;
+            }
+
+            return false;
         });
-        var i, length, plugin, currentCategory, html = "";
+        availablePlugins = allPlugins.sort(function (a__e, b__r) {
+            var aName = a__e.category;
+            var bName = b__r.category;
+
+            if (aName > bName) {
+                return 1;
+            }
+
+            if (bName > aName) {
+                return -1;
+            }
+
+            aName = a__e.name;
+            bName = b__r.name;
+
+            if (aName > bName) {
+                return 1;
+            }
+
+            if (bName > aName) {
+                return -1;
+            }
+
+            return 0;
+        });
+        var i__q;
+        var length;
+        var plugin;
+        var currentCategory;
+        var html = "";
+
         if (!options.categories) {
-            currentCategory = globalize.translate("HeaderTopPlugins"), html += '<div class="verticalSection">', html += '<h2 class="sectionTitle sectionTitle-cards">' + currentCategory + "</h2>";
+            currentCategory = globalize.translate("HeaderTopPlugins");
-            var topPlugins = allPlugins.slice(0).sort(function(a, b) {
+            html += '<div class="verticalSection">';
-                if (a.installs > b.installs) return -1;
+            html += '<h2 class="sectionTitle sectionTitle-cards">' + currentCategory + "</h2>";
-                if (b.installs > a.installs) return 1;
+            var topPlugins = allPlugins.slice(0).sort(function (a__t, b__y) {
-                var aName = a.name,
+                if (a__t.installs > b__y.installs) {
-                    bName = b.name;
+                    return -1;
-                return aName > bName ? 1 : bName > aName ? -1 : 0
+                }
+
+                if (b__y.installs > a__t.installs) {
+                    return 1;
+                }
+
+                var aName = a__t.name;
+                var bName = b__y.name;
+
+                if (aName > bName) {
+                    return 1;
+                }
+
+                if (bName > aName) {
+                    return -1;
+                }
+
+                return 0;
             }).filter(isUserInstalledPlugin);
             html += '<div class="itemsContainer vertical-wrap">';
             var limit = screen.availWidth >= 1920 ? 15 : 12;
-            for (i = 0, length = Math.min(topPlugins.length, limit); i < length; i++) html += getPluginHtml(topPlugins[i], options, installedPlugins);
+
-            html += "</div>", html += "</div>"
+            for (i__q = 0, length = Math.min(topPlugins.length, limit); i__q < length; i__q++) {
+                html += getPluginHtml(topPlugins[i__q], options, installedPlugins);
+            }
+
+            html += "</div>";
+            html += "</div>";
         }
-        var hasOpenTag = !1;
+
-        for (currentCategory = null, !1 === options.showCategory && (html += '<div class="itemsContainer vertical-wrap">', hasOpenTag = !0), i = 0, length = availablePlugins.length; i < length; i++) {
+        var hasOpenTag = false;
-            plugin = availablePlugins[i];
+
+        for (currentCategory = null, false === options.showCategory && (html += '<div class="itemsContainer vertical-wrap">', hasOpenTag = true), i__q = 0, length = availablePlugins.length; i__q < length; i__q++) {
+            plugin = availablePlugins[i__q];
             var category = plugin.categoryDisplayName;
-            category != currentCategory && (!1 !== options.showCategory && (currentCategory && (hasOpenTag = !1, html += "</div>", html += "</div>"), html += '<div class="verticalSection">', html += '<h2 class="sectionTitle sectionTitle-cards">' + category + "</h2>", html += '<div class="itemsContainer vertical-wrap">', hasOpenTag = !0), currentCategory = category), html += getPluginHtml(plugin, options, installedPlugins)
+
+            if (category != currentCategory) {
+                if (false !== options.showCategory) {
+                    if (currentCategory) {
+                        hasOpenTag = false;
+                        html += "</div>";
+                        html += "</div>";
+                    }
+
+                    html += '<div class="verticalSection">';
+                    html += '<h2 class="sectionTitle sectionTitle-cards">' + category + "</h2>";
+                    html += '<div class="itemsContainer vertical-wrap">';
+                    hasOpenTag = true;
+                }
+
+                currentCategory = category;
+            }
+
+            html += getPluginHtml(plugin, options, installedPlugins);
         }
-        hasOpenTag && (html += "</div>", html += "</div>"), !availablePlugins.length && options.noItemsElement && options.noItemsElement.classList.add("hide"), options.catalogElement.innerHTML = html, loading.hide()
+
+        if (hasOpenTag) {
+            html += "</div>";
+            html += "</div>";
+        }
+
+        if (!availablePlugins.length && options.noItemsElement) {
+            options.noItemsElement.classList.add("hide");
+        }
+
+        options.catalogElement.innerHTML = html;
+        loading.hide();
     }
 
     function getPluginHtml(plugin, options, installedPlugins) {
-        var html = "",
+        var html = "";
-            href = plugin.externalUrl ? plugin.externalUrl : "addplugin.html?name=" + encodeURIComponent(plugin.name) + "&guid=" + plugin.guid;
+        var href = plugin.externalUrl ? plugin.externalUrl : "addplugin.html?name=" + encodeURIComponent(plugin.name) + "&guid=" + plugin.guid;
-        options.context && (href += "&context=" + options.context);
+
+        if (options.context) {
+            href += "&context=" + options.context;
+        }
+
         var target = plugin.externalUrl ? ' target="_blank"' : "";
-        html += "<div class='card backdropCard'>", html += '<div class="cardBox visualCardBox">', html += '<div class="cardScalable visualCardBox-cardScalable">', html += '<div class="cardPadder cardPadder-backdrop"></div>', html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + href + '"' + target + ">", plugin.thumbImage ? (html += '<div class="cardImage coveredImage" style="background-image:url(\'' + plugin.thumbImage + "');\">", html += "</div>") : html += '<i class="cardImageIcon md-icon">&#xE2C7;</i>', plugin.isPremium && (plugin.price > 0 ? html += "<div class='premiumBanner'><img src='css/images/supporter/premiumflag.png' /></div>" : html += "<div class='premiumBanner'><img src='css/images/supporter/supporterflag.png' /></div>"), html += "</a>", html += "</div>", html += '<div class="cardFooter">', html += "<div class='cardText'>", html += plugin.name, html += "</div>";
+        html += "<div class='card backdropCard'>";
-        var installedPlugin = plugin.isApp ? null : installedPlugins.filter(function(ip) {
+        html += '<div class="cardBox visualCardBox">';
-            return ip.Id == plugin.guid
+        html += '<div class="cardScalable visualCardBox-cardScalable">';
+        html += '<div class="cardPadder cardPadder-backdrop"></div>';
+        html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + href + '"' + target + ">";
+
+        if (plugin.thumbImage) {
+            html += '<div class="cardImage coveredImage" style="background-image:url(\'' + plugin.thumbImage + "');\">";
+            html += "</div>";
+        } else {
+            html += '<i class="cardImageIcon md-icon">&#xE2C7;</i>';
+        }
+
+        html += "</a>";
+        html += "</div>";
+        html += '<div class="cardFooter">';
+        html += "<div class='cardText'>";
+        html += plugin.name;
+        html += "</div>";
+        var installedPlugin = plugin.isApp ? null : installedPlugins.filter(function (ip) {
+            return ip.Id == plugin.guid;
         })[0];
-        return html += "<div class='cardText cardText-secondary'>", html += installedPlugin ? globalize.translate("LabelVersionInstalled").replace("{0}", installedPlugin.Version) : "&nbsp;", html += "</div>", html += "</div>", html += "</div>", html += "</div>"
+        html += "<div class='cardText cardText-secondary'>";
+        html += installedPlugin ? globalize.translate("LabelVersionInstalled").replace("{0}", installedPlugin.Version) : "&nbsp;";
+        html += "</div>";
+        html += "</div>";
+        html += "</div>";
+        return html += "</div>";
     }
 
     function getTabs() {
@@ -82,20 +210,24 @@ define(["loading", "libraryMenu", "globalize", "cardStyle", "emby-linkbutton", "
         }, {
             href: "plugincatalog.html",
             name: globalize.translate("TabCatalog")
-        }]
+        }];
     }
+
     var query = {
         TargetSystems: "Server",
-        IsAdult: !1
+        IsAdult: false
+    };
+    window.PluginCatalog = {
+        renderCatalog: populateList
+    };
+    return function (view, params) {
+        view.querySelector("#selectSystem").addEventListener("change", function () {
+            query.TargetSystems = this.value;
+            reloadList(view);
+        });
+        view.addEventListener("viewshow", function () {
+            libraryMenu.setTabs("plugins", 1, getTabs);
+            reloadList(this);
+        });
     };
-    return window.PluginCatalog = {
-            renderCatalog: populateList
-        },
-        function(view, params) {
-            view.querySelector("#selectSystem").addEventListener("change", function() {
-                query.TargetSystems = this.value, reloadList(view)
-            }), view.addEventListener("viewshow", function() {
-                libraryMenu.setTabs("plugins", 1, getTabs), reloadList(this)
-            })
-        }
 });