From f37dc0dd14d9ce0b59c454c2c1b935fcbe9727e9 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 23 Aug 2018 17:58:39 +0200 Subject: Add ability to search video channels --- client/src/app/search/search.component.html | 19 ++++++++++++- client/src/app/search/search.component.scss | 36 +++++++++++++++++++++++ client/src/app/search/search.component.ts | 26 ++++++++++++----- client/src/app/search/search.service.ts | 44 +++++++++++++++++------------ 4 files changed, 99 insertions(+), 26 deletions(-) (limited to 'client/src/app/search') diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html index bbc70f772..128cc52f5 100644 --- a/client/src/app/search/search.component.html +++ b/client/src/app/search/search.component.html @@ -22,10 +22,27 @@ -
+
No results found
+
+ + Avatar + + +
+ +
{{ videoChannel.displayName }}
+
{{ videoChannel.name }}
+ + +
{{ videoChannel.followersCount }} subscribers
+
+ + +
+
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss index e54a8b32a..be7dd39cf 100644 --- a/client/src/app/search/search.component.scss +++ b/client/src/app/search/search.component.scss @@ -103,6 +103,42 @@ } } } + + &.video-channel { + + img { + @include avatar(120px); + + margin: 0 50px 0 40px; + } + + .video-channel-info { + + + flex-grow: 1; + width: fit-content; + + .video-channel-names { + @include disable-default-a-behaviour; + + display: flex; + align-items: baseline; + color: #000; + width: fit-content; + + .video-channel-display-name { + font-weight: $font-semibold; + font-size: 18px; + } + + .video-channel-name { + font-size: 14px; + color: $grey-actor-name; + margin-left: 5px; + } + } + } + } } } diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts index 8d615fd05..f88df6391 100644 --- a/client/src/app/search/search.component.ts +++ b/client/src/app/search/search.component.ts @@ -2,13 +2,15 @@ import { Component, OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { RedirectService } from '@app/core' import { NotificationsService } from 'angular2-notifications' -import { Subscription } from 'rxjs' +import { forkJoin, 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' import { AdvancedSearch } from '@app/search/advanced-search.model' +import { VideoChannel } from '@app/shared/video-channel/video-channel.model' +import { immutableAssign } from '@app/shared/misc/utils' @Component({ selector: 'my-search', @@ -17,18 +19,22 @@ import { AdvancedSearch } from '@app/search/advanced-search.model' }) export class SearchComponent implements OnInit, OnDestroy { videos: Video[] = [] + videoChannels: VideoChannel[] = [] + pagination: ComponentPagination = { currentPage: 1, - itemsPerPage: 10, // It's per object type (so 10 videos, 10 video channels etc) + itemsPerPage: 10, // Only for videos, use another variable for channels totalItems: null } advancedSearch: AdvancedSearch = new AdvancedSearch() isSearchFilterCollapsed = true + currentSearch: string private subActivatedRoute: Subscription - private currentSearch: string private isInitialLoad = true + private channelsPerPage = 2 + constructor ( private i18n: I18n, private route: ActivatedRoute, @@ -74,17 +80,23 @@ export class SearchComponent implements OnInit, OnDestroy { } search () { - return this.searchService.searchVideos(this.currentSearch, this.pagination, this.advancedSearch) + forkJoin([ + this.searchService.searchVideos(this.currentSearch, this.pagination, this.advancedSearch), + this.searchService.searchVideoChannels(this.currentSearch, immutableAssign(this.pagination, { itemsPerPage: this.channelsPerPage })) + ]) .subscribe( - ({ videos, totalVideos }) => { - this.videos = this.videos.concat(videos) - this.pagination.totalItems = totalVideos + ([ videosResult, videoChannelsResult ]) => { + this.videos = this.videos.concat(videosResult.videos) + this.pagination.totalItems = videosResult.totalVideos + + this.videoChannels = videoChannelsResult.data }, error => { this.notificationsService.error(this.i18n('Error'), error.message) } ) + } onNearOfBottom () { diff --git a/client/src/app/search/search.service.ts b/client/src/app/search/search.service.ts index a37c49161..cd3bdad35 100644 --- a/client/src/app/search/search.service.ts +++ b/client/src/app/search/search.service.ts @@ -1,4 +1,4 @@ -import { catchError, switchMap } from 'rxjs/operators' +import { catchError, map, switchMap } from 'rxjs/operators' import { HttpClient, HttpParams } from '@angular/common/http' import { Injectable } from '@angular/core' import { Observable } from 'rxjs' @@ -6,13 +6,11 @@ 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' +import { ResultList, Video as VideoServerModel, VideoChannel as VideoChannelServerModel } from '../../../../shared' +import { Video } from '@app/shared/video/video.model' import { AdvancedSearch } from '@app/search/advanced-search.model' - -export type SearchResult = { - videosResult: { totalVideos: number, videos: Video[] } -} +import { VideoChannel } from '@app/shared/video-channel/video-channel.model' +import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' @Injectable() export class SearchService { @@ -40,17 +38,7 @@ export class SearchService { if (search) params = params.append('search', search) const advancedSearchObject = advancedSearch.toAPIObject() - - for (const name of Object.keys(advancedSearchObject)) { - const value = advancedSearchObject[name] - if (!value) continue - - if (Array.isArray(value) && value.length !== 0) { - for (const v of value) params = params.append(name, v) - } else { - params = params.append(name, value) - } - } + params = this.restService.addObjectParams(params, advancedSearchObject) return this.authHttp .get>(url, { params }) @@ -59,4 +47,24 @@ export class SearchService { catchError(err => this.restExtractor.handleError(err)) ) } + + searchVideoChannels ( + search: string, + componentPagination: ComponentPagination + ): Observable<{ data: VideoChannel[], total: number }> { + const url = SearchService.BASE_SEARCH_URL + 'video-channels' + + 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( + map(res => VideoChannelService.extractVideoChannels(res)), + catchError(err => this.restExtractor.handleError(err)) + ) + } } -- cgit v1.2.3