mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
restore library editor
This commit is contained in:
parent
99d3154872
commit
55172c0a19
6 changed files with 239 additions and 65 deletions
191
dashboard-ui/components/medialibraryeditor/medialibraryeditor.js
Normal file
191
dashboard-ui/components/medialibraryeditor/medialibraryeditor.js
Normal file
|
@ -0,0 +1,191 @@
|
||||||
|
define([], function () {
|
||||||
|
|
||||||
|
var currentDeferred;
|
||||||
|
var hasChanges;
|
||||||
|
var currentOptions;
|
||||||
|
|
||||||
|
function addMediaLocation(page, path) {
|
||||||
|
|
||||||
|
var virtualFolder = currentOptions.library;
|
||||||
|
|
||||||
|
var refreshAfterChange = currentOptions.refresh;
|
||||||
|
|
||||||
|
ApiClient.addMediaPath(virtualFolder.Name, path, refreshAfterChange).done(function () {
|
||||||
|
|
||||||
|
refreshLibraryFromServer(page);
|
||||||
|
|
||||||
|
}).fail(function () {
|
||||||
|
|
||||||
|
Dashboard.showError(Globalize.translate('DefaultErrorMessage'));
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function onRemoveClick() {
|
||||||
|
|
||||||
|
var button = this;
|
||||||
|
var index = parseInt(button.getAttribute('data-index'));
|
||||||
|
|
||||||
|
var virtualFolder = currentOptions.library;
|
||||||
|
|
||||||
|
var location = virtualFolder.Locations[index];
|
||||||
|
|
||||||
|
Dashboard.confirm(Globalize.translate('MessageConfirmRemoveMediaLocation'), Globalize.translate('HeaderRemoveMediaLocation'), function (confirmResult) {
|
||||||
|
|
||||||
|
if (confirmResult) {
|
||||||
|
|
||||||
|
var refreshAfterChange = currentOptions.refresh;
|
||||||
|
|
||||||
|
ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).done(function () {
|
||||||
|
|
||||||
|
refreshLibraryFromServer($(button).parents('.editorContent')[0]);
|
||||||
|
|
||||||
|
}).fail(function () {
|
||||||
|
|
||||||
|
Dashboard.showError(Globalize.translate('DefaultErrorMessage'));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getFolderHtml(path, index) {
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
html += '<paper-icon-item role="menuitem" class="lnkPath">';
|
||||||
|
|
||||||
|
html += '<paper-fab class="listAvatar" style="background:#52B54B;" icon="folder" item-icon></paper-fab>';
|
||||||
|
|
||||||
|
html += '<paper-item-body>';
|
||||||
|
html += path;
|
||||||
|
html += '</paper-item-body>';
|
||||||
|
|
||||||
|
html += '<paper-icon-button icon="remove" class="btnRemovePath" data-index="' + index + '"></paper-icon-button>';
|
||||||
|
|
||||||
|
html += '</paper-icon-item>';
|
||||||
|
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshLibraryFromServer(page) {
|
||||||
|
|
||||||
|
ApiClient.getVirtualFolders().done(function (result) {
|
||||||
|
|
||||||
|
var library = result.filter(function (f) {
|
||||||
|
|
||||||
|
return f.Name == currentOptions.library.Name;
|
||||||
|
|
||||||
|
})[0];
|
||||||
|
|
||||||
|
if (library) {
|
||||||
|
currentOptions.library = library;
|
||||||
|
renderLibrary(page, currentOptions);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderLibrary(page, options) {
|
||||||
|
var foldersHtml = options.library.Locations.map(getFolderHtml).join('');
|
||||||
|
|
||||||
|
page.querySelector('.folderList').innerHTML = foldersHtml;
|
||||||
|
|
||||||
|
$(page.querySelectorAll('.btnRemovePath')).on('click', onRemoveClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onAddButtonClick() {
|
||||||
|
|
||||||
|
var page = $(this).parents('.editorContent')[0];
|
||||||
|
|
||||||
|
require(['directorybrowser'], function (directoryBrowser) {
|
||||||
|
|
||||||
|
var picker = new directoryBrowser();
|
||||||
|
|
||||||
|
picker.show({
|
||||||
|
|
||||||
|
callback: function (path) {
|
||||||
|
|
||||||
|
if (path) {
|
||||||
|
addMediaLocation(page, path);
|
||||||
|
}
|
||||||
|
picker.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function initEditor(page, options) {
|
||||||
|
renderLibrary(page, options);
|
||||||
|
|
||||||
|
$('.btnAddFolder', page).on('click', onAddButtonClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDialogClosed() {
|
||||||
|
|
||||||
|
$(this).remove();
|
||||||
|
Dashboard.hideLoadingMsg();
|
||||||
|
currentDeferred.resolveWith(null, [hasChanges]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function editor() {
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
self.show = function (options) {
|
||||||
|
|
||||||
|
var deferred = DeferredBuilder.Deferred();
|
||||||
|
|
||||||
|
currentOptions = options;
|
||||||
|
currentDeferred = deferred;
|
||||||
|
hasChanges = false;
|
||||||
|
|
||||||
|
require(['components/paperdialoghelper'], function () {
|
||||||
|
|
||||||
|
HttpClient.send({
|
||||||
|
|
||||||
|
type: 'GET',
|
||||||
|
url: 'components/medialibraryeditor/medialibraryeditor.template.html'
|
||||||
|
|
||||||
|
}).done(function (template) {
|
||||||
|
|
||||||
|
var dlg = PaperDialogHelper.createDialog({
|
||||||
|
size: 'small',
|
||||||
|
theme: 'a'
|
||||||
|
});
|
||||||
|
|
||||||
|
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;">' + options.library.Name + '</div>';
|
||||||
|
html += '</h2>';
|
||||||
|
|
||||||
|
html += '<div class="editorContent" style="max-width:800px;margin:auto;">';
|
||||||
|
html += Globalize.translateDocument(template);
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
dlg.innerHTML = html;
|
||||||
|
document.body.appendChild(dlg);
|
||||||
|
|
||||||
|
var editorContent = dlg.querySelector('.editorContent');
|
||||||
|
initEditor(editorContent, options);
|
||||||
|
|
||||||
|
$(dlg).on('iron-overlay-closed', onDialogClosed);
|
||||||
|
|
||||||
|
PaperDialogHelper.openWithHash(dlg, 'medialibraryeditor');
|
||||||
|
|
||||||
|
$('.btnCloseDialog', dlg).on('click', function () {
|
||||||
|
|
||||||
|
PaperDialogHelper.close(dlg);
|
||||||
|
});
|
||||||
|
|
||||||
|
refreshLibraryFromServer(editorContent);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
return deferred.promise();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return editor;
|
||||||
|
});
|
|
@ -0,0 +1,8 @@
|
||||||
|
<div>
|
||||||
|
<h1 style="display:inline-block;vertical-align:middle;">${HeadersFolders}</h1>
|
||||||
|
<paper-button raised class="btnAddFolder submit mini" style="margin-left:1em;" title="${ButtonAdd}">
|
||||||
|
<iron-icon icon="add"></iron-icon>
|
||||||
|
<span>${ButtonAdd}</span>
|
||||||
|
</paper-button>
|
||||||
|
</div>
|
||||||
|
<div class="paperList folderList" style="padding:.7em 0;"></div>
|
|
@ -1,63 +1,4 @@
|
||||||
var MediaLibraryPage = {
|
(function () {
|
||||||
|
|
||||||
addMediaLocation: function (virtualFolderIndex) {
|
|
||||||
|
|
||||||
MediaLibraryPage.selectDirectory(function (path) {
|
|
||||||
|
|
||||||
if (path) {
|
|
||||||
|
|
||||||
var virtualFolder = MediaLibraryPage.virtualFolders[virtualFolderIndex];
|
|
||||||
|
|
||||||
MediaLibraryPage.lastVirtualFolderName = virtualFolder.Name;
|
|
||||||
|
|
||||||
var refreshAfterChange = shouldRefreshLibraryAfterChanges();
|
|
||||||
|
|
||||||
ApiClient.addMediaPath(virtualFolder.Name, path, refreshAfterChange).done(MediaLibraryPage.processOperationResult);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
selectDirectory: function (callback) {
|
|
||||||
|
|
||||||
require(['directorybrowser'], function (directoryBrowser) {
|
|
||||||
|
|
||||||
var picker = new directoryBrowser();
|
|
||||||
|
|
||||||
picker.show({
|
|
||||||
|
|
||||||
callback: callback
|
|
||||||
});
|
|
||||||
|
|
||||||
MediaLibraryPage.directoryPicker = picker;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
deleteMediaLocation: function (button) {
|
|
||||||
|
|
||||||
var folderIndex = button.getAttribute('data-folderindex');
|
|
||||||
var index = parseInt(button.getAttribute('data-index'));
|
|
||||||
|
|
||||||
var virtualFolder = MediaLibraryPage.virtualFolders[folderIndex];
|
|
||||||
|
|
||||||
MediaLibraryPage.lastVirtualFolderName = virtualFolder.Name;
|
|
||||||
|
|
||||||
var location = virtualFolder.Locations[index];
|
|
||||||
|
|
||||||
Dashboard.confirm(Globalize.translate('MessageConfirmRemoveMediaLocation'), Globalize.translate('HeaderRemoveMediaLocation'), function (confirmResult) {
|
|
||||||
|
|
||||||
if (confirmResult) {
|
|
||||||
|
|
||||||
var refreshAfterChange = shouldRefreshLibraryAfterChanges();
|
|
||||||
|
|
||||||
ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).done(MediaLibraryPage.processOperationResult);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
|
|
||||||
function changeCollectionType(page, virtualFolder) {
|
function changeCollectionType(page, virtualFolder) {
|
||||||
|
|
||||||
|
@ -92,6 +33,24 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function editVirtualFolder(page, virtualFolder) {
|
||||||
|
|
||||||
|
require(['medialibraryeditor'], function (medialibraryeditor) {
|
||||||
|
|
||||||
|
new medialibraryeditor().show({
|
||||||
|
|
||||||
|
refresh: shouldRefreshLibraryAfterChanges(),
|
||||||
|
library: virtualFolder
|
||||||
|
|
||||||
|
}).done(function (hasChanges) {
|
||||||
|
|
||||||
|
if (hasChanges) {
|
||||||
|
reloadLibrary(page);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function deleteVirtualFolder(page, virtualFolder) {
|
function deleteVirtualFolder(page, virtualFolder) {
|
||||||
|
|
||||||
var msg = Globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder');
|
var msg = Globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder');
|
||||||
|
@ -233,6 +192,13 @@
|
||||||
addVirtualFolder(page);
|
addVirtualFolder(page);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('.editLibrary', divVirtualFolders).on('click', function () {
|
||||||
|
var card = $(this).parents('.card')[0];
|
||||||
|
var index = parseInt(card.getAttribute('data-index'));
|
||||||
|
var virtualFolder = virtualFolders[index];
|
||||||
|
editVirtualFolder(page, virtualFolder);
|
||||||
|
});
|
||||||
|
|
||||||
Dashboard.hideLoadingMsg();
|
Dashboard.hideLoadingMsg();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -290,7 +256,13 @@
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
html += '<div class="card backdropCard" data-index="' + index + '">';
|
var style = "";
|
||||||
|
|
||||||
|
if ($($.mobile.activePage)[0].classList.contains('wizardPage')) {
|
||||||
|
style += "min-width:33.3%;";
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '<div class="card backdropCard" style="' + style + '" data-index="' + index + '">';
|
||||||
|
|
||||||
html += '<div class="cardBox visualCardBox">';
|
html += '<div class="cardBox visualCardBox">';
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
|
@ -307,9 +279,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
if (imgUrl) {
|
if (imgUrl) {
|
||||||
html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
|
html += '<div class="cardImage editLibrary" style="cursor:pointer;background-image:url(\'' + imgUrl + '\');"></div>';
|
||||||
} else if (!virtualFolder.showNameWithIcon) {
|
} else if (!virtualFolder.showNameWithIcon) {
|
||||||
html += '<div class="cardImage iconCardImage">';
|
html += '<div class="cardImage editLibrary iconCardImage" style="cursor:pointer;">';
|
||||||
html += '<div>';
|
html += '<div>';
|
||||||
html += '<iron-icon icon="' + (virtualFolder.icon || getIcon(virtualFolder.CollectionType)) + '"></iron-icon>';
|
html += '<iron-icon icon="' + (virtualFolder.icon || getIcon(virtualFolder.CollectionType)) + '"></iron-icon>';
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
|
|
|
@ -2063,6 +2063,7 @@ var AppInfo = {};
|
||||||
collectioneditor: 'components/collectioneditor/collectioneditor',
|
collectioneditor: 'components/collectioneditor/collectioneditor',
|
||||||
playlisteditor: 'components/playlisteditor/playlisteditor',
|
playlisteditor: 'components/playlisteditor/playlisteditor',
|
||||||
medialibrarycreator: 'components/medialibrarycreator/medialibrarycreator',
|
medialibrarycreator: 'components/medialibrarycreator/medialibrarycreator',
|
||||||
|
medialibraryeditor: 'components/medialibraryeditor/medialibraryeditor',
|
||||||
howler: 'bower_components/howler.js/howler.min',
|
howler: 'bower_components/howler.js/howler.min',
|
||||||
dragula: 'bower_components/dragula.js/dist/dragula.min'
|
dragula: 'bower_components/dragula.js/dist/dragula.min'
|
||||||
};
|
};
|
||||||
|
|
|
@ -1523,5 +1523,6 @@
|
||||||
"ButtonClear": "Clear",
|
"ButtonClear": "Clear",
|
||||||
"ButtonEditImages": "Edit Images",
|
"ButtonEditImages": "Edit Images",
|
||||||
"LabelFolder": "Folder:",
|
"LabelFolder": "Folder:",
|
||||||
"LabelAdditionalFoldersCanBeAddedHelp": "Additional folders can be added to this library after setting it up."
|
"LabelAdditionalFoldersCanBeAddedHelp": "Additional folders can be added to this library after setting it up.",
|
||||||
|
"HeadersFolders": "Folders"
|
||||||
}
|
}
|
|
@ -1539,5 +1539,6 @@
|
||||||
"ButtonClear": "Clear",
|
"ButtonClear": "Clear",
|
||||||
"ButtonEditImages": "Edit Images",
|
"ButtonEditImages": "Edit Images",
|
||||||
"LabelFolder": "Folder:",
|
"LabelFolder": "Folder:",
|
||||||
"LabelAdditionalFoldersCanBeAddedHelp": "Additional folders can be added to this library after setting it up."
|
"LabelAdditionalFoldersCanBeAddedHelp": "Additional folders can be added to this library after setting it up.",
|
||||||
|
"HeadersFolders": "Folders"
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue