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

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