import { Component, ElementRef, Input, ViewChild } from '@angular/core'
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
import { VideoDetails } from '@app/shared/shared-main'
import { VideoPlaylist } from '@app/shared/shared-video-playlist'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { VideoCaption } from '@shared/models'
-import { buildPlaylistLink, buildVideoLink, buildVideoOrPlaylistEmbed } from '../../../assets/player/utils'
+import { buildPlaylistLink, buildVideoLink, decoratePlaylistLink, decorateVideoLink } from '@shared/core-utils'
+import { VideoCaption, VideoPlaylistPrivacy, VideoPrivacy } from '@shared/models'
+import { buildVideoOrPlaylistEmbed } from '../../../assets/player/utils'
type Customizations = {
startAtCheckbox: boolean
subtitle: string
loop: boolean
+ originUrl: boolean
autoplay: boolean
muted: boolean
title: boolean
@Input() video: VideoDetails = null
@Input() videoCaptions: VideoCaption[] = []
@Input() playlist: VideoPlaylist = null
+ @Input() playlistPosition: number = null
activeVideoId: TabId = 'url'
activePlaylistId: TabId = 'url'
isAdvancedCustomizationCollapsed = true
includeVideoInPlaylist = false
- private playlistPosition: number = null
+ playlistEmbedHTML: SafeHtml
+ videoEmbedHTML: SafeHtml
- constructor (private modalService: NgbModal) { }
+ constructor (
+ private modalService: NgbModal,
+ private sanitizer: DomSanitizer
+ ) { }
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,
subtitle,
loop: false,
+ originUrl: false,
autoplay: false,
muted: false,
warningTitle: true,
controls: true,
peertubeLink: true
- }
+ }, {
+ set: (target, prop, value) => {
+ target[prop] = value
+
+ this.updateEmbedCode()
+
+ return true
+ }
+ })
this.playlistPosition = currentPlaylistPosition
+ this.updateEmbedCode()
+
this.modalService.open(this.modal, { centered: true })
}
getVideoIframeCode () {
- const options = this.getVideoOptions(this.video.embedUrl)
+ const embedUrl = decorateVideoLink({ url: this.video.embedUrl, ...this.getVideoOptions() })
- const embedUrl = buildVideoLink(options)
- return buildVideoOrPlaylistEmbed(embedUrl)
+ return buildVideoOrPlaylistEmbed(embedUrl, this.video.name)
}
getPlaylistIframeCode () {
- const options = this.getPlaylistOptions(this.playlist.embedUrl)
+ const embedUrl = decoratePlaylistLink({ url: this.playlist.embedUrl, ...this.getPlaylistOptions() })
- const embedUrl = buildPlaylistLink(options)
- return buildVideoOrPlaylistEmbed(embedUrl)
+ return buildVideoOrPlaylistEmbed(embedUrl, this.playlist.displayName)
}
getVideoUrl () {
- const baseUrl = window.location.origin + '/videos/watch/' + this.video.uuid
- const options = this.getVideoOptions(baseUrl)
+ const url = this.customizations.originUrl
+ ? this.video.url
+ : buildVideoLink(this.video, window.location.origin)
- return buildVideoLink(options)
+ return decorateVideoLink({
+ url,
+
+ ...this.getVideoOptions()
+ })
}
getPlaylistUrl () {
- const base = window.location.origin + '/videos/watch/playlist/' + this.playlist.uuid
+ const url = buildPlaylistLink(this.playlist)
+ if (!this.includeVideoInPlaylist) return url
+
+ return decoratePlaylistLink({ url, playlistPosition: this.playlistPosition })
+ }
- if (!this.includeVideoInPlaylist) return base
+ updateEmbedCode () {
+ if (this.playlist) this.playlistEmbedHTML = this.sanitizer.bypassSecurityTrustHtml(this.getPlaylistIframeCode())
- return base + '?videoId=' + this.video.uuid
+ if (this.video) this.videoEmbedHTML = this.sanitizer.bypassSecurityTrustHtml(this.getVideoIframeCode())
}
notSecure () {
return this.activeVideoId === '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,
}
}
- private getVideoOptions (baseUrl?: string) {
+ private getVideoOptions () {
return {
- baseUrl,
-
startTime: this.customizations.startAtCheckbox ? this.customizations.startAt : undefined,
stopTime: this.customizations.stopAtCheckbox ? this.customizations.stopAt : undefined,