import { Component, ElementRef, Input, ViewChild } from '@angular/core'
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
+import { HooksService, ServerService } from '@app/core'
import { VideoDetails } from '@app/shared/shared-main'
import { VideoPlaylist } from '@app/shared/shared-video-playlist'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { buildVideoOrPlaylistEmbed } from '@root-helpers/video'
import { buildPlaylistLink, buildVideoLink, decoratePlaylistLink, decorateVideoLink } from '@shared/core-utils'
-import { VideoCaption } from '@shared/models'
-import { buildVideoOrPlaylistEmbed } from '../../../assets/player/utils'
+import { VideoCaption, VideoPlaylistPrivacy, VideoPrivacy } from '@shared/models'
type Customizations = {
startAtCheckbox: boolean
originUrl: boolean
autoplay: boolean
muted: boolean
+
+ embedP2P: boolean
+ onlyEmbedUrl: boolean
title: boolean
warningTitle: boolean
- controls: boolean
+ controlBar: boolean
peertubeLink: boolean
+ responsive: boolean
+
+ includeVideoInPlaylist: boolean
}
type TabId = 'url' | 'qrcode' | 'embed'
customizations: Customizations
isAdvancedCustomizationCollapsed = true
- includeVideoInPlaylist = false
- constructor (private modalService: NgbModal) { }
+ videoUrl: string
+ playlistUrl: string
+
+ videoEmbedUrl: string
+ playlistEmbedUrl: string
+
+ videoEmbedHTML: string
+ videoEmbedSafeHTML: SafeHtml
+ playlistEmbedHTML: string
+ playlistEmbedSafeHTML: SafeHtml
+
+ constructor (
+ private modalService: NgbModal,
+ private sanitizer: DomSanitizer,
+ private server: ServerService,
+ private hooks: HooksService
+ ) { }
show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) {
let subtitle: string
subtitle = this.videoCaptions[0].language.id
}
- this.customizations = {
+ this.customizations = new Proxy({
startAtCheckbox: false,
startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0,
muted: false,
// Embed options
+ embedP2P: this.server.getHTMLConfig().defaults.p2p.embed.enabled,
+ onlyEmbedUrl: false,
title: true,
warningTitle: true,
- controls: true,
- peertubeLink: true
- }
+ controlBar: true,
+ peertubeLink: true,
+ responsive: false,
- this.playlistPosition = currentPlaylistPosition
+ includeVideoInPlaylist: false
+ }, {
+ set: (target, prop, value) => {
+ target[prop] = value
- this.modalService.open(this.modal, { centered: true })
- }
+ if (prop === 'embedP2P') {
+ // Auto enabled warning title if P2P is enabled
+ this.customizations.warningTitle = value
+ }
- getVideoIframeCode () {
- const embedUrl = decorateVideoLink({ url: this.video.embedUrl, ...this.getVideoOptions() })
+ this.onUpdate()
- return buildVideoOrPlaylistEmbed(embedUrl, this.video.name)
- }
+ return true
+ }
+ })
+
+ this.playlistPosition = currentPlaylistPosition
- getPlaylistIframeCode () {
- const embedUrl = decoratePlaylistLink({ url: this.playlist.embedUrl, ...this.getPlaylistOptions() })
+ this.onUpdate()
- return buildVideoOrPlaylistEmbed(embedUrl, this.playlist.displayName)
+ this.modalService.open(this.modal, { centered: true }).shown.subscribe(() => {
+ this.hooks.runAction('action:modal.share.shown', 'video-watch', { video: this.video, playlist: this.playlist })
+ })
}
+ // ---------------------------------------------------------------------------
+
getVideoUrl () {
- const baseUrl = this.customizations.originUrl
- ? this.video.originInstanceUrl
- : window.location.origin
+ const url = this.customizations.originUrl
+ ? this.video.url
+ : buildVideoLink(this.video, window.location.origin)
+
+ return this.hooks.wrapFun(
+ decorateVideoLink,
+ { url, ...this.getVideoOptions(false) },
+ 'video-watch',
+ 'filter:share.video-url.build.params',
+ 'filter:share.video-url.build.result'
+ )
+ }
- return decorateVideoLink({
- url: buildVideoLink(this.video, baseUrl),
+ getVideoEmbedUrl () {
+ return this.hooks.wrapFun(
+ decorateVideoLink,
+ { url: this.video.embedUrl, ...this.getVideoOptions(true) },
+ 'video-watch',
+ 'filter:share.video-embed-url.build.params',
+ 'filter:share.video-embed-url.build.result'
+ )
+ }
- ...this.getVideoOptions()
- })
+ async getVideoEmbedCode (options: { responsive: boolean }) {
+ const { responsive } = options
+ return this.hooks.wrapFun(
+ buildVideoOrPlaylistEmbed,
+ { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name, responsive },
+ 'video-watch',
+ 'filter:share.video-embed-code.build.params',
+ 'filter:share.video-embed-code.build.result'
+ )
}
+ // ---------------------------------------------------------------------------
+
getPlaylistUrl () {
const url = buildPlaylistLink(this.playlist)
- if (!this.includeVideoInPlaylist) return url
- return decoratePlaylistLink({ url, playlistPosition: this.playlistPosition })
+ return this.hooks.wrapFun(
+ decoratePlaylistLink,
+ { url, ...this.getPlaylistOptions() },
+ 'video-watch',
+ 'filter:share.video-playlist-url.build.params',
+ 'filter:share.video-playlist-url.build.result'
+ )
+ }
+
+ getPlaylistEmbedUrl () {
+ return this.hooks.wrapFun(
+ decoratePlaylistLink,
+ { url: this.playlist.embedUrl, ...this.getPlaylistOptions() },
+ 'video-watch',
+ 'filter:share.video-playlist-embed-url.build.params',
+ 'filter:share.video-playlist-embed-url.build.result'
+ )
+ }
+
+ async getPlaylistEmbedCode (options: { responsive: boolean }) {
+ const { responsive } = options
+ return this.hooks.wrapFun(
+ buildVideoOrPlaylistEmbed,
+ { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName, responsive },
+ 'video-watch',
+ 'filter:share.video-playlist-embed-code.build.params',
+ 'filter:share.video-playlist-embed-code.build.result'
+ )
+ }
+
+ // ---------------------------------------------------------------------------
+
+ async onUpdate () {
+ if (this.playlist) {
+ this.playlistUrl = await this.getPlaylistUrl()
+ this.playlistEmbedUrl = await this.getPlaylistEmbedUrl()
+ this.playlistEmbedHTML = await this.getPlaylistEmbedCode({ responsive: this.customizations.responsive })
+ this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getPlaylistEmbedCode({ responsive: false }))
+ }
+
+ if (this.video) {
+ this.videoUrl = await this.getVideoUrl()
+ this.videoEmbedUrl = await this.getVideoEmbedUrl()
+ this.videoEmbedHTML = await this.getVideoEmbedCode({ responsive: this.customizations.responsive })
+ this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getVideoEmbedCode({ responsive: false }))
+ }
}
notSecure () {
return window.location.protocol === 'http:'
}
- isVideoInEmbedTab () {
+ isInVideoEmbedTab () {
return this.activeVideoId === 'embed'
}
+ isInPlaylistEmbedTab () {
+ return this.activePlaylistId === 'embed'
+ }
+
isLocalVideo () {
return this.video.isLocal
}
+ isPrivateVideo () {
+ return this.video.privacy.id === VideoPrivacy.PRIVATE
+ }
+
+ isPrivatePlaylist () {
+ return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE
+ }
+
private getPlaylistOptions (baseUrl?: string) {
return {
baseUrl,
- playlistPosition: this.playlistPosition || undefined
+ playlistPosition: this.playlistPosition && this.customizations.includeVideoInPlaylist
+ ? this.playlistPosition
+ : undefined
}
}
- private getVideoOptions () {
+ private getVideoOptions (forEmbed: boolean) {
+ const embedOptions = forEmbed
+ ? {
+ title: this.customizations.title,
+ warningTitle: this.customizations.warningTitle,
+ controlBar: this.customizations.controlBar,
+ peertubeLink: this.customizations.peertubeLink,
+
+ // If using default value, we don't need to specify it
+ p2p: this.customizations.embedP2P === this.server.getHTMLConfig().defaults.p2p.embed.enabled
+ ? undefined
+ : this.customizations.embedP2P
+ }
+ : {}
+
return {
startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined,
stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined,
autoplay: this.customizations.autoplay,
muted: this.customizations.muted,
- title: this.customizations.title,
- warningTitle: this.customizations.warningTitle,
- controls: this.customizations.controls,
- peertubeLink: this.customizations.peertubeLink
+ ...embedOptions
}
}
}
projects / github / Chocobozzz / PeerTube.git / blobdiff