From b74ed62a1cc31032879b6480426855a97a2e698b Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Thu, 28 Aug 2014 20:49:25 -0400 Subject: [PATCH] fixes #903 - Display image info on web client detail page --- dashboard-ui/css/librarybrowser.css | 17 ++++ dashboard-ui/itemdetails.html | 71 ++++++++------ dashboard-ui/scripts/edititemmetadata.js | 6 ++ dashboard-ui/scripts/itemdetailpage.js | 118 ++++++++++++----------- dashboard-ui/scripts/itemlistpage.js | 2 +- dashboard-ui/scripts/librarybrowser.js | 8 +- 6 files changed, 133 insertions(+), 89 deletions(-) diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 23595a20e1..5a5ef76b69 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -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; diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html index 0bbbd4dd06..235a422aa0 100644 --- a/dashboard-ui/itemdetails.html +++ b/dashboard-ui/itemdetails.html @@ -165,36 +165,7 @@
-
- -
- -
- -
-

-

-

-

-

-

-
-
- -
- -
-
- -
-
-

-

-

-
-
-
- +
@@ -214,6 +185,46 @@
+
+
+

${HeaderDetails}

+
+
+

+

+

+

+

+ +

+

+

+
+
+
+
+ +
+
+

${HeaderMediaInfo}

+
+
+ +
+
+
+
+
+ +
+
+

${HeaderPhotoInfo}

+
+
+
+
+
+
${HeaderSpecialFeatures} diff --git a/dashboard-ui/scripts/edititemmetadata.js b/dashboard-ui/scripts/edititemmetadata.js index 5c80b8b5a0..fb17e2ef1d 100644 --- a/dashboard-ui/scripts/edititemmetadata.js +++ b/dashboard-ui/scripts/edititemmetadata.js @@ -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 { diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js index 5a117af34d..ec34647ccb 100644 --- a/dashboard-ui/scripts/itemdetailpage.js +++ b/dashboard-ui/scripts/itemdetailpage.js @@ -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('
'); + + $('.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 += ''; - tabsHtml += ''; - } - if (item.MediaSources && item.MediaSources.length && item.Path) { - tabsHtml += ''; - tabsHtml += ''; - } - - elem = $('.tabTags', page)[0]; - text = elem.textContent || elem.innerText; - - if (text.trim()) { - tabsHtml += ''; - tabsHtml += ''; - } - - if (tabsHtml) { - - tabsHtml = '
' + tabsHtml; - tabsHtml += '
'; - - $('.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) { diff --git a/dashboard-ui/scripts/itemlistpage.js b/dashboard-ui/scripts/itemlistpage.js index 4b47c91d69..7a46b75111 100644 --- a/dashboard-ui/scripts/itemlistpage.js +++ b/dashboard-ui/scripts/itemlistpage.js @@ -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; diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 8762ed6186..1f5f49cf22 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -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('    '); },