refactor: removed redundant audioplayer and improved component coherence

src/app/admin/datasets/[id]/entries/[entryId]/page.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import db from '@/lib/db';
 import { dataset_entry } from '@/lib/model/dataset_entry';
 import { eq } from 'drizzle-orm';
-import AudioPlayer from '@/components/AudioPlayer';
+import WaveformPlayer from '@/components/WaveformPlayer';
 import { requireAdmin } from '@/lib/auth';
 import { redirect } from 'next/navigation';
 
@@ -114,7 +114,11 @@ export default async function DatasetEntryPage({ params }: DatasetEntryPageProps
 
             <div className="col-span-2 bg-white border border-gray-200 p-4 rounded-lg">
               <p className="text-sm text-gray-600 mb-3">Audio Player</p>
-              <AudioPlayer datasetId={datasetIdNum} fileName={entry.fileName} externalId={entry.externalId} />
+              {(() => {
+                const fileExtension = entry.fileName.substring(entry.fileName.lastIndexOf('.'));
+                const src = `/public/datasets/${datasetIdNum}/${entry.externalId}${fileExtension}`;
+                return <WaveformPlayer src={src} showWaveform={false} />;
+              })()}
             </div>
 
             <div className="bg-white border border-gray-200 p-4 rounded-lg">

src/components/AnnotationViews/SingleChoiceEntryView.tsx

@@ -59,7 +59,6 @@ export default function SingleChoiceEntryView({
       {/* Waveform player */}
       <WaveformPlayer
         src={audioSrc}
-        durationMs={entry.durationMs}
         onFullyPlayed={() => setFullyPlayed(true)}
       />
 

src/components/AudioPlayer.tsx

@@ -1,83 +0,0 @@
-'use client';
-
-import { useState, useRef, useEffect } from 'react';
-import { useAudio } from './AudioProvider';
-
-interface AudioPlayerProps {
-  fileName: string;
-  datasetId: number;
-  externalId?: string;
-}
-
-export default function AudioPlayer({ fileName, datasetId, externalId }: AudioPlayerProps) {
-  const [isPlaying, setIsPlaying] = useState(false);
-  const audioRef = useRef<HTMLAudioElement>(null);
-  const { currentAudioId, setCurrentAudio } = useAudio();
-  const audioId = `${datasetId}-${externalId}`;
-
-  // Extract file extension from original fileName and construct URL using externalId
-  const fileExtension = fileName.substring(fileName.lastIndexOf('.'));
-  const audioPath = `/public/datasets/${datasetId}/${externalId}${fileExtension}`;
-
-  // Stop playing if another audio started
-  useEffect(() => {
-    if (currentAudioId !== audioId && audioRef.current && isPlaying) {
-      audioRef.current.pause();
-      audioRef.current.currentTime = 0;
-      setIsPlaying(false);
-    }
-  }, [currentAudioId, audioId, isPlaying]);
-
-  const handlePlay = () => {
-    if (audioRef.current) {
-      setCurrentAudio(audioId);
-      audioRef.current.currentTime = 0;
-      audioRef.current.play();
-      setIsPlaying(true);
-    }
-  };
-
-  const handleStop = () => {
-    if (audioRef.current) {
-      audioRef.current.pause();
-      audioRef.current.currentTime = 0;
-      setCurrentAudio(null);
-      setIsPlaying(false);
-    }
-  };
-
-  const handlePlaybackEnd = () => {
-    setIsPlaying(false);
-    setCurrentAudio(null);
-  };
-
-  return (
-    <div className="flex items-center gap-2">
-      <audio
-        ref={audioRef}
-        src={audioPath}
-        onEnded={handlePlaybackEnd}
-      />
-      <button
-        onClick={isPlaying ? handleStop : handlePlay}
-        className={`inline-flex items-center justify-center w-8 h-8 rounded-full transition-colors ${
-          isPlaying
-            ? 'bg-red-500 hover:bg-red-600 text-white'
-            : 'bg-blue-500 hover:bg-blue-600 text-white'
-        }`}
-        title={isPlaying ? 'Stop' : 'Play'}
-      >
-        {isPlaying ? (
-          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-            <rect x="6" y="4" width="2" height="12" />
-            <rect x="12" y="4" width="2" height="12" />
-          </svg>
-        ) : (
-          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-            <path d="M6.3 2.841A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
-          </svg>
-        )}
-      </button>
-    </div>
-  );
-}

src/components/CalibrationViews/CalibrationEntryView.tsx

@@ -82,7 +82,6 @@ export default function CalibrationEntryView({
       {/* Waveform player */}
       <WaveformPlayer
         src={audioSrc}
-        durationMs={null}
         onFullyPlayed={() => setFullyPlayed(true)}
       />
 

src/components/DatasetEntriesList.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
-import AudioPlayer from './AudioPlayer';
+import WaveformPlayer from './WaveformPlayer';
 import { getDatasetEntries } from '@/app/actions/get-dataset-entries';
 import { getFilterOptions } from '@/app/actions/get-filter-options';
 import { downloadFilteredEntriesAsZip, downloadFilteredEntriesAsCsv } from '@/lib/download-utils';
@@ -514,7 +514,11 @@ export default function DatasetEntriesList({
             {entries.map((entry) => (
               <tr key={entry.id} className="hover:bg-blue-50 transition-colors border-b border-gray-200">
                 <td className="py-3 px-4">
-                  <AudioPlayer datasetId={datasetId} fileName={entry.fileName} externalId={entry.externalId} />
+                  {(() => {
+                    const fileExtension = entry.fileName.substring(entry.fileName.lastIndexOf('.'));
+                    const src = `/public/datasets/${datasetId}/${entry.externalId}${fileExtension}`;
+                    return <WaveformPlayer src={src} showWaveform={false} />;
+                  })()}
                 </td>
                 <td className="py-3 px-4">
                   <Link

src/components/ParticipantDetailView.tsx

@@ -3,7 +3,7 @@
 import { ParticipantDetail, getParticipantCalibrationScores } from '@/app/actions/participants';
 import { useEffect, useState } from 'react';
 import CalibrationScoresDisplay from './CalibrationScoresDisplay';
-import AudioPlayer from './AudioPlayer';
+import WaveformPlayer from './WaveformPlayer';
 import ExportParticipantDataButton from './ExportParticipantDataButton';
 
 interface ParticipantDetailViewProps {
@@ -165,11 +165,11 @@ export default function ParticipantDetailView({ participant, experimentId }: Par
                 </div>
                 <div>
                   <div className="text-sm text-gray-600 mb-1">Audio</div>
-                  <AudioPlayer
-                    fileName={selectedAnnotation.fileName}
-                    datasetId={selectedAnnotation.datasetId}
-                    externalId={selectedAnnotation.externalId}
-                  />
+                  {(() => {
+                    const fileExtension = selectedAnnotation.fileName.substring(selectedAnnotation.fileName.lastIndexOf('.'));
+                    const src = `/public/datasets/${selectedAnnotation.datasetId}/${selectedAnnotation.externalId}${fileExtension}`;
+                    return <WaveformPlayer src={src} showWaveform={false} />;
+                  })()}
                 </div>
               </div>
             </div>

src/components/WaveformPlayer.tsx

@@ -1,38 +1,43 @@
 'use client';
 
-import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 import { useAudio } from './AudioProvider';
 
 interface WaveformPlayerProps {
+  // Audio source URL (required)
   src: string;
-  durationMs?: number | null;
+  
+  // Audio playback options
   onPlay?: () => void;
-  onFullyPlayed: () => void;
+  onFullyPlayed?: () => void;
+  
+  // Display options
+  showWaveform?: boolean; // defaults to true; if false, shows simple player button
 }
 
 const BAR_COUNT = 120;
 
 export default function WaveformPlayer({
   src,
-  durationMs,
   onPlay,
   onFullyPlayed,
+  showWaveform = true,
 }: WaveformPlayerProps) {
   const { currentAudioId, setCurrentAudio } = useAudio();
   
   // Generate unique ID for this player instance
-  const playerId = useMemo(() => Math.random().toString(36).slice(2), []);
+  const playerId = useRef(Math.random().toString(36).slice(2)).current;
   const isActive = currentAudioId === playerId;
 
   const audioRef = useRef<HTMLAudioElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const rafRef = useRef<number>(0);
+  const fullyPlayedRef = useRef(false);
 
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
-  const [duration, setDuration] = useState<number>(durationMs ? durationMs / 1000 : 0);
+  const [duration, setDuration] = useState(0);
   const [peaks, setPeaks] = useState<number[]>([]);
-  const fullyPlayedRef = useRef(false);
 
   // Stop if another player became active
   useEffect(() => {
@@ -43,12 +48,11 @@ export default function WaveformPlayer({
     }
   }, [isActive, isPlaying]);
 
-  // Reset state when src changes and cancel playback
-
+  // Reset state when src changes
   useEffect(() => {
     setPeaks([]);
     setCurrentTime(0);
-    setDuration(durationMs ? durationMs / 1000 : 0);
+    setDuration(0);
     fullyPlayedRef.current = false;
     if (audioRef.current) {
       audioRef.current.pause();
@@ -56,10 +60,61 @@ export default function WaveformPlayer({
     }
     cancelAnimationFrame(rafRef.current);
     setIsPlaying(false);
-  }, [src, durationMs]);
+  }, [src]);
 
-  // Decode audio and generate waveform peaks
+  const tick = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    setCurrentTime(audio.currentTime);
+    rafRef.current = requestAnimationFrame(tick);
+  }, []);
+
+  const handlePlay = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    setCurrentAudio(playerId);
+    onPlay?.();
+    audio.currentTime = 0;
+    audio.play();
+    setIsPlaying(true);
+    rafRef.current = requestAnimationFrame(tick);
+  }, [playerId, onPlay, tick]);
+
+  const handlePause = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    audio.pause();
+    setIsPlaying(false);
+    cancelAnimationFrame(rafRef.current);
+  }, []);
+
+  const handleStop = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    audio.pause();
+    audio.currentTime = 0;
+    setCurrentAudio(null);
+    setIsPlaying(false);
+    cancelAnimationFrame(rafRef.current);
+  }, []);
+
+  const handleEnded = useCallback(() => {
+    setIsPlaying(false);
+    cancelAnimationFrame(rafRef.current);
+    if (!fullyPlayedRef.current) {
+      fullyPlayedRef.current = true;
+      onFullyPlayed?.();
+    }
+  }, [onFullyPlayed]);
+
+  const handleLoadedMetadata = useCallback(() => {
+    if (audioRef.current) setDuration(audioRef.current.duration);
+  }, []);
+
+  // Decode audio and generate waveform peaks (only if showWaveform is true)
   useEffect(() => {
+    if (!showWaveform) return;
+    
     let cancelled = false;
     (async () => {
       try {
@@ -87,10 +142,17 @@ export default function WaveformPlayer({
       }
     })();
     return () => { cancelled = true; };
+  }, [src, showWaveform]);
+
+  // Reset peaks when src changes
+  useEffect(() => {
+    setPeaks([]);
   }, [src]);
 
   // Draw waveform on canvas whenever peaks or playback position change
   useEffect(() => {
+    if (!showWaveform) return;
+    
     const canvas = canvasRef.current;
     if (!canvas || peaks.length === 0) return;
     const ctx = canvas.getContext('2d');
@@ -110,45 +172,7 @@ export default function WaveformPlayer({
       ctx.roundRect(x, y, barW, barH, 2);
       ctx.fill();
     });
-  }, [peaks, currentTime, duration]);
-
-  const tick = useCallback(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-    setCurrentTime(audio.currentTime);
-    rafRef.current = requestAnimationFrame(tick);
-  }, []);
-
-  const handlePlay = () => {
-    const audio = audioRef.current;
-    if (!audio) return;
-    setCurrentAudio(playerId);
-    onPlay?.();
-    audio.play();
-    setIsPlaying(true);
-    rafRef.current = requestAnimationFrame(tick);
-  };
-
-  const handlePause = () => {
-    const audio = audioRef.current;
-    if (!audio) return;
-    audio.pause();
-    setIsPlaying(false);
-    cancelAnimationFrame(rafRef.current);
-  };
-
-  const handleEnded = () => {
-    setIsPlaying(false);
-    cancelAnimationFrame(rafRef.current);
-    if (!fullyPlayedRef.current) {
-      fullyPlayedRef.current = true;
-      onFullyPlayed?.();
-    }
-  };
-
-  const handleLoadedMetadata = () => {
-    if (audioRef.current) setDuration(audioRef.current.duration);
-  };
+  }, [peaks, currentTime, duration, showWaveform]);
 
   const fmt = (s: number) => {
     const m = Math.floor(s / 60);
@@ -156,6 +180,40 @@ export default function WaveformPlayer({
     return `${m}:${sec.toString().padStart(2, '0')}`;
   };
 
+  // Simple player button (no waveform)
+  if (!showWaveform) {
+    return (
+      <div className="flex items-center gap-2">
+        <audio
+          ref={audioRef}
+          src={src}
+          onEnded={handleEnded}
+        />
+        <button
+          onClick={isPlaying ? handleStop : handlePlay}
+          className={`inline-flex items-center justify-center w-8 h-8 rounded-full transition-colors ${
+            isPlaying
+              ? 'bg-red-500 hover:bg-red-600 text-white'
+              : 'bg-blue-500 hover:bg-blue-600 text-white'
+          }`}
+          title={isPlaying ? 'Stop' : 'Play'}
+        >
+          {isPlaying ? (
+            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+              <rect x="6" y="4" width="2" height="12" />
+              <rect x="12" y="4" width="2" height="12" />
+            </svg>
+          ) : (
+            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M6.3 2.841A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
+            </svg>
+          )}
+        </button>
+      </div>
+    );
+  }
+
+  // Waveform player with visualization
   return (
     <div className="flex flex-col gap-2">
       <audio