diff --git a/apps/api-gateway/src/dto/chat.dto.ts b/apps/api-gateway/src/dto/chat.dto.ts
index f2f6ebd..fa3242a 100644
--- a/apps/api-gateway/src/dto/chat.dto.ts
+++ b/apps/api-gateway/src/dto/chat.dto.ts
@@ -33,7 +33,7 @@ export class UpdateChatRoomDto {
export class SendChatMessageDto {
@IsString()
- @IsIn(['TEXT', 'IMAGE', 'AUDIO', 'VOICE', 'FILE', 'EMOJI', 'POLL'])
+ @IsIn(['TEXT', 'IMAGE', 'AUDIO', 'VOICE', 'VIDEO', 'VIDEO_NOTE', 'FILE', 'EMOJI', 'POLL'])
type!: string;
@IsOptional()
diff --git a/apps/frontend/components/admin/admin-inspector-message-body.tsx b/apps/frontend/components/admin/admin-inspector-message-body.tsx
index 8c090ed..f8bc08e 100644
--- a/apps/frontend/components/admin/admin-inspector-message-body.tsx
+++ b/apps/frontend/components/admin/admin-inspector-message-body.tsx
@@ -110,6 +110,39 @@ export function AdminInspectorMessageBody({
);
}
+ if (message.type === 'VIDEO' && message.storageKey) {
+ const media = mediaUrls[message.storageKey];
+ if (media?.blobUrl) {
+ return (
+
+ );
+ }
+ return (
+
+ 🎬 Видео
+
+ );
+ }
+
+ if (message.type === 'VIDEO_NOTE' && message.storageKey) {
+ const media = mediaUrls[message.storageKey];
+ if (media?.blobUrl) {
+ return (
+
+ );
+ }
+ return (
+
+ ⭕ Кружок
+
+ );
+ }
+
if (message.type === 'POLL') {
return (
diff --git a/apps/frontend/components/admin/use-admin-chat-media.ts b/apps/frontend/components/admin/use-admin-chat-media.ts
index 88cb4f0..c4cd753 100644
--- a/apps/frontend/components/admin/use-admin-chat-media.ts
+++ b/apps/frontend/components/admin/use-admin-chat-media.ts
@@ -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);
}
});
diff --git a/apps/frontend/components/chat/chat-video-capture-dialog.tsx b/apps/frontend/components/chat/chat-video-capture-dialog.tsx
new file mode 100644
index 0000000..ef41ed1
--- /dev/null
+++ b/apps/frontend/components/chat/chat-video-capture-dialog.tsx
@@ -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 = {
+ 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(null);
+ const streamRef = useRef(null);
+ const recorderRef = useRef(null);
+ const chunksRef = useRef([]);
+ const startedAtRef = useRef(null);
+ const timerRef = useRef(null);
+
+ const [initializing, setInitializing] = useState(false);
+ const [recording, setRecording] = useState(false);
+ const [elapsedMs, setElapsedMs] = useState(0);
+ const [error, setError] = useState(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 (
+
+ );
+}
diff --git a/apps/frontend/components/chat/chat-video-note-player.tsx b/apps/frontend/components/chat/chat-video-note-player.tsx
new file mode 100644
index 0000000..9918865
--- /dev/null
+++ b/apps/frontend/components/chat/chat-video-note-player.tsx
@@ -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(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 (
+
+ );
+}
diff --git a/apps/frontend/components/chat/chat-video-player.tsx b/apps/frontend/components/chat/chat-video-player.tsx
new file mode 100644
index 0000000..fa8ead6
--- /dev/null
+++ b/apps/frontend/components/chat/chat-video-player.tsx
@@ -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(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 (
+
+
+
+
+ {formatDuration(duration)}
+
+ {fileName ? (
+
+ {fileName}
+
+ ) : null}
+