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/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 +++++++++++++++------- 5 files changed, 66 insertions(+), 19 deletions(-) (limited to 'client/src/app/shared') 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 @@ - + - + Subscribed Unsubscribe diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.scss b/client/src/app/shared/user-subscription/subscribe-button.component.scss index 9811fdc0c..b78d2f59c 100644 --- a/client/src/app/shared/user-subscription/subscribe-button.component.scss +++ b/client/src/app/shared/user-subscription/subscribe-button.component.scss @@ -13,7 +13,21 @@ .subscribe-button, .unsubscribe-button { - padding: 3px 7px; + display: inline-block; + + &.small { + min-width: 75px; + height: 20px; + line-height: 20px; + font-size: 13px; + } + + &.normal { + min-width: 120px; + height: 30px; + line-height: 30px; + font-size: 16px; + } } .unsubscribe-button { diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.ts b/client/src/app/shared/user-subscription/subscribe-button.component.ts index 46d6dbaf7..ba7acf69a 100644 --- a/client/src/app/shared/user-subscription/subscribe-button.component.ts +++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts @@ -15,6 +15,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill' export class SubscribeButtonComponent implements OnInit { @Input() videoChannel: VideoChannel @Input() displayFollowers = false + @Input() size: 'small' | 'normal' = 'normal' subscribed: boolean @@ -34,7 +35,7 @@ export class SubscribeButtonComponent implements OnInit { ngOnInit () { this.userSubscriptionService.isSubscriptionExists(this.uri) .subscribe( - exists => this.subscribed = exists, + res => this.subscribed = res[this.uri], err => this.notificationsService.error(this.i18n('Error'), err.message) ) diff --git a/client/src/app/shared/user-subscription/user-subscription.service.ts b/client/src/app/shared/user-subscription/user-subscription.service.ts index 3103706d1..cf622019f 100644 --- a/client/src/app/shared/user-subscription/user-subscription.service.ts +++ b/client/src/app/shared/user-subscription/user-subscription.service.ts @@ -1,22 +1,36 @@ -import { catchError, map } from 'rxjs/operators' -import { HttpClient } from '@angular/common/http' +import { bufferTime, catchError, filter, map, share, switchMap, tap } from 'rxjs/operators' +import { HttpClient, HttpParams } from '@angular/common/http' import { Injectable } from '@angular/core' import { ResultList } from '../../../../../shared' import { environment } from '../../../environments/environment' -import { RestExtractor } from '../rest' -import { Observable, of } from 'rxjs' +import { RestExtractor, RestService } from '../rest' +import { Observable, ReplaySubject, Subject } from 'rxjs' import { VideoChannel } from '@app/shared/video-channel/video-channel.model' import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' import { VideoChannel as VideoChannelServer } from '../../../../../shared/models/videos' +type SubscriptionExistResult = { [ uri: string ]: boolean } + @Injectable() export class UserSubscriptionService { static BASE_USER_SUBSCRIPTIONS_URL = environment.apiUrl + '/api/v1/users/me/subscriptions' + // Use a replay subject because we "next" a value before subscribing + private existsSubject: Subject = new ReplaySubject(1) + private existsObservable: Observable + constructor ( private authHttp: HttpClient, - private restExtractor: RestExtractor + private restExtractor: RestExtractor, + private restService: RestService ) { + this.existsObservable = this.existsSubject.pipe( + tap(u => console.log(u)), + bufferTime(500), + filter(uris => uris.length !== 0), + switchMap(uris => this.areSubscriptionExist(uris)), + share() + ) } deleteSubscription (nameWithHost: string) { @@ -50,17 +64,20 @@ export class UserSubscriptionService { ) } - isSubscriptionExists (nameWithHost: string): Observable { - const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL + '/' + nameWithHost + isSubscriptionExists (nameWithHost: string) { + this.existsSubject.next(nameWithHost) - return this.authHttp.get(url) - .pipe( - map(this.restExtractor.extractDataBool), - catchError(err => { - if (err.status === 404) return of(false) + return this.existsObservable + } - return this.restExtractor.handleError(err) - }) - ) + private areSubscriptionExist (uris: string[]): Observable { + console.log(uris) + const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL + '/exist' + let params = new HttpParams() + + params = this.restService.addObjectParams(params, { uris }) + + return this.authHttp.get(url, { params }) + .pipe(catchError(err => this.restExtractor.handleError(err))) } } -- cgit v1.2.3