update image editor

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

@@ -14,12 +14,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.204",
+  "version": "1.4.206",
-  "_release": "1.4.204",
+  "_release": "1.4.206",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.204",
+    "tag": "1.4.206",
-    "commit": "0e3bdeb9f16833a9cb5e5d7047621e888cd72148"
+    "commit": "3f48458370184be23fcd9dd588f86109d0a5f5ba"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.1",

dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css

@@ -71,13 +71,16 @@
 
 .cardBox-focustransform {
     will-change: transform;
-    /*transition: transform 200ms ease-out;*/
 }
 
-/*.card:focus > .cardBox-focustransform {
+.cardBox-focustransform-transition {
-    transition-delay: 50ms;
+    will-change: transform;
+    transition: transform 200ms ease-out;
+}
+
+.card-focusscale:focus > .cardBox-focustransform {
     transform: scale(1.16, 1.16);
-}*/
+}
 
 @media all and (min-width: 600px) {
 
@@ -327,10 +330,6 @@
     width: 50%;
 }
 
-.midBackdropCard-scalable {
-    width: 100%;
-}
-
 .squareCard-scalable {
     width: 50%;
 }
@@ -358,10 +357,6 @@
     .backdropCard-scalable {
         width: 50%;
     }
-
-    .midBackdropCard-scalable {
-        width: 50%;
-    }
 }
 
 @media all and (min-width: 500px) {
@@ -392,10 +387,6 @@
     .overflowSquareCard-scalable {
         width: 30%;
     }
-
-    .midBackdropCard-scalable {
-        width: 33.333333333333333333333333333333%;
-    }
 }
 
 @media all and (min-width: 700px) {
@@ -431,10 +422,6 @@
     .squareCard-scalable {
         width: 20%;
     }
-
-    .midBackdropCard-scalable {
-        width: 25%;
-    }
 }
 
 @media all and (min-width: 1000px) {
@@ -478,10 +465,6 @@
     .smallBackdropCard-scalable {
         width: 16.666666666666666666666666666667%;
     }
-
-    .midBackdropCard-scalable {
-        width: 20%;
-    }
 }
 
 

dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css

