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

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;

dashboard-ui/itemdetails.html

@@ -165,36 +165,7 @@
         <div data-role="content">
             <div class="detailPageContent">
 
-                <div id="detailsSection" class="detailSection hide">
+                <br />
-
-                    <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>
-
                 <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}

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 {

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('<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) {
+            $('.detailsSection', page).removeClass('hide');
-            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');
 
         } else {
-            $('#detailsSection', page).addClass('hide');
+            $('.detailsSection', page).addClass('hide');
-
-            $('.tabButtons', page).empty();
         }
-
-        //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) {

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;

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('    ');
         },