cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

fixes #903 - Display image info on web client detail page

Browse Source
This commit is contained in:
Luke Pulverenti 2014-08-28 20:49:25 -04:00
parent 046e584924
commit b74ed62a1c
6 changed files with 133 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
dashboard-ui/css/librarybrowser.css
View File

@ -517,6 +517,23 @@ a.itemTag:hover {
margin-bottom: 2.5em;
}
.detailCollapsibleSection:not(.hide) + .detailCollapsibleSection {
margin-top: -2em;
}
.detailPageCollabsible {
margin-top: 0;
}
.detailPageCollabsible .ui-collapsible-heading a {
background-color: #141414 !important;
font-size: 16px;
font-weight: 400 !important;
border-radius: 4px;
padding-top: .75em;
padding-bottom: .75em;
}
.detailSectionHeader {
background-clip: border-box;
background-color: #141414;

71
dashboard-ui/itemdetails.html
View File

@ -165,36 +165,7 @@
<div data-role="content">
<div class="detailPageContent">
<div id="detailsSection" class="detailSection hide">
<div class="tabButtons" style="margin-top: .75em;"></div>
<div class="detailSectionContent" style="padding: .25em .7em 0;">
<div class="detailTab tabDetails">
<p id="players"></p>
<p id="seriesAirTime"></p>
<p id="itemPremiereDate"></p>
<p id="itemBudget"></p>
<p id="itemRevenue"></p>
<p class="itemExternalLinks"></p>
</div>
<div class="detailTab tabMediaInfo">
<div class="splitVersionContainer" style="border-bottom: 1px solid #444;">
<button type="button" class="btnSplitVersions" data-mini="true" data-inline="true" data-icon="delete" title="${ButtonSplitVersionsApart}">${ButtonSplitVersionsApart}</button>
</div>
<div id="mediaInfoContent"></div>
</div>
<div class="detailTab tabTags">
<p class="itemStudios"></p>
<p class="itemKeywords"></p>
<p class="itemTags"></p>
</div>
</div>
</div>
<br />
<div class="collectionItems"></div>
<div id="childrenCollapsible" class="hide detailSection">
<div class="detailSectionHeader">
@ -214,6 +185,46 @@
</div>
<div id="castContent" class="detailSectionContent"></div>
</div>
<div class="detailSection detailCollapsibleSection detailsSection">
<div data-role="collapsible" class="detailPageCollabsible" data-content-theme="false">
<h2>${HeaderDetails}</h2>
<div>
<div class="tabDetails">
<p id="players"></p>
<p id="seriesAirTime"></p>
<p id="itemBudget"></p>
<p id="itemRevenue"></p>
<p class="itemExternalLinks"></p>
<p class="itemStudios"></p>
<p class="itemKeywords"></p>
<p class="itemTags"></p>
</div>
</div>
</div>
</div>
<div class="detailSection detailCollapsibleSection audioVideoMediaInfo">
<div data-role="collapsible" class="detailPageCollabsible" data-content-theme="false">
<h2>${HeaderMediaInfo}</h2>
<div>
<div class="splitVersionContainer" style="border-bottom: 1px solid #444;">
<button type="button" class="btnSplitVersions" data-mini="true" data-inline="true" data-icon="delete" title="${ButtonSplitVersionsApart}">${ButtonSplitVersionsApart}</button>
</div>
<div id="mediaInfoContent"></div>
</div>
</div>
</div>
<div class="detailSection detailCollapsibleSection photoInfo hide">
<div data-role="collapsible" class="detailPageCollabsible" data-content-theme="false" data-collapsed="false">
<h2>${HeaderPhotoInfo}</h2>
<div>
<div class="photoInfoContent"></div>
</div>
</div>
</div>
<div id="specialsCollapsible" class="detailSection hide">
<div class="detailSectionHeader">
${HeaderSpecialFeatures}

6
dashboard-ui/scripts/edititemmetadata.js
View File

@ -76,6 +76,12 @@
$('#btnEditSubtitles', page).hide();
}
if (item.MediaType == 'Photo') {
$('#btnEditImages', page).hide();
} else {
$('#btnEditImages', page).show();
}
if (item.MediaType == "Video" && item.Type != "Episode") {
$('#fldShortOverview', page).show();
} else {

118
dashboard-ui/scripts/itemdetailpage.js
View File

@ -144,7 +144,7 @@
function renderImage(page, item, user) {
var imageHref = user.Configuration.IsAdministrator ? "edititemimages.html?id=" + item.Id : "";
var imageHref = user.Configuration.IsAdministrator && item.MediaType != 'Photo' ? "edititemimages.html?id=" + item.Id : "";
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item, imageHref));
}
@ -365,13 +365,6 @@
$('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(item));
if (item.Type != "Episode" && item.Type != "Movie" && item.Type != "Series" && item.Type != "Season") {
var premiereDateElem = $('#itemPremiereDate', page).show();
LibraryBrowser.renderPremiereDate(premiereDateElem, item);
} else {
$('#itemPremiereDate', page).hide();
}
LibraryBrowser.renderBudget($('#itemBudget', page), item);
LibraryBrowser.renderRevenue($('#itemRevenue', page), item);
LibraryBrowser.renderAwardSummary($('#awardSummary', page), item);
@ -410,67 +403,80 @@
$('#artist', page).hide();
}
if (item.MediaSources && item.MediaSources.length && item.Path) {
$('.audioVideoMediaInfo', page).removeClass('hide');
} else {
$('.audioVideoMediaInfo', page).addClass('hide');
}
if (item.MediaType == 'Photo') {
$('.photoInfo', page).removeClass('hide');
renderPhotoInfo(page, item);
} else {
$('.photoInfo', page).addClass('hide');
}
renderTabButtons(page, item);
}
function renderTabButtons(page, item) {
function renderPhotoInfo(page, item) {
var tabsHtml = '';
var html = '';
var attributes = [];
if (item.CameraMake) {
attributes.push(createAttribute("Camera make", item.CameraMake));
}
if (item.CameraModel) {
attributes.push(createAttribute("Camera model", item.CameraModel));
}
if (item.Software) {
attributes.push(createAttribute("Software", item.Software));
}
if (item.ExposureTime) {
var val = 1 / item.ExposureTime;
attributes.push(createAttribute("Exposure time", '1/' + val + ' s'));
}
if (item.FocalLength) {
attributes.push(createAttribute("Focal length", item.FocalLength.toFixed(1) + ' mm'));
}
if (item.Aperture) {
attributes.push(createAttribute("Aperture", 'F' + item.Aperture.toFixed(1)));
}
if (item.ShutterSpeed) {
attributes.push(createAttribute("ShutterSpeed", item.ShutterSpeed));
}
if (item.ImageOrientation) {
attributes.push(createAttribute("Orientation", item.ImageOrientation));
}
html += attributes.join('<br/>');
$('.photoInfoContent', page).html(html).trigger('create');
}
function renderTabButtons(page, item) {
var elem = $('.tabDetails', page)[0];
var text = elem.textContent || elem.innerText;
if (text.trim()) {
tabsHtml += '<input type="radio" name="radioDetailTab" class="radioDetailTab" id="radioDetails" value="tabDetails">';
tabsHtml += '<label for="radioDetails" class="lblDetailTab">Details</label>';
}
if (item.MediaSources && item.MediaSources.length && item.Path) {
tabsHtml += '<input type="radio" name="radioDetailTab" class="radioDetailTab" id="radioMediaInfo" value="tabMediaInfo">';
tabsHtml += '<label for="radioMediaInfo" class="lblDetailTab">Media Info</label>';
}
elem = $('.tabTags', page)[0];
text = elem.textContent || elem.innerText;
if (text.trim()) {
tabsHtml += '<input type="radio" name="radioDetailTab" class="radioDetailTab" id="radioTags" value="tabTags">';
tabsHtml += '<label for="radioTags" class="lblDetailTab">Tags</label>';
}
if (tabsHtml) {
tabsHtml = '<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="detailTabs">' + tabsHtml;
tabsHtml += '</div>';
$('.tabButtons', page).html(tabsHtml).trigger('create');
$('#detailsSection', page).removeClass('hide');
var elems = $('.radioDetailTab', page).on('change', function () {
$('.detailTab', page).hide();
$('.' + this.value, page).show();
});
elems[0].click();
$(elems[0]).trigger('change');
$('.detailsSection', page).removeClass('hide');
} else {
$('#detailsSection', page).addClass('hide');
$('.tabButtons', page).empty();
$('.detailsSection', page).addClass('hide');
}
//var elem = $('.detailSectionContent', detailsSection)[0];
//var text = elem.textContent || elem.innerText;
//if (!text.trim()) {
// detailsSection.addClass('hide');
//} else {
// detailsSection.removeClass('hide');
//}
}
function getArtistLinksHtml(artists, context) {

2
dashboard-ui/scripts/itemlistpage.js
View File

@ -66,7 +66,7 @@
html += pagingHtml;
$('#items', page).html(html).trigger('create');
$('#items', page).html(html).trigger('create').createCardMenus();
$('.btnNextPage', page).on('click', function () {
query.StartIndex += query.Limit;

8
dashboard-ui/scripts/librarybrowser.js
View File

@ -2067,7 +2067,7 @@
var miscInfo = [];
var text, date;
if (item.Type == "Episode") {
if (item.Type == "Episode" || item.MediaType == 'Photo') {
if (item.PremiereDate) {
@ -2131,7 +2131,7 @@
}
}
if (item.Type != "Series" && item.Type != "Episode") {
if (item.Type != "Series" && item.Type != "Episode" && item.MediaType != 'Photo') {
if (item.ProductionYear) {
@ -2174,6 +2174,10 @@
miscInfo.push("3D");
}
if (item.MediaType == 'Photo' && item.Width && item.Height) {
miscInfo.push(item.Width + "x" + item.Height);
}
return miscInfo.join('&nbsp;&nbsp;&nbsp;&nbsp;');
},