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         // FIXME: typings
 110         (target as any)[prop] = value
 111
 112         if (prop === 'embedP2P') {
 113           // Auto enabled warning title if P2P is enabled
 114           this.customizations.warningTitle = value
 115         }
 116
 117         this.onUpdate()
 118
 119         return true
 120       }
 121     })
 122
 123     this.playlistPosition = currentPlaylistPosition
 124
 125     this.onUpdate()
 126
 127     this.modalService.open(this.modal, { centered: true }).shown.subscribe(() => {
 128       this.hooks.runAction('action:modal.share.shown', 'video-watch', { video: this.video, playlist: this.playlist })
 129     })
 130   }
 131
 132   // ---------------------------------------------------------------------------
 133
 134   getVideoUrl () {
 135     const url = this.customizations.originUrl
 136       ? this.video.url
 137       : buildVideoLink(this.video, window.location.origin)
 138
 139     return this.hooks.wrapFun(
 140       decorateVideoLink,
 141       { url, ...this.getVideoOptions(false) },
 142       'video-watch',
 143       'filter:share.video-url.build.params',
 144       'filter:share.video-url.build.result'
 145     )
 146   }
 147
 148   getVideoEmbedUrl () {
 149     return this.hooks.wrapFun(
 150       decorateVideoLink,
 151       { url: this.video.embedUrl, ...this.getVideoOptions(true) },
 152       'video-watch',
 153       'filter:share.video-embed-url.build.params',
 154       'filter:share.video-embed-url.build.result'
 155     )
 156   }
 157
 158   async getVideoEmbedCode (options: { responsive: boolean }) {
 159     const { responsive } = options
 160     return this.hooks.wrapFun(
 161       buildVideoOrPlaylistEmbed,
 162       { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name, responsive },
 163       'video-watch',
 164       'filter:share.video-embed-code.build.params',
 165       'filter:share.video-embed-code.build.result'
 166     )
 167   }
 168
 169   // ---------------------------------------------------------------------------
 170
 171   getPlaylistUrl () {
 172     const url = buildPlaylistLink(this.playlist)
 173
 174     return this.hooks.wrapFun(
 175       decoratePlaylistLink,
 176       { url, ...this.getPlaylistOptions() },
 177       'video-watch',
 178       'filter:share.video-playlist-url.build.params',
 179       'filter:share.video-playlist-url.build.result'
 180     )
 181   }
 182
 183   getPlaylistEmbedUrl () {
 184     return this.hooks.wrapFun(
 185       decoratePlaylistLink,
 186       { url: this.playlist.embedUrl, ...this.getPlaylistOptions() },
 187       'video-watch',
 188       'filter:share.video-playlist-embed-url.build.params',
 189       'filter:share.video-playlist-embed-url.build.result'
 190     )
 191   }
 192
 193   async getPlaylistEmbedCode (options: { responsive: boolean }) {
 194     const { responsive } = options
 195     return this.hooks.wrapFun(
 196       buildVideoOrPlaylistEmbed,
 197       { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName, responsive },
 198       'video-watch',
 199       'filter:share.video-playlist-embed-code.build.params',
 200       'filter:share.video-playlist-embed-code.build.result'
 201     )
 202   }
 203
 204   // ---------------------------------------------------------------------------
 205
 206   async onUpdate () {
 207     if (this.playlist) {
 208       this.playlistUrl = await this.getPlaylistUrl()
 209       this.playlistEmbedUrl = await this.getPlaylistEmbedUrl()
 210       this.playlistEmbedHTML = await this.getPlaylistEmbedCode({ responsive: this.customizations.responsive })
 211       this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getPlaylistEmbedCode({ responsive: false }))
 212     }
 213
 214     if (this.video) {
 215       this.videoUrl = await this.getVideoUrl()
 216       this.videoEmbedUrl = await this.getVideoEmbedUrl()
 217       this.videoEmbedHTML = await this.getVideoEmbedCode({ responsive: this.customizations.responsive })
 218       this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getVideoEmbedCode({ responsive: false }))
 219     }
 220   }
 221
 222   notSecure () {
 223     return window.location.protocol === 'http:'
 224   }
 225
 226   isInVideoEmbedTab () {
 227     return this.activeVideoId === 'embed'
 228   }
 229
 230   isInPlaylistEmbedTab () {
 231     return this.activePlaylistId === 'embed'
 232   }
 233
 234   isLocalVideo () {
 235     return this.video.isLocal
 236   }
 237
 238   isPrivateVideo () {
 239     return this.video.privacy.id === VideoPrivacy.PRIVATE
 240   }
 241
 242   isPrivatePlaylist () {
 243     return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
 244   }
 245
 246   private getPlaylistOptions (baseUrl?: string) {
 247     return {
 248       baseUrl,
 249
 250       playlistPosition: this.playlistPosition && this.customizations.includeVideoInPlaylist
 251         ? this.playlistPosition
 252         : undefined
 253     }
 254   }
 255
 256   private getVideoOptions (forEmbed: boolean) {
 257     const embedOptions = forEmbed
 258       ? {
 259         title: this.customizations.title,
 260         warningTitle: this.customizations.warningTitle,
 261         controlBar: this.customizations.controlBar,
 262         peertubeLink: this.customizations.peertubeLink,
 263
 264         // If using default value, we don't need to specify it
 265         p2p: this.customizations.embedP2P === this.server.getHTMLConfig().defaults.p2p.embed.enabled
 266           ? undefined
 267           : this.customizations.embedP2P
 268       }
 269       : {}
 270
 271     return {
 272       startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined,
 273       stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined,
 274
 275       subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined,
 276
 277       loop: this.customizations.loop,
 278       autoplay: this.customizations.autoplay,
 279       muted: this.customizations.muted,
 280
 281       ...embedOptions
 282     }
 283   }
 284 }