15 files changed, 288 insertions, 33 deletions

diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 722415a06..9bc7ad88b 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -36,7 +36,8 @@ import {
   ReactiveFileComponent,
   ResetPasswordValidatorsService,
   UserValidatorsService,
-  VideoAbuseValidatorsService, VideoBlacklistValidatorsService,
+  VideoAbuseValidatorsService,
+  VideoBlacklistValidatorsService,
   VideoChannelValidatorsService,
   VideoCommentValidatorsService,
   VideoValidatorsService
@@ -49,6 +50,7 @@ import { PeertubeCheckboxComponent } from '@app/shared/forms/peertube-checkbox.c
 import { VideoImportService } from '@app/shared/video-import/video-import.service'
 import { ActionDropdownComponent } from '@app/shared/buttons/action-dropdown.component'
 import { NgbDropdownModule, NgbModalModule, NgbPopoverModule, NgbTabsetModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
+import { SubscribeButtonComponent, UserSubscriptionService } from '@app/shared/user-subscription'
 
 @NgModule({
   imports: [
@@ -83,7 +85,8 @@ import { NgbDropdownModule, NgbModalModule, NgbPopoverModule, NgbTabsetModule, N
     InfiniteScrollerDirective,
     HelpComponent,
     ReactiveFileComponent,
-    PeertubeCheckboxComponent
+    PeertubeCheckboxComponent,
+    SubscribeButtonComponent
   ],
 
   exports: [
@@ -115,6 +118,7 @@ import { NgbDropdownModule, NgbModalModule, NgbPopoverModule, NgbTabsetModule, N
     HelpComponent,
     ReactiveFileComponent,
     PeertubeCheckboxComponent,
+    SubscribeButtonComponent,
 
     NumberFormatterPipe,
     ObjectLengthPipe,
@@ -134,6 +138,7 @@ import { NgbDropdownModule, NgbModalModule, NgbPopoverModule, NgbTabsetModule, N
     VideoChannelService,
     VideoCaptionService,
     VideoImportService,
+    UserSubscriptionService,
 
     FormValidatorService,
     CustomConfigValidatorsService,
diff --git a/client/src/app/shared/user-subscription/index.ts b/client/src/app/shared/user-subscription/index.ts
new file mode 100644
index 000000000..024b36a41
--- /dev/null
+++ b/client/src/app/shared/user-subscription/index.ts
@@ -0,0 +1,2 @@
+export * from './user-subscription.service'
+export * from './subscribe-button.component'
\ No newline at end of file
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.html b/client/src/app/shared/user-subscription/subscribe-button.component.html
new file mode 100644
index 000000000..63b313662
--- /dev/null
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.html
@@ -0,0 +1,15 @@
+<span i18n *ngIf="subscribed === false" class="subscribe-button" 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 class="subscribed" i18n>Subscribed</span>
+  <span class="unsubscribe" i18n>Unsubscribe</span>
+
+  <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
+    {{ videoChannel.followersCount | myNumberFormatter }}
+  </span>
+</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
new file mode 100644
index 000000000..9811fdc0c
--- /dev/null
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.scss
@@ -0,0 +1,37 @@
+@import '_variables';
+@import '_mixins';
+
+.subscribe-button {
+  @include peertube-button;
+  @include orange-button;
+}
+
+.unsubscribe-button {
+  @include peertube-button;
+  @include grey-button
+}
+
+.subscribe-button,
+.unsubscribe-button {
+  padding: 3px 7px;
+}
+
+.unsubscribe-button {
+  .subscribed {
+    display: inline;
+  }
+
+  .unsubscribe {
+    display: none;
+  }
+
+  &:hover {
+    .subscribed {
+      display: none;
+    }
+
+    .unsubscribe {
+      display: inline;
+    }
+  }
+}
\ No newline at end of file
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.ts b/client/src/app/shared/user-subscription/subscribe-button.component.ts
new file mode 100644
index 000000000..46d6dbaf7
--- /dev/null
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.ts
@@ -0,0 +1,74 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { AuthService } from '@app/core'
+import { RestExtractor } from '@app/shared/rest'
+import { RedirectService } from '@app/core/routing/redirect.service'
+import { UserSubscriptionService } from '@app/shared/user-subscription/user-subscription.service'
+import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { NotificationsService } from 'angular2-notifications'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+
+@Component({
+  selector: 'my-subscribe-button',
+  templateUrl: './subscribe-button.component.html',
+  styleUrls: [ './subscribe-button.component.scss' ]
+})
+export class SubscribeButtonComponent implements OnInit {
+  @Input() videoChannel: VideoChannel
+  @Input() displayFollowers = false
+
+  subscribed: boolean
+
+  constructor (
+    private authService: AuthService,
+    private restExtractor: RestExtractor,
+    private redirectService: RedirectService,
+    private notificationsService: NotificationsService,
+    private userSubscriptionService: UserSubscriptionService,
+    private i18n: I18n
+  ) { }
+
+  get uri () {
+    return this.videoChannel.name + '@' + this.videoChannel.host
+  }
+
+  ngOnInit () {
+    this.userSubscriptionService.isSubscriptionExists(this.uri)
+      .subscribe(
+        exists => this.subscribed = exists,
+
+        err => this.notificationsService.error(this.i18n('Error'), err.message)
+      )
+  }
+
+  subscribe () {
+    this.userSubscriptionService.addSubscription(this.uri)
+      .subscribe(
+        () => {
+          this.subscribed = true
+
+          this.notificationsService.success(
+            this.i18n('Subscribed'),
+            this.i18n('Subscribed to {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName })
+          )
+        },
+
+          err => this.notificationsService.error(this.i18n('Error'), err.message)
+      )
+  }
+
+  unsubscribe () {
+    this.userSubscriptionService.deleteSubscription(this.uri)
+        .subscribe(
+          () => {
+            this.subscribed = false
+
+            this.notificationsService.success(
+              this.i18n('Unsubscribed'),
+              this.i18n('Unsubscribed from {{nameWithHost}}', { nameWithHost: this.videoChannel.displayName })
+            )
+          },
+
+          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
new file mode 100644
index 000000000..3103706d1
--- /dev/null
+++ b/client/src/app/shared/user-subscription/user-subscription.service.ts
@@ -0,0 +1,66 @@
+import { catchError, map } from 'rxjs/operators'
+import { HttpClient } 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 { 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'
+
+@Injectable()
+export class UserSubscriptionService {
+  static BASE_USER_SUBSCRIPTIONS_URL = environment.apiUrl + '/api/v1/users/me/subscriptions'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor
+  ) {
+  }
+
+  deleteSubscription (nameWithHost: string) {
+    const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL + '/' + nameWithHost
+
+    return this.authHttp.delete(url)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  addSubscription (nameWithHost: string) {
+    const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL
+
+    const body = { uri: nameWithHost }
+    return this.authHttp.post(url, body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  listSubscriptions (): Observable<ResultList<VideoChannel>> {
+    const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL
+
+    return this.authHttp.get<ResultList<VideoChannelServer>>(url)
+               .pipe(
+                 map(res => VideoChannelService.extractVideoChannels(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  isSubscriptionExists (nameWithHost: string): Observable<boolean> {
+    const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL + '/' + nameWithHost
+
+    return this.authHttp.get(url)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => {
+                   if (err.status === 404) return of(false)
+
+                   return this.restExtractor.handleError(err)
+                 })
+               )
+  }
+}
diff --git a/client/src/app/shared/video-channel/video-channel.service.ts b/client/src/app/shared/video-channel/video-channel.service.ts
index 510dc9c3d..46b121790 100644
--- a/client/src/app/shared/video-channel/video-channel.service.ts
+++ b/client/src/app/shared/video-channel/video-channel.service.ts
@@ -22,6 +22,16 @@ export class VideoChannelService {
     private restExtractor: RestExtractor
   ) {}
 
+  static extractVideoChannels (result: ResultList<VideoChannelServer>) {
+    const videoChannels: VideoChannel[] = []
+
+    for (const videoChannelJSON of result.data) {
+      videoChannels.push(new VideoChannel(videoChannelJSON))
+    }
+
+    return { data: videoChannels, total: result.total }
+  }
+
   getVideoChannel (videoChannelName: string) {
     return this.authHttp.get<VideoChannel>(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName)
                .pipe(
@@ -34,7 +44,7 @@ export class VideoChannelService {
   listAccountVideoChannels (account: Account): Observable<ResultList<VideoChannel>> {
     return this.authHttp.get<ResultList<VideoChannelServer>>(AccountService.BASE_ACCOUNT_URL + account.nameWithHost + '/video-channels')
                .pipe(
-                 map(res => this.extractVideoChannels(res)),
+                 map(res => VideoChannelService.extractVideoChannels(res)),
                  catchError(err => this.restExtractor.handleError(err))
                )
   }
@@ -47,16 +57,16 @@ export class VideoChannelService {
                )
   }
 
-  updateVideoChannel (videoChannelUUID: string, videoChannel: VideoChannelUpdate) {
-    return this.authHttp.put(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelUUID, videoChannel)
+  updateVideoChannel (videoChannelName: string, videoChannel: VideoChannelUpdate) {
+    return this.authHttp.put(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName, videoChannel)
                .pipe(
                  map(this.restExtractor.extractDataBool),
                  catchError(err => this.restExtractor.handleError(err))
                )
   }
 
-  changeVideoChannelAvatar (videoChannelUUID: string, avatarForm: FormData) {
-    const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelUUID + '/avatar/pick'
+  changeVideoChannelAvatar (videoChannelName: string, avatarForm: FormData) {
+    const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName + '/avatar/pick'
 
     return this.authHttp.post<{ avatar: Avatar }>(url, avatarForm)
                .pipe(catchError(err => this.restExtractor.handleError(err)))
@@ -69,14 +79,4 @@ export class VideoChannelService {
                  catchError(err => this.restExtractor.handleError(err))
                )
   }
-
-  private extractVideoChannels (result: ResultList<VideoChannelServer>) {
-    const videoChannels: VideoChannel[] = []
-
-    for (const videoChannelJSON of result.data) {
-      videoChannels.push(new VideoChannel(videoChannelJSON))
-    }
-
-    return { data: videoChannels, total: result.total }
-  }
 }
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index e8ded6ab8..d4b00c07c 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -14,7 +14,7 @@
     <div *ngFor="let videos of videoPages" class="videos-page">
       <my-video-miniature
         class="ng-animate"
-        *ngFor="let video of videos" [video]="video" [user]="user"
+        *ngFor="let video of videos" [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
       >
       </my-video-miniature>
     </div>
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index 59d3c1ebe..b8fd7f8eb 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -11,6 +11,7 @@ import { VideoSortField } from './sort-field.type'
 import { Video } from './video.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ScreenService } from '@app/shared/misc/screen.service'
+import { OwnerDisplayType } from '@app/shared/video/video-miniature.component'
 
 export abstract class AbstractVideoList implements OnInit, OnDestroy {
   private static LINES_PER_PAGE = 4
@@ -34,6 +35,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
   videoWidth: number
   videoHeight: number
   videoPages: Video[][] = []
+  ownerDisplayType: OwnerDisplayType = 'account'
 
   protected baseVideoWidth = 215
   protected baseVideoHeight = 230
diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
index d346f985c..fa4ca7f93 100644
--- a/client/src/app/shared/video/video-details.model.ts
+++ b/client/src/app/shared/video/video-details.model.ts
@@ -1,14 +1,8 @@
-import {
-  UserRight,
-  VideoChannel,
-  VideoConstant,
-  VideoDetails as VideoDetailsServerModel,
-  VideoFile,
-  VideoState
-} from '../../../../../shared'
+import { UserRight, VideoConstant, VideoDetails as VideoDetailsServerModel, VideoFile, VideoState } from '../../../../../shared'
 import { AuthUser } from '../../core'
 import { Video } from '../../shared/video/video.model'
 import { Account } from '@app/shared/account/account.model'
+import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 
 export class VideoDetails extends Video implements VideoDetailsServerModel {
   descriptionPath: string
@@ -30,7 +24,7 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
 
     this.descriptionPath = hash.descriptionPath
     this.files = hash.files
-    this.channel = hash.channel
+    this.channel = new VideoChannel(hash.channel)
     this.account = new Account(hash.account)
     this.tags = hash.tags
     this.support = hash.support
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 3010e5ccc..de84bccf9 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -10,6 +10,12 @@
     </a>
 
     <span i18n class="video-miniature-created-at-views">{{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
-    <a class="video-miniature-account" [routerLink]="[ '/accounts', video.by ]">{{ video.by }}</a>
+
+    <a *ngIf="displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
+      {{ video.byAccount }}
+    </a>
+    <a *ngIf="displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
+      {{ video.byVideoChannel }}
+    </a>
   </div>
 </div>
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 588eea3a7..6883650f4 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -38,7 +38,8 @@
       font-size: 13px;
     }
 
-    .video-miniature-account {
+    .video-miniature-account,
+    .video-miniature-channel {
       @include disable-default-a-behaviour;
 
       display: block;
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index d3f6dc1f6..07193ebd5 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -1,20 +1,51 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnInit } from '@angular/core'
 import { User } from '../users'
 import { Video } from './video.model'
 import { ServerService } from '@app/core'
 
+export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
+
 @Component({
   selector: 'my-video-miniature',
   styleUrls: [ './video-miniature.component.scss' ],
   templateUrl: './video-miniature.component.html'
 })
-export class VideoMiniatureComponent {
+export class VideoMiniatureComponent implements OnInit {
   @Input() user: User
   @Input() video: Video
+  @Input() ownerDisplayType: OwnerDisplayType = 'account'
+
+  private ownerDisplayTypeChosen: 'account' | 'videoChannel'
 
   constructor (private serverService: ServerService) { }
 
+  ngOnInit () {
+    if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') {
+      this.ownerDisplayTypeChosen = this.ownerDisplayType
+      return
+    }
+
+    // If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
+    // -> Use the account name
+    if (
+      this.video.channel.name === `${this.video.account.name}_channel` ||
+      this.video.channel.name.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/)
+    ) {
+      this.ownerDisplayTypeChosen = 'account'
+    } else {
+      this.ownerDisplayTypeChosen = 'videoChannel'
+    }
+  }
+
   isVideoBlur () {
     return this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())
   }
+
+  displayOwnerAccount () {
+    return this.ownerDisplayTypeChosen === 'account'
+  }
+
+  displayOwnerVideoChannel () {
+    return this.ownerDisplayTypeChosen === 'videoChannel'
+  }
 }
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index df8253301..d80c10459 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -8,9 +8,12 @@ import { Actor } from '@app/shared/actor/actor.model'
 import { VideoScheduleUpdate } from '../../../../../shared/models/videos/video-schedule-update.model'
 
 export class Video implements VideoServerModel {
-  by: string
+  byVideoChannel: string
+  byAccount: string
+
   accountAvatarUrl: string
   videoChannelAvatarUrl: string
+
   createdAt: Date
   updatedAt: Date
   publishedAt: Date
@@ -110,7 +113,8 @@ export class Video implements VideoServerModel {
     this.account = hash.account
     this.channel = hash.channel
 
-    this.by = Actor.CREATE_BY_STRING(hash.account.name, hash.account.host)
+    this.byAccount = Actor.CREATE_BY_STRING(hash.account.name, hash.account.host)
+    this.byVideoChannel = Actor.CREATE_BY_STRING(hash.channel.name, hash.channel.host)
     this.accountAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.account)
     this.videoChannelAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.channel)
 
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index e44f1ee65..1a934c8e2 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -27,6 +27,7 @@ import { Account } from '@app/shared/account/account.model'
 import { AccountService } from '@app/shared/account/account.service'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
 import { ServerService } from '@app/core'
+import { UserSubscriptionService } from '@app/shared/user-subscription'
 
 @Injectable()
 export class VideoService {
@@ -157,6 +158,23 @@ export class VideoService {
                )
   }
 
+  getUserSubscriptionVideos (
+    videoPagination: ComponentPagination,
+    sort: VideoSortField
+  ): Observable<{ videos: Video[], totalVideos: number }> {
+    const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+
+    return this.authHttp
+               .get<ResultList<Video>>(UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL + '/videos', { params })
+               .pipe(
+                 switchMap(res => this.extractVideos(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
   getVideos (
     videoPagination: ComponentPagination,
     sort: VideoSortField,