@lookit/record 4.0.0 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookit/record",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Recording extensions and plugins for CHS studies.",
   "homepage": "https://github.com/lookit/lookit-jspsych#readme",
   "bugs": {

package/src/consentVideo.spec.ts

@@ -310,7 +310,6 @@ test("stopButton", async () => {
     .forEach((button) => expect(button.disabled).toBeFalsy());
   expect(stopButton!.disabled).toBeTruthy();
   expect(Recorder.prototype.stop).toHaveBeenCalledTimes(1);
-  expect(Recorder.prototype.reset).toHaveBeenCalledTimes(1);
   expect(plugin["recordFeed"]).toHaveBeenCalledTimes(1);
   expect(plugin["recordFeed"]).toHaveBeenCalledWith(display);
 });

package/src/consentVideo.ts

@@ -59,6 +59,11 @@ const info = <const>{
     consent_statement_text: { type: ParameterType.STRING, default: "" },
     omit_injury_phrase: { type: ParameterType.BOOL, default: false },
   },
+  data: {
+    chs_type: {
+      type: ParameterType.STRING,
+    },
+  },
 };
 type Info = typeof info;
 
@@ -301,7 +306,6 @@ export class VideoConsentPlugin implements JsPsychPlugin<Info> {
       stop.disabled = true;
       this.addMessage(display, this.uploadingMsg!);
       await this.recorder.stop(true);
-      this.recorder.reset();
       this.recordFeed(display);
       this.getImg(display, "record-icon").style.visibility = "hidden";
       this.addMessage(display, this.notRecordingMsg!);

package/src/index.spec.ts

@@ -1,4 +1,5 @@
 import { LookitWindow } from "@lookit/data/dist/types";
+import chsTemplates from "@lookit/templates";
 import { initJsPsych, PluginInfo, TrialType } from "jspsych";
 import { ExistingRecordingError, NoSessionRecordingError } from "./errors";
 import Rec from "./index";
@@ -6,15 +7,22 @@ import Recorder from "./recorder";
 
 declare const window: LookitWindow;
 
+let global_display_el: HTMLDivElement;
+
 jest.mock("./recorder");
 jest.mock("@lookit/data");
 jest.mock("jspsych", () => ({
   ...jest.requireActual("jspsych"),
-  initJsPsych: jest.fn().mockReturnValue({
-    finishTrial: jest.fn().mockImplementation(),
-    getCurrentTrial: jest
-      .fn()
-      .mockReturnValue({ type: { info: { name: "test-type" } } }),
+  initJsPsych: jest.fn().mockImplementation(() => {
+    // create a new display element for each jsPsych instance
+    global_display_el = document.createElement("div");
+    return {
+      finishTrial: jest.fn().mockImplementation(),
+      getCurrentTrial: jest
+        .fn()
+        .mockReturnValue({ type: { info: { name: "test-type" } } }),
+      getDisplayElement: jest.fn(() => global_display_el),
+    };
   }),
 }));
 
@@ -24,10 +32,10 @@ jest.mock("jspsych", () => ({
  * @param chs - Contents of chs storage.
  */
 const setCHSValue = (chs = {}) => {
-  Object.defineProperty(global, "window", {
-    value: {
-      chs,
-    },
+  Object.defineProperty(window, "chs", {
+    value: chs,
+    configurable: true,
+    writable: true,
   });
 };
 
@@ -36,6 +44,7 @@ beforeEach(() => {
 });
 
 afterEach(() => {
+  jest.restoreAllMocks();
   jest.clearAllMocks();
 });
 
@@ -57,15 +66,223 @@ test("Trial recording", () => {
   expect(getCurrentPluginNameSpy).toHaveBeenCalledTimes(1);
 });
 
-test("Trial recording's initialize does nothing", async () => {
+test("Trial recording's initialize with no parameters", async () => {
   const jsPsych = initJsPsych();
   const trialRec = new Rec.TrialRecordExtension(jsPsych);
 
   expect(await trialRec.initialize()).toBeUndefined();
+  expect(trialRec["uploadMsg"]).toBeNull;
+  expect(trialRec["locale"]).toBe("en-us");
+  expect(Recorder).toHaveBeenCalledTimes(0);
+});
+
+test("Trial recording's initialize with locale parameter", async () => {
+  const jsPsych = initJsPsych();
+  const trialRec = new Rec.TrialRecordExtension(jsPsych);
+
+  expect(await trialRec.initialize({ locale: "fr" })).toBeUndefined();
+  expect(trialRec["locale"]).toBe("fr");
+  expect(trialRec["uploadMsg"]).toBeNull;
+  expect(Recorder).toHaveBeenCalledTimes(0);
+});
+
+test("Trial recording's initialize with wait_for_upload_message parameter", async () => {
+  const jsPsych = initJsPsych();
+  const trialRec = new Rec.TrialRecordExtension(jsPsych);
+
+  expect(
+    await trialRec.initialize({ wait_for_upload_message: "Please wait..." }),
+  ).toBeUndefined();
+  expect(trialRec["uploadMsg"]).toBe("Please wait...");
+  expect(trialRec["locale"]).toBe("en-us");
+  expect(Recorder).toHaveBeenCalledTimes(0);
+});
+
+test("Trial recording start with locale parameter", async () => {
+  const jsPsych = initJsPsych();
+  const trialRec = new Rec.TrialRecordExtension(jsPsych);
+
+  await trialRec.initialize();
+
+  expect(trialRec["uploadMsg"]).toBeNull;
+  expect(trialRec["locale"]).toBe("en-us");
+  expect(Recorder).toHaveBeenCalledTimes(0);
+
+  trialRec.on_start({ locale: "fr" });
+
+  expect(trialRec["uploadMsg"]).toBeNull;
+  expect(trialRec["locale"]).toBe("fr");
+  expect(Recorder).toHaveBeenCalledTimes(1);
+});
+
+test("Trial recording start with wait_for_upload_message parameter", async () => {
+  const jsPsych = initJsPsych();
+  const trialRec = new Rec.TrialRecordExtension(jsPsych);
+
+  await trialRec.initialize();
+
+  expect(trialRec["uploadMsg"]).toBeNull;
+  expect(trialRec["locale"]).toBe("en-us");
   expect(Recorder).toHaveBeenCalledTimes(0);
+
+  trialRec.on_start({ wait_for_upload_message: "Please wait..." });
+
+  expect(trialRec["uploadMsg"]).toBe("Please wait...");
+  expect(trialRec["locale"]).toBe("en-us");
+  expect(Recorder).toHaveBeenCalledTimes(1);
+});
+
+test("Trial recording stop/finish with default uploading msg in English", async () => {
+  // control the recorder stop promise so that we can inspect the display before it resolves
+  let resolveStop!: () => void;
+  const stopPromise = new Promise<void>((res) => (resolveStop = res));
+
+  jest.spyOn(Recorder.prototype, "stop").mockReturnValue(stopPromise);
+
+  const jsPsych = initJsPsych();
+  const trialRec = new Rec.TrialRecordExtension(jsPsych);
+
+  const params = {
+    locale: "en-us",
+    wait_for_upload_message: null,
+  };
+  await trialRec.initialize(params);
+  trialRec.on_start();
+  trialRec.on_load();
+
+  // call on_finish but don't await so that we can inspect before it resolves
+  trialRec.on_finish();
+
+  expect(global_display_el.innerHTML).toBe(
+    chsTemplates.uploadingVideo({
+      type: jsPsych.getCurrentTrial().type,
+      locale: params.locale,
+    } as TrialType<PluginInfo>),
+  );
+  expect(global_display_el.innerHTML).toBe(
+    "<div>uploading video, please wait...</div>",
+  );
+  //expect(Recorder.prototype.stop).toHaveBeenCalledTimes(1);
+
+  // resolve the stop promise
+  resolveStop();
+  await stopPromise;
+  await Promise.resolve();
+
+  // check the display cleanup
+  expect(global_display_el.innerHTML).toBe("");
+});
+
+test("Trial recording stop/finish with different locale should display default uploading msg in specified language", async () => {
+  // control the recorder stop promise so that we can inspect the display before it resolves
+  let resolveStop!: () => void;
+  const stopPromise = new Promise<void>((res) => (resolveStop = res));
+
+  jest.spyOn(Recorder.prototype, "stop").mockReturnValue(stopPromise);
+
+  const jsPsych = initJsPsych();
+  const trialRec = new Rec.TrialRecordExtension(jsPsych);
+
+  const params = {
+    locale: "fr",
+    wait_for_upload_message: null,
+  };
+  await trialRec.initialize(params);
+  trialRec.on_start();
+  trialRec.on_load();
+
+  // call on_finish but don't await so that we can inspect before it resolves
+  trialRec.on_finish();
+
+  expect(global_display_el.innerHTML).toBe(
+    chsTemplates.uploadingVideo({
+      type: jsPsych.getCurrentTrial().type,
+      locale: params.locale,
+    } as TrialType<PluginInfo>),
+  );
+  expect(global_display_el.innerHTML).toBe(
+    "<div>téléchargement video en cours, veuillez attendre...</div>",
+  );
+  //expect(Recorder.prototype.stop).toHaveBeenCalledTimes(1);
+
+  // resolve the stop promise
+  resolveStop();
+  await stopPromise;
+  await Promise.resolve();
+
+  // check the display cleanup
+  expect(global_display_el.innerHTML).toBe("");
 });
 
-test("Start Recording", async () => {
+test("Trial recording stop/finish with custom uploading message", async () => {
+  // control the recorder stop promise so that we can inspect the display before it resolves
+  let resolveStop!: () => void;
+  const stopPromise = new Promise<void>((res) => (resolveStop = res));
+
+  jest.spyOn(Recorder.prototype, "stop").mockReturnValue(stopPromise);
+
+  const jsPsych = initJsPsych();
+  const trialRec = new Rec.TrialRecordExtension(jsPsych);
+
+  const params = {
+    wait_for_upload_message: "Wait!",
+  };
+  await trialRec.initialize(params);
+  trialRec.on_start();
+  trialRec.on_load();
+
+  // call on_finish but don't await so that we can inspect before it resolves
+  trialRec.on_finish();
+
+  expect(global_display_el.innerHTML).toBe("Wait!");
+  //expect(Recorder.prototype.stop).toHaveBeenCalledTimes(1);
+
+  // resolve the stop promise
+  resolveStop();
+  await stopPromise;
+  await Promise.resolve();
+
+  // check the display cleanup
+  expect(global_display_el.innerHTML).toBe("");
+});
+
+test("Trial recording rejection path (failure during upload)", async () => {
+  // Create a controlled promise and capture the reject function
+  let rejectStop!: (err: unknown) => void;
+  const stopPromise = new Promise<void>((_, reject) => {
+    rejectStop = reject;
+  });
+
+  jest.spyOn(Recorder.prototype, "stop").mockReturnValue(stopPromise);
+
+  const jsPsych = initJsPsych();
+  const trialRec = new Rec.TrialRecordExtension(jsPsych);
+
+  await trialRec.initialize();
+  trialRec.on_start();
+  trialRec.on_load();
+
+  // call on_finish but don't await so that we can inspect before it resolves
+  trialRec.on_finish();
+
+  // Should show initial wait for upload message
+  expect(global_display_el.innerHTML).toBe(
+    "<div>uploading video, please wait...</div>",
+  );
+
+  // Reject stop
+  rejectStop(new Error("upload failed"));
+
+  // Wait for plugin's `.catch()` handler to run
+  await Promise.resolve();
+
+  // TO DO: modify the trial extension code to display translated error msg and/or researcher contact info
+  expect(global_display_el.innerHTML).toBe(
+    "<div>uploading video, please wait...</div>",
+  );
+});
+
+test("Start session recording", async () => {
   const mockRecStart = jest.spyOn(Recorder.prototype, "start");
   const jsPsych = initJsPsych();
   const startRec = new Rec.StartRecordPlugin(jsPsych);
@@ -81,7 +298,7 @@ test("Start Recording", async () => {
   }).toThrow(ExistingRecordingError);
 });
 
-test("Stop Recording", async () => {
+test("Stop session recording", async () => {
   const mockRecStop = jest.spyOn(Recorder.prototype, "stop");
   const jsPsych = initJsPsych();
 
@@ -112,3 +329,161 @@ test("Stop Recording", async () => {
     NoSessionRecordingError,
   );
 });
+
+test("Stop session recording should display default uploading msg in English", async () => {
+  // control the recorder stop promise so that we can inspect the display before it resolves
+  let resolveStop!: () => void;
+  const stopPromise = new Promise<void>((res) => (resolveStop = res));
+
+  jest.spyOn(Recorder.prototype, "stop").mockReturnValue(stopPromise);
+
+  const jsPsych = initJsPsych();
+
+  setCHSValue({
+    sessionRecorder: new Recorder(jsPsych),
+  });
+
+  const stop_rec_plugin = new Rec.StopRecordPlugin(jsPsych);
+  const display_element = document.createElement("div");
+
+  const trial = {
+    type: Rec.StopRecordPlugin.info.name,
+    locale: "en-us",
+    wait_for_upload_message: null,
+  } as unknown as TrialType<PluginInfo>; // need to cast here because the "type" param is a string and should be a class
+
+  // call trial but don't await so that we can inspect before it resolves
+  stop_rec_plugin.trial(display_element, trial);
+
+  expect(display_element.innerHTML).toBe(chsTemplates.uploadingVideo(trial));
+  expect(Recorder.prototype.stop).toHaveBeenCalledTimes(1);
+
+  // resolve the stop promise
+  resolveStop();
+  await stopPromise;
+  await Promise.resolve();
+
+  // check the cleanup tasks after the trial method has resolved
+  expect(display_element.innerHTML).toBe("");
+  expect(jsPsych.finishTrial).toHaveBeenCalledTimes(1);
+  expect(window.chs.sessionRecorder).toBeNull();
+});
+
+test("Stop session recording with different locale should display default uploading msg in specified language", async () => {
+  // control the recorder stop promise so that we can inspect the display before it resolves
+  let resolveStop!: () => void;
+  const stopPromise = new Promise<void>((res) => (resolveStop = res));
+
+  jest.spyOn(Recorder.prototype, "stop").mockReturnValue(stopPromise);
+
+  const jsPsych = initJsPsych();
+
+  setCHSValue({
+    sessionRecorder: new Recorder(jsPsych),
+  });
+
+  const stop_rec_plugin = new Rec.StopRecordPlugin(jsPsych);
+  const display_element = document.createElement("div");
+
+  // set locale to fr
+  const trial = {
+    type: Rec.StopRecordPlugin.info.name,
+    locale: "fr",
+    wait_for_upload_message: null,
+  } as unknown as TrialType<PluginInfo>; // need to cast here because the "type" param is a string and should be a class
+
+  // call trial but don't await so that we can inspect before it resolves
+  stop_rec_plugin.trial(display_element, trial);
+
+  const fr_uploading_msg = chsTemplates.uploadingVideo(trial);
+
+  // check that fr translation is used
+  expect(fr_uploading_msg).toBe(
+    "<div>téléchargement video en cours, veuillez attendre...</div>",
+  );
+  expect(display_element.innerHTML).toBe(fr_uploading_msg);
+  expect(Recorder.prototype.stop).toHaveBeenCalledTimes(1);
+
+  // resolve the stop promise
+  resolveStop();
+  await stopPromise;
+  await Promise.resolve();
+
+  // check the cleanup tasks after the trial method has resolved
+  expect(display_element.innerHTML).toBe("");
+  expect(jsPsych.finishTrial).toHaveBeenCalledTimes(1);
+  expect(window.chs.sessionRecorder).toBeNull();
+});
+
+test("Stop session recording with custom uploading message", async () => {
+  // control the recorder stop promise so that we can inspect the display before it resolves
+  let resolveStop!: () => void;
+  const stopPromise = new Promise<void>((res) => (resolveStop = res));
+
+  jest.spyOn(Recorder.prototype, "stop").mockReturnValue(stopPromise);
+
+  const jsPsych = initJsPsych();
+  setCHSValue({ sessionRecorder: new Recorder(jsPsych) });
+
+  const stop_rec_plugin = new Rec.StopRecordPlugin(jsPsych);
+  const display_element = document.createElement("div");
+
+  const trial = {
+    type: Rec.StopRecordPlugin.info.name,
+    locale: "en-us",
+    wait_for_upload_message: "<p>Custom message…</p>",
+  } as unknown as TrialType<PluginInfo>; // need to cast here because the "type" param is a string and should be a class
+
+  stop_rec_plugin.trial(display_element, trial);
+
+  // check display before stop is resolved
+  expect(display_element.innerHTML).toBe("<p>Custom message…</p>");
+
+  resolveStop();
+  await stopPromise;
+  await Promise.resolve();
+
+  // check the cleanup tasks after the trial method has resolved
+  expect(display_element.innerHTML).toBe("");
+  expect(jsPsych.finishTrial).toHaveBeenCalledTimes(1);
+  expect(window.chs.sessionRecorder).toBeNull();
+});
+
+test("Stop recording rejection path (failure during upload)", async () => {
+  // Create a controlled promise and capture the reject function
+  let rejectStop!: (err: unknown) => void;
+  const stopPromise = new Promise<void>((_, reject) => {
+    rejectStop = reject;
+  });
+
+  jest.spyOn(Recorder.prototype, "stop").mockReturnValue(stopPromise);
+
+  const jsPsych = initJsPsych();
+  setCHSValue({ sessionRecorder: new Recorder(jsPsych) });
+
+  const stop_rec_plugin = new Rec.StopRecordPlugin(jsPsych);
+  const display_element = document.createElement("div");
+
+  const trial = {
+    type: Rec.StopRecordPlugin.info.name,
+    locale: "en-us",
+    wait_for_upload_message: "Wait…",
+  } as unknown as TrialType<PluginInfo>; // need to cast here because the "type" param is a string and should be a class
+
+  stop_rec_plugin.trial(display_element, trial);
+
+  // Should show initial wait for upload message
+  expect(display_element.innerHTML).toBe("Wait…");
+
+  // Reject stop
+  rejectStop(new Error("upload failed"));
+
+  // Wait for plugin's `.catch()` handler to run
+  await Promise.resolve();
+
+  // Trial doesn't end and the cleanup tasks don't run.
+  // TO DO: modify the plugin code to display translated error msg and/or researcher contact info
+  expect(display_element.innerHTML).toBe("Wait…");
+  expect(jsPsych.finishTrial).not.toHaveBeenCalled();
+  expect(window.chs.sessionRecorder).not.toBeNull();
+});

package/src/recorder.spec.ts

@@ -1,7 +1,7 @@
 import Data from "@lookit/data";
 import { LookitWindow } from "@lookit/data/dist/types";
 import Handlebars from "handlebars";
-import { initJsPsych } from "jspsych";
+import { initJsPsych, JsPsych } from "jspsych";
 import playbackFeed from "../hbs/playback-feed.hbs";
 import recordFeed from "../hbs/record-feed.hbs";
 import webcamFeed from "../hbs/webcam-feed.hbs";
@@ -143,29 +143,73 @@ test("Recorder initialize error", () => {
 });
 
 test("Recorder handleStop", async () => {
-  const rec = new Recorder(initJsPsych());
+  // Define a custom mockStream so that we can dynamically modify active value
+  const mockStream = {
+    active: true,
+    clone: jest.fn(),
+    getTracks: jest.fn().mockReturnValue([{ stop: jest.fn() }]),
+  };
+  mockStream.clone = jest.fn().mockReturnValue(mockStream);
+  // We need a mock MediaRecorder object that uses the custom mockStream
+  const mockRecorder = {
+    addEventListener: jest.fn(),
+    mimeType: "video/webm",
+    start: jest.fn(),
+    stop: jest.fn(),
+    stream: mockStream,
+  };
+
+  // Minimal fake jsPsych object to pass to the Recorder constructor
+  const jsPsych = {
+    pluginAPI: {
+      getCameraRecorder: jest.fn().mockReturnValue(mockRecorder),
+      initializeCameraRecorder: jest.fn().mockReturnValue(mockRecorder),
+    },
+    data: {
+      getLastTrialData: jest.fn().mockReturnValue({
+        values: jest.fn().mockReturnValue([]),
+      }),
+    },
+  } as unknown as JsPsych;
+
+  const rec = new Recorder(jsPsych);
+
   const download = jest.fn();
   const resolve = jest.fn();
-  const handleStop = rec["handleStop"](resolve);
+  // This allows us to keep strict typing and avoid use of 'any'
+  const resetSpy = jest.spyOn(rec, "reset" satisfies keyof typeof rec);
 
-  // manual mock
+  // Manual mock
   rec["download"] = download;
   rec["blobs"] = ["some recorded data" as unknown as Blob];
   URL.createObjectURL = jest.fn();
 
-  // let's download the file locally
+  // Download the file locally
   rec["localDownload"] = true;
 
+  // Stream cannot be active when handleStop/reset is called
+  mockStream.active = false;
+
+  const handleStop = rec["handleStop"](resolve);
+
   await handleStop();
 
+  expect(download).toHaveBeenCalledTimes(1);
+  expect(resetSpy).toHaveBeenCalledTimes(1);
+
   // Upload the file to s3
   rec["localDownload"] = false;
   rec["_s3"] = new Data.LookitS3("some key");
 
+  // The first 'handleStop' resets the recorder, which resets blobs to [], so we need to fake the blob data again.
+  rec["blobs"] = ["some recorded data" as unknown as Blob];
+
   await handleStop();
 
-  expect(download).toHaveBeenCalledTimes(1);
   expect(Data.LookitS3.prototype.completeUpload).toHaveBeenCalledTimes(1);
+  expect(resetSpy).toHaveBeenCalledTimes(2);
+
+  resetSpy.mockRestore();
 });
 
 test("Recorder handleStop error with no url", () => {

package/src/recorder.ts

@@ -109,7 +109,13 @@ export default class Recorder {
     this.jsPsych.pluginAPI.initializeCameraRecorder(stream, recorder_options);
   }
 
-  /** Reset the recorder to be used again. */
+  /**
+   * Reset the recorder. This is used internally after stopping/uploading a
+   * recording, in order to create a new active stream that can be used by a new
+   * Recorder instance. This can also be used by the consuming plugin/extension
+   * when a recorder needs to be reset without the stop/upload events (e.g. in
+   * the video config plugin).
+   */
   public reset() {
     if (this.stream.active) {
       throw new StreamActiveOnResetError();
@@ -332,6 +338,8 @@ export default class Recorder {
       } else {
         await this.s3.completeUpload();
       }
+      // Reset the recorder. This is necessary to create another active media stream from the stream clone, because the current stream is fully stopped/inactive and cannot be used again.
+      this.reset();
 
       resolve();
     };

package/src/start.ts

@@ -1,11 +1,17 @@
 import { LookitWindow } from "@lookit/data/dist/types";
 import { JsPsych, JsPsychPlugin } from "jspsych";
+import { version } from "../package.json";
 import { ExistingRecordingError } from "./errors";
 import Recorder from "./recorder";
 
 declare let window: LookitWindow;
 
-const info = <const>{ name: "start-record-plugin", parameters: {} };
+const info = <const>{
+  name: "start-record-plugin",
+  version,
+  parameters: {},
+  data: {},
+};
 type Info = typeof info;
 
 /** Start recording. Used by researchers who want to record across trials. */

package/src/stop.ts

@@ -1,6 +1,7 @@
 import { LookitWindow } from "@lookit/data/dist/types";
 import chsTemplates from "@lookit/templates";
 import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
+import { version } from "../package.json";
 import { NoSessionRecordingError } from "./errors";
 import Recorder from "./recorder";
 
@@ -8,9 +9,32 @@ declare let window: LookitWindow;
 
 const info = <const>{
   name: "stop-record-plugin",
+  version,
   parameters: {
-    locale: { type: ParameterType.STRING, default: "en-us" },
+    /**
+     * This string can contain HTML markup. Any content provided will be
+     * displayed while the recording is uploading. If null (the default), then
+     * the default 'uploading video, please wait' (or appropriate translation
+     * based on 'locale') will be displayed. Use a blank string for no
+     * message/content.
+     */
+    wait_for_upload_message: {
+      type: ParameterType.HTML_STRING,
+      default: null as null | string,
+    },
+    /**
+     * Locale code used for translating the default 'uploading video, please
+     * wait' message. This code must be present in the translation files. If the
+     * code is not found then English will be used. If the
+     * 'wait_for_upload_message' parameter is specified then this value is
+     * ignored.
+     */
+    locale: {
+      type: ParameterType.STRING,
+      default: "en-us",
+    },
   },
+  data: {},
 };
 type Info = typeof info;
 
@@ -41,11 +65,21 @@ export default class StopRecordPlugin implements JsPsychPlugin<Info> {
    * @param trial - Trial object with parameters/values.
    */
   public trial(display_element: HTMLElement, trial: TrialType<Info>): void {
-    display_element.innerHTML = chsTemplates.uploadingVideo(trial);
-    this.recorder.stop().then(() => {
-      window.chs.sessionRecorder = null;
-      display_element.innerHTML = "";
-      this.jsPsych.finishTrial();
-    });
+    if (trial.wait_for_upload_message == null) {
+      display_element.innerHTML = chsTemplates.uploadingVideo(trial);
+    } else {
+      display_element.innerHTML = trial.wait_for_upload_message;
+    }
+    this.recorder
+      .stop()
+      .then(() => {
+        window.chs.sessionRecorder = null;
+        display_element.innerHTML = "";
+        this.jsPsych.finishTrial();
+      })
+      .catch((err) => {
+        console.error("StopRecordPlugin: recorder stop/upload failed.", err);
+        // TO DO: display translated error msg and/or researcher contact info
+      });
   }
 }