radziel/spotlightcam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): add CONNECTION_STATE and SUGGESTION_TYPE constants

Browse Source 
- Add CONNECTION_STATE (disconnected, connecting, connected, failed)
- Add SUGGESTION_TYPE (toBeRecorded, toRecord)
- Update useWebRTC.js to use CONNECTION_STATE
- Update MatchChatPage.jsx to use CONNECTION_STATE
- Update RecordingTab.jsx to use SUGGESTION_TYPE
This commit is contained in:
Radosław Gierwiało
2025-11-23 22:28:54 +01:00
parent b3a6d39d7a
commit 408317b974
5 changed files with 54 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/pages/MatchChatPage.jsx
View File

@@ -14,6 +14,7 @@ import ChatInput from '../components/chat/ChatInput';
import useMatchChat from '../hooks/useMatchChat';
import FileTransferProgress from '../components/webrtc/FileTransferProgress';
import LinkShareInput from '../components/webrtc/LinkShareInput';
import { CONNECTION_STATE } from '../constants';
const MatchChatPage = () => {
const { slug } = useParams();
@@ -104,7 +105,7 @@ const MatchChatPage = () => {
if (!selectedFile) return;
// If not connected, initiate connection first
if (connectionState !== 'connected') {
if (connectionState !== CONNECTION_STATE.CONNECTED) {
console.log('Creating WebRTC offer...');
await createOffer();
@@ -112,11 +113,11 @@ const MatchChatPage = () => {
const waitForConnection = new Promise((resolve, reject) => {
const timeout = setTimeout(() => reject(new Error('Connection timeout')), 30000);
const checkConnection = setInterval(() => {
if (connectionState === 'connected') {
if (connectionState === CONNECTION_STATE.CONNECTED) {
clearInterval(checkConnection);
clearTimeout(timeout);
resolve();
} else if (connectionState === 'failed') {
} else if (connectionState === CONNECTION_STATE.FAILED) {
clearInterval(checkConnection);
clearTimeout(timeout);
reject(new Error('Connection failed'));
@@ -177,11 +178,11 @@ const MatchChatPage = () => {
const getWebRTCStatusColor = () => {
switch (connectionState) {
case 'connected':
case CONNECTION_STATE.CONNECTED:
return 'text-green-600';
case 'connecting':
case CONNECTION_STATE.CONNECTING:
return 'text-yellow-600';
case 'failed':
case CONNECTION_STATE.FAILED:
return 'text-red-600';
default:
return 'text-gray-400';
@@ -190,11 +191,11 @@ const MatchChatPage = () => {
const getWebRTCStatusText = () => {
switch (connectionState) {
case 'connected':
case CONNECTION_STATE.CONNECTED:
return 'Connected (P2P)';
case 'connecting':
case CONNECTION_STATE.CONNECTING:
return 'Connecting...';
case 'failed':
case CONNECTION_STATE.FAILED:
return 'Connection failed';
default:
return 'Ready to connect';
@@ -258,7 +259,7 @@ const MatchChatPage = () => {
{/* WebRTC Status Bar */}
<div className="bg-gray-50 border-b px-4 py-2 flex items-center justify-between">
<div className="flex items-center space-x-2">
<div className={`w-2 h-2 rounded-full ${connectionState === 'connected' ? 'bg-green-500' : 'bg-gray-300'}`} />
<div className={`w-2 h-2 rounded-full ${connectionState === CONNECTION_STATE.CONNECTED ? 'bg-green-500' : 'bg-gray-300'}`} />
<span className={`text-sm font-medium ${getWebRTCStatusColor()}`}>
{getWebRTCStatusText()}
</span>
@@ -270,7 +271,7 @@ const MatchChatPage = () => {
</span>
)}
<span className="text-xs text-gray-500">
{connectionState === 'connected' ? '🔒 E2E Encrypted (DTLS)' : 'WebRTC P2P Ready'}
{connectionState === CONNECTION_STATE.CONNECTED ? 'E2E Encrypted (DTLS)' : 'WebRTC P2P Ready'}
</span>
</div>
</div>