e57236a096
- 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.
28 lines
920 B
TypeScript
28 lines
920 B
TypeScript
import React from 'react'
|
|
import { useState } from 'react'
|
|
import { VideoList } from './components/VideoList'
|
|
import { VideoModal } from './components/VideoModal'
|
|
|
|
const App: React.FC = () => {
|
|
const [selected, setSelected] = useState<string | null>(null)
|
|
|
|
return (
|
|
<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>
|
|
)
|
|
}
|
|
|
|
export default App
|
|
|
|
|