client/src/app/+videos/+video-watch/modal/video-share.component.ts

   1 import { Component, ElementRef, Input, ViewChild } from '@angular/core'
   2 import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils'
   3 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
   4 import { VideoCaption } from '@shared/models'
   5 import { VideoDetails } from '@app/shared/shared-main'
   6 import { VideoPlaylist } from '@app/shared/shared-video-playlist'
   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   autoplay: boolean
  20   muted: boolean
  21   title: boolean
  22   warningTitle: boolean
  23   controls: boolean
  24   peertubeLink: boolean
  25 }
  26
  27 @Component({
  28   selector: 'my-video-share',
  29   templateUrl: './video-share.component.html',
  30   styleUrls: [ './video-share.component.scss' ]
  31 })
  32 export class VideoShareComponent {
  33   @ViewChild('modal', { static: true }) modal: ElementRef
  34
  35   @Input() video: VideoDetails = null
  36   @Input() videoCaptions: VideoCaption[] = []
  37   @Input() playlist: VideoPlaylist = null
  38
  39   activeId: 'url' | 'qrcode' | 'embed' = 'url'
  40   customizations: Customizations
  41   isAdvancedCustomizationCollapsed = true
  42   includeVideoInPlaylist = false
  43
  44   constructor (private modalService: NgbModal) { }
  45
  46   show (currentVideoTimestamp?: number) {
  47     let subtitle: string
  48     if (this.videoCaptions.length !== 0) {
  49       subtitle = this.videoCaptions[0].language.id
  50     }
  51
  52     this.customizations = {
  53       startAtCheckbox: false,
  54       startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0,
  55
  56       stopAtCheckbox: false,
  57       stopAt: this.video.duration,
  58
  59       subtitleCheckbox: false,
  60       subtitle,
  61
  62       loop: false,
  63       autoplay: false,
  64       muted: false,
  65
  66       // Embed options
  67       title: true,
  68       warningTitle: true,
  69       controls: true,
  70       peertubeLink: true
  71     }
  72
  73     this.modalService.open(this.modal, { centered: true })
  74   }
  75
  76   getVideoIframeCode () {
  77     const options = this.getOptions(this.video.embedUrl)
  78
  79     const embedUrl = buildVideoLink(options)
  80     return buildVideoEmbed(embedUrl)
  81   }
  82
  83   getVideoUrl () {
  84     const baseUrl = window.location.origin + '/videos/watch/' + this.video.uuid
  85     const options = this.getOptions(baseUrl)
  86
  87     return buildVideoLink(options)
  88   }
  89
  90   getPlaylistUrl () {
  91     const base = window.location.origin + '/videos/watch/playlist/' + this.playlist.uuid
  92
  93     if (!this.includeVideoInPlaylist) return base
  94
  95     return base + '?videoId=' + this.video.uuid
  96   }
  97
  98   notSecure () {
  99     return window.location.protocol === 'http:'
 100   }
 101
 102   isInEmbedTab () {
 103     return this.activeId === 'embed'
 104   }
 105
 106   hasPlaylist () {
 107     return !!this.playlist
 108   }
 109
 110   private getOptions (baseUrl?: string) {
 111     return {
 112       baseUrl,
 113
 114       startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined,
 115       stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined,
 116
 117       subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined,
 118
 119       loop: this.customizations.loop,
 120       autoplay: this.customizations.autoplay,
 121       muted: this.customizations.muted,
 122
 123       title: this.customizations.title,
 124       warningTitle: this.customizations.warningTitle,
 125       controls: this.customizations.controls,
 126       peertubeLink: this.customizations.peertubeLink
 127     }
 128   }
 129 }