From 1ca5e4a3a86bfda9fecf109b06aeed3d9c2a2692 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 19 May 2026 20:45:15 -0400
Subject: [PATCH] simplify

---
 clio-ui/components/RecordingDetail.jsx | 139 ++++++-------------------
 1 file changed, 31 insertions(+), 108 deletions(-)

diff --git a/clio-ui/components/RecordingDetail.jsx b/clio-ui/components/RecordingDetail.jsx
index 45e22cb..a650f26 100644
--- a/clio-ui/components/RecordingDetail.jsx
+++ b/clio-ui/components/RecordingDetail.jsx
@@ -279,17 +279,6 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
     'follow-up': 'var(--amber-dim)', meeting: 'var(--green)', personal: 'var(--text2)', work: 'var(--teal)',
   };
 
-  const progressPct = (currentTime / totalSeconds) * 100;
-
-  // Waveform: fake bars
-  const waveformBars = 120;
-  const waveHeights = useRefRD(null);
-  if (!waveHeights.current) {
-    const rand = (seed) => { let s = seed; return () => { s = (s * 16807) % 2147483647; return (s - 1) / 2147483646; }; };
-    const rng = rand(r.id * 42);
-    waveHeights.current = Array.from({ length: waveformBars }, () => 0.1 + rng() * 0.9);
-  }
-
   const qualityDetails = [
     { label: 'Quality', value: r.quality, cls: `q-${r.quality}` },
     { label: 'Sample Rate', value: `${r.sampleRate / 1000} kHz`, cls: '' },
@@ -407,110 +396,44 @@ function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHigh
         {/* Left: Player + Transcript */}
         <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
 
-          {/* Player */}
+          {/* Player - simplified with native controls */}
           <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border)', background: 'var(--bg2)', flexShrink: 0 }}>
