mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
fixes #551 - Add manual image selection for movies
This commit is contained in:
Luke Pulverenti
parent
2515b6d9ae
commit
e97908d6c9
5 changed files with 194 additions and 58 deletions
61
ApiClient.js
61
ApiClient.js
|
|
@ -306,20 +306,51 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
|
|||
});
|
||||
};
|
||||
|
||||
function getRemoteImagePrefix(options) {
|
||||
|
||||
var urlPrefix;
|
||||
|
||||
if (options.artist) {
|
||||
urlPrefix = "Artists/" + encodeName(options.artist);
|
||||
delete options.artist;
|
||||
}
|
||||
else if (options.person) {
|
||||
urlPrefix = "Persons/" + encodeName(options.person);
|
||||
delete options.person;
|
||||
}
|
||||
else if (options.genre) {
|
||||
urlPrefix = "Genres/" + encodeName(options.genre);
|
||||
delete options.genre;
|
||||
}
|
||||
else if (options.musicGenre) {
|
||||
urlPrefix = "MusicGenres/" + encodeName(options.musicGenre);
|
||||
delete options.musicGenre;
|
||||
}
|
||||
else if (options.gameGenre) {
|
||||
urlPrefix = "GameGenres/" + encodeName(options.gameGenre);
|
||||
delete options.gameGenre;
|
||||
}
|
||||
else if (options.studio) {
|
||||
urlPrefix = "Studios/" + encodeName(options.studio);
|
||||
delete options.studio;
|
||||
}
|
||||
else {
|
||||
urlPrefix = "Items/" + options.itemId;
|
||||
delete options.itemId;
|
||||
}
|
||||
|
||||
return urlPrefix;
|
||||
}
|
||||
|
||||
self.getAvailableRemoteImages = function (options) {
|
||||
|
||||
if (!options) {
|
||||
throw new Error("null options");
|
||||
}
|
||||
|
||||
var urlPrefix = "Items/" + options.itemId;
|
||||
var urlPrefix = getRemoteImagePrefix(options);
|
||||
|
||||
var imageType = options.imageType;
|
||||
|
||||
delete options.itemId;
|
||||
delete options.imageType;
|
||||
|
||||
var url = self.getUrl(urlPrefix + "/RemoteImages/" + imageType, options);
|
||||
var url = self.getUrl(urlPrefix + "/RemoteImages", options);
|
||||
|
||||
return self.ajax({
|
||||
type: "GET",
|
||||
|
|
@ -328,6 +359,22 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
|
|||
});
|
||||
};
|
||||
|
||||
self.downloadRemoteImage = function (options) {
|
||||
|
||||
if (!options) {
|
||||
throw new Error("null options");
|
||||
}
|
||||
|
||||
var urlPrefix = getRemoteImagePrefix(options);
|
||||
|
||||
var url = self.getUrl(urlPrefix + "/RemoteImages/Download", options);
|
||||
|
||||
return self.ajax({
|
||||
type: "POST",
|
||||
url: url
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets the current server status
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
.availableImagesList {
|
||||
overflow-y: auto;
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
height: 400px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -49,6 +49,7 @@
|
|||
background-position: center bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.remotePosterImage {
|
||||
|
|
@ -61,6 +62,16 @@
|
|||
height: 153px;
|
||||
}
|
||||
|
||||
.remoteBannerImage {
|
||||
width: 272px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.remoteDiscImage {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
@media all and (min-width: 500px) {
|
||||
|
||||
.availableImagesList {
|
||||
|
|
@ -72,6 +83,7 @@
|
|||
|
||||
.availableImagesList {
|
||||
width: 500px;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.editPageSidebar {
|
||||
|
|
@ -89,6 +101,11 @@
|
|||
float: right;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.remoteBannerImage {
|
||||
width: 450px;
|
||||
height: 83px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -155,34 +172,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1600px) {
|
||||
|
||||
.availableImagesList {
|
||||
width: 1500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1700px) {
|
||||
|
||||
.availableImagesList {
|
||||
width: 1600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1800px) {
|
||||
|
||||
.availableImagesList {
|
||||
width: 1700px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1900px) {
|
||||
|
||||
.availableImagesList {
|
||||
width: 1800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-height: 800px) {
|
||||
|
||||
.availableImagesList {
|
||||
|
|
@ -196,4 +185,3 @@
|
|||
height: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
</div>
|
||||
|
||||
<div style="margin: -25px 0 1em;">
|
||||
<a id="lnkBrowseImages" href="#popupDownload" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="plus" data-mini="true" data-transition="pop">Browse Images</a>
|
||||
<a id="lnkBrowseImages" href="#popupDownload" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="plus" data-mini="true" data-transition="pop">Browse Online Images</a>
|
||||
<a href="#popupUpload" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="plus" data-mini="true" data-transition="pop">Upload Image</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -93,12 +93,20 @@
|
|||
|
||||
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
|
||||
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
|
||||
<h3 style="margin: .5em 0;">Browse Images</h3>
|
||||
<h3 style="margin: .5em 0;">Browse Online Images</h3>
|
||||
</div>
|
||||
|
||||
<div data-role="content" class="ui-content" style="padding: 5px 15px;">
|
||||
|
||||
<div style="text-align: center;">
|
||||
<div style="margin: 0; display: inline-block;">
|
||||
<label for="selectImageProvider">Provider:</label>
|
||||
</div>
|
||||
<div style="margin: 0; display: inline-block;">
|
||||
<select id="selectImageProvider" name="selectImageProvider" data-mini="true" data-inline="true">
|
||||
<option value="">All</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="margin: 0; display: inline-block;">
|
||||
<label for="selectBrowsableImageType">Image type:</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,18 +15,66 @@
|
|||
$('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query);
|
||||
}
|
||||
|
||||
function getBaseRemoteOptions() {
|
||||
var options = {};
|
||||
|
||||
if (currentItem.Type == "Artist") {
|
||||
options.artist = currentItem.Name;
|
||||
}
|
||||
else if (currentItem.Type == "Artist") {
|
||||
options.artist = currentItem.Name;
|
||||
}
|
||||
else if (currentItem.Type == "Person") {
|
||||
options.person = currentItem.Name;
|
||||
}
|
||||
else if (currentItem.Type == "Genre") {
|
||||
options.genre = currentItem.Name;
|
||||
}
|
||||
else if (currentItem.Type == "GameGenre") {
|
||||
options.gameGenre = currentItem.Name;
|
||||
}
|
||||
else if (currentItem.Type == "MusicGenre") {
|
||||
options.musicGenre = currentItem.Name;
|
||||
}
|
||||
else if (currentItem.Type == "Studio") {
|
||||
options.studio = currentItem.Name;
|
||||
}
|
||||
else {
|
||||
options.itemId = currentItem.Id;
|
||||
}
|
||||
|
||||
return options;
|
||||
}
|
||||
|
||||
function reloadBrowsableImages(page) {
|
||||
|
||||
var options = {
|
||||
itemId: currentItem.Id,
|
||||
imageType: browsableImageType,
|
||||
startIndex: browsableImageStartIndex,
|
||||
limit: browsableImagePageSize
|
||||
};
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var options = getBaseRemoteOptions();
|
||||
|
||||
options.type = browsableImageType;
|
||||
options.startIndex = browsableImageStartIndex;
|
||||
options.limit = browsableImagePageSize;
|
||||
|
||||
var provider = $('#selectImageProvider', page).val();
|
||||
|
||||
if (provider) {
|
||||
options.ProviderName = provider;
|
||||
}
|
||||
|
||||
ApiClient.getAvailableRemoteImages(options).done(function (result) {
|
||||
|
||||
renderRemoteImages(page, currentItem, result, browsableImageType, options.startIndex, options.limit);
|
||||
|
||||
$('#selectBrowsableImageType', page).val(browsableImageType).selectmenu('refresh');
|
||||
|
||||
var providersHtml = result.Providers.map(function (p) {
|
||||
return '<option value="' + p + '">' + p + '</option>';
|
||||
});
|
||||
|
||||
$('#selectImageProvider', page).html('<option value="">All</option>' + providersHtml).val(provider).selectmenu('refresh');
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
|
||||
}
|
||||
|
|
@ -59,8 +107,29 @@
|
|||
reloadBrowsableImages(page);
|
||||
});
|
||||
|
||||
$('.btnDownloadRemoteImage', page).on('click', function () {
|
||||
|
||||
downloadRemoteImage(page, this.getAttribute('data-imageurl'), this.getAttribute('data-imagetype'), this.getAttribute('data-imageprovider'));
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function downloadRemoteImage(page, url, type, provider) {
|
||||
|
||||
var options = getBaseRemoteOptions();
|
||||
|
||||
options.Type = type;
|
||||
options.ImageUrl = url;
|
||||
options.ProviderName = provider;
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
ApiClient.downloadRemoteImage(options).done(function () {
|
||||
|
||||
$('#popupDownload', page).popup("close");
|
||||
reload(page);
|
||||
});
|
||||
}
|
||||
|
||||
function getRemoteImageHtml(image, imageType) {
|
||||
|
||||
|
|
@ -70,15 +139,21 @@
|
|||
|
||||
var cssClass = "remoteImage";
|
||||
|
||||
if (imageType == "Backdrop") {
|
||||
if (imageType == "Backdrop" || imageType == "Art" || imageType == "Thumb" || imageType == "Logo") {
|
||||
cssClass += " remoteBackdropImage";
|
||||
}
|
||||
else if (imageType == "Banner") {
|
||||
cssClass += " remoteBannerImage";
|
||||
}
|
||||
else if (imageType == "Disc") {
|
||||
cssClass += " remoteDiscImage";
|
||||
}
|
||||
else {
|
||||
cssClass += " remotePosterImage";
|
||||
}
|
||||
|
||||
html += '<div class="' + cssClass + '" style="background-image:url(\'' + image.Url + '\');">';
|
||||
html += '</div>';
|
||||
html += '<a target="_blank" href="' + image.Url + '" class="' + cssClass + '" style="background-image:url(\'' + image.Url + '\');">';
|
||||
html += '</a>';
|
||||
|
||||
html += '<div class="remoteImageDetails">';
|
||||
html += image.ProviderName;
|
||||
|
|
@ -96,18 +171,29 @@
|
|||
html += '</div>';
|
||||
}
|
||||
|
||||
if (image.CommunityRating) {
|
||||
if (image.CommunityRating != null) {
|
||||
|
||||
html += '<div class="remoteImageDetails">';
|
||||
|
||||
if (image.RatingType == "Likes") {
|
||||
html += image.CommunityRating + (image.CommunityRating == 1 ? " like" : " likes");
|
||||
} else {
|
||||
|
||||
if (image.CommunityRating) {
|
||||
html += image.CommunityRating.toFixed(1);
|
||||
|
||||
if (image.VoteCount) {
|
||||
html += ' • ' + image.VoteCount + ' votes';
|
||||
}
|
||||
} else {
|
||||
html += "Unrated";
|
||||
}
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
html += '<div><button type="button" data-icon="save" data-mini="true">Download</button></div>';
|
||||
html += '<div><button class="btnDownloadRemoteImage" data-imageprovider="' + image.ProviderName + '" data-imageurl="' + image.Url + '" data-imagetype="' + image.Type + '" type="button" data-icon="save" data-mini="true">Download</button></div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
|
|
@ -135,7 +221,7 @@
|
|||
var recordsEnd = Math.min(startIndex + limit, totalRecordCount);
|
||||
|
||||
// 20 is the minimum page size
|
||||
var showControls = totalRecordCount > 20;
|
||||
var showControls = totalRecordCount > limit;
|
||||
|
||||
html += '<div class="listPaging">';
|
||||
|
||||
|
|
@ -449,6 +535,13 @@
|
|||
reloadBrowsableImages(page);
|
||||
});
|
||||
|
||||
$('#selectImageProvider', page).on('change', function () {
|
||||
|
||||
browsableImageStartIndex = 0;
|
||||
|
||||
reloadBrowsableImages(page);
|
||||
});
|
||||
|
||||
}).on('pageshow', "#editItemImagesPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<packages>
|
||||
<package id="MediaBrowser.ApiClient.Javascript" version="3.0.184" targetFramework="net45" />
|
||||
<package id="MediaBrowser.ApiClient.Javascript" version="3.0.187" targetFramework="net45" />
|
||||
<package id="ServiceStack.Common" version="3.9.62" targetFramework="net45" />
|
||||
<package id="ServiceStack.Text" version="3.9.62" targetFramework="net45" />
|
||||
</packages>
|
||||
Loading…
Add table
Add a link
Reference in a new issue