From 57c36b277e68b764dd34cb2e449f6e2ca3d1e9b6 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 19 Jul 2018 16:17:54 +0200 Subject: Begin advanced search --- client/src/app/app.module.ts | 2 + client/src/app/header/header.component.ts | 2 +- client/src/app/search/index.ts | 3 + client/src/app/search/search-routing.module.ts | 23 ++++++ client/src/app/search/search.component.html | 19 +++++ client/src/app/search/search.component.scss | 93 ++++++++++++++++++++++ client/src/app/search/search.component.ts | 93 ++++++++++++++++++++++ client/src/app/search/search.module.ts | 25 ++++++ client/src/app/search/search.service.ts | 46 +++++++++++ client/src/app/shared/shared.module.ts | 9 ++- .../shared/video/video-miniature.component.html | 2 +- .../shared/video/video-thumbnail.component.html | 2 +- client/src/app/shared/video/video.service.ts | 51 ++++-------- client/src/app/videos/video-list/index.ts | 2 +- .../videos/video-list/video-search.component.ts | 77 ------------------ client/src/app/videos/videos-routing.module.ts | 12 +-- client/src/app/videos/videos.module.ts | 4 +- 17 files changed, 332 insertions(+), 133 deletions(-) create mode 100644 client/src/app/search/index.ts create mode 100644 client/src/app/search/search-routing.module.ts create mode 100644 client/src/app/search/search.component.html create mode 100644 client/src/app/search/search.component.scss create mode 100644 client/src/app/search/search.component.ts create mode 100644 client/src/app/search/search.module.ts create mode 100644 client/src/app/search/search.service.ts delete mode 100644 client/src/app/videos/video-list/video-search.component.ts (limited to 'client') diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index 48886fd4e..9d655c523 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -18,6 +18,7 @@ import { VideosModule } from './videos' import { buildFileLocale, getCompleteLocale, isDefaultLocale } from '../../../shared/models/i18n' import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils' import { LanguageChooserComponent } from '@app/menu/language-chooser.component' +import { SearchModule } from '@app/search' export function metaFactory (serverService: ServerService): MetaLoader { return new MetaStaticLoader({ @@ -52,6 +53,7 @@ export function metaFactory (serverService: ServerService): MetaLoader { LoginModule, ResetPasswordModule, SignupModule, + SearchModule, SharedModule, VideosModule, diff --git a/client/src/app/header/header.component.ts b/client/src/app/header/header.component.ts index 0e999fbb1..f73d40947 100644 --- a/client/src/app/header/header.component.ts +++ b/client/src/app/header/header.component.ts @@ -24,7 +24,7 @@ export class HeaderComponent implements OnInit { } doSearch () { - this.router.navigate([ '/videos', 'search' ], { + this.router.navigate([ '/search' ], { queryParams: { search: this.searchValue } }) } diff --git a/client/src/app/search/index.ts b/client/src/app/search/index.ts new file mode 100644 index 000000000..40f4e021f --- /dev/null +++ b/client/src/app/search/index.ts @@ -0,0 +1,3 @@ +export * from './search-routing.module' +export * from './search.component' +export * from './search.module' diff --git a/client/src/app/search/search-routing.module.ts b/client/src/app/search/search-routing.module.ts new file mode 100644 index 000000000..0ac9e6b57 --- /dev/null +++ b/client/src/app/search/search-routing.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core' +import { RouterModule, Routes } from '@angular/router' +import { MetaGuard } from '@ngx-meta/core' +import { SearchComponent } from '@app/search/search.component' + +const searchRoutes: Routes = [ + { + path: 'search', + component: SearchComponent, + canActivate: [ MetaGuard ], + data: { + meta: { + title: 'Search' + } + } + } +] + +@NgModule({ + imports: [ RouterModule.forChild(searchRoutes) ], + exports: [ RouterModule ] +}) +export class SearchRoutingModule {} diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html new file mode 100644 index 000000000..b8c4d7dc5 --- /dev/null +++ b/client/src/app/search/search.component.html @@ -0,0 +1,19 @@ +
+ No results found +
+ +
+
+ {{ pagination.totalItems | myNumberFormatter }} results for {{ currentSearch }} +
+ +
+ + +
+ {{ video.name }} + {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views + +
+
+
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss new file mode 100644 index 000000000..06e3c9542 --- /dev/null +++ b/client/src/app/search/search.component.scss @@ -0,0 +1,93 @@ +@import '_variables'; +@import '_mixins'; + +.no-result { + height: 70vh; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + font-weight: $font-semibold; +} + +.search-result { + margin-left: 40px; + margin-top: 40px; + + .results-counter { + font-size: 15px; + padding-bottom: 20px; + margin-bottom: 30px; + border-bottom: 1px solid #DADADA; + + .search-value { + font-weight: $font-semibold; + } + } + + .entry { + display: flex; + min-height: 130px; + padding-bottom: 20px; + margin-bottom: 20px; + + &.video { + + my-video-thumbnail { + margin-right: 10px; + } + + .video-info { + flex-grow: 1; + + .video-info-name { + @include disable-default-a-behaviour; + + color: #000; + display: block; + width: fit-content; + font-size: 18px; + font-weight: $font-semibold; + } + + .video-info-date-views { + font-size: 14px; + } + + .video-info-account { + @include disable-default-a-behaviour; + + display: block; + width: fit-content; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + color: #585858; + + &:hover { + color: #303030; + } + } + } + } + } +} + +@media screen and (max-width: 800px) { + .entry { + flex-direction: column; + height: auto; + text-align: center; + + &.video { + .video-info-name { + margin: auto; + } + + my-video-thumbnail { + margin-right: 0; + } + } + } +} diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts new file mode 100644 index 000000000..be1cb3689 --- /dev/null +++ b/client/src/app/search/search.component.ts @@ -0,0 +1,93 @@ +import { Component, OnDestroy, OnInit } from '@angular/core' +import { ActivatedRoute } from '@angular/router' +import { RedirectService } from '@app/core' +import { NotificationsService } from 'angular2-notifications' +import { Subscription } from 'rxjs' +import { SearchService } from '@app/search/search.service' +import { ComponentPagination } from '@app/shared/rest/component-pagination.model' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { Video } from '../../../../shared' +import { MetaService } from '@ngx-meta/core' + +@Component({ + selector: 'my-search', + styleUrls: [ './search.component.scss' ], + templateUrl: './search.component.html' +}) +export class SearchComponent implements OnInit, OnDestroy { + videos: Video[] = [] + pagination: ComponentPagination = { + currentPage: 1, + itemsPerPage: 10, // It's per object type (so 10 videos, 10 video channels etc) + totalItems: null + } + + private subActivatedRoute: Subscription + private currentSearch: string + + constructor ( + private i18n: I18n, + private route: ActivatedRoute, + private metaService: MetaService, + private redirectService: RedirectService, + private notificationsService: NotificationsService, + private searchService: SearchService + ) { } + + ngOnInit () { + this.subActivatedRoute = this.route.queryParams.subscribe( + queryParams => { + const querySearch = queryParams['search'] + + if (!querySearch) return this.redirectService.redirectToHomepage() + if (querySearch === this.currentSearch) return + + this.currentSearch = querySearch + this.updateTitle() + + this.reload() + }, + + err => this.notificationsService.error('Error', err.text) + ) + } + + ngOnDestroy () { + if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe() + } + + search () { + return this.searchService.searchVideos(this.currentSearch, this.pagination) + .subscribe( + ({ videos, totalVideos }) => { + this.videos = this.videos.concat(videos) + this.pagination.totalItems = totalVideos + }, + + error => { + this.notificationsService.error(this.i18n('Error'), error.message) + } + ) + } + + onNearOfBottom () { + // Last page + if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return + + this.pagination.currentPage += 1 + this.search() + } + + private reload () { + this.pagination.currentPage = 1 + this.pagination.totalItems = null + + this.videos = [] + + this.search() + } + + private updateTitle () { + this.metaService.setTitle(this.i18n('Search') + ' ' + this.currentSearch) + } +} diff --git a/client/src/app/search/search.module.ts b/client/src/app/search/search.module.ts new file mode 100644 index 000000000..c6ec74d20 --- /dev/null +++ b/client/src/app/search/search.module.ts @@ -0,0 +1,25 @@ +import { NgModule } from '@angular/core' +import { SharedModule } from '../shared' +import { SearchComponent } from '@app/search/search.component' +import { SearchService } from '@app/search/search.service' +import { SearchRoutingModule } from '@app/search/search-routing.module' + +@NgModule({ + imports: [ + SearchRoutingModule, + SharedModule + ], + + declarations: [ + SearchComponent + ], + + exports: [ + SearchComponent + ], + + providers: [ + SearchService + ] +}) +export class SearchModule { } diff --git a/client/src/app/search/search.service.ts b/client/src/app/search/search.service.ts new file mode 100644 index 000000000..02d5f5915 --- /dev/null +++ b/client/src/app/search/search.service.ts @@ -0,0 +1,46 @@ +import { catchError, switchMap } from 'rxjs/operators' +import { HttpClient, HttpParams } from '@angular/common/http' +import { Injectable } from '@angular/core' +import { Observable } from 'rxjs' +import { ComponentPagination } from '@app/shared/rest/component-pagination.model' +import { VideoService } from '@app/shared/video/video.service' +import { RestExtractor, RestService } from '@app/shared' +import { environment } from 'environments/environment' +import { ResultList, Video } from '../../../../shared' +import { Video as VideoServerModel } from '@app/shared/video/video.model' + +export type SearchResult = { + videosResult: { totalVideos: number, videos: Video[] } +} + +@Injectable() +export class SearchService { + static BASE_SEARCH_URL = environment.apiUrl + '/api/v1/search/' + + constructor ( + private authHttp: HttpClient, + private restExtractor: RestExtractor, + private restService: RestService, + private videoService: VideoService + ) {} + + searchVideos ( + search: string, + componentPagination: ComponentPagination + ): Observable<{ videos: Video[], totalVideos: number }> { + const url = SearchService.BASE_SEARCH_URL + 'videos' + + const pagination = this.restService.componentPaginationToRestPagination(componentPagination) + + let params = new HttpParams() + params = this.restService.addRestGetParams(params, pagination) + params = params.append('search', search) + + return this.authHttp + .get>(url, { params }) + .pipe( + switchMap(res => this.videoService.extractVideos(res)), + catchError(err => this.restExtractor.handleError(err)) + ) + } +} diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index fdfb90600..99df61cdb 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -37,9 +37,14 @@ import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' import { CustomConfigValidatorsService, - LoginValidatorsService, ReactiveFileComponent, + LoginValidatorsService, + ReactiveFileComponent, ResetPasswordValidatorsService, - UserValidatorsService, VideoAbuseValidatorsService, VideoChannelValidatorsService, VideoCommentValidatorsService, VideoValidatorsService + UserValidatorsService, + VideoAbuseValidatorsService, + VideoChannelValidatorsService, + VideoCommentValidatorsService, + VideoValidatorsService } from '@app/shared/forms' import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar' import { ScreenService } from '@app/shared/misc/screen.service' diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html index 20020e2a8..3010e5ccc 100644 --- a/client/src/app/shared/video/video-miniature.component.html +++ b/client/src/app/shared/video/video-miniature.component.html @@ -3,7 +3,7 @@
{{ video.name }} diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html index 971f352ba..4909cf3f1 100644 --- a/client/src/app/shared/video/video-thumbnail.component.html +++ b/client/src/app/shared/video/video-thumbnail.component.html @@ -2,7 +2,7 @@ [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name" class="video-thumbnail" > - +
{{ video.durationLabel }} diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts index b4c1f10f9..f316d31ea 100644 --- a/client/src/app/shared/video/video.service.ts +++ b/client/src/app/shared/video/video.service.ts @@ -231,27 +231,6 @@ export class VideoService { return this.buildBaseFeedUrls(params) } - searchVideos ( - search: string, - videoPagination: ComponentPagination, - sort: VideoSortField - ): Observable<{ videos: Video[], totalVideos: number }> { - const url = VideoService.BASE_VIDEO_URL + 'search' - - const pagination = this.restService.componentPaginationToRestPagination(videoPagination) - - let params = new HttpParams() - params = this.restService.addRestGetParams(params, pagination, sort) - params = params.append('search', search) - - return this.authHttp - .get>(url, { params }) - .pipe( - switchMap(res => this.extractVideos(res)), - catchError(err => this.restExtractor.handleError(err)) - ) - } - removeVideo (id: number) { return this.authHttp .delete(VideoService.BASE_VIDEO_URL + id) @@ -289,21 +268,7 @@ export class VideoService { .pipe(catchError(err => this.restExtractor.handleError(err))) } - private setVideoRate (id: number, rateType: VideoRateType) { - const url = VideoService.BASE_VIDEO_URL + id + '/rate' - const body: UserVideoRateUpdate = { - rating: rateType - } - - return this.authHttp - .put(url, body) - .pipe( - map(this.restExtractor.extractDataBool), - catchError(err => this.restExtractor.handleError(err)) - ) - } - - private extractVideos (result: ResultList) { + extractVideos (result: ResultList) { return this.serverService.localeObservable .pipe( map(translations => { @@ -319,4 +284,18 @@ export class VideoService { }) ) } + + private setVideoRate (id: number, rateType: VideoRateType) { + const url = VideoService.BASE_VIDEO_URL + id + '/rate' + const body: UserVideoRateUpdate = { + rating: rateType + } + + return this.authHttp + .put(url, body) + .pipe( + map(this.restExtractor.extractDataBool), + catchError(err => this.restExtractor.handleError(err)) + ) + } } diff --git a/client/src/app/videos/video-list/index.ts b/client/src/app/videos/video-list/index.ts index 5e7c7886c..5f7c8bd48 100644 --- a/client/src/app/videos/video-list/index.ts +++ b/client/src/app/videos/video-list/index.ts @@ -1,3 +1,3 @@ +export * from './video-local.component' export * from './video-recently-added.component' export * from './video-trending.component' -export * from './video-search.component' diff --git a/client/src/app/videos/video-list/video-search.component.ts b/client/src/app/videos/video-list/video-search.component.ts deleted file mode 100644 index 33ed3f00e..000000000 --- a/client/src/app/videos/video-list/video-search.component.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { Component, OnDestroy, OnInit } from '@angular/core' -import { ActivatedRoute, Router } from '@angular/router' -import { Location } from '@angular/common' -import { RedirectService } from '@app/core' -import { immutableAssign } from '@app/shared/misc/utils' -import { NotificationsService } from 'angular2-notifications' -import { Subscription } from 'rxjs' -import { AuthService } from '../../core/auth' -import { AbstractVideoList } from '../../shared/video/abstract-video-list' -import { VideoService } from '../../shared/video/video.service' -import { I18n } from '@ngx-translate/i18n-polyfill' -import { ScreenService } from '@app/shared/misc/screen.service' - -@Component({ - selector: 'my-videos-search', - styleUrls: [ '../../shared/video/abstract-video-list.scss' ], - templateUrl: '../../shared/video/abstract-video-list.html' -}) -export class VideoSearchComponent extends AbstractVideoList implements OnInit, OnDestroy { - titlePage: string - currentRoute = '/videos/search' - loadOnInit = false - - protected otherRouteParams = { - search: '' - } - private subActivatedRoute: Subscription - - constructor ( - protected router: Router, - protected route: ActivatedRoute, - protected notificationsService: NotificationsService, - protected authService: AuthService, - protected location: Location, - protected i18n: I18n, - protected screenService: ScreenService, - private videoService: VideoService, - private redirectService: RedirectService - ) { - super() - - this.titlePage = i18n('Search') - } - - ngOnInit () { - super.ngOnInit() - - this.subActivatedRoute = this.route.queryParams.subscribe( - queryParams => { - const querySearch = queryParams['search'] - - if (!querySearch) return this.redirectService.redirectToHomepage() - if (this.otherRouteParams.search === querySearch) return - - this.otherRouteParams.search = querySearch - this.reloadVideos() - }, - - err => this.notificationsService.error('Error', err.text) - ) - } - - ngOnDestroy () { - super.ngOnDestroy() - - if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe() - } - - getVideosObservable (page: number) { - const newPagination = immutableAssign(this.pagination, { currentPage: page }) - return this.videoService.searchVideos(this.otherRouteParams.search, newPagination, this.sort) - } - - generateSyndicationList () { - throw new Error('Search does not support syndication.') - } -} diff --git a/client/src/app/videos/videos-routing.module.ts b/client/src/app/videos/videos-routing.module.ts index da786c0f9..538a43c6d 100644 --- a/client/src/app/videos/videos-routing.module.ts +++ b/client/src/app/videos/videos-routing.module.ts @@ -1,8 +1,7 @@ import { NgModule } from '@angular/core' -import { RouterModule, Routes, UrlSegment } from '@angular/router' +import { RouterModule, Routes } from '@angular/router' import { VideoLocalComponent } from '@app/videos/video-list/video-local.component' import { MetaGuard } from '@ngx-meta/core' -import { VideoSearchComponent } from './video-list' import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component' import { VideoTrendingComponent } from './video-list/video-trending.component' import { VideosComponent } from './videos.component' @@ -45,15 +44,6 @@ const videosRoutes: Routes = [ } } }, - { - path: 'search', - component: VideoSearchComponent, - data: { - meta: { - title: 'Search videos' - } - } - }, { path: 'upload', loadChildren: 'app/videos/+video-edit/video-add.module#VideoAddModule', diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts index 7c3d457b3..c38257e08 100644 --- a/client/src/app/videos/videos.module.ts +++ b/client/src/app/videos/videos.module.ts @@ -1,7 +1,6 @@ import { NgModule } from '@angular/core' import { VideoLocalComponent } from '@app/videos/video-list/video-local.component' import { SharedModule } from '../shared' -import { VideoSearchComponent } from './video-list' import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component' import { VideoTrendingComponent } from './video-list/video-trending.component' import { VideosRoutingModule } from './videos-routing.module' @@ -18,8 +17,7 @@ import { VideosComponent } from './videos.component' VideoTrendingComponent, VideoRecentlyAddedComponent, - VideoLocalComponent, - VideoSearchComponent + VideoLocalComponent ], exports: [ -- cgit v1.2.3