add item flyouts

dashboard-ui/css/card.css

@@ -84,13 +84,6 @@
     margin: 12px;
 }
 
-@media all and (min-width: 600px) {
-
-    .largeCardMargin .visualCardBox {
-        margin: 18px;
-    }
-}
-
 .ui-page-theme-b .visualCardBox {
     background: rgba(45,45,45,.85);
     border-radius: 3px;

dashboard-ui/css/librarybrowser.css

@@ -20,6 +20,10 @@
         background-color: rgba(240, 240,240, .94) !important;
     }
 
+.ui-page-theme-b {
+    background-color: #1f1f1f;
+}
+
 .backdropPage.ui-page-theme-b {
     background-color: rgba(20, 20,20, .86) !important;
 }
@@ -1283,80 +1287,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
         text-decoration: none;
     }
 
-.groupingMenu {
-    width: 240px;
-}
-
-.groupingMenuScroller {
-    overflow-x: auto;
-    overflow-y: hidden;
-    white-space: nowrap;
-    padding: 1em;
-}
-
-@media all and (min-width: 400px) {
-
-    .groupingMenu {
-        width: 360px;
-    }
-}
-
-@media all and (min-width: 500px) {
-
-    .groupingMenu {
-        width: 460px;
-    }
-}
-
-@media all and (min-width: 600px) {
-
-    .groupingMenu {
-        width: 560px;
-    }
-}
-
-@media all and (min-width: 700px) {
-
-    .groupingMenu {
-        width: 660px;
-    }
-}
-
-@media all and (min-width: 800px) {
-
-    .groupingMenu {
-        width: 760px;
-    }
-}
-
-@media all and (min-width: 900px) {
-
-    .groupingMenu {
-        width: 860px;
-    }
-}
-
-@media all and (min-width: 1000px) {
-
-    .groupingMenu {
-        width: 960px;
-    }
-}
-
-@media all and (min-width: 1100px) {
-
-    .groupingMenu {
-        width: 1060px;
-    }
-}
-
-@media all and (min-width: 1200px) {
-
-    .groupingMenu {
-        width: 1160px;
-    }
-}
-
 
 .itemsContainer:not(.fullWidthItemsContainer) .itemsListview {
     max-width: 800px;
@@ -1547,3 +1477,126 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 .homeFavoritesTabDisabled .homeFavoritesTab {
     display: none !important;
 }
+
+.detailsMenu {
+    width: 280px;
+}
+
+@media all and (min-width: 360px) {
+
+    .detailsMenu {
+        width: 320px;
+    }
+}
+
+@media all and (min-width: 400px) {
+
+    .detailsMenu {
+        width: 340px;
+    }
+}
+
+@media all and (min-width: 500px) {
+
+    .detailsMenu {
+        width: 440px;
+    }
+}
+
+@media all and (min-width: 600px) {
+
+    .detailsMenu {
+        width: 540px;
+    }
+}
+
+@media all and (min-width: 700px) {
+
+    .detailsMenu {
+        width: 640px;
+    }
+}
+
+@media all and (min-width:800px) {
+
+    .detailsMenu {
+        width: 740px;
+    }
+}
+
+.detailsMenuLeftButton {
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: 23px 15px;
+}
+
+.detailsMenuRightButton {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 23px 15px;
+}
+
+.detailsMenuHeaderWithLogo .detailsMenuLeftButton, .detailsMenuHeaderWithLogo .detailsMenuRightButton {
+    padding-top: 30px;
+    padding-bottom: 30px;
+}
+
+.detailsMenuContentInner {
+    height: 200px;
+}
+
+.detailsMenuOverview {
+    max-height: 30px;
+    text-overflow: ellipsis;
+    overflow-y: hidden;
+}
+
+.detailsMenuButtons {
+    padding: 1em 0 .5em;
+    text-transform: uppercase;
+    text-align: center;
+}
+
+    .detailsMenuButtons .btn {
+        font-size: 14px;
+    }
+
+.detailsMenuButtonContainer {
+    display: inline-block;
+}
+
+    .detailsMenuButtonContainer span {
+        padding-left: 1em;
+    }
+
+    .detailsMenuButtonContainer + .detailsMenuButtonContainer {
+        margin-left: 1em;
+    }
+
+.detailsMenu h3 {
+    padding: 0 30px;
+}
+
+@media all and (min-height:500px) {
+
+    .detailsMenuContentInner {
+        height: 300px;
+    }
+
+    .detailsMenuOverview {
+        max-height: 120px;
+    }
+}
+
+@media all and (min-height:600px) {
+
+    .detailsMenuContentInner {
+        height: 400px;
+    }
+
+    .detailsMenuOverview {
+        max-height: 220px;
+    }
+}

dashboard-ui/scripts/episodes.js

@@ -69,7 +69,8 @@
                     showParentTitle: true,
                     overlayText: true,
                     lazy: true,
-                    context: 'tv'
+                    context: 'tv',
+                    showDetailsMenu: true
                 });
             }
             else if (view == "PosterCard") {
@@ -80,7 +81,8 @@
                     showParentTitle: true,
                     lazy: true,
                     context: 'tv',
-                    cardLayout: true
+                    cardLayout: true,
+                    showDetailsMenu: true
                 });
             }
 

dashboard-ui/scripts/favorites.js

@@ -48,7 +48,8 @@
                     context: 'home-favorites',
                     showTitle: section.showTitle,
                     showParentTitle: section.showParentTitle,
-                    lazy: true
+                    lazy: true,
+                    showDetailsMenu: true
                 });
 
                 if (result.TotalRecordCount > result.Items.length) {

dashboard-ui/scripts/indexpage.js

@@ -161,7 +161,8 @@
                     lazy: true,
                     cardLayout: cardLayout,
                     showTitle: cardLayout,
-                    showYear: cardLayout
+                    showYear: cardLayout,
+                    showDetailsMenu: true
                 });
                 html += '</div>';
             }
@@ -196,7 +197,8 @@
                     shape: 'auto',
                     showTitle: true,
                     centerText: true,
-                    lazy: true
+                    lazy: true,
+                    showDetailsMenu: true
                 });
                 html += '</div>';
             }
@@ -251,7 +253,7 @@
                 html += '</div>';
             }
 
-            $(elem).html(html).lazyChildren().createCardMenus();
+            $(elem).html(html).lazyChildren().createCardMenus({ showDetailsMenu: false });
 
             handleLibraryLinkNavigations(elem);
         });
@@ -294,7 +296,8 @@
                     showParentTitle: true,
                     context: 'home',
                     lazy: true,
-                    cardLayout: cardLayout
+                    cardLayout: cardLayout,
+                    showDetailsMenu: true
                 });
                 html += '</div>';
             }
@@ -384,7 +387,8 @@
                 showTitle: true,
                 centerText: true,
                 context: 'channels',
-                lazy: true
+                lazy: true,
+                showDetailsMenu: true
             });
             html += '</div>';
 
@@ -424,7 +428,8 @@
                 showParentTitle: true,
                 overlayText: screenWidth >= 600,
                 coverImage: true,
-                lazy: true
+                lazy: true,
+                showDetailsMenu: true
             });
 
             elem.html(html).lazyChildren().trigger('create');

dashboard-ui/scripts/itemdetailpage.js

@@ -666,7 +666,8 @@
                 borderless: item.Type == "Game",
                 context: context,
                 overlayText: item.Type != "MusicAlbum",
-                lazy: true
+                lazy: true,
+                showDetailsMenu: true
             });
 
             $('#similarContent', page).html(html).lazyChildren();
@@ -866,7 +867,8 @@
                     context: context,
                     playFromHere: true,
                     overlayText: true,
-                    lazy: true
+                    lazy: true,
+                    showDetailsMenu: true
                 });
             }
             else if (item.Type == "GameSystem") {
@@ -876,7 +878,8 @@
                     showTitle: true,
                     centerText: true,
                     context: context,
-                    lazy: true
+                    lazy: true,
+                    showDetailsMenu: true
                 });
             }
 
@@ -982,13 +985,14 @@
             showTitle: true,
             centerText: true,
             context: context,
-            lazy: true
+            lazy: true,
+            showDetailsMenu: true
         });
         html += '</div>';
 
         html += '</div>';
 
-        $('.collectionItems', page).append(html);
+        $('.collectionItems', page).append(html).lazyChildren();
     }
 
     function renderUserDataIcons(page, item) {

dashboard-ui/scripts/librarybrowser.js

@@ -884,6 +884,10 @@
             atts.push('data-locationtype="' + (item.LocationType || '') + '"');
             atts.push('data-index="' + index + '"');
 
+            if (options.showDetailsMenu) {
+                atts.push('data-detailsmenu="true"');
+            }
+
             var html = atts.join(' ');
 
             if (html) {
@@ -1689,7 +1693,8 @@
             return {
                 id: itemId,
                 index: index,
-                mediaType: mediaType
+                mediaType: mediaType,
+                context: elemWithAttributes.getAttribute('data-context')
             };
         },
 

dashboard-ui/scripts/librarylist.js

@@ -492,8 +492,6 @@
 
     function onGroupedCardClick(e) {
 
-        var target = $(e.target);
-
         var card = this;
         var itemId = card.getAttribute('data-itemid');
         var context = card.getAttribute('data-context');
@@ -502,8 +500,6 @@
 
         var userId = Dashboard.getCurrentUserId();
 
-        var promise1 = ApiClient.getItem(userId, itemId);
-
         var options = {
 
             Limit: parseInt($('.playedIndicator', card).html() || '10'),
@@ -512,59 +508,285 @@
             GroupItems: false
         };
 
-        var promise2 = ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options));
+        ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).done(function (items) {
 
-        $.when(promise1, promise2).done(function (response1, response2) {
+            var ids = items.map(function (i) {
-
+                return i.Id;
-            var item = response1[0];
-            var latestItems = response2[0];
-
-            if (latestItems.length == 1) {
-
-                if (!target.is('a,button')) {
-                    var first = latestItems[0];
-                    Dashboard.navigate(LibraryBrowser.getHref(first, context));
-                    return;
-                }
-            }
-
-            var html = '<div data-role="popup" class="groupingMenu" data-transition="slide" style="background:rgba(0,0,0,.85);border:0;padding:0;">';
-
-            var href = card.href || LibraryBrowser.getHref(item, context);
-            var header = Globalize.translate('HeaderLatestFromChannel').replace('{0}', '<a href="' + href + '" style="outline:0;">' + item.Name + '</a>');
-            html += '<h3 style="padding:.5em 1em;background:#222;margin:0;">' + header + '</h3>';
-
-            html += '<div class="groupingMenuScroller">';
-
-            html += LibraryBrowser.getPosterViewHtml({
-                items: latestItems,
-                shape: "detailPage169",
-                showTitle: true,
-                overlayText: true,
-                lazy: true,
-                context: context
             });
 
-            html += '</div>';
+            showItemsOverlay({
-
+                ids: ids,
-            html += '</div>';
+                context: context
-
+            });
-            $($.mobile.activePage).append(html);
-
-            $('.groupingMenu').popup().trigger('create').popup("open").on("popupafterclose", function () {
-
-                $(this).off("popupafterclose").remove();
-                $(card).removeClass('hasContextMenu');
-
-            }).lazyChildren();
         });
 
         e.preventDefault();
         return false;
     }
 
+    function getItemsOverlay(ids, context) {
 
-    $.fn.createCardMenus = function () {
+        var html = '<div data-role="popup" class="detailsMenu" data-transition="slidedown" style="border:0;padding:0;" data-ids="' + ids.join(',') + '" data-context="' + (context || '') + '">';
+
+        html += '<div style="padding:1em 1em;background:rgba(20,20,20,1);margin:0;text-align:center;" class="detailsMenuHeader">';
+        html += '<button type="button" class="imageButton detailsMenuLeftButton" data-role="none"><i class="fa fa-arrow-left"></i></button>';
+        html += '<h3 style="font-weight:400;margin:.5em 0;"></h3>';
+        html += '<button type="button" class="imageButton detailsMenuRightButton" data-role="none"><i class="fa fa-arrow-right"></i></button>';
+        html += '</div>';
+
+        html += '<div class="detailsMenuContent" style="background-position:center center;background-repeat:no-repeat;background-size:cover;">';
+        html += '<div style="padding:.5em 1em 1em;background:rgba(0,0,0,.80);" class="detailsMenuContentInner">';
+        html += '</div>';
+        html += '</div>';
+
+        html += '</div>';
+
+        $($.mobile.activePage).append(html);
+
+        var elem = $('.detailsMenu').popup().trigger('create').popup("open").on("popupafterclose", function () {
+
+            $(this).off("popupafterclose").remove();
+        });
+
+        $('.detailsMenuLeftButton', elem).on('click', function () {
+
+            var overlay = $(this).parents('.detailsMenu');
+            setItemIntoOverlay(overlay, parseInt(overlay.attr('data-index')) - 1, context);
+        });
+
+        $('.detailsMenuRightButton', elem).on('click', function () {
+
+            var overlay = $(this).parents('.detailsMenu');
+            setItemIntoOverlay(overlay, parseInt(overlay.attr('data-index')) + 1, context);
+        });
+
+        return elem;
+    }
+
+    function setItemIntoOverlay(elem, index) {
+
+        var ids = elem.attr('data-ids').split(',');
+        var itemId = ids[index];
+        var userId = Dashboard.getCurrentUserId();
+        var context = elem.attr('data-context');
+
+        elem.attr('data-index', index);
+
+        if (index > 0) {
+            $('.detailsMenuLeftButton', elem).show();
+        } else {
+            $('.detailsMenuLeftButton', elem).hide();
+        }
+
+        if (index < ids.length - 1) {
+            $('.detailsMenuRightButton', elem).show();
+        } else {
+            $('.detailsMenuRightButton', elem).hide();
+        }
+
+        var promise1 = ApiClient.getItem(userId, itemId);
+        var promise2 = Dashboard.getCurrentUser();
+
+        $.when(promise1, promise2).done(function (response1, response2) {
+
+            var item = response1[0];
+            var user = response2[0];
+
+            var background = 'none';
+
+            if (!AppInfo.hasLowImageBandwidth) {
+                var backdropUrl;
+                var screenWidth = $(window).width();
+                var backdropWidth = Math.min(screenWidth, 800);
+
+                if (item.BackdropImageTags && item.BackdropImageTags.length) {
+
+                    backdropUrl = ApiClient.getScaledImageUrl(item.Id, {
+                        type: "Backdrop",
+                        index: 0,
+                        maxWidth: backdropWidth,
+                        tag: item.BackdropImageTags[0]
+                    });
+                }
+                else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
+
+                    backdropUrl = ApiClient.getScaledImageUrl(item.ParentBackdropItemId, {
+                        type: 'Backdrop',
+                        index: 0,
+                        tag: item.ParentBackdropImageTags[0],
+                        maxWidth: backdropWidth
+                    });
+                }
+
+                if (backdropUrl) {
+                    background = 'url(' + backdropUrl + ')';
+                }
+            }
+
+            $('.detailsMenuContent', elem).css('backgroundImage', background);
+
+            var headerHtml = LibraryBrowser.getPosterViewDisplayName(item);
+            $('.detailsMenuHeader', elem).removeClass('detailsMenuHeaderWithLogo');
+            if (!AppInfo.hasLowImageBandwidth) {
+
+                var logoUrl;
+
+                var logoHeight = 30;
+                if (item.ImageTags && item.ImageTags.Logo) {
+
+                    logoUrl = ApiClient.getScaledImageUrl(item.Id, {
+                        type: "Logo",
+                        index: 0,
+                        height: logoHeight,
+                        tag: item.ImageTags.Logo
+                    });
+                }
+
+                if (logoUrl) {
+                    headerHtml = '<img src="' + logoUrl + '" style="height:' + logoHeight + 'px;" />';
+                    $('.detailsMenuHeader', elem).addClass('detailsMenuHeaderWithLogo');
+                }
+            }
+
+            $('h3', elem).html(headerHtml);
+
+            var contentHtml = '';
+
+            var miscInfo = LibraryBrowser.getMiscInfoHtml(item);
+            if (miscInfo) {
+
+                contentHtml += '<p>' + miscInfo + '</p>';
+            }
+
+            var userData = LibraryBrowser.getUserDataIconsHtml(item);
+            if (userData) {
+
+                contentHtml += '<p>' + userData + '</p>';
+            }
+
+            var ratingHtml = LibraryBrowser.getRatingHtml(item);
+            if (ratingHtml) {
+
+                contentHtml += '<p>' + ratingHtml + '</p>';
+            }
+
+            if (item.Overview) {
+                contentHtml += '<p class="detailsMenuOverview">' + item.Overview + '</p>';
+            }
+
+            contentHtml += '<div class="detailsMenuButtons">';
+
+            if (MediaController.canPlay(item)) {
+                if (item.MediaType == 'Video' && !item.IsFolder && item.UserData && item.UserData.PlaybackPositionTicks) {
+                    contentHtml += '<div class="detailsMenuButtonContainer">';
+                    contentHtml += '<a href="#" class="btn btnAltAction btnResume">';
+                    contentHtml += '<i class="fa fa-play"></i>';
+                    contentHtml += '<span>' + Globalize.translate('ButtonResume') + '</span>';
+                    contentHtml += '</a>';
+                    contentHtml += '</div>';
+                }
+
+                contentHtml += '<div class="detailsMenuButtonContainer">';
+                contentHtml += '<a href="#" class="btn btnActionAccent btnPlay">';
+                contentHtml += '<i class="fa fa-play"></i>';
+                contentHtml += '<span>' + Globalize.translate('ButtonPlay') + '</span>';
+                contentHtml += '</a>';
+                contentHtml += '</div>';
+
+            }
+
+            contentHtml += '<div class="detailsMenuButtonContainer">';
+            contentHtml += '<a href="' + LibraryBrowser.getHref(item, context) + '" class="btn" style="background-color: #673AB7;">';
+            contentHtml += '<i class="fa fa-folder-open"></i>';
+            contentHtml += '<span>' + Globalize.translate('ButtonOpen') + '</span>';
+            contentHtml += '</a>';
+            contentHtml += '</div>';
+
+            if (SyncManager.isAvailable(item, user)) {
+                contentHtml += '<div class="detailsMenuButtonContainer">';
+                contentHtml += '<a href="#" class="btn btnSync">';
+                contentHtml += '<i class="fa fa-cloud"></i>';
+                contentHtml += '<span>' + Globalize.translate('ButtonSync') + '</span>';
+                contentHtml += '</a>';
+                contentHtml += '</div>';
+            }
+
+            contentHtml += '</div>';
+
+            $('.detailsMenuContentInner', elem).html(contentHtml).trigger('create');
+
+            $('.btnSync', elem).on('click', function () {
+
+                elem.popup('close');
+
+                SyncManager.showMenu({
+                    items: [item]
+                });
+            });
+
+            $('.btnPlay', elem).on('click', function () {
+
+                elem.popup('close');
+
+                MediaController.play({
+                    items: [item]
+                });
+            });
+
+            $('.btnResume', elem).on('click', function () {
+
+                elem.popup('close');
+
+                MediaController.play({
+                    items: [item],
+                    startPositionTicks: item.UserData.PlaybackPositionTicks
+                });
+            });
+        });
+    }
+
+    function showItemsOverlay(options) {
+
+        var context = options.context;
+
+        var elem = getItemsOverlay(options.ids, context);
+
+        setItemIntoOverlay(elem, 0);
+    }
+
+    function onCardClick() {
+
+        var info = LibraryBrowser.getListItemInfo(this);
+        var itemId = info.id;
+        var context = info.context;
+
+        var card = $(this);
+
+        if (card.hasClass('itemWithAction')) {
+            return;
+        }
+
+        if (!card.hasClass('card')) {
+            card = $(card).parents('.card');
+        }
+
+        if (card.hasClass('groupedCard')) {
+            return;
+        }
+
+        if (card.attr('data-detailsmenu') != 'true') {
+            return;
+        }
+
+        showItemsOverlay({
+            ids: [itemId],
+            context: context
+        });
+
+        return false;
+    }
+
+    $.fn.createCardMenus = function (options) {
 
         var preventHover = false;
 
@@ -643,8 +865,7 @@
             preventHover = true;
         }
 
-        return this
+        this.off('.cardMenu')
-            .off('.cardMenu')
             .on('contextmenu.cardMenu', '.card', onCardTapHold)
             .off('.latestgroupings')
             .on('click.latestgroupings', '.groupedCard', onGroupedCardClick)
@@ -654,6 +875,10 @@
             .on('mouseenter.cardHoverMenu', '.card:not(.bannerCard)', onHoverIn)
             .on('mouseleave.cardHoverMenu', '.card:not(.bannerCard)', onHoverOut)
             .on("touchstart.cardHoverMenu", '.card:not(.bannerCard)', preventTouchHover);
+
+        this.off('.mediaDetails').on('click.mediaDetails', '.mediaItem', onCardClick);
+
+        return this;
     };
 
     function toggleSelections(page) {

dashboard-ui/scripts/movies.js

@@ -64,7 +64,8 @@
                     preferThumb: true,
                     context: 'movies',
                     lazy: true,
-                    overlayText: true
+                    overlayText: true,
+                    showDetailsMenu: true
                 });
             }
             else if (view == "ThumbCard") {
@@ -77,7 +78,8 @@
                     lazy: true,
                     showTitle: true,
                     cardLayout: true,
-                    showYear: true
+                    showYear: true,
+                    showDetailsMenu: true
                 });
             }
             else if (view == "Banner") {
@@ -87,7 +89,8 @@
                     shape: "banner",
                     preferBanner: true,
                     context: 'movies',
-                    lazy: true
+                    lazy: true,
+                    showDetailsMenu: true
                 });
             }
             else if (view == "List") {
@@ -106,7 +109,8 @@
                     context: 'movies',
                     centerText: true,
                     lazy: true,
-                    overlayText: true
+                    overlayText: true,
+                    showDetailsMenu: true
                 });
             }
             else if (view == "PosterCard") {
@@ -117,7 +121,8 @@
                     showTitle: true,
                     showYear: true,
                     lazy: true,
-                    cardLayout: true
+                    cardLayout: true,
+                    showDetailsMenu: true
                 });
             }
             else if (view == "Timeline") {
@@ -128,7 +133,8 @@
                     showTitle: true,
                     timeline: true,
                     centerText: true,
-                    lazy: true
+                    lazy: true,
+                    showDetailsMenu: true
                 });
             }
 

