11 files changed, 115 insertions, 32 deletions

diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
index e7441e4c1..9f252f299 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
@@ -12,9 +12,10 @@
 
     <button
       *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
-      class="btn btn-outline-secondary" i18n-title title="Copy"
+      class="btn btn-outline-secondary text-uppercase" i18n-title title="Copy"
     >
-      <span class="glyphicon glyphicon-copy"></span>
+      <span class="glyphicon glyphicon-duplicate"></span>
+      Copy
     </button>
   </div>
 </div>
diff --git a/client/src/app/shared/shared-forms/select/select-options.component.ts b/client/src/app/shared/shared-forms/select/select-options.component.ts
index 2890670e5..8482b9dea 100644
--- a/client/src/app/shared/shared-forms/select/select-options.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-options.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Input } from '@angular/core'
+import { Component, forwardRef, HostListener, Input } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { SelectOptionsItem } from '../../../../types/select-options-item.model'
 
@@ -26,6 +26,13 @@ export class SelectOptionsComponent implements ControlValueAccessor {
 
   propagateChange = (_: any) => { /* empty */ }
 
+  // Allow plugins to update our value
+  @HostListener('change', [ '$event.target' ])
+  handleChange (event: any) {
+    this.writeValue(event.value)
+    this.onModelChange()
+  }
+
   writeValue (id: number | string) {
     this.selectedId = id
   }
diff --git a/client/src/app/shared/shared-main/angular/autofocus.directive.ts b/client/src/app/shared/shared-main/angular/autofocus.directive.ts
new file mode 100644
index 000000000..5f087d79d
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/autofocus.directive.ts
@@ -0,0 +1,12 @@
+import { AfterViewInit, Directive, ElementRef } from '@angular/core'
+
+@Directive({
+  selector: '[autofocus]'
+})
+export class AutofocusDirective implements AfterViewInit {
+  constructor (private host: ElementRef) { }
+
+  ngAfterViewInit () {
+    this.host.nativeElement.focus()
+  }
+}
diff --git a/client/src/app/shared/shared-main/angular/index.ts b/client/src/app/shared/shared-main/angular/index.ts
index 29f8b3650..8ea47bb33 100644
--- a/client/src/app/shared/shared-main/angular/index.ts
+++ b/client/src/app/shared/shared-main/angular/index.ts
@@ -1,3 +1,4 @@
+export * from './autofocus.directive'
 export * from './bytes.pipe'
 export * from './duration-formatter.pipe'
 export * from './from-now.pipe'
diff --git a/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts b/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
index 3ddaffbdf..4fe3b964d 100644
--- a/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
+++ b/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
@@ -27,7 +27,9 @@ export class AuthInterceptor implements HttpInterceptor {
                  catchError((err: HttpErrorResponse) => {
                    if (err.status === HttpStatusCode.UNAUTHORIZED_401 && err.error && err.error.code === 'invalid_token') {
                      return this.handleTokenExpired(req, next)
-                   } else if (err.status === HttpStatusCode.UNAUTHORIZED_401) {
+                   }
+
+                   if (err.status === HttpStatusCode.UNAUTHORIZED_401) {
                      return this.handleNotAuthenticated(err)
                    }
 
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 9d550996d..3e21d491a 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -19,6 +19,7 @@ import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { AccountService, ActorAvatarInfoComponent, VideoAvatarChannelComponent } from './account'
 import {
+  AutofocusDirective,
   BytesPipe,
   DurationFormatterPipe,
   FromNowPipe,
@@ -71,6 +72,7 @@ import { VideoChannelService } from './video-channel'
     NumberFormatterPipe,
     BytesPipe,
     DurationFormatterPipe,
+    AutofocusDirective,
 
     InfiniteScrollerDirective,
     PeerTubeTemplateDirective,
@@ -125,6 +127,7 @@ import { VideoChannelService } from './video-channel'
     BytesPipe,
     NumberFormatterPipe,
     DurationFormatterPipe,
+    AutofocusDirective,
 
     InfiniteScrollerDirective,
     PeerTubeTemplateDirective,
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 265af8d55..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
@@ -4,7 +4,7 @@
   <div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }" (click)="markAsRead(notification)">
 
     <ng-container [ngSwitch]="notification.type">
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION">
+      <ng-container *ngSwitchCase="1"> <!-- UserNotificationType.NEW_VIDEO_FROM_SUBSCRIPTION -->
         <ng-container *ngIf="notification.video; then hasVideo; else noVideo"></ng-container>
 
         <ng-template #hasVideo>
@@ -26,7 +26,7 @@
         </ng-template>
       </ng-container>
 
-      <ng-container *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO">
+      <ng-container *ngSwitchCase="5"> <!-- UserNotificationType.UNBLACKLIST_ON_MY_VIDEO -->
         <my-global-icon iconName="undo" aria-hidden="true"></my-global-icon>
 
         <div class="message" i18n>
@@ -34,7 +34,7 @@
         </div>
       </ng-container>
 
-      <ng-container *ngSwitchCase="UserNotificationType.BLACKLIST_ON_MY_VIDEO">
+      <ng-container *ngSwitchCase="4"> <!-- UserNotificationType.BLACKLIST_ON_MY_VIDEO -->
         <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
 
         <div class="message" i18n>
@@ -42,7 +42,7 @@
         </div>
       </ng-container>
 
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_ABUSE_FOR_MODERATORS">
+      <ng-container *ngSwitchCase="3"> <!-- UserNotificationType.NEW_ABUSE_FOR_MODERATORS -->
         <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
 
         <div class="message" *ngIf="notification.videoUrl" i18n>
@@ -63,7 +63,7 @@
         </div>
       </ng-container>
 
-      <ng-container *ngSwitchCase="UserNotificationType.ABUSE_STATE_CHANGE">
+      <ng-container *ngSwitchCase="15"> <!-- UserNotificationType.ABUSE_STATE_CHANGE -->
         <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
 
         <div class="message" i18n>
@@ -73,7 +73,7 @@
         </div>
       </ng-container>
 
-      <ng-container *ngSwitchCase="UserNotificationType.ABUSE_NEW_MESSAGE">
+      <ng-container *ngSwitchCase="16"> <!-- UserNotificationType.ABUSE_NEW_MESSAGE -->
         <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
 
         <div class="message" i18n>
@@ -81,7 +81,7 @@
         </div>
       </ng-container>
 
-      <ng-container *ngSwitchCase="UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS">
+      <ng-container *ngSwitchCase="12"> <!-- UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS -->
         <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
 
         <div class="message" i18n>
@@ -89,7 +89,7 @@
         </div>
       </ng-container>
 
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_COMMENT_ON_MY_VIDEO">
+      <ng-container *ngSwitchCase="2">
         <ng-container *ngIf="notification.comment">
           <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
             <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
@@ -109,7 +109,7 @@
         </ng-container>
       </ng-container>
 
-      <ng-container *ngSwitchCase="UserNotificationType.MY_VIDEO_PUBLISHED">
+      <ng-container *ngSwitchCase="6"> <!-- UserNotificationType.MY_VIDEO_PUBLISHED -->
         <my-global-icon iconName="film" aria-hidden="true"></my-global-icon>
 
         <div class="message" i18n>
@@ -117,7 +117,7 @@
         </div>
       </ng-container>
 
-      <ng-container *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_SUCCESS">
+      <ng-container *ngSwitchCase="7"> <!-- UserNotificationType.MY_VIDEO_IMPORT_SUCCESS -->
         <my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon>
 
         <div class="message" i18n>
@@ -125,7 +125,7 @@
         </div>
       </ng-container>
 
-      <ng-container *ngSwitchCase="UserNotificationType.MY_VIDEO_IMPORT_ERROR">
+      <ng-container *ngSwitchCase="8"> <!-- UserNotificationType.MY_VIDEO_IMPORT_ERROR -->
         <my-global-icon iconName="cloud-error" aria-hidden="true"></my-global-icon>
 
         <div class="message" i18n>
@@ -133,7 +133,7 @@
         </div>
       </ng-container>
 
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_USER_REGISTRATION">
+      <ng-container *ngSwitchCase="9"> <!-- UserNotificationType.NEW_USER_REGISTRATION -->
         <my-global-icon iconName="user-add" aria-hidden="true"></my-global-icon>
 
         <div class="message" i18n>
@@ -141,7 +141,7 @@
         </div>
       </ng-container>
 
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_FOLLOW">
+      <ng-container *ngSwitchCase="10"> <!-- UserNotificationType.NEW_FOLLOW -->
         <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
           <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.actorFollow.follower.avatarUrl" />
         </a>
@@ -154,7 +154,7 @@
         </div>
       </ng-container>
 
-      <ng-container *ngSwitchCase="UserNotificationType.COMMENT_MENTION">
+      <ng-container *ngSwitchCase="11">
         <ng-container *ngIf="notification.comment">
           <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">
             <img alt="" aria-labelledby="avatar" class="avatar" [src]="notification.comment.account.avatarUrl" />
@@ -174,7 +174,7 @@
         </ng-container>
       </ng-container>
 
-      <ng-container *ngSwitchCase="UserNotificationType.NEW_INSTANCE_FOLLOWER">
+      <ng-container *ngSwitchCase="13"> <!-- UserNotificationType.NEW_INSTANCE_FOLLOWER -->
         <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
 
         <div class="message" i18n>
@@ -183,7 +183,7 @@
         </div>
       </ng-container>
 
-      <ng-container *ngSwitchCase="UserNotificationType.AUTO_INSTANCE_FOLLOWING">
+      <ng-container *ngSwitchCase="14"> <!-- UserNotificationType.AUTO_INSTANCE_FOLLOWING -->
         <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
 
         <div class="message" i18n>
@@ -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 387c49d94..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
@@ -21,9 +21,6 @@ export class UserNotificationsComponent implements OnInit {
   notifications: UserNotification[] = []
   sortField = 'createdAt'
 
-  // So we can access it in the template
-  UserNotificationType = UserNotificationType
-
   componentPagination: ComponentPagination
 
   onDataSubject = new Subject<any[]>()
@@ -48,7 +45,7 @@ export class UserNotificationsComponent implements OnInit {
   }
 
   loadNotifications (reset?: boolean) {
-    this.userNotificationService.listMyNotifications({
+    const options = {
       pagination: this.componentPagination,
       ignoreLoadingBar: this.ignoreLoadingBar,
       sort: {
@@ -56,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)
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index 4608e93e7..0e659fbe2 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -36,7 +36,7 @@
         <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
         <div class="input-group-append" *ngIf="!isConfidentialVideo()">
           <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
-            <span class="glyphicon glyphicon-copy"></span>
+            <span class="glyphicon glyphicon-duplicate"></span>
           </button>
         </div>
       </div>
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.ts b/client/src/app/shared/shared-video-miniature/video-download.component.ts
index 90f4daf7c..e0b7b51ff 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.ts
@@ -1,7 +1,9 @@
 import { mapValues, pick } from 'lodash-es'
+import { pipe } from 'rxjs'
+import { tap } from 'rxjs/operators'
 import { Component, ElementRef, Inject, LOCALE_ID, ViewChild } from '@angular/core'
-import { AuthService, Notifier } from '@app/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { AuthService, HooksService, Notifier } from '@app/core'
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import { VideoCaption, VideoFile, VideoPrivacy } from '@shared/models'
 import { BytesPipe, NumberFormatterPipe, VideoDetails, VideoService } from '../shared-main'
 
@@ -16,7 +18,7 @@ type FileMetadata = { [key: string]: { label: string, value: string }}
 export class VideoDownloadComponent {
   @ViewChild('modal', { static: true }) modal: ElementRef
 
-  downloadType: 'direct' | 'torrent' = 'torrent'
+  downloadType: 'direct' | 'torrent' = 'direct'
   resolutionId: number | string = -1
   subtitleLanguageId: string
 
@@ -26,7 +28,7 @@ export class VideoDownloadComponent {
   videoFileMetadataVideoStream: FileMetadata | undefined
   videoFileMetadataAudioStream: FileMetadata | undefined
   videoCaptions: VideoCaption[]
-  activeModal: NgbActiveModal
+  activeModal: NgbModalRef
 
   type: DownloadType = 'video'
 
@@ -38,7 +40,8 @@ export class VideoDownloadComponent {
     private notifier: Notifier,
     private modalService: NgbModal,
     private videoService: VideoService,
-    private auth: AuthService
+    private auth: AuthService,
+    private hooks: HooksService
   ) {
     this.bytesPipe = new BytesPipe()
     this.numbersPipe = new NumberFormatterPipe(this.localeId)
@@ -64,7 +67,12 @@ export class VideoDownloadComponent {
 
     this.resolutionId = this.getVideoFiles()[0].resolution.id
     this.onResolutionIdChange()
+
     if (this.videoCaptions) this.subtitleLanguageId = this.videoCaptions[0].language.id
+
+    this.activeModal.shown.subscribe(() => {
+      this.hooks.runAction('action:modal.video-download.shown', 'common')
+    })
   }
 
   onClose () {
@@ -88,6 +96,7 @@ export class VideoDownloadComponent {
     if (this.videoFile.metadata || !this.videoFile.metadataUrl) return
 
     await this.hydrateMetadataFromMetadataUrl(this.videoFile)
+    if (!this.videoFile.metadata) return
 
     this.videoFileMetadataFormat = this.videoFile
       ? this.getMetadataFormat(this.videoFile.metadata.format)
@@ -201,7 +210,7 @@ export class VideoDownloadComponent {
 
   private hydrateMetadataFromMetadataUrl (file: VideoFile) {
     const observable = this.videoService.getVideoFileMetadata(file.metadataUrl)
-    observable.subscribe(res => file.metadata = res)
+      .pipe(tap(res => file.metadata = res))
 
     return observable.toPromise()
   }