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