add duration and status outputs

examples/RecordMovieComponent.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useEffect, useRef } from "react";
+import Recorder from "../src/simularium/StreamRecorder";
+
+interface RecordMovieComponentProps {
+    trajectoryTitle: string;
+}
+
+const RecordMovieComponent = ({
+    trajectoryTitle,
+}: RecordMovieComponentProps) => {
+    const [isRecording, setIsRecording] = useState(false);
+    let [recordingDuration, setRecordingDuration] = useState<number>(0);
+    let [recordingStatus, setRecordingStatus] =
+        useState<string>("Not recording");
+    let [outputStatus, setOutputStatus] = useState<string>("");
+    const recorderRef = useRef<Recorder | null>(null);
+
+    useEffect(() => {
+        // Access the existing canvas element
+        const canvasEl = document.querySelector("canvas");
+        if (canvasEl) {
+            recorderRef.current = new Recorder(canvasEl, trajectoryTitle);
+        }
+    }, [trajectoryTitle]);
+
+    // this useEffect is a timer that updates the recording duration
+    useEffect(() => {
+        let intervalId;
+
+        if (isRecording) {
+            intervalId = setInterval(() => {
+                setRecordingDuration((prevTimer) => prevTimer + 1);
+            }, 1000);
+        }
+
+        return () => {
+            clearInterval(intervalId);
+        };
+    }, [isRecording]);
+
+    const startRecording = async () => {
+        if (recorderRef.current) {
+            await recorderRef.current.setupStream();
+            setRecordingDuration(0);
+            setIsRecording(true);
+            setRecordingStatus("Recording in progress...");
+            setOutputStatus("");
+        }
+    };
+
+    const stopRecording = async () => {
+        // when we start recording again, reset ouput status to recording in progress
+        if (recorderRef.current) {
+            setIsRecording(false);
+            setRecordingStatus("Not recording");
+            setOutputStatus("Processing...");
+            await recorderRef.current.onCompletedRecording();
+            setOutputStatus(
+                "Your movie has been downloaded, duration: " +
+                    recordingDuration +
+                    " seconds"
+            );
+        }
+    };
+
+    return (
+        <div>
+            <button onClick={startRecording} disabled={isRecording}>
+                Start Recording
+            </button>
+            <button onClick={stopRecording} disabled={!isRecording}>
+                Stop Recording
+            </button>
+            <div>{recordingStatus}</div>
+            <div>
+                {isRecording
+                    ? "Recording duration:  " + recordingDuration + " seconds"
+                    : ""}
+            </div>
+            <div>{outputStatus}</div>
+        </div>
+    );
+};
+
+export default RecordMovieComponent;

examples/Viewer.tsx

@@ -22,7 +22,6 @@ import SinglePdbSimulator from "./SinglePdbSimulator";
 import CurveSimulator from "./CurveSimulator";
 import SingleCurveSimulator from "./SingleCurveSimulator";
 import ColorPicker from "./ColorPicker";
-import Download from "./Download";
 import {
     SMOLDYN_TEMPLATE,
     UI_BASE_TYPES,
@@ -34,7 +33,7 @@ import ConversionForm from "./ConversionForm";
 import MetaballSimulator from "./MetaballSimulator";
 import { TrajectoryType } from "../src/constants";
 import { NetConnectionParams } from "../src/simularium";
-import VideoRecorder from "./VideoRecorder";
+import RecordMovieComponent from "./RecordMovieComponent";
 
 let playbackFile = "TEST_LIVEMODE_API"; //"medyan_paper_M:A_0.675.simularium";
 let queryStringFile = "";
@@ -150,6 +149,7 @@ const initialState: ViewerState = {
     filePending: null,
     simulariumFile: null,
     isRecording: false,
+    recordingTime: 0,
     trajectoryTitle: ""
 };
 
@@ -450,7 +450,6 @@ class Viewer extends React.Component<InputParams, ViewerState> {
 
     public handleTrajectoryInfo(data): void {
         console.log("Trajectory info arrived", data);
-        console.log("Trajectory info arrived", data.trajectoryTitle);
         // NOTE: Currently incorrectly assumes initial time of 0
         const totalDuration = (data.totalSteps - 1) * data.timeStepSize;
         this.setState({
@@ -911,7 +910,7 @@ class Viewer extends React.Component<InputParams, ViewerState> {
                     updateAgentColorArray={this.updateAgentColorArray}
                     setColorSelectionInfo={this.setColorSelectionInfo}
                 />
-                <VideoRecorder trajectoryTitle={this.getTrajectoryTitle()} />
+                <RecordMovieComponent trajectoryTitle={this.getTrajectoryTitle()} />
                 <div className="viewer-container">
                     <SimulariumViewer
                         ref={this.viewerRef}