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

app/transcriptions/[slug]/page.tsx

@@ -7,7 +7,7 @@ import {
   getTranscription,
   getAdjacentTranscriptions,
 } from "@/lib/transcriptions";
-import { buildOgMeta } from "@/lib/og";
+import { buildOgMeta, ogForTranscription, extractQuoteFromHl } from "@/lib/og";
 import { PageHeader } from "@/components/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -18,25 +18,49 @@ import { PlayAudioButton } from "./play-audio-button";
 
 export async function generateMetadata({
   params,
+  searchParams,
 }: {
   params: Promise<{ slug: string }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
 }): Promise<Metadata> {
   const { slug } = await params;
+  const sp = await searchParams;
   const t = await getTranscription(slug);
   if (!t) return {};
 
   const detail = [t.date, t.place].filter(Boolean).join(" · ");
-  return buildOgMeta({
-    title: t.name,
-    detail: detail || undefined,
-    quote:
-      t.content.length > 0
-        ? t.content
-            .find((b) => b.speaker === "Prabhupāda" && b.text.length > 50)
-            ?.text?.replace(/<[^>]+>/g, "")
-            .slice(0, 200)
-        : undefined,
+
+  // Build paragraphs from content blocks for hl matching
+  const paragraphs = t.content.map((b) => {
+    const speakerPrefix = b.speaker ? `${b.speaker}: ` : "";
+    return speakerPrefix + b.text.replace(/<[^>]+>/g, "");
   });
+
+  const hlQuote = extractQuoteFromHl(sp, paragraphs);
+
+  if (hlQuote) {
+    return buildOgMeta({
+      title: t.name,
+      detail: detail || undefined,
+      quote: hlQuote,
+    });
+  }
+
+  // Fallback: find a good Prabhupāda quote from the content
+  const spQuote = t.content
+    .find((b) => b.speaker === "Prabhupāda" && b.text.length > 50)
+    ?.text?.replace(/<[^>]+>/g, "")
+    .slice(0, 200);
+
+  if (spQuote) {
+    return buildOgMeta({
+      title: t.name,
+      detail: detail || undefined,
+      quote: spQuote,
+    });
+  }
+
+  return ogForTranscription(t.name, detail || undefined);
 }
 
 export default async function TranscriptionPage({

app/transcriptions/[slug]/play-audio-button.tsx

@@ -1,8 +1,12 @@
 "use client";
 
-import { useAudioPlayer, type AudioTrack } from "@/components/audio-player";
+import {
+  useAudioPlayer,
+  type AudioTrack,
+  AudioWaveAnimation,
+} from "@/components/audio-player";
 import { cn } from "@/lib/utils";
-import { Play, Pause, Radio } from "lucide-react";
+import { Play, Pause } from "lucide-react";
 
 type PlayAudioButtonProps = {
   audioUrl: string;
@@ -85,7 +89,11 @@ export function PlayAudioButton({
     >
       {isThisPlaying ? (
         <>
-          <Radio className="size-4 animate-pulse" />
+          <AudioWaveAnimation
+            paused={false}
+            colorClassName="bg-primary-foreground"
+            size="sm"
+          />
           <span>Now Playing</span>
         </>
       ) : (