1 import { Component, ElementRef, Input, ViewChild } from '@angular/core'
2 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
3 import { HooksService, ServerService } from '@app/core'
4 import { VideoDetails } from '@app/shared/shared-main'
5 import { VideoPlaylist } from '@app/shared/shared-video-playlist'
6 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
7 import { buildVideoOrPlaylistEmbed } from '@root-helpers/video'
8 import { buildPlaylistLink, buildVideoLink, decoratePlaylistLink, decorateVideoLink } from '@shared/core-utils'
9 import { VideoCaption, VideoPlaylistPrivacy, VideoPrivacy } from '@shared/models'
11 type Customizations = {
12 startAtCheckbox: boolean
15 stopAtCheckbox: boolean
18 subtitleCheckbox: boolean
33 includeVideoInPlaylist: boolean
36 type TabId = 'url' | 'qrcode' | 'embed'
39 selector: 'my-video-share',
40 templateUrl: './video-share.component.html',
41 styleUrls: [ './video-share.component.scss' ]
43 export class VideoShareComponent {
44 @ViewChild('modal', { static: true }) modal: ElementRef
46 @Input() video: VideoDetails = null
47 @Input() videoCaptions: VideoCaption[] = []
48 @Input() playlist: VideoPlaylist = null
49 @Input() playlistPosition: number = null
51 activeVideoId: TabId = 'url'
52 activePlaylistId: TabId = 'url'
54 customizations: Customizations
55 isAdvancedCustomizationCollapsed = true
61 playlistEmbedUrl: string
63 videoEmbedHTML: string
64 videoEmbedSafeHTML: SafeHtml
65 playlistEmbedHTML: string
66 playlistEmbedSafeHTML: SafeHtml
69 private modalService: NgbModal,
70 private sanitizer: DomSanitizer,
71 private server: ServerService,
72 private hooks: HooksService
75 show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) {
77 if (this.videoCaptions && this.videoCaptions.length !== 0) {
78 subtitle = this.videoCaptions[0].language.id
81 this.customizations = new Proxy({
82 startAtCheckbox: false,
83 startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0,
85 stopAtCheckbox: false,
86 stopAt: this.video?.duration,
88 subtitleCheckbox: false,
97 embedP2P: this.server.getHTMLConfig().defaults.p2p.embed.enabled,
104 includeVideoInPlaylist: false
106 set: (target, prop, value) => {
109 if (prop === 'embedP2P') {
110 // Auto enabled warning title if P2P is enabled
111 this.customizations.warningTitle = value
120 this.playlistPosition = currentPlaylistPosition
124 this.modalService.open(this.modal, { centered: true }).shown.subscribe(() => {
125 this.hooks.runAction('action:modal.share.shown', 'video-watch', { video: this.video, playlist: this.playlist })
129 // ---------------------------------------------------------------------------
132 const url = this.customizations.originUrl
134 : buildVideoLink(this.video, window.location.origin)
136 return this.hooks.wrapFun(
138 { url, ...this.getVideoOptions(false) },
140 'filter:share.video-url.build.params',
141 'filter:share.video-url.build.result'
145 getVideoEmbedUrl () {
146 return this.hooks.wrapFun(
148 { url: this.video.embedUrl, ...this.getVideoOptions(true) },
150 'filter:share.video-embed-url.build.params',
151 'filter:share.video-embed-url.build.result'
155 async getVideoIframeCode () {
156 return this.hooks.wrapFun(
157 buildVideoOrPlaylistEmbed,
158 { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name },
160 'filter:share.video-embed-code.build.params',
161 'filter:share.video-embed-code.build.result'
165 // ---------------------------------------------------------------------------
168 const url = buildPlaylistLink(this.playlist)
170 return this.hooks.wrapFun(
171 decoratePlaylistLink,
172 { url, ...this.getPlaylistOptions() },
174 'filter:share.video-playlist-url.build.params',
175 'filter:share.video-playlist-url.build.result'
179 getPlaylistEmbedUrl () {
180 return this.hooks.wrapFun(
181 decoratePlaylistLink,
182 { url: this.playlist.embedUrl, ...this.getPlaylistOptions() },
184 'filter:share.video-playlist-embed-url.build.params',
185 'filter:share.video-playlist-embed-url.build.result'
189 async getPlaylistEmbedCode () {
190 return this.hooks.wrapFun(
191 buildVideoOrPlaylistEmbed,
192 { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName },
194 'filter:share.video-playlist-embed-code.build.params',
195 'filter:share.video-playlist-embed-code.build.result'
199 // ---------------------------------------------------------------------------
202 console.log('on update')
205 this.playlistUrl = await this.getPlaylistUrl()
206 this.playlistEmbedUrl = await this.getPlaylistEmbedUrl()
207 this.playlistEmbedHTML = await this.getPlaylistEmbedCode()
208 this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(this.playlistEmbedHTML)
212 this.videoUrl = await this.getVideoUrl()
213 this.videoEmbedUrl = await this.getVideoEmbedUrl()
214 this.videoEmbedHTML = await this.getVideoIframeCode()
215 this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(this.videoEmbedHTML)
220 return window.location.protocol === 'http:'
223 isInVideoEmbedTab () {
224 return this.activeVideoId === 'embed'
227 isInPlaylistEmbedTab () {
228 return this.activePlaylistId === 'embed'
232 return this.video.isLocal
236 return this.video.privacy.id === VideoPrivacy.PRIVATE
239 isPrivatePlaylist () {
240 return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
243 private getPlaylistOptions (baseUrl?: string) {
247 playlistPosition: this.playlistPosition && this.customizations.includeVideoInPlaylist
248 ? this.playlistPosition
253 private getVideoOptions (forEmbed: boolean) {
254 const embedOptions = forEmbed
256 title: this.customizations.title,
257 warningTitle: this.customizations.warningTitle,
258 controlBar: this.customizations.controlBar,
259 peertubeLink: this.customizations.peertubeLink,
261 // If using default value, we don't need to specify it
262 p2p: this.customizations.embedP2P === this.server.getHTMLConfig().defaults.p2p.embed.enabled
264 : this.customizations.embedP2P
269 startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined,
270 stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined,
272 subtitle: this.customizations.subtitleCheckbox ? this.customizations.subtitle : undefined,
274 loop: this.customizations.loop,
275 autoplay: this.customizations.autoplay,
276 muted: this.customizations.muted,