Make the search helper change based on the server config

3 files changed, 26 insertions, 12 deletions

diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index 561ee6c16..8e1d24ea8 100644
--- a/client/src/app/header/header.component.html
+++ b/client/src/app/header/header.component.html
@@ -1,7 +1,7 @@
 <my-search-typeahead class="w-100 d-flex justify-content-end">
   <input
     type="text" id="search-video" name="search-video" [attr.aria-label]="ariaLabelTextForSearch"
-    i18n-placeholder placeholder="Search videos, channels… known by this instance" [(ngModel)]="searchValue"
+    i18n-placeholder placeholder="Search videos, channels…" [(ngModel)]="searchValue"
   >
   <span class="icon icon-search"></span>
 </my-search-typeahead>
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index c2f5a1828..6d7511c70 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -1,4 +1,7 @@
 @import '_mixins';
+@import '_variables';
+@import '_bootstrap-variables';
+@import '~bootstrap/scss/mixins/_breakpoints';
 
 .jump-to-suggestions {
   top: 100%;
@@ -46,11 +49,11 @@ my-suggestions ::ng-deep ul {
     transition: box-shadow .3s ease, width .2s ease;
   }
 
-  @media screen and (min-width: 500px) {
+  @media screen and (min-width: $mobile-view) {
     margin-left: 10px;
   }
 
-  @media screen and (max-width: 800px) {
+  @media screen and (max-width: $small-view) {
     flex: 1;
 
     ::ng-deep input {
@@ -71,7 +74,7 @@ my-suggestions ::ng-deep ul {
   &:focus,
   ::ng-deep &:focus-within {
     & > div:last-child {
-      @media screen and (min-width: 500px) {
+      @media screen and (min-width: $mobile-view) {
         display: initial !important;
       }
       
@@ -87,7 +90,7 @@ my-suggestions ::ng-deep ul {
       border-end-start-radius: 0;
       border-end-end-radius: 0;
 
-      @media screen and (min-width: 900px) {
+      @include media-breakpoint-up(lg) {
         width: 500px;
       }
     }
diff --git a/client/src/app/header/search-typeahead.component.ts b/client/src/app/header/search-typeahead.component.ts
index 514c04704..9b414bc56 100644
--- a/client/src/app/header/search-typeahead.component.ts
+++ b/client/src/app/header/search-typeahead.component.ts
@@ -8,14 +8,15 @@ import {
   QueryList
 } from '@angular/core'
 import { Router, NavigationEnd, Params, ActivatedRoute } from '@angular/router'
-import { AuthService } from '@app/core'
+import { AuthService, ServerService } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { filter, first, tap, map } from 'rxjs/operators'
 import { ListKeyManager } from '@angular/cdk/a11y'
-import { UP_ARROW, DOWN_ARROW, ENTER, TAB } from '@angular/cdk/keycodes'
+import { UP_ARROW, DOWN_ARROW, ENTER } from '@angular/cdk/keycodes'
 import { SuggestionComponent, Result } from './suggestion.component'
 import { of } from 'rxjs'
 import { getParameterByName } from '@app/shared/misc/utils'
+import { ServerConfig } from '@shared/models'
 
 @Component({
   selector: 'my-search-typeahead',
@@ -30,7 +31,7 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
   newSearch = true
 
   searchInput: HTMLInputElement
-  URIPolicy: 'only-followed' | 'any' = 'any'
+  serverConfig: ServerConfig
 
   URIPolicyText: string
   inAllText: string
@@ -44,6 +45,7 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
     private authService: AuthService,
     private router: Router,
     private route: ActivatedRoute,
+    private serverService: ServerService,
     private i18n: I18n
   ) {
     this.URIPolicyText = this.i18n('Determines whether you can resolve any distant content, or if your instance only allows doing so for instances it follows.')
@@ -66,6 +68,9 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
         map(() => getParameterByName('search', window.location.href))
       )
       .subscribe(searchQuery => this.searchInput.value = searchQuery || '')
+
+    this.serverService.getConfig()
+      .subscribe(config => this.serverConfig = config)
   }
 
   ngOnDestroy () {
@@ -90,6 +95,16 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
     return this.hasSearch && this.newSearch && this.activeResult && this.activeResult.type === 'search-global' || false
   }
 
+  get URIPolicy (): 'only-followed' | 'any' {
+    return (
+      this.authService.isLoggedIn()
+        ? this.serverConfig.search.remoteUri.users
+        : this.serverConfig.search.remoteUri.anonymous
+    )
+      ? 'any'
+      : 'only-followed'
+  }
+
   computeResults () {
     this.newSearch = true
     let results: Result[] = []
@@ -151,10 +166,6 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
     )
   }
 
-  isUserLoggedIn () {
-    return this.authService.isLoggedIn()
-  }
-
   handleKeyUp (event: KeyboardEvent, indexSelected?: number) {
     event.stopImmediatePropagation()
     if (this.keyboardEventsManager) {