0b724fe59b
- Replaced npm ci with npm install in docker-compose for better package management. - Introduced remote component loading for the VideoStreamingPage with error handling. - Updated the title in index.html to "Experiments Dashboard" for clarity. - Added new video remote service configuration in docker-compose for improved integration. - Removed deprecated files and components related to the video streaming feature to streamline the codebase. - Updated package.json and package-lock.json to include @originjs/vite-plugin-federation for module federation support.
43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import { VideoThumbnail } from './VideoThumbnail'
|
|
|
|
export type VideoFile = {
|
|
file_id: string
|
|
filename: string
|
|
camera_name: string
|
|
file_size_bytes: number
|
|
created_at: string
|
|
status: string
|
|
format: string
|
|
is_streamable?: boolean
|
|
needs_conversion?: boolean
|
|
metadata?: { duration_seconds: number; width: number; height: number; fps: number; codec: string }
|
|
}
|
|
|
|
export type VideoCardProps = {
|
|
video: VideoFile
|
|
onClick?: (video: VideoFile) => void
|
|
showMetadata?: boolean
|
|
className?: string
|
|
}
|
|
|
|
export const VideoCard: React.FC<VideoCardProps> = ({ video, onClick }) => {
|
|
return (
|
|
<div
|
|
className={`bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-shadow overflow-hidden ${onClick ? 'cursor-pointer' : ''}`}
|
|
onClick={onClick ? () => onClick(video) : undefined}
|
|
>
|
|
<VideoThumbnail fileId={video.file_id} width={640} height={360} className="w-full h-auto" alt={video.filename} />
|
|
<div className="p-4">
|
|
<div className="text-sm text-gray-500 mb-1">{video.camera_name}</div>
|
|
<div className="font-semibold text-gray-900 truncate" title={video.filename}>{video.filename}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default VideoCard
|
|
|
|
|
|
|