mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
added stub page to edit metatada for an item
This commit is contained in:
Luke Pulverenti
parent
fcf4964e3a
commit
49af0a0d81
7 changed files with 361 additions and 17 deletions
|
|
@ -13,37 +13,43 @@
|
|||
<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" onclick="Dashboard.navigate('edititemmetadata.html', true);">Metadata</a>
|
||||
<a href="#" data-role="button" class="ui-btn-active">Images</a>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-top: -20px;">
|
||||
<div style="text-align: center; margin: -25px 0 1em;">
|
||||
<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 data-role="collapsible" data-mini="true" data-collapsed="false" data-corners="false">
|
||||
<h3>Images</h3>
|
||||
<div id="images">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="backdropsContainer" style="display: none;">
|
||||
<div data-role="collapsible" data-mini="true" data-collapsed="false" data-corners="false">
|
||||
<h3>Backdrops</h3>
|
||||
<div id="backdrops">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="screenshotsContainer" style="display: none;">
|
||||
<div data-role="collapsible" data-mini="true" data-collapsed="false" data-corners="false">
|
||||
<h3>Screenshots</h3>
|
||||
<div id="screenshots">
|
||||
</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;">
|
||||
<form id="uploadItemImageForm" style="max-width: 100%; margin: 0 1.5em 1.5em;">
|
||||
<h2>Add/Update Image</h2>
|
||||
<div>
|
||||
<p>JPG/PNG only.</p>
|
||||
|
|
@ -78,7 +84,7 @@
|
|||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$('#editItemImagesPage').on('submit', EditItemImagesPage.onSubmit);
|
||||
$('#uploadItemImageForm').on('submit', EditItemImagesPage.onSubmit);
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
109
dashboard-ui/edititemmetadata.html
Normal file
109
dashboard-ui/edititemmetadata.html
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Media Browser</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="editItemMetadataPage" 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>
|
||||
<br />
|
||||
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
|
||||
<a href="#" data-role="button" class="ui-btn-active">Metadata</a>
|
||||
<a href="#" data-role="button" onclick="Dashboard.navigate('edititemimages.html', true);">Images</a>
|
||||
</div>
|
||||
|
||||
<form id="editItemMetadataForm" style="max-width: 100%; font-size: 14px;">
|
||||
<div data-role="fieldcontain">
|
||||
<label for="txtName">Name:</label>
|
||||
<input type="text" id="txtName" name="txtName" required="required" data-mini="true" />
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="txtSortName">Sort name:</label>
|
||||
<input type="text" id="txtSortName" name="txtSortName" data-mini="true" />
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="txtDisplayMediaType">Display media type:</label>
|
||||
<input type="text" id="txtDisplayMediaType" name="txtDisplayMediaType" data-mini="true" />
|
||||
</div>
|
||||
<div data-role="fieldcontain" id="fldParentIndexNumber" style="display: none;">
|
||||
<label id="lblParentIndexNumber" for="txtParentIndexNumber">Parent number:</label>
|
||||
<input type="number" id="txtParentIndexNumber" name="txtParentIndexNumber" data-mini="true" pattern="[0-9]*" />
|
||||
</div>
|
||||
<div data-role="fieldcontain" id="fldIndexNumber" style="display: none;">
|
||||
<label id="lblIndexNumber" for="txtIndexNumber">Number:</label>
|
||||
<input type="number" id="txtIndexNumber" name="txtIndexNumber" data-mini="true" pattern="[0-9]*" />
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="txtCommunityRating">Community rating (0-10):</label>
|
||||
<input type="number" id="txtCommunityRating" name="txtCommunityRating" step=".1" data-mini="true" min="0" max="10" />
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="txtCriticRating">Critic rating (0-10):</label>
|
||||
<input type="number" id="txtCriticRating" name="txtCriticRating" step=".1" data-mini="true" min="0" max="10" />
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="txtCriticRatingSummary">Critic rating summary:</label>
|
||||
<input type="text" id="txtCriticRatingSummary" name="txtCriticRatingSummary" data-mini="true" />
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="txtHomePageUrl">Website:</label>
|
||||
<input type="url" id="txtHomePageUrl" name="txtHomePageUrl" data-mini="true" />
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="txtPremiereDate">Release date:</label>
|
||||
<input type="date" id="txtPremiereDate" name="txtPremiereDate" data-mini="true" />
|
||||
</div>
|
||||
<div data-role="fieldcontain" id="fldEndDate" style="display: none;">
|
||||
<label for="txtEndDate">End date:</label>
|
||||
<input type="date" id="txtEndDate" name="txtEndDate" data-mini="true" />
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="txtProductionYear">Year:</label>
|
||||
<input type="number" id="txtProductionYear" name="txtProductionYear" data-mini="true" />
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="selectOfficialRating">Official rating:</label>
|
||||
<select name="selectOfficialRating" id="selectOfficialRating" data-mini="true"></select>
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="selectCustomRating">Custom rating:</label>
|
||||
<select name="selectCustomRating" id="selectCustomRating" data-mini="true"></select>
|
||||
</div>
|
||||
<div data-role="fieldcontain" id="fldBudget" style="display: none;">
|
||||
<label for="txtBudget">Budget:</label>
|
||||
<input type="number" id="txtBudget" name="txtBudget" data-mini="true" />
|
||||
</div>
|
||||
<div data-role="fieldcontain" id="fldRevenue" style="display: none;">
|
||||
<label for="txtRevenue">Revenue:</label>
|
||||
<input type="number" id="txtRevenue" name="txtRevenue" data-mini="true" />
|
||||
</div>
|
||||
<div data-role="fieldcontain" id="fldOriginalAspectRatio" style="display: none;">
|
||||
<label for="txtOriginalAspectRatio">Original aspect ratio:</label>
|
||||
<input type="text" id="txtOriginalAspectRatio" name="txtOriginalAspectRatio" data-mini="true" />
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="selectLanguage">Original language:</label>
|
||||
<select name="selectLanguage" id="selectLanguage" data-mini="true"></select>
|
||||
</div>
|
||||
<ul data-role="listview" class="ulForm">
|
||||
<li>
|
||||
<button type="submit" data-theme="b" data-icon="ok">
|
||||
Save
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$('#editItemMetadataForm').on('submit', EditItemMetadataPage.onSubmit);
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -133,7 +133,7 @@
|
|||
</div>
|
||||
<div id="itemSongs"></div>
|
||||
<div style="vertical-align: top;">
|
||||
<div data-role="collapsible" id="childrenCollapsible" class="hide" data-mini="true" data-collapsed="false" data-corners="false" data-inset="fa">
|
||||
<div data-role="collapsible" id="childrenCollapsible" class="hide" data-mini="true" data-collapsed="false" data-corners="false">
|
||||
<h3><span id="childrenTitle" class="collapsibleTitle"></span></h3>
|
||||
<div id="childrenContent"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -398,13 +398,13 @@
|
|||
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">' + (parseInt(stream.BitRate / 1000)) + ' kbps</span></li>';
|
||||
}
|
||||
if (stream.Channels) {
|
||||
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 + ' khz</span></li>';
|
||||
}
|
||||
|
||||
var framerate = stream.AverageFrameRate || stream.RealFrameRate;
|
||||
|
|
@ -541,7 +541,7 @@
|
|||
|
||||
$('#btnEdit', page).on('click', function () {
|
||||
|
||||
Dashboard.navigate("edititemimages.html?id=" + currentItem.Id);
|
||||
Dashboard.navigate("edititemmetadata.html?id=" + currentItem.Id);
|
||||
});
|
||||
|
||||
}).on('pageshow', "#itemDetailPage", function () {
|
||||
|
|
|
|||
228
dashboard-ui/scripts/edititemmetadata.js
Normal file
228
dashboard-ui/scripts/edititemmetadata.js
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
(function ($, document, window) {
|
||||
|
||||
var currentItem;
|
||||
|
||||
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), true);
|
||||
|
||||
setFieldVisibilities(page, item);
|
||||
fillItemInfo(page, item);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
|
||||
function setFieldVisibilities(page, item) {
|
||||
if (item.Type == "Series" || item.Type == "Person") {
|
||||
$('#fldEndDate', page).show();
|
||||
} else {
|
||||
$('#fldEndDate', page).hide();
|
||||
}
|
||||
|
||||
if (item.Type == "Movie" || item.MediaType == "Game") {
|
||||
$('#fldBudget', page).show();
|
||||
$('#fldRevenue', page).show();
|
||||
} else {
|
||||
$('#fldBudget', page).hide();
|
||||
$('#fldRevenue', page).hide();
|
||||
}
|
||||
|
||||
if (item.MediaType == "Video") {
|
||||
$('#fldOriginalAspectRatio', page).show();
|
||||
} else {
|
||||
$('#fldOriginalAspectRatio', page).hide();
|
||||
}
|
||||
|
||||
if (item.Type == "Audio" || item.Type == "Episode" || item.Type == "Season") {
|
||||
$('#fldIndexNumber', page).show();
|
||||
|
||||
if (item.Type == "Episode") {
|
||||
$('#lblIndexNumber', page).html('Episode number');
|
||||
}
|
||||
else if (item.Type == "Season") {
|
||||
$('#lblIndexNumber', page).html('Season number');
|
||||
}
|
||||
else if (item.Type == "Audio") {
|
||||
$('#lblIndexNumber', page).html('Track number');
|
||||
}
|
||||
else {
|
||||
$('#lblIndexNumber', page).html('Number');
|
||||
}
|
||||
} else {
|
||||
$('#fldIndexNumber', page).hide();
|
||||
}
|
||||
|
||||
if (item.Type == "Audio" || item.Type == "Episode") {
|
||||
$('#fldParentIndexNumber', page).show();
|
||||
|
||||
if (item.Type == "Episode") {
|
||||
$('#lblParentIndexNumber', page).html('Season number');
|
||||
}
|
||||
else if (item.Type == "Audio") {
|
||||
$('#lblParentIndexNumber', page).html('Disc number');
|
||||
}
|
||||
else {
|
||||
$('#lblParentIndexNumber', page).html('Parent number');
|
||||
}
|
||||
} else {
|
||||
$('#fldParentIndexNumber', page).hide();
|
||||
}
|
||||
}
|
||||
|
||||
function fillItemInfo(page, item) {
|
||||
|
||||
ApiClient.getCultures().done(function (result) {
|
||||
|
||||
var select = $('#selectLanguage', page);
|
||||
|
||||
populateLanguages(result, select);
|
||||
|
||||
select.val(item.Language || "").selectmenu('refresh');
|
||||
});
|
||||
|
||||
ApiClient.getParentalRatings().done(function (result) {
|
||||
|
||||
var select = $('#selectOfficialRating', page);
|
||||
|
||||
populateRatings(result, select);
|
||||
|
||||
select.val(item.OfficialRating || "").selectmenu('refresh');
|
||||
|
||||
select = $('#selectCustomRating', page);
|
||||
|
||||
populateRatings(result, select);
|
||||
|
||||
select.val(item.CustomRating || "").selectmenu('refresh');
|
||||
});
|
||||
|
||||
$('#txtName', page).val(item.Name || "");
|
||||
$('#txtSortName', page).val(item.SortName || "");
|
||||
$('#txtDisplayMediaType', page).val(item.DisplayMediaType || "");
|
||||
$('#txtCommunityRating', page).val(item.CommunityRating || "");
|
||||
$('#txtHomePageUrl', page).val(item.HomePageUrl || "");
|
||||
|
||||
$('#txtBudget', page).val(item.Budget || "");
|
||||
$('#txtRevenue', page).val(item.Revenue || "");
|
||||
|
||||
$('#txtCriticRating', page).val(item.CriticRating || "");
|
||||
$('#txtCriticRatingSummary', page).val(item.CriticRatingSummary || "");
|
||||
|
||||
$('#txtIndexNumber', page).val(item.IndexNumber || "");
|
||||
$('#txtParentIndexNumber', page).val(item.ParentIndexNumber || "");
|
||||
|
||||
var date;
|
||||
|
||||
if (item.PremiereDate) {
|
||||
try {
|
||||
date = parseISO8601Date(item.PremiereDate, { toLocal: true });
|
||||
|
||||
$('#txtPremiereDate', page).val(date.toISOString().slice(0, 10));
|
||||
}
|
||||
catch (e) {
|
||||
$('#txtPremiereDate', page).val('');
|
||||
}
|
||||
} else {
|
||||
$('#txtPremiereDate', page).val('');
|
||||
}
|
||||
|
||||
if (item.EndDate) {
|
||||
try {
|
||||
date = parseISO8601Date(item.EndDate, { toLocal: true });
|
||||
|
||||
$('#txtEndDate', page).val(date.toISOString().slice(0, 10));
|
||||
}
|
||||
catch (e) {
|
||||
$('#txtEndDate', page).val('');
|
||||
}
|
||||
} else {
|
||||
$('#txtEndDate', page).val('');
|
||||
}
|
||||
|
||||
$('#txtProductionYear', page).val(item.ProductionYear || "");
|
||||
|
||||
$('#txtOriginalAspectRatio', page).val(item.AspectRatio || "");
|
||||
}
|
||||
|
||||
function populateLanguages(allCultures, select) {
|
||||
|
||||
var html = "";
|
||||
|
||||
html += "<option value=''></option>";
|
||||
|
||||
for (var i = 0, length = allCultures.length; i < length; i++) {
|
||||
|
||||
var culture = allCultures[i];
|
||||
|
||||
html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + "</option>";
|
||||
}
|
||||
|
||||
select.html(html).selectmenu("refresh");
|
||||
}
|
||||
|
||||
function populateRatings(allParentalRatings, select) {
|
||||
|
||||
var html = "";
|
||||
|
||||
html += "<option value=''></option>";
|
||||
|
||||
var ratings = [];
|
||||
var i, length, rating;
|
||||
|
||||
for (i = 0, length = allParentalRatings.length; i < length; i++) {
|
||||
|
||||
rating = allParentalRatings[i];
|
||||
|
||||
ratings.push({ Name: rating.Name, Value: rating.Name });
|
||||
}
|
||||
|
||||
for (i = 0, length = ratings.length; i < length; i++) {
|
||||
|
||||
rating = ratings[i];
|
||||
|
||||
html += "<option value='" + rating.Value + "'>" + rating.Name + "</option>";
|
||||
}
|
||||
|
||||
select.html(html).selectmenu("refresh");
|
||||
}
|
||||
|
||||
function editItemMetadataPage() {
|
||||
var self = this;
|
||||
|
||||
self.onSubmit = function() {
|
||||
|
||||
Dashboard.alert('coming soon');
|
||||
|
||||
return false;
|
||||
};
|
||||
}
|
||||
|
||||
window.EditItemMetadataPage = new editItemMetadataPage();
|
||||
|
||||
$(document).on('pageinit', "#editItemMetadataPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
|
||||
}).on('pageshow', "#editItemMetadataPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
reload(page);
|
||||
|
||||
}).on('pagehide', "#editItemMetadataPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
currentItem = null;
|
||||
});
|
||||
|
||||
})(jQuery, document, window);
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
|
||||
$('#btnEdit', page).on('click', function () {
|
||||
|
||||
Dashboard.navigate("edititemimages.html?id=" + query.ParentId);
|
||||
Dashboard.navigate("edititemmetadata.html?id=" + query.ParentId);
|
||||
});
|
||||
|
||||
}).on('pageshow', "#itemListPage", function () {
|
||||
|
|
|
|||
|
|
@ -25,8 +25,9 @@
|
|||
items: result.Items,
|
||||
countNameSingular: "Song",
|
||||
countNamePlural: "Songs",
|
||||
preferBackdrop: true,
|
||||
context: "music"
|
||||
preferBackdrop: false,
|
||||
context: "music",
|
||||
shape: "square"
|
||||
});
|
||||
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue