Add ability to preview embed in share modal

client/src/app/shared/shared-forms/input-toggle-hidden.component.html

@@ -1,7 +1,7 @@
 <div class="input-group input-group-sm">
   <input
     [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex"
-    [(ngModel)]="value" (ngModelChange)="update()" [ngClass]="{ 'readonly': readonly }" [readonly]="readonly"
+    [(ngModel)]="value" (ngModelChange)="update()" [readonly]="readonly"
     #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
   />
 

client/src/app/shared/shared-share-modal/video-share.component.html

@@ -10,7 +10,6 @@
     <div class="playlist" *ngIf="playlist">
       <div class="title-page title-page-single" i18n *ngIf="video">Share the playlist</div>
 
-
       <div *ngIf="isPrivatePlaylist()" class="alert-private alert alert-warning">
         <div i18n>This playlist is private so you won't be able to share it with external users</div>
 
@@ -47,11 +46,16 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <my-input-toggle-hidden [value]="getPlaylistIframeCode()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+              <my-input-toggle-hidden
+                [value]="getPlaylistIframeCode()" (change)="updateEmbedCode()"
+                [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
+              ></my-input-toggle-hidden>
 
               <div i18n *ngIf="notSecure()" class="alert alert-warning">
                 The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
               </div>
+
+              <div [innerHTML]="playlistEmbedHTML"></div>
             </div>
           </ng-template>
         </ng-container>
@@ -109,11 +113,16 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <my-input-toggle-hidden [value]="getVideoIframeCode()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+              <my-input-toggle-hidden
+                [value]="getVideoIframeCode()" (ngModelChange)="updateEmbedCode()"
+                [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
+              ></my-input-toggle-hidden>
 
               <div i18n *ngIf="notSecure()" class="alert alert-warning">
                 The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
               </div>
+
+              <div [innerHTML]="videoEmbedHTML"></div>
             </div>
           </ng-template>
         </ng-container>

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:'
   }

client/src/sass/application.scss

@@ -92,7 +92,7 @@ strong {
   font-weight: $font-semibold;
 }
 
-input.readonly {
+input[readonly] {
   /* Force blank on readonly inputs */
   background-color: pvar(--inputBackgroundColor) !important;
 }