mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
switch to shared image editor
This commit is contained in:
parent
228cefadd8
commit
4c97201a3c
15 changed files with 264 additions and 174 deletions
|
@ -14,12 +14,12 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {},
|
"devDependencies": {},
|
||||||
"ignore": [],
|
"ignore": [],
|
||||||
"version": "1.4.200",
|
"version": "1.4.203",
|
||||||
"_release": "1.4.200",
|
"_release": "1.4.203",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "1.4.200",
|
"tag": "1.4.203",
|
||||||
"commit": "37218220cf08f35c9a86ca1a59bd945351ae6cb4"
|
"commit": "0970763d22302d071ef6ff77e0fc565f69ef2982"
|
||||||
},
|
},
|
||||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||||
"_target": "^1.2.1",
|
"_target": "^1.2.1",
|
||||||
|
|
|
@ -327,6 +327,10 @@
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.midBackdropCard-scalable {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
.squareCard-scalable {
|
.squareCard-scalable {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
@ -354,6 +358,10 @@
|
||||||
.backdropCard-scalable {
|
.backdropCard-scalable {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.midBackdropCard-scalable {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 500px) {
|
@media all and (min-width: 500px) {
|
||||||
|
@ -384,6 +392,10 @@
|
||||||
.overflowSquareCard-scalable {
|
.overflowSquareCard-scalable {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.midBackdropCard-scalable {
|
||||||
|
width: 33.333333333333333333333333333333%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 700px) {
|
@media all and (min-width: 700px) {
|
||||||
|
@ -419,6 +431,10 @@
|
||||||
.squareCard-scalable {
|
.squareCard-scalable {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.midBackdropCard-scalable {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 1000px) {
|
@media all and (min-width: 1000px) {
|
||||||
|
@ -462,6 +478,10 @@
|
||||||
.smallBackdropCard-scalable {
|
.smallBackdropCard-scalable {
|
||||||
width: 16.666666666666666666666666666667%;
|
width: 16.666666666666666666666666666667%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.midBackdropCard-scalable {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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 currentItem;
|
||||||
var hasChanges = false;
|
var hasChanges = false;
|
||||||
|
@ -16,12 +16,17 @@
|
||||||
|
|
||||||
loading.show();
|
loading.show();
|
||||||
|
|
||||||
|
var apiClient;
|
||||||
|
|
||||||
if (item) {
|
if (item) {
|
||||||
reloadItem(page, item);
|
apiClient = connectionManager.getApiClient(item.ServerId);
|
||||||
|
reloadItem(page, item, apiClient);
|
||||||
}
|
}
|
||||||
else {
|
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;
|
currentItem = item;
|
||||||
|
|
||||||
ApiClient.getRemoteImageProviders(getBaseRemoteOptions()).then(function (providers) {
|
apiClient.getRemoteImageProviders(getBaseRemoteOptions()).then(function (providers) {
|
||||||
|
|
||||||
var btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages');
|
var btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages');
|
||||||
for (var i = 0, length = btnBrowseAllImages.length; i < length; i++) {
|
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);
|
renderStandardImages(page, apiClient, item, imageInfos, providers);
|
||||||
renderBackdrops(page, item, imageInfos, providers);
|
renderBackdrops(page, apiClient, item, imageInfos, providers);
|
||||||
renderScreenshots(page, item, imageInfos, providers);
|
renderScreenshots(page, apiClient, item, imageInfos, providers);
|
||||||
loading.hide();
|
loading.hide();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function getImageUrl(item, type, index, options) {
|
function getImageUrl(item, apiClient, type, index, options) {
|
||||||
|
|
||||||
options = options || {};
|
options = options || {};
|
||||||
options.type = type;
|
options.type = type;
|
||||||
|
@ -78,66 +83,102 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// For search hints
|
// 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 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 += ' ';
|
||||||
|
}
|
||||||
|
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++) {
|
for (var i = 0, length = images.length; i < length; i++) {
|
||||||
|
|
||||||
var image = images[i];
|
var image = images[i];
|
||||||
|
|
||||||
html += '<div class="editorTile imageEditorTile">';
|
html += getCardHtml(image, i, apiClient, imageProviders, imageSize, tagName, enableFooterButtons);
|
||||||
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> </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>';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
elem.innerHTML = html;
|
elem.innerHTML = html;
|
||||||
|
@ -154,7 +195,7 @@
|
||||||
|
|
||||||
require(['confirm'], function (confirm) {
|
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 () {
|
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) {
|
var images = imageInfos.filter(function (i) {
|
||||||
return i.ImageType != "Screenshot" && i.ImageType != "Backdrop" && i.ImageType != "Chapter";
|
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) {
|
var images = imageInfos.filter(function (i) {
|
||||||
return i.ImageType == "Backdrop";
|
return i.ImageType == "Backdrop";
|
||||||
|
@ -199,13 +240,13 @@
|
||||||
|
|
||||||
if (images.length) {
|
if (images.length) {
|
||||||
page.querySelector('#backdropsContainer', page).classList.remove('hide');
|
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 {
|
} else {
|
||||||
page.querySelector('#backdropsContainer', page).classList.add('hide');
|
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) {
|
var images = imageInfos.filter(function (i) {
|
||||||
return i.ImageType == "Screenshot";
|
return i.ImageType == "Screenshot";
|
||||||
|
@ -216,7 +257,7 @@
|
||||||
|
|
||||||
if (images.length) {
|
if (images.length) {
|
||||||
page.querySelector('#screenshotsContainer', page).classList.remove('hide');
|
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 {
|
} else {
|
||||||
page.querySelector('#screenshotsContainer', page).classList.add('hide');
|
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();
|
loading.show();
|
||||||
|
|
||||||
var xhr = new XMLHttpRequest();
|
require(['text!./imageeditor.template.html'], function (template) {
|
||||||
xhr.open('GET', 'components/imageeditor/imageeditor.template.html', true);
|
var apiClient = connectionManager.getApiClient(serverId);
|
||||||
|
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
|
||||||
|
|
||||||
xhr.onload = function (e) {
|
var dialogOptions = {
|
||||||
|
|
||||||
var template = this.response;
|
|
||||||
ApiClient.getItem(ApiClient.getCurrentUserId(), itemId).then(function (item) {
|
|
||||||
|
|
||||||
var dlg = dialogHelper.createDialog({
|
|
||||||
size: 'fullscreen-border',
|
|
||||||
removeOnClose: true
|
removeOnClose: true
|
||||||
});
|
};
|
||||||
|
|
||||||
var theme = options.theme || 'b';
|
if (layoutManager.tv) {
|
||||||
|
dialogOptions.size = 'fullscreen';
|
||||||
|
} else {
|
||||||
|
dialogOptions.size = 'fullscreen-border';
|
||||||
|
}
|
||||||
|
|
||||||
dlg.classList.add('ui-body-' + theme);
|
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||||
dlg.classList.add('background-theme-' + theme);
|
|
||||||
|
|
||||||
var html = '';
|
dlg.classList.add('formDialog');
|
||||||
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"></i></button>';
|
|
||||||
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + item.Name + '</div>';
|
|
||||||
html += '</h2>';
|
|
||||||
|
|
||||||
html += '<div class="editorContent" style="padding:0 1em;">';
|
dlg.innerHTML = globalize.translateDocument(template, 'sharedcomponents');
|
||||||
html += Globalize.translateDocument(template);
|
dlg.querySelector('.formDialogHeaderTitle').innerHTML = item.Name;
|
||||||
html += '</div>';
|
|
||||||
|
|
||||||
dlg.innerHTML = html;
|
|
||||||
document.body.appendChild(dlg);
|
document.body.appendChild(dlg);
|
||||||
|
|
||||||
|
if (layoutManager.tv) {
|
||||||
|
scrollHelper.centerFocus.on(dlg, false);
|
||||||
|
}
|
||||||
|
|
||||||
initEditor(dlg, options);
|
initEditor(dlg, options);
|
||||||
|
|
||||||
// Has to be assigned a z-index after the call to .open()
|
// Has to be assigned a z-index after the call to .open()
|
||||||
dlg.addEventListener('close', function () {
|
dlg.addEventListener('close', function () {
|
||||||
|
|
||||||
|
if (layoutManager.tv) {
|
||||||
|
scrollHelper.centerFocus.off(dlg, false);
|
||||||
|
}
|
||||||
|
|
||||||
loading.hide();
|
loading.hide();
|
||||||
|
|
||||||
if (hasChanges) {
|
if (hasChanges) {
|
||||||
|
@ -313,27 +355,24 @@
|
||||||
|
|
||||||
dialogHelper.open(dlg);
|
dialogHelper.open(dlg);
|
||||||
|
|
||||||
var editorContent = dlg.querySelector('.editorContent');
|
reload(dlg, item);
|
||||||
reload(editorContent, item);
|
|
||||||
|
|
||||||
dlg.querySelector('.btnCloseDialog').addEventListener('click', function () {
|
dlg.querySelector('.btnCancel').addEventListener('click', function () {
|
||||||
|
|
||||||
dialogHelper.close(dlg);
|
dialogHelper.close(dlg);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
});
|
||||||
|
|
||||||
xhr.send();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
show: function (itemId, options) {
|
show: function (options) {
|
||||||
|
|
||||||
return new Promise(function (resolve, reject) {
|
return new Promise(function (resolve, reject) {
|
||||||
|
|
||||||
hasChanges = false;
|
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
55
dashboard-ui/bower_components/emby-webcomponents/imageeditor/imageeditor.template.html
vendored
Normal file
|
@ -0,0 +1,55 @@
|
||||||
|
<div class="formDialogHeader">
|
||||||
|
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon"></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>
|
||||||
|
|
|
@ -58,13 +58,11 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter',
|
||||||
|
|
||||||
if (itemHelper.canEditImages(user, item.Type)) {
|
if (itemHelper.canEditImages(user, item.Type)) {
|
||||||
|
|
||||||
if (isMobileApp) {
|
if (options.editImages !== false) {
|
||||||
if (options.editImages !== false) {
|
commands.push({
|
||||||
commands.push({
|
name: globalize.translate('sharedcomponents#EditImages'),
|
||||||
name: globalize.translate('sharedcomponents#EditImages'),
|
id: 'editimages'
|
||||||
id: 'editimages'
|
});
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -318,9 +316,13 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter',
|
||||||
}
|
}
|
||||||
case 'editimages':
|
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;
|
break;
|
||||||
}
|
}
|
||||||
|
|
|
@ -174,21 +174,25 @@
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
var cssClass = "card scalableCard";
|
var cssClass = "card scalableCard";
|
||||||
|
var padderClass;
|
||||||
|
|
||||||
if (currentItemType == "Episode") {
|
if (currentItemType == "Episode") {
|
||||||
cssClass += " backdropCard backdropCard-scalable";
|
cssClass += " backdropCard backdropCard-scalable";
|
||||||
|
padderClass = 'cardPadder-backdrop';
|
||||||
}
|
}
|
||||||
else if (currentItemType == "MusicAlbum" || currentItemType == "MusicArtist") {
|
else if (currentItemType == "MusicAlbum" || currentItemType == "MusicArtist") {
|
||||||
cssClass += " squareCard squareCard-scalable";
|
cssClass += " squareCard squareCard-scalable";
|
||||||
|
padderClass = 'cardPadder-square';
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
cssClass += " portraitCard portraitCard-scalable";
|
cssClass += " portraitCard portraitCard-scalable";
|
||||||
|
padderClass = 'cardPadder-portrait';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
|
html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
|
||||||
html += '<div class="cardBox visualCardBox">';
|
html += '<div class="cardBox visualCardBox">';
|
||||||
html += '<div class="cardScalable visualCardBox-cardScalable">';
|
html += '<div class="cardScalable visualCardBox-cardScalable">';
|
||||||
html += '<div class="cardPadder-portrait"></div>';
|
html += '<div class="' + padderClass + '"></div>';
|
||||||
|
|
||||||
html += '<div class="cardContent searchImage">';
|
html += '<div class="cardContent searchImage">';
|
||||||
|
|
||||||
|
|
|
@ -271,5 +271,9 @@
|
||||||
"AutomaticallySyncNewContentHelp": "New content added to this folder will be automatically synced to the device.",
|
"AutomaticallySyncNewContentHelp": "New content added to this folder will be automatically synced to the device.",
|
||||||
"LabelItemLimit": "Item limit:",
|
"LabelItemLimit": "Item limit:",
|
||||||
"LabelItemLimitHelp": "Optional. Set a limit to the number of items that will be synced.",
|
"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?"
|
||||||
}
|
}
|
|
@ -32,14 +32,14 @@
|
||||||
"web-component-tester": "^4.0.0",
|
"web-component-tester": "^4.0.0",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.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",
|
"_release": "1.0.10",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.10",
|
"tag": "v1.0.10",
|
||||||
"commit": "f4e146da4982ff96bb25db85290c09e8de4ec734"
|
"commit": "f4e146da4982ff96bb25db85290c09e8de4ec734"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/iron-icon.git",
|
"_source": "git://github.com/polymerelements/iron-icon.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "PolymerElements/iron-icon"
|
"_originalSource": "polymerelements/iron-icon"
|
||||||
}
|
}
|
|
@ -27,14 +27,14 @@
|
||||||
},
|
},
|
||||||
"main": "iron-meta.html",
|
"main": "iron-meta.html",
|
||||||
"ignore": [],
|
"ignore": [],
|
||||||
"homepage": "https://github.com/PolymerElements/iron-meta",
|
"homepage": "https://github.com/polymerelements/iron-meta",
|
||||||
"_release": "1.1.2",
|
"_release": "1.1.2",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.1.2",
|
"tag": "v1.1.2",
|
||||||
"commit": "bae96531b63ea6d4ce982f5592248aea849c0f5a"
|
"commit": "bae96531b63ea6d4ce982f5592248aea849c0f5a"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/iron-meta.git",
|
"_source": "git://github.com/polymerelements/iron-meta.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "PolymerElements/iron-meta"
|
"_originalSource": "polymerelements/iron-meta"
|
||||||
}
|
}
|
|
@ -32,14 +32,14 @@
|
||||||
"iron-component-page": "polymerElements/iron-component-page#^1.1.6"
|
"iron-component-page": "polymerElements/iron-component-page#^1.1.6"
|
||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
"homepage": "https://github.com/Polymer/polymer",
|
"homepage": "https://github.com/polymer/polymer",
|
||||||
"_release": "1.6.1",
|
"_release": "1.6.1",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.6.1",
|
"tag": "v1.6.1",
|
||||||
"commit": "1f197d9d7874b1e5808b2a5c26f34446a7d912fc"
|
"commit": "1f197d9d7874b1e5808b2a5c26f34446a7d912fc"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/Polymer/polymer.git",
|
"_source": "git://github.com/polymer/polymer.git",
|
||||||
"_target": "^1.1.0",
|
"_target": "^1.1.0",
|
||||||
"_originalSource": "Polymer/polymer"
|
"_originalSource": "polymer/polymer"
|
||||||
}
|
}
|
|
@ -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 currentItemId;
|
||||||
var currentItemType;
|
var currentItemType;
|
||||||
|
|
|
@ -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>
|
|
|
@ -2179,9 +2179,14 @@
|
||||||
function editImages() {
|
function editImages() {
|
||||||
return new Promise(function (resolve, reject) {
|
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);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -227,10 +227,13 @@
|
||||||
|
|
||||||
function editImages(page, virtualFolder) {
|
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 () {
|
}).then(function () {
|
||||||
reloadLibrary(page);
|
reloadLibrary(page);
|
||||||
});
|
});
|
||||||
|
@ -297,7 +300,7 @@
|
||||||
style += "min-width:33.3%;";
|
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="cardBox visualCardBox">';
|
||||||
html += '<div class="cardScalable visualCardBox-cardScalable">';
|
html += '<div class="cardScalable visualCardBox-cardScalable">';
|
||||||
|
|
|
@ -1291,6 +1291,7 @@ var AppInfo = {};
|
||||||
define("itemIdentifier", [embyWebComponentsBowerPath + "/itemidentifier/itemidentifier"], returnFirstDependency);
|
define("itemIdentifier", [embyWebComponentsBowerPath + "/itemidentifier/itemidentifier"], returnFirstDependency);
|
||||||
define("mediaInfo", [embyWebComponentsBowerPath + "/mediainfo/mediainfo"], returnFirstDependency);
|
define("mediaInfo", [embyWebComponentsBowerPath + "/mediainfo/mediainfo"], returnFirstDependency);
|
||||||
define("itemContextMenu", [embyWebComponentsBowerPath + "/itemcontextmenu"], returnFirstDependency);
|
define("itemContextMenu", [embyWebComponentsBowerPath + "/itemcontextmenu"], returnFirstDependency);
|
||||||
|
define("imageEditor", [embyWebComponentsBowerPath + "/imageeditor/imageeditor"], returnFirstDependency);
|
||||||
define("dom", [embyWebComponentsBowerPath + "/dom"], returnFirstDependency);
|
define("dom", [embyWebComponentsBowerPath + "/dom"], returnFirstDependency);
|
||||||
define("layoutManager", [embyWebComponentsBowerPath + "/layoutmanager"], getLayoutManager);
|
define("layoutManager", [embyWebComponentsBowerPath + "/layoutmanager"], getLayoutManager);
|
||||||
define("playMenu", [embyWebComponentsBowerPath + "/playmenu"], returnFirstDependency);
|
define("playMenu", [embyWebComponentsBowerPath + "/playmenu"], returnFirstDependency);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue