Add video channel management

12 files changed, 477 insertions, 3 deletions

diff --git a/client/src/app/my-account/my-account-routing.module.ts b/client/src/app/my-account/my-account-routing.module.ts
index 5a61db41f..96f52c1da 100644
--- a/client/src/app/my-account/my-account-routing.module.ts
+++ b/client/src/app/my-account/my-account-routing.module.ts
@@ -5,6 +5,9 @@ import { LoginGuard } from '../core'
 import { MyAccountComponent } from './my-account.component'
 import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
 import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component'
+import { MyAccountVideoChannelsComponent } from '@app/my-account/my-account-video-channels/my-account-video-channels.component'
+import { MyAccountVideoChannelCreateComponent } from '@app/my-account/my-account-video-channels/my-account-video-channel-create.component'
+import { MyAccountVideoChannelUpdateComponent } from '@app/my-account/my-account-video-channels/my-account-video-channel-update.component'
 
 const myAccountRoutes: Routes = [
   {
@@ -22,6 +25,33 @@ const myAccountRoutes: Routes = [
         }
       },
       {
+        path: 'video-channels',
+        component: MyAccountVideoChannelsComponent,
+        data: {
+          meta: {
+            title: 'Account video channels'
+          }
+        }
+      },
+      {
+        path: 'video-channels/create',
+        component: MyAccountVideoChannelCreateComponent,
+        data: {
+          meta: {
+            title: 'Create new video channel'
+          }
+        }
+      },
+      {
+        path: 'video-channels/update/:videoChannelId',
+        component: MyAccountVideoChannelUpdateComponent,
+        data: {
+          meta: {
+            title: 'Update video channel'
+          }
+        }
+      },
+      {
         path: 'videos',
         component: MyAccountVideosComponent,
         data: {
diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channel-create.component.ts b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-create.component.ts
new file mode 100644
index 000000000..3cfe74752
--- /dev/null
+++ b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-create.component.ts
@@ -0,0 +1,86 @@
+import { Component, OnInit } from '@angular/core'
+import { Router } from '@angular/router'
+import { NotificationsService } from 'angular2-notifications'
+import 'rxjs/add/observable/from'
+import 'rxjs/add/operator/concatAll'
+import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit'
+import { FormBuilder, FormGroup } from '@angular/forms'
+import { VideoChannelCreate } from '../../../../../shared/models/videos'
+import {
+  VIDEO_CHANNEL_DESCRIPTION,
+  VIDEO_CHANNEL_DISPLAY_NAME,
+  VIDEO_CHANNEL_SUPPORT
+} from '@app/shared/forms/form-validators/video-channel'
+import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
+
+@Component({
+  selector: 'my-account-video-channel-create',
+  templateUrl: './my-account-video-channel-edit.component.html',
+  styleUrls: [ './my-account-video-channel-edit.component.scss' ]
+})
+export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelEdit implements OnInit {
+  error: string
+
+  form: FormGroup
+  formErrors = {
+    'display-name': '',
+    'description': '',
+    'support': ''
+  }
+  validationMessages = {
+    'display-name': VIDEO_CHANNEL_DISPLAY_NAME.MESSAGES,
+    'description': VIDEO_CHANNEL_DESCRIPTION.MESSAGES,
+    'support': VIDEO_CHANNEL_SUPPORT.MESSAGES
+  }
+
+  constructor (
+    private notificationsService: NotificationsService,
+    private router: Router,
+    private formBuilder: FormBuilder,
+    private videoChannelService: VideoChannelService
+  ) {
+    super()
+  }
+
+  buildForm () {
+    this.form = this.formBuilder.group({
+      'display-name': [ '', VIDEO_CHANNEL_DISPLAY_NAME.VALIDATORS ],
+      description: [ '', VIDEO_CHANNEL_DESCRIPTION.VALIDATORS ],
+      support: [ '', VIDEO_CHANNEL_SUPPORT.VALIDATORS ]
+    })
+
+    this.form.valueChanges.subscribe(data => this.onValueChanged(data))
+  }
+
+  ngOnInit () {
+    this.buildForm()
+  }
+
+  formValidated () {
+    this.error = undefined
+
+    const body = this.form.value
+    const videoChannelCreate: VideoChannelCreate = {
+      displayName: body['display-name'],
+      description: body.description,
+      support: body.support
+    }
+
+    this.videoChannelService.createVideoChannel(videoChannelCreate).subscribe(
+      () => {
+        this.notificationsService.success('Success', `Video channel ${videoChannelCreate.displayName} created.`)
+        this.router.navigate([ '/my-account', 'video-channels' ])
+      },
+
+      err => this.error = err.message
+    )
+  }
+
+  isCreation () {
+    return true
+  }
+
+  getFormButtonTitle () {
+    return 'Create this video channel'
+  }
+}
diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.html b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.html
new file mode 100644
index 000000000..adc969bdb
--- /dev/null
+++ b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.html
@@ -0,0 +1,42 @@
+<div class="form-sub-title" *ngIf="isCreation() === true">Create a video channel</div>
+<div class="form-sub-title" *ngIf="isCreation() === false">Update {{ videoChannel?.displayName }}</div>
+
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+  <div class="form-group">
+    <label for="display-name">Display name</label>
+    <input
+      type="text" id="display-name"
+      formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
+    >
+    <div *ngIf="formErrors.display-name" class="form-error">
+      {{ formErrors.display-name }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="description">Description</label>
+    <textarea
+      id="description" formControlName="description"
+      [ngClass]="{ 'input-error': formErrors['description'] }"
+    ></textarea>
+    <div *ngIf="formErrors.description" class="form-error">
+      {{ formErrors.description }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="support">Support</label>
+    <my-help helpType="markdownEnhanced" preHtml="Short text to tell people how they can support your channel (membership platform...)."></my-help>
+    <my-markdown-textarea
+        id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
+        [classes]="{ 'input-error': formErrors['support'] }"
+    ></my-markdown-textarea>
+    <div *ngIf="formErrors.support" class="form-error">
+      {{ formErrors.support }}
+    </div>
+  </div>
+
+  <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+</form>
diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.scss b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
new file mode 100644
index 000000000..6fbb8ae8b
--- /dev/null
+++ b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
@@ -0,0 +1,27 @@
+@import '_variables';
+@import '_mixins';
+
+.form-sub-title {
+  margin-bottom: 20px;
+}
+
+input[type=text] {
+  @include peertube-input-text(340px);
+
+  display: block;
+}
+
+textarea {
+  @include peertube-textarea(500px, 150px);
+
+  display: block;
+}
+
+.peertube-select-container {
+  @include peertube-select-container(340px);
+}
+
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+}
\ No newline at end of file
diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.ts b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.ts
new file mode 100644
index 000000000..e56f46262
--- /dev/null
+++ b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.ts
@@ -0,0 +1,6 @@
+import { FormReactive } from '@app/shared'
+
+export abstract class MyAccountVideoChannelEdit extends FormReactive {
+  abstract isCreation (): boolean
+  abstract getFormButtonTitle (): string
+}
diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channel-update.component.ts b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-update.component.ts
new file mode 100644
index 000000000..2b8415938
--- /dev/null
+++ b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-update.component.ts
@@ -0,0 +1,116 @@
+import { Component, OnInit, OnDestroy } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { NotificationsService } from 'angular2-notifications'
+import 'rxjs/add/observable/from'
+import 'rxjs/add/operator/concatAll'
+import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit'
+import { FormBuilder, FormGroup } from '@angular/forms'
+import { VideoChannelUpdate } from '../../../../../shared/models/videos'
+import {
+  VIDEO_CHANNEL_DESCRIPTION,
+  VIDEO_CHANNEL_DISPLAY_NAME,
+  VIDEO_CHANNEL_SUPPORT
+} from '@app/shared/forms/form-validators/video-channel'
+import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
+import { Subscription } from 'rxjs/Subscription'
+import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+
+@Component({
+  selector: 'my-account-video-channel-update',
+  templateUrl: './my-account-video-channel-edit.component.html',
+  styleUrls: [ './my-account-video-channel-edit.component.scss' ]
+})
+export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelEdit implements OnInit, OnDestroy {
+  error: string
+
+  form: FormGroup
+  formErrors = {
+    'display-name': '',
+    'description': '',
+    'support': ''
+  }
+  validationMessages = {
+    'display-name': VIDEO_CHANNEL_DISPLAY_NAME.MESSAGES,
+    'description': VIDEO_CHANNEL_DESCRIPTION.MESSAGES,
+    'support': VIDEO_CHANNEL_SUPPORT.MESSAGES
+  }
+
+  private videoChannelToUpdate: VideoChannel
+  private paramsSub: Subscription
+
+  constructor (
+    private notificationsService: NotificationsService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private formBuilder: FormBuilder,
+    private videoChannelService: VideoChannelService
+  ) {
+    super()
+  }
+
+  buildForm () {
+    this.form = this.formBuilder.group({
+      'display-name': [ '', VIDEO_CHANNEL_DISPLAY_NAME.VALIDATORS ],
+      description: [ '', VIDEO_CHANNEL_DESCRIPTION.VALIDATORS ],
+      support: [ '', VIDEO_CHANNEL_SUPPORT.VALIDATORS ]
+    })
+
+    this.form.valueChanges.subscribe(data => this.onValueChanged(data))
+  }
+
+  ngOnInit () {
+    this.buildForm()
+
+    this.paramsSub = this.route.params.subscribe(routeParams => {
+      const videoChannelId = routeParams['videoChannelId']
+
+      this.videoChannelService.getVideoChannel(videoChannelId).subscribe(
+        videoChannelToUpdate => {
+          this.videoChannelToUpdate = videoChannelToUpdate
+
+          this.form.patchValue({
+            'display-name': videoChannelToUpdate.displayName,
+            description: videoChannelToUpdate.description,
+            support: videoChannelToUpdate.support
+          })
+        },
+
+        err => this.error = err.message
+      )
+    })
+  }
+
+  ngOnDestroy () {
+    if (this.paramsSub) this.paramsSub.unsubscribe()
+  }
+
+  formValidated () {
+    this.error = undefined
+
+    const body = this.form.value
+    const videoChannelUpdate: VideoChannelUpdate = {
+      displayName: body['display-name'],
+      description: body.description,
+      support: body.support
+    }
+
+    this.videoChannelService.updateVideoChannel(this.videoChannelToUpdate.uuid, videoChannelUpdate).subscribe(
+      () => {
+        this.notificationsService.success('Success', `Video channel ${videoChannelUpdate.displayName} updated.`)
+        this.router.navigate([ '/my-account', 'video-channels' ])
+      },
+
+      err => this.error = err.message
+    )
+  }
+
+  isCreation () {
+    return false
+  }
+
+  getFormButtonTitle () {
+    return this.videoChannelToUpdate
+      ? 'Update ' + this.videoChannelToUpdate.displayName + ' video channel'
+      : 'Update'
+  }
+}
diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.html b/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.html
new file mode 100644
index 000000000..90c401bc5
--- /dev/null
+++ b/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.html
@@ -0,0 +1,30 @@
+<div class="video-channels-header">
+  <a class="create-button" routerLink="create">
+    <span class="icon icon-add"></span>
+    Create another video channel
+  </a>
+</div>
+
+<div class="video-channels">
+  <div *ngFor="let videoChannel of videoChannels" class="video-channel">
+    <a [routerLink]="[ '/video-channels', videoChannel.uuid ]">
+      <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+    </a>
+
+    <div class="video-channel-info">
+      <a [routerLink]="[ '/video-channels', videoChannel.uuid ]" class="video-channel-names" title="Go to the channel">
+        <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
+        <!-- Hide the name for now, because it's an UUID not very friendly -->
+        <!--<div class="video-channel-name">{{ videoChannel.name }}</div>-->
+      </a>
+
+      <div class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
+    </div>
+
+    <div class="video-channel-buttons">
+      <my-delete-button (click)="deleteVideoChannel(videoChannel)"></my-delete-button>
+
+      <my-edit-button [routerLink]="[ 'update', videoChannel.uuid ]"></my-edit-button>
+    </div>
+  </div>
+</div>
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
new file mode 100644
index 000000000..bcb58eac2
--- /dev/null
+++ b/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.scss
@@ -0,0 +1,72 @@
+@import '_variables';
+@import '_mixins';
+
+.create-button {
+  @include create-button;
+}
+
+/deep/ .action-button {
+  &.action-button-delete {
+    margin-right: 10px;
+  }
+}
+
+.video-channel {
+  display: flex;
+  min-height: 130px;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #C6C6C6;
+
+  img {
+    @include avatar(80px);
+
+    margin-right: 10px;
+  }
+
+  .video-channel-info {
+    flex-grow: 1;
+
+    a.video-channel-names {
+      @include disable-default-a-behaviour;
+
+      display: flex;
+      color: #000;
+
+      .video-channel-display-name {
+        font-weight: $font-semibold;
+        font-size: 18px;
+      }
+
+      .video-channel-name {
+        font-size: 14px;
+        color: #777272;
+      }
+    }
+  }
+
+  .video-channel-buttons {
+    min-width: 190px;
+  }
+}
+
+.video-channels-header {
+  text-align: right;
+  margin: 20px 0 50px;
+}
+
+@media screen and (max-width: 800px) {
+  .video-channel {
+    flex-direction: column;
+    height: auto;
+    text-align: center;
+
+    img {
+      margin-right: 0;
+    }
+
+    .video-channel-buttons {
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.ts b/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.ts
new file mode 100644
index 000000000..eb04094e1
--- /dev/null
+++ b/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.ts
@@ -0,0 +1,59 @@
+import { Component, OnInit } from '@angular/core'
+import { NotificationsService } from 'angular2-notifications'
+import 'rxjs/add/observable/from'
+import 'rxjs/add/operator/concatAll'
+import { AuthService } from '../../core/auth'
+import { ConfirmService } from '../../core/confirm'
+import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
+import { User } from '@app/shared'
+
+@Component({
+  selector: 'my-account-video-channels',
+  templateUrl: './my-account-video-channels.component.html',
+  styleUrls: [ './my-account-video-channels.component.scss' ]
+})
+export class MyAccountVideoChannelsComponent implements OnInit{
+  videoChannels: VideoChannel[] = []
+
+  private user: User
+
+  constructor (
+    private authService: AuthService,
+    private notificationsService: NotificationsService,
+    private confirmService: ConfirmService,
+    private videoChannelService: VideoChannelService
+  ) {}
+
+  ngOnInit () {
+    this.user = this.authService.getUser()
+
+    this.loadVideoChannels()
+  }
+
+  async deleteVideoChannel (videoChannel: VideoChannel) {
+    const res = await this.confirmService.confirmWithInput(
+      `Do you really want to delete ${videoChannel.displayName}? It will delete all videos uploaded in this channel too.`,
+      'Please type the name of the video channel to confirm',
+      videoChannel.displayName,
+      'Delete'
+    )
+    if (res === false) return
+
+    this.videoChannelService.removeVideoChannel(videoChannel)
+      .subscribe(
+        status => {
+          this.loadVideoChannels()
+          this.notificationsService.success('Success', `Video channel ${videoChannel.name} deleted.`)
+        },
+
+        error => this.notificationsService.error('Error', error.message)
+      )
+  }
+
+  private loadVideoChannels () {
+    this.authService.userInformationLoaded
+        .flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account.id))
+        .subscribe(res => this.videoChannels = res.data)
+  }
+}
diff --git a/client/src/app/my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/my-account/my-account-videos/my-account-videos.component.ts
index a6cef361e..c1b53bcd5 100644
--- a/client/src/app/my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/my-account/my-account-videos/my-account-videos.component.ts
@@ -43,8 +43,6 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
 
   ngOnInit () {
     super.ngOnInit()
-
-    // this.generateSyndicationList()
   }
 
   ngOnDestroy () {
diff --git a/client/src/app/my-account/my-account.component.html b/client/src/app/my-account/my-account.component.html
index 41afc1e5d..591d58cf9 100644
--- a/client/src/app/my-account/my-account.component.html
+++ b/client/src/app/my-account/my-account.component.html
@@ -2,6 +2,8 @@
   <div class="sub-menu">
     <a routerLink="/my-account/settings" routerLinkActive="active" class="title-page">My settings</a>
 
+    <a routerLink="/my-account/video-channels" routerLinkActive="active" class="title-page">My video channels</a>
+
     <a routerLink="/my-account/videos" routerLinkActive="active" class="title-page">My videos</a>
   </div>
 
diff --git a/client/src/app/my-account/my-account.module.ts b/client/src/app/my-account/my-account.module.ts
index 981d3c697..ba9dea71e 100644
--- a/client/src/app/my-account/my-account.module.ts
+++ b/client/src/app/my-account/my-account.module.ts
@@ -7,6 +7,9 @@ import { MyAccountSettingsComponent } from './my-account-settings/my-account-set
 import { MyAccountComponent } from './my-account.component'
 import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component'
 import { MyAccountProfileComponent } from '@app/my-account/my-account-settings/my-account-profile/my-account-profile.component'
+import { MyAccountVideoChannelsComponent } from '@app/my-account/my-account-video-channels/my-account-video-channels.component'
+import { MyAccountVideoChannelCreateComponent } from '@app/my-account/my-account-video-channels/my-account-video-channel-create.component'
+import { MyAccountVideoChannelUpdateComponent } from '@app/my-account/my-account-video-channels/my-account-video-channel-update.component'
 
 @NgModule({
   imports: [
@@ -20,7 +23,10 @@ import { MyAccountProfileComponent } from '@app/my-account/my-account-settings/m
     MyAccountChangePasswordComponent,
     MyAccountVideoSettingsComponent,
     MyAccountProfileComponent,
-    MyAccountVideosComponent
+    MyAccountVideosComponent,
+    MyAccountVideoChannelsComponent,
+    MyAccountVideoChannelCreateComponent,
+    MyAccountVideoChannelUpdateComponent
   ],
 
   exports: [