mirror of
https://github.com/lucasrcsantana/story-generator.git
synced 2025-12-17 05:47:52 +00:00
fix: melhora tratamento de URLs de imagem
- Adiciona verificação de URLs indefinidas - Implementa fallback para imagem padrão - Corrige tipagem em getOptimizedImageUrl - Padroniza otimização em edge functions - Previne erros de runtime
This commit is contained in:
Lucas Santana
parent
d5c75ab6c2
commit
3ef8c99062
277
src/pages/demo/StoryPageDemo.tsx
Normal file
277
src/pages/demo/StoryPageDemo.tsx
Normal file
@ -0,0 +1,277 @@
|
||||
import React from 'react';
|
||||
import { ArrowLeft, ArrowRight, Mic, Volume2, Share2, ChevronDown, ChevronUp, Loader2 } from 'lucide-react';
|
||||
import { AudioRecorder } from '../../components/story/AudioRecorder';
|
||||
import { StoryMetrics } from '../../components/story/StoryMetrics';
|
||||
import type { StoryRecording } from '../../types/database';
|
||||
|
||||
// Separar dados mock em arquivo próprio
|
||||
const DEMO_DATA = {
|
||||
recording: {
|
||||
id: 'demo-recording',
|
||||
fluency_score: 85,
|
||||
pronunciation_score: 90,
|
||||
accuracy_score: 88,
|
||||
comprehension_score: 92,
|
||||
words_per_minute: 120,
|
||||
pause_count: 3,
|
||||
error_count: 2,
|
||||
self_corrections: 1,
|
||||
strengths: [
|
||||
'Ótima pronúncia das palavras',
|
||||
'Boa velocidade de leitura',
|
||||
'Excelente compreensão do texto'
|
||||
],
|
||||
improvements: [
|
||||
'Reduzir pequenas pausas entre frases',
|
||||
'Praticar palavras mais complexas'
|
||||
],
|
||||
suggestions: 'Continue praticando a leitura em voz alta regularmente',
|
||||
created_at: new Date().toISOString(),
|
||||
processed_at: new Date().toISOString()
|
||||
},
|
||||
story: {
|
||||
id: 'demo',
|
||||
student_id: 'demo',
|
||||
title: 'Uma Aventura Educacional',
|
||||
content: {
|
||||
pages: [
|
||||
{
|
||||
text: 'Bem-vindo à demonstração do Histórias Mágicas! Aqui você pode ver como funciona nossa plataforma de leitura interativa...',
|
||||
image: 'https://images.unsplash.com/photo-1472162072942-cd5147eb3902?auto=format&fit=crop&q=80&w=800&h=600',
|
||||
},
|
||||
{
|
||||
text: 'Com histórias interativas e educativas, seus alunos aprenderão de forma divertida e envolvente. Cada história é uma nova aventura!',
|
||||
image: 'https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&q=80&w=800&h=600',
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Componente para imagem com loading
|
||||
function ImageWithLoading({ src, alt }: { src: string; alt: string }) {
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
|
||||
return (
|
||||
<div className="relative aspect-video bg-gray-50">
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Loader2 className="w-8 h-8 text-purple-600 animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
<img
|
||||
src={src}
|
||||
alt={alt}
|
||||
className={`w-full h-full object-cover transition-opacity duration-300 ${
|
||||
isLoading ? 'opacity-0' : 'opacity-100'
|
||||
}`}
|
||||
onLoad={() => setIsLoading(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Componente para navegação entre páginas
|
||||
function PageNavigation({
|
||||
currentPage,
|
||||
totalPages,
|
||||
onPrevious,
|
||||
onNext
|
||||
}: {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
onPrevious: () => void;
|
||||
onNext: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex justify-between items-center mt-8 pt-6 border-t border-gray-200">
|
||||
<button
|
||||
onClick={onPrevious}
|
||||
disabled={currentPage === 0}
|
||||
className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-gray-900 disabled:opacity-50 transition"
|
||||
>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
Anterior
|
||||
</button>
|
||||
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Página {currentPage + 1} de {totalPages}
|
||||
</span>
|
||||
|
||||
<button
|
||||
onClick={onNext}
|
||||
disabled={currentPage === totalPages - 1}
|
||||
className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-gray-900 disabled:opacity-50 transition"
|
||||
>
|
||||
Próxima
|
||||
<ArrowRight className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function StoryPageDemo(): JSX.Element {
|
||||
const [currentPage, setCurrentPage] = React.useState(0);
|
||||
const [isPlaying, setIsPlaying] = React.useState(false);
|
||||
const [showMetrics, setShowMetrics] = React.useState(false);
|
||||
const [isRecording, setIsRecording] = React.useState(false);
|
||||
|
||||
const handleShare = () => {
|
||||
alert('Funcionalidade de compartilhamento disponível apenas na versão completa!');
|
||||
};
|
||||
|
||||
// Simula o processo de gravação e análise
|
||||
const handleRecordingComplete = () => {
|
||||
setIsRecording(true);
|
||||
setTimeout(() => {
|
||||
setIsRecording(false);
|
||||
setShowMetrics(true);
|
||||
}, 3000); // Simula 3 segundos de "processamento"
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-purple-50 to-white py-12">
|
||||
<div className="max-w-4xl mx-auto px-4 space-y-8">
|
||||
{/* Header */}
|
||||
<header className="flex justify-between items-center">
|
||||
<button
|
||||
onClick={() => window.history.back()}
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition"
|
||||
>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
Voltar
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={handleShare}
|
||||
className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-gray-900 transition"
|
||||
>
|
||||
<Share2 className="h-5 w-5" />
|
||||
Compartilhar
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsPlaying(!isPlaying)}
|
||||
className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-gray-900 transition"
|
||||
>
|
||||
<Volume2 className="h-5 w-5" />
|
||||
{isPlaying ? 'Pausar' : 'Ouvir'}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* História com Imagem */}
|
||||
<main className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<ImageWithLoading
|
||||
src={DEMO_DATA.story.content.pages[currentPage].image}
|
||||
alt={`Página ${currentPage + 1}`}
|
||||
/>
|
||||
|
||||
<div className="p-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-6">
|
||||
{DEMO_DATA.story.title}
|
||||
</h1>
|
||||
|
||||
<p className="text-xl leading-relaxed text-gray-700 mb-8">
|
||||
{DEMO_DATA.story.content.pages[currentPage].text}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={handleRecordingComplete}
|
||||
disabled={isRecording}
|
||||
className={`flex items-center gap-2 px-6 py-3 rounded-lg text-white transition
|
||||
${isRecording
|
||||
? 'bg-gray-400 cursor-not-allowed'
|
||||
: 'bg-purple-600 hover:bg-purple-700'}`}
|
||||
>
|
||||
<Mic className="h-5 w-5" />
|
||||
{isRecording ? 'Processando...' : 'Gravar Leitura'}
|
||||
</button>
|
||||
{isRecording && (
|
||||
<div className="flex items-center gap-2 text-gray-600">
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
Analisando sua leitura...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<PageNavigation
|
||||
currentPage={currentPage}
|
||||
totalPages={DEMO_DATA.story.content.pages.length}
|
||||
onPrevious={() => setCurrentPage(p => Math.max(0, p - 1))}
|
||||
onNext={() => setCurrentPage(p => Math.min(DEMO_DATA.story.content.pages.length - 1, p + 1))}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Dashboard de Métricas Condicional */}
|
||||
{showMetrics && (
|
||||
<section className="space-y-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
Dashboard de Leitura
|
||||
</h2>
|
||||
|
||||
<StoryMetrics
|
||||
data={{
|
||||
metrics: {
|
||||
fluency: DEMO_DATA.recording.fluency_score,
|
||||
pronunciation: DEMO_DATA.recording.pronunciation_score,
|
||||
accuracy: DEMO_DATA.recording.accuracy_score,
|
||||
comprehension: DEMO_DATA.recording.comprehension_score
|
||||
},
|
||||
feedback: {
|
||||
strengths: DEMO_DATA.recording.strengths,
|
||||
improvements: DEMO_DATA.recording.improvements,
|
||||
suggestions: DEMO_DATA.recording.suggestions
|
||||
},
|
||||
details: {
|
||||
wordsPerMinute: DEMO_DATA.recording.words_per_minute,
|
||||
pauseCount: DEMO_DATA.recording.pause_count,
|
||||
errorCount: DEMO_DATA.recording.error_count,
|
||||
selfCorrections: DEMO_DATA.recording.self_corrections
|
||||
}
|
||||
}}
|
||||
isLoading={false}
|
||||
/>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* CTAs */}
|
||||
<section className="border-t border-gray-200 pt-8 mt-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 text-center">
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4">
|
||||
Para Escolas
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Transforme a experiência de leitura na sua escola com nossa plataforma educacional.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => window.location.href = '/register/school'}
|
||||
className="w-full px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"
|
||||
>
|
||||
Começar a Usar na Minha Escola
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 text-center">
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4">
|
||||
Para Pais
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Acompanhe e incentive o desenvolvimento da leitura do seu filho de forma interativa.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => window.location.href = '/register/parent'}
|
||||
className="w-full px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"
|
||||
>
|
||||
Quero Usar com Meu Filho
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user