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

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