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

more on image uploading

This commit is contained in:
Luke Pulverenti 2013-05-05 00:49:49 -04:00
parent e089b61b62
commit fcf4964e3a
10 changed files with 346 additions and 72 deletions

View file

@ -758,7 +758,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
* @param {String} userId
* @param {String} imageType The type of image to delete, based on the server-side ImageType enum.
*/
self.deleteUserImage = function (userId, imageType) {
self.deleteUserImage = function (userId, imageType, imageIndex) {
if (!userId) {
throw new Error("null userId");
@ -770,12 +770,71 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
var url = self.getUrl("Users/" + userId + "/Images/" + imageType);
if (imageIndex != null) {
url += "/" + imageIndex;
}
return self.ajax({
type: "DELETE",
url: url
});
};
self.deleteItemImage = function (itemId, imageType, imageIndex) {
if (!itemId) {
throw new Error("null itemId");
}
if (!imageType) {
throw new Error("null imageType");
}
var url = self.getUrl("Items/" + itemId + "/Images/" + imageType);
if (imageIndex != null) {
url += "/" + imageIndex;
}
return self.ajax({
type: "DELETE",
url: url
});
};
self.updateItemImageIndex = function (itemId, imageType, imageIndex, newIndex) {
if (!itemId) {
throw new Error("null itemId");
}
if (!imageType) {
throw new Error("null imageType");
}
var url = self.getUrl("Items/" + itemId + "/Images/" + imageType + "/" + imageIndex + "/Index", { newIndex: newIndex });
return self.ajax({
type: "POST",
url: url
});
};
self.getItemImageInfos = function (itemId) {
if (!itemId) {
throw new Error("null itemId");
}
var url = self.getUrl("Items/" + itemId + "/Images");
return self.ajax({
type: "GET",
url: url,
dataType: "json"
});
};
/**
* Uploads a user image
* @param {String} userId
@ -839,7 +898,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
return deferred.promise();
};
self.uploadImage = function (itemId, imageType, file) {
self.uploadItemImage = function (itemId, imageType, file) {
if (!itemId) {
throw new Error("null itemId");

View file

@ -199,6 +199,10 @@
overflow: hidden;
}
.itemMediaInfo {
font-size: 14px;
}
.mediaInfoStream {
display: inline-block;
vertical-align: top;
@ -212,13 +216,14 @@
}
.mediaInfoDetails {
margin: 0 0 0 1.5em;
margin: 0 0 0 .25em;
padding: 0;
list-style-type: circle;
list-style-type: none;
}
.mediaInfoLabel {
color: #bbb;
margin-right: 3px;
}
.posterRibbon {

View file

@ -11,15 +11,43 @@
<h1 id="grandParentName" class="detailPageName hide"></h1>
<h1 id="parentName" class="detailPageName hide"></h1>
<h1 id="itemName" class="detailPageName"></h1>
<br />
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a href="#" data-role="button">Metadata</a>
<a href="#" data-role="button" class="ui-btn-active">Images</a>
</div>
<form style="max-width: 100%;">
<div style="text-align: center; margin-top: -20px;">
<a href="#popupUpload" data-rel="popup" data-role="button" data-inline="true" data-icon="plus" data-mini="true" data-transition="pop">Upload Image</a>
</div>
<div id="imagesContainer" style="display: none;">
<h3 style="margin-top: 0;">Images</h3>
<div id="images">
</div>
</div>
<div id="backdropsContainer" style="display: none;">
<h3>Backdrops</h3>
<div id="backdrops">
</div>
</div>
<div id="screenshotsContainer" style="display: none;">
<h3>Screenshots</h3>
<div id="screenshots">
</div>
</div>
</div>
</div>
<div data-role="popup" id="popupUpload" class="ui-corner-all" data-theme="c">
<form style="max-width: 100%; margin: 0 1.5em 1.5em;">
<h2>Add/Update Image</h2>
<div>
<p>JPG/PNG only.</p>
<input type="file" accept="image/*" id="uploadImage" name="uploadImage" />
<input type="file" accept="image/*" id="uploadImage" name="uploadImage" data-theme="c" />
<div id="imageDropZone" class="imageDropZone">
<h3>Drop Image Here</h3>
@ -28,7 +56,7 @@
<div id="fldUpload" style="display: none;">
<p data-role="fieldcontain">
<label for="selectImageType">Image Type:</label>
<select id="selectImageType" name="selectImageType">
<select id="selectImageType" name="selectImageType" data-theme="c">
<option value="Primary">Primary</option>
<option value="Art">Art</option>
<option value="Backdrop">Backdrop</option>
@ -44,10 +72,11 @@
</p>
<button type="submit" data-icon="picture" data-theme="b">Upload</button>
</div>
<a data-role="button" data-rel="back" data-icon="delete" data-theme="c" onclick="$('#uploadImage').val('').trigger('change');">Cancel</a>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$('#editItemImagesPage').on('submit', EditItemImagesPage.onSubmit);
</script>

View file

@ -101,7 +101,9 @@
<span id="playButtonContainer" style="display: none;">
<button id="btnPlay" type="button" data-icon="play" data-inline="true" data-mini="true" data-theme="a">Play</button>
</span>
<span id="editButtonContainer" style="display: none;">
<button id="btnEdit" type="button" data-icon="pencil" data-inline="true" data-mini="true" data-theme="a">Edit</button>
</span>
</div>
</div>
<div id="playMenuAnchor"></div>
@ -139,7 +141,7 @@
<div style="display: inline-block; vertical-align: top;">
<div data-role="collapsible" id="mediaInfoCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
<h3>Media Info</h3>
<div id="mediaInfoContent"></div>
<div id="mediaInfoContent" class="itemMediaInfo"></div>
</div>
</div>
<div style="display: inline-block; vertical-align: top;">

View file

@ -7,7 +7,11 @@
<div id="itemListPage" data-role="page" class="page libraryPage folderListPage" data-theme="a">
<div data-role="content" class="itemListContent">
<h1 id="itemName" class="listHeader" style="margin: 0;"></h1>
<h1 class="listHeader" style="margin: 0;"><span id="itemName"></span>
<span id="editButtonContainer" style="display: none; margin-left: 1em;">
<button id="btnEdit" type="button" data-icon="pencil" data-inline="true" data-mini="true" data-theme="a">Edit</button>
</span>
</h1>
<div class="viewSettings">
<div class="viewControls">
<div style="display: inline-block;">

View file

@ -28,6 +28,16 @@
$('#playButtonContainer', page).hide();
}
Dashboard.getCurrentUser().done(function (user) {
if (user.Configuration.IsAdministrator) {
$('#editButtonContainer', page).show();
} else {
$('#editButtonContainer', page).hide();
}
});
$(".autoNumeric").autoNumeric('init');
Dashboard.hideLoadingMsg();
@ -367,57 +377,65 @@
html += '<ul class="mediaInfoDetails">';
if (stream.Codec) {
html += '<li><span class="mediaInfoLabel">Codec</span> ' + stream.Codec + '</li>';
html += '<li><span class="mediaInfoLabel">Codec: </span> ' + stream.Codec + '</li>';
}
if (stream.Profile) {
html += '<li><span class="mediaInfoLabel">Profile</span> ' + stream.Profile + '</li>';
html += '<li><span class="mediaInfoLabel">Profile: </span> ' + stream.Profile + '</li>';
}
if (stream.Level) {
html += '<li><span class="mediaInfoLabel">Level</span> ' + stream.Level + '</li>';
html += '<li><span class="mediaInfoLabel">Level: </span> ' + stream.Level + '</li>';
}
if (stream.Language) {
html += '<li><span class="mediaInfoLabel">Language</span> ' + stream.Language + '</li>';
html += '<li><span class="mediaInfoLabel">Language: </span> ' + stream.Language + '</li>';
}
if (stream.Width) {
html += '<li><span class="mediaInfoLabel">Width</span> ' + stream.Width + '</li>';
html += '<li><span class="mediaInfoLabel">Width: </span> ' + stream.Width + '</li>';
}
if (stream.Height) {
html += '<li><span class="mediaInfoLabel">Height</span> ' + stream.Height + '</li>';
html += '<li><span class="mediaInfoLabel">Height: </span> ' + stream.Height + '</li>';
}
if (stream.AspectRatio) {
html += '<li><span class="mediaInfoLabel">Aspect Ratio</span> ' + stream.AspectRatio + '</li>';
html += '<li><span class="mediaInfoLabel">Aspect Ratio: </span> ' + stream.AspectRatio + '</li>';
}
if (stream.BitRate) {
html += '<li><span class="mediaInfoLabel">Bitrate</span> <span class="autoNumeric" data-a-pad="false">' + stream.BitRate + '</span></li>';
html += '<li><span class="mediaInfoLabel">Bitrate: </span> <span class="autoNumeric" data-a-pad="false">' + stream.BitRate + '</span></li>';
}
if (stream.Channels) {
html += '<li><span class="mediaInfoLabel">Channels</span> ' + stream.Channels + '</li>';
html += '<li><span class="mediaInfoLabel">Channels: </span> ' + stream.Channels + '</li>';
}
if (stream.SampleRate) {
html += '<li><span class="mediaInfoLabel">Sample Rate</span> <span class="autoNumeric" data-a-pad="false">' + stream.SampleRate + '</span></li>';
html += '<li><span class="mediaInfoLabel">Sample Rate: </span> <span class="autoNumeric" data-a-pad="false">' + stream.SampleRate + '</span></li>';
}
var framerate = stream.AverageFrameRate || stream.RealFrameRate;
if (framerate) {
html += '<li><span class="mediaInfoLabel">Framerate</span> ' + framerate + '</li>';
html += '<li><span class="mediaInfoLabel">Framerate: </span> ' + framerate + '</li>';
}
if (stream.PixelFormat) {
html += '<li><span class="mediaInfoLabel">Pixel Format</span> ' + stream.PixelFormat + '</li>';
html += '<li><span class="mediaInfoLabel">Pixel Format: </span> ' + stream.PixelFormat + '</li>';
}
if (stream.IsDefault || stream.IsForced || stream.IsExternal) {
var vals = [];
if (stream.IsDefault) {
html += '<li>Default</li>';
vals.push("Default");
}
if (stream.IsForced) {
html += '<li>Forced</li>';
vals.push("Forced");
}
if (stream.IsExternal) {
html += '<li>External</li>';
vals.push("External");
}
html += '<li><span class="mediaInfoLabel">Flags: </span> ' + vals.join(", ") + '</li>';
}
if (stream.Path) {
html += '<li><span class="mediaInfoLabel">Path</span> ' + stream.Path + '</li>';
html += '<li><span class="mediaInfoLabel">Path: </span> ' + stream.Path + '</li>';
}
html += '</ul>';

View file

@ -13,10 +13,111 @@
currentItem = item;
LibraryBrowser.renderTitle(item, $('#itemName', page), $('#parentName', page), $('#grandParentName', page));
LibraryBrowser.renderTitle(item, $('#itemName', page), $('#parentName', page), $('#grandParentName', page), true);
ApiClient.getItemImageInfos(currentItem.Id).done(function (imageInfos) {
renderStandardImages(page, item, imageInfos);
renderBackdrops(page, item, imageInfos);
renderScreenshots(page, item, imageInfos);
Dashboard.hideLoadingMsg();
});
});
}
function renderImages(page, item, images, elem) {
var html = '';
for (var i = 0, length = images.length; i < length; i++) {
var image = images[i];
html += '<div style="display:inline-block;margin:5px;background:#202020;padding:10px;font-size:14px;">';
html += '<div style="float:left;height:100px;width:175px;vertical-align:top;background-repeat:no-repeat;background-size:contain;background-image:url(\'' + LibraryBrowser.getImageUrl(currentItem, image.ImageType, image.ImageIndex, { maxwidth: 300 }) + '\');"></div>';
html += '<div style="float:right;vertical-align:top;margin-left:1em;width:125px;">';
html += '<p style="margin-top:0;">' + image.ImageType + '</p>';
html += '<p>' + image.Width + ' * ' + image.Height + '</p>';
html += '<p>' + (parseInt(image.Size / 1024)) + ' KB</p>';
html += '<p style="margin-left:-5px;">';
if (image.ImageType == "Backdrop" || image.ImageType == "Screenshot") {
if (i > 0) {
html += '<button type="button" data-icon="arrow-left" data-mini="true" data-inline="true" data-iconpos="notext" onclick="EditItemImagesPage.moveImage(\'' + image.ImageType + '\', ' + image.ImageIndex + ', ' + (i - 1) + ');">Move left</button>';
} else {
html += '<button type="button" data-icon="arrow-left" data-mini="true" data-inline="true" data-iconpos="notext" disabled>Move left</button>';
}
if (i < length - 1) {
html += '<button type="button" data-icon="arrow-right" data-mini="true" data-inline="true" data-iconpos="notext" onclick="EditItemImagesPage.moveImage(\'' + image.ImageType + '\', ' + image.ImageIndex + ', ' + (i + 1) + ');">Move right</button>';
} else {
html += '<button type="button" data-icon="arrow-right" data-mini="true" data-inline="true" data-iconpos="notext" disabled>Move right</button>';
}
}
html += '<button type="button" data-icon="delete" data-mini="true" data-inline="true" data-iconpos="notext" onclick="EditItemImagesPage.deleteImage(\'' + image.ImageType + '\', ' + (image.ImageIndex != null ? image.ImageIndex : "null") + ');">Delete</button>';
html += '</p>';
html += '</div>';
html += '</div>';
}
elem.html(html).trigger('create');
}
function renderStandardImages(page, item, imageInfos) {
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, $('#images', page));
} else {
$('#imagesContainer', page).hide();
}
}
function renderBackdrops(page, item, imageInfos) {
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, $('#backdrops', page));
} else {
$('#backdropsContainer', page).hide();
}
}
function renderScreenshots(page, item, imageInfos) {
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, $('#screenshots', page));
} else {
$('#screenshotsContainer', page).hide();
}
}
function onFileReaderError(evt) {
@ -79,9 +180,6 @@
function processImageChangeResult(page) {
Dashboard.hideLoadingMsg();
Dashboard.validateCurrentUser(page);
reload(page);
}
@ -107,14 +205,48 @@
var imageType = $('#selectImageType', page).val();
ApiClient.uploadImage(currentItem.Id, imageType, file).done(function () {
ApiClient.uploadItemImage(currentItem.Id, imageType, file).done(function () {
$('#uploadImage', page).val('').trigger('change');
$('#popupUpload', page).popup("close");
processImageChangeResult(page);
});
return false;
};
self.deleteImage = function (type, index) {
var page = $.mobile.activePage;
Dashboard.confirm("Are you sure you wish to delete this image?", "Delete " + type + " Image", 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);
});
};
}
window.EditItemImagesPage = new editItemImages();
@ -130,6 +262,10 @@
reload(page);
$('#uploadImage', page).on("change", function () {
setFiles(page, this.files);
});
$("#imageDropZone", page).on('dragover', function (e) {
e.preventDefault();
@ -153,6 +289,8 @@
currentItem = null;
$('#uploadImage', page).off("change");
$("#imageDropZone", page).off('dragover').off('drop');
});

View file

@ -78,6 +78,16 @@
$('#itemName', page).html(name);
Dashboard.setPageTitle(name);
});
Dashboard.getCurrentUser().done(function (user) {
if (user.Configuration.IsAdministrator) {
$('#editButtonContainer', page).show();
} else {
$('#editButtonContainer', page).hide();
}
});
}
$(document).on('pageinit', "#itemListPage", function () {
@ -120,6 +130,11 @@
reloadItems(page);
});
$('#btnEdit', page).on('click', function () {
Dashboard.navigate("edititemimages.html?id=" + query.ParentId);
});
}).on('pageshow', "#itemListPage", function () {
query.ParentId = getParameterByName('parentId');

View file

@ -616,10 +616,10 @@
getMetroColor: function (str) {
if (str) {
var char = String(str.substr(0, 1).charCodeAt());
var character = String(str.substr(0, 1).charCodeAt());
var sum = 0;
for (var i = 0; i < char.length; i++) {
sum += parseInt(char.charAt(i));
for (var i = 0; i < character.length; i++) {
sum += parseInt(character.charAt(i));
}
var index = String(sum).substr(-1);
@ -630,11 +630,11 @@
},
renderTitle: function (item, nameElem, parentNameElem, grandParentNameElem) {
renderTitle: function (item, nameElem, parentNameElem, grandParentNameElem, linkToElement) {
var name = item.Name;
if (item.IndexNumber != null) {
if (item.IndexNumber != null && item.Type !== "Season") {
name = item.IndexNumber + " - " + name;
}
if (item.ParentIndexNumber != null && item.Type != "Episode") {
@ -643,7 +643,11 @@
Dashboard.setPageTitle(name);
if (linkToElement) {
nameElem.html('<a class="detailPageParentLink" href="' + LibraryBrowser.getHref(item) + '">' + name + '</a>').trigger('create');
} else {
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');

View file

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