mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
add basic ability to upload images for items
This commit is contained in:
Luke Pulverenti
parent
d4ba550d57
commit
e089b61b62
8 changed files with 348 additions and 67 deletions
|
|
@ -14,69 +14,18 @@
|
|||
|
||||
renderHeader(page, item);
|
||||
|
||||
var name = item.Name;
|
||||
|
||||
if (item.IndexNumber != null) {
|
||||
name = item.IndexNumber + " - " + name;
|
||||
}
|
||||
if (item.ParentIndexNumber != null && item.Type != "Episode") {
|
||||
name = item.ParentIndexNumber + "." + name;
|
||||
}
|
||||
|
||||
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
|
||||
|
||||
Dashboard.setPageTitle(name);
|
||||
|
||||
$('#itemName', page).html(name);
|
||||
|
||||
if (item.AlbumArtist && item.Type == "Audio") {
|
||||
$('#grandParentName', page).html('<a class="detailPageParentLink" href="itembynamedetails.html?context=music&artist=' + ApiClient.encodeName(item.AlbumArtist) + '">' + item.AlbumArtist + '</a>').show().trigger('create');
|
||||
}
|
||||
else if (item.AlbumArtist && item.Type == "MusicAlbum") {
|
||||
$('#grandParentName', page).html('<a class="detailPageParentLink" href="itembynamedetails.html?context=music&artist=' + ApiClient.encodeName(item.AlbumArtist) + '">' + item.AlbumArtist + '</a>').show().trigger('create');
|
||||
}
|
||||
else if (item.SeriesName && item.Type == "Episode") {
|
||||
|
||||
$('#grandParentName', page).html('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.SeriesId + '">' + item.SeriesName + '</a>').show().trigger('create');
|
||||
}
|
||||
else {
|
||||
$('#grandParentName', page).hide();
|
||||
}
|
||||
|
||||
if (item.SeriesName && item.Type == "Season") {
|
||||
|
||||
$('#parentName', page).html('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.SeriesId + '">' + item.SeriesName + '</a>').show().trigger('create');
|
||||
}
|
||||
else if (item.ParentIndexNumber && item.Type == "Episode") {
|
||||
|
||||
$('#parentName', page).html('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.ParentId + '">Season ' + item.ParentIndexNumber + '</a>').show().trigger('create');
|
||||
}
|
||||
else if (item.Album && item.Type == "Audio" && item.ParentId) {
|
||||
$('#parentName', page).html('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.ParentId + '">' + item.Album + '</a>').show().trigger('create');
|
||||
|
||||
}
|
||||
else if (item.AlbumArtist && item.Type == "MusicAlbum") {
|
||||
$('#grandParentName', page).html('<a class="detailPageParentLink" href="itembynamedetails.html?context=music&artist=' + ApiClient.encodeName(item.AlbumArtist) + '">' + item.AlbumArtist + '</a>').show().trigger('create');
|
||||
|
||||
}
|
||||
else if (item.Album) {
|
||||
$('#parentName', page).html(item.Album).show();
|
||||
|
||||
}
|
||||
else {
|
||||
$('#parentName', page).hide();
|
||||
}
|
||||
|
||||
LibraryBrowser.renderTitle(item, $('#itemName', page), $('#parentName', page), $('#grandParentName', page));
|
||||
|
||||
var context = getContext(item);
|
||||
setInitialCollapsibleState(page, item, context);
|
||||
renderDetails(page, item, context);
|
||||
|
||||
if (MediaPlayer.canPlay(item)) {
|
||||
$('#btnPlay', page).show();
|
||||
$('#playButtonShadow', page).show();
|
||||
$('#playButtonContainer', page).show();
|
||||
} else {
|
||||
$('#btnPlay', page).hide();
|
||||
$('#playButtonShadow', page).hide();
|
||||
$('#playButtonContainer', page).hide();
|
||||
}
|
||||
|
||||
$(".autoNumeric").autoNumeric('init');
|
||||
|
|
@ -256,7 +205,7 @@
|
|||
} else {
|
||||
$('#itemPremiereDate', page).hide();
|
||||
}
|
||||
|
||||
|
||||
LibraryBrowser.renderBudget($('#itemBudget', page), item);
|
||||
LibraryBrowser.renderRevenue($('#itemRevenue', page), item);
|
||||
|
||||
|
|
@ -285,7 +234,7 @@
|
|||
} else {
|
||||
|
||||
var shape = "smallPoster";
|
||||
|
||||
|
||||
if (item.Type == "Season") {
|
||||
shape = "smallBackdrop";
|
||||
}
|
||||
|
|
@ -572,6 +521,11 @@
|
|||
LibraryBrowser.showPlayMenu(this, currentItem.Id, currentItem.MediaType, userdata.PlaybackPositionTicks);
|
||||
});
|
||||
|
||||
$('#btnEdit', page).on('click', function () {
|
||||
|
||||
Dashboard.navigate("edititemimages.html?id=" + currentItem.Id);
|
||||
});
|
||||
|
||||
}).on('pageshow', "#itemDetailPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
|
|
|||
159
dashboard-ui/scripts/edititemimages.js
Normal file
159
dashboard-ui/scripts/edititemimages.js
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
(function ($, document, window, FileReader, escape) {
|
||||
|
||||
var currentItem;
|
||||
var currentFile;
|
||||
|
||||
function reload(page) {
|
||||
|
||||
var id = getParameterByName('id');
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
|
||||
|
||||
currentItem = item;
|
||||
|
||||
LibraryBrowser.renderTitle(item, $('#itemName', page), $('#parentName', page), $('#grandParentName', page));
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
|
||||
function onFileReaderError(evt) {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
switch (evt.target.error.code) {
|
||||
case evt.target.error.NOT_FOUND_ERR:
|
||||
Dashboard.showError('File Not Found!');
|
||||
break;
|
||||
case evt.target.error.NOT_READABLE_ERR:
|
||||
Dashboard.showError('File is not readable');
|
||||
break;
|
||||
case evt.target.error.ABORT_ERR:
|
||||
break; // noop
|
||||
default:
|
||||
Dashboard.showError('An error occurred reading this file.');
|
||||
};
|
||||
}
|
||||
|
||||
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();
|
||||
Dashboard.showError('File read cancelled');
|
||||
};
|
||||
|
||||
// Closure to capture the file information.
|
||||
reader.onload = (function (theFile) {
|
||||
return function (e) {
|
||||
|
||||
// Render thumbnail.
|
||||
var html = ['<img style="max-width:500px;max-height:200px;" 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) {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
Dashboard.validateCurrentUser(page);
|
||||
reload(page);
|
||||
}
|
||||
|
||||
function editItemImages() {
|
||||
|
||||
var self = this;
|
||||
|
||||
self.onSubmit = function () {
|
||||
|
||||
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.uploadImage(currentItem.Id, imageType, file).done(function () {
|
||||
|
||||
processImageChangeResult(page);
|
||||
|
||||
});
|
||||
|
||||
return false;
|
||||
};
|
||||
}
|
||||
|
||||
window.EditItemImagesPage = new editItemImages();
|
||||
|
||||
$(document).on('pageinit', "#editItemImagesPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
|
||||
}).on('pageshow', "#editItemImagesPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
reload(page);
|
||||
|
||||
$("#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;
|
||||
});
|
||||
|
||||
}).on('pagehide', "#editItemImagesPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
currentItem = null;
|
||||
|
||||
$("#imageDropZone", page).off('dragover').off('drop');
|
||||
});
|
||||
|
||||
})(jQuery, document, window, FileReader, escape);
|
||||
|
|
@ -630,6 +630,60 @@
|
|||
|
||||
},
|
||||
|
||||
renderTitle: function (item, nameElem, parentNameElem, grandParentNameElem) {
|
||||
|
||||
var name = item.Name;
|
||||
|
||||
if (item.IndexNumber != null) {
|
||||
name = item.IndexNumber + " - " + name;
|
||||
}
|
||||
if (item.ParentIndexNumber != null && item.Type != "Episode") {
|
||||
name = item.ParentIndexNumber + "." + name;
|
||||
}
|
||||
|
||||
Dashboard.setPageTitle(name);
|
||||
|
||||
nameElem.html(name);
|
||||
|
||||
if (item.AlbumArtist && item.Type == "Audio") {
|
||||
grandParentNameElem.html('<a class="detailPageParentLink" href="itembynamedetails.html?context=music&artist=' + ApiClient.encodeName(item.AlbumArtist) + '">' + item.AlbumArtist + '</a>').show().trigger('create');
|
||||
}
|
||||
else if (item.AlbumArtist && item.Type == "MusicAlbum") {
|
||||
grandParentNameElem.html('<a class="detailPageParentLink" href="itembynamedetails.html?context=music&artist=' + ApiClient.encodeName(item.AlbumArtist) + '">' + item.AlbumArtist + '</a>').show().trigger('create');
|
||||
}
|
||||
else if (item.SeriesName && item.Type == "Episode") {
|
||||
|
||||
grandParentNameElem.html('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.SeriesId + '">' + item.SeriesName + '</a>').show().trigger('create');
|
||||
}
|
||||
else {
|
||||
grandParentNameElem.hide();
|
||||
}
|
||||
|
||||
if (item.SeriesName && item.Type == "Season") {
|
||||
|
||||
parentNameElem.html('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.SeriesId + '">' + item.SeriesName + '</a>').show().trigger('create');
|
||||
}
|
||||
else if (item.ParentIndexNumber && item.Type == "Episode") {
|
||||
|
||||
parentNameElem.html('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.ParentId + '">Season ' + item.ParentIndexNumber + '</a>').show().trigger('create');
|
||||
}
|
||||
else if (item.Album && item.Type == "Audio" && item.ParentId) {
|
||||
parentNameElem.html('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.ParentId + '">' + item.Album + '</a>').show().trigger('create');
|
||||
|
||||
}
|
||||
else if (item.AlbumArtist && item.Type == "MusicAlbum") {
|
||||
grandParentNameElem.html('<a class="detailPageParentLink" href="itembynamedetails.html?context=music&artist=' + ApiClient.encodeName(item.AlbumArtist) + '">' + item.AlbumArtist + '</a>').show().trigger('create');
|
||||
|
||||
}
|
||||
else if (item.Album) {
|
||||
parentNameElem.html(item.Album).show();
|
||||
|
||||
}
|
||||
else {
|
||||
parentNameElem.hide();
|
||||
}
|
||||
},
|
||||
|
||||
renderLinks: function (linksElem, item) {
|
||||
|
||||
var links = [];
|
||||
|
|
|
|||
|
|
@ -76,9 +76,7 @@
|
|||
Dashboard.showError('File read cancelled');
|
||||
}
|
||||
|
||||
function setFiles(files) {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
function setFiles(page, files) {
|
||||
|
||||
var file = files[0];
|
||||
|
||||
|
|
@ -117,7 +115,7 @@
|
|||
|
||||
e.preventDefault();
|
||||
|
||||
setFiles(e.originalEvent.dataTransfer.files);
|
||||
setFiles($.mobile.activePage, e.originalEvent.dataTransfer.files);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
|
@ -174,7 +172,7 @@
|
|||
|
||||
self.onFileUploadChange = function (fileUpload) {
|
||||
|
||||
setFiles(fileUpload.files);
|
||||
setFiles($.mobile.activePage, fileUpload.files);
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue