feat: Add buffering indicator and improve queue item removal

Introduces a visual indicator for when the reader is buffering, meaning it's supposed to be playing but the current audio segment is not yet available.

Also, prevents accidental article selection when clicking the "Remove" button in the queue by adding `stopPropagation`.
This commit is contained in:
Anthony
2025-11-19 20:36:39 +08:00
parent dadebf8cd0
commit 0b10d71554
3 changed files with 84 additions and 19 deletions

View File

@@ -21,7 +21,16 @@ export const QueueItem: React.FC<QueueItemProps> = ({
onRemove
}) => {
// Check if buffering: active, supposed to be playing, but current segment audio is missing
const isBuffering = isActive && isPlaying &&
article.segments[article.currentSegmentIndex] &&
!article.segments[article.currentSegmentIndex].audioUrl;
const getStatusIcon = () => {
if (isBuffering) {
return <Loader2 className="w-5 h-5 animate-spin text-blue-500" />;
}
switch (article.status) {
case PlaybackStatus.LOADING_TEXT:
return <Loader2 className="w-5 h-5 animate-spin text-blue-500" />;
@@ -76,7 +85,10 @@ export const QueueItem: React.FC<QueueItemProps> = ({
</button>
)}
<button
onClick={onRemove}
onClick={(e) => {
e.stopPropagation(); // Prevent article selection when removing
onRemove();
}}
className="text-xs text-slate-400 hover:text-red-500 dark:text-slate-500 dark:hover:text-red-400 underline px-2"
>
Remove