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

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