@adriansteffan/reactive 0.0.9

package/src/components/microphonecheck.tsx

@@ -0,0 +1,167 @@
+import { useState, useEffect } from 'react';
+import { VoiceRecorder } from './voicerecorder';
+
+interface MicrophoneDevice {
+  deviceId: string;
+  label: string;
+}
+
+export function MicrophoneSelect({
+  onMicrophoneSelect,
+}: {
+  onMicrophoneSelect: (deviceId: string) => void;
+}) {
+  const [microphones, setMicrophones] = useState<MicrophoneDevice[]>([]);
+  const [selectedMic, setSelectedMic] = useState<string>('');
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    // Request microphone permissions and get list of devices
+    navigator.mediaDevices
+      .getUserMedia({ audio: true })
+      .then(() => {
+        navigator.mediaDevices.enumerateDevices().then((devices) => {
+          const mics = devices
+            .filter((device) => device.kind === 'audioinput')
+            .map((device) => ({
+              deviceId: device.deviceId,
+              label: device.label || `Microphone ${device.deviceId.slice(0, 5)}`,
+            }));
+          setMicrophones(mics);
+
+          // Set default microphone
+          if (mics.length > 0 && !selectedMic) {
+            setSelectedMic(mics[0].deviceId);
+            onMicrophoneSelect(mics[0].deviceId);
+          }
+        });
+      })
+      .catch((err) => {
+        console.error('Error accessing microphone:', err);
+      });
+  }, [onMicrophoneSelect, selectedMic]);
+
+  const handleSelect = (deviceId: string) => {
+    setSelectedMic(deviceId);
+    onMicrophoneSelect(deviceId);
+    setIsOpen(false);
+  };
+
+  const selectedLabel =
+    microphones.find((mic) => mic.deviceId === selectedMic)?.label || 'Select Microphone';
+
+  return (
+    <div className='relative w-64 mx-auto mt-8 mb-8'>
+      {/* Selected Option Display */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`
+          w-full px-4 py-2
+          bg-white text-black
+          border-2 border-black
+          shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]
+          hover:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)]
+          active:shadow-none
+          active:translate-x-1
+          active:translate-y-1
+          transition-all
+          text-left
+          font-bold
+          ${isOpen ? 'shadow-none translate-x-1 translate-y-1' : ''}
+        `}
+      >
+        <div className='flex items-center justify-between'>
+          <span className='truncate'>{selectedLabel}</span>
+          <span className={`transition-transform ${isOpen ? 'rotate-180' : ''}`}>▼</span>
+        </div>
+      </button>
+
+      {/* Dropdown Options */}
+      {isOpen && (
+        <div className='absolute w-full mt-2 z-50'>
+          <ul
+            className={`
+            bg-white
+            border-2 border-black
+            shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]
+            max-h-60 overflow-auto
+          `}
+          >
+            {microphones.map((mic) => (
+              <li
+                key={mic.deviceId}
+                onClick={() => handleSelect(mic.deviceId)}
+                className={`
+                  px-4 py-2
+                  cursor-pointer
+                  hover:bg-black hover:text-white
+                  transition-colors
+                  ${selectedMic === mic.deviceId ? 'bg-black text-white' : ''}
+                  border-b-2 border-black last:border-b-0
+                `}
+              >
+                {mic.label}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const MicrophoneCheck = ({ next }: { next: (data: object) => void }) => {
+  const [recordingExists, setRecordingExists] = useState(false);
+
+  return (
+    <div className={`max-w-prose mx-auto mt-20 mb-20`}>
+      <article className='prose prose-2xl prose-slate text-xl text-black leading-relaxed'>
+        <h1 className='text-3xl mb-6 font-semibold'>Let's test your microphone!</h1>
+        <p>
+          In this experiment, you will need to answer some questions verbally. To make sure that we
+          don't lose your input, please select your preferred microphone using the menu below...
+        </p>
+      </article>
+      {/*This is really hacky but it works and there is a deadline, we should find a way to pass around such values in the future */}
+      {/*eslint-disable-next-line @typescript-eslint/no-explicit-any*/}
+      <MicrophoneSelect onMicrophoneSelect={(id: string) => ((window as any).audioInputId = id)} />
+
+      <article className='prose prose-2xl prose-slate text-xl text-black leading-relaxed'>
+        <p>
+          ... and use the recording button below to make a test recording of your voice. After
+          stopping the recording, you can use the play button to play back the audio.
+        </p>
+      </article>
+
+      <VoiceRecorder
+        question={{ value: null }}
+        handleSaveVoiceData={() => setRecordingExists(true)}
+        handleDiscardVoiceData={() => setRecordingExists(false)}
+      />
+
+      {recordingExists && (
+        <>
+          <article className='prose prose-2xl prose-slate text-xl text-black leading-relaxed'>
+            <p>
+              Can you hear yourself? Great! You can continue on to the next step. <br /> If you
+              can't hear your voice, try one of the other options from the list or check any
+              physical mute switches on your microphone. Be sure to also check that your computer
+              audio is turned on so you can actually listen back to your test recording!
+            </p>
+          </article>
+
+          <div className='mt-16 flex justify-center'>
+            <button
+              onClick={() => next({})}
+              className='bg-white px-8 py-3 border-2 border-black font-bold text-black text-lg rounded-xl shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none'
+            >
+              Next
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default MicrophoneCheck;

package/src/components/quest.tsx

@@ -0,0 +1,102 @@
+import { useCallback, createElement, ComponentType } from 'react';
+import { defaultV2Css, Model, Question, Serializer } from 'survey-core';
+import { ReactQuestionFactory, Survey, SurveyQuestionElementBase } from 'survey-react-ui';
+import { ContrastLight } from 'survey-core/themes';
+import 'survey-core/defaultV2.min.css';
+
+
+type ComponentsMap = {
+  [key: string]: ComponentType<any>;
+};
+
+
+const registerCustomQuestion = (name: string, component: ComponentType<any>) => {
+  
+  class CustomQuestionModel extends Question {
+    getType() {
+      return name;
+    }
+  }
+
+  Serializer.addClass(
+    name,
+    [],
+    function() {
+      return new CustomQuestionModel('');
+    },
+    'question'
+  );
+
+  // Create the question wrapper
+  class CustomQuestionWrapper extends SurveyQuestionElementBase {
+    constructor(props: any) {
+      super(props);
+      this.state = { value: this.questionBase.value };
+    }
+
+    get question() {
+      return this.questionBase;
+    }
+
+    renderElement() {
+      const Component = component;
+      return (
+        <Component
+          setValue={(val: any) => {
+            this.question.value = val;
+          }}
+        />
+      );
+    }
+  }
+
+  // Register the React component
+  ReactQuestionFactory.Instance.registerQuestion(name, (props) => {
+    return createElement(CustomQuestionWrapper, props);
+  });
+};
+
+// The main Quest component
+function Quest({ next, surveyJson, customQuestions = {} }: { 
+  next: (data: object) => void; 
+  surveyJson: object;
+  customQuestions?: ComponentsMap;
+}) {
+  
+  Object.keys(customQuestions).forEach(name => {
+    registerCustomQuestion(name, customQuestions[name]);
+  });
+
+
+  const survey = new Model({ 
+    ...surveyJson, 
+    css: { ...defaultV2Css, root: 'sd-root-modern custom-root' } 
+  });
+  survey.applyTheme(ContrastLight);
+
+  const saveResults = useCallback((sender: any) => {
+    const resultData = [];
+    for (const key in sender.data) {
+      const question = sender.getQuestionByName(key);
+      if (question) {
+        resultData.push({
+          name: key,
+          type: question.jsonObj.type,
+          value: question.value,
+        });
+      }
+    }
+    next(resultData);
+  }, [next]);
+
+  survey.onComplete.add(saveResults);
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]" />
+      <Survey model={survey} />
+    </div>
+  );
+}
+
+export default Quest;

package/src/components/text.tsx

@@ -0,0 +1,45 @@
+function Text({
+  content,
+  buttonText = 'Click me',
+  className = '',
+  next,
+  animate = false,
+}: {
+  content: React.ReactNode;
+  buttonText?: string;
+  onButtonClick?: () => void;
+  className?: string;
+  next: (newData: object) => void;
+  animate?: boolean; // new parameter
+}) {
+  const handleClick = () => {
+    next({});
+  };
+
+  return (
+    <div className={`max-w-prose mx-auto ${className} mt-20 mb-20`}>
+      <article
+        className={`prose prose-2xl prose-slate text-xl prose-h1:text-5xl text-black leading-relaxed
+            ${animate ? 'animate-slideDown opacity-0' : ''}`}
+      >
+        {content}
+      </article>
+
+      {buttonText && (
+        <div
+          className={`mt-16 flex justify-center ${animate ? 'animate-fadeIn opacity-0' : ''}`}
+          style={animate ? { animationDelay: '1s' } : {}}
+        >
+          <button
+            onClick={handleClick}
+            className='bg-white px-8 py-3 border-2 border-black font-bold text-black text-lg rounded-xl shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none'
+          >
+            {buttonText}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Text;

package/src/components/upload.tsx

@@ -0,0 +1,149 @@
+import { useCallback, useState } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { v4 as uuidv4 } from 'uuid';
+import { post } from '../utils/request';
+import { FileUpload, getParam, StudyEvent } from '../utils/common';
+import { BlobWriter, TextReader, ZipWriter } from '@zip.js/zip.js';
+
+interface UploadPayload {
+  sessionId: string;
+  files: FileUpload[];
+}
+
+interface UploadResponse {
+  status: number;
+  message?: string;
+}
+
+export default function Upload({
+  data,
+  next,
+  sessionID,
+  generateFiles,
+  uploadRaw = true,
+}: {
+  data: StudyEvent[];
+  next: () => void;
+  sessionID?: string | null;
+  generateFiles: (sessionID: string, data: StudyEvent[]) => FileUpload[];
+  uploadRaw: boolean;
+}) {
+  const [uploadState, setUploadState] = useState<'initial' | 'uploading' | 'success' | 'error'>(
+    'initial',
+  );
+  const shouldUpload = getParam('upload', true, 'boolean');
+  const shouldDownload = getParam('download', false, 'boolean');
+
+  const uploadData = useMutation({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mutationFn: async (body: any) => {
+      const response = await post('/data', body);
+      return response as UploadResponse;
+    },
+    onSuccess: (res: UploadResponse) => {
+      if (res.status === 200) {
+        setUploadState('success');
+        next();
+      } else {
+        setUploadState('error');
+      }
+    },
+    onError: () => {
+      setUploadState('error');
+    },
+  });
+
+  const downloadFiles = useCallback(async (files: FileUpload[]) => {
+    const zipWriter = new ZipWriter(new BlobWriter());
+
+    for (const file of files) {
+      await zipWriter.add(file.filename, new TextReader(file.content));
+    }
+
+    const blob = await zipWriter.close();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'study-data.zip';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, []);
+
+  const handleUpload = async () => {
+    setUploadState('uploading');
+
+    const sessionIDUpload = sessionID ?? uuidv4();
+
+    const files: FileUpload[] = generateFiles ? generateFiles(sessionIDUpload, data) : [];
+    if (uploadRaw) {
+      files.push({
+        filename: `${sessionIDUpload}.raw.json`,
+        content: JSON.stringify(data),
+        encoding: 'utf8',
+      });
+    }
+
+    try {
+      const payload: UploadPayload = {
+        sessionId: sessionIDUpload,
+        files,
+      };
+
+      if (shouldDownload) {
+        await downloadFiles(files);
+      }
+
+      if (!shouldUpload) {
+        next();
+        return;
+      }
+
+      uploadData.mutate(payload);
+    } catch (error) {
+      console.error('Error uploading:', error);
+      setUploadState('error');
+    }
+  };
+
+  return (
+    <div className='flex flex-col items-center justify-center gap-4 p-6 text-xl mt-16'>
+      {uploadState == 'initial' && (
+        <>
+          <p className=''>
+            Thank you for participating! Please click the button below to submit your data.
+          </p>
+          <button
+            onClick={handleUpload}
+            className='mt-8 bg-white px-8 py-3 border-2 border-black font-bold text-black text-lg rounded-xl shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none'
+          >
+            Submit Data
+          </button>
+        </>
+      )}
+      {uploadState == 'uploading' && (
+        <>
+          <div className='w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin'></div>
+          <p className=''>Uploading your data...</p>
+        </>
+      )}
+      {uploadState == 'success' && <></>}
+
+      {uploadState == 'error' && (
+        <>
+          <div className='text-red-500 mb-4'>
+            <p className=''>Sorry, there was an error uploading your data.</p>
+            <p>Please try again or contact the researcher.</p>
+          </div>
+          <button
+            onClick={handleUpload}
+            className='px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors'
+          >
+            Try Again
+          </button>
+        </>
+      )}
+    </div>
+  );
+}