mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

add basic ability to upload images for items

Browse source
This commit is contained in:
Luke Pulverenti 2013-05-04 17:20:27 -04:00
parent d4ba550d57
commit e089b61b62
8 changed files with 348 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

57
ApiClient.js
View file

@ -839,6 +839,63 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
return deferred.promise(); return deferred.promise();
}; };
self.uploadImage = function (itemId, imageType, file) {
if (!itemId) {
throw new Error("null itemId");
}
if (!imageType) {
throw new Error("null imageType");
}
if (!file) {
throw new Error("File must be an image.");
}
if (file.type != "image/png" && file.type != "image/jpeg" && file.type != "image/jpeg") {
throw new Error("File must be an image.");
}
var deferred = $.Deferred();
var reader = new FileReader();
reader.onerror = function () {
deferred.reject();
};
reader.onabort = function () {
deferred.reject();
};
// Closure to capture the file information.
reader.onload = function (e) {
var data = window.btoa(e.target.result);
var url = self.getUrl("Items/" + itemId + "/Images/" + imageType);
self.ajax({
type: "POST",
url: url,
data: data,
contentType: "image/" + file.name.substring(file.name.lastIndexOf('.') + 1)
}).done(function (result) {
deferred.resolveWith(null, [result]);
}).fail(function () {
deferred.reject();
});
};
// Read in the image file as a data URL.
reader.readAsBinaryString(file);
return deferred.promise();
};
/** /**
* Gets the list of installed plugins on the server * Gets the list of installed plugins on the server
*/ */

57
dashboard-ui/edititemimages.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<title>Media Browser</title>
</head>
<body>
<div id="editItemImagesPage" data-role="page" class="page libraryPage" data-theme="a">
<div data-role="content">
<div class="ehsContent">
<h1 id="grandParentName" class="detailPageName hide"></h1>
<h1 id="parentName" class="detailPageName hide"></h1>
<h1 id="itemName" class="detailPageName"></h1>
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a href="#" data-role="button" class="ui-btn-active">Images</a>
</div>
<form style="max-width: 100%;">
<h2>Add/Update Image</h2>
<div>
<p>JPG/PNG only.</p>
<input type="file" accept="image/*" id="uploadImage" name="uploadImage" />
<div id="imageDropZone" class="imageDropZone">
<h3>Drop Image Here</h3>
<output id="imageOutput"></output>
</div>
<div id="fldUpload" style="display: none;">
<p data-role="fieldcontain">
<label for="selectImageType">Image Type:</label>
<select id="selectImageType" name="selectImageType">
<option value="Primary">Primary</option>
<option value="Art">Art</option>
<option value="Backdrop">Backdrop</option>
<option value="Banner">Banner</option>
<option value="Box">Box</option>
<option value="BoxRear">Box rear</option>
<option value="Disc">Disc</option>
<option value="Logo">Logo</option>
<option value="Menu">Menu</option>
<option value="Screenshot">Screenshot</option>
<option value="Thumb">Thumb</option>
</select>
</p>
<button type="submit" data-icon="picture" data-theme="b">Upload</button>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$('#editItemImagesPage').on('submit', EditItemImagesPage.onSubmit);
</script>
</div>
</body>
</html>

10
dashboard-ui/itemdetails.html
View file

@ -97,10 +97,12 @@
<div id="itemMedia" style="position: relative;"> <div id="itemMedia" style="position: relative;">
<div id="itemImage"></div> <div id="itemImage"></div>
<div id="playButtonShadow" style="display: none; height: 48px; position: absolute; bottom: 0; left: 0; right: 0; background: black; opacity: .75;"></div> <div style="text-align: center;">
<button id="btnPlay" type="button" class="imageButton" style="display: none; position: absolute; bottom: 5px; left: 10px;" data-role="none" title="Play"> <span id="playButtonContainer" style="display: none;">
<img src="css/images/media/playCircle.png" style="height: 28px;" /> <button id="btnPlay" type="button" data-icon="play" data-inline="true" data-mini="true" data-theme="a">Play</button>
</button> </span>
<button id="btnEdit" type="button" data-icon="pencil" data-inline="true" data-mini="true" data-theme="a">Edit</button>
</div>
</div> </div>
<div id="playMenuAnchor"></div> <div id="playMenuAnchor"></div>
<div id="queueMenuAnchor"></div> <div id="queueMenuAnchor"></div>

62
dashboard-ui/scripts/Itemdetailpage.js
View file

@ -14,69 +14,18 @@
renderHeader(page, item); 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)); $('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
Dashboard.setPageTitle(name); LibraryBrowser.renderTitle(item, $('#itemName', page), $('#parentName', page), $('#grandParentName', page));
$('#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();
}
var context = getContext(item); var context = getContext(item);
setInitialCollapsibleState(page, item, context); setInitialCollapsibleState(page, item, context);
renderDetails(page, item, context); renderDetails(page, item, context);
if (MediaPlayer.canPlay(item)) { if (MediaPlayer.canPlay(item)) {
$('#btnPlay', page).show(); $('#playButtonContainer', page).show();
$('#playButtonShadow', page).show();
} else { } else {
$('#btnPlay', page).hide(); $('#playButtonContainer', page).hide();
$('#playButtonShadow', page).hide();
} }
$(".autoNumeric").autoNumeric('init'); $(".autoNumeric").autoNumeric('init');
@ -572,6 +521,11 @@
LibraryBrowser.showPlayMenu(this, currentItem.Id, currentItem.MediaType, userdata.PlaybackPositionTicks); 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 () { }).on('pageshow', "#itemDetailPage", function () {
var page = this; var page = this;

159
dashboard-ui/scripts/edititemimages.js Normal file
View 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);

54
dashboard-ui/scripts/librarybrowser.js
View file

@ -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) { renderLinks: function (linksElem, item) {
var links = []; var links = [];

8
dashboard-ui/scripts/userimagepage.js
View file

@ -76,9 +76,7 @@
Dashboard.showError('File read cancelled'); Dashboard.showError('File read cancelled');
} }
function setFiles(files) { function setFiles(page, files) {
var page = $.mobile.activePage;
var file = files[0]; var file = files[0];
@ -117,7 +115,7 @@
e.preventDefault(); e.preventDefault();
setFiles(e.originalEvent.dataTransfer.files); setFiles($.mobile.activePage, e.originalEvent.dataTransfer.files);
return false; return false;
} }
@ -174,7 +172,7 @@
self.onFileUploadChange = function (fileUpload) { self.onFileUploadChange = function (fileUpload) {
setFiles(fileUpload.files); setFiles($.mobile.activePage, fileUpload.files);
}; };
} }

2
packages.config
View file

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<packages> <packages>
<package id="MediaBrowser.ApiClient.Javascript" version="3.0.93" targetFramework="net45" /> <package id="MediaBrowser.ApiClient.Javascript" version="3.0.94" targetFramework="net45" />
<package id="ServiceStack.Common" version="3.9.43" targetFramework="net45" /> <package id="ServiceStack.Common" version="3.9.43" targetFramework="net45" />
<package id="ServiceStack.Text" version="3.9.43" targetFramework="net45" /> <package id="ServiceStack.Text" version="3.9.43" targetFramework="net45" />
</packages> </packages>