dashboard-ui/scripts/moviesrecommended.js

@@ -49,7 +49,8 @@
                     overlayText: false,
                     showTitle: true,
                     showYear: true,
-                    cardLayout: true
+                    cardLayout: true,
+                    showDetailsMenu: true
 
                 });
 
@@ -107,7 +108,8 @@
                     showTitle: true,
                     showYear: true,
                     lazy: true,
-                    cardLayout: true
+                    cardLayout: true,
+                    showDetailsMenu: true
 
                 });
 
@@ -119,7 +121,8 @@
                     shape: 'backdrop',
                     overlayText: true,
                     showTitle: true,
-                    lazy: true
+                    lazy: true,
+                    showDetailsMenu: true
                 });
             }
 
@@ -167,7 +170,8 @@
                 overlayText: false,
                 showTitle: true,
                 showYear: true,
-                cardLayout: true
+                cardLayout: true,
+                showDetailsMenu: true
 
             });
 
@@ -178,7 +182,8 @@
                 shape: "portrait",
                 centerText: true,
                 lazy: true,
-                overlayText: true
+                overlayText: true,
+                showDetailsMenu: true
             });
         }
         html += '</div>';

dashboard-ui/scripts/movietrailers.js

@@ -57,7 +57,8 @@
                 showTitle: true,
                 showYear: true,
                 lazy: true,
