Merge pull request #3 from visdesignlab/audioMerging

Audio merging
visdesignlab · Mar 8, 2024 · 7be19a4 · 7be19a4
2 parents 919f274 + 76158d2
commit 7be19a4
Show file tree

Hide file tree

Showing 48 changed files with 4,059 additions and 2,644 deletions.
diff --git a/.env b/.env
@@ -11,4 +11,4 @@ VITE_FIREBASE_CONFIG='
 }
 '
 VITE_STORAGE_ENGINE="firebase" # "firebase" or "localStorage" or your own custom storage engine
-VITE_RECAPTCHAV3TOKEN="6Ldz_WQpAAAAAITx1qzoXnBDQMP8Zpub5MVyMl0k"
+VITE_RECAPTCHAV3TOKEN="6Ldz_WQpAAAAAITx1qzoXnBDQMP8Zpub5MVyMl0k"
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -17,7 +17,7 @@
     "ecmaVersion": 2022,
     "sourceType": "module"
   },
-  "plugins": ["@typescript-eslint", "react"],
+  "plugins": ["@typescript-eslint", "react", "react-hooks"],
   "settings": {
     "import/resolver": {
       "node": {
@@ -32,6 +32,8 @@
     "no-restricted-exports": "off",
     "no-restricted-syntax": "off",
     "no-underscore-dangle": "off",
+    "react-hooks/rules-of-hooks": "warn",
+    "react-hooks/exhaustive-deps": "warn",
     "no-console": ["error", { "allow": ["warn", "error"] }],
     "@typescript-eslint/no-unused-expressions": [
       "error",

diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -23,7 +23,7 @@ jobs:
             cache_dir: ~/.cache/ms-playwright
 
           - project: webkit
-            os: macos-latest
+            os: macos-14
             cache_dir: ~/Library/Caches/ms-playwright
     steps:
       - uses: actions/checkout@v3

diff --git a/cors.json b/cors.json
@@ -0,0 +1,7 @@
+[
+    {
+      "origin": ["*"],
+      "method": ["GET"],
+      "maxAgeSeconds": 3600
+    }
+  ]
diff --git a/package.json b/package.json
@@ -30,13 +30,15 @@
     "@trrack/core": "^1.3.0",
     "@trrack/vis-react": "^1.5.0",
     "@types/hjson": "^2.4.3",
+    "@types/howler": "^2.2.10",
     "@types/lodash": "^4.14.199",
     "ajv": "^8.12.0",
     "arquero": "^5.2.0",
     "d3": "^7.8.2",
     "eslint-config-airbnb": "^19.0.4",
     "firebase": "^10.7.0",
     "hjson": "^3.2.2",
+    "howler": "^2.2.4",
     "localforage": "^1.10.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -45,17 +47,22 @@
     "react-markdown": "^8.0.5",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.10.0",
+    "react-spring": "^9.7.3",
+    "react-voice-recorder-player": "^1.1.0",
     "rehype-raw": "^7.0.0",
     "ts-json-schema-generator": "^1.4.1",
     "typedoc": "^0.25.4",
     "typedoc-plugin-frontmatter": "^0.0.2",
     "typedoc-plugin-markdown": "^3.17.1",
-    "uuid": "^9.0.1"
+    "use-deep-compare-effect": "^1.8.1",
+    "uuid": "^9.0.1",
+    "wavesurfer-react": "^2.2.3",
+    "wavesurfer.js": "^7.4.2"
   },
   "devDependencies": {
     "@playwright/test": "^1.35.1",
     "@types/d3": "^7.4.0",
-    "@types/react": "^18.0.24",
+    "@types/react": "^18.2.25",
     "@types/react-dom": "^18.0.8",
     "@types/uuid": "^9.0.7",
     "@typescript-eslint/eslint-plugin": "^6.13.0",

diff --git a/public/js/revisit-communicate.js b/public/js/revisit-communicate.js
diff --git a/public/stage-2/config-stage-2.json b/public/stage-2/config-stage-2.json
@@ -21,6 +21,8 @@
         "urlParticipantIdParam": "PROLIFIC_PID",
         "studyEndMsg": "**Thank you for completing the study. You may click this link and return to Prolific**: [https://app.prolific.com/submissions/complete?cc=C1FY420B](https://app.prolific.com/submissions/complete?cc=C1FY420B)"
     },
+    "recordStudyAudio": true,
+    "tasksToNotRecordAudio": ["introduction", "consent", "end"],
     "baseComponents": {
         "viral-a": {
             "instruction": "You've come across this visualization and the accompanying caption.<br>Please review the visualization and the caption, and then answer the questions below **based solely on this information**.",
@@ -428,6 +430,22 @@
         }
     },
     "components": {
+        "audioTest": {
+            "description": "Audio test",
+            "type": "react-component",
+            "path": "viz-guardrails/AudioTest.tsx",
+            "nextButtonLocation": "sidebar",
+            "nextButtonText": "Continue",
+            "response": [{
+                "id": "audioResponse",
+                "type": "radio", 
+                "required": true,
+                "hidden": true,
+                "location": "sidebar",
+                "prompt": "Found Audio",
+                "options": [{"label": "Yes", "value": "Yes"}]
+            }]
+        },
         "55b688fafdf99b26e287abd3-viral-a-n": {
             "baseComponent": "viral-a",
             "parameters": {
@@ -1400,6 +1418,7 @@
                 "caption": "Seen here is the rapid decline in infections."
             }
         },
+
         "5d49f28a3fefca00193319ac-viral-a-ss": {
             "baseComponent": "viral-a",
             "parameters": {
@@ -11434,6 +11453,7 @@
         "components": [
             "introduction",
             "consent",
+            "audioTest",
             {
                 "order": "latinSquare",
                 "numSamples": 1,

diff --git a/src/components/ConfigSwitcher.tsx b/src/components/ConfigSwitcher.tsx
@@ -52,15 +52,15 @@ function ConfigSwitcher({ globalConfig, studyConfigs }: Props) {
               </Text>
               <Text c="dimmed">{config.studyMetadata.description}</Text>
               <Text c="dimmed" ta="right" style={{ paddingRight: 5 }}>
-                <Anchor
+                {/* <Anchor
                   target="_blank"
                   onClick={(e) => e.stopPropagation()}
                   href={`${REVISIT_GITHUB_PUBLIC}${url}`}
                 >
                   View source:
                   {' '}
                   {url}
-                </Anchor>
+                </Anchor> */}
               </Text>
             </Card>
           </UnstyledButton>

diff --git a/src/components/DownloadPanel.tsx b/src/components/DownloadPanel.tsx
@@ -58,8 +58,6 @@ export function DownloadPanel({ studyConfig }: { studyConfig: StudyConfig }) {
     <Stack>
       <Button
         leftIcon={<IconCodeDots />}
-        mt="1em"
-        mr="0.5em"
         onClick={() => download(JSON.stringify(participantData, null, 2), `${baseFilename}_${participantId}.json`)}
         display="block"
       >
@@ -68,8 +66,6 @@ export function DownloadPanel({ studyConfig }: { studyConfig: StudyConfig }) {
       <Button
         disabled={!storageEngine?.isConnected()}
         leftIcon={<IconCodePlus />}
-        mt="1em"
-        mr="0.5em"
         onClick={async () => {
           if (!storageEngine) return;
           const participants = await storageEngine.getAllParticipantsData();
@@ -82,8 +78,6 @@ export function DownloadPanel({ studyConfig }: { studyConfig: StudyConfig }) {
       <Button
         disabled={!storageEngine?.isConnected()}
         leftIcon={<IconTable />}
-        mt="1em"
-        mr="0.5em"
         onClick={open}
         display="block"
       >

diff --git a/src/components/GlobalConfigParser.tsx b/src/components/GlobalConfigParser.tsx
@@ -42,12 +42,13 @@ export function GlobalConfigParser() {
   }, [globalConfig]);
 
   useEffect(() => {
-    if (globalConfig) return;
-
     fetchGlobalConfigArray().then((gc) => {
       setGlobalConfig(gc);
+      fetchStudyConfigs(gc).then((sc) => {
+        setStudyConfigs(sc);
+      });
     });
-  }, [globalConfig]);
+  }, []);
 
   return globalConfig ? (
     <BrowserRouter basename={PREFIX}>

diff --git a/src/components/NextButton.tsx b/src/components/NextButton.tsx
@@ -12,7 +12,7 @@ type Props = {
 export function NextButton({
   label = 'Next',
   disabled = false,
-  setCheckClicked = () => {},
+  setCheckClicked = () => null,
   onClick,
 }: Props) {
   const { isNextDisabled, goToNextStep } = useNextStep();