update search

dashboard-ui/scripts/searchpage.js

@@ -1,4 +1,4 @@
-define([], function () {
+define(['libraryBrowser', 'focusManager', 'emby-input', 'paper-icon-button-light', 'material-icons'], function (libraryBrowser, focusManager) {
 
     function loadSuggestions(page) {
 
@@ -29,13 +29,160 @@
         });
     }
 
-    pageIdOn('pageshow', "searchPage", function () {
+    return function (view, params) {
 
-        var page = this;
-        loadSuggestions(page);
+        var textSuggestions = view.querySelector('.textSuggestions');
+        var searchResults = view.querySelector('.searchResults');
+        var searchHintTimeout;
 
-        Search.showSearchPanel();
-    });
+        function clearSearchHintTimeout() {
 
+            if (searchHintTimeout) {
 
+                clearTimeout(searchHintTimeout);
+                searchHintTimeout = null;
+            }
+        }
+
+        function showTextSuggestions() {
+            if (AppInfo.enableAppLayouts) {
+                textSuggestions.classList.remove('hide');
+            }
+        }
+
+        function getAdditionalTextLines(hint) {
+
+            if (hint.Type == "Audio") {
+
+                return [[hint.AlbumArtist, hint.Album].join(" - ")];
+
+            }
+            else if (hint.Type == "MusicAlbum") {
+
+                return [hint.AlbumArtist];
+
+            }
+            else if (hint.Type == "MusicArtist") {
+
+                return [Globalize.translate('LabelArtist')];
+
+            }
+            else if (hint.Type == "Movie") {
+
+                return [Globalize.translate('LabelMovie')];
+
+            }
+            else if (hint.Type == "MusicVideo") {
+
+                return [Globalize.translate('LabelMusicVideo')];
+            }
+            else if (hint.Type == "Episode") {
+
+                return [Globalize.translate('LabelEpisode')];
+
+            }
+            else if (hint.Type == "Series") {
+
+                return [Globalize.translate('Series')];
+            }
+            else if (hint.Type == "BoxSet") {
+
+                return [Globalize.translate('LabelCollection')];
+            }
+            else if (hint.ChannelName) {
+
+                return [hint.ChannelName];
+            }
+
+            return [hint.Type];
+        }
+
+        function renderSearchResultsInOverlay(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: "auto",
+                lazy: true,
+                overlayText: false,
+                showTitle: true,
+                centerImage: true,
+                centerText: true,
+                textLines: getAdditionalTextLines,
+                overlayPlayButton: true
+            });
+
+            var itemsContainer = searchResults;
+            itemsContainer.innerHTML = html;
+            searchResults.classList.remove('hide');
+            textSuggestions.classList.add('hide');
+            ImageLoader.lazyChildren(itemsContainer);
+        }
+
+        function requestSearchHintsForOverlay(searchTerm) {
+
+            var currentTimeout = searchHintTimeout;
+            Dashboard.showLoadingMsg();
+
+            ApiClient.getSearchHints({
+
+                userId: Dashboard.getCurrentUserId(),
+                searchTerm: (searchTerm || '').trim(),
+                limit: 30
+
+            }).then(function (result) {
+
+                if (currentTimeout == searchHintTimeout) {
+                    renderSearchResultsInOverlay(result.SearchHints);
+                }
+
+                Dashboard.hideLoadingMsg();
+            }, function () {
+                Dashboard.hideLoadingMsg();
+            });
+        }
+
+        function onSearchChange(val) {
+
+            if (!val) {
+                clearSearchHintTimeout();
+                searchResults.classList.add('hide');
+                searchResults.innerHTML = '';
+                showTextSuggestions();
+                return;
+            }
+
+            clearSearchHintTimeout();
+
+            searchHintTimeout = setTimeout(function () {
+                requestSearchHintsForOverlay(val);
+            }, 300);
+        }
+
+        if (AppInfo.enableAppLayouts) {
+            showTextSuggestions();
+            loadSuggestions(view);
+        }
+
+        view.addEventListener('viewshow', function () {
+            focusManager.focus(view.querySelector('.txtSearch'));
+        });
+
+        view.querySelector('.txtSearch').addEventListener('input', function () {
+            onSearchChange(this.value);
+        });
+
+    };
 });