-                cardLayout: true
+                cardLayout: true,
+                showDetailsMenu: true
             });
 
             var elem = $('.itemsContainer', page).html(html).lazyChildren();

dashboard-ui/scripts/musicvideos.js

@@ -52,7 +52,8 @@
                     context: 'music',
                     showTitle: true,
                     lazy: true,
-                    centerText: true
+                    centerText: true,
+                    showDetailsMenu: true
                 });
             }
             else if (view == "PosterCard") {
@@ -65,7 +66,8 @@
                     centerText: true,
                     cardLayout: true,
                     lazy: true,
-                    showParentTitle: true
+                    showParentTitle: true,
+                    showDetailsMenu: true
                 });
             }
 

dashboard-ui/scripts/site.js

@@ -1367,10 +1367,10 @@ var Dashboard = {
 
         if (AppInfo.hasLowImageBandwidth) {
 
-            quality -= 20;
+            quality -= 50;
 
             if (isBackdrop) {
-                quality -= 20;
+                //quality -= 20;
             }
         }
 
@@ -1816,12 +1816,14 @@ $(document).on('pagecreate', ".page", function () {
         if (current && current != newTheme) {
             page.page("option", "theme", newTheme);
         }
+
+        current = newTheme;
     }
 
     if (current == 'b') {
         $(document.body).addClass('darkScrollbars');
     } else {
-        $(document.body).addClass('removeScrollbars');
+        $(document.body).removeClass('darkScrollbars');
     }
 
 }).on('pageinit', ".page", function () {
@@ -1831,7 +1833,7 @@ $(document).on('pagecreate', ".page", function () {
     var require = this.getAttribute('data-require');
 
     if (require) {
-        requirejs([require], function() {
+        requirejs([require], function () {
 
             $(page).trigger('pageinitdepends');
         });

dashboard-ui/scripts/tvrecommended.js

@@ -81,7 +81,8 @@
                     showParentTitle: true,
                     lazy: true,
                     cardLayout: true,
-                    context: 'tv'
+                    context: 'tv',
+                    showDetailsMenu: true
                 });
 
             } else if (view == 'Thumb') {
@@ -94,7 +95,8 @@
                     overlayText: false,
                     context: context,
                     lazy: true,
-                    preferThumb: true
+                    preferThumb: true,
+                    showDetailsMenu: true
                 });
             }
 
@@ -149,7 +151,8 @@
                     showParentTitle: true,
                     lazy: true,
                     cardLayout: true,
-                    context: 'tv'
+                    context: 'tv',
+                    showDetailsMenu: true
                 });
 
             } else if (view == 'Poster') {
@@ -161,7 +164,8 @@
                     showParentTitle: true,
                     overlayText: screenWidth >= 800 && !AppInfo.hasLowImageBandwidth,
                     lazy: true,
-                    context: 'tv'
+                    context: 'tv',
+                    showDetailsMenu: true
                 });
             }
 

