fix: repair invite links, social features, messaging + Discord UI overhaul
Phase 1 - Feature Repair: - Fix member kick/leave: add missing db.delete() call in servers.ts - Stabilize invite codes: return existing code instead of regenerating - Fix user search: use LIKE instead of exact match in social.ts - Wire DM button on FriendsPage to create/navigate to DM channels - Add cancel outgoing friend request (DELETE endpoint + frontend) - Add accept/decline friend request actions with WS real-time events - Fix replyToId persistence in message creation - Hydrate reactions and replyTo in message queries - Add joinByCode to API client and serverStore - Add friend_request_received/accepted WebSocket events Phase 2 - Discord UI Overhaul: - Remove stray borders between layout columns - Replace shadow-sm with shadow-header on content headers - Replace all bg-gray-*/text-gray-* with Discord color tokens - Ensure flat color contrast (#1E1F22, #2B2D31, #313338) Testing: - Set up vitest + @testing-library/react + jsdom - Add 17 tests across InviteModal, JoinServer, FriendsPage (all passing) - Fix vite resolve.extensions to prefer .tsx over stale .js files
This commit is contained in:
Jannis Braun
@@ -7,7 +7,7 @@ export function VoiceControls({ onDisconnect, onToggleMic, onToggleCamera, onTog
|
||||
const isDeafened = useVoiceStore((s) => s.isDeafened);
|
||||
const isCameraOn = useVoiceStore((s) => s.isCameraOn);
|
||||
const isScreenSharing = useVoiceStore((s) => s.isScreenSharing);
|
||||
const toggleMute = useVoiceStore((s) => s.toggleMute);
|
||||
const toggleMic = useVoiceStore((s) => s.toggleMic);
|
||||
const toggleDeafen = useVoiceStore((s) => s.toggleDeafen);
|
||||
const toggleCamera = useVoiceStore((s) => s.toggleCamera);
|
||||
const toggleScreenShare = useVoiceStore((s) => s.toggleScreenShare);
|
||||
@@ -17,7 +17,7 @@ export function VoiceControls({ onDisconnect, onToggleMic, onToggleCamera, onTog
|
||||
const channel = channels.find(c => c.id === currentVoiceChannelId);
|
||||
const channelName = channel?.name ?? 'Voice Channel';
|
||||
const handleMic = () => {
|
||||
toggleMute();
|
||||
toggleMic();
|
||||
onToggleMic();
|
||||
};
|
||||
const handleDeafen = () => {
|
||||
|
||||
@@ -15,7 +15,7 @@ export function VoiceControls({ onDisconnect, onToggleMic, onToggleCamera, onTog
|
||||
const isDeafened = useVoiceStore((s) => s.isDeafened);
|
||||
const isCameraOn = useVoiceStore((s) => s.isCameraOn);
|
||||
const isScreenSharing = useVoiceStore((s) => s.isScreenSharing);
|
||||
const toggleMute = useVoiceStore((s) => s.toggleMute);
|
||||
const toggleMic = useVoiceStore((s) => s.toggleMic);
|
||||
const toggleDeafen = useVoiceStore((s) => s.toggleDeafen);
|
||||
const toggleCamera = useVoiceStore((s) => s.toggleCamera);
|
||||
const toggleScreenShare = useVoiceStore((s) => s.toggleScreenShare);
|
||||
@@ -27,7 +27,7 @@ export function VoiceControls({ onDisconnect, onToggleMic, onToggleCamera, onTog
|
||||
const channelName = channel?.name ?? 'Voice Channel';
|
||||
|
||||
const handleMic = () => {
|
||||
toggleMute();
|
||||
toggleMic();
|
||||
onToggleMic();
|
||||
};
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useRef, useEffect } from 'react';
|
||||
import { Avatar } from '../ui/Avatar';
|
||||
export function VoiceUser({ participant }) {
|
||||
const videoRef = useRef(null);
|
||||
const audioRef = useRef(null);
|
||||
useEffect(() => {
|
||||
const videoEl = videoRef.current;
|
||||
if (!videoEl)
|
||||
@@ -16,6 +17,14 @@ export function VoiceUser({ participant }) {
|
||||
videoEl.srcObject = null;
|
||||
}
|
||||
}, [participant.videoTrack, participant.screenTrack]);
|
||||
useEffect(() => {
|
||||
const audioEl = audioRef.current;
|
||||
if (!audioEl || !participant.audioTrack)
|
||||
return;
|
||||
const stream = new MediaStream([participant.audioTrack]);
|
||||
audioEl.srcObject = stream;
|
||||
}, [participant.audioTrack]);
|
||||
const hasVideo = participant.isCameraOn || participant.isScreenSharing;
|
||||
return (_jsxs("div", { className: `relative bg-discord-bg-secondary rounded-xl overflow-hidden flex items-center justify-center ${participant.isSpeaking ? 'ring-2 ring-discord-green' : ''}`, style: { aspectRatio: '16/9', minHeight: '200px' }, children: [hasVideo ? (_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: participant.userId === 'local', className: "w-full h-full object-cover" })) : (_jsx(Avatar, { src: null, name: participant.username, size: 80 })), _jsx("div", { className: "absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm font-medium text-white", children: participant.username }), _jsx("div", { className: "flex items-center gap-1", children: participant.isMuted && (_jsx("div", { className: "w-5 h-5 bg-discord-red/80 rounded-full flex items-center justify-center", children: _jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "white", children: [_jsx("path", { d: "M12 2C10.9 2 10 2.9 10 4V12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12V4C14 2.9 13.1 2 12 2Z" }), _jsx("line", { x1: "3", y1: "3", x2: "21", y2: "21", stroke: "white", strokeWidth: "2" })] }) })) })] }) }), participant.isSpeaking && (_jsx("div", { className: "absolute inset-0 rounded-xl ring-2 ring-discord-green animate-pulse pointer-events-none" }))] }));
|
||||
const isLocal = participant.isLocal;
|
||||
return (_jsxs("div", { className: `relative bg-discord-bg-secondary rounded-xl overflow-hidden flex items-center justify-center ${participant.isSpeaking ? 'ring-2 ring-discord-green' : ''}`, style: { aspectRatio: '16/9', minHeight: '200px' }, children: [!isLocal && _jsx("audio", { ref: audioRef, autoPlay: true }), hasVideo ? (_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: isLocal, className: "w-full h-full object-cover" })) : (_jsx(Avatar, { src: null, name: participant.username, size: 80 })), _jsx("div", { className: "absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm font-medium text-white", children: participant.username }), _jsx("div", { className: "flex items-center gap-1", children: participant.isMuted && (_jsx("div", { className: "w-5 h-5 bg-discord-red/80 rounded-full flex items-center justify-center", children: _jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "white", children: [_jsx("path", { d: "M12 2C10.9 2 10 2.9 10 4V12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12V4C14 2.9 13.1 2 12 2Z" }), _jsx("line", { x1: "3", y1: "3", x2: "21", y2: "21", stroke: "white", strokeWidth: "2" })] }) })) })] }) }), participant.isSpeaking && (_jsx("div", { className: "absolute inset-0 rounded-xl ring-2 ring-discord-green animate-pulse pointer-events-none" }))] }));
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ interface VoiceUserProps {
|
||||
|
||||
export function VoiceUser({ participant }: VoiceUserProps) {
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const audioRef = useRef<HTMLAudioElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const videoEl = videoRef.current;
|
||||
@@ -22,7 +23,16 @@ export function VoiceUser({ participant }: VoiceUserProps) {
|
||||
}
|
||||
}, [participant.videoTrack, participant.screenTrack]);
|
||||
|
||||
useEffect(() => {
|
||||
const audioEl = audioRef.current;
|
||||
if (!audioEl || !participant.audioTrack) return;
|
||||
|
||||
const stream = new MediaStream([participant.audioTrack]);
|
||||
audioEl.srcObject = stream;
|
||||
}, [participant.audioTrack]);
|
||||
|
||||
const hasVideo = participant.isCameraOn || participant.isScreenSharing;
|
||||
const isLocal = participant.isLocal;
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -31,12 +41,15 @@ export function VoiceUser({ participant }: VoiceUserProps) {
|
||||
}`}
|
||||
style={{ aspectRatio: '16/9', minHeight: '200px' }}
|
||||
>
|
||||
{/* Audio element for remote participants */}
|
||||
{!isLocal && <audio ref={audioRef} autoPlay />}
|
||||
|
||||
{hasVideo ? (
|
||||
<video
|
||||
ref={videoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted={participant.userId === 'local'}
|
||||
muted={isLocal}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user