Prevent invalid end watch section warnings

[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 2346f03e4c71ce79e54f9853293327a1f16ac628..1b69aa2d05e5ad6e56b51281506e86d51738697b 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'
@@ -24,10 +24,14 @@ type Customizations = {
   muted: boolean
 
   embedP2P: boolean
+  onlyEmbedUrl: boolean
   title: boolean
   warningTitle: boolean
-  controls: boolean
+  controlBar: boolean
   peertubeLink: boolean
+  responsive: boolean
+
+  includeVideoInPlaylist: boolean
 }
 
 type TabId = 'url' | 'qrcode' | 'embed'
@@ -50,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) {
@@ -82,13 +94,16 @@ export class VideoShareComponent {
       autoplay: false,
       muted: false,
 
-      embedP2P: this.server.getHTMLConfig().defaults.p2p.embed.enabled,
-
       // Embed options
+      embedP2P: this.server.getHTMLConfig().defaults.p2p.embed.enabled,
+      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
@@ -98,7 +113,7 @@ export class VideoShareComponent {
           this.customizations.warningTitle = value
         }
 
-        this.updateEmbedCode()
+        this.onUpdate()
 
         return true
       }
@@ -106,56 +121,115 @@ export class VideoShareComponent {
 
     this.playlistPosition = currentPlaylistPosition
 
-    this.updateEmbedCode()
+    this.onUpdate()
 
-    this.modalService.open(this.modal, { centered: true })
-  }
-
-  getVideoIframeCode () {
-    const embedUrl = decorateVideoLink({ url: this.video.embedUrl, ...this.getVideoOptions(true) })
-
-    return buildVideoOrPlaylistEmbed(embedUrl, this.video.name)
+    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 () {
-    const embedUrl = decoratePlaylistLink({ url: this.playlist.embedUrl, ...this.getPlaylistOptions() })
-
-    return buildVideoOrPlaylistEmbed(embedUrl, 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'
+    )
   }
 
-  updateEmbedCode () {
-    if (this.playlist) this.playlistEmbedHTML = this.sanitizer.bypassSecurityTrustHtml(this.getPlaylistIframeCode())
+  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'
+    )
+  }
 
-    if (this.video) this.videoEmbedHTML = this.sanitizer.bypassSecurityTrustHtml(this.getVideoIframeCode())
+  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'
+    )
+  }
+
+  // ---------------------------------------------------------------------------
+
+  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 () {
     return window.location.protocol === 'http:'
   }
 
-  isVideoInEmbedTab () {
+  isInVideoEmbedTab () {
     return this.activeVideoId === 'embed'
   }
 
+  isInPlaylistEmbedTab () {
+    return this.activePlaylistId === 'embed'
+  }
+
   isLocalVideo () {
     return this.video.isLocal
   }
@@ -172,7 +246,9 @@ export class VideoShareComponent {
     return {
       baseUrl,
 
-      playlistPosition: this.playlistPosition || undefined
+      playlistPosition: this.playlistPosition && this.customizations.includeVideoInPlaylist
+        ? this.playlistPosition
+        : undefined
     }
   }
 
@@ -181,7 +257,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