@lookit/record 0.0.4 → 2.0.0

package/dist/stop.d.ts

@@ -1,7 +1,12 @@
-import { JsPsych, JsPsychPlugin } from "jspsych";
+import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
 declare const info: {
     readonly name: "stop-record-plugin";
-    readonly parameters: {};
+    readonly parameters: {
+        readonly locale: {
+            readonly type: ParameterType.STRING;
+            readonly default: "en-us";
+        };
+    };
 };
 type Info = typeof info;
 /** Stop recording. Used by researchers who want to record across trials. */
@@ -9,7 +14,12 @@ export default class StopRecordPlugin implements JsPsychPlugin<Info> {
     private jsPsych;
     static readonly info: {
         readonly name: "stop-record-plugin";
-        readonly parameters: {};
+        readonly parameters: {
+            readonly locale: {
+                readonly type: ParameterType.STRING;
+                readonly default: "en-us";
+            };
+        };
     };
     private recorder;
     /**
@@ -24,7 +34,8 @@ export default class StopRecordPlugin implements JsPsychPlugin<Info> {
      * @param display_element - DOM element where jsPsych content is being
      *   rendered (set in initJsPsych and automatically made available to a
      *   plugin's trial method via jsPsych core).
+     * @param trial - Trial object with parameters/values.
      */
-    trial(display_element: HTMLElement): void;
+    trial(display_element: HTMLElement, trial: TrialType<Info>): void;
 }
 export {};

package/dist/{video_config.d.ts → videoConfig.d.ts}

