update naming project

dashboard-ui/css/card.css

@@ -48,7 +48,7 @@
 }
 
 .largeCardMargin .cardBox {
-    margin: 8px;
+    margin: 7px;
 }
 
 /*@media all and (max-width: 600px) {

dashboard-ui/css/librarybrowser.css

@@ -1055,6 +1055,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 
 .timelineHeader {
     margin-bottom: .25em;
+    line-height: 1.25em;
     line-height: initial;
 }
 
@@ -1505,6 +1506,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 .homeLatestTabDisabled .homeLatestTab {
     display: none !important;
 }
+
 .movieTrailersTabDisabled .movieTrailersTab {
     display: none !important;
-}
+}

dashboard-ui/scripts/backdrops.js

@@ -59,6 +59,11 @@
         return deferred.promise();
     }
 
+    function setBackdropImage(elem, url) {
+
+        elem.lazyImage(url);
+    }
+
     function showBackdrop(type, parentId) {
 
         var apiClient = ConnectionManager.currentApiClient();
@@ -83,7 +88,7 @@
                     quality: 80
                 });
 
-                getElement().css('backgroundImage', 'url(\'' + imgUrl + '\')');
+                setBackdropImage(getElement(), imgUrl);
 
             } else {
 
@@ -97,6 +102,22 @@
         $('.backdropContainer').css('backgroundImage', '');
     }
 
+    function isEnabledByDefault() {
+
+        if (AppInfo.hasLowImageBandwidth) {
+
+            return false;
+        }
+
+        if (!$.browser.mobile) {
+            return true;
+        }
+
+        var screenWidth = $(window).width();
+
+        return screenWidth >= 600;
+    }
+
     function enabled() {
 
         var userId = Dashboard.getCurrentUserId();
@@ -104,7 +125,7 @@
         var val = store.getItem('enableBackdrops-' + userId);
 
         // For bandwidth
-        return val == '1' || (val != '0' && !$.browser.mobile);
+        return val == '1' || (val != '0' && isEnabledByDefault());
     }
 
     function setBackdrops(page, items) {
@@ -135,12 +156,25 @@
                 quality: 80
             });
 
-            getElement().css('backgroundImage', 'url(\'' + imgUrl + '\')');
+            setBackdropImage(getElement(), imgUrl);
 
         } else {
             $(page).removeClass('backdropPage');
         }
     }
+    
+    function setBackdropUrl(page, url) {
+
+        if (url) {
+            $(page).addClass('backdropPage');
+
+            setBackdropImage(getElement(), url);
+
+        } else {
+            $(page).removeClass('backdropPage');
+            clearBackdrop();
+        }
+    }
 
     $(document).on('pagebeforeshow', ".page", function () {
 
@@ -172,7 +206,8 @@
 
     window.Backdrops = {
 
-        setBackdrops: setBackdrops
+        setBackdrops: setBackdrops,
+        setBackdropUrl: setBackdropUrl
     };
 
 })(jQuery, document);

dashboard-ui/scripts/itemdetailpage.js

@@ -663,7 +663,8 @@
                 showTitle: item.Type == "MusicAlbum" || item.Type == "Game",
                 borderless: item.Type == "Game",
                 context: context,
-                overlayText: item.Type != "MusicAlbum"
+                overlayText: item.Type != "MusicAlbum",
+                lazy: true
             });
 
             $('#similarContent', page).html(html).lazyChildren();
@@ -837,7 +838,8 @@
                     index: 'disc',
                     showIndexNumber: true,
                     playFromHere: true,
-                    defaultAction: 'playallfromhere'
+                    defaultAction: 'playallfromhere',
+                    lazy: true
                 });
                 trigger = true;
 
@@ -849,7 +851,8 @@
                     showTitle: false,
                     centerText: true,
                     context: context,
-                    overlayText: true
+                    overlayText: true,
+                    lazy: true
                 });
             }
             else if (item.Type == "Season") {
@@ -860,7 +863,8 @@
                     displayAsSpecial: item.Type == "Season" && item.IndexNumber,
                     context: context,
                     playFromHere: true,
-                    overlayText: true
+                    overlayText: true,
+                    lazy: true
                 });
             }
             else if (item.Type == "GameSystem") {
@@ -869,7 +873,8 @@
                     shape: "auto",
                     showTitle: true,
                     centerText: true,
-                    context: context
+                    context: context,
+                    lazy: true
                 });
             }
 
@@ -974,7 +979,8 @@
             shape: shape,
             showTitle: true,
             centerText: true,
-            context: context
+            context: context,
+            lazy: true
         });
         html += '</div>';
 
@@ -1127,7 +1133,7 @@
 
             $('#themeVideosCollapsible', page).show();
 
-            $('#themeVideosContent', page).html(getVideosHtml(items, user)).trigger('create');
+            $('#themeVideosContent', page).html(getVideosHtml(items, user)).lazyChildren().trigger('create');
         } else {
             $('#themeVideosCollapsible', page).hide();
         }
@@ -1149,7 +1155,7 @@
 
                 $('#musicVideosCollapsible', page).show();
 
-                $('#musicVideosContent', page).html(getVideosHtml(result.Items, user)).trigger('create');
+                $('#musicVideosContent', page).html(getVideosHtml(result.Items, user)).lazyChildren().trigger('create');
             } else {
                 $('#musicVideosCollapsible', page).hide();
             }
@@ -1165,7 +1171,7 @@
 
                 $('#additionalPartsCollapsible', page).show();
 
-                $('#additionalPartsContent', page).html(getVideosHtml(result.Items, user)).trigger('create');
+                $('#additionalPartsContent', page).html(getVideosHtml(result.Items, user)).lazyChildren().trigger('create');
             } else {
                 $('#additionalPartsCollapsible', page).hide();
             }
@@ -1212,7 +1218,7 @@
             html += '<div class="cardPadder"></div>';
 
             html += '<div class="cardContent">';
-            html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
+            html += '<div class="cardImage lazy" data-src="' + imgUrl + '"></div>';
 
             html += '<div class="cardFooter">';
             html += '<div class="cardText">' + chapterName + '</div>';
@@ -1239,7 +1245,7 @@
             html += '<p style="margin: 0;padding-left: .5em;"><button class="moreScenes" data-inline="true" data-mini="true">' + Globalize.translate('ButtonMoreItems') + '</button></p>';
         }
 
-        $('#scenesContent', page).html(html).trigger('create');
+        $('#scenesContent', page).html(html).trigger('create').lazyChildren();
     }
 
     function renderMediaSources(page, item) {
@@ -1439,7 +1445,7 @@
             html += '<div class="cardPadder"></div>';
 
             html += '<div class="cardContent">';
-            html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
+            html += '<div class="cardImage lazy" data-src="' + imgUrl + '"></div>';
 
             html += '<div class="cardFooter">';
             html += '<div class="cardText">' + item.Name + '</div>';
@@ -1478,7 +1484,7 @@
 
         ApiClient.getSpecialFeatures(user.Id, item.Id).done(function (specials) {
 
-            $('#specialsContent', page).html(getVideosHtml(specials, user, limit, "moreSpecials")).trigger('create');
+            $('#specialsContent', page).html(getVideosHtml(specials, user, limit, "moreSpecials")).lazyChildren().trigger('create');
 
         });
     }
@@ -1514,7 +1520,7 @@
                 imgUrl = "css/images/items/list/person.png";
             }
 
-            html += '<div class="tileImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
+            html += '<div class="tileImage lazy" data-src="' + imgUrl + '"></div>';
 
 
 
@@ -1547,7 +1553,7 @@
             html += '<p style="margin: 0;padding-left: .5em;"><button class="morePeople" data-inline="true" data-mini="true">' + Globalize.translate('ButtonMoreItems') + '</button></p>';
         }
 
-        $('#castContent', page).html(html).trigger('create');
+        $('#castContent', page).html(html).lazyChildren().trigger('create');
     }
 
     function play(startPosition) {

dashboard-ui/scripts/itemlistpage.js

@@ -27,7 +27,7 @@
 
         var itemsPromise = ApiClient.getItems(userId, query);
 
-        $.when(parentItemPromise, itemsPromise).done(function(r1, r2) {
+        $.when(parentItemPromise, itemsPromise).done(function (r1, r2) {
 
             var item = r1[0];
             currentItem = item;
@@ -55,8 +55,6 @@
                 context = 'folders';
             }
 
-            var defaultAction = currentItem.Type == 'PhotoAlbum' ? 'photoslideshow' : null;
-
             if (view == "Backdrop") {
 
                 html = LibraryBrowser.getPosterViewHtml({
@@ -65,8 +63,7 @@
                     showTitle: true,
                     centerText: true,
                     preferBackdrop: true,
-                    context: context,
+                    context: context
-                    defaultAction: defaultAction
                 });
             }
             else if (view == "Poster") {
@@ -75,8 +72,7 @@
                     shape: "auto",
                     showTitle: true,
                     centerText: true,
-                    context: context,
+                    context: context
-                    defaultAction: defaultAction
                 });
             }
 
@@ -158,51 +154,15 @@
         $('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
     }
 
-    function startSlideshow(page, index) {
+    function onListItemClick(e) {
 
-        index += (query.StartIndex || 0);
+        var page = $(this).parents('.page');
+        var info = LibraryBrowser.getListItemInfo(this);
 
-        var userId = Dashboard.getCurrentUserId();
+        if (info.mediaType == 'Photo') {
-
+            Photos.startSlideshow(page, query, info.id);
-        var localQuery = $.extend({}, query);
+            return false;
-        localQuery.StartIndex = 0;
+        }
-        localQuery.Limit = null;
-        localQuery.MediaTypes = "Photo";
-        localQuery.Recursive = true;
-        localQuery.Filters = "IsNotFolder";
-
-        ApiClient.getItems(userId, localQuery).done(function(result) {
-
-            showSlideshow(page, result.Items, index);
-        });
-    }
-
-    function showSlideshow(page, items, index) {
-
-        var slideshowItems = items.map(function (item) {
-
-            var imgUrl = ApiClient.getScaledImageUrl(item.Id, {
-                
-                tag: item.ImageTags.Primary,
-                type: 'Primary'
-
-            });
-
-            return {
-                title: item.Name,
-                href: imgUrl
-            };
-        });
-
-        index = Math.max(index || 0, 0);
-
-        Dashboard.loadSwipebox().done(function () {
-
-            $.swipebox(slideshowItems, {
-                initialIndexOnArray: index,
-                hideBarsDelay: 30000
-            });
-        });
     }
 
     $(document).on('pageinit', "#itemListPage", function () {
@@ -272,9 +232,7 @@
             reloadItems(page);
         });
 
-        $('.itemsContainer', page).on('photoslideshow', function (e, index) {
+        $(page).on('click', '.mediaItem', onListItemClick);
-            startSlideshow(page, index);
-        });
 
     }).on('pageshow', "#itemListPage", function () {
 

dashboard-ui/scripts/librarybrowser.js

@@ -722,7 +722,7 @@
                         defaultAction = null;
                     }
                 }
-                var defaultActionAttribute = defaultAction ? (' data-action="' + defaultAction + '" class="itemWithAction"') : '';
+                var defaultActionAttribute = defaultAction ? (' data-action="' + defaultAction + '" class="itemWithAction mediaItem"') : ' class="mediaItem"';
                 html += '<a' + defaultActionAttribute + ' href="' + href + '">';
 
                 var imgUrl;
@@ -1462,6 +1462,8 @@
 
             var anchorCssClass = "cardContent";
 
+            anchorCssClass += ' mediaItem';
+
             if (options.defaultAction) {
                 anchorCssClass += ' itemWithAction';
             }
@@ -1651,6 +1653,25 @@
             return html;
         },
 
+        getListItemInfo: function (elem) {
+            
+            var elemWithAttributes = elem;
+
+            while (!elemWithAttributes.getAttribute('data-itemid')) {
+                elemWithAttributes = elemWithAttributes.parentNode;
+            }
+
+            var itemId = elemWithAttributes.getAttribute('data-itemid');
+            var index = elemWithAttributes.getAttribute('data-index');
+            var mediaType = elemWithAttributes.getAttribute('data-mediatype');
+
+            return {
+                id: itemId,
+                index: index,
+                mediaType: mediaType
+            };
+        },
+
         getCardTextLines: function (lines, cssClass, forceLines) {
 
             var html = '';
@@ -2546,7 +2567,14 @@
                 }
             }
 
-            html += "<img class='itemDetailImage' src='" + url + "' />";
+            var screenWidth = $(window).width();
+
+            // Take a guess about whether we should lazy load or not
+            if (screenWidth > 600) {
+                html += "<img class='itemDetailImage' src='" + url + "' />";
+            } else {
+                html += "<img class='itemDetailImage lazy' data-src='" + url + "' src='css/images/empty.png' />";
+            }
 
             if (href) {
                 html += "</a>";
@@ -2594,6 +2622,8 @@
                 elem.addClass('portraitDetailImageContainer');
                 elem.removeClass('squareDetailImageContainer');
             }
+
+            elem.lazyChildren();
         },
 
         getMiscInfoHtml: function (item) {
@@ -2849,8 +2879,7 @@
                     tag: item.BackdropImageTags[0]
                 });
 
-                $('#itemBackdrop', page).removeClass('noBackdrop').css('background-image', 'url("' + imgUrl + '")');
+                $('#itemBackdrop', page).removeClass('noBackdrop').lazyImage(imgUrl);
-
             }
             else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
 
@@ -2861,7 +2890,7 @@
                     maxWidth: screenWidth
                 });
 
-                $('#itemBackdrop', page).removeClass('noBackdrop').css('background-image', 'url("' + imgUrl + '")');
+                $('#itemBackdrop', page).removeClass('noBackdrop').lazyImage(imgUrl);
 
             }
             else {

dashboard-ui/scripts/librarylist.js

@@ -887,40 +887,13 @@
 
             itemsContainer.trigger('playallfromhere', [index]);
         }
-        else if (action == 'setplaylistindex') {
-
-            index = elemWithAttributes.getAttribute('data-index');
-
-            closeContextMenu();
-
-            MediaController.currentPlaylistIndex(index);
-        }
-        else if (action == 'photoslideshow') {
-
-            if (!$(elem).hasClass('card')) {
-                elem = $(elem).parents('.card')[0];
-            }
-
-            itemsContainer = $(elem).parents('.itemsContainer');
-            index = $('.card', itemsContainer).get().indexOf(elem);
-
-            closeContextMenu();
-
-            itemsContainer.trigger('photoslideshow', [index]);
-        }
 
         return false;
     }
 
-    function resetCardImage() {
-
-        this.style.backgroundImage = "url('css/images/empty.png')";
-    }
-
     function resetImages(page) {
 
         $('cardImage', page).remove();
-        //$('.cardImage', page).each(resetCardImage);
     }
 
     $(document).on('pageinit', ".libraryPage", function () {

dashboard-ui/scripts/librarymenu.js

@@ -59,7 +59,7 @@
                     url += "&height=" + (userButtonHeight * Math.max(devicePixelRatio || 1, 2));
                 }
 
-                html += '<img src="' + url + '" style="border-radius: 1000px; height:' + userButtonHeight + 'px;" />';
+                html += '<div class="lazy" data-src="' + url + '" style="width:' + userButtonHeight + 'px;height:' + userButtonHeight + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;"></div>';
             } else {
                 html += '<div class="fa fa-user"></div>';
             }
@@ -76,7 +76,7 @@
         html += '</div>';
 
         $(document.body).prepend(html);
-        $('.viewMenuBar').trigger('create');
+        $('.viewMenuBar').trigger('create').lazyChildren();
 
         $(document).trigger('headercreated');
         bindMenuEvents();
@@ -294,7 +294,7 @@
                         url += "&width=" + (imgWidth * Math.max(devicePixelRatio || 1, 2));
                     }
 
-                    html += '<img style="max-width:' + imgWidth + 'px;vertical-align:middle;margin-right:.8em;border-radius: 50px;" src="' + url + '" />';
+                    html += '<div class="lazy" data-src="' + url + '" style="width:' + imgWidth + 'px;height:' + imgWidth + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin-right:.8em;display:inline-block;"></div>';
                 } else {
                     html += '<span class="fa fa-user sidebarLinkIcon"></span>';
                 }
@@ -330,7 +330,7 @@
 
             $(document.body).append(html);
 
-            panel = $('#libraryPanel').panel({}).trigger('create');
+            panel = $('#libraryPanel').panel({}).lazyChildren().trigger('create');
 
             updateLibraryMenu();
         }
@@ -546,7 +546,7 @@
             $('.libraryViewNav', page).addClass('bottomLibraryViewNav');
             $(page).addClass('noSecondaryNavPage');
 
-            $(function() {
+            $(function () {
 
                 $('.footer').addClass('footerOverBottomTabs');
             });

dashboard-ui/scripts/mediaplayer.js

@@ -1493,6 +1493,10 @@
                     nowPlayingItem.BackdropItemId = item.Id;
                     nowPlayingItem.BackdropImageTag = item.BackdropImageTags[0];
                 }
+                else if (item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
+                    nowPlayingItem.BackdropItemId = item.ParentBackdropItemId;
+                    nowPlayingItem.BackdropImageTag = item.ParentBackdropImageTags[0];
+                }
 
                 if (imageTags.Thumb) {
 
@@ -1628,7 +1632,7 @@
                 return true;
             }
 
-            if ($.browser.android || ($.browser.webkit && !$.browser.chrome)) {
+            if ($.browser.mobile) {
                 return false;
             }
 

dashboard-ui/scripts/nowplayingpage.js

@@ -386,6 +386,8 @@
             MediaController.removeFromPlaylist(index);
             loadPlaylist(page);
         });
+
+        $(page).on('click', '.mediaItem', onListItemClick);
     }
 
     function onPlaybackStart(e, state) {
@@ -524,6 +526,7 @@
         $('.itemName', page).html(item ? MediaController.getNowPlayingNameHtml(item) : '');
 
         var url;
+        var backdropUrl = null;
 
         if (!item) {
         }
@@ -557,7 +560,20 @@
             return;
         }
 
+        if (item && item.BackdropImageTag) {
+
+            backdropUrl = ApiClient.getScaledImageUrl(item.BackdropItemId, {
+                type: "Backdrop",
+                maxWidth: $(window).width(),
+                tag: item.BackdropImageTag,
+                index: 0
+            });
+
+        }
+
         setImageUrl(page, url);
+
+        Backdrops.setBackdropUrl(page, backdropUrl);
     }
 
     function setImageUrl(page, url) {
@@ -631,38 +647,73 @@
 
         var html = '';
 
-        //ApiClient.getItems(Dashboard.getCurrentUserId(), {
+        ApiClient.getItems(Dashboard.getCurrentUserId(), {
 
-        //    SortBy: "SortName",
+            SortBy: "SortName",
-        //    SortOrder: "Ascending",
+            SortOrder: "Ascending",
-        //    IncludeItemTypes: "Audio",
+            IncludeItemTypes: "Audio",
-        //    Recursive: true,
+            Recursive: true,
-        //    Fields: "PrimaryImageAspectRatio,SortName,MediaSourceCount,IsUnidentified,SyncInfo",
+            Fields: "PrimaryImageAspectRatio,SortName,MediaSourceCount,IsUnidentified,SyncInfo",
-        //    StartIndex: 0,
+            StartIndex: 0,
-        //    ImageTypeLimit: 1,
+            ImageTypeLimit: 1,
-        //    EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
+            EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
-        //    Limit: 100
+            Limit: 100
 
-        //}).done(function (result) {
+        }).done(function (result) {
 
-        //    html += LibraryBrowser.getListViewHtml({
+            html += LibraryBrowser.getListViewHtml({
-        //        items: result.Items,
+                items: result.Items,
-        //        smallIcon: true,
+                smallIcon: true
-        //        defaultAction: 'setplaylistindex'
+            });
-        //    });
 
-        //    $(".playlist", page).html(html).trigger('create').lazyChildren();
+            $(".playlist", page).html(html).trigger('create').lazyChildren();
-        //});
-
-        html += LibraryBrowser.getListViewHtml({
-            items: MediaController.playlist(),
-            smallIcon: true,
-            defaultAction: 'play'
         });
 
+        //html += LibraryBrowser.getListViewHtml({
+        //    items: MediaController.playlist(),
+        //    smallIcon: true
+        //});
+
         $(".playlist", page).html(html).trigger('create').lazyChildren();
     }
 
+    function onListItemClick(e) {
+
+        var info = LibraryBrowser.getListItemInfo(this);
+
+        MediaController.currentPlaylistIndex(info.index);
+
+        return false;
+    }
+
+    function getBackdropUrl(item) {
+
+        var screenWidth = Math.max(screen.height, screen.width);
+
+        if (item.BackdropImageTags && item.BackdropImageTags.length) {
+
+            return ApiClient.getScaledImageUrl(item.Id, {
+                type: "Backdrop",
+                index: 0,
+                maxWidth: screenWidth,
+                tag: item.BackdropImageTags[0]
+            });
+
+        }
+        else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
+
+            return ApiClient.getScaledImageUrl(item.ParentBackdropItemId, {
+                type: 'Backdrop',
+                index: 0,
+                maxWidth: screenWidth,
+                tag: item.ParentBackdropImageTags[0]
+            });
+
+        }
+
+        return null;
+    };
+
     $(document).on('pageinit', "#nowPlayingPage", function () {
 
         var page = this;
@@ -673,6 +724,8 @@
 
         var page = this;
 
+        currentImgUrl = null;
+
         var tab = getParameterByName('tab');
         if (tab) {
             $('.tabButton' + tab, page).trigger('click');

dashboard-ui/scripts/photos.js

@@ -40,8 +40,6 @@
 
             updateFilterControls(page);
 
-            var defaultAction = query.MediaTypes == 'Photo' ? 'photoslideshow' : null;
-
             // Poster
             html = LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
@@ -49,8 +47,7 @@
                 context: getParameterByName('context') || 'photos',
                 showTitle: false,
                 centerText: true,
-                lazy: true,
+                lazy: true
-                defaultAction: defaultAction
             });
 
             var elem = $('#items', page).html(html).lazyChildren();
@@ -137,13 +134,11 @@
         query.ParentId = getParameterByName('parentId') || LibraryMenu.getTopParentId();
     }
 
-    function startSlideshow(page, index) {
+    function startSlideshow(page, itemQuery, startItemId) {
-
-        index += (query.StartIndex || 0);
 
         var userId = Dashboard.getCurrentUserId();
 
-        var localQuery = $.extend({}, query);
+        var localQuery = $.extend({}, itemQuery);
         localQuery.StartIndex = 0;
         localQuery.Limit = null;
         localQuery.MediaTypes = "Photo";
@@ -152,11 +147,11 @@
 
         ApiClient.getItems(userId, localQuery).done(function (result) {
 
-            showSlideshow(page, result.Items, index);
+            showSlideshow(page, result.Items, startItemId);
         });
     }
 
-    function showSlideshow(page, items, index) {
+    function showSlideshow(page, items, startItemId) {
 
         var slideshowItems = items.map(function (item) {
 
@@ -173,10 +168,17 @@
             };
         });
 
-        index = Math.max(index || 0, 0);
+        var index = items.map(function (i) {
+            return i.Id;
+
+        }).indexOf(startItemId);
+
+        if (index == -1) {
+            index = 0;
+        }
+
+        Dashboard.loadSwipebox().done(function () {
 
-        Dashboard.loadSwipebox().done(function() {
-            
             $.swipebox(slideshowItems, {
                 initialIndexOnArray: index,
                 hideBarsDelay: 30000
@@ -184,6 +186,17 @@
         });
     }
 
+    function onListItemClick(e) {
+
+        var page = $(this).parents('.page');
+        var info = LibraryBrowser.getListItemInfo(this);
+
+        if (info.mediaType == 'Photo') {
+            Photos.startSlideshow(page, query, info.id);
+            return false;
+        }
+    }
+
     $(document).on('pageinit', "#photosPage", function () {
 
         var page = this;
@@ -205,6 +218,8 @@
             reloadItems(page);
         });
 
+        $(page).on('click', '.mediaItem', onListItemClick);
+
         $('.chkStandardFilter', this).on('change', function () {
 
             var filterName = this.getAttribute('data-filter');
@@ -247,10 +262,6 @@
             reloadItems(page);
         });
 
-        $('.itemsContainer', page).on('photoslideshow', function (e, index) {
-            startSlideshow(page, index);
-        });
-
     }).on('pagebeforeshow', "#photosPage", function () {
 
         var page = this;
@@ -284,4 +295,8 @@
         updateFilterControls(this);
     });
 
+    window.Photos = {
+        startSlideshow: startSlideshow
+    };
+
 })(jQuery, document);

dashboard-ui/scripts/site.js

@@ -645,7 +645,7 @@ var Dashboard = {
                     url += "&width=" + (imgWidth * Math.max(window.devicePixelRatio || 1, 2));
                 }
 
-                html += '<img style="max-width:' + imgWidth + 'px;vertical-align:middle;margin-right:.5em;border-radius: 50px;" src="' + url + '" />';
+                html += '<div class="lazy" data-src="' + url + '" style="width:' + imgWidth + 'px;height:' + imgWidth + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin-right:.8em;display:inline-block;"></div>';
             }
             html += user.name;
             html += '</h3>';
@@ -669,7 +669,7 @@ var Dashboard = {
 
             $(document.body).append(html);
 
-            var elem = $('#userFlyout').panel({}).trigger('create').panel("open").on("panelclose", function () {
+            var elem = $('#userFlyout').panel({}).lazyChildren().trigger('create').panel("open").on("panelclose", function () {
 
                 $(this).off("panelclose").remove();
             });
@@ -1363,7 +1363,7 @@ var Dashboard = {
 
         if (AppInfo.hasLowImageBandwidth) {
 
-            quality -= 20;
+            quality -= 10;
 
             if (isBackdrop) {
                 quality -= 10;
@@ -1383,8 +1383,6 @@ var Dashboard = {
                 name = "Chrome";
             } else if ($.browser.safari) {
                 name = "Safari";
-            } else if ($.browser.webkit) {
-                name = "WebKit";
             } else if ($.browser.msie) {
                 name = "Internet Explorer";
             } else if ($.browser.opera) {
@@ -1527,8 +1525,9 @@ var AppInfo = {};
             AppInfo.enableFooterNotifications = true;
         }
 
-        AppInfo.enableUserImage = !AppInfo.hasLowImageBandwidth || !isCordova;
+        //AppInfo.enableUserImage = !AppInfo.hasLowImageBandwidth || !isCordova;
-        AppInfo.enableHeaderImages = AppInfo.enableUserImage;
+        AppInfo.enableUserImage = true;
+        AppInfo.enableHeaderImages = !AppInfo.hasLowImageBandwidth || !isCordova;
     }
 
     function initializeApiClient(apiClient) {

dashboard-ui/thirdparty/browser.js

@@ -907,7 +907,7 @@
         ua = ua.toLowerCase();
 
         var match = /(chrome)[ \/]([\w.]+)/.exec(ua) ||
-            /(webkit)[ \/]([\w.]+)/.exec(ua) ||
+            /(safari)[ \/]([\w.]+)/.exec(ua) ||
             /(opera)(?:.*version|)[ \/]([\w.]+)/.exec(ua) ||
             /(msie) ([\w.]+)/.exec(ua) ||
             ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua) ||
@@ -920,7 +920,7 @@
 
         var browser = match[1] || "";
 
-        if (ua.indexOf("like gecko") != -1 && ua.indexOf('webkit') == -1 && ua.indexOf('opera') == -1) {
+        if (ua.indexOf("like gecko") != -1 && ua.indexOf('webkit') == -1 && ua.indexOf('opera') == -1 && ua.indexOf('chrome') == -1 && ua.indexOf('safari') == -1) {
             browser = "msie";
         }
 
@@ -945,16 +945,14 @@
     }
 
     // Chrome is Webkit, but Webkit is also Safari.
-    if (browser.chrome) {
+    if (browser.chrome || $.browser.safari) {
         browser.webkit = true;
-    } else if (browser.webkit) {
-        browser.safari = true;
     }
 
     var md = new MobileDetect(userAgent);
 
     browser.mobile = md.mobile();
-    
+
     if (browser.msie && !browser.mobile && userAgent.toLowerCase().indexOf("xbox") != -1) {
         browser.tv = true;
     }

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

@@ -8,7 +8,9 @@
  * https://github.com/luis-almeida
  */
 
