@lookit/templates 2.1.0 → 3.1.0

package/src/index.spec.ts

@@ -74,6 +74,89 @@ test("consent garden template", () => {
   expect(chsTemplate.consentVideo(trial)).toContain("Project GARDEN");
 });
 
+test("consent video with consent-recording-only template", () => {
+  const trial = getTrial({ template: "consent-recording-only" });
+  const name = "some name";
+  window.chs = {
+    study: {
+      attributes: {
+        name,
+        duration: "duration",
+      },
+    },
+  } as typeof window.chs;
+
+  expect(chsTemplate.consentVideo(trial)).toContain(
+    '<div id="consent-video-trial">',
+  );
+  expect(chsTemplate.consentVideo(trial)).toContain(
+    `You and your child will be recorded by your computer&#x27;s webcam and microphone only while providing verbal consent.`,
+  );
+  expect(chsTemplate.consentVideo(trial)).toContain(
+    `This webcam recording and other data collected on the CHS/Lookit website are sent securely to the Lookit platform.`,
+  );
+  expect(chsTemplate.consentVideo(trial)).not.toContain(
+    `You will also have the option to withdraw your recordings. If you do, only your consent recording will be kept and all other recordings will be deleted.`,
+  );
+});
+
+test("consent video with consent-recording-only template and only consent on CHS", () => {
+  const trial = getTrial({
+    template: "consent-recording-only",
+    only_consent_on_chs: true,
+  });
+  const name = "some name";
+  window.chs = {
+    study: {
+      attributes: {
+        name,
+        duration: "duration",
+      },
+    },
+  } as typeof window.chs;
+
+  expect(chsTemplate.consentVideo(trial)).toContain(
+    '<div id="consent-video-trial">',
+  );
+  expect(chsTemplate.consentVideo(trial)).toContain(
+    `You and your child will be recorded by your computer&#x27;s webcam and microphone only while providing verbal consent.`,
+  );
+  expect(chsTemplate.consentVideo(trial)).toContain(
+    `This webcam recording is sent securely to the Lookit platform.`,
+  );
+  expect(chsTemplate.consentVideo(trial)).not.toContain(
+    `You will also have the option to withdraw your recordings. If you do, only your consent recording will be kept and all other recordings will be deleted.`,
+  );
+});
+
+test("video consent param only_consent_on_chs is ignored when the template is not consent-recording-only", () => {
+  const trial = getTrial({
+    only_consent_on_chs: true,
+  });
+  const name = "some name";
+  window.chs = {
+    study: {
+      attributes: {
+        name,
+        duration: "duration",
+      },
+    },
+  } as typeof window.chs;
+
+  expect(chsTemplate.consentVideo(trial)).toContain(
+    '<div id="consent-video-trial">',
+  );
+  expect(chsTemplate.consentVideo(trial)).not.toContain(
+    `You and your child will be recorded by your computer&#x27;s webcam and microphone only while providing verbal consent.`,
+  );
+  expect(chsTemplate.consentVideo(trial)).not.toContain(
+    `This webcam recording is sent securely to the Lookit platform.`,
+  );
+  expect(chsTemplate.consentVideo(trial)).toContain(
+    `You will also have the option to withdraw your recordings. If you do, only your consent recording will be kept and all other recordings will be deleted.`,
+  );
+});
+
 test("video config template", () => {
   const trial = getTrial();
 
@@ -127,3 +210,19 @@ test("exit survey template in French", () => {
     "Nous vous demandons à nouveau en cas d'erreur lors de l'enregistrement ou de sélection par erreur d'un enfant différent au début de l'étude.",
   );
 });
+
+test("estabilshing connection template", () => {
+  const trial = getTrial();
+
+  expect(chsTemplate.establishingConnection(trial)).toContain(
+    "<div>establishing video connection, please wait...</div>",
+  );
+});
+
+test("establishing connection template in French", () => {
+  const trial = getTrial({ locale: "fr" });
+
+  expect(chsTemplate.establishingConnection(trial)).toContain(
+    "<div>en attente de connection video, veuillez attendre...</div>",
+  );
+});

package/src/index.ts

@@ -1,7 +1,8 @@
 import { consentVideo } from "./consentVideoTemplate";
+import { establishingConnection } from "./establishingConnectionTemplate";
 import { exitSurvey } from "./exitSurveyTemplate";
 import { uploadingVideo } from "./uploadingVideoTemplate";
-import { translateString } from "./utils";
+import { loadingAnimation, translateString } from "./utils";
 import { videoConfig } from "./videoConfigTemplate";
 
 export default {
@@ -10,4 +11,6 @@ export default {
   uploadingVideo,
   exitSurvey,
   translateString,
+  establishingConnection,
+  loadingAnimation,
 };

package/src/utils.ts

@@ -3,6 +3,7 @@ import i18next from "i18next";
 import ICU from "i18next-icu";
 import Yaml from "js-yaml";
 import { PluginInfo, TrialType } from "jspsych";
+import loaderPartial from "../hbs/partials/loader.hbs";
 import en_us from "../i18n/en-us.yaml";
 import eu from "../i18n/eu.yaml";
 import fr from "../i18n/fr.yaml";
@@ -93,6 +94,9 @@ Handlebars.registerHelper("t", (context, { hash }) => {
   return hash.htmlSafe ? new Handlebars.SafeString(txt) : txt;
 });
 
+// Register Handlebars partials
+Handlebars.registerPartial("loader", loaderPartial);
+
 /**
  * Public method for directly translating a string, without a corresponding
  * template.
@@ -104,3 +108,6 @@ Handlebars.registerHelper("t", (context, { hash }) => {
 export const translateString = (messageIdStr: string) => {
   return i18next.t(messageIdStr);
 };
+
+// This just renders the animation from the loader partial template. No parameters, so just export it here.
+export const loadingAnimation = Handlebars.compile(loaderPartial);