client/src/app/shared/shared-share-modal/video-share.component.ts

   1 import { Component, ElementRef, Input, ViewChild } from '@angular/core'
   2 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
   3 import { HooksService, ServerService } from '@app/core'
   4 import { VideoDetails } from '@app/shared/shared-main'
   5 import { VideoPlaylist } from '@app/shared/shared-video-playlist'
   6 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
   7 import { buildVideoOrPlaylistEmbed } from '@root-helpers/video'
   8 import { buildPlaylistLink, buildVideoLink, decoratePlaylistLink, decorateVideoLink } from '@shared/core-utils'
   9 import { VideoCaption, VideoPlaylistPrivacy, VideoPrivacy } from '@shared/models'
  10
  11 type Customizations = {
  12   startAtCheckbox: boolean
  13   startAt: number
  14
  15   stopAtCheckbox: boolean
  16   stopAt: number
  17
  18   subtitleCheckbox: boolean
  19   subtitle: string
  20
  21   loop: boolean
  22   originUrl: boolean
  23   autoplay: boolean
  24   muted: boolean
  25
  26   embedP2P: boolean
  27   onlyEmbedUrl: boolean
  28   title: boolean
  29   warningTitle: boolean
  30   controlBar: boolean
  31   peertubeLink: boolean
  32   responsive: boolean
  33
  34   includeVideoInPlaylist: boolean
  35 }
  36
  37 type TabId = 'url' | 'qrcode' | 'embed'
  38
  39 @Component({
  40   selector: 'my-video-share',
  41   templateUrl: './video-share.component.html',
  42   styleUrls: [ './video-share.component.scss' ]
  43 })
  44 export class VideoShareComponent {
  45   @ViewChild('modal', { static: true }) modal: ElementRef
  46
  47   @Input() video: VideoDetails = null
  48   @Input() videoCaptions: VideoCaption[] = []
  49   @Input() playlist: VideoPlaylist = null
  50   @Input() playlistPosition: number = null
  51
  52   activeVideoId: TabId = 'url'
  53   activePlaylistId: TabId = 'url'
  54
  55   customizations: Customizations
  56   isAdvancedCustomizationCollapsed = true
  57
  58   videoUrl: string
  59   playlistUrl: string
  60
  61   videoEmbedUrl: string
  62   playlistEmbedUrl: string
  63
  64   videoEmbedHTML: string
  65   videoEmbedSafeHTML: SafeHtml
  66   playlistEmbedHTML: string
  67   playlistEmbedSafeHTML: SafeHtml
  68
  69   constructor (
  70     private modalService: NgbModal,
  71     private sanitizer: DomSanitizer,
  72     private server: ServerService,
  73     private hooks: HooksService
  74   ) { }
  75
  76   show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) {
  77     let subtitle: string
  78     if (this.videoCaptions && this.videoCaptions.length !== 0) {
  79       subtitle = this.videoCaptions[0].language.id
  80     }
  81
  82     this.customizations = new Proxy({
  83       startAtCheckbox: false,
  84       startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0,
  85
  86       stopAtCheckbox: false,
  87       stopAt: this.video?.duration,
  88
  89       subtitleCheckbox: false,
  90       subtitle,
  91
  92       loop: false,
  93       originUrl: false,
  94       autoplay: false,
  95       muted: false,
  96
  97       // Embed options
  98       embedP2P: this.server.getHTMLConfig().defaults.p2p.embed.enabled,
  99       onlyEmbedUrl: false,
 100       title: true,
 101       warningTitle: true,
 102       controlBar: true,
 103       peertubeLink: true,
 104       responsive: false,
 105
 106       includeVideoInPlaylist: false
 107     }, {
 108       set: (target, prop, value) => {
 109         target[prop] = value
 110
 111         if (prop === 'embedP2P') {
 112           // Auto enabled warning title if P2P is enabled
 113           this.customizations.warningTitle = value
 114         }
 115
 116         this.onUpdate()
 117
 118         return true
 119       }
 120     })
 121
 122     this.playlistPosition = currentPlaylistPosition
 123
 124     this.onUpdate()
 125
 126     this.modalService.open(this.modal, { centered: true }).shown.subscribe(() => {
 127       this.hooks.runAction('action:modal.share.shown', 'video-watch', { video: this.video, playlist: this.playlist })
 128     })
 129   }
 130
 131   // ---------------------------------------------------------------------------
 132
 133   getVideoUrl () {
 134     const url = this.customizations.originUrl
 135       ? this.video.url
 136       : buildVideoLink(this.video, window.location.origin)
 137
 138     return this.hooks.wrapFun(
 139       decorateVideoLink,
 140       { url, ...this.getVideoOptions(false) },
 141       'video-watch',
 142       'filter:share.video-url.build.params',
 143       'filter:share.video-url.build.result'
 144     )
 145   }
 146
 147   getVideoEmbedUrl () {
 148     return this.hooks.wrapFun(
 149       decorateVideoLink,
 150       { url: this.video.embedUrl, ...this.getVideoOptions(true) },
 151       'video-watch',
 152       'filter:share.video-embed-url.build.params',
 153       'filter:share.video-embed-url.build.result'
 154     )
 155   }
 156
 157   async getVideoEmbedCode (options: { responsive: boolean }) {
 158     const { responsive } = options
 159     return this.hooks.wrapFun(
 160       buildVideoOrPlaylistEmbed,
 161       { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name, responsive },
 162       'video-watch',
 163       'filter:share.video-embed-code.build.params',
 164       'filter:share.video-embed-code.build.result'
 165     )
 166   }
 167
 168   // ---------------------------------------------------------------------------
 169
 170   getPlaylistUrl () {
 171     const url = buildPlaylistLink(this.playlist)
 172
 173     return this.hooks.wrapFun(
 174       decoratePlaylistLink,
 175       { url, ...this.getPlaylistOptions() },
 176       'video-watch',
 177       'filter:share.video-playlist-url.build.params',
 178       'filter:share.video-playlist-url.build.result'
 179     )
 180   }
 181
 182   getPlaylistEmbedUrl () {
 183     return this.hooks.wrapFun(
 184       decoratePlaylistLink,
 185       { url: this.playlist.embedUrl, ...this.getPlaylistOptions() },
 186       'video-watch',
 187       'filter:share.video-playlist-embed-url.build.params',
 188       'filter:share.video-playlist-embed-url.build.result'
 189     )
 190   }
 191
 192   async getPlaylistEmbedCode (options: { responsive: boolean }) {
 193     const { responsive } = options
 194     return this.hooks.wrapFun(
 195       buildVideoOrPlaylistEmbed,
 196       { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName, responsive },
 197       'video-watch',
 198       'filter:share.video-playlist-embed-code.build.params',
 199       'filter:share.video-playlist-embed-code.build.result'
 200     )
 201   }
 202
 203   // ---------------------------------------------------------------------------
 204
 205   async onUpdate () {
 206     if (this.playlist) {
 207       this.playlistUrl = await this.getPlaylistUrl()
 208       this.playlistEmbedUrl = await this.getPlaylistEmbedUrl()
 209       this.playlistEmbedHTML = await this.getPlaylistEmbedCode({ responsive: this.customizations.responsive })
 210       this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getPlaylistEmbedCode({ responsive: false }))
 211     }
 212
 213     if (this.video) {
 214       this.videoUrl = await this.getVideoUrl()
 215       this.videoEmbedUrl = await this.getVideoEmbedUrl()
 216       this.videoEmbedHTML = await this.getVideoEmbedCode({ responsive: this.customizations.responsive })
 217       this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getVideoEmbedCode({ responsive: false }))
 218     }
 219   }
 220
 221   notSecure () {
 222     return window.location.protocol === 'http:'
 223   }
 224
 225   isInVideoEmbedTab () {
 226     return this.activeVideoId === 'embed'
 227   }
 228
 229   isInPlaylistEmbedTab () {
 230     return this.activePlaylistId === 'embed'
 231   }
 232
 233   isLocalVideo () {
 234     return this.video.isLocal
 235   }
 236
 237   isPrivateVideo () {
 238     return this.video.privacy.id === VideoPrivacy.PRIVATE
 239   }
 240
 241   isPrivatePlaylist () {
 242     return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
 243   }
 244
 245   private getPlaylistOptions (baseUrl?: string) {
 246     return {
 247       baseUrl,
 248
 249       playlistPosition: this.playlistPosition && this.customizations.includeVideoInPlaylist
 250         ? this.playlistPosition
 251         : undefined
 252     }
 253   }
 254
 255   private getVideoOptions (forEmbed: boolean) {
 256     const embedOptions = forEmbed
 257       ? {
 258         title: this.customizations.title,
 259         warningTitle: this.customizations.warningTitle,
 260         controlBar: this.customizations.controlBar,
 261         peertubeLink: this.customizations.peertubeLink,
 262
 263         // If using default value, we don't need to specify it
 264         p2p: this.customizations.embedP2P === this.server.getHTMLConfig().defaults.p2p.embed.enabled
 265           ? undefined
 266           : this.customizations.embedP2P
 267       }
 268       : {}
 269
 270     return {
 271       startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined,
 272       stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined,
 273
 274       subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined,
 275
 276       loop: this.customizations.loop,
 277       autoplay: this.customizations.autoplay,
 278       muted: this.customizations.muted,
 279
 280       ...embedOptions
 281     }
 282   }
 283 }