update detail images

dashboard-ui/scripts/itembynamedetailpage.js

@@ -315,7 +315,7 @@
     function renderDetails(page, item, context) {
 
         //LibraryBrowser.renderDetailPageBackdrop(page, item);
-        LibraryBrowser.renderOverview($('.itemOverview', page), item);
+        LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), item);
 
         renderUserDataIcons(page, item);
         LibraryBrowser.renderLinks($('#itemLinks', page), item);

dashboard-ui/scripts/itemdetailpage.js

@@ -123,7 +123,7 @@
 
         var imageHref = user.Policy.IsAdministrator && item.MediaType != 'Photo' ? "edititemimages.html?id=" + item.Id : "";
 
-        LibraryBrowser.renderDetailImage($('.detailImageContainer', page), item, imageHref);
+        LibraryBrowser.renderDetailImage(page.querySelector('.detailImageContainer'), item, imageHref);
     }
 
     function onWebSocketMessage(e, data) {
@@ -362,7 +362,7 @@
             $('#itemTagline', page).hide();
         }
 
-        LibraryBrowser.renderOverview($('.itemOverview', page), item);
+        LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), item);
 
         $('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(item));
 

dashboard-ui/scripts/librarybrowser.js

@@ -2660,40 +2660,51 @@
 
             html += "</div>";
 
-            elem.html(html);
+            elem.innerHTML = html;
+
+            function addClass(elems, name) {
+                for (var i = 0, length = elems.length; i < length; i++) {
+                    elems[i].classList.add(name);
+                }
+            }
+            function removeClass(elems, name) {
+                for (var i = 0, length = elems.length; i < length; i++) {
+                    elems[i].classList.remove(name);
+                }
+            }
 
             var page = $(elem).parents('.page')[0];
 
-            var detailContentEffectedByImage = page.querySelector('.detailContentEffectedByImage');
+            var detailContentEffectedByImage = page.querySelectorAll('.detailContentEffectedByImage');
 
             if (shape == 'thumb') {
-                detailContentEffectedByImage.classList.add('detailContentEffectedByThumbImage');
+                addClass(detailContentEffectedByImage, 'detailContentEffectedByThumbImage');
-                detailContentEffectedByImage.classList.remove('detailContentEffectedBySquareImage');
+                removeClass(detailContentEffectedByImage, 'detailContentEffectedBySquareImage');
-                detailContentEffectedByImage.classList.remove('detailContentEffectedByPortraitImage');
+                removeClass(detailContentEffectedByImage, 'detailContentEffectedByPortraitImage');
 
-                elem.addClass('thumbDetailImageContainer');
+                elem.classList.add('thumbDetailImageContainer');
-                elem.removeClass('portraitDetailImageContainer');
+                elem.classList.add('portraitDetailImageContainer');
-                elem.removeClass('squareDetailImageContainer');
+                elem.classList.add('squareDetailImageContainer');
             }
             else if (shape == 'square') {
-                detailContentEffectedByImage.classList.remove('detailContentEffectedByThumbImage');
+                removeClass(detailContentEffectedByImage, 'detailContentEffectedByThumbImage');
-                detailContentEffectedByImage.classList.add('detailContentEffectedBySquareImage');
+                removeClass(detailContentEffectedByImage, 'detailContentEffectedByPortraitImage');
-                detailContentEffectedByImage.classList.remove('detailContentEffectedByPortraitImage');
+                addClass(detailContentEffectedByImage, 'detailContentEffectedBySquareImage');
 
-                elem.removeClass('thumbDetailImageContainer');
+                elem.classList.add('thumbDetailImageContainer');
-                elem.removeClass('portraitDetailImageContainer');
+                elem.classList.add('portraitDetailImageContainer');
-                elem.addClass('squareDetailImageContainer');
+                elem.classList.add('squareDetailImageContainer');
             } else {
-                detailContentEffectedByImage.classList.remove('detailContentEffectedByThumbImage');
+                removeClass(detailContentEffectedByImage, 'detailContentEffectedByThumbImage');
-                detailContentEffectedByImage.classList.remove('detailContentEffectedBySquareImage');
+                removeClass(detailContentEffectedByImage, 'detailContentEffectedBySquareImage');
-                detailContentEffectedByImage.classList.add('detailContentEffectedByPortraitImage');
+                addClass(detailContentEffectedByImage, 'detailContentEffectedByPortraitImage');
 
-                elem.removeClass('thumbDetailImageContainer');
+                elem.classList.add('thumbDetailImageContainer');
-                elem.addClass('portraitDetailImageContainer');
+                elem.classList.add('portraitDetailImageContainer');
-                elem.removeClass('squareDetailImageContainer');
+                elem.classList.remove('squareDetailImageContainer');
             }
 
-            elem.lazyChildren();
+            ImageLoader.lazyChildren(elem);
         },
 
         getDisplayTime: function (date) {
@@ -2869,7 +2880,6 @@
 
             var overview = item.Overview || '';
 
-            elem = elem[0];
             elem.innerHTML = overview;
 
             $('a', elem).each(function () {

dashboard-ui/scripts/livetvnewrecording.js

@@ -15,7 +15,7 @@
         $('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(program));
 
         LibraryBrowser.renderGenres($('.itemGenres', page), program, context);
-        LibraryBrowser.renderOverview($('.itemOverview', page), program);
+        LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), program);
 
         $('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(program));
 

dashboard-ui/scripts/livetvprogram.js

@@ -45,7 +45,7 @@
             $('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item));
 
             LibraryBrowser.renderGenres($('.itemGenres', page), item, context);
-            LibraryBrowser.renderOverview($('.itemOverview', page), item);
+            LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), item);
             $('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
 
             LiveTvHelpers.renderMiscProgramInfo($('.miscTvProgramInfo', page), item);

dashboard-ui/scripts/livetvrecording.js

@@ -50,7 +50,7 @@
         $('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item));
 
         LibraryBrowser.renderGenres($('.itemGenres', page), item, context);
-        LibraryBrowser.renderOverview($('.itemOverview', page), item);
+        LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), item);
         $('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
 
         LiveTvHelpers.renderMiscProgramInfo($('.miscTvProgramInfo', page), item);

dashboard-ui/scripts/livetvtimer.js

@@ -35,7 +35,7 @@
         $('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(programInfo));
 
         LibraryBrowser.renderGenres($('.itemGenres', page), programInfo, context);
-        LibraryBrowser.renderOverview($('.itemOverview', page), programInfo);
+        LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), programInfo);
 
         if (programInfo.ImageTags && programInfo.ImageTags.Primary) {
 

dashboard-ui/scripts/musicrecommended.js

@@ -32,7 +32,8 @@
 
         ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).done(function (items) {
 
-            $('#recentlyAddedSongs', page).html(LibraryBrowser.getPosterViewHtml({
+            var elem = page.querySelector('#recentlyAddedSongs');
+            elem.innerHTML = LibraryBrowser.getPosterViewHtml({
                 items: items,
                 showUnplayedIndicator: false,
                 showLatestItemsPopup: false,
@@ -42,7 +43,8 @@
                 lazy: true,
                 cardLayout: true
 
-            })).lazyChildren();
+            });
+            ImageLoader.lazyChildren(elem);
 
             Dashboard.hideLoadingMsg();
         });
@@ -66,13 +68,16 @@
 
         ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
 
+            var elem;
+
             if (result.Items.length) {
-                $('#recentlyPlayed', page).show();
+                elem = $('#recentlyPlayed', page).show()[0];
             } else {
-                $('#recentlyPlayed', page).hide();
+                elem = $('#recentlyPlayed', page).hide()[0];
             }
 
-            $('#recentlyPlayedSongs', page).html(LibraryBrowser.getPosterViewHtml({
+            var itemsContainer = elem.querySelector('.itemsContainer');
+            itemsContainer.innerHTML = LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
                 showUnplayedIndicator: false,
                 shape: getSquareShape(),
@@ -82,7 +87,8 @@
                 lazy: true,
                 cardLayout: true
 
-            })).lazyChildren();
+            });
+            ImageLoader.lazyChildren(itemsContainer);
 
         });
 
