move desktop search

dashboard-ui/css/chromecast.css

@@ -21,18 +21,24 @@
     background-image: url(images/chromecast/ic_media_route_disabled_holo_dark.png);
 }
 
+.btnCast {
+    white-space: nowrap;
+}
+
 .headerSelectedPlayer {
     display: inline-block;
     vertical-align: middle;
     color: #ddd;
     font-size: 11px;
     margin-right: .5em;
-    height: 100%;
     position: relative;
-    top: -20px;
+    top: 1px;
+    max-width: 100px;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
-@media all and (max-width: 800px) {
+@media all and (max-width: 1000px) {
     .headerSelectedPlayer {
         display: none;
     }

dashboard-ui/css/search.css

@@ -168,7 +168,7 @@
     display: none;
 }
 
-@media all and (min-width: 1200px) {
+@media all and (min-width: 800px) {
 
     .viewMenuSearch {
         display: block;
@@ -181,10 +181,15 @@
 
 .searchResultsOverlay {
     position: fixed;
-    background: #000;
+    background: #222 !important;
     top: 50px;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 1001;
+    border: 0 !important;
+}
+
+.searchResultsContainer {
+    padding: 2em;
 }

dashboard-ui/scripts/librarymenu.js

@@ -16,10 +16,10 @@
 
         html += '<div class="libraryMenuButtonText headerButton"><span>MEDIA</span><span class="mediaBrowserAccent">BROWSER</span></div>';
 
-        //html += '<div class="viewMenuSearch">';
+        html += '<div class="viewMenuSearch">';
-        //html += '<input type="search" data-role="none" class="headerSearchInput" />';
+        html += '<input type="text" data-role="none" class="headerSearchInput" autocomplete="off" spellcheck="off" />';
-        //html += '<div class="searchInputIcon fa fa-search"></div>';
+        html += '<div class="searchInputIcon fa fa-search"></div>';
-        //html += '</div>';
+        html += '</div>';
 
         html += '<div class="viewMenuSecondary">';
 

dashboard-ui/scripts/search.js

@@ -291,15 +291,71 @@
             $('#txtSearch').focus();
         };
     }
-
     window.Search = new search();
 
-    function getSearchResultsPanel() {
+    function renderSearchResultsInOverlay(elem, hints) {
+
+        // Massage the objects to look like regular items
+        hints = hints.map(function (i) {
+
+            i.Id = i.ItemId;
+            i.ImageTags = {};
+            i.UserData = {};
+
+            if (i.PrimaryImageTag) {
+                i.ImageTags.Primary = i.PrimaryImageTag;
+            }
+            return i;
+        });
+
+        var html = LibraryBrowser.getPosterViewHtml({
+            items: hints,
+            shape: "square",
+            lazy: false,
+            overlayText: false,
+            showTitle: true
+        });
+        $('.itemsContainer', elem).html(html).trigger('create').createCardMenus();
+    }
+
+    function requestSearchHintsForOverlay(elem, searchTerm) {
+
+        var currentTimeout = searchHintTimeout;
+
+        ApiClient.getSearchHints({ userId: Dashboard.getCurrentUserId(), searchTerm: searchTerm, limit: 30 }).done(function (result) {
+
+            if (currentTimeout != searchHintTimeout) {
+                return;
+            }
+
+            renderSearchResultsInOverlay(elem, result.SearchHints);
+        });
+    }
+
+    function updateSearchOverlay(elem, searchTerm) {
+
+        if (!searchTerm) {
+
+            $('.itemsContainer', elem).empty();
+            clearSearchHintTimeout();
+            return;
+        }
+
+        clearSearchHintTimeout();
+
+        searchHintTimeout = setTimeout(function () {
+
+            requestSearchHintsForOverlay(elem, searchTerm);
+
+        }, 100);
+    }
+
+    function getSearchOverlay(createIfNeeded) {
 
         var elem = $('.searchResultsOverlay');
 
-        if (!elem.length) {
+        if (createIfNeeded && !elem.length) {
-            elem = $('<div class="searchResultsOverlay"></div>').appendTo(document.body).hide();
+            elem = $('<div class="searchResultsOverlay ui-page-theme-b"><div class="searchResultsContainer"><div class="itemsContainer"></div></div></div>').appendTo(document.body).hide();
         }
 
         return elem;
@@ -307,30 +363,32 @@
 
     function onHeaderSearchChange(val) {
 
-        var panel = getSearchResultsPanel();
-
         if (val) {
 
-            panel.fadeIn('fast');
+            updateSearchOverlay(getSearchOverlay(true).fadeIn('fast'), val);
 
         } else {
 
-            panel.fadeOut('fast');
+            updateSearchOverlay(getSearchOverlay(false).fadeOut('fast'), val);
-
         }
     }
 
-    $(document).on('pagehide', ".libraryPage", function () {
+    function bindSearchEvents() {
-
-        $('#txtSearch', this).val('');
-        $('#searchHints', this).empty();
-    });
-
-    $(document).on('headercreated', function () {
 
         $('.headerSearchInput').on("keyup", function (e) {
 
-            if (e.keyCode != 40) {
+            // Down key
+            if (e.keyCode == 40) {
+
+                //var first = $('.searchHint', panel)[0];
+
+                //if (first) {
+                //    first.focus();
+                //}
+
+                return false;
+
+            } else {
 
                 onHeaderSearchChange(this.value);
             }
@@ -343,7 +401,22 @@
             }
 
         });
+    }
 
+    $(document).on('pagehide', ".libraryPage", function () {
+
+        $('#txtSearch', this).val('');
+        $('#searchHints', this).empty();
+
+    }).on('pagecontainerbeforehide', function () {
+
+        $('.headerSearchInput').val('');
+        getSearchOverlay(false).hide();
+    });
+
+    $(document).on('headercreated', function () {
+
+        bindSearchEvents();
     });
 
 })(jQuery, document, window, clearTimeout, setTimeout);