update by genre views

dashboard-ui/bower_components/emby-webcomponents/.bower.json

@@ -14,12 +14,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.337",
+  "version": "1.4.338",
-  "_release": "1.4.337",
+  "_release": "1.4.338",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.337",
+    "tag": "1.4.338",
-    "commit": "1653cc935acba06056afae3a6fc8bce17fb46a7a"
+    "commit": "89d5917a0c6425e6f07868b92c9cabb04dcd0139"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.1",

dashboard-ui/bower_components/emby-webcomponents/lazyloader/lazyloader-intersectionobserver.js

@@ -15,17 +15,24 @@ define(['visibleinviewport', 'browser', 'dom'], function (visibleinviewport, bro
 
         //options.rootMargin = "300%";
 
+        var observerId = 'obs' + new Date().getTime();
+
         var self = this;
         var observer = new IntersectionObserver(function (entries) {
             for (var j = 0, length2 = entries.length; j < length2; j++) {
                 var entry = entries[j];
                 var target = entry.target;
-                observer.unobserve(target);
-                callback(target);
-                loadedCount++;
 
-                if (loadedCount >= self.elementCount) {
+                observer.unobserve(target);
-                    self.destroyObserver();
+
+                if (!target[observerId]) {
+                    target[observerId] = 1;
+                    callback(target);
+                    loadedCount++;
+
+                    if (loadedCount >= self.elementCount) {
+                        self.destroyObserver();
+                    }
                 }
             }
         },

dashboard-ui/movies.html

@@ -95,10 +95,7 @@
             <button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize"><i class="md-icon">add</i></button>
         </div>
 
-        <div class="alphaPicker alphabetPicker alphaPicker-vertical">
+        <div is="emby-itemscontainer" class="itemsContainer vertical-wrap centered" style="text-align:center;">
-        </div>
-
-        <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker centered" style="text-align:center;">
         </div>
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>

dashboard-ui/scripts/moviecollections.js

@@ -1,4 +1,4 @@
-define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder) {
+define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView, cardBuilder) {
     'use strict';
 
     return function (view, params, tabContent) {
@@ -205,26 +205,10 @@
 
         function updateFilterControls(tabContent) {
 
-            var query = getQuery(tabContent);
-            self.alphaPicker.value(query.NameStartsWithOrGreater);
         }
 
         function initPage(tabContent) {
 
-            var alphaPickerElement = tabContent.querySelector('.alphaPicker');
-            alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
-                var newValue = e.detail.value;
-                var query = getQuery(tabContent);
-                query.NameStartsWithOrGreater = newValue;
-                query.StartIndex = 0;
-                reloadItems(tabContent);
-            });
-
-            self.alphaPicker = new alphaPicker({
-                element: alphaPickerElement,
-                valueChangeEvent: 'click'
-            });
-
             tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
                 libraryBrowser.showSortMenu({
                     items: [{

dashboard-ui/scripts/moviegenres.js

@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost'], function (libraryBrowser, cardBuilder, lazyLoader, appHost) {
+define(['libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost', 'globalize', 'dom'], function (libraryBrowser, cardBuilder, lazyLoader, appHost, globalize, dom) {
     'use strict';
 
     return function (view, params, tabContent) {
@@ -56,7 +56,24 @@
 
         function getPortraitShape() {
             return enableScrollX() ? 'overflowPortrait' : 'portrait';
-        }
+        }
+
+        function getMoreItemsHref(itemId, type) {
+
+            return 'secondaryitems.html?type=' + type + '&parentId=' + itemId;
+        }
+
+        dom.addEventListener(tabContent, 'click', function (e) {
+
+            var btnMoreFromGenre = dom.parentWithClass(e.target, 'btnMoreFromGenre');
+            if (btnMoreFromGenre) {
+                var id = btnMoreFromGenre.getAttribute('data-id');
+                Dashboard.navigate(getMoreItemsHref(id, 'Movie'));
+            }
+
+        }, {
+            passive: true
+        });
 
         function fillItemsContainer(elem) {
 
@@ -144,6 +161,9 @@
                     });
                 }
 
+                if (result.Items.length >= query.Limit) {
+                    tabContent.querySelector('.btnMoreFromGenre' + id).classList.remove('hide');
+                }
             });
         }
 
@@ -163,9 +183,15 @@
                     var item = items[i];
 
                     html += '<div class="homePageSection">';
+
+                    html += '<div style="display:flex;align-items:center;">';
                     html += '<h1 class="listHeader">';
                     html += item.Name;
                     html += '</h1>';
+                    html += '<button is="emby-button" type="button" class="raised more mini noIcon hide btnMoreFromGenre btnMoreFromGenre' + item.Id + '" data-id="' + item.Id + '">';
+                    html += '<span>' + globalize.translate('ButtonMore') + '</span>';
+                    html += '</button>';
+                    html += '</div>';
 
                     if (enableScrollX()) {
                         html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX lazy" data-id="' + item.Id + '">';

dashboard-ui/scripts/tvgenres.js

@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost'], function (libraryBrowser, cardBuilder, lazyLoader, appHost) {
+define(['libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost', 'globalize', 'dom'], function (libraryBrowser, cardBuilder, lazyLoader, appHost, globalize, dom) {
     'use strict';
 
     return function (view, params, tabContent) {
@@ -56,7 +56,24 @@
 
         function getPortraitShape() {
             return enableScrollX() ? 'overflowPortrait' : 'portrait';
-        }
+        }
+
+        function getMoreItemsHref(itemId, type) {
+
+            return 'secondaryitems.html?type=' + type + '&parentId=' + itemId;
+        }
+
+        dom.addEventListener(tabContent, 'click', function (e) {
+
+            var btnMoreFromGenre = dom.parentWithClass(e.target, 'btnMoreFromGenre');
+            if (btnMoreFromGenre) {
+                var id = btnMoreFromGenre.getAttribute('data-id');
+                Dashboard.navigate(getMoreItemsHref(id, 'Series'));
+            }
+
+        }, {
+            passive: true
+        });
 
         function fillItemsContainer(elem) {
 
@@ -144,6 +161,9 @@
                     });
                 }
 
+                if (result.Items.length >= query.Limit) {
+                    tabContent.querySelector('.btnMoreFromGenre' + id).classList.remove('hide');
+                }
             });
         }
 
@@ -163,9 +183,15 @@
                     var item = items[i];
 
                     html += '<div class="homePageSection">';
+
+                    html += '<div style="display:flex;align-items:center;">';
                     html += '<h1 class="listHeader">';
                     html += item.Name;
                     html += '</h1>';
+                    html += '<button is="emby-button" type="button" class="raised more mini noIcon hide btnMoreFromGenre btnMoreFromGenre' + item.Id + '" data-id="' + item.Id + '">';
+                    html += '<span>' + globalize.translate('ButtonMore') + '</span>';
+                    html += '</button>';
+                    html += '</div>';
 
                     if (enableScrollX()) {
                         html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX lazy" data-id="' + item.Id + '">';

dashboard-ui/secondaryitems.html

@@ -1,4 +1,4 @@
-<div id="secondaryItemsPage" data-role="page" class="page libraryPage noSecondaryNavPage" data-menubutton="false">
+<div id="secondaryItemsPage" data-role="page" class="page libraryPage noSecondaryNavPage" data-backbutton="true">
 
     <div data-role="content">
         <div class="viewSettings">