@@ -106,13 +112,16 @@
 
         ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
 
+            var elem;
+
             if (result.Items.length) {
-                $('#topPlayed', page).show();
+                elem = $('#topPlayed', page).show()[0];
             } else {
-                $('#topPlayed', page).hide();
+                elem = $('#topPlayed', page).hide()[0];
             }
 
-            $('#topPlayedSongs', page).html(LibraryBrowser.getPosterViewHtml({
+            var itemsContainer = elem.querySelector('.itemsContainer');
+            itemsContainer.innerHTML = LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
                 showUnplayedIndicator: false,
                 shape: getSquareShape(),
@@ -122,7 +131,8 @@
                 lazy: true,
                 cardLayout: true
 
-            })).lazyChildren();
+            });
+            ImageLoader.lazyChildren(itemsContainer);
 
         });
 
@@ -147,12 +157,13 @@
             var elem;
 
             if (result.Items.length) {
-                elem = $('#playlists', page).show();
+                elem = $('#playlists', page).show()[0];
             } else {
-                elem = $('#playlists', page).hide();
+                elem = $('#playlists', page).hide()[0];
             }
 
-            $('.itemsContainer', elem).html(LibraryBrowser.getPosterViewHtml({
+            var itemsContainer = elem.querySelector('.itemsContainer');
+            itemsContainer.innerHTML = LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
                 shape: getSquareShape(),
                 showTitle: true,
@@ -162,7 +173,8 @@
                 showItemCounts: true,
                 cardLayout: true
 
-            })).lazyChildren();
+            });
+            ImageLoader.lazyChildren(itemsContainer);
 
         });
     }

