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
63
ApiClient.js
63
ApiClient.js
|
|
@ -758,7 +758,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
|
||||||
* @param {String} userId
|
* @param {String} userId
|
||||||
* @param {String} imageType The type of image to delete, based on the server-side ImageType enum.
|
* @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) {
|
if (!userId) {
|
||||||
throw new Error("null 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);
|
var url = self.getUrl("Users/" + userId + "/Images/" + imageType);
|
||||||
|
|
||||||
|
if (imageIndex != null) {
|
||||||
|
url += "/" + imageIndex;
|
||||||
|
}
|
||||||
|
|
||||||
return self.ajax({
|
return self.ajax({
|
||||||
type: "DELETE",
|
type: "DELETE",
|
||||||
url: url
|
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
|
* Uploads a user image
|
||||||
* @param {String} userId
|
* @param {String} userId
|
||||||
|
|
@ -839,7 +898,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
|
||||||
return deferred.promise();
|
return deferred.promise();
|
||||||
};
|
};
|
||||||
|
|
||||||
self.uploadImage = function (itemId, imageType, file) {
|
self.uploadItemImage = function (itemId, imageType, file) {
|
||||||
|
|
||||||
if (!itemId) {
|
if (!itemId) {
|
||||||
throw new Error("null itemId");
|
throw new Error("null itemId");
|
||||||
|
|
|
||||||
|
|
@ -199,6 +199,10 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.itemMediaInfo {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
.mediaInfoStream {
|
.mediaInfoStream {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
|
@ -212,13 +216,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoDetails {
|
.mediaInfoDetails {
|
||||||
margin: 0 0 0 1.5em;
|
margin: 0 0 0 .25em;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style-type: circle;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoLabel {
|
.mediaInfoLabel {
|
||||||
color: #bbb;
|
color: #bbb;
|
||||||
|
margin-right: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.posterRibbon {
|
.posterRibbon {
|
||||||
|
|
|
||||||
|
|
@ -11,43 +11,72 @@
|
||||||
<h1 id="grandParentName" class="detailPageName hide"></h1>
|
<h1 id="grandParentName" class="detailPageName hide"></h1>
|
||||||
<h1 id="parentName" class="detailPageName hide"></h1>
|
<h1 id="parentName" class="detailPageName hide"></h1>
|
||||||
<h1 id="itemName" class="detailPageName"></h1>
|
<h1 id="itemName" class="detailPageName"></h1>
|
||||||
|
<br />
|
||||||
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
|
<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>
|
<a href="#" data-role="button" class="ui-btn-active">Images</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form style="max-width: 100%;">
|
<div style="text-align: center; margin-top: -20px;">
|
||||||
<h2>Add/Update Image</h2>
|
<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>
|
||||||
<p>JPG/PNG only.</p>
|
|
||||||
<input type="file" accept="image/*" id="uploadImage" name="uploadImage" />
|
|
||||||
|
|
||||||
<div id="imageDropZone" class="imageDropZone">
|
<div id="imagesContainer" style="display: none;">
|
||||||
<h3>Drop Image Here</h3>
|
<h3 style="margin-top: 0;">Images</h3>
|
||||||
<output id="imageOutput"></output>
|
<div id="images">
|
||||||
</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>
|
</div>
|
||||||
</form>
|
</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>
|
</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" data-theme="c" />
|
||||||
|
|
||||||
|
<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" data-theme="c">
|
||||||
|
<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>
|
||||||
|
<a data-role="button" data-rel="back" data-icon="delete" data-theme="c" onclick="$('#uploadImage').val('').trigger('change');">Cancel</a>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$('#editItemImagesPage').on('submit', EditItemImagesPage.onSubmit);
|
$('#editItemImagesPage').on('submit', EditItemImagesPage.onSubmit);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -101,7 +101,9 @@
|
||||||
<span id="playButtonContainer" style="display: none;">
|
<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>
|
<button id="btnPlay" type="button" data-icon="play" data-inline="true" data-mini="true" data-theme="a">Play</button>
|
||||||
</span>
|
</span>
|
||||||
<button id="btnEdit" type="button" data-icon="pencil" data-inline="true" data-mini="true" data-theme="a">Edit</button>
|
<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>
|
</div>
|
||||||
<div id="playMenuAnchor"></div>
|
<div id="playMenuAnchor"></div>
|
||||||
|
|
@ -139,7 +141,7 @@
|
||||||
<div style="display: inline-block; vertical-align: top;">
|
<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">
|
<div data-role="collapsible" id="mediaInfoCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
|
||||||
<h3>Media Info</h3>
|
<h3>Media Info</h3>
|
||||||
<div id="mediaInfoContent"></div>
|
<div id="mediaInfoContent" class="itemMediaInfo"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: inline-block; vertical-align: top;">
|
<div style="display: inline-block; vertical-align: top;">
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,11 @@
|
||||||
<div id="itemListPage" data-role="page" class="page libraryPage folderListPage" data-theme="a">
|
<div id="itemListPage" data-role="page" class="page libraryPage folderListPage" data-theme="a">
|
||||||
<div data-role="content" class="itemListContent">
|
<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="viewSettings">
|
||||||
<div class="viewControls">
|
<div class="viewControls">
|
||||||
<div style="display: inline-block;">
|
<div style="display: inline-block;">
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
renderHeader(page, item);
|
renderHeader(page, item);
|
||||||
|
|
||||||
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
|
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
|
||||||
|
|
||||||
LibraryBrowser.renderTitle(item, $('#itemName', page), $('#parentName', page), $('#grandParentName', page));
|
LibraryBrowser.renderTitle(item, $('#itemName', page), $('#parentName', page), $('#grandParentName', page));
|
||||||
|
|
||||||
var context = getContext(item);
|
var context = getContext(item);
|
||||||
|
|
@ -28,6 +28,16 @@
|
||||||
$('#playButtonContainer', page).hide();
|
$('#playButtonContainer', page).hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Dashboard.getCurrentUser().done(function (user) {
|
||||||
|
|
||||||
|
if (user.Configuration.IsAdministrator) {
|
||||||
|
$('#editButtonContainer', page).show();
|
||||||
|
} else {
|
||||||
|
$('#editButtonContainer', page).hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
$(".autoNumeric").autoNumeric('init');
|
$(".autoNumeric").autoNumeric('init');
|
||||||
|
|
||||||
Dashboard.hideLoadingMsg();
|
Dashboard.hideLoadingMsg();
|
||||||
|
|
@ -367,57 +377,65 @@
|
||||||
html += '<ul class="mediaInfoDetails">';
|
html += '<ul class="mediaInfoDetails">';
|
||||||
|
|
||||||
if (stream.Codec) {
|
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) {
|
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) {
|
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) {
|
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) {
|
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) {
|
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) {
|
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) {
|
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) {
|
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) {
|
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;
|
var framerate = stream.AverageFrameRate || stream.RealFrameRate;
|
||||||
|
|
||||||
if (framerate) {
|
if (framerate) {
|
||||||
html += '<li><span class="mediaInfoLabel">Framerate</span> ' + framerate + '</li>';
|
html += '<li><span class="mediaInfoLabel">Framerate: </span> ' + framerate + '</li>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (stream.PixelFormat) {
|
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) {
|
if (stream.IsDefault || stream.IsForced || stream.IsExternal) {
|
||||||
html += '<li>Default</li>';
|
|
||||||
}
|
var vals = [];
|
||||||
if (stream.IsForced) {
|
|
||||||
html += '<li>Forced</li>';
|
if (stream.IsDefault) {
|
||||||
}
|
vals.push("Default");
|
||||||
if (stream.IsExternal) {
|
}
|
||||||
html += '<li>External</li>';
|
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) {
|
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>';
|
html += '</ul>';
|
||||||
|
|
|
||||||
|
|
@ -13,12 +13,113 @@
|
||||||
|
|
||||||
currentItem = item;
|
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) {
|
function onFileReaderError(evt) {
|
||||||
|
|
||||||
Dashboard.hideLoadingMsg();
|
Dashboard.hideLoadingMsg();
|
||||||
|
|
@ -79,9 +180,6 @@
|
||||||
|
|
||||||
function processImageChangeResult(page) {
|
function processImageChangeResult(page) {
|
||||||
|
|
||||||
Dashboard.hideLoadingMsg();
|
|
||||||
|
|
||||||
Dashboard.validateCurrentUser(page);
|
|
||||||
reload(page);
|
reload(page);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -107,14 +205,48 @@
|
||||||
|
|
||||||
var imageType = $('#selectImageType', page).val();
|
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);
|
processImageChangeResult(page);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return false;
|
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();
|
window.EditItemImagesPage = new editItemImages();
|
||||||
|
|
@ -130,6 +262,10 @@
|
||||||
|
|
||||||
reload(page);
|
reload(page);
|
||||||
|
|
||||||
|
$('#uploadImage', page).on("change", function () {
|
||||||
|
setFiles(page, this.files);
|
||||||
|
});
|
||||||
|
|
||||||
$("#imageDropZone", page).on('dragover', function (e) {
|
$("#imageDropZone", page).on('dragover', function (e) {
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
@ -153,6 +289,8 @@
|
||||||
|
|
||||||
currentItem = null;
|
currentItem = null;
|
||||||
|
|
||||||
|
$('#uploadImage', page).off("change");
|
||||||
|
|
||||||
$("#imageDropZone", page).off('dragover').off('drop');
|
$("#imageDropZone", page).off('dragover').off('drop');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -78,6 +78,16 @@
|
||||||
$('#itemName', page).html(name);
|
$('#itemName', page).html(name);
|
||||||
Dashboard.setPageTitle(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 () {
|
$(document).on('pageinit', "#itemListPage", function () {
|
||||||
|
|
@ -120,6 +130,11 @@
|
||||||
reloadItems(page);
|
reloadItems(page);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('#btnEdit', page).on('click', function () {
|
||||||
|
|
||||||
|
Dashboard.navigate("edititemimages.html?id=" + query.ParentId);
|
||||||
|
});
|
||||||
|
|
||||||
}).on('pageshow', "#itemListPage", function () {
|
}).on('pageshow', "#itemListPage", function () {
|
||||||
|
|
||||||
query.ParentId = getParameterByName('parentId');
|
query.ParentId = getParameterByName('parentId');
|
||||||
|
|
|
||||||
|
|
@ -616,10 +616,10 @@
|
||||||
getMetroColor: function (str) {
|
getMetroColor: function (str) {
|
||||||
|
|
||||||
if (str) {
|
if (str) {
|
||||||
var char = String(str.substr(0, 1).charCodeAt());
|
var character = String(str.substr(0, 1).charCodeAt());
|
||||||
var sum = 0;
|
var sum = 0;
|
||||||
for (var i = 0; i < char.length; i++) {
|
for (var i = 0; i < character.length; i++) {
|
||||||
sum += parseInt(char.charAt(i));
|
sum += parseInt(character.charAt(i));
|
||||||
}
|
}
|
||||||
var index = String(sum).substr(-1);
|
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;
|
var name = item.Name;
|
||||||
|
|
||||||
if (item.IndexNumber != null) {
|
if (item.IndexNumber != null && item.Type !== "Season") {
|
||||||
name = item.IndexNumber + " - " + name;
|
name = item.IndexNumber + " - " + name;
|
||||||
}
|
}
|
||||||
if (item.ParentIndexNumber != null && item.Type != "Episode") {
|
if (item.ParentIndexNumber != null && item.Type != "Episode") {
|
||||||
|
|
@ -643,7 +643,11 @@
|
||||||
|
|
||||||
Dashboard.setPageTitle(name);
|
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") {
|
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');
|
grandParentNameElem.html('<a class="detailPageParentLink" href="itembynamedetails.html?context=music&artist=' + ApiClient.encodeName(item.AlbumArtist) + '">' + item.AlbumArtist + '</a>').show().trigger('create');
|
||||||
|
|
|
||||||
|
|
@ -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.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.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>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue