Configure VM services and fix auth flow
- point MySQL and Whisper settings to the VM - add VM MySQL bootstrap scripts and docs - allow LAN Vite origins for CORS - fix Express 5 validation assignment crash - allow login with username or email - prevent recursive auth refresh retries
This commit is contained in:
KevinB-T committed
1 parent
ca2d1cd716
commit
30894e7f27
151 files changed
+21128
No files matched your search
@@ -0,0 +1,316 @@
|
||||
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ArrowLeft, Copy, Download, Loader2, Save, Send, Sparkles, Trash2, X } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { transcriptService } from "@/services/transcripts";
|
||||
import { userService } from "@/services/users";
|
||||
import { useAuth } from "@/context/auth";
|
||||
import type { UserSummary } from "@/services/types";
|
||||
|
||||
export const Route = createFileRoute("/_authenticated/transcripts/$id")({
|
||||
head: () => ({ meta: [{ title: "Transcript — Orphion" }] }),
|
||||
component: TranscriptDetailPage,
|
||||
});
|
||||
|
||||
function TranscriptDetailPage() {
|
||||
const { id } = Route.useParams();
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { user } = useAuth();
|
||||
const [text, setText] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [showSend, setShowSend] = useState(false);
|
||||
const [users, setUsers] = useState<UserSummary[]>([]);
|
||||
const [searchQ, setSearchQ] = useState("");
|
||||
const [sending, setSending] = useState(false);
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ["transcript", id],
|
||||
queryFn: () => transcriptService.get(id),
|
||||
});
|
||||
const transcript = data?.transcript ?? null;
|
||||
|
||||
useEffect(() => {
|
||||
if (!transcript) return;
|
||||
setText(transcript.transcriptText);
|
||||
setTitle(transcript.title ?? "");
|
||||
}, [transcript]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showSend) return;
|
||||
const handle = window.setTimeout(async () => {
|
||||
const data = await userService.search(searchQ).catch(() => ({ users: [] }));
|
||||
setUsers(data.users);
|
||||
}, 160);
|
||||
return () => window.clearTimeout(handle);
|
||||
}, [showSend, searchQ]);
|
||||
|
||||
async function save() {
|
||||
if (!transcript) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
await transcriptService.update(transcript.id, { title, transcriptText: text });
|
||||
await queryClient.invalidateQueries({ queryKey: ["transcript", id] });
|
||||
await queryClient.invalidateQueries({ queryKey: ["transcripts"] });
|
||||
toast.success("Saved");
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Unable to save");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function remove() {
|
||||
if (!transcript || !confirm("Delete this transcript?")) return;
|
||||
try {
|
||||
await transcriptService.remove(transcript.id);
|
||||
await queryClient.invalidateQueries({ queryKey: ["transcripts"] });
|
||||
toast.success("Deleted");
|
||||
navigate({ to: "/transcripts" });
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Unable to delete");
|
||||
}
|
||||
}
|
||||
|
||||
async function copy() {
|
||||
await navigator.clipboard.writeText(text);
|
||||
toast.success("Transcript copied");
|
||||
}
|
||||
|
||||
async function send(receiverId: number) {
|
||||
if (!transcript) return;
|
||||
setSending(true);
|
||||
try {
|
||||
await transcriptService.send({ transcriptId: transcript.id, receiverId });
|
||||
await queryClient.invalidateQueries({ queryKey: ["transcript", id] });
|
||||
await queryClient.invalidateQueries({ queryKey: ["transcripts"] });
|
||||
toast.success("Transcript delivered");
|
||||
setShowSend(false);
|
||||
navigate({ to: "/sent" });
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Failed to send");
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading || !transcript)
|
||||
return <div className="text-sm text-muted-foreground">Loading transcript...</div>;
|
||||
|
||||
const isReceived = transcript.receiverId === user?.id && transcript.senderId !== user?.id;
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl space-y-6">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<Link
|
||||
to="/transcripts"
|
||||
className="inline-flex items-center gap-2 text-sm text-muted-foreground transition hover:text-foreground"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" /> Back
|
||||
</Link>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<button
|
||||
onClick={copy}
|
||||
className="flex items-center gap-1.5 rounded-lg border border-border bg-secondary/30 px-3 py-2 text-xs transition hover:border-primary/50"
|
||||
>
|
||||
<Copy className="h-3.5 w-3.5" /> Copy
|
||||
</button>
|
||||
<a
|
||||
href={transcriptService.transcriptDownloadUrl(transcript.id)}
|
||||
className="flex items-center gap-1.5 rounded-lg border border-border bg-secondary/30 px-3 py-2 text-xs transition hover:border-primary/50"
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" /> .txt
|
||||
</a>
|
||||
<a
|
||||
href={transcriptService.audioUrl(transcript.id)}
|
||||
download
|
||||
className="flex items-center gap-1.5 rounded-lg border border-border bg-secondary/30 px-3 py-2 text-xs transition hover:border-primary/50"
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" /> Audio
|
||||
</a>
|
||||
{!isReceived && (
|
||||
<button
|
||||
onClick={() => setShowSend(true)}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-xs font-semibold text-primary-foreground shadow-[var(--shadow-glow)] transition hover:scale-[1.02]"
|
||||
>
|
||||
<Send className="h-3.5 w-3.5" /> Send
|
||||
</button>
|
||||
)}
|
||||
{!isReceived && (
|
||||
<button
|
||||
onClick={remove}
|
||||
className="rounded-lg border border-destructive/30 bg-secondary/30 px-3 py-2 text-xs text-destructive transition hover:bg-destructive/10"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass-strong rounded-2xl p-6 space-y-4">
|
||||
<input
|
||||
value={title}
|
||||
onChange={(event) => setTitle(event.target.value)}
|
||||
placeholder="Untitled transcript"
|
||||
disabled={isReceived}
|
||||
className="w-full bg-transparent font-display text-2xl font-semibold outline-none disabled:opacity-80"
|
||||
/>
|
||||
<div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
|
||||
<span>{new Date(transcript.createdAt).toLocaleString()}</span>
|
||||
{transcript.metadata?.duration ? (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span>{Math.round(transcript.metadata.duration)}s</span>
|
||||
</>
|
||||
) : null}
|
||||
{transcript.language ? (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span className="uppercase">{transcript.language}</span>
|
||||
</>
|
||||
) : null}
|
||||
<span>•</span>
|
||||
<span className="rounded-full bg-primary/10 px-2 py-0.5 text-primary">
|
||||
{transcript.receiverId ? "sent" : "saved"}
|
||||
</span>
|
||||
</div>
|
||||
<audio src={transcriptService.audioUrl(transcript.id)} controls className="w-full" />
|
||||
</div>
|
||||
|
||||
<div className="glass rounded-2xl p-6">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h2 className="font-display text-lg font-semibold flex items-center gap-2">
|
||||
<Sparkles className="h-4 w-4 text-primary" /> Transcript
|
||||
</h2>
|
||||
{!isReceived && (
|
||||
<button
|
||||
onClick={save}
|
||||
disabled={saving}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-primary/15 px-3 py-1.5 text-xs font-semibold text-primary transition hover:bg-primary/25 disabled:opacity-60"
|
||||
>
|
||||
{saving ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Save className="h-3.5 w-3.5" />
|
||||
)}{" "}
|
||||
Save
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<textarea
|
||||
value={text}
|
||||
onChange={(event) => setText(event.target.value)}
|
||||
rows={18}
|
||||
readOnly={isReceived}
|
||||
className="w-full resize-none bg-transparent text-sm leading-relaxed outline-none read-only:text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{transcript.timestamps.length > 0 && (
|
||||
<div className="glass rounded-2xl p-6">
|
||||
<h2 className="font-display text-lg font-semibold">Timestamps</h2>
|
||||
<div className="mt-4 max-h-72 space-y-2 overflow-y-auto">
|
||||
{transcript.timestamps.map((segment, index) => (
|
||||
<div
|
||||
key={`${segment.start}-${index}`}
|
||||
className="grid gap-3 rounded-xl border border-border bg-secondary/20 p-3 text-sm md:grid-cols-[120px_1fr]"
|
||||
>
|
||||
<span className="font-mono text-xs text-primary">
|
||||
{formatStamp(segment.start)} - {formatStamp(segment.end)}
|
||||
</span>
|
||||
<span className="text-muted-foreground">{segment.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showSend && (
|
||||
<SendDialog
|
||||
users={users}
|
||||
query={searchQ}
|
||||
sending={sending}
|
||||
onQuery={setSearchQ}
|
||||
onClose={() => setShowSend(false)}
|
||||
onSend={send}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SendDialog({
|
||||
users,
|
||||
query,
|
||||
sending,
|
||||
onQuery,
|
||||
onClose,
|
||||
onSend,
|
||||
}: {
|
||||
users: UserSummary[];
|
||||
query: string;
|
||||
sending: boolean;
|
||||
onQuery: (value: string) => void;
|
||||
onClose: () => void;
|
||||
onSend: (id: number) => void;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-background/75 p-4 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
className="glass-strong w-full max-w-md rounded-2xl p-6"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="font-display text-lg font-semibold">Send transcript</h3>
|
||||
<p className="mt-1 text-sm text-muted-foreground">Choose a recipient.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded-lg p-2 text-muted-foreground transition hover:bg-secondary hover:text-foreground"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
value={query}
|
||||
onChange={(event) => onQuery(event.target.value)}
|
||||
placeholder="Search users..."
|
||||
className="mt-4 w-full rounded-xl border border-border bg-input/40 px-4 py-2.5 text-sm outline-none transition focus:border-primary/60"
|
||||
/>
|
||||
<div className="mt-3 max-h-72 space-y-1 overflow-y-auto">
|
||||
{users.length === 0 && (
|
||||
<p className="py-4 text-center text-sm text-muted-foreground">No users found.</p>
|
||||
)}
|
||||
{users.map((recipient) => (
|
||||
<button
|
||||
key={recipient.id}
|
||||
disabled={sending}
|
||||
onClick={() => onSend(recipient.id)}
|
||||
className="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left transition hover:bg-secondary disabled:opacity-60"
|
||||
>
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-sm font-semibold text-primary-foreground">
|
||||
{recipient.fullName.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-medium">{recipient.fullName}</div>
|
||||
<div className="truncate text-xs text-muted-foreground">@{recipient.username}</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatStamp(seconds: number) {
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
return `${minutes}:${String(secs).padStart(2, "0")}`;
|
||||
}
|
||||
Reference in new issue
Block a user