-            {/* Waveform */}
-            <div
-              onClick={seek}
-              style={{ height: 56, display: 'flex', alignItems: 'center', gap: 1, cursor: 'pointer', marginBottom: 8, position: 'relative' }}
-            >
-              {waveHeights.current.map((h, i) => {
-                const barPct = i / waveformBars;
-                const barTime = barPct * totalSeconds;
-                const isPast = barPct <= progressPct / 100;
-                const isActive = Math.abs(barPct - progressPct / 100) < 0.015;
+            {audioLoading && (
+              <div style={{ color: 'var(--text3)', fontSize: 11, fontFamily: 'var(--font-mono)', marginBottom: 8 }}>
+                Loading audio...
+              </div>
+            )}
 
-                // Check if bar is within any highlight range (or near a point highlight)
-                const inHighlight = recHighlights.some(hl => {
-                  if (hl.endSeconds != null) {
-                    // Range highlight - check if bar is within range
-                    return barTime >= hl.startSeconds && barTime <= hl.endSeconds;
-                  } else {
-                    // Point highlight - check if near
-                    return Math.abs(hl.startSeconds - barTime) < (totalSeconds / waveformBars);
-                  }
-                });
+            {/* Native audio element with controls */}
+            {audioBlobUrl && (
+              <audio
+                ref={audioRef}
+                src={audioBlobUrl}
+                controls
+                style={{ width: '100%', marginBottom: 12 }}
+              />
+            )}
 
-                // Check if bar is within the pending highlight being created
-                const inPendingHighlight = showAddHighlight && highlightStartTime != null && (
-                  highlightEndTime != null
-                    ? barTime >= highlightStartTime && barTime <= highlightEndTime
-                    : Math.abs(highlightStartTime - barTime) < (totalSeconds / waveformBars)
-                );
-
-                return (
-                  <div key={i} style={{
-                    flex: 1,
-                    height: `${Math.round(h * 100)}%`,
-                    background: inPendingHighlight ? 'var(--red)' : inHighlight ? 'var(--amber)' : isPast ? 'var(--teal)' : 'var(--bg4)',
-                    borderRadius: 1,
-                    minHeight: 2,
-                    transition: 'background 0.05s',
-                    opacity: isActive ? 1 : 0.85,
-                  }} />
-                );
-              })}
-
-              {/* Highlight range markers when creating */}
-              {showAddHighlight && highlightStartTime != null && (
-                <div style={{
-                  position: 'absolute', left: `${(highlightStartTime / totalSeconds) * 100}%`, top: 0, bottom: 0,
-                  width: 2, background: 'var(--red)', pointerEvents: 'none',
-                }} />
-              )}
-              {showAddHighlight && highlightEndTime != null && (
-                <div style={{
-                  position: 'absolute', left: `${(highlightEndTime / totalSeconds) * 100}%`, top: 0, bottom: 0,
-                  width: 2, background: 'var(--red)', pointerEvents: 'none',
-                }} />
-              )}
-
-              {/* Playhead */}
-              <div style={{
-                position: 'absolute', left: `${progressPct}%`, top: 0, bottom: 0,
-                width: 2, background: 'var(--amber)', pointerEvents: 'none',
-                boxShadow: '0 0 6px var(--amber)',
-              }} />
-            </div>
-
-            {/* Hidden audio element */}
-            {audioBlobUrl && <audio ref={audioRef} src={audioBlobUrl} preload="metadata" />}
-            {audioLoading && <div style={{ color: 'var(--text3)', fontSize: 11, fontFamily: 'var(--font-mono)' }}>Loading audio...</div>}
-
-            {/* Controls */}
-            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-              <button onClick={() => skipTime(-30)} style={{ color: 'var(--text2)', fontFamily: 'var(--font-mono)', fontSize: 11 }}>-30s</button>
-              <button onClick={() => skipTime(-5)} style={{ color: 'var(--text2)', fontFamily: 'var(--font-mono)', fontSize: 11 }}>-5s</button>
-              <button
-                onClick={togglePlay}
-                style={{
-                  width: 36, height: 36, borderRadius: '50%',
-                  background: 'var(--amber)', color: 'var(--bg)',
-                  fontSize: 14, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  flexShrink: 0,
-                }}
-              >{playing ? '⏸' : '▶'}</button>
-              <button onClick={() => skipTime(5)} style={{ color: 'var(--text2)', fontFamily: 'var(--font-mono)', fontSize: 11 }}>+5s</button>
-              <button onClick={() => skipTime(30)} style={{ color: 'var(--text2)', fontFamily: 'var(--font-mono)', fontSize: 11 }}>+30s</button>
+            {/* Extra controls: skip buttons and speed */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <button onClick={() => skipTime(-30)} style={{ color: 'var(--text2)', fontFamily: 'var(--font-mono)', fontSize: 11, padding: '4px 8px', background: 'var(--bg4)', borderRadius: 4 }}>-30s</button>
+              <button onClick={() => skipTime(-5)} style={{ color: 'var(--text2)', fontFamily: 'var(--font-mono)', fontSize: 11, padding: '4px 8px', background: 'var(--bg4)', borderRadius: 4 }}>-5s</button>
+              <button onClick={() => skipTime(5)} style={{ color: 'var(--text2)', fontFamily: 'var(--font-mono)', fontSize: 11, padding: '4px 8px', background: 'var(--bg4)', borderRadius: 4 }}>+5s</button>
+              <button onClick={() => skipTime(30)} style={{ color: 'var(--text2)', fontFamily: 'var(--font-mono)', fontSize: 11, padding: '4px 8px', background: 'var(--bg4)', borderRadius: 4 }}>+30s</button>
 
               <div style={{ flex: 1 }} />
 
               {/* Speed */}
-              <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-                {[0.5, 1.0, 1.5, 2.0, 3.0].map(s => (
-                  <button key={s} onClick={() => setSpeed(s)} style={{
-                    fontFamily: 'var(--font-mono)', fontSize: 10, padding: '2px 7px',
-                    borderRadius: 3,
-                    background: speed === s ? 'var(--amber)' : 'var(--bg4)',
-                    color: speed === s ? 'var(--bg)' : 'var(--text3)',
-                    border: '1px solid var(--border)',
-                  }}>{s}×</button>
-                ))}
-              </div>
-
-              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text2)', minWidth: 100, textAlign: 'right' }}>
-                {formatTime(currentTime)} / {formatTime(totalSeconds)}
-              </div>
+              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)' }}>Speed:</span>
+              {[0.5, 1.0, 1.5, 2.0, 3.0].map(s => (
+                <button key={s} onClick={() => setSpeed(s)} style={{
+                  fontFamily: 'var(--font-mono)', fontSize: 10, padding: '2px 7px',
+                  borderRadius: 3,
+                  background: speed === s ? 'var(--amber)' : 'var(--bg4)',
+                  color: speed === s ? 'var(--bg)' : 'var(--text3)',
+                  border: '1px solid var(--border)',
+                }}>{s}×</button>
+              ))}
             </div>
           </div>