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'
8 type Customizations = {
9 startAtCheckbox: boolean
12 stopAtCheckbox: boolean
15 subtitleCheckbox: boolean
28 type TabId = 'url' | 'qrcode' | 'embed'
31 selector: 'my-video-share',
32 templateUrl: './video-share.component.html',
33 styleUrls: [ './video-share.component.scss' ]
35 export class VideoShareComponent {
36 @ViewChild('modal', { static: true }) modal: ElementRef
38 @Input() video: VideoDetails = null
39 @Input() videoCaptions: VideoCaption[] = []
40 @Input() playlist: VideoPlaylist = null
41 @Input() playlistPosition: number = null
43 activeVideoId: TabId = 'url'
44 activePlaylistId: TabId = 'url'
46 customizations: Customizations
47 isAdvancedCustomizationCollapsed = true
48 includeVideoInPlaylist = false
50 constructor (private modalService: NgbModal) { }
52 show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) {
54 if (this.videoCaptions && this.videoCaptions.length !== 0) {
55 subtitle = this.videoCaptions[0].language.id
58 this.customizations = {
59 startAtCheckbox: false,
60 startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0,
62 stopAtCheckbox: false,
63 stopAt: this.video?.duration,
65 subtitleCheckbox: false,
80 this.playlistPosition = currentPlaylistPosition
82 this.modalService.open(this.modal, { centered: true })
85 getVideoIframeCode () {
86 const options = this.getVideoOptions(this.video.embedUrl)
88 const embedUrl = buildVideoLink(options)
89 return buildVideoOrPlaylistEmbed(embedUrl, this.video.name)
92 getPlaylistIframeCode () {
93 const options = this.getPlaylistOptions(this.playlist.embedUrl)
95 const embedUrl = buildPlaylistLink(options)
96 return buildVideoOrPlaylistEmbed(embedUrl, this.playlist.displayName)
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)
104 return buildVideoLink(options)
108 const base = window.location.origin + '/videos/watch/playlist/' + this.playlist.uuid
110 if (!this.includeVideoInPlaylist) return base
112 return base + '?playlistPosition=' + this.playlistPosition
116 return window.location.protocol === 'http:'
119 isVideoInEmbedTab () {
120 return this.activeVideoId === 'embed'
124 return this.video.isLocal
127 private getPlaylistOptions (baseUrl?: string) {
131 playlistPosition: this.playlistPosition || undefined
135 private getVideoOptions (baseUrl?: string) {
139 startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined,
140 stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined,
142 subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined,
144 loop: this.customizations.loop,
145 autoplay: this.customizations.autoplay,
146 muted: this.customizations.muted,
148 title: this.customizations.title,
149 warningTitle: this.customizations.warningTitle,
150 controls: this.customizations.controls,
151 peertubeLink: this.customizations.peertubeLink