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