86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useState } from 'react';
|
||
import { useSearchParams } from 'next/navigation';
|
||
import { loadComponent } from '@/lib/material-components';
|
||
import { LoadingSpinner } from '@/components/common/LoadingSpinner';
|
||
|
||
export default function VideoCallPage() {
|
||
const searchParams = useSearchParams();
|
||
const roomId = searchParams.get('room');
|
||
const [componentsLoaded, setComponentsLoaded] = useState(false);
|
||
|
||
useEffect(() => {
|
||
Promise.all([
|
||
loadComponent('elevated-card'),
|
||
loadComponent('filled-button'),
|
||
loadComponent('icon-button'),
|
||
loadComponent('icon'),
|
||
]).then(() => {
|
||
setComponentsLoaded(true);
|
||
}).catch((err) => {
|
||
console.error('Error loading components:', err);
|
||
setComponentsLoaded(true);
|
||
});
|
||
}, []);
|
||
|
||
if (!componentsLoaded) {
|
||
return <LoadingSpinner size="large" />;
|
||
}
|
||
|
||
return (
|
||
<div style={{
|
||
height: 'calc(100vh - 180px)',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: '16px'
|
||
}}>
|
||
<md-elevated-card style={{
|
||
flex: 1,
|
||
borderRadius: '20px',
|
||
padding: '16px',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
background: '#000'
|
||
}}>
|
||
<div style={{
|
||
flex: 1,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
color: '#fff'
|
||
}}>
|
||
<div style={{ textAlign: 'center' }}>
|
||
<md-icon style={{ fontSize: '64px', marginBottom: '16px' }}>
|
||
videocam
|
||
</md-icon>
|
||
<p style={{ fontSize: '18px' }}>
|
||
Видеозвонок {roomId ? `(комната: ${roomId})` : ''}
|
||
</p>
|
||
<p style={{ fontSize: '14px', opacity: 0.7 }}>
|
||
LiveKit интеграция будет добавлена
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{
|
||
display: 'flex',
|
||
gap: '12px',
|
||
justifyContent: 'center',
|
||
padding: '16px'
|
||
}}>
|
||
<md-icon-button style={{ background: 'rgba(255,255,255,0.1)' }}>
|
||
<md-icon>mic</md-icon>
|
||
</md-icon-button>
|
||
<md-icon-button style={{ background: 'rgba(255,255,255,0.1)' }}>
|
||
<md-icon>videocam</md-icon>
|
||
</md-icon-button>
|
||
<md-icon-button style={{ background: '#e53935' }}>
|
||
<md-icon>call_end</md-icon>
|
||
</md-icon-button>
|
||
</div>
|
||
</md-elevated-card>
|
||
</div>
|
||
);
|
||
}
|