Merge branch 'preview'

Author: pdelfan

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>
   );
 });
 

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}

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",
+    }),
   ],
 };