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