Add ability to search video channels

4 files changed, 51 insertions, 19 deletions

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 @@
-<span i18n *ngIf="subscribed === false" class="subscribe-button" role="button" (click)="subscribe()">
+<span i18n *ngIf="subscribed === false" class="subscribe-button" [ngClass]="size" role="button" (click)="subscribe()">
   <span>Subscribe</span>
   <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
     {{ videoChannel.followersCount | myNumberFormatter }}
   </span>
 </span>
 
-<span *ngIf="subscribed === true" class="unsubscribe-button" role="button" (click)="unsubscribe()">
+<span *ngIf="subscribed === true" class="unsubscribe-button" [ngClass]="size" role="button" (click)="unsubscribe()">
   <span class="subscribed" i18n>Subscribed</span>
   <span class="unsubscribe" i18n>Unsubscribe</span>
 
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<string> = new ReplaySubject(1)
+  private existsObservable: Observable<SubscriptionExistResult>
+
   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<boolean> {
-    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<SubscriptionExistResult> {
+    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<SubscriptionExistResult>(url, { params })
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
   }
 }