blyzer/compor-academy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: derive course durations from video media
All checks were successful
CI / Validate frontend and API (push) Successful in 38s
Details
CI / Build and publish Docker images (push) Successful in 22s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-09-04 14:52:47 -03:00
parent 7a01be2b59
commit 1a79fa447b
3 changed files with 40 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
pages/ManageCourses.tsx
View File

@@ -40,6 +40,22 @@ import { getManagedCourses, saveCourse, deleteCourse, duplicateCourse, getCommen
import { getAttachmentIcon, getAttachmentBadge } from '../components/MaterialCard';
import { BunnyVideo, courseApi, instructorApi, InstructorAnalytics } from '../services/api';
const formatVideoDuration = (seconds: number | null | undefined) => {
if (!seconds || seconds < 1) return 'Processando';
const totalSeconds = Math.round(seconds);
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const remainingSeconds = totalSeconds % 60;
if (hours) return `${hours}h ${String(minutes).padStart(2, '0')}min`;
if (minutes) return `${minutes}min`;
return `${remainingSeconds}s`;
};
const totalVideoDuration = (lessons: Lesson[]) => {
const seconds = lessons.reduce((total, lesson) => total + (lesson.media?.[0]?.durationSeconds || 0), 0);
return seconds ? formatVideoDuration(seconds) : 'Em processamento';
};
// 1. Create/Edit Course Modal
const CourseModal: React.FC<{
isOpen: boolean;
@@ -72,7 +88,6 @@ const CourseModal: React.FC<{
// New Lesson State
const [newLessonTitle, setNewLessonTitle] = useState('');
const [newLessonDuration, setNewLessonDuration] = useState('');
const [newLessonMedia, setNewLessonMedia] = useState<LessonMedia | null>(null);
const [newLessonIsFree, setNewLessonIsFree] = useState(false);
const [bunnyConfigured, setBunnyConfigured] = useState<boolean | null>(null);
@@ -179,10 +194,6 @@ const CourseModal: React.FC<{
const uploaded = await instructorApi.uploadBunnyVideo(created.data.id, file);
const media = toBunnyMedia(uploaded.data);
setNewLessonMedia(media);
if (!newLessonDuration.trim() && uploaded.data.durationSeconds) {
const minutes = Math.max(1, Math.round(uploaded.data.durationSeconds / 60));
setNewLessonDuration(`${minutes}m`);
}
setBunnyUploadState('uploaded');
setBunnyUploadMessage(uploaded.data.status === 'ready'
? 'Vídeo pronto para ser adicionado à aula.'
@@ -257,7 +268,7 @@ const CourseModal: React.FC<{
const refreshed = toBunnyMedia(response.data);
setLessons((current) => current.map((item) => item.id === lessonId ? {
...item,
duration: refreshed.durationSeconds ? `${Math.max(1, Math.round(refreshed.durationSeconds / 60))}m` : item.duration,
duration: formatVideoDuration(refreshed.durationSeconds),
media: [refreshed],
} : item));
} catch (error) {
@@ -290,7 +301,7 @@ const CourseModal: React.FC<{
if (!update) return lesson;
return {
...lesson,
duration: update.media.durationSeconds ? `${Math.max(1, Math.round(update.media.durationSeconds / 60))}m` : lesson.duration,
duration: formatVideoDuration(update.media.durationSeconds),
media: [update.media],
};
}));
@@ -312,7 +323,7 @@ const CourseModal: React.FC<{
const newLesson: Lesson = {
id: `lesson-${Date.now()}`,
title: newLessonTitle,
duration: newLessonDuration || '15m',
duration: formatVideoDuration(newLessonMedia.durationSeconds),
videoUrl: newLessonMedia.playbackUrl || '',
mediaProvider: newLessonMedia.provider,
media: [newLessonMedia],
@@ -323,7 +334,6 @@ const CourseModal: React.FC<{
setLessons([...lessons, newLesson]);
setNewLessonTitle('');
setNewLessonDuration('');
setNewLessonMedia(null);
setNewLessonIsFree(false);
setBunnyUploadState('idle');
@@ -406,7 +416,7 @@ const CourseModal: React.FC<{
setIsSubmitting(true);
const durationStr = `${lessons.length} Aulas`;
const durationStr = totalVideoDuration(lessons);
try {
await onSave({
@@ -785,20 +795,13 @@ const CourseModal: React.FC<{
Adicionar aula
</h4>
<div className="flex gap-2">
<div>
<input
type="text"
value={newLessonTitle}
onChange={(e) => setNewLessonTitle(e.target.value)}
placeholder="Ex.: Aula 01 — Configuração inicial do Pixel"
className="flex-1 bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-orange-500/50"
/>
<input
type="text"
value={newLessonDuration}
onChange={(e) => setNewLessonDuration(e.target.value)}
placeholder="Ex.: 25 min"
className="w-28 bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-orange-500/50"
placeholder="Título da aula"
className="w-full bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-orange-500/50"
/>
</div>