Add ability to search video channels

14 files changed, 171 insertions, 58 deletions

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 @@
     </div>
   </div>
 
-  <div i18n *ngIf="pagination.totalItems === 0" class="no-result">
+  <div i18n *ngIf="pagination.totalItems === 0 && videoChannels.length === 0" class="no-result">
     No results found
   </div>
 
+  <div *ngFor="let videoChannel of videoChannels" class="entry video-channel">
+    <a [routerLink]="[ '/video-channels', videoChannel.name ]">
+      <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+    </a>
+
+    <div class="video-channel-info">
+      <a [routerLink]="[ '/video-channels', videoChannel.name ]" class="video-channel-names">
+        <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
+        <div class="video-channel-name">{{ videoChannel.name }}</div>
+      </a>
+
+      <div i18n class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
+    </div>
+
+    <my-subscribe-button [videoChannel]="videoChannel"></my-subscribe-button>
+  </div>
+
   <div *ngFor="let video of videos" class="entry video">
     <my-video-thumbnail [video]="video"></my-video-thumbnail>
 
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<ResultList<VideoServerModel>>(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<ResultList<VideoChannelServerModel>>(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 @@
-<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)))
   }
 }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 8a49e3566..e9c79741e 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -43,7 +43,7 @@
               <img [src]="video.videoChannelAvatarUrl" alt="Video channel avatar" />
             </a>
 
-            <my-subscribe-button [videoChannel]="video.channel"></my-subscribe-button>
+            <my-subscribe-button [videoChannel]="video.channel" size="small"></my-subscribe-button>
           </div>
 
           <div class="video-info-by">
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;
         }
       }