From 6e9c11744cae52182acf334d7fd75453f7ce2862 Mon Sep 17 00:00:00 2001
From: ajaysi <ajay.calsoft@gmail.com>
Date: Wed, 22 Apr 2026 06:10:15 +0530
Subject: [PATCH] fix: WebM/Opus audio duration shows zero - add durationchange
 listener and preload=auto

---
 .../components/VoiceAvatarPlaceholder.tsx             |  8 +++++---
 .../src/components/PodcastMaker/InlineAudioPlayer.tsx | 11 +++++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/OnboardingWizard/PersonalizationStep/components/VoiceAvatarPlaceholder.tsx b/frontend/src/components/OnboardingWizard/PersonalizationStep/components/VoiceAvatarPlaceholder.tsx
index c1471841..ff09cc9a 100644
--- a/frontend/src/components/OnboardingWizard/PersonalizationStep/components/VoiceAvatarPlaceholder.tsx
+++ b/frontend/src/components/OnboardingWizard/PersonalizationStep/components/VoiceAvatarPlaceholder.tsx
@@ -383,7 +383,7 @@ export const VoiceAvatarPlaceholder: React.FC<{ domainName?: string; onVoiceSet?
           }
           setAudioFile(file);
           const url = URL.createObjectURL(blob);
-          console.log('[VoiceClone] Created audio preview URL:', url, 'size:', file.size, 'type:', blob.type);
+          if (process.env.NODE_ENV === 'development') console.log('[VoiceClone] Created audio preview URL:', url.split('?')[0], 'size:', file.size, 'type:', blob.type);
           setAudioPreviewUrl(url);
         } catch (err) {
           console.error('[VoiceClone] Error creating audio blob:', err);
@@ -813,7 +813,8 @@ export const VoiceAvatarPlaceholder: React.FC<{ domainName?: string; onVoiceSet?
                                 <audio 
                                   key={audioPreviewUrl} 
                                   controls 
-                                  src={audioPreviewUrl} 
+                                  src={audioPreviewUrl}
+                                  preload="auto"
                                   style={{ height: '30px', width: '100%' }}
                                   onError={(e) => {
                                     console.error('[VoiceClone] Audio playback error:', e);
@@ -1075,7 +1076,8 @@ export const VoiceAvatarPlaceholder: React.FC<{ domainName?: string; onVoiceSet?
                         <audio 
                           key={audioPreviewUrl} 
                           controls 
-                          src={audioPreviewUrl} 
+                          src={audioPreviewUrl}
+                          preload="auto"
                           style={{ width: '100%', height: '28px' }}
                           onError={(e) => {
                             console.error('[VoiceClone] Source audio playback error:', e);
diff --git a/frontend/src/components/PodcastMaker/InlineAudioPlayer.tsx b/frontend/src/components/PodcastMaker/InlineAudioPlayer.tsx
index df1e7f9e..aa44f538 100644
--- a/frontend/src/components/PodcastMaker/InlineAudioPlayer.tsx
+++ b/frontend/src/components/PodcastMaker/InlineAudioPlayer.tsx
@@ -105,7 +105,12 @@ export const InlineAudioPlayer: React.FC<InlineAudioPlayerProps> = ({ audioUrl,
     if (!audio || !blobUrl) return;
 
     const updateTime = () => setCurrentTime(audio.currentTime);
-    const updateDuration = () => setDuration(audio.duration);
+    const updateDuration = () => {
+      const d = audio.duration;
+      if (d && isFinite(d) && d > 0) {
+        setDuration(d);
+      }
+    };
     const handleEnd = () => setPlaying(false);
     const handleError = () => {
       setError('Audio playback error. Please try again.');
@@ -114,12 +119,14 @@ export const InlineAudioPlayer: React.FC<InlineAudioPlayerProps> = ({ audioUrl,
 
     audio.addEventListener("timeupdate", updateTime);
     audio.addEventListener("loadedmetadata", updateDuration);
+    audio.addEventListener("durationchange", updateDuration);
     audio.addEventListener("ended", handleEnd);
     audio.addEventListener("error", handleError);
 
     return () => {
       audio.removeEventListener("timeupdate", updateTime);
       audio.removeEventListener("loadedmetadata", updateDuration);
+      audio.removeEventListener("durationchange", updateDuration);
       audio.removeEventListener("ended", handleEnd);
       audio.removeEventListener("error", handleError);
     };
@@ -239,7 +246,7 @@ export const InlineAudioPlayer: React.FC<InlineAudioPlayerProps> = ({ audioUrl,
           </Tooltip>
         </Stack>
         {effectiveAudioUrl && (
-          <audio ref={audioRef} src={effectiveAudioUrl} preload="metadata" />
+          <audio ref={audioRef} src={effectiveAudioUrl} preload="auto" />
         )}
       </Stack>
     </Paper>