radziel/spotlightcam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b0ca382ce7e36b414f0df0ffd6ce51094b2b36a9
spotlightcam/frontend/src/main.jsx

10 lines
314 B
React
Raw Normal View History

feat: initial project setup with frontend mockup - Docker Compose setup with nginx reverse proxy and frontend service - React + Vite + Tailwind CSS configuration - Complete mockup of all application views: - Authentication (login/register) - Events list and selection - Event chat with matchmaking - 1:1 private chat with WebRTC P2P video transfer mockup - Partner rating system - Collaboration history - Mock data for users, events, messages, matches, and ratings - All UI text and messages in English - Project documentation (CONTEXT.md, TODO.md, README.md, QUICKSTART.md)
2025-11-12 17:50:44 +01:00
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
feat: implement WebRTC P2P file transfer with detection and fallback Implemented complete WebRTC peer-to-peer file transfer system for match chat: **Core WebRTC Implementation:** - Created useWebRTC hook with RTCPeerConnection and RTCDataChannel - P2P file transfer with 16KB chunking for large files (tested up to 700MB) - Real-time progress monitoring for sender and receiver - Automatic file download on receiver side - End-to-end encryption via DTLS (native WebRTC) - ICE candidate exchange via Socket.IO signaling - Support for host candidates (localhost testing) **WebRTC Detection & User Experience:** - Automatic WebRTC capability detection on page load - Detects if ICE candidates can be generated (fails in Opera, privacy-focused browsers, VPNs) - User-friendly warning component with fix suggestions - Graceful degradation: disables WebRTC button when blocked - Suggests alternative methods (video links via Google Drive/Dropbox) **Socket.IO Improvements:** - Fixed multiple socket instance creation issue - Implemented socket instance reuse pattern - Disabled React.StrictMode to prevent reconnection loops in development **Technical Details:** - RTCPeerConnection with configurable STUN servers (currently using localhost config) - RTCDataChannel with ordered delivery - Comprehensive logging for debugging (ICE gathering, connection states, signaling) - Match room-based signaling relay via Socket.IO - Authorization checks for all WebRTC signaling events **Files Changed:** - frontend/src/hooks/useWebRTC.js - Complete WebRTC implementation - frontend/src/utils/webrtcDetection.js - WebRTC capability detection - frontend/src/components/WebRTCWarning.jsx - User warning component - frontend/src/pages/MatchChatPage.jsx - WebRTC integration - frontend/src/services/socket.js - Socket instance reuse - frontend/src/main.jsx - Disabled StrictMode for Socket.IO stability **Testing:** - ✅ Verified working in Chrome (ICE candidates generated) - ✅ Tested with 700MB file transfer - ✅ Detection working in Opera (shows warning when WebRTC blocked) - ✅ P2P connection establishment and DataChannel opening - ✅ File chunking and progress monitoring **TODO:** - Add STUN server configuration for production (NAT traversal) - Consider server-based upload fallback for blocked users
2025-11-15 16:12:02 +01:00
// StrictMode disabled for development - causes Socket.IO reconnection issues
// TODO: Re-enable in production or fix Socket.IO to handle double mounting
feat: initial project setup with frontend mockup - Docker Compose setup with nginx reverse proxy and frontend service - React + Vite + Tailwind CSS configuration - Complete mockup of all application views: - Authentication (login/register) - Events list and selection - Event chat with matchmaking - 1:1 private chat with WebRTC P2P video transfer mockup - Partner rating system - Collaboration history - Mock data for users, events, messages, matches, and ratings - All UI text and messages in English - Project documentation (CONTEXT.md, TODO.md, README.md, QUICKSTART.md)
2025-11-12 17:50:44 +01:00
createRoot(document.getElementById('root')).render(
feat: implement WebRTC P2P file transfer with detection and fallback Implemented complete WebRTC peer-to-peer file transfer system for match chat: **Core WebRTC Implementation:** - Created useWebRTC hook with RTCPeerConnection and RTCDataChannel - P2P file transfer with 16KB chunking for large files (tested up to 700MB) - Real-time progress monitoring for sender and receiver - Automatic file download on receiver side - End-to-end encryption via DTLS (native WebRTC) - ICE candidate exchange via Socket.IO signaling - Support for host candidates (localhost testing) **WebRTC Detection & User Experience:** - Automatic WebRTC capability detection on page load - Detects if ICE candidates can be generated (fails in Opera, privacy-focused browsers, VPNs) - User-friendly warning component with fix suggestions - Graceful degradation: disables WebRTC button when blocked - Suggests alternative methods (video links via Google Drive/Dropbox) **Socket.IO Improvements:** - Fixed multiple socket instance creation issue - Implemented socket instance reuse pattern - Disabled React.StrictMode to prevent reconnection loops in development **Technical Details:** - RTCPeerConnection with configurable STUN servers (currently using localhost config) - RTCDataChannel with ordered delivery - Comprehensive logging for debugging (ICE gathering, connection states, signaling) - Match room-based signaling relay via Socket.IO - Authorization checks for all WebRTC signaling events **Files Changed:** - frontend/src/hooks/useWebRTC.js - Complete WebRTC implementation - frontend/src/utils/webrtcDetection.js - WebRTC capability detection - frontend/src/components/WebRTCWarning.jsx - User warning component - frontend/src/pages/MatchChatPage.jsx - WebRTC integration - frontend/src/services/socket.js - Socket instance reuse - frontend/src/main.jsx - Disabled StrictMode for Socket.IO stability **Testing:** - ✅ Verified working in Chrome (ICE candidates generated) - ✅ Tested with 700MB file transfer - ✅ Detection working in Opera (shows warning when WebRTC blocked) - ✅ P2P connection establishment and DataChannel opening - ✅ File chunking and progress monitoring **TODO:** - Add STUN server configuration for production (NAT traversal) - Consider server-based upload fallback for blocked users
2025-11-15 16:12:02 +01:00
<App />
feat: initial project setup with frontend mockup - Docker Compose setup with nginx reverse proxy and frontend service - React + Vite + Tailwind CSS configuration - Complete mockup of all application views: - Authentication (login/register) - Events list and selection - Event chat with matchmaking - 1:1 private chat with WebRTC P2P video transfer mockup - Partner rating system - Collaboration history - Mock data for users, events, messages, matches, and ratings - All UI text and messages in English - Project documentation (CONTEXT.md, TODO.md, README.md, QUICKSTART.md)
2025-11-12 17:50:44 +01:00
)
Reference in New Issue Copy Permalink