mirror of
https://github.com/Tony0410/News-reader-pro.git
synced 2026-05-24 13:21:40 +08:00
0775104b69
Sets up the foundational elements for the NewsCaster AI application. This includes: - Initializing the project with Vite and React. - Defining core types for articles and player state. - Configuring build tools and TypeScript. - Adding essential dependencies like React, Vite, and Google's Gemini API client. - Providing initial README instructions for running locally. - Setting up basic styling and structure in index.html. - Defining available voices and playback constants. - Implementing utility functions for audio handling.
86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import { Article, PlaybackStatus } from '../types';
|
|
import { Play, Pause, Loader2, AlertCircle, FileText, Headphones } from 'lucide-react';
|
|
|
|
interface QueueItemProps {
|
|
article: Article;
|
|
isActive: boolean;
|
|
isPlaying: boolean;
|
|
onPlay: () => void;
|
|
onPause: () => void;
|
|
onRemove: () => void;
|
|
}
|
|
|
|
export const QueueItem: React.FC<QueueItemProps> = ({
|
|
article,
|
|
isActive,
|
|
isPlaying,
|
|
onPlay,
|
|
onPause,
|
|
onRemove
|
|
}) => {
|
|
|
|
const getStatusIcon = () => {
|
|
switch (article.status) {
|
|
case PlaybackStatus.LOADING_TEXT:
|
|
return <Loader2 className="w-5 h-5 animate-spin text-blue-500" />;
|
|
case PlaybackStatus.LOADING_AUDIO:
|
|
return <Loader2 className="w-5 h-5 animate-spin text-purple-500" />;
|
|
case PlaybackStatus.ERROR:
|
|
return <AlertCircle className="w-5 h-5 text-red-500" />;
|
|
case PlaybackStatus.PLAYING:
|
|
return <div className="w-4 h-4 flex items-end space-x-0.5 h-4 overflow-hidden">
|
|
<div className="w-1 bg-blue-500 animate-[bounce_1s_infinite] h-2"></div>
|
|
<div className="w-1 bg-blue-500 animate-[bounce_1.2s_infinite] h-4"></div>
|
|
<div className="w-1 bg-blue-500 animate-[bounce_0.8s_infinite] h-3"></div>
|
|
</div>;
|
|
default:
|
|
return <FileText className="w-5 h-5 text-slate-400" />;
|
|
}
|
|
};
|
|
|
|
const isReady = article.status === PlaybackStatus.READY || article.status === PlaybackStatus.PAUSED || article.status === PlaybackStatus.PLAYING || article.status === PlaybackStatus.COMPLETED;
|
|
|
|
return (
|
|
<div className={`
|
|
relative group flex items-center p-4 rounded-xl border transition-all duration-200
|
|
${isActive
|
|
? 'bg-blue-50 border-blue-200 shadow-sm'
|
|
: 'bg-white border-slate-100 hover:border-slate-300'
|
|
}
|
|
`}>
|
|
<div className="flex-shrink-0 mr-4 w-8 flex justify-center">
|
|
{getStatusIcon()}
|
|
</div>
|
|
|
|
<div className="flex-grow min-w-0">
|
|
<h3 className={`font-medium truncate ${isActive ? 'text-blue-900' : 'text-slate-900'}`}>
|
|
{article.title || article.url}
|
|
</h3>
|
|
<p className="text-xs text-slate-500 truncate mt-0.5">
|
|
{article.url}
|
|
</p>
|
|
{article.errorMessage && (
|
|
<p className="text-xs text-red-500 mt-1">{article.errorMessage}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-shrink-0 ml-4 flex items-center space-x-2 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
|
|
{isReady && (
|
|
<button
|
|
onClick={isActive && isPlaying ? onPause : onPlay}
|
|
className="p-2 rounded-full bg-slate-100 hover:bg-blue-100 text-slate-700 hover:text-blue-700 transition-colors"
|
|
>
|
|
{isActive && isPlaying ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={onRemove}
|
|
className="text-xs text-slate-400 hover:text-red-500 underline px-2"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |