feat(kon): scaffold hybrid modular workspace
- Cargo workspace with 6 domain crates: core, audio, transcription, ai-formatting, storage, cloud-providers - Minimal Tauri shell (lib.rs + main.rs) with plugin registration - Svelte 5 frontend copied from Ramble v0.2 - All crates compile as empty stubs - App identifier: uk.co.corbel.kon Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
jake
452
src/routes/viewer/+page.svelte
Normal file
452
src/routes/viewer/+page.svelte
Normal file
@@ -0,0 +1,452 @@
|
||||
<script>
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
import { convertFileSrc } from "@tauri-apps/api/core";
|
||||
import { formatTime, formatDuration } from "$lib/utils/time.js";
|
||||
import { PLAYBACK_SPEEDS } from "$lib/utils/constants.js";
|
||||
|
||||
let item = $state(null);
|
||||
let audioEl = $state(null);
|
||||
let playing = $state(false);
|
||||
let currentTime = $state(0);
|
||||
let duration = $state(0);
|
||||
let playbackRate = $state(1);
|
||||
let searchQuery = $state("");
|
||||
let activeSegmentIdx = $state(-1);
|
||||
let editingIdx = $state(-1);
|
||||
let editingText = $state("");
|
||||
let showTimestamps = $state(true);
|
||||
let showStarredOnly = $state(false);
|
||||
let animFrameId = null;
|
||||
let segmentRefs = [];
|
||||
|
||||
|
||||
// Load item data from localStorage (set by HistoryPage before opening this window)
|
||||
onMount(() => {
|
||||
try {
|
||||
const raw = localStorage.getItem("ramble_viewer_item");
|
||||
if (raw) {
|
||||
item = JSON.parse(raw);
|
||||
if (item.audioPath) {
|
||||
const src = convertFileSrc(item.audioPath);
|
||||
const audio = new Audio(src);
|
||||
audio.onloadedmetadata = () => { duration = audio.duration; };
|
||||
audio.onended = () => { playing = false; cancelAnimationFrame(animFrameId); };
|
||||
audio.onerror = () => { playing = false; };
|
||||
audioEl = audio;
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
|
||||
// Listen for new items via storage events
|
||||
window.addEventListener("storage", handleStorageChange);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (audioEl) audioEl.pause();
|
||||
cancelAnimationFrame(animFrameId);
|
||||
window.removeEventListener("storage", handleStorageChange);
|
||||
});
|
||||
|
||||
function handleStorageChange(e) {
|
||||
if (e.key === "ramble_viewer_item" && e.newValue) {
|
||||
try {
|
||||
if (audioEl) { audioEl.pause(); }
|
||||
cancelAnimationFrame(animFrameId);
|
||||
playing = false;
|
||||
currentTime = 0;
|
||||
|
||||
item = JSON.parse(e.newValue);
|
||||
if (item.audioPath) {
|
||||
const src = convertFileSrc(item.audioPath);
|
||||
const audio = new Audio(src);
|
||||
audio.onloadedmetadata = () => { duration = audio.duration; };
|
||||
audio.onended = () => { playing = false; cancelAnimationFrame(animFrameId); };
|
||||
audioEl = audio;
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
|
||||
function togglePlay() {
|
||||
if (!audioEl) return;
|
||||
if (playing) {
|
||||
audioEl.pause();
|
||||
playing = false;
|
||||
cancelAnimationFrame(animFrameId);
|
||||
} else {
|
||||
audioEl.play();
|
||||
playing = true;
|
||||
tickTime();
|
||||
}
|
||||
}
|
||||
|
||||
function tickTime() {
|
||||
if (audioEl) {
|
||||
currentTime = audioEl.currentTime;
|
||||
updateActiveSegment();
|
||||
if (!audioEl.paused) {
|
||||
animFrameId = requestAnimationFrame(tickTime);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateActiveSegment() {
|
||||
if (!item?.segments) return;
|
||||
const t = currentTime;
|
||||
for (let i = 0; i < item.segments.length; i++) {
|
||||
const seg = item.segments[i];
|
||||
if (t >= seg.start && t < seg.end) {
|
||||
if (activeSegmentIdx !== i) {
|
||||
activeSegmentIdx = i;
|
||||
// Auto-scroll to active segment
|
||||
if (segmentRefs[i]) {
|
||||
segmentRefs[i].scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function seekTo(e) {
|
||||
const val = parseFloat(e.target.value);
|
||||
if (audioEl) {
|
||||
audioEl.currentTime = val;
|
||||
currentTime = val;
|
||||
updateActiveSegment();
|
||||
}
|
||||
}
|
||||
|
||||
function seekToTime(time) {
|
||||
if (audioEl) {
|
||||
audioEl.currentTime = time;
|
||||
currentTime = time;
|
||||
if (!playing) {
|
||||
audioEl.play();
|
||||
playing = true;
|
||||
tickTime();
|
||||
}
|
||||
updateActiveSegment();
|
||||
}
|
||||
}
|
||||
|
||||
function setSpeed(speed) {
|
||||
playbackRate = speed;
|
||||
if (audioEl) audioEl.playbackRate = speed;
|
||||
}
|
||||
|
||||
|
||||
// Search: find matching segments
|
||||
let matchingSegments = $derived.by(() => {
|
||||
if (!searchQuery.trim() || !item?.segments) return new Set();
|
||||
const q = searchQuery.toLowerCase();
|
||||
const matches = new Set();
|
||||
item.segments.forEach((seg, i) => {
|
||||
if (seg.text.toLowerCase().includes(q)) matches.add(i);
|
||||
});
|
||||
return matches;
|
||||
});
|
||||
|
||||
let matchCount = $derived.by(() => matchingSegments.size);
|
||||
|
||||
// Highlight search matches in text
|
||||
function highlightText(text) {
|
||||
if (!searchQuery.trim()) return text;
|
||||
const q = searchQuery.trim();
|
||||
const regex = new RegExp(`(${q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
|
||||
return text.replace(regex, '<mark class="bg-accent/25 text-text rounded px-0.5">$1</mark>');
|
||||
}
|
||||
|
||||
// Segment editing
|
||||
function startEditing(idx) {
|
||||
editingIdx = idx;
|
||||
editingText = item.segments[idx].text;
|
||||
}
|
||||
|
||||
function finishEditing() {
|
||||
if (editingIdx >= 0 && item?.segments) {
|
||||
item.segments[editingIdx].text = editingText.trim();
|
||||
// Update full text
|
||||
item.text = item.segments.map((s) => s.text).join(" ").trim();
|
||||
saveItemToHistory();
|
||||
}
|
||||
editingIdx = -1;
|
||||
editingText = "";
|
||||
}
|
||||
|
||||
function deleteSegment(idx) {
|
||||
if (item?.segments) {
|
||||
item.segments.splice(idx, 1);
|
||||
item.text = item.segments.map((s) => s.text).join(" ").trim();
|
||||
saveItemToHistory();
|
||||
if (editingIdx === idx) { editingIdx = -1; }
|
||||
}
|
||||
}
|
||||
|
||||
function toggleStar(idx) {
|
||||
if (item?.segments) {
|
||||
item.segments[idx].starred = !item.segments[idx].starred;
|
||||
saveItemToHistory();
|
||||
}
|
||||
}
|
||||
|
||||
function copySegment(idx) {
|
||||
if (item?.segments?.[idx]) {
|
||||
navigator.clipboard.writeText(item.segments[idx].text.trim()).catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
function saveItemToHistory() {
|
||||
// Persist edits back to localStorage history
|
||||
try {
|
||||
const raw = localStorage.getItem("ramble_history");
|
||||
if (raw) {
|
||||
const hist = JSON.parse(raw);
|
||||
const idx = hist.findIndex((h) => h.id === item.id);
|
||||
if (idx >= 0) {
|
||||
hist[idx] = { ...hist[idx], segments: item.segments, text: item.text };
|
||||
localStorage.setItem("ramble_history", JSON.stringify(hist));
|
||||
}
|
||||
}
|
||||
// Also update the viewer item cache
|
||||
localStorage.setItem("ramble_viewer_item", JSON.stringify(item));
|
||||
} catch {}
|
||||
}
|
||||
|
||||
// Filtered segments (starred filter + search)
|
||||
let visibleSegments = $derived.by(() => {
|
||||
if (!item?.segments) return [];
|
||||
let segs = item.segments.map((seg, i) => ({ ...seg, _idx: i }));
|
||||
if (showStarredOnly) {
|
||||
segs = segs.filter((s) => s.starred);
|
||||
}
|
||||
return segs;
|
||||
});
|
||||
|
||||
// Window drag
|
||||
function handleDragStart(e) {
|
||||
if (e.button !== 0) return;
|
||||
if (e.target.closest("button")) return;
|
||||
if (e.target.closest("input")) return;
|
||||
getCurrentWindow().startDragging();
|
||||
}
|
||||
|
||||
function closeWindow() {
|
||||
getCurrentWindow().close();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col h-full bg-bg">
|
||||
<!-- Drag handle -->
|
||||
<div
|
||||
class="flex items-center h-[36px] bg-bg-elevated select-none px-3"
|
||||
onmousedown={handleDragStart}
|
||||
data-tauri-drag-region
|
||||
>
|
||||
<span class="text-[12px] font-medium text-text-secondary tracking-wide" data-tauri-drag-region>
|
||||
Ramble - Viewer
|
||||
</span>
|
||||
<div class="flex-1" data-tauri-drag-region></div>
|
||||
<button
|
||||
class="w-7 h-7 flex items-center justify-center text-text-tertiary hover:text-danger rounded-md hover:bg-hover"
|
||||
onclick={closeWindow}
|
||||
aria-label="Close"
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if item}
|
||||
<!-- Item info -->
|
||||
<div class="px-5 pt-3 pb-2">
|
||||
<p class="text-[13px] text-text font-medium">
|
||||
{item.title || "Transcript"}
|
||||
</p>
|
||||
<p class="text-[10px] text-text-tertiary mt-0.5">
|
||||
{item.date}{#if item.duration} · {formatDuration(item.duration)}{/if} · {item.source}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Media controls -->
|
||||
{#if audioEl}
|
||||
<div class="flex items-center gap-3 px-5 py-2 border-b border-border-subtle">
|
||||
<!-- Play/Pause -->
|
||||
<button
|
||||
class="w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0
|
||||
{playing ? 'bg-accent text-white' : 'bg-accent/15 text-accent hover:bg-accent/25'}"
|
||||
onclick={togglePlay}
|
||||
aria-label={playing ? "Pause" : "Play"}
|
||||
>
|
||||
{#if playing}
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<rect x="6" y="4" width="4" height="16" rx="1" />
|
||||
<rect x="14" y="4" width="4" height="16" rx="1" />
|
||||
</svg>
|
||||
{:else}
|
||||
<svg class="w-4 h-4 ml-0.5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<!-- Time -->
|
||||
<span class="text-[11px] text-text-tertiary tabular-nums min-w-[70px]">
|
||||
{formatTime(currentTime)} / {formatTime(duration)}
|
||||
</span>
|
||||
|
||||
<!-- Seek bar -->
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max={duration || 0}
|
||||
step="0.1"
|
||||
value={currentTime}
|
||||
oninput={seekTo}
|
||||
class="flex-1 accent-accent h-1"
|
||||
data-no-transition
|
||||
/>
|
||||
|
||||
<!-- Speed pills -->
|
||||
<div class="flex gap-0.5 flex-shrink-0">
|
||||
{#each PLAYBACK_SPEEDS as speed}
|
||||
<button
|
||||
class="text-[9px] px-1.5 py-0.5 rounded-full
|
||||
{playbackRate === speed
|
||||
? 'bg-accent/15 text-accent font-medium'
|
||||
: 'text-text-tertiary hover:text-text-secondary'}"
|
||||
onclick={() => setSpeed(speed)}
|
||||
>{speed}x</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Search bar + view controls -->
|
||||
<div class="flex items-center gap-2 px-5 py-2 border-b border-border-subtle">
|
||||
<div class="flex items-center gap-2 bg-bg-input border border-border rounded-lg px-3 py-1.5 focus-within:border-accent flex-1">
|
||||
<svg class="w-3.5 h-3.5 text-text-tertiary flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<path d="M21 21l-4.35-4.35" stroke-linecap="round" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
class="flex-1 bg-transparent text-[12px] text-text placeholder:text-text-tertiary focus:outline-none"
|
||||
placeholder="Search transcript..."
|
||||
bind:value={searchQuery}
|
||||
data-no-transition
|
||||
/>
|
||||
{#if searchQuery}
|
||||
<span class="text-[10px] text-text-tertiary">{matchCount} matches</span>
|
||||
<button class="text-[10px] text-text-tertiary hover:text-text" onclick={() => searchQuery = ""}>Clear</button>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- Compact mode toggle -->
|
||||
<button
|
||||
class="text-[10px] px-2 py-1 rounded-lg flex-shrink-0
|
||||
{showTimestamps ? 'text-text-tertiary hover:text-text-secondary' : 'text-accent bg-accent/10'}"
|
||||
onclick={() => showTimestamps = !showTimestamps}
|
||||
title={showTimestamps ? "Hide timestamps (compact)" : "Show timestamps"}
|
||||
>Compact</button>
|
||||
<!-- Starred filter -->
|
||||
<button
|
||||
class="text-[10px] px-2 py-1 rounded-lg flex-shrink-0
|
||||
{showStarredOnly ? 'text-accent bg-accent/10' : 'text-text-tertiary hover:text-text-secondary'}"
|
||||
onclick={() => showStarredOnly = !showStarredOnly}
|
||||
title={showStarredOnly ? "Show all segments" : "Show starred only"}
|
||||
>Starred</button>
|
||||
</div>
|
||||
|
||||
<!-- Transcript segments -->
|
||||
<div class="flex-1 overflow-y-auto px-5 py-3 min-h-0">
|
||||
{#if item.segments && item.segments.length > 0}
|
||||
<div class="flex flex-col gap-1">
|
||||
{#each visibleSegments as seg (seg._idx)}
|
||||
<div
|
||||
bind:this={segmentRefs[seg._idx]}
|
||||
class="group flex gap-3 px-3 py-2 rounded-lg cursor-pointer transition-colors
|
||||
{activeSegmentIdx === seg._idx
|
||||
? 'bg-accent/10 border-l-2 border-accent'
|
||||
: matchingSegments.has(seg._idx)
|
||||
? 'bg-warning/5 border-l-2 border-warning/40'
|
||||
: 'border-l-2 border-transparent hover:bg-hover'}"
|
||||
onclick={() => seekToTime(seg.start)}
|
||||
ondblclick={() => startEditing(seg._idx)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
onkeydown={(e) => { if (e.key === "Enter" && editingIdx !== seg._idx) seekToTime(seg.start); }}
|
||||
>
|
||||
<!-- Star -->
|
||||
<button
|
||||
class="mt-0.5 flex-shrink-0 {seg.starred ? 'text-accent' : 'text-text-tertiary opacity-0 group-hover:opacity-100'}"
|
||||
onclick={(e) => { e.stopPropagation(); toggleStar(seg._idx); }}
|
||||
aria-label={seg.starred ? "Unstar" : "Star"}
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill={seg.starred ? "currentColor" : "none"} stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Timestamp -->
|
||||
{#if showTimestamps}
|
||||
<span class="text-[10px] text-text-tertiary tabular-nums flex-shrink-0 mt-0.5 min-w-[36px]">
|
||||
{formatTime(seg.start)}
|
||||
</span>
|
||||
{/if}
|
||||
<!-- Text (editable or display) -->
|
||||
{#if editingIdx === seg._idx}
|
||||
<textarea
|
||||
class="flex-1 bg-bg-input border border-accent rounded-lg px-2 py-1 text-[13px] text-text
|
||||
leading-relaxed resize-none focus:outline-none min-h-[40px]"
|
||||
bind:value={editingText}
|
||||
onkeydown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); finishEditing(); } if (e.key === "Escape") { editingIdx = -1; } }}
|
||||
onblur={finishEditing}
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
data-no-transition
|
||||
autofocus
|
||||
></textarea>
|
||||
{:else}
|
||||
<p class="text-[13px] text-text leading-relaxed flex-1">
|
||||
{#if searchQuery.trim()}
|
||||
{@html highlightText(seg.text.trim())}
|
||||
{:else}
|
||||
{seg.text.trim()}
|
||||
{/if}
|
||||
</p>
|
||||
{/if}
|
||||
<!-- Actions (hover reveal) -->
|
||||
<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 flex-shrink-0">
|
||||
<button
|
||||
class="text-text-tertiary hover:text-accent"
|
||||
onclick={(e) => { e.stopPropagation(); copySegment(seg._idx); }}
|
||||
title="Copy segment"
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="text-text-tertiary hover:text-danger"
|
||||
onclick={(e) => { e.stopPropagation(); deleteSegment(seg._idx); }}
|
||||
title="Delete segment"
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<!-- No segments — show full text -->
|
||||
<p class="text-[13px] text-text leading-relaxed whitespace-pre-wrap">{item.text}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex-1 flex items-center justify-center">
|
||||
<p class="text-[13px] text-text-tertiary">No transcript loaded</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user