@lookit/record 0.0.3

package/src/consentVideo.spec.ts

@@ -0,0 +1,274 @@
+import { LookitWindow } from "@lookit/data/dist/types";
+import Handlebars from "handlebars";
+import { initJsPsych, PluginInfo, TrialType } from "jspsych";
+import consentVideoTrial from "../templates/consent-video-trial.hbs";
+import recordFeed from "../templates/record-feed.hbs";
+import { VideoConsentPlugin } from "./consentVideo";
+import {
+  ButtonNotFoundError,
+  ImageNotFoundError,
+  VideoContainerNotFoundError,
+} from "./errors";
+import Recorder from "./recorder";
+
+declare const window: LookitWindow;
+
+jest.mock("./recorder");
+
+test("Instantiate recorder", () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+  expect(plugin["recorder"]).toBeDefined();
+});
+
+test("Trial", () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+  const display = document.createElement("div");
+  const trial = { locale: "en-us" } as unknown as TrialType<PluginInfo>;
+
+  window.chs = {
+    study: {
+      attributes: {
+        name: "name",
+        duration: "duration",
+      },
+    },
+  } as typeof window.chs;
+
+  plugin["recordFeed"] = jest.fn();
+  plugin["recordButton"] = jest.fn();
+  plugin["stopButton"] = jest.fn();
+  plugin["playButton"] = jest.fn();
+  plugin["nextButton"] = jest.fn();
+
+  plugin.trial(display, trial);
+
+  expect(plugin["recordFeed"]).toHaveBeenCalledTimes(1);
+  expect(plugin["recordButton"]).toHaveBeenCalledTimes(1);
+  expect(plugin["stopButton"]).toHaveBeenCalledTimes(1);
+  expect(plugin["playButton"]).toHaveBeenCalledTimes(1);
+  expect(plugin["nextButton"]).toHaveBeenCalledTimes(1);
+});
+
+test("GetVideoContainer error when no container", () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+  expect(() =>
+    plugin["getVideoContainer"](document.createElement("div")),
+  ).toThrow(VideoContainerNotFoundError);
+});
+
+test("GetVideoContainer", () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+  const display = document.createElement("div");
+
+  display.innerHTML = `<div id="${plugin["video_container_id"]}"></div>`;
+
+  const html = plugin["getVideoContainer"](display).outerHTML;
+  expect(html).toBe(`<div id="lookit-jspsych-video-container"></div>`);
+});
+
+test("recordFeed", () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+  const display = document.createElement("div");
+
+  display.innerHTML = `<div id="${plugin["video_container_id"]}"><img id="record-icon"></div>`;
+  plugin["getVideoContainer"] = jest.fn();
+  plugin["recordFeed"](display);
+
+  expect(display.innerHTML).toContain(
+    `<img id="record-icon" style="visibility: hidden;">`,
+  );
+  expect(Recorder.prototype.insertRecordFeed).toHaveBeenCalledTimes(1);
+});
+
+test("playbackFeed", () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+  const display = document.createElement("div");
+  const vidContainer = "some video container";
+
+  plugin["getVideoContainer"] = jest.fn().mockReturnValue(vidContainer);
+  plugin["onEnded"] = jest.fn().mockReturnValue("some func");
+  plugin["playbackFeed"](display);
+
+  expect(Recorder.prototype.insertPlaybackFeed).toHaveBeenCalledWith(
+    vidContainer,
+    "some func",
+  );
+});
+
+test("onEnded", () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+  const display = document.createElement("div");
+  const play = document.createElement("button");
+  const next = document.createElement("button");
+  const record = document.createElement("button");
+
+  display.innerHTML = Handlebars.compile(consentVideoTrial)({});
+  plugin["recordFeed"] = jest.fn();
+  plugin["getButton"] = jest.fn().mockImplementation((_display, id) => {
+    switch (id) {
+      case "play":
+        return play;
+      case "next":
+        return next;
+      case "record":
+        return record;
+    }
+
+    if (id === "play") {
+      return play;
+    } else if (id === "next") {
+      return next;
+    }
+    return;
+  });
+
+  plugin["onEnded"](display)();
+
+  expect(plugin["recordFeed"]).toHaveBeenCalledWith(display);
+  expect(plugin["recordFeed"]).toHaveBeenCalledTimes(1);
+  expect(plugin["getButton"]).toHaveBeenCalledTimes(3);
+  expect(play.disabled).toBeFalsy();
+  expect(next.disabled).toBeFalsy();
+});
+
+test("getButton", () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+  const display = document.createElement("div");
+
+  display.innerHTML = Handlebars.compile(consentVideoTrial)({});
+
+  expect(plugin["getButton"](display, "next").id).toStrictEqual("next");
+});
+
+test("getButton error when button not found", () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+  const display = document.createElement("div");
+
+  expect(() => plugin["getButton"](display, "next")).toThrow(
+    ButtonNotFoundError,
+  );
+});
+
+test("getImg error when image not found", () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+  const display = document.createElement("div");
+  expect(() => plugin["getImg"](display, "record-icon")).toThrow(
+    ImageNotFoundError,
+  );
+});
+
+test("recordButton", async () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+  const display = document.createElement("div");
+
+  display.innerHTML =
+    Handlebars.compile(consentVideoTrial)({}) +
+    Handlebars.compile(recordFeed)({});
+
+  plugin["recordButton"](display);
+
+  // Trigger event
+  const click = new Event("click");
+  await display
+    .querySelector<HTMLButtonElement>("button#record")!
+    .dispatchEvent(click);
+
+  // Check for query length
+  const disabledButtons = display.querySelectorAll<HTMLButtonElement>(
+    "button#record, button#play, button#next",
+  );
+  expect(disabledButtons.length).toStrictEqual(3);
+
+  // Check for buttons to be disabled.
+  disabledButtons.forEach((button) => {
+    expect(button.disabled).toBeTruthy();
+  });
+
+  // Stop button should not be disabled.
+  expect(
+    display.querySelector<HTMLButtonElement>("button#stop")!.disabled,
+  ).toBeFalsy();
+
+  // Show record record icon
+  expect(
+    display.querySelector<HTMLImageElement>("img#record-icon")!.style
+      .visibility,
+  ).toStrictEqual("visible");
+
+  // Start recorder
+  expect(Recorder.prototype.start).toHaveBeenCalledTimes(1);
+  expect(Recorder.prototype.start).toHaveBeenCalledWith("consent");
+});
+
+test("playButton", () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+  const display = document.createElement("div");
+
+  plugin["playbackFeed"] = jest.fn();
+
+  display.innerHTML = Handlebars.compile(consentVideoTrial)({});
+
+  plugin["playButton"](display);
+
+  const playButton = display.querySelector<HTMLButtonElement>("button#play");
+
+  playButton!.dispatchEvent(new Event("click"));
+
+  expect(playButton!.disabled).toBeTruthy();
+  expect(plugin["playbackFeed"]).toHaveBeenCalledTimes(1);
+  expect(plugin["playbackFeed"]).toHaveBeenCalledWith(display);
+});
+
+test("stopButton", async () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+  const display = document.createElement("div");
+
+  display.innerHTML =
+    Handlebars.compile(consentVideoTrial)({
+      video_container_id: plugin["video_container_id"],
+    }) + Handlebars.compile(recordFeed)({});
+
+  plugin["recordFeed"] = jest.fn();
+  plugin["stopButton"](display);
+
+  const stopButton = display.querySelector<HTMLButtonElement>("button#stop");
+  await stopButton!.dispatchEvent(new Event("click"));
+
+  display
+    .querySelectorAll<HTMLButtonElement>("button#record, button#play")
+    .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);
+});
+
+test("nextButton", () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+  const display = document.createElement("div");
+
+  display.innerHTML = Handlebars.compile(consentVideoTrial)({});
+  jsPsych.finishTrial = jest.fn();
+
+  plugin["nextButton"](display);
+  display
+    .querySelector<HTMLButtonElement>("button#next")!
+    .dispatchEvent(new Event("click"));
+
+  expect(jsPsych.finishTrial).toHaveBeenCalledTimes(1);
+});

