ccafcd38af
- Add avatar_url field to MemberSettingsUpdate schema - Create AvatarService for generating default avatars using DiceBear - Update auth service to generate avatars on user registration - Add avatar upload UI to settings page - Update settings endpoint to handle avatar URL updates - Display current avatar in settings with upload/generate options Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
73 lines
2.6 KiB
Markdown
73 lines
2.6 KiB
Markdown
# 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 |