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:
@@ -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
|
||||
|
||||
@@ -106,6 +106,8 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article, settings, onTog
|
||||
{article.segments.length > 0 ? (
|
||||
article.segments.map((segment, idx) => {
|
||||
const isActive = article.currentSegmentIndex === idx;
|
||||
const isBuffering = isActive && article.status === 'PLAYING' && !segment.audioUrl;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={segment.id}
|
||||
@@ -116,7 +118,7 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article, settings, onTog
|
||||
transition-all duration-200 whitespace-pre-wrap rounded-xl p-3 sm:p-4 -mx-2 sm:-mx-4 border-l-4 mb-2
|
||||
${getLeadingClass()}
|
||||
${isActive
|
||||
? 'text-slate-900 dark:text-white bg-blue-50 dark:bg-blue-900/20 border-blue-500 shadow-sm'
|
||||
? `bg-blue-50 dark:bg-blue-900/20 border-blue-500 shadow-sm ${isBuffering ? 'animate-pulse opacity-70' : 'text-slate-900 dark:text-white'}`
|
||||
: 'text-slate-700 dark:text-slate-300 border-transparent hover:bg-slate-100 dark:hover:bg-slate-800/50 cursor-pointer hover:border-slate-300 dark:hover:border-slate-600'
|
||||
}
|
||||
`}
|
||||
|
||||
Reference in New Issue
Block a user