@@ -1,6 +1,6 @@
 .emby-button {
     position: relative;
-    display: inline-block;
+    display: inline-flex;
     align-items: center;
     box-sizing: border-box;
     margin: 0 .29em;
@@ -89,7 +89,7 @@
         transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
-    .emby-button i + span {
+    .emby-button > i + span {
         margin-left: .5em;
     }
 
@@ -97,12 +97,12 @@
         margin-left: .5em;
     }
 
-    .emby-button.iconRight i {
+    .emby-button.iconRight > i {
         margin-left: auto;
         margin-right: .25em;
     }
 
-.emby-button-noflex.iconRight i {
+.emby-button-noflex.iconRight > i {
     position: absolute;
     right: 0;
     top: 25%;

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

@@ -31,12 +31,14 @@
         }
     }
 
-    function addListeners(elems, eventName, fn) {
+    function addListeners(container, className, eventName, fn) {
 
-        for (var i = 0, length = elems.length; i < length; i++) {
+        container.addEventListener(eventName, function (e) {
-
+            var elem = dom.parentWithClass(e.target, className);
-            elems[i].addEventListener(eventName, fn);
+            if (elem) {
-        }
+                fn.call(elem, e);
+            }
+        });
     }
 
     function reloadItem(page, item, apiClient) {
@@ -84,24 +86,31 @@
 
         // For search hints
         return apiClient.getScaledImageUrl(item.Id || item.ItemId, options);
-
     }
 
-
     function getCardHtml(image, index, apiClient, imageProviders, imageSize, tagName, enableFooterButtons) {
 
         var html = '';
 
         var cssClass = "card scalableCard";
-        cssClass += " midBackdropCard midBackdropCard-scalable";
+        var cardBoxCssClass = 'cardBox visualCardBox';
+
+        cssClass += " backdropCard backdropCard-scalable";
 
         if (tagName == 'button') {
-            html += '<button type="button" class="' + cssClass + '">';
+            cssClass += ' card-focusscale btnImageCard';
+            cardBoxCssClass += ' cardBox-focustransform cardBox-focustransform-transition';
+
+            html += '<button type="button" class="' + cssClass + '"';
         } else {
-            html += '<div class="' + cssClass + '">';
+            html += '<div class="' + cssClass + '"';
         }
 
-        html += '<div class="cardBox visualCardBox">';
+        html += ' data-id="' + currentItem.Id + '" data-serverid="' + apiClient.serverId() + '" data-index="' + index + '" data-imagetype="' + image.ImageType + '" data-providers="' + imageProviders.length + '"';
+
+        html += '>';
+
+        html += '<div class="' + cardBoxCssClass + '">';
         html += '<div class="cardScalable visualCardBox-cardScalable" style="background-color:transparent;">';
         html += '<div class="cardPadder-backdrop"></div>';
 
@@ -161,6 +170,28 @@
         return html;
     }
 
+    function deleteImage(context, itemId, type, index, apiClient, enableConfirmation) {
+
+        var afterConfirm = function () {
+            apiClient.deleteItemImage(itemId, type, index).then(function () {
+
+                hasChanges = true;
+                reload(context);
+
+            });
+        };
+
+        if (!enableConfirmation) {
+            afterConfirm();
+            return;
+        }
+
+        require(['confirm'], function (confirm) {
+
+            confirm(globalize.translate('sharedcomponents#ConfirmDeleteImage')).then(afterConfirm);
+        });
+    }
+
     function renderImages(page, item, apiClient, images, imageProviders, elem) {
 
         var html = '';
@@ -184,30 +215,19 @@
         elem.innerHTML = html;
         imageLoader.lazyChildren(elem);
 
-        addListeners(elem.querySelectorAll('.btnSearchImages'), 'click', function () {
+        addListeners(elem, 'btnSearchImages', 'click', function () {
             showImageDownloader(page, this.getAttribute('data-imagetype'));
         });
 
-        addListeners(elem.querySelectorAll('.btnDeleteImage'), 'click', function () {
+        addListeners(elem, 'btnDeleteImage', 'click', function () {
             var type = this.getAttribute('data-imagetype');
             var index = this.getAttribute('data-index');
             index = index == "null" ? null : parseInt(index);
 
-            require(['confirm'], function (confirm) {
+            deleteImage(page, currentItem.Id, type, index, apiClient, true);
-
-                confirm(globalize.translate('sharedcomponents#ConfirmDeleteImage')).then(function () {
-
-                    apiClient.deleteItemImage(currentItem.Id, type, index).then(function () {
-
-                        hasChanges = true;
-                        reload(page);
-
-                    });
-                });
-            });
         });
 
-        addListeners(elem.querySelectorAll('.btnMoveImage'), 'click', function () {
+        addListeners(elem, 'btnMoveImage', 'click', function () {
             var type = this.getAttribute('data-imagetype');
             var index = parseInt(this.getAttribute('data-index'));
             var newIndex = parseInt(this.getAttribute('data-newindex'));
@@ -274,9 +294,58 @@
         });
     }
 
+    function showActionSheet(context, imageCard) {
+
+        var itemId = imageCard.getAttribute('data-id');
+        var serverId = imageCard.getAttribute('data-serverid');
+        var apiClient = connectionManager.getApiClient(serverId);
+
+        var type = imageCard.getAttribute('data-imagetype');
+        var index = parseInt(imageCard.getAttribute('data-index'));
+        var providerCount = parseInt(imageCard.getAttribute('data-providers'));
+
+        require(['actionsheet'], function (actionSheet) {
+
+            var commands = [];
+
+            commands.push({
+                name: globalize.translate('sharedcomponents#Delete'),
+                id: 'delete'
+            });
+
+            if (providerCount) {
+                commands.push({
+                    name: globalize.translate('sharedcomponents#Search'),
+                    id: 'search'
+                });
+            }
+
+            actionSheet.show({
+
+                items: commands,
+                positionTo: imageCard
+
+            }).then(function (id) {
+
+                switch (id) {
+
+                    case 'delete':
+                        deleteImage(context, itemId, type, index, apiClient, false);
+                        break;
+                    case 'search':
+                        showImageDownloader(context, type);
+                        break;
+                    default:
+                        break;
+                }
+
+            });
+        });
+    }
+
     function initEditor(page, options) {
 
-        addListeners(page.querySelectorAll('.btnOpenUploadMenu'), 'click', function () {
+        addListeners(page, 'btnOpenUploadMenu', 'click', function () {
             var imageType = this.getAttribute('data-imagetype');
 
             require(['components/imageuploader/imageuploader'], function (imageUploader) {
@@ -296,9 +365,13 @@
             });
         });
 
-        addListeners(page.querySelectorAll('.btnBrowseAllImages'), 'click', function () {
+        addListeners(page, 'btnBrowseAllImages', 'click', function () {
             showImageDownloader(page, this.getAttribute('data-imagetype') || 'Primary');
         });
+
+        addListeners(page, 'btnImageCard', 'click', function () {
+            showActionSheet(page, this);
+        });
     }
 
     function showEditor(options, resolve, reject) {
@@ -327,7 +400,6 @@
                 dlg.classList.add('formDialog');
 
                 dlg.innerHTML = globalize.translateDocument(template, 'sharedcomponents');
-                dlg.querySelector('.formDialogHeaderTitle').innerHTML = item.Name;
 
                 document.body.appendChild(dlg);
 

dashboard-ui/bower_components/emby-webcomponents/imageeditor/imageeditor.template.html

@@ -1,6 +1,7 @@
 <div class="formDialogHeader">
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
     <div class="formDialogHeaderTitle">
+        ${HeaderEditImages}
     </div>
 </div>
 

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

@@ -174,6 +174,7 @@
 
         var html = '';
         var cssClass = "card scalableCard";
+        var cardBoxCssClass = 'cardBox visualCardBox';
         var padderClass;
 
         if (currentItemType == "Episode") {
@@ -189,8 +190,13 @@
             padderClass = 'cardPadder-portrait';
         }
 
+        if (layoutManager.tv) {
+            cssClass += ' card-focusscale';
+            cardBoxCssClass += ' cardBox-focustransform cardBox-focustransform-transition';
+        }
+
         html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
-        html += '<div class="cardBox visualCardBox">';
+        html += '<div class="' + cardBoxCssClass + '">';
         html += '<div class="cardScalable visualCardBox-cardScalable">';
         html += '<div class="' + padderClass + '"></div>';
 

dashboard-ui/bower_components/emby-webcomponents/strings/en-US.json

@@ -275,5 +275,6 @@
   "Screenshots": "Screenshots",
   "MoveRight": "Move right",
   "MoveLeft": "Move left",
-  "ConfirmDeleteImage": "Delete image?"
+  "ConfirmDeleteImage": "Delete image?",
+  "HeaderEditImages": "Edit Images"
 }

dashboard-ui/bower_components/polymer/.bower.json

@@ -32,14 +32,14 @@
     "iron-component-page": "polymerElements/iron-component-page#^1.1.6"
   },
   "private": true,
-  "homepage": "https://github.com/Polymer/polymer",
+  "homepage": "https://github.com/polymer/polymer",
   "_release": "1.6.1",
   "_resolution": {
     "type": "version",
     "tag": "v1.6.1",
     "commit": "1f197d9d7874b1e5808b2a5c26f34446a7d912fc"
   },
-  "_source": "git://github.com/Polymer/polymer.git",
+  "_source": "git://github.com/polymer/polymer.git",
   "_target": "^1.1.0",
-  "_originalSource": "Polymer/polymer"
+  "_originalSource": "polymer/polymer"
 }

dashboard-ui/scripts/medialibrarypage.js

@@ -300,7 +300,7 @@
             style += "min-width:33.3%;";
         }
 
-        html += '<div class="card midBackdropCard scalableCard midBackdropCard-scalable" style="' + style + '" data-index="' + index + '">';
+        html += '<div class="card backdropCard scalableCard backdropCard-scalable" style="' + style + '" data-index="' + index + '">';
 
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable visualCardBox-cardScalable">';