Moyettes/DiscordClone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Add voice and video stage functionality with multi-platform project setup.
Some checks failed
Build and Release / build-and-release (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Bryan1029384756
2026-02-21 15:48:48 -06:00
parent 84aa458012
commit 948f8c7aa7
9 changed files with 141 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/shared/package.json
View File

@@ -1,7 +1,7 @@
{
"name": "@discord-clone/shared",
"private": true,
"version": "1.0.32",
"version": "1.0.33",
"type": "module",
"main": "src/App.jsx",
"dependencies": {

6
packages/shared/src/components/Sidebar.jsx
View File

@@ -335,7 +335,7 @@ const liveBadgeStyle = {
marginRight: '4px'
};
const ACTIVE_SPEAKER_SHADOW = '0 0 0 0px hsl(134.526, 41.485%, 44.902%), inset 0 0 0 2px hsl(134.526, 41.485%, 44.902%), inset 0 0 0 3px hsl(240, 7.143%, 10.98%)';
const ACTIVE_SPEAKER_SHADOW = 'rgb(67, 162, 90) 0px 0px 0px 2px, rgb(67, 162, 90) 0px 0px 0px 20px inset, rgb(26, 26, 30) 0px 0px 0px 20px inset';
const VOICE_ACTIVE_COLOR = 'hsl(132.809, 34.902%, 50%)';
async function encryptKeyForUsers(convex, channelId, keyHex, crypto) {
@@ -1135,7 +1135,8 @@ const Sidebar = ({ channels, categories, activeChannel, onSelectChannel, usernam
size={24}
style={{
marginRight: 8,
boxShadow: activeSpeakers.has(user.userId) ? ACTIVE_SPEAKER_SHADOW : 'none'
boxShadow: activeSpeakers.has(user.userId) ? ACTIVE_SPEAKER_SHADOW : 'none',
transition: 'box-shadow 0.15s ease',
}}
/>
<span style={{ color: 'var(--header-secondary)', fontSize: 14 }}>{user.displayName || user.username}</span>
@@ -1182,6 +1183,7 @@ const Sidebar = ({ channels, categories, activeChannel, onSelectChannel, usernam
style={{
boxShadow: activeSpeakers.has(user.userId) ? ACTIVE_SPEAKER_SHADOW : 'none',
borderRadius: '50%',
transition: 'box-shadow 0.15s ease',
}}
/>
</div>

57
packages/shared/src/components/VoiceStage.jsx
View File

@@ -32,6 +32,8 @@ const getUserColor = (username) => {
};
// Style constants
const ACTIVE_SPEAKER_SHADOW = 'rgb(67, 162, 90) 0px 0px 0px 2px, rgb(67, 162, 90) 0px 0px 0px 20px inset, rgb(26, 26, 30) 0px 0px 0px 20px inset';
const LIVE_BADGE_STYLE = {
backgroundColor: '#ed4245', borderRadius: '4px', padding: '2px 6px',
color: 'white', fontSize: '11px', fontWeight: 'bold',
@@ -87,7 +89,7 @@ const ConnectionQualityIcon = ({ quality }) => {
const ParticipantTile = ({ participant, username, avatarUrl }) => {
const cameraTrack = useParticipantTrack(participant, 'camera');
const { isPersonallyMuted, voiceStates, connectionQualities } = useVoice();
const { isPersonallyMuted, voiceStates, connectionQualities, activeSpeakers } = useVoice();
const isMicEnabled = participant.isMicrophoneEnabled;
const isPersonalMuted = isPersonallyMuted(participant.identity);
const displayName = username || participant.identity;
@@ -109,6 +111,8 @@ const ParticipantTile = ({ participant, username, avatarUrl }) => {
width: '100%',
height: '100%',
aspectRatio: '16/9',
boxShadow: activeSpeakers.has(participant.identity) ? ACTIVE_SPEAKER_SHADOW : 'none',
transition: 'box-shadow 0.15s ease',
}}>
{cameraTrack ? (
<VideoRenderer track={cameraTrack} />
@@ -617,6 +621,32 @@ const FocusedStreamView = ({
);
};
const PreviewParticipantTile = ({ username, displayName, avatarUrl }) => {
const name = displayName || username;
return (
<div style={{
width: '88px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '8px',
}}>
<Avatar username={name} avatarUrl={avatarUrl} size={56} />
<span style={{
color: '#b9bbbe',
fontSize: '12px',
maxWidth: '88px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
textAlign: 'center',
}}>
{name}
</span>
</div>
);
};
// --- Main Component ---
const VoiceStage = ({ room, channelId, voiceStates, channelName }) => {
@@ -890,8 +920,31 @@ const VoiceStage = ({ room, channelId, voiceStates, channelName }) => {
fontSize: '14px',
marginBottom: '24px'
}}>
No one is currently in voice
{voiceUsers.length === 0
? 'No one is currently in voice'
: voiceUsers.length === 1
? '1 person is in voice'
: `${voiceUsers.length} people are in voice`}
</p>
{voiceUsers.length > 0 && (
<div style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center',
gap: '16px',
maxWidth: '440px',
marginBottom: '24px',
}}>
{voiceUsers.map(u => (
<PreviewParticipantTile
key={u.userId}
username={u.username}
displayName={u.displayName}
avatarUrl={u.avatarUrl}
/>
))}
</div>
)}
<button
onClick={() => connectToVoice(channelId, channelName, localStorage.getItem('userId'))}
style={{

54
packages/shared/src/contexts/VoiceContext.jsx
View File

@@ -57,6 +57,13 @@ export const VoiceProvider = ({ children }) => {
const [room, setRoom] = useState(null);
const [token, setToken] = useState(null);
const [activeSpeakers, setActiveSpeakers] = useState(new Set());
const speakerRemovalTimers = useRef(new Map());
const clearSpeakerTimers = useCallback(() => {
for (const timer of speakerRemovalTimers.current.values()) {
clearTimeout(timer);
}
speakerRemovalTimers.current.clear();
}, []);
const [isMuted, setIsMuted] = useState(false);
const [isDeafened, setIsDeafened] = useState(false);
const [isScreenSharing, setIsScreenSharingLocal] = useState(false);
@@ -121,7 +128,7 @@ export const VoiceProvider = ({ children }) => {
// Apply volume to LiveKit participant (factoring in global output volume)
const participant = room?.remoteParticipants?.get(userId);
const globalVol = globalOutputVolume / 100;
if (participant) participant.setVolume((volume / 100) * globalVol);
if (participant) participant.setVolume(Math.min(2, (volume / 100) * globalVol));
// Sync personal mute state
if (volume === 0) {
setPersonallyMutedUsers(prev => {
@@ -155,7 +162,7 @@ export const VoiceProvider = ({ children }) => {
const vol = userVolumes[userId] ?? 100;
const restoreVol = vol === 0 ? 100 : vol;
const participant = room?.remoteParticipants?.get(userId);
if (participant) participant.setVolume((restoreVol / 100) * globalVol);
if (participant) participant.setVolume(Math.min(2, (restoreVol / 100) * globalVol));
// Update stored volume if it was 0
if (vol === 0) {
setUserVolumes(p => {
@@ -269,6 +276,7 @@ export const VoiceProvider = ({ children }) => {
const isMobile = /Android|iPhone|iPad/i.test(navigator.userAgent);
const newRoom = new Room({
webAudioMix: true,
adaptiveStream: true,
dynacast: true,
autoSubscribe: true,
@@ -347,6 +355,7 @@ export const VoiceProvider = ({ children }) => {
if (isMovingRef.current) {
setRoom(null);
setToken(null);
clearSpeakerTimers();
setActiveSpeakers(new Set());
setConnectionQualities({});
return;
@@ -357,6 +366,7 @@ export const VoiceProvider = ({ children }) => {
console.log('Token expired, auto-reconnecting...');
setRoom(null);
setToken(null);
clearSpeakerTimers();
setActiveSpeakers(new Set());
setConnectionQualities({});
try {
@@ -373,6 +383,7 @@ export const VoiceProvider = ({ children }) => {
setActiveChannelId(null);
setRoom(null);
setToken(null);
clearSpeakerTimers();
setActiveSpeakers(new Set());
setConnectionQualities({});
@@ -384,7 +395,42 @@ export const VoiceProvider = ({ children }) => {
});
newRoom.on(RoomEvent.ActiveSpeakersChanged, (speakers) => {
setActiveSpeakers(new Set(speakers.map(p => p.identity)));
const currentSpeakerIds = new Set(speakers.map(p => p.identity));
// Cancel pending removal timers for anyone who is speaking again
for (const id of currentSpeakerIds) {
const timer = speakerRemovalTimers.current.get(id);
if (timer) {
clearTimeout(timer);
speakerRemovalTimers.current.delete(id);
}
}
setActiveSpeakers(prev => {
const next = new Set(prev);
// Add new speakers immediately
for (const id of currentSpeakerIds) {
next.add(id);
}
// Schedule delayed removal for speakers no longer in the event
for (const id of prev) {
if (!currentSpeakerIds.has(id) && !speakerRemovalTimers.current.has(id)) {
const timer = setTimeout(() => {
speakerRemovalTimers.current.delete(id);
setActiveSpeakers(s => {
const updated = new Set(s);
updated.delete(id);
return updated;
});
}, 300);
speakerRemovalTimers.current.set(id, timer);
}
}
return next;
});
});
newRoom.on(RoomEvent.Reconnecting, () => {
@@ -507,7 +553,7 @@ export const VoiceProvider = ({ children }) => {
participant.setVolume(0);
} else {
const userVol = (userVolumes[identity] ?? 100) / 100;
participant.setVolume(userVol * globalVol);
participant.setVolume(Math.min(2, userVol * globalVol));
}
}
};