diff --git a/src/components/ExploreContainer.tsx b/src/components/ExploreContainer.tsx index af4d4d0..b8b1e47 100644 --- a/src/components/ExploreContainer.tsx +++ b/src/components/ExploreContainer.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react'; import './ExploreContainer.css'; import InputContainer from './Input'; import { - IonButton, IonContent, IonFooter, IonToolbar, IonText, IonModal, IonIcon + IonButton, IonContent, IonFooter, IonToolbar, IonText, IonModal, IonIcon, IonLoading } from '@ionic/react'; import { call as callIcon, close as hangUpIcon } from 'ionicons/icons'; import Peer, { MediaConnection } from 'peerjs'; @@ -14,6 +14,7 @@ const ExploreContainer: React.FC = () => { const [localStream, setLocalStream] = useState(null); const [connectionInfo, setConnectionInfo] = useState(null); const [isLoading, setIsLoading] = useState(false); + const [isConnecting, setIsConnecting] = useState(false); // New state for connecting screen const [isCallActive, setIsCallActive] = useState(false); const [callDuration, setCallDuration] = useState(0); const [callInterval, setCallInterval] = useState(null); @@ -26,12 +27,12 @@ const ExploreContainer: React.FC = () => { setPeer(newPeer); newPeer.on('open', (id) => { - console.log(`Peer успешно открыт с ID: ${id}`); + console.log(`Peer successfully opened with ID: ${id}`); setConnectionInfo(id); }); newPeer.on('call', (call: MediaConnection) => handleIncomingCall(call)); - newPeer.on('error', (err) => console.error('Ошибка Peer:', err)); + newPeer.on('error', (err) => console.error('Peer error:', err)); return () => { newPeer.destroy(); @@ -43,43 +44,50 @@ const ExploreContainer: React.FC = () => { }, []); const handleIncomingCall = useCallback((call: MediaConnection) => { - console.log('Получен входящий звонок'); + console.log('Incoming call received'); setCurrentCallId(call.peer); + setIsConnecting(true); // Show connecting screen navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => { setLocalStream(stream); call.answer(stream); call.on('stream', (remoteStream: MediaStream) => { - console.log('Получен удалённый поток'); + console.log('Remote stream received'); playAudio(remoteStream); + setIsConnecting(false); // Hide connecting screen once audio is received startCallTimer(); setIsCallActive(true); }); }).catch((err) => { - console.error('Не удалось получить локальный поток для ответа', err); + console.error('Failed to get local stream for answer', err); + setIsConnecting(false); // Hide connecting screen in case of error }); }, []); const makeCall = useCallback(() => { if (peer && callString) { setIsLoading(true); - console.log(`Попытка звонка на: ${callString}`); + setIsConnecting(true); // Show connecting screen + console.log(`Attempting to call: ${callString}`); + navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => { setLocalStream(stream); const call = peer.call(callString, stream); setCurrentCallId(callString); call.on('stream', (remoteStream: MediaStream) => { - console.log('Получен удалённый поток во время вызова'); + console.log('Remote stream received during call'); playAudio(remoteStream); setIsLoading(false); + setIsConnecting(false); // Hide connecting screen once audio is received startCallTimer(); setIsCallActive(true); }); }).catch((err) => { - console.error('Не удалось получить локальный поток', err); + console.error('Failed to get local stream', err); setIsLoading(false); + setIsConnecting(false); // Hide connecting screen on error }); } else { - console.warn('Звонок невозможен: отсутствует Peer или callString'); + console.warn('Call not possible: Peer or callString is missing'); } }, [peer, callString]); @@ -107,9 +115,9 @@ const ExploreContainer: React.FC = () => { const audioElement = document.createElement('audio'); audioElement.srcObject = stream; audioElement.play().then(() => { - console.log('Аудио начато воспроизведение'); + console.log('Audio playback started'); }).catch((error) => { - console.error('Ошибка воспроизведения аудио', error); + console.error('Audio playback error', error); }); }, []); @@ -117,14 +125,14 @@ const ExploreContainer: React.FC = () => { if (connectionInfo) { navigator.clipboard.writeText(connectionInfo) .then(() => { - console.log('Peer ID скопирован в буфер обмена'); + console.log('Peer ID copied to clipboard'); setShowCopyNotification(true); setTimeout(() => { setShowCopyNotification(false); }, 2000); }) .catch((err) => { - console.error('Не удалось скопировать Peer ID', err); + console.error('Failed to copy Peer ID', err); }); } }, [connectionInfo]); @@ -132,9 +140,15 @@ const ExploreContainer: React.FC = () => { return ( <> + {/* Connecting Indicator */} + +
- Ваш Peer ID: {connectionInfo} + Your Peer ID: {connectionInfo}
{showCopyNotification && (
- Peer ID скопирован + Peer ID copied
)}
@@ -159,11 +173,11 @@ const ExploreContainer: React.FC = () => {
- {/* Модальное окно для звонка */} + {/* Call Modal */}
- {/* Добавляем гифку */} + {/* Add GIF */} Monkey with Drone Peer ID: {currentCallId} {Math.floor(callDuration / 60)}:{callDuration % 60} @@ -180,4 +194,4 @@ const ExploreContainer: React.FC = () => { ); }; -export default ExploreContainer; \ No newline at end of file +export default ExploreContainer;