From 43df00a30dc07ec6fc1b30d41eac011e4ea8641b Mon Sep 17 00:00:00 2001
From: kontrollanten <6680299+kontrollanten@users.noreply.github.com>
Date: Mon, 6 Dec 2021 05:54:26 +0100
Subject: [PATCH] give admins access to edit all channels

closes #4598
---
 .../my-video-channel-edit.component.html      | 112 ------------------
 .../my-video-channels-routing.module.ts       |  20 ----
 .../my-video-channels.component.html          |   4 +-
 .../my-video-channels.module.ts               |   8 +-
 .../video-channel-create.component.ts}        |   6 +-
 .../video-channel-edit.component.html         |  96 +++++++++++++++
 .../video-channel-edit.component.scss}        |   4 +
 .../video-channel-edit/video-channel-edit.ts} |   0
 .../video-channel-update.component.ts}        |  14 +--
 .../video-channels-routing.module.ts          |  21 ++++
 .../video-channels.component.html             |   4 +-
 .../video-channels.component.ts               |   8 +-
 .../+video-channels/video-channels.module.ts  |  10 +-
 server/controllers/api/video-channel.ts       |  11 +-
 server/middlewares/user-right.ts              |  20 +++-
 shared/models/users/user-right.enum.ts        |   4 +-
 16 files changed, 178 insertions(+), 164 deletions(-)
 delete mode 100644 client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html
 rename client/src/app/{+my-library/+my-video-channels/my-video-channel-create.component.ts => +video-channels/video-channel-edit/video-channel-create.component.ts} (94%)
 create mode 100644 client/src/app/+video-channels/video-channel-edit/video-channel-edit.component.html
 rename client/src/app/{+my-library/+my-video-channels/my-video-channel-edit.component.scss => +video-channels/video-channel-edit/video-channel-edit.component.scss} (96%)
 rename client/src/app/{+my-library/+my-video-channels/my-video-channel-edit.ts => +video-channels/video-channel-edit/video-channel-edit.ts} (100%)
 rename client/src/app/{+my-library/+my-video-channels/my-video-channel-update.component.ts => +video-channels/video-channel-edit/video-channel-update.component.ts} (92%)

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
deleted file mode 100644
index 2910dffad..000000000
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html
+++ /dev/null
@@ -1,112 +0,0 @@
-<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="videoChannel" [routerLink]="[ '/my-library/video-channels/update', videoChannel?.nameWithHost ]">{{ videoChannel?.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() && videoChannel" class="video-channel-title" i18n>CHANNEL</div>
-    </div>
-
-    <div class="form-group col-12 col-lg-8 col-xl-9">
-      <h6 i18n>Banner image of your channel</h6>
-
-      <my-actor-banner-edit
-        *ngIf="videoChannel" [previewImage]="isCreation()"
-        [actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
-      ></my-actor-banner-edit>
-
-      <my-actor-avatar-edit
-        *ngIf="videoChannel" [previewImage]="isCreation()"
-        [actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
-        [displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()"
-      ></my-actor-avatar-edit>
-
-      <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>
-
-      <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-channels-routing.module.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels-routing.module.ts
index 6b8efad0b..f103bacc4 100644
--- 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
@@ -1,7 +1,5 @@
 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 = [
@@ -13,24 +11,6 @@ const myVideoChannelsRoutes: Routes = [
         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`
-      }
-    }
   }
 ]
 
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
index bbe583971..92e2345ab 100644
--- 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
@@ -9,7 +9,7 @@
 <div class="video-channels-header d-flex justify-content-between">
   <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
 
-  <a class="create-button" routerLink="create">
+  <a class="create-button" routerLink="/c/@create">
     <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
     <ng-container i18n>Create video channel</ng-container>
   </a>
@@ -37,7 +37,7 @@
       <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-edit-button label [routerLink]="[ '/c', videoChannel.nameWithHost, 'update' ]"></my-edit-button>
         <my-delete-button label (click)="deleteVideoChannel(videoChannel)"></my-delete-button>
       </div>
 
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
index c775bfdee..a17eb9f10 100644
--- 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
@@ -1,11 +1,8 @@
 import { ChartModule } from 'primeng/chart'
 import { NgModule } from '@angular/core'
-import { SharedActorImageEditModule } from '@app/shared/shared-actor-image-edit'
 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'
 import { SharedActorImageModule } from '@app/shared/shared-actor-image/shared-actor-image.module'
@@ -19,14 +16,11 @@ import { SharedActorImageModule } from '@app/shared/shared-actor-image/shared-ac
     SharedMainModule,
     SharedFormModule,
     SharedGlobalIconModule,
-    SharedActorImageEditModule,
     SharedActorImageModule
   ],
 
   declarations: [
-    MyVideoChannelsComponent,
-    MyVideoChannelCreateComponent,
-    MyVideoChannelUpdateComponent
+    MyVideoChannelsComponent
   ],
 
   exports: [],
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts b/client/src/app/+video-channels/video-channel-edit/video-channel-create.component.ts
similarity index 94%
rename from client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts
rename to client/src/app/+video-channels/video-channel-edit/video-channel-create.component.ts
index fd00720d8..a7b365dbf 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts
+++ b/client/src/app/+video-channels/video-channel-edit/video-channel-create.component.ts
@@ -12,11 +12,11 @@ import {
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { HttpStatusCode, VideoChannelCreate } from '@shared/models'
-import { MyVideoChannelEdit } from './my-video-channel-edit'
+import { MyVideoChannelEdit } from './video-channel-edit'
 
 @Component({
-  templateUrl: './my-video-channel-edit.component.html',
-  styleUrls: [ './my-video-channel-edit.component.scss' ]
+  templateUrl: './video-channel-edit.component.html',
+  styleUrls: [ './video-channel-edit.component.scss' ]
 })
 export class MyVideoChannelCreateComponent extends MyVideoChannelEdit implements OnInit {
   error: string
diff --git a/client/src/app/+video-channels/video-channel-edit/video-channel-edit.component.html b/client/src/app/+video-channels/video-channel-edit/video-channel-edit.component.html
new file mode 100644
index 000000000..3751747a9
--- /dev/null
+++ b/client/src/app/+video-channels/video-channel-edit/video-channel-edit.component.html
@@ -0,0 +1,96 @@
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+<div class="margin-content">
+  <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() && videoChannel" class="video-channel-title" i18n>CHANNEL</div>
+      </div>
+  
+      <div class="form-group col-12 col-lg-8 col-xl-9">
+        <h6 i18n>Banner image of the channel</h6>
+  
+        <my-actor-banner-edit
+          *ngIf="videoChannel" [previewImage]="isCreation()"
+          [actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
+        ></my-actor-banner-edit>
+  
+        <my-actor-avatar-edit
+          *ngIf="videoChannel" [previewImage]="isCreation()"
+          [actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
+          [displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()"
+        ></my-actor-avatar-edit>
+  
+        <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>
+  
+        <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 the channel (membership platform...).<br /><br />
+      When a video is uploaded 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>  
+</div>
\ No newline at end of file
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss b/client/src/app/+video-channels/video-channel-edit/video-channel-edit.component.scss
similarity index 96%
rename from client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
rename to client/src/app/+video-channels/video-channel-edit/video-channel-edit.component.scss
index d8bfe71b6..d010d6277 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
+++ b/client/src/app/+video-channels/video-channel-edit/video-channel-edit.component.scss
@@ -1,6 +1,10 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
+.margin-content {
+  padding-top: 20px;
+}
+
 label {
   font-weight: $font-regular;
   font-size: 100%;
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts b/client/src/app/+video-channels/video-channel-edit/video-channel-edit.ts
similarity index 100%
rename from client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts
rename to client/src/app/+video-channels/video-channel-edit/video-channel-edit.ts
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts b/client/src/app/+video-channels/video-channel-edit/video-channel-update.component.ts
similarity index 92%
rename from client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts
rename to client/src/app/+video-channels/video-channel-edit/video-channel-update.component.ts
index f9521b8b5..96cb4c6b6 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts
+++ b/client/src/app/+video-channels/video-channel-edit/video-channel-update.component.ts
@@ -12,14 +12,14 @@ import {
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { HTMLServerConfig, VideoChannelUpdate } from '@shared/models'
-import { MyVideoChannelEdit } from './my-video-channel-edit'
+import { MyVideoChannelEdit } from './video-channel-edit'
 
 @Component({
   selector: 'my-video-channel-update',
-  templateUrl: './my-video-channel-edit.component.html',
-  styleUrls: [ './my-video-channel-edit.component.scss' ]
+  templateUrl: './video-channel-edit.component.html',
+  styleUrls: [ './video-channel-edit.component.scss' ]
 })
-export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements OnInit, OnDestroy {
+export class VideoChannelUpdateComponent extends MyVideoChannelEdit implements OnInit, OnDestroy {
   error: string
   videoChannel: VideoChannel
 
@@ -50,9 +50,9 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
     })
 
     this.paramsSub = this.route.params.subscribe(routeParams => {
-      const videoChannelId = routeParams['videoChannelId']
+      const videoChannelName = routeParams['videoChannelName']
 
-      this.videoChannelService.getVideoChannel(videoChannelId)
+      this.videoChannelService.getVideoChannel(videoChannelName)
         .subscribe({
           next: videoChannelToUpdate => {
             this.videoChannel = videoChannelToUpdate
@@ -95,7 +95,7 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
 
           this.notifier.success($localize`Video channel ${videoChannelUpdate.displayName} updated.`)
 
-          this.router.navigate([ '/my-library', 'video-channels' ])
+          this.router.navigate([ '/c', this.videoChannel.name ])
         },
 
         error: err => {
diff --git a/client/src/app/+video-channels/video-channels-routing.module.ts b/client/src/app/+video-channels/video-channels-routing.module.ts
index 4ee052873..ae5c601a3 100644
--- a/client/src/app/+video-channels/video-channels-routing.module.ts
+++ b/client/src/app/+video-channels/video-channels-routing.module.ts
@@ -1,10 +1,21 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
+import { MyVideoChannelCreateComponent } from './video-channel-edit/video-channel-create.component'
+import { VideoChannelUpdateComponent } from './video-channel-edit/video-channel-update.component'
 import { VideoChannelPlaylistsComponent } from './video-channel-playlists/video-channel-playlists.component'
 import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component'
 import { VideoChannelsComponent } from './video-channels.component'
 
 const videoChannelsRoutes: Routes = [
+  {
+    path: '@create',
+    component: MyVideoChannelCreateComponent,
+    data: {
+      meta: {
+        title: $localize`Create a new video channel`
+      }
+    }
+  },
   {
     path: ':videoChannelName',
     component: VideoChannelsComponent,
@@ -37,6 +48,16 @@ const videoChannelsRoutes: Routes = [
         }
       }
     ]
+  },
+  {
+    path: ':videoChannelName/update',
+    component: VideoChannelUpdateComponent,
+
+    data: {
+      meta: {
+        title: $localize`Update video channel`
+      }
+    }
   }
 ]
 
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 064fbb6f5..861a51574 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -6,11 +6,11 @@
   <div class="channel-info">
 
     <ng-template #buttonsTemplate>
-      <a *ngIf="isManageable()" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="peertube-button-link orange-button" i18n>
+      <a *ngIf="isManageable()" [routerLink]="[ 'update' ]" class="peertube-button-link orange-button" i18n>
         Manage channel
       </a>
 
-      <my-subscribe-button *ngIf="!isManageable()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
+      <my-subscribe-button *ngIf="!isOwner()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
 
       <button *ngIf="videoChannel.support" (click)="showSupportModal()" class="support-button peertube-button orange-button-inverted">
         <my-global-icon iconName="support" aria-hidden="true"></my-global-icon>
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index 272fc41d9..c8a6cdd92 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -7,7 +7,7 @@ import { AuthService, MarkdownService, Notifier, RestExtractor, ScreenService }
 import { ListOverflowItem, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
 import { SupportModalComponent } from '@app/shared/shared-support-modal'
 import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
-import { HttpStatusCode } from '@shared/models'
+import { HttpStatusCode, UserRight } from '@shared/models'
 
 @Component({
   templateUrl: './video-channels.component.html',
@@ -93,10 +93,14 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
     return this.authService.isLoggedIn()
   }
 
+  isOwner () {
+    return this.videoChannel?.ownerAccount.userId === this.authService.getUser().id
+  }
+
   isManageable () {
     if (!this.isUserLoggedIn()) return false
 
-    return this.videoChannel?.ownerAccount.userId === this.authService.getUser().id
+    return this.isOwner() || this.authService.getUser().hasRight(UserRight.MANAGE_VIDEO_CHANNELS)
   }
 
   activateCopiedMessage () {
diff --git a/client/src/app/+video-channels/video-channels.module.ts b/client/src/app/+video-channels/video-channels.module.ts
index 35c39cc2e..26f89c68a 100644
--- a/client/src/app/+video-channels/video-channels.module.ts
+++ b/client/src/app/+video-channels/video-channels.module.ts
@@ -11,6 +11,9 @@ import { VideoChannelVideosComponent } from './video-channel-videos/video-channe
 import { VideoChannelsRoutingModule } from './video-channels-routing.module'
 import { VideoChannelsComponent } from './video-channels.component'
 import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module'
+import { MyVideoChannelCreateComponent } from './video-channel-edit/video-channel-create.component'
+import { VideoChannelUpdateComponent } from './video-channel-edit/video-channel-update.component'
+import { SharedActorImageEditModule } from '@app/shared/shared-actor-image-edit'
 
 @NgModule({
   imports: [
@@ -23,13 +26,16 @@ import { SharedActorImageModule } from '../shared/shared-actor-image/shared-acto
     SharedUserSubscriptionModule,
     SharedGlobalIconModule,
     SharedSupportModal,
-    SharedActorImageModule
+    SharedActorImageModule,
+    SharedActorImageEditModule
   ],
 
   declarations: [
     VideoChannelsComponent,
     VideoChannelVideosComponent,
-    VideoChannelPlaylistsComponent
+    VideoChannelPlaylistsComponent,
+    MyVideoChannelCreateComponent,
+    VideoChannelUpdateComponent
   ],
 
   exports: [
diff --git a/server/controllers/api/video-channel.ts b/server/controllers/api/video-channel.ts
index d1a1e6473..b29162787 100644
--- a/server/controllers/api/video-channel.ts
+++ b/server/controllers/api/video-channel.ts
@@ -24,6 +24,7 @@ import {
   asyncRetryTransactionMiddleware,
   authenticate,
   commonVideosFiltersValidator,
+  ensureUserCanManageChannel,
   optionalAuthenticate,
   paginationValidator,
   setDefaultPagination,
@@ -74,7 +75,7 @@ videoChannelRouter.post('/:nameWithHost/avatar/pick',
   authenticate,
   reqAvatarFile,
   asyncMiddleware(videoChannelsNameWithHostValidator),
-  ensureAuthUserOwnsChannelValidator,
+  ensureUserCanManageChannel,
   updateAvatarValidator,
   asyncMiddleware(updateVideoChannelAvatar)
 )
@@ -83,7 +84,7 @@ videoChannelRouter.post('/:nameWithHost/banner/pick',
   authenticate,
   reqBannerFile,
   asyncMiddleware(videoChannelsNameWithHostValidator),
-  ensureAuthUserOwnsChannelValidator,
+  ensureUserCanManageChannel,
   updateBannerValidator,
   asyncMiddleware(updateVideoChannelBanner)
 )
@@ -91,21 +92,21 @@ videoChannelRouter.post('/:nameWithHost/banner/pick',
 videoChannelRouter.delete('/:nameWithHost/avatar',
   authenticate,
   asyncMiddleware(videoChannelsNameWithHostValidator),
-  ensureAuthUserOwnsChannelValidator,
+  ensureUserCanManageChannel,
   asyncMiddleware(deleteVideoChannelAvatar)
 )
 
 videoChannelRouter.delete('/:nameWithHost/banner',
   authenticate,
   asyncMiddleware(videoChannelsNameWithHostValidator),
-  ensureAuthUserOwnsChannelValidator,
+  ensureUserCanManageChannel,
   asyncMiddleware(deleteVideoChannelBanner)
 )
 
 videoChannelRouter.put('/:nameWithHost',
   authenticate,
   asyncMiddleware(videoChannelsNameWithHostValidator),
-  ensureAuthUserOwnsChannelValidator,
+  ensureUserCanManageChannel,
   videoChannelsUpdateValidator,
   asyncRetryTransactionMiddleware(updateVideoChannel)
 )
diff --git a/server/middlewares/user-right.ts b/server/middlewares/user-right.ts
index ea95b16c2..e864d1bc5 100644
--- a/server/middlewares/user-right.ts
+++ b/server/middlewares/user-right.ts
@@ -20,8 +20,26 @@ function ensureUserHasRight (userRight: UserRight) {
   }
 }
 
+function ensureUserCanManageChannel (req: express.Request, res: express.Response, next: express.NextFunction) {
+  const user = res.locals.oauth.token.user
+  const isUserOwner = res.locals.videoChannel.Account.userId !== user.id
+
+  if (isUserOwner && user.hasRight(UserRight.MANAGE_VIDEO_CHANNELS) === false) {
+    const message = `User ${user.username} does not have right to manage channel ${req.params.nameWithHost}.`
+    logger.info(message)
+
+    return res.fail({
+      status: HttpStatusCode.FORBIDDEN_403,
+      message
+    })
+  }
+
+  return next()
+}
+
 // ---------------------------------------------------------------------------
 
 export {
-  ensureUserHasRight
+  ensureUserHasRight,
+  ensureUserCanManageChannel
 }
diff --git a/shared/models/users/user-right.enum.ts b/shared/models/users/user-right.enum.ts
index 6415ca6f2..b35345ec9 100644
--- a/shared/models/users/user-right.enum.ts
+++ b/shared/models/users/user-right.enum.ts
@@ -41,5 +41,7 @@ export const enum UserRight {
   MANAGE_VIDEOS_REDUNDANCIES,
 
   MANAGE_VIDEO_FILES,
-  RUN_VIDEO_TRANSCODING
+  RUN_VIDEO_TRANSCODING,
+
+  MANAGE_VIDEO_CHANNELS
 }