aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorWicklow <123956049+wickloww@users.noreply.github.com>2023-03-14 08:32:16 +0000
committerGitHub <noreply@github.com>2023-03-14 09:32:16 +0100
commitcadc1a1b0b1f8c22afbf31cb07759706131f29c4 (patch)
tree58d226340b6cdeb13815461651d710c1bb5871bf /client/src
parente72ace5a506904a67290e347e962ddf930d2b9f9 (diff)
downloadPeerTube-cadc1a1b0b1f8c22afbf31cb07759706131f29c4.tar.gz
PeerTube-cadc1a1b0b1f8c22afbf31cb07759706131f29c4.tar.zst
PeerTube-cadc1a1b0b1f8c22afbf31cb07759706131f29c4.zip
Add an option to provide responsive embed (#5690)
* Add option to provide responsive embed * Fix typo * More understandable parameter
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.html29
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.ts20
-rw-r--r--client/src/root-helpers/video.ts21
3 files changed, 52 insertions, 18 deletions
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 f4d249b41..01d351783 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
@@ -72,13 +72,21 @@
72 ></my-peertube-checkbox> 72 ></my-peertube-checkbox>
73 </div> 73 </div>
74 74
75 <div class="form-group"> 75 <ng-container *ngIf="isInPlaylistEmbedTab()">
76 <my-peertube-checkbox 76 <div class="form-group">
77 *ngIf="isInPlaylistEmbedTab()" 77 <my-peertube-checkbox
78 inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl" 78 inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
79 i18n-labelText labelText="Only display embed URL" 79 i18n-labelText labelText="Only display embed URL"
80 ></my-peertube-checkbox> 80 ></my-peertube-checkbox>
81 </div> 81 </div>
82
83 <div class="form-group">
84 <my-peertube-checkbox
85 inputName="responsive" [(ngModel)]="customizations.responsive"
86 i18n-labelText labelText="Responsive embed"
87 ></my-peertube-checkbox>
88 </div>
89 </ng-container>
82 90
83 <my-plugin-placeholder pluginId="share-modal-playlist-settings"></my-plugin-placeholder> 91 <my-plugin-placeholder pluginId="share-modal-playlist-settings"></my-plugin-placeholder>
84 </div> 92 </div>
@@ -230,6 +238,13 @@
230 <ng-container *ngIf="isInVideoEmbedTab()"> 238 <ng-container *ngIf="isInVideoEmbedTab()">
231 <div class="form-group"> 239 <div class="form-group">
232 <my-peertube-checkbox 240 <my-peertube-checkbox
241 inputName="responsive" [(ngModel)]="customizations.responsive"
242 i18n-labelText labelText="Responsive embed"
243 ></my-peertube-checkbox>
244 </div>
245
246 <div class="form-group">
247 <my-peertube-checkbox
233 inputName="title" [(ngModel)]="customizations.title" 248 inputName="title" [(ngModel)]="customizations.title"
234 i18n-labelText labelText="Display video title" 249 i18n-labelText labelText="Display video title"
235 ></my-peertube-checkbox> 250 ></my-peertube-checkbox>
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 e1db4a3b8..43229c330 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
@@ -29,6 +29,7 @@ type Customizations = {
29 warningTitle: boolean 29 warningTitle: boolean
30 controlBar: boolean 30 controlBar: boolean
31 peertubeLink: boolean 31 peertubeLink: boolean
32 responsive: boolean
32 33
33 includeVideoInPlaylist: boolean 34 includeVideoInPlaylist: boolean
34} 35}
@@ -100,6 +101,7 @@ export class VideoShareComponent {
100 warningTitle: true, 101 warningTitle: true,
101 controlBar: true, 102 controlBar: true,
102 peertubeLink: true, 103 peertubeLink: true,
104 responsive: false,
103 105
104 includeVideoInPlaylist: false 106 includeVideoInPlaylist: false
105 }, { 107 }, {
@@ -152,10 +154,11 @@ export class VideoShareComponent {
152 ) 154 )
153 } 155 }
154 156
155 async getVideoIframeCode () { 157 async getVideoEmbedCode (options: { responsive: boolean }) {
158 const { responsive } = options
156 return this.hooks.wrapFun( 159 return this.hooks.wrapFun(
157 buildVideoOrPlaylistEmbed, 160 buildVideoOrPlaylistEmbed,
158 { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name }, 161 { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name, responsive },
159 'video-watch', 162 'video-watch',
160 'filter:share.video-embed-code.build.params', 163 'filter:share.video-embed-code.build.params',
161 'filter:share.video-embed-code.build.result' 164 'filter:share.video-embed-code.build.result'
@@ -186,10 +189,11 @@ export class VideoShareComponent {
186 ) 189 )
187 } 190 }
188 191
189 async getPlaylistEmbedCode () { 192 async getPlaylistEmbedCode (options: { responsive: boolean }) {
193 const { responsive } = options
190 return this.hooks.wrapFun( 194 return this.hooks.wrapFun(
191 buildVideoOrPlaylistEmbed, 195 buildVideoOrPlaylistEmbed,
192 { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName }, 196 { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName, responsive },
193 'video-watch', 197 'video-watch',
194 'filter:share.video-playlist-embed-code.build.params', 198 'filter:share.video-playlist-embed-code.build.params',
195 'filter:share.video-playlist-embed-code.build.result' 199 'filter:share.video-playlist-embed-code.build.result'
@@ -204,15 +208,15 @@ export class VideoShareComponent {
204 if (this.playlist) { 208 if (this.playlist) {
205 this.playlistUrl = await this.getPlaylistUrl() 209 this.playlistUrl = await this.getPlaylistUrl()
206 this.playlistEmbedUrl = await this.getPlaylistEmbedUrl() 210 this.playlistEmbedUrl = await this.getPlaylistEmbedUrl()
207 this.playlistEmbedHTML = await this.getPlaylistEmbedCode() 211 this.playlistEmbedHTML = await this.getPlaylistEmbedCode({ responsive: this.customizations.responsive })
208 this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(this.playlistEmbedHTML) 212 this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getPlaylistEmbedCode({ responsive: false }))
209 } 213 }
210 214
211 if (this.video) { 215 if (this.video) {
212 this.videoUrl = await this.getVideoUrl() 216 this.videoUrl = await this.getVideoUrl()
213 this.videoEmbedUrl = await this.getVideoEmbedUrl() 217 this.videoEmbedUrl = await this.getVideoEmbedUrl()
214 this.videoEmbedHTML = await this.getVideoIframeCode() 218 this.videoEmbedHTML = await this.getVideoEmbedCode({ responsive: this.customizations.responsive })
215 this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(this.videoEmbedHTML) 219 this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getVideoEmbedCode({ responsive: false }))
216 } 220 }
217 } 221 }
218 222
diff --git a/client/src/root-helpers/video.ts b/client/src/root-helpers/video.ts
index 107ba1eba..01feddbdc 100644
--- a/client/src/root-helpers/video.ts
+++ b/client/src/root-helpers/video.ts
@@ -3,19 +3,34 @@ import { HTMLServerConfig, Video, VideoPrivacy } from '@shared/models'
3function buildVideoOrPlaylistEmbed (options: { 3function buildVideoOrPlaylistEmbed (options: {
4 embedUrl: string 4 embedUrl: string
5 embedTitle: string 5 embedTitle: string
6 responsive?: boolean
6}) { 7}) {
7 const { embedUrl, embedTitle } = options 8 const { embedUrl, embedTitle, responsive = false } = options
8 9
9 const iframe = document.createElement('iframe') 10 const iframe = document.createElement('iframe')
10 11
11 iframe.title = embedTitle 12 iframe.title = embedTitle
12 iframe.width = '560' 13 iframe.width = responsive ? '100%' : '560'
13 iframe.height = '315' 14 iframe.height = responsive ? '100%' : '315'
14 iframe.src = embedUrl 15 iframe.src = embedUrl
15 iframe.frameBorder = '0' 16 iframe.frameBorder = '0'
16 iframe.allowFullscreen = true 17 iframe.allowFullscreen = true
17 iframe.sandbox.add('allow-same-origin', 'allow-scripts', 'allow-popups') 18 iframe.sandbox.add('allow-same-origin', 'allow-scripts', 'allow-popups')
18 19
20 if (responsive) {
21 const wrapper = document.createElement('div')
22
23 wrapper.style.position = 'relative'
24 wrapper.style['padding-top'] = '56.25%'
25
26 iframe.style.position = 'absolute'
27 iframe.style.inset = '0'
28
29 wrapper.appendChild(iframe)
30
31 return wrapper.outerHTML
32 }
33
19 return iframe.outerHTML 34 return iframe.outerHTML
20} 35}
21 36