@@ -3,6 +3,10 @@ declare const info: {
     readonly name: "video-config-plugin";
     readonly version: string;
     readonly parameters: {
+        readonly locale: {
+            readonly type: ParameterType.STRING;
+            readonly default: "en-us";
+        };
         readonly troubleshooting_intro: {
             /**
              * Optional string to appear at the start of the "Setup tips and
@@ -27,6 +31,30 @@ declare const info: {
 };
 type Info = typeof info;
 export type VideoConsentTrialType = TrialType<Info>;
+export declare const html_params: {
+    webcam_container_id: string;
+    reload_button_id_text: string;
+    reload_button_id_cam: string;
+    camera_selection_id: string;
+    mic_selection_id: string;
+    next_button_id: string;
+    error_msg_div_id: string;
+    step1_id: string;
+    step2_id: string;
+    step3_id: string;
+    step_complete_class: string;
+    waiting_for_access_msg_id: string;
+    checking_mic_msg_id: string;
+    access_problem_msg_id: string;
+    setup_problem_msg_id: string;
+    chromeInitialPrompt: any;
+    chromeAlwaysAllow: any;
+    chromePermissions: any;
+    firefoxInitialPrompt: any;
+    firefoxChooseDevice: any;
+    firefoxDevicesBlocked: any;
+    checkmarkIcon: any;
+};
 /**
  * **Video Config**.
  *
@@ -44,6 +72,10 @@ export default class VideoConfigPlugin implements JsPsychPlugin<Info> {
         readonly name: "video-config-plugin";
         readonly version: string;
         readonly parameters: {
+            readonly locale: {
+                readonly type: ParameterType.STRING;
+                readonly default: "en-us";
+            };
             readonly troubleshooting_intro: {
                 /**
                  * Optional string to appear at the start of the "Setup tips and
@@ -76,22 +108,6 @@ export default class VideoConfigPlugin implements JsPsychPlugin<Info> {
     private minVolume;
     private micChecked;
     private processorNode;
-    private webcam_container_id;
-    private reload_button_id_text;
-    private reload_button_id_cam;
-    private camera_selection_id;
-    private mic_selection_id;
-    private next_button_id;
-    private error_msg_div_id;
-    private step1_id;
-    private step2_id;
-    private step3_id;
-    private step_complete_class;
-    private step_complete_text;
-    private waiting_for_access_msg;
-    private checking_mic_msg;
-    private access_problem_msg;
-    private setup_problem_msg;
     /**
      * Constructor for video config plugin.
      *
@@ -108,8 +124,7 @@ export default class VideoConfigPlugin implements JsPsychPlugin<Info> {
     /**
      * Add HTML content to the page.
      *
-     * @param troubleshooting_intro - Troubleshooting intro parameter from the
-     *   Trial object.
+     * @param trial - Trial object.
      */
     private addHtmlContent;
     /** Add event listeners to elements after they've been added to the page. */
@@ -264,8 +279,9 @@ export default class VideoConfigPlugin implements JsPsychPlugin<Info> {
      * Update the errors/messages div with information for the user about the
      * camera/mic checks.
      *
-     * @param errorMsg - Message to display in the error message div. Pass an
-     *   empty string to clear any existing errors/messages.
+     * @param errorMsgId - Span element ID containing the message to display in
+     *   the error message div. Call the function without an errorMsgId to clear
+     *   the errors.
      */
     private updateErrors;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookit/record",
-  "version": "0.0.4",
+  "version": "2.0.0",
   "description": "Recording extensions and plugins for CHS studies.",
   "homepage": "https://github.com/lookit/lookit-jspsych#readme",
   "bugs": {
@@ -34,20 +34,15 @@
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-replace": "^6.0.1",
     "@types/audioworklet": "^0.0.60",
-    "@types/js-yaml": "^4.0.9",
-    "@types/node-polyglot": "^2.5.0",
     "handlebars": "^4.7.8",
-    "i18next": "^23.15.1",
-    "i18next-icu": "^2.3.0",
-    "js-yaml": "^4.1.0",
     "rollup-plugin-dotenv": "^0.5.1",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "rollup-plugin-string-import": "^1.2.4",
     "typescript": "^5.6.2"
   },
   "peerDependencies": {
-    "@lookit/data": "^0.0.4",
-    "@lookit/templates": "^0.0.1",
+    "@lookit/data": "^0.1.0",
+    "@lookit/templates": "^1.1.0",
     "jspsych": "^8.0.2"
   }
 }

package/src/consentVideo.ts

@@ -46,15 +46,16 @@ const info = <const>{
     additional_segments: {
       type: ParameterType.COMPLEX,
       array: true,
+      default: [],
       nested: {
         title: {
           type: ParameterType.STRING,
           default: "",
         },
-      },
-      text: {
-        type: ParameterType.STRING,
-        default: "",
+        text: {
+          type: ParameterType.STRING,
+          default: "",
+        },
       },
     },
     prompt_all_adults: { type: ParameterType.BOOL, default: false },

package/src/index.spec.ts

@@ -1,5 +1,5 @@
 import { LookitWindow } from "@lookit/data/dist/types";
-import { initJsPsych } from "jspsych";
+import { initJsPsych, PluginInfo, TrialType } from "jspsych";
 import { ExistingRecordingError, NoSessionRecordingError } from "./errors";
 import Rec from "./index";
 import Recorder from "./recorder";
@@ -96,7 +96,11 @@ test("Stop Recording", async () => {
 
   mockRecStop.mockImplementation(jest.fn().mockReturnValue(Promise.resolve()));
 
-  await stopRec.trial(display_element);
+  const trial = {
+    locale: "en-us",
+  } as unknown as TrialType<PluginInfo>;
+
+  await stopRec.trial(display_element, trial);
 
   expect(jsPsych.finishTrial).toHaveBeenCalledTimes(1);
   expect(window.chs.sessionRecorder).toBeNull();

package/src/index.ts

@@ -2,7 +2,7 @@ import { VideoConsentPlugin } from "./consentVideo";
 import StartRecordPlugin from "./start";
 import StopRecordPlugin from "./stop";
 import TrialRecordExtension from "./trial";
-import VideoConfigPlugin from "./video_config";
+import VideoConfigPlugin from "./videoConfig";
 
 export default {
   TrialRecordExtension,

package/src/stop.ts

@@ -1,13 +1,17 @@
 import { LookitWindow } from "@lookit/data/dist/types";
-import Handlebars from "handlebars";
-import { JsPsych, JsPsychPlugin } from "jspsych";
-import uploadingVideo from "../hbs/uploading-video.hbs";
+import chsTemplates from "@lookit/templates";
+import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
 import { NoSessionRecordingError } from "./errors";
 import Recorder from "./recorder";
 
 declare let window: LookitWindow;
 
-const info = <const>{ name: "stop-record-plugin", parameters: {} };
+const info = <const>{
+  name: "stop-record-plugin",
+  parameters: {
+    locale: { type: ParameterType.STRING, default: "en-us" },
+  },
+};
 type Info = typeof info;
 
 /** Stop recording. Used by researchers who want to record across trials. */
@@ -34,9 +38,10 @@ export default class StopRecordPlugin implements JsPsychPlugin<Info> {
    * @param display_element - DOM element where jsPsych content is being
    *   rendered (set in initJsPsych and automatically made available to a
    *   plugin's trial method via jsPsych core).
+   * @param trial - Trial object with parameters/values.
    */
-  public trial(display_element: HTMLElement): void {
-    display_element.innerHTML = Handlebars.compile(uploadingVideo)({});
+  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 = "";

package/src/{video_config.spec.ts → videoConfig.spec.ts}

@@ -1,16 +1,12 @@
 import { clickTarget } from "@jspsych/test-utils";
-import Handlebars from "handlebars";
+import chsTemplates from "@lookit/templates";
 import { initJsPsych, JsPsych } from "jspsych";
-import videoConfig from "../hbs/video-config.hbs";
 import { NoStreamError } from "./errors";
-import chromeInitialPrompt from "./img/chrome_initialprompt.png";
-import chromeAlwaysAllow from "./img/chrome_step1_alwaysallow.png";
-import chromePermissions from "./img/chrome_step1_permissions.png";
-import firefoxInitialPrompt from "./img/firefox_initialprompt.png";
-import firefoxChooseDevice from "./img/firefox_prompt_choose_device.png";
-import firefoxDevicesBlocked from "./img/firefox_prompt_devices_blocked.png";
 import Recorder from "./recorder";
-import VideoConfigPlugin, { VideoConsentTrialType } from "./video_config";
+import VideoConfigPlugin, {
+  html_params,
+  VideoConsentTrialType,
+} from "./videoConfig";
 
 jest.mock("./recorder");
 jest.mock("@lookit/data");
@@ -42,7 +38,6 @@ jest.mock("jspsych", () => ({
 let display_el: HTMLBodyElement;
 let jsPsych: JsPsych;
 let video_config: VideoConfigPlugin;
-let html_params: object;
 let devices: MediaDeviceInfo[];
 let devicesObj: {
   cam1: MediaDeviceInfo;
@@ -55,6 +50,12 @@ let returnedDeviceLists: {
   mics: MediaDeviceInfo[];
 };
 
+// Video consent trial object with defaults
+const trial_info = {
+  locale: "en-us",
+  troubleshooting_intro: "",
+} as VideoConsentTrialType;
+
 /**
  * Clean rendered html to be compared with DOM.
  *
@@ -70,6 +71,10 @@ const cleanHTML = (html: string) => {
       .replace(/\s*\/*>/gm, ">")
       // equals empty string
       .replace(/(="")/gm, "")
+      // convert " to double quote
+      .replace(/(")/gm, '"')
+      // convert ' to single quote
+      .replace(/(')/gm, "'")
   );
 };
 
@@ -79,28 +84,6 @@ beforeEach(() => {
   video_config = new VideoConfigPlugin(jsPsych);
   video_config["display_el"] = display_el;
 
-  // Set up parameters for rendering HTML template
-  html_params = {
-    webcam_container_id: video_config["webcam_container_id"],
-    reload_button_id_cam: video_config["reload_button_id_cam"],
-    camera_selection_id: video_config["camera_selection_id"],
-    mic_selection_id: video_config["mic_selection_id"],
-    step1_id: video_config["step1_id"],
-    step2_id: video_config["step2_id"],
-    step3_id: video_config["step3_id"],
-    step_complete_class: video_config["step_complete_class"],
-    step_complete_text: video_config["step_complete_text"],
-    reload_button_id_text: video_config["reload_button_id_text"],
-    next_button_id: video_config["next_button_id"],
-    chromeInitialPrompt: chromeInitialPrompt,
-    chromeAlwaysAllow: chromeAlwaysAllow,
-    chromePermissions: chromePermissions,
-    firefoxInitialPrompt: firefoxInitialPrompt,
-    firefoxChooseDevice: firefoxChooseDevice,
-    firefoxDevicesBlocked: firefoxDevicesBlocked,
-    troubleshooting_intro: "",
-  };
-
   // Mocks for handling media streams and devices
   const mic1 = {
     deviceId: "mic1",
@@ -158,10 +141,6 @@ afterEach(() => {
 });
 
 test("Video config trial method sets up trial", () => {
-  const trial_info = {
-    troubleshooting_intro: "",
-  } as unknown as VideoConsentTrialType;
-
   // Set up mocks for upstream functions called in trial method.
   const addHtmlMock = jest
     .spyOn(video_config, "addHtmlContent")
@@ -195,11 +174,11 @@ test("Video config addHtmlContent loads template", () => {
 
   // Render the template with the HTML parameters.
   const rendered_trial_html = cleanHTML(
-    Handlebars.compile(videoConfig)(html_params),
+    chsTemplates.videoConfig(trial_info, html_params),
   );
 
   // Run addHtmlContent to get the actual trial HTML.
-  video_config["addHtmlContent"]("");
+  video_config["addHtmlContent"](trial_info);
   const displayed_html = cleanHTML(document.body.innerHTML);
 
   expect(displayed_html).toStrictEqual(rendered_trial_html);
@@ -209,19 +188,18 @@ test("Video config addHtmlContent loads template with custom troubleshooting tex
   expect(video_config["display_el"]?.innerHTML).toBe("");
 
   // Render the template with a custom trial parameter.
-  const troubleshooting_intro = "Custom text.";
-  const html_params_custom_intro = {
-    ...html_params,
-    troubleshooting_intro,
-  };
+  const trial_info_custom_troubleshoot = {
+    locale: "en-us",
+    troubleshooting_intro: "Custom text.",
+  } as VideoConsentTrialType;
 
   // Remove new lines, indents (tabs or spaces), and empty HTML property values.
   const rendered_trial_html = cleanHTML(
-    Handlebars.compile(videoConfig)(html_params_custom_intro),
+    chsTemplates.videoConfig(trial_info_custom_troubleshoot, html_params),
   );
 
   // Get the actual trial HTML
-  video_config["addHtmlContent"](troubleshooting_intro);
+  video_config["addHtmlContent"](trial_info_custom_troubleshoot);
   const displayed_html = cleanHTML(document.body.innerHTML);
 
   expect(displayed_html).toStrictEqual(rendered_trial_html);
@@ -229,14 +207,14 @@ test("Video config addHtmlContent loads template with custom troubleshooting tex
 
 test("Video config add event listeners", async () => {
   expect(video_config["display_el"]?.innerHTML).toBe("");
-  video_config["addHtmlContent"]("");
+  video_config["addHtmlContent"](trial_info);
 
   // Get relevant elements (device selection elements tested separately)
   const next_button_el = video_config["display_el"]?.querySelector(
-    `#${video_config["next_button_id"]}`,
+    `#${html_params["next_button_id"]}`,
   ) as HTMLButtonElement;
   const reload_button_els = video_config["display_el"]?.querySelectorAll(
-    `#${video_config["reload_button_id_cam"]}, #${video_config["reload_button_id_text"]}`,
+    `#${html_params["reload_button_id_cam"]}, #${html_params["reload_button_id_text"]}`,
   ) as NodeListOf<HTMLButtonElement>;
   const acc_button_els = document.getElementsByClassName(
     "lookit-jspsych-accordion",
@@ -291,41 +269,41 @@ test("Video config add event listeners", async () => {
 test("Video config enable next", () => {
   expect(video_config["display_el"]?.innerHTML).toBe("");
 
-  video_config["addHtmlContent"]("");
+  video_config["addHtmlContent"](trial_info);
   const next_button_el = video_config["display_el"]?.querySelector(
-    `#${video_config["next_button_id"]}`,
+    `#${html_params["next_button_id"]}`,
   ) as HTMLButtonElement;
 
   // When trial first loads, next button should exist but be disabled and no 'step_complete_class'
   expect(next_button_el).toBeTruthy();
   expect(
-    next_button_el.classList.contains(video_config["step_complete_class"]),
+    next_button_el.classList.contains(html_params["step_complete_class"]),
   ).toBe(false);
   expect(next_button_el.disabled).toBe(true);
 
   // Calling with 'true' enables the button and adds the class.
   video_config["enableNext"](true);
   expect(
-    next_button_el.classList.contains(video_config["step_complete_class"]),
+    next_button_el.classList.contains(html_params["step_complete_class"]),
   ).toBe(true);
   expect(next_button_el.disabled).toBe(false);
 
   // Calling with 'false' sets everything back.
   video_config["enableNext"](false);
   expect(
-    next_button_el.classList.contains(video_config["step_complete_class"]),
+    next_button_el.classList.contains(html_params["step_complete_class"]),
   ).toBe(false);
   expect(next_button_el.disabled).toBe(true);
 });
 
 test("Video config update instructions", () => {
   expect(video_config["display_el"]?.innerHTML).toBe("");
-  video_config["addHtmlContent"]("");
+  video_config["addHtmlContent"](trial_info);
 
   // Get the relevant elements from the instructions section.
-  const step1_id = video_config["step1_id"];
-  const step2_id = video_config["step2_id"];
-  const step3_id = video_config["step3_id"];
+  const step1_id = html_params["step1_id"];
+  const step2_id = html_params["step2_id"];
+  const step3_id = html_params["step3_id"];
   const step1_span = video_config["display_el"]?.querySelector(
     `#${step1_id}-span`,
   ) as HTMLSpanElement;
@@ -376,27 +354,34 @@ test("Video config update instructions", () => {
 
 test("Video config update errors", () => {
   expect(video_config["display_el"]?.innerHTML).toBe("");
-  video_config["addHtmlContent"]("");
+  video_config["addHtmlContent"](trial_info);
   const error_msg_div = video_config["display_el"]?.querySelector(
-    `#${video_config["error_msg_div_id"]}`,
+    `#${html_params["error_msg_div_id"]}`,
   ) as HTMLDivElement;
 
-  // Error/info message div is empty when the page first loads.
-  expect(error_msg_div.innerHTML).toStrictEqual("");
-
-  const test_msg = "Test message.";
-  video_config["updateErrors"](test_msg);
+  // Error/info messages are all hidden when the page first loads.
+  const error_msg_elements = error_msg_div.querySelectorAll(
+    "span.error_msg",
+  ) as NodeListOf<HTMLSpanElement>;
+  error_msg_elements.forEach((span) => {
+    expect(span.style.display).toBe("none");
+  });
 
-  expect(error_msg_div.innerHTML).toStrictEqual(test_msg);
+  // Calling with an error message ID displays the message element
+  video_config["updateErrors"](html_params["waiting_for_access_msg_id"]);
+  const waiting_for_access_msg_el = error_msg_div.querySelector(
+    `span#${html_params["waiting_for_access_msg_id"]}`,
+  ) as HTMLSpanElement;
+  expect(waiting_for_access_msg_el?.style.display).toBe("block");
 });
 
 test("Video config reload button click", async () => {
   expect(video_config["hasReloaded"]).toBe(false);
 
-  video_config["addHtmlContent"]("");
+  video_config["addHtmlContent"](trial_info);
 
   const reload_button_els = video_config["display_el"]?.querySelectorAll(
-    `#${video_config["reload_button_id_cam"]}, #${video_config["reload_button_id_text"]}`,
+    `#${html_params["reload_button_id_cam"]}, #${html_params["reload_button_id_text"]}`,
   ) as NodeListOf<HTMLButtonElement>;
 
   // Mock upstream function calls.
@@ -432,12 +417,12 @@ test("Video config reload button click", async () => {
 });
 
 test("Video config updateDeviceSelection", () => {
-  video_config["addHtmlContent"]("");
+  video_config["addHtmlContent"](trial_info);
   const cam_selection_el = video_config["display_el"]?.querySelector(
-    `#${video_config["camera_selection_id"]}`,
+    `#${html_params["camera_selection_id"]}`,
   ) as HTMLSelectElement;
   const mic_selection_el = video_config["display_el"]?.querySelector(
-    `#${video_config["mic_selection_id"]}`,
+    `#${html_params["mic_selection_id"]}`,
   ) as HTMLSelectElement;
 
   expect(cam_selection_el).not.toBeUndefined();
@@ -583,9 +568,9 @@ test("Video config setupRecorder", async () => {
   // Adds error message when waiting for stream access, then clears the message after access is granted.
   expect(updateErrorsMock).toHaveBeenCalledTimes(2);
   expect(updateErrorsMock.mock.calls[0]).toStrictEqual([
-    video_config["waiting_for_access_msg"],
+    html_params["waiting_for_access_msg_id"],
   ]);
-  expect(updateErrorsMock.mock.calls[1]).toStrictEqual([""]);
+  expect(updateErrorsMock.mock.calls[1]).toStrictEqual([]);
   // Needs to request permissions before it can get device lists.
   expect(requestPermissionMock).toHaveBeenCalledWith({
     video: true,
@@ -603,15 +588,15 @@ test("Video config setupRecorder", async () => {
 });
 
 test("Video config setDevices", async () => {
-  video_config["addHtmlContent"]("");
+  video_config["addHtmlContent"](trial_info);
   const cam_selection_el = video_config["display_el"]?.querySelector(
-    `#${video_config["camera_selection_id"]}`,
+    `#${html_params["camera_selection_id"]}`,
   ) as HTMLSelectElement;
   const mic_selection_el = video_config["display_el"]?.querySelector(
-    `#${video_config["mic_selection_id"]}`,
+    `#${html_params["mic_selection_id"]}`,
   ) as HTMLSelectElement;
   const next_button_el = video_config["display_el"]?.querySelector(
-    `#${video_config["next_button_id"]}`,
+    `#${html_params["next_button_id"]}`,
   ) as HTMLButtonElement;
   video_config["recorder"] = new Recorder(jsPsych);
 
@@ -683,7 +668,7 @@ test("Video config setDevices", async () => {
 });
 
 test("Video config runStreamChecks throws NoStreamAccess", () => {
-  video_config["addHtmlContent"]("");
+  video_config["addHtmlContent"](trial_info);
   video_config["recorder"] = new Recorder(initJsPsych());
   jest
     .spyOn(jsPsych.pluginAPI, "getCameraRecorder")
@@ -704,7 +689,7 @@ test("Video config runStreamChecks throws NoStreamAccess", () => {
 });
 
 test("Video config runStreamChecks throws Mic Check error", async () => {
-  video_config["addHtmlContent"]("");
+  video_config["addHtmlContent"](trial_info);
   video_config["recorder"] = new Recorder(jsPsych);
 
   // Setup upstream mocks.
@@ -730,15 +715,15 @@ test("Video config runStreamChecks throws Mic Check error", async () => {
   // If the recorder mic check throws an error, then the plugin should update the error message and throw the error.
   expect(updateErrorsMock).toHaveBeenCalledTimes(2);
   expect(updateErrorsMock.mock.calls[0]).toStrictEqual([
-    video_config["checking_mic_msg"],
+    html_params["checking_mic_msg_id"],
   ]);
   expect(updateErrorsMock.mock.calls[1]).toStrictEqual([
-    video_config["setup_problem_msg"],
+    html_params["setup_problem_msg_id"],
   ]);
 });
 
 test("Video config runStreamChecks", async () => {
-  video_config["addHtmlContent"]("");
+  video_config["addHtmlContent"](trial_info);
   video_config["recorder"] = new Recorder(jsPsych);
 
   // Setup upstream mocks.
@@ -765,14 +750,14 @@ test("Video config runStreamChecks", async () => {
   // Called twice: first with "checking mic" message, then to clear that message.
   expect(updateErrorsMock).toHaveBeenCalledTimes(2);
   expect(updateErrorsMock.mock.calls[0]).toStrictEqual([
-    video_config["checking_mic_msg"],
+    html_params["checking_mic_msg_id"],
   ]);
-  expect(updateErrorsMock.mock.calls[1]).toStrictEqual([""]);
+  expect(updateErrorsMock.mock.calls[1]).toStrictEqual([]);
   expect(checkMicMock).toHaveBeenCalledTimes(1);
 });
 
 test("Video config runStreamChecks enables next button when all checks have passed", async () => {
-  video_config["addHtmlContent"]("");
+  video_config["addHtmlContent"](trial_info);
   video_config["recorder"] = new Recorder(jsPsych);
 
   // Setup upstream mocks.
@@ -840,7 +825,7 @@ test("Video config onDeviceChange event listener", async () => {
 });
 
 test("Video config device selection element on change event listener", async () => {
-  video_config["addHtmlContent"]("");
+  video_config["addHtmlContent"](trial_info);
 
   // Mock upstream functions called by device selection change event listener.
   const setDevicesMock = jest