mirror of
https://github.com/lucasrcsantana/story-generator.git
synced 2025-12-17 22:07: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