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 { 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   controls: boolean
  31   peertubeLink: boolean
  32 }
  33
  34 type TabId = 'url' | 'qrcode' | 'embed'
  35
  36 @Component({
  37   selector: 'my-video-share',
  38   templateUrl: './video-share.component.html',
  39   styleUrls: [ './video-share.component.scss' ]
  40 })
  41 export class VideoShareComponent {
  42   @ViewChild('modal', { static: true }) modal: ElementRef
  43
  44   @Input() video: VideoDetails = null
  45   @Input() videoCaptions: VideoCaption[] = []
  46   @Input() playlist: VideoPlaylist = null
  47   @Input() playlistPosition: number = null
  48
  49   activeVideoId: TabId = 'url'
  50   activePlaylistId: TabId = 'url'
  51
  52   customizations: Customizations
  53   isAdvancedCustomizationCollapsed = true
  54   includeVideoInPlaylist = false
  55
  56   playlistEmbedHTML: SafeHtml
  57   videoEmbedHTML: SafeHtml
  58
  59   constructor (
  60     private modalService: NgbModal,
  61     private sanitizer: DomSanitizer,
  62     private server: ServerService
  63   ) { }
  64
  65   show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) {
  66     let subtitle: string
  67     if (this.videoCaptions && this.videoCaptions.length !== 0) {
  68       subtitle = this.videoCaptions[0].language.id
  69     }
  70
  71     this.customizations = new Proxy({
  72       startAtCheckbox: false,
  73       startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0,
  74
  75       stopAtCheckbox: false,
  76       stopAt: this.video?.duration,
  77
  78       subtitleCheckbox: false,
  79       subtitle,
  80
  81       loop: false,
  82       originUrl: false,
  83       autoplay: false,
  84       muted: false,
  85
  86       // Embed options
  87       embedP2P: this.server.getHTMLConfig().defaults.p2p.embed.enabled,
  88       onlyEmbedUrl: false,
  89       title: true,
  90       warningTitle: true,
  91       controls: true,
  92       peertubeLink: true
  93     }, {
  94       set: (target, prop, value) => {
  95         target[prop] = value
  96
  97         if (prop === 'embedP2P') {
  98           // Auto enabled warning title if P2P is enabled
  99           this.customizations.warningTitle = value
 100         }
 101
 102         this.updateEmbedCode()
 103
 104         return true
 105       }
 106     })
 107
 108     this.playlistPosition = currentPlaylistPosition
 109
 110     this.updateEmbedCode()
 111
 112     this.modalService.open(this.modal, { centered: true })
 113   }
 114
 115   getVideoIframeCode () {
 116     return buildVideoOrPlaylistEmbed(this.getVideoEmbedUrl(), this.video.name)
 117   }
 118
 119   getVideoEmbedUrl () {
 120     return decorateVideoLink({ url: this.video.embedUrl, ...this.getVideoOptions(true) })
 121   }
 122
 123   getPlaylistEmbedUrl () {
 124     return decoratePlaylistLink({ url: this.playlist.embedUrl, ...this.getPlaylistOptions() })
 125   }
 126
 127   getPlaylistIframeCode () {
 128     return buildVideoOrPlaylistEmbed(this.getPlaylistEmbedUrl(), this.playlist.displayName)
 129   }
 130
 131   getVideoUrl () {
 132     const url = this.customizations.originUrl
 133       ? this.video.url
 134       : buildVideoLink(this.video, window.location.origin)
 135
 136     return decorateVideoLink({
 137       url,
 138
 139       ...this.getVideoOptions(false)
 140     })
 141   }
 142
 143   getPlaylistUrl () {
 144     const url = buildPlaylistLink(this.playlist)
 145     if (!this.includeVideoInPlaylist) return url
 146
 147     return decoratePlaylistLink({ url, playlistPosition: this.playlistPosition })
 148   }
 149
 150   updateEmbedCode () {
 151     if (this.playlist) this.playlistEmbedHTML = this.sanitizer.bypassSecurityTrustHtml(this.getPlaylistIframeCode())
 152
 153     if (this.video) this.videoEmbedHTML = this.sanitizer.bypassSecurityTrustHtml(this.getVideoIframeCode())
 154   }
 155
 156   notSecure () {
 157     return window.location.protocol === 'http:'
 158   }
 159
 160   isInVideoEmbedTab () {
 161     return this.activeVideoId === 'embed'
 162   }
 163
 164   isInPlaylistEmbedTab () {
 165     return this.activePlaylistId === 'embed'
 166   }
 167
 168   isLocalVideo () {
 169     return this.video.isLocal
 170   }
 171
 172   isPrivateVideo () {
 173     return this.video.privacy.id === VideoPrivacy.PRIVATE
 174   }
 175
 176   isPrivatePlaylist () {
 177     return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
 178   }
 179
 180   private getPlaylistOptions (baseUrl?: string) {
 181     return {
 182       baseUrl,
 183
 184       playlistPosition: this.playlistPosition || undefined
 185     }
 186   }
 187
 188   private getVideoOptions (forEmbed: boolean) {
 189     const embedOptions = forEmbed
 190       ? {
 191         title: this.customizations.title,
 192         warningTitle: this.customizations.warningTitle,
 193         controls: this.customizations.controls,
 194         peertubeLink: this.customizations.peertubeLink,
 195
 196         // If using default value, we don't need to specify it
 197         p2p: this.customizations.embedP2P === this.server.getHTMLConfig().defaults.p2p.embed.enabled
 198           ? undefined
 199           : this.customizations.embedP2P
 200       }
 201       : {}
 202
 203     return {
 204       startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined,
 205       stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined,
 206
 207       subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined,
 208
 209       loop: this.customizations.loop,
 210       autoplay: this.customizations.autoplay,
 211       muted: this.customizations.muted,
 212
 213       ...embedOptions
 214     }
 215   }
 216 }