Lazy import some modules

22 files changed, 132 insertions, 82 deletions

diff --git a/client/package.json b/client/package.json
index 92659b091..08d309b07 100644
--- a/client/package.json
+++ b/client/package.json
@@ -93,6 +93,7 @@
     "@types/jasminewd2": "^2.0.3",
     "@types/jest": "^23.3.1",
     "@types/jschannel": "^1.0.0",
+    "@types/linkifyjs": "^2.1.1",
     "@types/lodash-es": "^4.17.0",
     "@types/markdown-it": "^0.0.5",
     "@types/node": "^10.9.2",
@@ -154,7 +155,7 @@
     "ts-jest": "^23.1.4",
     "tslint": "^5.7.0",
     "tslint-config-standard": "^8.0.1",
-    "typescript": "3.1.6",
+    "typescript": "3.2",
     "video.js": "^7",
     "videojs-contextmenu-ui": "^5.0.0",
     "videojs-contrib-quality-levels": "^2.0.9",
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 a1b30fa8c..ec572ff80 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -44,10 +44,11 @@ export class AboutInstanceComponent implements OnInit {
   ngOnInit () {
     this.instanceService.getAbout()
       .subscribe(
-        res => {
+        async res => {
           this.shortDescription = res.instance.shortDescription
-          this.descriptionHTML = this.markdownService.textMarkdownToHTML(res.instance.description)
-          this.termsHTML = this.markdownService.textMarkdownToHTML(res.instance.terms)
+
+          this.descriptionHTML = await this.markdownService.textMarkdownToHTML(res.instance.description)
+          this.termsHTML = await this.markdownService.textMarkdownToHTML(res.instance.terms)
         },
 
         () => this.notifier.error(this.i18n('Cannot get about information from server'))
diff --git a/client/src/app/+accounts/account-about/account-about.component.ts b/client/src/app/+accounts/account-about/account-about.component.ts
index 13890a0ee..ce22d3c2e 100644
--- a/client/src/app/+accounts/account-about/account-about.component.ts
+++ b/client/src/app/+accounts/account-about/account-about.component.ts
@@ -25,9 +25,9 @@ export class AccountAboutComponent implements OnInit, OnDestroy {
   ngOnInit () {
     // Parent get the account for us
     this.accountSub = this.accountService.accountLoaded
-      .subscribe(account => {
+      .subscribe(async account => {
         this.account = account
-        this.descriptionHTML = this.markdownService.textMarkdownToHTML(this.account.description)
+        this.descriptionHTML = await this.markdownService.textMarkdownToHTML(this.account.description)
       })
   }
 
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
index 05b549de6..627437053 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
@@ -51,11 +51,11 @@
         <td class="moderation-expanded" colspan="6">
           <div>
             <span i18n class="moderation-expanded-label">Reason:</span>
-            <span class="moderation-expanded-text" [innerHTML]="toHtml(videoAbuse.reason)"></span>
+            <span class="moderation-expanded-text" [innerHTML]="videoAbuse.reasonHtml"></span>
           </div>
           <div *ngIf="videoAbuse.moderationComment">
             <span i18n class="moderation-expanded-label">Moderation comment:</span>
-            <span class="moderation-expanded-text" [innerHTML]="toHtml(videoAbuse.moderationComment)"></span>
+            <span class="moderation-expanded-text" [innerHTML]="videoAbuse.moderationCommentHtml"></span>
           </div>
         </td>
       </tr>
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 00c871659..3aa875668 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
@@ -19,7 +19,7 @@ import { MarkdownService } from '@app/shared/renderer'
 export class VideoAbuseListComponent extends RestTable implements OnInit {
   @ViewChild('moderationCommentModal') moderationCommentModal: ModerationCommentModalComponent
 
-  videoAbuses: VideoAbuse[] = []
+  videoAbuses: (VideoAbuse & { moderationCommentHtml?: string, reasonHtml?: string })[] = []
   totalRecords = 0
   rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: 1 }
@@ -110,19 +110,28 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
 
   }
 
-  toHtml (text: string) {
-    return this.markdownRenderer.textMarkdownToHTML(text)
-  }
-
   protected loadData () {
     return this.videoAbuseService.getVideoAbuses(this.pagination, this.sort)
                .subscribe(
-                 resultList => {
-                   this.videoAbuses = resultList.data
+                 async resultList => {
                    this.totalRecords = resultList.total
+
+                   this.videoAbuses = resultList.data
+
+                   for (const abuse of this.videoAbuses) {
+                     Object.assign(abuse, {
+                       reasonHtml: await this.toHtml(abuse.reason),
+                       moderationCommentHtml: await this.toHtml(abuse.moderationComment)
+                     })
+                   }
+
                  },
 
                  err => this.notifier.error(err.message)
                )
   }
+
+  private toHtml (text: string) {
+    return this.markdownRenderer.textMarkdownToHTML(text)
+  }
 }
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
index 247f441c1..608dff2d8 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
@@ -41,7 +41,7 @@
     <tr>
       <td class="moderation-expanded" colspan="6">
         <span i18n class="moderation-expanded-label">Blacklist reason:</span>
-        <span class="moderation-expanded-text" [innerHTML]="toHtml(videoBlacklist.reason)"></span>
+        <span class="moderation-expanded-text" [innerHTML]="videoBlacklist.reasonHtml"></span>
       </td>
     </tr>
   </ng-template>
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
index b27bbbfef..5443d816d 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
@@ -15,7 +15,7 @@ import { MarkdownService } from '@app/shared/renderer'
   styleUrls: [ '../moderation.component.scss' ]
 })
 export class VideoBlacklistListComponent extends RestTable implements OnInit {
-  blacklist: VideoBlacklist[] = []
+  blacklist: (VideoBlacklist & { reasonHtml?: string })[] = []
   totalRecords = 0
   rowsPerPage = 10
   sort: SortMeta = { field: 'createdAt', order: 1 }
@@ -79,9 +79,14 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
   protected loadData () {
     this.videoBlacklistService.listBlacklist(this.pagination, this.sort)
       .subscribe(
-        resultList => {
-          this.blacklist = resultList.data
+        async resultList => {
           this.totalRecords = resultList.total
+
+          this.blacklist = resultList.data
+
+          for (const element of this.blacklist) {
+            Object.assign(element, { reasonHtml: await this.toHtml(element.reason) })
+          }
         },
 
         err => this.notifier.error(err.message)
diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
index 895b19064..11f9391e1 100644
--- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
+++ b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts
@@ -26,11 +26,11 @@ export class VideoChannelAboutComponent implements OnInit, OnDestroy {
   ngOnInit () {
     // Parent get the video channel for us
     this.videoChannelSub = this.videoChannelService.videoChannelLoaded
-      .subscribe(videoChannel => {
+      .subscribe(async videoChannel => {
         this.videoChannel = videoChannel
 
-        this.descriptionHTML = this.markdownService.textMarkdownToHTML(this.videoChannel.description)
-        this.supportHTML = this.markdownService.enhancedMarkdownToHTML(this.videoChannel.support)
+        this.descriptionHTML = await this.markdownService.textMarkdownToHTML(this.videoChannel.description)
+        this.supportHTML = await this.markdownService.enhancedMarkdownToHTML(this.videoChannel.support)
       })
   }
 
diff --git a/client/src/app/core/notification/user-notification-socket.service.ts b/client/src/app/core/notification/user-notification-socket.service.ts
index f367d9ae4..29337d3a7 100644
--- a/client/src/app/core/notification/user-notification-socket.service.ts
+++ b/client/src/app/core/notification/user-notification-socket.service.ts
@@ -21,21 +21,22 @@ export class UserNotificationSocket {
     this.notificationSubject.next({ type, notification })
   }
 
-  getMyNotificationsSocket () {
-    const socket = this.getSocket()
-
-    socket.on('new-notification', (n: UserNotificationServer) => this.dispatch('new', n))
+  async getMyNotificationsSocket () {
+    await this.initSocket()
 
     return this.notificationSubject.asObservable()
   }
 
-  private getSocket () {
-    if (this.socket) return this.socket
+  private async initSocket () {
+    if (this.socket) return
+
+    // FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
+    const io: typeof import ('socket.io-client') = (await import('socket.io-client') as any).default
 
     this.socket = io(environment.apiUrl + '/user-notifications', {
       query: { accessToken: this.auth.getAccessToken() }
     })
 
-    return this.socket
+    this.socket.on('new-notification', (n: UserNotificationServer) => this.dispatch('new', n))
   }
 }
diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts
index f1af08096..878c5c88c 100644
--- a/client/src/app/menu/avatar-notification.component.ts
+++ b/client/src/app/menu/avatar-notification.component.ts
@@ -26,18 +26,19 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
     private userNotificationSocket: UserNotificationSocket,
     private notifier: Notifier,
     private router: Router
-  ) {}
+  ) {
+  }
 
   ngOnInit () {
     this.userNotificationService.countUnreadNotifications()
-      .subscribe(
-        result => {
-          this.unreadNotifications = Math.min(result, 99) // Limit number to 99
-          this.subscribeToNotifications()
-        },
+        .subscribe(
+          result => {
+            this.unreadNotifications = Math.min(result, 99) // Limit number to 99
+            this.subscribeToNotifications()
+          },
 
-        err => this.notifier.error(err.message)
-      )
+          err => this.notifier.error(err.message)
+        )
 
     this.routeSub = this.router.events
                         .pipe(filter(event => event instanceof NavigationEnd))
@@ -53,13 +54,14 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
     this.popover.close()
   }
 
-  private subscribeToNotifications () {
-    this.notificationSub = this.userNotificationSocket.getMyNotificationsSocket()
-                               .subscribe(data => {
-                                 if (data.type === 'new') return this.unreadNotifications++
-                                 if (data.type === 'read') return this.unreadNotifications--
-                                 if (data.type === 'read-all') return this.unreadNotifications = 0
-                               })
+  private async subscribeToNotifications () {
+    const obs = await this.userNotificationSocket.getMyNotificationsSocket()
+
+    this.notificationSub = obs.subscribe(data => {
+      if (data.type === 'new') return this.unreadNotifications++
+      if (data.type === 'read') return this.unreadNotifications--
+      if (data.type === 'read-all') return this.unreadNotifications = 0
+    })
   }
 
 }
diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts
index e87aca0d4..49a57f29d 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/forms/markdown-textarea.component.ts
@@ -82,11 +82,11 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
     return this.screenService.isInSmallView() === false
   }
 
-  private updatePreviews () {
+  private async updatePreviews () {
     if (this.content === null || this.content === undefined) return
 
-    this.truncatedPreviewHTML = this.markdownRender(truncate(this.content, { length: this.truncate }))
-    this.previewHTML = this.markdownRender(this.content)
+    this.truncatedPreviewHTML = await this.markdownRender(truncate(this.content, { length: this.truncate }))
+    this.previewHTML = await this.markdownRender(this.content)
   }
 
   private markdownRender (text: string) {
diff --git a/client/src/app/shared/renderer/html-renderer.service.ts b/client/src/app/shared/renderer/html-renderer.service.ts
index d49df9b6d..28ef51e72 100644
--- a/client/src/app/shared/renderer/html-renderer.service.ts
+++ b/client/src/app/shared/renderer/html-renderer.service.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core'
 import { LinkifierService } from '@app/shared/renderer/linkifier.service'
-import * as sanitizeHtml from 'sanitize-html'
 
 @Injectable()
 export class HtmlRendererService {
@@ -9,7 +8,10 @@ export class HtmlRendererService {
 
   }
 
-  toSafeHtml (text: string) {
+  async toSafeHtml (text: string) {
+    // FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
+    const sanitizeHtml: typeof import ('sanitize-html') = (await import('sanitize-html') as any).default
+
     // Convert possible markdown to html
     const html = this.linkifier.linkify(text)
 
diff --git a/client/src/app/shared/renderer/linkifier.service.ts b/client/src/app/shared/renderer/linkifier.service.ts
index 2529c9eaf..95d5f17cc 100644
--- a/client/src/app/shared/renderer/linkifier.service.ts
+++ b/client/src/app/shared/renderer/linkifier.service.ts
@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core'
 import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
-// FIXME: use @types/linkify when https://github.com/DefinitelyTyped/DefinitelyTyped/pull/29682/files is merged?
-const linkify = require('linkifyjs')
-const linkifyHtml = require('linkifyjs/html')
+import * as linkify from 'linkifyjs'
+import linkifyHtml from 'linkifyjs/html'
 
 @Injectable()
 export class LinkifierService {
diff --git a/client/src/app/shared/renderer/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts
index 07017eca5..69dc60aaf 100644
--- a/client/src/app/shared/renderer/markdown.service.ts
+++ b/client/src/app/shared/renderer/markdown.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core'
 
-import * as MarkdownIt from 'markdown-it'
+import { MarkdownIt } from 'markdown-it'
 
 @Injectable()
 export class MarkdownService {
@@ -14,30 +14,36 @@ export class MarkdownService {
   ]
   static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ])
 
-  private textMarkdownIt: MarkdownIt.MarkdownIt
-  private enhancedMarkdownIt: MarkdownIt.MarkdownIt
+  private textMarkdownIt: MarkdownIt
+  private enhancedMarkdownIt: MarkdownIt
 
-  constructor () {
-    this.textMarkdownIt = this.createMarkdownIt(MarkdownService.TEXT_RULES)
-    this.enhancedMarkdownIt = this.createMarkdownIt(MarkdownService.ENHANCED_RULES)
-  }
-
-  textMarkdownToHTML (markdown: string) {
+  async textMarkdownToHTML (markdown: string) {
     if (!markdown) return ''
 
+    if (!this.textMarkdownIt) {
+      this.textMarkdownIt = await this.createMarkdownIt(MarkdownService.TEXT_RULES)
+    }
+
     const html = this.textMarkdownIt.render(markdown)
     return this.avoidTruncatedTags(html)
   }
 
-  enhancedMarkdownToHTML (markdown: string) {
+  async enhancedMarkdownToHTML (markdown: string) {
     if (!markdown) return ''
 
+    if (!this.enhancedMarkdownIt) {
+      this.enhancedMarkdownIt = await this.createMarkdownIt(MarkdownService.ENHANCED_RULES)
+    }
+
     const html = this.enhancedMarkdownIt.render(markdown)
     return this.avoidTruncatedTags(html)
   }
 
-  private createMarkdownIt (rules: string[]) {
-    const markdownIt = new MarkdownIt('zero', { linkify: true, breaks: true })
+  private async createMarkdownIt (rules: string[]) {
+    // FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
+    const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default
+
+    const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true })
 
     for (let rule of rules) {
       markdownIt.enable(rule)
@@ -48,7 +54,7 @@ export class MarkdownService {
     return markdownIt
   }
 
-  private setTargetToLinks (markdownIt: MarkdownIt.MarkdownIt) {
+  private setTargetToLinks (markdownIt: MarkdownIt) {
     // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
     const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) {
       return self.renderToken(tokens, idx, options)
diff --git a/client/src/app/shared/users/user-notification.service.ts b/client/src/app/shared/users/user-notification.service.ts
index f8a30955d..ae0bc9cb1 100644
--- a/client/src/app/shared/users/user-notification.service.ts
+++ b/client/src/app/shared/users/user-notification.service.ts
@@ -7,7 +7,7 @@ import { ResultList, UserNotification as UserNotificationServer, UserNotificatio
 import { UserNotification } from './user-notification.model'
 import { AuthService } from '../../core'
 import { ComponentPagination } from '../rest/component-pagination.model'
-import { User } from '..'
+import { User } from '../users/user.model'
 import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service'
 
 @Injectable()
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.ts b/client/src/app/videos/+video-watch/comment/video-comment.component.ts
index aba7f9d1c..172eb0a39 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.ts
@@ -85,8 +85,8 @@ export class VideoCommentComponent implements OnInit, OnChanges {
       )
   }
 
-  private init () {
-    this.sanitizedCommentHTML = this.htmlRenderer.toSafeHtml(this.comment.text)
+  private async init () {
+    this.sanitizedCommentHTML = await this.htmlRenderer.toSafeHtml(this.comment.text)
 
     this.newParentComments = this.parentComments.concat([ this.comment ])
   }
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 deb8fbc67..5e7afa012 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
@@ -21,7 +21,9 @@ export class VideoSupportComponent {
   ) { }
 
   show () {
-    this.videoHTMLSupport = this.markdownService.enhancedMarkdownToHTML(this.video.support)
     this.modalService.open(this.modal)
+
+    this.markdownService.enhancedMarkdownToHTML(this.video.support)
+      .then(r => this.videoHTMLSupport = r)
   }
 }
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 4dbfa41e5..0f04441ba 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -325,8 +325,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.setVideoDescriptionHTML()
   }
 
-  private setVideoDescriptionHTML () {
-    this.videoHTMLDescription = this.markdownService.textMarkdownToHTML(this.video.description)
+  private async setVideoDescriptionHTML () {
+    this.videoHTMLDescription = await this.markdownService.textMarkdownToHTML(this.video.description)
   }
 
   private setVideoLikesBarTooltipText () {
diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
index 7ea4a06d4..92ac57cf5 100644
--- a/client/src/assets/player/peertube-plugin.ts
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -22,7 +22,6 @@ import {
 
 const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
 class PeerTubePlugin extends Plugin {
-  private readonly autoplay: boolean = false
   private readonly startTime: number = 0
   private readonly videoViewUrl: string
   private readonly videoDuration: number
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index e18e9ae9d..6fb9bf200 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -432,7 +432,7 @@
   height: 160px;
   display: flex;
   flex-direction: column;
-  align-items: start;
+  align-items: flex-start;
 
   .actor {
     display: flex;
diff --git a/client/yarn.lock b/client/yarn.lock
index 63394e0f7..2d3ade3dd 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -445,6 +445,13 @@
   resolved "https://registry.yarnpkg.com/@types/jschannel/-/jschannel-1.0.1.tgz#79d582ccf42554c8457230526a3054d018d559f0"
   integrity sha512-S34NuOoOOKXbft3f9GDeLKp777ABCGArZaqUWOuu1Xn+1S75Osmk8kCeqmw5x2TuASyjE082DwDAuoaXNIRCTw==
 
+"@types/linkifyjs@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@types/linkifyjs/-/linkifyjs-2.1.1.tgz#d6902c165f7108ff9293f7145dfb703fee6814c7"
+  integrity sha512-rTXD/qsdI0aAf1tOtacWaE47K2QLz5C/g7rmB6kYyNuRKWMtStcQjVAM5R/T6kaiR8EVLMwPZ1RqX3aA/CS95g==
+  dependencies:
+    "@types/react" "*"
+
 "@types/lodash-es@^4.17.0":
   version "4.17.1"
   resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.1.tgz#56745e5411558362aeca31def918f88f725dd29d"
@@ -500,11 +507,24 @@
     "@types/node" "*"
     "@types/parse-torrent-file" "*"
 
+"@types/prop-types@*":
+  version "15.5.9"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.9.tgz#f2d14df87b0739041bc53a7d75e3d77d726a3ec0"
+  integrity sha512-Nha5b+jmBI271jdTMwrHiNXM+DvThjHOfyZtMX9kj/c/LUj2xiLHsG/1L3tJ8DjAoQN48cHwUwtqBotjyXaSdQ==
+
 "@types/q@^0.0.32":
   version "0.0.32"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-0.0.32.tgz#bd284e57c84f1325da702babfc82a5328190c0c5"
   integrity sha1-vShOV8hPEyXacCur/IKlMoGQwMU=
 
+"@types/react@*":
+  version "16.8.3"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.3.tgz#7b67956f682bea30a5a09b3242c0784ff196c848"
+  integrity sha512-PjPocAxL9SNLjYMP4dfOShW/rj9FDBJGu3JFRt0zEYf77xfihB6fq8zfDpMrV6s82KnAi7F1OEe5OsQX25Ybdw==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/sanitize-html@1.18.0":
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-1.18.0.tgz#de5cb560a41308ea8474e93b9d10bbb4050692f5"
@@ -2611,6 +2631,11 @@ cssstyle@^1.0.0:
   dependencies:
     cssom "0.3.x"
 
+csstype@^2.2.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.2.tgz#3043d5e065454579afc7478a18de41909c8a2f01"
+  integrity sha512-Rl7PvTae0pflc1YtxtKbiSqq20Ts6vpIYOD5WBafl4y123DyHUeLrRdQP66sQW8/6gmX8jrYJLXwNeMqYVJcow==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -9927,12 +9952,7 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@3.1.6:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.6.tgz#b6543a83cfc8c2befb3f4c8fba6896f5b0c9be68"
-  integrity sha512-tDMYfVtvpb96msS1lDX9MEdHrW4yOuZ4Kdc4Him9oU796XldPYF/t2+uKoX0BBa0hXXwDlqYQbXY5Rzjzc5hBA==
-
-typescript@3.2.4:
+typescript@3.2, typescript@3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.4.tgz#c585cb952912263d915b462726ce244ba510ef3d"
   integrity sha512-0RNDbSdEokBeEAkgNbxJ+BLwSManFy9TeXz8uW+48j/xhEXv1ePME60olyzw2XzUqUBNAYFeJadIqAgNqIACwg==
diff --git a/server/lib/notifier.ts b/server/lib/notifier.ts
index 2fa320cd7..9cdd603a3 100644
--- a/server/lib/notifier.ts
+++ b/server/lib/notifier.ts
@@ -147,10 +147,13 @@ class Notifier {
   }
 
   private async notifyOfCommentMention (comment: VideoCommentModel) {
-    const usernames = comment.extractMentions()
-    logger.debug('Extracted %d username from comment %s.', usernames.length, comment.url, { usernames, text: comment.text })
+    const extractedUsernames = comment.extractMentions()
+    logger.debug(
+      'Extracted %d username from comment %s.', extractedUsernames.length, comment.url,
+      { usernames: extractedUsernames, text: comment.text }
+    )
 
-    let users = await UserModel.listByUsernames(usernames)
+    let users = await UserModel.listByUsernames(extractedUsernames)
 
     if (comment.Video.isOwned()) {
       const userException = await UserModel.loadByVideoId(comment.videoId)