mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
rework image editor
This commit is contained in:
Luke Pulverenti
parent
5bccc1840e
commit
1bb7d85b87
9 changed files with 458 additions and 420 deletions
338
dashboard-ui/components/imagedownloader/imagedownloader.js
Normal file
338
dashboard-ui/components/imagedownloader/imagedownloader.js
Normal file
|
|
@ -0,0 +1,338 @@
|
|||
(function ($, window, document) {
|
||||
|
||||
var currentItemId;
|
||||
var currentDeferred;
|
||||
var hasChanges = false;
|
||||
|
||||
var browsableImagePageSize = 10;
|
||||
var browsableImageStartIndex = 0;
|
||||
var browsableImageType = 'Primary';
|
||||
var selectedProvider;
|
||||
|
||||
function getBaseRemoteOptions() {
|
||||
|
||||
var options = {};
|
||||
|
||||
options.itemId = currentItemId;
|
||||
|
||||
return options;
|
||||
}
|
||||
|
||||
function reloadBrowsableImages(page) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var options = getBaseRemoteOptions();
|
||||
|
||||
options.type = browsableImageType;
|
||||
options.startIndex = browsableImageStartIndex;
|
||||
options.limit = browsableImagePageSize;
|
||||
options.IncludeAllLanguages = $('#chkAllLanguages', page).checked();
|
||||
|
||||
var provider = selectedProvider || '';
|
||||
|
||||
if (provider) {
|
||||
options.ProviderName = provider;
|
||||
}
|
||||
|
||||
ApiClient.getAvailableRemoteImages(options).done(function (result) {
|
||||
|
||||
renderRemoteImages(page, result, browsableImageType, options.startIndex, options.limit);
|
||||
|
||||
$('#selectBrowsableImageType', page).val(browsableImageType);
|
||||
|
||||
var providersHtml = result.Providers.map(function (p) {
|
||||
return '<option value="' + p + '">' + p + '</option>';
|
||||
});
|
||||
|
||||
$('#selectImageProvider', page).html('<option value="">' + Globalize.translate('LabelAll') + '</option>' + providersHtml).val(provider);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function renderRemoteImages(page, imagesResult, imageType, startIndex, limit) {
|
||||
$('.availableImagesPaging', page).html(getPagingHtml(startIndex, limit, imagesResult.TotalRecordCount)).trigger('create');
|
||||
|
||||
var html = '';
|
||||
|
||||
for (var i = 0, length = imagesResult.Images.length; i < length; i++) {
|
||||
|
||||
html += getRemoteImageHtml(imagesResult.Images[i], imageType);
|
||||
}
|
||||
|
||||
$('.availableImagesList', page).html(html).trigger('create');
|
||||
|
||||
$('.btnNextPage', page).on('click', function () {
|
||||
browsableImageStartIndex += browsableImagePageSize;
|
||||
reloadBrowsableImages(page);
|
||||
});
|
||||
|
||||
$('.btnPreviousPage', page).on('click', function () {
|
||||
browsableImageStartIndex -= browsableImagePageSize;
|
||||
reloadBrowsableImages(page);
|
||||
});
|
||||
|
||||
$('.btnDownloadRemoteImage', page).on('click', function () {
|
||||
|
||||
downloadRemoteImage(page, this.getAttribute('data-imageurl'), this.getAttribute('data-imagetype'), this.getAttribute('data-imageprovider'));
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function getPagingHtml(startIndex, limit, totalRecordCount) {
|
||||
|
||||
var html = '';
|
||||
|
||||
var recordsEnd = Math.min(startIndex + limit, totalRecordCount);
|
||||
|
||||
// 20 is the minimum page size
|
||||
var showControls = totalRecordCount > limit;
|
||||
|
||||
html += '<div class="listPaging">';
|
||||
|
||||
html += '<span style="margin-right: 10px;">';
|
||||
|
||||
var startAtDisplay = totalRecordCount ? startIndex + 1 : 0;
|
||||
html += startAtDisplay + '-' + recordsEnd + ' of ' + totalRecordCount;
|
||||
|
||||
html += '</span>';
|
||||
|
||||
if (showControls) {
|
||||
html += '<div data-role="controlgroup" data-type="horizontal" style="display:inline-block;">';
|
||||
|
||||
html += '<paper-icon-button icon="arrow-back" title="' + Globalize.translate('ButtonPreviousPage') + '" class="btnPreviousPage" ' + (startIndex ? '' : 'disabled') + '></paper-icon-button>';
|
||||
html += '<paper-icon-button icon="arrow-forward" title="' + Globalize.translate('ButtonNextPage') + '" class="btnNextPage" ' + (startIndex + limit > totalRecordCount ? 'disabled' : '') + '></paper-icon-button>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function downloadRemoteImage(page, url, type, provider) {
|
||||
|
||||
var options = getBaseRemoteOptions();
|
||||
|
||||
options.Type = type;
|
||||
options.ImageUrl = url;
|
||||
options.ProviderName = provider;
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
ApiClient.downloadRemoteImage(options).done(function () {
|
||||
|
||||
hasChanges = true;
|
||||
history.back();
|
||||
});
|
||||
}
|
||||
|
||||
function getDisplayUrl(url) {
|
||||
return ApiClient.getUrl("Images/Remote", { imageUrl: url });
|
||||
}
|
||||
|
||||
function getRemoteImageHtml(image, imageType) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<div class="remoteImageContainer">';
|
||||
|
||||
var cssClass = "remoteImage";
|
||||
|
||||
if (imageType == "Backdrop" || imageType == "Art" || imageType == "Thumb" || imageType == "Logo") {
|
||||
cssClass += " remoteBackdropImage";
|
||||
}
|
||||
else if (imageType == "Banner") {
|
||||
cssClass += " remoteBannerImage";
|
||||
}
|
||||
else if (imageType == "Disc") {
|
||||
cssClass += " remoteDiscImage";
|
||||
}
|
||||
else {
|
||||
|
||||
if (currentItem.Type == "Episode") {
|
||||
cssClass += " remoteBackdropImage";
|
||||
}
|
||||
else if (currentItem.Type == "MusicAlbum" || currentItem.Type == "MusicArtist") {
|
||||
cssClass += " remoteDiscImage";
|
||||
}
|
||||
else {
|
||||
cssClass += " remotePosterImage";
|
||||
}
|
||||
}
|
||||
|
||||
var displayUrl = getDisplayUrl(image.ThumbnailUrl || image.Url);
|
||||
|
||||
html += '<a target="_blank" href="' + getDisplayUrl(image.Url) + '" class="' + cssClass + '" style="background-image:url(\'' + displayUrl + '\');">';
|
||||
html += '</a>';
|
||||
|
||||
html += '<div class="remoteImageDetails">';
|
||||
|
||||
html += '<div class="remoteImageDetailText">';
|
||||
html += image.ProviderName;
|
||||
html += '</div>';
|
||||
|
||||
if (image.Width || image.Height || image.Language) {
|
||||
|
||||
html += '<div class="remoteImageDetailText">';
|
||||
|
||||
if (image.Width && image.Height) {
|
||||
html += image.Width + ' x ' + image.Height;
|
||||
|
||||
if (image.Language) {
|
||||
|
||||
html += ' • ' + image.Language;
|
||||
}
|
||||
} else {
|
||||
if (image.Language) {
|
||||
|
||||
html += image.Language;
|
||||
}
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
if (image.CommunityRating != null) {
|
||||
|
||||
html += '<div class="remoteImageDetailText">';
|
||||
|
||||
if (image.RatingType == "Likes") {
|
||||
html += image.CommunityRating + (image.CommunityRating == 1 ? " like" : " likes");
|
||||
} else {
|
||||
|
||||
if (image.CommunityRating) {
|
||||
html += image.CommunityRating.toFixed(1);
|
||||
|
||||
if (image.VoteCount) {
|
||||
html += ' • ' + image.VoteCount + (image.VoteCount == 1 ? " vote" : " votes");
|
||||
}
|
||||
} else {
|
||||
html += "Unrated";
|
||||
}
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
html += '<paper-icon-button icon="cloud-download" class="btnDownloadRemoteImage" raised data-imageprovider="' + image.ProviderName + '" data-imageurl="' + image.Url + '" data-imagetype="' + image.Type + '" title="' + Globalize.translate('ButtonDownload') + '"></paper-icon-button>';
|
||||
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function initEditor(page) {
|
||||
|
||||
$('#selectBrowsableImageType', page).on('change', function () {
|
||||
|
||||
browsableImageType = this.value;
|
||||
browsableImageStartIndex = 0;
|
||||
selectedProvider = null;
|
||||
|
||||
reloadBrowsableImages(page);
|
||||
});
|
||||
|
||||
$('#selectImageProvider', page).on('change', function () {
|
||||
|
||||
browsableImageStartIndex = 0;
|
||||
selectedProvider = this.value;
|
||||
|
||||
reloadBrowsableImages(page);
|
||||
});
|
||||
|
||||
$('#chkAllLanguages', page).on('change', function () {
|
||||
|
||||
browsableImageStartIndex = 0;
|
||||
|
||||
reloadBrowsableImages(page);
|
||||
});
|
||||
}
|
||||
|
||||
function showEditor(itemId) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
ApiClient.ajax({
|
||||
|
||||
type: 'GET',
|
||||
url: 'components/imagedownloader/imagedownloader.template.html'
|
||||
|
||||
}).done(function (template) {
|
||||
|
||||
currentItemId = itemId;
|
||||
|
||||
var dlg = document.createElement('paper-dialog');
|
||||
|
||||
dlg.setAttribute('with-backdrop', 'with-backdrop');
|
||||
dlg.setAttribute('role', 'alertdialog');
|
||||
// without this safari will scroll the background instead of the dialog contents
|
||||
dlg.setAttribute('modal', 'modal');
|
||||
dlg.entryAnimation = 'scale-up-animation';
|
||||
dlg.exitAnimation = 'fade-out-animation';
|
||||
dlg.classList.add('fullscreen-editor-paper-dialog');
|
||||
dlg.classList.add('ui-body-b');
|
||||
|
||||
var html = '';
|
||||
html += '<h2 class="dialogHeader">';
|
||||
html += '<paper-fab icon="arrow-back" class="mini btnCloseDialog"></paper-fab>';
|
||||
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + Globalize.translate('HeaderSearch') + '</div>';
|
||||
html += '</h2>';
|
||||
|
||||
html += '<div class="editorContent">';
|
||||
html += Globalize.translateDocument(template);
|
||||
html += '</div>';
|
||||
|
||||
dlg.innerHTML = html;
|
||||
document.body.appendChild(dlg);
|
||||
|
||||
// Has to be assigned a z-index after the call to .open()
|
||||
$(dlg).on('iron-overlay-closed', onDialogClosed);
|
||||
|
||||
PaperDialogHelper.openWithHash(dlg, 'imagedownloader');
|
||||
|
||||
var editorContent = dlg.querySelector('.editorContent');
|
||||
initEditor(editorContent);
|
||||
|
||||
$('.btnCloseDialog', dlg).on('click', closeDialog);
|
||||
|
||||
reloadBrowsableImages(editorContent);
|
||||
});
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
|
||||
history.back();
|
||||
}
|
||||
|
||||
function onDialogClosed() {
|
||||
|
||||
$(this).remove();
|
||||
Dashboard.hideLoadingMsg();
|
||||
currentDeferred.resolveWith(null, [hasChanges]);
|
||||
}
|
||||
|
||||
window.ImageDownloader = {
|
||||
show: function (itemId, imageType) {
|
||||
|
||||
var deferred = DeferredBuilder.Deferred();
|
||||
|
||||
currentDeferred = deferred;
|
||||
hasChanges = false;
|
||||
browsableImagePageSize = 10;
|
||||
browsableImageStartIndex = 0;
|
||||
browsableImageType = imageType || 'Primary';
|
||||
selectedProvider = null;
|
||||
|
||||
require(['components/paperdialoghelper'], function () {
|
||||
|
||||
showEditor(itemId);
|
||||
});
|
||||
return deferred.promise();
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery, window, document);
|
||||
Loading…
Add table
Add a link
Reference in a new issue