damanukyan/linkra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: updated

Browse Source
This commit is contained in:
Daniil Manukian
2026-05-10 09:50:39 +03:00
parent 1ae330258b
commit 65c464ab67
19 changed files with 184 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
frontend/src/main.jsx
View File

@@ -5,7 +5,13 @@ import QRCode from'qrcode';
import'./styles.css';
const TELEGRAM_PREF_KEY = 'linkra-pref-telegram-alert';
const ICONS = {
attachment: '/icons/attachment.png',
cameraOff: '/icons/camera_off.png',
cameraOn: '/icons/camera_on.png',
micOff: '/icons/micro_off.png',
micOn: '/icons/micro_on.png'
};
function apiUrl(path) {
@@ -103,9 +109,6 @@ function ErrorPage({ code }) {
function HomePage({ showToast }) {
const [config, setConfig] = useState({ telegram_alerting_available: false, max_attachment_size_mb: 100 });
const [settingsOpen, setSettingsOpen] = useState(false);
const [telegramAlert, setTelegramAlert] = useState(() => localStorage.getItem(TELEGRAM_PREF_KEY) === '1');
const [roomTitle, setRoomTitle] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
@@ -115,13 +118,8 @@ function HomePage({ showToast }) {
useEffect(() => {
document.title = 'Созвон по ссылке · Linkra';
fetch(apiUrl('/api/config')).then(readJson).then(setConfig).catch(() => {});
}, []);
useEffect(() => {
localStorage.setItem(TELEGRAM_PREF_KEY, telegramAlert ? '1' : '0');
}, [telegramAlert]);
useEffect(() => {
if (!result || !qrRef.current) return;
const target = result.short_invite_link || result.invite_link;
@@ -149,7 +147,6 @@ function HomePage({ showToast }) {
body: JSON.stringify({
room_title: title,
password: roomPassword,
telegram_alert_enabled: config.telegram_alerting_available && telegramAlert,
quick_join: quickJoin
})
});
@@ -205,19 +202,6 @@ function HomePage({ showToast }) {
<section className='card home-card'>
<div className='home-card-header'>
<h2>Новая комната</h2>
<div className='settings-wrap'>
<button className='icon-btn small' type='button' onClick={() => setSettingsOpen((value) => !value)}>⚙</button>
{settingsOpen ? (
<div className='settings-menu'>
{config.telegram_alerting_available ? (
<label className='checkbox-line'>
<input type='checkbox' checked={telegramAlert} onChange={(event) => setTelegramAlert(event.target.checked)} />
<span>Итоги созвона в Telegram</span>
</label>
) : <p className='muted'>Итоги в Telegram недоступны на сервере</p>}
</div>
) : null}
</div>
</div>
{!result ? (
@@ -262,7 +246,7 @@ function HomePage({ showToast }) {
}
function MediaTrack({ track, kind, muted = false, className = '' }) {
function MediaTrack({ track, muted = false, className = '' }) {
const ref = useRef(null);
useEffect(() => {
@@ -273,16 +257,49 @@ function MediaTrack({ track, kind, muted = false, className = '' }) {
};
}, [track]);
if (kind === 'audio') return <audio ref={ref} autoPlay playsInline muted={muted} className={className} />;
return <video ref={ref} autoPlay playsInline muted={muted} className={className} />;
}
function VideoTile({ item, active }) {
function RemoteAudioTrack({ track, volume }) {
const gainRef = useRef(null);
useEffect(() => {
if (!track?.mediaStreamTrack) return undefined;
const AudioContextClass = window.AudioContext || window.webkitAudioContext;
if (!AudioContextClass) return undefined;
const context = new AudioContextClass();
const stream = new MediaStream([track.mediaStreamTrack]);
const source = context.createMediaStreamSource(stream);
const gain = context.createGain();
gain.gain.value = volume;
source.connect(gain);
gain.connect(context.destination);
gainRef.current = gain;
context.resume().catch(() => {});
return () => {
source.disconnect();
gain.disconnect();
gainRef.current = null;
context.close().catch(() => {});
};
}, [track]);
useEffect(() => {
if (gainRef.current) gainRef.current.gain.value = volume;
}, [volume]);
return null;
}
function VideoTile({ item, active, volume, onVolumeChange }) {
const camera = item.tracks.find((entry) => entry.kind === 'video' && entry.source !== Track.Source.ScreenShare);
const screen = item.tracks.find((entry) => entry.kind === 'video' && entry.source === Track.Source.ScreenShare);
const audio = item.tracks.filter((entry) => entry.kind === 'audio');
const initial = (item.name || '?').trim().charAt(0).toUpperCase() || '?';
const volumePercent = Math.round(volume * 100);
return (
<div className={`video-tile${active ? ' speaking' : ''}${screen ? ' has-screen' : ''}`}>
@@ -290,14 +307,28 @@ function VideoTile({ item, active }) {
<span>{item.name}</span>
<span className='muted'>{item.isLocal ? 'ты' : ''}</span>
</div>
{!item.isLocal ? (
<label className='participant-volume'>
<span>Громкость: {volumePercent}%</span>
<input
aria-label={`Громкость участника ${item.name}`}
max='2'
min='0'
onChange={(event) => onVolumeChange(item.identity, Number(event.target.value))}
step='0.05'
type='range'
value={volume}
/>
</label>
) : null}
{screen ? (
<div className='screen-slot'>
<MediaTrack track={screen.track} kind='video' className='screen-share-video' muted={item.isLocal} />
<MediaTrack track={screen.track} className='screen-share-video' muted={item.isLocal} />
</div>
) : null}
<div className='media-slot'>
{camera ? <MediaTrack track={camera.track} kind='video' className={item.isLocal ? 'local-video' : ''} muted={item.isLocal} /> : <div className='avatar-placeholder'>{initial}</div>}
{audio.map((entry) => item.isLocal ? null : <MediaTrack key={entry.id} track={entry.track} kind='audio' className='hidden-audio' />)}
{camera ? <MediaTrack track={camera.track} className={item.isLocal ? 'local-video' : ''} muted={item.isLocal} /> : <div className='avatar-placeholder'>{initial}</div>}
{audio.map((entry) => item.isLocal ? null : <RemoteAudioTrack key={entry.id} track={entry.track} volume={volume} />)}
</div>
</div>
);
@@ -314,10 +345,11 @@ function CallPage({ roomName, showToast }) {
const [joining, setJoining] = useState(false);
const [room, setRoom] = useState(null);
const [participants, setParticipants] = useState([]);
const [participantVolumes, setParticipantVolumes] = useState({});
const [activeSpeakers, setActiveSpeakers] = useState([]);
const [messages, setMessages] = useState([]);
const [chatText, setChatText] = useState('');
const [config, setConfig] = useState({ max_attachment_size_mb: 100 });
const [config, setConfig] = useState({ max_attachment_size_mb: 100, turn_ice_servers: [] });
const [elapsed, setElapsed] = useState(0);
const previewRef = useRef(null);
const previewStreamRef = useRef(null);
@@ -431,6 +463,14 @@ function CallPage({ roomName, showToast }) {
await room.localParticipant.publishData(encoded, { reliable: true });
};
const updateParticipantVolume = useCallback((identity, volume) => {
const safeVolume = Math.min(2, Math.max(0, volume));
setParticipantVolumes((current) => ({
...current,
[identity]: safeVolume
}));
}, []);
const joinCall = async () => {
const name = displayName.trim();
if (!name) {
@@ -493,7 +533,13 @@ function CallPage({ roomName, showToast }) {
setRoom(null);
setParticipants([]);
});
await nextRoom.connect(data.server_url, data.participant_token);
const connectOptions = {};
if (config.turn_ice_servers?.length) {
connectOptions.rtcConfig = {
iceServers: config.turn_ice_servers
};
}
await nextRoom.connect(data.server_url, data.participant_token, connectOptions);
await nextRoom.localParticipant.setMicrophoneEnabled(micEnabled);
await nextRoom.localParticipant.setCameraEnabled(cameraEnabled);
setRoom(nextRoom);
@@ -647,8 +693,14 @@ function CallPage({ roomName, showToast }) {
</label>
) : null}
<div className='row'>
<button className={`toggle-btn ${micEnabled ? 'active' : 'inactive'}`} type='button' onClick={toggleMic}>{micEnabled ? 'Микрофон включён' : 'Микрофон выключен'}</button>
<button className={`toggle-btn ${cameraEnabled ? 'active' : 'inactive'}`} type='button' onClick={toggleCamera}>{cameraEnabled ? 'Камера включена' : 'Камера выключена'}</button>
<button className={`toggle-btn ${micEnabled ? 'active' : 'inactive'}`} type='button' onClick={toggleMic}>
<img className='control-icon' src={micEnabled ? ICONS.micOn : ICONS.micOff} alt='' />
<span>{micEnabled ? 'Микрофон включён' : 'Микрофон выключен'}</span>
</button>
<button className={`toggle-btn ${cameraEnabled ? 'active' : 'inactive'}`} type='button' onClick={toggleCamera}>
<img className='control-icon' src={cameraEnabled ? ICONS.cameraOn : ICONS.cameraOff} alt='' />
<span>{cameraEnabled ? 'Камера включена' : 'Камера выключена'}</span>
</button>
</div>
<button className='btn primary' type='button' disabled={joining} onClick={joinCall}>{joining ? 'Подключаем...' : 'Войти в звонок'}</button>
</div>
@@ -664,15 +716,27 @@ function CallPage({ roomName, showToast }) {
<p className='muted'>В комнате: {participants.length}</p>
</div>
<div className='meeting-controls'>
<button className={`icon-btn ${micEnabled ? '' : 'is-off'}`} type='button' onClick={toggleMic}>Mic</button>
<button className={`icon-btn ${cameraEnabled ? '' : 'is-off'}`} type='button' onClick={toggleCamera}>Cam</button>
<button className={`icon-btn ${micEnabled ? '' : 'is-off'}`} type='button' onClick={toggleMic} aria-label={micEnabled ? 'Выключить микрофон' : 'Включить микрофон'}>
<img className='control-icon' src={micEnabled ? ICONS.micOn : ICONS.micOff} alt='' />
</button>
<button className={`icon-btn ${cameraEnabled ? '' : 'is-off'}`} type='button' onClick={toggleCamera} aria-label={cameraEnabled ? 'Выключить камеру' : 'Включить камеру'}>
<img className='control-icon' src={cameraEnabled ? ICONS.cameraOn : ICONS.cameraOff} alt='' />
</button>
<button className='icon-btn' type='button' onClick={toggleScreen}>Screen</button>
<button className='btn secondary' type='button' onClick={copyInvite}>Ссылка</button>
<div className='meeting-timer'>{time}</div>
</div>
</div>
<div className='videos'>
{participants.map((item) => <VideoTile key={item.identity} item={item} active={activeSpeakers.includes(item.identity)} />)}
{participants.map((item) => (
<VideoTile
active={activeSpeakers.includes(item.identity)}
item={item}
key={item.identity}
onVolumeChange={updateParticipantVolume}
volume={participantVolumes[item.identity] ?? 1}
/>
))}
</div>
</section>
@@ -690,7 +754,10 @@ function CallPage({ roomName, showToast }) {
</div>
<div className='chat-form'>
<input value={chatText} onChange={(event) => setChatText(event.target.value)} onKeyDown={(event) => event.key === 'Enter' ? sendChat() : null} placeholder='Напиши сообщение...' maxLength='1000' />
<input ref={fileRef} type='file' onChange={(event) => sendFile(event.target.files?.[0])} />
<input className='hidden-file-input' ref={fileRef} type='file' onChange={(event) => sendFile(event.target.files?.[0])} />
<button className='icon-btn attachment-btn' type='button' onClick={() => fileRef.current?.click()} aria-label='Прикрепить файл'>
<img className='control-icon' src={ICONS.attachment} alt='' />
</button>
<button className='btn primary' type='button' onClick={sendChat}>Отправить</button>
</div>
</aside>