Enhance video remote service and UI components

- Updated docker-compose.yml to include new media-api and mediamtx services for improved video handling.
- Modified package.json and package-lock.json to add TypeScript types for React and React DOM.
- Refactored video-related components (VideoCard, VideoList, VideoModal) for better user experience and responsiveness.
- Improved FiltersBar and Pagination components with enhanced styling and functionality.
- Added loading and error states in VideoList for better user feedback during data fetching.
- Enhanced CSS styles for a more polished look across the application.

video-remote/src/components/VideoModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-const BASE = (import.meta as any).env?.VITE_VISION_API_URL || '/api'
+const BASE = (import.meta as any).env?.VITE_MEDIA_API_URL || (import.meta as any).env?.VITE_VISION_API_URL || '/api'
 
 type Props = {
   fileId: string | null
@@ -8,16 +8,41 @@ type Props = {
 
 export const VideoModal: React.FC<Props> = ({ fileId, onClose }) => {
   if (!fileId) return null
-  const src = `${BASE}/videos/${fileId}/stream`
+  const src = `${BASE}/videos/stream?file_id=${encodeURIComponent(fileId)}`
+
   return (
-    <div className="fixed inset-0 z-[1000] bg-black/50 flex items-center justify-center">
-      <div className="bg-white rounded-lg w-full max-w-3xl overflow-hidden">
-        <div className="flex items-center justify-between p-3 border-b">
-          <div className="font-semibold">Video</div>
-          <button onClick={onClose} className="px-2 py-1 border rounded">Close</button>
+    <div
+      className="fixed inset-0 z-[1000] bg-black/60 dark:bg-black/80 backdrop-blur-sm flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      <div
+        className="bg-white dark:bg-gray-800 rounded-lg shadow-2xl w-full max-w-4xl overflow-hidden transform transition-all relative"
+        onClick={(e: React.MouseEvent) => e.stopPropagation()}
+      >
+        {/* Close button - positioned absolutely in top right corner */}
+        <button
+          onClick={onClose}
+          className="absolute top-3 right-3 z-10 inline-flex items-center justify-center w-10 h-10 rounded-lg bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 shadow-md hover:bg-red-50 dark:hover:bg-red-900/20 hover:text-red-600 dark:hover:text-red-400 hover:border-red-300 dark:hover:border-red-700 transition-all duration-200"
+          aria-label="Close modal"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+
+        <div className="p-4 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Video Player</h3>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Watch your recording</p>
         </div>
-        <div className="p-3">
-          <video src={src} controls className="w-full h-auto" />
+        <div className="p-4 bg-black">
+          <div className="relative w-full" style={{ aspectRatio: '16/9', maxHeight: '70vh' }}>
+            <video
+              src={src}
+              controls
+              className="w-full h-full rounded-lg object-contain"
+              autoPlay
+            />
+          </div>
         </div>
       </div>
     </div>