From 634426ed15ef4859ea91fd2f6265d215ed5ea580 Mon Sep 17 00:00:00 2001
From: VPS 4 Deploy Agent <deploy@clube67.com>
Date: Tue, 12 May 2026 03:19:45 +0200
Subject: [PATCH] =?UTF-8?q?fix(audio):=20corrige=20redownload=20de=20?=
 =?UTF-8?q?=C3=A1udio=20+=20move=20bot=C3=A3o=20de=20velocidade=20antes=20?=
 =?UTF-8?q?do=20waveform?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. MessageArea: handleRedownloadMedia usava selectedChat?.instanceId (undefined
   no formato legado) — substituído por instance_name ?? instanceId. O clique
   em 'Toque para baixar áudio' agora chama o backend corretamente.

2. MessageBubble/AudioBubble: botão de velocidade (1×/1.5×/2×) movido para
   entre o botão play e as barras do waveform, conforme layout do WhatsApp.
   A linha inferior agora exibe apenas o tempo decorrido.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../frontend/components/MessageArea.tsx       |  5 ++--
 .../frontend/components/MessageBubble.tsx     | 24 +++++++++----------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/clube67/newwhats.local/frontend/components/MessageArea.tsx b/clube67/newwhats.local/frontend/components/MessageArea.tsx
index 5464329..b1aaa07 100644
--- a/clube67/newwhats.local/frontend/components/MessageArea.tsx
+++ b/clube67/newwhats.local/frontend/components/MessageArea.tsx
@@ -61,10 +61,11 @@ const MessageArea: React.FC<MessageAreaProps> = ({
 
     // ── Re-download de mídia não baixada ─────────────────────────────────────
     const handleRedownloadMedia = useCallback(async (msg: Message) => {
-        const instanceId = selectedChat?.instanceId
+        // selectedChat no formato legado usa instance_name (não instanceId)
+        const instanceId = selectedChat?.instance_name ?? selectedChat?.instanceId
         if (!instanceId || !msg.id) return
         await mediaApi.redownload(instanceId, String(msg.id))
-    }, [selectedChat?.instanceId])
+    }, [selectedChat?.instance_name, selectedChat?.instanceId])
     const mediaMessages = messages.filter(m => m.type === 'image' || m.type === 'video')
 
     const handleInternalScroll = useCallback(() => {
diff --git a/clube67/newwhats.local/frontend/components/MessageBubble.tsx b/clube67/newwhats.local/frontend/components/MessageBubble.tsx
index aa3ad57..a419f32 100644
--- a/clube67/newwhats.local/frontend/components/MessageBubble.tsx
+++ b/clube67/newwhats.local/frontend/components/MessageBubble.tsx
@@ -123,7 +123,15 @@ const AudioBubble: React.FC<AudioBubbleProps> = ({ msg, fullMediaUrl, isOut, Tim
                     )}
                 </button>
 
-                {/* Waveform + meta */}
+                {/* Speed — antes do waveform, alinhado ao centro vertical */}
+                <button
+                    onClick={cycleSpeed}
+                    className="text-[11px] font-bold text-[#667781] hover:text-[#111b21] transition-colors leading-none shrink-0 w-7 text-center"
+                >
+                    {speed === 1 ? '1×' : speed === 1.5 ? '1.5×' : '2×'}
+                </button>
+
+                {/* Waveform + tempo */}
                 <div className="flex-1 flex flex-col gap-1 min-w-0">
                     <div className="flex items-end gap-[2px] h-7">
                         {waveHeights.map((h, i) => (
@@ -137,17 +145,9 @@ const AudioBubble: React.FC<AudioBubbleProps> = ({ msg, fullMediaUrl, isOut, Tim
                             />
                         ))}
                     </div>
-                    <div className="flex items-center justify-between">
-                        <span className="text-[11px] text-[#667781] tabular-nums leading-none">
-                            {currentTime > 0 ? formatTime(currentTime) : formatTime(duration)}
-                        </span>
-                        <button
-                            onClick={cycleSpeed}
-                            className="text-[11px] font-bold text-[#667781] hover:text-[#111b21] transition-colors leading-none"
-                        >
-                            {speed === 1 ? '1×' : speed === 1.5 ? '1.5×' : '2×'}
-                        </button>
-                    </div>
+                    <span className="text-[11px] text-[#667781] tabular-nums leading-none">
+                        {currentTime > 0 ? formatTime(currentTime) : formatTime(duration)}
+                    </span>
                 </div>
             </div>
             {TimestampRow}