From a0d6616e522fd67fe8e8a1431cc6fd7b0726796f Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Tue, 4 Jun 2024 18:39:22 -0400
Subject: [PATCH] show videos and thumbnails of different aspect ratios
 properly on my movies dialogue

---
 .eslintrc.cjs                                               | 1 +
 app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx | 4 ++--
 app/pages/PageEnigma/comps/GenerateModals/Sharing.tsx       | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 94a18a48bb..d86348de16 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -58,6 +58,7 @@ module.exports = {
         // we are incapable to provide support for blind people atm
         "jsx-a11y/click-events-have-key-events": SEVERITY.OFF,
         "jsx-a11y/no-static-element-interactions": SEVERITY.OFF,
+        "jsx-a11y/media-has-caption": SEVERITY.OFF,
       },
     },
 
diff --git a/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx b/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx
index fe3fd94769..6ec7df7257 100644
--- a/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx
+++ b/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx
@@ -43,12 +43,12 @@ export function CompletedCard({ movie, setMovieId }: Props) {
       }}
     >
       <div className="flex gap-4">
-        <div className="rounded-lg">
+        <div className="flex h-32 w-32 justify-center rounded-lg bg-ui-background">
           <img
             src={
               loadError ? "/resources/images/movie-placeholder.png" : imageUrl
             }
-            className="aspect-video w-36 rounded-lg object-cover"
+            className="h-full object-contain"
             alt={movie.maybe_title ?? "unknown"}
             crossOrigin="anonymous"
             onError={() => setLoadError(true)}
diff --git a/app/pages/PageEnigma/comps/GenerateModals/Sharing.tsx b/app/pages/PageEnigma/comps/GenerateModals/Sharing.tsx
index 10fa87ea41..49c4fb30b1 100644
--- a/app/pages/PageEnigma/comps/GenerateModals/Sharing.tsx
+++ b/app/pages/PageEnigma/comps/GenerateModals/Sharing.tsx
@@ -68,7 +68,7 @@ export function Sharing({ mediaFile, setMediaFile }: Props) {
     >
       <div className="flex gap-6 px-5 pb-5">
         <div className="max-h-[420px] w-full overflow-hidden rounded-lg">
-          <video controls crossOrigin="anonymous" width="100%">
+          <video controls crossOrigin="anonymous" className="h-full w-full">
             <source
               src={`${environmentVariables.value.GOOGLE_API}/vocodes-public${mediaFile?.public_bucket_path}`}
               type="video/mp4"