add options to identify function

dashboard-ui/about.html

@@ -16,12 +16,12 @@
                         <a href="supporterkey.html" data-role="button">${TabSupporterKey}</a>
                         <a href="about.html" data-role="button" class="ui-btn-active">${TabAbout}</a>
                     </div>
-                    <p>
+                    <div style="font-size:24px;">
-                        <img class="imgLogoIcon" src="css/images/mblogoicon.png" /><img class="imgLogoText" src="css/images/mblogotextblack.png" />
+                        <img class="imgLogoIcon" src="css/images/mblogoicon.png" /><span class="logoLibraryMenuButtonText">MEDIA</span><span class="logoLibraryMenuButtonText mediaBrowserAccent">BROWSER</span>
+                    </div>
                     <br />
                     <br />
-                        <span id="appVersionNumber">${VersionNumber}</span>
+                    <div id="appVersionNumber">${VersionNumber}</div>
-                    </p>
                     <br />
                     <div class="ui-bar-a" style="padding: 1em;">${HeaderCredits}</div>
                     <div style="padding: 0 .5em;">

dashboard-ui/css/card.css

@@ -82,7 +82,7 @@
     background: #fff;
 }
 
-.visualCardBox-b {
+.ui-page-theme-b .visualCardBox {
     background: rgb(51, 51, 51);
     border: 1px solid rgb(31, 31, 31);
     border-radius: 3px;
@@ -148,9 +148,6 @@
     width: 100%;
 }*/
 
-.cardFooter {
-}
-
 .cardContent .cardFooter {
     position: absolute;
     bottom: 0;

dashboard-ui/css/librarymenu.css

@@ -102,6 +102,11 @@
 .logoLibraryMenuButtonText {
     font-family: MBLogo;
     font-weight: 200;
+    color: #000;
+}
+
+.ui-page-theme-b .logoLibraryMenuButtonText, .ui-bar-b .logoLibraryMenuButtonText {
+    color: #fff;
 }
 
 .viewMenuBar {

dashboard-ui/css/site.css

@@ -203,11 +203,11 @@ pre, textarea.pre {
 
 .imgLogoIcon {
     height: 45px;
+    vertical-align: middle;
 }
 
-.imgLogoText {
+    .imgLogoIcon + span {
-    height: 45px;
+        margin-left: 10px;
-    margin-left: 5px;
     }
 
 .ui-popup-container {
@@ -446,10 +446,6 @@ h1 .imageLink {
         max-width: 600px;
     }
 
-    .imgLogoText {
-        height: 50px;
-    }
-
     .header {
         padding-top: 15px;
         padding-bottom: 15px;

dashboard-ui/edititemmetadata.html

@@ -389,11 +389,10 @@
             </div>
         </div>
         <div data-role="popup" class="popupIdentify popup" data-theme="a">
-            <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-delete ui-btn-icon-notext ui-btn-right">${ButtonClose}</a>
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px; position: relative;">
 
-                <button type="button" data-icon="search" data-mini="true" data-inline="true" data-iconpos="notext" style="position: absolute; top: 8px; left: 10px; margin: 0;" class="btnSearchAgain">${ButtonSearch}</button>
+                <button type="button" data-icon="back" data-mini="true" data-inline="true" data-iconpos="notext" style="position: absolute; top: 8px; left: 10px; margin: 0;" class="btnIdentifyBack">${ButtonSearch}</button>
 
                 <h3 class="identificationHeader">${HeaderIdentifyItem}</h3>
             </div>
@@ -430,6 +429,24 @@
 
                     <div class="identificationSearchResultList"></div>
                 </div>
+
+                <form class="identifyOptionsForm" style="max-width:initial;">
+
+                    <h1 style="margin-top:.25em;">${HeaderIdentificationResult}</h1>
+                    <div class="selectedSearchResult"></div>
+                    <h1>${HeaderOptions}</h1>
+                    <div>
+                        <label for="chkIdentifyReplaceImages">${OptionReplaceExistingImages}</label>
+                        <input id="chkIdentifyReplaceImages" type="checkbox" checked="checked" data-mini="true" />
+                    </div>
+                    <br />
+                    <button type="submit" data-theme="b" data-icon="check" data-mini="true">
+                        ${ButtonSubmit}
+                    </button>
+                    <button type="button" data-icon="delete" data-mini="true" onclick="$(this).parents('.popup').popup('close');">
+                        ${ButtonCancel}
+                    </button>
+                </form>
             </div>
 
         </div>
@@ -528,6 +545,7 @@
             $('.popupIdentifyForm').off('submit', EditItemMetadataPage.onIdentificationFormSubmitted).on('submit', EditItemMetadataPage.onIdentificationFormSubmitted);
             $('.popupEditPersonForm').off('submit', EditItemMetadataPage.onPersonInfoFormSubmit).on('submit', EditItemMetadataPage.onPersonInfoFormSubmit);
             $('.popupAdvancedRefreshForm').off('submit', EditItemMetadataPage.onRefreshFormSubmit).on('submit', EditItemMetadataPage.onRefreshFormSubmit);
+            $('.identifyOptionsForm').off('submit', EditItemMetadataPage.onIdentificationOptionsSubmit).on('submit', EditItemMetadataPage.onIdentificationOptionsSubmit);
         </script>
 
     </div>

dashboard-ui/scripts/edititemmetadata.js

@@ -1,6 +1,7 @@
 (function ($, document, window) {
 
     var currentItem;
+    var currentSearchResult;
     var metadataEditorInfo;
 
     function updateTabs(page, item) {
@@ -148,7 +149,7 @@
             var buttonId = "btnOpen1" + idInfo.Key;
             var formatString = idInfo.UrlFormatString || '';
 
-            html += '<div>';
+            html += '<div data-role="fieldcontain">';
             var idLabel = Globalize.translate('LabelDynamicExternalId').replace('{0}', idInfo.Name);
             html += '<label for="' + id + '">' + idLabel + '</label>';
 
@@ -1008,6 +1009,14 @@
             savePersonInfo(page);
             return false;
         };
+
+        self.onIdentificationOptionsSubmit = function () {
+
+            var page = $(this).parents('.page');
+
+            submitIdentficationResult(page);
+            return false;
+        };
     }
 
     window.EditItemMetadataPage = new editItemMetadataPage();
@@ -1058,7 +1067,8 @@
 
             $('.popupIdentifyForm', page).show();
             $('.identificationSearchResults', page).hide();
-            $('.btnSearchAgain', page).hide();
+            $('.identifyOptionsForm', page).hide();
+            $('.btnIdentifyBack', page).hide();
 
             $('.popupIdentify', page).popup('open');
         });
@@ -1131,18 +1141,9 @@
         return ApiClient.getUrl("Items/RemoteSearch/Image", { imageUrl: url, ProviderName: provider });
     }
 
-    function showIdentificationSearchResults(page, results) {
+    function getSearchResultHtml(result, index) {
-
-        $('.popupIdentifyForm', page).hide();
-        $('.identificationSearchResults', page).show();
-        $('.btnSearchAgain', page).show();
 
         var html = '';
-
-        for (var i = 0, length = results.length; i < length; i++) {
-
-            var result = results[i];
-
         var cssClass = "searchImageContainer remoteImageContainer";
 
         if (currentItem.Type == "Episode") {
@@ -1160,10 +1161,10 @@
         if (result.ImageUrl) {
             var displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName);
 
-                html += '<a href="#" class="searchImage" data-index="' + i + '" style="background-image:url(\'' + displayUrl + '\');">';
+            html += '<a href="#" class="searchImage" data-index="' + index + '" style="background-image:url(\'' + displayUrl + '\');">';
         } else {
 
-                html += '<a href="#" class="searchImage" data-index="' + i + '" style="background-image:url(\'css/images/items/list/remotesearch.png\');background-position: center center;">';
+            html += '<a href="#" class="searchImage" data-index="' + index + '" style="background-image:url(\'css/images/items/list/remotesearch.png\');background-position: center center;">';
         }
         html += '</a>';
 
@@ -1182,22 +1183,81 @@
         }
 
         html += '</div>';
+        return html;
+    }
+
+    function showIdentificationSearchResults(page, results) {
+
+        $('.popupIdentifyForm', page).hide();
+        $('.identificationSearchResults', page).show();
+        $('.identifyOptionsForm', page).hide();
+        $('.btnIdentifyBack', page).show();
+
+        var html = '';
+
+        for (var i = 0, length = results.length; i < length; i++) {
+
+            var result = results[i];
+
+            html += getSearchResultHtml(result, i);
         }
 
         var elem = $('.identificationSearchResultList', page).html(html).trigger('create');
 
         $('.searchImage', elem).on('click', function () {
 
-            Dashboard.showLoadingMsg();
-
             var index = parseInt(this.getAttribute('data-index'));
 
             var currentResult = results[index];
 
+            showIdentifyOptions(page, currentResult);
+        });
+    }
+
+    function showIdentifyOptions(page, identifyResult) {
+
+        $('.popupIdentifyForm', page).hide();
+        $('.identificationSearchResults', page).hide();
+        $('.identifyOptionsForm', page).show();
+        $('.btnIdentifyBack', page).show();
+        $('#chkIdentifyReplaceImages', page).checked(true).checkboxradio('refresh');
+
+        currentSearchResult = identifyResult;
+
+        var lines = [];
+        lines.push(identifyResult.Name);
+
+        if (identifyResult.ProductionYear) {
+            lines.push(identifyResult.ProductionYear);
+        }
+
+        if (identifyResult.GameSystem) {
+            lines.push(identifyResult.GameSystem);
+        }
+
+        var resultHtml = lines.join('<br/>');
+
+        if (identifyResult.ImageUrl) {
+            var displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName);
+
+            resultHtml = '<img src="' + displayUrl + '" style="max-height:160px;" /><br/>' + resultHtml;
+        }
+
+        $('.selectedSearchResult', page).html(resultHtml);
+    }
+
+    function submitIdentficationResult(page) {
+
+        Dashboard.showLoadingMsg();
+
+        var options = {
+            ReplaceAllImages: $('#chkIdentifyReplaceImages', page).checked()
+        };
+
         ApiClient.ajax({
             type: "POST",
-                url: ApiClient.getUrl("Items/RemoteSearch/Apply/" + currentItem.Id),
+            url: ApiClient.getUrl("Items/RemoteSearch/Apply/" + currentItem.Id, options),
-                data: JSON.stringify(currentResult),
+            data: JSON.stringify(currentSearchResult),
             contentType: "application/json"
 
         }).done(function () {
@@ -1208,7 +1268,6 @@
 
             reload(page);
         });
-        });
     }
 
     function performAdvancedRefresh(page) {
@@ -1279,11 +1338,20 @@
             showIdentificationForm(page);
         });
 
-        $('.btnSearchAgain', page).on('click', function () {
+        $('.btnIdentifyBack', page).on('click', function () {
+
+            if ($('.identifyOptionsForm', page).is(':visible')) {
+
+                $('.identifyOptionsForm', page).hide();
+
+                $('.identificationSearchResults', page).show();
+                $('.popupIdentifyForm', page).hide();
+            } else {
 
-            $('.popupIdentifyForm', page).show();
                 $('.identificationSearchResults', page).hide();
-            $('.btnSearchAgain', page).hide();
+                $('.popupIdentifyForm', page).show();
+                $(this).hide();
+            }
         });
 
         $('#btnDelete', this).on('click', function () {

dashboard-ui/scripts/librarybrowser.js

@@ -1250,7 +1250,7 @@
                 var cardboxCssClass = 'cardBox';
 
                 if (options.cardLayout) {
-                    cardboxCssClass += ' visualCardBox visualCardBox-b';
+                    cardboxCssClass += ' visualCardBox';
                 }
                 html += '<div class="' + cardboxCssClass + '">';
                 html += '<div class="cardScalable">';

dashboard-ui/scripts/selectserver.js

@@ -47,7 +47,7 @@
 
         html += "<div data-id='" + server.Id + "' data-connectserverid='" + (server.ConnectServerId || '') + "' class='" + cssClass + "'>";
 
-        html += '<div class="cardBox visualCardBox visualCardBox-b">';
+        html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable">';
 
         html += '<div class="cardPadder"></div>';
@@ -264,7 +264,7 @@
 
         html += "<div data-id='" + invite.Id + "' class='" + cssClass + "'>";
 
-        html += '<div class="cardBox visualCardBox visualCardBox-b">';
+        html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable">';
 
         html += '<div class="cardPadder"></div>';

dashboard-ui/scripts/site.js

@@ -640,11 +640,12 @@ var Dashboard = {
 
             headerHtml += '<div class="header">';
 
-            headerHtml += '<a class="logo" href="index.html">';
+            headerHtml += '<a class="logo" href="index.html" style="text-decoration:none;font-size: 22px;">';
 
             if (page.hasClass('standalonePage')) {
 
-                headerHtml += '<img class="imgLogoIcon" src="css/images/mblogoicon.png" /><img class="imgLogoText" src="css/images/mblogotextblack.png" />';
+                headerHtml += '<img class="imgLogoIcon" src="css/images/mblogoicon.png" />';
+                headerHtml += '<span class="logoLibraryMenuButtonText">MEDIA</span><span class="logoLibraryMenuButtonText mediaBrowserAccent">BROWSER</span>';
             }
 
             headerHtml += '</a>';

dashboard-ui/scripts/syncactivity.js

@@ -144,7 +144,6 @@
         var barCssClass = 'ui-bar-a';
 
         if ($(page).hasClass('libraryPage')) {
-            cardBoxCssClass += ' visualCardBox-b';
             barCssClass = 'detailSectionHeader';
         }