feat: Initialize project with basic structure and dependencies
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.
This commit is contained in:
Anthony
86
components/QueueItem.tsx
Normal file
86
components/QueueItem.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
59
components/ReaderView.tsx
Normal file
59
components/ReaderView.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import { Article } from '../types';
|
||||
import { FileText } from 'lucide-react';
|
||||
|
||||
interface ReaderViewProps {
|
||||
article?: Article | null;
|
||||
}
|
||||
|
||||
export const ReaderView: React.FC<ReaderViewProps> = ({ article }) => {
|
||||
if (!article) {
|
||||
return (
|
||||
<div className="h-full flex flex-col items-center justify-center text-slate-400 p-12 border-2 border-dashed border-slate-200 rounded-2xl bg-slate-50/50">
|
||||
<FileText className="w-12 h-12 mb-4 opacity-50" />
|
||||
<p className="text-lg font-medium">Select an article to read along</p>
|
||||
<p className="text-sm">The text will appear here while you listen.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Split text by newlines to create paragraphs
|
||||
const paragraphs = article.text
|
||||
? article.text.split('\n').filter(p => p.trim().length > 0)
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden h-[calc(100vh-12rem)] flex flex-col">
|
||||
<div className="p-6 border-b border-slate-100 bg-white sticky top-0 z-10">
|
||||
<h2 className="text-2xl font-bold text-slate-900 leading-tight">
|
||||
{article.title}
|
||||
</h2>
|
||||
<a
|
||||
href={article.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-blue-600 hover:underline mt-2 inline-block"
|
||||
>
|
||||
{new URL(article.url).hostname}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="flex-grow overflow-y-auto p-6 sm:p-8 space-y-6 custom-scrollbar bg-white">
|
||||
{paragraphs.length > 0 ? (
|
||||
paragraphs.map((paragraph, idx) => (
|
||||
<p key={idx} className="text-lg text-slate-700 leading-relaxed font-serif">
|
||||
{paragraph}
|
||||
</p>
|
||||
))
|
||||
) : (
|
||||
<div className="space-y-4 animate-pulse">
|
||||
<div className="h-4 bg-slate-100 rounded w-3/4"></div>
|
||||
<div className="h-4 bg-slate-100 rounded w-full"></div>
|
||||
<div className="h-4 bg-slate-100 rounded w-5/6"></div>
|
||||
<p className="text-slate-400 italic mt-4">Extracting article content...</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
30
components/VoiceSelector.tsx
Normal file
30
components/VoiceSelector.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import { VoiceName } from '../types';
|
||||
import { AVAILABLE_VOICES } from '../constants';
|
||||
import { Mic } from 'lucide-react';
|
||||
|
||||
interface VoiceSelectorProps {
|
||||
selectedVoice: VoiceName;
|
||||
onVoiceChange: (voice: VoiceName) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export const VoiceSelector: React.FC<VoiceSelectorProps> = ({ selectedVoice, onVoiceChange, disabled }) => {
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Mic className="w-4 h-4 text-slate-500" />
|
||||
<select
|
||||
value={selectedVoice}
|
||||
onChange={(e) => onVoiceChange(e.target.value as VoiceName)}
|
||||
disabled={disabled}
|
||||
className="bg-white border border-slate-300 text-slate-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{AVAILABLE_VOICES.map((v) => (
|
||||
<option key={v.name} value={v.name}>
|
||||
{v.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user