From 6d15c553274e6a8d75bab5effbc6135a52254367 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sat, 28 Dec 2013 11:58:13 -0500
Subject: [PATCH] allow custom language per item

---
 dashboard-ui/css/librarybrowser.css           |  2 +-
 dashboard-ui/css/mediaplayer.css              |  3 +
 dashboard-ui/css/metadataeditor.css           |  4 ++
 dashboard-ui/dashboard.html                   |  2 +-
 dashboard-ui/edititemmetadata.html            | 54 ++++++++++--------
 dashboard-ui/scripts/edititemmetadata.js      | 55 ++++++++++---------
 dashboard-ui/scripts/librarymenu.js           |  4 +-
 .../scripts/metadataconfigurationpage.js      | 36 +-----------
 dashboard-ui/scripts/site.js                  | 32 +++++++++++
 dashboard-ui/scripts/usersettings.js          | 20 +------
 dashboard-ui/scripts/wizardsettings.js        | 36 +-----------
 11 files changed, 110 insertions(+), 138 deletions(-)

diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index c6a7e9d457..0c50accc61 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -113,7 +113,7 @@
 
 .libraryViewNav {
     text-align: center;
-    background-image: linear-gradient(#333,#333);
+    background-image: linear-gradient(#404040,#222);
     border-bottom: 1px solid #111;
     border-top: 1px solid #000;
     font-family: sans-serif, Arial;
diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css
index d076afa904..4229fafcf5 100644
--- a/dashboard-ui/css/mediaplayer.css
+++ b/dashboard-ui/css/mediaplayer.css
@@ -59,6 +59,7 @@
     top: -3px;
     margin-left: 3px;
     margin-right: 2em;
+    font-weight: normal;
 }
 
 @media all and (min-width: 650px) {
@@ -100,6 +101,8 @@
     top: -10px;
     max-width: 110px;
     margin-right: 2em;
+    font-size: 14px;
+    font-weight: normal;
 }
 
 .mediaSlider {
diff --git a/dashboard-ui/css/metadataeditor.css b/dashboard-ui/css/metadataeditor.css
index 51ded46c33..503bff4c25 100644
--- a/dashboard-ui/css/metadataeditor.css
+++ b/dashboard-ui/css/metadataeditor.css
@@ -71,6 +71,10 @@
     height: 180px;
 }
 
+.editorfieldDescription {
+    color: #ccc;
+}
+
 /* Fixes button running outside of list */
 .btnRemoveFromEditorList .ui-btn-inner {
     padding-right: 0!important;
diff --git a/dashboard-ui/dashboard.html b/dashboard-ui/dashboard.html
index 21e09438c2..31516a3fd6 100644
--- a/dashboard-ui/dashboard.html
+++ b/dashboard-ui/dashboard.html
@@ -48,7 +48,7 @@
                         </div>
                         <p>Please restart the server to finish applying updates.</p>
                         <div class="btnRestartContainer hide">
-                            <button type="button" data-icon="refresh" data-theme="b" onclick="Dashboard.restartServer();">Restart Now</button>
+                            <button type="button" data-icon="refresh" data-theme="b" onclick="Dashboard.restartServer();" data-mini="true" data-inline="true">Restart Now</button>
                         </div>
                     </div>
 
diff --git a/dashboard-ui/edititemmetadata.html b/dashboard-ui/edititemmetadata.html
index 8c2480bdb8..2b4952da8d 100644
--- a/dashboard-ui/edititemmetadata.html
+++ b/dashboard-ui/edititemmetadata.html
@@ -31,7 +31,7 @@
                                 <div style="margin-top: -15px;"></div>
                             </div>
                             <div style="vertical-align: bottom; display: inline-block;">
-                                <button class="saveButtonContainer btnSave" type="submit" data-theme="b" data-icon="check" data-mini="true" data-inline="true">
+                                <button class="saveButtonContainer btnSave" type="submit" data-theme="a" data-icon="check" data-mini="true" data-inline="true">
                                     Save
                                 </button>
                             </div>
@@ -186,10 +186,6 @@
                                 <label for="txtOriginalAspectRatio">Original aspect ratio:</label>
                                 <input type="text" id="txtOriginalAspectRatio" name="txtOriginalAspectRatio" data-mini="true" />
                             </div>
-                            <div data-role="fieldcontain" style="display: none;">
-                                <label for="selectLanguage">Original language:</label>
-                                <select name="selectLanguage" id="selectLanguage" data-mini="true"></select>
-                            </div>
                             <div data-role="fieldcontain" id="fldPlayers" style="display: none;">
                                 <label for="txtPlayers">Players:</label>
                                 <input type="number" id="txtPlayers" name="txtPlayers" data-mini="true" pattern="[0-9]*" />
@@ -205,7 +201,8 @@
                                 </select>
                             </div>
                         </div>
-                        <div data-role="collapsible" data-mini="true" data-collapsed="false" id="collapsibleDvdEpisodeInfo" style="display: none;" data-content-theme="false">
+                        <br />
+                        <div data-role="collapsible" data-mini="true" data-collapsed="false" id="collapsibleDvdEpisodeInfo" style="display: none;">
                             <h3>Alternate Episode Numbers</h3>
                             <div>
                                 <div data-role="fieldcontain">
@@ -222,7 +219,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div data-role="collapsible" data-mini="true" data-collapsed="false" id="collapsibleSpecialEpisodeInfo" style="display: none;" data-content-theme="false">
+                        <div data-role="collapsible" data-mini="true" data-collapsed="false" id="collapsibleSpecialEpisodeInfo" style="display: none;">
                             <h3>Special Episode Info</h3>
                             <div>
                                 <div data-role="fieldcontain">
@@ -239,16 +236,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div data-role="collapsible" data-mini="true" data-collapsed="false" id="collapsibleSeriesDIsplaySettings" style="display: none;">
-                            <h3>Display Settings</h3>
-                            <div>
-                                <div data-role="fieldcontain">
-                                    <label for="chkDisplaySpecialsInline">Display specials within seasons they aired in.</label>
-                                    <input data-mini="true" type="checkbox" name="chkDisplaySpecialsInline" id="chkDisplaySpecialsInline" />
-                                </div>
-                            </div>
-                        </div>
-                        <div data-role="collapsible" data-mini="true" data-collapsed="false" data-content-theme="false">
+                        <div data-role="collapsible" data-mini="true" data-collapsed="false">
                             <h3>External Id's</h3>
                             <div>
                                 <p id="albumAssociationMessage" style="display: none;">Associate this album with a movie, tv series and/or game, and we'll be able to link it to other items in your library.</p>
@@ -336,7 +324,16 @@
                                 </div>
                             </div>
                         </div>
-                        <div data-role="collapsible" data-mini="true" id="genresCollapsible" style="display: none;" data-content-theme="false">
+                        <div data-role="collapsible" data-mini="true" id="collapsibleSeriesDIsplaySettings" style="display: none;">
+                            <h3>Display Settings</h3>
+                            <div>
+                                <div data-role="fieldcontain">
+                                    <label for="chkDisplaySpecialsInline">Display specials within seasons they aired in.</label>
+                                    <input data-mini="true" type="checkbox" name="chkDisplaySpecialsInline" id="chkDisplaySpecialsInline" />
+                                </div>
+                            </div>
+                        </div>
+                        <div data-role="collapsible" data-mini="true" id="genresCollapsible" style="display: none;">
                             <h3>Genres</h3>
                             <div data-role="editableListviewContainer">
                                 <div data-role="fieldcontain">
@@ -348,7 +345,7 @@
                                 <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listGenres"></ul>
                             </div>
                         </div>
-                        <div data-role="collapsible" data-mini="true" id="studiosCollapsible" style="display: none;" data-content-theme="false">
+                        <div data-role="collapsible" data-mini="true" id="studiosCollapsible" style="display: none;">
                             <h3>Studios</h3>
                             <div data-role="editableListviewContainer">
                                 <div data-role="fieldcontain">
@@ -360,7 +357,7 @@
                                 <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listStudios"></ul>
                             </div>
                         </div>
-                        <div data-mini="true" data-role="collapsible" id="tagsCollapsible" style="display: none;" data-content-theme="false">
+                        <div data-mini="true" data-role="collapsible" id="tagsCollapsible" style="display: none;">
                             <h3>Tags</h3>
                             <div data-role="editableListviewContainer">
                                 <div data-role="fieldcontain">
@@ -372,23 +369,36 @@
                                 <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listTags"></ul>
                             </div>
                         </div>
-                        <div data-role="collapsible" data-mini="true" id="metadataSettingsCollapsible" style="display: none;" data-collapsed="false" data-content-theme="false">
+                        <div data-role="collapsible" data-mini="true" id="metadataSettingsCollapsible" style="display: none;">
                             <h3>Metadata Settings</h3>
                             <div>
                                 <p>
                                     <label for="enableInternetProviders">Enable internet metadata providers for this item.</label>
                                     <input data-mini="true" type="checkbox" name="enableInternetProviders" id="enableInternetProviders" onchange="EditItemMetadataPage.setProviderSettingsContainerVisibility(this)" />
                                 </p>
+                                <div data-role="fieldcontain">
+                                    <label for="selectLanguage">Preferred language: </label>
+                                    <select name="selectLanguage" id="selectLanguage" data-mini="true"></select>
+                                </div>
+                                <div class="fieldDescription editorfieldDescription">Leave empty to inherit settings from a parent item, or the global default value.</div>
+                                <br />
+                                <div data-role="fieldcontain">
+                                    <label for="selectCountry">Country: </label>
+                                    <select name="selectCountry" id="selectCountry" data-mini="true"></select>
+                                </div>
+                                <div class="fieldDescription editorfieldDescription">Leave empty to inherit settings from a parent item, or the global default value.</div>
+                                <br />
                                 <p>
                                     Slide a field to 'off' to lock it and prevent it's data from being changed.
                                 </p>
+
                                 <div id="providerSettingsContainer" style="display: none">
                                 </div>
                             </div>
                         </div>
                         <ul data-role="listview" class="saveButtonContainer ulForm" style="display: none;">
                             <li>
-                                <button class="btnSave" type="submit" data-theme="b" data-icon="check" data-mini="true">
+                                <button class="btnSave" type="submit" data-theme="a" data-icon="check" data-mini="true">
                                     Save
                                 </button>
                             </li>
diff --git a/dashboard-ui/scripts/edititemmetadata.js b/dashboard-ui/scripts/edititemmetadata.js
index d7cd6bf18c..98b0f4b6d0 100644
--- a/dashboard-ui/scripts/edititemmetadata.js
+++ b/dashboard-ui/scripts/edititemmetadata.js
@@ -443,6 +443,14 @@
 
     var currentItem;
 
+    var languagesPromise;
+    var countriesPromise;
+
+    function ensureLanguagePromises() {
+        languagesPromise = languagesPromise || ApiClient.getCultures();
+        countriesPromise = countriesPromise || ApiClient.getCountries();
+    }
+
     function updateTabs(page, item) {
 
         var query = MetadataEditor.getEditQueryString(item);
@@ -455,7 +463,20 @@
 
         Dashboard.showLoadingMsg();
 
-        MetadataEditor.getItemPromise().done(function (item) {
+        ensureLanguagePromises();
+
+        var promise1 = MetadataEditor.getItemPromise();
+        var promise2 = languagesPromise;
+        var promise3 = countriesPromise;
+
+        $.when(promise1, promise2, promise3).done(function (response1, response2, response3) {
+
+            var item = response1[0];
+            var languages = response2[0];
+            var countries = response3[0];
+
+            Dashboard.populateLanguages($('#selectLanguage', page), languages);
+            Dashboard.populateCountries($('#selectCountry', page), countries);
 
             if (item.LocationType == "Offline") {
                 $('.saveButtonContainer', page).hide();
@@ -763,15 +784,6 @@
 
     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);
@@ -905,6 +917,9 @@
         $('#txtNesBoxName', page).val(providerIds.NesBox || "");
         $('#txtNesBoxRom', page).val(providerIds.NesBoxRom || "");
 
+        $('#selectLanguage', page).val(item.PreferredMetadataLanguage || "").selectmenu('refresh');
+        $('#selectCountry', page).val(item.PreferredMetadataCountryCode || "").selectmenu('refresh');
+
         if (item.RunTimeTicks) {
 
             var minutes = item.RunTimeTicks / 600000000;
@@ -957,22 +972,6 @@
         return sHours + ":" + sMinutes + " " + ampm;
     }
 
-    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 = "";
@@ -1135,7 +1134,6 @@
                 AspectRatio: $('#txtOriginalAspectRatio', form).val(),
                 Video3DFormat: $('#select3dFormat', form).val(),
 
-                Language: $('#selectLanguage', form).val(),
                 OfficialRating: $('#selectOfficialRating', form).val(),
                 CustomRating: $('#selectCustomRating', form).val(),
                 People: currentItem.People,
@@ -1161,6 +1159,9 @@
                 }
             };
 
+            item.PreferredMetadataLanguage = $('#selectLanguage', form).val();
+            item.PreferredMetadataCountryCode = $('#selectCountry', form).val();
+
             if (currentItem.Type == "Person") {
 
                 var placeOfBirth = $('#txtPlaceOfBirth', form).val();
diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js
index 70a68af44a..ee50d9632e 100644
--- a/dashboard-ui/scripts/librarymenu.js
+++ b/dashboard-ui/scripts/librarymenu.js
@@ -220,8 +220,10 @@
         for (i = 0, length = links.length; i < length; i++) {
 
             var link = links[i];
+
+            var href = selectedIndex == i ? '#' : link.href;
             
-            html += '<li><a class="libraryPanelLink" href="' + link.href + '">' + link.text + '</a></li>';
+            html += '<li><a class="libraryPanelLink" href="' + href + '">' + link.text + '</a></li>';
         }
 
         html += '</ul>';
diff --git a/dashboard-ui/scripts/metadataconfigurationpage.js b/dashboard-ui/scripts/metadataconfigurationpage.js
index ec9260a4a0..26f4478154 100644
--- a/dashboard-ui/scripts/metadataconfigurationpage.js
+++ b/dashboard-ui/scripts/metadataconfigurationpage.js
@@ -17,7 +17,7 @@
 
         ApiClient.getCultures().done(function (result) {
 
-            MetadataConfigurationPage.populateLanguages(result);
+            Dashboard.populateLanguages($('#selectLanguage', page), result);
 
             allCultures = result;
             MetadataConfigurationPage.load(page, config, allCultures, allCountries);
@@ -25,7 +25,7 @@
 
         ApiClient.getCountries().done(function (result) {
 
-            MetadataConfigurationPage.populateCountries(result);
+            Dashboard.populateCountries($('#selectCountry', page), result);
 
             allCountries = result;
             MetadataConfigurationPage.load(page, config, allCultures, allCountries);
@@ -46,38 +46,6 @@
         Dashboard.hideLoadingMsg();
     },
     
-    populateCountries: function (allCountries) {
-
-        var html = "";
-
-        html += "<option value=''></option>";
-
-        for (var i = 0, length = allCountries.length; i < length; i++) {
-
-            var culture = allCountries[i];
-
-            html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + "</option>";
-        }
-
-        $('#selectCountry', '#metadataConfigurationPage').html(html).selectmenu("refresh");
-    },
-
-    populateLanguages: function (allCultures) {
-        
-        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>";
-        }
-
-        $('#selectLanguage', '#metadataConfigurationPage').html(html).selectmenu("refresh");
-    },
-
     onSubmit: function () {
         var form = this;
 
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 0cae9ff11b..e6cce7a16a 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -1249,6 +1249,38 @@ var Dashboard = {
         html += "</div>";
 
         return html;
+    },
+    
+    populateLanguages: function(select, languages) {
+        
+        var html = "";
+
+        html += "<option value=''></option>";
+
+        for (var i = 0, length = languages.length; i < length; i++) {
+
+            var culture = languages[i];
+
+            html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + "</option>";
+        }
+
+        $(select).html(html).selectmenu("refresh");
+    },
+
+    populateCountries: function (select, allCountries) {
+
+        var html = "";
+
+        html += "<option value=''></option>";
+
+        for (var i = 0, length = allCountries.length; i < length; i++) {
+
+            var culture = allCountries[i];
+
+            html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + "</option>";
+        }
+
+        $(select).html(html).selectmenu("refresh");
     }
 };
 
diff --git a/dashboard-ui/scripts/usersettings.js b/dashboard-ui/scripts/usersettings.js
index f9f91ecc51..be20a3da53 100644
--- a/dashboard-ui/scripts/usersettings.js
+++ b/dashboard-ui/scripts/usersettings.js
@@ -1,29 +1,13 @@
 (function ($, window, document) {
 
-    function populateLanguages(select, allCultures) {
-
-        var html = "";
-
-        html += "<option value=''>None</option>";
-
-        for (var i = 0, length = allCultures.length; i < length; i++) {
-
-            var culture = allCultures[i];
-
-            html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + "</option>";
-        }
-
-        select.html(html).selectmenu("refresh");
-    }
-
     function loadUser(page, user, loggedInUser, allCulturesPromise) {
 
         Dashboard.setPageTitle(user.Name);
 
         allCulturesPromise.done(function (allCultures) {
 
-            populateLanguages($('#selectAudioLanguage', page), allCultures);
-            populateLanguages($('#selectSubtitleLanguage', page), allCultures);
+            Dashboard.populateLanguages($('#selectAudioLanguage', page), allCultures);
+            Dashboard.populateLanguages($('#selectSubtitleLanguage', page), allCultures);
 
             $('#selectAudioLanguage', page).val(user.Configuration.AudioLanguagePreference || "").selectmenu("refresh");
             $('#selectSubtitleLanguage', page).val(user.Configuration.SubtitleLanguagePreference || "").selectmenu("refresh");
diff --git a/dashboard-ui/scripts/wizardsettings.js b/dashboard-ui/scripts/wizardsettings.js
index 3095e63c2b..e7e19504a0 100644
--- a/dashboard-ui/scripts/wizardsettings.js
+++ b/dashboard-ui/scripts/wizardsettings.js
@@ -20,42 +20,10 @@
 
     }
 
-    function populateCountries(page, allCountries) {
-
-        var html = "";
-
-        html += "<option value=''></option>";
-
-        for (var i = 0, length = allCountries.length; i < length; i++) {
-
-            var culture = allCountries[i];
-
-            html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + "</option>";
-        }
-
-        $('#selectCountry', page).html(html).selectmenu("refresh");
-    }
-
-    function populateLanguages(page, allCultures) {
-
-        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>";
-        }
-
-        $('#selectLanguage', page).html(html).selectmenu("refresh");
-    }
-
     function reloadData(page, config, cultures, countries) {
 
-        populateLanguages(page, cultures);
-        populateCountries(page, countries);
+        Dashboard.populateLanguages($('#selectLanguage', page), cultures);
+        Dashboard.populateCountries($('#selectCountry', page), countries);
 
         $('#selectLanguage', page).val(config.PreferredMetadataLanguage).selectmenu("refresh");
         $('#selectCountry', page).val(config.MetadataCountryCode).selectmenu("refresh");