Make the search helper change based on the server config

This commit is contained in:
Rigel Kent 2020-02-03 15:19:43 +01:00
parent 52cc0d5485
commit 9677fca772
No known key found for this signature in database
GPG Key ID: 5E53E96A494E452F
8 changed files with 62 additions and 12 deletions

View File

@ -47,6 +47,12 @@ export class ServerService {
css: '' css: ''
} }
}, },
search: {
remoteUri: {
users: true,
anonymous: false
}
},
plugin: { plugin: {
registered: [] registered: []
}, },

View File

@ -1,7 +1,7 @@
<my-search-typeahead class="w-100 d-flex justify-content-end"> <my-search-typeahead class="w-100 d-flex justify-content-end">
<input <input
type="text" id="search-video" name="search-video" [attr.aria-label]="ariaLabelTextForSearch" 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> <span class="icon icon-search"></span>
</my-search-typeahead> </my-search-typeahead>

View File

@ -1,4 +1,7 @@
@import '_mixins'; @import '_mixins';
@import '_variables';
@import '_bootstrap-variables';
@import '~bootstrap/scss/mixins/_breakpoints';
.jump-to-suggestions { .jump-to-suggestions {
top: 100%; top: 100%;
@ -46,11 +49,11 @@ my-suggestions ::ng-deep ul {
transition: box-shadow .3s ease, width .2s ease; transition: box-shadow .3s ease, width .2s ease;
} }
@media screen and (min-width: 500px) { @media screen and (min-width: $mobile-view) {
margin-left: 10px; margin-left: 10px;
} }
@media screen and (max-width: 800px) { @media screen and (max-width: $small-view) {
flex: 1; flex: 1;
::ng-deep input { ::ng-deep input {
@ -71,7 +74,7 @@ my-suggestions ::ng-deep ul {
&:focus, &:focus,
::ng-deep &:focus-within { ::ng-deep &:focus-within {
& > div:last-child { & > div:last-child {
@media screen and (min-width: 500px) { @media screen and (min-width: $mobile-view) {
display: initial !important; display: initial !important;
} }
@ -87,7 +90,7 @@ my-suggestions ::ng-deep ul {
border-end-start-radius: 0; border-end-start-radius: 0;
border-end-end-radius: 0; border-end-end-radius: 0;
@media screen and (min-width: 900px) { @include media-breakpoint-up(lg) {
width: 500px; width: 500px;
} }
} }

View File

@ -8,14 +8,15 @@ import {
QueryList QueryList
} from '@angular/core' } from '@angular/core'
import { Router, NavigationEnd, Params, ActivatedRoute } from '@angular/router' 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 { I18n } from '@ngx-translate/i18n-polyfill'
import { filter, first, tap, map } from 'rxjs/operators' import { filter, first, tap, map } from 'rxjs/operators'
import { ListKeyManager } from '@angular/cdk/a11y' 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 { SuggestionComponent, Result } from './suggestion.component'
import { of } from 'rxjs' import { of } from 'rxjs'
import { getParameterByName } from '@app/shared/misc/utils' import { getParameterByName } from '@app/shared/misc/utils'
import { ServerConfig } from '@shared/models'
@Component({ @Component({
selector: 'my-search-typeahead', selector: 'my-search-typeahead',
@ -30,7 +31,7 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
newSearch = true newSearch = true
searchInput: HTMLInputElement searchInput: HTMLInputElement
URIPolicy: 'only-followed' | 'any' = 'any' serverConfig: ServerConfig
URIPolicyText: string URIPolicyText: string
inAllText: string inAllText: string
@ -44,6 +45,7 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
private authService: AuthService, private authService: AuthService,
private router: Router, private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
private serverService: ServerService,
private i18n: I18n 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.') 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)) map(() => getParameterByName('search', window.location.href))
) )
.subscribe(searchQuery => this.searchInput.value = searchQuery || '') .subscribe(searchQuery => this.searchInput.value = searchQuery || '')
this.serverService.getConfig()
.subscribe(config => this.serverConfig = config)
} }
ngOnDestroy () { 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 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 () { computeResults () {
this.newSearch = true this.newSearch = true
let results: Result[] = [] let results: Result[] = []
@ -151,10 +166,6 @@ export class SearchTypeaheadComponent implements OnInit, OnDestroy, AfterViewIni
) )
} }
isUserLoggedIn () {
return this.authService.isLoggedIn()
}
handleKeyUp (event: KeyboardEvent, indexSelected?: number) { handleKeyUp (event: KeyboardEvent, indexSelected?: number) {
event.stopImmediatePropagation() event.stopImmediatePropagation()
if (this.keyboardEventsManager) { if (this.keyboardEventsManager) {

View File

@ -91,5 +91,16 @@
<my-feature-boolean [value]="serverConfig.tracker.enabled"></my-feature-boolean> <my-feature-boolean [value]="serverConfig.tracker.enabled"></my-feature-boolean>
</td> </td>
</tr> </tr>
<tr>
<td i18n class="label" colspan="2">Search</td>
</tr>
<tr>
<td i18n class="sub-label">Users can resolve distant content</td>
<td>
<my-feature-boolean [value]="serverConfig.search.remoteUri.users"></my-feature-boolean>
</td>
</tr>
</table> </table>
</div> </div>

View File

@ -73,6 +73,12 @@ async function getConfig (req: express.Request, res: express.Response) {
css: CONFIG.INSTANCE.CUSTOMIZATIONS.CSS css: CONFIG.INSTANCE.CUSTOMIZATIONS.CSS
} }
}, },
search: {
remoteUri: {
users: CONFIG.SEARCH.REMOTE_URI.USERS,
anonymous: CONFIG.SEARCH.REMOTE_URI.ANONYMOUS
}
},
plugin: { plugin: {
registered: getRegisteredPlugins() registered: getRegisteredPlugins()
}, },

View File

@ -235,6 +235,12 @@ async function generateNodeinfo (req: express.Request, res: express.Response) {
nodeName: CONFIG.INSTANCE.NAME, nodeName: CONFIG.INSTANCE.NAME,
nodeDescription: CONFIG.INSTANCE.SHORT_DESCRIPTION, nodeDescription: CONFIG.INSTANCE.SHORT_DESCRIPTION,
nodeConfig: { nodeConfig: {
search: {
remoteUri: {
users: CONFIG.SEARCH.REMOTE_URI.USERS,
anonymous: CONFIG.SEARCH.REMOTE_URI.ANONYMOUS
}
},
plugin: { plugin: {
registered: getRegisteredPlugins() registered: getRegisteredPlugins()
}, },

View File

@ -28,6 +28,13 @@ export interface ServerConfig {
} }
} }
search: {
remoteUri: {
users: boolean
anonymous: boolean
}
}
plugin: { plugin: {
registered: ServerConfigPlugin[] registered: ServerConfigPlugin[]
} }