Merge pull request #1682 from MediaBrowser/dev

Dev

dashboard-ui/bower_components/emby-lazyload-image/lazyload-image.html

@@ -1,8 +1,8 @@
 <script>
 
-    //require(['imageFetcher'], function (imageFetcher) {
+    require(['imageFetcher'], function (imageFetcher) {
-    //    window.ImageFetcherLazyloadImage = imageFetcher;
+        window.ImageFetcherLazyloadImage = imageFetcher;
-    //});
+    });
 
     /**
      * <lazyload-image>
@@ -16,83 +16,25 @@
         'use strict';
 
         var FALLBACK_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==';
-        var DEFAULT_OFFSET = 0;
 
         // create prototype from HTMLImageElement
         var LazyloadImagePrototype = Object.create(HTMLImageElement.prototype);
 
-        function fadeIn(elem) {
-
-            if (elem.classList.contains('noFade')) {
-                return;
-            }
-
-            var keyframes = [
-              { opacity: '0', offset: 0 },
-              { opacity: '1', offset: 1 }];
-            var timing = { duration: 300, iterations: 1 };
-            elem.animate(keyframes, timing);
-        }
-
-        function imgObserver(that, mutations) {
-            mutations.forEach(function (mutation) {
-
-                if (mutation.attributeName != 'src') {
-                    return;
-                }
-
-                var src = that.src;
-
-                if (src && src != FALLBACK_IMAGE) {
-
-                    if (!that.loadingSrc) {
-                        that.src = FALLBACK_IMAGE;
-                        that.loadingSrc = src;
-
-                        ImageFetcherLazyloadImage.loadImage(that, src);
-                    } else {
-                        that.loadingSrc = null;
-                    }
-
-                } else if (!src) {
-                    that.src = FALLBACK_IMAGE;
-                }
-            });
-        }
-
         // lifecycle callbacks
-        LazyloadImagePrototype.createdCallback = function () {
+        //LazyloadImagePrototype.createdCallback = function () {
-
-            var that = this;
-
-            if (window.ImageFetcherLazyloadImage) {
-                // swap original src attribute
-                this.original = this.currentSrc || this.src;
-                this.src = FALLBACK_IMAGE;
-
-                var observer = new MutationObserver(function (mutations) {
-                    imgObserver(that, mutations);
-                });
-
-                // pass in the target node, as well as the observer options
-                observer.observe(this, { attributes: true, childList: false, characterData: false });
-
-                this.observer = observer;
-            }
-        };
-
-        //LazyloadImagePrototype.attachedCallback = function () {
-
 
         //};
 
-        LazyloadImagePrototype.detachedCallback = function () {
+        LazyloadImagePrototype.attachedCallback = function () {
 
-            if (this.observer) {
+            var original = this.currentSrc || this.src;
-                // later, you can stop observing
+
-                this.observer.disconnect();
+            if (original && window.ImageFetcherLazyloadImage) {
+                //console.log(original);
+                this.src = FALLBACK_IMAGE;
+                console.log('loading ' + original);
+                ImageFetcherLazyloadImage.loadImage(this, original);
             }
-
         };
 
         return document.registerElement('lazyload-image', {

dashboard-ui/bower_components/iron-icon/.bower.json

@@ -32,14 +32,14 @@
     "web-component-tester": "^4.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
-  "homepage": "https://github.com/PolymerElements/iron-icon",
+  "homepage": "https://github.com/polymerelements/iron-icon",
   "_release": "1.0.8",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.8",
     "commit": "f36b38928849ef3853db727faa8c9ef104d611eb"
   },
-  "_source": "git://github.com/PolymerElements/iron-icon.git",
+  "_source": "git://github.com/polymerelements/iron-icon.git",
   "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/iron-icon"
+  "_originalSource": "polymerelements/iron-icon"
 }

dashboard-ui/components/ironcardlist/ironcardlist.js

@@ -2,7 +2,7 @@
 
     function getTemplate(scrollTarget) {
 
-        var maxPhysical = 80;
+        var maxPhysical = 200;
 
         // is="lazyload-image" 
 

dashboard-ui/components/ironcardlist/ironcardlist.template.html

@@ -6,7 +6,7 @@
                     <div class="cardScalable">
                         <div class="cardPadder"></div>
                         <a onclick$="{{item.onclick}}" data-action$="{{item.defaultAction}}" class$="{{item.anchorClass}}" href$="{{item.href}}">
-                            <img class$="{{item.imageClass}}" src$="{{item.imgUrl}}" />
+                            <img is="lazyload-image" class$="{{item.imageClass}}" src$="{{item.imgUrl}}" />
                             <div inner-h-t-m-l="{{item.overlayHtml}}"></div>
                         </a>
                     </div>

dashboard-ui/css/librarybrowser.css

@@ -1192,7 +1192,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 }
 
 .layout-desktop .absolutePageTabContent .alphabetPicker {
-    right: 15px;
+    right: 20px;
 }
 
 .alphabetPicker a {

dashboard-ui/scripts/episodes.js

@@ -183,7 +183,7 @@
                 self.showFilterMenu();
             });
 
-            tabContent.querySelector('.btnSort').addEventListener('click', function () {
+            tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
                 libraryBrowser.showSortMenu({
                     items: [{
                         name: Globalize.translate('OptionNameSort'),
@@ -224,7 +224,8 @@
                     callback: function () {
                         reloadItems(tabContent);
                     },
-                    query: getQuery(tabContent)
+                    query: getQuery(tabContent),
+                    button: e.target
                 });
             });
 

dashboard-ui/scripts/librarybrowser.js

@@ -2163,7 +2163,6 @@
                         item['data-' + att.name] = att.value;
                     }
                 }
-                console.log(item['data-commands']);
 
                 var defaultAction = options.defaultAction;
                 if (defaultAction == 'play' || defaultAction == 'playallfromhere') {

dashboard-ui/scripts/librarylist.js

@@ -671,7 +671,7 @@
             if (itemSelectionPanel) {
                 return onItemSelectionPanelClick(e, itemSelectionPanel);
             }
-            if (card.classList.contains('groupedCard')) {
+            else if (card.classList.contains('groupedCard')) {
                 return onGroupedCardClick(e, card);
             }
         }
@@ -891,7 +891,6 @@
             element.classList.add('hasTapHold');
 
             manager.on('press', onTapHold);
-            manager.on('pressup', onTapHoldUp);
         });
 
         showTapHoldHelp(element);
@@ -952,23 +951,6 @@
         return false;
     }
 
-    function onTapHoldUp(e) {
-
-        var itemSelectionPanel = parentWithClass(e.target, 'itemSelectionPanel');
-
-        if (itemSelectionPanel) {
-            if (!parentWithClass(e.target, 'chkItemSelect')) {
-                var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
-
-                if (chkItemSelect) {
-                    chkItemSelect.checked = !chkItemSelect.checked;
-                }
-            }
-            e.preventDefault();
-            return false;
-        }
-    }
-
     function onItemSelectionPanelClick(e, itemSelectionPanel) {
 
         // toggle the checkbox, if it wasn't clicked on
@@ -976,11 +958,16 @@
             var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
 
             if (chkItemSelect) {
+
+                if (chkItemSelect.classList.contains('checkedInitial')) {
+                    chkItemSelect.classList.remove('checkedInitial');
+                } else {
                     var newValue = !chkItemSelect.checked;
                     chkItemSelect.checked = newValue;
                     updateItemSelection(chkItemSelect, newValue);
                 }
             }
+        }
 
         e.preventDefault();
         e.stopPropagation();
@@ -991,7 +978,7 @@
         updateItemSelection(this, this.checked);
     }
 
-    function showSelection(item) {
+    function showSelection(item, isChecked) {
 
         var itemSelectionPanel = item.querySelector('.itemSelectionPanel');
 
@@ -1002,12 +989,16 @@
 
             item.querySelector('.cardContent').appendChild(itemSelectionPanel);
 
-            var chkItemSelect = document.createElement('paper-checkbox');
+            var cssClass = 'chkItemSelect';
-            chkItemSelect.classList.add('chkItemSelect');
+            if (isChecked && !browserInfo.firefox) {
-
+                // In firefox, the initial tap hold doesnt' get treated as a click
-            $(chkItemSelect).on('change', onSelectionChange);
+                // In other browsers it does, so we need to make sure that initial click is ignored
-
+                cssClass += ' checkedInitial';
-            itemSelectionPanel.appendChild(chkItemSelect);
+            }
+            var checkedAttribute = isChecked ? ' checked' : '';
+            itemSelectionPanel.innerHTML = '<paper-checkbox class="' + cssClass + '"' + checkedAttribute + '></paper-checkbox>';
+            var chkItemSelect = itemSelectionPanel.querySelector('paper-checkbox');
+            chkItemSelect.addEventListener('change', onSelectionChange);
         }
     }
 
@@ -1059,7 +1050,10 @@
           { transform: 'translate3d(-10px, 0, 0)', offset: 0.9 },
           { transform: 'translate3d(0, 0, 0)', offset: 1 }];
         var timing = { duration: 900, iterations: iterations };
-        return elem.animate(keyframes, timing);
+
+        if (elem.animate) {
+            elem.animate(keyframes, timing);
+        }
     }
 
     function showSelections(initialCard) {
@@ -1067,11 +1061,10 @@
         require(['paper-checkbox'], function () {
             var cards = document.querySelectorAll('.card');
             for (var i = 0, length = cards.length; i < length; i++) {
-                showSelection(cards[i]);
+                showSelection(cards[i], initialCard == cards[i]);
             }
 
             showSelectionCommands();
-            initialCard.querySelector('.chkItemSelect').checked = true;
             updateItemSelection(initialCard, true);
         });
     }

dashboard-ui/scripts/site.js

@@ -3107,11 +3107,11 @@ pageClassOn('viewshow', "page", function () {
         page.classList.remove('ui-body-a');
     }
 
-    if (currentTheme != 'a' && !browserInfo.mobile) {
+    //if (currentTheme != 'a' && !browserInfo.mobile) {
-        document.documentElement.classList.add('darkScrollbars');
+    //    document.documentElement.classList.add('darkScrollbars');
-    } else {
+    //} else {
-        document.documentElement.classList.remove('darkScrollbars');
+    //    document.documentElement.classList.remove('darkScrollbars');
-    }
+    //}
 
     var apiClient = window.ApiClient;
 

dashboard-ui/scripts/tvshows.js

@@ -153,7 +153,6 @@
 
                 // Hack: notifyResize needs to be done after the items have been rendered
                 setTimeout(function () {
-
                     ironList.notifyResize();
                     self.scrollThreshold.resetSize();
                 }, 300);
@@ -213,7 +212,7 @@
                 self.showFilterMenu();
             });
 
-            tabContent.querySelector('.btnSort').addEventListener('click', function () {
+            tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
                 libraryBrowser.showSortMenu({
                     items: [{
                         name: Globalize.translate('OptionNameSort'),
@@ -251,7 +250,8 @@
                         getQuery(tabContent).StartIndex = 0;
                         reloadItems(tabContent);
                     },
-                    query: getQuery(tabContent)
+                    query: getQuery(tabContent),
+                    button: e.target
                 });
             });
 
@@ -287,6 +287,11 @@
 
                 tabContent.querySelector('.itemsContainer').innerHTML = html;
                 self.listCreated = true;
+
+                return new Promise(function (resolve, reject) {
+
+                    setTimeout(resolve, 2000);
+                });
             });
         }