aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-11-02 10:01:28 +0100
committerChocobozzz <me@florianbigard.com>2021-11-02 10:01:28 +0100
commitf1c861727c1d2f9eacf98821c81f0f8cdcb57317 (patch)
treeb256b20ca99abd1fb439a8f9ad918ecc98a44b68
parenteeae81428e933b923dc9d9b6c9ce5c9fcf0de1a7 (diff)
downloadPeerTube-f1c861727c1d2f9eacf98821c81f0f8cdcb57317.tar.gz
PeerTube-f1c861727c1d2f9eacf98821c81f0f8cdcb57317.tar.zst
PeerTube-f1c861727c1d2f9eacf98821c81f0f8cdcb57317.zip
Add ability to preview embed in share modal
-rw-r--r--client/src/app/shared/shared-forms/input-toggle-hidden.component.html2
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.html15
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.ts29
-rw-r--r--client/src/sass/application.scss2
4 files changed, 40 insertions, 8 deletions
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 @@
1<div class="input-group input-group-sm"> 1<div class="input-group input-group-sm">
2 <input 2 <input
3 [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex" 3 [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex"
4 [(ngModel)]="value" (ngModelChange)="update()" [ngClass]="{ 'readonly': readonly }" [readonly]="readonly" 4 [(ngModel)]="value" (ngModelChange)="update()" [readonly]="readonly"
5 #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control" 5 #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
6 /> 6 />
7 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 @@
10 <div class="playlist" *ngIf="playlist"> 10 <div class="playlist" *ngIf="playlist">
11 <div class="title-page title-page-single" i18n *ngIf="video">Share the playlist</div> 11 <div class="title-page title-page-single" i18n *ngIf="video">Share the playlist</div>
12 12
13
14 <div *ngIf="isPrivatePlaylist()" class="alert-private alert alert-warning"> 13 <div *ngIf="isPrivatePlaylist()" class="alert-private alert alert-warning">
15 <div i18n>This playlist is private so you won't be able to share it with external users</div> 14 <div i18n>This playlist is private so you won't be able to share it with external users</div>
16 15
@@ -47,11 +46,16 @@
47 46
48 <ng-template ngbNavContent> 47 <ng-template ngbNavContent>
49 <div class="nav-content"> 48 <div class="nav-content">
50 <my-input-toggle-hidden [value]="getPlaylistIframeCode()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden> 49 <my-input-toggle-hidden
50 [value]="getPlaylistIframeCode()" (change)="updateEmbedCode()"
51 [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
52 ></my-input-toggle-hidden>
51 53
52 <div i18n *ngIf="notSecure()" class="alert alert-warning"> 54 <div i18n *ngIf="notSecure()" class="alert alert-warning">
53 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). 55 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).
54 </div> 56 </div>
57
58 <div [innerHTML]="playlistEmbedHTML"></div>
55 </div> 59 </div>
56 </ng-template> 60 </ng-template>
57 </ng-container> 61 </ng-container>
@@ -109,11 +113,16 @@
109 113
110 <ng-template ngbNavContent> 114 <ng-template ngbNavContent>
111 <div class="nav-content"> 115 <div class="nav-content">
112 <my-input-toggle-hidden [value]="getVideoIframeCode()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden> 116 <my-input-toggle-hidden
117 [value]="getVideoIframeCode()" (ngModelChange)="updateEmbedCode()"
118 [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
119 ></my-input-toggle-hidden>
113 120
114 <div i18n *ngIf="notSecure()" class="alert alert-warning"> 121 <div i18n *ngIf="notSecure()" class="alert alert-warning">
115 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). 122 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).
116 </div> 123 </div>
124
125 <div [innerHTML]="videoEmbedHTML"></div>
117 </div> 126 </div>
118 </ng-template> 127 </ng-template>
119 </ng-container> 128 </ng-container>
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 @@
1import { Component, ElementRef, Input, ViewChild } from '@angular/core' 1import { Component, ElementRef, Input, ViewChild } from '@angular/core'
2import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
2import { VideoDetails } from '@app/shared/shared-main' 3import { VideoDetails } from '@app/shared/shared-main'
3import { VideoPlaylist } from '@app/shared/shared-video-playlist' 4import { VideoPlaylist } from '@app/shared/shared-video-playlist'
4import { NgbModal } from '@ng-bootstrap/ng-bootstrap' 5import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
@@ -48,7 +49,13 @@ export class VideoShareComponent {
48 isAdvancedCustomizationCollapsed = true 49 isAdvancedCustomizationCollapsed = true
49 includeVideoInPlaylist = false 50 includeVideoInPlaylist = false
50 51
51 constructor (private modalService: NgbModal) { } 52 playlistEmbedHTML: SafeHtml
53 videoEmbedHTML: SafeHtml
54
55 constructor (
56 private modalService: NgbModal,
57 private sanitizer: DomSanitizer
58 ) { }
52 59
53 show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) { 60 show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) {
54 let subtitle: string 61 let subtitle: string
@@ -56,7 +63,7 @@ export class VideoShareComponent {
56 subtitle = this.videoCaptions[0].language.id 63 subtitle = this.videoCaptions[0].language.id
57 } 64 }
58 65
59 this.customizations = { 66 this.customizations = new Proxy({
60 startAtCheckbox: false, 67 startAtCheckbox: false,
61 startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0, 68 startAt: currentVideoTimestamp ? Math.floor(currentVideoTimestamp) : 0,
62 69
@@ -76,10 +83,20 @@ export class VideoShareComponent {
76 warningTitle: true, 83 warningTitle: true,
77 controls: true, 84 controls: true,
78 peertubeLink: true 85 peertubeLink: true
79 } 86 }, {
87 set: (target, prop, value) => {
88 target[prop] = value
89
90 this.updateEmbedCode()
91
92 return true
93 }
94 })
80 95
81 this.playlistPosition = currentPlaylistPosition 96 this.playlistPosition = currentPlaylistPosition
82 97
98 this.updateEmbedCode()
99
83 this.modalService.open(this.modal, { centered: true }) 100 this.modalService.open(this.modal, { centered: true })
84 } 101 }
85 102
@@ -114,6 +131,12 @@ export class VideoShareComponent {
114 return decoratePlaylistLink({ url, playlistPosition: this.playlistPosition }) 131 return decoratePlaylistLink({ url, playlistPosition: this.playlistPosition })
115 } 132 }
116 133
134 updateEmbedCode () {
135 if (this.playlist) this.playlistEmbedHTML = this.sanitizer.bypassSecurityTrustHtml(this.getPlaylistIframeCode())
136
137 if (this.video) this.videoEmbedHTML = this.sanitizer.bypassSecurityTrustHtml(this.getVideoIframeCode())
138 }
139
117 notSecure () { 140 notSecure () {
118 return window.location.protocol === 'http:' 141 return window.location.protocol === 'http:'
119 } 142 }
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 1f8166d8a..87a21543d 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -92,7 +92,7 @@ strong {
92 font-weight: $font-semibold; 92 font-weight: $font-semibold;
93} 93}
94 94
95input.readonly { 95input[readonly] {
96 /* Force blank on readonly inputs */ 96 /* Force blank on readonly inputs */
97 background-color: pvar(--inputBackgroundColor) !important; 97 background-color: pvar(--inputBackgroundColor) !important;
98} 98}