From 27a7bca1b8dede5ee58aebd55f7f7909b355ec1d Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Wed, 11 Sep 2024 15:25:18 -0700
Subject: [PATCH] Fix unintentional extra space for videos on Safari

---
 .../dataDisplay/postEmbed/VideoEmbed.tsx      | 42 ++++++++++---------
 src/components/forms/loginForm/LoginForm.tsx  |  2 +-
 tailwind.config.ts                            |  8 +++-
 3 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/components/dataDisplay/postEmbed/VideoEmbed.tsx b/src/components/dataDisplay/postEmbed/VideoEmbed.tsx
index 7e230614..ce9c92a2 100644
--- a/src/components/dataDisplay/postEmbed/VideoEmbed.tsx
+++ b/src/components/dataDisplay/postEmbed/VideoEmbed.tsx
@@ -18,26 +18,28 @@ const VideoEmbed = memo(function VideoEmbed(props: Props) {
   const { aspectRatio, playlist, thumbnail, alt } = props;
 
   return (
-    <MediaPlayer
-      crossOrigin
-      playsInline
-      viewType="video"
-      className="mt-2 hover:brightness-90 hover:cursor-pointer"
-      src={playlist}
-      poster={thumbnail ?? ""}
-      onClick={(e) => e.stopPropagation()}
-    >
-      <MediaProvider>
-        {alt && (
-          <Poster
-            src={thumbnail}
-            alt={alt}
-            className="absolute inset-0 block bg-black opacity-0 transition-opacity data-[visible]:opacity-100 [&>img]:w-full [&>img]:object-contain"
-          />
-        )}
-      </MediaProvider>
-      <DefaultVideoLayout thumbnails={thumbnail} icons={defaultLayoutIcons} />
-    </MediaPlayer>
+    <div className="aspect-video mt-2 rounded-md hover:brightness-90 hover:cursor-pointer overflow-hidden">
+      <MediaPlayer
+        crossOrigin
+        playsInline
+        viewType="video"
+        className="w-full h-full object-cover"
+        src={playlist}
+        poster={thumbnail ?? ""}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <MediaProvider>
+          {alt && (
+            <Poster
+              src={thumbnail}
+              alt={alt}
+              className="absolute inset-0 block bg-skin-overlay opacity-0 transition-opacity data-[visible]:opacity-100 [&>img]:w-full [&>img]:object-contain"
+            />
+          )}
+        </MediaProvider>
+        <DefaultVideoLayout thumbnails={thumbnail} icons={defaultLayoutIcons} />
+      </MediaPlayer>
+    </div>
   );
 });
 
diff --git a/src/components/forms/loginForm/LoginForm.tsx b/src/components/forms/loginForm/LoginForm.tsx
index 068b05a2..535a5ac9 100644
--- a/src/components/forms/loginForm/LoginForm.tsx
+++ b/src/components/forms/loginForm/LoginForm.tsx
@@ -148,7 +148,7 @@ export default function LoginForm() {
         <Button
           type="submit"
           className={`text-skin-inverted bg-skin-inverted hover:bg-skin-inverted ml-auto mt-5 flex w-full items-center justify-center gap-2 rounded-lg px-3 py-3 font-semibold disabled:cursor-not-allowed ${
-            loading && "animate-pulse"
+            loading && "animate-pulse animate-duration-1000"
           }`}
           disabled={loading}
           aria-disabled={loading}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 60099607..db804310 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -89,7 +89,13 @@ export default {
       },
     },
   },
-  plugins: [    
+  plugins: [
     require("tailwindcss-animated"),
+    require("@vidstack/react/tailwind.cjs")({
+      // Optimize output by specifying player selector.
+      selector: ".media-player",
+      // Change the media variants prefix.
+      prefix: "media",
+    }),
   ],
 };