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
   9 type Customizations = {
  10   startAtCheckbox: boolean
  11   startAt: number
  12
  13   stopAtCheckbox: boolean
  14   stopAt: number
  15
  16   subtitleCheckbox: boolean
  17   subtitle: string
  18
  19   loop: boolean
  20   autoplay: boolean
  21   muted: boolean
  22   title: boolean
  23   warningTitle: boolean
  24   controls: 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
  38   activeId: 'url' | 'qrcode' | 'embed'
  39   customizations: Customizations
  40   isAdvancedCustomizationCollapsed = true
  41
  42   private currentVideoTimestamp: number
  43
  44   constructor (
  45     private modalService: NgbModal,
  46     private notifier: Notifier,
  47     private i18n: I18n
  48   ) { }
  49
  50   show (currentVideoTimestamp?: number) {
  51     this.currentVideoTimestamp = currentVideoTimestamp
  52
  53     let subtitle: string
  54     if (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       autoplay: false,
  70       muted: false,
  71
  72       // Embed options
  73       title: true,
  74       warningTitle: true,
  75       controls: true
  76     }
  77
  78     this.modalService.open(this.modal)
  79   }
  80
  81   getVideoIframeCode () {
  82     const options = this.getOptions(this.video.embedUrl)
  83
  84     const embedUrl = buildVideoLink(options)
  85     return buildVideoEmbed(embedUrl)
  86   }
  87
  88   getVideoUrl () {
  89     const options = this.getOptions()
  90
  91     return buildVideoLink(options)
  92   }
  93
  94   notSecure () {
  95     return window.location.protocol === 'http:'
  96   }
  97
  98   activateCopiedMessage () {
  99     this.notifier.success(this.i18n('Copied'))
 100   }
 101
 102   onTabChange (event: NgbTabChangeEvent) {
 103     this.activeId = event.nextId as any
 104   }
 105
 106   isInEmbedTab () {
 107     return this.activeId === 'embed'
 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     }
 127   }
 128 }