package/src/consentVideo.ts

@@ -0,0 +1,284 @@
+import { LookitWindow } from "@lookit/data/dist/types";
+import Handlebars from "handlebars";
+import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
+import { version } from "../package.json";
+import consentDocTemplate from "../templates/consent-document.hbs";
+import consentVideoTrialTemplate from "../templates/consent-video-trial.hbs";
+import {
+  ButtonNotFoundError,
+  ImageNotFoundError,
+  VideoContainerNotFoundError,
+} from "./errors";
+import Recorder from "./recorder";
+import { initI18nAndTemplates } from "./utils";
+
+declare const window: LookitWindow;
+
+const info = <const>{
+  name: "consent-video",
+  version,
+  parameters: {
+    template: { type: ParameterType.STRING, default: "consent_005" },
+    locale: { type: ParameterType.STRING, default: "en-us" },
+    additional_video_privacy_statement: {
+      type: ParameterType.STRING,
+      default: "",
+    },
+    datause: { type: ParameterType.STRING, default: "" },
+    gdpr: { type: ParameterType.BOOL, default: false },
+    gdpr_personal_data: { type: ParameterType.STRING, default: "" },
+    gdpr_sensitive_data: { type: ParameterType.STRING, default: "" },
+    PIName: { type: ParameterType.STRING, default: "" },
+    include_databrary: { type: ParameterType.BOOL, default: false },
+    institution: { type: ParameterType.STRING, default: "" },
+    PIContact: { type: ParameterType.STRING, default: "" },
+    payment: { type: ParameterType.STRING, default: "" },
+    private_level_only: { type: ParameterType.BOOL, default: false },
+    procedures: { type: ParameterType.STRING, default: "" },
+    purpose: { type: ParameterType.STRING, default: "" },
+    research_rights_statement: { type: ParameterType.STRING, default: "" },
+    risk_statement: { type: ParameterType.STRING, default: "" },
+    voluntary_participation: { type: ParameterType.STRING, default: "" },
+    purpose_header: { type: ParameterType.STRING, default: "" },
+    procedures_header: { type: ParameterType.STRING, default: "" },
+    participation_header: { type: ParameterType.STRING, default: "" },
+    benefits_header: { type: ParameterType.STRING, default: "" },
+    risk_header: { type: ParameterType.STRING, default: "" },
+    summary_statement: { type: ParameterType.STRING, default: "" },
+    additional_segments: {
+      type: ParameterType.COMPLEX,
+      array: true,
+      nested: {
+        title: {
+          type: ParameterType.STRING,
+          default: "",
+        },
+      },
+      text: {
+        type: ParameterType.STRING,
+        default: "",
+      },
+    },
+    prompt_all_adults: { type: ParameterType.BOOL, default: false },
+    prompt_only_adults: { type: ParameterType.BOOL, default: false },
+    consent_statement_text: { type: ParameterType.STRING, default: "" },
+    omit_injury_phrase: { type: ParameterType.BOOL, default: false },
+  },
+};
+type Info = typeof info;
+
+/** The video consent plugin. */
+export class VideoConsentPlugin implements JsPsychPlugin<Info> {
+  public static readonly info = info;
+  private readonly recorder: Recorder;
+  private readonly video_container_id = "lookit-jspsych-video-container";
+
+  /**
+   * Instantiate video consent plugin.
+   *
+   * @param jsPsych - JsPsych object
+   */
+  public constructor(private readonly jsPsych: JsPsych) {
+    this.jsPsych = jsPsych;
+    this.recorder = new Recorder(this.jsPsych);
+  }
+
+  /**
+   * Create/Show trial view.
+   *
+   * @param display - HTML element for experiment.
+   * @param trial - Trial data including user supplied parameters.
+   */
+  public trial(display: HTMLElement, trial: TrialType<Info>) {
+    const { video_container_id } = this;
+    const experiment = window.chs.study.attributes;
+    const { PIName, PIContact } = trial;
+
+    // Initialize both i18next and Handlebars
+    initI18nAndTemplates(trial);
+
+    // Render left side (consent text)
+    const consent = Handlebars.compile(consentDocTemplate)({
+      ...trial,
+      name: PIName,
+      contact: PIContact,
+      experiment,
+    });
+
+    // Render whole document with above consent text
+    const consentVideoTrial = Handlebars.compile(consentVideoTrialTemplate)({
+      ...trial,
+      consent,
+      video_container_id,
+    });
+
+    // Add rendered document to display HTML
+    display.insertAdjacentHTML("afterbegin", consentVideoTrial);
+
+    // Video recording HTML
+    this.recordFeed(display);
+    this.recordButton(display);
+    this.stopButton(display);
+    this.playButton(display);
+    this.nextButton(display);
+  }
+  /**
+   * Retrieve video container element.
+   *
+   * @param display - HTML element for experiment.
+   * @returns Video container
+   */
+  private getVideoContainer(display: HTMLElement) {
+    const videoContainer = display.querySelector<HTMLDivElement>(
+      `div#${this.video_container_id}`,
+    );
+
+    if (!videoContainer) {
+      throw new VideoContainerNotFoundError();
+    }
+
+    return videoContainer;
+  }
+
+  /**
+   * Add webcam feed to HTML.
+   *
+   * @param display - HTML element for experiment.
+   */
+  private recordFeed(display: HTMLElement) {
+    const videoContainer = this.getVideoContainer(display);
+    this.recorder.insertRecordFeed(videoContainer);
+    this.getImg(display, "record-icon").style.visibility = "hidden";
+  }
+
+  /**
+   * Playback Feed
+   *
+   * @param display - JsPsych display HTML element.
+   */
+  private playbackFeed(display: HTMLElement) {
+    const videoContainer = this.getVideoContainer(display);
+    this.recorder.insertPlaybackFeed(videoContainer, this.onEnded(display));
+  }
+
+  /**
+   * Put back the webcam feed once the video recording has ended. This is used
+   * with the "ended" Event.
+   *
+   * @param display - JsPsych display HTML element.
+   * @returns Event function
+   */
+  private onEnded(display: HTMLElement) {
+    return () => {
+      const next = this.getButton(display, "next");
+      const play = this.getButton(display, "play");
+      const record = this.getButton(display, "record");
+
+      this.recordFeed(display);
+      next.disabled = false;
+      play.disabled = false;
+      record.disabled = false;
+    };
+  }
+
+  /**
+   * Retrieve button element from DOM.
+   *
+   * @param display - HTML element for experiment.
+   * @param id - Element id
+   * @returns Button element
+   */
+  private getButton(
+    display: HTMLElement,
+    id: "play" | "next" | "stop" | "record",
+  ) {
+    const btn = display.querySelector<HTMLButtonElement>(`button#${id}`);
+    if (!btn) {
+      throw new ButtonNotFoundError(id);
+    }
+    return btn;
+  }
+
+  /**
+   * Select and return the image element.
+   *
+   * @param display - HTML element for experiment.
+   * @param id - ID string of Image element
+   * @returns Image Element
+   */
+  private getImg(display: HTMLElement, id: "record-icon") {
+    const img = display.querySelector<HTMLImageElement>(`img#${id}`);
+
+    if (!img) {
+      throw new ImageNotFoundError(id);
+    }
+
+    return img;
+  }
+
+  /**
+   * Add record button to HTML.
+   *
+   * @param display - HTML element for experiment.
+   */
+  private recordButton(display: HTMLElement) {
+    const record = this.getButton(display, "record");
+    const stop = this.getButton(display, "stop");
+    const play = this.getButton(display, "play");
+    const next = this.getButton(display, "next");
+
+    record.addEventListener("click", async () => {
+      record.disabled = true;
+      stop.disabled = false;
+      play.disabled = true;
+      next.disabled = true;
+      this.getImg(display, "record-icon").style.visibility = "visible";
+      await this.recorder.start("consent");
+    });
+  }
+
+  /**
+   * Set up play button to playback last recorded video.
+   *
+   * @param display - HTML element for experiment.
+   */
+  private playButton(display: HTMLElement) {
+    const play = this.getButton(display, "play");
+    const record = this.getButton(display, "record");
+
+    play.addEventListener("click", () => {
+      play.disabled = true;
+      record.disabled = true;
+      this.playbackFeed(display);
+    });
+  }
+
+  /**
+   * Add stop button to HTML.
+   *
+   * @param display - HTML element for experiment.
+   */
+  private stopButton(display: HTMLElement) {
+    const stop = this.getButton(display, "stop");
+    const record = this.getButton(display, "record");
+    const play = this.getButton(display, "play");
+
+    stop.addEventListener("click", async () => {
+      stop.disabled = true;
+      record.disabled = false;
+      play.disabled = false;
+      await this.recorder.stop();
+      this.recorder.reset();
+      this.recordFeed(display);
+    });
+  }
+  /**
+   * Add next button to HTML.
+   *
+   * @param display - HTML element for experiment.
+   */
+  private nextButton(display: HTMLElement) {
+    const next = this.getButton(display, "next");
+    next.addEventListener("click", () => this.jsPsych.finishTrial());
+  }
+}

package/src/environment.d.ts

@@ -0,0 +1,10 @@
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      LOCAL_DOWNLOAD?: string;
+      DEBUG?: string;
+    }
+  }
+}
+
+export {};