From f1c861727c1d2f9eacf98821c81f0f8cdcb57317 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 2 Nov 2021 10:01:28 +0100 Subject: Add ability to preview embed in share modal --- .../input-toggle-hidden.component.html | 2 +- .../shared-share-modal/video-share.component.html | 15 ++++++++--- .../shared-share-modal/video-share.component.ts | 29 +++++++++++++++++++--- 3 files changed, 39 insertions(+), 7 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html index 63e49c778..dfe646d2f 100644 --- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html +++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html @@ -1,7 +1,7 @@
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html index 059699d3b..f41c085e1 100644 --- a/client/src/app/shared/shared-share-modal/video-share.component.html +++ b/client/src/app/shared/shared-share-modal/video-share.component.html @@ -10,7 +10,6 @@
Share the playlist
-
This playlist is private so you won't be able to share it with external users
@@ -47,11 +46,16 @@ @@ -109,11 +113,16 @@ diff --git a/client/src/app/shared/shared-share-modal/video-share.component.ts b/client/src/app/shared/shared-share-modal/video-share.component.ts index e6e4bd147..d59f338c7 100644 --- a/client/src/app/shared/shared-share-modal/video-share.component.ts +++ b/client/src/app/shared/shared-share-modal/video-share.component.ts @@ -1,4 +1,5 @@ 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' @@ -48,7 +49,13 @@ export class VideoShareComponent { isAdvancedCustomizationCollapsed = true includeVideoInPlaylist = false - constructor (private modalService: NgbModal) { } + playlistEmbedHTML: SafeHtml + videoEmbedHTML: SafeHtml + + constructor ( + private modalService: NgbModal, + private sanitizer: DomSanitizer + ) { } show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) { let subtitle: string @@ -56,7 +63,7 @@ export class VideoShareComponent { subtitle = this.videoCaptions[0].language.id } - this.customizations = { + this.customizations = new Proxy({ startAtCheckbox: false, startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0, @@ -76,10 +83,20 @@ export class VideoShareComponent { 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 }) } @@ -114,6 +131,12 @@ export class VideoShareComponent { return decoratePlaylistLink({ url, playlistPosition: this.playlistPosition }) } + updateEmbedCode () { + if (this.playlist) this.playlistEmbedHTML = this.sanitizer.bypassSecurityTrustHtml(this.getPlaylistIframeCode()) + + if (this.video) this.videoEmbedHTML = this.sanitizer.bypassSecurityTrustHtml(this.getVideoIframeCode()) + } + notSecure () { return window.location.protocol === 'http:' } -- cgit v1.2.3