connect

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<MediaStream | null>(null);
   const [connectionInfo, setConnectionInfo] = useState<string | null>(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<number>(0);
   const [callInterval, setCallInterval] = useState<NodeJS.Timeout | null>(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 (
     <>
       <IonContent fullscreen={true} className="ion-padding">
+        {/* Connecting Indicator */}
+        <IonLoading
+          isOpen={isConnecting}
+          message={'Connecting...'}
+        />
+        
         <div id="container">
           <div className="peer-id-container">
-            <IonText className="peer-id-text">Ваш Peer ID: {connectionInfo}</IonText>
+            <IonText className="peer-id-text">Your Peer ID: {connectionInfo}</IonText>
             <button className="copy-button" onClick={copyPeerId}>
               <svg width="51" height="51" fill="none" stroke="#34554a" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <path d="M19.078 6H8.672A2.672 2.672 0 0 0 6 8.672v10.406a2.672 2.672 0 0 0 2.672 2.672h10.406a2.672 2.672 0 0 0 2.672-2.672V8.672A2.672 2.672 0 0 0 19.078 6Z"></path>
@@ -144,7 +158,7 @@ const ExploreContainer: React.FC = () => {
           </div>
           {showCopyNotification && (
             <div className="copy-notification">
-              Peer ID скопирован
+              Peer ID copied
             </div>
           )}
           <div className="input-container">
@@ -159,11 +173,11 @@ const ExploreContainer: React.FC = () => {
           </div>
         </div>
 
-        {/* Модальное окно для звонка */}
+        {/* Call Modal */}
         <IonModal isOpen={isCallActive}>
           <IonContent className="ion-padding">
             <div className="call-info-container">
-              {/* Добавляем гифку */}
+              {/* Add GIF */}
               <img src="/monkey-monkey-with-drone.gif" alt="Monkey with Drone" className="drone-gif" />
               <IonText className="call-info-text">Peer ID: {currentCallId}</IonText>
               <IonText className="call-duration-text">{Math.floor(callDuration / 60)}:{callDuration % 60}</IonText>
@@ -180,4 +194,4 @@ const ExploreContainer: React.FC = () => {
   );
 };
 
-export default ExploreContainer;
+export default ExploreContainer;