MODEL/usda-vision
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(video-streaming): Implement video streaming feature with components, hooks, services, and utilities

Browse Source 
- Added centralized exports for video streaming components and hooks.
- Implemented `useVideoInfo` hook for fetching and managing video metadata and streaming information.
- Developed `useVideoList` hook for managing video list state, fetching, filtering, and pagination.
- Created `useVideoPlayer` hook for managing video player state and controls.
- Established `videoApiService` for handling API interactions related to video streaming.
- Defined TypeScript types for video streaming feature, including video metadata, API responses, and component props.
- Added utility functions for video operations, formatting, and data processing.
- Created main entry point for the video streaming feature, exporting all public APIs.
This commit is contained in:
Alireza Vaezi
2025-08-04 15:02:48 -04:00
parent 97f22d239d
commit 551e5dc2e3
44 changed files with 3964 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
src/features/video-streaming/components/VideoModal.tsx Normal file
View File

@@ -0,0 +1,221 @@
/**
* VideoModal Component
*
* A modal component for displaying videos in fullscreen with detailed information.
*/
import React, { useEffect } from 'react';
import { type VideoFile } from '../types';
import { VideoPlayer } from './VideoPlayer';
import { useVideoInfo } from '../hooks/useVideoInfo';
import {
formatFileSize,
formatVideoDate,
getFormatDisplayName,
getStatusBadgeClass,
getResolutionString,
formatDuration,
} from '../utils/videoUtils';
interface VideoModalProps {
video: VideoFile | null;
isOpen: boolean;
onClose: () => void;
}
export const VideoModal: React.FC<VideoModalProps> = ({
video,
isOpen,
onClose,
}) => {
const { videoInfo, streamingInfo, loading, error } = useVideoInfo(
video?.file_id || null,
{ autoFetch: isOpen && !!video }
);
// Handle escape key
useEffect(() => {
const handleEscape = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
onClose();
}
};
if (isOpen) {
document.addEventListener('keydown', handleEscape);
document.body.style.overflow = 'hidden';
}
return () => {
document.removeEventListener('keydown', handleEscape);
document.body.style.overflow = 'unset';
};
}, [isOpen, onClose]);
if (!isOpen || !video) {
return null;
}
const handleBackdropClick = (e: React.MouseEvent) => {
if (e.target === e.currentTarget) {
onClose();
}
};
return (
<div className="fixed inset-0 z-50 overflow-y-auto">
{/* Backdrop */}
<div
className="fixed inset-0 bg-black bg-opacity-75 transition-opacity"
onClick={handleBackdropClick}
/>
{/* Modal */}
<div className="flex min-h-full items-center justify-center p-4">
<div className="relative bg-white rounded-lg shadow-xl max-w-6xl w-full max-h-[90vh] overflow-hidden">
{/* Header */}
<div className="flex items-center justify-between p-4 border-b">
<h2 className="text-xl font-semibold text-gray-900 truncate pr-4">
{video.filename}
</h2>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded p-1"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
{/* Content */}
<div className="flex flex-col lg:flex-row max-h-[calc(90vh-80px)]">
{/* Video Player */}
<div className="flex-1 bg-black">
<VideoPlayer
fileId={video.file_id}
controls={true}
className="w-full h-full min-h-[300px] lg:min-h-[400px]"
/>
</div>
{/* Sidebar with Video Info */}
<div className="w-full lg:w-80 bg-gray-50 overflow-y-auto">
<div className="p-4 space-y-4">
{/* Status and Format */}
<div className="flex items-center space-x-2">
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusBadgeClass(video.status)}`}>
{video.status}
</span>
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
{getFormatDisplayName(video.format)}
</span>
</div>
{/* Basic Info */}
<div className="space-y-3">
<div>
<h3 className="text-sm font-medium text-gray-900 mb-2">Basic Information</h3>
<dl className="space-y-2 text-sm">
<div className="flex justify-between">
<dt className="text-gray-500">Camera:</dt>
<dd className="text-gray-900">{video.camera_name}</dd>
</div>
<div className="flex justify-between">
<dt className="text-gray-500">File Size:</dt>
<dd className="text-gray-900">{formatFileSize(video.file_size_bytes)}</dd>
</div>
<div className="flex justify-between">
<dt className="text-gray-500">Created:</dt>
<dd className="text-gray-900">{formatVideoDate(video.created_at)}</dd>
</div>
<div className="flex justify-between">
<dt className="text-gray-500">Streamable:</dt>
<dd className="text-gray-900">{video.is_streamable ? 'Yes' : 'No'}</dd>
</div>
</dl>
</div>
{/* Video Metadata */}
{videoInfo?.metadata && (
<div>
<h3 className="text-sm font-medium text-gray-900 mb-2">Video Details</h3>
<dl className="space-y-2 text-sm">
<div className="flex justify-between">
<dt className="text-gray-500">Duration:</dt>
<dd className="text-gray-900">{formatDuration(videoInfo.metadata.duration_seconds)}</dd>
</div>
<div className="flex justify-between">
<dt className="text-gray-500">Resolution:</dt>
<dd className="text-gray-900">
{getResolutionString(videoInfo.metadata.width, videoInfo.metadata.height)}
</dd>
</div>
<div className="flex justify-between">
<dt className="text-gray-500">Frame Rate:</dt>
<dd className="text-gray-900">{videoInfo.metadata.fps} fps</dd>
</div>
<div className="flex justify-between">
<dt className="text-gray-500">Codec:</dt>
<dd className="text-gray-900">{videoInfo.metadata.codec}</dd>
</div>
<div className="flex justify-between">
<dt className="text-gray-500">Aspect Ratio:</dt>
<dd className="text-gray-900">{videoInfo.metadata.aspect_ratio.toFixed(2)}</dd>
</div>
</dl>
</div>
)}
{/* Streaming Info */}
{streamingInfo && (
<div>
<h3 className="text-sm font-medium text-gray-900 mb-2">Streaming Details</h3>
<dl className="space-y-2 text-sm">
<div className="flex justify-between">
<dt className="text-gray-500">Content Type:</dt>
<dd className="text-gray-900">{streamingInfo.content_type}</dd>
</div>
<div className="flex justify-between">
<dt className="text-gray-500">Range Requests:</dt>
<dd className="text-gray-900">{streamingInfo.supports_range_requests ? 'Supported' : 'Not Supported'}</dd>
</div>
<div className="flex justify-between">
<dt className="text-gray-500">Chunk Size:</dt>
<dd className="text-gray-900">{formatFileSize(streamingInfo.chunk_size_bytes)}</dd>
</div>
</dl>
</div>
)}
{/* Loading State */}
{loading === 'loading' && (
<div className="flex items-center justify-center py-4">
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
<span className="ml-2 text-sm text-gray-600">Loading video details...</span>
</div>
)}
{/* Error State */}
{error && (
<div className="bg-red-50 border border-red-200 rounded-md p-3">
<div className="flex">
<svg className="w-5 h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
</svg>
<div className="ml-3">
<h3 className="text-sm font-medium text-red-800">Error loading video details</h3>
<p className="text-sm text-red-700 mt-1">{error.message}</p>
</div>
</div>
</div>
)}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};