Video consent trial (#52)

* Remove unnecessary json file
* Don't commit DS_Store files
* Move data package to peer dependencies.
* Update TS config for record package
* Initial features for consent video trial.
* Move/New templates
* Rename error file to "errors"
* Rename survey consent file
* Add style changes
* Expose consent video plugin
* Update recorder start
* Change exposed survey trial names
* Remove record as a dependency
* Update to recorder class
* Add error classes
* Move scss to record package
* Play is active after playback.
* Remove unused template
* Update border for play icon
* Update package lock
* Change to Rollup processing images
* Update tests
* changeset
* Rename consent video plugin to VideoConsentPlugin
* Fix odd double import
* Update docs after renaming exposed classes
* Uncomment wrongly commented tests.

.changeset/large-deers-deny.md

@@ -0,0 +1,8 @@
+---
+"@lookit/surveys": patch
+"@lookit/record": patch
+"@lookit/style": patch
+"@lookit/data": patch
+---
+
+Add consent video trial

.gitignore

@@ -3,4 +3,5 @@ dist
 coverage
 Procfile
 .env
-site
+site
+.DS_Store

jest.cjs

@@ -5,6 +5,7 @@ module.exports.makePackageConfig = () => {
     transform: {
       ...config.transform,
       "^.+\\.mustache$": "<rootDir>/../../jest.text.loader.js",
+      "^.+\\.svg$": "<rootDir>/../../jest.text.loader.js",
     },
     moduleNameMapper: { "@lookit/data": "<rootDir>/../../packages/data/src" },
     coverageThreshold: {

packages/data/src/errors.ts

@@ -37,3 +37,11 @@ export class AWSConfigError extends Error {
     this.name = "AWSConfigError";
   }
 }
+/** Error for when URL from Django API is not formatted as expected. */
+export class URLWrongError extends Error {
+  /** Throw error when URL is not formatted correctly. */
+  public constructor() {
+    super("URL is different than expected.");
+    this.name = "URLWrongError";
+  }
+}

packages/data/src/utils.ts

@@ -1,3 +1,4 @@
+import { URLWrongError } from "./errors";
 import { ApiResponse } from "./types";
 
 const CONFIG = <const>{ url_base: "/api/v2/" };
@@ -75,6 +76,6 @@ export const getUuids = () => {
   if (locationHref.includes("studies/j/") && uuids && uuids.length === 2) {
     return { study: uuids[0], child: uuids[1] };
   } else {
-    throw new Error("URL is different than expected.");
+    throw new URLWrongError();
   }
 };

packages/record/package.json

@@ -26,19 +26,20 @@
     "test": "jest --coverage"
   },
   "dependencies": {
-    "@lookit/data": "^0.0.1",
     "auto-bind": "^5.0.1",
     "mustache": "^4.2.0"
   },
   "devDependencies": {
     "@jspsych/config": "^2.0.0",
+    "@rollup/plugin-image": "^3.0.3",
     "@types/audioworklet": "^0.0.60",
     "@types/mustache": "^4.2.5",
     "rollup-plugin-dotenv": "^0.5.1",
     "rollup-plugin-string-import": "^1.2.4",
     "typescript": "^5.6.2"
   },
   "peerDependencies": {
+    "@lookit/data": "^0.0.1",
     "jspsych": "^8.0.2"
   }
 }

packages/record/rollup.config.mjs

@@ -1,3 +1,4 @@
+import image from "@rollup/plugin-image";
 import dotenv from "rollup-plugin-dotenv";
 import { importAsString } from "rollup-plugin-string-import";
 import { makeRollupConfig } from "../../rollup.mjs";
@@ -13,6 +14,8 @@ export default makeRollupConfig("chsRecord").map((config) => {
       importAsString({
         include: ["**/*.mustache"],
       }),
+
+      image(),
     ],
   };
 });

packages/record/scss/index.scss

@@ -0,0 +1,12 @@
+img#record-icon,
+img#play-icon {
+  top: 7px;
+  left: 7px;
+  height: 25px;
+  position: absolute;
+}
+
+div#lookit-jspsych-video-container {
+  position: relative;
+  width: min-content;
+}