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
parent
e089b61b62
commit
fcf4964e3a
10 changed files with 346 additions and 72 deletions
|
|
@ -15,7 +15,7 @@
|
|||
renderHeader(page, item);
|
||||
|
||||
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
|
||||
|
||||
|
||||
LibraryBrowser.renderTitle(item, $('#itemName', page), $('#parentName', page), $('#grandParentName', page));
|
||||
|
||||
var context = getContext(item);
|
||||
|
|
@ -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) {
|
||||
html += '<li>Default</li>';
|
||||
}
|
||||
if (stream.IsForced) {
|
||||
html += '<li>Forced</li>';
|
||||
}
|
||||
if (stream.IsExternal) {
|
||||
html += '<li>External</li>';
|
||||
if (stream.IsDefault || stream.IsForced || stream.IsExternal) {
|
||||
|
||||
var vals = [];
|
||||
|
||||
if (stream.IsDefault) {
|
||||
vals.push("Default");
|
||||
}
|
||||
if (stream.IsForced) {
|
||||
vals.push("Forced");
|
||||
}
|
||||
if (stream.IsExternal) {
|
||||
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>';
|
||||
|
|
|
|||
|
|
@ -13,12 +13,113 @@
|
|||
|
||||
currentItem = item;
|
||||
|
||||
LibraryBrowser.renderTitle(item, $('#itemName', page), $('#parentName', page), $('#grandParentName', page));
|
||||
LibraryBrowser.renderTitle(item, $('#itemName', page), $('#parentName', page), $('#grandParentName', page), true);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
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) {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
|
@ -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');
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
nameElem.html(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');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue