sschuhmann/rehearshalhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: comment waveform integration with timestamps and avatars

Browse Source 
- 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
This commit is contained in:
Mistral Vibe
2026-03-30 19:06:40 +02:00
parent 86d4c8fad6
commit 3b8c4a0cb8
3 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/hooks/useWaveform.ts
View File

@@ -97,24 +97,27 @@ export function useWaveform(
const wavesurfer = wsRef.current;
const markerElement = document.createElement("div");
markerElement.style.position = "absolute";
markerElement.style.width = "20px";
markerElement.style.height = "20px";
markerElement.style.borderRadius = "50% ";
markerElement.style.width = "24px";
markerElement.style.height = "24px";
markerElement.style.borderRadius = "50%";
markerElement.style.backgroundColor = "var(--accent)";
markerElement.style.cursor = "pointer";
markerElement.style.zIndex = "9999";
markerElement.style.left = `${(marker.time / wavesurfer.getDuration()) * 100}%`;
markerElement.style.transform = "translateX(-50%) translateY(-50%)";
markerElement.style.top = "50% ";
markerElement.style.top = "50%";
markerElement.style.border = "2px solid white";
markerElement.style.boxShadow = "0 0 4px rgba(0, 0, 0, 0.3)";
markerElement.title = `Comment at ${formatTime(marker.time)}`;
markerElement.onclick = marker.onClick;
if (marker.icon) {
const iconElement = document.createElement("img");
iconElement.src = marker.icon;
iconElement.style.width = "100% ";
iconElement.style.height = "100% ";
iconElement.style.borderRadius = "50% ";
iconElement.style.width = "100%";
iconElement.style.height = "100%";
iconElement.style.borderRadius = "50%";
iconElement.style.objectFit = "cover";
markerElement.appendChild(iconElement);
}