cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-18 03:18:19 -07:00
Code Issues Packages Projects Releases Wiki Activity

switch to shared image editor

Browse Source
This commit is contained in:
Luke Pulverenti 2016-08-30 02:06:24 -04:00
parent 228cefadd8
commit 4c97201a3c
15 changed files with 264 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dashboard-ui/bower_components/emby-webcomponents/.bower.json vendored
View File

@ -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",

20
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css vendored
View File

@ -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%;
}
}

239
dashboard-ui/components/imageeditor/imageeditor.js → dashboard-ui/bower_components/emby-webcomponents/imageeditor/imageeditor.js vendored
View File

@ -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 += '<button type="button" class="' + cssClass + '">';
} else {
html += '<div class="' + cssClass + '">';
}
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable" style="background-color:transparent;">';
html += '<div class="cardPadder-backdrop"></div>';
html += '<div class="cardContent">';
var imageUrl = getImageUrl(currentItem, apiClient, image.ImageType, image.ImageIndex, { maxWidth: imageSize });
html += '<div class="cardImageContainer" style="background-image:url(\'' + imageUrl + '\');background-position:center bottom;"></div>';
html += '</div>';
html += '</div>';
html += '<div class="cardFooter visualCardBox-cardFooter">';
html += '<h3 class="cardText cardTextCentered" style="margin:0;">' + image.ImageType + '</h3>';
html += '<div class="cardText cardText-secondary cardTextCentered">';
if (image.Width && image.Height) {
html += image.Width + ' X ' + image.Height;
} else {
html += '&nbsp;';
}
html += '</div>';
if (enableFooterButtons) {
html += '<div class="cardText cardTextCentered">';
if (image.ImageType == "Backdrop" || image.ImageType == "Screenshot") {
if (index > 0) {
html += '<button is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + globalize.translate('sharedcomponents#MoveLeft') + '"><i class="md-icon">chevron_left</i></button>';
} else {
html += '<button is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('sharedcomponents#MoveLeft') + '"><i class="md-icon">chevron_left</i></button>';
}
if (index < length - 1) {
html += '<button is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + globalize.translate('sharedcomponents#MoveRight') + '"><i class="md-icon">chevron_right</i></button>';
} else {
html += '<button is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('sharedcomponents#MoveRight') + '"><i class="md-icon">chevron_right</i></button>';
}
}
else {
if (imageProviders.length) {
html += '<button is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" class="btnSearchImages autoSize" title="' + globalize.translate('sharedcomponents#Search') + '"><i class="md-icon">search</i></button>';
}
}
html += '<button is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" data-index="' + (image.ImageIndex != null ? image.ImageIndex : "null") + '" class="btnDeleteImage autoSize" title="' + globalize.translate('sharedcomponents#Delete') + '"><i class="md-icon">delete</i></button>';
html += '</div>';
}
html += '</div>';
html += '</div>';
html += '</div>';
html += '</' + tagName + '>';
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 += '<div class="editorTile imageEditorTile">';
html += '<div class="editorTileInner">';
var height = 150;
html += '<div style="height:' + height + 'px;vertical-align:top;background-repeat:no-repeat;background-position:center bottom;background-size:contain;" class="lazy" data-src="' + getImageUrl(currentItem, image.ImageType, image.ImageIndex, { height: height }) + '"></div>';
html += '<div class="editorTileFooter">';
if (image.ImageType !== "Backdrop" && image.ImageType !== "Screenshot") {
html += '<h3>' + image.ImageType + '</h3>';
}
if (image.Width && image.Height) {
html += '<p>' + image.Width + ' X ' + image.Height + '</p>';
} else {
html += '<p>&nbsp;</p>';
}
html += '<div>';
if (image.ImageType == "Backdrop" || image.ImageType == "Screenshot") {
if (i > 0) {
html += '<button is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + Globalize.translate('ButtonMoveLeft') + '"><i class="md-icon">chevron_left</i></button>';
} else {
html += '<button is="paper-icon-button-light" class="autoSize" disabled title="' + Globalize.translate('ButtonMoveLeft') + '"><i class="md-icon">chevron_left</i></button>';
}
if (i < length - 1) {
html += '<button is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + Globalize.translate('ButtonMoveRight') + '"><i class="md-icon">chevron_right</i></button>';
} else {
html += '<button is="paper-icon-button-light" class="autoSize" disabled title="' + Globalize.translate('ButtonMoveRight') + '"><i class="md-icon">chevron_right</i></button>';
}
}
else {
if (imageProviders.length) {
html += '<button is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" class="btnSearchImages autoSize" title="' + Globalize.translate('ButtonBrowseOnlineImages') + '"><i class="md-icon">search</i></button>';
}
}
html += '<button is="paper-icon-button-light" data-imagetype="' + image.ImageType + '" data-index="' + (image.ImageIndex != null ? image.ImageIndex : "null") + '" class="btnDeleteImage autoSize" title="' + Globalize.translate('Delete') + '"><i class="md-icon">delete</i></button>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
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 += '<h2 class="dialogHeader">';
html += '<button type="button" is="emby-button" icon="arrow-back" class="fab mini btnCloseDialog autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + item.Name + '</div>';
html += '</h2>';
dlg.classList.add('formDialog');
html += '<div class="editorContent" style="padding:0 1em;">';
html += Globalize.translateDocument(template);
html += '</div>';
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);
});
}
};

