@adriansteffan/reactive 0.0.9

package/src/components/voicerecorder.tsx

@@ -0,0 +1,346 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { HiMicrophone, HiStop, HiTrash } from 'react-icons/hi2';
+
+interface AudioVisualizerProps {
+  stream: MediaStream;
+}
+
+interface RecordingData {
+  blob: Blob;
+  url: string;
+  timestamp: string;
+}
+
+// I quickly AI-genned this viz so that the participants have some feedback if their audio is being picked up - probably highly inaccurate, but that should not matter at all
+const AudioVisualizer: React.FC<AudioVisualizerProps> = ({ stream }) => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const animationRef = useRef<number | null>(null);
+  const analyserRef = useRef<AnalyserNode | null>(null);
+  const previousDataRef = useRef<number[]>([]);
+
+  useEffect(() => {
+    if (!stream || !canvasRef.current) return;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    const analyser = audioContext.createAnalyser();
+    const source = audioContext.createMediaStreamSource(stream);
+
+    // Increased FFT size for smoother data
+    analyser.fftSize = 2048;
+    source.connect(analyser);
+    analyserRef.current = analyser;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d', { alpha: false });
+    if (!ctx) return;
+
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = 'high';
+
+    const dpr = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    ctx.scale(dpr, dpr);
+
+    canvas.style.width = `${rect.width}px`;
+    canvas.style.height = `${rect.height}px`;
+
+    const dataArray = new Uint8Array(analyser.frequencyBinCount);
+    previousDataRef.current = Array(analyser.frequencyBinCount).fill(128);
+
+    // Enhanced smoothing function with weighted average
+    const smoothValue = (current: number, previous: number) => {
+      const weight = 0.08; // Lower = smoother, higher = more responsive
+      return previous + (current - previous) * weight;
+    };
+
+    // Function to compute running average for additional smoothing
+    const averageValues = (data: number[], windowSize: number = 3) => {
+      const result = new Array(data.length).fill(0);
+
+      for (let i = 0; i < data.length; i++) {
+        let sum = 0;
+        let count = 0;
+
+        for (
+          let j = Math.max(0, i - windowSize);
+          j < Math.min(data.length, i + windowSize + 1);
+          j++
+        ) {
+          sum += data[j];
+          count++;
+        }
+
+        result[i] = sum / count;
+      }
+
+      return result;
+    };
+
+    const draw = () => {
+      const width = rect.width;
+      const height = rect.height;
+      const centerY = height / 2;
+
+      animationRef.current = requestAnimationFrame(draw);
+      analyser.getByteTimeDomainData(dataArray);
+
+      // Apply initial smoothing
+      const smoothedData = Array.from(dataArray).map((value, i) =>
+        smoothValue(value, previousDataRef.current[i]),
+      );
+
+      // Apply running average smoothing
+      const averagedData = averageValues(smoothedData);
+
+      // Update previous data
+      previousDataRef.current = averagedData;
+
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, width * dpr, height * dpr);
+
+      // Draw the center line
+      ctx.beginPath();
+      ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
+      ctx.lineWidth = 1;
+      ctx.moveTo(0, centerY);
+      ctx.lineTo(width, centerY);
+      ctx.stroke();
+
+      // Draw waveform
+      ctx.beginPath();
+      ctx.lineWidth = 2;
+      ctx.strokeStyle = 'rgba(0, 0, 0, 0.85)';
+
+      const skipPoints = 4;
+      const points: [number, number][] = [];
+
+      for (let i = 0; i < averagedData.length; i += skipPoints) {
+        const x = (i / averagedData.length) * width;
+        const normalizedValue = (averagedData[i] - 128) / 128;
+        const y = centerY + normalizedValue * height * 4.0;
+        points.push([x, y]);
+      }
+
+      // Draw smooth curve through points
+      if (points.length > 0) {
+        ctx.moveTo(points[0][0], points[0][1]);
+
+        for (let i = 1; i < points.length - 2; i++) {
+          const xc = (points[i][0] + points[i + 1][0]) / 2;
+          const yc = (points[i][1] + points[i + 1][1]) / 2;
+          ctx.quadraticCurveTo(points[i][0], points[i][1], xc, yc);
+        }
+
+        // For the last two points
+        if (points.length > 2) {
+          const last = points.length - 1;
+          ctx.quadraticCurveTo(
+            points[last - 1][0],
+            points[last - 1][1],
+            points[last][0],
+            points[last][1],
+          );
+        }
+      }
+
+      ctx.stroke();
+    };
+
+    draw();
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+      source.disconnect();
+      audioContext.close();
+    };
+  }, [stream]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={300}
+      height={60}
+      className='mx-auto rounded-lg bg-white shadow-sm'
+    />
+  );
+};
+
+export const VoiceRecorder = ({
+  question,
+  handleSaveVoiceData,
+  handleDiscardVoiceData,
+}: {
+  question: {
+    value: RecordingData | null;
+  };
+  handleSaveVoiceData: (data: object) => void;
+  handleDiscardVoiceData: () => void;
+}) => {
+  const [isRecording, setIsRecording] = useState<boolean>(false);
+  const [audioUrl, setAudioUrl] = useState<string | null>(null);
+  const [audioStream, setAudioStream] = useState<MediaStream | null>(null);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const chunksRef = useRef<BlobPart[]>([]);
+
+  const startRecording = async () => {
+    try {
+      /*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*/
+      const deviceId = (window as any).audioInputId;
+      const constraints: MediaStreamConstraints = {
+        audio: deviceId
+          ? {
+              deviceId: { exact: deviceId },
+            }
+          : true,
+      };
+
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+
+      setAudioStream(stream);
+      mediaRecorderRef.current = new MediaRecorder(stream);
+
+      chunksRef.current = [];
+
+      mediaRecorderRef.current.ondataavailable = (e: BlobEvent) => {
+        if (e.data.size > 0) {
+          chunksRef.current.push(e.data);
+        }
+      };
+
+      mediaRecorderRef.current.onstop = () => {
+        const blob = new Blob(chunksRef.current, { type: 'audio/webm' });
+        const url = URL.createObjectURL(blob);
+        setAudioUrl(url);
+        setAudioStream(null);
+        saveRecording(blob, url);
+      };
+
+      mediaRecorderRef.current.start();
+
+      setIsRecording(true);
+    } catch (err) {
+      console.error('Error accessing microphone:', err);
+    }
+  };
+
+  const stopRecording = () => {
+    if (mediaRecorderRef.current && isRecording) {
+      mediaRecorderRef.current.stop();
+      mediaRecorderRef.current.stream.getTracks().forEach((track) => track.stop());
+      setIsRecording(false);
+    }
+  };
+
+  const saveRecording = async (blob: Blob, url: string) => {
+    if (blob && url) {
+      const base64Data = await new Promise<string>((resolve) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          // Remove data URL prefix (e.g., "data:audio/webm;base64,")
+          const base64 = reader.result?.toString().split(',')[1] || '';
+          resolve(base64);
+        };
+        reader.readAsDataURL(blob);
+      });
+
+      handleSaveVoiceData({
+        blob: blob,
+        // dont change this type, since the upload function depends on it while looking for audio. we might want to refactor this at some point
+        type: 'audiorecording',
+        url: url,
+        data64: base64Data,
+        timestamp: new Date().toISOString(),
+      });
+    }
+  };
+
+  const discardRecording = () => {
+    if (audioUrl) {
+      URL.revokeObjectURL(audioUrl);
+    }
+    setAudioUrl(null);
+    question.value = null;
+    handleDiscardVoiceData();
+  };
+
+  return (
+    <div className='flex flex-col items-center space-y-4 p-4 bg-white'>
+      {/* Recording button */}
+      {!audioUrl && (
+        <button
+          onClick={isRecording ? stopRecording : startRecording}
+          className={`flex items-center justify-center space-x-2 p-4 rounded-full border-2 border-black shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none cursor-pointer
+              ${isRecording ? 'bg-red-500 hover:bg-red-600' : ''} 
+              text-white transition-colors duration-200`}
+          aria-label={isRecording ? 'Stop Recording' : 'Start Recording'}
+        >
+          {isRecording ? (
+            <HiStop className='w-6 h-6' />
+          ) : (
+            <HiMicrophone className='w-6 h-6 text-black' />
+          )}
+        </button>
+      )}
+
+      {/* Audio visualizer */}
+      {isRecording && audioStream && (
+        <div className='w-full max-w-md mx-auto'>
+          <AudioVisualizer stream={audioStream} />
+        </div>
+      )}
+
+      {/* Recording status */}
+      {isRecording && (
+        <div className='flex items-center space-x-2'>
+          <div className='w-3 h-3 bg-red-500 rounded-full animate-pulse'></div>
+          <span className='text-sm text-black'>Recording...</span>
+        </div>
+      )}
+
+      {/* Audio player and action buttons */}
+      {audioUrl && !isRecording && (
+        <div className='flex flex-col items-center space-y-4 w-full max-w-md'>
+          <audio controls preload='none' className='w-full' playsInline>
+            <source src={audioUrl} type='audio/mp4' />
+            <source src={audioUrl} type='audio/webm' />
+            Your browser does not support the audio element.
+          </audio>
+
+          <div className='flex space-x-4'>
+            <button
+              onClick={discardRecording}
+              className='border-2 border-black shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none cursor-pointer flex items-center space-x-2 px-4 py-2 text-black
+                        rounded-xl transition-colors duration-200'
+            >
+              <HiTrash className='w-4 h-4' />
+              <span>Discard</span>
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+
+
+export default function VoicerecorderQuestionComponent({
+  setValue,
+}: {
+  setValue: (data: object | null) => void;
+}) {
+  return (
+    <VoiceRecorder
+      question={{ value: null }}
+      handleSaveVoiceData={(data) => setValue(data)}
+      handleDiscardVoiceData={() => setValue(null)}
+    />
+  );
+}

package/src/index.css

@@ -0,0 +1,74 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+:root {
+  --font-atkinson: 'Atkinson Hyperlegible', system-ui, sans-serif;
+}
+
+* {
+  -webkit-touch-callout: none;
+}
+
+@layer base {
+  body {
+    @apply select-none;
+  }
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  src: url('/Atkinson_Hyperlegible/AtkinsonHyperlegible-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  src: url('/Atkinson_Hyperlegible/AtkinsonHyperlegible-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  src: url('/Atkinson_Hyperlegible/AtkinsonHyperlegible-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  src: url('/Atkinson_Hyperlegible/AtkinsonHyperlegible-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+}
+
+/* customization for the surveyjs elements - a bit hacky and broken*/
+.sd-root-modern {
+  background-color: white !important;
+  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
+  background-size: 16px 16px;
+  position: relative; /* Make sure position is set for proper rendering */
+  font-family: 'Atkinson Hyperlegible', sans-serif; /* Added this line */
+}
+
+.sd-root-modern * {
+  font-family: 'Atkinson Hyperlegible', sans-serif;
+}
+
+/* for the rating group panel, maybe we can move that into the component at some point*/
+.sd-row,
+.sd-clearfix {
+  padding-bottom: 20px !important;
+}
+
+/* fix pet peeve in surveyjs */
+@media (max-width: 639px) {
+  .sd-imagepicker__item--inline {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 10px;
+  }
+}

package/src/mod.tsx

@@ -0,0 +1,14 @@
+import './index.css';
+import Text from './components/text';
+import MicCheck from './components/microphonecheck';
+import Quest from './components/quest';
+import Upload from './components/upload';
+import ExperimentProvider from './components/experimentprovider';
+import Experiment from './components/experiment';
+import { shuffle, BaseComponentProps, ExperimentConfig } from './utils/common';
+import MasterMindleWrapper from './components/mastermindlewrapper';
+
+export { Text, MicCheck, Quest, Upload, MasterMindleWrapper, Experiment, ExperimentProvider, shuffle };
+export type { BaseComponentProps, ExperimentConfig };
+export * from './utils/common';
+

package/src/utils/common.ts

@@ -0,0 +1,80 @@
+export function now() {
+  return Math.round(performance.now());
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function shuffle(array: any[]) {
+  for (let i = array.length - 1; i >= 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+// Generic type for all data structures
+export interface StudyEvent {
+  index: number;
+  type: string;
+  name: string;
+  data: any;
+  start: number;
+  end: number;
+  duration: number;
+}
+
+export interface FileUpload {
+  filename: string;
+  content: string;
+  encoding: 'base64' | 'utf8';
+}
+
+export interface ExperimentConfig {
+  showProgressBar: boolean;
+}
+
+export interface BaseComponentProps {
+  next: (data: object) => void;
+  data?: object;
+  metaData?: object;
+}
+
+type ParamType = 'string' | 'number' | 'boolean' | 'array' | 'json';
+type ParamValue<T extends ParamType> = T extends 'number'
+  ? number | undefined
+  : T extends 'boolean'
+    ? boolean | undefined
+    : T extends 'array' | 'json'
+      ? any | undefined
+      : string | undefined;
+
+export function getParam<T extends ParamType>(
+  name: string,
+  defaultValue: ParamValue<T> | undefined,
+  type: T = 'string' as T,
+): ParamValue<T> | undefined {
+  const value = new URLSearchParams(window.location.search).get(name);
+  if (!value) return defaultValue;
+  if (value.toLowerCase() === 'undefined') return undefined;
+
+  const conversions: Record<ParamType, (v: string) => any> = {
+    string: (v) => v,
+    number: (v) => Number(v) || defaultValue,
+    boolean: (v) => v.toLowerCase() === 'true',
+    array: (v) => {
+      try {
+        return JSON.parse(v);
+      } catch {
+        return defaultValue;
+      }
+    },
+    json: (v) => {
+      try {
+        return JSON.parse(v);
+      } catch {
+        return defaultValue;
+      }
+    },
+  };
+
+  return conversions[type](value);
+}

package/src/utils/request.ts

@@ -0,0 +1,25 @@
+const BACKEND_ROUTE = "/backend";
+
+export async function post(endpoint: string, body: object | FormData) {
+  if (body instanceof FormData) {
+    return await fetch(`${BACKEND_ROUTE}${endpoint}`, {
+      method: 'POST',
+      body,
+    });
+  } else {
+    return fetch(`${BACKEND_ROUTE}${endpoint}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+  }
+}
+
+export async function get(endpoint: string) {
+  const res = await fetch(`${BACKEND_ROUTE}${endpoint}`);
+  return res;
+}
+
+export async function getJson(endpoint: string) {
+  return await (await get(endpoint)).json();
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tailwind.config.js

@@ -0,0 +1,33 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './dist/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    fontFamily: {
+      sans: ['Atkinson Hyperlegible', 'sans-serif'],
+      atkinson: ['Atkinson Hyperlegible', 'sans-serif'],
+    },
+    extend: {
+      keyframes: {
+        slideDown: {
+          '0%': {
+            transform: 'translateY(-10px)',
+            opacity: '0',
+          },
+          '100%': {
+            transform: 'translateY(0)',
+            opacity: '1',
+          },
+        },
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+      },
+      animation: {
+        slideDown: 'slideDown 0.8s ease-out forwards',
+        fadeIn: 'fadeIn 0.5s ease-out forwards',
+      },
+    },
+  },
+  plugins: [],
+};

package/template/.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.git
+*.log
+data/

package/template/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true, node: true, commonjs: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

package/template/.prettierrc

@@ -0,0 +1,5 @@
+{
+    "printWidth": 100,
+    "jsxSingleQuote": true,
+    "singleQuote": true
+}

package/template/Dockerfile

@@ -0,0 +1,25 @@
+FROM node:20-alpine as frontend-builder
+WORKDIR /app
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+RUN npm run build
+
+
+FROM node:20-alpine
+WORKDIR /app
+
+COPY backend/package*.json ./
+RUN npm install
+
+COPY backend/ ./
+RUN npm run build
+RUN npm install -g pm2
+
+COPY --from=frontend-builder /app/dist ./static
+
+EXPOSE 8001
+
+CMD ["npx", "pm2-runtime", "./dist/backend.js"]