feat: Implement client-side video export (WebM)

Author: AmirMohammad Cheraghali

src/App.tsx

@@ -992,6 +992,81 @@ function App() {
     recorder.startRecording(fullState);
   }, [controllers, viewMode, recorder]);
 
+  // Video Export Logic
+  const [isExportingVideo, setIsExportingVideo] = useState(false);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const recordedChunksRef = useRef<Blob[]>([]);
+
+  const handleExportVideo = useCallback(() => {
+    // Correct access: viewerRefs is an array of refs, so viewerRefs[0].current
+    if (!recorder.session || !viewerRefs[0].current?.container) {
+      if (!viewerRefs[0].current?.container) alert("Canvas container not found");
+      return;
+    }
+
+    const canvas = viewerRefs[0].current.container.querySelector('canvas');
+    if (!canvas) {
+      alert("Could not find canvas for video export.");
+      return;
+    }
+
+    try {
+      // High quality capture (60fps)
+      const stream = canvas.captureStream(60);
+      // Prefer VP9 or H264
+      const mimeType = [
+        'video/webm;codecs=vp9',
+        'video/webm;codecs=h264',
+        'video/webm;codecs=vp8',
+        'video/webm'
+      ].find(type => MediaRecorder.isTypeSupported(type)) || 'video/webm';
+
+      const mediaRecorder = new MediaRecorder(stream, {
+        mimeType,
+        videoBitsPerSecond: 8000000 // 8 Mbps high quality
+      });
+
+      mediaRecorderRef.current = mediaRecorder;
+      recordedChunksRef.current = [];
+
+      mediaRecorder.ondataavailable = (e) => {
+        if (e.data.size > 0) recordedChunksRef.current.push(e.data);
+      };
+
+      mediaRecorder.onstop = () => {
+        const blob = new Blob(recordedChunksRef.current, { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${recorder.session?.metadata.title || 'session'}.webm`;
+        a.click();
+        URL.revokeObjectURL(url);
+        setIsExportingVideo(false);
+      };
+
+      // Start Workflow
+      setIsExportingVideo(true);
+      mediaRecorder.start();
+
+      // Reset and Play
+      recorder.seek(0);
+      recorder.play();
+
+    } catch (err) {
+      console.error("Export failed", err);
+      alert("Video export failed. See console.");
+      setIsExportingVideo(false);
+    }
+  }, [recorder]);
+
+  // Monitor Video Export Completion
+  useEffect(() => {
+    if (isExportingVideo && !recorder.isPlaying && recorder.playbackTime >= (recorder.session?.metadata.duration || 0)) {
+      // Playback finished naturally
+      mediaRecorderRef.current?.stop();
+    }
+  }, [isExportingVideo, recorder.isPlaying, recorder.playbackTime, recorder.session]);
+
   const handleStartTour = () => {
     // Determine context (simple check based on dataSource or explicit logic)
     const isChemicalContext = dataSource === 'pubchem';
@@ -2376,7 +2451,10 @@ function App() {
                     recorderContent={
                       <RecorderControls
                         {...recorder}
-                        startRecording={handleStartRecording}
+                        startRecording={handleStartRecording} // Explicitly pass the no-arg handler
+                        exportSession={recorder.exportSession}
+                        importSession={recorder.importSession}
+                        exportVideo={handleExportVideo}
                         isLightMode={isLightMode}
                         cardBg={isLightMode ? 'bg-white' : 'bg-neutral-900'}
                       />

src/components/ProteinViewer.tsx

@@ -122,6 +122,7 @@ export interface ProteinViewerRef {
     getOrientation: () => any;
     setOrientation: (orientation: any) => void;
     getPdbBlob: () => Blob | null; // Method to extract current structure as blob
+    container: HTMLDivElement | null; // Expose container for canvas access
 }
 
 export const ProteinViewer = forwardRef<ProteinViewerRef, ProteinViewerProps>(({
@@ -732,6 +733,7 @@ export const ProteinViewer = forwardRef<ProteinViewerRef, ProteinViewerProps>(({
                 return null;
             }
         },
+        container: containerRef.current,
         getOrientation: () => {
             if (!stageRef.current || !stageRef.current.viewerControls) return null;
             const orientation = stageRef.current.viewerControls.getOrientation();

src/components/RecorderControls.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import {
     Play, Pause, Circle, Square,
-    Upload, Save
+    Upload, Save, Film
 } from 'lucide-react';
 import type { RecordedSession } from '../types';
 
@@ -21,6 +21,7 @@ interface RecorderControlsProps {
     setPlaybackSpeed: (speed: number) => void;
     exportSession: () => void;
     importSession: (file: File) => void;
+    exportVideo: () => void;
 
     isLightMode: boolean;
     cardBg: string;
@@ -36,7 +37,7 @@ const formatTime = (ms: number) => {
 export const RecorderControls = ({
     isRecording, isPlaying, recordingTime, playbackTime, session, playbackSpeed,
     startRecording, stopRecording, play, pause, seek, setPlaybackSpeed,
-    exportSession, importSession,
+    exportSession, importSession, exportVideo,
     isLightMode, cardBg
 }: RecorderControlsProps) => {
 
@@ -127,13 +128,22 @@ export const RecorderControls = ({
                             onChange={(e) => e.target.files?.[0] && importSession(e.target.files[0])}
                         />
                         {session && (
-                            <button
-                                onClick={exportSession}
-                                className="p-1 hover:text-green-500 transition-colors"
-                                title="Save Session"
-                            >
-                                <Save className="w-3.5 h-3.5" />
-                            </button>
+                            <>
+                                <button
+                                    onClick={exportVideo}
+                                    className="p-1 hover:text-purple-500 transition-colors"
+                                    title="Export Video (WebM)"
+                                >
+                                    <Film className="w-3.5 h-3.5" />
+                                </button>
+                                <button
+                                    onClick={exportSession}
+                                    className="p-1 hover:text-green-500 transition-colors"
+                                    title="Save Session (JSON)"
+                                >
+                                    <Save className="w-3.5 h-3.5" />
+                                </button>
+                            </>
                         )}
                     </div>
                 )}