Add an option to provide responsive embed (#5690)

* Add option to provide responsive embed

* Fix typo

* More understandable parameter

2 files changed, 34 insertions, 15 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 @@
           ></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>
@@ -230,6 +238,13 @@
           <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"
                 i18n-labelText labelText="Display video title"
               ></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 = {
   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 }))
     }
   }