dashboard-ui/scripts/nowplayingpage.js

@@ -619,7 +619,9 @@
             smallIcon: true
         });
 
-        $(".playlist", page).html(html).trigger('create').lazyChildren();
+        var itemsContainer = elem.querySelector('.playlist');
+        itemsContainer.innerHTML = html;
+        ImageLoader.lazyChildren(html).trigger('create');
     }
 
     function onListItemClick(e) {

dashboard-ui/scripts/search.js

@@ -91,7 +91,10 @@
             centerImage: true,
             textLines: getAdditionalTextLines
         });
-        $('.itemsContainer', elem).html(html).lazyChildren();
+
+        var itemsContainer = elem.querySelector('.itemsContainer');
+        itemsContainer.innerHTML = html;
+        ImageLoader.lazyChildren(html);
     }
 
     function requestSearchHintsForOverlay(elem, searchTerm) {

dashboard-ui/scripts/sections.js

@@ -178,8 +178,9 @@
             }
 
             elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
 
-            $(elem).lazyChildren().createCardMenus();
+            $(elem).createCardMenus();
         });
     }
 
@@ -215,8 +216,9 @@
             }
 
             elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
 
-            $(elem).lazyChildren().createCardMenus();
+            $(elem).createCardMenus();
         });
     }
 
@@ -267,8 +269,9 @@
             }
 
             elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
 
-            $(elem).lazyChildren().createCardMenus({ showDetailsMenu: false });
+            $(elem).createCardMenus({ showDetailsMenu: false });
 
             handleLibraryLinkNavigations(elem);
         });
@@ -323,7 +326,8 @@
 
             elem.innerHTML = html;
 
-            $(elem).lazyChildren().createCardMenus();
+            ImageLoader.lazyChildren(elem);
+            $(elem).createCardMenus();
         });
     }
 
@@ -412,8 +416,9 @@
 
             var elem = page.querySelector('#channel' + channel.Id + '');
             elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
 
-            $(elem).lazyChildren().trigger('create').createCardMenus();
+            $(elem).createCardMenus();
         });
     }
 
@@ -453,9 +458,7 @@
             });
 
             elem.innerHTML = html;
-
+            ImageLoader.lazyChildren(elem);
-            $(elem).lazyChildren().trigger('create');
-
         });
     }
 

dashboard-ui/scripts/tvlatest.js

@@ -67,8 +67,9 @@
                 });
             }
 
-            $('#latestEpisodes', page).html(html).lazyChildren();
+            var elem = page.querySelector('#latestEpisodes');
-
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
         });
     });
 

dashboard-ui/scripts/tvrecommended.js

@@ -92,7 +92,9 @@
                 });
             }
 
-            $('#nextUpItems', page).html(html).lazyChildren();
+            var elem = page.querySelector('#nextUpItems');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
             Dashboard.hideLoadingMsg();
         });
     }
@@ -166,8 +168,9 @@
                 });
             }
 
-            $('#resumableItems', page).html(html).lazyChildren();
+            var elem = page.querySelector('#resumableItems');
-
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
         });
     }
 

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

@@ -97,12 +97,11 @@
 
     var threshold = getThreshold();
 
-    function isVisible() {
+    function isVisible(elem) {
-        return visibleInViewport(this, true, false, 'both', threshold);
+        return visibleInViewport(elem, true, false, 'both', threshold);
     }
 
-    function fillImage() {
+    function fillImage(elem) {
-        var elem = this;
         var source = elem.getAttribute('data-src');
         if (source) {
             ImageStore.setImageInto(elem, source);
@@ -116,19 +115,25 @@
             return;
         }
 
-        var images = $(elems),
+        var images = elems;
-        loaded;
 
         unveilId++;
         var eventNamespace = 'unveil' + unveilId;
 
-        images.one("unveil", fillImage);
-
         function unveil() {
-            var inview = images.filter(isVisible);
 
-            loaded = inview.trigger("unveil");
+            var remaining = [];
-            images = images.not(loaded);
+
+            for (var i = 0, length = images.length; i < length; i++) {
+                var img = images[i];
+                if (isVisible(img)) {
+                    fillImage(img);
+                } else {
+                    remaining.push(img);
+                }
+            }
+
+            images = remaining;
 
             if (!images.length) {
                 Events.off(window, 'scroll.' + eventNamespace);