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/services/video.ts

@@ -2,7 +2,7 @@ type VideoListParams = { camera_name?: string; start_date?: string; end_date?: s
 type VideoFile = { file_id: string; camera_name: string; filename: string; file_size_bytes: number; format: string; status: string; created_at: string; is_streamable: boolean; needs_conversion: boolean }
 type VideoListResponse = { videos: VideoFile[]; total_count: number; page?: number; total_pages?: number }
 
-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'
 
 async function get<T>(path: string): Promise<T> {
   const res = await fetch(path, { headers: { 'Accept': 'application/json' } })