feat: move filename overwrite to start options

example/index.js

@@ -108,7 +108,7 @@ function render(canvasRecorder = {}) {
 }
 
 const updateStatus = () => {
-  if (canvasRecorder) {
+  if (canvasRecorder && canvasRecorder.stats?.detail) {
     detailElement.innerHTML = `Status: ${Object.keys(RecorderStatus).find(
       (key) => RecorderStatus[key] === canvasRecorder.status
     )}\nDetails:\n${canvasRecorder.stats.detail}`;
@@ -139,16 +139,15 @@ const reset = async () => {
   }
 
   render();
-  updateStatus();
 };
 
 startButton.on("click", async () => {
   await reset();
 
   canvasRecorder = new Recorder(context, {
+    name: `canvas-record-example-${CONFIG.encoder || "default"}`,
     ...CONFIG,
     encoder: CONFIG.encoder ? new Encoders[`${CONFIG.encoder}`]() : null,
-    name: `canvas-record-example-${CONFIG.encoder || "default"}`,
     debug: true,
     encoderOptions: {
       corePath: new URL(

src/Recorder.js

@@ -44,7 +44,6 @@ const RecorderStatus = Object.freeze({
 /**
  * @typedef {Object} RecorderOptions Options for recording. All optional.
  * @property {string} [name=""] A name for the recorder, used as prefix for the default file name.
- * @property {string} [filename] Overwrite the file name completely.
  * @property {number} [duration=10] The recording duration in seconds. If set to Infinity, `await canvasRecorder.stop()` needs to be called manually.
  * @property {number} [frameRate=30] The frame rate in frame per seconds. Use `await canvasRecorder.step();` to go to the next frame.
  * @property {boolean} [download=true] Automatically download the recording when duration is reached or when `await canvasRecorder.stop()` is manually called.
@@ -55,6 +54,11 @@ const RecorderStatus = Object.freeze({
  * @property {onStatusChangeCb} [onStatusChange]
  */
 
+/**
+ * @typedef {Object} RecorderStartOptions Options for recording. All optional.
+ * @property {string} [filename] Overwrite the file name completely.
+ */
+
 /**
  * Base Recorder class.
  * @property {boolean} [enabled=true] Enable/disable pointer interaction and drawing.
@@ -92,6 +96,8 @@ class Recorder {
   }
 
   get stats() {
+    if (this.status !== RecorderStatus.Recording) return;
+
     const renderTime = (Date.now() - this.startTime.getTime()) / 1000;
     const secondsPerFrame = renderTime / this.frame;
 
@@ -218,8 +224,9 @@ Speedup: x${(this.time / renderTime).toFixed(1)}`,
 
   /**
    * Start the recording by initializing and calling the initial step.
+   * @param {RecorderStartOptions} startOptions
    */
-  async start() {
+  async start({ filename } = {}) {
     await this.init();
 
     // Ensure initializing worked
@@ -229,7 +236,7 @@ Speedup: x${(this.time / renderTime).toFixed(1)}`,
     }
 
     this.startTime = new Date();
-    this.filename ||= this.getDefaultFileName(this.encoder.extension);
+    this.filename = filename || this.getDefaultFileName(this.encoder.extension);
 
     this.#updateStatus(RecorderStatus.Recording);