import { Link } from '@inertiajs/react'; import { useEffect, useMemo, useRef, useState } from 'react'; import { AppLayout } from '@/Components/Layout/AppLayout'; type ReplayMessage = { id: number; name: string; body: string; isHost: boolean; offsetSeconds: number; }; type Props = { classId: number; classTitle: string; recording: { id: number; title: string; startedAt: string; durationSeconds: number; streamUrl: string }; messages: ReplayMessage[]; }; function clock(seconds: number): string { const safe = Math.max(0, Math.floor(seconds)); const hours = Math.floor(safe / 3600); const minutes = Math.floor((safe % 3600) / 60); const remainder = safe % 60; return [hours, minutes, remainder].map((part, index) => index === 0 ? String(part) : String(part).padStart(2, '0')).join(':'); } export default function OnlineClassRecording({ classId, classTitle, recording, messages }: Props) { const [currentTime, setCurrentTime] = useState(0); const videoRef = useRef(null); const chatRef = useRef(null); const visibleMessages = useMemo(() => messages.filter((message) => message.offsetSeconds <= currentTime + 0.35), [messages, currentTime]); useEffect(() => { chatRef.current?.scrollTo({ top: chatRef.current.scrollHeight, behavior: 'smooth' }); }, [visibleMessages.length]); function seek(seconds: number) { if (!videoRef.current) return; videoRef.current.currentTime = seconds; setCurrentTime(seconds); void videoRef.current.play(); } return (

{recording.title}

{classTitle} · ضبط شده در {recording.startedAt}

حضور و ضبط‌ها
); }