mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
begin rework of image editor
This commit is contained in:
Luke Pulverenti
parent
7ea4d0b4c9
commit
5bccc1840e
53 changed files with 965 additions and 787 deletions
|
|
@ -1,577 +0,0 @@
|
|||
(function ($, document, window, FileReader, escape) {
|
||||
|
||||
var currentItem;
|
||||
var currentFile;
|
||||
|
||||
var browsableImagePageSize = 10;
|
||||
var browsableImageStartIndex = 0;
|
||||
var browsableImageType = 'Primary';
|
||||
var selectedProvider;
|
||||
|
||||
function getBaseRemoteOptions() {
|
||||
|
||||
var options = {};
|
||||
|
||||
options.itemId = currentItem.Id;
|
||||
|
||||
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, currentItem, 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, item, 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 downloadRemoteImage(page, url, type, provider) {
|
||||
|
||||
var options = getBaseRemoteOptions();
|
||||
|
||||
options.Type = type;
|
||||
options.ImageUrl = url;
|
||||
options.ProviderName = provider;
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
ApiClient.downloadRemoteImage(options).done(function () {
|
||||
|
||||
$('.popupDownload', page).popup("close");
|
||||
reload(page);
|
||||
});
|
||||
}
|
||||
|
||||
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 += image.ProviderName;
|
||||
html += '</div>';
|
||||
|
||||
if (image.Width || image.Height || image.Language) {
|
||||
|
||||
html += '<div class="remoteImageDetails">';
|
||||
|
||||
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="remoteImageDetails">';
|
||||
|
||||
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 += '<div><button class="btnDownloadRemoteImage" data-imageprovider="' + image.ProviderName + '" data-imageurl="' + image.Url + '" data-imagetype="' + image.Type + '" type="button" data-icon="arrow-d" data-mini="true">' + Globalize.translate('ButtonDownload') + '</button></div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
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 reload(page) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
browsableImageStartIndex = 0;
|
||||
browsableImageType = 'Primary';
|
||||
selectedProvider = null;
|
||||
|
||||
MetadataEditor.getItemPromise().done(function (item) {
|
||||
|
||||
currentItem = item;
|
||||
|
||||
LibraryBrowser.renderName(item, $('.itemName', page), true);
|
||||
|
||||
ApiClient.getRemoteImageProviders(getBaseRemoteOptions()).done(function (providers) {
|
||||
|
||||
if (providers.length) {
|
||||
$('.lnkBrowseAllImages', page).removeClass('hide');
|
||||
} else {
|
||||
$('.lnkBrowseAllImages', page).addClass('hide');
|
||||
}
|
||||
|
||||
ApiClient.getItemImageInfos(currentItem.Id).done(function (imageInfos) {
|
||||
|
||||
renderStandardImages(page, item, imageInfos, providers);
|
||||
renderBackdrops(page, item, imageInfos, providers);
|
||||
renderScreenshots(page, item, imageInfos, providers);
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderImages(page, item, images, imageProviders, elem) {
|
||||
|
||||
var html = '';
|
||||
|
||||
for (var i = 0, length = images.length; i < length; i++) {
|
||||
|
||||
var image = images[i];
|
||||
|
||||
html += '<div class="editorTile imageEditorTile">';
|
||||
|
||||
if (image.ImageType !== "Backdrop" && image.ImageType !== "Screenshot") {
|
||||
html += '<h3>' + image.ImageType + '</h3>';
|
||||
}
|
||||
|
||||
var height = 150;
|
||||
|
||||
html += '<div style="height:' + height + 'px;vertical-align:top;background-repeat:no-repeat;background-position:center center;background-size:contain;background-image:url(\'' + LibraryBrowser.getImageUrl(currentItem, image.ImageType, image.ImageIndex, { height: height }) + '\');"></div>';
|
||||
|
||||
html += '<div class="editorTileInner">';
|
||||
|
||||
if (image.Width && image.Height) {
|
||||
html += '<p>' + image.Width + ' X ' + image.Height + '</p>';
|
||||
} else {
|
||||
html += '<p> </p>';
|
||||
}
|
||||
|
||||
html += '<p>';
|
||||
|
||||
if (image.ImageType == "Backdrop" || image.ImageType == "Screenshot") {
|
||||
|
||||
if (i > 0) {
|
||||
html += '<paper-icon-button icon="chevron-left" onclick="EditItemImagesPage.moveImage(\'' + image.ImageType + '\', ' + image.ImageIndex + ', ' + (i - 1) + ');" title="' + Globalize.translate('ButtonMoveLeft') + '"></paper-icon-button>';
|
||||
} else {
|
||||
html += '<paper-icon-button icon="chevron-left" disabled title="' + Globalize.translate('ButtonMoveLeft') + '"></paper-icon-button>';
|
||||
}
|
||||
|
||||
if (i < length - 1) {
|
||||
html += '<paper-icon-button icon="chevron-right" onclick="EditItemImagesPage.moveImage(\'' + image.ImageType + '\', ' + image.ImageIndex + ', ' + (i + 1) + ');" title="' + Globalize.translate('ButtonMoveRight') + '"></paper-icon-button>';
|
||||
} else {
|
||||
html += '<paper-icon-button icon="chevron-right" disabled title="' + Globalize.translate('ButtonMoveRight') + '"></paper-icon-button>';
|
||||
}
|
||||
}
|
||||
|
||||
if (imageProviders.length) {
|
||||
html += '<paper-icon-button icon="cloud" onclick="EditItemImagesPage.showDownloadMenu(\'' + image.ImageType + '\');" title="' + Globalize.translate('ButtonBrowseOnlineImages') + '"></paper-icon-button>';
|
||||
}
|
||||
|
||||
html += '<paper-icon-button icon="delete" onclick="EditItemImagesPage.deleteImage(\'' + image.ImageType + '\', ' + (image.ImageIndex != null ? image.ImageIndex : "null") + ');" title="' + Globalize.translate('Delete') + '"></paper-icon-button>';
|
||||
|
||||
html += '</p>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
elem.html(html).trigger('create');
|
||||
}
|
||||
|
||||
function renderStandardImages(page, item, imageInfos, imageProviders) {
|
||||
|
||||
var images = imageInfos.filter(function (i) {
|
||||
return i.ImageType != "Screenshot" && i.ImageType != "Backdrop" && i.ImageType != "Chapter";
|
||||
});
|
||||
|
||||
if (images.length) {
|
||||
$('#imagesContainer', page).show();
|
||||
renderImages(page, item, images, imageProviders, $('#images', page));
|
||||
} else {
|
||||
$('#imagesContainer', page).hide();
|
||||
}
|
||||
}
|
||||
|
||||
function renderBackdrops(page, item, imageInfos, imageProviders) {
|
||||
|
||||
var images = imageInfos.filter(function (i) {
|
||||
return i.ImageType == "Backdrop";
|
||||
|
||||
}).sort(function (a, b) {
|
||||
return a.ImageIndex - b.ImageIndex;
|
||||
});
|
||||
|
||||
if (images.length) {
|
||||
$('#backdropsContainer', page).show();
|
||||
renderImages(page, item, images, imageProviders, $('#backdrops', page));
|
||||
} else {
|
||||
$('#backdropsContainer', page).hide();
|
||||
}
|
||||
}
|
||||
|
||||
function renderScreenshots(page, item, imageInfos, imageProviders) {
|
||||
|
||||
var images = imageInfos.filter(function (i) {
|
||||
return i.ImageType == "Screenshot";
|
||||
|
||||
}).sort(function (a, b) {
|
||||
return a.ImageIndex - b.ImageIndex;
|
||||
});
|
||||
|
||||
if (images.length) {
|
||||
$('#screenshotsContainer', page).show();
|
||||
renderImages(page, item, images, imageProviders, $('#screenshots', page));
|
||||
} else {
|
||||
$('#screenshotsContainer', page).hide();
|
||||
}
|
||||
}
|
||||
|
||||
function onFileReaderError(evt) {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
switch (evt.target.error.code) {
|
||||
case evt.target.error.NOT_FOUND_ERR:
|
||||
Dashboard.showError(Globalize.translate('MessageFileNotFound'));
|
||||
break;
|
||||
case evt.target.error.ABORT_ERR:
|
||||
break; // noop
|
||||
default:
|
||||
Dashboard.showError(Globalize.translate('MessageFileReadError'));
|
||||
break;
|
||||
};
|
||||
}
|
||||
|
||||
function setFiles(page, files) {
|
||||
|
||||
var file = files[0];
|
||||
|
||||
if (!file || !file.type.match('image.*')) {
|
||||
$('#imageOutput', page).html('');
|
||||
$('#fldUpload', page).hide();
|
||||
currentFile = null;
|
||||
return;
|
||||
}
|
||||
|
||||
currentFile = file;
|
||||
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onerror = onFileReaderError;
|
||||
reader.onloadstart = function () {
|
||||
$('#fldUpload', page).hide();
|
||||
};
|
||||
reader.onabort = function () {
|
||||
Dashboard.hideLoadingMsg();
|
||||
Logger.log('File read cancelled');
|
||||
};
|
||||
|
||||
// Closure to capture the file information.
|
||||
reader.onload = (function (theFile) {
|
||||
return function (e) {
|
||||
|
||||
// Render thumbnail.
|
||||
var html = ['<img style="max-width:300px;max-height:100px;" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
|
||||
|
||||
$('#imageOutput', page).html(html);
|
||||
$('#fldUpload', page).show();
|
||||
};
|
||||
})(file);
|
||||
|
||||
// Read in the image file as a data URL.
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
function processImageChangeResult(page) {
|
||||
|
||||
reload(page);
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
var file = currentFile;
|
||||
|
||||
if (!file) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (file.type != "image/png" && file.type != "image/jpeg" && file.type != "image/jpeg") {
|
||||
return false;
|
||||
}
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
var imageType = $('#selectImageType', page).val();
|
||||
|
||||
ApiClient.uploadItemImage(currentItem.Id, imageType, file).done(function () {
|
||||
|
||||
$('#uploadImage', page).val('').trigger('change');
|
||||
$('#popupUpload', page).popup("close");
|
||||
processImageChangeResult(page);
|
||||
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function editItemImages() {
|
||||
|
||||
var self = this;
|
||||
|
||||
self.deleteImage = function (type, index) {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
Dashboard.confirm(Globalize.translate('DeleteImageConfirmation'), Globalize.translate('HeaderDeleteImage'), function (result) {
|
||||
|
||||
if (result) {
|
||||
ApiClient.deleteItemImage(currentItem.Id, type, index).done(function () {
|
||||
|
||||
processImageChangeResult(page);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
|
||||
self.moveImage = function (type, index, newIndex) {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
ApiClient.updateItemImageIndex(currentItem.Id, type, index, newIndex).done(function () {
|
||||
|
||||
processImageChangeResult(page);
|
||||
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
|
||||
self.showDownloadMenu = function (type) {
|
||||
browsableImageStartIndex = 0;
|
||||
browsableImageType = type;
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
selectedProvider = null;
|
||||
$('.popupDownload', page).popup('open');
|
||||
reloadBrowsableImages(page);
|
||||
};
|
||||
}
|
||||
|
||||
window.EditItemImagesPage = new editItemImages();
|
||||
|
||||
$(document).on('pageinit', "#editItemMetadataPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
$('#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);
|
||||
});
|
||||
|
||||
$('.uploadItemImageForm').off('submit', onSubmit).on('submit', onSubmit);
|
||||
|
||||
$('.btnOpenUploadMenu', page).on('click', function () {
|
||||
|
||||
$('#popupUpload', page).popup('open');
|
||||
});
|
||||
|
||||
$('.btnBrowseAllImages', page).on('click', function () {
|
||||
|
||||
selectedProvider = null;
|
||||
browsableImageType = 'Primary';
|
||||
$('.popupDownload', page).popup('open');
|
||||
reloadBrowsableImages(page);
|
||||
});
|
||||
|
||||
$('#uploadImage', page).on("change", function () {
|
||||
setFiles(page, this.files);
|
||||
});
|
||||
|
||||
$("#imageDropZone", page).on('dragover', function (e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
e.originalEvent.dataTransfer.dropEffect = 'Copy';
|
||||
|
||||
return false;
|
||||
|
||||
}).on('drop', function (e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
setFiles(page, e.originalEvent.dataTransfer.files);
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$(page.querySelector('paper-tabs')).on('tabchange', function () {
|
||||
|
||||
if (parseInt(this.selected) == 1) {
|
||||
var tabContent = page.querySelector('.imageEditorTab');
|
||||
|
||||
reload(tabContent);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
})(jQuery, document, window, window.FileReader, escape);
|
||||
|
|
@ -1447,7 +1447,7 @@
|
|||
|
||||
//$.mobile.urlHistory.ignoreNextHashChange = true;
|
||||
window.location.hash = 'editItemMetadataPage?id=' + data.id;
|
||||
$(page.querySelector('paper-tabs')).trigger('tabchange');
|
||||
reload(page);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -1462,25 +1462,6 @@
|
|||
$('.popupAdvancedRefreshForm').off('submit', EditItemMetadataPage.onRefreshFormSubmit).on('submit', EditItemMetadataPage.onRefreshFormSubmit);
|
||||
$('.identifyOptionsForm').off('submit', EditItemMetadataPage.onIdentificationOptionsSubmit).on('submit', EditItemMetadataPage.onIdentificationOptionsSubmit);
|
||||
|
||||
var tabs = page.querySelector('paper-tabs');
|
||||
|
||||
configurePaperLibraryTabs(page, tabs);
|
||||
|
||||
$(tabs).on('iron-select', function () {
|
||||
|
||||
var self = this;
|
||||
|
||||
setTimeout(function () {
|
||||
Events.trigger(self, 'tabchange');
|
||||
}, 400);
|
||||
|
||||
}).on('tabchange', function () {
|
||||
var selected = this.selected;
|
||||
|
||||
showTab(page, selected);
|
||||
loadTab(page, parseInt(this.selected));
|
||||
});
|
||||
|
||||
page.querySelector('.btnMore iron-icon').icon = AppInfo.moreIcon;
|
||||
|
||||
$('.btnMore', page).on('click', function () {
|
||||
|
|
@ -1492,10 +1473,7 @@
|
|||
var page = this;
|
||||
|
||||
$(LibraryBrowser).on('itemdeleting', onItemDeleted);
|
||||
|
||||
var selected = parseInt(getParameterByName('tab') || '0');
|
||||
|
||||
page.querySelector('paper-tabs').selected = selected;
|
||||
reload(page);
|
||||
|
||||
}).on('pagebeforehide', "#editItemMetadataPage", function () {
|
||||
|
||||
|
|
@ -1503,49 +1481,7 @@
|
|||
$(LibraryBrowser).off('itemdeleting', onItemDeleted);
|
||||
|
||||
unbindItemChanged(page);
|
||||
|
||||
});
|
||||
|
||||
function configurePaperLibraryTabs(ownerpage, tabs) {
|
||||
|
||||
tabs.hideScrollButtons = true;
|
||||
tabs.noSlide = true;
|
||||
|
||||
// Unfortunately we can't disable this because it causes iron-select to not fire in IE and Safari.
|
||||
//tabs.noink = true;
|
||||
|
||||
$(ownerpage).on('pageshowready', function () {
|
||||
|
||||
var selected = tabs.selected;
|
||||
|
||||
if (selected == null) {
|
||||
|
||||
Logger.log('selected tab is null, checking query string');
|
||||
|
||||
selected = parseInt(getParameterByName('tab') || '0');
|
||||
|
||||
Logger.log('selected tab will be ' + selected);
|
||||
|
||||
tabs.selected = selected;
|
||||
|
||||
} else {
|
||||
Events.trigger(tabs, 'tabchange');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadTab(page, index) {
|
||||
|
||||
switch (index) {
|
||||
|
||||
case 0:
|
||||
reload(page);
|
||||
break;
|
||||
default:
|
||||
reload(page);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
})(jQuery, document, window);
|
||||
|
||||
|
|
|
|||
|
|
@ -244,9 +244,7 @@
|
|||
|
||||
function renderImage(page, item, user) {
|
||||
|
||||
var imageHref = user.Policy.IsAdministrator && item.MediaType != 'Photo' ? "edititemmetadata.html?tab=1&id=" + item.Id : "";
|
||||
|
||||
LibraryBrowser.renderDetailImage(page.querySelector('.detailImageContainer'), item, imageHref);
|
||||
LibraryBrowser.renderDetailImage(page.querySelector('.detailImageContainer'), item, user.Policy.IsAdministrator && item.MediaType != 'Photo');
|
||||
}
|
||||
|
||||
function refreshImage(page, item, user) {
|
||||
|
|
|
|||
|
|
@ -678,9 +678,10 @@
|
|||
|
||||
commands.push('edit');
|
||||
|
||||
if (item.MediaType == 'Video' && item.Type != 'TvChannel' && item.Type != 'Program') {
|
||||
commands.push('managesubtitles');
|
||||
if (item.MediaType == 'Video' && item.Type != 'TvChannel' && item.Type != 'Program' && item.LocationType != 'Virtual') {
|
||||
commands.push('editsubtitles');
|
||||
}
|
||||
commands.push('editimages');
|
||||
}
|
||||
|
||||
commands.push('refresh');
|
||||
|
|
@ -735,9 +736,17 @@
|
|||
}, 250);
|
||||
},
|
||||
|
||||
editImages: function (itemId) {
|
||||
|
||||
require(['components/imageeditor/imageeditor'], function () {
|
||||
|
||||
ImageEditor.show(itemId);
|
||||
});
|
||||
},
|
||||
|
||||
editSubtitles: function (itemId) {
|
||||
|
||||
require(['subtitleeditor/subtitleeditor'], function () {
|
||||
require(['components/subtitleeditor/subtitleeditor'], function () {
|
||||
|
||||
SubtitleEditor.show(itemId);
|
||||
});
|
||||
|
|
@ -787,10 +796,18 @@
|
|||
});
|
||||
}
|
||||
|
||||
if (commands.indexOf('managesubtitles') != -1) {
|
||||
if (commands.indexOf('editimages') != -1) {
|
||||
items.push({
|
||||
name: Globalize.translate('ButtonEditImages'),
|
||||
id: 'editimages',
|
||||
ironIcon: 'photo'
|
||||
});
|
||||
}
|
||||
|
||||
if (commands.indexOf('editsubtitles') != -1) {
|
||||
items.push({
|
||||
name: Globalize.translate('ButtonEditSubtitles'),
|
||||
id: 'managesubtitles',
|
||||
id: 'editsubtitles',
|
||||
ironIcon: 'closed-caption'
|
||||
});
|
||||
}
|
||||
|
|
@ -846,9 +863,12 @@
|
|||
case 'edit':
|
||||
Dashboard.navigate('edititemmetadata.html?id=' + itemId);
|
||||
break;
|
||||
case 'managesubtitles':
|
||||
case 'editsubtitles':
|
||||
LibraryBrowser.editSubtitles(itemId);
|
||||
break;
|
||||
case 'editimages':
|
||||
LibraryBrowser.editImages(itemId);
|
||||
break;
|
||||
case 'refresh':
|
||||
ApiClient.refreshItem(itemId, {
|
||||
|
||||
|
|
@ -1431,9 +1451,10 @@
|
|||
itemCommands.push('record');
|
||||
}
|
||||
|
||||
if (item.MediaType == 'Video' && item.Type != 'TvChannel' && item.Type != 'Program') {
|
||||
itemCommands.push('managesubtitles');
|
||||
if (item.MediaType == 'Video' && item.Type != 'TvChannel' && item.Type != 'Program' && item.LocationType != 'Virtual') {
|
||||
itemCommands.push('editsubtitles');
|
||||
}
|
||||
itemCommands.push('editimages');
|
||||
|
||||
return itemCommands;
|
||||
},
|
||||
|
|
@ -3030,7 +3051,7 @@
|
|||
return html;
|
||||
},
|
||||
|
||||
renderDetailImage: function (elem, item, href, preferThumb) {
|
||||
renderDetailImage: function (elem, item, editable, preferThumb) {
|
||||
|
||||
var imageTags = item.ImageTags || {};
|
||||
|
||||
|
|
@ -3127,8 +3148,8 @@
|
|||
|
||||
html += '<div style="position:relative;">';
|
||||
|
||||
if (href) {
|
||||
html += "<a class='itemDetailGalleryLink' href='" + href + "'>";
|
||||
if (editable) {
|
||||
html += "<a onclick='LibraryBrowser.editImages(\"" + item.Id + "\");' class='itemDetailGalleryLink' href='#'>";
|
||||
}
|
||||
|
||||
if (detectRatio && item.PrimaryImageAspectRatio) {
|
||||
|
|
@ -3142,7 +3163,7 @@
|
|||
|
||||
html += "<img class='itemDetailImage' src='" + url + "' />";
|
||||
|
||||
if (href) {
|
||||
if (editable) {
|
||||
html += "</a>";
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -238,10 +238,18 @@
|
|||
});
|
||||
}
|
||||
|
||||
if (commands.indexOf('managesubtitles') != -1) {
|
||||
if (commands.indexOf('editimages') != -1) {
|
||||
items.push({
|
||||
name: Globalize.translate('ButtonEditImages'),
|
||||
id: 'editimages',
|
||||
ironIcon: 'photo'
|
||||
});
|
||||
}
|
||||
|
||||
if (commands.indexOf('editsubtitles') != -1) {
|
||||
items.push({
|
||||
name: Globalize.translate('ButtonEditSubtitles'),
|
||||
id: 'managesubtitles',
|
||||
id: 'editsubtitles',
|
||||
ironIcon: 'closed-caption'
|
||||
});
|
||||
}
|
||||
|
|
@ -481,9 +489,12 @@
|
|||
}]
|
||||
});
|
||||
break;
|
||||
case 'managesubtitles':
|
||||
case 'editsubtitles':
|
||||
LibraryBrowser.editSubtitles(itemId);
|
||||
break;
|
||||
case 'editimages':
|
||||
LibraryBrowser.editImages(itemId);
|
||||
break;
|
||||
case 'externalplayer':
|
||||
LibraryBrowser.playInExternalPlayer(itemId);
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -1048,22 +1048,16 @@ $.fn.createHoverTouch = function () {
|
|||
|
||||
(function () {
|
||||
|
||||
var backUrl;
|
||||
var isCurrentNavBack = false;
|
||||
|
||||
pageClassOn('pagebeforeshow', "page", function () {
|
||||
|
||||
if (getWindowUrl() != backUrl) {
|
||||
backUrl = null;
|
||||
}
|
||||
});
|
||||
|
||||
$(window).on("popstate", function () {
|
||||
backUrl = getWindowUrl();
|
||||
$(window).on("navigate", function (e, data) {
|
||||
data = data.state || {};
|
||||
isCurrentNavBack = data.direction == 'back';
|
||||
});
|
||||
|
||||
function isBack() {
|
||||
|
||||
return backUrl == getWindowUrl();
|
||||
return isCurrentNavBack;
|
||||
}
|
||||
|
||||
window.NavHelper = {
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
}
|
||||
|
||||
function renderImage(page, item) {
|
||||
LibraryBrowser.renderDetailImage(page.querySelector('.detailImageContainer'), item, '#');
|
||||
LibraryBrowser.renderDetailImage(page.querySelector('.detailImageContainer'), item, false);
|
||||
}
|
||||
|
||||
$(document).on('pageinit', "#publicSharedItemPage", function () {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue