client/src/app/shared/shared-share-modal/video-share.component.ts

   1 import { Component, ElementRef, Input, ViewChild } from '@angular/core'
   2 import { VideoDetails } from '@app/shared/shared-main'
   3 import { VideoPlaylist } from '@app/shared/shared-video-playlist'
   4 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
   5 import { VideoCaption } from '@shared/models'
   6 import { buildPlaylistLink, buildVideoLink, buildVideoOrPlaylistEmbed } from '../../../assets/player/utils'
   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   originUrl: boolean
  20   autoplay: boolean
  21   muted: boolean
  22   title: boolean
  23   warningTitle: boolean
  24   controls: boolean
  25   peertubeLink: boolean
  26 }
  27
  28 type TabId = 'url' | 'qrcode' | 'embed'
  29
  30 @Component({
  31   selector: 'my-video-share',
  32   templateUrl: './video-share.component.html',
  33   styleUrls: [ './video-share.component.scss' ]
  34 })
  35 export class VideoShareComponent {
  36   @ViewChild('modal', { static: true }) modal: ElementRef
  37
  38   @Input() video: VideoDetails = null
  39   @Input() videoCaptions: VideoCaption[] = []
  40   @Input() playlist: VideoPlaylist = null
  41   @Input() playlistPosition: number = null
  42
  43   activeVideoId: TabId = 'url'
  44   activePlaylistId: TabId = 'url'
  45
  46   customizations: Customizations
  47   isAdvancedCustomizationCollapsed = true
  48   includeVideoInPlaylist = false
  49
  50   constructor (private modalService: NgbModal) { }
  51
  52   show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) {
  53     let subtitle: string
  54     if (this.videoCaptions && 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       originUrl: false,
  70       autoplay: false,
  71       muted: false,
  72
  73       // Embed options
  74       title: true,
  75       warningTitle: true,
  76       controls: true,
  77       peertubeLink: true
  78     }
  79
  80     this.playlistPosition = currentPlaylistPosition
  81
  82     this.modalService.open(this.modal, { centered: true })
  83   }
  84
  85   getVideoIframeCode () {
  86     const options = this.getVideoOptions(this.video.embedUrl)
  87
  88     const embedUrl = buildVideoLink(options)
  89     return buildVideoOrPlaylistEmbed(embedUrl, this.video.name)
  90   }
  91
  92   getPlaylistIframeCode () {
  93     const options = this.getPlaylistOptions(this.playlist.embedUrl)
  94
  95     const embedUrl = buildPlaylistLink(options)
  96     return buildVideoOrPlaylistEmbed(embedUrl, this.playlist.displayName)
  97   }
  98
  99   getVideoUrl () {
 100     let baseUrl = this.customizations.originUrl ? this.video.originInstanceUrl : window.location.origin
 101     baseUrl += '/videos/watch/' + this.video.uuid
 102     const options = this.getVideoOptions(baseUrl)
 103
 104     return buildVideoLink(options)
 105   }
 106
 107   getPlaylistUrl () {
 108     const base = window.location.origin + '/videos/watch/playlist/' + this.playlist.uuid
 109
 110     if (!this.includeVideoInPlaylist) return base
 111
 112     return base + '?playlistPosition=' + this.playlistPosition
 113   }
 114
 115   notSecure () {
 116     return window.location.protocol === 'http:'
 117   }
 118
 119   isVideoInEmbedTab () {
 120     return this.activeVideoId === 'embed'
 121   }
 122
 123   isLocalVideo () {
 124     return this.video.isLocal
 125   }
 126
 127   private getPlaylistOptions (baseUrl?: string) {
 128     return {
 129       baseUrl,
 130
 131       playlistPosition: this.playlistPosition || undefined
 132     }
 133   }
 134
 135   private getVideoOptions (baseUrl?: string) {
 136     return {
 137       baseUrl,
 138
 139       startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined,
 140       stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined,
 141
 142       subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined,
 143
 144       loop: this.customizations.loop,
 145       autoplay: this.customizations.autoplay,
 146       muted: this.customizations.muted,
 147
 148       title: this.customizations.title,
 149       warningTitle: this.customizations.warningTitle,
 150       controls: this.customizations.controls,
 151       peertubeLink: this.customizations.peertubeLink
 152     }
 153   }
 154 }