Migrate client to eslint

176 files changed, 777 insertions, 706 deletions

diff --git a/client/src/app/+about/about-follows/about-follows.component.ts b/client/src/app/+about/about-follows/about-follows.component.ts
index 1dcb6396c..a35272681 100644
--- a/client/src/app/+about/about-follows/about-follows.component.ts
+++ b/client/src/app/+about/about-follows/about-follows.component.ts
@@ -90,7 +90,7 @@ export class AboutFollowsComponent implements OnInit {
   private loadMoreFollowers (reset = false) {
     const pagination = this.restService.componentPaginationToRestPagination(this.followersPagination)
 
-    this.followService.getFollowers({ pagination: pagination, sort: this.sort, state: 'accepted' })
+    this.followService.getFollowers({ pagination, sort: this.sort, state: 'accepted' })
         .subscribe({
           next: resultList => {
             if (reset) this.followers = []
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index f86df5b67..0826bbc5a 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -95,6 +95,6 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
   onClickCopyLink (anchor: HTMLAnchorElement) {
     const link = anchor.href
     copyToClipboard(link)
-    this.notifier.success(link, $localize `Link copied`)
+    this.notifier.success(link, $localize`Link copied`)
   }
 }
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.ts b/client/src/app/+about/about-instance/contact-admin-modal.component.ts
index cbc759881..fab9cfc4b 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.ts
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.ts
@@ -77,10 +77,10 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit {
   }
 
   sendForm () {
-    const fromName = this.form.value[ 'fromName' ]
-    const fromEmail = this.form.value[ 'fromEmail' ]
-    const subject = this.form.value[ 'subject' ]
-    const body = this.form.value[ 'body' ]
+    const fromName = this.form.value['fromName']
+    const fromEmail = this.form.value['fromEmail']
+    const subject = this.form.value['subject']
+    const body = this.form.value['body']
 
     this.instanceService.contactAdministrator(fromEmail, fromName, subject, body)
         .subscribe({
diff --git a/client/src/app/+about/about-routing.module.ts b/client/src/app/+about/about-routing.module.ts
index 3974231e3..cf5570d31 100644
--- a/client/src/app/+about/about-routing.module.ts
+++ b/client/src/app/+about/about-routing.module.ts
@@ -3,7 +3,6 @@ import { RouterModule, Routes } from '@angular/router'
 import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component'
 import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component'
 import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance.resolver'
-import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
 import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
 import { AboutComponent } from './about.component'
 
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
index e146a5cd2..f6df38857 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
@@ -1,10 +1,10 @@
 import { from, Subject, Subscription } from 'rxjs'
 import { concatMap, map, switchMap, tap } from 'rxjs/operators'
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ComponentPagination, hasMoreItems, MarkdownService, ScreenService, User, UserService } from '@app/core'
+import { ComponentPagination, hasMoreItems, MarkdownService, User, UserService } from '@app/core'
 import { Account, AccountService, Video, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
-import { NSFWPolicyType, VideoSortField } from '@shared/models'
 import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature'
+import { NSFWPolicyType, VideoSortField } from '@shared/models'
 
 @Component({
   selector: 'my-account-video-channels',
@@ -87,7 +87,9 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
 
     this.videoChannelService.listAccountVideoChannels(options)
       .pipe(
-        tap(res => this.channelPagination.totalItems = res.total),
+        tap(res => {
+          this.channelPagination.totalItems = res.total
+        }),
         switchMap(res => from(res.data)),
         concatMap(videoChannel => {
           const options = {
@@ -113,14 +115,14 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
   }
 
   getVideosOf (videoChannel: VideoChannel) {
-    const obj = this.videos[ videoChannel.id ]
+    const obj = this.videos[videoChannel.id]
     if (!obj) return []
 
     return obj.videos
   }
 
   getTotalVideosOf (videoChannel: VideoChannel) {
-    const obj = this.videos[ videoChannel.id ]
+    const obj = this.videos[videoChannel.id]
     if (!obj) return undefined
 
     return obj.total
diff --git a/client/src/app/+accounts/account-videos/account-videos.component.ts b/client/src/app/+accounts/account-videos/account-videos.component.ts
index 75af45e90..4ab6d2147 100644
--- a/client/src/app/+accounts/account-videos/account-videos.component.ts
+++ b/client/src/app/+accounts/account-videos/account-videos.component.ts
@@ -1,5 +1,5 @@
 import { forkJoin, Subscription } from 'rxjs'
-import { first, tap } from 'rxjs/operators'
+import { first } from 'rxjs/operators'
 import { Component, ComponentFactoryResolver, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index cb3e79a18..0906992fe 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -71,14 +71,14 @@
       <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
     </ng-template>
 
-    <list-overflow [hidden]="hideMenu" [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
+    <my-list-overflow [hidden]="hideMenu" [items]="links" [itemTemplate]="linkTemplate"></my-list-overflow>
 
-    <simple-search-input
+    <my-simple-search-input
       [alwaysShow]="!isInSmallView()" (searchChanged)="searchChanged($event)"
       (inputDisplayChanged)="onSearchInputDisplayChanged($event)" name="search-videos"
       i18n-iconTitle icon-title="Search account videos"
       i18n-placeholder placeholder="Search account videos"
-    ></simple-search-input>
+    ></my-simple-search-input>
   </div>
 
   <router-outlet (activate)="onOutletLoaded($event)"></router-outlet>
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index 25eb13588..733cff8d5 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -61,7 +61,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
   ngOnInit () {
     this.routeSub = this.route.params
                         .pipe(
-                          map(params => params[ 'accountId' ]),
+                          map(params => params['accountId']),
                           distinctUntilChanged(),
                           switchMap(accountId => this.accountService.getAccount(accountId)),
                           tap(account => this.onAccount(account)),
@@ -72,7 +72,9 @@ export class AccountsComponent implements OnInit, OnDestroy {
                           ]))
                         )
                         .subscribe({
-                          next: videoChannels => this.videoChannels = videoChannels.data,
+                          next: videoChannels => {
+                            this.videoChannels = videoChannels.data
+                          },
 
                           error: err => this.notifier.error(err.message)
                         })
@@ -176,7 +178,9 @@ export class AccountsComponent implements OnInit, OnDestroy {
     if (user.hasRight(UserRight.MANAGE_USERS)) {
       this.userService.getUser(account.userId)
         .subscribe({
-          next: accountUser => this.accountUser = accountUser,
+          next: accountUser => {
+            this.accountUser = accountUser
+          },
 
           error: err => this.notifier.error(err.message)
         })
@@ -209,6 +213,8 @@ export class AccountsComponent implements OnInit, OnDestroy {
         itemsPerPage: 0
       },
       sort: '-publishedAt'
-    }).subscribe(res => this.accountVideosCount = res.total)
+    }).subscribe(res => {
+      this.accountVideosCount = res.total
+    })
   }
 }
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
index 671e734ac..7a8258820 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
@@ -97,7 +97,7 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
       .pipe(pairwise())
       .subscribe(([ oldValue, newValue ]) => {
         if (oldValue !== true && newValue === true) {
-          // tslint:disable:max-line-length
+          /* eslint-disable max-len */
           this.signupAlertMessage = $localize`You enabled signup: we automatically enabled the "Block new videos automatically" checkbox of the "Videos" section just below.`
 
           this.form.patchValue({
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index 538fa6f14..be1a99289 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -277,7 +277,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
 
           // Reload general configuration
           this.serverService.resetConfig()
-            .subscribe(config => this.serverConfig = config)
+            .subscribe(config => {
+              this.serverConfig = config
+            })
 
           this.updateForm()
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts
index 1923ede39..dc834da14 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input } from '@angular/core'
 import { FormGroup } from '@angular/forms'
 import { CustomMarkupService } from '@app/shared/shared-custom-markup'
 
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts
index cf0225098..383f66ffd 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.ts
+++ b/client/src/app/+admin/follows/following-list/following-list.component.ts
@@ -2,7 +2,6 @@ import { SortMeta } from 'primeng/api'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
 import { InstanceFollowService } from '@app/shared/shared-instance'
-import { BatchDomainsModalComponent } from '@app/shared/shared-moderation'
 import { ActorFollow } from '@shared/models'
 import { FollowModalComponent } from './follow-modal.component'
 
@@ -22,7 +21,7 @@ export class FollowingListComponent extends RestTable implements OnInit {
     private notifier: Notifier,
     private confirmService: ConfirmService,
     private followService: InstanceFollowService
-    ) {
+  ) {
     super()
   }
 
diff --git a/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts b/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts
index 47c402510..95f8473db 100644
--- a/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts
+++ b/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts
@@ -14,7 +14,7 @@ export class RedundancyCheckboxComponent {
   constructor (
     private notifier: Notifier,
     private redundancyService: RedundancyService
-    ) { }
+  ) { }
 
   updateRedundancyState () {
     this.redundancyService.updateRedundancy(this.host, this.redundancyAllowed)
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
index 4c691269a..7ffed83e8 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
@@ -21,7 +21,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
   displayType: VideoRedundanciesTarget = 'my-videos'
 
-  redundanciesGraphsData: { stats: VideosRedundancyStats, graphData: object, options: object }[] = []
+  redundanciesGraphsData: { stats: VideosRedundancyStats, graphData: any, options: any }[] = []
 
   noRedundancies = false
 
@@ -32,7 +32,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
     private confirmService: ConfirmService,
     private redundancyService: RedundancyService,
     private serverService: ServerService
-    ) {
+  ) {
     super()
 
     this.bytesPipe = new BytesPipe()
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
index d89c8f244..3a8df1f07 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@@ -21,7 +21,7 @@
 
   <ng-template pTemplate="header">
     <tr>
-      <th style="width: 40px"></th>
+      <th style="width: 40px;"></th>
       <th style="width: 150px;"></th>
       <th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th>
       <th style="width: 100px;" i18n>Sensitive</th>
@@ -54,7 +54,7 @@
             </div>
             <div class="table-video-text">
               <div>
-                <my-global-icon i18n-title title="The video was blocked due to automatic blocking of new videos" *ngIf="videoBlock.type == 2" iconName="robot"></my-global-icon>
+                <my-global-icon i18n-title title="The video was blocked due to automatic blocking of new videos" *ngIf="videoBlock.type === 2" iconName="robot"></my-global-icon>
                 {{ videoBlock.video.name }}
               </div>
               <div class="text-muted">by {{ videoBlock.video.channel?.displayName }} on {{ videoBlock.video.channel?.host }} </div>
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
index adef16975..3edcb1c63 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
@@ -28,11 +28,11 @@ export class VideoBlockListComponent extends RestTable implements OnInit {
 
   inputFilters: AdvancedInputFilter[] = [
     {
-      queryParams: { 'search': 'type:auto' },
+      queryParams: { search: 'type:auto' },
       label: $localize`Automatic blocks`
     },
     {
-      queryParams: { 'search': 'type:manual' },
+      queryParams: { search: 'type:manual' },
       label: $localize`Manual blocks`
     }
   ]
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
index 4904bcc25..512ceffd9 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
@@ -44,11 +44,11 @@ export class VideoCommentListComponent extends RestTable implements OnInit {
 
   inputFilters: AdvancedInputFilter[] = [
     {
-      queryParams: { 'search': 'local:true' },
+      queryParams: { search: 'local:true' },
       label: $localize`Local comments`
     },
     {
-      queryParams: { 'search': 'local:false' },
+      queryParams: { search: 'local:false' },
       label: $localize`Remote comments`
     }
   ]
@@ -66,7 +66,7 @@ export class VideoCommentListComponent extends RestTable implements OnInit {
     private videoCommentService: VideoCommentService,
     private markdownRenderer: MarkdownService,
     private bulkService: BulkService
-    ) {
+  ) {
     super()
 
     this.videoCommentActions = [
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 8d8f12c48..a41c7d700 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -3,7 +3,7 @@
 </div>
 
 <div class="search-bar">
-  <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..." autofocus />
+  <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..." myAutofocus />
 </div>
 
 <div class="alert alert-info" i18n *ngIf="pluginInstalled">
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
index 10fb52911..402bef1ea 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
@@ -103,8 +103,8 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
     const settingsValues: any = {}
 
     for (const setting of this.registeredSettings) {
-      buildOptions[ setting.name ] = null
-      settingsValues[ setting.name ] = this.getSetting(setting.name)
+      buildOptions[setting.name] = null
+      settingsValues[setting.name] = this.getSetting(setting.name)
     }
 
     this.buildForm(buildOptions)
@@ -117,7 +117,7 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
   private getSetting (name: string) {
     const settings = this.plugin.settings
 
-    if (settings && settings[name] !== undefined) return settings[name]
+    if (settings?.[name] !== undefined) return settings[name]
 
     const registered = this.registeredSettings.find(r => r.name === name)
 
diff --git a/client/src/app/+admin/plugins/shared/plugin-api.service.ts b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
index d91fccc09..c4f480cae 100644
--- a/client/src/app/+admin/plugins/shared/plugin-api.service.ts
+++ b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
@@ -1,10 +1,8 @@
-import { Observable } from 'rxjs'
-import { catchError, map, switchMap } from 'rxjs/operators'
+import { catchError } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { ComponentPagination, RestExtractor, RestService } from '@app/core'
 import { PluginService } from '@app/core/plugins/plugin.service'
-import { peertubeTranslate } from '@shared/core-utils/i18n'
 import {
   InstallOrUpdatePlugin,
   ManagePlugin,
diff --git a/client/src/app/+admin/system/jobs/job.service.ts b/client/src/app/+admin/system/jobs/job.service.ts
index 4b4a8914f..6c4a07469 100644
--- a/client/src/app/+admin/system/jobs/job.service.ts
+++ b/client/src/app/+admin/system/jobs/job.service.ts
@@ -20,9 +20,9 @@ export class JobService {
   ) {}
 
   getJobs (options: {
-    jobState?: JobStateClient,
-    jobType: JobTypeClient,
-    pagination: RestPagination,
+    jobState?: JobStateClient
+    jobType: JobTypeClient
+    pagination: RestPagination
     sort: SortMeta
   }): Observable<ResultList<Job>> {
     const { jobState, jobType, pagination, sort } = options
@@ -32,7 +32,7 @@ export class JobService {
 
     if (jobType !== 'all') params = params.append('jobType', jobType)
 
-    return this.authHttp.get<ResultList<Job>>(JobService.BASE_JOB_URL + `/${jobState ? jobState : ''}`, { params })
+    return this.authHttp.get<ResultList<Job>>(JobService.BASE_JOB_URL + `/${jobState || ''}`, { params })
                .pipe(
                  map(res => {
                    return this.restExtractor.convertResultListDateToHuman(res, [ 'createdAt', 'processedOn', 'finishedOn' ])
diff --git a/client/src/app/+admin/system/logs/logs.service.ts b/client/src/app/+admin/system/logs/logs.service.ts
index 69439a179..0c222cad2 100644
--- a/client/src/app/+admin/system/logs/logs.service.ts
+++ b/client/src/app/+admin/system/logs/logs.service.ts
@@ -18,9 +18,9 @@ export class LogsService {
   ) {}
 
   getLogs (options: {
-    isAuditLog: boolean,
-    startDate: string,
-    level?: LogLevel,
+    isAuditLog: boolean
+    startDate: string
+    level?: LogLevel
     endDate?: string
   }): Observable<any[]> {
     const { isAuditLog, startDate } = options
diff --git a/client/src/app/+admin/users/user-edit/user-create.component.ts b/client/src/app/+admin/users/user-edit/user-create.component.ts
index 8403db91a..b61b22fd0 100644
--- a/client/src/app/+admin/users/user-edit/user-create.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-create.component.ts
@@ -33,7 +33,7 @@ export class UserCreateComponent extends UserEdit implements OnInit {
     private router: Router,
     private notifier: Notifier,
     private userService: UserService
-    ) {
+  ) {
     super()
 
     this.buildQuotaOptions()
@@ -78,7 +78,9 @@ export class UserCreateComponent extends UserEdit implements OnInit {
           this.router.navigate([ '/admin/users/list' ])
         },
 
-        error: err => this.error = err.message
+        error: err => {
+          this.error = err.message
+        }
       })
   }
 
diff --git a/client/src/app/+admin/users/user-edit/user-edit.ts b/client/src/app/+admin/users/user-edit/user-edit.ts
index ae1f79ba0..af5e674a7 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.ts
+++ b/client/src/app/+admin/users/user-edit/user-edit.ts
@@ -7,7 +7,7 @@ import { HTMLServerConfig, UserAdminFlag, UserRole, VideoResolution } from '@sha
 import { SelectOptionsItem } from '../../../../types/select-options-item.model'
 
 @Directive()
-// tslint:disable-next-line: directive-class-suffix
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class UserEdit extends FormReactive implements OnInit {
   videoQuotaOptions: SelectOptionsItem[] = []
   videoQuotaDailyOptions: SelectOptionsItem[] = []
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.ts b/client/src/app/+admin/users/user-edit/user-password.component.ts
index 7c42b9241..42bf20de1 100644
--- a/client/src/app/+admin/users/user-edit/user-password.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-password.component.ts
@@ -20,7 +20,7 @@ export class UserPasswordComponent extends FormReactive implements OnInit {
     protected formValidatorService: FormValidatorService,
     private notifier: Notifier,
     private userService: UserService
-    ) {
+  ) {
     super()
   }
 
@@ -39,7 +39,9 @@ export class UserPasswordComponent extends FormReactive implements OnInit {
       .subscribe({
         next: () => this.notifier.success($localize`Password changed for user ${this.username}.`),
 
-        error: err => this.error = err.message
+        error: err => {
+          this.error = err.message
+        }
       })
   }
 
diff --git a/client/src/app/+admin/users/user-edit/user-update.component.ts b/client/src/app/+admin/users/user-edit/user-update.component.ts
index 2128ba4fd..42599a17e 100644
--- a/client/src/app/+admin/users/user-edit/user-update.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-update.component.ts
@@ -33,7 +33,7 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
     private router: Router,
     private notifier: Notifier,
     private userService: UserService
-    ) {
+  ) {
     super()
 
     this.buildQuotaOptions()
@@ -63,7 +63,9 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
         .subscribe({
           next: user => this.onUserFetched(user),
 
-          error: err => this.error = err.message
+          error: err => {
+            this.error = err.message
+          }
         })
     })
   }
@@ -91,7 +93,9 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
           this.router.navigate([ '/admin/users/list' ])
         },
 
-        error: err => this.error = err.message
+        error: err => {
+          this.error = err.message
+        }
       })
   }
 
@@ -114,7 +118,9 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
           this.notifier.success($localize`An email asking for password reset has been sent to ${this.user.username}.`)
         },
 
-        error: err => this.error = err.message
+        error: err => {
+          this.error = err.message
+        }
       })
   }
 
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index d4406549a..39caf5ed5 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -36,7 +36,7 @@ export class UserListComponent extends RestTable implements OnInit {
 
   inputFilters: AdvancedInputFilter[] = [
     {
-      queryParams: { 'search': 'banned:true' },
+      queryParams: { search: 'banned:true' },
       label: $localize`Banned users`
     }
   ]
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 27793ff0c..0be67368e 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -21,7 +21,7 @@
               <label i18n for="username">User</label>
               <input
                 type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1"
-                formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" autofocus
+                formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" myAutofocus
               >
             </div>
 
diff --git a/client/src/app/+login/login.component.ts b/client/src/app/+login/login.component.ts
index 16876afd6..1fa4bd3b5 100644
--- a/client/src/app/+login/login.component.ts
+++ b/client/src/app/+login/login.component.ts
@@ -46,7 +46,7 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
     private redirectService: RedirectService,
     private notifier: Notifier,
     private hooks: HooksService
-    ) {
+  ) {
     super()
   }
 
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.ts b/client/src/app/+my-account/my-account-applications/my-account-applications.component.ts
index 6873c7d40..e88cdd228 100644
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.ts
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.ts
@@ -36,6 +36,7 @@ export class MyAccountApplicationsComponent implements OnInit {
 
   async renewToken () {
     const res = await this.confirmService.confirm(
+      // eslint-disable-next-line max-len
       $localize`Renewing the token will disallow previously configured clients from retrieving the feed until they use the new token. Proceed?`,
       $localize`Renew token`
     )
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
index 08bc5b425..9b87daa40 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
@@ -28,7 +28,7 @@ export class MyAccountChangeEmailComponent extends FormReactive implements OnIni
   ngOnInit () {
     this.buildForm({
       'new-email': USER_EMAIL_VALIDATOR,
-      'password': USER_PASSWORD_VALIDATOR
+      password: USER_PASSWORD_VALIDATOR
     })
 
     this.user = this.authService.getUser()
@@ -38,8 +38,8 @@ export class MyAccountChangeEmailComponent extends FormReactive implements OnIni
     this.error = null
     this.success = null
 
-    const password = this.form.value[ 'password' ]
-    const email = this.form.value[ 'new-email' ]
+    const password = this.form.value['password']
+    const email = this.form.value['new-email']
 
     forkJoin([
       this.serverService.getConfig(),
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
index f91b2f37b..47e54dc23 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
@@ -1,7 +1,11 @@
 import { filter } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
 import { AuthService, Notifier, UserService } from '@app/core'
-import { USER_CONFIRM_PASSWORD_VALIDATOR, USER_PASSWORD_VALIDATOR, USER_EXISTING_PASSWORD_VALIDATOR } from '@app/shared/form-validators/user-validators'
+import {
+  USER_CONFIRM_PASSWORD_VALIDATOR,
+  USER_EXISTING_PASSWORD_VALIDATOR,
+  USER_PASSWORD_VALIDATOR
+} from '@app/shared/form-validators/user-validators'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { User } from '@shared/models'
 
@@ -19,7 +23,7 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On
     private notifier: Notifier,
     private authService: AuthService,
     private userService: UserService
-    ) {
+  ) {
     super()
   }
 
@@ -35,13 +39,13 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On
     const confirmPasswordControl = this.form.get('new-confirmed-password')
 
     confirmPasswordControl.valueChanges
-                          .pipe(filter(v => v !== this.form.value[ 'new-password' ]))
+                          .pipe(filter(v => v !== this.form.value['new-password']))
                           .subscribe(() => confirmPasswordControl.setErrors({ matchPassword: true }))
   }
 
   changePassword () {
-    const currentPassword = this.form.value[ 'current-password' ]
-    const newPassword = this.form.value[ 'new-password' ]
+    const currentPassword = this.form.value['current-password']
+    const newPassword = this.form.value['new-password']
 
     this.userService.changePassword(currentPassword, newPassword)
       .subscribe({
diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
index 5005cb630..4a46f1ad9 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
@@ -15,10 +15,11 @@ export class MyAccountDangerZoneComponent {
     private userService: UserService,
     private confirmService: ConfirmService,
     private redirectService: RedirectService
-    ) { }
+  ) { }
 
   async deleteMe () {
     const res = await this.confirmService.confirmWithInput(
+      // eslint-disable-next-line max-len
       $localize`Are you sure you want to delete your account? This will delete all your data, including channels, videos and comments. Content cached by other servers and other third-parties might make longer to be deleted.`,
       $localize`Type your username to confirm`,
       this.user.username,
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
index fc7635f38..a5bcb6496 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
@@ -19,7 +19,7 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
     private userService: UserService,
     private authService: AuthService,
     private notifier: Notifier
-    ) {}
+  ) {}
 
   get userInformationLoaded () {
     return this.authService.userInformationLoaded
diff --git a/client/src/app/+my-account/my-account.component.ts b/client/src/app/+my-account/my-account.component.ts
index eaf8a72e9..450454ca2 100644
--- a/client/src/app/+my-account/my-account.component.ts
+++ b/client/src/app/+my-account/my-account.component.ts
@@ -13,7 +13,7 @@ export class MyAccountComponent implements OnInit {
 
   constructor (
     private screenService: ScreenService
-    ) { }
+  ) { }
 
   get isBroadcastMessageDisplayed () {
     return this.screenService.isBroadcastMessageDisplayed
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
index d983aacd9..fd00720d8 100644
--- 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
@@ -31,7 +31,7 @@ export class MyVideoChannelCreateComponent extends MyVideoChannelEdit implements
     private notifier: Notifier,
     private router: Router,
     private videoChannelService: VideoChannelService
-    ) {
+  ) {
     super()
   }
 
@@ -64,7 +64,7 @@ export class MyVideoChannelCreateComponent extends MyVideoChannelEdit implements
           this.authService.refreshUserInformation()
 
           this.notifier.success($localize`Video channel ${videoChannelCreate.displayName} created.`)
-          this.router.navigate(['/my-library', 'video-channels'])
+          this.router.navigate([ '/my-library', 'video-channels' ])
         },
 
         error: err => {
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
index e8bfbf9ce..f9521b8b5 100644
--- 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
@@ -66,7 +66,9 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
             })
           },
 
-          error: err => this.error = err.message
+          error: err => {
+            this.error = err.message
+          }
         })
     })
   }
@@ -96,7 +98,9 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
           this.router.navigate([ '/my-library', 'video-channels' ])
         },
 
-        error: err => this.error = err.message
+        error: err => {
+          this.error = err.message
+        }
       })
   }
 
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
index 8b665fd58..303f783fd 100644
--- 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
@@ -121,16 +121,16 @@ channel with the same name (${videoChannel.name})!`,
         display: false
       },
       scales: {
-        xAxes: [{
+        xAxes: [ {
           display: false
-        }],
-        yAxes: [{
+        } ],
+        yAxes: [ {
           display: false,
           ticks: {
             min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)),
             max: Math.max(1, this.videoChannelsMaximumDailyViews)
           }
-        }]
+        } ]
       },
       layout: {
         padding: {
diff --git a/client/src/app/+my-library/my-history/my-history.component.ts b/client/src/app/+my-library/my-history/my-history.component.ts
index fe6e86346..a72d22e1c 100644
--- a/client/src/app/+my-library/my-history/my-history.component.ts
+++ b/client/src/app/+my-library/my-history/my-history.component.ts
@@ -1,4 +1,3 @@
-import { Subject } from 'rxjs'
 import { tap } from 'rxjs/operators'
 import { Component, ComponentFactoryResolver, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
@@ -109,9 +108,9 @@ export class MyHistoryComponent implements OnInit, DisableForReuseHook {
     this.userService.updateMyProfile({ videosHistoryEnabled: this.videosHistoryEnabled })
       .subscribe({
         next: () => {
-          const message = this.videosHistoryEnabled === true ?
-            $localize`Videos history is enabled` :
-            $localize`Videos history is disabled`
+          const message = this.videosHistoryEnabled === true
+            ? $localize`Videos history is enabled`
+            : $localize`Videos history is disabled`
 
           this.notifier.success(message)
 
diff --git a/client/src/app/+my-library/my-library.component.ts b/client/src/app/+my-library/my-library.component.ts
index 2ee3559a7..16a7f63e3 100644
--- a/client/src/app/+my-library/my-library.component.ts
+++ b/client/src/app/+my-library/my-library.component.ts
@@ -17,7 +17,7 @@ export class MyLibraryComponent implements OnInit {
     private serverService: ServerService,
     private authService: AuthService,
     private screenService: ScreenService
-    ) { }
+  ) { }
 
   get isBroadcastMessageDisplayed () {
     return this.screenService.isBroadcastMessageDisplayed
diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.ts b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.ts
index b92377bca..764da2369 100644
--- a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.ts
+++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.ts
@@ -29,7 +29,7 @@ export class MyAcceptOwnershipComponent extends FormReactive implements OnInit {
     private notifier: Notifier,
     private authService: AuthService,
     private modalService: NgbModal
-    ) {
+  ) {
     super()
   }
 
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-create.component.ts b/client/src/app/+my-library/my-video-playlists/my-video-playlist-create.component.ts
index 3e3c3c878..8bc78b2db 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-create.component.ts
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-create.component.ts
@@ -29,7 +29,7 @@ export class MyVideoPlaylistCreateComponent extends MyVideoPlaylistEdit implemen
     private router: Router,
     private videoPlaylistService: VideoPlaylistService,
     private serverService: ServerService
-    ) {
+  ) {
     super()
   }
 
@@ -78,7 +78,9 @@ export class MyVideoPlaylistCreateComponent extends MyVideoPlaylistEdit implemen
           this.router.navigate([ '/my-library', 'video-playlists' ])
         },
 
-        error: err => this.error = err.message
+        error: err => {
+          this.error = err.message
+        }
       })
   }
 
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts
index 6aff5dbd7..d6959a50e 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.ts
@@ -57,7 +57,7 @@ export class MyVideoPlaylistElementsComponent implements OnInit, OnDestroy {
     ]
 
     this.paramsSub = this.route.params.subscribe(routeParams => {
-      this.videoPlaylistId = routeParams[ 'videoPlaylistId' ]
+      this.videoPlaylistId = routeParams['videoPlaylistId']
       this.loadElements()
 
       this.loadPlaylistInfo()
@@ -145,8 +145,6 @@ export class MyVideoPlaylistElementsComponent implements OnInit, OnDestroy {
    * we add a delay to prevent unwanted drag&drop.
    *
    * @see {@link https://github.com/Chocobozzz/PeerTube/issues/2078}
-   *
-   * @returns {null|number} Null for no delay, or a number in milliseconds.
    */
   getDragStartDelay (): null | number {
     if (this.screenService.isInTouchScreen()) {
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-update.component.ts b/client/src/app/+my-library/my-video-playlists/my-video-playlist-update.component.ts
index a3f54279b..06ac3ad50 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-update.component.ts
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-update.component.ts
@@ -65,14 +65,16 @@ export class MyVideoPlaylistUpdateComponent extends MyVideoPlaylistEdit implemen
                            })
                          )
                          .subscribe({
-                           next: ([ videoPlaylistToUpdate, videoPlaylistPrivacies]) => {
+                           next: ([ videoPlaylistToUpdate, videoPlaylistPrivacies ]) => {
                              this.videoPlaylistToUpdate = videoPlaylistToUpdate
                              this.videoPlaylistPrivacies = videoPlaylistPrivacies
 
                              this.hydrateFormFromPlaylist()
                            },
 
-                           error: err => this.error = err.message
+                           error: err => {
+                             this.error = err.message
+                           }
                          })
   }
 
@@ -99,7 +101,9 @@ export class MyVideoPlaylistUpdateComponent extends MyVideoPlaylistEdit implemen
           this.router.navigate([ '/my-library', 'video-playlists' ])
         },
 
-        error: err => this.error = err.message
+        error: err => {
+          this.error = err.message
+        }
       })
   }
 
diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.ts b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.ts
index 8c1f94bf3..960c9a4f7 100644
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.ts
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.ts
@@ -25,7 +25,7 @@ export class VideoChangeOwnershipComponent extends FormReactive implements OnIni
     private notifier: Notifier,
     private userService: UserService,
     private modalService: NgbModal
-    ) {
+  ) {
     super()
   }
 
@@ -49,7 +49,9 @@ export class VideoChangeOwnershipComponent extends FormReactive implements OnIni
     const query = event.query
     this.userService.autocomplete(query)
       .subscribe({
-        next: usernames => this.usernamePropositions = usernames,
+        next: usernames => {
+          this.usernamePropositions = usernames
+        },
 
         error: err => this.notifier.error(err.message)
       })
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
index 4f9b71cc6..edb9392dd 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -49,7 +49,7 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
 
   inputFilters: AdvancedInputFilter[] = [
     {
-      queryParams: { 'search': 'isLive:true' },
+      queryParams: { search: 'isLive:true' },
       label: $localize`Only live videos`
     }
   ]
@@ -107,7 +107,7 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
 
   async deleteSelectedVideos () {
     const toDeleteVideosIds = Object.keys(this.selection)
-                                    .filter(k => this.selection[ k ] === true)
+                                    .filter(k => this.selection[k] === true)
                                     .map(k => parseInt(k, 10))
 
     const res = await this.confirmService.confirm(
diff --git a/client/src/app/+remote-interaction/remote-interaction.component.ts b/client/src/app/+remote-interaction/remote-interaction.component.ts
index 293f7edad..775cc580c 100644
--- a/client/src/app/+remote-interaction/remote-interaction.component.ts
+++ b/client/src/app/+remote-interaction/remote-interaction.component.ts
@@ -7,7 +7,7 @@ import { SearchService } from '@app/shared/shared-search'
 @Component({
   selector: 'my-remote-interaction',
   templateUrl: './remote-interaction.component.html',
-  styleUrls: ['./remote-interaction.component.scss']
+  styleUrls: [ './remote-interaction.component.scss' ]
 })
 export class RemoteInteractionComponent implements OnInit {
   error = ''
diff --git a/client/src/app/+reset-password/reset-password.component.ts b/client/src/app/+reset-password/reset-password.component.ts
index a1c04147b..11c5110fd 100644
--- a/client/src/app/+reset-password/reset-password.component.ts
+++ b/client/src/app/+reset-password/reset-password.component.ts
@@ -21,7 +21,7 @@ export class ResetPasswordComponent extends FormReactive implements OnInit {
     private notifier: Notifier,
     private router: Router,
     private route: ActivatedRoute
-    ) {
+  ) {
     super()
   }
 
diff --git a/client/src/app/+signup/+register/custom-stepper.component.ts b/client/src/app/+signup/+register/custom-stepper.component.ts
index 5a80895f9..3b7ba40e8 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.ts
+++ b/client/src/app/+signup/+register/custom-stepper.component.ts
@@ -1,5 +1,5 @@
-import { Component } from '@angular/core'
 import { CdkStep, CdkStepper } from '@angular/cdk/stepper'
+import { Component } from '@angular/core'
 
 @Component({
   selector: 'my-custom-stepper',
@@ -14,13 +14,13 @@ export class CustomStepperComponent extends CdkStepper {
   }
 
   isCompleted (step: CdkStep) {
-    return step.stepControl && step.stepControl.dirty && step.stepControl.valid
+    return step.stepControl?.dirty && step.stepControl.valid
   }
 
   isAccessible (index: number) {
     const stepsCompletedMap = this.steps.map(step => this.isCompleted(step))
     return index === 0
       ? true
-      : stepsCompletedMap[ index - 1 ]
+      : stepsCompletedMap[index - 1]
   }
 }
diff --git a/client/src/app/+signup/+register/register.component.ts b/client/src/app/+signup/+register/register.component.ts
index 056442107..d8ac39c7c 100644
--- a/client/src/app/+signup/+register/register.component.ts
+++ b/client/src/app/+signup/+register/register.component.ts
@@ -49,8 +49,7 @@ export class RegisterComponent implements OnInit {
     private authService: AuthService,
     private userService: UserService,
     private hooks: HooksService
-    ) {
-  }
+  ) { }
 
   get requiresEmailVerification () {
     return this.serverConfig.signup.requiresEmailVerification
@@ -138,11 +137,15 @@ export class RegisterComponent implements OnInit {
               this.success = $localize`You are now logged in as ${body.username}!`
             },
 
-            error: err => this.error = err.message
+            error: err => {
+              this.error = err.message
+            }
           })
       },
 
-      error: err => this.error = err.message
+      error: err => {
+        this.error = err.message
+      }
     })
   }
 }
diff --git a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts
index 457a0abe0..827ec7652 100644
--- a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts
+++ b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts
@@ -20,7 +20,7 @@ export class VerifyAccountEmailComponent implements OnInit {
     private authService: AuthService,
     private notifier: Notifier,
     private route: ActivatedRoute
-    ) {
+  ) {
   }
 
   ngOnInit () {
diff --git a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
index d83fc1324..ef8fd79b9 100644
--- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
+++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
@@ -1,5 +1,5 @@
 import { forkJoin, Subscription } from 'rxjs'
-import { first, tap } from 'rxjs/operators'
+import { first } from 'rxjs/operators'
 import { Component, ComponentFactoryResolver, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index b4d81fe39..064fbb6f5 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -114,7 +114,7 @@
       <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
     </ng-template>
 
-    <list-overflow [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
+    <my-list-overflow [items]="links" [itemTemplate]="linkTemplate"></my-list-overflow>
   </div>
 
   <router-outlet></router-outlet>
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index 6479644f1..272fc41d9 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -44,7 +44,7 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
   ngOnInit () {
     this.routeSub = this.route.params
                         .pipe(
-                          map(params => params[ 'videoChannelName' ]),
+                          map(params => params['videoChannelName']),
                           distinctUntilChanged(),
                           switchMap(videoChannelName => this.videoChannelService.getVideoChannel(videoChannelName)),
                           catchError(err => this.restExtractor.redirectTo404IfNotFound(err, 'other', [
@@ -64,9 +64,9 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
 
     this.hotkeys = [
       new Hotkey('S', (event: KeyboardEvent): boolean => {
-        this.subscribeButton.subscribed ?
-          this.subscribeButton.unsubscribe() :
-          this.subscribeButton.subscribe()
+        if (this.subscribeButton.subscribed) this.subscribeButton.unsubscribe()
+        else this.subscribeButton.subscribe()
+
         return false
       }, undefined, $localize`Subscribe to the account`)
     ]
diff --git a/client/src/app/+videos/+video-edit/shared/i18n-primeng-calendar.service.ts b/client/src/app/+videos/+video-edit/shared/i18n-primeng-calendar.service.ts
index 34848b036..4b201ac74 100644
--- a/client/src/app/+videos/+video-edit/shared/i18n-primeng-calendar.service.ts
+++ b/client/src/app/+videos/+video-edit/shared/i18n-primeng-calendar.service.ts
@@ -73,7 +73,7 @@ export class I18nPrimengCalendarService {
   }
 
   getTimezone () {
-    const gmt = new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)[1]
+    const gmt = new Date().toString().match(/([A-Z]+[+-][0-9]+)/)[1]
     const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
 
     return `${timezone} - ${gmt}`
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts
index 875911b91..98d66ff00 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts
@@ -66,18 +66,18 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni
   isReplacingExistingCaption () {
     if (this.closingModal === true) return false
 
-    const languageId = this.form.value[ 'language' ]
+    const languageId = this.form.value['language']
 
-    return languageId && this.existingCaptions.indexOf(languageId) !== -1
+    return languageId && this.existingCaptions.includes(languageId)
   }
 
   async addCaption () {
-    const languageId = this.form.value[ 'language' ]
+    const languageId = this.form.value['language']
     const languageObject = this.videoCaptionLanguages.find(l => l.id === languageId)
 
     this.captionAdded.emit({
       language: languageObject,
-      captionfile: this.form.value[ 'captionfile' ]
+      captionfile: this.form.value['captionfile']
     })
 
     this.hide()
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit-utils.ts b/client/src/app/+videos/+video-edit/shared/video-edit-utils.ts
index 3a7dbed36..db1ef8d73 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit-utils.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-edit-utils.ts
@@ -24,7 +24,7 @@ function hydrateFormFromVideo (formGroup: FormGroup, video: VideoEdit, thumbnail
       .then(response => response.blob())
       .then(data => {
         formGroup.patchValue({
-          [ obj.name ]: data
+          [obj.name]: data
         })
       })
   }
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
index 90a0e8f52..366c93a79 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
@@ -233,7 +233,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
 
   async deleteCaption (caption: VideoCaptionEdit) {
     // Caption recovers his former state
-    if (caption.action && this.initialVideoCaptions.indexOf(caption.language.id) !== -1) {
+    if (caption.action && this.initialVideoCaptions.includes(caption.language.id)) {
       caption.action = undefined
       return
     }
@@ -297,7 +297,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
 
   private trackPrivacyChange () {
     // We will update the schedule input and the wait transcoding checkbox validators
-    this.form.controls[ 'privacy' ]
+    this.form.controls['privacy']
       .valueChanges
       .pipe(map(res => parseInt(res.toString(), 10)))
       .subscribe(
@@ -336,12 +336,12 @@ export class VideoEditComponent implements OnInit, OnDestroy {
 
   private trackChannelChange () {
     // We will update the "support" field depending on the channel
-    this.form.controls[ 'channelId' ]
+    this.form.controls['channelId']
       .valueChanges
       .pipe(map(res => parseInt(res.toString(), 10)))
       .subscribe(
         newChannelId => {
-          const oldChannelId = parseInt(this.form.value[ 'channelId' ], 10)
+          const oldChannelId = parseInt(this.form.value['channelId'], 10)
 
           // Not initialized yet
           if (isNaN(newChannelId)) return
@@ -350,7 +350,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
 
           // Wait support field update
           setTimeout(() => {
-            const currentSupport = this.form.value[ 'support' ]
+            const currentSupport = this.form.value['support']
 
             // First time we set the channel?
             if (isNaN(oldChannelId)) {
diff --git a/client/src/app/+videos/+video-edit/video-add-components/drag-drop.directive.ts b/client/src/app/+videos/+video-edit/video-add-components/drag-drop.directive.ts
index 7b1a38c62..7c35e6b84 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/drag-drop.directive.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/drag-drop.directive.ts
@@ -1,26 +1,26 @@
 import { Directive, Output, EventEmitter, HostBinding, HostListener } from '@angular/core'
 
 @Directive({
-  selector: '[dragDrop]'
+  selector: '[myDragDrop]'
 })
 export class DragDropDirective {
   @Output() fileDropped = new EventEmitter<FileList>()
 
   @HostBinding('class.dragover') dragover = false
 
-  @HostListener('dragover', ['$event']) onDragOver (e: Event) {
+  @HostListener('dragover', [ '$event' ]) onDragOver (e: Event) {
     e.preventDefault()
     e.stopPropagation()
     this.dragover = true
   }
 
-  @HostListener('dragleave', ['$event']) public onDragLeave (e: Event) {
+  @HostListener('dragleave', [ '$event' ]) public onDragLeave (e: Event) {
     e.preventDefault()
     e.stopPropagation()
     this.dragover = false
   }
 
-  @HostListener('drop', ['$event']) public ondrop (e: DragEvent) {
+  @HostListener('drop', [ '$event' ]) public ondrop (e: DragEvent) {
     e.preventDefault()
     e.stopPropagation()
     this.dragover = false
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
index 30c79594d..1b9447e03 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
@@ -41,7 +41,7 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
     private liveVideoService: LiveVideoService,
     private router: Router,
     private hooks: HooksService
-    ) {
+  ) {
     super()
   }
 
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html
index 20a7538db..0f1a94c84 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="!hasImportedVideo" class="upload-video-container" dragDrop (fileDropped)="setTorrentFile($event)">
+<div *ngIf="!hasImportedVideo" class="upload-video-container" myDragDrop (fileDropped)="setTorrentFile($event)">
   <div class="first-step-block">
     <my-global-icon class="upload-icon" iconName="upload" aria-hidden="true"></my-global-icon>
 
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
index fef1f5d65..87e47683f 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
@@ -5,7 +5,7 @@ import { scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
-import { PeerTubeProblemDocument, ServerErrorCode, VideoPrivacy, VideoUpdate } from '@shared/models'
+import { PeerTubeProblemDocument, ServerErrorCode, VideoUpdate } from '@shared/models'
 import { hydrateFormFromVideo } from '../shared/video-edit-utils'
 import { VideoSend } from './video-send'
 
@@ -43,7 +43,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Af
     private router: Router,
     private videoImportService: VideoImportService,
     private hooks: HooksService
-    ) {
+  ) {
     super()
   }
 
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
index e1893b28f..3487c1adf 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
@@ -59,7 +59,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, AfterV
   }
 
   isTargetUrlValid () {
-    return this.targetUrl && this.targetUrl.match(/https?:\/\//)
+    return this.targetUrl?.match(/https?:\/\//)
   }
 
   importVideo () {
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
index ce8de049d..efa8c85a3 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
@@ -9,7 +9,7 @@ import { LoadingBarService } from '@ngx-loading-bar/core'
 import { HTMLServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
 
 @Directive()
-// tslint:disable-next-line: directive-class-suffix
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class VideoSend extends FormReactive implements OnInit {
   userVideoChannels: SelectChannelItem[] = []
   videoPrivacies: VideoConstant<VideoPrivacy>[] = []
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
index 14cd06fcf..db494a02f 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="!isUploadingVideo" class="upload-video-container" dragDrop (fileDropped)="onFileDropped($event)">
+<div *ngIf="!isUploadingVideo" class="upload-video-container" myDragDrop (fileDropped)="onFileDropped($event)">
   <div class="first-step-block">
     <my-global-icon class="upload-icon" iconName="upload" aria-hidden="true"></my-global-icon>
 
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
index b8cb4fa1e..dee2bb57a 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
@@ -128,7 +128,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
 
   onUploadVideoOngoing (state: UploadState) {
     switch (state.status) {
-      case 'error':
+      case 'error': {
         const error = state.response?.error || 'Unknow error'
 
         this.handleUploadError({
@@ -143,6 +143,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
           url: state.url
         })
         break
+      }
 
       case 'cancelled':
         this.isUploadingVideo = false
@@ -323,6 +324,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
       const videoQuotaUsedBytes = bytePipes.transform(this.userVideoQuotaUsed, 0)
       const videoQuotaBytes = bytePipes.transform(videoQuota, 0)
 
+      // eslint-disable-next-line max-len
       const msg = $localize`Your video quota is exceeded with this video (video size: ${videoSizeBytes}, used: ${videoQuotaUsedBytes}, quota: ${videoQuotaBytes})`
       this.notifier.error(msg)
 
@@ -341,6 +343,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
       const videoSizeBytes = bytePipes.transform(videofile.size, 0)
       const quotaUsedDailyBytes = bytePipes.transform(this.userVideoQuotaUsedDaily, 0)
       const quotaDailyBytes = bytePipes.transform(videoQuotaDaily, 0)
+      // eslint-disable-next-line max-len
       const msg = $localize`Your daily video quota is exceeded with this video (video size: ${videoSizeBytes}, used: ${quotaUsedDailyBytes}, quota: ${quotaDailyBytes})`
       this.notifier.error(msg)
 
diff --git a/client/src/app/+videos/+video-edit/video-update.component.ts b/client/src/app/+videos/+video-edit/video-update.component.ts
index 95336dc75..9bef60133 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.ts
+++ b/client/src/app/+videos/+video-edit/video-update.component.ts
@@ -38,7 +38,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
     private loadingBar: LoadingBarService,
     private videoCaptionService: VideoCaptionService,
     private liveVideoService: LiveVideoService
-    ) {
+  ) {
     super()
   }
 
@@ -119,8 +119,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
   }
 
   update () {
-    if (this.checkForm() === false
-      || this.isUpdatingVideo === true) {
+    if (this.checkForm() === false || this.isUpdatingVideo === true) {
       return
     }
 
diff --git a/client/src/app/+videos/+video-edit/video-update.resolver.ts b/client/src/app/+videos/+video-edit/video-update.resolver.ts
index 9172b78a8..91e76b7fe 100644
--- a/client/src/app/+videos/+video-edit/video-update.resolver.ts
+++ b/client/src/app/+videos/+video-edit/video-update.resolver.ts
@@ -18,7 +18,7 @@ export class VideoUpdateResolver implements Resolve<any> {
   }
 
   resolve (route: ActivatedRouteSnapshot) {
-    const uuid: string = route.params[ 'uuid' ]
+    const uuid: string = route.params['uuid']
 
     return this.videoService.getVideo({ videoId: uuid })
                .pipe(
@@ -42,8 +42,8 @@ export class VideoUpdateResolver implements Resolve<any> {
         ),
 
       video.isLive
-          ? this.liveVideoService.getVideoLive(video.id)
-          : of(undefined)
+        ? this.liveVideoService.getVideoLive(video.id)
+        : of(undefined)
     ]
   }
 }
diff --git a/client/src/app/+videos/+video-watch/player-styles.component.ts b/client/src/app/+videos/+video-watch/player-styles.component.ts
index 9b1672a8c..448a0ee96 100644
--- a/client/src/app/+videos/+video-watch/player-styles.component.ts
+++ b/client/src/app/+videos/+video-watch/player-styles.component.ts
@@ -8,7 +8,7 @@ import { Component, ViewEncapsulation } from '@angular/core'
   selector: 'my-player-styles',
   template: '',
   styleUrls: [ './player-styles.component.scss' ],
-  // tslint:disable:use-component-view-encapsulation
+  /* eslint-disable @angular-eslint/use-component-view-encapsulation */
   encapsulation: ViewEncapsulation.None
 })
 export class PlayerStylesComponent {
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts
index ac65f7260..71fb127f6 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts
@@ -25,7 +25,7 @@ import { VideoCommentCreate } from '@shared/models'
 @Component({
   selector: 'my-video-comment-add',
   templateUrl: './video-comment-add.component.html',
-  styleUrls: ['./video-comment-add.component.scss']
+  styleUrls: [ './video-comment-add.component.scss' ]
 })
 export class VideoCommentAddComponent extends FormReactive implements OnChanges, OnInit {
   @Input() user: User
@@ -64,7 +64,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
     for (const emojiMarkupName in emojiMarkupObjectList) {
       if (emojiMarkupName) {
         const emoji = emojiMarkupObjectList[emojiMarkupName]
-        emojiMarkupArrayList.push([emoji, emojiMarkupName])
+        emojiMarkupArrayList.push([ emoji, emojiMarkupName ])
       }
     }
 
@@ -91,7 +91,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
     // Not initialized yet
     if (!this.form) return
 
-    if (changes.textValue && changes.textValue.currentValue && changes.textValue.currentValue !== changes.textValue.previousValue) {
+    if (changes.textValue?.currentValue && changes.textValue.currentValue !== changes.textValue.previousValue) {
       this.patchTextValue(changes.textValue.currentValue, true)
     }
   }
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
index d8b944b35..d0e9bcd29 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
@@ -29,7 +29,7 @@
           class="comment-html"
           [innerHTML]="sanitizedCommentHTML"
           (timestampClicked)="handleTimestampClicked($event)"
-          timestampRouteTransformer
+          myTimestampRouteTransformer
         ></div>
 
         <div class="comment-actions">
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.ts b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.ts
index f858f4750..5bbcffe82 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.ts
@@ -10,7 +10,7 @@ import { User, UserRight } from '@shared/models'
 @Component({
   selector: 'my-video-comment',
   templateUrl: './video-comment.component.html',
-  styleUrls: ['./video-comment.component.scss']
+  styleUrls: [ './video-comment.component.scss' ]
 })
 export class VideoCommentComponent implements OnInit, OnChanges {
   @ViewChild('commentReportModal') commentReportModal: CommentReportComponent
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.ts b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.ts
index 72866b874..17e0af3bc 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.ts
@@ -9,7 +9,7 @@ import { VideoComment, VideoCommentService, VideoCommentThreadTree } from '@app/
 @Component({
   selector: 'my-video-comments',
   templateUrl: './video-comments.component.html',
-  styleUrls: ['./video-comments.component.scss']
+  styleUrls: [ './video-comments.component.scss' ]
 })
 export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
   @ViewChild('commentHighlightBlock') commentHighlightBlock: ElementRef
@@ -200,7 +200,11 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   async onWantedToRedraft (commentToRedraft: VideoComment) {
-    const confirm = await this.onWantedToDelete(commentToRedraft, $localize`Delete and re-draft`, $localize`Do you really want to delete and re-draft this comment?`)
+    const confirm = await this.onWantedToDelete(
+      commentToRedraft,
+      $localize`Delete and re-draft`,
+      $localize`Do you really want to delete and re-draft this comment?`
+    )
 
     if (confirm) {
       this.inReplyToCommentId = commentToRedraft.inReplyToCommentId
diff --git a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts
index 0072492ac..257d463b4 100644
--- a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts
@@ -23,7 +23,7 @@ export class VideoAlertComponent {
   }
 
   hasVideoScheduledPublication () {
-    return this.video && this.video.scheduledUpdate !== undefined
+    return this.video?.scheduledUpdate !== undefined
   }
 
   isWaitingForLive () {
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
index 57f682899..2cfaad8f6 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
@@ -3,7 +3,7 @@
     class="video-info-description-html"
     [innerHTML]="videoHTMLDescription"
     (timestampClicked)="onTimestampClicked($event)"
-    timestampRouteTransformer
+    myTimestampRouteTransformer
   ></div>
 
   <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
index f0f7966b1..78b3af4a7 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
@@ -39,7 +39,7 @@ export class VideoWatchPlaylistComponent {
     private notifier: Notifier,
     private videoPlaylist: VideoPlaylistService,
     private localStorageService: LocalStorageService,
-    private sessionStorageService: SessionStorageService,
+    private sessionStorage: SessionStorageService,
     private router: Router
   ) {
     // defaults to true
@@ -50,7 +50,7 @@ export class VideoWatchPlaylistComponent {
     this.setAutoPlayNextVideoPlaylistSwitchText()
 
     // defaults to false
-    this.loopPlaylist = this.sessionStorageService.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
+    this.loopPlaylist = this.sessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
     this.setLoopPlaylistSwitchText()
   }
 
@@ -145,7 +145,7 @@ export class VideoWatchPlaylistComponent {
 
     const start = previous.startTimestamp
     const stop = previous.stopTimestamp
-    this.router.navigate([],{ queryParams: { playlistPosition: previous.position, start, stop } })
+    this.router.navigate([], { queryParams: { playlistPosition: previous.position, start, stop } })
   }
 
   findPlaylistVideo (position: number, type: 'previous' | 'next'): VideoPlaylistElement {
@@ -163,7 +163,7 @@ export class VideoWatchPlaylistComponent {
     }
 
     const found = this.playlistElements.find(e => e.position === position)
-    if (found && found.video) return found
+    if (found?.video) return found
 
     const newPosition = type === 'previous'
       ? position - 1
@@ -178,7 +178,7 @@ export class VideoWatchPlaylistComponent {
 
     const start = next.startTimestamp
     const stop = next.stopTimestamp
-    this.router.navigate([],{ queryParams: { playlistPosition: next.position, start, stop } })
+    this.router.navigate([], { queryParams: { playlistPosition: next.position, start, stop } })
   }
 
   switchAutoPlayNextVideoPlaylist () {
diff --git a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
index e1040fead..bbfcab2ae 100644
--- a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
+++ b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
@@ -20,7 +20,7 @@
       >
       </my-video-miniature>
 
-      <hr *ngIf="!playlist && i == 0 && length > 1" />
+      <hr *ngIf="!playlist && i === 0 && length > 1" />
     </ng-container>
   </ng-container>
 </div>
diff --git a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.ts b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.ts
index 7f3703c08..dfc296d15 100644
--- a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.ts
@@ -51,7 +51,7 @@ export class RecommendedVideosComponent implements OnInit, OnChanges {
     } else {
       this.autoPlayNextVideo = this.sessionStorageService.getItem(UserLocalStorageKeys.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
 
-      this.sessionStorageService.watch([UserLocalStorageKeys.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO]).subscribe(
+      this.sessionStorageService.watch([ UserLocalStorageKeys.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO ]).subscribe(
         () => {
           this.autoPlayNextVideo = this.sessionStorageService.getItem(UserLocalStorageKeys.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
         }
diff --git a/client/src/app/+videos/+video-watch/shared/timestamp-route-transformer.directive.ts b/client/src/app/+videos/+video-watch/shared/timestamp-route-transformer.directive.ts
index 45e023695..91fe5bf5d 100644
--- a/client/src/app/+videos/+video-watch/shared/timestamp-route-transformer.directive.ts
+++ b/client/src/app/+videos/+video-watch/shared/timestamp-route-transformer.directive.ts
@@ -1,12 +1,12 @@
 import { Directive, EventEmitter, HostListener, Output } from '@angular/core'
 
 @Directive({
-  selector: '[timestampRouteTransformer]'
+  selector: '[myTimestampRouteTransformer]'
 })
 export class TimestampRouteTransformerDirective {
   @Output() timestampClicked = new EventEmitter<number>()
 
-  @HostListener('click', ['$event'])
+  @HostListener('click', [ '$event' ])
   public onClick ($event: Event) {
     const target = $event.target as HTMLLinkElement
 
@@ -21,10 +21,10 @@ export class TimestampRouteTransformerDirective {
     const ngxLinkParams = new URLSearchParams(ngxLink.search)
     if (ngxLinkParams.has('start') !== true) return
 
-    const separators = ['h', 'm', 's']
+    const separators = [ 'h', 'm', 's' ]
     const start = ngxLinkParams
       .get('start')
-      .match(new RegExp('(\\d{1,9}[' + separators.join('') + '])','g')) // match digits before any given separator
+      .match(new RegExp('(\\d{1,9}[' + separators.join('') + '])', 'g')) // match digits before any given separator
       .map(t => {
         if (t.includes('h')) return parseInt(t, 10) * 3600
         if (t.includes('m')) return parseInt(t, 10) * 60
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 85100b653..2007bdecb 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -195,10 +195,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   private loadRouteParams () {
     this.paramsSub = this.route.params.subscribe(routeParams => {
-      const videoId = routeParams[ 'videoId' ]
+      const videoId = routeParams['videoId']
       if (videoId) return this.loadVideo(videoId)
 
-      const playlistId = routeParams[ 'playlistId' ]
+      const playlistId = routeParams['playlistId']
       if (playlistId) return this.loadPlaylist(playlistId)
     })
   }
@@ -206,7 +206,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   private loadRouteQuery () {
     this.queryParamsSub = this.route.queryParams.subscribe(queryParams => {
       // Handle the ?playlistPosition
-      const positionParam = queryParams[ 'playlistPosition' ] ?? 1
+      const positionParam = queryParams['playlistPosition'] ?? 1
 
       this.playlistPosition = positionParam === 'last'
         ? -1 // Handle the "last" index
@@ -219,7 +219,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
       this.videoWatchPlaylist.updatePlaylistIndex(this.playlistPosition)
 
-      const start = queryParams[ 'start' ]
+      const start = queryParams['start']
       if (this.player && start) this.player.currentTime(parseInt(start, 10))
     })
   }
@@ -237,7 +237,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       'filter:api.video-watch.video.get.result'
     )
 
-    forkJoin([ videoObs, this.videoCaptionService.listCaptions(videoId)])
+    forkJoin([ videoObs, this.videoCaptionService.listCaptions(videoId) ])
       .subscribe({
         next: ([ video, captionsResult ]) => {
           const queryParams = this.route.snapshot.queryParams
@@ -292,6 +292,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       const originUrl = errorBody.originUrl + (window.location.search ?? '')
 
       const res = await this.confirmService.confirm(
+        // eslint-disable-next-line max-len
         $localize`This video is not available on this instance. Do you want to be redirected on the origin instance: <a href="${originUrl}">${originUrl}</a>?`,
         $localize`Redirection`
       )
@@ -312,7 +313,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     if (!errorMessage) return
 
     // Display a message in the video player instead of a notification
-    if (errorMessage.indexOf('from xs param') !== -1) {
+    if (errorMessage.includes('from xs param')) {
       this.flushPlayer()
       this.remoteServerDown = true
 
@@ -466,7 +467,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     if (this.nextVideoUUID) {
       this.router.navigate([ '/w', this.nextVideoUUID ])
-      return
     }
   }
 
@@ -483,14 +483,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   private isAutoPlayNext () {
     return (
-      (this.user && this.user.autoPlayNextVideo) ||
+      (this.user?.autoPlayNextVideo) ||
       this.anonymousUser.autoPlayNextVideo
     )
   }
 
   private isPlaylistAutoPlayNext () {
     return (
-      (this.user && this.user.autoPlayNextVideoPlaylist) ||
+      (this.user?.autoPlayNextVideoPlaylist) ||
       this.anonymousUser.autoPlayNextVideoPlaylist
     )
   }
@@ -508,9 +508,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   private buildPlayerManagerOptions (params: {
-    video: VideoDetails,
-    videoCaptions: VideoCaption[],
-    urlOptions: CustomizationOptions & { playerMode: PlayerMode },
+    video: VideoDetails
+    videoCaptions: VideoCaption[]
+    urlOptions: CustomizationOptions & { playerMode: PlayerMode }
     user?: AuthUser
   }) {
     const { video, videoCaptions, urlOptions, user } = params
@@ -573,10 +573,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
         language: this.localeId,
 
-        userWatching: user && user.videosHistoryEnabled === true ? {
-          url: this.videoService.getUserWatchingVideoUrl(video.uuid),
-          authorizationHeader: this.authService.getRequestHeaderValue()
-        } : undefined,
+        userWatching: user && user.videosHistoryEnabled === true
+          ? {
+            url: this.videoService.getUserWatchingVideoUrl(video.uuid),
+            authorizationHeader: this.authService.getRequestHeaderValue()
+          }
+          : undefined,
 
         serverUrl: environment.apiUrl,
 
@@ -704,9 +706,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     if (this.isUserLoggedIn()) {
       this.hotkeys = this.hotkeys.concat([
         new Hotkey('shift+s', () => {
-          this.subscribeButton.isSubscribedToAll()
-            ? this.subscribeButton.unsubscribe()
-            : this.subscribeButton.subscribe()
+          if (this.subscribeButton.isSubscribedToAll()) this.subscribeButton.unsubscribe()
+          else this.subscribeButton.subscribe()
 
           return false
         }, undefined, $localize`Subscribe to the account`)
diff --git a/client/src/app/+videos/video-list/overview/overview.service.ts b/client/src/app/+videos/video-list/overview/overview.service.ts
index 3aa64ebc8..12d2aa1cb 100644
--- a/client/src/app/+videos/video-list/overview/overview.service.ts
+++ b/client/src/app/+videos/video-list/overview/overview.service.ts
@@ -43,7 +43,7 @@ export class OverviewService {
 
     // Build videos objects
     for (const key of Object.keys(serverVideosOverview)) {
-      for (const object of serverVideosOverview[ key ]) {
+      for (const object of serverVideosOverview[key]) {
         observables.push(
           of(object.videos)
             .pipe(
diff --git a/client/src/app/+videos/video-list/trending/video-trending-header.component.ts b/client/src/app/+videos/video-list/trending/video-trending-header.component.ts
index 6c2b32a4f..c94655c74 100644
--- a/client/src/app/+videos/video-list/trending/video-trending-header.component.ts
+++ b/client/src/app/+videos/video-list/trending/video-trending-header.component.ts
@@ -15,7 +15,7 @@ interface VideoTrendingHeaderItem {
 }
 
 @Component({
-  selector: 'video-trending-title-page',
+  selector: 'my-video-trending-title-page',
   styleUrls: [ './video-trending-header.component.scss' ],
   templateUrl: './video-trending-header.component.html'
 })
diff --git a/client/src/app/+videos/video-list/trending/video-trending.component.ts b/client/src/app/+videos/video-list/trending/video-trending.component.ts
index ebec672f3..085f29a8b 100644
--- a/client/src/app/+videos/video-list/trending/video-trending.component.ts
+++ b/client/src/app/+videos/video-list/trending/video-trending.component.ts
@@ -63,7 +63,7 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
 
         if (oldSort !== this.sort) this.reloadVideos()
       }
-    )
+      )
   }
 
   ngOnDestroy () {
@@ -97,12 +97,12 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
 
   getInjector () {
     return Injector.create({
-      providers: [{
+      providers: [ {
         provide: 'data',
         useValue: {
           model: this.defaultSort
         }
-      }]
+      } ]
     })
   }
 
diff --git a/client/src/app/+videos/video-list/video-local.component.ts b/client/src/app/+videos/video-list/video-local.component.ts
index 4be8cd6b5..b576883d1 100644
--- a/client/src/app/+videos/video-list/video-local.component.ts
+++ b/client/src/app/+videos/video-list/video-local.component.ts
@@ -5,7 +5,7 @@ import { HooksService } from '@app/core/plugins/hooks.service'
 import { immutableAssign } from '@app/helpers'
 import { VideoService } from '@app/shared/shared-main'
 import { AbstractVideoList } from '@app/shared/shared-video-miniature'
-import { UserRight, VideoFilter, VideoSortField } from '@shared/models'
+import { VideoFilter, VideoSortField } from '@shared/models'
 
 @Component({
   selector: 'my-videos-local',
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index c1e296182..ed5cc53d9 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -243,7 +243,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     // Inject JS
     if (this.serverConfig.instance.customizations.javascript) {
       try {
-        // tslint:disable:no-eval
+        /* eslint-disable no-eval */
         eval(this.serverConfig.instance.customizations.javascript)
       } catch (err) {
         console.error('Cannot eval custom JavaScript.', err)
@@ -294,7 +294,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 
   private initHotkeys () {
     this.hotkeysService.add([
-      new Hotkey(['/', 's'], (event: KeyboardEvent): boolean => {
+      new Hotkey([ '/', 's' ], (event: KeyboardEvent): boolean => {
         document.getElementById('search-video').focus()
         return false
       }, undefined, $localize`Focus the search bar`),
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index 5da66c981..79239a17a 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -48,7 +48,7 @@ export class AuthService {
     private hotkeysService: HotkeysService,
     private restExtractor: RestExtractor,
     private router: Router
-    ) {
+  ) {
     this.loginChanged = new Subject<AuthStatus>()
     this.loginChangedSource = this.loginChanged.asObservable()
 
@@ -206,7 +206,9 @@ Ensure you have correctly configured PeerTube (config/ directory), in particular
     this.refreshingTokenObservable = this.http.post<UserRefreshToken>(AuthService.BASE_TOKEN_URL, body, { headers })
                                          .pipe(
                                            map(res => this.handleRefreshToken(res)),
-                                           tap(() => { this.refreshingTokenObservable = null }),
+                                           tap(() => {
+                                             this.refreshingTokenObservable = null
+                                           }),
                                            catchError(err => {
                                              this.refreshingTokenObservable = null
 
diff --git a/client/src/app/core/hotkeys/hotkeys.component.ts b/client/src/app/core/hotkeys/hotkeys.component.ts
index 315e1a25e..60b7516aa 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.ts
+++ b/client/src/app/core/hotkeys/hotkeys.component.ts
@@ -3,8 +3,8 @@ import { Subscription } from 'rxjs'
 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
 
 @Component({
-  selector : 'my-hotkeys-cheatsheet',
-  templateUrl : './hotkeys.component.html',
+  selector: 'my-hotkeys-cheatsheet',
+  templateUrl: './hotkeys.component.html',
   styleUrls: [ './hotkeys.component.scss' ]
 })
 export class CheatSheetComponent implements OnInit, OnDestroy {
@@ -16,7 +16,7 @@ export class CheatSheetComponent implements OnInit, OnDestroy {
 
   constructor (
     private hotkeysService: HotkeysService
-    ) {}
+  ) {}
 
   public ngOnInit (): void {
     this.subscription = this.hotkeysService.cheatSheetToggle.subscribe((isOpen) => {
diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts
index 0b8d0191e..f0dc4fcaa 100644
--- a/client/src/app/core/menu/menu.service.ts
+++ b/client/src/app/core/menu/menu.service.ts
@@ -25,7 +25,7 @@ export type MenuSection = {
 export class MenuService {
   isMenuDisplayed = true
   isMenuChangedByUser = false
-  menuWidth = 240  // should be kept equal to $menu-width
+  menuWidth = 240 // should be kept equal to $menu-width
 
   constructor (
     private screenService: ScreenService
@@ -55,7 +55,7 @@ export class MenuService {
     // On touch screens, lock body scroll and display content overlay when memu is opened
     if (this.isMenuDisplayed) {
       document.body.classList.add('menu-open')
-      this.screenService.onFingerSwipe('left', () => { this.setMenuDisplay(false) })
+      this.screenService.onFingerSwipe('left', () => this.setMenuDisplay(false))
       return
     }
 
diff --git a/client/src/app/core/plugins/hooks.service.ts b/client/src/app/core/plugins/hooks.service.ts
index ddde198d2..062083fd1 100644
--- a/client/src/app/core/plugins/hooks.service.ts
+++ b/client/src/app/core/plugins/hooks.service.ts
@@ -27,9 +27,8 @@ export class HooksService {
     })
   }
 
-  wrapObsFun
-    <P, R, H1 extends ClientFilterHookName, H2 extends ClientFilterHookName>
-    (fun: ObservableFunction<P, R>, params: P, scope: PluginClientScope, hookParamName: H1, hookResultName: H2) {
+  wrapObsFun <P, R, H1 extends ClientFilterHookName, H2 extends ClientFilterHookName>
+  (fun: ObservableFunction<P, R>, params: P, scope: PluginClientScope, hookParamName: H1, hookResultName: H2) {
     return from(this.pluginService.ensurePluginsAreLoaded(scope))
       .pipe(
         mergeMap(() => this.wrapObjectWithoutScopeLoad(params, hookParamName)),
@@ -38,9 +37,8 @@ export class HooksService {
       )
   }
 
-  async wrapFun
-    <P, R, H1 extends ClientFilterHookName, H2 extends ClientFilterHookName>
-    (fun: RawFunction<P, R>, params: P, scope: PluginClientScope, hookParamName: H1, hookResultName: H2) {
+  async wrapFun <P, R, H1 extends ClientFilterHookName, H2 extends ClientFilterHookName>
+  (fun: RawFunction<P, R>, params: P, scope: PluginClientScope, hookParamName: H1, hookResultName: H2) {
     await this.pluginService.ensurePluginsAreLoaded(scope)
 
     const newParams = await this.wrapObjectWithoutScopeLoad(params, hookParamName)
diff --git a/client/src/app/core/plugins/plugin.service.ts b/client/src/app/core/plugins/plugin.service.ts
index 774c03964..89391c2c5 100644
--- a/client/src/app/core/plugins/plugin.service.ts
+++ b/client/src/app/core/plugins/plugin.service.ts
@@ -188,7 +188,7 @@ export class PluginService implements ClientHook {
         if (!this.authService.isLoggedIn()) return undefined
 
         const value = this.authService.getRequestHeaderValue()
-        return { 'Authorization': value }
+        return { Authorization: value }
       },
 
       notifier: {
@@ -198,10 +198,10 @@ export class PluginService implements ClientHook {
       },
 
       showModal: (input: {
-        title: string,
-        content: string,
-        close?: boolean,
-        cancel?: { value: string, action?: () => void },
+        title: string
+        content: string
+        close?: boolean
+        cancel?: { value: string, action?: () => void }
         confirm?: { value: string, action?: () => void }
       }) => {
         this.zone.run(() => this.customModal.show(input))
diff --git a/client/src/app/core/renderer/markdown.service.ts b/client/src/app/core/renderer/markdown.service.ts
index 36258ca98..a81d99534 100644
--- a/client/src/app/core/renderer/markdown.service.ts
+++ b/client/src/app/core/renderer/markdown.service.ts
@@ -103,20 +103,20 @@ export class MarkdownService {
     const { name, markdown, withEmoji, additionalAllowedTags } = options
     if (!markdown) return ''
 
-    const config = this.parsersConfig[ name ]
-    if (!this.markdownParsers[ name ]) {
-      this.markdownParsers[ name ] = await this.createMarkdownIt(config)
+    const config = this.parsersConfig[name]
+    if (!this.markdownParsers[name]) {
+      this.markdownParsers[name] = await this.createMarkdownIt(config)
 
       if (withEmoji) {
         if (!this.emojiModule) {
           this.emojiModule = (await import('markdown-it-emoji/light')).default
         }
 
-        this.markdownParsers[ name ].use(this.emojiModule)
+        this.markdownParsers[name].use(this.emojiModule)
       }
     }
 
-    let html = this.markdownParsers[ name ].render(markdown)
+    let html = this.markdownParsers[name].render(markdown)
     html = this.avoidTruncatedTags(html)
 
     if (config.escape) return this.htmlRenderer.toSafeHtml(html, additionalAllowedTags)
@@ -156,7 +156,7 @@ export class MarkdownService {
       if (relIndex < 0) token.attrPush([ 'rel', 'noopener noreferrer' ])
       else token.attrs[relIndex][1] = 'noopener noreferrer'
 
-      // pass token to default renderer.
+      // pass token to default renderer.*
       return defaultRender(tokens, index, options, env, self)
     }
   }
@@ -164,7 +164,7 @@ export class MarkdownService {
   private avoidTruncatedTags (html: string) {
     return html.replace(/\*\*?([^*]+)$/, '$1')
       .replace(/<a[^>]+>([^<]+)<\/a>\s*...((<\/p>)|(<\/li>)|(<\/strong>))?$/mi, '$1...')
-      .replace(/\[[^\]]+\]\(([^\)]+)$/m, '$1')
+      .replace(/\[[^\]]+\]\(([^)]+)$/m, '$1')
       .replace(/\s?\[[^\]]+\]?[.]{3}<\/p>$/m, '...</p>')
   }
 }
diff --git a/client/src/app/core/rest/rest-extractor.service.ts b/client/src/app/core/rest/rest-extractor.service.ts
index 29a56ba39..dd4a78de5 100644
--- a/client/src/app/core/rest/rest-extractor.service.ts
+++ b/client/src/app/core/rest/rest-extractor.service.ts
@@ -13,15 +13,16 @@ export class RestExtractor {
     return true
   }
 
-  applyToResultListData <T> (result: ResultList<T>, fun: Function, additionalArgs?: any[]): ResultList<T> {
+  applyToResultListData <T, A, U> (
+    result: ResultList<T>,
+    fun: (data: T, ...args: A[]) => U,
+    additionalArgs: A[] = []
+  ): ResultList<U> {
     const data: T[] = result.data
-    const newData: T[] = []
-
-    data.forEach(d => newData.push(fun.apply(this, [ d ].concat(additionalArgs))))
 
     return {
       total: result.total,
-      data: newData
+      data: data.map(d => fun.apply(this, [ d, ...additionalArgs ]))
     }
   }
 
@@ -29,8 +30,10 @@ export class RestExtractor {
     return this.applyToResultListData(result, this.convertDateToHuman, [ fieldsToConvert ])
   }
 
-  convertDateToHuman (target: { [ id: string ]: string }, fieldsToConvert: string[]) {
-    fieldsToConvert.forEach(field => target[field] = dateToHuman(target[field]))
+  convertDateToHuman (target: any, fieldsToConvert: string[]) {
+    fieldsToConvert.forEach(field => {
+      target[field] = dateToHuman(target[field])
+    })
 
     return target
   }
@@ -46,7 +49,7 @@ export class RestExtractor {
       errorMessage = err.error
     } else if (err.status !== undefined) {
       // A server-side error occurred.
-      if (err.error && err.error.errors) {
+      if (err.error?.errors) {
         const errors = err.error.errors
         const errorsArray: string[] = []
 
@@ -55,9 +58,10 @@ export class RestExtractor {
         })
 
         errorMessage = errorsArray.join('. ')
-      } else if (err.error && err.error.error) {
+      } else if (err.error?.error) {
         errorMessage = err.error.error
       } else if (err.status === HttpStatusCode.PAYLOAD_TOO_LARGE_413) {
+        // eslint-disable-next-line max-len
         errorMessage = $localize`Media is too large for the server. Please contact you administrator if you want to increase the limit size.`
       } else if (err.status === HttpStatusCode.TOO_MANY_REQUESTS_429) {
         const secondsLeft = err.headers.get('retry-after')
@@ -71,7 +75,7 @@ export class RestExtractor {
         errorMessage = $localize`Server error. Please retry later.`
       }
 
-      errorMessage = errorMessage ? errorMessage : 'Unknown error.'
+      errorMessage = errorMessage || 'Unknown error.'
       console.error(`Backend returned code ${err.status}, errorMessage is: ${errorMessage}`)
     } else {
       console.error(err)
@@ -93,7 +97,7 @@ export class RestExtractor {
   }
 
   redirectTo404IfNotFound (obj: { status: number }, type: 'video' | 'other', status = [ HttpStatusCode.NOT_FOUND_404 ]) {
-    if (obj && obj.status && status.indexOf(obj.status) !== -1) {
+    if (obj?.status && status.includes(obj.status)) {
       // Do not use redirectService to avoid circular dependencies
       this.router.navigate([ '/404' ], { state: { type, obj }, skipLocationChange: true })
     }
diff --git a/client/src/app/core/routing/custom-reuse-strategy.ts b/client/src/app/core/routing/custom-reuse-strategy.ts
index c0f9f04e0..c2510f1df 100644
--- a/client/src/app/core/routing/custom-reuse-strategy.ts
+++ b/client/src/app/core/routing/custom-reuse-strategy.ts
@@ -1,5 +1,5 @@
-import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router'
 import { Injectable } from '@angular/core'
+import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router'
 
 @Injectable()
 export class CustomReuseStrategy implements RouteReuseStrategy {
@@ -78,6 +78,6 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
   }
 
   private isReuseEnabled (route: ActivatedRouteSnapshot) {
-    return route.data.reuse && route.data.reuse.enabled && route.queryParams[ 'a-state' ]
+    return route.data.reuse?.enabled && route.queryParams['a-state']
   }
 }
diff --git a/client/src/app/core/routing/menu-guard.service.ts b/client/src/app/core/routing/menu-guard.service.ts
index c4e64d434..8c5bbfde9 100644
--- a/client/src/app/core/routing/menu-guard.service.ts
+++ b/client/src/app/core/routing/menu-guard.service.ts
@@ -17,33 +17,43 @@ abstract class MenuGuard implements CanActivate, CanDeactivate<any> {
     if (!this.screen.isInMobileView() && this.screen.isInMediumView()) {
       this.menu.setMenuDisplay(this.display)
     }
+
     return true
   }
 }
 
 @Injectable()
 export class OpenMenuGuard extends MenuGuard {
-  constructor (menu: MenuService, screen: ScreenService) { super(menu, screen, true) }
+  constructor (menu: MenuService, screen: ScreenService) {
+    super(menu, screen, true)
+  }
 }
 
 @Injectable()
 export class OpenMenuAlwaysGuard extends MenuGuard {
-  constructor (menu: MenuService, screen: ScreenService) { super(menu, screen, true) }
+  constructor (menu: MenuService, screen: ScreenService) {
+    super(menu, screen, true)
+  }
 
   canActivate (): boolean {
     this.menu.setMenuDisplay(this.display)
+
     return true
   }
 }
 
 @Injectable()
 export class CloseMenuGuard extends MenuGuard {
-  constructor (menu: MenuService, screen: ScreenService) { super(menu, screen, false) }
+  constructor (menu: MenuService, screen: ScreenService) {
+    super(menu, screen, false)
+  }
 }
 
 @Injectable()
 export class CloseMenuAlwaysGuard extends MenuGuard {
-  constructor (menu: MenuService, screen: ScreenService) { super(menu, screen, false) }
+  constructor (menu: MenuService, screen: ScreenService) {
+    super(menu, screen, false)
+  }
 
   canActivate (): boolean {
     this.menu.setMenuDisplay(this.display)
diff --git a/client/src/app/core/routing/meta-guard.service.ts b/client/src/app/core/routing/meta-guard.service.ts
index bedb3450e..851404959 100644
--- a/client/src/app/core/routing/meta-guard.service.ts
+++ b/client/src/app/core/routing/meta-guard.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core'
-import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, RouterStateSnapshot } from '@angular/router'
+import { ActivatedRouteSnapshot, CanActivate, CanActivateChild } from '@angular/router'
 import { MetaService } from './meta.service'
 
 @Injectable()
diff --git a/client/src/app/core/routing/preload-selected-modules-list.ts b/client/src/app/core/routing/preload-selected-modules-list.ts
index b494a40bc..b5c3195b0 100644
--- a/client/src/app/core/routing/preload-selected-modules-list.ts
+++ b/client/src/app/core/routing/preload-selected-modules-list.ts
@@ -6,7 +6,7 @@ import { Injectable } from '@angular/core'
 @Injectable()
 export class PreloadSelectedModulesList implements PreloadingStrategy {
 
-  preload (route: Route, load: Function): Observable<any> {
+  preload (route: Route, load: () => Observable<any>): Observable<any> {
     if (!route.data || !route.data.preload) return ofObservable(null)
 
     if (typeof route.data.preload === 'number') {
diff --git a/client/src/app/core/scoped-tokens/scoped-tokens.service.ts b/client/src/app/core/scoped-tokens/scoped-tokens.service.ts
index 8e3697c31..038e5031c 100644
--- a/client/src/app/core/scoped-tokens/scoped-tokens.service.ts
+++ b/client/src/app/core/scoped-tokens/scoped-tokens.service.ts
@@ -1,9 +1,8 @@
-import { Injectable } from '@angular/core'
+import { catchError } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
-import { environment } from '../../../environments/environment'
-import { AuthService } from '../auth'
+import { Injectable } from '@angular/core'
 import { ScopedToken } from '@shared/models/users/user-scoped-token'
-import { catchError } from 'rxjs/operators'
+import { environment } from '../../../environments/environment'
 import { RestExtractor } from '../rest'
 
 @Injectable()
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 8f041a147..d01942139 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -4,7 +4,7 @@ import { HttpClient } from '@angular/common/http'
 import { Inject, Injectable, LOCALE_ID } from '@angular/core'
 import { getDevLocale, isOnDevLocale, sortBy } from '@app/helpers'
 import { getCompleteLocale, isDefaultLocale, peertubeTranslate } from '@shared/core-utils/i18n'
-import { HTMLServerConfig, SearchTargetType, ServerConfig, ServerStats, VideoConstant } from '@shared/models'
+import { HTMLServerConfig, ServerConfig, ServerStats, VideoConstant } from '@shared/models'
 import { environment } from '../../../environments/environment'
 
 @Injectable()
@@ -171,7 +171,7 @@ export class ServerService {
                  map(({ data, translations }) => {
                    const hashToPopulate: VideoConstant<T>[] = Object.keys(data)
                                                                     .map(dataKey => {
-                                                                      const label = data[ dataKey ]
+                                                                      const label = data[dataKey]
 
                                                                       const id = attributeName === 'languages'
                                                                         ? dataKey as T
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts
index c35548798..c9e6fa700 100644
--- a/client/src/app/core/theme/theme.service.ts
+++ b/client/src/app/core/theme/theme.service.ts
@@ -95,8 +95,8 @@ export class ThemeService {
   private loadTheme (name: string) {
     const links = document.getElementsByTagName('link')
     for (let i = 0; i < links.length; i++) {
-      const link = links[ i ]
-      if (link.getAttribute('rel').indexOf('style') !== -1 && link.getAttribute('title')) {
+      const link = links[i]
+      if (link.getAttribute('rel').includes('style') && link.getAttribute('title')) {
         link.disabled = link.getAttribute('title') !== name
       }
     }
diff --git a/client/src/app/core/users/user.service.ts b/client/src/app/core/users/user.service.ts
index 47db985e1..a8a774eca 100644
--- a/client/src/app/core/users/user.service.ts
+++ b/client/src/app/core/users/user.service.ts
@@ -35,7 +35,7 @@ export class UserService {
     private restService: RestService,
     private localStorageService: LocalStorageService,
     private sessionStorageService: SessionStorageService
-    ) { }
+  ) { }
 
   changePassword (currentPassword: string, newPassword: string) {
     const url = UserService.BASE_USERS_URL + 'me'
@@ -266,7 +266,7 @@ export class UserService {
 
   getUserWithCache (userId: number) {
     if (!this.userCache[userId]) {
-      this.userCache[ userId ] = this.getUser(userId).pipe(shareReplay())
+      this.userCache[userId] = this.getUser(userId).pipe(shareReplay())
     }
 
     return this.userCache[userId]
diff --git a/client/src/app/header/search-typeahead.component.ts b/client/src/app/header/search-typeahead.component.ts
index b5d76c70e..e10baea2b 100644
--- a/client/src/app/header/search-typeahead.component.ts
+++ b/client/src/app/header/search-typeahead.component.ts
@@ -199,7 +199,7 @@ export class SearchTypeaheadComponent implements OnInit, AfterViewChecked, OnDes
   }
 
   private loadUserLanguagesIfNeeded (queryParams: any) {
-    if (queryParams && queryParams.languageOneOf) return of(queryParams)
+    if (queryParams?.languageOneOf) return of(queryParams)
 
     return this.authService.userInformationLoaded
                .pipe(
diff --git a/client/src/app/helpers/locales/oc.ts b/client/src/app/helpers/locales/oc.ts
index d3b2e8407..716b76df1 100644
--- a/client/src/app/helpers/locales/oc.ts
+++ b/client/src/app/helpers/locales/oc.ts
@@ -12,16 +12,16 @@ function plural (n: number): number {
 
 export default [
   'oc',
-  [['a. m.', 'p. m.'], u, u],
+  [ [ 'a. m.', 'p. m.' ], u, u ],
   u,
   [
-    ['dg', 'dl', 'dm', 'dc', 'dj', 'dv', 'ds'], ['dg.', 'dl.', 'dm.', 'dc.', 'dj.', 'dv.', 'ds.'],
-    ['dimenge', 'diluns', 'dimars', 'dimècres', 'dijòus', 'divendres', 'dissabte'],
-    ['dg.', 'dl.', 'dm.', 'dc.', 'dj.', 'dv.', 'ds.']
+    [ 'dg', 'dl', 'dm', 'dc', 'dj', 'dv', 'ds' ], [ 'dg.', 'dl.', 'dm.', 'dc.', 'dj.', 'dv.', 'ds.' ],
+    [ 'dimenge', 'diluns', 'dimars', 'dimècres', 'dijòus', 'divendres', 'dissabte' ],
+    [ 'dg.', 'dl.', 'dm.', 'dc.', 'dj.', 'dv.', 'ds.' ]
   ],
   u,
   [
-    ['GN', 'FB', 'MÇ', 'AB', 'MA', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DC'],
+    [ 'GN', 'FB', 'MÇ', 'AB', 'MA', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DC' ],
     [
       'de gen.', 'de febr.', 'de març', 'd’abr.', 'de mai', 'de junh', 'de jul.', 'd’ag.',
       'de set.', 'd’oct.', 'de nov.', 'de dec.'
@@ -32,7 +32,7 @@ export default [
     ]
   ],
   [
-    ['GN', 'FB', 'MÇ', 'AB', 'MA', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DC'],
+    [ 'GN', 'FB', 'MÇ', 'AB', 'MA', 'JN', 'JL', 'AG', 'ST', 'OC', 'NV', 'DC' ],
     [
       'gen.', 'febr.', 'març', 'abr.', 'mai', 'junh', 'jul.', 'ag.', 'set.', 'oct.', 'nov.',
       'dec.'
@@ -42,62 +42,62 @@ export default [
       'novembre', 'decembre'
     ]
   ],
-  [['aC', 'dC'], u, ['abans Jèsus-Crist', 'aprèp Jèsus-Crist']],
+  [ [ 'aC', 'dC' ], u, [ 'abans Jèsus-Crist', 'aprèp Jèsus-Crist' ] ],
   1,
-  [6, 0],
-  ['d/M/yy', 'd MMM y', 'd MMMM \'de\' y', 'EEEE, d MMMM \'de\' y'],
-  ['H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz'],
-  ['{1} {0}', '{1}, {0}', '{1} \'a\' \'les\' {0}', u],
-  [',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
-  ['#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0'],
+  [ 6, 0 ],
+  [ 'd/M/yy', 'd MMM y', 'd MMMM \'de\' y', 'EEEE, d MMMM \'de\' y' ],
+  [ 'H:mm', 'H:mm:ss', 'H:mm:ss z', 'H:mm:ss zzzz' ],
+  [ '{1} {0}', '{1}, {0}', '{1} \'a\' \'les\' {0}', u ],
+  [ ',', '.', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':' ],
+  [ '#,##0.###', '#,##0%', '#,##0.00 ¤', '#E0' ],
   'EUR',
   '€',
   'euro',
   {
-    'ARS': ['$AR', '$'],
-    'AUD': ['$AU', '$'],
-    'BEF': ['FB'],
-    'BMD': ['$BM', '$'],
-    'BND': ['$BN', '$'],
-    'BZD': ['$BZ', '$'],
-    'CAD': ['$CA', '$'],
-    'CLP': ['$CL', '$'],
-    'CNY': [u, '¥'],
-    'COP': ['$CO', '$'],
-    'CYP': ['£CY'],
-    'EGP': [u, '£E'],
-    'FJD': ['$FJ', '$'],
-    'FKP': ['£FK', '£'],
-    'FRF': ['F'],
-    'GBP': ['£GB', '£'],
-    'GIP': ['£GI', '£'],
-    'HKD': [u, '$'],
-    'IEP': ['£IE'],
-    'ILP': ['£IL'],
-    'ITL': ['₤IT'],
-    'JPY': [u, '¥'],
-    'KMF': [u, 'FC'],
-    'LBP': ['£LB', '£L'],
-    'MTP': ['£MT'],
-    'MXN': ['$MX', '$'],
-    'NAD': ['$NA', '$'],
-    'NIO': [u, '$C'],
-    'NZD': ['$NZ', '$'],
-    'RHD': ['$RH'],
-    'RON': [u, 'L'],
-    'RWF': [u, 'FR'],
-    'SBD': ['$SB', '$'],
-    'SGD': ['$SG', '$'],
-    'SRD': ['$SR', '$'],
-    'TOP': [u, '$T'],
-    'TTD': ['$TT', '$'],
-    'TWD': [u, 'NT$'],
-    'USD': ['$US', '$'],
-    'UYU': ['$UY', '$'],
-    'WST': ['$WS'],
-    'XCD': [u, '$'],
-    'XPF': ['FCFP'],
-    'ZMW': [u, 'Kw']
+    ARS: [ '$AR', '$' ],
+    AUD: [ '$AU', '$' ],
+    BEF: [ 'FB' ],
+    BMD: [ '$BM', '$' ],
+    BND: [ '$BN', '$' ],
+    BZD: [ '$BZ', '$' ],
+    CAD: [ '$CA', '$' ],
+    CLP: [ '$CL', '$' ],
+    CNY: [ u, '¥' ],
+    COP: [ '$CO', '$' ],
+    CYP: [ '£CY' ],
+    EGP: [ u, '£E' ],
+    FJD: [ '$FJ', '$' ],
+    FKP: [ '£FK', '£' ],
+    FRF: [ 'F' ],
+    GBP: [ '£GB', '£' ],
+    GIP: [ '£GI', '£' ],
+    HKD: [ u, '$' ],
+    IEP: [ '£IE' ],
+    ILP: [ '£IL' ],
+    ITL: [ '₤IT' ],
+    JPY: [ u, '¥' ],
+    KMF: [ u, 'FC' ],
+    LBP: [ '£LB', '£L' ],
+    MTP: [ '£MT' ],
+    MXN: [ '$MX', '$' ],
+    NAD: [ '$NA', '$' ],
+    NIO: [ u, '$C' ],
+    NZD: [ '$NZ', '$' ],
+    RHD: [ '$RH' ],
+    RON: [ u, 'L' ],
+    RWF: [ u, 'FR' ],
+    SBD: [ '$SB', '$' ],
+    SGD: [ '$SG', '$' ],
+    SRD: [ '$SR', '$' ],
+    TOP: [ u, '$T' ],
+    TTD: [ '$TT', '$' ],
+    TWD: [ u, 'NT$' ],
+    USD: [ '$US', '$' ],
+    UYU: [ '$UY', '$' ],
+    WST: [ '$WS' ],
+    XCD: [ u, '$' ],
+    XPF: [ 'FCFP' ],
+    ZMW: [ u, 'Kw' ]
   },
   'ltr',
   plural
diff --git a/client/src/app/helpers/utils.ts b/client/src/app/helpers/utils.ts
index edcaf50e0..8636f3a55 100644
--- a/client/src/app/helpers/utils.ts
+++ b/client/src/app/helpers/utils.ts
@@ -10,7 +10,7 @@ import { AuthService } from '../core/auth'
 // Thanks: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
 function getParameterByName (name: string, url: string) {
   if (!url) url = window.location.href
-  name = name.replace(/[\[\]]/g, '\\$&')
+  name = name.replace(/[[\]]/g, '\\$&')
 
   const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)')
   const results = regex.exec(url)
@@ -110,10 +110,10 @@ function objectToFormData (obj: any, form?: FormData, namespace?: string) {
       continue
     }
 
-    if (obj[key] !== null && typeof obj[ key ] === 'object' && !(obj[ key ] instanceof File)) {
-      objectToFormData(obj[ key ], fd, formKey)
+    if (obj[key] !== null && typeof obj[key] === 'object' && !(obj[key] instanceof File)) {
+      objectToFormData(obj[key], fd, formKey)
     } else {
-      fd.append(formKey, obj[ key ])
+      fd.append(formKey, obj[key])
     }
   }
 
@@ -159,7 +159,7 @@ function scrollToTop (behavior: 'auto' | 'smooth' = 'auto') {
 function isInViewport (el: HTMLElement) {
   const bounding = el.getBoundingClientRect()
   return (
-      bounding.top >= 0 &&
+    bounding.top >= 0 &&
       bounding.left >= 0 &&
       bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
       bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
diff --git a/client/src/app/menu/language-chooser.component.ts b/client/src/app/menu/language-chooser.component.ts
index e15aeff20..b42e41855 100644
--- a/client/src/app/menu/language-chooser.component.ts
+++ b/client/src/app/menu/language-chooser.component.ts
@@ -18,7 +18,7 @@ export class LanguageChooserComponent {
     @Inject(LOCALE_ID) private localeId: string
   ) {
     const l = Object.keys(I18N_LOCALES)
-                    .map(k => ({ id: k, label: I18N_LOCALES[k] , iso: getShortLocale(k) }))
+                    .map(k => ({ id: k, label: I18N_LOCALES[k], iso: getShortLocale(k) }))
 
     this.languages = sortBy(l, 'label')
   }
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 627a8712f..97f07c956 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -28,7 +28,7 @@ const logger = debug('peertube:menu:MenuComponent')
 @Component({
   selector: 'my-menu',
   templateUrl: './menu.component.html',
-  styleUrls: ['./menu.component.scss']
+  styleUrls: [ './menu.component.scss' ]
 })
 export class MenuComponent implements OnInit {
   @ViewChild('languageChooserModal', { static: true }) languageChooserModal: LanguageChooserComponent
diff --git a/client/src/app/modal/custom-modal.component.ts b/client/src/app/modal/custom-modal.component.ts
index a98579085..559230e04 100644
--- a/client/src/app/modal/custom-modal.component.ts
+++ b/client/src/app/modal/custom-modal.component.ts
@@ -22,10 +22,10 @@ export class CustomModalComponent {
   ) { }
 
   show (input: {
-    title: string,
-    content: string,
-    close?: boolean,
-    cancel?: { value: string, action?: () => void },
+    title: string
+    content: string
+    close?: boolean
+    cancel?: { value: string, action?: () => void }
     confirm?: { value: string, action?: () => void }
   }) {
     if (this.modalRef instanceof NgbModalRef && this.modalService.hasOpenModals()) {
diff --git a/client/src/app/shared/form-validators/abuse-validators.ts b/client/src/app/shared/form-validators/abuse-validators.ts
index 75bfacf01..8d3c411b4 100644
--- a/client/src/app/shared/form-validators/abuse-validators.ts
+++ b/client/src/app/shared/form-validators/abuse-validators.ts
@@ -2,28 +2,28 @@ import { Validators } from '@angular/forms'
 import { BuildFormValidator } from './form-validator.model'
 
 export const ABUSE_REASON_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.required, Validators.minLength(2), Validators.maxLength(3000)],
+  VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
   MESSAGES: {
-    'required': $localize`Report reason is required.`,
-    'minlength': $localize`Report reason must be at least 2 characters long.`,
-    'maxlength': $localize`Report reason cannot be more than 3000 characters long.`
+    required: $localize`Report reason is required.`,
+    minlength: $localize`Report reason must be at least 2 characters long.`,
+    maxlength: $localize`Report reason cannot be more than 3000 characters long.`
   }
 }
 
 export const ABUSE_MODERATION_COMMENT_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.required, Validators.minLength(2), Validators.maxLength(3000)],
+  VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
   MESSAGES: {
-    'required': $localize`Moderation comment is required.`,
-    'minlength': $localize`Moderation comment must be at least 2 characters long.`,
-    'maxlength': $localize`Moderation comment cannot be more than 3000 characters long.`
+    required: $localize`Moderation comment is required.`,
+    minlength: $localize`Moderation comment must be at least 2 characters long.`,
+    maxlength: $localize`Moderation comment cannot be more than 3000 characters long.`
   }
 }
 
 export const ABUSE_MESSAGE_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.required, Validators.minLength(2), Validators.maxLength(3000)],
+  VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
   MESSAGES: {
-    'required': $localize`Abuse message is required.`,
-    'minlength': $localize`Abuse message must be at least 2 characters long.`,
-    'maxlength': $localize`Abuse message cannot be more than 3000 characters long.`
+    required: $localize`Abuse message is required.`,
+    minlength: $localize`Abuse message must be at least 2 characters long.`,
+    maxlength: $localize`Abuse message cannot be more than 3000 characters long.`
   }
 }
diff --git a/client/src/app/shared/form-validators/custom-config-validators.ts b/client/src/app/shared/form-validators/custom-config-validators.ts
index 1ed5700ff..fbf423d08 100644
--- a/client/src/app/shared/form-validators/custom-config-validators.ts
+++ b/client/src/app/shared/form-validators/custom-config-validators.ts
@@ -2,120 +2,120 @@ import { Validators } from '@angular/forms'
 import { BuildFormValidator } from './form-validator.model'
 
 export const INSTANCE_NAME_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.required],
+  VALIDATORS: [ Validators.required ],
   MESSAGES: {
-    'required': $localize`Instance name is required.`
+    required: $localize`Instance name is required.`
   }
 }
 
 export const INSTANCE_SHORT_DESCRIPTION_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.max(250)],
+  VALIDATORS: [ Validators.max(250) ],
   MESSAGES: {
-    'max': $localize`Short description should not be longer than 250 characters.`
+    max: $localize`Short description should not be longer than 250 characters.`
   }
 }
 
 export const SERVICES_TWITTER_USERNAME_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.required],
+  VALIDATORS: [ Validators.required ],
   MESSAGES: {
-    'required': $localize`Twitter username is required.`
+    required: $localize`Twitter username is required.`
   }
 }
 
 export const CACHE_PREVIEWS_SIZE_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.required, Validators.min(1), Validators.pattern('[0-9]+')],
+  VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
   MESSAGES: {
-    'required': $localize`Previews cache size is required.`,
-    'min': $localize`Previews cache size must be greater than 1.`,
-    'pattern': $localize`Previews cache size must be a number.`
+    required: $localize`Previews cache size is required.`,
+    min: $localize`Previews cache size must be greater than 1.`,
+    pattern: $localize`Previews cache size must be a number.`
   }
 }
 
 export const CACHE_CAPTIONS_SIZE_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.required, Validators.min(1), Validators.pattern('[0-9]+')],
+  VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
   MESSAGES: {
-    'required': $localize`Captions cache size is required.`,
-    'min': $localize`Captions cache size must be greater than 1.`,
-    'pattern': $localize`Captions cache size must be a number.`
+    required: $localize`Captions cache size is required.`,
+    min: $localize`Captions cache size must be greater than 1.`,
+    pattern: $localize`Captions cache size must be a number.`
   }
 }
 
 export const SIGNUP_LIMIT_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.required, Validators.min(-1), Validators.pattern('-?[0-9]+')],
+  VALIDATORS: [ Validators.required, Validators.min(-1), Validators.pattern('-?[0-9]+') ],
   MESSAGES: {
-    'required': $localize`Signup limit is required.`,
-    'min': $localize`Signup limit must be greater than 1. Use -1 to disable it.`,
-    'pattern': $localize`Signup limit must be a number.`
+    required: $localize`Signup limit is required.`,
+    min: $localize`Signup limit must be greater than 1. Use -1 to disable it.`,
+    pattern: $localize`Signup limit must be a number.`
   }
 }
 
 export const SIGNUP_MINIMUM_AGE_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.required, Validators.min(1), Validators.pattern('[0-9]+')],
+  VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
   MESSAGES: {
-    'required': $localize`Signup minimum age is required.`,
-    'min': $localize`Signup minimum age must be greater than 1.`,
-    'pattern': $localize`Signup minimum age must be a number.`
+    required: $localize`Signup minimum age is required.`,
+    min: $localize`Signup minimum age must be greater than 1.`,
+    pattern: $localize`Signup minimum age must be a number.`
   }
 }
 
 export const ADMIN_EMAIL_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.required, Validators.email],
+  VALIDATORS: [ Validators.required, Validators.email ],
   MESSAGES: {
-    'required': $localize`Admin email is required.`,
-    'email': $localize`Admin email must be valid.`
+    required: $localize`Admin email is required.`,
+    email: $localize`Admin email must be valid.`
   }
 }
 
 export const TRANSCODING_THREADS_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.required, Validators.min(0)],
+  VALIDATORS: [ Validators.required, Validators.min(0) ],
   MESSAGES: {
-    'required': $localize`Transcoding threads is required.`,
-    'min': $localize`Transcoding threads must be greater or equal to 0.`
+    required: $localize`Transcoding threads is required.`,
+    min: $localize`Transcoding threads must be greater or equal to 0.`
   }
 }
 
 export const MAX_LIVE_DURATION_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.required, Validators.min(-1)],
+  VALIDATORS: [ Validators.required, Validators.min(-1) ],
   MESSAGES: {
-    'required': $localize`Max live duration is required.`,
-    'min': $localize`Max live duration should be greater or equal to -1.`
+    required: $localize`Max live duration is required.`,
+    min: $localize`Max live duration should be greater or equal to -1.`
   }
 }
 
 export const MAX_INSTANCE_LIVES_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.required, Validators.min(-1)],
+  VALIDATORS: [ Validators.required, Validators.min(-1) ],
   MESSAGES: {
-    'required': $localize`Max instance lives is required.`,
-    'min': $localize`Max instance lives should be greater or equal to -1.`
+    required: $localize`Max instance lives is required.`,
+    min: $localize`Max instance lives should be greater or equal to -1.`
   }
 }
 
 export const MAX_USER_LIVES_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.required, Validators.min(-1)],
+  VALIDATORS: [ Validators.required, Validators.min(-1) ],
   MESSAGES: {
-    'required': $localize`Max user lives is required.`,
-    'min': $localize`Max user lives should be greater or equal to -1.`
+    required: $localize`Max user lives is required.`,
+    min: $localize`Max user lives should be greater or equal to -1.`
   }
 }
 
 export const CONCURRENCY_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.required, Validators.min(1)],
+  VALIDATORS: [ Validators.required, Validators.min(1) ],
   MESSAGES: {
-    'required': $localize`Concurrency is required.`,
-    'min': $localize`Concurrency should be greater or equal to 1.`
+    required: $localize`Concurrency is required.`,
+    min: $localize`Concurrency should be greater or equal to 1.`
   }
 }
 
 export const INDEX_URL_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.pattern(/^https:\/\//)],
+  VALIDATORS: [ Validators.pattern(/^https:\/\//) ],
   MESSAGES: {
-    'pattern': $localize`Index URL should be a URL`
+    pattern: $localize`Index URL should be a URL`
   }
 }
 
 export const SEARCH_INDEX_URL_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.pattern(/^https?:\/\//)],
+  VALIDATORS: [ Validators.pattern(/^https?:\/\//) ],
   MESSAGES: {
-    'pattern': $localize`Search index URL should be a URL`
+    pattern: $localize`Search index URL should be a URL`
   }
 }
diff --git a/client/src/app/shared/form-validators/form-validator.model.ts b/client/src/app/shared/form-validators/form-validator.model.ts
index 07b1ea075..6f2472ccd 100644
--- a/client/src/app/shared/form-validators/form-validator.model.ts
+++ b/client/src/app/shared/form-validators/form-validator.model.ts
@@ -1,7 +1,7 @@
 import { ValidatorFn } from '@angular/forms'
 
 export type BuildFormValidator = {
-  VALIDATORS: ValidatorFn[],
+  VALIDATORS: ValidatorFn[]
   MESSAGES: { [ name: string ]: string }
 }
 
diff --git a/client/src/app/shared/form-validators/host-validators.ts b/client/src/app/shared/form-validators/host-validators.ts
index 6f410a50a..3d9c476b5 100644
--- a/client/src/app/shared/form-validators/host-validators.ts
+++ b/client/src/app/shared/form-validators/host-validators.ts
@@ -4,7 +4,7 @@ import { BuildFormValidator } from './form-validator.model'
 export function validateHost (value: string) {
   // Thanks to http://stackoverflow.com/a/106223
   const HOST_REGEXP = new RegExp(
-    '^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$'
+    '^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])$'
   )
 
   return HOST_REGEXP.test(value)
@@ -32,7 +32,7 @@ const validHosts: ValidatorFn = (control: AbstractControl) => {
   if (errors.length === 0) return null
 
   return {
-    'validHosts': {
+    validHosts: {
       reason: 'invalid',
       value: errors.join('. ') + '.'
     }
@@ -55,7 +55,7 @@ const validHostsOrHandles: ValidatorFn = (control: AbstractControl) => {
   if (errors.length === 0) return null
 
   return {
-    'validHostsOrHandles': {
+    validHostsOrHandles: {
       reason: 'invalid',
       value: errors.join('. ') + '.'
     }
@@ -80,7 +80,7 @@ export const unique: ValidatorFn = (control: AbstractControl) => {
   }
 
   return {
-    'unique': {
+    unique: {
       reason: 'invalid'
     }
   }
@@ -89,17 +89,17 @@ export const unique: ValidatorFn = (control: AbstractControl) => {
 export const UNIQUE_HOSTS_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.required, validHosts, unique ],
   MESSAGES: {
-    'required': $localize`Domain is required.`,
-    'validHosts': $localize`Hosts entered are invalid.`,
-    'unique': $localize`Hosts entered contain duplicates.`
+    required: $localize`Domain is required.`,
+    validHosts: $localize`Hosts entered are invalid.`,
+    unique: $localize`Hosts entered contain duplicates.`
   }
 }
 
 export const UNIQUE_HOSTS_OR_HANDLE_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.required, validHostsOrHandles, unique ],
   MESSAGES: {
-    'required': $localize`Domain is required.`,
-    'validHostsOrHandles': $localize`Hosts or handles are invalid.`,
-    'unique': $localize`Hosts or handles contain duplicates.`
+    required: $localize`Domain is required.`,
+    validHostsOrHandles: $localize`Hosts or handles are invalid.`,
+    unique: $localize`Hosts or handles contain duplicates.`
   }
 }
diff --git a/client/src/app/shared/form-validators/instance-validators.ts b/client/src/app/shared/form-validators/instance-validators.ts
index a72e28ba0..4b1f0d048 100644
--- a/client/src/app/shared/form-validators/instance-validators.ts
+++ b/client/src/app/shared/form-validators/instance-validators.ts
@@ -2,10 +2,10 @@ import { Validators } from '@angular/forms'
 import { BuildFormValidator } from './form-validator.model'
 
 export const FROM_EMAIL_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [Validators.required, Validators.email],
+  VALIDATORS: [ Validators.required, Validators.email ],
   MESSAGES: {
-    'required': $localize`Email is required.`,
-    'email': $localize`Email must be valid.`
+    required: $localize`Email is required.`,
+    email: $localize`Email must be valid.`
   }
 }
 
@@ -16,9 +16,9 @@ export const FROM_NAME_VALIDATOR: BuildFormValidator = {
     Validators.maxLength(120)
   ],
   MESSAGES: {
-    'required': $localize`Your name is required.`,
-    'minlength': $localize`Your name must be at least 1 character long.`,
-    'maxlength': $localize`Your name cannot be more than 120 characters long.`
+    required: $localize`Your name is required.`,
+    minlength: $localize`Your name must be at least 1 character long.`,
+    maxlength: $localize`Your name cannot be more than 120 characters long.`
   }
 }
 
@@ -29,9 +29,9 @@ export const SUBJECT_VALIDATOR: BuildFormValidator = {
     Validators.maxLength(120)
   ],
   MESSAGES: {
-    'required': $localize`A subject is required.`,
-    'minlength': $localize`The subject must be at least 1 character long.`,
-    'maxlength': $localize`The subject cannot be more than 120 characters long.`
+    required: $localize`A subject is required.`,
+    minlength: $localize`The subject must be at least 1 character long.`,
+    maxlength: $localize`The subject cannot be more than 120 characters long.`
   }
 }
 
@@ -42,8 +42,8 @@ export const BODY_VALIDATOR: BuildFormValidator = {
     Validators.maxLength(5000)
   ],
   MESSAGES: {
-    'required': $localize`A message is required.`,
-    'minlength': $localize`The message must be at least 3 characters long.`,
-    'maxlength': $localize`The message cannot be more than 5000 characters long.`
+    required: $localize`A message is required.`,
+    minlength: $localize`The message must be at least 3 characters long.`,
+    maxlength: $localize`The message cannot be more than 5000 characters long.`
   }
 }
diff --git a/client/src/app/shared/form-validators/login-validators.ts b/client/src/app/shared/form-validators/login-validators.ts
index 1ceae1be3..5b911ac47 100644
--- a/client/src/app/shared/form-validators/login-validators.ts
+++ b/client/src/app/shared/form-validators/login-validators.ts
@@ -6,7 +6,7 @@ export const LOGIN_USERNAME_VALIDATOR: BuildFormValidator = {
     Validators.required
   ],
   MESSAGES: {
-    'required': $localize`Username is required.`
+    required: $localize`Username is required.`
   }
 }
 
@@ -15,6 +15,6 @@ export const LOGIN_PASSWORD_VALIDATOR: BuildFormValidator = {
     Validators.required
   ],
   MESSAGES: {
-    'required': $localize`Password is required.`
+    required: $localize`Password is required.`
   }
 }
diff --git a/client/src/app/shared/form-validators/reset-password-validators.ts b/client/src/app/shared/form-validators/reset-password-validators.ts
index b87f2eab9..70617a562 100644
--- a/client/src/app/shared/form-validators/reset-password-validators.ts
+++ b/client/src/app/shared/form-validators/reset-password-validators.ts
@@ -6,6 +6,6 @@ export const RESET_PASSWORD_CONFIRM_VALIDATOR: BuildFormValidator = {
     Validators.required
   ],
   MESSAGES: {
-    'required': $localize`Confirmation of the password is required.`
+    required: $localize`Confirmation of the password is required.`
   }
 }
diff --git a/client/src/app/shared/form-validators/user-validators.ts b/client/src/app/shared/form-validators/user-validators.ts
index 976c97b87..6d0dea64e 100644
--- a/client/src/app/shared/form-validators/user-validators.ts
+++ b/client/src/app/shared/form-validators/user-validators.ts
@@ -11,10 +11,10 @@ export const USER_USERNAME_VALIDATOR: BuildFormValidator = {
     Validators.pattern(new RegExp(`^${USER_USERNAME_REGEX_CHARACTERS}*$`))
   ],
   MESSAGES: {
-    'required': $localize`Username is required.`,
-    'minlength': $localize`Username must be at least 1 character long.`,
-    'maxlength': $localize`Username cannot be more than 50 characters long.`,
-    'pattern': $localize`Username should be lowercase alphanumeric; dots and underscores are allowed.`
+    required: $localize`Username is required.`,
+    minlength: $localize`Username must be at least 1 character long.`,
+    maxlength: $localize`Username cannot be more than 50 characters long.`,
+    pattern: $localize`Username should be lowercase alphanumeric; dots and underscores are allowed.`
   }
 }
 
@@ -26,18 +26,18 @@ export const USER_CHANNEL_NAME_VALIDATOR: BuildFormValidator = {
     Validators.pattern(/^[a-z0-9][a-z0-9._]*$/)
   ],
   MESSAGES: {
-    'required': $localize`Channel name is required.`,
-    'minlength': $localize`Channel name must be at least 1 character long.`,
-    'maxlength': $localize`Channel name cannot be more than 50 characters long.`,
-    'pattern': $localize`Channel name should be lowercase, and can contain only alphanumeric characters, dots and underscores.`
+    required: $localize`Channel name is required.`,
+    minlength: $localize`Channel name must be at least 1 character long.`,
+    maxlength: $localize`Channel name cannot be more than 50 characters long.`,
+    pattern: $localize`Channel name should be lowercase, and can contain only alphanumeric characters, dots and underscores.`
   }
 }
 
 export const USER_EMAIL_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.required, Validators.email ],
   MESSAGES: {
-    'required': $localize`Email is required.`,
-    'email': $localize`Email must be valid.`
+    required: $localize`Email is required.`,
+    email: $localize`Email must be valid.`
   }
 }
 
@@ -47,8 +47,8 @@ export const USER_HANDLE_VALIDATOR: BuildFormValidator = {
     Validators.pattern(/@.+/)
   ],
   MESSAGES: {
-    'required': $localize`Handle is required.`,
-    'pattern': $localize`Handle must be valid (eg. chocobozzz@example.com).`
+    required: $localize`Handle is required.`,
+    pattern: $localize`Handle must be valid (eg. chocobozzz@example.com).`
   }
 }
 
@@ -57,7 +57,7 @@ export const USER_EXISTING_PASSWORD_VALIDATOR: BuildFormValidator = {
     Validators.required
   ],
   MESSAGES: {
-    'required': $localize`Password is required.`
+    required: $localize`Password is required.`
   }
 }
 
@@ -68,9 +68,9 @@ export const USER_PASSWORD_VALIDATOR: BuildFormValidator = {
     Validators.maxLength(255)
   ],
   MESSAGES: {
-    'required': $localize`Password is required.`,
-    'minlength': $localize`Password must be at least 6 characters long.`,
-    'maxlength': $localize`Password cannot be more than 255 characters long.`
+    required: $localize`Password is required.`,
+    minlength: $localize`Password must be at least 6 characters long.`,
+    maxlength: $localize`Password cannot be more than 255 characters long.`
   }
 }
 
@@ -80,37 +80,37 @@ export const USER_PASSWORD_OPTIONAL_VALIDATOR: BuildFormValidator = {
     Validators.maxLength(255)
   ],
   MESSAGES: {
-    'minlength': $localize`Password must be at least 6 characters long.`,
-    'maxlength': $localize`Password cannot be more than 255 characters long.`
+    minlength: $localize`Password must be at least 6 characters long.`,
+    maxlength: $localize`Password cannot be more than 255 characters long.`
   }
 }
 
 export const USER_CONFIRM_PASSWORD_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [],
   MESSAGES: {
-    'matchPassword': $localize`The new password and the confirmed password do not correspond.`
+    matchPassword: $localize`The new password and the confirmed password do not correspond.`
   }
 }
 
 export const USER_VIDEO_QUOTA_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.required, Validators.min(-1) ],
   MESSAGES: {
-    'required': $localize`Video quota is required.`,
-    'min': $localize`Quota must be greater than -1.`
+    required: $localize`Video quota is required.`,
+    min: $localize`Quota must be greater than -1.`
   }
 }
 export const USER_VIDEO_QUOTA_DAILY_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.required, Validators.min(-1) ],
   MESSAGES: {
-    'required': $localize`Daily upload limit is required.`,
-    'min': $localize`Daily upload limit must be greater than -1.`
+    required: $localize`Daily upload limit is required.`,
+    min: $localize`Daily upload limit must be greater than -1.`
   }
 }
 
 export const USER_ROLE_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.required ],
   MESSAGES: {
-    'required': $localize`User role is required.`
+    required: $localize`User role is required.`
   }
 }
 
@@ -122,15 +122,15 @@ export const USER_DESCRIPTION_VALIDATOR: BuildFormValidator = {
     Validators.maxLength(1000)
   ],
   MESSAGES: {
-    'minlength': $localize`Description must be at least 3 characters long.`,
-    'maxlength': $localize`Description cannot be more than 1000 characters long.`
+    minlength: $localize`Description must be at least 3 characters long.`,
+    maxlength: $localize`Description cannot be more than 1000 characters long.`
   }
 }
 
 export const USER_TERMS_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.requiredTrue ],
   MESSAGES: {
-    'required': $localize`You must agree with the instance terms in order to register on it.`
+    required: $localize`You must agree with the instance terms in order to register on it.`
   }
 }
 
@@ -140,8 +140,8 @@ export const USER_BAN_REASON_VALIDATOR: BuildFormValidator = {
     Validators.maxLength(250)
   ],
   MESSAGES: {
-    'minlength': $localize`Ban reason must be at least 3 characters long.`,
-    'maxlength': $localize`Ban reason cannot be more than 250 characters long.`
+    minlength: $localize`Ban reason must be at least 3 characters long.`,
+    maxlength: $localize`Ban reason cannot be more than 250 characters long.`
   }
 }
 
@@ -152,9 +152,9 @@ function buildDisplayNameValidator (required: boolean) {
       Validators.maxLength(120)
     ],
     MESSAGES: {
-      'required': $localize`Display name is required.`,
-      'minlength': $localize`Display name must be at least 1 character long.`,
-      'maxlength': $localize`Display name cannot be more than 50 characters long.`
+      required: $localize`Display name is required.`,
+      minlength: $localize`Display name must be at least 1 character long.`,
+      maxlength: $localize`Display name cannot be more than 50 characters long.`
     }
   }
 
diff --git a/client/src/app/shared/form-validators/video-block-validators.ts b/client/src/app/shared/form-validators/video-block-validators.ts
index d3974aefe..cd2791b76 100644
--- a/client/src/app/shared/form-validators/video-block-validators.ts
+++ b/client/src/app/shared/form-validators/video-block-validators.ts
@@ -4,7 +4,7 @@ import { BuildFormValidator } from './form-validator.model'
 export const VIDEO_BLOCK_REASON_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.minLength(2), Validators.maxLength(300) ],
   MESSAGES: {
-    'minlength': $localize`Block reason must be at least 2 characters long.`,
-    'maxlength': $localize`Block reason cannot be more than 300 characters long.`
+    minlength: $localize`Block reason must be at least 2 characters long.`,
+    maxlength: $localize`Block reason cannot be more than 300 characters long.`
   }
 }
diff --git a/client/src/app/shared/form-validators/video-captions-validators.ts b/client/src/app/shared/form-validators/video-captions-validators.ts
index 9742d2925..a16216422 100644
--- a/client/src/app/shared/form-validators/video-captions-validators.ts
+++ b/client/src/app/shared/form-validators/video-captions-validators.ts
@@ -4,13 +4,13 @@ import { BuildFormValidator } from './form-validator.model'
 export const VIDEO_CAPTION_LANGUAGE_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.required ],
   MESSAGES: {
-    'required': $localize`Video caption language is required.`
+    required: $localize`Video caption language is required.`
   }
 }
 
 export const VIDEO_CAPTION_FILE_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.required ],
   MESSAGES: {
-    'required': $localize`Video caption file is required.`
+    required: $localize`Video caption file is required.`
   }
 }
diff --git a/client/src/app/shared/form-validators/video-channel-validators.ts b/client/src/app/shared/form-validators/video-channel-validators.ts
index ba502ed01..48f5b1a2c 100644
--- a/client/src/app/shared/form-validators/video-channel-validators.ts
+++ b/client/src/app/shared/form-validators/video-channel-validators.ts
@@ -7,10 +7,10 @@ export const VIDEO_CHANNEL_NAME_VALIDATOR: BuildFormValidator = {
   VALIDATORS: USER_USERNAME_VALIDATOR.VALIDATORS,
 
   MESSAGES: {
-    'required': $localize`Name is required.`,
-    'minlength': $localize`Name must be at least 1 character long.`,
-    'maxlength': $localize`Name cannot be more than 50 characters long.`,
-    'pattern': $localize`Name should be lowercase alphanumeric; dots and underscores are allowed.`
+    required: $localize`Name is required.`,
+    minlength: $localize`Name must be at least 1 character long.`,
+    maxlength: $localize`Name cannot be more than 50 characters long.`,
+    pattern: $localize`Name should be lowercase alphanumeric; dots and underscores are allowed.`
   }
 }
 
@@ -21,9 +21,9 @@ export const VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR: BuildFormValidator = {
     Validators.maxLength(50)
   ],
   MESSAGES: {
-    'required': $localize`Display name is required.`,
-    'minlength': $localize`Display name must be at least 1 character long.`,
-    'maxlength': $localize`Display name cannot be more than 50 characters long.`
+    required: $localize`Display name is required.`,
+    minlength: $localize`Display name must be at least 1 character long.`,
+    maxlength: $localize`Display name cannot be more than 50 characters long.`
   }
 }
 
@@ -33,8 +33,8 @@ export const VIDEO_CHANNEL_DESCRIPTION_VALIDATOR: BuildFormValidator = {
     Validators.maxLength(1000)
   ],
   MESSAGES: {
-    'minlength': $localize`Description must be at least 3 characters long.`,
-    'maxlength': $localize`Description cannot be more than 1000 characters long.`
+    minlength: $localize`Description must be at least 3 characters long.`,
+    maxlength: $localize`Description cannot be more than 1000 characters long.`
   }
 }
 
@@ -44,7 +44,7 @@ export const VIDEO_CHANNEL_SUPPORT_VALIDATOR: BuildFormValidator = {
     Validators.maxLength(1000)
   ],
   MESSAGES: {
-    'minlength': $localize`Support text must be at least 3 characters long.`,
-    'maxlength': $localize`Support text cannot be more than 1000 characters long`
+    minlength: $localize`Support text must be at least 3 characters long.`,
+    maxlength: $localize`Support text cannot be more than 1000 characters long`
   }
 }
diff --git a/client/src/app/shared/form-validators/video-comment-validators.ts b/client/src/app/shared/form-validators/video-comment-validators.ts
index c56564d34..9e8f95e7c 100644
--- a/client/src/app/shared/form-validators/video-comment-validators.ts
+++ b/client/src/app/shared/form-validators/video-comment-validators.ts
@@ -4,8 +4,8 @@ import { BuildFormValidator } from './form-validator.model'
 export const VIDEO_COMMENT_TEXT_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.required, Validators.minLength(1), Validators.maxLength(3000) ],
   MESSAGES: {
-    'required': $localize`Comment is required.`,
-    'minlength': $localize`Comment must be at least 2 characters long.`,
-    'maxlength': $localize`Comment cannot be more than 3000 characters long.`
+    required: $localize`Comment is required.`,
+    minlength: $localize`Comment must be at least 2 characters long.`,
+    maxlength: $localize`Comment cannot be more than 3000 characters long.`
   }
 }
diff --git a/client/src/app/shared/form-validators/video-ownership-change-validators.ts b/client/src/app/shared/form-validators/video-ownership-change-validators.ts
index e1a2df8a6..3e7823c49 100644
--- a/client/src/app/shared/form-validators/video-ownership-change-validators.ts
+++ b/client/src/app/shared/form-validators/video-ownership-change-validators.ts
@@ -4,21 +4,21 @@ import { BuildFormValidator } from './form-validator.model'
 export const OWNERSHIP_CHANGE_CHANNEL_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.required ],
   MESSAGES: {
-    'required': $localize`The channel is required.`
+    required: $localize`The channel is required.`
   }
 }
 
 export const OWNERSHIP_CHANGE_USERNAME_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.required, localAccountValidator ],
   MESSAGES: {
-    'required': $localize`The username is required.`,
-    'localAccountOnly': $localize`You can only transfer ownership to a local account`
+    required: $localize`The username is required.`,
+    localAccountOnly: $localize`You can only transfer ownership to a local account`
   }
 }
 
 function localAccountValidator (control: AbstractControl): ValidationErrors {
   if (control.value.includes('@')) {
-    return { 'localAccountOnly': true }
+    return { localAccountOnly: true }
   }
 
   return null
diff --git a/client/src/app/shared/form-validators/video-playlist-validators.ts b/client/src/app/shared/form-validators/video-playlist-validators.ts
index 7e3d29458..63af637a3 100644
--- a/client/src/app/shared/form-validators/video-playlist-validators.ts
+++ b/client/src/app/shared/form-validators/video-playlist-validators.ts
@@ -9,9 +9,9 @@ export const VIDEO_PLAYLIST_DISPLAY_NAME_VALIDATOR: BuildFormValidator = {
     Validators.maxLength(120)
   ],
   MESSAGES: {
-    'required': $localize`Display name is required.`,
-    'minlength': $localize`Display name must be at least 1 character long.`,
-    'maxlength': $localize`Display name cannot be more than 120 characters long.`
+    required: $localize`Display name is required.`,
+    minlength: $localize`Display name must be at least 1 character long.`,
+    maxlength: $localize`Display name cannot be more than 120 characters long.`
   }
 }
 
@@ -20,7 +20,7 @@ export const VIDEO_PLAYLIST_PRIVACY_VALIDATOR: BuildFormValidator = {
     Validators.required
   ],
   MESSAGES: {
-    'required': $localize`Privacy is required.`
+    required: $localize`Privacy is required.`
   }
 }
 
@@ -30,21 +30,21 @@ export const VIDEO_PLAYLIST_DESCRIPTION_VALIDATOR: BuildFormValidator = {
     Validators.maxLength(1000)
   ],
   MESSAGES: {
-    'minlength': $localize`Description must be at least 3 characters long.`,
-    'maxlength': $localize`Description cannot be more than 1000 characters long.`
+    minlength: $localize`Description must be at least 3 characters long.`,
+    maxlength: $localize`Description cannot be more than 1000 characters long.`
   }
 }
 
 export const VIDEO_PLAYLIST_CHANNEL_ID_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [],
   MESSAGES: {
-    'required': $localize`The channel is required when the playlist is public.`
+    required: $localize`The channel is required when the playlist is public.`
   }
 }
 
 export function setPlaylistChannelValidator (channelControl: AbstractControl, privacy: VideoPlaylistPrivacy) {
   if (privacy.toString() === VideoPlaylistPrivacy.PUBLIC.toString()) {
-    channelControl.setValidators([Validators.required])
+    channelControl.setValidators([ Validators.required ])
   } else {
     channelControl.setValidators(null)
   }
diff --git a/client/src/app/shared/form-validators/video-validators.ts b/client/src/app/shared/form-validators/video-validators.ts
index 1382a7747..f96189aa2 100644
--- a/client/src/app/shared/form-validators/video-validators.ts
+++ b/client/src/app/shared/form-validators/video-validators.ts
@@ -12,17 +12,17 @@ export const trimValidator: ValidatorFn = (control: FormControl) => {
 export const VIDEO_NAME_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(120) ],
   MESSAGES: {
-    'required': $localize`Video name is required.`,
-    'minlength': $localize`Video name must be at least 3 characters long.`,
-    'maxlength': $localize`Video name cannot be more than 120 characters long.`,
-    'spaces': $localize`Video name has leading or trailing whitespace.`
+    required: $localize`Video name is required.`,
+    minlength: $localize`Video name must be at least 3 characters long.`,
+    maxlength: $localize`Video name cannot be more than 120 characters long.`,
+    spaces: $localize`Video name has leading or trailing whitespace.`
   }
 }
 
 export const VIDEO_PRIVACY_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.required ],
   MESSAGES: {
-    'required': $localize`Video privacy is required.`
+    required: $localize`Video privacy is required.`
   }
 }
 
@@ -49,46 +49,46 @@ export const VIDEO_IMAGE_VALIDATOR: BuildFormValidator = {
 export const VIDEO_CHANNEL_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.required ],
   MESSAGES: {
-    'required': $localize`Video channel is required.`
+    required: $localize`Video channel is required.`
   }
 }
 
 export const VIDEO_DESCRIPTION_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.minLength(3), Validators.maxLength(10000) ],
   MESSAGES: {
-    'minlength': $localize`Video description must be at least 3 characters long.`,
-    'maxlength': $localize`Video description cannot be more than 10000 characters long.`
+    minlength: $localize`Video description must be at least 3 characters long.`,
+    maxlength: $localize`Video description cannot be more than 10000 characters long.`
   }
 }
 
 export const VIDEO_TAG_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.minLength(2), Validators.maxLength(30) ],
   MESSAGES: {
-    'minlength': $localize`A tag should be more than 2 characters long.`,
-    'maxlength': $localize`A tag should be less than 30 characters long.`
+    minlength: $localize`A tag should be more than 2 characters long.`,
+    maxlength: $localize`A tag should be less than 30 characters long.`
   }
 }
 
 export const VIDEO_TAGS_ARRAY_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.maxLength(5), arrayTagLengthValidator() ],
   MESSAGES: {
-    'maxlength': $localize`A maximum of 5 tags can be used on a video.`,
-    'arrayTagLength': $localize`A tag should be more than 1 and less than 30 characters long.`
+    maxlength: $localize`A maximum of 5 tags can be used on a video.`,
+    arrayTagLength: $localize`A tag should be more than 1 and less than 30 characters long.`
   }
 }
 
 export const VIDEO_SUPPORT_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.minLength(3), Validators.maxLength(1000) ],
   MESSAGES: {
-    'minlength': $localize`Video support must be at least 3 characters long.`,
-    'maxlength': $localize`Video support cannot be more than 1000 characters long.`
+    minlength: $localize`Video support must be at least 3 characters long.`,
+    maxlength: $localize`Video support cannot be more than 1000 characters long.`
   }
 }
 
 export const VIDEO_SCHEDULE_PUBLICATION_AT_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ ],
   MESSAGES: {
-    'required': $localize`A date is required to schedule video update.`
+    required: $localize`A date is required to schedule video update.`
   }
 }
 
@@ -105,6 +105,6 @@ function arrayTagLengthValidator (min = 2, max = 30): ValidatorFn {
       return null
     }
 
-    return { 'arrayTagLength': true }
+    return { arrayTagLength: true }
   }
 }
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
index e3bf9e1fb..33e9fd8de 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
@@ -39,23 +39,23 @@ export class AbuseListTableComponent extends RestTable implements OnInit {
 
   inputFilters: AdvancedInputFilter[] = [
     {
-      queryParams: { 'search': 'state:pending' },
+      queryParams: { search: 'state:pending' },
       label: $localize`Unsolved reports`
     },
     {
-      queryParams: { 'search': 'state:accepted' },
+      queryParams: { search: 'state:accepted' },
       label: $localize`Accepted reports`
     },
     {
-      queryParams: { 'search': 'state:rejected' },
+      queryParams: { search: 'state:rejected' },
       label: $localize`Refused reports`
     },
     {
-      queryParams: { 'search': 'videoIs:blacklisted' },
+      queryParams: { search: 'videoIs:blacklisted' },
       label: $localize`Reports with blocked videos`
     },
     {
-      queryParams: { 'search': 'videoIs:deleted' },
+      queryParams: { search: 'videoIs:deleted' },
       label: $localize`Reports with deleted videos`
     }
   ]
diff --git a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts
index 06f1555ea..ccb0c5262 100644
--- a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts
+++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts
@@ -50,7 +50,7 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
   }
 
   async banUser () {
-    const moderationComment: string = this.form.value[ 'moderationComment' ]
+    const moderationComment: string = this.form.value['moderationComment']
 
     this.abuseService.updateAbuse(this.abuseToComment, { moderationComment })
         .subscribe({
diff --git a/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts b/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts
index fce1a8db3..194d52a33 100644
--- a/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts
+++ b/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts
@@ -5,7 +5,7 @@ import { Account } from '@app/shared/shared-main'
 // Don't use an abuse model because we need external services to compute some properties
 // And this model is only used in this component
 export type ProcessedAbuse = AdminAbuse & {
-  moderationCommentHtml?: string,
+  moderationCommentHtml?: string
   reasonHtml?: string
   embedHtml?: SafeHtml
   updatedAt?: Date
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts
index dc9b72ddb..2c0e45e20 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts
@@ -51,7 +51,7 @@ export class ActorAvatarEditComponent implements OnInit {
   onAvatarChange (input: HTMLInputElement) {
     this.avatarfileInput = new ElementRef(input)
 
-    const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ]
+    const avatarfile = this.avatarfileInput.nativeElement.files[0]
     if (avatarfile.size > this.maxAvatarSize) {
       this.notifier.error('Error', $localize`This image is too large.`)
       return
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts
index c3f10c055..cba2c5db3 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts
@@ -40,14 +40,14 @@ export class ActorBannerEditComponent implements OnInit {
     this.maxBannerSize = config.banner.file.size.max
     this.bannerExtensions = config.banner.file.extensions.join(', ')
 
-    // tslint:disable:max-line-length
+    /* eslint-disable max-len */
     this.bannerFormat = $localize`ratio 6/1, recommended size: 1920x317, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
   }
 
   onBannerChange (input: HTMLInputElement) {
     this.bannerfileInput = new ElementRef(input)
 
-    const bannerfile = this.bannerfileInput.nativeElement.files[ 0 ]
+    const bannerfile = this.bannerfileInput.nativeElement.files[0]
     if (bannerfile.size > this.maxBannerSize) {
       this.notifier.error('Error', $localize`This image is too large.`)
       return
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
index b06c2bae6..a4adfd1b7 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -17,6 +17,8 @@ export type ActorAvatarSize = '18' | '25' | '32' | '34' | '36' | '40' | '100' |
   templateUrl: './actor-avatar.component.html'
 })
 export class ActorAvatarComponent {
+  private _title: string
+
   @Input() account: ActorInput
   @Input() channel: ActorInput
 
@@ -33,8 +35,6 @@ export class ActorAvatarComponent {
     this._title = value
   }
 
-  private _title: string
-
   get title () {
     if (this._title) return this._title
     if (this.account) return $localize`${this.account.name} (account page)`
@@ -50,22 +50,6 @@ export class ActorAvatarComponent {
     return ''
   }
 
-  getClass (type: 'avatar' | 'initial') {
-    const base = [ 'avatar' ]
-
-    if (this.size) base.push(`avatar-${this.size}`)
-
-    if (this.channel) base.push('channel')
-    else base.push('account')
-
-    if (type === 'initial' && this.initial) {
-      base.push('initial')
-      base.push(this.getColorTheme())
-    }
-
-    return base
-  }
-
   get defaultAvatarUrl () {
     if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL()
 
@@ -86,6 +70,22 @@ export class ActorAvatarComponent {
     return name.slice(0, 1)
   }
 
+  getClass (type: 'avatar' | 'initial') {
+    const base = [ 'avatar' ]
+
+    if (this.size) base.push(`avatar-${this.size}`)
+
+    if (this.channel) base.push('channel')
+    else base.push('account')
+
+    if (type === 'initial' && this.initial) {
+      base.push('initial')
+      base.push(this.getColorTheme())
+    }
+
+    return base
+  }
+
   hasActor () {
     return !!this.account || !!this.channel
   }
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts
index 8c1357d7a..35b413b60 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts
@@ -39,9 +39,13 @@ export class ChannelMiniatureMarkupComponent implements CustomMarkupComponent, O
   ngOnInit () {
     this.findInBulk.getChannel(this.name)
       .pipe(
-        tap(channel => this.channel = channel),
+        tap(channel => {
+          this.channel = channel
+        }),
         switchMap(() => from(this.markdown.textMarkdownToHTML(this.channel.description))),
-        tap(html => this.descriptionHTML = html),
+        tap(html => {
+          this.descriptionHTML = html
+        }),
         switchMap(() => this.loadVideosObservable()),
         finalize(() => this.loaded.emit(true))
       ).subscribe({
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts
index 56b43d85e..7315126e0 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts
@@ -1,10 +1,10 @@
 import { finalize } from 'rxjs/operators'
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { AuthService, Notifier } from '@app/core'
-import { Video, VideoService } from '../../shared-main'
+import { FindInBulkService } from '@app/shared/shared-search'
+import { Video } from '../../shared-main'
 import { MiniatureDisplayOptions } from '../../shared-video-miniature'
 import { CustomMarkupComponent } from './shared'
-import { FindInBulkService } from '@app/shared/shared-search'
 
 /*
  * Markup component that creates a video miniature only
diff --git a/client/src/app/shared/shared-forms/form-reactive.ts b/client/src/app/shared/shared-forms/form-reactive.ts
index adf6cb894..f2ce82360 100644
--- a/client/src/app/shared/shared-forms/form-reactive.ts
+++ b/client/src/app/shared/shared-forms/form-reactive.ts
@@ -51,7 +51,7 @@ export abstract class FormReactive {
       }
 
       // clear previous error message (if any)
-      formErrors[ field ] = ''
+      formErrors[field] = ''
       const control = form.get(field)
 
       if (control.dirty) this.formChanged = true
@@ -59,9 +59,9 @@ export abstract class FormReactive {
       // Don't care if dirty on force check
       const isDirty = control.dirty || forceCheck === true
       if (control && isDirty && control.enabled && !control.valid) {
-        const messages = validationMessages[ field ]
+        const messages = validationMessages[field]
         for (const key of Object.keys(control.errors)) {
-          formErrors[ field ] += messages[ key ] + ' '
+          formErrors[field] += messages[key] + ' '
         }
       }
     }
diff --git a/client/src/app/shared/shared-forms/form-validator.service.ts b/client/src/app/shared/shared-forms/form-validator.service.ts
index 41c8b76bd..c0664de5f 100644
--- a/client/src/app/shared/shared-forms/form-validator.service.ts
+++ b/client/src/app/shared/shared-forms/form-validator.service.ts
@@ -28,11 +28,11 @@ export class FormValidatorService {
         continue
       }
 
-      if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES as { [ name: string ]: string }
+      if (field?.MESSAGES) validationMessages[name] = field.MESSAGES as { [ name: string ]: string }
 
       const defaultValue = defaultValues[name] || ''
 
-      if (field && field.VALIDATORS) group[name] = [ defaultValue, field.VALIDATORS ]
+      if (field?.VALIDATORS) group[name] = [ defaultValue, field.VALIDATORS ]
       else group[name] = [ defaultValue ]
     }
 
@@ -62,11 +62,11 @@ export class FormValidatorService {
         continue
       }
 
-      if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES as { [ name: string ]: string }
+      if (field?.MESSAGES) validationMessages[name] = field.MESSAGES as { [ name: string ]: string }
 
       const defaultValue = defaultValues[name] || ''
 
-      if (field && field.VALIDATORS) form.addControl(name, new FormControl(defaultValue, field.VALIDATORS as ValidatorFn[]))
+      if (field?.VALIDATORS) form.addControl(name, new FormControl(defaultValue, field.VALIDATORS as ValidatorFn[]))
       else form.addControl(name, new FormControl(defaultValue))
     }
   }
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.ts b/client/src/app/shared/shared-forms/reactive-file.component.ts
index fac3dfb3a..9d27ad07a 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.ts
+++ b/client/src/app/shared/shared-forms/reactive-file.component.ts
@@ -43,7 +43,7 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
   }
 
   fileChange (event: any) {
-    if (event.target.files && event.target.files.length) {
+    if (event.target.files?.length) {
       const [ file ] = event.target.files
 
       if (file.size > this.maxFileSize) {
diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index a47f07fc3..cb5f31c8e 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -3,77 +3,77 @@ import { HooksService } from '@app/core/plugins/hooks.service'
 
 const icons = {
   // misc icons
-  'npm': require('!!raw-loader?!../../../assets/images/misc/npm.svg').default,
-  'markdown': require('!!raw-loader?!../../../assets/images/misc/markdown.svg').default,
-  'language': require('!!raw-loader?!../../../assets/images/misc/language.svg').default,
+  npm: require('!!raw-loader?!../../../assets/images/misc/npm.svg').default,
+  markdown: require('!!raw-loader?!../../../assets/images/misc/markdown.svg').default,
+  language: require('!!raw-loader?!../../../assets/images/misc/language.svg').default,
   'video-lang': require('!!raw-loader?!../../../assets/images/misc/video-lang.svg').default,
-  'support': require('!!raw-loader?!../../../assets/images/misc/support.svg').default,
+  support: require('!!raw-loader?!../../../assets/images/misc/support.svg').default,
   'peertube-x': require('!!raw-loader?!../../../assets/images/misc/peertube-x.svg').default,
-  'robot': require('!!raw-loader?!../../../assets/images/misc/miscellaneous-services.svg').default, // material ui
-  'videos': require('!!raw-loader?!../../../assets/images/misc/video-library.svg').default, // material ui
-  'history': require('!!raw-loader?!../../../assets/images/misc/history.svg').default, // material ui
-  'subscriptions': require('!!raw-loader?!../../../assets/images/misc/subscriptions.svg').default, // material ui
+  robot: require('!!raw-loader?!../../../assets/images/misc/miscellaneous-services.svg').default, // material ui
+  videos: require('!!raw-loader?!../../../assets/images/misc/video-library.svg').default, // material ui
+  history: require('!!raw-loader?!../../../assets/images/misc/history.svg').default, // material ui
+  subscriptions: require('!!raw-loader?!../../../assets/images/misc/subscriptions.svg').default, // material ui
   'playlist-add': require('!!raw-loader?!../../../assets/images/misc/playlist-add.svg').default, // material ui
-  'follower': require('!!raw-loader?!../../../assets/images/misc/account-arrow-left.svg').default, // material ui
-  'following': require('!!raw-loader?!../../../assets/images/misc/account-arrow-right.svg').default, // material ui
-  'flame': require('!!raw-loader?!../../../assets/images/misc/flame.svg').default,
-  'local': require('!!raw-loader?!../../../assets/images/misc/local.svg').default,
+  follower: require('!!raw-loader?!../../../assets/images/misc/account-arrow-left.svg').default, // material ui
+  following: require('!!raw-loader?!../../../assets/images/misc/account-arrow-right.svg').default, // material ui
+  flame: require('!!raw-loader?!../../../assets/images/misc/flame.svg').default,
+  local: require('!!raw-loader?!../../../assets/images/misc/local.svg').default,
 
   // feather icons
-  'flag': require('!!raw-loader?!../../../assets/images/feather/flag.svg').default,
-  'playlists': require('!!raw-loader?!../../../assets/images/feather/list.svg').default,
-  'syndication': require('!!raw-loader?!../../../assets/images/feather/syndication.svg').default,
-  'help': require('!!raw-loader?!../../../assets/images/feather/help.svg').default,
-  'alert': require('!!raw-loader?!../../../assets/images/feather/alert.svg').default,
-  'globe': require('!!raw-loader?!../../../assets/images/feather/globe.svg').default,
-  'home': require('!!raw-loader?!../../../assets/images/feather/home.svg').default,
+  flag: require('!!raw-loader?!../../../assets/images/feather/flag.svg').default,
+  playlists: require('!!raw-loader?!../../../assets/images/feather/list.svg').default,
+  syndication: require('!!raw-loader?!../../../assets/images/feather/syndication.svg').default,
+  help: require('!!raw-loader?!../../../assets/images/feather/help.svg').default,
+  alert: require('!!raw-loader?!../../../assets/images/feather/alert.svg').default,
+  globe: require('!!raw-loader?!../../../assets/images/feather/globe.svg').default,
+  home: require('!!raw-loader?!../../../assets/images/feather/home.svg').default,
   'recently-added': require('!!raw-loader?!../../../assets/images/feather/recently-added.svg').default,
-  'trending': require('!!raw-loader?!../../../assets/images/feather/trending.svg').default,
-  'search': require('!!raw-loader?!../../../assets/images/feather/search.svg').default,
-  'upload': require('!!raw-loader?!../../../assets/images/feather/upload.svg').default,
-  'dislike': require('!!raw-loader?!../../../assets/images/feather/dislike.svg').default,
-  'like': require('!!raw-loader?!../../../assets/images/feather/like.svg').default,
-  'no': require('!!raw-loader?!../../../assets/images/feather/no.svg').default,
+  trending: require('!!raw-loader?!../../../assets/images/feather/trending.svg').default,
+  search: require('!!raw-loader?!../../../assets/images/feather/search.svg').default,
+  upload: require('!!raw-loader?!../../../assets/images/feather/upload.svg').default,
+  dislike: require('!!raw-loader?!../../../assets/images/feather/dislike.svg').default,
+  like: require('!!raw-loader?!../../../assets/images/feather/like.svg').default,
+  no: require('!!raw-loader?!../../../assets/images/feather/no.svg').default,
   'cloud-download': require('!!raw-loader?!../../../assets/images/feather/cloud-download.svg').default,
-  'clock': require('!!raw-loader?!../../../assets/images/feather/clock.svg').default,
-  'cog': require('!!raw-loader?!../../../assets/images/feather/cog.svg').default,
-  'delete': require('!!raw-loader?!../../../assets/images/feather/delete.svg').default,
-  'bell': require('!!raw-loader?!../../../assets/images/feather/bell.svg').default,
+  clock: require('!!raw-loader?!../../../assets/images/feather/clock.svg').default,
+  cog: require('!!raw-loader?!../../../assets/images/feather/cog.svg').default,
+  delete: require('!!raw-loader?!../../../assets/images/feather/delete.svg').default,
+  bell: require('!!raw-loader?!../../../assets/images/feather/bell.svg').default,
   'sign-out': require('!!raw-loader?!../../../assets/images/feather/log-out.svg').default,
   'sign-in': require('!!raw-loader?!../../../assets/images/feather/log-in.svg').default,
-  'download': require('!!raw-loader?!../../../assets/images/feather/download.svg').default,
+  download: require('!!raw-loader?!../../../assets/images/feather/download.svg').default,
   'ownership-change': require('!!raw-loader?!../../../assets/images/feather/share.svg').default,
-  'share': require('!!raw-loader?!../../../assets/images/feather/share-2.svg').default,
-  'channel': require('!!raw-loader?!../../../assets/images/feather/tv.svg').default,
-  'user': require('!!raw-loader?!../../../assets/images/feather/user.svg').default,
+  share: require('!!raw-loader?!../../../assets/images/feather/share-2.svg').default,
+  channel: require('!!raw-loader?!../../../assets/images/feather/tv.svg').default,
+  user: require('!!raw-loader?!../../../assets/images/feather/user.svg').default,
   'user-x': require('!!raw-loader?!../../../assets/images/feather/user-x.svg').default,
-  'users': require('!!raw-loader?!../../../assets/images/feather/users.svg').default,
+  users: require('!!raw-loader?!../../../assets/images/feather/users.svg').default,
   'user-add': require('!!raw-loader?!../../../assets/images/feather/user-plus.svg').default,
-  'add': require('!!raw-loader?!../../../assets/images/feather/plus-circle.svg').default,
+  add: require('!!raw-loader?!../../../assets/images/feather/plus-circle.svg').default,
   'cloud-error': require('!!raw-loader?!../../../assets/images/feather/cloud-off.svg').default,
-  'undo': require('!!raw-loader?!../../../assets/images/feather/corner-up-left.svg').default,
+  undo: require('!!raw-loader?!../../../assets/images/feather/corner-up-left.svg').default,
   'circle-tick': require('!!raw-loader?!../../../assets/images/feather/check-circle.svg').default,
   'more-horizontal': require('!!raw-loader?!../../../assets/images/feather/more-horizontal.svg').default,
   'more-vertical': require('!!raw-loader?!../../../assets/images/feather/more-vertical.svg').default,
-  'play': require('!!raw-loader?!../../../assets/images/feather/play.svg').default,
-  'p2p': require('!!raw-loader?!../../../assets/images/feather/airplay.svg').default,
-  'fullscreen': require('!!raw-loader?!../../../assets/images/feather/maximize.svg').default,
+  play: require('!!raw-loader?!../../../assets/images/feather/play.svg').default,
+  p2p: require('!!raw-loader?!../../../assets/images/feather/airplay.svg').default,
+  fullscreen: require('!!raw-loader?!../../../assets/images/feather/maximize.svg').default,
   'exit-fullscreen': require('!!raw-loader?!../../../assets/images/feather/minimize.svg').default,
-  'film': require('!!raw-loader?!../../../assets/images/feather/film.svg').default,
-  'edit': require('!!raw-loader?!../../../assets/images/feather/edit-2.svg').default,
-  'sensitive': require('!!raw-loader?!../../../assets/images/feather/eye.svg').default,
-  'unsensitive': require('!!raw-loader?!../../../assets/images/feather/eye-off.svg').default,
-  'refresh': require('!!raw-loader?!../../../assets/images/feather/refresh-cw.svg').default,
-  'command': require('!!raw-loader?!../../../assets/images/feather/command.svg').default,
-  'go': require('!!raw-loader?!../../../assets/images/feather/arrow-up-right.svg').default,
-  'cross': require('!!raw-loader?!../../../assets/images/feather/x.svg').default,
-  'tick': require('!!raw-loader?!../../../assets/images/feather/check.svg').default,
-  'columns': require('!!raw-loader?!../../../assets/images/feather/columns.svg').default,
-  'live': require('!!raw-loader?!../../../assets/images/feather/live.svg').default,
-  'repeat': require('!!raw-loader?!../../../assets/images/feather/repeat.svg').default,
+  film: require('!!raw-loader?!../../../assets/images/feather/film.svg').default,
+  edit: require('!!raw-loader?!../../../assets/images/feather/edit-2.svg').default,
+  sensitive: require('!!raw-loader?!../../../assets/images/feather/eye.svg').default,
+  unsensitive: require('!!raw-loader?!../../../assets/images/feather/eye-off.svg').default,
+  refresh: require('!!raw-loader?!../../../assets/images/feather/refresh-cw.svg').default,
+  command: require('!!raw-loader?!../../../assets/images/feather/command.svg').default,
+  go: require('!!raw-loader?!../../../assets/images/feather/arrow-up-right.svg').default,
+  cross: require('!!raw-loader?!../../../assets/images/feather/x.svg').default,
+  tick: require('!!raw-loader?!../../../assets/images/feather/check.svg').default,
+  columns: require('!!raw-loader?!../../../assets/images/feather/columns.svg').default,
+  live: require('!!raw-loader?!../../../assets/images/feather/live.svg').default,
+  repeat: require('!!raw-loader?!../../../assets/images/feather/repeat.svg').default,
   'message-circle': require('!!raw-loader?!../../../assets/images/feather/message-circle.svg').default,
-  'codesandbox': require('!!raw-loader?!../../../assets/images/feather/codesandbox.svg').default,
-  'award': require('!!raw-loader?!../../../assets/images/feather/award.svg').default
+  codesandbox: require('!!raw-loader?!../../../assets/images/feather/codesandbox.svg').default,
+  award: require('!!raw-loader?!../../../assets/images/feather/award.svg').default
 }
 
 export type GlobalIconName = keyof typeof icons
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
index 855c06aa1..1eb7b49b6 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
@@ -7,7 +7,7 @@ import { About } from '@shared/models/server'
 @Component({
   selector: 'my-instance-about-accordion',
   templateUrl: './instance-about-accordion.component.html',
-  styleUrls: ['./instance-about-accordion.component.scss']
+  styleUrls: [ './instance-about-accordion.component.scss' ]
 })
 export class InstanceAboutAccordionComponent implements OnInit {
   @ViewChild('accordion', { static: true }) accordion: NgbAccordion
diff --git a/client/src/app/shared/shared-instance/instance-follow.service.ts b/client/src/app/shared/shared-instance/instance-follow.service.ts
index af44020cf..a6799d3e1 100644
--- a/client/src/app/shared/shared-instance/instance-follow.service.ts
+++ b/client/src/app/shared/shared-instance/instance-follow.service.ts
@@ -19,10 +19,10 @@ export class InstanceFollowService {
   }
 
   getFollowing (options: {
-    pagination: RestPagination,
-    sort: SortMeta,
-    search?: string,
-    actorType?: ActivityPubActorType,
+    pagination: RestPagination
+    sort: SortMeta
+    search?: string
+    actorType?: ActivityPubActorType
     state?: FollowState
   }): Observable<ResultList<ActorFollow>> {
     const { pagination, sort, search, state, actorType } = options
@@ -42,10 +42,10 @@ export class InstanceFollowService {
   }
 
   getFollowers (options: {
-    pagination: RestPagination,
-    sort: SortMeta,
-    search?: string,
-    actorType?: ActivityPubActorType,
+    pagination: RestPagination
+    sort: SortMeta
+    search?: string
+    actorType?: ActivityPubActorType
     state?: FollowState
   }): Observable<ResultList<ActorFollow>> {
     const { pagination, sort, search, state, actorType } = options
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.ts b/client/src/app/shared/shared-instance/instance-statistics.component.ts
index 40aa8a4c0..0618efe69 100644
--- a/client/src/app/shared/shared-instance/instance-statistics.component.ts
+++ b/client/src/app/shared/shared-instance/instance-statistics.component.ts
@@ -17,6 +17,8 @@ export class InstanceStatisticsComponent implements OnInit {
 
   ngOnInit () {
     this.serverService.getServerStats()
-        .subscribe(res => this.serverStats = res)
+        .subscribe(res => {
+          this.serverStats = res
+        })
   }
 }
diff --git a/client/src/app/shared/shared-instance/instance.service.ts b/client/src/app/shared/shared-instance/instance.service.ts
index 70e022178..0241f56ef 100644
--- a/client/src/app/shared/shared-instance/instance.service.ts
+++ b/client/src/app/shared/shared-instance/instance.service.ts
@@ -51,7 +51,7 @@ export class InstanceService {
     }
 
     for (const key of Object.keys(html)) {
-      html[ key ] = await this.markdownService.textMarkdownToHTML(about.instance[ key ])
+      html[key] = await this.markdownService.textMarkdownToHTML(about.instance[key])
     }
 
     return html
diff --git a/client/src/app/shared/shared-instance/shared-instance.module.ts b/client/src/app/shared/shared-instance/shared-instance.module.ts
index 5efb95a7d..13c681ab8 100644
--- a/client/src/app/shared/shared-instance/shared-instance.module.ts
+++ b/client/src/app/shared/shared-instance/shared-instance.module.ts
@@ -1,7 +1,6 @@
 
 import { NgModule } from '@angular/core'
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
-import { SharedCustomMarkupModule } from '../shared-custom-markup'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { FeatureBooleanComponent } from './feature-boolean.component'
 import { InstanceAboutAccordionComponent } from './instance-about-accordion.component'
diff --git a/client/src/app/shared/shared-main/account/account.model.ts b/client/src/app/shared/shared-main/account/account.model.ts
index 7b5611f35..92606e7fa 100644
--- a/client/src/app/shared/shared-main/account/account.model.ts
+++ b/client/src/app/shared/shared-main/account/account.model.ts
@@ -1,4 +1,4 @@
-import { Account as ServerAccount, Actor as ServerActor, ActorImage } from '@shared/models'
+import { Account as ServerAccount, ActorImage } from '@shared/models'
 import { Actor } from './actor.model'
 
 export class Account extends Actor implements ServerAccount {
diff --git a/client/src/app/shared/shared-main/account/actor.model.ts b/client/src/app/shared/shared-main/account/actor.model.ts
index 2fccc472a..082f44fb9 100644
--- a/client/src/app/shared/shared-main/account/actor.model.ts
+++ b/client/src/app/shared/shared-main/account/actor.model.ts
@@ -20,7 +20,7 @@ export abstract class Actor implements ServerActor {
   static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) {
     if (actor?.avatar?.url) return actor.avatar.url
 
-    if (actor && actor.avatar) {
+    if (actor?.avatar) {
       const absoluteAPIUrl = getAbsoluteAPIUrl()
 
       return absoluteAPIUrl + actor.avatar.path
diff --git a/client/src/app/shared/shared-main/angular/autofocus.directive.ts b/client/src/app/shared/shared-main/angular/autofocus.directive.ts
index 5f087d79d..2da492ea1 100644
--- a/client/src/app/shared/shared-main/angular/autofocus.directive.ts
+++ b/client/src/app/shared/shared-main/angular/autofocus.directive.ts
@@ -1,7 +1,7 @@
 import { AfterViewInit, Directive, ElementRef } from '@angular/core'
 
 @Directive({
-  selector: '[autofocus]'
+  selector: '[myAutofocus]'
 })
 export class AutofocusDirective implements AfterViewInit {
   constructor (private host: ElementRef) { }
diff --git a/client/src/app/shared/shared-main/angular/link.component.ts b/client/src/app/shared/shared-main/angular/link.component.ts
index 597a16871..ecbd9151c 100644
--- a/client/src/app/shared/shared-main/angular/link.component.ts
+++ b/client/src/app/shared/shared-main/angular/link.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core'
+import { Component, Input } from '@angular/core'
 
 @Component({
   selector: 'my-link',
diff --git a/client/src/app/shared/shared-main/angular/peertube-template.directive.ts b/client/src/app/shared/shared-main/angular/peertube-template.directive.ts
index e04c25d9a..dc0cde12d 100644
--- a/client/src/app/shared/shared-main/angular/peertube-template.directive.ts
+++ b/client/src/app/shared/shared-main/angular/peertube-template.directive.ts
@@ -1,6 +1,7 @@
 import { Directive, Input, TemplateRef } from '@angular/core'
 
 @Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
   selector: '[ptTemplate]'
 })
 export class PeerTubeTemplateDirective <T extends string> {
diff --git a/client/src/app/shared/shared-main/feeds/syndication.model.ts b/client/src/app/shared/shared-main/feeds/syndication.model.ts
index 2466ae7c6..cd6fbdb48 100644
--- a/client/src/app/shared/shared-main/feeds/syndication.model.ts
+++ b/client/src/app/shared/shared-main/feeds/syndication.model.ts
@@ -1,7 +1,7 @@
 import { FeedFormat } from '@shared/models'
 
 export interface Syndication {
-  format: FeedFormat,
-  label: string,
+  format: FeedFormat
+  label: string
   url: string
 }
diff --git a/client/src/app/shared/shared-main/misc/help.component.ts b/client/src/app/shared/shared-main/misc/help.component.ts
index 76e255d99..37e2abd97 100644
--- a/client/src/app/shared/shared-main/misc/help.component.ts
+++ b/client/src/app/shared/shared-main/misc/help.component.ts
@@ -71,18 +71,18 @@ export class HelpComponent implements OnInit, OnChanges, AfterContentInit {
   }
 
   private formatMarkdownSupport (rules: string[]) {
-    // tslint:disable:max-line-length
+    /* eslint-disable max-len */
     return $localize`<a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank" rel="noopener noreferrer">Markdown</a> compatible that supports:` +
       this.createMarkdownList(rules)
   }
 
   private createMarkdownList (rules: string[]) {
     const rulesToText = {
-      'emphasis': $localize`Emphasis`,
-      'link': $localize`Links`,
-      'newline': $localize`New lines`,
-      'list': $localize`Lists`,
-      'image': $localize`Images`
+      emphasis: $localize`Emphasis`,
+      link: $localize`Links`,
+      newline: $localize`New lines`,
+      list: $localize`Lists`,
+      image: $localize`Images`
     }
 
     const bullets = rules.map(r => rulesToText[r])
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.ts b/client/src/app/shared/shared-main/misc/list-overflow.component.ts
index 144e0f156..fbc481093 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.ts
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.ts
@@ -22,7 +22,7 @@ export interface ListOverflowItem {
 }
 
 @Component({
-  selector: 'list-overflow',
+  selector: 'my-list-overflow',
   templateUrl: './list-overflow.component.html',
   styleUrls: [ './list-overflow.component.scss' ],
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -65,7 +65,7 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements AfterV
     let showItemsUntilIndexExcluded: number
     let accWidth = 0
 
-    for (const [index, el] of this.itemsRendered.toArray().entries()) {
+    for (const [ index, el ] of this.itemsRendered.toArray().entries()) {
       accWidth += el.nativeElement.getBoundingClientRect().width
       if (showItemsUntilIndexExcluded === undefined) {
         showItemsUntilIndexExcluded = (parentWidth < accWidth) ? index : undefined
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.ts b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
index 224d71134..292ec4c82 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts
@@ -4,7 +4,7 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild }
 import { ActivatedRoute, Router } from '@angular/router'
 
 @Component({
-  selector: 'simple-search-input',
+  selector: 'my-simple-search-input',
   templateUrl: './simple-search-input.component.html',
   styleUrls: [ './simple-search-input.component.scss' ]
 })
diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts
index 2cafb6c55..e7e34ce1e 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts
@@ -66,7 +66,7 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
       .subscribe(() => this.updateChildLabels(window.location.pathname))
 
     this.hasIcons = this.menuEntries.some(
-      e => e.children && e.children.some(c => !!c.iconName)
+      e => e.children?.some(c => !!c.iconName)
     )
   }
 
diff --git a/client/src/app/shared/shared-main/users/user-notification.service.ts b/client/src/app/shared/shared-main/users/user-notification.service.ts
index 9014b48a8..09fee87a3 100644
--- a/client/src/app/shared/shared-main/users/user-notification.service.ts
+++ b/client/src/app/shared/shared-main/users/user-notification.service.ts
@@ -1,11 +1,11 @@
+import { SortMeta } from 'primeng/api'
 import { catchError, map, tap } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { ComponentPaginationLight, RestExtractor, RestService, User, PeerTubeSocket, AuthService } from '@app/core'
+import { AuthService, ComponentPaginationLight, PeerTubeSocket, RestExtractor, RestService } from '@app/core'
 import { ResultList, UserNotification as UserNotificationServer, UserNotificationSetting } from '@shared/models'
 import { environment } from '../../../../environments/environment'
 import { UserNotification } from './user-notification.model'
-import { SortMeta } from 'primeng/api'
 
 @Injectable()
 export class UserNotificationService {
@@ -23,7 +23,7 @@ export class UserNotificationService {
   listMyNotifications (parameters: {
     pagination: ComponentPaginationLight
     ignoreLoadingBar?: boolean
-    unread?: boolean,
+    unread?: boolean
     sort?: SortMeta
   }) {
     const { pagination, ignoreLoadingBar, unread, sort } = parameters
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.ts b/client/src/app/shared/shared-main/users/user-quota.component.ts
index b38619186..5a95f1209 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.ts
+++ b/client/src/app/shared/shared-main/users/user-quota.component.ts
@@ -6,7 +6,7 @@ import { BytesPipe } from '../angular'
 @Component({
   selector: 'my-user-quota',
   templateUrl: './user-quota.component.html',
-  styleUrls: ['./user-quota.component.scss']
+  styleUrls: [ './user-quota.component.scss' ]
 })
 
 export class UserQuotaComponent implements OnInit {
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
index a9dcf2fa2..66d4cac68 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
@@ -1,6 +1,5 @@
 import { getAbsoluteAPIUrl } from '@app/helpers'
 import { Account as ServerAccount, ActorImage, VideoChannel as ServerVideoChannel, ViewsPerDate } from '@shared/models'
-import { Account } from '../account/account.model'
 import { Actor } from '../account/actor.model'
 
 export class VideoChannel extends Actor implements ServerVideoChannel {
@@ -25,14 +24,14 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
 
   viewsPerDay?: ViewsPerDate[]
 
-  static GET_ACTOR_AVATAR_URL (actor: object) {
+  static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) {
     return Actor.GET_ACTOR_AVATAR_URL(actor)
   }
 
   static GET_ACTOR_BANNER_URL (channel: ServerVideoChannel) {
     if (channel?.banner?.url) return channel.banner.url
 
-    if (channel && channel.banner) {
+    if (channel?.banner) {
       const absoluteAPIUrl = getAbsoluteAPIUrl()
 
       return absoluteAPIUrl + channel.banner.path
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
index a89f1065a..7560a35a8 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.service.ts
@@ -15,6 +15,12 @@ export class VideoChannelService {
 
   videoChannelLoaded = new ReplaySubject<VideoChannel>(1)
 
+  constructor (
+    private authHttp: HttpClient,
+    private restService: RestService,
+    private restExtractor: RestExtractor
+  ) { }
+
   static extractVideoChannels (result: ResultList<VideoChannelServer>) {
     const videoChannels: VideoChannel[] = []
 
@@ -25,12 +31,6 @@ export class VideoChannelService {
     return { data: videoChannels, total: result.total }
   }
 
-  constructor (
-    private authHttp: HttpClient,
-    private restService: RestService,
-    private restExtractor: RestExtractor
-  ) { }
-
   getVideoChannel (videoChannelName: string) {
     return this.authHttp.get<VideoChannel>(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName)
                .pipe(
diff --git a/client/src/app/shared/shared-main/video/redundancy.service.ts b/client/src/app/shared/shared-main/video/redundancy.service.ts
index 6e839e655..966d7fafd 100644
--- a/client/src/app/shared/shared-main/video/redundancy.service.ts
+++ b/client/src/app/shared/shared-main/video/redundancy.service.ts
@@ -30,8 +30,8 @@ export class RedundancyService {
   }
 
   listVideoRedundancies (options: {
-    pagination: RestPagination,
-    sort: SortMeta,
+    pagination: RestPagination
+    sort: SortMeta
     target?: VideoRedundanciesTarget
   }): Observable<ResultList<VideoRedundancy>> {
     const { pagination, sort, target } = options
diff --git a/client/src/app/shared/shared-main/video/video-edit.model.ts b/client/src/app/shared/shared-main/video/video-edit.model.ts
index 757b686c0..ea0456942 100644
--- a/client/src/app/shared/shared-main/video/video-edit.model.ts
+++ b/client/src/app/shared/shared-main/video/video-edit.model.ts
@@ -29,11 +29,11 @@ export class VideoEdit implements VideoUpdate {
 
   constructor (
     video?: Video & {
-      tags: string[],
-      commentsEnabled: boolean,
-      downloadEnabled: boolean,
-      support: string,
-      thumbnailUrl: string,
+      tags: string[]
+      commentsEnabled: boolean
+      downloadEnabled: boolean
+      support: string
+      thumbnailUrl: string
       previewUrl: string
     }) {
     if (video) {
@@ -64,7 +64,7 @@ export class VideoEdit implements VideoUpdate {
 
   patch (values: { [ id: string ]: any }) {
     Object.keys(values).forEach((key) => {
-      this[ key ] = values[ key ]
+      this[key] = values[key]
     })
 
     // If schedule publication, the video is private and will be changed to public privacy
diff --git a/client/src/app/shared/shared-main/video/video.model.ts b/client/src/app/shared/shared-main/video/video.model.ts
index b7720c8d2..7471a933b 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -100,7 +100,7 @@ export class Video implements VideoServerModel {
     return '/videos/update/' + video.uuid
   }
 
-  constructor (hash: VideoServerModel, translations = {}) {
+  constructor (hash: VideoServerModel, translations: { [ id: string ]: string } = {}) {
     const absoluteAPIUrl = getAbsoluteAPIUrl()
 
     this.createdAt = new Date(hash.createdAt.toString())
diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts
index 4a97719fa..60cc9d160 100644
--- a/client/src/app/shared/shared-main/video/video.service.ts
+++ b/client/src/app/shared/shared-main/video/video.service.ts
@@ -30,10 +30,10 @@ import { Video } from './video.model'
 
 export interface VideosProvider {
   getVideos (parameters: {
-    videoPagination: ComponentPaginationLight,
-    sort: VideoSortField,
-    filter?: VideoFilter,
-    categoryOneOf?: number[],
+    videoPagination: ComponentPaginationLight
+    sort: VideoSortField
+    filter?: VideoFilter
+    categoryOneOf?: number[]
     languageOneOf?: string[]
     nsfwPolicy: NSFWPolicyType
   }): Observable<ResultList<Video>>
@@ -145,8 +145,8 @@ export class VideoService implements VideosProvider {
   }
 
   getAccountVideos (parameters: {
-    account: Pick<Account, 'nameWithHost'>,
-    videoPagination: ComponentPaginationLight,
+    account: Pick<Account, 'nameWithHost'>
+    videoPagination: ComponentPaginationLight
     sort: VideoSortField
     nsfwPolicy?: NSFWPolicyType
     videoFilter?: VideoFilter
@@ -180,9 +180,9 @@ export class VideoService implements VideosProvider {
   }
 
   getVideoChannelVideos (parameters: {
-    videoChannel: Pick<VideoChannel, 'nameWithHost'>,
-    videoPagination: ComponentPaginationLight,
-    sort: VideoSortField,
+    videoChannel: Pick<VideoChannel, 'nameWithHost'>
+    videoPagination: ComponentPaginationLight
+    sort: VideoSortField
     nsfwPolicy?: NSFWPolicyType
     videoFilter?: VideoFilter
   }): Observable<ResultList<Video>> {
diff --git a/client/src/app/shared/shared-moderation/abuse.service.ts b/client/src/app/shared/shared-moderation/abuse.service.ts
index bf98d4b36..f45b5c8e8 100644
--- a/client/src/app/shared/shared-moderation/abuse.service.ts
+++ b/client/src/app/shared/shared-moderation/abuse.service.ts
@@ -30,8 +30,8 @@ export class AbuseService {
   ) { }
 
   getAdminAbuses (options: {
-    pagination: RestPagination,
-    sort: SortMeta,
+    pagination: RestPagination
+    sort: SortMeta
     search?: string
   }): Observable<ResultList<AdminAbuse>> {
     const { pagination, sort, search } = options
@@ -51,8 +51,8 @@ export class AbuseService {
   }
 
   getUserAbuses (options: {
-    pagination: RestPagination,
-    sort: SortMeta,
+    pagination: RestPagination
+    sort: SortMeta
     search?: string
   }): Observable<ResultList<UserAbuse>> {
     const { pagination, sort, search } = options
@@ -74,7 +74,7 @@ export class AbuseService {
   reportVideo (parameters: AbuseCreate) {
     const url = AbuseService.BASE_ABUSE_URL
 
-    const body = omit(parameters, ['id'])
+    const body = omit(parameters, [ 'id' ])
 
     return this.authHttp.post(url, body)
       .pipe(
@@ -147,11 +147,13 @@ export class AbuseService {
       {
         id: 'spamOrMisleading',
         label: $localize`Spam, ad or false news`,
+        // eslint-disable-next-line max-len
         help: $localize`Contains marketing, spam, purposefully deceitful news, or otherwise misleading thumbnail/text/tags. Please provide reputable sources to report hoaxes.`
       },
       {
         id: 'privacy',
         label: $localize`Privacy breach or doxxing`,
+        // eslint-disable-next-line max-len
         help: $localize`Contains personal information that could be used to track, identify, contact or impersonate someone (e.g. name, address, phone number, email, or credit card details).`
       },
       {
@@ -162,6 +164,7 @@ export class AbuseService {
       {
         id: 'serverRules',
         label: $localize`Breaks server rules`,
+        // eslint-disable-next-line max-len
         description: $localize`Anything not included in the above that breaks the terms of service, code of conduct, or general rules in place on the server.`
       }
     ]
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.ts b/client/src/app/shared/shared-moderation/account-blocklist.component.ts
index 36f2a591b..9ed00bc12 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.ts
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.ts
@@ -1,14 +1,13 @@
 import { SortMeta } from 'primeng/api'
 import { Directive, OnInit } from '@angular/core'
 import { Notifier, RestPagination, RestTable } from '@app/core'
-import { Account } from '@app/shared/shared-main'
 import { AccountBlock } from './account-block.model'
 import { BlocklistComponentType, BlocklistService } from './blocklist.service'
 
 @Directive()
-// tslint:disable-next-line: directive-class-suffix
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export class GenericAccountBlocklistComponent extends RestTable implements OnInit {
-  // @ts-ignore: "Abstract methods can only appear within an abstract class"
+  // @ts-expect-error: "Abstract methods can only appear within an abstract class"
   abstract mode: BlocklistComponentType
 
   blockedAccounts: AccountBlock[] = []
@@ -23,7 +22,7 @@ export class GenericAccountBlocklistComponent extends RestTable implements OnIni
     super()
   }
 
-  // @ts-ignore: "Abstract methods can only appear within an abstract class"
+  // @ts-expect-error: "Abstract methods can only appear within an abstract class"
   abstract getIdentifier (): string
 
   ngOnInit () {
diff --git a/client/src/app/shared/shared-moderation/blocklist.service.ts b/client/src/app/shared/shared-moderation/blocklist.service.ts
index de677a77b..db2a8c584 100644
--- a/client/src/app/shared/shared-moderation/blocklist.service.ts
+++ b/client/src/app/shared/shared-moderation/blocklist.service.ts
@@ -21,7 +21,7 @@ export class BlocklistService {
     private restService: RestService
   ) { }
 
-  /*********************** User -> Account blocklist ***********************/
+  /** ********************* User -> Account blocklist ***********************/
 
   getUserAccountBlocklist (options: { pagination: RestPagination, sort: SortMeta, search?: string }) {
     const { pagination, sort, search } = options
@@ -53,7 +53,7 @@ export class BlocklistService {
                .pipe(catchError(err => this.restExtractor.handleError(err)))
   }
 
-  /*********************** User -> Server blocklist ***********************/
+  /** ********************* User -> Server blocklist ***********************/
 
   getUserServerBlocklist (options: { pagination: RestPagination, sort: SortMeta, search?: string }) {
     const { pagination, sort, search } = options
@@ -84,7 +84,7 @@ export class BlocklistService {
                .pipe(catchError(err => this.restExtractor.handleError(err)))
   }
 
-  /*********************** Instance -> Account blocklist ***********************/
+  /** ********************* Instance -> Account blocklist ***********************/
 
   getInstanceAccountBlocklist (options: { pagination: RestPagination, sort: SortMeta, search?: string }) {
     const { pagination, sort, search } = options
@@ -116,7 +116,7 @@ export class BlocklistService {
                .pipe(catchError(err => this.restExtractor.handleError(err)))
   }
 
-  /*********************** Instance -> Server blocklist ***********************/
+  /** ********************* Instance -> Server blocklist ***********************/
 
   getInstanceServerBlocklist (options: { pagination: RestPagination, sort: SortMeta, search?: string }) {
     const { pagination, sort, search } = options
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.ts b/client/src/app/shared/shared-moderation/server-blocklist.component.ts
index da09b1d0e..1ba7a1b4d 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.ts
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.ts
@@ -6,11 +6,11 @@ import { ServerBlock } from '@shared/models'
 import { BlocklistComponentType, BlocklistService } from './blocklist.service'
 
 @Directive()
-// tslint:disable-next-line: directive-class-suffix
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export class GenericServerBlocklistComponent extends RestTable implements OnInit {
   @ViewChild('batchDomainsModal') batchDomainsModal: BatchDomainsModalComponent
 
-  // @ts-ignore: "Abstract methods can only appear within an abstract class"
+  // @ts-expect-error: "Abstract methods can only appear within an abstract class"
   public abstract mode: BlocklistComponentType
 
   blockedServers: ServerBlock[] = []
@@ -25,7 +25,7 @@ export class GenericServerBlocklistComponent extends RestTable implements OnInit
     super()
   }
 
-  // @ts-ignore: "Abstract methods can only appear within an abstract class"
+  // @ts-expect-error: "Abstract methods can only appear within an abstract class"
   public abstract getIdentifier (): string
 
   ngOnInit () {
@@ -34,8 +34,8 @@ export class GenericServerBlocklistComponent extends RestTable implements OnInit
 
   unblockServer (serverBlock: ServerBlock) {
     const operation = (host: string) => this.mode === BlocklistComponentType.Account
-        ? this.blocklistService.unblockServerByUser(host)
-        : this.blocklistService.unblockServerByInstance(host)
+      ? this.blocklistService.unblockServerByUser(host)
+      : this.blocklistService.unblockServerByInstance(host)
     const host = serverBlock.blockedServer.host
 
     operation(host).subscribe(
diff --git a/client/src/app/shared/shared-moderation/video-block.component.ts b/client/src/app/shared/shared-moderation/video-block.component.ts
index bc6952620..f6c29dcfa 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.ts
+++ b/client/src/app/shared/shared-moderation/video-block.component.ts
@@ -51,8 +51,8 @@ export class VideoBlockComponent extends FormReactive implements OnInit {
   }
 
   block () {
-    const reason = this.form.value[ 'reason' ] || undefined
-    const unfederate = this.video.isLocal ? this.form.value[ 'unfederate' ] : undefined
+    const reason = this.form.value['reason'] || undefined
+    const unfederate = this.video.isLocal ? this.form.value['unfederate'] : undefined
 
     this.videoBlocklistService.blockVideo(this.video.id, reason, unfederate)
         .subscribe({
diff --git a/client/src/app/shared/shared-support-modal/support-modal.component.ts b/client/src/app/shared/shared-support-modal/support-modal.component.ts
index a0b9fada6..08e997f7b 100644
--- a/client/src/app/shared/shared-support-modal/support-modal.component.ts
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.ts
@@ -28,7 +28,9 @@ export class SupportModalComponent {
     const support = this.video?.support || this.videoChannel.support
 
     this.markdownService.enhancedMarkdownToHTML(support)
-      .then(r => this.htmlSupport = r)
+      .then(r => {
+        this.htmlSupport = r
+      })
 
     this.displayName = this.video
       ? this.video.channel.displayName
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
index 4aac60c2b..5d6e11c04 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
@@ -80,7 +80,7 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
   }
 
   updateDetails (onlyKeys?: string[]) {
-    const nsfwPolicy = this.form.value[ 'nsfwPolicy' ]
+    const nsfwPolicy = this.form.value['nsfwPolicy']
     const webTorrentEnabled = this.form.value['webTorrentEnabled']
     const autoPlayVideo = this.form.value['autoPlayVideo']
     const autoPlayNextVideo = this.form.value['autoPlayNextVideo']
diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts
index 666199523..a951134eb 100644
--- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts
+++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts
@@ -6,7 +6,7 @@ import { USER_HANDLE_VALIDATOR } from '../form-validators/user-validators'
 @Component({
   selector: 'my-remote-subscribe',
   templateUrl: './remote-subscribe.component.html',
-  styleUrls: ['./remote-subscribe.component.scss']
+  styleUrls: [ './remote-subscribe.component.scss' ]
 })
 export class RemoteSubscribeComponent extends FormReactive implements OnInit {
   @Input() uri: string
@@ -42,17 +42,21 @@ export class RemoteSubscribeComponent extends FormReactive implements OnInit {
     // Should not have CORS error because https://tools.ietf.org/html/rfc7033#section-5
     fetch(`${protocol}//${hostname}/.well-known/webfinger?resource=acct:${username}@${hostname}`)
       .then(response => response.json())
-      .then(data => new Promise((res, rej) => {
-        if (!data || Array.isArray(data.links) === false) return rej()
+      .then(data => {
+        if (!data || Array.isArray(data.links) === false) {
+          throw new Error('Not links in webfinger response')
+        }
 
         const link: { template: string } = data.links.find((link: any) => {
           return link && typeof link.template === 'string' && link.rel === 'http://ostatus.org/schema/1.0/subscribe'
         })
 
-        if (link && link.template.includes('{uri}')) {
-          res(link.template.replace('{uri}', encodeURIComponent(this.uri)))
+        if (link?.template.includes('{uri}')) {
+          return link.template.replace('{uri}', encodeURIComponent(this.uri))
         }
-      }))
+
+        throw new Error('No subscribe template in webfinger response')
+      })
       .then(window.open)
       .catch(err => {
         console.error(err)
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.ts b/client/src/app/shared/shared-user-subscription/subscribe-button.component.ts
index 796493bd9..180bc0565 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.ts
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.ts
@@ -137,7 +137,7 @@ export class SubscribeButtonComponent implements OnInit, OnChanges {
           this.notifier.success(
             this.account
               ? $localize`Unsubscribed from all channels of ${this.account.nameWithHost}`
-              : $localize`Unsubscribed from ${this.videoChannels[ 0 ].nameWithHost}`,
+              : $localize`Unsubscribed from ${this.videoChannels[0].nameWithHost}`,
 
             $localize`Unsubscribed`
           )
@@ -157,7 +157,7 @@ export class SubscribeButtonComponent implements OnInit, OnChanges {
 
   subscribeStatus (subscribed: boolean) {
     const accumulator: string[] = []
-    for (const [key, value] of this.subscribed.entries()) {
+    for (const [ key, value ] of this.subscribed.entries()) {
       if (value === subscribed) accumulator.push(key)
     }
 
diff --git a/client/src/app/shared/shared-user-subscription/user-subscription.service.ts b/client/src/app/shared/shared-user-subscription/user-subscription.service.ts
index bb44660d2..e4fc09b36 100644
--- a/client/src/app/shared/shared-user-subscription/user-subscription.service.ts
+++ b/client/src/app/shared/shared-user-subscription/user-subscription.service.ts
@@ -46,8 +46,8 @@ export class UserSubscriptionService {
   }
 
   getUserSubscriptionVideos (parameters: {
-    videoPagination: ComponentPaginationLight,
-    sort: VideoSortField,
+    videoPagination: ComponentPaginationLight
+    sort: VideoSortField
     skipCount?: boolean
   }): Observable<ResultList<Video>> {
     const { videoPagination, sort, skipCount } = parameters
@@ -131,16 +131,16 @@ export class UserSubscriptionService {
 
   listenToSubscriptionCacheChange (nameWithHost: string) {
     if (nameWithHost in this.myAccountSubscriptionCacheObservable) {
-      return this.myAccountSubscriptionCacheObservable[ nameWithHost ]
+      return this.myAccountSubscriptionCacheObservable[nameWithHost]
     }
 
     const obs = this.existsObservable
                     .pipe(
-                      filter(existsResult => existsResult[ nameWithHost ] !== undefined),
-                      map(existsResult => existsResult[ nameWithHost ])
+                      filter(existsResult => existsResult[nameWithHost] !== undefined),
+                      map(existsResult => existsResult[nameWithHost])
                     )
 
-    this.myAccountSubscriptionCacheObservable[ nameWithHost ] = obs
+    this.myAccountSubscriptionCacheObservable[nameWithHost] = obs
     return obs
   }
 
@@ -150,16 +150,16 @@ export class UserSubscriptionService {
     if (nameWithHost in this.myAccountSubscriptionCache) {
       logger('Found cache for %d.', nameWithHost)
 
-      return of(this.myAccountSubscriptionCache[ nameWithHost ])
+      return of(this.myAccountSubscriptionCache[nameWithHost])
     }
 
     this.existsSubject.next(nameWithHost)
 
     logger('Fetching from network for %d.', nameWithHost)
     return this.existsObservable.pipe(
-      filter(existsResult => existsResult[ nameWithHost ] !== undefined),
-      map(existsResult => existsResult[ nameWithHost ]),
-      tap(result => this.myAccountSubscriptionCache[ nameWithHost ] = result)
+      filter(existsResult => existsResult[nameWithHost] !== undefined),
+      map(existsResult => existsResult[nameWithHost]),
+      tap(result => this.myAccountSubscriptionCache[nameWithHost] = result)
     )
   }
 
diff --git a/client/src/app/shared/shared-video-comment/video-comment.model.ts b/client/src/app/shared/shared-video-comment/video-comment.model.ts
index ba0f57e8f..adab4cfbd 100644
--- a/client/src/app/shared/shared-video-comment/video-comment.model.ts
+++ b/client/src/app/shared/shared-video-comment/video-comment.model.ts
@@ -1,6 +1,10 @@
 import { getAbsoluteAPIUrl } from '@app/helpers'
-import { Account, Actor, Video } from '@app/shared/shared-main'
-import { Account as AccountInterface, VideoComment as VideoCommentServerModel, VideoCommentAdmin as VideoCommentAdminServerModel } from '@shared/models'
+import { Actor, Video } from '@app/shared/shared-main'
+import {
+  Account as AccountInterface,
+  VideoComment as VideoCommentServerModel,
+  VideoCommentAdmin as VideoCommentAdminServerModel
+} from '@shared/models'
 
 export class VideoComment implements VideoCommentServerModel {
   id: number
diff --git a/client/src/app/shared/shared-video-comment/video-comment.service.ts b/client/src/app/shared/shared-video-comment/video-comment.service.ts
index 4f1452116..5550c96e4 100644
--- a/client/src/app/shared/shared-video-comment/video-comment.service.ts
+++ b/client/src/app/shared/shared-video-comment/video-comment.service.ts
@@ -37,8 +37,8 @@ export class VideoCommentService {
 
     return this.authHttp.post<{ comment: VideoCommentServerModel }>(url, normalizedComment)
                .pipe(
-                  map(data => this.extractVideoComment(data.comment)),
-                  catchError(err => this.restExtractor.handleError(err))
+                 map(data => this.extractVideoComment(data.comment)),
+                 catchError(err => this.restExtractor.handleError(err))
                )
   }
 
@@ -54,8 +54,8 @@ export class VideoCommentService {
   }
 
   getAdminVideoComments (options: {
-    pagination: RestPagination,
-    sort: SortMeta,
+    pagination: RestPagination
+    sort: SortMeta
     search?: string
   }): Observable<ResultList<VideoCommentAdmin>> {
     const { pagination, sort, search } = options
@@ -75,8 +75,8 @@ export class VideoCommentService {
   }
 
   getVideoCommentThreads (parameters: {
-    videoId: number | string,
-    componentPagination: ComponentPaginationLight,
+    videoId: number | string
+    componentPagination: ComponentPaginationLight
     sort: string
   }): Observable<ThreadsResultList<VideoComment>> {
     const { videoId, componentPagination, sort } = parameters
@@ -95,7 +95,7 @@ export class VideoCommentService {
   }
 
   getVideoThreadComments (parameters: {
-    videoId: number | string,
+    videoId: number | string
     threadId: number
   }): Observable<VideoCommentThreadTree> {
     const { videoId, threadId } = parameters
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
index d8b2ee17d..f12ae2ee5 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
@@ -42,7 +42,7 @@ enum GroupDate {
 }
 
 @Directive()
-// tslint:disable-next-line: directive-class-suffix
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterContentInit, DisableForReuseHook {
   @ViewChild('videoListHeader', { static: true, read: ViewContainerRef }) videoListHeader: ViewContainerRef
 
@@ -174,7 +174,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte
   ngAfterContentInit () {
     if (this.videoListHeader) {
       // some components don't use the header: they use their own template, like my-history.component.html
-      this.setHeader.apply(this, [ this.HeaderComponent, this.headerComponentInjector ])
+      this.setHeader(this.HeaderComponent, this.headerComponentInjector)
     }
   }
 
@@ -278,7 +278,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte
 
           if (currentGroupedDate !== period.value) {
             currentGroupedDate = period.value
-            this.groupedDates[ video.id ] = currentGroupedDate
+            this.groupedDates[video.id] = currentGroupedDate
           }
 
           break
@@ -302,13 +302,13 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte
     i: Injector = this.headerComponentInjector
   ) {
     const injector = i || Injector.create({
-      providers: [{
+      providers: [ {
         provide: 'data',
         useValue: {
           titlePage: this.titlePage,
           titleTooltip: this.titleTooltip
         }
-      }]
+      } ]
     })
     const viewContainerRef = this.videoListHeader
     viewContainerRef.clear()
@@ -331,9 +331,9 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte
   protected loadPageRouteParams (_queryParams: Params) { /* empty */ }
 
   protected loadRouteParams (queryParams: Params) {
-    this.sort = queryParams[ 'sort' ] as VideoSortField || this.defaultSort
-    this.categoryOneOf = queryParams[ 'categoryOneOf' ]
-    this.angularState = queryParams[ 'a-state' ]
+    this.sort = queryParams['sort'] as VideoSortField || this.defaultSort
+    this.categoryOneOf = queryParams['categoryOneOf']
+    this.angularState = queryParams['a-state']
 
     this.loadPageRouteParams(queryParams)
   }
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.ts b/client/src/app/shared/shared-video-miniature/video-download.component.ts
index 28fefb9dd..5328f5170 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.ts
@@ -210,10 +210,10 @@ export class VideoDownloadComponent {
 
   private getMetadataFormat (format: any) {
     const keyToTranslateFunction = {
-      'encoder': (value: string) => ({ label: $localize`Encoder`, value }),
-      'format_long_name': (value: string) => ({ label: $localize`Format name`, value }),
-      'size': (value: number) => ({ label: $localize`Size`, value: this.bytesPipe.transform(value, 2) }),
-      'bit_rate': (value: number) => ({
+      encoder: (value: string) => ({ label: $localize`Encoder`, value }),
+      format_long_name: (value: string) => ({ label: $localize`Format name`, value }),
+      size: (value: number) => ({ label: $localize`Size`, value: this.bytesPipe.transform(value, 2) }),
+      bit_rate: (value: number) => ({
         label: $localize`Bitrate`,
         value: `${this.numbersPipe.transform(value)}bps`
       })
@@ -234,9 +234,9 @@ export class VideoDownloadComponent {
     if (!stream) return undefined
 
     let keyToTranslateFunction = {
-      'codec_long_name': (value: string) => ({ label: $localize`Codec`, value }),
-      'profile': (value: string) => ({ label: $localize`Profile`, value }),
-      'bit_rate': (value: number) => ({
+      codec_long_name: (value: string) => ({ label: $localize`Codec`, value }),
+      profile: (value: string) => ({ label: $localize`Profile`, value }),
+      bit_rate: (value: number) => ({
         label: $localize`Bitrate`,
         value: `${this.numbersPipe.transform(value)}bps`
       })
@@ -244,15 +244,15 @@ export class VideoDownloadComponent {
 
     if (type === 'video') {
       keyToTranslateFunction = Object.assign(keyToTranslateFunction, {
-        'width': (value: number) => ({ label: $localize`Resolution`, value: `${value}x${stream.height}` }),
-        'display_aspect_ratio': (value: string) => ({ label: $localize`Aspect ratio`, value }),
-        'avg_frame_rate': (value: string) => ({ label: $localize`Average frame rate`, value }),
-        'pix_fmt': (value: string) => ({ label: $localize`Pixel format`, value })
+        width: (value: number) => ({ label: $localize`Resolution`, value: `${value}x${stream.height}` }),
+        display_aspect_ratio: (value: string) => ({ label: $localize`Aspect ratio`, value }),
+        avg_frame_rate: (value: string) => ({ label: $localize`Average frame rate`, value }),
+        pix_fmt: (value: string) => ({ label: $localize`Pixel format`, value })
       })
     } else {
       keyToTranslateFunction = Object.assign(keyToTranslateFunction, {
-        'sample_rate': (value: number) => ({ label: $localize`Sample rate`, value }),
-        'channel_layout': (value: number) => ({ label: $localize`Channel Layout`, value })
+        sample_rate: (value: number) => ({ label: $localize`Sample rate`, value }),
+        channel_layout: (value: number) => ({ label: $localize`Channel Layout`, value })
       })
     }
 
diff --git a/client/src/app/shared/shared-video-miniature/video-list-header.component.ts b/client/src/app/shared/shared-video-miniature/video-list-header.component.ts
index 08a961be1..fed696672 100644
--- a/client/src/app/shared/shared-video-miniature/video-list-header.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-list-header.component.ts
@@ -11,7 +11,7 @@ export abstract class GenericHeaderComponent {
 
 @Component({
   selector: 'my-video-list-header',
-  // tslint:disable-next-line:use-component-view-encapsulation
+  // eslint-disable-next-line @angular-eslint/use-component-view-encapsulation
   encapsulation: ViewEncapsulation.None,
   templateUrl: './video-list-header.component.html'
 })
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
index d64ee9b98..456b36926 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
@@ -108,7 +108,7 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
   }
 
   isInSelectionMode () {
-    return Object.keys(this._selection).some(k => this._selection[ k ] === true)
+    return Object.keys(this._selection).some(k => this._selection[k] === true)
   }
 
   generateSyndicationList () {
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
index df3aeddb7..553930595 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
@@ -191,7 +191,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
   }
 
   createPlaylist () {
-    const displayName = this.form.value[ 'displayName' ]
+    const displayName = this.form.value['displayName']
 
     const videoPlaylistCreate: VideoPlaylistCreate = {
       displayName,
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element.model.ts b/client/src/app/shared/shared-video-playlist/video-playlist-element.model.ts
index f25f10ede..b661378bd 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element.model.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element.model.ts
@@ -11,7 +11,7 @@ export class VideoPlaylistElement implements ServerVideoPlaylistElement {
 
   video?: Video
 
-  constructor (hash: ServerVideoPlaylistElement, translations: {}) {
+  constructor (hash: ServerVideoPlaylistElement, translations: { [ id: string ]: string } = {}) {
     this.id = hash.id
     this.position = hash.position
     this.startTimestamp = hash.startTimestamp
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist.model.ts b/client/src/app/shared/shared-video-playlist/video-playlist.model.ts
index fcc2ce705..6b38d9ca3 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist.model.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist.model.ts
@@ -48,7 +48,7 @@ export class VideoPlaylist implements ServerVideoPlaylist {
     return buildPlaylistWatchPath({ shortUUID: playlist.shortUUID || playlist.uuid })
   }
 
-  constructor (hash: ServerVideoPlaylist, translations: {}) {
+  constructor (hash: ServerVideoPlaylist, translations: { [ id: string ]: string }) {
     const absoluteAPIUrl = getAbsoluteAPIUrl()
 
     this.id = hash.id
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
index a3f1393ff..0a01af593 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
@@ -279,18 +279,18 @@ export class VideoPlaylistService {
   }
 
   listenToVideoPlaylistChange (videoId: number) {
-    if (this.videoExistsObservableCache[ videoId ]) {
-      return this.videoExistsObservableCache[ videoId ]
+    if (this.videoExistsObservableCache[videoId]) {
+      return this.videoExistsObservableCache[videoId]
     }
 
     const obs = this.videoExistsInPlaylistObservable
                     .pipe(
-                      map(existsResult => existsResult[ videoId ]),
+                      map(existsResult => existsResult[videoId]),
                       filter(r => !!r),
-                      tap(result => this.videoExistsCache[ videoId ] = result)
+                      tap(result => this.videoExistsCache[videoId] = result)
                     )
 
-    this.videoExistsObservableCache[ videoId ] = obs
+    this.videoExistsObservableCache[videoId] = obs
     return obs
   }