This commit is contained in:
wow22831 2024-10-29 02:35:09 +07:00
parent 741206df0d
commit dcdb5bfb13

View File

@ -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>