fixes #2172 - Search needs improvment

dashboard-ui/bower_components/emby-webcomponents/search/searchfields.css

@@ -0,0 +1 @@
+.searchFieldsInner{max-width:60em;margin:0 auto}.searchfields-icon{margin-top:.5em;margin-right:.5em;font-size:2em}

dashboard-ui/bower_components/emby-webcomponents/search/searchfields.js

@@ -0,0 +1 @@
+define(["layoutManager","globalize","require","events","browser","alphaPicker","emby-input","flexStyles","material-icons","css!./searchfields"],function(layoutManager,globalize,require,events,browser,AlphaPicker){"use strict";function onSearchTimeout(){var instance=this,value=instance.nextSearchValue;value=(value||"").trim(),events.trigger(instance,"search",[value])}function triggerSearch(instance,value){instance.searchTimeout&&clearTimeout(instance.searchTimeout),instance.nextSearchValue=value,instance.searchTimeout=setTimeout(onSearchTimeout.bind(instance),300)}function onAlphaValueClicked(e){var value=e.detail.value,searchFieldsInstance=this,txtSearch=searchFieldsInstance.options.element.querySelector(".searchfields-txtSearch");if("backspace"===value){var val=txtSearch.value;txtSearch.value=val.length?val.substring(0,val.length-1):""}else txtSearch.value+=value;txtSearch.dispatchEvent(new CustomEvent("input",{bubbles:!0}))}function initAlphaPicker(alphaPickerElement,instance){instance.alphaPicker=new AlphaPicker({element:alphaPickerElement,mode:"keyboard"}),alphaPickerElement.addEventListener("alphavalueclicked",onAlphaValueClicked.bind(instance))}function onSearchInput(e){var value=e.target.value,searchFieldsInstance=this;triggerSearch(searchFieldsInstance,value)}function embed(elem,instance,options){require(["text!./searchfields.template.html"],function(template){var html=globalize.translateDocument(template,"sharedcomponents");elem.innerHTML=html,elem.classList.add("searchFields");var txtSearch=elem.querySelector(".searchfields-txtSearch");if(layoutManager.tv){var alphaPickerElement=elem.querySelector(".alphaPicker");elem.querySelector(".alphaPicker").classList.remove("hide"),initAlphaPicker(alphaPickerElement,instance)}(browser.tizen||browser.orsay)&&(txtSearch.readOnly=!0),txtSearch.addEventListener("input",onSearchInput.bind(instance))})}function SearchFields(options){this.options=options,embed(options.element,this,options)}return SearchFields.prototype.focus=function(){this.options.element.querySelector(".searchfields-txtSearch").focus()},SearchFields.prototype.destroy=function(){var options=this.options;options&&options.element.classList.remove("searchFields"),this.options=null;var alphaPicker=this.alphaPicker;alphaPicker&&alphaPicker.destroy(),this.alphaPicker=null;var searchTimeout=this.searchTimeout;searchTimeout&&clearTimeout(searchTimeout),this.searchTimeout=null,this.nextSearchValue=null},SearchFields});

dashboard-ui/bower_components/emby-webcomponents/search/searchfields.template.html

@@ -0,0 +1,7 @@
+<div class="searchFieldsInner flex align-items-center justify-content-center">
+    <i class="searchfields-icon md-icon">&#xE8B6;</i>
+    <div class="inputContainer flex-grow" style="margin-bottom: 0;">
+        <input is="emby-input" class="searchfields-txtSearch" type="text" data-keyboard="false" placeholder="${Search}" autocomplete="off" autofocus />
+    </div>
+</div>
+<div class="alphaPicker align-items-center hide"></div>

dashboard-ui/bower_components/emby-webcomponents/search/searchresults.js

