update shared components

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

@@ -14,12 +14,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.132",
+  "version": "1.4.135",
-  "_release": "1.4.132",
+  "_release": "1.4.135",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.132",
+    "tag": "1.4.135",
-    "commit": "4af41910495a11c5f3fdfcdc9821c1944d4da439"
+    "commit": "769b3fed535db71b82c65e113ac39505078a2a82"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.0",

dashboard-ui/bower_components/emby-webcomponents/cardbuilder/chaptercardbuilder.js

@@ -1,4 +1,4 @@
-define(['datetime', 'imageLoader', 'itemShortcuts', 'connectionManager'], function (datetime, imageLoader, itemShortcuts, connectionManager) {
+define(['datetime', 'imageLoader', 'connectionManager'], function (datetime, imageLoader, connectionManager) {
 
     function buildChapterCardsHtml(item, chapters, options) {
 
@@ -9,12 +9,12 @@ define(['datetime', 'imageLoader', 'itemShortcuts', 'connectionManager'], functi
             return i.Type == 'Video';
         })[0] || {};
 
-        var shape = 'backdropCard';
+        var shape = (options.backdropShape || 'backdrop') + 'Card';
 
         if (videoStream.Width && videoStream.Height) {
 
             if ((videoStream.Width / videoStream.Height) <= 1.34) {
-                shape = 'squareCard';
+                shape = (options.squareShape || 'square') + 'Card';
             }
         }
 
@@ -121,9 +121,6 @@ define(['datetime', 'imageLoader', 'itemShortcuts', 'connectionManager'], functi
         options.itemsContainer.innerHTML = html;
 
         imageLoader.lazyChildren(options.itemsContainer);
-
-        itemShortcuts.off(options.itemsContainer);
-        itemShortcuts.on(options.itemsContainer);
     }
 
     return {

dashboard-ui/bower_components/emby-webcomponents/cardbuilder/peoplecardbuilder.js

@@ -1,8 +1,8 @@
-define(['imageLoader', 'itemShortcuts'], function (imageLoader, itemShortcuts) {
+define(['imageLoader', 'itemShortcuts', 'connectionManager'], function (imageLoader, itemShortcuts, connectionManager) {
 
     function buildPeopleCardsHtml(people, options) {
 
-        var className = 'card portraitCard personCard';
+        var className = 'card ' + (options.shape || 'portrait') + 'Card personCard';
 
         if (options.block || options.rows) {
             className += ' block';
@@ -12,6 +12,7 @@ define(['imageLoader', 'itemShortcuts'], function (imageLoader, itemShortcuts) {
         var itemsInRow = 0;
 
         var serverId = options.serverId;
+        var apiClient = connectionManager.getApiClient(serverId);
 
         for (var i = 0, length = people.length; i < length; i++) {
 
@@ -21,7 +22,7 @@ define(['imageLoader', 'itemShortcuts'], function (imageLoader, itemShortcuts) {
 
             var person = people[i];
 
-            html += buildPersonCard(person, serverId, options, className);
+            html += buildPersonCard(person, apiClient, serverId, options, className);
             itemsInRow++;
 
             if (options.rows && itemsInRow >= options.rows) {
@@ -33,11 +34,26 @@ define(['imageLoader', 'itemShortcuts'], function (imageLoader, itemShortcuts) {
         return html;
     }
 
-    function buildPersonCard(person, serverId, options, className) {
+    function getImgUrl(person, maxWidth, apiClient) {
+
+        if (person.PrimaryImageTag) {
+
+            return apiClient.getScaledImageUrl(person.Id, {
+
+                maxWidth: maxWidth,
+                tag: person.PrimaryImageTag,
+                type: "Primary"
+            });
+        }
+
+        return null;
+    }
+
+    function buildPersonCard(person, apiClient, serverId, options, className) {
 
         className += " itemAction scalableCard";
 
-        var imgUrl = person.images ? person.images.primary : '';
+        var imgUrl = getImgUrl(person, options.width, apiClient);
 
         var cardImageContainerClass = 'cardImageContainer';
         if (options.coverImage) {
@@ -79,12 +95,12 @@ define(['imageLoader', 'itemShortcuts'], function (imageLoader, itemShortcuts) {
 
     function buildPeopleCards(items, options) {
 
-        // Abort if the container has been disposed
-        if (!document.body.contains(options.parentContainer)) {
-            return;
-        }
-
         if (options.parentContainer) {
+            // Abort if the container has been disposed
+            if (!document.body.contains(options.parentContainer)) {
+                return;
+            }
+
             if (items.length) {
                 options.parentContainer.classList.remove('hide');
             } else {

dashboard-ui/bower_components/emby-webcomponents/itemcontextmenu.js

@@ -87,7 +87,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter',
                 });
             }
 
-            if (isMobileApp && options.identify !== false) {
+            if (options.identify !== false) {
                 if (itemHelper.canIdentify(user, item.Type)) {
                     commands.push({
                         name: globalize.translate('sharedcomponents#Identify'),
@@ -298,7 +298,6 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter',
                     {
                         require(['subtitleEditor'], function (subtitleEditor) {
 
-                            var serverId = apiClient.serverInfo().Id;
                             subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                         });
                         break;
@@ -318,9 +317,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter',
                     }
                 case 'identify':
                     {
-                        require(['components/itemidentifier/itemidentifier'], function (itemidentifier) {
+                        require(['itemIdentifier'], function (itemIdentifier) {
 
-                            itemidentifier.show(itemId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
+                            itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                         });
                         break;
                     }

dashboard-ui/bower_components/emby-webcomponents/itemidentifier/itemidentifier.js

@@ -1,12 +1,17 @@
-define(['dialogHelper', 'loading', 'cardBuilder', 'emby-input', 'emby-checkbox', 'paper-icon-button-light'], function (dialogHelper, loading, cardBuilder) {
+define(['dialogHelper', 'loading', 'cardBuilder', 'connectionManager', 'require', 'globalize', 'emby-input', 'emby-checkbox', 'paper-icon-button-light'], function (dialogHelper, loading, cardBuilder, connectionManager, require, globalize) {
 
     var currentItem;
     var currentItemType;
+    var currentServerId;
     var currentResolve;
     var currentReject;
     var hasChanges = false;
     var currentSearchResult;
 
+    function getApiClient() {
+        return connectionManager.getApiClient(currentServerId);
+    }
+
     function searchForIdentificationResults(page) {
 
         var lookupInfo = {
@@ -44,7 +49,7 @@
 
         if (!hasId && !lookupInfo.Name) {
             require(['toast'], function (toast) {
-                toast(Globalize.translate('MessagePleaseEnterNameOrId'));
+                toast(globalize.translate('MessagePleaseEnterNameOrId'));
             });
             return;
         }
@@ -60,9 +65,11 @@
 
         loading.show();
 
-        ApiClient.ajax({
+        var apiClient = getApiClient();
+
+        apiClient.ajax({
             type: "POST",
-            url: ApiClient.getUrl("Items/RemoteSearch/" + currentItemType),
+            url: apiClient.getUrl("Items/RemoteSearch/" + currentItemType),
             data: JSON.stringify(lookupInfo),
             contentType: "application/json",
             dataType: 'json'
@@ -203,7 +210,9 @@
     }
 
     function getSearchImageDisplayUrl(url, provider) {
-        return ApiClient.getUrl("Items/RemoteSearch/Image", { imageUrl: url, ProviderName: provider });
+        var apiClient = getApiClient();
+
+        return apiClient.getUrl("Items/RemoteSearch/Image", { imageUrl: url, ProviderName: provider });
     }
 
     function submitIdentficationResult(page) {
@@ -214,9 +223,11 @@
             ReplaceAllImages: page.querySelector('#chkIdentifyReplaceImages').checked
         };
 
-        ApiClient.ajax({
+        var apiClient = getApiClient();
+
+        apiClient.ajax({
             type: "POST",
-            url: ApiClient.getUrl("Items/RemoteSearch/Apply/" + currentItem.Id, options),
+            url: apiClient.getUrl("Items/RemoteSearch/Apply/" + currentItem.Id, options),
             data: JSON.stringify(currentSearchResult),
             contentType: "application/json"
 
@@ -251,7 +262,7 @@
 
                 html += '<div class="inputContainer">';
 
-                var idLabel = Globalize.translate('LabelDynamicExternalId').replace('{0}', idInfo.Name);
+                var idLabel = globalize.translate('LabelDynamicExternalId').replace('{0}', idInfo.Name);
 
                 var value = providerIds[idInfo.Key] || '';
 
@@ -274,7 +285,7 @@
 
             page.querySelector('.identifyProviderIds').innerHTML = html;
 
-            page.querySelector('.dialogHeaderTitle').innerHTML = Globalize.translate('HeaderIdentify');
+            page.querySelector('.dialogHeaderTitle').innerHTML = globalize.translate('HeaderIdentify');
         });
     }
 
@@ -282,13 +293,11 @@
 
         loading.show();
 
-        var xhr = new XMLHttpRequest();
+        require(['text!./itemidentifier.template.html'], function (template) {
-        xhr.open('GET', 'components/itemidentifier/itemidentifier.template.html', true);
 
-        xhr.onload = function (e) {
+            var apiClient = getApiClient();
 
-            var template = this.response;
+            apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
-            ApiClient.getItem(ApiClient.getCurrentUserId(), itemId).then(function (item) {
 
                 currentItem = item;
                 currentItemType = currentItem.Type;
@@ -302,7 +311,7 @@
                 dlg.classList.add('background-theme-b');
 
                 var html = '';
-                html += Globalize.translateDocument(template);
+                html += globalize.translateDocument(template);
 
                 dlg.innerHTML = html;
                 document.body.appendChild(dlg);
@@ -336,9 +345,7 @@
                 showIdentificationForm(dlg, item);
                 loading.hide();
             });
-        }
+        });
-
-        xhr.send();
     }
 
     function onDialogClosed() {
@@ -356,12 +363,7 @@
         currentItem = null;
         currentItemType = itemType;
 
-        var xhr = new XMLHttpRequest();
+        require(['text!./itemidentifier.template.html'], function (template) {
-        xhr.open('GET', 'components/itemidentifier/itemidentifier.template.html', true);
-
-        xhr.onload = function (e) {
-
-            var template = this.response;
             
             var dlg = dialogHelper.createDialog({
                 size: 'medium'
@@ -371,7 +373,7 @@
             dlg.classList.add('background-theme-a');
 
             var html = '';
-            html += Globalize.translateDocument(template);
+            html += globalize.translateDocument(template);
 
             dlg.innerHTML = html;
             document.body.appendChild(dlg);
@@ -401,9 +403,7 @@
             dlg.classList.add('identifyDialog');
 
             showIdentificationFormFindNew(dlg, itemName, itemYear, itemType);
-        }
+        });
-
-        xhr.send();
     }
 
     function showIdentificationFormFindNew(dlg, itemName, itemYear, itemType) {
@@ -421,25 +421,29 @@
             dlg.querySelector('#txtLookupYear').value = itemYear;
         }
 
-        dlg.querySelector('.dialogHeaderTitle').innerHTML = Globalize.translate('HeaderSearch');
+        dlg.querySelector('.dialogHeaderTitle').innerHTML = globalize.translate('HeaderSearch');
     }
 
     return {
-        show: function (itemId) {
+        show: function (itemId, serverId) {
 
             return new Promise(function (resolve, reject) {
 
                 currentResolve = resolve;
                 currentReject = reject;
+                currentServerId = serverId;
                 hasChanges = false;
 
                 showEditor(itemId);
             });
         },
 
-        showFindNew: function (itemName, itemYear, itemType) {
+        showFindNew: function (itemName, itemYear, itemType, serverId) {
+
             return new Promise(function (resolve, reject) {
 
+                currentServerId = serverId;
+
                 hasChanges = false;
                 showEditorFindNew(itemName, itemYear, itemType, resolve);
             });

dashboard-ui/components/fileorganizer/fileorganizer.js

@@ -156,9 +156,9 @@
             return;
         }
 
-        require(['components/itemidentifier/itemidentifier'], function (itemidentifier) {
+        require(['itemIdentifier'], function (itemIdentifier) {
 
-            itemidentifier.showFindNew(extractedName, extractedYear, 'Series').then(function (newItem) {
+            itemIdentifier.showFindNew(extractedName, extractedYear, 'Series', ApiClient.serverId()).then(function (newItem) {
 
                 if (newItem != null) {
                     currentNewItem = newItem;

dashboard-ui/css/librarybrowser.css

@@ -1054,4 +1054,8 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     .itemDetailPage .scalableCard.backdropCard, .itemDetailPage .scalableCard.smallBackdropCard {
         width: 33.3333333333333333% !important;
     }
+
+    .itemDetailPage .personCard.portraitCard {
+        width: 16.666666666666666666666666666667% !important;
+    }
 }

dashboard-ui/itemdetails.html

@@ -94,7 +94,8 @@
                 <h1 id="peopleHeader">
                     ${HeaderCastCrew}
                 </h1>
-                <div id="castContent"></div>
+                <div id="castContent" class="itemsContainer"></div>
+                <button is="emby-button" type="button" class="raised more morePeople hide">${ButtonMore}</button>
             </div>
 
             <div class="detailSection photoInfo hide">
@@ -153,7 +154,7 @@
                         <button is="paper-icon-button-light" class="autoSize"><i class="md-icon">settings</i></button>
                     </a>
                 </h1>
-                <div id="scenesContent" class="itemsContainer"></div>
+                <div is="emby-itemscontainer" id="scenesContent" class="itemsContainer"></div>
                 <button is="emby-button" type="button" class="raised more moreScenes hide">${ButtonMore}</button>
             </div>
             <div id="themeSongsCollapsible" class="detailSection hide">

dashboard-ui/scripts/itemdetailpage.js

@@ -450,7 +450,7 @@
             page.querySelector('#castCollapsible').classList.add('hide');
         } else {
             page.querySelector('#castCollapsible').classList.remove('hide');
-            renderCast(page, item, context, enableScrollX() ? null : 6);
+            renderCast(page, item, context, enableScrollX() ? null : 12);
         }
 
         if (item.PartCount && item.PartCount > 1) {
@@ -1606,7 +1606,9 @@
             chaptercardbuilder.buildChapterCards(item, chapters, {
                 itemsContainer: scenesContent,
                 coverImage: true,
-                width: 400
+                width: 400,
+                backdropShape: getThumbShape(),
+                squareShape: getSquareShape()
             });
         });
 
@@ -1869,232 +1871,39 @@
 
     function renderCast(page, item, context, limit, isStatic) {
 
-        if (enableScrollX()) {
+        var people = item.People || [];
-            renderHorizontalCast(page, item, context, isStatic);
-            return;
-        }
-
-        var html = '';
-
-        var casts = item.People || [];
-
-        for (var i = 0, length = casts.length; i < length; i++) {
-
-            if (limit && i >= limit) {
-                break;
-            }
-
-            var cast = casts[i];
-            var href = isStatic ? '#' : 'itemdetails.html?id=' + cast.Id + '';
-            html += '<a class="tileItem smallPosterTileItem" href="' + href + '">';
-
-            var imgUrl;
-            var lazy = true;
-
-            if (cast.PrimaryImageTag) {
-
-                imgUrl = ApiClient.getScaledImageUrl(cast.Id, {
-                    maxWidth: 100,
-                    tag: cast.PrimaryImageTag,
-                    type: "primary",
-                    minScale: 2
-                });
-
-            } else {
-
-                imgUrl = "css/images/items/list/person.png";
-                lazy = false;
-            }
-
-            if (lazy) {
-                html += '<div class="tileImage lazy" data-src="' + imgUrl + '"></div>';
-            } else {
-                html += '<div class="tileImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
-            }
-
-            html += '<div class="tileContent">';
-
-            html += '<p>' + cast.Name + '</p>';
-
-            var role = cast.Role ? Globalize.translate('ValueAsRole', cast.Role) : cast.Type;
-
-            if (role == "GuestStar") {
-                role = Globalize.translate('ValueGuestStar');
-            }
-
-            role = role || "";
-
-            var maxlength = 40;
-
-            if (role.length > maxlength) {
-                role = role.substring(0, maxlength - 3) + '...';
-            }
-
-            html += '<p>' + role + '</p>';
-
-            html += '</div>';
-
-            html += '</a>';
-        }
-
-        if (limit && casts.length > limit) {
-            html += '<p style="margin: 0;padding-left:5px;"><button is="emby-button" type="button" class="raised more morePeople">' + Globalize.translate('ButtonMore') + '</button></p>';
-        }
-
         var castContent = page.querySelector('#castContent');
-        castContent.innerHTML = html;
-        ImageLoader.lazyChildren(castContent);
-    }
-
-    function renderHorizontalCast(page, item, context, isStatic) {
-
-        var html = '';
 
         if (enableScrollX()) {
-            html += '<div class="hiddenScrollX itemsContainer">';
+            castContent.classList.add('smoothScrollX');
+            limit = 32;
         } else {
-            html += '<div class="itemsContainer">';
+            castContent.classList.add('vertical-wrap');
         }
 
-        var casts = item.People || [];
+        var limitExceeded = limit && people.length > limit;
 
-        casts = casts.filter(function (c) {
+        if (limitExceeded) {
+            people = people.slice(0);
+            people.length = Math.min(limit, people.length);
+        }
 
-            return c.PrimaryImageTag;
+        require(['peoplecardbuilder'], function (peoplecardbuilder) {
+
+            peoplecardbuilder.buildPeopleCards(people, {
+                itemsContainer: castContent,
+                coverImage: true,
+                serverId: item.ServerId,
+                width: 160,
+                shape: getPortraitShape()
+            });
         });
 
-        if (!casts.length) {
+        if (limitExceeded && !enableScrollX()) {
-            casts = item.People || [];
+            page.querySelector('.morePeople').classList.remove('hide');
+        } else {
+            page.querySelector('.morePeople').classList.add('hide');
         }
-
-        for (var i = 0, length = casts.length; i < length; i++) {
-
-            var cast = casts[i];
-            var href = isStatic ? '#' : 'itemdetails.html?id=' + cast.Id + '';
-
-            html += '<div class="card ' + getPortraitShape() + 'Card">';
-
-            html += '<div class="cardBox">';
-            html += '<div class="cardScalable">';
-
-            var imgUrl;
-            var lazy = true;
-
-            if (cast.PrimaryImageTag) {
-
-                imgUrl = ApiClient.getScaledImageUrl(cast.Id, {
-                    maxWidth: 100,
-                    tag: cast.PrimaryImageTag,
-                    type: "primary",
-                    minScale: 2
-                });
-
-            } else {
-
-                imgUrl = "css/images/items/list/person.png";
-                lazy = false;
-            }
-
-            html += '<div class="cardPadder"></div>';
-
-            html += '<a class="cardContent" href="' + href + '">';
-            if (lazy) {
-                html += '<div class="cardImage coveredCardImage lazy" data-src="' + imgUrl + '"></div>';
-            } else {
-                html += '<div class="cardImage coveredCardImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
-            }
-
-            //cardFooter
-            html += "</div>";
-
-            // cardContent
-            html += '</a>';
-
-            // cardScalable
-            html += '</div>';
-
-            html += '<div class="cardFooter outerCardFooter">';
-            html += '<div class="cardText">' + cast.Name + '</div>';
-            html += '<div class="cardText">';
-
-            var role = cast.Role ? Globalize.translate('ValueAsRole', cast.Role) : cast.Type;
-
-            if (role == "GuestStar") {
-                role = Globalize.translate('ValueGuestStar');
-            }
-
-            role = role || "";
-
-            var maxlength = 40;
-
-            if (role.length > maxlength) {
-                role = role.substring(0, maxlength - 3) + '...';
-            }
-
-            html += role;
-            html += '</div>';
-
-            // cardBox
-            html += '</div>';
-
-            html += '</div>';
-
-            //html += '<a class="tileItem smallPosterTileItem" href="' + href + '">';
-
-            //var imgUrl;
-            //var lazy = true;
-
-            //if (cast.PrimaryImageTag) {
-
-            //    imgUrl = ApiClient.getScaledImageUrl(cast.Id, {
-            //        width: 100,
-            //        tag: cast.PrimaryImageTag,
-            //        type: "primary",
-            //        minScale: 2
-            //    });
-
-            //} else {
-
-            //    imgUrl = "css/images/items/list/person.png";
-            //    lazy = false;
-            //}
-
-            //if (lazy) {
-            //    html += '<div class="tileImage lazy" data-src="' + imgUrl + '"></div>';
-            //} else {
-            //    html += '<div class="tileImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
-            //}
-
-            //html += '<div class="tileContent">';
-
-            //html += '<p>' + cast.Name + '</p>';
-
-            //var role = cast.Role ? Globalize.translate('ValueAsRole', cast.Role) : cast.Type;
-
-            //if (role == "GuestStar") {
-            //    role = Globalize.translate('ValueGuestStar');
-            //}
-
-            //role = role || "";
-
-            //var maxlength = 40;
-
-            //if (role.length > maxlength) {
-            //    role = role.substring(0, maxlength - 3) + '...';
-            //}
-
-            //html += '<p>' + role + '</p>';
-
-            //html += '</div>';
-
-            //html += '</a>';
-        }
-
-        html += '</div>';
-
-        var castContent = page.querySelector('#castContent');
-        castContent.innerHTML = html;
-        ImageLoader.lazyChildren(castContent);
     }
 
     function play(startPosition) {

dashboard-ui/scripts/site.js

@@ -1420,6 +1420,7 @@ var AppInfo = {};
         define("recordingCreator", [embyWebComponentsBowerPath + "/recordingcreator/recordingcreator"], returnFirstDependency);
         define("recordingEditor", [embyWebComponentsBowerPath + "/recordingcreator/recordingeditor"], returnFirstDependency);
         define("subtitleEditor", [embyWebComponentsBowerPath + "/subtitleeditor/subtitleeditor"], returnFirstDependency);
+        define("itemIdentifier", [embyWebComponentsBowerPath + "/itemidentifier/itemidentifier"], returnFirstDependency);
         define("mediaInfo", [embyWebComponentsBowerPath + "/mediainfo/mediainfo"], returnFirstDependency);
         define("itemContextMenu", [embyWebComponentsBowerPath + "/itemcontextmenu"], returnFirstDependency);
         define("dom", [embyWebComponentsBowerPath + "/dom"], returnFirstDependency);