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/App.tsx

@@ -7,10 +7,17 @@ const App: React.FC = () => {
   const [selected, setSelected] = useState<string | null>(null)
 
   return (
-    <div className="p-6 space-y-4">
-      <h1 className="text-2xl font-bold">Video Library</h1>
-      <VideoList onSelect={(id) => setSelected(id)} />
-      <VideoModal fileId={selected} onClose={() => setSelected(null)} />
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+        <div className="px-6 py-5">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Video Library</h1>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">Browse and manage your video recordings</p>
+        </div>
+      </div>
+      <div className="px-6 py-6">
+        <VideoList onSelect={(id) => setSelected(id)} />
+        <VideoModal fileId={selected} onClose={() => setSelected(null)} />
+      </div>
     </div>
   )
 }