Bumped to version v5.2.1

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-share-modal / video-share.component.ts

diff --git a/client/src/app/shared/shared-share-modal/video-share.component.ts b/client/src/app/shared/shared-share-modal/video-share.component.ts
index 6c0d4a0398a2dcf7c71070ecb9af28e1ed401893..32f900f154c96e06ca759d33890cfb7dae51785d 100644 (file)
--- a/client/src/app/shared/shared-share-modal/video-share.component.ts
+++ b/client/src/app/shared/shared-share-modal/video-share.component.ts
@@ -1,6 +1,6 @@
 import { Component, ElementRef, Input, ViewChild } from '@angular/core'
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
-import { ServerService } from '@app/core'
+import { HooksService, ServerService } from '@app/core'
 import { VideoDetails } from '@app/shared/shared-main'
 import { VideoPlaylist } from '@app/shared/shared-video-playlist'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
@@ -27,8 +27,11 @@ type Customizations = {
   onlyEmbedUrl: boolean
   title: boolean
   warningTitle: boolean
-  controls: boolean
+  controlBar: boolean
   peertubeLink: boolean
+  responsive: boolean
+
+  includeVideoInPlaylist: boolean
 }
 
 type TabId = 'url' | 'qrcode' | 'embed'
@@ -51,15 +54,23 @@ export class VideoShareComponent {
 
   customizations: Customizations
   isAdvancedCustomizationCollapsed = true
-  includeVideoInPlaylist = false
 
-  playlistEmbedHTML: SafeHtml
-  videoEmbedHTML: SafeHtml
+  videoUrl: string
+  playlistUrl: string
+
+  videoEmbedUrl: string
+  playlistEmbedUrl: string
+
+  videoEmbedHTML: string
+  videoEmbedSafeHTML: SafeHtml
+  playlistEmbedHTML: string
+  playlistEmbedSafeHTML: SafeHtml
 
   constructor (
     private modalService: NgbModal,
     private sanitizer: DomSanitizer,
-    private server: ServerService
+    private server: ServerService,
+    private hooks: HooksService
   ) { }
 
   show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) {
@@ -88,18 +99,22 @@ export class VideoShareComponent {
       onlyEmbedUrl: false,
       title: true,
       warningTitle: true,
-      controls: true,
-      peertubeLink: true
+      controlBar: true,
+      peertubeLink: true,
+      responsive: false,
+
+      includeVideoInPlaylist: false
     }, {
       set: (target, prop, value) => {
-        target[prop] = value
+        // FIXME: typings
+        (target as any)[prop] = value
 
         if (prop === 'embedP2P') {
           // Auto enabled warning title if P2P is enabled
           this.customizations.warningTitle = value
         }
 
-        this.updateEmbedCode()
+        this.onUpdate()
 
         return true
       }
@@ -107,50 +122,101 @@ export class VideoShareComponent {
 
     this.playlistPosition = currentPlaylistPosition
 
-    this.updateEmbedCode()
-
-    this.modalService.open(this.modal, { centered: true })
-  }
-
-  getVideoIframeCode () {
-    return buildVideoOrPlaylistEmbed(this.getVideoEmbedUrl(), this.video.name)
-  }
-
-  getVideoEmbedUrl () {
-    return decorateVideoLink({ url: this.video.embedUrl, ...this.getVideoOptions(true) })
-  }
+    this.onUpdate()
 
-  getPlaylistEmbedUrl () {
-    return decoratePlaylistLink({ url: this.playlist.embedUrl, ...this.getPlaylistOptions() })
+    this.modalService.open(this.modal, { centered: true }).shown.subscribe(() => {
+      this.hooks.runAction('action:modal.share.shown', 'video-watch', { video: this.video, playlist: this.playlist })
+    })
   }
 
-  getPlaylistIframeCode () {
-    return buildVideoOrPlaylistEmbed(this.getPlaylistEmbedUrl(), this.playlist.displayName)
-  }
+  // ---------------------------------------------------------------------------
 
   getVideoUrl () {
     const url = this.customizations.originUrl
       ? this.video.url
       : buildVideoLink(this.video, window.location.origin)
 
-    return decorateVideoLink({
-      url,
+    return this.hooks.wrapFun(
+      decorateVideoLink,
+      { url, ...this.getVideoOptions(false) },
+      'video-watch',
+      'filter:share.video-url.build.params',
+      'filter:share.video-url.build.result'
+    )
+  }
 
-      ...this.getVideoOptions(false)
-    })
+  getVideoEmbedUrl () {
+    return this.hooks.wrapFun(
+      decorateVideoLink,
+      { url: this.video.embedUrl, ...this.getVideoOptions(true) },
+      'video-watch',
+      'filter:share.video-embed-url.build.params',
+      'filter:share.video-embed-url.build.result'
+    )
   }
 
+  async getVideoEmbedCode (options: { responsive: boolean }) {
+    const { responsive } = options
+    return this.hooks.wrapFun(
+      buildVideoOrPlaylistEmbed,
+      { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name, responsive },
+      'video-watch',
+      'filter:share.video-embed-code.build.params',
+      'filter:share.video-embed-code.build.result'
+    )
+  }
+
+  // ---------------------------------------------------------------------------
+
   getPlaylistUrl () {
     const url = buildPlaylistLink(this.playlist)
-    if (!this.includeVideoInPlaylist) return url
 
-    return decoratePlaylistLink({ url, playlistPosition: this.playlistPosition })
+    return this.hooks.wrapFun(
+      decoratePlaylistLink,
+      { url, ...this.getPlaylistOptions() },
+      'video-watch',
+      'filter:share.video-playlist-url.build.params',
+      'filter:share.video-playlist-url.build.result'
+    )
+  }
+
+  getPlaylistEmbedUrl () {
+    return this.hooks.wrapFun(
+      decoratePlaylistLink,
+      { url: this.playlist.embedUrl, ...this.getPlaylistOptions() },
+      'video-watch',
+      'filter:share.video-playlist-embed-url.build.params',
+      'filter:share.video-playlist-embed-url.build.result'
+    )
+  }
+
+  async getPlaylistEmbedCode (options: { responsive: boolean }) {
+    const { responsive } = options
+    return this.hooks.wrapFun(
+      buildVideoOrPlaylistEmbed,
+      { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName, responsive },
+      'video-watch',
+      'filter:share.video-playlist-embed-code.build.params',
+      'filter:share.video-playlist-embed-code.build.result'
+    )
   }
 
-  updateEmbedCode () {
-    if (this.playlist) this.playlistEmbedHTML = this.sanitizer.bypassSecurityTrustHtml(this.getPlaylistIframeCode())
+  // ---------------------------------------------------------------------------
 
-    if (this.video) this.videoEmbedHTML = this.sanitizer.bypassSecurityTrustHtml(this.getVideoIframeCode())
+  async onUpdate () {
+    if (this.playlist) {
+      this.playlistUrl = await this.getPlaylistUrl()
+      this.playlistEmbedUrl = await this.getPlaylistEmbedUrl()
+      this.playlistEmbedHTML = await this.getPlaylistEmbedCode({ responsive: this.customizations.responsive })
+      this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getPlaylistEmbedCode({ responsive: false }))
+    }
+
+    if (this.video) {
+      this.videoUrl = await this.getVideoUrl()
+      this.videoEmbedUrl = await this.getVideoEmbedUrl()
+      this.videoEmbedHTML = await this.getVideoEmbedCode({ responsive: this.customizations.responsive })
+      this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getVideoEmbedCode({ responsive: false }))
+    }
   }
 
   notSecure () {
@@ -181,7 +247,9 @@ export class VideoShareComponent {
     return {
       baseUrl,
 
-      playlistPosition: this.playlistPosition || undefined
+      playlistPosition: this.playlistPosition && this.customizations.includeVideoInPlaylist
+        ? this.playlistPosition
+        : undefined
     }
   }
 
@@ -190,7 +258,7 @@ export class VideoShareComponent {
       ? {
         title: this.customizations.title,
         warningTitle: this.customizations.warningTitle,
-        controls: this.customizations.controls,
+        controlBar: this.customizations.controlBar,
         peertubeLink: this.customizations.peertubeLink,
 
         // If using default value, we don't need to specify it