zanova

src/components/ExploreContainer.tsx

@@ -8,116 +8,137 @@ import { call as callIcon, close as hangUpIcon } from 'ionicons/icons';
 import Peer, { MediaConnection } from 'peerjs';
 
 const ExploreContainer: React.FC = () => {
-  const [callIp, setCallIp] = useState<string>("");
+  const [callString, setCallString] = useState("");
+  const [isEnable, setIsEnable] = useState(true);
   const [peer, setPeer] = useState<Peer | null>(null);
   const [localStream, setLocalStream] = useState<MediaStream | null>(null);
-  const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
+  const [connectionInfo, setConnectionInfo] = useState<string | null>(null);
-  const [isCallActive, setIsCallActive] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isCallActive, setIsCallActive] = useState(false);
   const [callDuration, setCallDuration] = useState<number>(0);
   const [callInterval, setCallInterval] = useState<NodeJS.Timeout | null>(null);
-  const [currentCall, setCurrentCall] = useState<MediaConnection | null>(null);
+  const [currentCallId, setCurrentCallId] = useState<string | null>(null);
 
   useEffect(() => {
-    const peerId = Math.floor(Math.random() * 10000).toString();
+    const initializePeer = () => {
-    const newPeer: Peer = new Peer(peerId, {
+      const newPeer = new Peer({ debug: 3 });
-      host: 'localhost', 
-      port: 8100, // Используемый порт
-      path: '/peerjs',
-      debug: 3
-    });
-
-    newPeer.on('call', (call: MediaConnection) => {
-      console.log('Получен входящий звонок');
-      navigator.mediaDevices.getUserMedia({ audio: true }).then((stream: MediaStream) => {
-        setLocalStream(stream);
-        call.answer(stream);
-        call.on('stream', (remoteStream: MediaStream) => {
-          console.log('Получен удалённый поток');
-          setRemoteStream(remoteStream);
-          playAudio(remoteStream);
-          startCallTimer();
-          setIsCallActive(true);
-        });
-        setCurrentCall(call);
-      }).catch((err: Error) => {
-        console.error('Не удалось получить локальный поток для ответа', err);
-      });
-    });
-
       setPeer(newPeer);
 
+      newPeer.on('open', (id) => {
+        console.log(`Peer успешно открыт с ID: ${id}`);
+        setConnectionInfo(id);
+      });
+
+      newPeer.on('call', (call: MediaConnection) => handleIncomingCall(call));
+      newPeer.on('error', (err) => console.error('Ошибка Peer:', err));
+
       return () => {
         newPeer.destroy();
       };
+    };
+
+    const cleanup = initializePeer();
+    return cleanup;
   }, []);
 
-  const makeCall = useCallback(() => {
+  const handleIncomingCall = useCallback((call: MediaConnection) => {
-    if (peer && callIp) {
+    console.log('Получен входящий звонок');
-      navigator.mediaDevices.getUserMedia({ audio: true }).then((stream: MediaStream) => {
+    setCurrentCallId(call.peer);
+    navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
       setLocalStream(stream);
-        const call: MediaConnection = peer.call(callIp, stream);
+      call.answer(stream);
       call.on('stream', (remoteStream: MediaStream) => {
-          console.log('Получен удалённый поток во время вызова');
+        console.log('Получен удалённый поток');
-          setRemoteStream(remoteStream);
         playAudio(remoteStream);
         startCallTimer();
         setIsCallActive(true);
       });
-        setCurrentCall(call);
+    }).catch((err) => {
-      }).catch((err: Error) => {
+      console.error('Не удалось получить локальный поток для ответа', err);
+    });
+  }, []);
+
+  const makeCall = useCallback(() => {
+    if (peer && callString) {
+      setIsLoading(true);
+      console.log(`Попытка звонка на: ${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('Получен удалённый поток во время вызова');
+          playAudio(remoteStream);
+          setIsLoading(false);
+          startCallTimer();
+          setIsCallActive(true);
+        });
+      }).catch((err) => {
         console.error('Не удалось получить локальный поток', err);
+        setIsLoading(false);
       });
     } else {
-      console.warn('Звонок невозможен: отсутствует Peer или callIp');
+      console.warn('Звонок невозможен: отсутствует Peer или callString');
     }
-  }, [peer, callIp]);
+  }, [peer, callString]);
 
   const endCall = useCallback(() => {
     if (localStream) {
-      localStream.getTracks().forEach((track: MediaStreamTrack) => track.stop());
+      localStream.getTracks().forEach(track => track.stop());
-    }
-    if (remoteStream) {
-      remoteStream.getTracks().forEach((track: MediaStreamTrack) => track.stop());
-    }
-    if (currentCall) {
-      currentCall.close();
     }
     setIsCallActive(false);
+    setIsEnable(true);
     if (callInterval) {
       clearInterval(callInterval);
     }
     setCallDuration(0);
-    setCurrentCall(null);
+    setCurrentCallId(null);
-  }, [localStream, remoteStream, currentCall, callInterval]);
+  }, [localStream, callInterval]);
 
   const startCallTimer = useCallback(() => {
-    const interval: NodeJS.Timeout = setInterval(() => {
+    const interval = setInterval(() => {
-      setCallDuration((prevDuration: number) => prevDuration + 1);
+      setCallDuration(prevDuration => prevDuration + 1);
     }, 1000);
     setCallInterval(interval);
   }, []);
 
   const playAudio = useCallback((stream: MediaStream) => {
-    const audioElement: HTMLAudioElement = document.createElement('audio');
+    const audioElement = document.createElement('audio');
     audioElement.srcObject = stream;
     audioElement.play().then(() => {
       console.log('Аудио начато воспроизведение');
-    }).catch((error: Error) => {
+    }).catch((error) => {
       console.error('Ошибка воспроизведения аудио', error);
     });
   }, []);
 
+  const copyPeerId = useCallback(() => {
+    if (connectionInfo) {
+      navigator.clipboard.writeText(connectionInfo)
+        .then(() => {
+          console.log('Peer ID скопирован в буфер обмена');
+        })
+        .catch((err) => {
+          console.error('Не удалось скопировать Peer ID', err);
+        });
+    }
+  }, [connectionInfo]);
+
   return (
     <>
       <IonContent fullscreen={true} className="ion-padding">
         <div id="container">
+          <div className="peer-id-container">
+            <IonText className="peer-id-text">Ваш Peer ID: {connectionInfo}</IonText>
+            <button className="copy-button" onClick={copyPeerId}>Копировать</button>
+          </div>
           <div className="input-container">
             <InputContainer
-              callString={callIp}
+              callString={callString}
-              setCallString={setCallIp}
+              setCallString={setCallString}
-              isEnable={!isCallActive}
+              isEnable={isEnable}
             />
-            <IonButton className="call-button" onClick={makeCall} disabled={!callIp || isCallActive}>
+            <IonButton className="call-button" onClick={makeCall} disabled={!isEnable || !callString || isLoading}>
               <IonIcon icon={callIcon} />
             </IonButton>
           </div>
@@ -127,10 +148,14 @@ const ExploreContainer: React.FC = () => {
         <IonModal isOpen={isCallActive}>
           <IonContent className="ion-padding">
             <div className="call-info-container">
-              <IonText className="call-info-text">IP: {callIp}</IonText>
+              {/* Добавляем гифку */}
+              <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>
               <button onClick={endCall} className="custom-hang-up-button">
-                <IonIcon icon={hangUpIcon} />
+                <svg width="51" height="51" fill="#cd1818" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M18.327 22.5c-.915 0-2.2-.331-4.125-1.407-2.34-1.312-4.15-2.524-6.478-4.846-2.245-2.243-3.337-3.695-4.865-6.476C1.132 6.63 1.426 4.984 1.755 4.28c.392-.842.97-1.345 1.718-1.844a8.263 8.263 0 0 1 1.343-.712l.13-.057c.231-.105.583-.263 1.028-.094.297.112.562.34.978.75.852.84 2.015 2.71 2.445 3.63.288.619.479 1.028.48 1.486 0 .537-.27.95-.598 1.397l-.182.242c-.356.469-.435.604-.383.846.104.486.884 1.933 2.165 3.212 1.281 1.278 2.686 2.008 3.174 2.112.253.054.39-.027.875-.397.069-.053.14-.107.215-.162.5-.372.894-.635 1.418-.635h.003c.456 0 .847.198 1.493.524.844.426 2.771 1.575 3.616 2.427.412.415.64.679.753.976.169.447.01.797-.094 1.031l-.057.129a8.27 8.27 0 0 1-.716 1.34c-.499.745-1.004 1.322-1.846 1.714a3.16 3.16 0 0 1-1.386.304Z"></path>
+                </svg>
               </button>
             </div>
           </IonContent>