@@ -0,0 +1 @@
+define(["layoutManager","globalize","require","events","connectionManager","cardBuilder","embyRouter","emby-scroller","emby-itemscontainer"],function(layoutManager,globalize,require,events,connectionManager,cardBuilder,embyRouter){"use strict";function loadSuggestions(instance,context,apiClient){var options={SortBy:"IsFavoriteOrLiked,Random",IncludeItemTypes:"Movie,Series,MusicArtist",Limit:20,Recursive:!0,ImageTypeLimit:0,EnableImages:!1,ParentId:instance.options.parentId};apiClient.getItems(apiClient.getCurrentUserId(),options).then(function(result){var html=result.Items.map(function(i){var href=embyRouter.getRouteUrl(i),itemHtml='<div><a style="display:inline-block;padding:.55em 1em;" href="'+href+'">';return itemHtml+=i.Name,itemHtml+="</a></div>"}).join(""),searchSuggestions=context.querySelector(".searchSuggestions");searchSuggestions.querySelector(".searchSuggestionsList").innerHTML=html,searchSuggestions.classList.remove("hide")})}function getSearchHints(apiClient,query){return query.searchTerm?apiClient.getSearchHints(query):Promise.resolve({SearchHints:[]})}function search(instance,apiClient,context,value){value||layoutManager.tv?context.querySelector(".searchSuggestions").classList.add("hide"):loadSuggestions(instance,context,apiClient),searchType(instance,apiClient,{searchTerm:value,IncludePeople:!1,IncludeMedia:!0,IncludeGenres:!1,IncludeStudios:!1,IncludeArtists:!1,IncludeItemTypes:"Movie"},context,".movieResults"),searchType(instance,apiClient,{searchTerm:value,IncludePeople:!1,IncludeMedia:!0,IncludeGenres:!1,IncludeStudios:!1,IncludeArtists:!1,IncludeItemTypes:"LiveTvProgram"},context,".programResults",{showTitle:!0,showParentTitle:!0,overlayText:!1,centerText:!0}),searchType(instance,apiClient,{searchTerm:value,IncludePeople:!1,IncludeMedia:!0,IncludeGenres:!1,IncludeStudios:!1,IncludeArtists:!1,IncludeItemTypes:"Series"},context,".seriesResults"),searchType(instance,apiClient,{searchTerm:value,IncludePeople:!1,IncludeMedia:!0,IncludeGenres:!1,IncludeStudios:!1,IncludeArtists:!1,IncludeItemTypes:"Episode"},context,".episodeResults",{coverImage:!0,showTitle:!0,showParentTitle:!0}),searchType(instance,apiClient,{searchTerm:value,IncludePeople:!0,IncludeMedia:!1,IncludeGenres:!1,IncludeStudios:!1,IncludeArtists:!1},context,".peopleResults",{coverImage:!0,showTitle:!0}),searchType(instance,apiClient,{searchTerm:value,IncludePeople:!1,IncludeMedia:!1,IncludeGenres:!1,IncludeStudios:!1,IncludeArtists:!0},context,".artistResults",{coverImage:!0,showTitle:!0}),searchType(instance,apiClient,{searchTerm:value,IncludePeople:!1,IncludeMedia:!0,IncludeGenres:!1,IncludeStudios:!1,IncludeArtists:!1,IncludeItemTypes:"MusicAlbum"},context,".albumResults"),searchType(instance,apiClient,{searchTerm:value,IncludePeople:!1,IncludeMedia:!0,IncludeGenres:!1,IncludeStudios:!1,IncludeArtists:!1,IncludeItemTypes:"Audio"},context,".songResults",{action:"play"}),searchType(instance,apiClient,{searchTerm:value,IncludePeople:!1,IncludeMedia:!0,IncludeGenres:!1,IncludeStudios:!1,IncludeArtists:!1,IncludeItemTypes:"Book"},context,".bookResults"),searchType(instance,apiClient,{searchTerm:value,IncludePeople:!1,IncludeMedia:!0,IncludeGenres:!1,IncludeStudios:!1,IncludeArtists:!1,IncludeItemTypes:"AudioBook"},context,".audioBookResults")}function searchType(instance,apiClient,query,context,section,cardOptions){query.UserId=apiClient.getCurrentUserId(),query.Limit=24,query.ParentId=instance.options.parentId,getSearchHints(apiClient,query).then(function(result){populateResults(result,context,section,cardOptions)})}function populateResults(result,context,section,cardOptions){section=context.querySelector(section);var items=result.SearchHints,itemsContainer=section.querySelector(".itemsContainer");cardBuilder.buildCards(items,Object.assign({itemsContainer:itemsContainer,parentContainer:section,shape:"autooverflow",scalable:!0,overlayText:!0,widths:{portrait:340,thumb:500,square:340}},cardOptions||{})),section.querySelector(".emby-scroller").scrollToBeginning(!0)}function embed(elem,instance,options){require(["text!./searchresults.template.html"],function(template){var html=globalize.translateDocument(template,"sharedcomponents");elem.innerHTML=html,elem.classList.add("searchResults"),instance.search("")})}function SearchResults(options){this.options=options,embed(options.element,this,options)}return SearchResults.prototype.search=function(value){var apiClient=connectionManager.getApiClient(this.options.serverId);search(this,apiClient,this.options.element,value)},SearchResults.prototype.destroy=function(){var options=this.options;options&&options.element.classList.remove("searchFields"),this.options=null},SearchResults});

dashboard-ui/bower_components/emby-webcomponents/search/searchresults.template.html

@@ -0,0 +1,110 @@
+<div class="hide verticalSection searchSuggestions padded-top" style="text-align:center;">
+
+    <div>
+        <h2 class="sectionTitle padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Suggestions}</h2>
+    </div>
+
+    <div class="searchSuggestionsList padded-left padded-right padded-top">
+
+    </div>
+</div>
+
+<div class="hide verticalSection movieResults">
+    <div>
+        <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Movies}</h2>
+    </div>
+
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+    </div>
+</div>
+
+<div class="hide verticalSection programResults">
+    <div>
+        <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Programs}</h2>
+    </div>
+
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+    </div>
+</div>
+
+<div class="hide verticalSection seriesResults">
+    <div>
+        <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Shows}</h2>
+    </div>
+
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+    </div>
+</div>
+
+<div class="hide verticalSection episodeResults">
+    <div>
+        <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Episodes}</h2>
+    </div>
+
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+    </div>
+</div>
+
+<div class="hide verticalSection peopleResults">
+    <div>
+        <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${People}</h2>
+    </div>
+
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+    </div>
+</div>
+
+<div class="hide verticalSection artistResults">
+    <div>
+        <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Artists}</h2>
+    </div>
+
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+    </div>
+</div>
+
+<div class="hide verticalSection albumResults">
+    <div>
+        <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Albums}</h2>
+    </div>
+
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+    </div>
+</div>
+
+<div class="hide verticalSection songResults">
+    <div>
+        <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Songs}</h2>
+    </div>
+
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+    </div>
+</div>
+
+<div class="hide verticalSection audioBookResults">
+    <div>
+        <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${HeaderAudioBooks}</h2>
+    </div>
+
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+    </div>
+</div>
+
+<div class="hide verticalSection bookResults">
+    <div>
+        <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Books}</h2>
+    </div>
+
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+    </div>
+</div>