lazy load scripts

2024-11-17 19:08:18 -07:00 · 2015-05-16 15:09:02 -04:00 · 2015-05-16 15:09:02 -04:00 · 89e0515a15
commit 89e0515a15
parent 1f0760df09
31 changed files with 366 additions and 328 deletions
--- a/dashboard-ui/about.html
+++ b/dashboard-ui/about.html
@ -4,7 +4,7 @@
    <title>${TitleSupport}</title>
 </head>
 <body>
-    <div id="aboutPage" data-role="page" class="page type-interior">
+    <div id="aboutPage" data-role="page" class="page type-interior" data-require="scripts/aboutpage">

        <div data-role="content">
            <div class="content-primary">
--- a/dashboard-ui/addplugin.html
+++ b/dashboard-ui/addplugin.html
@ -4,7 +4,7 @@
    <title>${TitlePlugins}</title>
 </head>
 <body>
-    <div id="addPluginPage" data-role="page" class="page type-interior pluginConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Plugins">
+    <div id="addPluginPage" data-role="page" class="page type-interior pluginConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Plugins" data-require="scripts/registrationservices">

        <div data-role="content">
            <div class="content-primary">
@ -55,6 +55,7 @@
                            </form>

                            <div class="premiumPackage" style="display: none; margin-top: 1.5em;">
+                                <!--CORDOVA_EXCLUDE_START-->
                                <div>
                                    <form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
                                        <p id="regStatus">
@ -93,7 +94,7 @@
                                        </div>
                                    </form>
                                </div>
-
+                                <!--CORDOVA_EXCLUDE_END-->
                            </div>
                        </div>
                    </div>
--- a/dashboard-ui/channels.html
+++ b/dashboard-ui/channels.html
@ -4,7 +4,7 @@
    <title>Emby</title>
 </head>
 <body>
-    <div id="channelsPage" data-role="page" class="page libraryPage channelsPage" data-contextname="${HeaderChannels}">
+    <div id="channelsPage" data-role="page" class="page libraryPage channelsPage" data-contextname="${HeaderChannels}" data-require="scripts/channels">

        <div class="libraryViewNav scopedLibraryViewNav">
            <a href="channelslatest.html" class="latestChannelItemsTab">${TabLatest}</a>
--- a/dashboard-ui/css/card.css
+++ b/dashboard-ui/css/card.css
@ -89,19 +89,11 @@
    position: relative;
 }

-.backdropCard .cardPadder {
+.backdropCard .cardPadder, .smallBackdropCard .cardPadder, .overflowBackdropCard .cardPadder {
    padding-bottom: 56.25%;
 }

-.smallBackdropCard .cardPadder {
-    padding-bottom: 56.25%;
-}
-
-.squareCard .cardPadder {
-    padding-bottom: 100%;
-}
-
-.smallSquareCard .cardPadder {
+.squareCard .cardPadder, .overflowSquareCard .cardPadder {
    padding-bottom: 100%;
 }

@ -109,11 +101,7 @@
    padding-bottom: 75%;
 }

-.portraitCard .cardPadder {
-    padding-bottom: 150%;
-}
-
-.smallPortraitCard .cardPadder {
+.portraitCard .cardPadder, .overflowPortraitCard .cardPadder {
    padding-bottom: 150%;
 }

@ -277,10 +265,6 @@
    width: 50%;
 }

-.smallSquareCard {
-    width: 33.3334%;
-}
-
 .backdropCard {
    width: 50%;
 }
@ -293,8 +277,12 @@
    width: 33.3%;
 }

-.smallPortraitCard {
-    width: 33.334%;
+.overflowPortraitCard {
+    width: 40%;
+}
+
+.overflowBackdropCard {
+    width: 70%;
 }

 .cardProgress {
@ -307,6 +295,10 @@
        opacity: .8;
    }

+.overflowSquareCard {
+    width: 42%;
+}
+
@media all and (max-width: 1200px) {

    .portraitCard .cardOverlayInner {
@ -331,16 +323,20 @@

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

-    .smallSquareCard {
-        width: 25%;
-    }
-
    .portraitCard {
        width: 25%;
    }

-    .smallPortraitCard {
-        width: 25%;
+    .overflowPortraitCard {
+        width: 36%;
+    }
+
+    .overflowBackdropCard {
+        width: 60%;
+    }
+
+    .overflowSquareCard {
+        width: 30%;
    }
 }

@ -364,17 +360,9 @@
        width: 20%;
    }

-    .smallSquareCard {
-        width: 20%;
-    }
-
    .smallBackdropCard {
        width: 25%;
    }
-
-    .smallPortraitCard {
-        width: 20%;
-    }
 }


@ -388,8 +376,16 @@
        width: 20%;
    }

-    .smallPortraitCard {
-        width: 16.666666666666666666666666666667%;
+    .overflowPortraitCard {
+        width: 23%;
+    }
+
+    .overflowBackdropCard {
+        width: 40%;
+    }
+
+    .overflowSquareCard {
+        width: 22%;
    }
 }

@ -415,14 +411,6 @@
    .smallBackdropCard {
        width: 16.666666666666666666666666666667%;
    }
-
-    .smallSquareCard {
-        width: 16.666666666666666666666666666667%;
-    }
-
-    .smallPortraitCard {
-        width: 14.285714285714285714285714285714%;
-    }
 }


@ -439,10 +427,6 @@
    .smallBackdropCard {
        width: 14.285714285714285714285714285714%;
    }
-
-    .smallPortraitCard {
-        width: 12.5%;
-    }
 }


--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@ -208,7 +208,6 @@
    display: inline-block;
    background-size: cover;
    vertical-align: top;
-    cursor: pointer;
 }

 .starRating {
@ -1474,10 +1473,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
    display: none !important;
 }

-.homeFavoritesTabDisabled .homeFavoritesTab {
-    display: none !important;
-}
-
 .detailsMenu {
    width: 280px;
 }
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@ -166,6 +166,37 @@ h1 a:hover {
    margin: -10px 0 0 -10px;
 }