55
dashboard-ui/bower_components/emby-webcomponents/imageeditor/imageeditor.template.html vendored Normal file
View File

@ -0,0 +1,55 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
<div class="formDialogHeaderTitle">
</div>
</div>
<div class="formDialogContent">
<div class="dialogContentInner">
<div id="imagesContainer">
<div style="display: flex; align-items: center;margin:2em 0 .5em;">
<h1 style="margin:0;">${Images}</h1>
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;">
<i class="md-icon">search</i>
</button>
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini autoSize" style="margin-left: .5em;">
<i class="md-icon">add</i>
</button>
</div>
<div id="images" class="itemsContainer vertical-wrap">
</div>
<br />
</div>
<div id="backdropsContainer" class="hide">
<div style="display: flex; align-items: center;margin:1em 0 .5em;">
<h1 style="margin:0;">${Backdrops}</h1>
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop">
<i class="md-icon">search</i>
</button>
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini autoSize" style="margin-left: .5em;" data-imagetype="Backdrop">
<i class="md-icon">add</i>
</button>
</div>
<div id="backdrops" class="itemsContainer vertical-wrap">
</div>
<br />
</div>
<div id="screenshotsContainer" class="hide">
<div style="display: flex; align-items: center; margin: 1em 0 .5em;">
<h1 style="margin: 0;">${Screenshots}</h1>
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Screenshot">
<i class="md-icon">search</i>
</button>
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini autoSize" style="margin-left: .5em;" data-imagetype="Screenshot">
<i class="md-icon">add</i>
</button>
</div>
<div id="screenshots" class="itemsContainer vertical-wrap">
</div>
</div>
</div>
</div>

10
dashboard-ui/bower_components/emby-webcomponents/itemcontextmenu.js vendored
View File

@ -58,7 +58,6 @@ 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'),
@ -66,7 +65,6 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter',
});
}
}
}
if (itemHelper.canEdit(user, item.Type)) {
@ -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;
}

6
dashboard-ui/bower_components/emby-webcomponents/itemidentifier/itemidentifier.js vendored
View File

@ -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 += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder-portrait"></div>';
html += '<div class="' + padderClass + '"></div>';
html += '<div class="cardContent searchImage">';

6
dashboard-ui/bower_components/emby-webcomponents/strings/en-US.json vendored
View File

