lendry/IdP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add video

Browse Source
This commit is contained in:
lendry
2026-07-07 12:46:43 +03:00
parent 911e76f232
commit 1bd95fa99e
15 changed files with 626 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/frontend/components/admin/admin-inspector-message-body.tsx
View File

@@ -110,6 +110,39 @@ export function AdminInspectorMessageBody({
);
}
if (message.type === 'VIDEO' && message.storageKey) {
const media = mediaUrls[message.storageKey];
if (media?.blobUrl) {
return (
<video key={message.id} src={media.blobUrl} controls className="max-h-56 max-w-full rounded-xl" />
);
}
return (
<p key={message.id} className="text-sm text-[#667085]">
🎬 Видео
</p>
);
}
if (message.type === 'VIDEO_NOTE' && message.storageKey) {
const media = mediaUrls[message.storageKey];
if (media?.blobUrl) {
return (
<video
key={message.id}
src={media.blobUrl}
controls
className="h-40 w-40 rounded-full object-cover"
/>
);
}
return (
<p key={message.id} className="text-sm text-[#667085]">
⭕ Кружок
</p>
);
}
if (message.type === 'POLL') {
return (
<p key={message.id} className="text-sm text-[#667085]">

2
apps/frontend/components/admin/use-admin-chat-media.ts
View File

@@ -97,7 +97,7 @@ export function useAdminChatMedia(token: string | null, roomId: string | null, m
useEffect(() => {
if (!token || !roomId) return;
messages.forEach((message) => {
if (message.storageKey && message.type === 'IMAGE') {
if (message.storageKey && (message.type === 'IMAGE' || message.type === 'VIDEO' || message.type === 'VIDEO_NOTE')) {
void loadMedia(message);
}
});

218
apps/frontend/components/chat/chat-video-capture-dialog.tsx Normal file
View File

@@ -0,0 +1,218 @@
'use client';
import { useCallback, useEffect, useRef, useState } from 'react';
import { Loader2, Video, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { cn } from '@/lib/utils';
export type ChatVideoCaptureMode = 'video' | 'note';
const MAX_DURATION_MS: Record<ChatVideoCaptureMode, number> = {
note: 60_000,
video: 5 * 60_000
};
function pickRecorderMimeType() {
const candidates = ['video/webm;codecs=vp9,opus', 'video/webm;codecs=vp8,opus', 'video/webm', 'video/mp4'];
return candidates.find((type) => MediaRecorder.isTypeSupported(type)) ?? '';
}
function formatTimer(ms: number) {
const total = Math.max(0, Math.floor(ms / 1000));
const mins = Math.floor(total / 60);
const secs = total % 60;
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
interface ChatVideoCaptureDialogProps {
open: boolean;
mode: ChatVideoCaptureMode;
onClose: () => void;
onCaptured: (file: File, durationMs: number) => void;
}
export function ChatVideoCaptureDialog({ open, mode, onClose, onCaptured }: ChatVideoCaptureDialogProps) {
const videoRef = useRef<HTMLVideoElement | null>(null);
const streamRef = useRef<MediaStream | null>(null);
const recorderRef = useRef<MediaRecorder | null>(null);
const chunksRef = useRef<BlobPart[]>([]);
const startedAtRef = useRef<number | null>(null);
const timerRef = useRef<number | null>(null);
const [initializing, setInitializing] = useState(false);
const [recording, setRecording] = useState(false);
const [elapsedMs, setElapsedMs] = useState(0);
const [error, setError] = useState<string | null>(null);
const stopStream = useCallback(() => {
streamRef.current?.getTracks().forEach((track) => track.stop());
streamRef.current = null;
if (videoRef.current) {
videoRef.current.srcObject = null;
}
}, []);
const cleanup = useCallback(() => {
if (timerRef.current !== null) {
window.clearInterval(timerRef.current);
timerRef.current = null;
}
if (recorderRef.current && recorderRef.current.state !== 'inactive') {
recorderRef.current.stop();
}
recorderRef.current = null;
chunksRef.current = [];
startedAtRef.current = null;
setRecording(false);
setElapsedMs(0);
stopStream();
}, [stopStream]);
useEffect(() => {
if (!open) {
cleanup();
setError(null);
return;
}
let cancelled = false;
setInitializing(true);
setError(null);
void (async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: mode === 'note' ? 'user' : 'environment' },
audio: true
});
if (cancelled) {
stream.getTracks().forEach((track) => track.stop());
return;
}
streamRef.current = stream;
if (videoRef.current) {
videoRef.current.srcObject = stream;
await videoRef.current.play();
}
} catch {
if (!cancelled) {
setError('Не удалось получить доступ к камере и микрофону');
}
} finally {
if (!cancelled) setInitializing(false);
}
})();
return () => {
cancelled = true;
cleanup();
};
}, [cleanup, mode, open]);
function stopRecording() {
recorderRef.current?.stop();
recorderRef.current = null;
if (timerRef.current !== null) {
window.clearInterval(timerRef.current);
timerRef.current = null;
}
setRecording(false);
}
function startRecording() {
const stream = streamRef.current;
if (!stream || recording) return;
const mimeType = pickRecorderMimeType();
const recorder = mimeType ? new MediaRecorder(stream, { mimeType }) : new MediaRecorder(stream);
chunksRef.current = [];
recorder.ondataavailable = (event) => {
if (event.data.size > 0) chunksRef.current.push(event.data);
};
recorder.onstop = () => {
const durationMs = startedAtRef.current ? Date.now() - startedAtRef.current : 0;
startedAtRef.current = null;
const blob = new Blob(chunksRef.current, { type: recorder.mimeType || 'video/webm' });
const extension = blob.type.includes('mp4') ? 'mp4' : 'webm';
const prefix = mode === 'note' ? 'video-note' : 'video';
const file = new File([blob], `${prefix}-${Date.now()}.${extension}`, { type: blob.type || 'video/webm' });
onCaptured(file, durationMs);
onClose();
};
recorderRef.current = recorder;
startedAtRef.current = Date.now();
setElapsedMs(0);
setRecording(true);
recorder.start(250);
timerRef.current = window.setInterval(() => {
const startedAt = startedAtRef.current;
if (!startedAt) return;
const nextElapsed = Date.now() - startedAt;
setElapsedMs(nextElapsed);
if (nextElapsed >= MAX_DURATION_MS[mode]) {
stopRecording();
}
}, 200);
}
const title = mode === 'note' ? 'Запись кружка' : 'Запись видео';
const hint = mode === 'note' ? 'Короткое круглое видеосообщение до 1 минуты' : 'Видеосообщение до 5 минут';
return (
<Dialog open={open} onOpenChange={(next) => !next && onClose()}>
<DialogContent className="overflow-hidden rounded-[24px] p-0 sm:max-w-[420px]">
<div className="border-b border-[#eceef4] px-5 py-4">
<DialogHeader className="mb-0">
<DialogTitle>{title}</DialogTitle>
<p className="text-sm text-[#667085]">{hint}</p>
</DialogHeader>
</div>
<div className="space-y-4 px-5 py-5">
{error ? (
<p className="rounded-xl bg-red-50 px-3 py-2 text-sm text-red-700">{error}</p>
) : (
<div className="flex justify-center">
<div
className={cn(
'relative overflow-hidden bg-black',
mode === 'note' ? 'h-[240px] w-[240px] rounded-full' : 'h-[280px] w-full max-w-[360px] rounded-2xl'
)}
>
<video ref={videoRef} className="h-full w-full object-cover" playsInline muted />
{initializing ? (
<div className="absolute inset-0 flex items-center justify-center bg-black/35">
<Loader2 className="h-8 w-8 animate-spin text-white" />
</div>
) : null}
</div>
</div>
)}
<div className="flex items-center justify-center gap-2 text-sm font-medium text-[#667085]">
<Video className="h-4 w-4" />
{recording ? formatTimer(elapsedMs) : 'Готовы к записи'}
</div>
</div>
<div className="flex items-center justify-between border-t border-[#eceef4] px-5 py-3">
<Button type="button" variant="ghost" onClick={onClose}>
<X className="mr-1 h-4 w-4" />
Отмена
</Button>
<Button
type="button"
disabled={Boolean(error) || initializing}
className={cn(recording && 'bg-red-500 hover:bg-red-600')}
onClick={() => (recording ? stopRecording() : startRecording())}
>
{recording ? 'Остановить' : 'Начать запись'}
</Button>
</div>
</DialogContent>
</Dialog>
);
}

97
apps/frontend/components/chat/chat-video-note-player.tsx Normal file
View File

@@ -0,0 +1,97 @@
'use client';
import { useEffect, useRef, useState } from 'react';
import { Loader2, Pause, Play } from 'lucide-react';
import { cn } from '@/lib/utils';
function formatDuration(seconds: number) {
if (!Number.isFinite(seconds) || seconds <= 0) return '0:00';
const whole = Math.floor(seconds);
const mins = Math.floor(whole / 60);
const secs = whole % 60;
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
export function ChatVideoNotePlayer({
src,
durationMs,
variant = 'theirs'
}: {
src: string;
durationMs?: number;
variant?: 'mine' | 'theirs';
}) {
const videoRef = useRef<HTMLVideoElement | null>(null);
const [playing, setPlaying] = useState(false);
const [loading, setLoading] = useState(true);
const [duration, setDuration] = useState(durationMs ? durationMs / 1000 : 0);
useEffect(() => {
const video = videoRef.current;
if (!video) return;
const onLoaded = () => {
if (Number.isFinite(video.duration) && video.duration > 0) {
setDuration(video.duration);
}
setLoading(false);
};
const onPlay = () => setPlaying(true);
const onPause = () => setPlaying(false);
const onEnded = () => setPlaying(false);
video.addEventListener('loadedmetadata', onLoaded);
video.addEventListener('play', onPlay);
video.addEventListener('pause', onPause);
video.addEventListener('ended', onEnded);
return () => {
video.removeEventListener('loadedmetadata', onLoaded);
video.removeEventListener('play', onPlay);
video.removeEventListener('pause', onPause);
video.removeEventListener('ended', onEnded);
};
}, [src]);
function togglePlayback() {
const video = videoRef.current;
if (!video) return;
if (video.paused) {
void video.play();
} else {
video.pause();
}
}
return (
<button
type="button"
onClick={togglePlayback}
className={cn(
'group relative h-[240px] w-[240px] overflow-hidden rounded-full shadow-md transition hover:shadow-lg',
variant === 'mine' ? 'ring-2 ring-[#7ea06a]/40' : 'ring-2 ring-[#dce3ec]'
)}
aria-label={playing ? 'Пауза' : 'Воспроизвести кружок'}
>
<video
ref={videoRef}
src={src}
className="h-full w-full object-cover"
playsInline
preload="metadata"
/>
<span className="absolute inset-0 flex items-center justify-center bg-black/20 transition group-hover:bg-black/30">
{loading ? (
<Loader2 className="h-10 w-10 animate-spin text-white" />
) : playing ? (
<Pause className="h-10 w-10 text-white drop-shadow" />
) : (
<Play className="h-10 w-10 text-white drop-shadow" />
)}
</span>
<span className="absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full bg-black/55 px-2 py-0.5 text-[11px] text-white">
{formatDuration(duration)}
</span>
</button>
);
}

107
apps/frontend/components/chat/chat-video-player.tsx Normal file
View File

@@ -0,0 +1,107 @@
'use client';
import { useEffect, useRef, useState } from 'react';
import { Loader2, Pause, Play } from 'lucide-react';
import { cn } from '@/lib/utils';
function formatDuration(seconds: number) {
if (!Number.isFinite(seconds) || seconds <= 0) return '0:00';
const whole = Math.floor(seconds);
const mins = Math.floor(whole / 60);
const secs = whole % 60;
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
export function ChatVideoPlayer({
src,
durationMs,
fileName,
variant = 'theirs'
}: {
src: string;
durationMs?: number;
fileName?: string;
variant?: 'mine' | 'theirs';
}) {
const videoRef = useRef<HTMLVideoElement | null>(null);
const [playing, setPlaying] = useState(false);
const [loading, setLoading] = useState(true);
const [duration, setDuration] = useState(durationMs ? durationMs / 1000 : 0);
useEffect(() => {
const video = videoRef.current;
if (!video) return;
const onLoaded = () => {
if (Number.isFinite(video.duration) && video.duration > 0) {
setDuration(video.duration);
}
setLoading(false);
};
const onPlay = () => setPlaying(true);
const onPause = () => setPlaying(false);
const onEnded = () => setPlaying(false);
video.addEventListener('loadedmetadata', onLoaded);
video.addEventListener('play', onPlay);
video.addEventListener('pause', onPause);
video.addEventListener('ended', onEnded);
return () => {
video.removeEventListener('loadedmetadata', onLoaded);
video.removeEventListener('play', onPlay);
video.removeEventListener('pause', onPause);
video.removeEventListener('ended', onEnded);
};
}, [src]);
function togglePlayback() {
const video = videoRef.current;
if (!video) return;
if (video.paused) {
void video.play();
} else {
video.pause();
}
}
return (
<div
className={cn(
'relative max-w-[320px] overflow-hidden rounded-xl',
variant === 'mine' ? 'bg-[#d9f7c8]/40' : 'bg-black/5'
)}
>
<video
ref={videoRef}
src={src}
className="max-h-72 w-full bg-black object-contain"
playsInline
preload="metadata"
onClick={togglePlayback}
/>
<button
type="button"
onClick={togglePlayback}
className="absolute inset-0 flex items-center justify-center bg-black/15 transition hover:bg-black/25"
aria-label={playing ? 'Пауза' : 'Воспроизвести'}
>
{loading ? (
<Loader2 className="h-10 w-10 animate-spin text-white" />
) : playing ? (
<Pause className="h-10 w-10 text-white drop-shadow" />
) : (
<Play className="h-10 w-10 text-white drop-shadow" />
)}
</button>
<div className="absolute bottom-2 left-2 rounded-full bg-black/55 px-2 py-0.5 text-[11px] text-white">
{formatDuration(duration)}
</div>
{fileName ? (
<div className="truncate px-2 py-1 text-xs text-[#667085]" title={fileName}>
{fileName}
</div>
) : null}
</div>
);
}

131
apps/frontend/components/family/family-group-view.tsx
View File

@@ -10,6 +10,7 @@ import {
Camera,
Check,
CheckCheck,
Circle,
FileText,
ImageIcon,
Loader2,
@@ -25,6 +26,7 @@ import {
Trash2,
UserPlus,
Users,
Video,
Volume2,
VolumeX,
X
@@ -58,6 +60,9 @@ import { InlineEditableTitle } from '@/components/chat/inline-editable-title';
import { RepliedMessagePreview, scrollToChatMessage } from '@/components/chat/replied-message-preview';
import { TypingIndicator } from '@/components/chat/typing-indicator';
import { VoiceMessagePlayer } from '@/components/chat/voice-message-player';
import { ChatVideoCaptureDialog, type ChatVideoCaptureMode } from '@/components/chat/chat-video-capture-dialog';
import { ChatVideoNotePlayer } from '@/components/chat/chat-video-note-player';
import { ChatVideoPlayer } from '@/components/chat/chat-video-player';
import { NotificationBell } from '@/components/notifications/notification-bell';
import { UserMenu } from '@/components/id/user-menu';
import { UserAvatar } from '@/components/id/user-avatar';
@@ -313,6 +318,8 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
const [chatToolsTab, setChatToolsTab] = useState<ChatToolsTab>('search');
const [mediaDropVisible, setMediaDropVisible] = useState(false);
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
const [videoCaptureOpen, setVideoCaptureOpen] = useState(false);
const [videoCaptureMode, setVideoCaptureMode] = useState<ChatVideoCaptureMode>('note');
const mediaComposer = useChatMediaComposer();
@@ -326,6 +333,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
const mediaUrlsRef = useRef<Record<string, LoadedChatMedia>>({});
const mediaLoadInFlightRef = useRef<Set<string>>(new Set());
const fileInputRef = useRef<HTMLInputElement>(null);
const videoInputRef = useRef<HTMLInputElement>(null);
const dragDepthRef = useRef(0);
useEffect(() => {
@@ -722,7 +730,15 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
let meta = parseMessageMetadata(message.metadataJson);
let fileName = meta.fileName || message.content || undefined;
let mimeType = message.mimeType || (message.type === 'VOICE' ? 'audio/webm' : message.type === 'AUDIO' ? 'audio/mpeg' : undefined);
let mimeType =
message.mimeType ||
(message.type === 'VOICE'
? 'audio/webm'
: message.type === 'AUDIO'
? 'audio/mpeg'
: message.type === 'VIDEO' || message.type === 'VIDEO_NOTE'
? 'video/webm'
: undefined);
const query = new URLSearchParams({ storageKey });
if (fileName) query.set('fileName', fileName);
@@ -1328,26 +1344,36 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
}
}
async function uploadChatFile(file: File, options?: { voice?: boolean; durationMs?: number }) {
async function uploadChatFile(file: File, options?: { voice?: boolean; videoNote?: boolean; durationMs?: number }) {
if (!token || !activeRoomId || !activeRoom) return;
if (!options?.voice) {
const contentType = resolveChatContentType(file);
const isDirectUpload = Boolean(options?.voice || options?.videoNote || contentType.startsWith('video/'));
if (!isDirectUpload) {
queueMediaFiles([file]);
return;
}
setSending(true);
try {
const contentType = resolveChatContentType(file);
const messageType = detectChatMessageType(file, { voice: options?.voice });
const messageType = detectChatMessageType(file, { voice: options?.voice, videoNote: options?.videoNote });
const metadata = {
fileName: file.name,
fileSize: file.size,
...(options?.durationMs ? { durationMs: options.durationMs } : {})
...(options?.durationMs ? { durationMs: options.durationMs } : {}),
...(options?.videoNote ? { videoNote: true } : {})
};
let uploadFile = file;
let uploadContentType = contentType;
let messageContent: string | undefined =
messageType === 'VOICE' ? 'Голосовое сообщение' : messageType === 'FILE' ? file.name : undefined;
messageType === 'VOICE'
? 'Голосовое сообщение'
: messageType === 'VIDEO'
? 'Видео'
: messageType === 'VIDEO_NOTE'
? 'Видеосообщение'
: messageType === 'FILE'
? file.name
: undefined;
let isEncrypted = false;
if (activeRoomIsE2E) {
@@ -2084,6 +2110,27 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
/>
);
}
if (message.type === 'VIDEO') {
const metaDuration = e2ePayload?.durationMs ?? parseMessageMetadata(message.metadataJson).durationMs;
return (
<ChatVideoPlayer
src={media.blobUrl}
durationMs={typeof metaDuration === 'number' ? metaDuration : undefined}
fileName={fileName}
variant={mine ? 'mine' : 'theirs'}
/>
);
}
if (message.type === 'VIDEO_NOTE') {
const metaDuration = e2ePayload?.durationMs ?? parseMessageMetadata(message.metadataJson).durationMs;
return (
<ChatVideoNotePlayer
src={media.blobUrl}
durationMs={typeof metaDuration === 'number' ? metaDuration : undefined}
variant={mine ? 'mine' : 'theirs'}
/>
);
}
return (
<button
type="button"
@@ -2333,16 +2380,42 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
{sending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
</Button>
) : (
<Button
className={cn('h-11 w-11 rounded-full p-0', recording && 'bg-red-500 hover:bg-red-600')}
onMouseDown={() => void startVoiceRecording()}
onMouseUp={stopVoiceRecording}
onMouseLeave={stopVoiceRecording}
onTouchStart={() => void startVoiceRecording()}
onTouchEnd={stopVoiceRecording}
>
<Mic className="h-4 w-4" />
</Button>
<>
<Button
size="sm"
variant="ghost"
className="h-10 w-10 rounded-xl p-0"
title="Записать кружок"
onClick={() => {
setVideoCaptureMode('note');
setVideoCaptureOpen(true);
}}
>
<Circle className="h-4 w-4" />
</Button>
<Button
size="sm"
variant="ghost"
className="h-10 w-10 rounded-xl p-0"
title="Записать видео"
onClick={() => {
setVideoCaptureMode('video');
setVideoCaptureOpen(true);
}}
>
<Video className="h-4 w-4" />
</Button>
<Button
className={cn('h-11 w-11 rounded-full p-0', recording && 'bg-red-500 hover:bg-red-600')}
onMouseDown={() => void startVoiceRecording()}
onMouseUp={stopVoiceRecording}
onMouseLeave={stopVoiceRecording}
onTouchStart={() => void startVoiceRecording()}
onTouchEnd={stopVoiceRecording}
>
<Mic className="h-4 w-4" />
</Button>
</>
)}
</div>
</div>
@@ -2355,6 +2428,18 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
)}
</section>
<input
ref={videoInputRef}
type="file"
className="hidden"
accept="video/*"
onChange={(event) => {
const files = Array.from(event.target.files ?? []);
files.forEach((file) => void uploadChatFile(file));
event.target.value = '';
}}
/>
<input
ref={fileInputRef}
type="file"
@@ -2368,6 +2453,18 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
}}
/>
<ChatVideoCaptureDialog
open={videoCaptureOpen}
mode={videoCaptureMode}
onClose={() => setVideoCaptureOpen(false)}
onCaptured={(file, durationMs) => {
void uploadChatFile(file, {
videoNote: videoCaptureMode === 'note',
durationMs
});
}}
/>
<ChatMediaComposeDialog
open={mediaComposer.open}
items={mediaComposer.items}

2
apps/frontend/hooks/use-chat-room-media.ts
View File

@@ -79,7 +79,7 @@ export function useChatRoomMedia(token: string | null, roomId: string | null, me
useEffect(() => {
if (!token || !roomId) return;
messages.forEach((message) => {
if (message.storageKey && message.type === 'IMAGE') {
if (message.storageKey && (message.type === 'IMAGE' || message.type === 'VIDEO' || message.type === 'VIDEO_NOTE')) {
void loadMedia(message);
}
});

10
apps/frontend/lib/chat-media-upload.ts
View File

@@ -70,9 +70,13 @@ export async function uploadChatMediaBatch(params: {
let messageContent: string | undefined =
index === 0 && caption?.trim()
? caption.trim()
: messageType === 'FILE'
? item.file.name
: undefined;
: messageType === 'VIDEO'
? 'Видео'
: messageType === 'VIDEO_NOTE'
? 'Видеосообщение'
: messageType === 'FILE'
? item.file.name
: undefined;
let isEncrypted = false;
if (isE2E) {

25
apps/frontend/lib/chat-media.ts
View File

@@ -1,4 +1,4 @@
export type ChatAttachmentKind = 'IMAGE' | 'AUDIO' | 'VOICE' | 'FILE';
export type ChatAttachmentKind = 'IMAGE' | 'AUDIO' | 'VOICE' | 'VIDEO' | 'VIDEO_NOTE' | 'FILE';
const EXTENSION_TO_MIME: Record<string, string> = {
jpg: 'image/jpeg',
@@ -18,6 +18,9 @@ const EXTENSION_TO_MIME: Record<string, string> = {
flac: 'audio/flac',
mp4: 'video/mp4',
mov: 'video/quicktime',
mkv: 'video/x-matroska',
avi: 'video/x-msvideo',
'3gp': 'video/3gpp',
pdf: 'application/pdf',
doc: 'application/msword',
docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
@@ -44,7 +47,9 @@ const MIME_ALIASES: Record<string, string> = {
'image/jpg': 'image/jpeg',
'image/pjpeg': 'image/jpeg',
'application/x-pdf': 'application/pdf',
'application/x-zip-compressed': 'application/zip'
'application/x-zip-compressed': 'application/zip',
'video/x-matroska': 'video/x-matroska',
'video/3gpp': 'video/3gpp'
};
function extractFileExtension(value?: string | null) {
@@ -72,21 +77,26 @@ export function resolveChatContentType(file: Pick<File, 'type' | 'name'>) {
return aliased || 'application/octet-stream';
}
export function inferChatMessageType(contentType: string, options?: { voice?: boolean }): ChatAttachmentKind {
export function inferChatMessageType(contentType: string, options?: { voice?: boolean; videoNote?: boolean }): ChatAttachmentKind {
const normalized = resolveChatContentType({ type: contentType, name: '' });
if (options?.videoNote && normalized.startsWith('video/')) return 'VIDEO_NOTE';
if (normalized.startsWith('image/')) return 'IMAGE';
if (normalized.startsWith('video/')) return 'FILE';
if (normalized.startsWith('video/')) return 'VIDEO';
if (normalized.startsWith('audio/')) {
return options?.voice ? 'VOICE' : 'AUDIO';
}
return 'FILE';
}
export function detectChatMessageType(file: File, options?: { voice?: boolean }) {
export function detectChatMessageType(file: File, options?: { voice?: boolean; videoNote?: boolean }) {
const contentType = resolveChatContentType(file);
return inferChatMessageType(contentType, options);
}
export function isVideoFile(file: Pick<File, 'type' | 'name'>) {
return resolveChatContentType(file).startsWith('video/');
}
export function formatFileSize(bytes?: number) {
if (!bytes || bytes <= 0) return '';
if (bytes < 1024) return `${bytes} Б`;
@@ -95,9 +105,9 @@ export function formatFileSize(bytes?: number) {
}
export function parseMessageMetadata(metadataJson?: string) {
if (!metadataJson) return {} as { fileName?: string; fileSize?: number; durationMs?: number };
if (!metadataJson) return {} as { fileName?: string; fileSize?: number; durationMs?: number; videoNote?: boolean };
try {
return JSON.parse(metadataJson) as { fileName?: string; fileSize?: number; durationMs?: number };
return JSON.parse(metadataJson) as { fileName?: string; fileSize?: number; durationMs?: number; videoNote?: boolean };
} catch {
return {};
}
@@ -111,6 +121,7 @@ export function fileIconLabel(fileName?: string, mimeType?: string) {
if (['ppt', 'pptx'].includes(extension)) return 'PPT';
if (['zip', 'rar', '7z'].includes(extension)) return 'ZIP';
if (extension === 'apk') return 'APK';
if (['mp4', 'mov', 'webm', 'mkv'].includes(extension) || mimeType?.startsWith('video/')) return 'VID';
if (extension) return extension.toUpperCase().slice(0, 4);
return 'FILE';
}

2
apps/frontend/lib/chat-message-utils.ts
View File

@@ -56,6 +56,8 @@ export function getMessagePreviewText(message: ChatMessage, visibleText?: string
const text = getMessageCopyText(message, visibleText);
if (text && !looksLikeEncryptedPayload(text)) return text;
if (message.type === 'IMAGE') return '📷 Фото';
if (message.type === 'VIDEO') return '🎬 Видео';
if (message.type === 'VIDEO_NOTE') return '⭕ Кружок';
if (message.type === 'VOICE') return '🎤 Голосовое';
if (message.type === 'AUDIO') return '🎵 Аудио';
if (message.type === 'FILE') return '📄 Файл';

10
apps/frontend/lib/e2e-chat.ts
View File

@@ -1,6 +1,6 @@
import { decryptBinary, decryptDirectMessage, encryptBinary, encryptDirectMessage } from '@/lib/e2e-crypto';
export type E2EMessageKind = 'text' | 'emoji' | 'image' | 'voice' | 'audio' | 'file';
export type E2EMessageKind = 'text' | 'emoji' | 'image' | 'voice' | 'audio' | 'video' | 'video_note' | 'file';
export interface E2EMessagePayload {
kind: E2EMessageKind;
@@ -44,6 +44,10 @@ export function e2eKindFromMessageType(type: string): E2EMessageKind {
return 'voice';
case 'AUDIO':
return 'audio';
case 'VIDEO':
return 'video';
case 'VIDEO_NOTE':
return 'video_note';
case 'FILE':
return 'file';
default:
@@ -64,6 +68,10 @@ export function readableE2EPayload(payload: E2EMessagePayload | null) {
return 'Аудио';
case 'image':
return 'Фото';
case 'video':
return 'Видео';
case 'video_note':
return 'Кружок';
case 'file':
return payload.fileName ?? 'Файл';
default: