3 files changed, 53 insertions, 2 deletions

diff --git a/client/src/app/shared/shared-main/users/user-notification.model.ts b/client/src/app/shared/shared-main/users/user-notification.model.ts
index 1211995fd..88a4811da 100644
--- a/client/src/app/shared/shared-main/users/user-notification.model.ts
+++ b/client/src/app/shared/shared-main/users/user-notification.model.ts
@@ -6,6 +6,7 @@ import {
   AbuseState,
   ActorInfo,
   FollowState,
+  PluginType,
   UserNotification as UserNotificationServer,
   UserNotificationType,
   UserRight,
@@ -74,20 +75,40 @@ export class UserNotification implements UserNotificationServer {
     }
   }
 
+  plugin?: {
+    name: string
+    type: PluginType
+    latestVersion: string
+  }
+
+  peertube?: {
+    latestVersion: string
+  }
+
   createdAt: string
   updatedAt: string
 
   // Additional fields
   videoUrl?: string
   commentUrl?: any[]
+
   abuseUrl?: string
   abuseQueryParams?: { [id: string]: string } = {}
+
   videoAutoBlacklistUrl?: string
+
   accountUrl?: string
+
   videoImportIdentifier?: string
   videoImportUrl?: string
+
   instanceFollowUrl?: string
 
+  peertubeVersionLink?: string
+
+  pluginUrl?: string
+  pluginQueryParams?: { [id: string]: string } = {}
+
   constructor (hash: UserNotificationServer, user: AuthUser) {
     this.id = hash.id
     this.type = hash.type
@@ -114,6 +135,9 @@ export class UserNotification implements UserNotificationServer {
       this.actorFollow = hash.actorFollow
       if (this.actorFollow) this.setAccountAvatarUrl(this.actorFollow.follower)
 
+      this.plugin = hash.plugin
+      this.peertube = hash.peertube
+
       this.createdAt = hash.createdAt
       this.updatedAt = hash.updatedAt
 
@@ -197,6 +221,15 @@ export class UserNotification implements UserNotificationServer {
         case UserNotificationType.AUTO_INSTANCE_FOLLOWING:
           this.instanceFollowUrl = '/admin/follows/following-list'
           break
+
+        case UserNotificationType.NEW_PEERTUBE_VERSION:
+          this.peertubeVersionLink = 'https://joinpeertube.org/news'
+          break
+
+        case UserNotificationType.NEW_PLUGIN_VERSION:
+          this.pluginUrl = `/admin/plugins/list-installed`
+          this.pluginQueryParams.pluginType = this.plugin.type + ''
+          break
       }
     } catch (err) {
       this.type = null
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.html b/client/src/app/shared/shared-main/users/user-notifications.component.html
index 5e0e2f8e8..325f0eaae 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.html
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.html
@@ -191,6 +191,22 @@
         </div>
       </ng-container>
 
+      <ng-container *ngSwitchCase="17"> <!-- UserNotificationType.NEW_PLUGIN_VERSION -->
+        <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
+
+        <div class="message" i18n>
+          <a (click)="markAsRead(notification)" [routerLink]="notification.pluginUrl" [queryParams]="notification.pluginQueryParams">A new version of the plugin/theme {{ notification.plugin.name }}</a> is available: {{ notification.plugin.latestVersion }}
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="18"> <!-- UserNotificationType.NEW_PEERTUBE_VERSION -->
+        <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
+
+        <div class="message" i18n>
+            <a (click)="markAsRead(notification)" [href]="notification.peertubeVersionLink" target="_blank" rel="noopener noreferer">A new version of PeerTube</a> is available: {{ notification.peertube.latestVersion }}
+        </div>
+      </ng-container>
+
       <ng-container *ngSwitchDefault>
         <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
 
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.ts b/client/src/app/shared/shared-main/users/user-notifications.component.ts
index 2f6ed061a..d7c722355 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.ts
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.ts
@@ -45,7 +45,7 @@ export class UserNotificationsComponent implements OnInit {
   }
 
   loadNotifications (reset?: boolean) {
-    this.userNotificationService.listMyNotifications({
+    const options = {
       pagination: this.componentPagination,
       ignoreLoadingBar: this.ignoreLoadingBar,
       sort: {
@@ -53,7 +53,9 @@ export class UserNotificationsComponent implements OnInit {
         // if we order by creation date, we want DESC. all other fields are ASC (like unread).
         order: this.sortField === 'createdAt' ? -1 : 1
       }
-    })
+    }
+
+    this.userNotificationService.listMyNotifications(options)
         .subscribe(
           result => {
             this.notifications = reset ? result.data : this.notifications.concat(result.data)