Add support button in channel page

6 files changed, 86 insertions, 1 deletions

diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
index c6a63fe6c..bd187a873 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
@@ -46,7 +46,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
     if (hash.ownerAccount) {
       this.ownerAccount = hash.ownerAccount
       this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host)
-      this.ownerAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.ownerAccount)
+      this.ownerAvatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.ownerAccount)
     }
   }
 
diff --git a/client/src/app/shared/shared-support-modal/index.ts b/client/src/app/shared/shared-support-modal/index.ts
new file mode 100644
index 000000000..f41bb4bc2
--- /dev/null
+++ b/client/src/app/shared/shared-support-modal/index.ts
@@ -0,0 +1,3 @@
+export * from './support-modal.component'
+
+export * from './shared-support-modal.module'
diff --git a/client/src/app/shared/shared-support-modal/shared-support-modal.module.ts b/client/src/app/shared/shared-support-modal/shared-support-modal.module.ts
new file mode 100644
index 000000000..1101d5535
--- /dev/null
+++ b/client/src/app/shared/shared-support-modal/shared-support-modal.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core'
+import { SharedFormModule } from '../shared-forms'
+import { SharedGlobalIconModule } from '../shared-icons'
+import { SharedMainModule } from '../shared-main/shared-main.module'
+import { SupportModalComponent } from './support-modal.component'
+
+@NgModule({
+  imports: [
+    SharedMainModule,
+    SharedFormModule,
+    SharedGlobalIconModule
+  ],
+
+  declarations: [
+    SupportModalComponent
+  ],
+
+  exports: [
+    SupportModalComponent
+  ],
+
+  providers: [ ]
+})
+export class SharedSupportModal { }
diff --git a/client/src/app/shared/shared-support-modal/support-modal.component.html b/client/src/app/shared/shared-support-modal/support-modal.component.html
new file mode 100644
index 000000000..4a967987f
--- /dev/null
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.html
@@ -0,0 +1,15 @@
+<ng-template #modal let-hide="close">
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Support {{ displayName }}</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+
+  <div class="modal-body" [innerHTML]="htmlSupport"></div>
+
+  <div class="modal-footer inputs">
+    <input
+      type="button" role="button" i18n-value value="Maybe later" class="action-button action-button-cancel"
+      (click)="hide()" (key.enter)="hide()"
+    >
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/shared-support-modal/support-modal.component.scss b/client/src/app/shared/shared-support-modal/support-modal.component.scss
new file mode 100644
index 000000000..184e09027
--- /dev/null
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.scss
@@ -0,0 +1,3 @@
+.action-button-cancel {
+  margin-right: 0 !important;
+}
diff --git a/client/src/app/shared/shared-support-modal/support-modal.component.ts b/client/src/app/shared/shared-support-modal/support-modal.component.ts
new file mode 100644
index 000000000..ae603c7a8
--- /dev/null
+++ b/client/src/app/shared/shared-support-modal/support-modal.component.ts
@@ -0,0 +1,40 @@
+import { Component, Input, ViewChild } from '@angular/core'
+import { MarkdownService } from '@app/core'
+import { VideoDetails } from '@app/shared/shared-main'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { VideoChannel } from '@shared/models'
+
+@Component({
+  selector: 'my-support-modal',
+  templateUrl: './support-modal.component.html',
+  styleUrls: [ './support-modal.component.scss' ]
+})
+export class SupportModalComponent {
+  @Input() video: VideoDetails = null
+  @Input() videoChannel: VideoChannel = null
+
+  @ViewChild('modal', { static: true }) modal: NgbModal
+
+  htmlSupport = ''
+  displayName = ''
+
+  constructor (
+    private markdownService: MarkdownService,
+    private modalService: NgbModal
+  ) { }
+
+  show () {
+    const modalRef = this.modalService.open(this.modal, { centered: true })
+
+    const support = this.video?.support || this.videoChannel.support
+
+    this.markdownService.enhancedMarkdownToHTML(support)
+      .then(r => this.htmlSupport = r)
+
+    this.displayName = this.video
+      ? this.video.channel.displayName
+      : this.videoChannel.displayName
+
+    return modalRef
+  }
+}