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   @Input() playlistPosition: number = null
  41
  42   activeVideoId: TabId = 'url'
  43   activePlaylistId: TabId = 'url'
  44
  45   customizations: Customizations
  46   isAdvancedCustomizationCollapsed = true
  47   includeVideoInPlaylist = false
  48
  49   constructor (private modalService: NgbModal) { }
  50
  51   show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) {
  52     let subtitle: string
  53     if (this.videoCaptions && 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       peertubeLink: true
  76     }
  77
  78     this.playlistPosition = currentPlaylistPosition
  79
  80     this.modalService.open(this.modal, { centered: true })
  81   }
  82
  83   getVideoIframeCode () {
  84     const options = this.getVideoOptions(this.video.embedUrl)
  85
  86     const embedUrl = buildVideoLink(options)
  87     return buildVideoOrPlaylistEmbed(embedUrl)
  88   }
  89
  90   getPlaylistIframeCode () {
  91     const options = this.getPlaylistOptions(this.playlist.embedUrl)
  92
  93     const embedUrl = buildPlaylistLink(options)
  94     return buildVideoOrPlaylistEmbed(embedUrl)
  95   }
  96
  97   getVideoUrl () {
  98     const baseUrl = window.location.origin + '/videos/watch/' + this.video.uuid
  99     const options = this.getVideoOptions(baseUrl)
 100
 101     return buildVideoLink(options)
 102   }
 103
 104   getPlaylistUrl () {
 105     const base = window.location.origin + '/videos/watch/playlist/' + this.playlist.uuid
 106
 107     if (!this.includeVideoInPlaylist) return base
 108
 109     return base + '?playlistPosition=' + this.playlistPosition
 110   }
 111
 112   notSecure () {
 113     return window.location.protocol === 'http:'
 114   }
 115
 116   isVideoInEmbedTab () {
 117     return this.activeVideoId === 'embed'
 118   }
 119
 120   private getPlaylistOptions (baseUrl?: string) {
 121     return {
 122       baseUrl,
 123
 124       playlistPosition: this.playlistPosition || undefined
 125     }
 126   }
 127
 128   private getVideoOptions (baseUrl?: string) {
 129     return {
 130       baseUrl,
 131
 132       startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined,
 133       stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined,
 134
 135       subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined,
 136
 137       loop: this.customizations.loop,
 138       autoplay: this.customizations.autoplay,
 139       muted: this.customizations.muted,
 140
 141       title: this.customizations.title,
 142       warningTitle: this.customizations.warningTitle,
 143       controls: this.customizations.controls,
 144       peertubeLink: this.customizations.peertubeLink
 145     }
 146   }
 147 }