X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fshared-share-modal%2Fvideo-share.component.ts;h=32f900f154c96e06ca759d33890cfb7dae51785d;hb=HEAD;hp=341abdc2b7eb0a8deac72a165db282a4309ba966;hpb=ac27887774e63d99f4e227fbe18846f143cc4b3c;p=github%2FChocobozzz%2FPeerTube.git

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 341abdc2b..32f900f15 100644
--- 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,10 +1,12 @@
 import { Component, ElementRef, Input, ViewChild } from '@angular/core'
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
+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'
+import { buildVideoOrPlaylistEmbed } from '@root-helpers/video'
 import { buildPlaylistLink, buildVideoLink, decoratePlaylistLink, decorateVideoLink } from '@shared/core-utils'
-import { VideoCaption } from '@shared/models'
-import { buildVideoOrPlaylistEmbed } from '../../../assets/player/utils'
+import { VideoCaption, VideoPlaylistPrivacy, VideoPrivacy } from '@shared/models'
 
 type Customizations = {
   startAtCheckbox: boolean
@@ -20,10 +22,16 @@ type Customizations = {
   originUrl: boolean
   autoplay: boolean
   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'
@@ -46,9 +54,24 @@ export class VideoShareComponent {
 
   customizations: Customizations
   isAdvancedCustomizationCollapsed = true
-  includeVideoInPlaylist = false
 
-  constructor (private modalService: NgbModal) { }
+  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 hooks: HooksService
+  ) { }
 
   show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) {
     let subtitle: string
@@ -56,7 +79,7 @@ export class VideoShareComponent {
       subtitle = this.videoCaptions[0].language.id
     }
 
-    this.customizations = {
+    this.customizations = new Proxy({
       startAtCheckbox: false,
       startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0,
 
@@ -72,69 +95,179 @@ export class VideoShareComponent {
       muted: false,
 
       // 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,
 
-    this.playlistPosition = currentPlaylistPosition
+      includeVideoInPlaylist: false
+    }, {
+      set: (target, prop, value) => {
+        // FIXME: typings
+        (target as any)[prop] = value
 
-    this.modalService.open(this.modal, { centered: true })
-  }
+        if (prop === 'embedP2P') {
+          // Auto enabled warning title if P2P is enabled
+          this.customizations.warningTitle = value
+        }
 
-  getVideoIframeCode () {
-    const embedUrl = decorateVideoLink({ url: this.video.embedUrl, ...this.getVideoOptions() })
+        this.onUpdate()
 
-    return buildVideoOrPlaylistEmbed(embedUrl, this.video.name)
-  }
+        return true
+      }
+    })
+
+    this.playlistPosition = currentPlaylistPosition
 
-  getPlaylistIframeCode () {
-    const embedUrl = decoratePlaylistLink({ url: this.playlist.embedUrl, ...this.getPlaylistOptions() })
+    this.onUpdate()
 
-    return buildVideoOrPlaylistEmbed(embedUrl, this.playlist.displayName)
+    this.modalService.open(this.modal, { centered: true }).shown.subscribe(() => {
+      this.hooks.runAction('action:modal.share.shown', 'video-watch', { video: this.video, playlist: this.playlist })
+    })
   }
 
+  // ---------------------------------------------------------------------------
+
   getVideoUrl () {
-    const baseUrl = this.customizations.originUrl
-      ? this.video.originInstanceUrl
-      : window.location.origin
+    const url = this.customizations.originUrl
+      ? this.video.url
+      : buildVideoLink(this.video, window.location.origin)
+
+    return this.hooks.wrapFun(
+      decorateVideoLink,
+      { url, ...this.getVideoOptions(false) },
+      'video-watch',
+      'filter:share.video-url.build.params',
+      'filter:share.video-url.build.result'
+    )
+  }
 
-    return decorateVideoLink({
-      url: buildVideoLink(this.video, baseUrl),
+  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'
+    )
+  }
 
-      ...this.getVideoOptions()
-    })
+  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'
+    )
+  }
+
+  // ---------------------------------------------------------------------------
+
+  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
   }
 
+  isPrivateVideo () {
+    return this.video.privacy.id === VideoPrivacy.PRIVATE
+  }
+
+  isPrivatePlaylist () {
+    return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
+  }
+
   private getPlaylistOptions (baseUrl?: string) {
     return {
       baseUrl,
 
-      playlistPosition: this.playlistPosition || undefined
+      playlistPosition: this.playlistPosition && this.customizations.includeVideoInPlaylist
+        ? this.playlistPosition
+        : undefined
     }
   }
 
-  private getVideoOptions () {
+  private getVideoOptions (forEmbed: boolean) {
+    const embedOptions = forEmbed
+      ? {
+        title: this.customizations.title,
+        warningTitle: this.customizations.warningTitle,
+        controlBar: this.customizations.controlBar,
+        peertubeLink: this.customizations.peertubeLink,
+
+        // If using default value, we don't need to specify it
+        p2p: this.customizations.embedP2P === this.server.getHTMLConfig().defaults.p2p.embed.enabled
+          ? undefined
+          : this.customizations.embedP2P
+      }
+      : {}
+
     return {
       startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined,
       stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined,
@@ -145,10 +278,7 @@ export class VideoShareComponent {
       autoplay: this.customizations.autoplay,
       muted: this.customizations.muted,
 
-      title: this.customizations.title,
-      warningTitle: this.customizations.warningTitle,
-      controls: this.customizations.controls,
-      peertubeLink: this.customizations.peertubeLink
+      ...embedOptions
     }
   }
 }