Add notifications in the client

36 files changed, 871 insertions, 46 deletions

diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
new file mode 100644
index 000000000..d2810c343
--- /dev/null
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -0,0 +1,7 @@
+<div class="header">
+  <a routerLink="/my-account/settings" i18n>Notification preferences</a>
+
+  <button (click)="markAllAsRead()" i18n>Mark all as read</button>
+</div>
+
+<my-user-notifications #userNotification></my-user-notifications>
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
new file mode 100644
index 000000000..86ac094c5
--- /dev/null
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -0,0 +1,23 @@
+@import '_variables';
+@import '_mixins';
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 15px;
+  margin-bottom: 10px;
+
+  a {
+    @include peertube-button-link;
+    @include grey-button;
+  }
+
+  button {
+    @include peertube-button;
+    @include grey-button;
+  }
+}
+
+my-user-notifications {
+  font-size: 15px;
+}
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
new file mode 100644
index 000000000..3e197088d
--- /dev/null
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
@@ -0,0 +1,14 @@
+import { Component, ViewChild } from '@angular/core'
+import { UserNotificationsComponent } from '@app/shared'
+
+@Component({
+  templateUrl: './my-account-notifications.component.html',
+  styleUrls: [ './my-account-notifications.component.scss' ]
+})
+export class MyAccountNotificationsComponent {
+  @ViewChild('userNotification') userNotification: UserNotificationsComponent
+
+  markAllAsRead () {
+    this.userNotification.markAllAsRead()
+  }
+}
diff --git a/client/src/app/+my-account/my-account-routing.module.ts b/client/src/app/+my-account/my-account-routing.module.ts
index a2cbeaffc..9996218ca 100644
--- a/client/src/app/+my-account/my-account-routing.module.ts
+++ b/client/src/app/+my-account/my-account-routing.module.ts
@@ -14,6 +14,7 @@ import { MyAccountOwnershipComponent } from '@app/+my-account/my-account-ownersh
 import { MyAccountBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-blocklist.component'
 import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-server-blocklist.component'
 import { MyAccountHistoryComponent } from '@app/+my-account/my-account-history/my-account-history.component'
+import { MyAccountNotificationsComponent } from '@app/+my-account/my-account-notifications/my-account-notifications.component'
 
 const myAccountRoutes: Routes = [
   {
@@ -124,6 +125,15 @@ const myAccountRoutes: Routes = [
             title: 'Videos history'
           }
         }
+      },
+      {
+        path: 'notifications',
+        component: MyAccountNotificationsComponent,
+        data: {
+          meta: {
+            title: 'Notifications'
+          }
+        }
       }
     ]
   }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/index.ts b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/index.ts
