From 3cb928f28f3c8e9ea0711415e1103e2381547dd8 Mon Sep 17 00:00:00 2001
From: "Ala Eddine Menai (Ala)" <ala.official.acc@gmail.com>
Date: Sat, 20 Dec 2025 19:29:27 +0100
Subject: [PATCH] refactor(audio-player-button): render the PlayButton once

---
 .../elevenlabs-ui/ui/audio-player.tsx         | 39 +++++++------------
 1 file changed, 13 insertions(+), 26 deletions(-)

diff --git a/apps/www/registry/elevenlabs-ui/ui/audio-player.tsx b/apps/www/registry/elevenlabs-ui/ui/audio-player.tsx
index 63098008..b895e38c 100644
--- a/apps/www/registry/elevenlabs-ui/ui/audio-player.tsx
+++ b/apps/www/registry/elevenlabs-ui/ui/audio-player.tsx
@@ -452,37 +452,24 @@ export function AudioPlayerButton<TData = unknown>({
 }: AudioPlayerButtonProps<TData>) {
   const player = useAudioPlayer<TData>()
 
-  if (!item) {
-    return (
-      <PlayButton
-        {...otherProps}
-        playing={player.isPlaying}
-        onPlayingChange={(shouldPlay) => {
-          if (shouldPlay) {
-            player.play()
-          } else {
-            player.pause()
-          }
-        }}
-        loading={player.isBuffering && player.isPlaying}
-      />
-    )
+  const isActive = item ? player.isItemActive(item.id) : true
+  const isPlaying = isActive && player.isPlaying
+  const isLoading = isActive && player.isBuffering && player.isPlaying
+
+  const handlePlayingChange = (shouldPlay: boolean) => {
+    if (shouldPlay) {
+      player.play(item)
+    } else {
+      player.pause()
+    }
   }
 
   return (
     <PlayButton
       {...otherProps}
-      playing={player.isItemActive(item.id) && player.isPlaying}
-      onPlayingChange={(shouldPlay) => {
-        if (shouldPlay) {
-          player.play(item)
-        } else {
-          player.pause()
-        }
-      }}
-      loading={
-        player.isItemActive(item.id) && player.isBuffering && player.isPlaying
-      }
+      playing={isPlaying}
+      onPlayingChange={handlePlayingChange}
+      loading={isLoading}
     />
   )
 }