@lookit/record 4.0.0 → 5.0.0

package/dist/index.cjs

@@ -8,7 +8,7 @@ var Handlebars = require('handlebars');
 
 var _package = {
   name: "@lookit/record",
-  version: "4.0.0",
+  version: "5.0.0",
   description: "Recording extensions and plugins for CHS studies.",
   homepage: "https://github.com/lookit/lookit-jspsych#readme",
   bugs: {
@@ -49,8 +49,8 @@ var _package = {
     typescript: "^5.6.2"
   },
   peerDependencies: {
-    "@lookit/data": "^0.2.0",
-    "@lookit/templates": "^2.1.0",
+    "@lookit/data": "^0.3.0",
+    "@lookit/templates": "^3.0.0",
     jspsych: "^8.0.3"
   }
 };
@@ -125,6 +125,12 @@ class S3UndefinedError extends Error {
     this.name = "S3UndefinedError";
   }
 }
+class NoFileNameError extends Error {
+  constructor() {
+    super("No filename found for recording.");
+    this.name = "NoFileNameError";
+  }
+}
 class StreamActiveOnResetError extends Error {
   constructor() {
     super("Won't reset recorder. Stream is still active.");
@@ -149,6 +155,12 @@ class ElementNotFoundError extends Error {
     this.name = "ElementNotFoundError";
   }
 }
+class TimeoutError extends Error {
+  constructor(msg) {
+    super(`${msg}`);
+    this.name = "TimeoutError";
+  }
+}
 
 var playbackFeed = "<video\n  autoplay\n  playsinline\n  src=\"{{{src}}}\"\n  class=\"webcam-feed\"\n  id=\"{{webcam_element_id}}\"\n  width=\"{{width}}\"\n  height=\"{{height}}\"\n  controls\n></video>";
 
@@ -160,6 +172,31 @@ var img$8 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8' %3f%3e%
 
 var img$7 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8' %3f%3e%3csvg viewBox='-1 -1 18 18' xmlns='http://www.w3.org/2000/svg'%3e %3ccircle fill='red' stroke='black' stroke-width='0.5' cx='8' cy='8' r='8'%3e%3c/circle%3e%3c/svg%3e";
 
+const promiseWithTimeout = (promise, promiseId, timeoutMs, onTimeoutCleanup) => {
+  let timeoutHandle;
+  const timeout = new Promise((resolve) => {
+    timeoutHandle = setTimeout(() => {
+      onTimeoutCleanup?.();
+      resolve("timeout");
+    }, timeoutMs);
+  });
+  return Promise.race([promise, timeout]).then(
+    (value) => {
+      if (value == "timeout") {
+        console.log(`Upload for ${promiseId} timed out.`);
+      } else {
+        console.log(`Upload for ${promiseId} completed.`);
+        clearTimeout(timeoutHandle);
+      }
+      return value;
+    },
+    (err) => {
+      clearTimeout(timeoutHandle);
+      throw err;
+    }
+  );
+};
+
 class Recorder {
   constructor(jsPsych) {
     this.jsPsych = jsPsych;
@@ -259,13 +296,73 @@ class Recorder {
     this.recorder.stop();
     this.stream.getTracks().map((t) => t.stop());
   }
-  stop(maintain_container_size = false) {
+  stop({
+    maintain_container_size = false,
+    stop_timeout_ms = null,
+    upload_timeout_ms = 1e4
+  } = {}) {
+    this.preStopCheck();
     this.clearWebcamFeed(maintain_container_size);
     this.stopTracks();
-    if (!this.stopPromise) {
-      throw new NoStopPromiseError();
-    }
-    return this.stopPromise;
+    const snapshot = {
+      s3: !this.localDownload ? this.s3 : null,
+      filename: this.filename,
+      localDownload: this.localDownload,
+      url: "null"
+    };
+    const stopped = stop_timeout_ms ? promiseWithTimeout(
+      this.stopPromise,
+      `${snapshot.filename}-stopped`,
+      stop_timeout_ms,
+      this.createTimeoutHandler("stop", snapshot.filename)
+    ) : this.stopPromise;
+    stopped.finally(() => {
+      try {
+        this.reset();
+      } catch (err) {
+        console.error("Error while resetting recorder after stop: ", err);
+      }
+    });
+    const uploadPromise = (async () => {
+      let url;
+      try {
+        url = await stopped;
+        if (url == "timeout") {
+          throw new TimeoutError("Recorder stop timed out.");
+        }
+      } catch (err) {
+        console.warn("Upload failed because recorder stop timed out");
+        throw err;
+      }
+      snapshot.url = url;
+      if (snapshot.localDownload) {
+        try {
+          this.download(snapshot.filename, snapshot.url);
+          await Promise.resolve();
+        } catch (err) {
+          console.error("Local download failed: ", err);
+          throw err;
+        }
+      } else {
+        try {
+          await snapshot.s3.completeUpload();
+        } catch (err) {
+          console.error("Upload failed: ", err);
+          throw err;
+        }
+      }
+    })();
+    const uploaded = upload_timeout_ms ? promiseWithTimeout(
+      uploadPromise,
+      `${snapshot.filename}-uploaded`,
+      upload_timeout_ms,
+      this.createTimeoutHandler("upload", snapshot.filename)
+    ) : uploadPromise;
+    window.chs.pendingUploads.push({
+      promise: uploadPromise,
+      file: snapshot.filename
+    });
+    return { stopped, uploaded };
   }
   initializeCheck() {
     if (!this.recorder) {
@@ -278,18 +375,27 @@ class Recorder {
       throw new StreamDataInitializeError();
     }
   }
+  preStopCheck() {
+    if (!this.recorder) {
+      throw new RecorderInitializeError();
+    }
+    if (!this.stream.active) {
+      throw new StreamInactiveInitializeError();
+    }
+    if (!this.stopPromise) {
+      throw new NoStopPromiseError();
+    }
+    if (!this.filename) {
+      throw new NoFileNameError();
+    }
+  }
   handleStop(resolve) {
-    return async () => {
+    return () => {
       if (this.blobs.length === 0) {
         throw new CreateURLError();
       }
       this.url = URL.createObjectURL(new Blob(this.blobs));
-      if (this.localDownload) {
-        this.download();
-      } else {
-        await this.s3.completeUpload();
-      }
-      resolve();
+      resolve(this.url);
     };
   }
   handleDataAvailable(event) {
@@ -298,11 +404,11 @@ class Recorder {
       this.s3.onDataAvailable(event.data);
     }
   }
-  download() {
-    if (this.filename && this.url) {
+  download(filename, url) {
+    if (filename && url) {
       const link = document.createElement("a");
-      link.href = this.url;
-      link.download = this.filename;
+      link.href = url;
+      link.download = filename;
       link.click();
     }
   }
@@ -331,6 +437,18 @@ class Recorder {
     const rand_digits = Math.floor(Math.random() * 1e3);
     return `${prefix}_${window.chs.study.id}_${trial_id}_${window.chs.response.id}_${new Date().getTime()}_${rand_digits}.webm`;
   }
+  createTimeoutHandler(eventName, id) {
+    return () => {
+      console.warn(`Recorder ${eventName} timed out: ${id}`);
+      if (!this.stream.active) {
+        try {
+          this.reset();
+        } catch (err) {
+          console.error("Error while resetting recorder after timeout: ", err);
+        }
+      }
+    };
+  }
 }
 
 const info$3 = {
@@ -383,6 +501,11 @@ const info$3 = {
     prompt_only_adults: { type: jspsych.ParameterType.BOOL, default: false },
     consent_statement_text: { type: jspsych.ParameterType.STRING, default: "" },
     omit_injury_phrase: { type: jspsych.ParameterType.BOOL, default: false }
+  },
+  data: {
+    chs_type: {
+      type: jspsych.ParameterType.STRING
+    }
   }
 };
 const _VideoConsentPlugin = class {
@@ -510,8 +633,10 @@ const _VideoConsentPlugin = class {
     stop.addEventListener("click", async () => {
       stop.disabled = true;
       this.addMessage(display, this.uploadingMsg);
-      await this.recorder.stop(true);
-      this.recorder.reset();
+      const { stopped, uploaded } = this.recorder.stop({
+        maintain_container_size: true
+      });
+      await stopped;
       this.recordFeed(display);
       this.getImg(display, "record-icon").style.visibility = "hidden";
       this.addMessage(display, this.notRecordingMsg);
@@ -536,7 +661,21 @@ const _VideoConsentPlugin = class {
 let VideoConsentPlugin = _VideoConsentPlugin;
 VideoConsentPlugin.info = info$3;
 
-const info$2 = { name: "start-record-plugin", parameters: {} };
+const info$2 = {
+  name: "start-record-plugin",
+  version: _package.version,
+  parameters: {
+    wait_for_connection_message: {
+      type: jspsych.ParameterType.HTML_STRING,
+      default: null
+    },
+    locale: {
+      type: jspsych.ParameterType.STRING,
+      default: "en-us"
+    }
+  },
+  data: {}
+};
 const _StartRecordPlugin = class {
   constructor(jsPsych) {
     this.jsPsych = jsPsych;
@@ -547,8 +686,14 @@ const _StartRecordPlugin = class {
       throw new ExistingRecordingError();
     }
   }
-  trial() {
-    this.recorder.start(false, `${_StartRecordPlugin.info.name}-multiframe`).then(() => {
+  async trial(display_element, trial) {
+    if (trial.wait_for_connection_message == null) {
+      display_element.innerHTML = chsTemplates.establishingConnection(trial);
+    } else {
+      display_element.innerHTML = trial.wait_for_connection_message;
+    }
+    await this.recorder.start(false, `${_StartRecordPlugin.info.name}-multiframe`).then(() => {
+      display_element.innerHTML = "";
       this.jsPsych.finishTrial();
     });
   }
@@ -558,9 +703,22 @@ StartRecordPlugin.info = info$2;
 
 const info$1 = {
   name: "stop-record-plugin",
+  version: _package.version,
   parameters: {
-    locale: { type: jspsych.ParameterType.STRING, default: "en-us" }
-  }
+    wait_for_upload_message: {
+      type: jspsych.ParameterType.HTML_STRING,
+      default: null
+    },
+    locale: {
+      type: jspsych.ParameterType.STRING,
+      default: "en-us"
+    },
+    max_upload_seconds: {
+      type: jspsych.ParameterType.INT,
+      default: 10
+    }
+  },
+  data: {}
 };
 class StopRecordPlugin {
   constructor(jsPsych) {
@@ -571,13 +729,25 @@ class StopRecordPlugin {
       throw new NoSessionRecordingError();
     }
   }
-  trial(display_element, trial) {
-    display_element.innerHTML = chsTemplates.uploadingVideo(trial);
-    this.recorder.stop().then(() => {
+  async trial(display_element, trial) {
+    if (trial.wait_for_upload_message == null) {
+      display_element.innerHTML = chsTemplates.uploadingVideo(trial);
+    } else {
+      display_element.innerHTML = trial.wait_for_upload_message;
+    }
+    const { stopped, uploaded } = this.recorder.stop({
+      upload_timeout_ms: trial.max_upload_seconds !== null ? trial.max_upload_seconds * 1e3 : null
+    });
+    try {
+      await stopped;
+      await uploaded;
+    } catch (err) {
+      console.error("StopRecordPlugin: recorder stop/upload failed.", err);
+    } finally {
       window.chs.sessionRecorder = null;
       display_element.innerHTML = "";
       this.jsPsych.finishTrial();
-    });
+    }
   }
 }
 StopRecordPlugin.info = info$1;
@@ -585,20 +755,66 @@ StopRecordPlugin.info = info$1;
 class TrialRecordExtension {
   constructor(jsPsych) {
     this.jsPsych = jsPsych;
+    this.uploadMsg = null;
+    this.locale = "en-us";
+    this.maxUploadSeconds = void 0;
     autoBind(this);
   }
-  async initialize() {
+  async initialize(params) {
+    await new Promise((resolve) => {
+      this.uploadMsg = params?.wait_for_upload_message ? params.wait_for_upload_message : null;
+      this.locale = params?.locale ? params.locale : "en-us";
+      this.maxUploadSeconds = params?.max_upload_seconds === void 0 ? 10 : params.max_upload_seconds;
+      resolve();
+    });
   }
-  on_start() {
+  on_start(startParams) {
+    if (startParams?.wait_for_upload_message) {
+      this.uploadMsg = startParams.wait_for_upload_message;
+    }
+    if (startParams?.locale) {
+      this.locale = startParams.locale;
+    }
+    if (startParams?.max_upload_seconds !== void 0) {
+      this.maxUploadSeconds = startParams?.max_upload_seconds;
+    }
     this.recorder = new Recorder(this.jsPsych);
+    this.pluginName = this.getCurrentPluginName();
+    this.recorder.start(false, `${this.pluginName}`);
   }
   on_load() {
-    this.pluginName = this.getCurrentPluginName();
-    this.recorder?.start(false, `${this.pluginName}`);
   }
-  on_finish() {
-    this.recorder?.stop();
-    return {};
+  async on_finish() {
+    const displayEl = this.jsPsych.getDisplayElement();
+    if (this.uploadMsg == null) {
+      displayEl.innerHTML = chsTemplates.uploadingVideo({
+        type: this.jsPsych.getCurrentTrial().type,
+        locale: this.locale
+      });
+    } else {
+      displayEl.innerHTML = this.uploadMsg;
+    }
+    if (this.recorder) {
+      const { stopped, uploaded } = this.recorder.stop({
+        upload_timeout_ms: this.maxUploadSeconds !== null ? this.maxUploadSeconds * 1e3 : null
+      });
+      try {
+        await stopped;
+        await uploaded;
+        displayEl.innerHTML = "";
+        return {};
+      } catch (err) {
+        console.error(
+          "TrialRecordExtension: recorder stop/upload failed.",
+          err
+        );
+        displayEl.innerHTML = "";
+        return {};
+      }
+    } else {
+      displayEl.innerHTML = "";
+      return {};
+    }
   }
   getCurrentPluginName() {
     const current_plugin_class = this.jsPsych.getCurrentTrial().type;
@@ -606,7 +822,9 @@ class TrialRecordExtension {
   }
 }
 TrialRecordExtension.info = {
-  name: "chs-trial-record-extension"
+  name: "chs-trial-record-extension",
+  version: _package.version,
+  data: {}
 };
 
 var img$6 = "data:image/png;base64,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";