communitas 0.2.6

A diagnostic chat application for the P2P Foundation network
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

import React, { useState, useEffect } from 'react';
import { Box, Fab, Snackbar, Alert } from '@mui/material';
import { Phone, Message } from '@mui/icons-material';
import { webRTCService, CallState } from '../../services/webrtc/WebRTCService';
import { SimpleCallInterface } from './SimpleCallInterface';

export const SimpleCommunicationHub: React.FC = () => {
  const [currentCall, setCurrentCall] = useState<CallState | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const handleCallInitiated = (call: CallState) => {
      setCurrentCall(call);
    };

    const handleCallEnded = () => {
      setCurrentCall(null);
    };

    const handleError = (error: Error) => {
      setError(error.message);
    };

    webRTCService.on('callInitiated', handleCallInitiated);
    webRTCService.on('callEnded', handleCallEnded);
    webRTCService.on('error', handleError);

    return () => {
      webRTCService.off('callInitiated', handleCallInitiated);
      webRTCService.off('callEnded', handleCallEnded);
      webRTCService.off('error', handleError);
    };
  }, []);

  const handleStartCall = async () => {
    try {
      await webRTCService.initiateCall('demo-contact', 'audio');
    } catch (error) {
      console.error('Failed to start call:', error);
    }
  };


  const handleEndCall = async () => {
    await webRTCService.endCall();
  };

  const handleSendMessage = () => {
    webRTCService.sendMessage('Hello from WebRTC!');
  };

  return (
    <>
      {currentCall && (
        <SimpleCallInterface
          call={currentCall}
          onEndCall={handleEndCall}
        />
      )}

      {!currentCall && (
        <Box
          sx={{
            position: 'fixed',
            bottom: 16,
            right: 16,
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
            zIndex: 1000
          }}
        >
          <Fab
            color="primary"
            onClick={handleSendMessage}
            size="medium"
          >
            <Message />
          </Fab>

          <Fab
            color="secondary"
            onClick={handleStartCall}
            size="large"
          >
            <Phone />
          </Fab>
        </Box>
      )}

      <Snackbar
        open={Boolean(error)}
        autoHideDuration={6000}
        onClose={() => setError(null)}
      >
        <Alert onClose={() => setError(null)} severity="error" sx={{ width: '100%' }}>
          {error}
        </Alert>
      </Snackbar>
    </>
  );
};