Reorganize left menu and account menu

Add my-settings and my-library in left menu
Move administration below my-library
Split account menu: my-setting and my library

10 files changed, 824 insertions, 0 deletions

diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts
new file mode 100644
index 000000000..1d0cbf246
--- /dev/null
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts
@@ -0,0 +1,78 @@
+import { Component, OnInit } from '@angular/core'
+import { Router } from '@angular/router'
+import { AuthService, Notifier } from '@app/core'
+import {
+  VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
+  VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
+  VIDEO_CHANNEL_NAME_VALIDATOR,
+  VIDEO_CHANNEL_SUPPORT_VALIDATOR
+} from '@app/shared/form-validators/video-channel-validators'
+import { FormValidatorService } from '@app/shared/shared-forms'
+import { VideoChannelService } from '@app/shared/shared-main'
+import { VideoChannelCreate } from '@shared/models'
+import { MyVideoChannelEdit } from './my-video-channel-edit'
+
+@Component({
+  templateUrl: './my-video-channel-edit.component.html',
+  styleUrls: [ './my-video-channel-edit.component.scss' ]
+})
+export class MyVideoChannelCreateComponent extends MyVideoChannelEdit implements OnInit {
+  error: string
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private authService: AuthService,
+    private notifier: Notifier,
+    private router: Router,
+    private videoChannelService: VideoChannelService
+    ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      name: VIDEO_CHANNEL_NAME_VALIDATOR,
+      'display-name': VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
+      description: VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
+      support: VIDEO_CHANNEL_SUPPORT_VALIDATOR
+    })
+  }
+
+  formValidated () {
+    this.error = undefined
+
+    const body = this.form.value
+    const videoChannelCreate: VideoChannelCreate = {
+      name: body.name,
+      displayName: body['display-name'],
+      description: body.description || null,
+      support: body.support || null
+    }
+
+    this.videoChannelService.createVideoChannel(videoChannelCreate).subscribe(
+      () => {
+        this.authService.refreshUserInformation()
+
+        this.notifier.success($localize`Video channel ${videoChannelCreate.displayName} created.`)
+        this.router.navigate([ '/my-library', 'video-channels' ])
+      },
+
+      err => {
+        if (err.status === 409) {
+          this.error = $localize`This name already exists on this instance.`
+          return
+        }
+
+        this.error = err.message
+      }
+    )
+  }
+
+  isCreation () {
+    return true
+  }
+
+  getFormButtonTitle () {
+    return $localize`Create`
+  }
+}
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html
new file mode 100644
index 000000000..7e0c4e732
--- /dev/null
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html
@@ -0,0 +1,105 @@
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item">
+      <a routerLink="/my-library/video-channels" i18n>My Channels</a>
+    </li>
+
+    <ng-container *ngIf="isCreation()">
+      <li class="breadcrumb-item active" i18n>Create</li>
+    </ng-container>
+    <ng-container *ngIf="!isCreation()">
+      <li class="breadcrumb-item active" i18n>Edit</li>
+      <li class="breadcrumb-item active" aria-current="page">
+        <a *ngIf="videoChannelToUpdate" [routerLink]="[ '/my-library/video-channels/update', videoChannelToUpdate?.nameWithHost ]">{{ videoChannelToUpdate?.displayName }}</a>
+      </li>
+    </ng-container>
+  </ol>
+</nav>
+
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+
+  <div class="form-row"> <!-- channel grid -->
+    <div class="form-group col-12 col-lg-4 col-xl-3">
+      <div *ngIf="isCreation()" class="video-channel-title" i18n>NEW CHANNEL</div>
+      <div *ngIf="!isCreation() && videoChannelToUpdate" class="video-channel-title" i18n>CHANNEL</div>
+    </div>
+
+    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+
+      <div class="form-group" *ngIf="isCreation()">
+        <label i18n for="name">Name</label>
+        <div class="input-group">
+          <input
+            type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
+            formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control"
+          >
+          <div class="input-group-append">
+            <span class="input-group-text">@{{ instanceHost }}</span>
+          </div>
+        </div>
+        <div *ngIf="formErrors['name']" class="form-error">
+          {{ formErrors['name'] }}
+        </div>
+      </div>
+
+      <my-actor-avatar-info
+        *ngIf="!isCreation() && videoChannelToUpdate"
+        [actor]="videoChannelToUpdate" (avatarChange)="onAvatarChange($event)"
+      ></my-actor-avatar-info>
+
+      <div class="form-group">
+        <label i18n for="display-name">Display name</label>
+        <input
+          type="text" id="display-name" class="form-control"
+          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 i18n for="description">Description</label>
+        <textarea
+          id="description" formControlName="description" class="form-control"
+          [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" i18n-preHtml preHtml="Short text to tell people how they can support your channel (membership platform...).<br /><br />
+    When you will upload a video in this channel, the video support field will be automatically filled by this text."
+        ></my-help>
+        <my-markdown-textarea
+            id="support" formControlName="support" textareaMaxWidth="500px" markdownType="enhanced"
+            [classes]="{ 'input-error': formErrors['support'] }"
+        ></my-markdown-textarea>
+        <div *ngIf="formErrors.support" class="form-error">
+          {{ formErrors.support }}
+        </div>
+      </div>
+
+      <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
+        <my-peertube-checkbox
+          inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate"
+          i18n-labelText labelText="Overwrite support field of all videos of this channel"
+        ></my-peertube-checkbox>
+      </div>
+
+    </div>
+  </div>
+
+  <div class="form-row"> <!-- submit placement block -->
+    <div class="col-md-7 col-xl-5"></div>
+    <div class="col-md-5 col-xl-5 d-inline-flex">
+      <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+    </div>
+  </div>
+</form>
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
new file mode 100644
index 000000000..8f8af655c
--- /dev/null
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
@@ -0,0 +1,67 @@
+@import '_variables';
+@import '_mixins';
+
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
+.video-channel-title {
+  @include settings-big-title;
+}
+
+my-actor-avatar-info {
+  display: block;
+  margin-bottom: 20px;
+}
+
+.input-group {
+  @include peertube-input-group(fit-content);
+}
+
+.input-group-append {
+  height: 30px;
+}
+
+input {
+  &[type=text] {
+    @include peertube-input-text(340px);
+
+    display: block;
+
+    &#name {
+      width: auto;
+      flex-grow: 1;
+    }
+  }
+
+  &[type=submit] {
+    @include peertube-button;
+    @include orange-button;
+    margin-left: auto;
+  }
+}
+
+textarea {
+  @include peertube-textarea(500px, 150px);
+
+  display: block;
+}
+
+.peertube-select-container {
+  @include peertube-select-container(340px);
+}
+
+.breadcrumb {
+  @include breadcrumb;
+}
+
+@media screen and (max-width: $small-view) {
+  input[type=text]#name {
+    width: auto !important;
+  }
+
+  label[for=name] + div, textarea {
+    width: 100%;
+  }
+}
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts
new file mode 100644
index 000000000..09db0df9d
--- /dev/null
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts
@@ -0,0 +1,22 @@
+import { FormReactive } from '@app/shared/shared-forms'
+import { VideoChannel } from '@app/shared/shared-main'
+
+export abstract class MyVideoChannelEdit extends FormReactive {
+  // We need it even in the create component because it's used in the edit template
+  videoChannelToUpdate: VideoChannel
+
+  abstract isCreation (): boolean
+  abstract getFormButtonTitle (): string
+
+  get instanceHost () {
+    return window.location.host
+  }
+
+  // We need this method so angular does not complain in child template that doesn't need this
+  onAvatarChange (formData: FormData) { /* empty */ }
+
+  // Should be implemented by the child
+  isBulkUpdateVideosDisplayed () {
+    return false
+  }
+}
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts
new file mode 100644
index 000000000..c6cb5ade6
--- /dev/null
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts
@@ -0,0 +1,135 @@
+import { Subscription } from 'rxjs'
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AuthService, Notifier, ServerService } from '@app/core'
+import {
+  VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
+  VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
+  VIDEO_CHANNEL_SUPPORT_VALIDATOR
+} from '@app/shared/form-validators/video-channel-validators'
+import { FormValidatorService } from '@app/shared/shared-forms'
+import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
+import { ServerConfig, VideoChannelUpdate } from '@shared/models'
+import { MyVideoChannelEdit } from './my-video-channel-edit'
+
+@Component({
+  selector: 'my-video-channel-update',
+  templateUrl: './my-video-channel-edit.component.html',
+  styleUrls: [ './my-video-channel-edit.component.scss' ]
+})
+export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements OnInit, OnDestroy {
+  error: string
+  videoChannelToUpdate: VideoChannel
+
+  private paramsSub: Subscription
+  private oldSupportField: string
+  private serverConfig: ServerConfig
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private authService: AuthService,
+    private notifier: Notifier,
+    private router: Router,
+    private route: ActivatedRoute,
+    private videoChannelService: VideoChannelService,
+    private serverService: ServerService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.serverConfig = this.serverService.getTmpConfig()
+    this.serverService.getConfig()
+        .subscribe(config => this.serverConfig = config)
+
+    this.buildForm({
+      'display-name': VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
+      description: VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
+      support: VIDEO_CHANNEL_SUPPORT_VALIDATOR,
+      bulkVideosSupportUpdate: null
+    })
+
+    this.paramsSub = this.route.params.subscribe(routeParams => {
+      const videoChannelId = routeParams['videoChannelId']
+
+      this.videoChannelService.getVideoChannel(videoChannelId).subscribe(
+        videoChannelToUpdate => {
+          this.videoChannelToUpdate = videoChannelToUpdate
+
+          this.oldSupportField = videoChannelToUpdate.support
+
+          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 || null,
+      support: body.support || null,
+      bulkVideosSupportUpdate: body.bulkVideosSupportUpdate || false
+    }
+
+    this.videoChannelService.updateVideoChannel(this.videoChannelToUpdate.name, videoChannelUpdate).subscribe(
+      () => {
+        this.authService.refreshUserInformation()
+
+        this.notifier.success($localize`Video channel ${videoChannelUpdate.displayName} updated.`)
+
+        this.router.navigate([ '/my-library', 'video-channels' ])
+      },
+
+      err => this.error = err.message
+    )
+  }
+
+  onAvatarChange (formData: FormData) {
+    this.videoChannelService.changeVideoChannelAvatar(this.videoChannelToUpdate.name, formData)
+        .subscribe(
+          data => {
+            this.notifier.success($localize`Avatar changed.`)
+
+            this.videoChannelToUpdate.updateAvatar(data.avatar)
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+  get maxAvatarSize () {
+    return this.serverConfig.avatar.file.size.max
+  }
+
+  get avatarExtensions () {
+    return this.serverConfig.avatar.file.extensions.join(',')
+  }
+
+  isCreation () {
+    return false
+  }
+
+  getFormButtonTitle () {
+    return $localize`Update`
+  }
+
+  isBulkUpdateVideosDisplayed () {
+    if (this.oldSupportField === undefined) return false
+
+    return this.oldSupportField !== this.form.value['support']
+  }
+}
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels-routing.module.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels-routing.module.ts
new file mode 100644
index 000000000..6b8efad0b
--- /dev/null
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels-routing.module.ts
@@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { MyVideoChannelUpdateComponent } from './my-video-channel-update.component'
+import { MyVideoChannelCreateComponent } from './my-video-channel-create.component'
+import { MyVideoChannelsComponent } from './my-video-channels.component'
+
+const myVideoChannelsRoutes: Routes = [
+  {
+    path: '',
+    component: MyVideoChannelsComponent,
+    data: {
+      meta: {
+        title: $localize`My video channels`
+      }
+    }
+  },
+  {
+    path: 'create',
+    component: MyVideoChannelCreateComponent,
+    data: {
+      meta: {
+        title: $localize`Create a new video channel`
+      }
+    }
+  },
+  {
+    path: 'update/:videoChannelId',
+    component: MyVideoChannelUpdateComponent,
+    data: {
+      meta: {
+        title: $localize`Update video channel`
+      }
+    }
+  }
+]
+
+@NgModule({
+  imports: [ RouterModule.forChild(myVideoChannelsRoutes) ],
+  exports: [ RouterModule ]
+})
+export class MyVideoChannelsRoutingModule {}
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
new file mode 100644
index 000000000..205d23cd5
--- /dev/null
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -0,0 +1,49 @@
+<h1>
+  <span>
+    <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
+    <ng-container i18n>My channels</ng-container>
+    <span class="badge badge-secondary">{{ totalItems }}</span>
+  </span>
+</h1>
+
+<div class="video-channels-header d-flex justify-content-between">
+  <div class="has-feedback has-clear">
+    <input type="text" placeholder="Search your channels" i18n-placeholder [(ngModel)]="channelsSearch"
+      (ngModelChange)="onChannelsSearchChanged()" />
+    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
+    <span class="sr-only" i18n>Clear filters</span>
+  </div>
+
+  <a class="create-button" routerLink="create">
+    <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
+    <ng-container i18n>Create video channel</ng-container>
+  </a>
+</div>
+
+<div class="video-channels">
+  <div *ngFor="let videoChannel of videoChannels; let i = index" class="video-channel">
+    <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]">
+      <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+    </a>
+
+    <div class="video-channel-info">
+      <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">
+        <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
+        <div class="video-channel-name">{{ videoChannel.nameWithHost }}</div>
+      </a>
+
+      <div i18n class="video-channel-followers">{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
+
+      <div i18n class="video-channel-videos">{videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}}</div>
+
+      <div class="video-channel-buttons">
+        <my-edit-button label [routerLink]="[ 'update', videoChannel.nameWithHost ]"></my-edit-button>
+        <my-delete-button label (click)="deleteVideoChannel(videoChannel)"></my-delete-button>
+      </div>
+
+      <div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end">
+        <p-chart *ngIf="videoChannelsChartData && videoChannelsChartData[i]" type="line" [data]="videoChannelsChartData[i]" [options]="chartOptions" width="40vw" height="100px"></p-chart>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
new file mode 100644
index 000000000..f2f42459f
--- /dev/null
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
@@ -0,0 +1,125 @@
+@import '_variables';
+@import '_mixins';
+
+.create-button {
+  @include create-button;
+}
+
+input[type=text] {
+  @include peertube-input-text(300px);
+}
+
+::ng-deep .action-button {
+  &.action-button-edit {
+    margin-right: 10px;
+  }
+}
+
+.video-channel {
+  @include row-blocks;
+  padding-bottom: 0;
+
+  img {
+    @include avatar(80px);
+
+    margin-right: 10px;
+  }
+
+  .video-channel-info {
+    flex-grow: 1;
+
+    a.video-channel-names {
+      @include disable-default-a-behaviour;
+
+      width: fit-content;
+      display: flex;
+      align-items: baseline;
+      color: pvar(--mainForegroundColor);
+
+      .video-channel-display-name {
+        font-weight: $font-semibold;
+        font-size: 18px;
+      }
+
+      .video-channel-name {
+        font-size: 14px;
+        color: $grey-actor-name;
+        margin-left: 5px;
+      }
+    }
+  }
+
+  .video-channel-buttons {
+    margin-top: 10px;
+    min-width: 190px;
+  }
+}
+
+::ng-deep .chartjs-render-monitor {
+  position: relative;
+  top: 1px;
+}
+
+.video-channels-header {
+  margin-bottom: 30px;
+}
+
+@media screen and (max-width: $small-view) {
+  .video-channels-header {
+    text-align: center;
+  }
+
+  .video-channel {
+    padding-bottom: 10px;
+
+    .video-channel-info {
+      padding-bottom: 10px;
+      text-align: center;
+
+      .video-channel-names {
+        flex-direction: column;
+        align-items: center !important;
+        margin: auto;
+
+        .video-channel-name {
+          margin-left: 0px !important;
+        }
+      }
+    }
+
+    img {
+      margin-right: 0;
+    }
+
+    .video-channel-buttons {
+      align-self: center;
+    }
+  }
+}
+
+@media screen and (max-width: $mobile-view) {
+  .video-channels-header {
+    flex-direction: column;
+
+    input[type=text] {
+      width: 100% !important;
+      margin-bottom: 12px;
+    }
+  }
+}
+
+@media screen and (min-width: breakpoint(lg)) {
+  :host-context(.main-col:not(.expanded)) {
+    .video-channel-buttons {
+      float: right;
+    }
+  }
+}
+
+@media screen and (min-width: $small-view) {
+  :host-context(.expanded) {
+    .video-channel-buttons {
+      float: right;
+    }
+  }
+}
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
new file mode 100644
index 000000000..a63e98a51
--- /dev/null
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
@@ -0,0 +1,171 @@
+import { ChartData } from 'chart.js'
+import { max, maxBy, min, minBy } from 'lodash-es'
+import { Subject } from 'rxjs'
+import { debounceTime, mergeMap } from 'rxjs/operators'
+import { Component, OnInit } from '@angular/core'
+import { AuthService, ConfirmService, Notifier, ScreenService, User } from '@app/core'
+import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
+
+@Component({
+  templateUrl: './my-video-channels.component.html',
+  styleUrls: [ './my-video-channels.component.scss' ]
+})
+export class MyVideoChannelsComponent implements OnInit {
+  totalItems: number
+
+  videoChannels: VideoChannel[] = []
+  videoChannelsChartData: ChartData[]
+  videoChannelsMinimumDailyViews = 0
+  videoChannelsMaximumDailyViews: number
+
+  channelsSearch: string
+  channelsSearchChanged = new Subject<string>()
+
+  private user: User
+
+  constructor (
+    private authService: AuthService,
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private videoChannelService: VideoChannelService,
+    private screenService: ScreenService
+    ) {}
+
+  ngOnInit () {
+    this.user = this.authService.getUser()
+
+    this.loadVideoChannels()
+
+    this.channelsSearchChanged
+      .pipe(debounceTime(500))
+      .subscribe(() => {
+        this.loadVideoChannels()
+      })
+  }
+
+  get isInSmallView () {
+    return this.screenService.isInSmallView()
+  }
+
+  get chartOptions () {
+    return {
+      legend: {
+        display: false
+      },
+      scales: {
+        xAxes: [{
+          display: false
+        }],
+        yAxes: [{
+          display: false,
+          ticks: {
+            min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)),
+            max: Math.max(1, this.videoChannelsMaximumDailyViews)
+          }
+        }]
+      },
+      layout: {
+        padding: {
+          left: 15,
+          right: 15,
+          top: 10,
+          bottom: 0
+        }
+      },
+      elements: {
+        point: {
+          radius: 0
+        }
+      },
+      tooltips: {
+        mode: 'index',
+        intersect: false,
+        custom: function (tooltip: any) {
+          if (!tooltip) return
+          // disable displaying the color box
+          tooltip.displayColors = false
+        },
+        callbacks: {
+          label: (tooltip: any, data: any) => `${tooltip.value} views`
+        }
+      },
+      hover: {
+        mode: 'index',
+        intersect: false
+      }
+    }
+  }
+
+  resetSearch () {
+    this.channelsSearch = ''
+    this.onChannelsSearchChanged()
+  }
+
+  onChannelsSearchChanged () {
+    this.channelsSearchChanged.next()
+  }
+
+  async deleteVideoChannel (videoChannel: VideoChannel) {
+    const res = await this.confirmService.confirmWithInput(
+      $localize`Do you really want to delete ${videoChannel.displayName}?
+It will delete ${videoChannel.videosCount} videos uploaded in this channel, and you will not be able to create another
+channel with the same name (${videoChannel.name})!`,
+
+      $localize`Please type the display name of the video channel (${videoChannel.displayName}) to confirm`,
+
+      videoChannel.displayName,
+
+      $localize`Delete`
+    )
+    if (res === false) return
+
+    this.videoChannelService.removeVideoChannel(videoChannel)
+      .subscribe(
+        () => {
+          this.loadVideoChannels()
+          this.notifier.success($localize`Video channel ${videoChannel.displayName} deleted.`)
+        },
+
+        error => this.notifier.error(error.message)
+      )
+  }
+
+  private loadVideoChannels () {
+    this.authService.userInformationLoaded
+        .pipe(mergeMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account, null, true, this.channelsSearch)))
+        .subscribe(res => {
+          this.videoChannels = res.data
+          this.totalItems = res.total
+
+          // chart data
+          this.videoChannelsChartData = this.videoChannels.map(v => ({
+            labels: v.viewsPerDay.map(day => day.date.toLocaleDateString()),
+            datasets: [
+              {
+                label: $localize`Views for the day`,
+                data: v.viewsPerDay.map(day => day.views),
+                fill: false,
+                borderColor: '#c6c6c6'
+              }
+            ]
+          } as ChartData))
+
+          // chart options that depend on chart data:
+          // we don't want to skew values and have min at 0, so we define what the floor/ceiling is here
+          this.videoChannelsMinimumDailyViews = min(
+            // compute local minimum daily views for each channel, by their "views" attribute
+            this.videoChannels.map(v => minBy(
+              v.viewsPerDay,
+              day => day.views
+            ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
+          )
+          this.videoChannelsMaximumDailyViews = max(
+            // compute local maximum daily views for each channel, by their "views" attribute
+            this.videoChannels.map(v => maxBy(
+              v.viewsPerDay,
+              day => day.views
+            ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
+          )
+        })
+  }
+}
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts
new file mode 100644
index 000000000..92b56db49
--- /dev/null
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts
@@ -0,0 +1,31 @@
+import { ChartModule } from 'primeng/chart'
+import { NgModule } from '@angular/core'
+import { SharedFormModule } from '@app/shared/shared-forms'
+import { SharedGlobalIconModule } from '@app/shared/shared-icons'
+import { SharedMainModule } from '@app/shared/shared-main'
+import { MyVideoChannelCreateComponent } from './my-video-channel-create.component'
+import { MyVideoChannelUpdateComponent } from './my-video-channel-update.component'
+import { MyVideoChannelsRoutingModule } from './my-video-channels-routing.module'
+import { MyVideoChannelsComponent } from './my-video-channels.component'
+
+@NgModule({
+  imports: [
+    MyVideoChannelsRoutingModule,
+
+    ChartModule,
+
+    SharedMainModule,
+    SharedFormModule,
+    SharedGlobalIconModule
+  ],
+
+  declarations: [
+    MyVideoChannelsComponent,
+    MyVideoChannelCreateComponent,
+    MyVideoChannelUpdateComponent
+  ],
+
+  exports: [],
+  providers: []
+})
+export class MyVideoChannelsModule { }