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

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