new file mode 100644
index 000000000..5e1d51339
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/index.ts
@@ -0,0 +1 @@
+export * from './my-account-notification-preferences.component'
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
new file mode 100644
index 000000000..59422d682
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
@@ -0,0 +1,19 @@
+<div class="custom-row">
+  <div i18n>Activities</div>
+  <div i18n>Web</div>
+  <div i18n *ngIf="emailEnabled">Email</div>
+</div>
+
+<div class="custom-row" *ngFor="let notificationType of notificationSettingKeys">
+  <ng-container *ngIf="hasUserRight(notificationType)">
+    <div>{{ labelNotifications[notificationType] }}</div>
+
+    <div>
+      <p-inputSwitch [(ngModel)]="webNotifications[notificationType]" (onChange)="updateWebSetting(notificationType, $event.checked)"></p-inputSwitch>
+    </div>
+
+    <div *ngIf="emailEnabled">
+      <p-inputSwitch [(ngModel)]="emailNotifications[notificationType]" (onChange)="updateEmailSetting(notificationType, $event.checked)"></p-inputSwitch>
+    </div>
+  </ng-container>
+</div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
new file mode 100644
index 000000000..6feb16ab1
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -0,0 +1,25 @@
+@import '_variables';
+@import '_mixins';
+
+.custom-row {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
+
+  &:first-child {
+    font-size: 16px;
+
+    & > div {
+      font-weight: $font-semibold;
+    }
+  }
+
+  & > div {
+    width: 350px;
+  }
+
+  & > div {
+    padding: 10px
+  }
+}
+
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
new file mode 100644
index 000000000..519bdfab4
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
@@ -0,0 +1,99 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { User } from '@app/shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { Subject } from 'rxjs'
+import { UserNotificationSetting, UserNotificationSettingValue, UserRight } from '../../../../../../shared'
+import { Notifier, ServerService } from '@app/core'
+import { debounce } from 'lodash-es'
+import { UserNotificationService } from '@app/shared/users/user-notification.service'
+
+@Component({
+  selector: 'my-account-notification-preferences',
+  templateUrl: './my-account-notification-preferences.component.html',
+  styleUrls: [ './my-account-notification-preferences.component.scss' ]
+})
+export class MyAccountNotificationPreferencesComponent implements OnInit {
+  @Input() user: User = null
+  @Input() userInformationLoaded: Subject<any>
+
+  notificationSettingKeys: (keyof UserNotificationSetting)[] = []
+  emailNotifications: { [ id in keyof UserNotificationSetting ]: boolean } = {} as any
+  webNotifications: { [ id in keyof UserNotificationSetting ]: boolean } = {} as any
+  labelNotifications: { [ id in keyof UserNotificationSetting ]: string } = {} as any
+  rightNotifications: { [ id in keyof Partial<UserNotificationSetting> ]: UserRight } = {} as any
+  emailEnabled: boolean
+
+  private savePreferences = debounce(this.savePreferencesImpl.bind(this), 500)
+
+  constructor (
+    private i18n: I18n,
+    private userNotificationService: UserNotificationService,
+    private serverService: ServerService,
+    private notifier: Notifier
+  ) {
+    this.labelNotifications = {
+      newVideoFromSubscription: this.i18n('New video from your subscriptions'),
+      newCommentOnMyVideo: this.i18n('New comment on your video'),
+      videoAbuseAsModerator: this.i18n('New video abuse on local video'),
+      blacklistOnMyVideo: this.i18n('One of your video is blacklisted/unblacklisted'),
+      myVideoPublished: this.i18n('Video published (after transcoding/scheduled update)'),
+      myVideoImportFinished: this.i18n('Video import finished'),
+      newUserRegistration: this.i18n('A new user registered on your instance'),
+      newFollow: this.i18n('You or your channel(s) has a new follower'),
+      commentMention: this.i18n('Someone mentioned you in video comments')
+    }
+    this.notificationSettingKeys = Object.keys(this.labelNotifications) as (keyof UserNotificationSetting)[]
+
+    this.rightNotifications = {
+      videoAbuseAsModerator: UserRight.MANAGE_VIDEO_ABUSES,
+      newUserRegistration: UserRight.MANAGE_USERS
+    }
+
+    this.emailEnabled = this.serverService.getConfig().email.enabled
+  }
+
+  ngOnInit () {
+    this.userInformationLoaded.subscribe(() => this.loadNotificationSettings())
+  }
+
+  hasUserRight (field: keyof UserNotificationSetting) {
+    const rightToHave = this.rightNotifications[field]
+    if (!rightToHave) return true // No rights needed
+
+    return this.user.hasRight(rightToHave)
+  }
+
+  updateEmailSetting (field: keyof UserNotificationSetting, value: boolean) {
+    if (value === true) this.user.notificationSettings[field] |= UserNotificationSettingValue.EMAIL
+    else this.user.notificationSettings[field] &= ~UserNotificationSettingValue.EMAIL
+
+    this.savePreferences()
+  }
+
+  updateWebSetting (field: keyof UserNotificationSetting, value: boolean) {
+    if (value === true) this.user.notificationSettings[field] |= UserNotificationSettingValue.WEB
+    else this.user.notificationSettings[field] &= ~UserNotificationSettingValue.WEB
+
+    this.savePreferences()
+  }
+
+  private savePreferencesImpl () {
+    this.userNotificationService.updateNotificationSettings(this.user, this.user.notificationSettings)
+      .subscribe(
+        () => {
+          this.notifier.success(this.i18n('Preferences saved'), undefined, 2000)
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  private loadNotificationSettings () {
+    for (const key of Object.keys(this.user.notificationSettings)) {
+      const value = this.user.notificationSettings[key]
+      this.emailNotifications[key] = value & UserNotificationSettingValue.EMAIL
+
+      this.webNotifications[key] = value & UserNotificationSettingValue.WEB
+    }
+  }
+}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index c7e23cd1f..2eb7dd56e 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -9,6 +9,9 @@
   <my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile>
 </ng-template>
 
+<div i18n class="account-title" id="notifications">Notifications</div>
+<my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences>
+
 <div i18n class="account-title">Password</div>
 <my-account-change-password></my-account-change-password>
 
@@ -16,4 +19,4 @@
 <my-account-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-video-settings>
 
 <div i18n class="account-title">Danger zone</div>
-<my-account-danger-zone [user]="user"></my-account-danger-zone>
\ No newline at end of file
+<my-account-danger-zone [user]="user"></my-account-danger-zone>
diff --git a/client/src/app/+my-account/my-account.component.ts b/client/src/app/+my-account/my-account.component.ts
index 1bac9547d..8a4102d80 100644
--- a/client/src/app/+my-account/my-account.component.ts
+++ b/client/src/app/+my-account/my-account.component.ts
@@ -68,6 +68,10 @@ export class MyAccountComponent {
         label: this.i18n('My settings'),
         routerLink: '/my-account/settings'
       },
+      {
+        label: this.i18n('My notifications'),
+        routerLink: '/my-account/notifications'
+      },
       libraryEntries,
       miscEntries
     ]
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index 80d9f0cf7..18f51f171 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -23,6 +23,8 @@ import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-sub
 import { MyAccountBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-blocklist.component'
 import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-server-blocklist.component'
 import { MyAccountHistoryComponent } from '@app/+my-account/my-account-history/my-account-history.component'
+import { MyAccountNotificationsComponent } from '@app/+my-account/my-account-notifications/my-account-notifications.component'
+import { MyAccountNotificationPreferencesComponent } from '@app/+my-account/my-account-settings/my-account-notification-preferences'
 
 @NgModule({
   imports: [
@@ -53,7 +55,9 @@ import { MyAccountHistoryComponent } from '@app/+my-account/my-account-history/m
     MyAccountSubscriptionsComponent,
     MyAccountBlocklistComponent,
     MyAccountServerBlocklistComponent,
-    MyAccountHistoryComponent
+    MyAccountHistoryComponent,
+    MyAccountNotificationsComponent,
+    MyAccountNotificationPreferencesComponent
   ],
 
   exports: [
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 70c4374e0..dea378a6e 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
@@ -55,7 +55,7 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
     this.videoChannelSub = this.videoChannelService.videoChannelLoaded
       .subscribe(videoChannel => {
         this.videoChannel = videoChannel
-        this.currentRoute = '/video-channels/' + this.videoChannel.uuid + '/videos'
+        this.currentRoute = '/video-channels/' + this.videoChannel.nameWithHost + '/videos'
 
         this.reloadVideos()
         this.generateSyndicationList()
diff --git a/client/src/app/+video-channels/video-channels-routing.module.ts b/client/src/app/+video-channels/video-channels-routing.module.ts
index 935578d2a..3ac3533d9 100644
--- a/client/src/app/+video-channels/video-channels-routing.module.ts
+++ b/client/src/app/+video-channels/video-channels-routing.module.ts
@@ -7,7 +7,7 @@ import { VideoChannelAboutComponent } from './video-channel-about/video-channel-
 
 const videoChannelsRoutes: Routes = [
   {
-    path: ':videoChannelId',
+    path: ':videoChannelName',
     component: VideoChannelsComponent,
     canActivateChild: [ MetaGuard ],
     children: [
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index 0c5c814c7..41ff82e98 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -34,9 +34,9 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
   ngOnInit () {
     this.routeSub = this.route.params
                         .pipe(
-                          map(params => params[ 'videoChannelId' ]),
+                          map(params => params[ 'videoChannelName' ]),
                           distinctUntilChanged(),
-                          switchMap(videoChannelId => this.videoChannelService.getVideoChannel(videoChannelId)),
+                          switchMap(videoChannelName => this.videoChannelService.getVideoChannel(videoChannelName)),
                           catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 404 ]))
                         )
                         .subscribe(videoChannel => this.videoChannel = videoChannel)
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index 371199442..0bbc2e08b 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -12,13 +12,12 @@ import { AppComponent } from './app.component'
 import { CoreModule } from './core'
 import { HeaderComponent } from './header'
 import { LoginModule } from './login'
-import { MenuComponent } from './menu'
+import { AvatarNotificationComponent, LanguageChooserComponent, MenuComponent } from './menu'
 import { SharedModule } from './shared'
 import { SignupModule } from './signup'
 import { VideosModule } from './videos'
 import { buildFileLocale, getCompleteLocale, isDefaultLocale } from '../../../shared/models/i18n'
 import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
-import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
 import { SearchModule } from '@app/search'
 
 export function metaFactory (serverService: ServerService): MetaLoader {
@@ -40,6 +39,7 @@ export function metaFactory (serverService: ServerService): MetaLoader {
 
     MenuComponent,
     LanguageChooserComponent,
+    AvatarNotificationComponent,
     HeaderComponent
   ],
   imports: [
diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/avatar-notification.component.html
new file mode 100644
index 000000000..2f0b7c669
--- /dev/null
+++ b/client/src/app/menu/avatar-notification.component.html
@@ -0,0 +1,23 @@
+<div
+  [ngbPopover]="popContent" autoClose="outside" placement="bottom-left" container="body" popoverClass="popover-notifications"
+  i18n-title title="View your notifications" class="notification-avatar" #popover="ngbPopover"
+>
+  <div *ngIf="unreadNotifications > 0" class="unread-notifications">{{ unreadNotifications }}</div>
+
+  <img [src]="user.accountAvatarUrl" alt="Avatar" />
+</div>
+
+<ng-template #popContent>
+  <div class="notifications-header">
+    <div i18n>Notifications</div>
+
+    <a
+      i18n-title title="Update your notification preferences" class="glyphicon glyphicon-cog"
+      routerLink="/my-account/settings" fragment="notifications"
+    ></a>
+  </div>
+
+  <my-user-notifications [ignoreLoadingBar]="true" [infiniteScroll]="false"></my-user-notifications>
+
+  <a class="all-notifications" routerLink="/my-account/notifications" i18n>See all your notifications</a>
+</ng-template>
diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss
new file mode 100644
index 000000000..c86667469
--- /dev/null
+++ b/client/src/app/menu/avatar-notification.component.scss
@@ -0,0 +1,82 @@
+@import '_variables';
+@import '_mixins';
+
+/deep/ {
+  .popover-notifications.popover {
+    max-width: 400px;
+
+    .popover-body {
+      padding: 0;
+      font-size: 14px;
+      font-family: $main-fonts;
+      overflow-y: auto;
+      max-height: 500px;
+      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
+
+      .notifications-header {
+        display: flex;
+        justify-content: space-between;
+
+        background-color: rgba(0, 0, 0, 0.10);
+        align-items: center;
+        padding: 0 10px;
+        font-size: 16px;
+        height: 50px;
+
+        a {
+          @include disable-default-a-behaviour;
+
+          color: rgba(20, 20, 20, 0.5);
+
+          &:hover {
+            color: rgba(20, 20, 20, 0.8);
+          }
+        }
+      }
+
+      .all-notifications {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: $font-semibold;
+        color: var(--mainForegroundColor);
+        height: 30px;
+      }
+    }
+  }
+}
+
+.notification-avatar {
+  cursor: pointer;
+  position: relative;
+
+  img,
+  .unread-notifications {
+    margin-left: 20px;
+  }
+
+  img {
+    @include avatar(34px);
+
+    margin-right: 10px;
+  }
+
+  .unread-notifications {
+    position: absolute;
+    top: -5px;
+    left: -5px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: var(--mainColor);
+    color: var(--mainBackgroundColor);
+    font-size: 10px;
+    font-weight: $font-semibold;
+
+    border-radius: 15px;
+    width: 15px;
+    height: 15px;
+  }
+}
diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts
new file mode 100644
index 000000000..60e090726
--- /dev/null
+++ b/client/src/app/menu/avatar-notification.component.ts
@@ -0,0 +1,64 @@
+import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { User } from '../shared/users/user.model'
+import { UserNotificationService } from '@app/shared/users/user-notification.service'
+import { Subscription } from 'rxjs'
+import { Notifier } from '@app/core'
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
+import { NavigationEnd, Router } from '@angular/router'
+import { filter } from 'rxjs/operators'
+
+@Component({
+  selector: 'my-avatar-notification',
+  templateUrl: './avatar-notification.component.html',
+  styleUrls: [ './avatar-notification.component.scss' ]
+})
+export class AvatarNotificationComponent implements OnInit, OnDestroy {
+  @ViewChild('popover') popover: NgbPopover
+  @Input() user: User
+
+  unreadNotifications = 0
+
+  private notificationSub: Subscription
+  private routeSub: Subscription
+
+  constructor (
+    private userNotificationService: UserNotificationService,
+    private notifier: Notifier,
+    private router: Router
+  ) {}
+
+  ngOnInit () {
+    this.userNotificationService.countUnreadNotifications()
+      .subscribe(
+        result => {
+          this.unreadNotifications = Math.min(result, 99) // Limit number to 99
+          this.subscribeToNotifications()
+        },
+
+        err => this.notifier.error(err.message)
+      )
+
+    this.routeSub = this.router.events
+                        .pipe(filter(event => event instanceof NavigationEnd))
+                        .subscribe(() => this.closePopover())
+  }
+
+  ngOnDestroy () {
+    if (this.notificationSub) this.notificationSub.unsubscribe()
+    if (this.routeSub) this.routeSub.unsubscribe()
+  }
+
+  closePopover () {
+    this.popover.close()
+  }
+
+  private subscribeToNotifications () {
+    this.notificationSub = this.userNotificationService.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
+                               })
+  }
+
+}
diff --git a/client/src/app/menu/index.ts b/client/src/app/menu/index.ts
index 421271c12..39dbde750 100644
--- a/client/src/app/menu/index.ts
+++ b/client/src/app/menu/index.ts
@@ -1 +1,3 @@
+export * from './language-chooser.component'
+export * from './avatar-notification.component'
 export * from './menu.component'
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index e04bdf3d6..aa5bfa9c9 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -2,9 +2,7 @@
   <menu>
     <div class="top-menu">
       <div *ngIf="isLoggedIn" class="logged-in-block">
-        <a routerLink="/my-account/settings">
-          <img [src]="user.accountAvatarUrl" alt="Avatar" />
-        </a>
+        <my-avatar-notification [user]="user"></my-avatar-notification>
 
         <div class="logged-in-info">
           <a routerLink="/my-account/settings" class="logged-in-username">{{ user.account?.displayName }}</a>
@@ -97,4 +95,4 @@
   </menu>
 </div>
 
-<my-language-chooser #languageChooserModal></my-language-chooser>
\ No newline at end of file
+<my-language-chooser #languageChooserModal></my-language-chooser>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index b271ebfd2..a4aaadc7f 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -39,13 +39,6 @@ menu {
     justify-content: center;
     margin-bottom: 35px;
 
-    img {
-      @include avatar(34px);
-
-      margin-left: 20px;
-      margin-right: 10px;
-    }
-
     .logged-in-info {
       flex-grow: 1;
 
diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
index 28ccb1e26..08a2fc367 100644
--- a/client/src/app/shared/misc/help.component.html
+++ b/client/src/app/shared/misc/help.component.html
@@ -18,6 +18,7 @@
   container="body"
   title="Get help"
   i18n-title
+  popoverClass="help-popover"
   [attr.aria-pressed]="isPopoverOpened"
   [ngbPopover]="tooltipTemplate"
   [placement]="tooltipPlacement"
diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index 5c73a8031..6a5c3b1fa 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -12,19 +12,21 @@
 }
 
 /deep/ {
-  .popover-body {
-    text-align: left;
-    padding: 10px;
+  .popover-help.popover {
     max-width: 300px;
 
-    font-size: 13px;
-    font-family: $main-fonts;
-    background-color: #fff;
-    color: #000;
-    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+    .popover-body {
+      text-align: left;
+      padding: 10px;
+      font-size: 13px;
+      font-family: $main-fonts;
+      background-color: #fff;
+      color: #000;
+      box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
 
-    ul {
-      padding-left: 20px;
+      ul {
+        padding-left: 20px;
+      }
     }
   }
 }
diff --git a/client/src/app/shared/rest/component-pagination.model.ts b/client/src/app/shared/rest/component-pagination.model.ts
index 0b8ecc318..85160d445 100644
--- a/client/src/app/shared/rest/component-pagination.model.ts
+++ b/client/src/app/shared/rest/component-pagination.model.ts
@@ -3,3 +3,14 @@ export interface ComponentPagination {
   itemsPerPage: number
   totalItems?: number
 }
+
+export function hasMoreItems (componentPagination: ComponentPagination) {
+  // No results
+  if (componentPagination.totalItems === 0) return false
+
+  // Not loaded yet
+  if (!componentPagination.totalItems) return true
+
+  const maxPage = componentPagination.totalItems / componentPagination.itemsPerPage
+  return maxPage > componentPagination.currentPage
+}
diff --git a/client/src/app/shared/rest/rest-extractor.service.ts b/client/src/app/shared/rest/rest-extractor.service.ts
index f149569ef..e6518dd1d 100644
--- a/client/src/app/shared/rest/rest-extractor.service.ts
+++ b/client/src/app/shared/rest/rest-extractor.service.ts
@@ -80,6 +80,7 @@ export class RestExtractor {
       errorMessage = errorMessage ? errorMessage : 'Unknown error.'
       console.error(`Backend returned code ${err.status}, errorMessage is: ${errorMessage}`)
     } else {
+      console.error(err)
       errorMessage = err
     }
 
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 4a5d664db..c99c87c00 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -63,6 +63,8 @@ import { UserModerationDropdownComponent } from '@app/shared/moderation/user-mod
 import { BlocklistService } from '@app/shared/blocklist'
 import { TopMenuDropdownComponent } from '@app/shared/menu/top-menu-dropdown.component'
 import { UserHistoryService } from '@app/shared/users/user-history.service'
+import { UserNotificationService } from '@app/shared/users/user-notification.service'
+import { UserNotificationsComponent } from '@app/shared/users/user-notifications.component'
 
 @NgModule({
   imports: [
@@ -105,7 +107,8 @@ import { UserHistoryService } from '@app/shared/users/user-history.service'
     InstanceFeaturesTableComponent,
     UserBanModalComponent,
     UserModerationDropdownComponent,
-    TopMenuDropdownComponent
+    TopMenuDropdownComponent,
+    UserNotificationsComponent
   ],
 
   exports: [
@@ -145,6 +148,7 @@ import { UserHistoryService } from '@app/shared/users/user-history.service'
     UserBanModalComponent,
     UserModerationDropdownComponent,
     TopMenuDropdownComponent,
+    UserNotificationsComponent,
 
     NumberFormatterPipe,
     ObjectLengthPipe,
@@ -187,6 +191,8 @@ import { UserHistoryService } from '@app/shared/users/user-history.service'
     I18nPrimengCalendarService,
     ScreenService,
 
+    UserNotificationService,
+
     I18n
   ]
 })
diff --git a/client/src/app/shared/users/index.ts b/client/src/app/shared/users/index.ts
index 7b5a67bc7..ebd715fb1 100644
--- a/client/src/app/shared/users/index.ts
+++ b/client/src/app/shared/users/index.ts
@@ -1,2 +1,3 @@
 export * from './user.model'
 export * from './user.service'
+export * from './user-notifications.component'
diff --git a/client/src/app/shared/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts
new file mode 100644
index 000000000..5ff816fb8
--- /dev/null
+++ b/client/src/app/shared/users/user-notification.model.ts
@@ -0,0 +1,153 @@
+import { UserNotification as UserNotificationServer, UserNotificationType, VideoInfo } from '../../../../../shared'
+
+export class UserNotification implements UserNotificationServer {
+  id: number
+  type: UserNotificationType
+  read: boolean
+
+  video?: VideoInfo & {
+    channel: {
+      id: number
+      displayName: string
+    }
+  }
+
+  videoImport?: {
+    id: number
+    video?: VideoInfo
+    torrentName?: string
+    magnetUri?: string
+    targetUrl?: string
+  }
+
+  comment?: {
+    id: number
+    threadId: number
+    account: {
+      id: number
+      displayName: string
+    }
+    video: VideoInfo
+  }
+
+  videoAbuse?: {
+    id: number
+    video: VideoInfo
+  }
+
+  videoBlacklist?: {
+    id: number
+    video: VideoInfo
+  }
+
+  account?: {
+    id: number
+    displayName: string
+    name: string
+  }
+
+  actorFollow?: {
+    id: number
+    follower: {
+      name: string
+      displayName: string
+    }
+    following: {
+      type: 'account' | 'channel'
+      name: string
+      displayName: string
+    }
+  }
+
+  createdAt: string
+  updatedAt: string
+
+  // Additional fields
+  videoUrl?: string
+  commentUrl?: any[]
+  videoAbuseUrl?: string
+  accountUrl?: string
+  videoImportIdentifier?: string
+  videoImportUrl?: string
+
+  constructor (hash: UserNotificationServer) {
+    this.id = hash.id
+    this.type = hash.type
+    this.read = hash.read
+
+    this.video = hash.video
+    this.videoImport = hash.videoImport
+    this.comment = hash.comment
+    this.videoAbuse = hash.videoAbuse
+    this.videoBlacklist = hash.videoBlacklist
+    this.account = hash.account
+    this.actorFollow = hash.actorFollow
+
+    this.createdAt = hash.createdAt
+    this.updatedAt = hash.updatedAt
+
+    switch (this.type) {
+      case UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION:
+        this.videoUrl = this.buildVideoUrl(this.video)
+        break
+
+      case UserNotificationType.UNBLACKLIST_ON_MY_VIDEO:
+        this.videoUrl = this.buildVideoUrl(this.video)
+        break
+
+      case UserNotificationType.NEW_COMMENT_ON_MY_VIDEO:
+      case UserNotificationType.COMMENT_MENTION:
+        this.commentUrl = [ this.buildVideoUrl(this.comment.video), { threadId: this.comment.threadId } ]
+        break
+
+      case UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS:
+        this.videoAbuseUrl = '/admin/moderation/video-abuses/list'
+        this.videoUrl = this.buildVideoUrl(this.videoAbuse.video)
+        break
+
+      case UserNotificationType.BLACKLIST_ON_MY_VIDEO:
+        this.videoUrl = this.buildVideoUrl(this.videoBlacklist.video)
+        break
+
+      case UserNotificationType.MY_VIDEO_PUBLISHED:
+        this.videoUrl = this.buildVideoUrl(this.video)
+        break
+
+      case UserNotificationType.MY_VIDEO_IMPORT_SUCCESS:
+        this.videoImportUrl = this.buildVideoImportUrl()
+        this.videoImportIdentifier = this.buildVideoImportIdentifier(this.videoImport)
+        this.videoUrl = this.buildVideoUrl(this.videoImport.video)
+        break
+
+      case UserNotificationType.MY_VIDEO_IMPORT_ERROR:
+        this.videoImportUrl = this.buildVideoImportUrl()
+        this.videoImportIdentifier = this.buildVideoImportIdentifier(this.videoImport)
+        break
+
+      case UserNotificationType.NEW_USER_REGISTRATION:
+        this.accountUrl = this.buildAccountUrl(this.account)
+        break
+
+      case UserNotificationType.NEW_FOLLOW:
+        this.accountUrl = this.buildAccountUrl(this.actorFollow.follower)
+        break
+    }
+  }
+
+  private buildVideoUrl (video: { uuid: string }) {
+    return '/videos/watch/' + video.uuid
+  }
+
+  private buildAccountUrl (account: { name: string }) {
+    return '/accounts/' + account.name
+  }
+
+  private buildVideoImportUrl () {
+    return '/my-account/video-imports'
+  }
+
+  private buildVideoImportIdentifier (videoImport: { targetUrl?: string, magnetUri?: string, torrentName?: string }) {
+    return videoImport.targetUrl || videoImport.magnetUri || videoImport.torrentName
+  }
+
+}
diff --git a/client/src/app/shared/users/user-notification.service.ts b/client/src/app/shared/users/user-notification.service.ts
new file mode 100644
index 000000000..2dfee8060
--- /dev/null
+++ b/client/src/app/shared/users/user-notification.service.ts
@@ -0,0 +1,110 @@
+import { Injectable } from '@angular/core'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { RestExtractor, RestService } from '@app/shared/rest'
+import { catchError, map, tap } from 'rxjs/operators'
+import { environment } from '../../../environments/environment'
+import { ResultList, UserNotification as UserNotificationServer, UserNotificationSetting } from '../../../../../shared'
+import { UserNotification } from '@app/shared/users/user-notification.model'
+import { Subject } from 'rxjs'
+import * as io from 'socket.io-client'
+import { AuthService } from '@app/core'
+import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { User } from '@app/shared'
+
+@Injectable()
+export class UserNotificationService {
+  static BASE_NOTIFICATIONS_URL = environment.apiUrl + '/api/v1/users/me/notifications'
+  static BASE_NOTIFICATION_SETTINGS = environment.apiUrl + '/api/v1/users/me/notification-settings'
+
+  private notificationSubject = new Subject<{ type: 'new' | 'read' | 'read-all', notification?: UserNotification }>()
+
+  private socket: SocketIOClient.Socket
+
+  constructor (
+    private auth: AuthService,
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor,
+    private restService: RestService
+  ) {}
+
+  listMyNotifications (pagination: ComponentPagination, unread?: boolean, ignoreLoadingBar = false) {
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, this.restService.componentPaginationToRestPagination(pagination))
+
+    if (unread) params = params.append('unread', `${unread}`)
+
+    const headers = ignoreLoadingBar ? { ignoreLoadingBar: '' } : undefined
+
+    return this.authHttp.get<ResultList<UserNotification>>(UserNotificationService.BASE_NOTIFICATIONS_URL, { params, headers })
+               .pipe(
+                 map(res => this.restExtractor.convertResultListDateToHuman(res)),
+                 map(res => this.restExtractor.applyToResultListData(res, this.formatNotification.bind(this))),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
+  countUnreadNotifications () {
+    return this.listMyNotifications({ currentPage: 1, itemsPerPage: 0 }, true)
+      .pipe(map(n => n.total))
+  }
+
+  getMyNotificationsSocket () {
+    const socket = this.getSocket()
+
+    socket.on('new-notification', (n: UserNotificationServer) => {
+      this.notificationSubject.next({ type: 'new', notification: new UserNotification(n) })
+    })
+
+    return this.notificationSubject.asObservable()
+  }
+
+  markAsRead (notification: UserNotification) {
+    const url = UserNotificationService.BASE_NOTIFICATIONS_URL + '/read'
+
+    const body = { ids: [ notification.id ] }
+    const headers = { ignoreLoadingBar: '' }
+
+    return this.authHttp.post(url, body, { headers })
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 tap(() => this.notificationSubject.next({ type: 'read' })),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+
+  markAllAsRead () {
+    const url = UserNotificationService.BASE_NOTIFICATIONS_URL + '/read-all'
+    const headers = { ignoreLoadingBar: '' }
+
+    return this.authHttp.post(url, {}, { headers })
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 tap(() => this.notificationSubject.next({ type: 'read-all' })),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+
+  updateNotificationSettings (user: User, settings: UserNotificationSetting) {
+    const url = UserNotificationService.BASE_NOTIFICATION_SETTINGS
+
+    return this.authHttp.put(url, settings)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+
+  private getSocket () {
+    if (this.socket) return this.socket
+
+    this.socket = io(environment.apiUrl + '/user-notifications', {
+      query: { accessToken: this.auth.getAccessToken() }
+    })
+
+    return this.socket
+  }
+
+  private formatNotification (notification: UserNotificationServer) {
+    return new UserNotification(notification)
+  }
+}
diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html
new file mode 100644
index 000000000..86379d941
--- /dev/null
+++ b/client/src/app/shared/users/user-notifications.component.html
@@ -0,0 +1,61 @@
+<div *ngIf="componentPagination.totalItems === 0" class="no-notification" i18n>You don't have notifications.</div>
+
+<div class="notifications" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()">
+  <div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }">
+
+    <div [ngSwitch]="notification.type">
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION">
+        {{ notification.video.channel.displayName }} published a <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">new video</a>
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO">
+        Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been unblacklisted
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.BLACKLIST_ON_MY_VIDEO">
+        Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been blacklisted
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS">
+        <a (click)="markAsRead(notification)" [routerLink]="notification.videoAbuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoAbuse.video.name }}</a>
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_COMMENT_ON_MY_VIDEO">
+        {{ notification.comment.account.displayName }} commented your video <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">{{ notification.comment.video.name }}</a>
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_PUBLISHED">
+        Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been published
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_SUCCESS">
+        <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">Your video import</a> {{ notification.videoImportIdentifier }} succeeded
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_ERROR">
+        <a (click)="markAsRead(notification)" [routerLink]="notification.videoImportUrl">Your video import</a> {{ notification.videoImportIdentifier }} failed
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_USER_REGISTRATION">
+        User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }} registered</a> on your instance
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_FOLLOW">
+        <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.actorFollow.follower.displayName }}</a> is following
+
+        <ng-container *ngIf="notification.actorFollow.following.type === 'channel'">
+          your channel {{ notification.actorFollow.following.displayName }}
+        </ng-container>
+        <ng-container *ngIf="notification.actorFollow.following.type === 'account'">your account</ng-container>
+      </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.COMMENT_MENTION">
+        {{ notification.comment.account.displayName }} mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a>
+      </ng-container>
+    </div>
+
+    <div i18n title="Mark as read" class="mark-as-read">
+      <div class="glyphicon glyphicon-ok" (click)="markAsRead(notification)"></div>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
new file mode 100644
index 000000000..0493b10d9
--- /dev/null
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -0,0 +1,30 @@
+.notification {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: inherit;
+  padding: 15px 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
+
+  .mark-as-read {
+    min-width: 35px;
+
+    .glyphicon {
+      display: none;
+      cursor: pointer;
+      color: rgba(20, 20, 20, 0.5)
+    }
+  }
+
+  &.unread {
+    background-color: rgba(0, 0, 0, 0.05);
+
+    &:hover .mark-as-read .glyphicon {
+      display: block;
+
+      &:hover {
+        color: rgba(20, 20, 20, 0.8);
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/users/user-notifications.component.ts b/client/src/app/shared/users/user-notifications.component.ts
new file mode 100644
index 000000000..682116226
--- /dev/null
+++ b/client/src/app/shared/users/user-notifications.component.ts
@@ -0,0 +1,82 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { UserNotificationService } from '@app/shared/users/user-notification.service'
+import { UserNotificationType } from '../../../../../shared'
+import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
+import { Notifier } from '@app/core'
+import { UserNotification } from '@app/shared/users/user-notification.model'
+
+@Component({
+  selector: 'my-user-notifications',
+  templateUrl: 'user-notifications.component.html',
+  styleUrls: [ 'user-notifications.component.scss' ]
+})
+export class UserNotificationsComponent implements OnInit {
+  @Input() ignoreLoadingBar = false
+  @Input() infiniteScroll = true
+
+  notifications: UserNotification[] = []
+
+  // So we can access it in the template
+  UserNotificationType = UserNotificationType
+
+  componentPagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 10,
+    totalItems: null
+  }
+
+  constructor (
+    private userNotificationService: UserNotificationService,
+    private notifier: Notifier
+  ) { }
+
+  ngOnInit () {
+    this.loadMoreNotifications()
+  }
+
+  loadMoreNotifications () {
+    this.userNotificationService.listMyNotifications(this.componentPagination, undefined, this.ignoreLoadingBar)
+        .subscribe(
+          result => {
+            this.notifications = this.notifications.concat(result.data)
+            this.componentPagination.totalItems = result.total
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+  onNearOfBottom () {
+    if (this.infiniteScroll === false) return
+
+    this.componentPagination.currentPage++
+
+    if (hasMoreItems(this.componentPagination)) {
+      this.loadMoreNotifications()
+    }
+  }
+
+  markAsRead (notification: UserNotification) {
+    this.userNotificationService.markAsRead(notification)
+        .subscribe(
+          () => {
+            notification.read = true
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+  markAllAsRead () {
+    this.userNotificationService.markAllAsRead()
+        .subscribe(
+          () => {
+            for (const notification of this.notifications) {
+              notification.read = true
+            }
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+}
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index 3663a7b61..c15f1de8c 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -1,4 +1,4 @@
-import { hasUserRight, User as UserServerModel, UserRight, UserRole, VideoChannel } from '../../../../../shared'
+import { hasUserRight, User as UserServerModel, UserNotificationSetting, UserRight, UserRole, VideoChannel } from '../../../../../shared'
 import { NSFWPolicyType } from '../../../../../shared/models/videos/nsfw-policy.type'
 import { Account } from '@app/shared/account/account.model'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
@@ -24,6 +24,8 @@ export class User implements UserServerModel {
   blocked: boolean
   blockedReason?: string
 
+  notificationSettings?: UserNotificationSetting
+
   constructor (hash: Partial<UserServerModel>) {
     this.id = hash.id
     this.username = hash.username
@@ -41,6 +43,8 @@ export class User implements UserServerModel {
     this.blocked = hash.blocked
     this.blockedReason = hash.blockedReason
 
+    this.notificationSettings = hash.notificationSettings
+
     if (hash.account !== undefined) {
       this.account = new Account(hash.account)
     }
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 957c17bbf..dc62fe5ae 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
@@ -4,7 +4,7 @@ import { ConfirmService, Notifier } from '@app/core'
 import { Subscription } from 'rxjs'
 import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
 import { AuthService } from '../../../core/auth'
-import { ComponentPagination } from '../../../shared/rest/component-pagination.model'
+import { ComponentPagination, hasMoreItems } from '../../../shared/rest/component-pagination.model'
 import { User } from '../../../shared/users'
 import { VideoSortField } from '../../../shared/video/sort-field.type'
 import { VideoDetails } from '../../../shared/video/video-details.model'
@@ -165,22 +165,11 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
   onNearOfBottom () {
     this.componentPagination.currentPage++
 
-    if (this.hasMoreComments()) {
+    if (hasMoreItems(this.componentPagination)) {
       this.loadMoreComments()
     }
   }
 
-  private hasMoreComments () {
-    // No results
-    if (this.componentPagination.totalItems === 0) return false
-
-    // Not loaded yet
-    if (!this.componentPagination.totalItems) return true
-
-    const maxPage = this.componentPagination.totalItems / this.componentPagination.itemsPerPage
-    return maxPage > this.componentPagination.currentPage
-  }
-
   private deleteLocalCommentThread (parentComment: VideoCommentThreadTree, commentToDelete: VideoComment) {
     for (const commentChild of parentComment.children) {
       if (commentChild.comment.id === commentToDelete.id) {
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
index 77a20cfe1..7f413836b 100644
--- a/client/src/sass/include/_bootstrap-variables.scss
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -31,4 +31,5 @@ $input-focus-border-color: #ced4da;
 $nav-pills-link-active-bg: #F0F0F0;
 $nav-pills-link-active-color: #000;
 
-$zindex-dropdown: 10000;
\ No newline at end of file
+$zindex-dropdown: 10000;
+$zindex-popover: 10000;
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 05db2a2cb..58a6a0004 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -326,6 +326,8 @@ p-toast {
 
     .notification-block {
       display: flex;
+      align-items: center;
+      padding: 5px;
 
       .message {
         flex-grow: 1;
@@ -336,12 +338,12 @@ p-toast {
 
         p {
           font-size: 15px;
+          margin-bottom: 0;
         }
       }
 
       .glyphicon {
         font-size: 32px;
-        margin-top: 15px;
         margin-right: 5px;
       }
     }