285 lines
11 KiB
TypeScript
285 lines
11 KiB
TypeScript
import { lazy, Suspense } from 'react'
|
||
import { FaMicrophoneSlash, FaUserTimes } from 'react-icons/fa'
|
||
import { VideoroomParticipantDto, VideoroomLayoutDto } from '@/proxy/videoroom/models'
|
||
import { Button } from '@/components/ui'
|
||
|
||
const VideoPlayer = lazy(() =>
|
||
import('./VideoPlayer').then((module) => ({ default: module.VideoPlayer })),
|
||
)
|
||
|
||
interface RoomParticipantProps {
|
||
participants: VideoroomParticipantDto[]
|
||
localStream?: MediaStream | null
|
||
currentUserId: string
|
||
currentUserName: string
|
||
isTeacher: boolean
|
||
isAudioEnabled: boolean
|
||
isVideoEnabled: boolean
|
||
onMuteParticipant?: (participantId: string, isMuted: boolean, isTeacher: boolean) => void
|
||
layout: VideoroomLayoutDto
|
||
focusedParticipant?: string
|
||
onParticipantFocus?: (participantId: string | undefined) => void
|
||
onKickParticipant?: (participantId: string) => void
|
||
hasSidePanel?: boolean
|
||
}
|
||
|
||
export const RoomParticipant = ({
|
||
participants,
|
||
localStream,
|
||
currentUserId,
|
||
currentUserName,
|
||
isTeacher,
|
||
isAudioEnabled,
|
||
isVideoEnabled,
|
||
onMuteParticipant,
|
||
layout,
|
||
focusedParticipant,
|
||
onParticipantFocus,
|
||
onKickParticipant,
|
||
hasSidePanel = false,
|
||
}: RoomParticipantProps) => {
|
||
// Only show current user's video once
|
||
const currentUserParticipant = {
|
||
id: currentUserId,
|
||
name: currentUserName,
|
||
isTeacher,
|
||
stream: localStream ?? undefined,
|
||
} as unknown as VideoroomParticipantDto
|
||
|
||
// Eğer hiç katılımcı yoksa ve localStream de yoksa hiçbir şey render etme
|
||
if (!localStream && (!participants || participants.length === 0)) {
|
||
return null
|
||
}
|
||
|
||
const allParticipants = [currentUserParticipant, ...participants]
|
||
|
||
// Ortak ana video kutusu container class'ı
|
||
const mainVideoContainerClass = 'w-full h-full flex flex-col justify-center'
|
||
|
||
const renderGridLayout = () => {
|
||
const getGridClass = (participantCount: number) => {
|
||
if (participantCount === 1) return 'grid-cols-1'
|
||
if (participantCount <= 2) return 'grid-cols-1 sm:grid-cols-2'
|
||
if (participantCount <= 4) return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2'
|
||
if (participantCount <= 6) return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'
|
||
if (participantCount <= 9) return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'
|
||
return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
|
||
}
|
||
|
||
const getGridRows = (participantCount: number) => {
|
||
if (participantCount === 1) return 'grid-rows-1'
|
||
if (participantCount <= 2) return 'grid-rows-1 sm:grid-rows-1'
|
||
if (participantCount <= 4) return 'grid-rows-2 lg:grid-rows-2'
|
||
if (participantCount <= 6) return 'grid-rows-3 sm:grid-rows-2'
|
||
if (participantCount <= 9) return 'grid-rows-3'
|
||
return 'grid-rows-4 sm:grid-rows-3'
|
||
}
|
||
|
||
const getPadding = (participantCount: number) => {
|
||
if (participantCount === 1) return ''
|
||
if (participantCount <= 4) return 'p-2 sm:p-4'
|
||
return 'p-1 sm:p-2'
|
||
}
|
||
|
||
const getGap = (participantCount: number) => {
|
||
if (participantCount === 1) return 'gap-0'
|
||
if (participantCount <= 4) return 'gap-2 sm:gap-3'
|
||
return 'gap-1 sm:gap-2'
|
||
}
|
||
|
||
// Mobilde: En üstte öğretmen, altında katılımcılar 2'li grid ve dikey scroll
|
||
const mainParticipant = allParticipants[0]
|
||
const otherParticipants = allParticipants.slice(1)
|
||
return (
|
||
<>
|
||
{/* Mobil özel layout */}
|
||
<div className="sm:hidden w-full h-full flex flex-col items-center overflow-hidden p-2">
|
||
{/* Ana katılımcı */}
|
||
<div className="w-full max-w-md mx-auto flex-none flex items-center justify-center mb-2">
|
||
<div className="w-full aspect-video max-h-[40vh] rounded-xl overflow-hidden flex bg-white/10 shadow-md border border-white/10">
|
||
{renderParticipant(mainParticipant, true)}
|
||
</div>
|
||
</div>
|
||
{/* Diğer katılımcılar 2'li grid ve dikey scroll */}
|
||
{otherParticipants.length > 0 && (
|
||
<div
|
||
className="w-full max-w-md mx-auto flex-1 overflow-y-auto grid grid-cols-1 gap-2 pb-2 min-h-0"
|
||
style={{ maxHeight: '55vh' }}
|
||
>
|
||
{Array.from({ length: Math.ceil(otherParticipants.length / 2) }).map((_, rowIdx) => (
|
||
<div key={rowIdx} className="flex gap-2">
|
||
{otherParticipants.slice(rowIdx * 2, rowIdx * 2 + 2).map((participant) => (
|
||
<div
|
||
key={participant.id}
|
||
className="flex-1 aspect-video rounded-lg overflow-hidden flex bg-white/10 shadow border border-white/10"
|
||
>
|
||
{renderParticipant(participant, false, true)}
|
||
</div>
|
||
))}
|
||
{otherParticipants.length % 2 === 1 &&
|
||
rowIdx === Math.floor(otherParticipants.length / 2) ? (
|
||
<div className="flex-1" />
|
||
) : null}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
{/* Masaüstü ve tablet için eski grid layout */}
|
||
<div className="hidden sm:flex h-full items-center justify-center overflow-hidden">
|
||
<div
|
||
className={`w-full h-full flex flex-col justify-center ${getPadding(allParticipants.length)}`}
|
||
>
|
||
<div
|
||
className={`h-full grid ${getGridClass(allParticipants.length)} ${getGridRows(allParticipants.length)} ${getGap(allParticipants.length)} place-items-stretch`}
|
||
>
|
||
{allParticipants.map((participant) => (
|
||
<div
|
||
key={participant.id}
|
||
className="w-full h-full max-h-full flex items-stretch justify-stretch min-h-0"
|
||
>
|
||
<div className="w-full h-full rounded-lg sm:rounded-xl overflow-hidden flex">
|
||
{renderParticipant(participant, false)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
const renderSidebarLayout = () => {
|
||
const mainParticipant = focusedParticipant
|
||
? allParticipants.find((p) => p.id === focusedParticipant) || allParticipants[0]
|
||
: allParticipants[0]
|
||
const otherParticipants = allParticipants.filter((p) => p.id !== mainParticipant.id)
|
||
|
||
const sidebarWidth = hasSidePanel
|
||
? 'w-20 sm:w-24 md:w-32 lg:w-40'
|
||
: 'w-24 sm:w-32 md:w-40 lg:w-48'
|
||
|
||
// Eğer hiç katılımcı yoksa, video player öğretmen odaklı gibi ortalanır ve geniş olur
|
||
return (
|
||
<div className="h-screen flex items-center justify-center p-0">
|
||
<div className={mainVideoContainerClass + ' h-full'}>
|
||
<div className="flex h-full">
|
||
<div className={`flex-1 min-w-0 flex items-center justify-center`}>
|
||
<div className="w-full h-full flex items-center justify-center">
|
||
<div className="w-full h-full rounded-xl overflow-hidden transition-all duration-200">
|
||
{renderParticipant(mainParticipant, true)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{otherParticipants.length > 0 && (
|
||
<div className={`${sidebarWidth} p-2 overflow-y-auto rounded-l-lg h-full`}>
|
||
<div className="flex flex-col gap-2 h-full min-w-0">
|
||
{otherParticipants.map((participant) => (
|
||
<div
|
||
key={participant.id}
|
||
className="rounded-lg border border-blue-300/40 shadow shadow-blue-200/20 backdrop-blur-sm transition-all duration-200"
|
||
>
|
||
{renderParticipant(participant, false, true)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const renderTeacherFocusLayout = () => {
|
||
// Sadece öğretmen gösterilecek, katılımcılar asla gösterilmeyecek
|
||
const teacher = allParticipants.find((p) => p.isTeacher) || allParticipants[0]
|
||
return (
|
||
<div className="h-full flex items-center justify-center overflow-hidden">
|
||
<div className="w-full h-full flex flex-col justify-center ">
|
||
<div className="h-full w-full max-h-full flex items-center justify-center">
|
||
<div className="w-full h-full rounded-lg sm:rounded-xl overflow-hidden">
|
||
{renderParticipant(teacher, true)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const renderParticipant = (
|
||
participant: VideoroomParticipantDto,
|
||
isMain: boolean = false,
|
||
isSmall: boolean = false,
|
||
) => (
|
||
<div
|
||
key={participant.id}
|
||
className={`relative w-full h-full ${isMain ? '' : isSmall ? 'aspect-video' : ''} ${!isMain && onParticipantFocus ? 'cursor-pointer' : ''}`}
|
||
onClick={() => !isMain && onParticipantFocus?.(participant.id)}
|
||
style={{ minHeight: 0, minWidth: 0 }}
|
||
>
|
||
<div className="absolute inset-0 w-full h-full">
|
||
<Suspense fallback={<div className="h-full w-full bg-gray-900" />}>
|
||
<VideoPlayer
|
||
stream={participant.stream}
|
||
isLocal={participant.id === currentUserId}
|
||
userName={participant.name}
|
||
isAudioEnabled={
|
||
participant.id === currentUserId ? isAudioEnabled : !participant.isAudioMuted
|
||
}
|
||
isVideoEnabled={
|
||
participant.id === currentUserId ? isVideoEnabled : !participant.isVideoMuted
|
||
}
|
||
/>
|
||
</Suspense>
|
||
</div>
|
||
{/* Teacher controls for students */}
|
||
{isTeacher && participant.id !== currentUserId && (
|
||
<div className="absolute top-2 left-2 flex space-x-1 z-10">
|
||
<Button
|
||
type="button"
|
||
variant="plain"
|
||
shape="circle"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
onMuteParticipant?.(participant.id, !participant.isAudioMuted, isTeacher)
|
||
}}
|
||
className={`!inline-flex !h-auto items-center justify-center rounded-full !p-1 text-xs text-white ${
|
||
participant.isAudioMuted ? '!bg-red-600' : '!bg-gray-600 hover:!bg-gray-700'
|
||
} transition-colors`}
|
||
title={participant.isAudioMuted ? 'Sesi Aç' : 'Sesi Kapat'}
|
||
>
|
||
<FaMicrophoneSlash size={12} />
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
variant="plain"
|
||
shape="circle"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
onKickParticipant?.(participant.id)
|
||
}}
|
||
className="!inline-flex !h-auto items-center justify-center rounded-full !bg-red-600 !p-1 text-xs text-white transition-colors hover:!bg-red-700"
|
||
title="Sınıftan Çıkar"
|
||
>
|
||
<FaUserTimes size={12} />
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
|
||
const renderLayout = () => {
|
||
switch (layout.type) {
|
||
case 'sidebar':
|
||
return renderSidebarLayout()
|
||
case 'teacher-focus':
|
||
return renderTeacherFocusLayout()
|
||
default:
|
||
return renderGridLayout()
|
||
}
|
||
}
|
||
|
||
return <div className="h-full min-h-0 flex flex-col">{renderLayout()}</div>
|
||
}
|