add video

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<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>
+  );
+}