Add Clases Grabadas section with audio player and announcement system
- Copy and merge audio files from Nextcloud (joined clase 1 and 2) - Create ClasesGrabadas page with audio player and download option - Add SistemaAnuncios component for user notifications - Add announcement about new audio classes feature - Add link to Clases Grabadas in Dashboard - Audio files: 4 classes (clase1-4_completa.m4a) ~890MB total
This commit is contained in:
Renato
224
frontend/src/pages/ClasesGrabadas.tsx
Normal file
224
frontend/src/pages/ClasesGrabadas.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
import { useState } from 'react';
|
||||
import { Card } from '../components/ui/Card';
|
||||
import { Button } from '../components/ui/Button';
|
||||
import {
|
||||
Headphones,
|
||||
Download,
|
||||
Play,
|
||||
Clock,
|
||||
BookOpen,
|
||||
Calendar,
|
||||
ArrowLeft
|
||||
} from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
interface Clase {
|
||||
id: number;
|
||||
titulo: string;
|
||||
modulo: string;
|
||||
duracion: string;
|
||||
fecha: string;
|
||||
descripcion: string;
|
||||
archivo: string;
|
||||
}
|
||||
|
||||
const CLASES: Clase[] = [
|
||||
{
|
||||
id: 1,
|
||||
titulo: 'Clase 1: Fundamentos de Economía',
|
||||
modulo: 'Módulo 1',
|
||||
duracion: '63 minutos',
|
||||
fecha: '27 de Enero, 2025',
|
||||
descripcion: 'Introducción a la economía, el problema económico fundamental, sistemas económicos, frontera de posibilidades de producción, agentes económicos y factores de producción.',
|
||||
archivo: '/audios/clase1_completa.m4a'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
titulo: 'Clase 2: Oferta, Demanda y Equilibrio',
|
||||
modulo: 'Módulo 2',
|
||||
duracion: '103 minutos',
|
||||
fecha: '30 de Enero, 2025',
|
||||
descripcion: 'Ley de la demanda, ley de la oferta, equilibrio de mercado, elasticidad de la demanda y controles de precio. Análisis completo del funcionamiento de los mercados.',
|
||||
archivo: '/audios/clase2_completa.m4a'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
titulo: 'Clase 3: Elasticidad y Teoría del Consumidor',
|
||||
modulo: 'Módulo 3',
|
||||
duracion: '52 minutos',
|
||||
fecha: '3 de Febrero, 2025',
|
||||
descripcion: 'Elasticidad precio, ingreso y cruzada. Utilidad total y marginal, restricción presupuestaria y maximización de la satisfacción del consumidor.',
|
||||
archivo: '/audios/clase3_completa.m4a'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
titulo: 'Clase 4: Teoría del Productor',
|
||||
modulo: 'Módulo 4',
|
||||
duracion: '46 minutos',
|
||||
fecha: '6 de Febrero, 2025',
|
||||
descripcion: 'Función de producción, ley de rendimientos decrecientes, costos a corto y largo plazo, ingresos y maximización de beneficios en competencia perfecta.',
|
||||
archivo: '/audios/clase4_completa.m4a'
|
||||
}
|
||||
];
|
||||
|
||||
export function ClasesGrabadasPage() {
|
||||
const [claseReproduciendo, setClaseReproduciendo] = useState<number | null>(null);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 py-8">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<Link
|
||||
to="/"
|
||||
className="inline-flex items-center text-gray-600 hover:text-blue-600 mb-4"
|
||||
>
|
||||
<ArrowLeft size={20} className="mr-2" />
|
||||
Volver al Dashboard
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-14 h-14 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-lg">
|
||||
<Headphones className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Clases Grabadas</h1>
|
||||
<p className="text-gray-600">
|
||||
Escucha las clases completas en audio o descárgalas
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Banner */}
|
||||
<Card className="mb-8 bg-gradient-to-r from-blue-50 to-purple-50 border-blue-200">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 bg-blue-100 rounded-xl">
|
||||
<BookOpen className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h2 className="text-lg font-semibold text-blue-900 mb-2">
|
||||
¿Cómo usar las clases grabadas?
|
||||
</h2>
|
||||
<ul className="space-y-2 text-blue-800 text-sm">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-500 mt-0.5">•</span>
|
||||
<span>Cada clase corresponde a un módulo del curso</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-500 mt-0.5">•</span>
|
||||
<span>Puedes escuchar directamente en la web o descargar para escuchar offline</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-500 mt-0.5">•</span>
|
||||
<span>Te recomendamos escuchar la clase antes de hacer los ejercicios del módulo</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-500 mt-0.5">•</span>
|
||||
<span>Total: {CLASES.length} clases · Duración total aproximada: 4.5 horas</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Lista de Clases */}
|
||||
<div className="space-y-6">
|
||||
{CLASES.map((clase) => (
|
||||
<Card key={clase.id} className="hover:shadow-lg transition-shadow">
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Icono/Info */}
|
||||
<div className="flex items-start gap-4 lg:w-1/3">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-2xl flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-2xl font-bold text-indigo-600">{clase.id}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<span className="inline-block px-3 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-full mb-2">
|
||||
{clase.modulo}
|
||||
</span>
|
||||
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-1">
|
||||
{clase.titulo}
|
||||
</h3>
|
||||
|
||||
<div className="flex items-center gap-4 text-sm text-gray-500">
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock size={14} />
|
||||
{clase.duracion}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar size={14} />
|
||||
{clase.fecha}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Descripción */}
|
||||
<div className="lg:w-1/3">
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
{clase.descripcion}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Acciones */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 lg:w-1/3 lg:justify-end">
|
||||
<Button
|
||||
onClick={() => setClaseReproduciendo(claseReproduciendo === clase.id ? null : clase.id)}
|
||||
className="flex-1 sm:flex-none"
|
||||
>
|
||||
<Play size={18} className="mr-2" />
|
||||
{claseReproduciendo === clase.id ? 'Ocultar' : 'Escuchar'}
|
||||
</Button>
|
||||
|
||||
<a
|
||||
href={clase.archivo}
|
||||
download
|
||||
className="flex-1 sm:flex-none"
|
||||
>
|
||||
<Button variant="outline" className="w-full">
|
||||
<Download size={18} className="mr-2" />
|
||||
Descargar
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reproductor de Audio */}
|
||||
{claseReproduciendo === clase.id && (
|
||||
<div className="mt-6 pt-6 border-t border-gray-100">
|
||||
<audio
|
||||
controls
|
||||
className="w-full"
|
||||
autoPlay
|
||||
>
|
||||
<source src={clase.archivo} type="audio/mp4" />
|
||||
Tu navegador no soporta el elemento de audio.
|
||||
</audio>
|
||||
<p className="text-sm text-gray-500 mt-3 text-center">
|
||||
💡 Tip: Puedes descargar el audio para escucharlo sin conexión
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-12 text-center">
|
||||
<p className="text-gray-500 text-sm mb-4">
|
||||
¿Ya escuchaste las clases? Pasa a los ejercicios interactivos para practicar.
|
||||
</p>
|
||||
<Link to="/modulos">
|
||||
<Button>
|
||||
Ir a los Ejercicios
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ClasesGrabadasPage;
|
||||
@@ -8,7 +8,8 @@ import { ProgressBar } from '../components/progress/ProgressBar';
|
||||
import { ScoreDisplay } from '../components/progress/ScoreDisplay';
|
||||
import { BadgesSection } from '../components/progress/Badges';
|
||||
import { Loader } from '../components/ui/Loader';
|
||||
import { BookOpen, User, LogOut, LayoutGrid, Award, Star, Target, CheckCircle, FileText } from 'lucide-react';
|
||||
import { BookOpen, User, LogOut, LayoutGrid, Award, Star, Target, CheckCircle, FileText, Headphones } from 'lucide-react';
|
||||
import { SistemaAnuncios } from '../components/announcements/SistemaAnuncios';
|
||||
|
||||
const MODULOS_CONFIG = [
|
||||
{ id: 'modulo1', numero: 1, titulo: 'Fundamentos de Economía', descripcion: 'Introducción a los conceptos básicos', totalEjercicios: 3 },
|
||||
@@ -121,6 +122,9 @@ export function Dashboard() {
|
||||
<p className="text-gray-600">Continúa donde lo dejaste y desbloquea nuevos logros</p>
|
||||
</div>
|
||||
|
||||
{/* Sistema de Anuncios */}
|
||||
<SistemaAnuncios />
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<Card className="bg-gradient-to-br from-blue-500 to-blue-600 text-white border-none">
|
||||
@@ -252,6 +256,12 @@ export function Dashboard() {
|
||||
Material PDF
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to="/clases">
|
||||
<Button variant="outline" size="lg" className="bg-gradient-to-r from-purple-50 to-pink-50 border-purple-200 hover:border-purple-300">
|
||||
<Headphones className="w-5 h-5 mr-2 text-purple-600" />
|
||||
<span className="text-purple-700">Clases Grabadas</span>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user