feat: add framer motion for audio player, handle og images for transcripts

2026-05-09 11:59:48 +05:30
parent 9eb2a06b50
commit 326ba090ca
10 changed files with 1187 additions and 11826 deletions
@@ -0,0 +1,59 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+/**
+ * Animated audio wave bars — used in the minimized player pill
+ * and the "Now Playing" button.
+ *
+ * @param paused  – when true the bars flatten to a static state
+ * @param colorClassName – Tailwind color class for the bars (default: "bg-current")
+ * @param className – additional classes on the container
+ * @param barCount – number of bars (default: 4)
+ * @param size – "sm" (10px tall) | "md" (12px tall, default) | "lg" (16px tall)
+ */
+export function AudioWaveAnimation({
+  paused = false,
+  colorClassName = "bg-current",
+  className,
+  barCount = 4,
+  size = "md",
+}: {
+  paused?: boolean;
+  colorClassName?: string;
+  className?: string;
+  barCount?: number;
+  size?: "sm" | "md" | "lg";
+}) {
+  const config = {
+    sm: { height: 10, minH: 2, barW: "w-[2px]", containerH: "h-2.5" },
+    md: { height: 12, minH: 3, barW: "w-[3px]", containerH: "h-3" },
+    lg: { height: 16, minH: 3, barW: "w-[3px]", containerH: "h-4" },
+  }[size];
+
+  return (
+    <div
+      className={cn("flex items-end gap-[2px]", config.containerH, className)}
+    >
+      {Array.from({ length: barCount }, (_, i) => (
+        <motion.div
+          key={i}
+          className={cn(config.barW, "rounded-full", colorClassName)}
+          animate={{
+            height: paused
+              ? config.minH
+              : [config.minH, config.height, config.minH],
+          }}
+          transition={{
+            duration: 0.8,
+            repeat: paused ? 0 : Infinity,
+            repeatType: "mirror",
+            ease: "easeInOut",
+            delay: i * 0.15,
+          }}
+        />
+      ))}
+    </div>
+  );
+}