Use video ratio for responsive embeds

Chocobozzz · Feb 27, 2024 · 91d7a39 · 91d7a39
1 parent dfe9869
commit 91d7a39
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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'