Add an option to provide responsive embed (#5690)

* Add option to provide responsive embed

* Fix typo

* More understandable parameter

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

@@ -72,13 +72,21 @@
           ></my-peertube-checkbox>
         </div>
 
-        <div class="form-group">
-          <my-peertube-checkbox
-            *ngIf="isInPlaylistEmbedTab()"
-            inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
-            i18n-labelText labelText="Only display embed URL"
-          ></my-peertube-checkbox>
-        </div>
+        <ng-container *ngIf="isInPlaylistEmbedTab()">
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
+              i18n-labelText labelText="Only display embed URL"
+            ></my-peertube-checkbox>
+          </div>
+
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="responsive" [(ngModel)]="customizations.responsive"
+              i18n-labelText labelText="Responsive embed"
+            ></my-peertube-checkbox>
+          </div>
+        </ng-container>
 
         <my-plugin-placeholder pluginId="share-modal-playlist-settings"></my-plugin-placeholder>
       </div>
@@ -228,6 +236,13 @@
           </div>
 
           <ng-container *ngIf="isInVideoEmbedTab()">
+            <div class="form-group">
+              <my-peertube-checkbox
+                inputName="responsive" [(ngModel)]="customizations.responsive"
+                i18n-labelText labelText="Responsive embed"
+              ></my-peertube-checkbox>
+            </div>
+
             <div class="form-group">
               <my-peertube-checkbox
                 inputName="title" [(ngModel)]="customizations.title"

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

@@ -29,6 +29,7 @@ type Customizations = {
   warningTitle: boolean
   controlBar: boolean
   peertubeLink: boolean
+  responsive: boolean
 
   includeVideoInPlaylist: boolean
 }
@@ -100,6 +101,7 @@ export class VideoShareComponent {
       warningTitle: true,
       controlBar: true,
       peertubeLink: true,
+      responsive: false,
 
       includeVideoInPlaylist: false
     }, {
@@ -152,10 +154,11 @@ export class VideoShareComponent {
     )
   }
 
-  async getVideoIframeCode () {
+  async getVideoEmbedCode (options: { responsive: boolean }) {
+    const { responsive } = options
     return this.hooks.wrapFun(
       buildVideoOrPlaylistEmbed,
-      { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name },
+      { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name, responsive },
       'video-watch',
       'filter:share.video-embed-code.build.params',
       'filter:share.video-embed-code.build.result'
@@ -186,10 +189,11 @@ export class VideoShareComponent {
     )
   }
 
-  async getPlaylistEmbedCode () {
+  async getPlaylistEmbedCode (options: { responsive: boolean }) {
+    const { responsive } = options
     return this.hooks.wrapFun(
       buildVideoOrPlaylistEmbed,
-      { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName },
+      { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName, responsive },
       'video-watch',
       'filter:share.video-playlist-embed-code.build.params',
       'filter:share.video-playlist-embed-code.build.result'
@@ -204,15 +208,15 @@ export class VideoShareComponent {
     if (this.playlist) {
       this.playlistUrl = await this.getPlaylistUrl()
       this.playlistEmbedUrl = await this.getPlaylistEmbedUrl()
-      this.playlistEmbedHTML = await this.getPlaylistEmbedCode()
-      this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(this.playlistEmbedHTML)
+      this.playlistEmbedHTML = await this.getPlaylistEmbedCode({ responsive: this.customizations.responsive })
+      this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getPlaylistEmbedCode({ responsive: false }))
     }
 
     if (this.video) {
       this.videoUrl = await this.getVideoUrl()
       this.videoEmbedUrl = await this.getVideoEmbedUrl()
-      this.videoEmbedHTML = await this.getVideoIframeCode()
-      this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(this.videoEmbedHTML)
+      this.videoEmbedHTML = await this.getVideoEmbedCode({ responsive: this.customizations.responsive })
+      this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getVideoEmbedCode({ responsive: false }))
     }
   }
 

client/src/root-helpers/video.ts

@@ -3,19 +3,34 @@ import { HTMLServerConfig, Video, VideoPrivacy } from '@shared/models'
 function buildVideoOrPlaylistEmbed (options: {
   embedUrl: string
   embedTitle: string
+  responsive?: boolean
 }) {
-  const { embedUrl, embedTitle } = options
+  const { embedUrl, embedTitle, responsive = false } = options
 
   const iframe = document.createElement('iframe')
 
   iframe.title = embedTitle
-  iframe.width = '560'
-  iframe.height = '315'
+  iframe.width = responsive ? '100%' : '560'
+  iframe.height = responsive ? '100%' : '315'
   iframe.src = embedUrl
   iframe.frameBorder = '0'
   iframe.allowFullscreen = true
   iframe.sandbox.add('allow-same-origin', 'allow-scripts', 'allow-popups')
 
+  if (responsive) {
+    const wrapper = document.createElement('div')
+
+    wrapper.style.position = 'relative'
+    wrapper.style['padding-top'] = '56.25%'
+
+    iframe.style.position = 'absolute'
+    iframe.style.inset = '0'
+
+    wrapper.appendChild(iframe)
+
+    return wrapper.outerHTML
+  }
+
   return iframe.outerHTML
 }