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