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

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>
         </>
       ) : (