-; (function ($) {
+(function ($) {
+
+    var unveilId = 0;
 
     $.fn.unveil = function (threshold, callback) {
 
@@ -18,18 +20,14 @@
             images = this,
             loaded;
 
+        unveilId++;
+        var eventNamespace = 'unveil' + unveilId;
+
         this.one("unveil", function () {
             var elem = this;
-            var elemType = elem.tagName;
             var source = elem.getAttribute(attrib);
             if (source) {
-                if (elemType === "DIV") {
+                ImageStore.setImageInto(elem, source);
-
-                    elem.style.backgroundImage = "url('" + source + "')";
-
-                } else {
-                    elem.setAttribute("src", source);
-                }
                 elem.setAttribute("data-src", '');
             }
         });
@@ -37,8 +35,8 @@
         function unveil() {
             var inview = images.filter(function () {
                 var $e = $(this);
-                if ($e.is(":hidden")) return;
 
+                if ($e.is(":hidden")) return;
                 var wt = $w.scrollTop(),
                     wb = wt + $w.height(),
                     et = $e.offset().top,
@@ -49,10 +47,15 @@
 
             loaded = inview.trigger("unveil");
             images = images.not(loaded);
+
+            if (!images.length) {
+                $w.off('scroll.' + eventNamespace);
+                $w.off('resize.' + eventNamespace);
+            }
         }
 
-        $w.on('scroll.unveil', unveil);
+        $w.on('scroll.' + eventNamespace, unveil);
-        $w.on('resize.unveil', unveil);
+        $w.on('resize.' + eventNamespace, unveil);
 
         unveil();
 
@@ -62,8 +65,274 @@
 
     $.fn.lazyChildren = function () {
 
-        $(".lazy", this).unveil(0);
+        var lazyItems = $(".lazy", this);
+
+        if (lazyItems.length) {
+            lazyItems.unveil(0);
+        }
+
         return this;
     };
 
-})(window.jQuery || window.Zepto);
+    $.fn.lazyImage = function (url) {
+
+        return this.attr('data-src', url).unveil(0);
+    };
+
+})(window.jQuery || window.Zepto);
+
+(function () {
+
+    // IndexedDB
+    var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
+        dbVersion = 1.0;
+
+    var dbName = "emby3";
+    var imagesStoreName = "images";
+
+    function createObjectStore(dataBase) {
+        // Create an objectStore
+        console.log("Creating objectStore");
+        dataBase.createObjectStore(imagesStoreName);
+    }
+
+    function openDb() {
+
+        var deferred = $.Deferred();
+
+        // Create/open database
+        var request = indexedDB.open(dbName, dbVersion);
+
+        request.onerror = function (event) {
+
+            console.log("Error creating/accessing IndexedDB database");
+            deferred.reject();
+        };
+
+        request.onsuccess = function (event) {
+            console.log("Success creating/accessing IndexedDB database");
+
+            var db = request.result || event.target.result;
+
+            db.onerror = function (event) {
+                console.log("Error creating/accessing IndexedDB database");
+            };
+
+            // Interim solution for Google Chrome to create an objectStore. Will be deprecated
+            if (db.setVersion) {
+                if (db.version != dbVersion) {
+                    var setVersion = db.setVersion(dbVersion);
+                    setVersion.onsuccess = function () {
+                        createObjectStore(db);
+                        deferred.resolveWith(null, [db]);
+                    };
+                } else {
+                    deferred.resolveWith(null, [db]);
+                }
+            } else {
+                deferred.resolveWith(null, [db]);
+            }
+        }
+
+        // For future use. Currently only in latest Firefox versions
+        request.onupgradeneeded = function (event) {
+            createObjectStore(event.target.result);
+        };
+
+        return deferred.promise();
+    }
+
+    function indexedDbImageStore() {
+
+        var self = this;
+
+        var openPromise = openDb().done(function (db) {
+
+            self._db = db;
+        });
+
+        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.revokeUrl = function (url) {
+
+            // Get window.URL object
+            var URL = window.URL || window.webkitURL;
+            URL.revokeObjectURL(url);
+        };
+
+        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 {
+
+                        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;
+
+                        // Put the received blob into IndexedDB
+                        self.addImageToDatabase(dataURL, key);
+                        deferred.resolve();
+                    } catch (err) {
+                        deferred.reject();
+                    }
+                }
+            }, false);
+
+            // Send XHR
+            xhr.send();
+            return deferred.promise();
+        };
+
+        self.setImageInto = function (elem, url) {
+
+            //if (!self.db()) {
+            //    if (elem.tagName === "DIV") {
+
+            //        elem.style.backgroundImage = "url('" + url + "')";
+
+            //    } else {
+            //        elem.setAttribute("src", url);
+            //    }
+            //    return;
+            //}
+
+            openPromise.done(function () {
+
+                self.getImageUrl(url).done(function (localUrl) {
+
+                    if (elem.tagName === "DIV") {
+
+                        elem.style.backgroundImage = "url('" + localUrl + "')";
+
+                    } else {
+                        elem.setAttribute("src", localUrl);
+                    }
+
+                }).fail(function() {
+                    new simpleImageStore().setImageInto(elem, url);
+                });
+
+            });
+
+        };
+    }
+
+    function simpleImageStore() {
+
+        var self = this;
+
+        self.setImageInto = function (elem, url) {
+
+            if (elem.tagName === "DIV") {
+
+                elem.style.backgroundImage = "url('" + url + "')";
+
+            } else {
+                elem.setAttribute("src", url);
+            }
+        };
+    }
+
+    if ($.browser.safari && indexedDB) {
+        window.ImageStore = new indexedDbImageStore();
+    } else {
+        window.ImageStore = new simpleImageStore();
+    }
+
+})();