81828f61cf
- Implemented ApiStatusIndicator to monitor video API connection status with health check functionality. - Created PerformanceDashboard for monitoring video streaming performance metrics in development mode. - Developed VideoDebugger for diagnosing video streaming issues with direct access to test video URLs. - Added VideoErrorBoundary to handle errors in video streaming components with user-friendly messages and recovery options. - Introduced utility functions for performance monitoring and thumbnail caching to optimize video streaming operations. - Added comprehensive tests for video streaming API connectivity and functionality.
235 lines
9.8 KiB
TypeScript
235 lines
9.8 KiB
TypeScript
/**
|
|
* 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 { VideoDebugger } from './VideoDebugger';
|
|
import { useVideoInfo } from '../hooks/useVideoInfo';
|
|
import {
|
|
formatFileSize,
|
|
formatVideoDate,
|
|
getFormatDisplayName,
|
|
getStatusBadgeClass,
|
|
getResolutionString,
|
|
formatDuration,
|
|
isWebCompatible,
|
|
} 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-[999999] 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 flex-wrap">
|
|
<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 ${isWebCompatible(video.format)
|
|
? 'bg-green-100 text-green-800'
|
|
: 'bg-orange-100 text-orange-800'
|
|
}`}>
|
|
{getFormatDisplayName(video.format)}
|
|
</span>
|
|
{isWebCompatible(video.format) && (
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
|
Web Compatible
|
|
</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>
|
|
)}
|
|
|
|
{/* Video Debugger (development only) */}
|
|
<VideoDebugger fileId={video.file_id} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|