audio streaming app
plyr.fm
update toast docs to reflect per-track upload messages (#1239)
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
authored by
nate nowack
Claude Opus 4.6
and committed by
GitHub
90095b02
f594b67a
+7
-5
+7
-5
docs-internal/frontend/toast-notifications.md
+7
-5
docs-internal/frontend/toast-notifications.md
···
13
13
## use cases
14
14
15
15
the toast system provides UX feedback for:
16
-
- **uploads**: "uploading track... 45%" → "track uploaded successfully!"
16
+
- **uploads**: `uploading "track title"... 45%` → `"track title" uploaded`
17
17
- **upload errors**: detailed error messages with specific failure reasons
18
18
- **network errors**: "network error: connection failed"
19
19
- **processing updates**: real-time SSE progress updates during transcoding
···
87
87
88
88
### progress updates (uploader pattern)
89
89
```typescript
90
-
// initial upload progress
91
-
const toastId = toast.info('uploading track...');
90
+
// initial upload — toast includes track title for identification
91
+
// (especially useful during concurrent album uploads)
92
+
const displayName = label ?? title;
93
+
const toastId = toast.info(`uploading "${displayName}"...`);
92
94
93
95
// update progress inline
94
96
xhr.upload.addEventListener('progress', (e) => {
95
97
const percent = Math.round((e.loaded / e.total) * 100);
96
-
toast.update(toastId, `uploading track... ${percent}%`);
98
+
toast.update(toastId, `retrieving your file... ${percent}%`);
97
99
});
98
100
99
101
// processing updates via SSE
···
104
106
}
105
107
if (update.status === 'completed') {
106
108
toast.dismiss(toastId);
107
-
toast.success('track uploaded successfully!');
109
+
toast.success(`"${displayName}" uploaded`);
108
110
}
109
111
};
110
112
```