@ -271,5 +271,9 @@
"AutomaticallySyncNewContentHelp": "New content added to this folder will be automatically synced to the device.",
"LabelItemLimit": "Item limit:",
"LabelItemLimitHelp": "Optional. Set a limit to the number of items that will be synced.",
"PleaseSelectDeviceToSyncTo": "Please select a device to sync to."
"PleaseSelectDeviceToSyncTo": "Please select a device to sync to.",
"Screenshots": "Screenshots",
"MoveRight": "Move right",
"MoveLeft": "Move left",
"ConfirmDeleteImage": "Delete image?"
}

6
dashboard-ui/bower_components/iron-icon/.bower.json vendored
View File

@ -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.10",
"_resolution": {
"type": "version",
"tag": "v1.0.10",
"commit": "f4e146da4982ff96bb25db85290c09e8de4ec734"
},
"_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"
}

6
dashboard-ui/bower_components/iron-meta/.bower.json vendored
View File

@ -27,14 +27,14 @@
},
"main": "iron-meta.html",
"ignore": [],
"homepage": "https://github.com/PolymerElements/iron-meta",
"homepage": "https://github.com/polymerelements/iron-meta",
"_release": "1.1.2",
"_resolution": {
"type": "version",
"tag": "v1.1.2",
"commit": "bae96531b63ea6d4ce982f5592248aea849c0f5a"
},
"_source": "git://github.com/PolymerElements/iron-meta.git",
"_source": "git://github.com/polymerelements/iron-meta.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-meta"
"_originalSource": "polymerelements/iron-meta"
}

6
dashboard-ui/bower_components/polymer/.bower.json vendored
View File

@ -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"
}

2
dashboard-ui/components/imagedownloader/imagedownloader.js
View File

@ -1,4 +1,4 @@
define(['dialogHelper', 'emby-checkbox', 'emby-button', 'paper-icon-button-light'], function (dialogHelper) {
define(['dialogHelper', 'emby-checkbox', 'emby-button', 'paper-icon-button-light', 'css!css/metadataeditor.css'], function (dialogHelper) {
var currentItemId;
var currentItemType;

43
dashboard-ui/components/imageeditor/imageeditor.template.html
View File

@ -1,43 +0,0 @@
<div id="imagesContainer">
<div style="display: flex; align-items: center;margin:2em 0 .5em;">
<h1 style="margin:0;">${HeaderImages}</h1>
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;">
<i class="md-icon">search</i>
</button>
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini autoSize" style="margin-left: .5em;">
<i class="md-icon">add</i>
</button>
</div>
<div id="images">
</div>
<br />
</div>
<div id="backdropsContainer" class="hide">
<div style="display: flex; align-items: center;margin:1em 0 .5em;">
<h1 style="margin:0;">${HeaderBackdrops}</h1>
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop">
<i class="md-icon">search</i>
</button>
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini autoSize" style="margin-left: .5em;" data-imagetype="Backdrop">
<i class="md-icon">add</i>
</button>
</div>
<div id="backdrops">
</div>
<br />
</div>
<div id="screenshotsContainer" class="hide">
<div style="display: flex; align-items: center;margin:1em 0 .5em;">
<h1 style="margin:0;">${Screenshots}</h1>
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Screenshot">
<i class="md-icon">search</i>
</button>
<button type="button" is="emby-button" class="btnOpenUploadMenu fab mini autoSize" style="margin-left: .5em;" data-imagetype="Screenshot">
<i class="md-icon">add</i>
</button>
</div>
<div id="screenshots">
</div>
</div>

9
dashboard-ui/scripts/itemdetailpage.js
View File

@ -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);
});
});
}

11
dashboard-ui/scripts/medialibrarypage.js
View File

@ -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 += '<div class="card backdropCard scalableCard backdropCard-scalable" style="' + style + '" data-index="' + index + '">';
html += '<div class="card midBackdropCard scalableCard midBackdropCard-scalable" style="' + style + '" data-index="' + index + '">';
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';

1
dashboard-ui/scripts/site.js
View File

@ -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);