Update angular

39 files changed, 61 insertions, 61 deletions

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 4a63f5e38..a5204de27 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -11,7 +11,7 @@ import { MarkdownService } from '@app/shared/renderer'
   styleUrls: [ './about-instance.component.scss' ]
 })
 export class AboutInstanceComponent implements OnInit {
-  @ViewChild('contactAdminModal') contactAdminModal: ContactAdminModalComponent
+  @ViewChild('contactAdminModal', { static: true }) contactAdminModal: ContactAdminModalComponent
 
   shortDescription = ''
   descriptionHTML = ''
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 c609c98c3..878d49b55 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
@@ -13,7 +13,7 @@ import { InstanceService } from '@app/shared/instance/instance.service'
   styleUrls: [ './contact-admin-modal.component.scss' ]
 })
 export class ContactAdminModalComponent extends FormReactive implements OnInit {
-  @ViewChild('modal') modal: NgbModal
+  @ViewChild('modal', { static: true }) modal: NgbModal
 
   error: string
 
diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
index f915978ee..f8a5ef8cb 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
+++ b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
@@ -13,7 +13,7 @@ import { VideoAbuse } from '../../../../../../shared/models/videos'
   styleUrls: [ './moderation-comment-modal.component.scss' ]
 })
 export class ModerationCommentModalComponent extends FormReactive implements OnInit {
-  @ViewChild('modal') modal: NgbModal
+  @ViewChild('modal', { static: true }) modal: NgbModal
   @Output() commentUpdated = new EventEmitter<string>()
 
   private abuseToComment: VideoAbuse
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
index 3aa875668..778f18d3d 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
@@ -17,7 +17,7 @@ import { MarkdownService } from '@app/shared/renderer'
   styleUrls: [ '../moderation.component.scss']
 })
 export class VideoAbuseListComponent extends RestTable implements OnInit {
-  @ViewChild('moderationCommentModal') moderationCommentModal: ModerationCommentModalComponent
+  @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent
 
   videoAbuses: (VideoAbuse & { moderationCommentHtml?: string, reasonHtml?: string })[] = []
   totalRecords = 0
diff --git a/client/src/app/+admin/system/logs/logs.component.ts b/client/src/app/+admin/system/logs/logs.component.ts
index 1a3508a3b..b2aca8461 100644
--- a/client/src/app/+admin/system/logs/logs.component.ts
+++ b/client/src/app/+admin/system/logs/logs.component.ts
@@ -10,7 +10,7 @@ import { LogLevel } from '@shared/models/server/log-level.type'
   styleUrls: [ './logs.component.scss' ]
 })
 export class LogsComponent implements OnInit {
-  @ViewChild('logsElement') logsElement: ElementRef<HTMLElement>
+  @ViewChild('logsElement', { static: true }) logsElement: ElementRef<HTMLElement>
 
   loading = false
 
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 66ab796f9..c9c790689 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
@@ -14,7 +14,7 @@ import { DropdownAction } from '@app/shared/buttons/action-dropdown.component'
   styleUrls: [ './user-list.component.scss' ]
 })
 export class UserListComponent extends RestTable implements OnInit {
-  @ViewChild('userBanModal') userBanModal: UserBanModalComponent
+  @ViewChild('userBanModal', { static: true }) userBanModal: UserBanModalComponent
 
   users: User[] = []
   totalRecords = 0
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
index 3e197088d..9eca13d0f 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
@@ -6,7 +6,7 @@ import { UserNotificationsComponent } from '@app/shared'
   styleUrls: [ './my-account-notifications.component.scss' ]
 })
 export class MyAccountNotificationsComponent {
-  @ViewChild('userNotification') userNotification: UserNotificationsComponent
+  @ViewChild('userNotification', { static: true }) userNotification: UserNotificationsComponent
 
   markAllAsRead () {
     this.userNotification.markAllAsRead()
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
index 79d29b139..6df929ec9 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
@@ -18,7 +18,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 export class MyAccountAcceptOwnershipComponent extends FormReactive implements OnInit {
   @Output() accepted = new EventEmitter<void>()
 
-  @ViewChild('modal') modal: ElementRef
+  @ViewChild('modal', { static: true }) modal: ElementRef
 
   videoChangeOwnership: VideoChangeOwnership | undefined = undefined
 
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
index 77857c4fd..aeeb0e5a7 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
@@ -18,7 +18,7 @@ export class MyAccountOwnershipComponent extends RestTable implements OnInit {
   sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
-  @ViewChild('myAccountAcceptOwnershipComponent') myAccountAcceptOwnershipComponent: MyAccountAcceptOwnershipComponent
+  @ViewChild('myAccountAcceptOwnershipComponent', { static: true }) myAccountAcceptOwnershipComponent: MyAccountAcceptOwnershipComponent
 
   constructor (
     private notifier: Notifier,
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index 5f29364a8..2c86a3c56 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -23,8 +23,8 @@ import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
   styleUrls: [ './my-account-videos.component.scss' ]
 })
 export class MyAccountVideosComponent implements DisableForReuseHook {
-  @ViewChild('videosSelection') videosSelection: VideosSelectionComponent
-  @ViewChild('videoChangeOwnershipModal') videoChangeOwnershipModal: VideoChangeOwnershipComponent
+  @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
+  @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent
 
   titlePage: string
   selection: SelectionType = {}
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
index 37d7cf2a4..36d1ea091 100644
--- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
@@ -13,7 +13,7 @@ import { VideoOwnershipService } from '@app/shared/video-ownership'
   styleUrls: [ './video-change-ownership.component.scss' ]
 })
 export class VideoChangeOwnershipComponent extends FormReactive implements OnInit {
-  @ViewChild('modal') modal: ElementRef
+  @ViewChild('modal', { static: true }) modal: ElementRef
 
   usernamePropositions: string[]
 
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.ts b/client/src/app/+my-account/shared/actor-avatar-info.component.ts
index 72c815a0c..0289a66c3 100644
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.ts
+++ b/client/src/app/+my-account/shared/actor-avatar-info.component.ts
@@ -10,7 +10,7 @@ import { Notifier } from '@app/core'
   styleUrls: [ './actor-avatar-info.component.scss' ]
 })
 export class ActorAvatarInfoComponent {
-  @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
+  @ViewChild('avatarfileInput', { static: false }) avatarfileInput: ElementRef<HTMLInputElement>
 
   @Input() actor: VideoChannel | Account
 
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index 41ff82e98..d2975b67c 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -15,7 +15,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
   styleUrls: [ './video-channels.component.scss' ]
 })
 export class VideoChannelsComponent implements OnInit, OnDestroy {
-  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
+  @ViewChild('subscribeButton', { static: false }) subscribeButton: SubscribeButtonComponent
 
   videoChannel: VideoChannel
   hotkeys: Hotkey[]
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index 7ca51f226..b5a677d15 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -8,31 +8,31 @@ import { CustomReuseStrategy } from '@app/core/routing/custom-reuse-strategy'
 const routes: Routes = [
   {
     path: 'admin',
-    loadChildren: './+admin/admin.module#AdminModule'
+    loadChildren: () => import('./+admin/admin.module').then(m => m.AdminModule)
   },
   {
     path: 'my-account',
-    loadChildren: './+my-account/my-account.module#MyAccountModule'
+    loadChildren: () => import('./+my-account/my-account.module').then(m => m.MyAccountModule)
   },
   {
     path: 'verify-account',
-    loadChildren: './+signup/+verify-account/verify-account.module#VerifyAccountModule'
+    loadChildren: () => import('./+signup/+verify-account/verify-account.module').then(m => m.VerifyAccountModule)
   },
   {
     path: 'accounts',
-    loadChildren: './+accounts/accounts.module#AccountsModule'
+    loadChildren: () => import('./+accounts/accounts.module').then(m => m.AccountsModule)
   },
   {
     path: 'video-channels',
-    loadChildren: './+video-channels/video-channels.module#VideoChannelsModule'
+    loadChildren: () => import('./+video-channels/video-channels.module').then(m => m.VideoChannelsModule)
   },
   {
     path: 'about',
-    loadChildren: './+about/about.module#AboutModule'
+    loadChildren: () => import('./+about/about.module').then(m => m.AboutModule)
   },
   {
     path: 'signup',
-    loadChildren: './+signup/+register/register.module#RegisterModule'
+    loadChildren: () => import('./+signup/+register/register.module').then(m => m.RegisterModule)
   },
   {
     path: '',
@@ -40,7 +40,7 @@ const routes: Routes = [
   },
   {
     path: '**',
-    loadChildren: './+page-not-found/page-not-found.module#PageNotFoundModule'
+    loadChildren: () => import('./+page-not-found/page-not-found.module').then(m => m.PageNotFoundModule)
   }
 ]
 
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
index fc2442c0e..12c631107 100644
--- a/client/src/app/login/login.component.ts
+++ b/client/src/app/login/login.component.ts
@@ -16,8 +16,8 @@ import { Router } from '@angular/router'
 })
 
 export class LoginComponent extends FormReactive implements OnInit {
-  @ViewChild('emailInput') input: ElementRef
-  @ViewChild('forgotPasswordModal') forgotPasswordModal: ElementRef
+  @ViewChild('emailInput', { static: true }) input: ElementRef
+  @ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef
 
   error: string = null
   forgotPasswordEmail = ''
diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts
index a77a001ca..38dbb935b 100644
--- a/client/src/app/menu/avatar-notification.component.ts
+++ b/client/src/app/menu/avatar-notification.component.ts
@@ -13,7 +13,7 @@ import { filter } from 'rxjs/operators'
   styleUrls: [ './avatar-notification.component.scss' ]
 })
 export class AvatarNotificationComponent implements OnInit, OnDestroy {
-  @ViewChild('popover') popover: NgbPopover
+  @ViewChild('popover', { static: true }) popover: NgbPopover
   @Input() user: User
 
   unreadNotifications = 0
diff --git a/client/src/app/menu/language-chooser.component.ts b/client/src/app/menu/language-chooser.component.ts
index 8eb84673e..4a6e4c75a 100644
--- a/client/src/app/menu/language-chooser.component.ts
+++ b/client/src/app/menu/language-chooser.component.ts
@@ -9,7 +9,7 @@ import { sortBy } from '@app/shared/misc/utils'
   styleUrls: [ './language-chooser.component.scss' ]
 })
 export class LanguageChooserComponent {
-  @ViewChild('modal') modal: ElementRef
+  @ViewChild('modal', { static: true }) modal: ElementRef
 
   languages: { id: string, label: string }[] = []
 
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index ede64b7eb..c7c31577a 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -11,7 +11,7 @@ import { HotkeysService } from 'angular2-hotkeys'
   styleUrls: [ './menu.component.scss' ]
 })
 export class MenuComponent implements OnInit {
-  @ViewChild('languageChooserModal') languageChooserModal: LanguageChooserComponent
+  @ViewChild('languageChooserModal', { static: true }) languageChooserModal: LanguageChooserComponent
 
   user: User
   isLoggedIn: boolean
diff --git a/client/src/app/shared/confirm/confirm.component.ts b/client/src/app/shared/confirm/confirm.component.ts
index 63c163da6..53aed14d7 100644
--- a/client/src/app/shared/confirm/confirm.component.ts
+++ b/client/src/app/shared/confirm/confirm.component.ts
@@ -10,7 +10,7 @@ import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
   styleUrls: [ './confirm.component.scss' ]
 })
 export class ConfirmComponent implements OnInit {
-  @ViewChild('confirmModal') confirmModal: ElementRef
+  @ViewChild('confirmModal', { static: true }) confirmModal: ElementRef
 
   title = ''
   message = ''
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.ts b/client/src/app/shared/moderation/user-ban-modal.component.ts
index 942765301..cf0e1577a 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/moderation/user-ban-modal.component.ts
@@ -14,7 +14,7 @@ import { User } from '../../../../../shared'
   styleUrls: [ './user-ban-modal.component.scss' ]
 })
 export class UserBanModalComponent extends FormReactive implements OnInit {
-  @ViewChild('modal') modal: NgbModal
+  @ViewChild('modal', { static: true }) modal: NgbModal
   @Output() userBanned = new EventEmitter<User | User[]>()
 
   private usersToBan: User | User[]
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
index 9dd16812b..24f717821 100644
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
@@ -13,7 +13,7 @@ import { BlocklistService } from '@app/shared/blocklist'
   templateUrl: './user-moderation-dropdown.component.html'
 })
 export class UserModerationDropdownComponent implements OnChanges {
-  @ViewChild('userBanModal') userBanModal: UserBanModalComponent
+  @ViewChild('userBanModal', { static: false }) userBanModal: UserBanModalComponent
 
   @Input() user: User
   @Input() account: Account
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
index 57990707a..62cf6536d 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@@ -17,7 +17,7 @@ import { secondsToTime } from '../../../assets/player/utils'
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class VideoPlaylistElementMiniatureComponent {
-  @ViewChild('moreDropdown') moreDropdown: NgbDropdown
+  @ViewChild('moreDropdown', { static: false }) moreDropdown: NgbDropdown
 
   @Input() playlist: VideoPlaylist
   @Input() video: Video
diff --git a/client/src/app/shared/video/modals/video-blacklist.component.ts b/client/src/app/shared/video/modals/video-blacklist.component.ts
index 4e4e8dc50..f0c70a365 100644
--- a/client/src/app/shared/video/modals/video-blacklist.component.ts
+++ b/client/src/app/shared/video/modals/video-blacklist.component.ts
@@ -16,7 +16,7 @@ import { FormReactive, VideoBlacklistValidatorsService } from '@app/shared/forms
 export class VideoBlacklistComponent extends FormReactive implements OnInit {
   @Input() video: VideoDetails = null
 
-  @ViewChild('modal') modal: NgbModal
+  @ViewChild('modal', { static: true }) modal: NgbModal
 
   @Output() videoBlacklisted = new EventEmitter()
 
diff --git a/client/src/app/shared/video/modals/video-download.component.ts b/client/src/app/shared/video/modals/video-download.component.ts
index 16f3621b4..4022a11e8 100644
--- a/client/src/app/shared/video/modals/video-download.component.ts
+++ b/client/src/app/shared/video/modals/video-download.component.ts
@@ -10,7 +10,7 @@ import { Notifier } from '@app/core'
   styleUrls: [ './video-download.component.scss' ]
 })
 export class VideoDownloadComponent {
-  @ViewChild('modal') modal: ElementRef
+  @ViewChild('modal', { static: true }) modal: ElementRef
 
   downloadType: 'direct' | 'torrent' = 'torrent'
   resolutionId: number | string = -1
diff --git a/client/src/app/shared/video/modals/video-report.component.ts b/client/src/app/shared/video/modals/video-report.component.ts
index 725dd020f..1d368ff17 100644
--- a/client/src/app/shared/video/modals/video-report.component.ts
+++ b/client/src/app/shared/video/modals/video-report.component.ts
@@ -17,7 +17,7 @@ import { VideoAbuseService } from '@app/shared/video-abuse'
 export class VideoReportComponent extends FormReactive implements OnInit {
   @Input() video: VideoDetails = null
 
-  @ViewChild('modal') modal: NgbModal
+  @ViewChild('modal', { static: true }) modal: NgbModal
 
   error: string = null
 
diff --git a/client/src/app/shared/video/video-actions-dropdown.component.ts b/client/src/app/shared/video/video-actions-dropdown.component.ts
index 8d4e33697..7f3e25d0a 100644
--- a/client/src/app/shared/video/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/video/video-actions-dropdown.component.ts
@@ -29,12 +29,12 @@ export type VideoActionsDisplayType = {
   styleUrls: [ './video-actions-dropdown.component.scss' ]
 })
 export class VideoActionsDropdownComponent implements OnChanges {
-  @ViewChild('playlistDropdown') playlistDropdown: NgbDropdown
-  @ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent
+  @ViewChild('playlistDropdown', { static: false }) playlistDropdown: NgbDropdown
+  @ViewChild('playlistAdd', { static: false }) playlistAdd: VideoAddToPlaylistComponent
 
-  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
-  @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
-  @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
+  @ViewChild('videoDownloadModal', { static: false }) videoDownloadModal: VideoDownloadComponent
+  @ViewChild('videoReportModal', { static: false }) videoReportModal: VideoReportComponent
+  @ViewChild('videoBlacklistModal', { static: false }) videoBlacklistModal: VideoBlacklistComponent
 
   @Input() video: Video | VideoDetails
 
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 1413e7262..86c6e03e7 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
@@ -18,7 +18,7 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni
 
   @Output() captionAdded = new EventEmitter<VideoCaptionEdit>()
 
-  @ViewChild('modal') modal: ElementRef
+  @ViewChild('modal', { static: true }) modal: ElementRef
 
   videoCaptionLanguages: VideoConstant<string>[] = []
 
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 cea352bfb..d0d5e2a2b 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
@@ -29,7 +29,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
   @Input() videoCaptions: (VideoCaptionEdit & { captionPath?: string })[] = []
   @Input() waitTranscodingEnabled = true
 
-  @ViewChild('videoCaptionAddModal') videoCaptionAddModal: VideoCaptionAddModalComponent
+  @ViewChild('videoCaptionAddModal', { static: true }) videoCaptionAddModal: VideoCaptionAddModalComponent
 
   // So that it can be accessed in the template
   readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
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 e47624dd6..74e1e755b 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
@@ -25,7 +25,7 @@ import { scrollToTop } from '@app/shared/misc/utils'
 export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate {
   @Output() firstStepDone = new EventEmitter<string>()
   @Output() firstStepError = new EventEmitter<void>()
-  @ViewChild('torrentfileInput') torrentfileInput: ElementRef<HTMLInputElement>
+  @ViewChild('torrentfileInput', { static: false }) torrentfileInput: ElementRef<HTMLInputElement>
 
   magnetUri = ''
 
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 69fa13a2f..23b79edd3 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
@@ -27,7 +27,7 @@ import { scrollToTop } from '@app/shared/misc/utils'
 export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {
   @Output() firstStepDone = new EventEmitter<string>()
   @Output() firstStepError = new EventEmitter<void>()
-  @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement>
+  @ViewChild('videofileInput', { static: false }) videofileInput: ElementRef<HTMLInputElement>
 
   // So that it can be accessed in the template
   readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts
index 01fdfcb66..193de441d 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -11,9 +11,9 @@ import { VideoImportTorrentComponent } from '@app/videos/+video-edit/video-add-c
   styleUrls: [ './video-add.component.scss' ]
 })
 export class VideoAddComponent implements CanComponentDeactivate {
-  @ViewChild('videoUpload') videoUpload: VideoUploadComponent
-  @ViewChild('videoImportUrl') videoImportUrl: VideoImportUrlComponent
-  @ViewChild('videoImportTorrent') videoImportTorrent: VideoImportTorrentComponent
+  @ViewChild('videoUpload', { static: false }) videoUpload: VideoUploadComponent
+  @ViewChild('videoImportUrl', { static: false }) videoImportUrl: VideoImportUrlComponent
+  @ViewChild('videoImportTorrent', { static: false }) videoImportTorrent: VideoImportTorrentComponent
 
   secondStepType: 'upload' | 'import-url' | 'import-torrent'
   videoName: string
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
index ac1d02d94..8cdd37680 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
@@ -27,8 +27,8 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
 
   @Output() commentCreated = new EventEmitter<VideoCommentCreate>()
 
-  @ViewChild('visitorModal') visitorModal: NgbModal
-  @ViewChild('textarea') textareaElement: ElementRef
+  @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
+  @ViewChild('textarea', { static: true }) textareaElement: ElementRef
 
   addingComment = false
 
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.ts b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
index 5bafc55e5..64bd18072 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
@@ -20,7 +20,7 @@ import { HooksService } from '@app/core/plugins/hooks.service'
   styleUrls: ['./video-comments.component.scss']
 })
 export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
-  @ViewChild('commentHighlightBlock') commentHighlightBlock: ElementRef
+  @ViewChild('commentHighlightBlock', { static: false }) commentHighlightBlock: ElementRef
   @Input() video: VideoDetails
   @Input() user: User
 
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html
index 82e59d04d..e0be9f265 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.html
@@ -27,7 +27,7 @@
       <ngb-tab i18n-title title="QR-Code" id="qrcode">
         <ng-template ngbTabContent>
           <div class="tab-content">
-            <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode>
+            <qrcode [qrdata]="getVideoUrl()" size="256" level="Q"></qrcode>
           </div>
         </ng-template>
       </ngb-tab>
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts
index eaaf6b902..f45afccfb 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts
@@ -30,7 +30,7 @@ type Customizations = {
   styleUrls: [ './video-share.component.scss' ]
 })
 export class VideoShareComponent {
-  @ViewChild('modal') modal: ElementRef
+  @ViewChild('modal', { static: true }) modal: ElementRef
 
   @Input() video: VideoDetails = null
   @Input() videoCaptions: VideoCaption[] = []
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.ts b/client/src/app/videos/+video-watch/modal/video-support.component.ts
index 5e7afa012..b56a51fbf 100644
--- a/client/src/app/videos/+video-watch/modal/video-support.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-support.component.ts
@@ -11,7 +11,7 @@ import { MarkdownService } from '@app/shared/renderer'
 export class VideoSupportComponent {
   @Input() video: VideoDetails = null
 
-  @ViewChild('modal') modal: NgbModal
+  @ViewChild('modal', { static: true }) modal: NgbModal
 
   videoHTMLSupport = ''
 
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 228c45a06..027c2b026 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -43,10 +43,10 @@ import { HooksService } from '@app/core/plugins/hooks.service'
 export class VideoWatchComponent implements OnInit, OnDestroy {
   private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
 
-  @ViewChild('videoWatchPlaylist') videoWatchPlaylist: VideoWatchPlaylistComponent
-  @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
-  @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
-  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
+  @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
+  @ViewChild('videoShareModal', { static: false }) videoShareModal: VideoShareComponent
+  @ViewChild('videoSupportModal', { static: false }) videoSupportModal: VideoSupportComponent
+  @ViewChild('subscribeButton', { static: false }) subscribeButton: SubscribeButtonComponent
 
   player: any
   playerElement: HTMLVideoElement
diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts
index 67596a3da..f083aca4d 100644
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@@ -8,17 +8,17 @@ import { VideoCommentsComponent } from './comment/video-comments.component'
 import { VideoShareComponent } from './modal/video-share.component'
 import { VideoWatchRoutingModule } from './video-watch-routing.module'
 import { VideoWatchComponent } from './video-watch.component'
-import { NgxQRCodeModule } from 'ngx-qrcode2'
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
 import { RecommendationsModule } from '@app/videos/recommendations/recommendations.module'
 import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component'
+import { QRCodeModule } from 'angularx-qrcode'
 
 @NgModule({
   imports: [
     VideoWatchRoutingModule,
     SharedModule,
     NgbTooltipModule,
-    NgxQRCodeModule,
+    QRCodeModule,
     RecommendationsModule
   ],
 
diff --git a/client/src/app/videos/videos-routing.module.ts b/client/src/app/videos/videos-routing.module.ts
index 505173a5b..bc7520207 100644
--- a/client/src/app/videos/videos-routing.module.ts
+++ b/client/src/app/videos/videos-routing.module.ts
@@ -77,7 +77,7 @@ const videosRoutes: Routes = [
       },
       {
         path: 'upload',
-        loadChildren: 'app/videos/+video-edit/video-add.module#VideoAddModule',
+        loadChildren: () => import('app/videos/+video-edit/video-add.module').then(m => m.VideoAddModule),
         data: {
           meta: {
             title: 'Upload a video'
@@ -86,7 +86,7 @@ const videosRoutes: Routes = [
       },
       {
         path: 'update/:uuid',
-        loadChildren: 'app/videos/+video-edit/video-update.module#VideoUpdateModule',
+        loadChildren: () => import('app/videos/+video-edit/video-update.module').then(m => m.VideoUpdateModule),
         data: {
           meta: {
             title: 'Edit a video'
@@ -95,7 +95,7 @@ const videosRoutes: Routes = [
       },
       {
         path: 'watch',
-        loadChildren: 'app/videos/+video-watch/video-watch.module#VideoWatchModule',
+        loadChildren: () => import('app/videos/+video-watch/video-watch.module').then(m => m.VideoWatchModule),
         data: {
           preload: 3000
         }