From 4c97201a3c29381d600f021940f8c67d293b9de7 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Tue, 30 Aug 2016 02:06:24 -0400 Subject: [PATCH] switch to shared image editor --- .../emby-webcomponents/.bower.json | 8 +- .../emby-webcomponents/cardbuilder/card.css | 20 ++ .../imageeditor/imageeditor.js | 239 ++++++++++-------- .../imageeditor/imageeditor.template.html | 55 ++++ .../emby-webcomponents/itemcontextmenu.js | 20 +- .../itemidentifier/itemidentifier.js | 6 +- .../emby-webcomponents/strings/en-US.json | 6 +- .../bower_components/iron-icon/.bower.json | 6 +- .../bower_components/iron-meta/.bower.json | 6 +- .../bower_components/polymer/.bower.json | 6 +- .../imagedownloader/imagedownloader.js | 2 +- .../imageeditor/imageeditor.template.html | 43 ---- dashboard-ui/scripts/itemdetailpage.js | 9 +- dashboard-ui/scripts/medialibrarypage.js | 11 +- dashboard-ui/scripts/site.js | 1 + 15 files changed, 264 insertions(+), 174 deletions(-) rename dashboard-ui/{components => bower_components/emby-webcomponents}/imageeditor/imageeditor.js (53%) create mode 100644 dashboard-ui/bower_components/emby-webcomponents/imageeditor/imageeditor.template.html delete mode 100644 dashboard-ui/components/imageeditor/imageeditor.template.html diff --git a/dashboard-ui/bower_components/emby-webcomponents/.bower.json b/dashboard-ui/bower_components/emby-webcomponents/.bower.json index 4ca559ce3a..29fc1175fe 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json +++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json @@ -14,12 +14,12 @@ }, "devDependencies": {}, "ignore": [], - "version": "1.4.200", - "_release": "1.4.200", + "version": "1.4.203", + "_release": "1.4.203", "_resolution": { "type": "version", - "tag": "1.4.200", - "commit": "37218220cf08f35c9a86ca1a59bd945351ae6cb4" + "tag": "1.4.203", + "commit": "0970763d22302d071ef6ff77e0fc565f69ef2982" }, "_source": "https://github.com/MediaBrowser/emby-webcomponents.git", "_target": "^1.2.1", diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css index c6607bea55..6bf32025bd 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css +++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css @@ -327,6 +327,10 @@ width: 50%; } +.midBackdropCard-scalable { + width: 50%; +} + .squareCard-scalable { width: 50%; } @@ -354,6 +358,10 @@ .backdropCard-scalable { width: 50%; } + + .midBackdropCard-scalable { + width: 50%; + } } @media all and (min-width: 500px) { @@ -384,6 +392,10 @@ .overflowSquareCard-scalable { width: 30%; } + + .midBackdropCard-scalable { + width: 33.333333333333333333333333333333%; + } } @media all and (min-width: 700px) { @@ -419,6 +431,10 @@ .squareCard-scalable { width: 20%; } + + .midBackdropCard-scalable { + width: 25%; + } } @media all and (min-width: 1000px) { @@ -462,6 +478,10 @@ .smallBackdropCard-scalable { width: 16.666666666666666666666666666667%; } + + .midBackdropCard-scalable { + width: 20%; + } } diff --git a/dashboard-ui/components/imageeditor/imageeditor.js b/dashboard-ui/bower_components/emby-webcomponents/imageeditor/imageeditor.js similarity index 53% rename from dashboard-ui/components/imageeditor/imageeditor.js rename to dashboard-ui/bower_components/emby-webcomponents/imageeditor/imageeditor.js index 3f3b3bfb86..d0911ebc55 100644 --- a/dashboard-ui/components/imageeditor/imageeditor.js +++ b/dashboard-ui/bower_components/emby-webcomponents/imageeditor/imageeditor.js @@ -1,4 +1,4 @@ -define(['dialogHelper', 'loading', 'css!css/metadataeditor.css', 'emby-button', 'paper-icon-button-light'], function (dialogHelper, loading) { +define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', 'globalize', 'scrollHelper', 'require', 'cardStyle', 'formDialogStyle', 'emby-button', 'paper-icon-button-light'], function (dialogHelper, connectionManager, loading, dom, layoutManager, globalize, scrollHelper, require) { var currentItem; var hasChanges = false; @@ -16,12 +16,17 @@ loading.show(); + var apiClient; + if (item) { - reloadItem(page, item); + apiClient = connectionManager.getApiClient(item.ServerId); + reloadItem(page, item, apiClient); } else { - ApiClient.getItem(ApiClient.getCurrentUserId(), currentItem.Id).then(function (item) { - reloadItem(page, item); + + apiClient = connectionManager.getApiClient(currentItem.ServerId); + apiClient.getItem(apiClient.getCurrentUserId(), currentItem.Id).then(function (item) { + reloadItem(page, item, apiClient); }); } } @@ -34,11 +39,11 @@ } } - function reloadItem(page, item) { + function reloadItem(page, item, apiClient) { currentItem = item; - ApiClient.getRemoteImageProviders(getBaseRemoteOptions()).then(function (providers) { + apiClient.getRemoteImageProviders(getBaseRemoteOptions()).then(function (providers) { var btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages'); for (var i = 0, length = btnBrowseAllImages.length; i < length; i++) { @@ -51,17 +56,17 @@ } - ApiClient.getItemImageInfos(currentItem.Id).then(function (imageInfos) { + apiClient.getItemImageInfos(currentItem.Id).then(function (imageInfos) { - renderStandardImages(page, item, imageInfos, providers); - renderBackdrops(page, item, imageInfos, providers); - renderScreenshots(page, item, imageInfos, providers); + renderStandardImages(page, apiClient, item, imageInfos, providers); + renderBackdrops(page, apiClient, item, imageInfos, providers); + renderScreenshots(page, apiClient, item, imageInfos, providers); loading.hide(); }); }); } - function getImageUrl(item, type, index, options) { + function getImageUrl(item, apiClient, type, index, options) { options = options || {}; options.type = type; @@ -78,66 +83,102 @@ } // For search hints - return ApiClient.getScaledImageUrl(item.Id || item.ItemId, options); + return apiClient.getScaledImageUrl(item.Id || item.ItemId, options); } - function renderImages(page, item, images, imageProviders, elem) { + + function getCardHtml(image, index, apiClient, imageProviders, imageSize, tagName, enableFooterButtons) { var html = ''; + var cssClass = "card scalableCard"; + cssClass += " midBackdropCard midBackdropCard-scalable"; + + if (tagName == 'button') { + html += ''; + } else { + html += ''; + } + + if (index < length - 1) { + html += ''; + } else { + html += ''; + } + } + else { + if (imageProviders.length) { + html += ''; + } + } + + html += ''; + html += ''; + } + + html += ''; + html += ''; + html += ''; + html += ''; + + return html; + } + + function renderImages(page, item, apiClient, images, imageProviders, elem) { + + var html = ''; + + var imageSize = 300; + var windowSize = dom.getWindowSize(); + if (windowSize.innerWidth >= 1280) { + imageSize = Math.round(windowSize.innerWidth / 4); + } + + var tagName = layoutManager.tv ? 'button' : 'div'; + var enableFooterButtons = !layoutManager.tv; + for (var i = 0, length = images.length; i < length; i++) { var image = images[i]; - html += '
'; - html += '
'; - - var height = 150; - - html += '
'; - - html += '
'; - - if (image.ImageType !== "Backdrop" && image.ImageType !== "Screenshot") { - html += '

' + image.ImageType + '

'; - } - - if (image.Width && image.Height) { - html += '

' + image.Width + ' X ' + image.Height + '

'; - } else { - html += '

 

'; - } - - html += '
'; - - if (image.ImageType == "Backdrop" || image.ImageType == "Screenshot") { - - if (i > 0) { - html += ''; - } else { - html += ''; - } - - if (i < length - 1) { - html += ''; - } else { - html += ''; - } - } - else { - if (imageProviders.length) { - html += ''; - } - } - - html += ''; - - html += '
'; - - html += '
'; - html += '
'; - html += '
'; + html += getCardHtml(image, i, apiClient, imageProviders, imageSize, tagName, enableFooterButtons); } elem.innerHTML = html; @@ -154,7 +195,7 @@ require(['confirm'], function (confirm) { - confirm(Globalize.translate('DeleteImageConfirmation'), Globalize.translate('HeaderDeleteImage')).then(function () { + confirm(globalize.translate('sharedcomponents#ConfirmDeleteImage')).then(function () { ApiClient.deleteItemImage(currentItem.Id, type, index).then(function () { @@ -179,16 +220,16 @@ }); } - function renderStandardImages(page, item, imageInfos, imageProviders) { + function renderStandardImages(page, apiClient, item, imageInfos, imageProviders) { var images = imageInfos.filter(function (i) { return i.ImageType != "Screenshot" && i.ImageType != "Backdrop" && i.ImageType != "Chapter"; }); - renderImages(page, item, images, imageProviders, page.querySelector('#images')); + renderImages(page, item, apiClient, images, imageProviders, page.querySelector('#images')); } - function renderBackdrops(page, item, imageInfos, imageProviders) { + function renderBackdrops(page, apiClient, item, imageInfos, imageProviders) { var images = imageInfos.filter(function (i) { return i.ImageType == "Backdrop"; @@ -199,13 +240,13 @@ if (images.length) { page.querySelector('#backdropsContainer', page).classList.remove('hide'); - renderImages(page, item, images, imageProviders, page.querySelector('#backdrops')); + renderImages(page, item, apiClient, images, imageProviders, page.querySelector('#backdrops')); } else { page.querySelector('#backdropsContainer', page).classList.add('hide'); } } - function renderScreenshots(page, item, imageInfos, imageProviders) { + function renderScreenshots(page, apiClient, item, imageInfos, imageProviders) { var images = imageInfos.filter(function (i) { return i.ImageType == "Screenshot"; @@ -216,7 +257,7 @@ if (images.length) { page.querySelector('#screenshotsContainer', page).classList.remove('hide'); - renderImages(page, item, images, imageProviders, page.querySelector('#screenshots')); + renderImages(page, item, apiClient, images, imageProviders, page.querySelector('#screenshots')); } else { page.querySelector('#screenshotsContainer', page).classList.add('hide'); } @@ -260,48 +301,49 @@ }); } - function showEditor(itemId, options, resolve, reject) { + function showEditor(options, resolve, reject) { - options = options || {}; + var itemId = options.itemId; + var serverId = options.serverId; loading.show(); - var xhr = new XMLHttpRequest(); - xhr.open('GET', 'components/imageeditor/imageeditor.template.html', true); + require(['text!./imageeditor.template.html'], function (template) { + var apiClient = connectionManager.getApiClient(serverId); + apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { - xhr.onload = function (e) { - - var template = this.response; - ApiClient.getItem(ApiClient.getCurrentUserId(), itemId).then(function (item) { - - var dlg = dialogHelper.createDialog({ - size: 'fullscreen-border', + var dialogOptions = { removeOnClose: true - }); + }; - var theme = options.theme || 'b'; + if (layoutManager.tv) { + dialogOptions.size = 'fullscreen'; + } else { + dialogOptions.size = 'fullscreen-border'; + } - dlg.classList.add('ui-body-' + theme); - dlg.classList.add('background-theme-' + theme); + var dlg = dialogHelper.createDialog(dialogOptions); - var html = ''; - html += '

'; - html += ''; - html += '
' + item.Name + '
'; - html += '

'; + dlg.classList.add('formDialog'); - html += '
'; - html += Globalize.translateDocument(template); - html += '
'; + dlg.innerHTML = globalize.translateDocument(template, 'sharedcomponents'); + dlg.querySelector('.formDialogHeaderTitle').innerHTML = item.Name; - dlg.innerHTML = html; document.body.appendChild(dlg); + if (layoutManager.tv) { + scrollHelper.centerFocus.on(dlg, false); + } + initEditor(dlg, options); // Has to be assigned a z-index after the call to .open() dlg.addEventListener('close', function () { + if (layoutManager.tv) { + scrollHelper.centerFocus.off(dlg, false); + } + loading.hide(); if (hasChanges) { @@ -313,27 +355,24 @@ dialogHelper.open(dlg); - var editorContent = dlg.querySelector('.editorContent'); - reload(editorContent, item); + reload(dlg, item); - dlg.querySelector('.btnCloseDialog').addEventListener('click', function () { + dlg.querySelector('.btnCancel').addEventListener('click', function () { dialogHelper.close(dlg); }); }); - } - - xhr.send(); + }); } return { - show: function (itemId, options) { + show: function (options) { return new Promise(function (resolve, reject) { hasChanges = false; - showEditor(itemId, options, resolve, reject); + showEditor(options, resolve, reject); }); } }; diff --git a/dashboard-ui/bower_components/emby-webcomponents/imageeditor/imageeditor.template.html b/dashboard-ui/bower_components/emby-webcomponents/imageeditor/imageeditor.template.html new file mode 100644 index 0000000000..0f9aca99ba --- /dev/null +++ b/dashboard-ui/bower_components/emby-webcomponents/imageeditor/imageeditor.template.html @@ -0,0 +1,55 @@ +
+ +
+
+
+ +
+
+ +
+
+

${Images}

+ + +
+
+
+
+
+ +
+
+

${Backdrops}

+ + +
+
+
+
+
+ +
+
+

${Screenshots}

+ + +
+
+
+
+
+
+ diff --git a/dashboard-ui/bower_components/emby-webcomponents/itemcontextmenu.js b/dashboard-ui/bower_components/emby-webcomponents/itemcontextmenu.js index 9494f6e98e..9b9aee75cd 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/itemcontextmenu.js +++ b/dashboard-ui/bower_components/emby-webcomponents/itemcontextmenu.js @@ -58,13 +58,11 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter', if (itemHelper.canEditImages(user, item.Type)) { - if (isMobileApp) { - if (options.editImages !== false) { - commands.push({ - name: globalize.translate('sharedcomponents#EditImages'), - id: 'editimages' - }); - } + if (options.editImages !== false) { + commands.push({ + name: globalize.translate('sharedcomponents#EditImages'), + id: 'editimages' + }); } } @@ -318,9 +316,13 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter', } case 'editimages': { - require(['components/imageeditor/imageeditor'], function (ImageEditor) { + require(['imageEditor'], function (imageEditor) { - ImageEditor.show(itemId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); + imageEditor.show({ + itemId: itemId, + serverId: serverId + + }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }); break; } diff --git a/dashboard-ui/bower_components/emby-webcomponents/itemidentifier/itemidentifier.js b/dashboard-ui/bower_components/emby-webcomponents/itemidentifier/itemidentifier.js index 7507987777..26252c9ea6 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/itemidentifier/itemidentifier.js +++ b/dashboard-ui/bower_components/emby-webcomponents/itemidentifier/itemidentifier.js @@ -174,21 +174,25 @@ var html = ''; var cssClass = "card scalableCard"; + var padderClass; if (currentItemType == "Episode") { cssClass += " backdropCard backdropCard-scalable"; + padderClass = 'cardPadder-backdrop'; } else if (currentItemType == "MusicAlbum" || currentItemType == "MusicArtist") { cssClass += " squareCard squareCard-scalable"; + padderClass = 'cardPadder-square'; } else { cssClass += " portraitCard portraitCard-scalable"; + padderClass = 'cardPadder-portrait'; } html += ' - - -
-
-
- - -
-
-

${HeaderBackdrops}

- - -
-
-
-
-
- -
-
-

${Screenshots}

- - -
-
-
-
\ No newline at end of file diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js index 4b7b44c66a..a2ae7828af 100644 --- a/dashboard-ui/scripts/itemdetailpage.js +++ b/dashboard-ui/scripts/itemdetailpage.js @@ -2179,9 +2179,14 @@ function editImages() { return new Promise(function (resolve, reject) { - require(['components/imageeditor/imageeditor'], function (ImageEditor) { + require(['imageEditor'], function (imageEditor) { - ImageEditor.show(currentItem.Id).then(resolve, reject); + imageEditor.show({ + + itemId: currentItem.Id, + serverId: currentItem.ServerId + + }).then(resolve, reject); }); }); } diff --git a/dashboard-ui/scripts/medialibrarypage.js b/dashboard-ui/scripts/medialibrarypage.js index 530b69fdd6..f861b46430 100644 --- a/dashboard-ui/scripts/medialibrarypage.js +++ b/dashboard-ui/scripts/medialibrarypage.js @@ -227,10 +227,13 @@ function editImages(page, virtualFolder) { - require(['components/imageeditor/imageeditor'], function (ImageEditor) { + require(['imageEditor'], function (imageEditor) { + + imageEditor.show({ + + itemId: virtualFolder.ItemId, + serverId: ApiClient.serverId() - ImageEditor.show(virtualFolder.ItemId, { - theme: 'a' }).then(function () { reloadLibrary(page); }); @@ -297,7 +300,7 @@ style += "min-width:33.3%;"; } - html += '
'; + html += '
'; html += '
'; html += '
'; diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 9ac4a049d1..f58d301da8 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -1291,6 +1291,7 @@ var AppInfo = {}; define("itemIdentifier", [embyWebComponentsBowerPath + "/itemidentifier/itemidentifier"], returnFirstDependency); define("mediaInfo", [embyWebComponentsBowerPath + "/mediainfo/mediainfo"], returnFirstDependency); define("itemContextMenu", [embyWebComponentsBowerPath + "/itemcontextmenu"], returnFirstDependency); + define("imageEditor", [embyWebComponentsBowerPath + "/imageeditor/imageeditor"], returnFirstDependency); define("dom", [embyWebComponentsBowerPath + "/dom"], returnFirstDependency); define("layoutManager", [embyWebComponentsBowerPath + "/layoutmanager"], getLayoutManager); define("playMenu", [embyWebComponentsBowerPath + "/playmenu"], returnFirstDependency);