Add ability to preview embed in share modal

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-share-modal / video-share.component.ts

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 e6e4bd147eec1acd15ac4520a95542341ee3aec2..d59f338c7a2c5c4c368fa4e52c30f31681d1819e 100644 (file)
--- 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:'
   }