rehearshalhub/verify_comment_changes.md

Verification Steps for Comment Waveform Integration

Changes Made

1. API Schema Changes

• Added author_avatar_url: str | None to SongCommentRead schema
• Updated from_model method to include avatar URL from author

2. Frontend Interface Changes

• Added author_avatar_url: string | null to SongComment interface

3. Comment Creation Changes

• Modified addCommentMutation to accept { body: string; timestamp: number }
• Updated button click handler to pass currentTime when creating comments

4. Marker Display Changes

• Changed marker icon from placeholder to comment.author_avatar_url || placeholder
• Improved marker styling (size, border, shadow)
• Added proper image styling (object-fit, border-radius)

Verification Steps

1. Test Comment Creation with Timestamp

1. Play a song and let it progress to a specific time (e.g., 30 seconds)
2. Add a comment while the song is playing
3. Verify the comment appears with the correct timestamp
4. Check that a marker appears on the waveform at the correct position

2. Test Avatar Display

1. Create comments with different users (or check existing comments)
2. Verify that user avatars appear in the waveform markers
3. Check that placeholder is used when no avatar is available

3. Test Marker Interaction

1. Click on a waveform marker
2. Verify that the comment section scrolls to the corresponding comment
3. Check that the comment is highlighted temporarily

4. Test Timestamp Display

1. Look at comments with timestamps
2. Verify that the timestamp button appears (e.g., "1:30")
3. Click the timestamp button and verify playback seeks to that position

Expected Behavior

Before Fix

• Comments created without timestamps (no waveform markers)
• All markers used placeholder icons
• No visual indication of comment timing

After Fix

• Comments created with current playhead timestamp
• Markers show user avatars when available
• Markers positioned correctly on waveform
• Timestamp buttons work for seeking
• Markers have improved visibility (border, shadow)

Troubleshooting

If markers don't appear

1. Check browser console for API errors
2. Verify database migration is applied (timestamp column exists)
3. Ensure currentTime is valid when creating comments

If avatars don't show

1. Check that author_avatar_url is included in API response
2. Verify user records have valid avatar URLs
3. Check network tab for image loading errors

If timestamps are incorrect

1. Verify currentTime from waveform hook is correct
2. Check that timestamp is properly sent to API
3. Ensure backend stores and returns timestamp correctly