17 files changed, 41 insertions, 30 deletions

diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts
index 1a9bf5171..9856aac9e 100644
--- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts
+++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts
@@ -56,7 +56,7 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni
   show () {
     this.closingModal = false
 
-    this.openedModal = this.modalService.open(this.modal, { keyboard: false })
+    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false })
   }
 
   hide () {
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index e40649d95..6d72e5765 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -29,7 +29,7 @@
               <tag-input
                 [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
                 i18n-placeholder placeholder="+ Tag" i18n-secondaryPlaceholder secondaryPlaceholder="Enter a new tag"
-                formControlName="tags" maxItems="5" modelAsStrings="true"
+                formControlName="tags" [maxItems]="5" [modelAsStrings]="true"
               ></tag-input>
             </div>
 
@@ -44,7 +44,7 @@
                 </ng-template>
               </my-help>
 
-              <my-markdown-textarea truncate="250" formControlName="description" markdownVideo="true"></my-markdown-textarea>
+              <my-markdown-textarea [truncate]="250" formControlName="description" [markdownVideo]="true"></my-markdown-textarea>
 
               <div *ngIf="formErrors.description" class="form-error">
                 {{ formErrors.description }}
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
index 39b6daa93..1357d607c 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.module.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'
 import { TagInputModule } from 'ngx-chips'
 import { SharedModule } from '../../../shared/'
 import { VideoEditComponent } from './video-edit.component'
-import { CalendarModule } from 'primeng/components/calendar/calendar'
+import { CalendarModule } from 'primeng/calendar'
 import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
 
 @NgModule({
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
index 74e1e755b..e47624dd6 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
@@ -25,7 +25,7 @@ import { scrollToTop } from '@app/shared/misc/utils'
 export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate {
   @Output() firstStepDone = new EventEmitter<string>()
   @Output() firstStepError = new EventEmitter<void>()
-  @ViewChild('torrentfileInput', { static: false }) torrentfileInput: ElementRef<HTMLInputElement>
+  @ViewChild('torrentfileInput') torrentfileInput: ElementRef<HTMLInputElement>
 
   magnetUri = ''
 
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
index aa87f9581..efdd284e8 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
@@ -27,7 +27,7 @@ import { scrollToTop } from '@app/shared/misc/utils'
 export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {
   @Output() firstStepDone = new EventEmitter<string>()
   @Output() firstStepError = new EventEmitter<void>()
-  @ViewChild('videofileInput', { static: false }) videofileInput: ElementRef<HTMLInputElement>
+  @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement>
 
   // So that it can be accessed in the template
   readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts
index 401d8a08f..30ab08ea0 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -12,9 +12,9 @@ import { ServerConfig } from '@shared/models'
   styleUrls: [ './video-add.component.scss' ]
 })
 export class VideoAddComponent implements OnInit, CanComponentDeactivate {
-  @ViewChild('videoUpload', { static: false }) videoUpload: VideoUploadComponent
-  @ViewChild('videoImportUrl', { static: false }) videoImportUrl: VideoImportUrlComponent
-  @ViewChild('videoImportTorrent', { static: false }) videoImportTorrent: VideoImportTorrentComponent
+  @ViewChild('videoUpload') videoUpload: VideoUploadComponent
+  @ViewChild('videoImportUrl') videoImportUrl: VideoImportUrlComponent
+  @ViewChild('videoImportTorrent') videoImportTorrent: VideoImportTorrentComponent
 
   secondStepType: 'upload' | 'import-url' | 'import-torrent'
   videoName: string
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
index 1be96ad9e..a8c432653 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
@@ -25,7 +25,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
   @Input() parentComments: VideoComment[]
   @Input() focusOnInit = false
 
-  @Output() commentCreated = new EventEmitter<VideoCommentCreate>()
+  @Output() commentCreated = new EventEmitter<VideoComment>()
   @Output() cancel = new EventEmitter()
 
   @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
@@ -96,7 +96,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
     this.addingComment = true
 
     const commentCreate: VideoCommentCreate = this.form.value
-    let obs: Observable<any>
+    let obs: Observable<VideoComment>
 
     if (this.parentComment) {
       obs = this.addCommentReply(commentCreate)
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-thread-tree.model.ts b/client/src/app/videos/+video-watch/comment/video-comment-thread-tree.model.ts
new file mode 100644
index 000000000..1566d7369
--- /dev/null
+++ b/client/src/app/videos/+video-watch/comment/video-comment-thread-tree.model.ts
@@ -0,0 +1,7 @@
+import { VideoCommentThreadTree as VideoCommentThreadTreeServerModel } from '../../../../../../shared/models/videos/video-comment.model'
+import { VideoComment } from '@app/videos/+video-watch/comment/video-comment.model'
+
+export class VideoCommentThreadTree implements VideoCommentThreadTreeServerModel {
+  comment: VideoComment
+  children: VideoCommentThreadTree[]
+}
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 61f9335d1..f7eca45fd 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
@@ -1,6 +1,5 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'
 import { User, UserRight } from '../../../../../../shared/models/users'
-import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
 import { AuthService } from '@app/core/auth'
 import { AccountService } from '@app/shared/account/account.service'
 import { Video } from '@app/shared/video/video.model'
@@ -10,6 +9,7 @@ import { Account } from '@app/shared/account/account.model'
 import { Notifier } from '@app/core'
 import { UserService } from '@app/shared'
 import { Actor } from '@app/shared/actor/actor.model'
+import { VideoCommentThreadTree } from '@app/videos/+video-watch/comment/video-comment-thread-tree.model'
 
 @Component({
   selector: 'my-video-comment',
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.model.ts b/client/src/app/videos/+video-watch/comment/video-comment.model.ts
index aaeb0ea9c..171fc4acc 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.model.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.model.ts
@@ -1,5 +1,5 @@
 import { Account as AccountInterface } from '../../../../../../shared/models/actors'
-import { VideoComment as VideoCommentServerModel } from '../../../../../../shared/models/videos/video-comment.model'
+import { VideoComment as VideoCommentServerModel, VideoCommentCreate } from '../../../../../../shared/models/videos/video-comment.model'
 import { Actor } from '@app/shared/actor/actor.model'
 import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
 
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.service.ts b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
index a81e5236a..0b0715390 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.service.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
@@ -7,13 +7,14 @@ import { FeedFormat, ResultList } from '../../../../../../shared/models'
 import {
   VideoComment as VideoCommentServerModel,
   VideoCommentCreate,
-  VideoCommentThreadTree
+  VideoCommentThreadTree as VideoCommentThreadTreeServerModel
 } from '../../../../../../shared/models/videos/video-comment.model'
 import { environment } from '../../../../environments/environment'
 import { RestExtractor, RestService } from '../../../shared/rest'
 import { ComponentPaginationLight } from '../../../shared/rest/component-pagination.model'
 import { CommentSortField } from '../../../shared/video/sort-field.type'
 import { VideoComment } from './video-comment.model'
+import { VideoCommentThreadTree } from '@app/videos/+video-watch/comment/video-comment-thread-tree.model'
 
 @Injectable()
 export class VideoCommentService {
@@ -76,9 +77,9 @@ export class VideoCommentService {
     const url = `${VideoCommentService.BASE_VIDEO_URL + videoId}/comment-threads/${threadId}`
 
     return this.authHttp
-               .get(url)
+               .get<VideoCommentThreadTreeServerModel>(url)
                .pipe(
-                 map(tree => this.extractVideoCommentTree(tree as VideoCommentThreadTree)),
+                 map(tree => this.extractVideoCommentTree(tree)),
                  catchError(err => this.restExtractor.handleError(err))
                )
   }
@@ -138,12 +139,12 @@ export class VideoCommentService {
     return { data: comments, total: totalComments }
   }
 
-  private extractVideoCommentTree (tree: VideoCommentThreadTree) {
-    if (!tree) return tree
+  private extractVideoCommentTree (tree: VideoCommentThreadTreeServerModel) {
+    if (!tree) return tree as VideoCommentThreadTree
 
     tree.comment = new VideoComment(tree.comment)
     tree.children.forEach(c => this.extractVideoCommentTree(c))
 
-    return tree
+    return tree as VideoCommentThreadTree
   }
 }
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 974c61d6c..750c09c47 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
@@ -1,8 +1,7 @@
-import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild, Output, EventEmitter } from '@angular/core'
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { ConfirmService, Notifier } from '@app/core'
 import { Subject, Subscription } from 'rxjs'
-import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
 import { AuthService } from '../../../core/auth'
 import { ComponentPagination, hasMoreItems } from '../../../shared/rest/component-pagination.model'
 import { User } from '../../../shared/users'
@@ -13,6 +12,7 @@ import { VideoCommentService } from './video-comment.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { Syndication } from '@app/shared/video/syndication.model'
 import { HooksService } from '@app/core/plugins/hooks.service'
+import { VideoCommentThreadTree } from '@app/videos/+video-watch/comment/video-comment-thread-tree.model'
 
 @Component({
   selector: 'my-video-comments',
@@ -20,7 +20,7 @@ import { HooksService } from '@app/core/plugins/hooks.service'
   styleUrls: ['./video-comments.component.scss']
 })
 export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
-  @ViewChild('commentHighlightBlock', { static: false }) commentHighlightBlock: ElementRef
+  @ViewChild('commentHighlightBlock') commentHighlightBlock: ElementRef
   @Input() video: VideoDetails
   @Input() user: User
 
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html
index 549a9f30e..593dd8529 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.html
@@ -42,7 +42,7 @@
         <ngb-tab i18n-title title="QR-Code" id="qrcode">
           <ng-template ngbTabContent>
             <div class="tab-content">
-              <qrcode [qrdata]="getVideoUrl()" size="256" level="Q"></qrcode>
+              <qrcode [qrdata]="getVideoUrl()" [size]="256" level="Q"></qrcode>
             </div>
           </ng-template>
         </ngb-tab>
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts
index a2b38b3a0..5109bcd11 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts
@@ -1,8 +1,6 @@
 import { Component, ElementRef, Input, ViewChild } from '@angular/core'
-import { Notifier } from '@app/core'
 import { VideoDetails } from '../../../shared/video/video-details.model'
 import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { NgbModal, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap'
 import { VideoCaption } from '@shared/models'
 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
@@ -74,7 +72,7 @@ export class VideoShareComponent {
       controls: true
     }
 
-    this.modalService.open(this.modal)
+    this.modalService.open(this.modal, { centered: true })
   }
 
   getVideoIframeCode () {
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 b56a51fbf..0058172f2 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,7 @@ export class VideoSupportComponent {
   ) { }
 
   show () {
-    this.modalService.open(this.modal)
+    this.modalService.open(this.modal, { centered: true })
 
     this.markdownService.enhancedMarkdownToHTML(this.video.support)
       .then(r => this.videoHTMLSupport = r)
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index bc3a3ffdd..a382777f5 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -188,6 +188,11 @@
           <span class="video-attribute-value">{{ video.privacy.label }}</span>
         </div>
 
+        <div *ngIf="video.isLocal === false" class="video-attribute">
+          <span i18n class="video-attribute-label">Origin instance</span>
+          <a class="video-attribute-value" target="_blank" rel="noopener noreferrer" [href]="video.originInstanceUrl">{{ video.originInstanceHost }}</a>
+        </div>
+
         <div *ngIf="!!video.originallyPublishedAt" class="video-attribute">
           <span i18n class="video-attribute-label">Originally published</span>
           <span class="video-attribute-value">{{ video.originallyPublishedAt | date: 'dd MMMM yyyy' }}</span>
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 e09e44809..ee3deb5e9 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -47,9 +47,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
 
   @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
-  @ViewChild('videoShareModal', { static: false }) videoShareModal: VideoShareComponent
-  @ViewChild('videoSupportModal', { static: false }) videoSupportModal: VideoSupportComponent
-  @ViewChild('subscribeButton', { static: false }) subscribeButton: SubscribeButtonComponent
+  @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
+  @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
+  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
 
   player: any
   playerElement: HTMLVideoElement