dashboard-ui/scripts/tvupcoming.js

@@ -52,6 +52,7 @@
                 preferThumb: true,
                 context: context || 'home-upcoming',
                 lazy: true,
+                showDetailsMenu: true
 
             })).lazyChildren();
         });

dashboard-ui/thirdparty/jquery.unveil-custom.js

@@ -309,7 +309,6 @@
                 setImageIntoElement(elem, localUrl);
 
             }).fail(onFail);
-
         };
     }
 
@@ -458,245 +457,6 @@
         };
     }
 
-    function indexedDbWebpImageStore() {
-
-        var self = this;
-
-        openDb().done(function (db) {
-
-            self._db = db;
-            window.ImageStore = self;
-        });
-
-        self.addImageToDatabase = function (blob, key) {
-
-            console.log("addImageToDatabase");
-
-            // Open a transaction to the database
-            var transaction = self.db().transaction([imagesStoreName], "readwrite");
-
-            // Put the blob into the dabase
-            var put = transaction.objectStore(imagesStoreName).put(blob, key);
-        };
-
-        self.db = function () {
-
-            return self._db;
-        };
-
-        self.get = function (key) {
-
-            var deferred = DeferredBuilder.Deferred();
-
-            var transaction = self.db().transaction([imagesStoreName], "readonly");
-
-            // Open a transaction to the database
-            var getRequest = transaction.objectStore(imagesStoreName).get(key);
-
-            getRequest.onsuccess = function (event) {
-
-                var imgFile = event.target.result;
-
-                if (imgFile) {
-                    deferred.resolveWith(null, [imgFile]);
-                } else {
-                    deferred.reject();
-                }
-            };
-
-            getRequest.onerror = function () {
-                deferred.reject();
-            };
-
-            return deferred.promise();
-        };
-
-        self.getImageUrl = function (originalUrl) {
-
-            console.log('getImageUrl:' + originalUrl);
-
-            var key = CryptoJS.SHA1(originalUrl).toString();
-
-            var deferred = DeferredBuilder.Deferred();
-
-            self.get(key).done(function (url) {
-
-                deferred.resolveWith(null, [url]);
-
-            }).fail(function () {
-
-                self.downloadImage(originalUrl, key).done(function () {
-                    self.get(key).done(function (url) {
-
-                        deferred.resolveWith(null, [url]);
-
-                    }).fail(function () {
-
-                        deferred.reject();
-                    });
-                }).fail(function () {
-
-                    deferred.reject();
-                });
-            });
-
-            return deferred.promise();
-        };
-
-        self.downloadImage = function (url, key) {
-
-            var deferred = DeferredBuilder.Deferred();
-
-            console.log('downloadImage:' + url);
-
-            // Create XHR
-            var xhr = new XMLHttpRequest();
-
-            xhr.open("GET", url, true);
-            // Set the responseType to blob
-            xhr.responseType = "arraybuffer";
-
-            xhr.addEventListener("load", function () {
-
-                if (xhr.status === 200) {
-                    console.log("Image retrieved");
-
-                    try {
-
-
-                        self.addImageToDatabase(this.response, key);
-                        deferred.resolve();
-                    } catch (err) {
-                        console.log("Error adding image to database");
-                        deferred.reject();
-                    }
-                } else {
-                    deferred.reject();
-                }
-            }, false);
-
-            // Send XHR
-            xhr.send();
-            return deferred.promise();
-        };
-
-        function decode(data, elem) {
-
-            console.log('decoding webp');
-
-            var WebPImage = { width: { value: 0 }, height: { value: 0 } }
-            var decoder = new WebPDecoder();
-
-            //Config, you can set all arguments or what you need, nothing no objeect 
-            var config = decoder.WebPDecoderConfig;
-            var output_buffer = config.j;
-            var bitstream = config.input;
-
-            if (!decoder.WebPInitDecoderConfig(config)) {
-                throw new Error("Library version mismatch!\n");
-            }
-
-            var StatusCode = decoder.VP8StatusCode;
-
-            var status = decoder.WebPGetFeatures(data, data.length, bitstream);
-            if (status != 0) {
-                console.log('error');
-            }
-
-            var mode = decoder.WEBP_CSP_MODE;
-            output_buffer.J = 4;
-
-            status = decoder.WebPDecode(data, data.length, config);
-
-            var ok = (status == 0);
-            if (!ok) {
-                throw new Error("Decoding of %s failed.\n");
-            }
-
-            drawIntoElement(output_buffer, elem);
-        }
-
-        function drawIntoElement(output_buffer, elem) {
-
-            console.log('drawing canvas');
-
-            var bitmap = output_buffer.c.RGBA.ma;
-
-            var canvas = document.createElement("canvas");
-
-            var biHeight = output_buffer.height; var biWidth = output_buffer.width;
-
-            canvas.height = biHeight;
-            canvas.width = biWidth;
-
-            var context = canvas.getContext('2d');
-            var output = context.createImageData(canvas.width, canvas.height);
-            var outputData = output.data;
-
-            for (var h = 0; h < biHeight; h++) {
-                for (var w = 0; w < biWidth; w++) {
-                    outputData[0 + w * 4 + (biWidth * 4) * h] = bitmap[1 + w * 4 + (biWidth * 4) * h];
-                    outputData[1 + w * 4 + (biWidth * 4) * h] = bitmap[2 + w * 4 + (biWidth * 4) * h];
-                    outputData[2 + w * 4 + (biWidth * 4) * h] = bitmap[3 + w * 4 + (biWidth * 4) * h];
-                    outputData[3 + w * 4 + (biWidth * 4) * h] = bitmap[0 + w * 4 + (biWidth * 4) * h];
-
-                };
-            }
-
-            context.putImageData(output, 0, 0);
-
-            elem.appendChild(canvas);
-        }
-
-        self.setImageInto = function (elem, url) {
-
-            if (url.indexOf('format=webp') == -1 || elem.tagName != 'DIV') {
-
-                setImageIntoElement(elem, url);
-                return;
-            }
-
-            // Create XHR
-            var xhr = new XMLHttpRequest();
-
-            xhr.open("GET", url, true);
-            // Set the responseType to blob
-            xhr.responseType = "arraybuffer";
-
-            xhr.addEventListener("load", function () {
-
-                if (xhr.status === 200) {
-                    console.log("Image retrieved");
-
-                    try {
-
-                        var arr = new Uint8Array(this.response);
-
-                        //// Convert the int array to a binary string
-                        //// We have to use apply() as we are converting an *array*
-                        //// and String.fromCharCode() takes one or more single values, not
-                        //// an array.
-                        //var raw = String.fromCharCode.apply(null, arr);
-
-                        //// This works!!!
-                        //var b64 = btoa(raw);
-                        //var dataURL = "data:image/jpeg;base64," + b64;
-
-                        console.log(url);
-                        decode(arr, elem);
-
-                    } catch (err) {
-                        console.log("Error adding image to database");
-                    }
-                } else {
-                }
-            }, false);
-
-            // Send XHR
-            xhr.send();
-        };
-    }
-
     function simpleImageStore() {
 
         var self = this;