+.hiddenScrollX {
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: hidden;
+    white-space: nowrap;
+}
+
+.touch .hiddenScrollX {
+    -ms-overflow-style: none;
+    overflow: -moz-scrollbars-none;
+}
+
+    .touch .hiddenScrollX::-webkit-scrollbar {
+        height: 0 !important;
+        display: none;
+    }
+
+
+.hiddenScrollY {
+    overflow-y: scroll;
+    -ms-overflow-style: none;
+    overflow: -moz-scrollbars-none;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: hidden;
+}
+
+.hiddenScrollY::-webkit-scrollbar {
+    width: 0 !important;
+    display: none;
+}
+
 /**
 * Note: I have omitted any vendor-prefixes for clarity.
 * Adding them is left as an exercise for the reader.
--- a/dashboard-ui/moviesrecommended.html
+++ b/dashboard-ui/moviesrecommended.html
@ -18,7 +18,7 @@
        <div data-role="content">

            <div class="ehsContent">
-                <div id="resumableSection" style="display: none;">
+                <div id="resumableSection" style="display: none;" class="homePageSection">
                    <div>
                        <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1>
                        <a href="#" class="accentButton categorySyncButton" data-category="Resume"><i class="fa fa-cloud"></i>${ButtonSync}</a>
@ -28,15 +28,17 @@
                    </div>
                </div>

-                <div>
-                    <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestMovies}</h1>
-                    <a href="#" class="accentButton categorySyncButton" data-category="Latest"><i class="fa fa-cloud"></i>${ButtonSync}</a>
+                <div class="homePageSection">
+                    <div>
+                        <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestMovies}</h1>
+                        <a href="#" class="accentButton categorySyncButton" data-category="Latest"><i class="fa fa-cloud"></i>${ButtonSync}</a>
+                    </div>
+
+                    <div id="recentlyAddedItems" class="itemsContainer">
+                    </div>
                </div>

-                <div id="recentlyAddedItems" class="itemsContainer">
-                </div>
-
-                <div class="recommendations">
+                <div class="recommendations homePageSection">
                </div>
                <div class="noItemsMessage" style="display: none;">
                    <br />
--- a/dashboard-ui/musicalbumartists.html
+++ b/dashboard-ui/musicalbumartists.html
@ -4,7 +4,7 @@
    <title>Emby</title>
 </head>
 <body>
-    <div id="musicAlbumArtistsPage" data-role="page" class="page libraryPage">
+    <div id="musicAlbumArtistsPage" data-role="page" class="page libraryPage" data-require="scripts/musicalbumartists">
        <div class="libraryViewNav scopedLibraryViewNav">
            <a href="musicrecommended.html">${TabSuggestions}</a>
            <a href="songs.html" class="musicSongsTab">${TabSongs}</a>
--- a/dashboard-ui/musicalbums.html
+++ b/dashboard-ui/musicalbums.html
@ -4,7 +4,7 @@
    <title>Emby</title>
 </head>
 <body>
-    <div id="musicAlbumsPage" data-role="page" class="page libraryPage">
+    <div id="musicAlbumsPage" data-role="page" class="page libraryPage" data-require="scripts/musicalbums">
        <div class="libraryViewNav scopedLibraryViewNav">
            <a href="musicrecommended.html">${TabSuggestions}</a>
            <a href="songs.html" class="musicSongsTab">${TabSongs}</a>
--- a/dashboard-ui/musicartists.html
+++ b/dashboard-ui/musicartists.html
@ -4,7 +4,7 @@
    <title>Emby</title>
 </head>
 <body>
-    <div id="musicArtistsPage" data-role="page" class="page libraryPage">
+    <div id="musicArtistsPage" data-role="page" class="page libraryPage" data-require="scripts/musicartists">
        <div class="libraryViewNav scopedLibraryViewNav">
            <a href="musicrecommended.html">${TabSuggestions}</a>
            <a href="songs.html" class="musicSongsTab">${TabSongs}</a>
--- a/dashboard-ui/musicrecommended.html
+++ b/dashboard-ui/musicrecommended.html
@ -4,7 +4,7 @@
    <title>Emby</title>
 </head>
 <body>
-    <div id="musicRecommendedPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="musicartist">
+    <div id="musicRecommendedPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="musicartist" data-require="scripts/musicrecommended">
        <div class="libraryViewNav scopedLibraryViewNav">
            <a href="#" class="ui-btn-active">${TabSuggestions}</a>
            <a href="songs.html" class="musicSongsTab">${TabSongs}</a>
@ -16,7 +16,7 @@
        </div>
        <div data-role="content">
            <div class="ehsContent squareEhsContent">
-                
+
                <div class="homePageSection">
                    <h1 class="listHeader">${HeaderLatestMusic}</h1>

--- a/dashboard-ui/plugincatalog.html
+++ b/dashboard-ui/plugincatalog.html
@ -26,7 +26,7 @@
                            <label for="radopTheater">${PluginTabAppTheater}</label>
                        </fieldset>
                    </div>
-                    <div style="display:inline-block;vertical-align:bottom;">
+                    <div style="display:inline-block;vertical-align:bottom;" class="optionAdultContainer">
                        <div style="margin-left:1em;">
                            <label for="chkAdult">${OptionDisplayAdultContent}</label>
                            <input id="chkAdult" type="checkbox" data-mini="true" data-inline="true" />
--- a/dashboard-ui/scripts/aboutpage.js
+++ b/dashboard-ui/scripts/aboutpage.js
@ -1,6 +1,6 @@
 (function ($, document) {

-    $(document).on('pageshow', "#aboutPage", function () {
+    $(document).on('pageshown', "#aboutPage", function () {

        var page = this;
        
--- a/dashboard-ui/scripts/addpluginpage.js
+++ b/dashboard-ui/scripts/addpluginpage.js
@ -131,84 +131,7 @@

        $('#developer', page).html(pkg.owner);

-        if (pkg.isPremium) {
-            $('.premiumPackage', page).show();
-
-            // Fill in registration info
-            var regStatus = "";
-            if (pkg.isRegistered) {
-
-                regStatus += "<p style='color:green;'>";
-
-                regStatus += Globalize.translate('MessageFeatureIncludedWithSupporter');
-
-            } else {
-
-                var expDateTime = new Date(pkg.expDate).getTime();
-                var nowTime = new Date().getTime();
-
-                if (expDateTime <= nowTime) {
-                    regStatus += "<p style='color:red;'>";
-                    regStatus += Globalize.translate('MessageTrialExpired');
-                }
-                else if (expDateTime > new Date(1970, 1, 1).getTime()) {
-
-                    regStatus += "<p style='color:blue;'>";
-                    regStatus += Globalize.translate('MessageTrialWillExpireIn').replace('{0}', Math.round(expDateTime - nowTime) / (86400000));
-                }
-            }
-
-            regStatus += "</p>";
-            $('#regStatus', page).html(regStatus);
-
-            if (pluginSecurityInfo.IsMBSupporter) {
-                $('#regInfo', page).html(pkg.regInfo || "");
-
-                $('.premiumDescription', page).hide();
-                $('.supporterDescription', page).hide();
-
-                if (pkg.price > 0) {
-                    // Fill in PayPal info
-                    $('.premiumHasPrice', page).show();
-                    $('#featureId', page).val(pkg.featureId);
-                    $('#featureName', page).val(pkg.name);
-                    $('#amount', page).val(pkg.price);
-
-                    $('#regPrice', page).html("<h3>" + Globalize.translate('ValuePriceUSD').replace('{0}', "$" + pkg.price.toFixed(2)) + "</h3>");
-
-                    var url = "http://mb3admin.com/admin/service/user/getPayPalEmail?id=" + pkg.owner;
-
-                    $.getJSON(url).done(function (dev) {
-                        if (dev.payPalEmail) {
-                            $('#payPalEmail', page).val(dev.payPalEmail);
-
-                        } else {
-                            $('#ppButton', page).hide();
-                        }
-                    });
-                } else {
-                    // Supporter-only feature
-                    $('.premiumHasPrice', page).hide();
-                }
-            } else {
-
-                if (pkg.price) {
-                    $('.premiumDescription', page).show();
-                    $('.supporterDescription', page).hide();
-                    $('#regInfo', page).html("");
-
-                } else {
-                    $('.premiumDescription', page).hide();
-                    $('.supporterDescription', page).show();
-                    $('#regInfo', page).html("");
-                }
-
-                $('#ppButton', page).hide();
-            }
-
-        } else {
-            $('.premiumPackage', page).hide();
-        }
+        RegistrationServices.renderPluginInfo(page, pkg, pluginSecurityInfo);

        //Ratings and Reviews
        var ratingHtml = RatingHelpers.getStoreRatingHtml(pkg.avgRating, pkg.id, pkg.name);
@ -246,7 +169,7 @@
        Dashboard.hideLoadingMsg();
    }

-    $(document).on('pageshow', "#addPluginPage", function () {
+    $(document).on('pageshown', "#addPluginPage", function () {

        var page = this;

--- a/dashboard-ui/scripts/channels.js
+++ b/dashboard-ui/scripts/channels.js
@ -60,14 +60,12 @@

    }

-    $(document).on('pagebeforeshow', "#channelsPage", function () {
+    $(document).on('pageshown', "#channelsPage", function () {

        LibraryBrowser.loadSavedQueryValues('channels', query);

        reloadItems(this);

-    }).on('pageshow', "#channelsPage", function () {
-
        updateFilterControls(this);
    });

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

        var chapters = item.Chapters || [];

-        var maxWwidth = LibraryBrowser.getPosterViewInfo().thumbWidth;
+        var maxWidth = LibraryBrowser.getPosterViewInfo().backdropWidth;

        for (var i = 0, length = chapters.length; i < length; i++) {

@ -1212,7 +1212,7 @@
            if (chapter.ImageTag) {

                imgUrl = ApiClient.getScaledImageUrl(item.Id, {
-                    maxWidth: maxWwidth,
+                    maxWidth: maxWidth,
                    tag: chapter.ImageTag,
                    type: "Chapter",
                    index: i
@ -1411,7 +1411,7 @@

        var html = '';

-        var maxWwidth = LibraryBrowser.getPosterViewInfo().thumbWidth;
+        var maxWidth = LibraryBrowser.getPosterViewInfo().backdropWidth;

        for (var i = 0, length = items.length; i < length; i++) {

@ -1439,7 +1439,7 @@
            if (imageTags.Primary) {

                imgUrl = ApiClient.getScaledImageUrl(item.Id, {
-                    maxWidth: maxWwidth,
+                    maxWidth: maxWidth,
                    tag: imageTags.Primary,
                    type: "primary"
                });
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@ -961,6 +961,8 @@
            return screenWidth;
        },

+        shapes: ['square', 'portrait', 'banner', 'smallBackdrop', 'homePageSmallBackdrop', 'backdrop', 'overflowBackdrop', 'overflowPortrait', 'overflowSquare'],
+
        getPostersPerRow: function (screenWidth) {

            function getValue(shape) {
@ -973,14 +975,10 @@

            var info = {};

-            info.square = getValue('square');
-            info.smallSquare = getValue('smallSquare');
-            info.thumb = getValue('backdrop');
-            info.portrait = getValue('portrait');
-            info.smallPortrait = getValue('smallPortrait');
-            info.banner = getValue('banner');
-            info.smallThumb = getValue('smallBackdrop');
-
+            for (var i = 0, length = LibraryBrowser.shapes.length; i < length; i++) {
+                var currentShape = LibraryBrowser.shapes[i];
+                info[currentShape] = getValue(currentShape);
+            }
            return info;
        },

@ -1010,57 +1008,29 @@

            var imagesPerRow = LibraryBrowser.getPostersPerRow(screenWidth);

+            var result = {};
+            result.screenWidth = screenWidth;
+
            if (!AppInfo.hasLowImageBandwidth) {
                screenWidth *= 1.25;
            }

-            var thumbWidth = screenWidth / imagesPerRow.thumb;
-            var smallThumbWidth = screenWidth / imagesPerRow.smallThumb;
-            var posterWidth = screenWidth / imagesPerRow.portrait;
-            var smallPosterWidth = screenWidth / imagesPerRow.smallPortrait;
-            var squareSize = screenWidth / imagesPerRow.square;
-            var smallSquareSize = screenWidth / imagesPerRow.smallSquare;
-            var bannerWidth = screenWidth / imagesPerRow.banner;
+            var roundTo = 100;

-            if (!AppInfo.isTouchPreferred) {
+            for (var i = 0, length = LibraryBrowser.shapes.length; i < length; i++) {
+                var currentShape = LibraryBrowser.shapes[i];

-                var roundTo = 100;
+                var shapeWidth = screenWidth / imagesPerRow[currentShape];

-                thumbWidth = Math.round(thumbWidth / roundTo) * roundTo;
-                smallThumbWidth = Math.round(smallThumbWidth / roundTo) * roundTo;
-                posterWidth = Math.round(posterWidth / roundTo) * roundTo;
-                smallPosterWidth = Math.round(smallPosterWidth / roundTo) * roundTo;
-                squareSize = Math.round(squareSize / roundTo) * roundTo;
-                bannerWidth = Math.round(bannerWidth / roundTo) * roundTo;
+                if (!AppInfo.isTouchPreferred) {
+
+                    shapeWidth = Math.round(shapeWidth / roundTo) * roundTo;
+                }
+
+                result[currentShape + 'Width'] = Math.round(shapeWidth);
            }

-            var defaultPortait = 'portrait';
-            var defaultThumb = 'backdrop';
-            var defaultSquare = 'square';
-
-            if (AppInfo.hasLowImageBandwidth) {
-                defaultThumb = 'smallBackdrop';
-                defaultSquare = 'smallSquare';
-                defaultPortait = 'smallPortrait';
-            }
-
-            return {
-
-                defaultThumb: defaultThumb,
-                smallThumbWidth: Math.round(smallThumbWidth),
-                thumbWidth: Math.round(thumbWidth),
-
-                defaultPortait: defaultPortait,
-                posterWidth: Math.round(posterWidth),
-                smallPosterWidth: Math.round(smallPosterWidth),
-
-                defaultSquare: defaultSquare,
-                squareSize: Math.round(squareSize),
-                smallSquareSize: Math.round(smallSquareSize),
-
-                bannerWidth: Math.round(bannerWidth),
-                screenWidth: screenWidth
-            };
+            return result;
        },

        getPosterViewHtml: function (options) {
@ -1096,49 +1066,46 @@

            var posterInfo = LibraryBrowser.getPosterViewInfo();

-            var thumbWidth = posterInfo.thumbWidth;
-            var posterWidth = posterInfo.posterWidth;
-            var squareSize = posterInfo.squareSize;
+            var thumbWidth = posterInfo.backdropWidth;
+            var posterWidth = posterInfo.portraitWidth;
+            var squareSize = posterInfo.squareWidth;
            var bannerWidth = posterInfo.bannerWidth;

            if (isThumbAspectRatio) {
-                posterInfo.smallPosterWidth = posterInfo.smallThumbWidth;
                posterWidth = thumbWidth;
            }
            else if (isSquareAspectRatio) {
-                posterInfo.smallPosterWidth = posterInfo.smallSquareSize;
                posterWidth = squareSize;
            }

-            if (options.shape == 'backdrop' && posterInfo.defaultThumb == 'smallBackdrop') {
-                options.shape = 'smallBackdrop';
+            if (options.shape == 'overflowBackdrop') {
+                thumbWidth = posterInfo.overflowBackdropWidth;
            }
-
-            else if (options.shape == 'portrait' && posterInfo.defaultPortait == 'smallPortrait') {
-                options.shape = 'smallPortrait';
+            else if (options.shape == 'overflowPortrait') {
+                posterWidth = posterInfo.overflowPortraitWidth;
            }
-
-            else if (options.shape == 'square' && posterInfo.defaultSquare == 'smallSquare') {
-                options.shape = 'smallSquare';
+            else if (options.shape == 'overflowSquare') {
+                squareSize = posterInfo.overflowSquareWidth;
            }
-
-            if (options.shape == 'smallBackdrop') {
-                thumbWidth = posterInfo.smallThumbWidth;
+            else if (options.shape == 'smallBackdrop') {
+                thumbWidth = posterInfo.smallBackdropWidth;
            }
-            else if (options.shape == 'smallPortrait') {
-                posterWidth = posterInfo.smallPosterWidth;
-            }
-            else if (options.shape == 'smallSquare') {
-                squareSize = posterInfo.smallSquareSize;
+            else if (options.shape == 'homePageSmallBackdrop') {
+                thumbWidth = posterInfo.homePageSmallBackdropWidth;
+                posterWidth = posterInfo.homePageSmallBackdropWidth;
            }
            else if (options.shape == 'detailPagePortrait') {
                posterWidth = 200;
            }
+            else if (options.shape == 'detailPageSquare') {
+                posterWidth = 200;
+                squareSize = 200;
+            }
            else if (options.shape == 'detailPage169') {
                posterWidth = 320;
                thumbWidth = 320;
            }
-
+            
            var dateText;

            for (var i = 0, length = items.length; i < length; i++) {
@ -1679,7 +1646,7 @@
        },

        getListItemInfo: function (elem) {
-            
+
            var elemWithAttributes = elem;

            while (!elemWithAttributes.getAttribute('data-itemid')) {
--- a/dashboard-ui/scripts/mediaplayer-video.js
+++ b/dashboard-ui/scripts/mediaplayer-video.js
@ -407,7 +407,7 @@
            html += '</div>';

            if (item.Chapters && item.Chapters.length) {
-                html += '<div class="tabScenes nowPlayingTab" style="display:none;white-space:nowrap;margin-bottom:2em;">';
+                html += '<div class="tabScenes nowPlayingTab hiddenScrollX" style="display:none;white-space:nowrap;margin-bottom:2em;">';
                var chapterIndex = 0;
                html += item.Chapters.map(function (c) {

@ -454,7 +454,7 @@
            }

            if (item.People && item.People.length) {
-                html += '<div class="tabCast nowPlayingTab" style="display:none;white-space:nowrap;">';
+                html += '<div class="tabCast nowPlayingTab hiddenScrollX" style="display:none;white-space:nowrap;">';
                html += item.People.map(function (cast) {

                    var personHtml = '<div class="tileItem smallPosterTileItem" style="width:300px;">';
--- a/dashboard-ui/scripts/moviesrecommended.js
+++ b/dashboard-ui/scripts/moviesrecommended.js
@ -1,7 +1,7 @@
 (function ($, document) {

    function getView() {
-        
+
        if (AppInfo.hasLowImageBandwidth) {
            return 'PosterCard';
        }
@ -18,6 +18,18 @@
        return 'ThumbCard';
    }

+    function enableScrollX() {
+        return AppInfo.isTouchPreferred;
+    }
+
+    function getPortraitShape() {
+        return enableScrollX() ? 'overflowPortrait' : 'portrait';
+    }
+
+    function getThumbShape() {
+        return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
+    }
+
    function loadLatest(page, userId, parentId) {

        var limit = 18;
@ -45,7 +57,7 @@
                html += LibraryBrowser.getPosterViewHtml({
                    items: items,
                    lazy: true,
-                    shape: 'portrait',
+                    shape: getPortraitShape(),
                    overlayText: false,
                    showTitle: true,
                    showYear: true,
@ -55,10 +67,10 @@
                });

            } else if (view == 'Poster') {
-                
+
                html += LibraryBrowser.getPosterViewHtml({
                    items: items,
-                    shape: "portrait",
+                    shape: getPortraitShape(),
                    centerText: true,
                    lazy: true,
                    overlayText: true
@ -104,7 +116,7 @@
                html += LibraryBrowser.getPosterViewHtml({
                    items: result.Items,
                    preferThumb: true,
-                    shape: 'backdrop',
+                    shape: getThumbShape(),
                    showTitle: true,
                    showYear: true,
                    lazy: true,
@ -118,7 +130,7 @@
                html += LibraryBrowser.getPosterViewHtml({
                    items: result.Items,
                    preferThumb: true,
-                    shape: 'backdrop',
+                    shape: getThumbShape(),
                    overlayText: true,
                    showTitle: true,
                    lazy: true,
@ -155,9 +167,14 @@
                break;
        }

+        html += '<div class="homePageSection">';
        html += '<h1 class="listHeader">' + title + '</h1>';

-        html += '<div>';
+        if (enableScrollX()) {
+            html += '<div class="hiddenScrollX">';
+        } else {
+            html += '<div>';
+        }

        var view = getView();

@ -166,7 +183,7 @@
            html += LibraryBrowser.getPosterViewHtml({
                items: recommendation.Items,
                lazy: true,
-                shape: 'portrait',
+                shape: getPortraitShape(),
                overlayText: false,
                showTitle: true,
                showYear: true,
@ -179,7 +196,7 @@

            html += LibraryBrowser.getPosterViewHtml({
                items: recommendation.Items,
-                shape: "portrait",
+                shape: getPortraitShape(),
                centerText: true,
                lazy: true,
                overlayText: true,
@ -187,6 +204,7 @@
            });
        }
        html += '</div>';
+        html += '</div>';

        return html;
    }
@ -234,14 +252,19 @@
        var page = this;
        var userId = Dashboard.getCurrentUserId();

+        if (enableScrollX()) {
+            $('.itemsContainer', page).addClass('hiddenScrollX');
+        } else {
+            $('.itemsContainer', page).removeClass('hiddenScrollX');
+        }
+
        loadResume(page, userId, parentId);
        loadLatest(page, userId, parentId);

-        if (!AppInfo.hasLowImageBandwidth) {
+        if (AppInfo.enableMovieHomeSuggestions) {
            loadSuggestions(page, userId, parentId);
        }

    });

-
 })(jQuery, document);
--- a/dashboard-ui/scripts/musicalbumartists.js
+++ b/dashboard-ui/scripts/musicalbumartists.js
@ -141,7 +141,7 @@
        }
    }

-    $(document).on('pageinit', "#musicAlbumArtistsPage", function () {
+    $(document).on('pageinitdepends', "#musicAlbumArtistsPage", function () {

        var page = this;

@ -196,7 +196,7 @@
            reloadItems(page);
        });

-    }).on('pagebeforeshow', "#musicAlbumArtistsPage", function () {
+    }).on('pageshown', "#musicAlbumArtistsPage", function () {

        var page = this;
        query.ParentId = LibraryMenu.getTopParentId();
@ -223,8 +223,6 @@
            }
        });

-    }).on('pageshow', "#musicAlbumArtistsPage", function () {
-
        updateFilterControls(this);
    });

--- a/dashboard-ui/scripts/musicalbums.js
+++ b/dashboard-ui/scripts/musicalbums.js
@ -153,7 +153,7 @@
        }
    }

-    $(document).on('pageinit', "#musicAlbumsPage", function () {
+    $(document).on('pageinitdepends', "#musicAlbumsPage", function () {

        var page = this;

@ -248,7 +248,7 @@
            reloadItems(page);
        });

-    }).on('pagebeforeshow', "#musicAlbumsPage", function () {
+    }).on('pageshown', "#musicAlbumsPage", function () {

        query.ParentId = LibraryMenu.getTopParentId();

@ -274,27 +274,7 @@
            }
        });

-    }).on('pageshow', "#musicAlbumsPage", function () {
-
        updateFilterControls(this);
-
-        var updateScheduled = false;
-        function onscreen() {
-            var viewportBottom = $(window).scrollTop() + $(window).height();
-            return ($(document).height() - viewportBottom) < 100;
-        }
-        $(window).on('scroll', function () {
-            console.log('load');
-            if (!updateScheduled) {
-                setTimeout(function () {
-                    if (onscreen()) {
-                        console.log('load');
-                    }
-                    updateScheduled = false;
-                }, 500);
-                updateScheduled = true;
-            }
-        });
    });

 })(jQuery, document);
--- a/dashboard-ui/scripts/musicartists.js
+++ b/dashboard-ui/scripts/musicartists.js
@ -142,7 +142,7 @@
        }
    }

-    $(document).on('pageinit', "#musicArtistsPage", function () {
+    $(document).on('pageinitdepends', "#musicArtistsPage", function () {

        var page = this;

@ -197,7 +197,7 @@
            reloadItems(page);
        });

-    }).on('pagebeforeshow', "#musicArtistsPage", function () {
+    }).on('pageshown', "#musicArtistsPage", function () {

        var page = this;

@ -225,8 +225,6 @@
            }
        });

-    }).on('pageshow', "#musicArtistsPage", function () {
-
        updateFilterControls(this);
    });

--- a/dashboard-ui/scripts/musicrecommended.js
+++ b/dashboard-ui/scripts/musicrecommended.js
@ -1,12 +1,20 @@
 (function ($, document) {

    function itemsPerRow() {
-        
+
        var screenWidth = $(window).width();

        return screenWidth >= 1920 ? 9 : (screenWidth >= 1200 ? 12 : (screenWidth >= 1000 ? 10 : 8));
    }

+    function enableScrollX() {
+        return AppInfo.isTouchPreferred;
+    }
+
+    function getSquareShape() {
+        return enableScrollX() ? 'overflowSquare' : 'square';
+    }
+
    function loadLatest(page, parentId) {

        var userId = Dashboard.getCurrentUserId();
@ -27,7 +35,7 @@
                showUnplayedIndicator: false,
                showChildCountIndicator: true,
                showLatestItemsPopup: false,
-                shape: "square",
+                shape: getSquareShape(),
                showTitle: true,
                showParentTitle: true,
                lazy: true,
@ -65,7 +73,7 @@
            $('#recentlyPlayedSongs', page).html(LibraryBrowser.getPosterViewHtml({
                items: result.Items,
                showUnplayedIndicator: false,
-                shape: "square",
+                shape: getSquareShape(),
                showTitle: true,
                showParentTitle: true,
                defaultAction: 'play',
@ -105,7 +113,7 @@
            $('#topPlayedSongs', page).html(LibraryBrowser.getPosterViewHtml({
                items: result.Items,
                showUnplayedIndicator: false,
-                shape: "square",
+                shape: getSquareShape(),
                showTitle: true,
                showParentTitle: true,
                defaultAction: 'play',
@ -144,7 +152,7 @@

            $('.itemsContainer', elem).html(LibraryBrowser.getPosterViewHtml({
                items: result.Items,
-                shape: "square",
+                shape: getSquareShape(),
                showTitle: true,
                lazy: true,
                defaultAction: 'play',
@ -155,10 +163,9 @@
            })).lazyChildren();

        });
-
    }

-    $(document).on('pagebeforeshow', "#musicRecommendedPage", function () {
+    $(document).on('pageshown', "#musicRecommendedPage", function () {

        var parentId = LibraryMenu.getTopParentId();

@ -168,6 +175,12 @@
        loadPlaylists(page, parentId);
        loadRecentlyPlayed(page, parentId);
        loadFrequentlyPlayed(page, parentId);
+
+        if (enableScrollX()) {
+            $('.itemsContainer', page).addClass('hiddenScrollX');
+        } else {
+            $('.itemsContainer', page).removeClass('hiddenScrollX');
+        }
    });


--- a/dashboard-ui/scripts/plugincatalogpage.js
+++ b/dashboard-ui/scripts/plugincatalogpage.js
@ -10,6 +10,14 @@

        Dashboard.showLoadingMsg();

+        if (AppInfo.enableAppStorePolicy) {
+            $('.optionAdultContainer', page).hide();
+        } else {
+            $('.optionAdultContainer', page).show();
+        }
+
+        query.IsAppStoreSafe = true;
+
        var promise1 = ApiClient.getAvailablePlugins(query);

        var promise2 = ApiClient.getInstalledPlugins();
@ -128,7 +136,7 @@
            if (!plugin.isExternal) {
                html += "<div class='cardText packageReviewText'>";
                html += plugin.price > 0 ? "$" + plugin.price.toFixed(2) : Globalize.translate('LabelFree');
-                html += RatingHelpers.getStoreRatingHtml(plugin.avgRating, plugin.id, plugin.name);
+                html += RatingHelpers.getStoreRatingHtml(plugin.avgRating, plugin.id, plugin.name, true);

                html += "<span class='storeReviewCount'>";
                html += " " + Globalize.translate('LabelNumberReviews').replace("{0}", plugin.totalRatings);
--- a/dashboard-ui/scripts/ratingdialog.js
+++ b/dashboard-ui/scripts/ratingdialog.js
@ -112,7 +112,7 @@
            for (var i = 1; i <= 5; i++) {
                var title = noLinks ? rating + " stars" : "Rate " + i + (i > 1 ? " stars" : " star");

-                html += noLinks ? "" : "<span data-id=" + id + " data-name='" + name + "' data-rating=" + i + " onclick='RatingHelpers.ratePackage(this);return false;' >";
+                html += noLinks ? "" : "<a href='#' data-id=" + id + " data-name='" + name + "' data-rating=" + i + " onclick='RatingHelpers.ratePackage(this);return false;' >";
                if (rating <= i - 1) {
                    html += "<div class='storeStarRating emptyStarRating' title='" + title + "'></div>";
                } else if (rating < i) {
@ -120,7 +120,7 @@
                } else {
                    html += "<div class='storeStarRating' title='" + title + "'></div>";
                }
-                html += noLinks ? "" : "</span>";
+                html += noLinks ? "" : "</a>";
            }

            html += "</div>";
--- a/dashboard-ui/scripts/registrationservices.js
+++ b/dashboard-ui/scripts/registrationservices.js
@ -0,0 +1,112 @@
+window.RegistrationServices = {
+
+    renderPluginInfo: function (page, pkg, pluginSecurityInfo) {
+        
+        if (pkg.isPremium) {
+            $('.premiumPackage', page).show();
+
+            // Fill in registration info
+            var regStatus = "";
+            if (pkg.isRegistered) {
+
+                regStatus += "<p style='color:green;'>";
+
+                regStatus += Globalize.translate('MessageFeatureIncludedWithSupporter');
+
+            } else {
+
+                var expDateTime = new Date(pkg.expDate).getTime();
+                var nowTime = new Date().getTime();
+
+                if (expDateTime <= nowTime) {
+                    regStatus += "<p style='color:red;'>";
+                    regStatus += Globalize.translate('MessageTrialExpired');
+                }
+                else if (expDateTime > new Date(1970, 1, 1).getTime()) {
+
+                    regStatus += "<p style='color:blue;'>";
+                    regStatus += Globalize.translate('MessageTrialWillExpireIn').replace('{0}', Math.round(expDateTime - nowTime) / (86400000));
+                }
+            }
+
+            regStatus += "</p>";
+            $('#regStatus', page).html(regStatus);
+
+            if (pluginSecurityInfo.IsMBSupporter) {
+                $('#regInfo', page).html(pkg.regInfo || "");
+
+                $('.premiumDescription', page).hide();
+                $('.supporterDescription', page).hide();
+
+                if (pkg.price > 0) {
+
+                    $('.premiumHasPrice', page).show();
+                    $('#featureId', page).val(pkg.featureId);
+                    $('#featureName', page).val(pkg.name);
+                    $('#amount', page).val(pkg.price);
+
+                    $('#regPrice', page).html("<h3>" + Globalize.translate('ValuePriceUSD').replace('{0}', "$" + pkg.price.toFixed(2)) + "</h3>");
+
+                    var url = "http://mb3admin.com/admin/service/user/getPayPalEmail?id=" + pkg.owner;
+
+                    $.getJSON(url).done(function (dev) {
+                        if (dev.payPalEmail) {
+                            $('#payPalEmail', page).val(dev.payPalEmail);
+
+                        } else {
+                            $('#ppButton', page).hide();
+                        }
+                    });
+                } else {
+                    // Supporter-only feature
+                    $('.premiumHasPrice', page).hide();
+                }
+            } else {
+
+                if (pkg.price) {
+                    $('.premiumDescription', page).show();
+                    $('.supporterDescription', page).hide();
+                    $('#regInfo', page).html("");
+
+                } else {
+                    $('.premiumDescription', page).hide();
+                    $('.supporterDescription', page).show();
+                    $('#regInfo', page).html("");
+                }
+
+                $('#ppButton', page).hide();
+            }
+
+        } else {
+            $('.premiumPackage', page).hide();
+        }
+    },
+
+    addRecurringFields: function(page, period) {
+        
+        var formSelector = '.supporterForm';
+
+        // Add recurring fields to form
+        $("<input type='hidden' name='a3' class='pprecurring' />")
+            .attr('value', $('#donateAmt', page).val())
+            .appendTo(formSelector, page);
+
+        $("<input type='hidden' name='p3' value='1' class='pprecurring' />")
+            .appendTo(formSelector, page);
+
+        $("<input type='hidden' name='t3' value='" + period + "' class='pprecurring' />")
+            .appendTo(formSelector, page);
+
+        $("<input type='hidden' name='src' value='1' class='pprecurring' />")
+            .appendTo(formSelector, page);
+
+        $("<input type='hidden' name='sra' value='1' class='pprecurring' />")
+            .appendTo(formSelector, page);
+
+        //change command for subscriptions
+        $('#ppCmd', page).val('_xclick-subscriptions');
+
+        $(formSelector, page).trigger('create');
+    }
+
+};
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@ -1375,7 +1375,7 @@ var Dashboard = {
            // The native app can handle a little bit more than safari
            if (Dashboard.isRunningInCordova()) {

-                quality -= 15;
+                quality -= 10;

                if (isBackdrop) {
                    quality -= 20;
@ -1505,6 +1505,10 @@ var AppInfo = {};
        AppInfo.enableDetailPageChapters = true;
        AppInfo.enableDetailsMenuImages = true;
        AppInfo.enableHeaderImages = true;
+        AppInfo.enableMovieHomeSuggestions = true;
+
+
+        AppInfo.enableAppStorePolicy = isCordova;

        if ($.browser.safari) {

@ -1519,6 +1523,7 @@ var AppInfo = {};
                AppInfo.enableDetailPageChapters = false;
                AppInfo.enableDetailsMenuImages = false;
                AppInfo.enableHeaderImages = false;
+                AppInfo.enableMovieHomeSuggestions = false;
            }
        }
        else {
@ -1534,7 +1539,6 @@ var AppInfo = {};
            AppInfo.enableLatestChannelItems = true;
            AppInfo.enableStudioTabs = true;
            AppInfo.enablePeopleTabs = true;
-            AppInfo.enableHomeFavoritesTab = true;
            AppInfo.enableTvEpisodesTab = true;
            AppInfo.enableMusicArtistsTab = true;
            AppInfo.enableHomeLatestTab = true;
@ -1550,6 +1554,8 @@ var AppInfo = {};

    function initializeApiClient(apiClient) {

+        apiClient.enableAppStorePolicy = AppInfo.enableAppStorePolicy;
+
        $(apiClient).off('.dashboard')
            .on("websocketmessage.dashboard", Dashboard.onWebSocketMessageReceived)
            .on('requestfail.dashboard', Dashboard.onRequestFail)
@ -1629,6 +1635,10 @@ var AppInfo = {};

    function onReady() {

+        if (AppInfo.isTouchPreferred) {
+            $(document.body).addClass('touch');
+        }
+
        if ($.browser.safari && $.browser.mobile) {
            initFastClick();
        }
@ -1649,10 +1659,6 @@ var AppInfo = {};
            $(document.body).addClass('peopleTabDisabled');
        }

-        if (!AppInfo.enableHomeFavoritesTab) {
-            $(document.body).addClass('homeFavoritesTabDisabled');
-        }
-
        if (!AppInfo.enableTvEpisodesTab) {
            $(document.body).addClass('tvEpisodesTabDisabled');
        }
@ -1863,7 +1869,7 @@ $(document).on('pagecreate', ".page", function () {
    var require = this.getAttribute('data-require');

    if (require) {
-        requirejs([require], function () {
+        requirejs(require.split(','), function () {

            $(page).trigger('pageinitdepends');
        });
@ -1880,7 +1886,7 @@ $(document).on('pagecreate', ".page", function () {
    var require = this.getAttribute('data-require');

    if (require) {
-        requirejs([require], function () {
+        requirejs(require.split(','), function () {

            $(page).trigger('pageshown');
        });
--- a/dashboard-ui/scripts/supporterpage.js
+++ b/dashboard-ui/scripts/supporterpage.js
@ -1,29 +1,7 @@
 (function () {

    function addRecurringFields(period, page) {
-
-        // Add recurring fields to form
-        $("<input type='hidden' name='a3' class='pprecurring' />")
-            .attr('value', $('#donateAmt', page).val())
-            .appendTo("#payPalSupporterForm", page);
-
-        $("<input type='hidden' name='p3' value='1' class='pprecurring' />")
-            .appendTo("#payPalSupporterForm", page);
-
-        $("<input type='hidden' name='t3' value='" + period + "' class='pprecurring' />")
-            .appendTo("#payPalSupporterForm", page);
-
-        $("<input type='hidden' name='src' value='1' class='pprecurring' />")
-            .appendTo("#payPalSupporterForm", page);
-
-        $("<input type='hidden' name='sra' value='1' class='pprecurring' />")
-            .appendTo("#payPalSupporterForm", page);
-
-        //change command for subscriptions
-        $('#ppCmd', page).val('_xclick-subscriptions');
-
-        $('#payPalSupporterForm', page).trigger('create');
-        console.log($('#payPalSupporterForm', page).html());
+        RegistrationServices.addRecurringFields(page, period);
    }

    function removeRecurringFields(page) {
@ -187,7 +165,7 @@
        $('.dailyAmount', page).html('$' + dailyAmount);
        $('.yearlyAmount', page).html('$' + yearlyAmount);

-        $('#paypalReturnUrl', page).val(ApiClient.getUrl("supporterkey.html"));
+        $('#returnUrl', page).val(ApiClient.getUrl("supporterkey.html"));

        $('.radioDonationType', page).trigger('change');

--- a/dashboard-ui/supporter.html
+++ b/dashboard-ui/supporter.html
@ -27,7 +27,7 @@
                        <p class="planSummary"></p>
                    </div>

-                    <form style="margin-top:1.5em;" name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" id="payPalSupporterForm" method="post">
+                    <form style="margin-top:1.5em;" name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" class="supporterForm" method="post">

                        <fieldset data-role="controlgroup">
                            <legend>${HeaderDonationType}</legend>
@ -52,13 +52,6 @@
                                    <span class="monthlyAmount"></span>
                                </label>
                            </div>
-                            <!--<div class="fldDaily">
-                                <input type="radio" class="radioDonationType" name="radioDonationType" id="radioDailySupporter" value="daily">
-                                <label for="radioDailySupporter">
-                                    Daily supporter membership<br />
-                                    <span class="dailyAmount"></span>
-                                </label>
-                            </div>-->
                        </fieldset>
                        <div class="fieldDescription">${LabelRecurringDonationCanBeCancelledHelp}</div>

@ -90,17 +83,21 @@

                        <br />

+                        <!--CORDOVA_EXCLUDE_START-->
                        <input type="hidden" name="cmd" id="ppCmd" value="_xclick">
                        <input type="hidden" name="business" value="donation@mediabrowser.tv">
                        <input type="hidden" name="currency_code" value="USD">
                        <input type="hidden" name="item_name" value="Emby Supporter">
                        <input type="hidden" name="item_number" id="ppItemNo" value="MBSupporter">
                        <input type="hidden" name="notify_url" value="http://mb3admin.com/admin/service/services/ppipn.php">
-                        <input type="hidden" name="return" id="paypalReturnUrl" value="#">
+                        <input type="hidden" name="return" id="returnUrl" value="#">
+                        <!--CORDOVA_EXCLUDE_END-->

                        <button type="submit" data-role="none" class="btn" style="background-color:#179BD7">
+                            <!--CORDOVA_REPLACE_SUPPORTER_SUBMIT_START-->
                            <i class="fa fa-paypal"></i>
                            <span>${ButtonDonateWithPayPal}</span>
+                            <!--CORDOVA_REPLACE_SUPPORTER_SUBMIT_END-->
                        </button>

                        <input type="hidden" id="donateAmt" name="amount" />
@ -118,7 +115,7 @@
        </div>

        <script type="text/javascript">
-            $('#payPalSupporterForm').off('submit', SupporterPage.onSubmit).on('submit', SupporterPage.onSubmit);
+            $('.supporterForm').off('submit', SupporterPage.onSubmit).on('submit', SupporterPage.onSubmit);
        </script>
    </div>
 </body>
--- a/dashboard-ui/thirdparty/apiclient/apiclient.js
+++ b/dashboard-ui/thirdparty/apiclient/apiclient.js
@ -28,6 +28,8 @@
        var webSocket;
        var serverInfo;

+        self.enableAppStorePolicy = false;
+
        /**
         * Gets the server address.
         */
@ -1688,6 +1690,10 @@
            options = options || {};
            options.PackageType = "UserInstalled";

+            if (self.enableAppStorePolicy) {
+                options.IsAppStoreEnabled = true;
+            }
+
            var url = self.getUrl("Packages", options);

            return self.ajax({
@ -2138,7 +2144,13 @@
         */
        self.getInstalledPlugins = function () {

-            var url = self.getUrl("Plugins");
+            var options = {};
+
+            if (self.enableAppStorePolicy) {
+                options.IsAppStoreEnabled = true;
+            }
+
+            var url = self.getUrl("Plugins", options);

            return self.ajax({
                type: "GET",
--- a/dashboard-ui/thirdparty/cordova/registrationservices.js
+++ b/dashboard-ui/thirdparty/cordova/registrationservices.js
@ -0,0 +1,12 @@
+window.RegistrationServices = {
+
+    renderPluginInfo: function (page, pkg, pluginSecurityInfo) {
+        
+
+    },
+
+    addRecurringFields: function (page, period) {
+
+    }
+
+};