From 91d7a3928f8c023dfb4dd2cc1ae442a8de7320f1 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 27 Feb 2024 16:31:57 +0100
Subject: [PATCH] Use video ratio for responsive embeds

---
 .../video-block-list/video-block-list.component.ts       | 1 +
 .../src/app/shared/shared-main/video/embed.component.ts  | 5 +++--
 .../shared/shared-share-modal/video-share.component.ts   | 9 +++++++--
 client/src/root-helpers/video.ts                         | 7 +++++--
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
index 3c6bda16c..140af89f9 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
@@ -155,6 +155,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit {
         title: false,
         warningTitle: false
       }),
+      aspectRatio: entry.video.aspectRatio,
       embedTitle: entry.video.name
     })
   }
diff --git a/client/src/app/shared/shared-main/video/embed.component.ts b/client/src/app/shared/shared-main/video/embed.component.ts
index 017fbf357..426e2f57a 100644
--- a/client/src/app/shared/shared-main/video/embed.component.ts
+++ b/client/src/app/shared/shared-main/video/embed.component.ts
@@ -11,7 +11,7 @@ import { Video } from '@peertube/peertube-models'
   templateUrl: './embed.component.html'
 })
 export class EmbedComponent implements OnInit {
-  @Input() video: Pick<Video, 'name' | 'uuid'>
+  @Input({ required: true }) video: Pick<Video, 'name' | 'uuid'> & Partial<Pick<Video, 'aspectRatio'>>
 
   embedHTML: SafeHtml
 
@@ -27,7 +27,8 @@ export class EmbedComponent implements OnInit {
         title: false,
         warningTitle: false
       }),
-      embedTitle: this.video.name
+      embedTitle: this.video.name,
+      aspectRatio: this.video.aspectRatio
     })
 
     this.embedHTML = this.sanitizer.bypassSecurityTrustHtml(html)
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 24c9cdeca..ccc46676c 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
@@ -158,7 +158,7 @@ export class VideoShareComponent {
     const { responsive } = options
     return this.hooks.wrapFun(
       buildVideoOrPlaylistEmbed,
-      { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name, responsive },
+      { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name, responsive, aspectRatio: this.video.aspectRatio },
       'video-watch',
       'filter:share.video-embed-code.build.params',
       'filter:share.video-embed-code.build.result'
@@ -193,7 +193,12 @@ export class VideoShareComponent {
     const { responsive } = options
     return this.hooks.wrapFun(
       buildVideoOrPlaylistEmbed,
-      { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName, responsive },
+      {
+        embedUrl: await this.getPlaylistEmbedUrl(),
+        embedTitle: this.playlist.displayName,
+        responsive,
+        aspectRatio: this.video.aspectRatio
+      },
       'video-watch',
       'filter:share.video-playlist-embed-code.build.params',
       'filter:share.video-playlist-embed-code.build.result'
diff --git a/client/src/root-helpers/video.ts b/client/src/root-helpers/video.ts
index 4ee29df13..eec00ce0e 100644
--- a/client/src/root-helpers/video.ts
+++ b/client/src/root-helpers/video.ts
@@ -3,9 +3,10 @@ import { HTMLServerConfig, Video, VideoPrivacy, VideoPrivacyType } from '@peertu
 function buildVideoOrPlaylistEmbed (options: {
   embedUrl: string
   embedTitle: string
+  aspectRatio?: number
   responsive?: boolean
 }) {
-  const { embedUrl, embedTitle, responsive = false } = options
+  const { embedUrl, embedTitle, aspectRatio, responsive = false } = options
 
   const iframe = document.createElement('iframe')
 
@@ -21,7 +22,9 @@ function buildVideoOrPlaylistEmbed (options: {
     const wrapper = document.createElement('div')
 
     wrapper.style.position = 'relative'
-    wrapper.style.paddingTop = '56.25%'
+    wrapper.style.paddingTop = aspectRatio
+      ? (1 / aspectRatio * 100).toFixed(2) + '%'
+      : '56.25%'
 
     iframe.style.position = 'absolute'
     iframe.style.inset = '0'