adding the ui
This commit is contained in:
Your Name
parent
14445e7242
commit
eaeac63ef3
12 changed files with 2638 additions and 0 deletions
66
.gitignore
vendored
Normal file
66
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
# Audio/video files
|
||||
*.opus
|
||||
*.ogg
|
||||
*.mp3
|
||||
*.wav
|
||||
*.m4a
|
||||
*.flac
|
||||
*.webm
|
||||
|
||||
# Data files
|
||||
*.db
|
||||
*.db-journal
|
||||
*.pkl
|
||||
*.csv
|
||||
|
||||
# Python
|
||||
__pycache__/
|
||||
*.py[cod]
|
||||
.venv/
|
||||
venv/
|
||||
*.egg-info/
|
||||
|
||||
# Nix
|
||||
result
|
||||
result-*
|
||||
|
||||
# Keys (NEVER commit)
|
||||
*.key
|
||||
keys/
|
||||
API_KEY.txt
|
||||
|
||||
# IDE
|
||||
.idea/
|
||||
.vscode/
|
||||
*.kate-swp
|
||||
*.swp
|
||||
|
||||
# Build artifacts
|
||||
build/
|
||||
.gradle/
|
||||
*.apk
|
||||
*.aab
|
||||
|
||||
# Android SDK (huge)
|
||||
android_studio_install_path/
|
||||
|
||||
# OS files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
logs/
|
||||
|
||||
# Test recordings
|
||||
test_recordings/
|
||||
recordings/
|
||||
|
||||
# Temporary
|
||||
*.tmp
|
||||
*.temp
|
||||
.temp/
|
||||
|
||||
# Lock files (optional - uncomment if you want to track these)
|
||||
# uv.lock
|
||||
# flake.lock
|
||||
85
clio-ui/RecordingsViewer.html
Normal file
85
clio-ui/RecordingsViewer.html
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>RecordingsViewer</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;1,300&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap" rel="stylesheet" />
|
||||
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
||||
<script src="mock-data.js"></script>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: oklch(0.12 0.01 60);
|
||||
--bg2: oklch(0.15 0.01 60);
|
||||
--bg3: oklch(0.18 0.012 60);
|
||||
--bg4: oklch(0.22 0.012 60);
|
||||
--border: oklch(0.28 0.01 60);
|
||||
--text: oklch(0.88 0.01 65);
|
||||
--text2: oklch(0.65 0.01 65);
|
||||
--text3: oklch(0.45 0.01 65);
|
||||
--amber: oklch(0.75 0.15 65);
|
||||
--amber-dim: oklch(0.55 0.10 65);
|
||||
--amber-glow: oklch(0.75 0.15 65 / 0.15);
|
||||
--teal: oklch(0.65 0.10 195);
|
||||
--teal-dim: oklch(0.45 0.08 195);
|
||||
--red: oklch(0.60 0.18 25);
|
||||
--red-dim: oklch(0.40 0.12 25);
|
||||
--green: oklch(0.62 0.14 155);
|
||||
--green-dim: oklch(0.42 0.09 155);
|
||||
--sidebar-w: 220px;
|
||||
--font-sans: 'IBM Plex Sans', sans-serif;
|
||||
--font-mono: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
|
||||
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; overflow: hidden; }
|
||||
|
||||
#root { height: 100vh; display: flex; flex-direction: column; }
|
||||
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--text3); }
|
||||
|
||||
button { font-family: var(--font-sans); cursor: pointer; border: none; background: none; color: inherit; }
|
||||
input, textarea { font-family: var(--font-sans); }
|
||||
|
||||
.mono { font-family: var(--font-mono); }
|
||||
|
||||
/* Quality badge colors */
|
||||
.q-excellent { color: var(--green); }
|
||||
.q-good { color: var(--teal); }
|
||||
.q-fair { color: var(--amber); }
|
||||
.q-poor { color: var(--red); }
|
||||
|
||||
/* Source pill */
|
||||
.source-pill {
|
||||
display: inline-flex; align-items: center; gap: 5px;
|
||||
font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
|
||||
padding: 2px 7px; border-radius: 3px;
|
||||
background: var(--bg4); color: var(--text2); border: 1px solid var(--border);
|
||||
}
|
||||
.source-portable { border-color: var(--amber-dim); color: var(--amber); }
|
||||
.source-stationary { border-color: var(--teal-dim); color: var(--teal); }
|
||||
.source-phone { border-color: var(--green-dim); color: var(--green); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
<script type="text/babel" src="components/Sidebar.jsx"></script>
|
||||
<script type="text/babel" src="components/Dashboard.jsx"></script>
|
||||
<script type="text/babel" src="components/DayView.jsx"></script>
|
||||
<script type="text/babel" src="components/RecordingDetail.jsx"></script>
|
||||
<script type="text/babel" src="components/SearchView.jsx"></script>
|
||||
<script type="text/babel" src="components/HighlightsView.jsx"></script>
|
||||
<script type="text/babel" src="components/App.jsx"></script>
|
||||
<script type="text/babel" src="tweaks-panel.jsx"></script>
|
||||
<script type="text/babel" src="components/Tweaks.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
0
clio-ui/components/.keep
Normal file
0
clio-ui/components/.keep
Normal file
367
clio-ui/components/App.jsx
Normal file
367
clio-ui/components/App.jsx
Normal file
|
|
@ -0,0 +1,367 @@
|
|||
// Main App component
|
||||
const { useState: useStateApp, useEffect: useEffectApp, useRef: useRefApp } = React;
|
||||
|
||||
const API_BASE = '';
|
||||
|
||||
// Parse hash into route info
|
||||
function parseHash() {
|
||||
const hash = window.location.hash.slice(1) || '/dashboard';
|
||||
const parts = hash.split('/').filter(Boolean);
|
||||
|
||||
if (parts[0] === 'recording' && parts[1]) {
|
||||
return { view: 'detail', recordingId: parseInt(parts[1], 10) };
|
||||
}
|
||||
if (parts[0] === 'calendar' && parts[1]) {
|
||||
return { view: 'calendar', day: parts[1] };
|
||||
}
|
||||
|
||||
const validViews = ['dashboard', 'calendar', 'search', 'highlights'];
|
||||
const view = validViews.includes(parts[0]) ? parts[0] : 'dashboard';
|
||||
return { view };
|
||||
}
|
||||
|
||||
// Build hash from route info
|
||||
function buildHash(view, options = {}) {
|
||||
if (view === 'detail' && options.recordingId) {
|
||||
return `#/recording/${options.recordingId}`;
|
||||
}
|
||||
if (view === 'calendar' && options.day) {
|
||||
return `#/calendar/${options.day}`;
|
||||
}
|
||||
return `#/${view}`;
|
||||
}
|
||||
|
||||
// Transform API recording to frontend format
|
||||
function transformRecording(rec) {
|
||||
const startTime = new Date(rec.recorded_at);
|
||||
const durationMinutes = (rec.duration || 0) / 60;
|
||||
const endTime = new Date(startTime.getTime() + durationMinutes * 60 * 1000);
|
||||
|
||||
return {
|
||||
id: rec.id,
|
||||
source: rec.source_name,
|
||||
quality: 'good', // API doesn't track quality, default to good
|
||||
durationMinutes,
|
||||
startTime,
|
||||
endTime,
|
||||
fileSizeMB: rec.file_size_bytes ? Math.round(rec.file_size_bytes / 1024 / 1024) : Math.round(durationMinutes * 0.9),
|
||||
transcript: (rec.segments || []).map(s => ({
|
||||
id: `${rec.id}-seg-${s.id}`,
|
||||
startSeconds: s.start_time,
|
||||
endSeconds: s.end_time,
|
||||
text: s.text,
|
||||
confidence: s.confidence || 0.9,
|
||||
})),
|
||||
hasTranscript: (rec.segments || []).length > 0,
|
||||
highlights: (rec.highlights || []).map(h => ({
|
||||
id: `h-${h.id}`,
|
||||
recordingId: h.recording_id,
|
||||
segmentId: h.segment_id,
|
||||
startSeconds: h.start_seconds,
|
||||
endSeconds: h.end_seconds || null,
|
||||
tag: h.tag,
|
||||
note: h.note || '',
|
||||
createdAt: new Date(h.created_at),
|
||||
})),
|
||||
sampleRate: rec.sample_rate || 44100,
|
||||
bitDepth: rec.bit_depth || 16,
|
||||
peakDB: -30,
|
||||
audioPath: rec.audio_path,
|
||||
};
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [data, setData] = useStateApp({ recordings: [], highlights: [], devices: {} });
|
||||
const [loading, setLoading] = useStateApp(true);
|
||||
const [error, setError] = useStateApp(null);
|
||||
|
||||
// Lift highlights state so adding/removing works across views
|
||||
const [highlights, setHighlights] = useStateApp([]);
|
||||
|
||||
// Initialize from URL hash
|
||||
const initialRoute = parseHash();
|
||||
const [view, setViewState] = useStateApp(initialRoute.view);
|
||||
const [selectedDay, setSelectedDayState] = useStateApp(initialRoute.day || null);
|
||||
const [selectedRecording, setSelectedRecording] = useStateApp(null);
|
||||
const [loadingDetail, setLoadingDetail] = useStateApp(false);
|
||||
const [initialSeekTime, setInitialSeekTime] = useStateApp(null);
|
||||
|
||||
// Track if we should skip pushing to history (for popstate handling)
|
||||
const skipHistoryPush = useRefApp(false);
|
||||
|
||||
// Update URL when view changes
|
||||
function setView(newView) {
|
||||
setViewState(newView);
|
||||
if (newView !== 'detail') {
|
||||
setSelectedRecording(null);
|
||||
}
|
||||
if (!skipHistoryPush.current) {
|
||||
const hash = buildHash(newView, { day: selectedDay });
|
||||
if (window.location.hash !== hash) {
|
||||
window.history.pushState(null, '', hash);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update URL when selected day changes
|
||||
function setSelectedDay(day) {
|
||||
setSelectedDayState(day);
|
||||
if (view === 'calendar' && !skipHistoryPush.current) {
|
||||
const hash = buildHash('calendar', { day });
|
||||
if (window.location.hash !== hash) {
|
||||
window.history.pushState(null, '', hash);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set initial hash if empty
|
||||
useEffectApp(() => {
|
||||
if (!window.location.hash) {
|
||||
window.history.replaceState(null, '', '#/dashboard');
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Handle browser back/forward
|
||||
useEffectApp(() => {
|
||||
function handlePopState() {
|
||||
skipHistoryPush.current = true;
|
||||
const route = parseHash();
|
||||
setViewState(route.view);
|
||||
if (route.day) {
|
||||
setSelectedDayState(route.day);
|
||||
}
|
||||
if (route.view === 'detail' && route.recordingId) {
|
||||
fetchRecordingDetail(route.recordingId);
|
||||
} else {
|
||||
setSelectedRecording(null);
|
||||
}
|
||||
skipHistoryPush.current = false;
|
||||
}
|
||||
|
||||
window.addEventListener('popstate', handlePopState);
|
||||
return () => window.removeEventListener('popstate', handlePopState);
|
||||
}, []);
|
||||
|
||||
// Fetch full recording details (with transcript) when selecting a recording
|
||||
async function fetchRecordingDetail(recordingId) {
|
||||
setLoadingDetail(true);
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/v1/recordings/${recordingId}`);
|
||||
if (!res.ok) throw new Error('Failed to fetch recording');
|
||||
const rec = await res.json();
|
||||
const transformed = transformRecording(rec);
|
||||
|
||||
// Update the recording in our data
|
||||
setData(prev => ({
|
||||
...prev,
|
||||
recordings: prev.recordings.map(r =>
|
||||
r.id === recordingId ? transformed : r
|
||||
),
|
||||
}));
|
||||
|
||||
setSelectedRecording(transformed);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch recording detail:', err);
|
||||
} finally {
|
||||
setLoadingDetail(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper to select recording and fetch its details
|
||||
// Optional seekTime to jump to a specific position (e.g., from highlights)
|
||||
function selectRecording(rec, seekTime = null) {
|
||||
if (rec && rec.id) {
|
||||
setInitialSeekTime(seekTime);
|
||||
fetchRecordingDetail(rec.id);
|
||||
setViewState('detail');
|
||||
if (!skipHistoryPush.current) {
|
||||
const hash = buildHash('detail', { recordingId: rec.id });
|
||||
window.history.pushState(null, '', hash);
|
||||
}
|
||||
} else {
|
||||
setSelectedRecording(null);
|
||||
setInitialSeekTime(null);
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch data from API
|
||||
useEffectApp(() => {
|
||||
async function fetchData() {
|
||||
try {
|
||||
const [recordingsRes, sourcesRes, highlightsRes] = await Promise.all([
|
||||
fetch(`${API_BASE}/api/v1/recordings?limit=1000`),
|
||||
fetch(`${API_BASE}/api/v1/sources`),
|
||||
fetch(`${API_BASE}/api/v1/highlights?limit=1000`),
|
||||
]);
|
||||
|
||||
if (!recordingsRes.ok) throw new Error('Failed to fetch recordings');
|
||||
|
||||
const recordingsData = await recordingsRes.json();
|
||||
const sourcesData = await sourcesRes.json();
|
||||
const highlightsData = await highlightsRes.json();
|
||||
|
||||
// Transform recordings
|
||||
const recordings = recordingsData.recordings.map(transformRecording);
|
||||
|
||||
// Transform sources to devices format
|
||||
const devices = {};
|
||||
for (const src of sourcesData.sources || []) {
|
||||
devices[src.source_name] = {
|
||||
name: src.source_name.charAt(0).toUpperCase() + src.source_name.slice(1),
|
||||
lastSeen: src.last_recording ? new Date(src.last_recording) : new Date(),
|
||||
model: src.source_name,
|
||||
totalRecordings: src.recording_count,
|
||||
totalHours: src.total_hours || 0,
|
||||
};
|
||||
}
|
||||
|
||||
// Transform highlights
|
||||
const allHighlights = (highlightsData.highlights || []).map(h => ({
|
||||
id: `h-${h.id}`,
|
||||
recordingId: h.recording_id,
|
||||
segmentId: h.segment_id,
|
||||
startSeconds: h.start_seconds,
|
||||
endSeconds: h.end_seconds || null,
|
||||
tag: h.tag,
|
||||
note: h.note || '',
|
||||
createdAt: new Date(h.created_at),
|
||||
}));
|
||||
|
||||
setData({ recordings, highlights: allHighlights, devices });
|
||||
setHighlights(allHighlights);
|
||||
|
||||
// Handle initial URL route
|
||||
const route = parseHash();
|
||||
|
||||
// Set selected day from URL or default to most recent
|
||||
if (route.day) {
|
||||
setSelectedDayState(route.day);
|
||||
} else if (recordings.length > 0) {
|
||||
const sorted = [...recordings].sort((a, b) => b.startTime - a.startTime);
|
||||
setSelectedDayState(sorted[0].startTime.toISOString().slice(0, 10));
|
||||
}
|
||||
|
||||
// If URL has a recording ID, fetch it
|
||||
if (route.view === 'detail' && route.recordingId) {
|
||||
fetchRecordingDetail(route.recordingId);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch data:', err);
|
||||
setError(err.message);
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', color: 'var(--text2)' }}>
|
||||
Loading recordings...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', color: 'var(--red)' }}>
|
||||
Error: {error}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// navigateTo is now just an alias for setView (which handles URL updates)
|
||||
const navigateTo = setView;
|
||||
|
||||
// Augment data with live highlights
|
||||
const liveData = {
|
||||
...data,
|
||||
highlights,
|
||||
recordings: data.recordings.map(r => ({
|
||||
...r,
|
||||
highlights: highlights.filter(h => h.recordingId === r.id),
|
||||
})),
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>
|
||||
<Sidebar view={view === 'detail' ? '_detail' : view} setView={navigateTo} data={liveData} />
|
||||
|
||||
<main style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||||
{/* Top bar */}
|
||||
<div style={{
|
||||
height: 40, flexShrink: 0, borderBottom: '1px solid var(--border)',
|
||||
background: 'var(--bg2)', display: 'flex', alignItems: 'center',
|
||||
padding: '0 20px', gap: 12,
|
||||
}}>
|
||||
{view === 'detail' && selectedRecording && (
|
||||
<button onClick={() => setView('calendar')} style={{ color: 'var(--text3)', fontSize: 12, fontFamily: 'var(--font-mono)' }}>
|
||||
‹ {selectedRecording.startTime.toLocaleDateString([], { month: 'short', day: 'numeric' })}
|
||||
</button>
|
||||
)}
|
||||
<div style={{ flex: 1 }} />
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)' }}>
|
||||
{new Date().toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' })}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* View content */}
|
||||
<div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
|
||||
{view === 'dashboard' && (
|
||||
<Dashboard
|
||||
data={liveData}
|
||||
setView={navigateTo}
|
||||
setSelectedDay={setSelectedDay}
|
||||
setSelectedRecording={selectRecording}
|
||||
/>
|
||||
)}
|
||||
{view === 'calendar' && (
|
||||
<DayView
|
||||
data={liveData}
|
||||
selectedDay={selectedDay}
|
||||
setSelectedDay={setSelectedDay}
|
||||
setSelectedRecording={selectRecording}
|
||||
setView={navigateTo}
|
||||
/>
|
||||
)}
|
||||
{view === 'search' && (
|
||||
<SearchView
|
||||
data={liveData}
|
||||
setSelectedRecording={selectRecording}
|
||||
setView={navigateTo}
|
||||
/>
|
||||
)}
|
||||
{view === 'highlights' && (
|
||||
<HighlightsView
|
||||
data={liveData}
|
||||
highlights={highlights}
|
||||
setSelectedRecording={selectRecording}
|
||||
setView={navigateTo}
|
||||
/>
|
||||
)}
|
||||
{loadingDetail && (
|
||||
<div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', color: 'var(--text2)' }}>
|
||||
Loading recording...
|
||||
</div>
|
||||
)}
|
||||
{view === 'detail' && selectedRecording && !loadingDetail && (
|
||||
<RecordingDetail
|
||||
recording={liveData.recordings.find(r => r.id === selectedRecording.id) || selectedRecording}
|
||||
data={liveData}
|
||||
onBack={() => setView('calendar')}
|
||||
allHighlights={highlights}
|
||||
setAllHighlights={setHighlights}
|
||||
initialSeekTime={initialSeekTime}
|
||||
onSeekHandled={() => setInitialSeekTime(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(<App />);
|
||||
213
clio-ui/components/Dashboard.jsx
Normal file
213
clio-ui/components/Dashboard.jsx
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
// Dashboard view: stats, calendar heatmap, recent recordings
|
||||
function Dashboard({ data, setView, setSelectedDay, setSelectedRecording }) {
|
||||
const now = new Date();
|
||||
|
||||
// Aggregate stats
|
||||
const totalHours = data.recordings.reduce((a, r) => a + r.durationMinutes / 60, 0);
|
||||
const totalGB = data.recordings.reduce((a, r) => a + r.fileSizeMB, 0) / 1024;
|
||||
const transcribedCount = data.recordings.filter(r => r.hasTranscript).length;
|
||||
const highlightCount = data.highlights.length;
|
||||
|
||||
// By source
|
||||
const bySrc = {};
|
||||
for (const r of data.recordings) {
|
||||
bySrc[r.source] = (bySrc[r.source] || 0) + 1;
|
||||
}
|
||||
|
||||
// Calendar heatmap: last 8 months
|
||||
const calStart = new Date(now);
|
||||
calStart.setMonth(calStart.getMonth() - 7);
|
||||
calStart.setDate(1);
|
||||
|
||||
// Build day map
|
||||
const dayMap = {};
|
||||
for (const r of data.recordings) {
|
||||
const key = r.startTime.toISOString().slice(0, 10);
|
||||
if (!dayMap[key]) dayMap[key] = { count: 0, minutes: 0 };
|
||||
dayMap[key].count++;
|
||||
dayMap[key].minutes += r.durationMinutes;
|
||||
}
|
||||
|
||||
const maxMinutes = Math.max(...Object.values(dayMap).map(d => d.minutes), 1);
|
||||
|
||||
// Recent recordings
|
||||
const recent = [...data.recordings]
|
||||
.sort((a, b) => b.startTime - a.startTime)
|
||||
.slice(0, 8);
|
||||
|
||||
function handleDayClick(dateStr) {
|
||||
setSelectedDay(dateStr);
|
||||
setView('calendar');
|
||||
}
|
||||
|
||||
function fmtDuration(min) {
|
||||
const h = Math.floor(min / 60);
|
||||
const m = min % 60;
|
||||
return h > 0 ? `${h}h ${m}m` : `${m}m`;
|
||||
}
|
||||
|
||||
function qualityClass(q) {
|
||||
return `q-${q}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ flex: 1, overflow: 'auto', padding: '24px 28px', display: 'flex', flexDirection: 'column', gap: 24 }}>
|
||||
|
||||
{/* Stat cards */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
|
||||
{[
|
||||
{ label: 'Recordings', value: data.recordings.length.toLocaleString(), sub: 'total files' },
|
||||
{ label: 'Total Duration', value: `${Math.round(totalHours)}h`, sub: `${Math.round(totalHours / 24)} days of audio` },
|
||||
{ label: 'Storage Used', value: `${totalGB.toFixed(1)} GB`, sub: `avg ${(totalGB / data.recordings.length * 1024).toFixed(0)} MB/file` },
|
||||
{ label: 'Highlights', value: highlightCount, sub: `${transcribedCount} transcribed` },
|
||||
].map(card => (
|
||||
<div key={card.label} style={{
|
||||
background: 'var(--bg2)', border: '1px solid var(--border)',
|
||||
borderRadius: 6, padding: '16px 18px',
|
||||
}}>
|
||||
<div style={{ fontSize: 11, color: 'var(--text3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontFamily: 'var(--font-mono)', marginBottom: 6 }}>{card.label}</div>
|
||||
<div style={{ fontSize: 28, fontFamily: 'var(--font-mono)', fontWeight: 500, color: 'var(--amber)', lineHeight: 1 }}>{card.value}</div>
|
||||
<div style={{ fontSize: 11, color: 'var(--text3)', marginTop: 5, fontFamily: 'var(--font-mono)' }}>{card.sub}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Source breakdown */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
|
||||
{Object.entries(bySrc).map(([src, count]) => {
|
||||
const srcHours = data.recordings.filter(r => r.source === src).reduce((a, r) => a + r.durationMinutes / 60, 0);
|
||||
return (
|
||||
<div key={src} style={{ background: 'var(--bg2)', border: '1px solid var(--border)', borderRadius: 6, padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 14 }}>
|
||||
<div>
|
||||
<span className={`source-pill source-${src}`}>{src}</span>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 18, color: 'var(--text)', fontWeight: 500 }}>{count} <span style={{ fontSize: 12, color: 'var(--text3)' }}>files</span></div>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text3)' }}>{Math.round(srcHours)}h recorded</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Calendar heatmap */}
|
||||
<div style={{ background: 'var(--bg2)', border: '1px solid var(--border)', borderRadius: 6, padding: '18px 20px' }}>
|
||||
<div style={{ fontSize: 11, color: 'var(--text3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontFamily: 'var(--font-mono)', marginBottom: 14 }}>Activity — Last 8 Months</div>
|
||||
<CalendarHeatmap dayMap={dayMap} maxMinutes={maxMinutes} onDayClick={handleDayClick} />
|
||||
</div>
|
||||
|
||||
{/* Recent recordings */}
|
||||
<div style={{ background: 'var(--bg2)', border: '1px solid var(--border)', borderRadius: 6, padding: '18px 20px' }}>
|
||||
<div style={{ fontSize: 11, color: 'var(--text3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontFamily: 'var(--font-mono)', marginBottom: 14 }}>Recent Recordings</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{recent.map(r => (
|
||||
<RecordingRow key={r.id} recording={r} onClick={() => { setSelectedRecording(r); setView('detail'); }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CalendarHeatmap({ dayMap, maxMinutes, onDayClick }) {
|
||||
const now = new Date();
|
||||
const months = [];
|
||||
|
||||
for (let m = 7; m >= 0; m--) {
|
||||
const d = new Date(now.getFullYear(), now.getMonth() - m, 1);
|
||||
months.push({ year: d.getFullYear(), month: d.getMonth(), label: d.toLocaleString('default', { month: 'short' }) + ' ' + d.getFullYear() });
|
||||
}
|
||||
|
||||
const monthNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
|
||||
|
||||
function intensityColor(minutes) {
|
||||
if (!minutes) return 'var(--bg4)';
|
||||
const t = Math.min(minutes / maxMinutes, 1);
|
||||
if (t < 0.2) return 'oklch(0.35 0.08 65)';
|
||||
if (t < 0.5) return 'oklch(0.50 0.11 65)';
|
||||
if (t < 0.8) return 'oklch(0.65 0.13 65)';
|
||||
return 'oklch(0.75 0.15 65)';
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 16, overflowX: 'auto', paddingBottom: 4 }}>
|
||||
{months.map(({ year, month, label }) => {
|
||||
const firstDay = new Date(year, month, 1);
|
||||
const lastDay = new Date(year, month + 1, 0);
|
||||
const startDow = firstDay.getDay(); // 0=Sun
|
||||
const daysInMonth = lastDay.getDate();
|
||||
|
||||
const cells = [];
|
||||
// Empty cells for offset
|
||||
for (let i = 0; i < startDow; i++) {
|
||||
cells.push(<div key={`empty-${i}`} style={{ width: 14, height: 14 }} />);
|
||||
}
|
||||
for (let d = 1; d <= daysInMonth; d++) {
|
||||
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
|
||||
const info = dayMap[dateStr];
|
||||
const isToday = dateStr === new Date().toISOString().slice(0, 10);
|
||||
cells.push(
|
||||
<div
|
||||
key={d}
|
||||
onClick={() => info && onDayClick(dateStr)}
|
||||
title={info ? `${dateStr}: ${info.count} recordings, ${Math.round(info.minutes / 60)}h` : dateStr}
|
||||
style={{
|
||||
width: 14, height: 14, borderRadius: 2,
|
||||
background: intensityColor(info?.minutes),
|
||||
cursor: info ? 'pointer' : 'default',
|
||||
outline: isToday ? '2px solid var(--amber)' : 'none',
|
||||
outlineOffset: 1,
|
||||
transition: 'transform 0.1s',
|
||||
}}
|
||||
onMouseEnter={e => { if (info) e.target.style.transform = 'scale(1.3)'; }}
|
||||
onMouseLeave={e => { e.target.style.transform = 'scale(1)'; }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={label} style={{ flexShrink: 0 }}>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)', marginBottom: 6, whiteSpace: 'nowrap' }}>{label}</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 14px)', gap: 3 }}>{cells}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RecordingRow({ recording, onClick }) {
|
||||
const r = recording;
|
||||
const timeStr = r.startTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
const dateStr = r.startTime.toLocaleDateString([], { month: 'short', day: 'numeric' });
|
||||
const dur = `${Math.floor(r.durationMinutes / 60)}h ${Math.round(r.durationMinutes % 60)}m`;
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: 12,
|
||||
padding: '9px 12px', borderRadius: 4, cursor: 'pointer',
|
||||
transition: 'background 0.1s',
|
||||
}}
|
||||
onMouseEnter={e => e.currentTarget.style.background = 'var(--bg3)'}
|
||||
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
|
||||
>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text3)', width: 80, flexShrink: 0 }}>{dateStr} {timeStr}</div>
|
||||
<span className={`source-pill source-${r.source}`}>{r.source}</span>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text2)', width: 60, flexShrink: 0 }}>{dur}</div>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, flexShrink: 0 }} className={`q-${r.quality}`}>{r.quality}</div>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)', flexShrink: 0 }}>{r.fileSizeMB} MB</div>
|
||||
{r.highlights.length > 0 && (
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--amber)', background: 'var(--amber-glow)', padding: '1px 6px', borderRadius: 3 }}>
|
||||
{r.highlights.length} ◈
|
||||
</div>
|
||||
)}
|
||||
{r.hasTranscript && (
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)' }}>✦ transcript</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Object.assign(window, { Dashboard, CalendarHeatmap, RecordingRow });
|
||||
337
clio-ui/components/DayView.jsx
Normal file
337
clio-ui/components/DayView.jsx
Normal file
|
|
@ -0,0 +1,337 @@
|
|||
// DayView: calendar month grid + day timeline with audio density visualization
|
||||
const { useState: useStateDV, useEffect: useEffectDV, useRef: useRefDV } = React;
|
||||
|
||||
function DayView({ data, selectedDay, setSelectedDay, setSelectedRecording, setView }) {
|
||||
const now = new Date();
|
||||
const [viewMonth, setViewMonth] = useStateDV(() => {
|
||||
if (selectedDay) {
|
||||
const d = new Date(selectedDay);
|
||||
return { year: d.getFullYear(), month: d.getMonth() };
|
||||
}
|
||||
return { year: now.getFullYear(), month: now.getMonth() };
|
||||
});
|
||||
|
||||
// Build day map
|
||||
const dayMap = {};
|
||||
for (const r of data.recordings) {
|
||||
const key = r.startTime.toISOString().slice(0, 10);
|
||||
if (!dayMap[key]) dayMap[key] = [];
|
||||
dayMap[key].push(r);
|
||||
}
|
||||
|
||||
const maxCount = Math.max(...Object.values(dayMap).map(d => d.length), 1);
|
||||
|
||||
// Calendar grid
|
||||
const { year, month } = viewMonth;
|
||||
const firstDay = new Date(year, month, 1);
|
||||
const lastDay = new Date(year, month + 1, 0);
|
||||
const startDow = firstDay.getDay();
|
||||
const daysInMonth = lastDay.getDate();
|
||||
|
||||
const prevMonth = () => {
|
||||
setViewMonth(m => {
|
||||
const d = new Date(m.year, m.month - 1, 1);
|
||||
return { year: d.getFullYear(), month: d.getMonth() };
|
||||
});
|
||||
};
|
||||
const nextMonth = () => {
|
||||
setViewMonth(m => {
|
||||
const d = new Date(m.year, m.month + 1, 1);
|
||||
return { year: d.getFullYear(), month: d.getMonth() };
|
||||
});
|
||||
};
|
||||
|
||||
const monthLabel = firstDay.toLocaleString('default', { month: 'long', year: 'numeric' });
|
||||
|
||||
const dayRecs = selectedDay ? (dayMap[selectedDay] || []).sort((a, b) => a.startTime - b.startTime) : [];
|
||||
|
||||
function fmtDay(dateStr) {
|
||||
const d = new Date(dateStr + 'T12:00:00');
|
||||
return d.toLocaleDateString([], { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
|
||||
|
||||
{/* Left: Month calendar */}
|
||||
<div style={{
|
||||
width: 300, flexShrink: 0, borderRight: '1px solid var(--border)',
|
||||
background: 'var(--bg2)', display: 'flex', flexDirection: 'column',
|
||||
padding: '20px 16px', gap: 16, overflow: 'auto',
|
||||
}}>
|
||||
{/* Month nav */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<button onClick={prevMonth} style={{ color: 'var(--text2)', fontSize: 16, padding: '4px 8px', borderRadius: 4 }}>‹</button>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text)', fontWeight: 500 }}>{monthLabel}</div>
|
||||
<button onClick={nextMonth} style={{ color: 'var(--text2)', fontSize: 16, padding: '4px 8px', borderRadius: 4 }}>›</button>
|
||||
</div>
|
||||
|
||||
{/* Weekday headers */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2 }}>
|
||||
{['S','M','T','W','T','F','S'].map((d, i) => (
|
||||
<div key={i} style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)', textAlign: 'center', paddingBottom: 4 }}>{d}</div>
|
||||
))}
|
||||
{/* Empty cells */}
|
||||
{Array.from({ length: startDow }).map((_, i) => <div key={`e${i}`} />)}
|
||||
{/* Day cells */}
|
||||
{Array.from({ length: daysInMonth }).map((_, i) => {
|
||||
const d = i + 1;
|
||||
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
|
||||
const recs = dayMap[dateStr] || [];
|
||||
const isSelected = selectedDay === dateStr;
|
||||
const isToday = dateStr === now.toISOString().slice(0, 10);
|
||||
const hasRecs = recs.length > 0;
|
||||
const intensity = hasRecs ? recs.length / maxCount : 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={d}
|
||||
onClick={() => hasRecs && setSelectedDay(dateStr)}
|
||||
style={{
|
||||
position: 'relative',
|
||||
aspectRatio: '1',
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
|
||||
borderRadius: 4,
|
||||
cursor: hasRecs ? 'pointer' : 'default',
|
||||
background: isSelected ? 'var(--amber)' : isToday ? 'var(--bg4)' : 'transparent',
|
||||
outline: isToday && !isSelected ? '1px solid var(--border)' : 'none',
|
||||
transition: 'background 0.1s',
|
||||
}}
|
||||
onMouseEnter={e => { if (hasRecs && !isSelected) e.currentTarget.style.background = 'var(--bg4)'; }}
|
||||
onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = isToday ? 'var(--bg4)' : 'transparent'; }}
|
||||
>
|
||||
<span style={{
|
||||
fontFamily: 'var(--font-mono)', fontSize: 11,
|
||||
color: isSelected ? 'var(--bg)' : isToday ? 'var(--amber)' : hasRecs ? 'var(--text)' : 'var(--text3)',
|
||||
fontWeight: isSelected || isToday ? 600 : 400,
|
||||
lineHeight: 1,
|
||||
}}>{d}</span>
|
||||
{hasRecs && (
|
||||
<div style={{
|
||||
position: 'absolute', bottom: 3,
|
||||
display: 'flex', gap: 1, justifyContent: 'center',
|
||||
}}>
|
||||
{recs.slice(0, 3).map((_, ri) => (
|
||||
<div key={ri} style={{
|
||||
width: 3, height: 3, borderRadius: '50%',
|
||||
background: isSelected ? 'var(--bg)' : 'var(--amber)',
|
||||
opacity: 0.8,
|
||||
}} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Day summary */}
|
||||
{selectedDay && dayRecs.length > 0 && (
|
||||
<div style={{ borderTop: '1px solid var(--border)', paddingTop: 12 }}>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>
|
||||
{dayRecs.length} recordings · {Math.round(dayRecs.reduce((a, r) => a + r.durationMinutes, 0) / 60)}h total
|
||||
</div>
|
||||
{['portable','stationary','phone'].map(src => {
|
||||
const count = dayRecs.filter(r => r.source === src).length;
|
||||
if (!count) return null;
|
||||
return (
|
||||
<div key={src} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
|
||||
<span className={`source-pill source-${src}`}>{src}</span>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text2)' }}>{count}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: Day timeline */}
|
||||
<div style={{ flex: 1, overflow: 'auto', padding: '20px 24px' }}>
|
||||
{!selectedDay ? (
|
||||
<div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text3)', fontFamily: 'var(--font-mono)', fontSize: 13 }}>
|
||||
Select a day to view recordings
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text)', marginBottom: 6 }}>
|
||||
{fmtDay(selectedDay)}
|
||||
</div>
|
||||
{dayRecs.length === 0 ? (
|
||||
<div style={{ color: 'var(--text3)', fontFamily: 'var(--font-mono)', fontSize: 12, marginTop: 20 }}>No recordings this day.</div>
|
||||
) : (
|
||||
<DayTimeline recordings={dayRecs} onSelect={r => { setSelectedRecording(r); setView('detail'); }} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DayTimeline({ recordings, onSelect }) {
|
||||
// 24-hour timeline with recording bars
|
||||
const HOUR_H = 52;
|
||||
const LABEL_W = 44;
|
||||
const BAR_W = 260;
|
||||
|
||||
const hours = Array.from({ length: 24 }, (_, i) => i);
|
||||
|
||||
function recTop(r) {
|
||||
const h = r.startTime.getHours() + r.startTime.getMinutes() / 60;
|
||||
return h * HOUR_H;
|
||||
}
|
||||
function recHeight(r) {
|
||||
return Math.max((r.durationMinutes / 60) * HOUR_H, 8);
|
||||
}
|
||||
|
||||
function qualityColor(q) {
|
||||
const map = { excellent: 'var(--green)', good: 'var(--teal)', fair: 'var(--amber)', poor: 'var(--red)' };
|
||||
return map[q] || 'var(--text3)';
|
||||
}
|
||||
|
||||
const totalH = 24 * HOUR_H;
|
||||
|
||||
// Density mini-bars per hour (minutes of audio per hour)
|
||||
const densityPerHour = Array(24).fill(0);
|
||||
for (const r of recordings) {
|
||||
const startH = r.startTime.getHours() + r.startTime.getMinutes() / 60;
|
||||
const endH = startH + r.durationMinutes / 60;
|
||||
for (let h = 0; h < 24; h++) {
|
||||
const overlapStart = Math.max(h, startH);
|
||||
const overlapEnd = Math.min(h + 1, endH);
|
||||
if (overlapEnd > overlapStart) {
|
||||
densityPerHour[h] += (overlapEnd - overlapStart) * 60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 16, alignItems: 'flex-start', marginTop: 12 }}>
|
||||
{/* Timeline */}
|
||||
<div style={{ position: 'relative', height: totalH, width: LABEL_W + BAR_W + 32, flexShrink: 0 }}>
|
||||
{/* Hour lines + labels */}
|
||||
{hours.map(h => (
|
||||
<div key={h} style={{ position: 'absolute', top: h * HOUR_H, left: 0, right: 0, display: 'flex', alignItems: 'flex-start', gap: 8 }}>
|
||||
<div style={{ width: LABEL_W, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)', textAlign: 'right', flexShrink: 0, paddingTop: 1 }}>
|
||||
{String(h).padStart(2, '0')}:00
|
||||
</div>
|
||||
<div style={{ flex: 1, height: 1, background: 'var(--border)', marginTop: 6 }} />
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Recording bars */}
|
||||
{recordings.map(r => {
|
||||
const top = recTop(r);
|
||||
const height = recHeight(r);
|
||||
const srcColors = { portable: 'var(--amber)', stationary: 'var(--teal)', phone: 'var(--green)' };
|
||||
const srcColor = srcColors[r.source] || 'var(--text3)';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={r.id}
|
||||
onClick={() => onSelect(r)}
|
||||
title={`${r.source} · ${Math.floor(r.durationMinutes / 60)}h ${Math.round(r.durationMinutes % 60)}m · ${r.quality}`}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: top + 1,
|
||||
left: LABEL_W + 12,
|
||||
width: BAR_W,
|
||||
height: height - 2,
|
||||
background: `${srcColor}22`,
|
||||
border: `1px solid ${srcColor}66`,
|
||||
borderLeft: `3px solid ${srcColor}`,
|
||||
borderRadius: '0 4px 4px 0',
|
||||
cursor: 'pointer',
|
||||
display: 'flex', alignItems: 'flex-start', gap: 8, padding: '4px 8px',
|
||||
overflow: 'hidden',
|
||||
transition: 'background 0.1s',
|
||||
zIndex: 1,
|
||||
}}
|
||||
onMouseEnter={e => { e.currentTarget.style.background = `${srcColor}40`; }}
|
||||
onMouseLeave={e => { e.currentTarget.style.background = `${srcColor}22`; }}
|
||||
>
|
||||
<span className={`source-pill source-${r.source}`} style={{ fontSize: 9, padding: '1px 5px', flexShrink: 0 }}>{r.source}</span>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text2)', flexShrink: 0 }}>
|
||||
{Math.floor(r.durationMinutes / 60)}h {Math.round(r.durationMinutes % 60)}m
|
||||
</span>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10 }} className={`q-${r.quality}`}>{r.quality}</span>
|
||||
{r.highlights.length > 0 && (
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--amber)' }}>◈ {r.highlights.length}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Density strip - clickable to go to recording at that hour */}
|
||||
<div style={{ flexShrink: 0, width: 40 }}>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--text3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4, writingMode: 'horizontal-tb' }}>density</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{densityPerHour.map((mins, h) => {
|
||||
const pct = mins / 60;
|
||||
// Find recording that covers this hour
|
||||
const recAtHour = recordings.find(r => {
|
||||
const startH = r.startTime.getHours() + r.startTime.getMinutes() / 60;
|
||||
const endH = startH + r.durationMinutes / 60;
|
||||
return h >= startH && h < endH;
|
||||
});
|
||||
return (
|
||||
<div
|
||||
key={h}
|
||||
onClick={() => recAtHour && onSelect(recAtHour)}
|
||||
style={{
|
||||
height: HOUR_H,
|
||||
display: 'flex',
|
||||
alignItems: 'stretch',
|
||||
cursor: recAtHour ? 'pointer' : 'default',
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
width: Math.round(pct * 36) + 'px',
|
||||
minWidth: pct > 0 ? 2 : 0,
|
||||
background: pct > 0.8 ? 'var(--amber)' : pct > 0.3 ? 'var(--amber-dim)' : 'var(--bg4)',
|
||||
transition: 'width 0.2s, opacity 0.1s',
|
||||
opacity: recAtHour ? 1 : 0.5,
|
||||
}} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recording list for quick jump */}
|
||||
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 4 }}>Jump to</div>
|
||||
{recordings.map(r => {
|
||||
const timeStr = r.startTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
return (
|
||||
<div
|
||||
key={r.id}
|
||||
onClick={() => onSelect(r)}
|
||||
style={{
|
||||
background: 'var(--bg2)', border: '1px solid var(--border)', borderRadius: 4,
|
||||
padding: '8px 12px', cursor: 'pointer', transition: 'border-color 0.1s',
|
||||
}}
|
||||
onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--amber)'; }}
|
||||
onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; }}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--amber)' }}>{timeStr}</span>
|
||||
<span className={`source-pill source-${r.source}`}>{r.source}</span>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text2)' }}>{Math.floor(r.durationMinutes / 60)}h {Math.round(r.durationMinutes % 60)}m</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 10 }}>
|
||||
<span className={`q-${r.quality}`} style={{ fontFamily: 'var(--font-mono)', fontSize: 10 }}>{r.quality}</span>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)' }}>{r.sampleRate / 1000}kHz · {r.bitDepth}bit · {r.fileSizeMB}MB</span>
|
||||
{r.hasTranscript && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)' }}>✦ transcript</span>}
|
||||
{r.highlights.length > 0 && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--amber)' }}>◈ {r.highlights.length}</span>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Object.assign(window, { DayView, DayTimeline });
|
||||
171
clio-ui/components/HighlightsView.jsx
Normal file
171
clio-ui/components/HighlightsView.jsx
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
// HighlightsView: all saved highlights across all recordings
|
||||
const { useState: useStateHV, useMemo: useMemoHV } = React;
|
||||
|
||||
function HighlightsView({ data, highlights, setSelectedRecording, setView }) {
|
||||
const [filterTag, setFilterTag] = useStateHV('');
|
||||
const [sortBy, setSortBy] = useStateHV('recent');
|
||||
|
||||
const allTags = [...new Set(highlights.map(h => h.tag))].sort();
|
||||
|
||||
const sorted = useMemoHV(() => {
|
||||
let hs = [...highlights];
|
||||
if (filterTag) hs = hs.filter(h => h.tag === filterTag);
|
||||
if (sortBy === 'recent') hs.sort((a, b) => b.createdAt - a.createdAt);
|
||||
else if (sortBy === 'recording') hs.sort((a, b) => {
|
||||
const ra = data.recordings.find(r => r.id === a.recordingId);
|
||||
const rb = data.recordings.find(r => r.id === b.recordingId);
|
||||
return (rb?.startTime || 0) - (ra?.startTime || 0);
|
||||
});
|
||||
else if (sortBy === 'tag') hs.sort((a, b) => a.tag.localeCompare(b.tag));
|
||||
return hs;
|
||||
}, [highlights, filterTag, sortBy, data]);
|
||||
|
||||
const TAG_COLORS = {
|
||||
important: 'var(--red)', todo: 'var(--amber)', idea: 'var(--teal)',
|
||||
'follow-up': 'var(--amber-dim)', meeting: 'var(--green)', personal: 'var(--text2)', work: 'var(--teal)',
|
||||
};
|
||||
|
||||
function formatTime(secs) {
|
||||
const h = Math.floor(secs / 3600);
|
||||
const m = Math.floor((secs % 3600) / 60);
|
||||
const s = Math.floor(secs % 60);
|
||||
if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
|
||||
return `${m}:${String(s).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function openRecording(highlight) {
|
||||
const rec = data.recordings.find(r => r.id === highlight.recordingId);
|
||||
if (rec) {
|
||||
// Pass the highlight's startSeconds to seek to that position
|
||||
setSelectedRecording(rec, highlight.startSeconds);
|
||||
setView('detail');
|
||||
}
|
||||
}
|
||||
|
||||
// Group by tag for summary
|
||||
const tagCounts = {};
|
||||
for (const h of highlights) tagCounts[h.tag] = (tagCounts[h.tag] || 0) + 1;
|
||||
|
||||
return (
|
||||
<div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
|
||||
{/* Left panel: tag breakdown */}
|
||||
<div style={{ width: 200, flexShrink: 0, borderRight: '1px solid var(--border)', background: 'var(--bg2)', padding: '18px 14px', overflow: 'auto' }}>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12 }}>
|
||||
By Tag · {highlights.length} total
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setFilterTag('')}
|
||||
style={{
|
||||
width: '100%', textAlign: 'left', padding: '7px 10px', borderRadius: 4,
|
||||
fontFamily: 'var(--font-mono)', fontSize: 11,
|
||||
background: !filterTag ? 'var(--amber-glow)' : 'transparent',
|
||||
color: !filterTag ? 'var(--amber)' : 'var(--text2)',
|
||||
borderLeft: !filterTag ? '2px solid var(--amber)' : '2px solid transparent',
|
||||
marginBottom: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<span>All</span>
|
||||
<span style={{ color: 'var(--text3)' }}>{highlights.length}</span>
|
||||
</button>
|
||||
{Object.entries(tagCounts).sort((a, b) => b[1] - a[1]).map(([tag, count]) => {
|
||||
const color = TAG_COLORS[tag] || 'var(--text3)';
|
||||
const isActive = filterTag === tag;
|
||||
return (
|
||||
<button
|
||||
key={tag}
|
||||
onClick={() => setFilterTag(tag)}
|
||||
style={{
|
||||
width: '100%', textAlign: 'left', padding: '7px 10px', borderRadius: 4,
|
||||
fontFamily: 'var(--font-mono)', fontSize: 11,
|
||||
background: isActive ? `${color}18` : 'transparent',
|
||||
color: isActive ? color : 'var(--text2)',
|
||||
borderLeft: isActive ? `2px solid ${color}` : '2px solid transparent',
|
||||
marginBottom: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||
transition: 'all 0.1s',
|
||||
}}
|
||||
>
|
||||
<span>{tag}</span>
|
||||
<span style={{ color: 'var(--text3)' }}>{count}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Right: highlights list */}
|
||||
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||||
<div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border)', background: 'var(--bg2)', display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text2)' }}>
|
||||
{sorted.length} highlight{sorted.length !== 1 ? 's' : ''}
|
||||
{filterTag ? ` · ${filterTag}` : ''}
|
||||
</div>
|
||||
<div style={{ flex: 1 }} />
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)' }}>Sort:</span>
|
||||
{['recent', 'recording', 'tag'].map(s => (
|
||||
<button key={s} onClick={() => setSortBy(s)} style={{
|
||||
fontFamily: 'var(--font-mono)', fontSize: 10, padding: '3px 9px', borderRadius: 3,
|
||||
background: sortBy === s ? 'var(--bg4)' : 'transparent',
|
||||
color: sortBy === s ? 'var(--amber)' : 'var(--text3)',
|
||||
border: `1px solid ${sortBy === s ? 'var(--amber)' : 'var(--border)'}`,
|
||||
}}>{s}</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1, overflow: 'auto', padding: '14px 20px' }}>
|
||||
{sorted.length === 0 ? (
|
||||
<div style={{ color: 'var(--text3)', fontFamily: 'var(--font-mono)', fontSize: 13, padding: '40px 0', textAlign: 'center' }}>
|
||||
No highlights yet.<br /><br />Open a recording and press ◈ Highlight to mark moments.
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))', gap: 10 }}>
|
||||
{sorted.map(h => {
|
||||
const rec = data.recordings.find(r => r.id === h.recordingId);
|
||||
const color = TAG_COLORS[h.tag] || 'var(--text3)';
|
||||
const seg = rec?.transcript?.find(s => s.id === h.segmentId);
|
||||
return (
|
||||
<div
|
||||
key={h.id}
|
||||
onClick={() => openRecording(h)}
|
||||
style={{
|
||||
background: 'var(--bg2)', border: `1px solid var(--border)`,
|
||||
borderLeft: `3px solid ${color}`, borderRadius: '0 6px 6px 0',
|
||||
padding: '12px 14px', cursor: 'pointer', transition: 'border-color 0.1s, background 0.1s',
|
||||
}}
|
||||
onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg3)'; e.currentTarget.style.borderColor = color; }}
|
||||
onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg2)'; e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.borderLeftColor = color; }}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, padding: '1px 6px', borderRadius: 3, background: `${color}22`, color }}>{h.tag}</span>
|
||||
{rec && (
|
||||
<>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)' }}>
|
||||
{rec.startTime.toLocaleDateString([], { month: 'short', day: 'numeric' })}
|
||||
</span>
|
||||
<span className={`source-pill source-${rec.source}`} style={{ fontSize: 9 }}>{rec.source}</span>
|
||||
</>
|
||||
)}
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--amber)', marginLeft: 'auto' }}>
|
||||
{formatTime(h.startSeconds)}
|
||||
</span>
|
||||
</div>
|
||||
{seg && (
|
||||
<div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--text2)', lineHeight: 1.5, marginBottom: h.note ? 6 : 0, textWrap: 'pretty' }}>
|
||||
"{seg.text}"
|
||||
</div>
|
||||
)}
|
||||
{h.note && (
|
||||
<div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--text3)', fontStyle: 'italic' }}>
|
||||
{h.note}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Object.assign(window, { HighlightsView });
|
||||
611
clio-ui/components/RecordingDetail.jsx
Normal file
611
clio-ui/components/RecordingDetail.jsx
Normal file
|
|
@ -0,0 +1,611 @@
|
|||
// RecordingDetail: audio player, transcript, highlights
|
||||
const { useState: useStateRD, useEffect: useEffectRD, useRef: useRefRD, useCallback: useCallbackRD } = React;
|
||||
|
||||
const API_BASE = '';
|
||||
|
||||
function RecordingDetail({ recording: r, data, onBack, allHighlights, setAllHighlights, initialSeekTime, onSeekHandled }) {
|
||||
const [currentTime, setCurrentTime] = useStateRD(0); // seconds into recording
|
||||
const [playing, setPlaying] = useStateRD(false);
|
||||
const [speed, setSpeed] = useStateRD(1.0);
|
||||
const [activeSegId, setActiveSegId] = useStateRD(null);
|
||||
const [showAddHighlight, setShowAddHighlight] = useStateRD(false);
|
||||
const [newHighlightTag, setNewHighlightTag] = useStateRD('important');
|
||||
const [newHighlightNote, setNewHighlightNote] = useStateRD('');
|
||||
const audioRef = useRefRD(null);
|
||||
const transcriptRef = useRefRD(null);
|
||||
|
||||
const totalSeconds = r.durationMinutes * 60;
|
||||
const recHighlights = allHighlights.filter(h => h.recordingId === r.id);
|
||||
|
||||
// Audio URL from API
|
||||
const audioUrl = `${API_BASE}/api/v1/recordings/${r.id}/audio`;
|
||||
|
||||
// Track recording ID to detect when recording changes
|
||||
const lastRecordingId = useRefRD(null);
|
||||
const hasAutoPlayed = useRefRD(false);
|
||||
|
||||
// Reset auto-play flag when recording changes
|
||||
useEffectRD(() => {
|
||||
if (lastRecordingId.current !== r.id) {
|
||||
hasAutoPlayed.current = false;
|
||||
lastRecordingId.current = r.id;
|
||||
}
|
||||
}, [r.id]);
|
||||
|
||||
// Auto-play when recording opens
|
||||
useEffectRD(() => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio || hasAutoPlayed.current) return;
|
||||
|
||||
const doStartPlayback = () => {
|
||||
audio.play().catch(() => {}); // Ignore errors (e.g., browser autoplay policy)
|
||||
hasAutoPlayed.current = true;
|
||||
};
|
||||
|
||||
// If audio is ready, start immediately; otherwise wait for loadedmetadata
|
||||
if (audio.readyState >= 1) {
|
||||
doStartPlayback();
|
||||
} else {
|
||||
audio.addEventListener('loadedmetadata', doStartPlayback, { once: true });
|
||||
return () => audio.removeEventListener('loadedmetadata', doStartPlayback);
|
||||
}
|
||||
}, [r.id]);
|
||||
|
||||
// Handle seeking to initial time (from search results, highlights, etc.)
|
||||
useEffectRD(() => {
|
||||
if (initialSeekTime == null) return;
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
|
||||
const doSeek = () => {
|
||||
audio.currentTime = initialSeekTime;
|
||||
setCurrentTime(initialSeekTime);
|
||||
if (onSeekHandled) onSeekHandled();
|
||||
};
|
||||
|
||||
if (audio.readyState >= 1) {
|
||||
doSeek();
|
||||
} else {
|
||||
audio.addEventListener('loadedmetadata', doSeek, { once: true });
|
||||
return () => audio.removeEventListener('loadedmetadata', doSeek);
|
||||
}
|
||||
}, [initialSeekTime, onSeekHandled]);
|
||||
|
||||
// Sync playback state with audio element
|
||||
useEffectRD(() => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
|
||||
const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
|
||||
const handleEnded = () => setPlaying(false);
|
||||
const handlePlay = () => setPlaying(true);
|
||||
const handlePause = () => setPlaying(false);
|
||||
|
||||
audio.addEventListener('timeupdate', handleTimeUpdate);
|
||||
audio.addEventListener('ended', handleEnded);
|
||||
audio.addEventListener('play', handlePlay);
|
||||
audio.addEventListener('pause', handlePause);
|
||||
|
||||
return () => {
|
||||
audio.removeEventListener('timeupdate', handleTimeUpdate);
|
||||
audio.removeEventListener('ended', handleEnded);
|
||||
audio.removeEventListener('play', handlePlay);
|
||||
audio.removeEventListener('pause', handlePause);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Sync playback rate with speed state
|
||||
useEffectRD(() => {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.playbackRate = speed;
|
||||
}
|
||||
}, [speed]);
|
||||
|
||||
// Track active transcript segment
|
||||
useEffectRD(() => {
|
||||
if (!r.transcript) return;
|
||||
const active = r.transcript.find(s => currentTime >= s.startSeconds && currentTime <= s.endSeconds);
|
||||
setActiveSegId(active ? active.id : null);
|
||||
}, [currentTime, r.transcript]);
|
||||
|
||||
function formatTime(secs) {
|
||||
const h = Math.floor(secs / 3600);
|
||||
const m = Math.floor((secs % 3600) / 60);
|
||||
const s = Math.floor(secs % 60);
|
||||
if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
|
||||
return `${m}:${String(s).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function seek(e) {
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const pct = (e.clientX - rect.left) / rect.width;
|
||||
const newTime = pct * totalSeconds;
|
||||
if (audioRef.current) {
|
||||
audioRef.current.currentTime = newTime;
|
||||
}
|
||||
setCurrentTime(newTime);
|
||||
}
|
||||
|
||||
function togglePlay() {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
if (playing) {
|
||||
audio.pause();
|
||||
} else {
|
||||
audio.play();
|
||||
}
|
||||
}
|
||||
|
||||
function skipTime(delta) {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
const newTime = Math.max(0, Math.min(totalSeconds, audio.currentTime + delta));
|
||||
audio.currentTime = newTime;
|
||||
setCurrentTime(newTime);
|
||||
}
|
||||
|
||||
function seekToTime(secs) {
|
||||
const audio = audioRef.current;
|
||||
if (audio) {
|
||||
audio.currentTime = secs;
|
||||
}
|
||||
setCurrentTime(secs);
|
||||
}
|
||||
|
||||
const [highlightStartTime, setHighlightStartTime] = useStateRD(null);
|
||||
const [highlightEndTime, setHighlightEndTime] = useStateRD(null);
|
||||
|
||||
// When showing add highlight, set start time to current position
|
||||
useEffectRD(() => {
|
||||
if (showAddHighlight && highlightStartTime === null) {
|
||||
setHighlightStartTime(Math.round(currentTime));
|
||||
}
|
||||
}, [showAddHighlight, currentTime, highlightStartTime]);
|
||||
|
||||
async function addHighlight() {
|
||||
const startSecs = highlightStartTime ?? Math.round(currentTime);
|
||||
const endSecs = highlightEndTime; // null for point highlight
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/v1/highlights`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
recording_id: r.id,
|
||||
start_seconds: startSecs,
|
||||
end_seconds: endSecs,
|
||||
tag: newHighlightTag,
|
||||
note: newHighlightNote || null,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error('Failed to create highlight');
|
||||
|
||||
const data = await res.json();
|
||||
const newH = {
|
||||
id: `h-${data.id}`,
|
||||
recordingId: r.id,
|
||||
startSeconds: startSecs,
|
||||
endSeconds: endSecs,
|
||||
tag: newHighlightTag,
|
||||
note: newHighlightNote,
|
||||
createdAt: new Date(),
|
||||
};
|
||||
setAllHighlights(prev => [...prev, newH]);
|
||||
} catch (err) {
|
||||
console.error('Failed to create highlight:', err);
|
||||
}
|
||||
|
||||
setShowAddHighlight(false);
|
||||
setNewHighlightNote('');
|
||||
setHighlightStartTime(null);
|
||||
setHighlightEndTime(null);
|
||||
}
|
||||
|
||||
async function removeHighlight(hid) {
|
||||
// Extract numeric ID from "h-123" format
|
||||
const numericId = hid.startsWith('h-') ? hid.slice(2) : hid;
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/v1/highlights/${numericId}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
if (!res.ok && res.status !== 404) {
|
||||
console.error('Failed to delete highlight');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to delete highlight:', err);
|
||||
}
|
||||
|
||||
setAllHighlights(prev => prev.filter(h => h.id !== hid));
|
||||
}
|
||||
|
||||
const TAGS = ['important', 'todo', 'idea', 'follow-up', 'meeting', 'personal', 'work'];
|
||||
const TAG_COLORS = {
|
||||
important: 'var(--red)', todo: 'var(--amber)', idea: 'var(--teal)',
|
||||
'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: '' },
|
||||
{ label: 'Bit Depth', value: `${r.bitDepth}-bit`, cls: '' },
|
||||
{ label: 'Peak', value: `${r.peakDB.toFixed(1)} dB`, cls: r.peakDB > -30 ? 'q-good' : r.peakDB > -45 ? 'q-fair' : 'q-poor' },
|
||||
{ label: 'Size', value: `${r.fileSizeMB} MB`, cls: '' },
|
||||
{ label: 'Source', value: r.source, cls: `source-${r.source}` },
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||||
{/* Header */}
|
||||
<div style={{ borderBottom: '1px solid var(--border)', padding: '12px 20px', display: 'flex', alignItems: 'center', gap: 12, background: 'var(--bg2)', flexShrink: 0 }}>
|
||||
<button onClick={onBack} style={{ color: 'var(--text2)', fontSize: 18, padding: '2px 6px', borderRadius: 3, lineHeight: 1 }}>‹</button>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text)' }}>
|
||||
{r.startTime.toLocaleString([], { weekday: 'short', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
|
||||
<span style={{ color: 'var(--text3)', marginLeft: 10 }}>#{r.id}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 10, marginTop: 3, alignItems: 'center' }}>
|
||||
<span className={`source-pill source-${r.source}`}>{r.source}</span>
|
||||
{qualityDetails.map(q => (
|
||||
<span key={q.label} style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)' }}>
|
||||
<span style={{ color: 'var(--text3)' }}>{q.label}: </span>
|
||||
<span className={q.cls} style={{ color: q.cls ? undefined : 'var(--text2)' }}>{q.value}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowAddHighlight(s => !s)}
|
||||
style={{
|
||||
fontFamily: 'var(--font-mono)', fontSize: 11,
|
||||
padding: '5px 12px', borderRadius: 4,
|
||||
background: showAddHighlight ? 'var(--amber)' : 'var(--bg4)',
|
||||
color: showAddHighlight ? 'var(--bg)' : 'var(--amber)',
|
||||
border: '1px solid var(--amber)',
|
||||
transition: 'all 0.12s',
|
||||
}}
|
||||
>◈ Highlight</button>
|
||||
</div>
|
||||
|
||||
{/* Add highlight bar */}
|
||||
{showAddHighlight && (
|
||||
<div style={{ background: 'var(--bg3)', borderBottom: '1px solid var(--border)', padding: '10px 20px', display: 'flex', flexDirection: 'column', gap: 8, flexShrink: 0 }}>
|
||||
{/* Time range row */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)' }}>Start:</span>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--amber)', minWidth: 50 }}>
|
||||
{formatTime(highlightStartTime ?? currentTime)}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setHighlightStartTime(Math.round(currentTime))}
|
||||
style={{ fontFamily: 'var(--font-mono)', fontSize: 9, padding: '2px 6px', background: 'var(--bg4)', border: '1px solid var(--border)', borderRadius: 3, color: 'var(--text2)' }}
|
||||
>Set Start</button>
|
||||
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)', marginLeft: 8 }}>End:</span>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: highlightEndTime ? 'var(--amber)' : 'var(--text3)', minWidth: 50 }}>
|
||||
{highlightEndTime ? formatTime(highlightEndTime) : '—'}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setHighlightEndTime(Math.round(currentTime))}
|
||||
style={{ fontFamily: 'var(--font-mono)', fontSize: 9, padding: '2px 6px', background: 'var(--bg4)', border: '1px solid var(--border)', borderRadius: 3, color: 'var(--text2)' }}
|
||||
>Set End</button>
|
||||
{highlightEndTime && (
|
||||
<button
|
||||
onClick={() => setHighlightEndTime(null)}
|
||||
style={{ fontFamily: 'var(--font-mono)', fontSize: 9, padding: '2px 6px', background: 'var(--bg4)', border: '1px solid var(--border)', borderRadius: 3, color: 'var(--text3)' }}
|
||||
>Clear</button>
|
||||
)}
|
||||
|
||||
{highlightEndTime && (
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--teal)', marginLeft: 8 }}>
|
||||
Duration: {formatTime(highlightEndTime - (highlightStartTime ?? currentTime))}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tag and note row */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<div style={{ display: 'flex', gap: 6 }}>
|
||||
{TAGS.map(t => (
|
||||
<button key={t} onClick={() => setNewHighlightTag(t)} style={{
|
||||
fontFamily: 'var(--font-mono)', fontSize: 10, padding: '3px 8px', borderRadius: 3,
|
||||
background: newHighlightTag === t ? TAG_COLORS[t] : 'var(--bg4)',
|
||||
color: newHighlightTag === t ? 'var(--bg)' : 'var(--text2)',
|
||||
border: `1px solid ${TAG_COLORS[t] || 'var(--border)'}`,
|
||||
}}>{t}</button>
|
||||
))}
|
||||
</div>
|
||||
<input
|
||||
value={newHighlightNote}
|
||||
onChange={e => setNewHighlightNote(e.target.value)}
|
||||
placeholder="Note (optional)…"
|
||||
onKeyDown={e => e.key === 'Enter' && addHighlight()}
|
||||
style={{
|
||||
flex: 1, background: 'var(--bg4)', border: '1px solid var(--border)',
|
||||
borderRadius: 4, padding: '4px 10px', color: 'var(--text)',
|
||||
fontFamily: 'var(--font-mono)', fontSize: 11,
|
||||
outline: 'none',
|
||||
}}
|
||||
/>
|
||||
<button onClick={addHighlight} style={{
|
||||
fontFamily: 'var(--font-mono)', fontSize: 11, padding: '4px 12px',
|
||||
background: 'var(--amber)', color: 'var(--bg)', borderRadius: 4, fontWeight: 600,
|
||||
}}>Save</button>
|
||||
<button onClick={() => { setShowAddHighlight(false); setHighlightStartTime(null); setHighlightEndTime(null); }} style={{ color: 'var(--text3)', fontSize: 16 }}>×</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main: player + transcript + highlights */}
|
||||
<div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
|
||||
|
||||
{/* Left: Player + Transcript */}
|
||||
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||||
|
||||
{/* Player */}
|
||||
<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;
|
||||
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
|
||||
// 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 */}
|
||||
<audio ref={audioRef} src={audioUrl} preload="metadata" />
|
||||
|
||||
{/* 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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Transcript */}
|
||||
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||||
{/* Transcript header with scroll-to-current button */}
|
||||
<div style={{ padding: '8px 20px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
|
||||
Transcript · {r.transcript?.length || 0} segments
|
||||
</div>
|
||||
<div style={{ flex: 1 }} />
|
||||
{r.hasTranscript && r.transcript.length > 0 && (
|
||||
<button
|
||||
onClick={() => {
|
||||
// Find the segment closest to current time
|
||||
const el = transcriptRef.current?.querySelector(`[data-seg-id="${activeSegId}"]`);
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
} else {
|
||||
// Find closest segment
|
||||
const closest = r.transcript.reduce((prev, curr) =>
|
||||
Math.abs(curr.startSeconds - currentTime) < Math.abs(prev.startSeconds - currentTime) ? curr : prev
|
||||
);
|
||||
const closestEl = transcriptRef.current?.querySelector(`[data-seg-id="${closest.id}"]`);
|
||||
if (closestEl) closestEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
fontFamily: 'var(--font-mono)', fontSize: 10, padding: '3px 10px',
|
||||
background: 'var(--bg4)', border: '1px solid var(--border)', borderRadius: 4,
|
||||
color: 'var(--amber)', cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
↓ Go to {formatTime(currentTime)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div ref={transcriptRef} style={{ flex: 1, overflow: 'auto', padding: '16px 20px' }}>
|
||||
{!r.hasTranscript || r.transcript.length === 0 ? (
|
||||
<div style={{ color: 'var(--text3)', fontFamily: 'var(--font-mono)', fontSize: 12, padding: '20px 0' }}>
|
||||
No transcript available. Run speech-to-text batch job to generate.
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
{r.transcript.map(seg => {
|
||||
const isActive = seg.id === activeSegId;
|
||||
const hasHighlight = recHighlights.some(h => h.segmentId === seg.id);
|
||||
return (
|
||||
<div
|
||||
key={seg.id}
|
||||
data-seg-id={seg.id}
|
||||
onClick={() => seekToTime(seg.startSeconds)}
|
||||
style={{
|
||||
display: 'flex', gap: 12, padding: '10px 12px', borderRadius: 5,
|
||||
background: isActive ? 'var(--amber-glow)' : 'transparent',
|
||||
border: `1px solid ${isActive ? 'var(--amber-dim)' : hasHighlight ? 'var(--amber-dim)' : 'transparent'}`,
|
||||
cursor: 'pointer', transition: 'all 0.15s',
|
||||
}}
|
||||
onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = 'var(--bg3)'; }}
|
||||
onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent'; }}
|
||||
>
|
||||
<div style={{ flexShrink: 0, paddingTop: 2 }}>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: isActive ? 'var(--amber)' : 'var(--text3)' }}>
|
||||
{formatTime(seg.startSeconds)}
|
||||
</div>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--text3)', marginTop: 2 }}>
|
||||
{Math.round(seg.confidence * 100)}%
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1, fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.6, color: isActive ? 'var(--text)' : 'var(--text2)', textWrap: 'pretty' }}>
|
||||
{seg.text}
|
||||
</div>
|
||||
{hasHighlight && (
|
||||
<div style={{ flexShrink: 0, color: 'var(--amber)', fontSize: 12, paddingTop: 2 }}>◈</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Highlights panel */}
|
||||
<div style={{ width: 260, flexShrink: 0, borderLeft: '1px solid var(--border)', background: 'var(--bg2)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||||
<div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border)', flexShrink: 0 }}>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
|
||||
Highlights · {recHighlights.length}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1, overflow: 'auto', padding: '12px 12px' }}>
|
||||
{recHighlights.length === 0 ? (
|
||||
<div style={{ color: 'var(--text3)', fontFamily: 'var(--font-mono)', fontSize: 11, padding: '8px 4px' }}>
|
||||
No highlights yet.<br />Press ◈ Highlight to mark a moment.
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{recHighlights
|
||||
.sort((a, b) => a.startSeconds - b.startSeconds)
|
||||
.map(h => (
|
||||
<HighlightCard key={h.id} highlight={h} tagColors={TAG_COLORS} onSeek={seekToTime} onRemove={removeHighlight} formatTime={formatTime} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const TAG_COLORS = {
|
||||
important: 'var(--red)', todo: 'var(--amber)', idea: 'var(--teal)',
|
||||
'follow-up': 'var(--amber-dim)', meeting: 'var(--green)', personal: 'var(--text2)', work: 'var(--teal)',
|
||||
};
|
||||
|
||||
function HighlightCard({ highlight: h, tagColors, onSeek, onRemove, formatTime }) {
|
||||
const color = tagColors[h.tag] || 'var(--text3)';
|
||||
const hasRange = h.endSeconds != null;
|
||||
return (
|
||||
<div style={{
|
||||
background: 'var(--bg3)', border: `1px solid ${color}44`,
|
||||
borderLeft: `3px solid ${color}`, borderRadius: '0 4px 4px 0',
|
||||
padding: '8px 10px',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
|
||||
<button
|
||||
onClick={() => onSeek(h.startSeconds)}
|
||||
style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--amber)' }}
|
||||
>
|
||||
{formatTime(h.startSeconds)}
|
||||
{hasRange && ` → ${formatTime(h.endSeconds)}`}
|
||||
</button>
|
||||
{hasRange && (
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--teal)' }}>
|
||||
({formatTime(h.endSeconds - h.startSeconds)})
|
||||
</span>
|
||||
)}
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, padding: '1px 5px', borderRadius: 3, background: `${color}22`, color }}>{h.tag}</span>
|
||||
</div>
|
||||
<button onClick={() => onRemove(h.id)} style={{ color: 'var(--text3)', fontSize: 13, lineHeight: 1 }}>×</button>
|
||||
</div>
|
||||
{h.note && (
|
||||
<div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--text2)', lineHeight: 1.5 }}>{h.note}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Object.assign(window, { RecordingDetail, HighlightCard, TAG_COLORS });
|
||||
212
clio-ui/components/SearchView.jsx
Normal file
212
clio-ui/components/SearchView.jsx
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
// SearchView: full-text transcript search + filters
|
||||
const { useState: useStateSV, useMemo: useMemoSV } = React;
|
||||
|
||||
function SearchView({ data, setSelectedRecording, setView }) {
|
||||
const [query, setQuery] = useStateSV('');
|
||||
const [filterSource, setFilterSource] = useStateSV([]);
|
||||
const [filterQuality, setFilterQuality] = useStateSV([]);
|
||||
const [filterHasTranscript, setFilterHasTranscript] = useStateSV(false);
|
||||
const [filterHasHighlights, setFilterHasHighlights] = useStateSV(false);
|
||||
|
||||
const results = useMemoSV(() => {
|
||||
if (!query.trim() && filterSource.length === 0 && filterQuality.length === 0 && !filterHasTranscript && !filterHasHighlights) return [];
|
||||
const q = query.toLowerCase().trim();
|
||||
const matches = [];
|
||||
|
||||
for (const r of data.recordings) {
|
||||
if (filterSource.length > 0 && !filterSource.includes(r.source)) continue;
|
||||
if (filterQuality.length > 0 && !filterQuality.includes(r.quality)) continue;
|
||||
if (filterHasTranscript && !r.hasTranscript) continue;
|
||||
if (filterHasHighlights && r.highlights.length === 0) continue;
|
||||
|
||||
if (!q) {
|
||||
matches.push({ recording: r, matchingSegments: [] });
|
||||
continue;
|
||||
}
|
||||
|
||||
const matchingSegments = r.transcript.filter(s => s.text.toLowerCase().includes(q));
|
||||
if (matchingSegments.length > 0) {
|
||||
matches.push({ recording: r, matchingSegments });
|
||||
}
|
||||
}
|
||||
|
||||
return matches.sort((a, b) => b.matchingSegments.length - a.matchingSegments.length || b.recording.startTime - a.recording.startTime);
|
||||
}, [query, filterSource, filterQuality, filterHasTranscript, filterHasHighlights, data]);
|
||||
|
||||
function toggleArr(arr, setArr, val) {
|
||||
setArr(prev => prev.includes(val) ? prev.filter(x => x !== val) : [...prev, val]);
|
||||
}
|
||||
|
||||
function formatTime(secs) {
|
||||
const h = Math.floor(secs / 3600);
|
||||
const m = Math.floor((secs % 3600) / 60);
|
||||
const s = Math.floor(secs % 60);
|
||||
if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
|
||||
return `${m}:${String(s).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function highlightText(text, query) {
|
||||
if (!query.trim()) return text;
|
||||
const idx = text.toLowerCase().indexOf(query.toLowerCase());
|
||||
if (idx === -1) return text;
|
||||
return (
|
||||
<span>
|
||||
{text.slice(0, idx)}
|
||||
<mark style={{ background: 'var(--amber)', color: 'var(--bg)', borderRadius: 2, padding: '0 1px' }}>
|
||||
{text.slice(idx, idx + query.length)}
|
||||
</mark>
|
||||
{text.slice(idx + query.length)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const SOURCES = ['portable', 'stationary', 'phone'];
|
||||
const QUALITIES = ['excellent', 'good', 'fair', 'poor'];
|
||||
|
||||
const hasFilters = query.trim() || filterSource.length > 0 || filterQuality.length > 0 || filterHasTranscript || filterHasHighlights;
|
||||
|
||||
return (
|
||||
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||||
{/* Search bar */}
|
||||
<div style={{ padding: '16px 24px', borderBottom: '1px solid var(--border)', background: 'var(--bg2)', flexShrink: 0 }}>
|
||||
<div style={{ position: 'relative', marginBottom: 12 }}>
|
||||
<span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--text3)', fontSize: 16, pointerEvents: 'none' }}>⌕</span>
|
||||
<input
|
||||
value={query}
|
||||
onChange={e => setQuery(e.target.value)}
|
||||
placeholder="Search transcripts…"
|
||||
autoFocus
|
||||
style={{
|
||||
width: '100%', background: 'var(--bg3)', border: '1px solid var(--border)',
|
||||
borderRadius: 6, padding: '10px 14px 10px 36px',
|
||||
color: 'var(--text)', fontFamily: 'var(--font-sans)', fontSize: 15,
|
||||
outline: 'none', transition: 'border-color 0.15s',
|
||||
}}
|
||||
onFocus={e => e.target.style.borderColor = 'var(--amber)'}
|
||||
onBlur={e => e.target.style.borderColor = 'var(--border)'}
|
||||
/>
|
||||
{query && (
|
||||
<button onClick={() => setQuery('')} style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', color: 'var(--text3)', fontSize: 18 }}>×</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Filter:</span>
|
||||
{SOURCES.map(s => (
|
||||
<FilterChip key={s} label={s} active={filterSource.includes(s)} colorClass={`source-${s}`} onClick={() => toggleArr(filterSource, setFilterSource, s)} />
|
||||
))}
|
||||
<div style={{ width: 1, height: 14, background: 'var(--border)' }} />
|
||||
{QUALITIES.map(q => (
|
||||
<FilterChip key={q} label={q} active={filterQuality.includes(q)} colorClass={`q-${q}`} onClick={() => toggleArr(filterQuality, setFilterQuality, q)} />
|
||||
))}
|
||||
<div style={{ width: 1, height: 14, background: 'var(--border)' }} />
|
||||
<FilterChip label="has transcript" active={filterHasTranscript} colorClass="" onClick={() => setFilterHasTranscript(v => !v)} />
|
||||
<FilterChip label="has highlights" active={filterHasHighlights} colorClass="" onClick={() => setFilterHasHighlights(v => !v)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
<div style={{ flex: 1, overflow: 'auto', padding: '16px 24px' }}>
|
||||
{!hasFilters ? (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '60%', gap: 8 }}>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 32, color: 'var(--bg4)' }}>⌕</div>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text3)' }}>Search transcripts or apply filters</div>
|
||||
</div>
|
||||
) : results.length === 0 ? (
|
||||
<div style={{ color: 'var(--text3)', fontFamily: 'var(--font-mono)', fontSize: 13, padding: '24px 0', textAlign: 'center' }}>No results found.</div>
|
||||
) : (
|
||||
<>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text3)', marginBottom: 12 }}>
|
||||
{results.length} recording{results.length !== 1 ? 's' : ''} · {results.reduce((a, r) => a + r.matchingSegments.length, 0)} segment matches
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
{results.map(({ recording, matchingSegments }) => (
|
||||
<SearchResultCard
|
||||
key={recording.id}
|
||||
recording={recording}
|
||||
matchingSegments={matchingSegments}
|
||||
query={query}
|
||||
highlightText={highlightText}
|
||||
formatTime={formatTime}
|
||||
onOpen={(seekTime) => { setSelectedRecording(recording, seekTime); setView('detail'); }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FilterChip({ label, active, colorClass, onClick }) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={active ? colorClass : ''}
|
||||
style={{
|
||||
fontFamily: 'var(--font-mono)', fontSize: 10, padding: '3px 9px', borderRadius: 3,
|
||||
background: active ? 'var(--bg4)' : 'var(--bg3)',
|
||||
border: `1px solid ${active ? 'currentColor' : 'var(--border)'}`,
|
||||
color: active ? undefined : 'var(--text3)',
|
||||
textTransform: 'lowercase', cursor: 'pointer', transition: 'all 0.1s',
|
||||
}}
|
||||
>{label}</button>
|
||||
);
|
||||
}
|
||||
|
||||
function SearchResultCard({ recording: r, matchingSegments, query, highlightText, formatTime, onOpen }) {
|
||||
const dur = `${Math.floor(r.durationMinutes / 60)}h ${Math.round(r.durationMinutes % 60)}m`;
|
||||
const dateStr = r.startTime.toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' });
|
||||
const timeStr = r.startTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
|
||||
// First matching segment time, or null to start at beginning
|
||||
const firstMatchTime = matchingSegments.length > 0 ? matchingSegments[0].startSeconds : null;
|
||||
|
||||
return (
|
||||
<div style={{ background: 'var(--bg2)', border: '1px solid var(--border)', borderRadius: 6, overflow: 'hidden' }}>
|
||||
{/* Card header - opens at first match */}
|
||||
<div
|
||||
onClick={() => onOpen(firstMatchTime)}
|
||||
style={{ padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', borderBottom: matchingSegments.length > 0 ? '1px solid var(--border)' : 'none' }}
|
||||
onMouseEnter={e => e.currentTarget.style.background = 'var(--bg3)'}
|
||||
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
|
||||
>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text2)' }}>{dateStr} {timeStr}</span>
|
||||
<span className={`source-pill source-${r.source}`}>{r.source}</span>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text3)' }}>{dur}</span>
|
||||
<span className={`q-${r.quality}`} style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>{r.quality}</span>
|
||||
{r.highlights.length > 0 && (
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--amber)' }}>◈ {r.highlights.length}</span>
|
||||
)}
|
||||
<div style={{ flex: 1 }} />
|
||||
{matchingSegments.length > 0 && (
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--teal)' }}>{matchingSegments.length} match{matchingSegments.length !== 1 ? 'es' : ''}</span>
|
||||
)}
|
||||
<span style={{ color: 'var(--text3)', fontSize: 12 }}>→</span>
|
||||
</div>
|
||||
|
||||
{/* Matching segments - each opens at its specific time */}
|
||||
{matchingSegments.slice(0, 3).map(seg => (
|
||||
<div key={seg.id} onClick={() => onOpen(seg.startSeconds)} style={{ padding: '8px 14px', borderBottom: '1px solid var(--border)', cursor: 'pointer', display: 'flex', gap: 10 }}
|
||||
onMouseEnter={e => e.currentTarget.style.background = 'var(--bg3)'}
|
||||
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
|
||||
>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--amber)', flexShrink: 0, paddingTop: 2 }}>{formatTime(seg.startSeconds)}</span>
|
||||
<span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--text2)', lineHeight: 1.5 }}>
|
||||
{highlightText(seg.text, query)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{matchingSegments.length > 3 && (
|
||||
<div onClick={() => onOpen(firstMatchTime)} style={{ padding: '6px 14px', cursor: 'pointer', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)' }}
|
||||
onMouseEnter={e => e.currentTarget.style.color = 'var(--amber)'}
|
||||
onMouseLeave={e => e.currentTarget.style.color = 'var(--text3)'}
|
||||
>+{matchingSegments.length - 3} more →</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Object.assign(window, { SearchView, FilterChip, SearchResultCard });
|
||||
99
clio-ui/components/Sidebar.jsx
Normal file
99
clio-ui/components/Sidebar.jsx
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
// Sidebar navigation component
|
||||
const NAV_ITEMS = [
|
||||
{ id: 'dashboard', label: 'Dashboard', icon: '▦' },
|
||||
{ id: 'calendar', label: 'Calendar', icon: '◫' },
|
||||
{ id: 'search', label: 'Search', icon: '⌕' },
|
||||
{ id: 'highlights', label: 'Highlights', icon: '◈' },
|
||||
];
|
||||
|
||||
function Sidebar({ view, setView, data }) {
|
||||
const totalGB = (data.recordings.reduce((a, r) => a + r.fileSizeMB, 0) / 1024).toFixed(1);
|
||||
const totalCount = data.recordings.length;
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
width: 'var(--sidebar-w)', flexShrink: 0,
|
||||
background: 'var(--bg2)', borderRight: '1px solid var(--border)',
|
||||
display: 'flex', flexDirection: 'column', height: '100%',
|
||||
}}>
|
||||
{/* Logo */}
|
||||
<div style={{ padding: '18px 16px 14px', borderBottom: '1px solid var(--border)' }}>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text3)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 4 }}>RecordingsViewer</div>
|
||||
<div style={{ display: 'flex', gap: 12, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text2)' }}>
|
||||
<span><span style={{ color: 'var(--amber)' }}>{totalCount}</span> files</span>
|
||||
<span><span style={{ color: 'var(--amber)' }}>{totalGB}</span> GB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nav */}
|
||||
<nav style={{ flex: 1, padding: '10px 0' }}>
|
||||
{NAV_ITEMS.map(item => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setView(item.id)}
|
||||
style={{
|
||||
width: '100%', display: 'flex', alignItems: 'center', gap: 10,
|
||||
padding: '9px 16px', textAlign: 'left',
|
||||
background: view === item.id ? 'var(--amber-glow)' : 'none',
|
||||
color: view === item.id ? 'var(--amber)' : 'var(--text2)',
|
||||
borderLeft: view === item.id ? '2px solid var(--amber)' : '2px solid transparent',
|
||||
fontSize: 13, fontWeight: view === item.id ? 500 : 400,
|
||||
transition: 'all 0.12s',
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: 15, fontFamily: 'var(--font-mono)', opacity: 0.8 }}>{item.icon}</span>
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Device status */}
|
||||
<DeviceStatus devices={data.devices} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DeviceStatus({ devices }) {
|
||||
const now = new Date();
|
||||
|
||||
function hoursSince(date) {
|
||||
return (now - date) / (1000 * 60 * 60);
|
||||
}
|
||||
|
||||
function fmtSince(date) {
|
||||
const h = hoursSince(date);
|
||||
if (h < 1) return `${Math.round(h * 60)}m ago`;
|
||||
if (h < 24) return `${Math.round(h)}h ago`;
|
||||
return `${Math.round(h / 24)}d ago`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ borderTop: '1px solid var(--border)', padding: '12px 16px 16px' }}>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10 }}>Devices</div>
|
||||
{Object.entries(devices).map(([key, dev]) => {
|
||||
const hours = hoursSince(dev.lastSeen);
|
||||
const bad = hours > 24;
|
||||
const color = bad ? 'var(--red)' : 'var(--green)';
|
||||
const dotColor = bad ? 'var(--red)' : 'var(--green)';
|
||||
return (
|
||||
<div key={key} style={{ marginBottom: 10 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 2 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<span style={{
|
||||
width: 6, height: 6, borderRadius: '50%', background: dotColor,
|
||||
boxShadow: bad ? 'none' : `0 0 4px ${dotColor}`,
|
||||
flexShrink: 0, display: 'inline-block',
|
||||
}}></span>
|
||||
<span style={{ fontSize: 12, color: 'var(--text)', textTransform: 'capitalize' }}>{key}</span>
|
||||
</div>
|
||||
<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color }}>{fmtSince(dev.lastSeen)}</span>
|
||||
</div>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text3)', paddingLeft: 12 }}>{dev.model}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Object.assign(window, { Sidebar, DeviceStatus });
|
||||
52
clio-ui/components/Tweaks.jsx
Normal file
52
clio-ui/components/Tweaks.jsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
// Tweaks panel for RecordingsViewer
|
||||
// Loaded after tweaks-panel.jsx
|
||||
|
||||
function TweaksApp() {
|
||||
const { TweaksPanel, TweakSection, TweakToggle, TweakRadio, TweakColor, useTweaks } = window;
|
||||
|
||||
const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
|
||||
"accentColor": "oklch(0.75 0.15 65)",
|
||||
"density": "normal",
|
||||
"monoTimestamps": true,
|
||||
"showQualityColors": true,
|
||||
"sidebarCollapsed": false
|
||||
}/*EDITMODE-END*/);
|
||||
|
||||
// Apply tweaks to CSS vars live
|
||||
React.useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
// Accent color
|
||||
root.style.setProperty('--amber', tweaks.accentColor);
|
||||
// Density
|
||||
const pad = tweaks.density === 'compact' ? '6px 10px' : tweaks.density === 'comfortable' ? '14px 18px' : '9px 12px';
|
||||
root.style.setProperty('--row-padding', pad);
|
||||
// Monospace timestamps
|
||||
document.querySelectorAll('.mono-ts').forEach(el => {
|
||||
el.style.fontFamily = tweaks.monoTimestamps ? 'var(--font-mono)' : 'var(--font-sans)';
|
||||
});
|
||||
}, [tweaks]);
|
||||
|
||||
return (
|
||||
<TweaksPanel>
|
||||
<TweakSection label="Appearance">
|
||||
<TweakColor label="Accent color" value={tweaks.accentColor} onChange={v => setTweak('accentColor', v)} />
|
||||
<TweakRadio
|
||||
label="Density"
|
||||
value={tweaks.density}
|
||||
options={[{ label: 'Compact', value: 'compact' }, { label: 'Normal', value: 'normal' }, { label: 'Airy', value: 'comfortable' }]}
|
||||
onChange={v => setTweak('density', v)}
|
||||
/>
|
||||
</TweakSection>
|
||||
<TweakSection label="Display">
|
||||
<TweakToggle label="Monospace timestamps" value={tweaks.monoTimestamps} onChange={v => setTweak('monoTimestamps', v)} />
|
||||
<TweakToggle label="Quality color coding" value={tweaks.showQualityColors} onChange={v => setTweak('showQualityColors', v)} />
|
||||
</TweakSection>
|
||||
</TweaksPanel>
|
||||
);
|
||||
}
|
||||
|
||||
// Mount tweaks panel in a separate div
|
||||
const tweaksRoot = document.createElement('div');
|
||||
tweaksRoot.id = 'tweaks-root';
|
||||
document.body.appendChild(tweaksRoot);
|
||||
ReactDOM.createRoot(tweaksRoot).render(<TweaksApp />);
|
||||
425
clio-ui/tweaks-panel.jsx
Normal file
425
clio-ui/tweaks-panel.jsx
Normal file
|
|
@ -0,0 +1,425 @@
|
|||
|
||||
// tweaks-panel.jsx
|
||||
// Reusable Tweaks shell + form-control helpers.
|
||||
//
|
||||
// Owns the host protocol (listens for __activate_edit_mode / __deactivate_edit_mode,
|
||||
// posts __edit_mode_available / __edit_mode_set_keys / __edit_mode_dismissed) so
|
||||
// individual prototypes don't re-roll it. Ships a consistent set of controls so you
|
||||
// don't hand-draw <input type="range">, segmented radios, steppers, etc.
|
||||
//
|
||||
// Usage (in an HTML file that loads React + Babel):
|
||||
//
|
||||
// const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
|
||||
// "primaryColor": "#D97757",
|
||||
// "fontSize": 16,
|
||||
// "density": "regular",
|
||||
// "dark": false
|
||||
// }/*EDITMODE-END*/;
|
||||
//
|
||||
// function App() {
|
||||
// const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
|
||||
// return (
|
||||
// <div style={{ fontSize: t.fontSize, color: t.primaryColor }}>
|
||||
// Hello
|
||||
// <TweaksPanel>
|
||||
// <TweakSection label="Typography" />
|
||||
// <TweakSlider label="Font size" value={t.fontSize} min={10} max={32} unit="px"
|
||||
// onChange={(v) => setTweak('fontSize', v)} />
|
||||
// <TweakRadio label="Density" value={t.density}
|
||||
// options={['compact', 'regular', 'comfy']}
|
||||
// onChange={(v) => setTweak('density', v)} />
|
||||
// <TweakSection label="Theme" />
|
||||
// <TweakColor label="Primary" value={t.primaryColor}
|
||||
// onChange={(v) => setTweak('primaryColor', v)} />
|
||||
// <TweakToggle label="Dark mode" value={t.dark}
|
||||
// onChange={(v) => setTweak('dark', v)} />
|
||||
// </TweaksPanel>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
//
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
const __TWEAKS_STYLE = `
|
||||
.twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;
|
||||
max-height:calc(100vh - 32px);display:flex;flex-direction:column;
|
||||
background:rgba(250,249,247,.78);color:#29261b;
|
||||
-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
|
||||
border:.5px solid rgba(255,255,255,.6);border-radius:14px;
|
||||
box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);
|
||||
font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
|
||||
.twk-hd{display:flex;align-items:center;justify-content:space-between;
|
||||
padding:10px 8px 10px 14px;cursor:move;user-select:none}
|
||||
.twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}
|
||||
.twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);
|
||||
width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}
|
||||
.twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}
|
||||
.twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;
|
||||
overflow-y:auto;overflow-x:hidden;min-height:0;
|
||||
scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}
|
||||
.twk-body::-webkit-scrollbar{width:8px}
|
||||
.twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}
|
||||
.twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;
|
||||
border:2px solid transparent;background-clip:content-box}
|
||||
.twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);
|
||||
border:2px solid transparent;background-clip:content-box}
|
||||
.twk-row{display:flex;flex-direction:column;gap:5px}
|
||||
.twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
|
||||
.twk-lbl{display:flex;justify-content:space-between;align-items:baseline;
|
||||
color:rgba(41,38,27,.72)}
|
||||
.twk-lbl>span:first-child{font-weight:500}
|
||||
.twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}
|
||||
|
||||
.twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
|
||||
color:rgba(41,38,27,.45);padding:10px 0 0}
|
||||
.twk-sect:first-child{padding-top:0}
|
||||
|
||||
.twk-field{appearance:none;width:100%;height:26px;padding:0 8px;
|
||||
border:.5px solid rgba(0,0,0,.1);border-radius:7px;
|
||||
background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}
|
||||
.twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}
|
||||
select.twk-field{padding-right:22px;
|
||||
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
|
||||
background-repeat:no-repeat;background-position:right 8px center}
|
||||
|
||||
.twk-slider{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:6px 0;
|
||||
border-radius:999px;background:rgba(0,0,0,.12);outline:none}
|
||||
.twk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
|
||||
width:14px;height:14px;border-radius:50%;background:#fff;
|
||||
border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
|
||||
.twk-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
|
||||
background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
|
||||
|
||||
.twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;
|
||||
background:rgba(0,0,0,.06);user-select:none}
|
||||
.twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;
|
||||
background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);
|
||||
transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}
|
||||
.twk-seg.dragging .twk-seg-thumb{transition:none}
|
||||
.twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;
|
||||
background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;
|
||||
border-radius:6px;cursor:default;padding:4px 6px;line-height:1.2;
|
||||
overflow-wrap:anywhere}
|
||||
|
||||
.twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;
|
||||
background:rgba(0,0,0,.15);transition:background .15s;cursor:default;padding:0}
|
||||
.twk-toggle[data-on="1"]{background:#34c759}
|
||||
.twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
|
||||
background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
|
||||
.twk-toggle[data-on="1"] i{transform:translateX(14px)}
|
||||
|
||||
.twk-num{display:flex;align-items:center;height:26px;padding:0 0 0 8px;
|
||||
border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6)}
|
||||
.twk-num-lbl{font-weight:500;color:rgba(41,38,27,.6);cursor:ew-resize;
|
||||
user-select:none;padding-right:8px}
|
||||
.twk-num input{flex:1;min-width:0;height:100%;border:0;background:transparent;
|
||||
font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 8px 0 0;
|
||||
outline:none;color:inherit;-moz-appearance:textfield}
|
||||
.twk-num input::-webkit-inner-spin-button,.twk-num input::-webkit-outer-spin-button{
|
||||
-webkit-appearance:none;margin:0}
|
||||
.twk-num-unit{padding-right:8px;color:rgba(41,38,27,.45)}
|
||||
|
||||
.twk-btn{appearance:none;height:26px;padding:0 12px;border:0;border-radius:7px;
|
||||
background:rgba(0,0,0,.78);color:#fff;font:inherit;font-weight:500;cursor:default}
|
||||
.twk-btn:hover{background:rgba(0,0,0,.88)}
|
||||
.twk-btn.secondary{background:rgba(0,0,0,.06);color:inherit}
|
||||
.twk-btn.secondary:hover{background:rgba(0,0,0,.1)}
|
||||
|
||||
.twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:22px;
|
||||
border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:0;cursor:default;
|
||||
background:transparent;flex-shrink:0}
|
||||
.twk-swatch::-webkit-color-swatch-wrapper{padding:0}
|
||||
.twk-swatch::-webkit-color-swatch{border:0;border-radius:5.5px}
|
||||
.twk-swatch::-moz-color-swatch{border:0;border-radius:5.5px}
|
||||
`;
|
||||
|
||||
// ── useTweaks ───────────────────────────────────────────────────────────────
|
||||
// Single source of truth for tweak values. setTweak persists via the host
|
||||
// (__edit_mode_set_keys → host rewrites the EDITMODE block on disk).
|
||||
function useTweaks(defaults) {
|
||||
const [values, setValues] = React.useState(defaults);
|
||||
// Accepts either setTweak('key', value) or setTweak({ key: value, ... }) so a
|
||||
// useState-style call doesn't write a "[object Object]" key into the persisted
|
||||
// JSON block.
|
||||
const setTweak = React.useCallback((keyOrEdits, val) => {
|
||||
const edits = typeof keyOrEdits === 'object' && keyOrEdits !== null
|
||||
? keyOrEdits : { [keyOrEdits]: val };
|
||||
setValues((prev) => ({ ...prev, ...edits }));
|
||||
window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
|
||||
}, []);
|
||||
return [values, setTweak];
|
||||
}
|
||||
|
||||
// ── TweaksPanel ─────────────────────────────────────────────────────────────
|
||||
// Floating shell. Registers the protocol listener BEFORE announcing
|
||||
// availability — if the announce ran first, the host's activate could land
|
||||
// before our handler exists and the toolbar toggle would silently no-op.
|
||||
// The close button posts __edit_mode_dismissed so the host's toolbar toggle
|
||||
// flips off in lockstep; the host echoes __deactivate_edit_mode back which
|
||||
// is what actually hides the panel.
|
||||
function TweaksPanel({ title = 'Tweaks', children }) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const dragRef = React.useRef(null);
|
||||
const offsetRef = React.useRef({ x: 16, y: 16 });
|
||||
const PAD = 16;
|
||||
|
||||
const clampToViewport = React.useCallback(() => {
|
||||
const panel = dragRef.current;
|
||||
if (!panel) return;
|
||||
const w = panel.offsetWidth, h = panel.offsetHeight;
|
||||
const maxRight = Math.max(PAD, window.innerWidth - w - PAD);
|
||||
const maxBottom = Math.max(PAD, window.innerHeight - h - PAD);
|
||||
offsetRef.current = {
|
||||
x: Math.min(maxRight, Math.max(PAD, offsetRef.current.x)),
|
||||
y: Math.min(maxBottom, Math.max(PAD, offsetRef.current.y)),
|
||||
};
|
||||
panel.style.right = offsetRef.current.x + 'px';
|
||||
panel.style.bottom = offsetRef.current.y + 'px';
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!open) return;
|
||||
clampToViewport();
|
||||
if (typeof ResizeObserver === 'undefined') {
|
||||
window.addEventListener('resize', clampToViewport);
|
||||
return () => window.removeEventListener('resize', clampToViewport);
|
||||
}
|
||||
const ro = new ResizeObserver(clampToViewport);
|
||||
ro.observe(document.documentElement);
|
||||
return () => ro.disconnect();
|
||||
}, [open, clampToViewport]);
|
||||
|
||||
React.useEffect(() => {
|
||||
const onMsg = (e) => {
|
||||
const t = e?.data?.type;
|
||||
if (t === '__activate_edit_mode') setOpen(true);
|
||||
else if (t === '__deactivate_edit_mode') setOpen(false);
|
||||
};
|
||||
window.addEventListener('message', onMsg);
|
||||
window.parent.postMessage({ type: '__edit_mode_available' }, '*');
|
||||
return () => window.removeEventListener('message', onMsg);
|
||||
}, []);
|
||||
|
||||
const dismiss = () => {
|
||||
setOpen(false);
|
||||
window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
|
||||
};
|
||||
|
||||
const onDragStart = (e) => {
|
||||
const panel = dragRef.current;
|
||||
if (!panel) return;
|
||||
const r = panel.getBoundingClientRect();
|
||||
const sx = e.clientX, sy = e.clientY;
|
||||
const startRight = window.innerWidth - r.right;
|
||||
const startBottom = window.innerHeight - r.bottom;
|
||||
const move = (ev) => {
|
||||
offsetRef.current = {
|
||||
x: startRight - (ev.clientX - sx),
|
||||
y: startBottom - (ev.clientY - sy),
|
||||
};
|
||||
clampToViewport();
|
||||
};
|
||||
const up = () => {
|
||||
window.removeEventListener('mousemove', move);
|
||||
window.removeEventListener('mouseup', up);
|
||||
};
|
||||
window.addEventListener('mousemove', move);
|
||||
window.addEventListener('mouseup', up);
|
||||
};
|
||||
|
||||
if (!open) return null;
|
||||
return (
|
||||
<>
|
||||
<style>{__TWEAKS_STYLE}</style>
|
||||
<div ref={dragRef} className="twk-panel" data-noncommentable=""
|
||||
style={{ right: offsetRef.current.x, bottom: offsetRef.current.y }}>
|
||||
<div className="twk-hd" onMouseDown={onDragStart}>
|
||||
<b>{title}</b>
|
||||
<button className="twk-x" aria-label="Close tweaks"
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onClick={dismiss}>✕</button>
|
||||
</div>
|
||||
<div className="twk-body">{children}</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Layout helpers ──────────────────────────────────────────────────────────
|
||||
|
||||
function TweakSection({ label, children }) {
|
||||
return (
|
||||
<>
|
||||
<div className="twk-sect">{label}</div>
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function TweakRow({ label, value, children, inline = false }) {
|
||||
return (
|
||||
<div className={inline ? 'twk-row twk-row-h' : 'twk-row'}>
|
||||
<div className="twk-lbl">
|
||||
<span>{label}</span>
|
||||
{value != null && <span className="twk-val">{value}</span>}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Controls ────────────────────────────────────────────────────────────────
|
||||
|
||||
function TweakSlider({ label, value, min = 0, max = 100, step = 1, unit = '', onChange }) {
|
||||
return (
|
||||
<TweakRow label={label} value={`${value}${unit}`}>
|
||||
<input type="range" className="twk-slider" min={min} max={max} step={step}
|
||||
value={value} onChange={(e) => onChange(Number(e.target.value))} />
|
||||
</TweakRow>
|
||||
);
|
||||
}
|
||||
|
||||
function TweakToggle({ label, value, onChange }) {
|
||||
return (
|
||||
<div className="twk-row twk-row-h">
|
||||
<div className="twk-lbl"><span>{label}</span></div>
|
||||
<button type="button" className="twk-toggle" data-on={value ? '1' : '0'}
|
||||
role="switch" aria-checked={!!value}
|
||||
onClick={() => onChange(!value)}><i /></button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TweakRadio({ label, value, options, onChange }) {
|
||||
const trackRef = React.useRef(null);
|
||||
const [dragging, setDragging] = React.useState(false);
|
||||
const opts = options.map((o) => (typeof o === 'object' ? o : { value: o, label: o }));
|
||||
const idx = Math.max(0, opts.findIndex((o) => o.value === value));
|
||||
const n = opts.length;
|
||||
|
||||
// The active value is read by pointer-move handlers attached for the lifetime
|
||||
// of a drag — ref it so a stale closure doesn't fire onChange for every move.
|
||||
const valueRef = React.useRef(value);
|
||||
valueRef.current = value;
|
||||
|
||||
const segAt = (clientX) => {
|
||||
const r = trackRef.current.getBoundingClientRect();
|
||||
const inner = r.width - 4;
|
||||
const i = Math.floor(((clientX - r.left - 2) / inner) * n);
|
||||
return opts[Math.max(0, Math.min(n - 1, i))].value;
|
||||
};
|
||||
|
||||
const onPointerDown = (e) => {
|
||||
setDragging(true);
|
||||
const v0 = segAt(e.clientX);
|
||||
if (v0 !== valueRef.current) onChange(v0);
|
||||
const move = (ev) => {
|
||||
if (!trackRef.current) return;
|
||||
const v = segAt(ev.clientX);
|
||||
if (v !== valueRef.current) onChange(v);
|
||||
};
|
||||
const up = () => {
|
||||
setDragging(false);
|
||||
window.removeEventListener('pointermove', move);
|
||||
window.removeEventListener('pointerup', up);
|
||||
};
|
||||
window.addEventListener('pointermove', move);
|
||||
window.addEventListener('pointerup', up);
|
||||
};
|
||||
|
||||
return (
|
||||
<TweakRow label={label}>
|
||||
<div ref={trackRef} role="radiogroup" onPointerDown={onPointerDown}
|
||||
className={dragging ? 'twk-seg dragging' : 'twk-seg'}>
|
||||
<div className="twk-seg-thumb"
|
||||
style={{ left: `calc(2px + ${idx} * (100% - 4px) / ${n})`,
|
||||
width: `calc((100% - 4px) / ${n})` }} />
|
||||
{opts.map((o) => (
|
||||
<button key={o.value} type="button" role="radio" aria-checked={o.value === value}>
|
||||
{o.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</TweakRow>
|
||||
);
|
||||
}
|
||||
|
||||
function TweakSelect({ label, value, options, onChange }) {
|
||||
return (
|
||||
<TweakRow label={label}>
|
||||
<select className="twk-field" value={value} onChange={(e) => onChange(e.target.value)}>
|
||||
{options.map((o) => {
|
||||
const v = typeof o === 'object' ? o.value : o;
|
||||
const l = typeof o === 'object' ? o.label : o;
|
||||
return <option key={v} value={v}>{l}</option>;
|
||||
})}
|
||||
</select>
|
||||
</TweakRow>
|
||||
);
|
||||
}
|
||||
|
||||
function TweakText({ label, value, placeholder, onChange }) {
|
||||
return (
|
||||
<TweakRow label={label}>
|
||||
<input className="twk-field" type="text" value={value} placeholder={placeholder}
|
||||
onChange={(e) => onChange(e.target.value)} />
|
||||
</TweakRow>
|
||||
);
|
||||
}
|
||||
|
||||
function TweakNumber({ label, value, min, max, step = 1, unit = '', onChange }) {
|
||||
const clamp = (n) => {
|
||||
if (min != null && n < min) return min;
|
||||
if (max != null && n > max) return max;
|
||||
return n;
|
||||
};
|
||||
const startRef = React.useRef({ x: 0, val: 0 });
|
||||
const onScrubStart = (e) => {
|
||||
e.preventDefault();
|
||||
startRef.current = { x: e.clientX, val: value };
|
||||
const decimals = (String(step).split('.')[1] || '').length;
|
||||
const move = (ev) => {
|
||||
const dx = ev.clientX - startRef.current.x;
|
||||
const raw = startRef.current.val + dx * step;
|
||||
const snapped = Math.round(raw / step) * step;
|
||||
onChange(clamp(Number(snapped.toFixed(decimals))));
|
||||
};
|
||||
const up = () => {
|
||||
window.removeEventListener('pointermove', move);
|
||||
window.removeEventListener('pointerup', up);
|
||||
};
|
||||
window.addEventListener('pointermove', move);
|
||||
window.addEventListener('pointerup', up);
|
||||
};
|
||||
return (
|
||||
<div className="twk-num">
|
||||
<span className="twk-num-lbl" onPointerDown={onScrubStart}>{label}</span>
|
||||
<input type="number" value={value} min={min} max={max} step={step}
|
||||
onChange={(e) => onChange(clamp(Number(e.target.value)))} />
|
||||
{unit && <span className="twk-num-unit">{unit}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TweakColor({ label, value, onChange }) {
|
||||
return (
|
||||
<div className="twk-row twk-row-h">
|
||||
<div className="twk-lbl"><span>{label}</span></div>
|
||||
<input type="color" className="twk-swatch" value={value}
|
||||
onChange={(e) => onChange(e.target.value)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TweakButton({ label, onClick, secondary = false }) {
|
||||
return (
|
||||
<button type="button" className={secondary ? 'twk-btn secondary' : 'twk-btn'}
|
||||
onClick={onClick}>{label}</button>
|
||||
);
|
||||
}
|
||||
|
||||
Object.assign(window, {
|
||||
useTweaks, TweaksPanel, TweakSection, TweakRow,
|
||||
TweakSlider, TweakToggle, TweakRadio, TweakSelect,
|
||||
TweakText, TweakNumber, TweakColor, TweakButton,
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue