3b8c4a0cb8
- Add author_avatar_url to API schema and frontend interface - Capture current playhead timestamp when creating comments - Display user avatars in waveform markers instead of placeholders - Improve marker visibility with better styling (size, borders, shadows) - Fix TypeScript type errors for nullable timestamps - Add debug logging for troubleshooting This implements the full comment waveform integration as requested: - Comments are created with exact playhead timestamps - Waveform markers show at correct positions with user avatars - Clicking markers scrolls to corresponding comments - Backward compatible with existing comments without timestamps
302 lines
13 KiB
TypeScript
302 lines
13 KiB
TypeScript
import { useRef, useState, useCallback, useEffect } from "react";
|
|
import { useParams, Link } from "react-router-dom";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { api } from "../api/client";
|
|
import { listAnnotations, addReaction } from "../api/annotations";
|
|
import { useVersionWebSocket } from "../hooks/useWebSocket";
|
|
import { useWaveform } from "../hooks/useWaveform";
|
|
import type { Annotation } from "../api/annotations";
|
|
|
|
interface SongComment {
|
|
id: string;
|
|
song_id: string;
|
|
body: string;
|
|
author_id: string;
|
|
author_name: string;
|
|
author_avatar_url: string | null;
|
|
created_at: string;
|
|
timestamp: number | null; // Timestamp in seconds
|
|
}
|
|
|
|
export function SongPage() {
|
|
const { bandId, songId } = useParams<{ bandId: string; songId: string }>();
|
|
const qc = useQueryClient();
|
|
const waveformRef = useRef<HTMLDivElement>(null);
|
|
const [selectedVersionId, setSelectedVersionId] = useState<string | null>(null);
|
|
const [commentBody, setCommentBody] = useState("");
|
|
|
|
const { data: versions } = useQuery({
|
|
queryKey: ["versions", songId],
|
|
queryFn: () => api.get<{ id: string; version_number: number; label: string | null; analysis_status: string }[]>(`/songs/${songId}/versions`),
|
|
enabled: !!songId,
|
|
});
|
|
|
|
const activeVersion = selectedVersionId ?? versions?.[0]?.id ?? null;
|
|
|
|
const { data: annotations } = useQuery({
|
|
queryKey: ["annotations", activeVersion],
|
|
queryFn: () => listAnnotations(activeVersion!),
|
|
enabled: !!activeVersion,
|
|
});
|
|
|
|
const { isPlaying, currentTime, play, pause, seekTo, addMarker, clearMarkers } = useWaveform(waveformRef, {
|
|
url: activeVersion ? `/api/v1/versions/${activeVersion}/stream` : null,
|
|
peaksUrl: activeVersion ? `/api/v1/versions/${activeVersion}/waveform` : null,
|
|
});
|
|
|
|
// Add space key shortcut for play/pause
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.code === "Space") {
|
|
e.preventDefault();
|
|
if (isPlaying) {
|
|
pause();
|
|
} else {
|
|
play();
|
|
}
|
|
}
|
|
};
|
|
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
}, [isPlaying, play, pause]);
|
|
|
|
const { data: comments } = useQuery<SongComment[]>({
|
|
queryKey: ["comments", songId],
|
|
queryFn: () => api.get<SongComment[]>(`/songs/${songId}/comments`),
|
|
enabled: !!songId,
|
|
});
|
|
|
|
// Scroll to comment when a marker is clicked
|
|
const scrollToComment = (commentId: string) => {
|
|
const commentElement = document.getElementById(`comment-${commentId}`);
|
|
if (commentElement) {
|
|
commentElement.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
commentElement.style.backgroundColor = "var(--accent-bg)";
|
|
setTimeout(() => {
|
|
commentElement.style.backgroundColor = "var(--bg-subtle)";
|
|
}, 2000);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (comments) {
|
|
console.log('Comments data:', comments);
|
|
clearMarkers();
|
|
comments.forEach((comment) => {
|
|
console.log('Processing comment:', comment.id, 'timestamp:', comment.timestamp, 'avatar:', comment.author_avatar_url);
|
|
if (comment.timestamp !== undefined && comment.timestamp !== null) {
|
|
console.log('Adding marker at time:', comment.timestamp);
|
|
addMarker({
|
|
id: comment.id,
|
|
time: comment.timestamp,
|
|
onClick: () => scrollToComment(comment.id),
|
|
icon: comment.author_avatar_url || "https://via.placeholder.com/20",
|
|
});
|
|
} else {
|
|
console.log('Skipping comment without timestamp:', comment.id);
|
|
}
|
|
});
|
|
}
|
|
}, [comments, addMarker, clearMarkers]);
|
|
|
|
const addCommentMutation = useMutation({
|
|
mutationFn: ({ body, timestamp }: { body: string; timestamp: number }) => {
|
|
console.log('Creating comment with timestamp:', timestamp);
|
|
return api.post(`/songs/${songId}/comments`, { body, timestamp });
|
|
},
|
|
onSuccess: () => {
|
|
console.log('Comment created successfully');
|
|
qc.invalidateQueries({ queryKey: ["comments", songId] });
|
|
setCommentBody("");
|
|
},
|
|
onError: (error) => {
|
|
console.error('Error creating comment:', error);
|
|
}
|
|
});
|
|
|
|
const deleteCommentMutation = useMutation({
|
|
mutationFn: (commentId: string) => api.delete(`/comments/${commentId}`),
|
|
onSuccess: () => qc.invalidateQueries({ queryKey: ["comments", songId] }),
|
|
});
|
|
|
|
const invalidateAnnotations = useCallback(
|
|
() => qc.invalidateQueries({ queryKey: ["annotations", activeVersion] }),
|
|
[qc, activeVersion]
|
|
);
|
|
|
|
useVersionWebSocket(activeVersion, {
|
|
"annotation.created": invalidateAnnotations,
|
|
"annotation.updated": invalidateAnnotations,
|
|
"annotation.deleted": invalidateAnnotations,
|
|
"reaction.added": invalidateAnnotations,
|
|
});
|
|
|
|
return (
|
|
<div style={{ background: "var(--bg)", minHeight: "100vh", color: "var(--text)", padding: 24 }}>
|
|
<Link to={`/bands/${bandId}`} style={{ color: "var(--text-muted)", fontSize: 12, textDecoration: "none", display: "inline-block", marginBottom: 16 }}>
|
|
← Back to Band
|
|
</Link>
|
|
|
|
{/* Version selector */}
|
|
<div style={{ display: "flex", gap: 8, marginBottom: 20 }}>
|
|
{versions?.map((v) => (
|
|
<button
|
|
key={v.id}
|
|
onClick={() => setSelectedVersionId(v.id)}
|
|
style={{
|
|
background: v.id === activeVersion ? "var(--accent-bg)" : "var(--bg-inset)",
|
|
border: `1px solid ${v.id === activeVersion ? "var(--accent)" : "var(--border)"}`,
|
|
borderRadius: 6, padding: "6px 14px",
|
|
color: v.id === activeVersion ? "var(--accent)" : "var(--text-muted)",
|
|
cursor: "pointer", fontSize: 12, fontFamily: "monospace",
|
|
}}
|
|
>
|
|
v{v.version_number} {v.label ?? ""} · {v.analysis_status}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Waveform */}
|
|
<div style={{ background: "var(--bg-subtle)", border: "1px solid var(--border)", borderRadius: 8, padding: "16px 16px 8px", marginBottom: 16 }}>
|
|
<div ref={waveformRef} />
|
|
<div style={{ display: "flex", gap: 12, marginTop: 8 }}>
|
|
<button
|
|
onClick={isPlaying ? pause : play}
|
|
style={{ background: "var(--accent)", border: "none", borderRadius: 6, padding: "6px 18px", cursor: "pointer", fontWeight: 600, color: "var(--accent-fg)" }}
|
|
>
|
|
{isPlaying ? "⏸ Pause" : "▶ Play"}
|
|
</button>
|
|
<span style={{ color: "var(--text-muted)", fontSize: 12, alignSelf: "center" }}>
|
|
{formatTime(currentTime)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Current Play Time Display */}
|
|
<div style={{ marginBottom: 16, textAlign: "center" }}>
|
|
<span style={{ color: "var(--text-muted)", fontSize: 14, fontFamily: "monospace" }}>
|
|
Current Time: {formatTime(currentTime)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Annotations */}
|
|
<div style={{ display: "grid", gap: 8, marginBottom: 32 }}>
|
|
{annotations?.map((a) => (
|
|
<AnnotationCard key={a.id} annotation={a} onSeek={seekTo} versionId={activeVersion!} />
|
|
))}
|
|
</div>
|
|
|
|
{/* Comments */}
|
|
<div>
|
|
<h2 style={{ fontSize: 14, color: "var(--text-muted)", fontFamily: "monospace", letterSpacing: 1, marginBottom: 14 }}>COMMENTS</h2>
|
|
|
|
<div style={{ display: "grid", gap: 8, marginBottom: 16 }}>
|
|
{comments?.map((c) => (
|
|
<div id={`comment-${c.id}`} key={c.id} style={{ background: "var(--bg-subtle)", border: "1px solid var(--border)", borderRadius: 8, padding: "12px 16px" }}>
|
|
<div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
|
|
<span style={{ fontWeight: 600, fontSize: 13, color: "var(--text)" }}>{c.author_name}</span>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
|
|
<span style={{ color: "var(--text-subtle)", fontSize: 11 }}>{new Date(c.created_at).toLocaleString()}</span>
|
|
<button
|
|
onClick={() => deleteCommentMutation.mutate(c.id)}
|
|
style={{ background: "none", border: "none", color: "var(--text-subtle)", cursor: "pointer", fontSize: 11, padding: 0 }}
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{c.timestamp !== undefined && c.timestamp !== null && (
|
|
<div style={{ display: "flex", gap: 8, marginBottom: 6 }}>
|
|
<button
|
|
onClick={() => seekTo(c.timestamp!)}
|
|
style={{ background: "var(--accent-bg)", border: "1px solid var(--accent)", borderRadius: 4, color: "var(--accent)", cursor: "pointer", fontSize: 10, padding: "2px 8px", fontFamily: "monospace" }}
|
|
>
|
|
{formatTime(c.timestamp)}
|
|
</button>
|
|
</div>
|
|
)}
|
|
<p style={{ margin: 0, fontSize: 13, color: "var(--text)", lineHeight: 1.5 }}>{c.body}</p>
|
|
</div>
|
|
))}
|
|
{comments?.length === 0 && (
|
|
<p style={{ color: "var(--text-subtle)", fontSize: 13 }}>No comments yet. Be the first.</p>
|
|
)}
|
|
</div>
|
|
|
|
<div style={{ display: "flex", gap: 8 }}>
|
|
<textarea
|
|
value={commentBody}
|
|
onChange={(e) => setCommentBody(e.target.value)}
|
|
placeholder="Add a comment…"
|
|
rows={2}
|
|
style={{ flex: 1, padding: "8px 12px", background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text)", fontSize: 13, resize: "vertical", fontFamily: "inherit" }}
|
|
/>
|
|
<button
|
|
onClick={() => commentBody.trim() && addCommentMutation.mutate({ body: commentBody.trim(), timestamp: currentTime })}
|
|
disabled={!commentBody.trim() || addCommentMutation.isPending}
|
|
style={{ background: "var(--accent)", border: "none", borderRadius: 6, color: "var(--accent-fg)", cursor: "pointer", padding: "0 18px", fontWeight: 600, fontSize: 13, alignSelf: "stretch" }}
|
|
>
|
|
Post
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AnnotationCard({ annotation: a, onSeek, versionId }: { annotation: Annotation; onSeek: (t: number) => void; versionId: string }) {
|
|
const qc = useQueryClient();
|
|
const reactionMutation = useMutation({
|
|
mutationFn: (emoji: string) => addReaction(a.id, emoji),
|
|
onSuccess: () => qc.invalidateQueries({ queryKey: ["annotations", versionId] }),
|
|
});
|
|
|
|
return (
|
|
<div style={{ background: "var(--bg-inset)", border: "1px solid var(--border)", borderRadius: 8, padding: 14 }}>
|
|
<div style={{ display: "flex", gap: 8, marginBottom: 6 }}>
|
|
<button
|
|
onClick={() => onSeek(a.timestamp_ms / 1000)}
|
|
style={{ background: "var(--accent-bg)", border: "1px solid var(--accent)", borderRadius: 4, color: "var(--accent)", cursor: "pointer", fontSize: 10, padding: "2px 8px", fontFamily: "monospace" }}
|
|
>
|
|
{formatTime(a.timestamp_ms / 1000)}
|
|
{a.range_end_ms != null && ` → ${formatTime(a.range_end_ms / 1000)}`}
|
|
</button>
|
|
<span style={{ color: "var(--text-muted)", fontSize: 11 }}>{a.type}</span>
|
|
{a.label && <span style={{ color: "var(--teal)", fontSize: 11 }}>{a.label}</span>}
|
|
{a.tags.map((t) => (
|
|
<span key={t} style={{ background: "var(--teal-bg)", color: "var(--teal)", fontSize: 9, padding: "1px 6px", borderRadius: 3, fontFamily: "monospace" }}>{t}</span>
|
|
))}
|
|
</div>
|
|
{a.body && <p style={{ color: "var(--text)", margin: 0, fontSize: 13 }}>{a.body}</p>}
|
|
{a.range_analysis && (
|
|
<div style={{ marginTop: 8, display: "flex", gap: 12, fontSize: 11, color: "var(--text-muted)" }}>
|
|
{a.range_analysis.bpm && <span>♩ {a.range_analysis.bpm.toFixed(1)} BPM</span>}
|
|
{a.range_analysis.key && <span>🎵 {a.range_analysis.key}</span>}
|
|
{a.range_analysis.avg_loudness_lufs && <span>{a.range_analysis.avg_loudness_lufs.toFixed(1)} LUFS</span>}
|
|
</div>
|
|
)}
|
|
<div style={{ marginTop: 8, display: "flex", gap: 4 }}>
|
|
{["🔥", "💡", "✅", "❓"].map((emoji) => (
|
|
<button
|
|
key={emoji}
|
|
onClick={() => reactionMutation.mutate(emoji)}
|
|
style={{ background: "none", border: "1px solid var(--border)", borderRadius: 4, cursor: "pointer", padding: "2px 6px", fontSize: 14 }}
|
|
>
|
|
{emoji}{" "}
|
|
<span style={{ fontSize: 10, color: "var(--text-muted)" }}>
|
|
{a.reactions.filter((r) => r.emoji === emoji).length || ""}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function formatTime(seconds: number): string {
|
|
const m = Math.floor(seconds / 60);
|
|
const s = Math.floor(seconds % 60);
|
|
return `${m}:${String(s).padStart(2, "0")}`;
|
|
}
|