onSelectAnnotation(ann.id)} style={{ position: 'absolute', left: `${ann.x * 100}%`, top: `${ann.y * 100}%`, transform: 'translate(-50%,-50%)', width: 20, height: 20, borderRadius: '50%', background: isSelected ? '#facc15' : 'rgba(250,204,21,0.7)', border: `2px solid ${isSelected ? '#fff' : 'rgba(255,255,255,0.5)'}`, cursor: 'pointer', boxShadow: isSelected ? '0 0 0 3px rgba(250,204,21,0.3)' : 'none', zIndex: 10 }} />
);
}
if (ann.type === 'region') {
return (
);
}
// ── Submitted screen ───────────────────────────────────────────────────────
if (submitted) {
return (
);
}
// ── Editor/review screen ───────────────────────────────────────────────────
const progressPct = duration > 0 ? (currentTime / duration) * 100 : 0;
return (
onSelectAnnotation(ann.id)} style={{ position: 'absolute', left: `${ann.x * 100}%`, top: `${ann.y * 100}%`, width: `${ann.width * 100}%`, height: `${ann.height * 100}%`, border: `2px solid ${isSelected ? '#22d3ee' : 'rgba(34,211,238,0.6)'}`, background: isSelected ? 'rgba(34,211,238,0.08)' : 'rgba(34,211,238,0.04)', cursor: 'pointer', zIndex: 10 }} />
);
}
return null;
})}
{dragging && (
)}
);
}
// ── Main component ────────────────────────────────────────────────────────────
function ReviewerModeReal() {
const [screen, setScreen] = React.useState('project_list');
const [projects, setProjects] = React.useState(DEMO_REVIEW_PROJECTS);
const [activeProject, setActiveProject] = React.useState(null);
const [annotations, setAnnotations] = React.useState([]);
const [selectedAnnotationId, setSelectedAnnotationId] = React.useState(null);
const [activeTool, setActiveTool] = React.useState('cursor');
const [isPlaying, setIsPlaying] = React.useState(false);
const [currentTime, setCurrentTime] = React.useState(0);
const [duration, setDuration] = React.useState(30);
const [volume, setVolume] = React.useState(80);
const [playbackRate, setPlaybackRate] = React.useState(1);
const [showSpeedMenu, setShowSpeedMenu] = React.useState(false);
const [reviewerName, setReviewerName] = React.useState('Demo Reviewer');
const [isSubmitting, setIsSubmitting] = React.useState(false);
const [submitted, setSubmitted] = React.useState(false);
const [showLeaveDialog, setShowLeaveDialog] = React.useState(false);
const [editingAnnotationId, setEditingAnnotationId] = React.useState(null);
const [editingText, setEditingText] = React.useState('');
const [rating, setRating] = React.useState(0);
const [generalFeedback, setGeneralFeedback] = React.useState('');
const [searchQuery, setSearchQuery] = React.useState('');
const playIntervalRef = React.useRef(null);
// Simulate playback
React.useEffect(() => {
if (isPlaying) {
playIntervalRef.current = setInterval(() => {
setCurrentTime(prev => {
const next = prev + 0.1 * playbackRate;
if (next >= duration) { setIsPlaying(false); return duration; }
return next;
});
}, 100);
} else {
clearInterval(playIntervalRef.current);
}
return () => clearInterval(playIntervalRef.current);
}, [isPlaying, playbackRate, duration]);
const handleOpenProject = (project) => {
api.claimReviewProject(project.id);
setActiveProject(project);
setDuration(project.duration_seconds || 30);
setRating(0);
setGeneralFeedback('');
setAnnotations([]);
setCurrentTime(0);
setSubmitted(false);
setScreen('editor_review');
};
const handleBack = () => {
if (annotations.some(a => !a.savedToServer)) {
setShowLeaveDialog(true);
} else {
setScreen('project_list');
setActiveProject(null);
setAnnotations([]);
}
};
const confirmLeave = () => {
api.releaseProject(activeProject?.id);
setShowLeaveDialog(false);
setScreen('project_list');
setActiveProject(null);
setAnnotations([]);
};
const handleAddAnnotation = (annData) => {
const id = generateId();
const newAnn = { ...annData, id, createdAt: new Date().toISOString(), reviewerName, savedToServer: false };
setAnnotations(prev => [...prev, newAnn]);
setSelectedAnnotationId(id);
setEditingAnnotationId(id);
setEditingText('');
api.saveAnnotation(activeProject?.id, newAnn);
};
const handleDeleteAnnotation = (id) => {
api.deleteAnnotation(activeProject?.id, id);
setAnnotations(prev => prev.filter(a => a.id !== id));
if (selectedAnnotationId === id) setSelectedAnnotationId(null);
};
const handleSaveAnnotationText = (id) => {
setAnnotations(prev => prev.map(a => a.id === id ? { ...a, text: editingText, savedToServer: true } : a));
setEditingAnnotationId(null);
};
const handleSubmitReview = () => {
setIsSubmitting(true);
api.submitReview(activeProject?.id).then(() => {
setIsSubmitting(false);
setSubmitted(true);
});
};
const timelineAnnotations = React.useMemo(() => {
return annotations.filter(a => a.type === 'range' || typeof a.time === 'number');
}, [annotations]);
const selectedAnnotation = annotations.find(a => a.id === selectedAnnotationId);
// ── Project list screen ────────────────────────────────────────────────────
if (screen === 'project_list') {
const filtered = searchQuery ? projects.filter(p => p.title.toLowerCase().includes(searchQuery.toLowerCase()) || p.clientName?.toLowerCase().includes(searchQuery.toLowerCase())) : projects;
return (
Review Portal
setSearchQuery(e.target.value)} style={{ width: 200 }} />
Reviewer: {reviewerName}
{filtered.length === 0 ? (
No projects found
) : (
{filtered.map(project => (
)}
handleOpenProject(project)}>
))}
{project.thumbnail_url ? (
) : (
▶
)}
{formatDuration(project.duration_seconds || 0)}
{project.title}
{project.clientName}
{project.creator_note && (
"{project.creator_note}"
)}
{project.file_size_bytes && (
{project.file_size_bytes >= 1e9 ? `${(project.file_size_bytes/1e9).toFixed(1)} GB` : `${Math.round(project.file_size_bytes/1e6)} MB`}
)}
{project.submitted_at && (
{new Date(project.submitted_at).toLocaleDateString()}
)}
{project.preferred_speciality && (
{project.preferred_speciality}
)}
Review Submitted
Your review of {activeProject?.title} has been submitted successfully.
{annotations.length} annotation{annotations.length !== 1 ? 's' : ''} included.
{/* Top bar */}
{activeProject?.title}
{TOOLS.map(tool => (
))}
{/* Main area */}
{/* Video area */}
{/* Play/pause overlay */}
{!isPlaying && (
)}
{/* Progress bar at bottom */}
{/* Annotation overlay */}
{formatTimecode(currentTime)}
/ {formatTimecode(duration)}
{/* Volume */}
setVolume(Number(e.target.value))} style={{ width: 70, accentColor: '#00ff00', cursor: 'pointer' }} />
{/* Speed */}
{/* Timeline */}
{showSpeedMenu && (
{[0.25, 0.5, 0.75, 1, 1.25, 1.5, 2].map(r => (
))}
)}
{
const rect = e.currentTarget.getBoundingClientRect();
setCurrentTime(((e.clientX - rect.left) / rect.width) * duration);
}}>
{/* Sidebar */}
{/* Track background */}
{/* Progress */}
{/* Playhead */}
{/* Annotation markers */}
{timelineAnnotations.map(ann => {
const timePct = duration > 0 ? (ann.time / duration) * 100 : 0;
const color = ann.type === 'point' ? '#facc15' : ann.type === 'range' ? '#fb923c' : '#22d3ee';
return (
{ e.stopPropagation(); setSelectedAnnotationId(ann.id); setCurrentTime(ann.time); }} style={{ position: 'absolute', top: 10, left: `calc(${timePct}% + 10px)`, transform: 'translateX(-50%)', width: 8, height: 8, borderRadius: '50%', background: color, cursor: 'pointer', border: ann.id === selectedAnnotationId ? '2px solid #fff' : '1px solid rgba(255,255,255,0.3)' }} />
);
})}
Annotations ({annotations.length})
{selectedAnnotationId && (
)}
{annotations.length === 0 && (
Use the tools above to add annotations.
Point — click on the video
Region — drag to highlight an area
Range — not yet available in web
)}
{annotations.map(ann => {
const isSelected = ann.id === selectedAnnotationId;
const isEditing = editingAnnotationId === ann.id;
const color = ann.type === 'point' ? '#facc15' : ann.type === 'range' ? '#fb923c' : '#22d3ee';
return (
Point — click on the video
Region — drag to highlight an area
Range — not yet available in web
{ setSelectedAnnotationId(ann.id); setCurrentTime(ann.time); }}>
{formatTimecode(ann.time || 0)}
{ann.type}
{isEditing ? (
e.stopPropagation()}>