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 --- .../my-account-subscriptions.component.scss | 7 ---- .../my-account-subscriptions.component.ts | 2 +- .../my-account-video-channels.component.scss | 4 ++ 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 +++++++++++--------- client/src/app/shared/rest/rest.service.ts | 15 +++++++ .../subscribe-button.component.html | 4 +- .../subscribe-button.component.scss | 16 +++++++- .../subscribe-button.component.ts | 3 +- .../user-subscription/user-subscription.service.ts | 47 +++++++++++++++------- .../videos/+video-watch/video-watch.component.html | 2 +- .../videos/+video-watch/video-watch.component.scss | 4 -- 14 files changed, 171 insertions(+), 58 deletions(-) (limited to 'client') diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss index 2fbfa335b..8cb0b677d 100644 --- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss +++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss @@ -37,13 +37,6 @@ .actor-owner { @include actor-owner; } - - my-subscribe-button { - /deep/ span[role=button] { - padding: 7px 12px; - font-size: 16px; - } - } } diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts index 1e94cf90b..9434b196f 100644 --- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts +++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts @@ -21,7 +21,7 @@ export class MyAccountSubscriptionsComponent implements OnInit { ngOnInit () { this.userSubscriptionService.listSubscriptions() .subscribe( - res => { console.log(res); this.videoChannels = res.data }, + res => this.videoChannels = res.data, error => this.notificationsService.error(this.i18n('Error'), error.message) ) diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss index 5c892be01..83d657f03 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss @@ -41,6 +41,10 @@ color: $grey-actor-name; margin-left: 5px; } + + .video-channel-followers { + + } } } 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)) + ) + } } diff --git a/client/src/app/shared/rest/rest.service.ts b/client/src/app/shared/rest/rest.service.ts index 5d5410de9..4560c2024 100644 --- a/client/src/app/shared/rest/rest.service.ts +++ b/client/src/app/shared/rest/rest.service.ts @@ -32,6 +32,21 @@ export class RestService { return newParams } + addObjectParams (params: HttpParams, object: object) { + for (const name of Object.keys(object)) { + const value = object[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) + } + } + + return params + } + componentPaginationToRestPagination (componentPagination: ComponentPagination): RestPagination { const start: number = (componentPagination.currentPage - 1) * componentPagination.itemsPerPage const count: number = componentPagination.itemsPerPage diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.html b/client/src/app/shared/user-subscription/subscribe-button.component.html index 63b313662..34c024c17 100644 --- a/client/src/app/shared/user-subscription/subscribe-button.component.html +++ b/client/src/app/shared/user-subscription/subscribe-button.component.html @@ -1,11 +1,11 @@ -
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index 5bf2f485a..6b18dc88a 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -127,10 +127,6 @@ } my-subscribe-button { - /deep/ span[role=button] { - font-size: 13px !important; - } - margin-left: 5px; } } -- cgit v1.2.3