benya/Messenger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(realtime): add voice/video recording activity events
Some checks are pending
CI / test (push) Has started running
Details

Browse Source
This commit is contained in:
Alex
2026-03-08 19:53:48 +03:00
parent 1ef0cdf29d
commit ac82e25d16
8 changed files with 135 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/components/MessageComposer.tsx
View File

@@ -307,6 +307,22 @@ export function MessageComposer() {
return wsRef.current;
}
function sendRealtimeChatEvent(
eventName:
| "typing_start"
| "typing_stop"
| "recording_voice_start"
| "recording_voice_stop"
| "recording_video_start"
| "recording_video_stop"
) {
if (!activeChatId) {
return;
}
const ws = getWs();
ws?.send(JSON.stringify({ event: eventName, payload: { chat_id: activeChatId } }));
}
async function handleSend() {
if (!activeChatId || !text.trim() || !me || !canSendInActiveChat) {
return;
@@ -347,8 +363,7 @@ export function MessageComposer() {
setText("");
clearDraft(activeChatId);
setReplyToMessage(activeChatId, null);
const ws = getWs();
ws?.send(JSON.stringify({ event: "typing_stop", payload: { chat_id: activeChatId } }));
sendRealtimeChatEvent("typing_stop");
} catch {
removeOptimisticMessage(activeChatId, clientMessageId);
setUploadError("Message send failed. Please try again.");
@@ -619,6 +634,8 @@ export function MessageComposer() {
recordingStartedAtRef.current = Date.now();
setRecordSeconds(0);
setRecordingState("recording");
sendRealtimeChatEvent("typing_stop");
sendRealtimeChatEvent("recording_voice_start");
return true;
} catch {
setUploadError("Microphone access denied. Please allow microphone and retry.");
@@ -627,6 +644,9 @@ export function MessageComposer() {
}
function stopRecord(send: boolean) {
if (recordingStateRef.current !== "idle") {
sendRealtimeChatEvent("recording_voice_stop");
}
sendVoiceOnStopRef.current = send;
pointerCancelArmedRef.current = false;
setDragHint("idle");
@@ -1274,8 +1294,7 @@ export function MessageComposer() {
setText(next);
if (activeChatId) {
setDraft(activeChatId, next);
const ws = getWs();
ws?.send(JSON.stringify({ event: "typing_start", payload: { chat_id: activeChatId } }));
sendRealtimeChatEvent(next.trim().length > 0 ? "typing_start" : "typing_stop");
}
}}
/>

15
web/src/components/MessageList.tsx
View File

@@ -46,6 +46,8 @@ export function MessageList() {
const activeChatId = useChatStore((s) => s.activeChatId);
const messagesByChat = useChatStore((s) => s.messagesByChat);
const typingByChat = useChatStore((s) => s.typingByChat);
const recordingVoiceByChat = useChatStore((s) => s.recordingVoiceByChat);
const recordingVideoByChat = useChatStore((s) => s.recordingVideoByChat);
const hasMoreByChat = useChatStore((s) => s.hasMoreByChat);
const loadingMoreByChat = useChatStore((s) => s.loadingMoreByChat);
const loadMoreMessages = useChatStore((s) => s.loadMoreMessages);
@@ -130,6 +132,17 @@ export function MessageList() {
const focusedMessageId = activeChatId ? (focusedMessageIdByChat[activeChatId] ?? null) : null;
const hasMore = Boolean(activeChatId && hasMoreByChat[activeChatId]);
const isLoadingMore = Boolean(activeChatId && loadingMoreByChat[activeChatId]);
const typingCount = activeChatId ? (typingByChat[activeChatId] ?? []).length : 0;
const recordingVoiceCount = activeChatId ? (recordingVoiceByChat[activeChatId] ?? []).length : 0;
const recordingVideoCount = activeChatId ? (recordingVideoByChat[activeChatId] ?? []).length : 0;
const activityLabel =
recordingVideoCount > 0
? "recording video..."
: recordingVoiceCount > 0
? "recording voice..."
: typingCount > 0
? "typing..."
: "";
const selectedMessages = useMemo(() => messages.filter((m) => selectedIds.has(m.id)), [messages, selectedIds]);
const channelOnlyDeleteForAll = activeChat?.type === "channel" && !activeChat?.is_saved;
const canDeleteAllForSelection = useMemo(
@@ -683,7 +696,7 @@ export function MessageList() {
})}
</div>
<div className="px-5 pb-2 text-xs text-slate-300/80">{(typingByChat[activeChatId] ?? []).length > 0 ? "typing..." : ""}</div>
<div className="px-5 pb-2 text-xs text-slate-300/80">{activityLabel}</div>
{showScrollToBottom ? (
<div className="pointer-events-none absolute bottom-20 right-4 z-40 md:bottom-24">
<button

48
web/src/hooks/useRealtime.ts
View File

@@ -16,6 +16,8 @@ export function useRealtime() {
const accessToken = useAuthStore((s) => s.accessToken);
const meId = useAuthStore((s) => s.me?.id ?? null);
const typingByChat = useRef<Record<number, Set<number>>>({});
const recordingVoiceByChat = useRef<Record<number, Set<number>>>({});
const recordingVideoByChat = useRef<Record<number, Set<number>>>({});
const wsRef = useRef<WebSocket | null>(null);
const reconnectTimeoutRef = useRef<number | null>(null);
const heartbeatIntervalRef = useRef<number | null>(null);
@@ -171,6 +173,48 @@ export function useRealtime() {
typingByChat.current[chatId]?.delete(userId);
chatStore.setTypingUsers(chatId, [...(typingByChat.current[chatId] ?? [])]);
}
if (event.event === "recording_voice_start") {
const chatId = Number(event.payload.chat_id);
const userId = Number(event.payload.user_id);
if (!Number.isFinite(chatId) || !Number.isFinite(userId) || userId === authStore.me?.id) {
return;
}
if (!recordingVoiceByChat.current[chatId]) {
recordingVoiceByChat.current[chatId] = new Set<number>();
}
recordingVoiceByChat.current[chatId].add(userId);
chatStore.setRecordingUsers(chatId, "voice", [...recordingVoiceByChat.current[chatId]]);
}
if (event.event === "recording_voice_stop") {
const chatId = Number(event.payload.chat_id);
const userId = Number(event.payload.user_id);
if (!Number.isFinite(chatId) || !Number.isFinite(userId)) {
return;
}
recordingVoiceByChat.current[chatId]?.delete(userId);
chatStore.setRecordingUsers(chatId, "voice", [...(recordingVoiceByChat.current[chatId] ?? [])]);
}
if (event.event === "recording_video_start") {
const chatId = Number(event.payload.chat_id);
const userId = Number(event.payload.user_id);
if (!Number.isFinite(chatId) || !Number.isFinite(userId) || userId === authStore.me?.id) {
return;
}
if (!recordingVideoByChat.current[chatId]) {
recordingVideoByChat.current[chatId] = new Set<number>();
}
recordingVideoByChat.current[chatId].add(userId);
chatStore.setRecordingUsers(chatId, "video", [...recordingVideoByChat.current[chatId]]);
}
if (event.event === "recording_video_stop") {
const chatId = Number(event.payload.chat_id);
const userId = Number(event.payload.user_id);
if (!Number.isFinite(chatId) || !Number.isFinite(userId)) {
return;
}
recordingVideoByChat.current[chatId]?.delete(userId);
chatStore.setRecordingUsers(chatId, "video", [...(recordingVideoByChat.current[chatId] ?? [])]);
}
if (event.event === "message_delivered") {
const chatId = Number(event.payload.chat_id);
const messageId = Number(event.payload.message_id);
@@ -280,7 +324,9 @@ export function useRealtime() {
wsRef.current?.close();
wsRef.current = null;
typingByChat.current = {};
useChatStore.setState({ typingByChat: {} });
recordingVoiceByChat.current = {};
recordingVideoByChat.current = {};
useChatStore.setState({ typingByChat: {}, recordingVoiceByChat: {}, recordingVideoByChat: {} });
window.removeEventListener("focus", onFocusOrVisible);
document.removeEventListener("visibilitychange", onFocusOrVisible);
};

17
web/src/store/chatStore.ts
View File

@@ -61,6 +61,8 @@ interface ChatState {
hasMoreByChat: Record<number, boolean>;
loadingMoreByChat: Record<number, boolean>;
typingByChat: Record<number, number[]>;
recordingVoiceByChat: Record<number, number[]>;
recordingVideoByChat: Record<number, number[]>;
replyToByChat: Record<number, Message | null>;
editingByChat: Record<number, Message | null>;
unreadBoundaryByChat: Record<number, number>;
@@ -93,6 +95,7 @@ interface ChatState {
incrementUnread: (chatId: number, hasMention?: boolean) => void;
clearUnread: (chatId: number) => void;
setTypingUsers: (chatId: number, userIds: number[]) => void;
setRecordingUsers: (chatId: number, kind: "voice" | "video", userIds: number[]) => void;
setReplyToMessage: (chatId: number, message: Message | null) => void;
setEditingMessage: (chatId: number, message: Message | null) => void;
updateChatPinnedMessage: (chatId: number, pinnedMessageId: number | null) => void;
@@ -111,6 +114,8 @@ export const useChatStore = create<ChatState>((set, get) => ({
hasMoreByChat: {},
loadingMoreByChat: {},
typingByChat: {},
recordingVoiceByChat: {},
recordingVideoByChat: {},
replyToByChat: {},
editingByChat: {},
unreadBoundaryByChat: {},
@@ -397,6 +402,12 @@ export const useChatStore = create<ChatState>((set, get) => ({
})),
setTypingUsers: (chatId, userIds) =>
set((state) => ({ typingByChat: { ...state.typingByChat, [chatId]: userIds } })),
setRecordingUsers: (chatId, kind, userIds) =>
set((state) =>
kind === "voice"
? { recordingVoiceByChat: { ...state.recordingVoiceByChat, [chatId]: userIds } }
: { recordingVideoByChat: { ...state.recordingVideoByChat, [chatId]: userIds } }
),
setReplyToMessage: (chatId, message) =>
set((state) => ({ replyToByChat: { ...state.replyToByChat, [chatId]: message } })),
setEditingMessage: (chatId, message) =>
@@ -438,6 +449,8 @@ export const useChatStore = create<ChatState>((set, get) => ({
const nextHasMoreByChat = { ...state.hasMoreByChat };
const nextLoadingMoreByChat = { ...state.loadingMoreByChat };
const nextTypingByChat = { ...state.typingByChat };
const nextRecordingVoiceByChat = { ...state.recordingVoiceByChat };
const nextRecordingVideoByChat = { ...state.recordingVideoByChat };
const nextReplyToByChat = { ...state.replyToByChat };
const nextEditingByChat = { ...state.editingByChat };
const nextUnreadBoundaryByChat = { ...state.unreadBoundaryByChat };
@@ -447,6 +460,8 @@ export const useChatStore = create<ChatState>((set, get) => ({
delete nextHasMoreByChat[chatId];
delete nextLoadingMoreByChat[chatId];
delete nextTypingByChat[chatId];
delete nextRecordingVoiceByChat[chatId];
delete nextRecordingVideoByChat[chatId];
delete nextReplyToByChat[chatId];
delete nextEditingByChat[chatId];
delete nextUnreadBoundaryByChat[chatId];
@@ -461,6 +476,8 @@ export const useChatStore = create<ChatState>((set, get) => ({
hasMoreByChat: nextHasMoreByChat,
loadingMoreByChat: nextLoadingMoreByChat,
typingByChat: nextTypingByChat,
recordingVoiceByChat: nextRecordingVoiceByChat,
recordingVideoByChat: nextRecordingVideoByChat,
replyToByChat: nextReplyToByChat,
editingByChat: nextEditingByChat,
unreadBoundaryByChat: nextUnreadBoundaryByChat,