feat(frontend): add timestamp comments to time range bar

[keanu-a]

Add timestamp comment markers to the video timeline

Implements main app feature: comments appear as avatar markers on the video progress bar, with bubbles that surface on hover and show as playback crosses each timestamp automatically (like SoundCloud).

What this does

• Renders comment authors as avatars positioned along the timeline by timestamp
• Hovering a marker shows its comment bubble
• Overlapping timestamps resolve latest-wins

Data flow

Comments are fetched once on the server and drilled down, so no duplicate fetching between the timeline and the comment section

• VideoPage (server) — fetches comments alongside video data, passes them into VideoPlayer
• VideoPlayer (client) — owns the videoRef (attached to ) and hydration gating only. Holds no playback state, so it doesn't re-render during playback. Passes comments + videoRef into CommentMarkers
• CommentMarkers — the state layer. Calls the hooks against videoRef, computes each marker's position and active state, maps to markers
• CommentMarker — pure presentational. Receives position + isActive, renders the avatar and bubble. memo'd so only markers whose active state changes re-render

Hooks

• useVideoTime(videoRef) — listens to loadedmetadata/durationchange, returns duration (the denominator for positioning)

• useActiveComment(videoRef, comments) — listens to timeupdate + seeked, returns the active comment id for the current playhead position (latest-wins tiebreaker). Returns a primitive id (not the object) and bails on unchanged value, so re-renders only happen on actual active transitions, not every tick

• Pure helper getTimelinePosition(timestamp, duration) handles the percent math and out-of-bounds filtering, kept separate as testable non-React logic.

Styling / layout

• A commentStrip overlay sits above the MediaTimeRange, inset to match the range's internal track padding so markers align to the actual scrubbable track (not the full element width)
• Bubble visibility is hover || isActive, via Tailwind group-hover + an isActive opacity toggle