feat: add Pagination component for video list navigation

- Implemented a reusable Pagination component with first/last, previous/next, and numbered page buttons.
- Added PageInfo component to display current page and total items.
- Integrated pagination into VideoList component, allowing users to navigate through video pages.
- Updated useVideoList hook to manage current page and total pages state.
- Modified videoApi service to support pagination with offset-based API.
- Enhanced VideoCard styling for better UI consistency.
- Updated Tailwind CSS configuration to include custom colors and shadows for branding.
- Refactored video file settings to use 'h264' codec for better compatibility.
This commit is contained in:
Alireza Vaezi
2025-08-05 13:56:26 -04:00
parent 7bc76d72f9
commit 228efb0f55
38 changed files with 1836 additions and 604 deletions

View File

@@ -40,13 +40,13 @@ Open `camera_preview.html` in your browser and click "Start Stream" for any came
### 3. API Usage
```bash
# Start streaming for camera1
curl -X POST http://localhost:8000/cameras/camera1/start-stream
curl -X POST http://vision:8000/cameras/camera1/start-stream
# View live stream (open in browser)
http://localhost:8000/cameras/camera1/stream
http://vision:8000/cameras/camera1/stream
# Stop streaming
curl -X POST http://localhost:8000/cameras/camera1/stop-stream
curl -X POST http://vision:8000/cameras/camera1/stop-stream
```
## 📡 API Endpoints
@@ -150,10 +150,10 @@ The system supports these concurrent operations:
### Example: Concurrent Usage
```bash
# Start streaming
curl -X POST http://localhost:8000/cameras/camera1/start-stream
curl -X POST http://vision:8000/cameras/camera1/start-stream
# Start recording (while streaming continues)
curl -X POST http://localhost:8000/cameras/camera1/start-recording \
curl -X POST http://vision:8000/cameras/camera1/start-recording \
-H "Content-Type: application/json" \
-d '{"filename": "test_recording.avi"}'
@@ -232,8 +232,8 @@ For issues with streaming functionality:
1. Check the system logs: `usda_vision_system.log`
2. Run the test script: `python test_streaming.py`
3. Verify API health: `http://localhost:8000/health`
4. Check camera status: `http://localhost:8000/cameras`
3. Verify API health: `http://vision:8000/health`
4. Check camera status: `http://vision:8000/cameras`
---