Add video support, media filters, and translations

frontend/src/components/admin/AdminAuthenticatedVideo.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from 'react';
+import { api } from '../../config/api';
+
+interface AdminAuthenticatedVideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {
+  src: string;
+  fallback?: React.ReactNode;
+}
+
+export const AdminAuthenticatedVideo: React.FC<AdminAuthenticatedVideoProps> = ({
+  src,
+  fallback,
+  ...props
+}) => {
+  const [videoSrc, setVideoSrc] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    let objectUrl: string | null = null;
+
+    const loadVideo = async () => {
+      try {
+        setLoading(true);
+        setError(false);
+        setVideoSrc(null);
+
+        const response = await api.get(src, { responseType: 'blob' });
+
+        if (!cancelled) {
+          objectUrl = URL.createObjectURL(response.data);
+          setVideoSrc(objectUrl);
+          setLoading(false);
+        }
+      } catch {
+        if (!cancelled) {
+          setError(true);
+          setLoading(false);
+        }
+      }
+    };
+
+    if (src) {
+      loadVideo();
+    }
+
+    return () => {
+      cancelled = true;
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [src]);
+
+  if (loading) {
+    return <div className="w-full h-full bg-neutral-200 animate-pulse" />;
+  }
+
+  if (error || !videoSrc) {
+    return fallback ? (
+      <>{fallback}</>
+    ) : (
+      <div className="w-full h-full bg-neutral-100 flex items-center justify-center text-neutral-400">
+        <span className="text-xs">Failed to load</span>
+      </div>
+    );
+  }
+
+  return (
+    <video
+      src={videoSrc}
+      controls
+      preload="metadata"
+      {...props}
+    />
+  );
+};