connect
This commit is contained in:
wow22831
parent
741206df0d
commit
dcdb5bfb13
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user