296 lines
11 KiB
TypeScript
296 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useRef, useEffect } from 'react';
|
|
|
|
const API_URL = process.env.NEXT_PUBLIC_API_URL || '';
|
|
|
|
export default function CapturePage() {
|
|
const [state, setState] = useState<'idle' | 'recording' | 'transcribing' | 'saved' | 'error'>('idle');
|
|
const [countdown, setCountdown] = useState(0);
|
|
const [recentCaptures, setRecentCaptures] = useState<{name: string, duration: string}[]>([]);
|
|
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
|
|
const chunksRef = useRef<Blob[]>([]);
|
|
const streamRef = useRef<MediaStream | null>(null);
|
|
const wakeLockRef = useRef<any>(null);
|
|
const countdownRef = useRef<any>(null);
|
|
const mimeTypeRef = useRef('audio/webm');
|
|
const MAX_SECONDS = 600;
|
|
|
|
useEffect(() => {
|
|
loadRecentCaptures();
|
|
}, []);
|
|
|
|
async function loadRecentCaptures() {
|
|
try {
|
|
const res = await fetch(`${API_URL}/api/captures`);
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setRecentCaptures(data.captures || []);
|
|
}
|
|
} catch {}
|
|
}
|
|
|
|
async function acquireWakeLock() {
|
|
try {
|
|
if ('wakeLock' in navigator) {
|
|
wakeLockRef.current = await (navigator as any).wakeLock.request('screen');
|
|
}
|
|
} catch {}
|
|
}
|
|
|
|
function releaseWakeLock() {
|
|
wakeLockRef.current?.release();
|
|
wakeLockRef.current = null;
|
|
}
|
|
|
|
async function startRecording() {
|
|
try {
|
|
if (!streamRef.current || streamRef.current.getTracks().every(t => t.readyState === 'ended')) {
|
|
streamRef.current = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
}
|
|
const mimeType = MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm'
|
|
: MediaRecorder.isTypeSupported('audio/mp4') ? 'audio/mp4' : 'audio/ogg';
|
|
mimeTypeRef.current = mimeType;
|
|
chunksRef.current = [];
|
|
const mr = new MediaRecorder(streamRef.current, { mimeType });
|
|
mr.ondataavailable = e => { if (e.data.size > 0) chunksRef.current.push(e.data); };
|
|
mr.onstop = async () => {
|
|
if (chunksRef.current.length === 0) return;
|
|
setState('transcribing');
|
|
try {
|
|
const blob = new Blob(chunksRef.current, { type: mimeTypeRef.current });
|
|
const form = new FormData();
|
|
form.append('audio', blob, 'capture.webm');
|
|
const res = await fetch(`${API_URL}/api/capture`, { method: 'POST', body: form });
|
|
if (res.ok) {
|
|
setState('saved');
|
|
await loadRecentCaptures();
|
|
setTimeout(() => setState('idle'), 3000);
|
|
} else {
|
|
setState('error');
|
|
setTimeout(() => setState('idle'), 3000);
|
|
}
|
|
} catch {
|
|
setState('error');
|
|
setTimeout(() => setState('idle'), 3000);
|
|
}
|
|
};
|
|
mr.start(1000);
|
|
mediaRecorderRef.current = mr;
|
|
setState('recording');
|
|
setCountdown(MAX_SECONDS);
|
|
await acquireWakeLock();
|
|
countdownRef.current = setInterval(() => {
|
|
setCountdown(prev => {
|
|
if (prev <= 1) { stopRecording(); return 0; }
|
|
return prev - 1;
|
|
});
|
|
}, 1000);
|
|
} catch {
|
|
setState('error');
|
|
setTimeout(() => setState('idle'), 3000);
|
|
}
|
|
}
|
|
|
|
function stopRecording() {
|
|
if (countdownRef.current) { clearInterval(countdownRef.current); countdownRef.current = null; }
|
|
releaseWakeLock();
|
|
mediaRecorderRef.current?.stop();
|
|
}
|
|
|
|
function handleTap() {
|
|
if (state === 'recording') stopRecording();
|
|
else if (state === 'idle') startRecording();
|
|
}
|
|
|
|
const isRecording = state === 'recording';
|
|
const isBusy = state === 'transcribing';
|
|
|
|
return (
|
|
<div style={{
|
|
minHeight: '100dvh',
|
|
background: 'var(--bg)',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingTop: 'max(48px, env(safe-area-inset-top))',
|
|
paddingBottom: 'max(48px, env(safe-area-inset-bottom))',
|
|
paddingLeft: 'max(24px, env(safe-area-inset-left))',
|
|
paddingRight: 'max(24px, env(safe-area-inset-right))',
|
|
fontFamily: 'var(--font-mono)',
|
|
}}>
|
|
|
|
{/* Header */}
|
|
<div style={{ textAlign: 'center' }}>
|
|
<p style={{
|
|
fontSize: '10px',
|
|
letterSpacing: '0.15em',
|
|
color: 'var(--text3)',
|
|
textTransform: 'uppercase',
|
|
margin: 0,
|
|
}}>
|
|
Bird — field recorder
|
|
</p>
|
|
</div>
|
|
|
|
{/* Main button area */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '40px' }}>
|
|
|
|
{/* Waveform — decorative */}
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '3px',
|
|
height: '40px',
|
|
opacity: isRecording ? 1 : 0.2,
|
|
transition: 'opacity 0.4s ease',
|
|
}}>
|
|
{[4,8,16,6,24,10,32,14,20,8,12,28,6,18,4,22,10,16,8,4].map((h, i) => (
|
|
<div key={i} style={{
|
|
width: '2px',
|
|
height: `${h}px`,
|
|
background: 'var(--accent)',
|
|
borderRadius: '1px',
|
|
animation: isRecording ? `wave ${0.8 + (i % 4) * 0.2}s ease-in-out infinite alternate` : 'none',
|
|
}} />
|
|
))}
|
|
</div>
|
|
|
|
{/* Big button */}
|
|
<button
|
|
onPointerUp={handleTap}
|
|
disabled={isBusy}
|
|
style={{
|
|
width: '160px',
|
|
height: '160px',
|
|
borderRadius: '50%',
|
|
border: `1.5px solid ${isRecording ? '#a32d2d' : 'var(--accent)'}`,
|
|
background: isRecording ? 'rgba(163,45,45,0.08)' : 'var(--bg2)',
|
|
cursor: isBusy ? 'not-allowed' : 'pointer',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
transition: 'all 0.3s ease',
|
|
touchAction: 'manipulation',
|
|
animation: isBusy ? 'none' : isRecording ? 'recordPulse 1.5s ease-in-out infinite' : 'idlePulse 3s ease-in-out infinite',
|
|
}}
|
|
aria-label={isRecording ? 'Stop recording' : 'Start recording'}
|
|
>
|
|
{isBusy ? (
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" style={{ color: 'var(--accent)' }}>
|
|
<circle cx="12" cy="12" r="3" opacity="0.6">
|
|
<animate attributeName="opacity" values="0.6;1;0.6" dur="1s" repeatCount="indefinite"/>
|
|
</circle>
|
|
</svg>
|
|
) : isRecording ? (
|
|
<div style={{ width: '24px', height: '24px', background: '#a32d2d', borderRadius: '4px' }} />
|
|
) : (
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.5">
|
|
<path d="M12 1a4 4 0 0 1 4 4v6a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4z"/>
|
|
<path d="M5 11a7 7 0 0 0 14 0"/>
|
|
<line x1="12" y1="18" x2="12" y2="22"/>
|
|
<line x1="8" y1="22" x2="16" y2="22"/>
|
|
</svg>
|
|
)}
|
|
</button>
|
|
|
|
{/* Status */}
|
|
<div style={{ textAlign: 'center', minHeight: '36px' }}>
|
|
{state === 'idle' && (
|
|
<p style={{ fontSize: '11px', color: 'var(--text3)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
|
|
tap to capture
|
|
</p>
|
|
)}
|
|
{state === 'recording' && (
|
|
<>
|
|
<p style={{ fontSize: '11px', color: '#a32d2d', letterSpacing: '0.12em', textTransform: 'uppercase', margin: '0 0 10px' }}>
|
|
recording
|
|
</p>
|
|
<div style={{ width: '160px', height: '2px', background: 'var(--border)', borderRadius: '1px', overflow: 'hidden', marginBottom: '8px' }}>
|
|
<div style={{
|
|
height: '100%',
|
|
width: `${((MAX_SECONDS - countdown) / MAX_SECONDS) * 100}%`,
|
|
background: countdown <= 30 ? '#a32d2d' : 'var(--accent)',
|
|
borderRadius: '1px',
|
|
transition: 'width 1s linear, background 0.5s ease',
|
|
}} />
|
|
</div>
|
|
<p style={{ fontSize: '11px', color: 'var(--text3)', letterSpacing: '0.08em', margin: 0, fontFamily: 'var(--font-mono)' }}>
|
|
{(() => {
|
|
const elapsed = MAX_SECONDS - countdown;
|
|
const em = Math.floor(elapsed / 60);
|
|
const es = elapsed % 60;
|
|
const rm = Math.floor(countdown / 60);
|
|
const rs = countdown % 60;
|
|
return `${em}:${es.toString().padStart(2,'0')} / ${rm}:${rs.toString().padStart(2,'0')} left`;
|
|
})()}
|
|
</p>
|
|
</>
|
|
)}
|
|
{state === 'transcribing' && (
|
|
<p style={{ fontSize: '11px', color: 'var(--text3)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
|
|
transcribing...
|
|
</p>
|
|
)}
|
|
{state === 'saved' && (
|
|
<p style={{ fontSize: '11px', color: 'var(--accent)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
|
|
saved ✓
|
|
</p>
|
|
)}
|
|
{state === 'error' && (
|
|
<p style={{ fontSize: '11px', color: '#a32d2d', letterSpacing: '0.12em', textTransform: 'uppercase', margin: 0 }}>
|
|
error — try again
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recent captures */}
|
|
<div style={{ width: '100%', maxWidth: '320px' }}>
|
|
<p style={{ fontSize: '9px', color: 'var(--text3)', letterSpacing: '0.12em', textTransform: 'uppercase', margin: '0 0 10px' }}>
|
|
recent captures
|
|
</p>
|
|
{recentCaptures.length === 0 ? (
|
|
<p style={{ fontSize: '10px', color: 'var(--text3)', margin: 0, opacity: 0.5 }}>none yet</p>
|
|
) : (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
|
{recentCaptures.slice(0, 4).map((c, i) => (
|
|
<div key={i} style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
padding: '8px 10px',
|
|
background: 'var(--bg2)',
|
|
borderRadius: '6px',
|
|
border: '1px solid var(--border)',
|
|
}}>
|
|
<div style={{ width: '4px', height: '4px', borderRadius: '50%', background: 'var(--accent)', flexShrink: 0 }} />
|
|
<span style={{ fontSize: '10px', color: 'var(--text2)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
|
{c.name}
|
|
</span>
|
|
<span style={{ fontSize: '9px', color: 'var(--text3)' }}>{c.duration}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<style>{`
|
|
@keyframes idlePulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(45,158,107,0); }
|
|
50% { box-shadow: 0 0 0 12px rgba(45,158,107,0.06); }
|
|
}
|
|
@keyframes recordPulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(163,45,45,0); }
|
|
50% { box-shadow: 0 0 0 16px rgba(163,45,45,0.08); }
|
|
}
|
|
@keyframes wave {
|
|
from { transform: scaleY(0.4); }
|
|
to { transform: scaleY(1.4); }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|