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