@adriansteffan/reactive 0.0.26 → 0.0.27

package/src/components/experimentrunner.tsx

@@ -0,0 +1,387 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { ExperimentConfig, Store, Param, now } from '../utils/common';
+import { useCallback, useEffect, useMemo, useRef, useState, ComponentType } from 'react';
+import {
+  compileTimeline,
+  TimelineItem,
+  RefinedTrialData,
+  ComponentResultData,
+} from '../utils/bytecode';
+
+import Upload from './upload';
+import Text from './text';
+import PlainInput from './plaininput';
+import ProlificEnding from './prolificending';
+import Quest from './quest';
+import EnterFullscreen from './enterfullscreen';
+import ExitFullscreen from './exitfullscreen';
+import MicrophoneCheck from './microphonecheck';
+import RequestFilePermission from './mobilefilepermission';
+import CanvasBlock from './canvasblock';
+import CheckDevice from './checkdevice';
+
+import VoicerecorderQuestionComponent from './voicerecorder';
+import React from 'react';
+
+type ComponentsMap = {
+  [key: string]: ComponentType<any>;
+};
+
+const defaultComponents: ComponentsMap = {
+  Text,
+  ProlificEnding,
+  EnterFullscreen,
+  ExitFullscreen,
+  Quest,
+  Upload,
+  MicrophoneCheck,
+  PlainInput,
+  RequestFilePermission,
+  CanvasBlock,
+  CheckDevice,
+};
+
+const defaultCustomQuestions: ComponentsMap = {
+  voicerecorder: VoicerecorderQuestionComponent,
+};
+
+interface RuntimeComponentContent {
+  name?: string;
+  type: string;
+  collectRefreshRate?: boolean;
+  hideSettings?: string[] | boolean;
+  props?: Record<string, any> | ((store: Store, data: RefinedTrialData[]) => Record<string, any>);
+}
+
+function isRuntimeComponentContent(content: any): content is RuntimeComponentContent {
+  return typeof content === 'object' && content !== null && typeof content.type === 'string';
+}
+
+export default function ExperimentRunner({
+  timeline,
+  config = {
+    showProgressBar: false,
+  },
+  components = {},
+  questions = {},
+}: {
+  timeline: TimelineItem[];
+  config?: ExperimentConfig;
+  components?: ComponentsMap;
+  questions?: ComponentsMap;
+}) {
+  const trialByteCode = useMemo(() => {
+    return compileTimeline(timeline);
+  }, [timeline]);
+
+  const [instructionPointer, setInstructionPointer] = useState(0);
+  const [data, setData] = useState<RefinedTrialData[]>(() => {
+    const urlParams: Record<string, any> = {};
+    const searchParams = new URLSearchParams(window.location.search);
+    for (const [key, value] of searchParams.entries()) {
+      urlParams[key] = value;
+    }
+
+    const registry = Param.getRegistry() || [];
+
+    const params: Record<string, any> = {};
+
+    // First add URL params (these will be overwritten by registry entries if there are name collisions)
+    for (const [key, value] of Object.entries(urlParams)) {
+      params[key] = {
+        value,
+        registered: false,
+        defaultValue: undefined,
+        type: undefined,
+        description: undefined,
+      };
+    }
+
+    // Then add/overwrite with registry entries
+    for (const param of registry) {
+      params[param.name] = {
+        value:
+          param.value !== undefined ? param.value : urlParams[param.name],
+        registered: true,
+        defaultValue: param.defaultValue,
+        type: param.type,
+        description: param.description,
+      };
+    }
+
+    const initialData: ComponentResultData = {
+      index: -1,
+      trialNumber: -1,
+      start: now(),
+      end: now(),
+      duration: 0,
+      type: '',
+      name: '',
+      responseData: {
+        userAgent: navigator.userAgent,
+        params,
+      },
+    };
+    
+    return [initialData];
+  });
+
+  const [totalTrialsCompleted, setTotalTrialsCompleted] = useState(0);
+  const lastTrialEndTimeRef = useRef(now());
+  const experimentStoreRef = useRef<Store>({});
+
+  const componentsMap = { ...defaultComponents, ...components };
+  const customQuestionsMap: ComponentsMap = { ...defaultCustomQuestions, ...questions };
+
+  const progress = useMemo(() => {
+    const totalInstructions = trialByteCode.instructions.length;
+    return totalInstructions > 0 ? instructionPointer / totalInstructions : 0;
+  }, [instructionPointer, trialByteCode.instructions]);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [instructionPointer]);
+
+  function updateStore(update: Partial<Store>) {
+    experimentStoreRef.current = { ...experimentStoreRef.current, ...update };
+  }
+
+  function next(
+    componentResponseData?: object,
+    actualStartTime?: number,
+    actualEndTime?: number,
+  ): void {
+    const currentTime = now();
+    const currentInstruction = trialByteCode.instructions[instructionPointer];
+
+    // Use the provided startTime if available, otherwise use the lastTrialEndTimeRef
+    const startTime = actualStartTime !== undefined ? actualStartTime : lastTrialEndTimeRef.current;
+
+    const endTime = actualEndTime !== undefined ? actualEndTime : currentTime;
+
+    if (currentInstruction?.type === 'ExecuteContent') {
+      const content = currentInstruction.content;
+      if (isRuntimeComponentContent(content)) {
+        const trialData: ComponentResultData = {
+          index: instructionPointer,
+          trialNumber: totalTrialsCompleted + 1,
+          start: startTime,
+          end: endTime,
+          duration: endTime - startTime,
+          type: content.type,
+          name: content.name ?? '',
+          responseData: componentResponseData,
+        };
+        setData((prevData) => [...prevData, trialData]);
+        setTotalTrialsCompleted((prevCount) => prevCount + 1);
+      } else {
+        console.log(
+          "ExecuteContent finished, but content wasn't standard component format:",
+          content,
+        );
+      }
+    }
+
+    let nextPointer = instructionPointer + 1;
+    let foundNextContent = false;
+
+    while (nextPointer < trialByteCode.instructions.length) {
+      const nextInstruction = trialByteCode.instructions[nextPointer];
+
+      switch (nextInstruction.type) {
+        case 'IfGoto':
+          if (nextInstruction.cond(experimentStoreRef.current, data)) {
+            const markerIndex = trialByteCode.markers[nextInstruction.marker];
+            if (markerIndex !== undefined) {
+              nextPointer = markerIndex;
+              continue;
+            } else {
+              console.error(`Marker ${nextInstruction.marker} not found`);
+              nextPointer++;
+            }
+          } else {
+            nextPointer++;
+          }
+          break;
+
+        case 'UpdateStore':
+          updateStore(nextInstruction.fun(experimentStoreRef.current, data));
+          nextPointer++;
+          break;
+
+        case 'ExecuteContent':
+          foundNextContent = true;
+          lastTrialEndTimeRef.current = now();
+          setInstructionPointer(nextPointer);
+          return;
+
+        default:
+          console.error('Unknown instruction type encountered:', nextInstruction);
+          nextPointer++;
+          break;
+      }
+    }
+
+    if (!foundNextContent) {
+      setInstructionPointer(nextPointer);
+    }
+  }
+
+  const collectRefreshRate = useCallback((callback: (refreshRate: number | null) => void) => {
+    let frameCount = 0;
+    const startTime = now();
+    const maxDuration = 20000;
+    let rafId: number;
+    let lastUpdateTime = startTime;
+    const updateInterval = 1000;
+
+    const calculateRefreshRate = () => {
+      const currentTime = now();
+      const elapsedTime = currentTime - startTime;
+      if (elapsedTime > 0) {
+        const refreshRate = Math.round((frameCount * 1000) / elapsedTime);
+        return refreshRate;
+      }
+      return null;
+    };
+
+    const cleanup = () => {
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
+    };
+
+    const countFrames = (timestamp: number) => {
+      frameCount++;
+      const elapsedTime = timestamp - startTime;
+
+      // Check if it's time for an update (once per second)
+      if (timestamp - lastUpdateTime >= updateInterval) {
+        callback(calculateRefreshRate());
+        lastUpdateTime = timestamp;
+      }
+
+      if (elapsedTime < maxDuration) {
+        rafId = requestAnimationFrame(countFrames);
+      } else {
+        cleanup();
+        callback(calculateRefreshRate());
+      }
+    };
+
+    rafId = requestAnimationFrame(countFrames);
+
+    return cleanup;
+  }, []);
+
+  const TimingWrapper: React.FC<{
+    children: React.ReactNode;
+    collectRefreshRate?: boolean;
+  }> = ({ children, collectRefreshRate: shouldcollect }) => {
+    const wrapperStartTimeRef = useRef<number | null>(null);
+    const refreshRateRef = useRef<number | null>(null);
+
+    useEffect(() => {
+      wrapperStartTimeRef.current = now();
+
+      if (shouldcollect) {
+        const cleanup = collectRefreshRate((rate) => {
+          refreshRateRef.current = rate;
+          updateStore({ _reactiveScreenRefreshRate: rate });
+        });
+
+        return cleanup;
+      }
+    }, []);
+
+    const childWithTimingProps = React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        const interceptedNext = (
+          responseData?: object,
+          actualStartTime?: number,
+          actualEndTime?: number,
+        ) => {
+          const currentTimeWrapper = now();
+
+          // Use the timings provided by the component if available, otherwise use the one by the wrapper
+          const startTime =
+            actualStartTime !== undefined ? actualStartTime : wrapperStartTimeRef.current;
+          const endTime = actualEndTime !== undefined ? actualEndTime : currentTimeWrapper;
+
+          next(responseData, startTime ?? undefined, endTime ?? undefined);
+        };
+
+        return React.cloneElement(child, {
+          ...child.props,
+          next: interceptedNext,
+        });
+      }
+      return child;
+    });
+
+    return <>{childWithTimingProps}</>;
+  };
+
+  const currentInstruction = trialByteCode.instructions[instructionPointer];
+
+  let componentToRender = null;
+  if (currentInstruction?.type === 'ExecuteContent') {
+    const content = currentInstruction.content;
+    if (isRuntimeComponentContent(content)) {
+      const Component = componentsMap[content.type];
+
+      if (Component) {
+        const componentProps =
+          typeof content.props === 'function'
+            ? content.props(experimentStoreRef.current, data)
+            : content.props || {};
+
+        componentToRender = (
+          <TimingWrapper key={instructionPointer} collectRefreshRate={content.collectRefreshRate}>
+            <Component
+              next={next}
+              updateStore={updateStore}
+              store={experimentStoreRef.current}
+              data={data}
+              {...(content.type === 'Quest' ? { customQuestions: customQuestionsMap } : {})}
+              {...componentProps}
+            />
+          </TimingWrapper>
+        );
+      } else {
+        console.error(`No component found for type: ${content.type}`);
+        componentToRender = <div>Error: Component type "{content.type}" not found.</div>;
+      }
+    } else {
+      console.warn('ExecuteContent instruction does not contain standard component data:', content);
+      componentToRender = <div>Non-component content encountered.</div>;
+    }
+  } else if (instructionPointer >= trialByteCode.instructions.length) {
+    componentToRender = <></>;
+  }
+
+  return (
+    <div className='w-full'>
+      <div
+        className={` ${
+          config.showProgressBar ? '' : 'hidden '
+        } px-4 mt-4 sm:mt-12 max-w-2xl mx-auto flex-1 h-6 bg-gray-200 rounded-full overflow-hidden`}
+      >
+        <div
+          className={`h-full bg-gray-200 rounded-full duration-300 ${
+            progress > 0 ? ' border-black border-2' : ''
+          }`}
+          style={{
+            width: `${progress * 100}%`,
+            backgroundImage: `repeating-linear-gradient(
+                            -45deg, #E5E7EB, #E5E7EB 10px, #D1D5DB 10px, #D1D5DB 20px
+                        )`,
+            transition: 'width 300ms ease-in-out',
+          }}
+        />
+      </div>
+      {componentToRender}
+    </div>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,13 @@
+export { default as Text } from './text';
+export { default as PlainInput } from './plaininput';
+export { default as ProlificEnding } from './prolificending';
+export { default as MicCheck } from './microphonecheck';
+export { default as Quest } from './quest';
+export { default as Upload } from './upload';
+export { default as EnterFullscreen } from './enterfullscreen';
+export { default as ExitFullscreen } from './exitfullscreen';
+export { default as ExperimentProvider } from './experimentprovider';
+export { default as ExperimentRunner } from './experimentrunner';
+export { default as RequestFilePermission } from './mobilefilepermission';
+export { default as CanvasBlock } from './canvasblock';
+export { default as CheckDevice } from './checkdevice';

package/src/components/mobilefilepermission.tsx

@@ -3,28 +3,19 @@ import { useEffect, useState } from 'react';
 import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
 import { Capacitor } from '@capacitor/core';
 
-
-// currently needed for old android verions (<=10) because they need permissions to save data to the documents folder
 export default function RequestFilePermission({ next }: BaseComponentProps) {
-  const [permissionChecking, setPermissionChecking] = useState(false);
+  const [permissionStatus, setPermissionStatus] = useState('checking');
   
   useEffect(() => {
-    // Prevent multiple checks
-    if (permissionChecking) return;
+    if (permissionStatus !== 'checking') return;
     
     const checkPermission = async () => {
-      // Only run on Android
       if (getPlatform() !== 'mobile' || Capacitor.getPlatform() !== 'android') {
         next({});
         return;
       }
-
-      setPermissionChecking(true);
       
       try {
-        // Try to write a test file to check permissions
-        // For Android 9-10, this will trigger permission request
-        // For Android 11+, this should work with scoped storage
         await Filesystem.writeFile({
           path: 'permission_check.txt',
           data: 'Testing permissions',
@@ -32,35 +23,37 @@ export default function RequestFilePermission({ next }: BaseComponentProps) {
           encoding: Encoding.UTF8
         });
         
-        
         try {
           await Filesystem.deleteFile({
             path: 'permission_check.txt',
             directory: Directory.Documents
           });
         } catch (e) {
-          
+          console.log('Cleanup error:', e);
         }
         
-        // Permission granted, proceed to next step
+        setPermissionStatus('granted');
         next({});
       } catch (error) {
         console.error('Permission denied or error:', error);
-        
-        setPermissionChecking(false);
+        setPermissionStatus('denied');
       }
     };
     
     checkPermission();
-  }, [next, permissionChecking]);
+  }, [next, permissionStatus]);
+
+  if (permissionStatus === 'checking') {
+    return null;
+  }
   
   return (
     <div className="flex flex-col items-center justify-center gap-4 p-6 text-xl mt-16 px-10">
       <p>Storage permission is required to save your data.</p>
       <p>Please grant permission when prompted.</p>
-      <p>If there is not popup, go to "Settings" {">"} "Apps" {">"} "BeSeK" {">"} "Permissions" {">"} "Storage" {">"} "Allow"</p>
+      <p>If there is no popup, go to "Settings" {">"} "Apps" {">"} "Name of the App" {">"} "Permissions" {">"} "Storage" {">"} "Allow"</p>
       <button 
-        onClick={() => setPermissionChecking(false)} 
+        onClick={() => setPermissionStatus('checking')} 
         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"
       >
         Try Again

package/src/components/plaininput.tsx

@@ -1,5 +1,5 @@
-import { BaseComponentProps } from "../mod";
-import { useState } from "react";
+import { BaseComponentProps } from '../mod';
+import { useState } from 'react';
 
 function PlainInput({
   content,
@@ -8,7 +8,7 @@ function PlainInput({
   next,
   updateStore,
   animate = false,
-  storeupdate, // user defined function
+  storeupdate,
   placeholder = 'Enter your response here',
 }: BaseComponentProps & {
   content: React.ReactNode;
@@ -29,7 +29,7 @@ function PlainInput({
     if (storeupdate) {
       updateStore(storeupdate(inputValue));
     }
-    next({value: inputValue});
+    next({ value: inputValue });
   };
 
   return (
@@ -43,11 +43,11 @@ function PlainInput({
 
       <div className={`mt-8 ${animate ? 'animate-slide-down opacity-0' : ''}`}>
         <input
-          type="text"
+          type='text'
           value={inputValue}
           onChange={handleChange}
           placeholder={placeholder}
-          className="w-full px-4 py-3 border-2 border-black rounded-xl text-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className='w-full px-4 py-3 border-2 border-black rounded-xl text-lg focus:outline-none focus:ring-2 focus:ring-blue-500'
         />
       </div>
 
@@ -68,5 +68,4 @@ function PlainInput({
   );
 }
 
-
-export default PlainInput;
+export default PlainInput;

package/src/components/prolificending.tsx

@@ -1,17 +1,23 @@
-import { BaseComponentProps, getParam } from '../utils/common';
+import { BaseComponentProps, getParam, registerComponentParams } from '../utils/common';
 import Text from '../components/text';
 
+registerComponentParams('ProlificEnding', [
+  { name: 'cc', defaultValue: '', type: 'string', description: 'Completion code of the Profilic experiment (more commonly supplied via the code)' },
+])
+
 export default function ProlificEnding({
   prolificCode,
+  data,
+  updateStore
 }: { prolificCode?: string } & BaseComponentProps) {
-  let prolificCodeUsed = prolificCode ?? getParam('cc', undefined, 'string') ?? null;
+  let prolificCodeUsed = prolificCode ?? getParam('cc', '', 'string') ?? null;
 
   const content = (
     <div className='flex flex-col items-center'>
       <svg className='w-12 h-12' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
         <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M5 13l4 4L19 7' />
       </svg>
-      <p className='text-center'>
+      <p className=''>
         Thank you! Your data has been successfully submitted. <br /> You can go back to Prolific and
         enter the code {prolificCodeUsed} to finish the study. Alternatively, you can click on this
         link:{' '}
@@ -26,5 +32,5 @@ export default function ProlificEnding({
     </div>
   );
 
-  return <Text content={content} buttonText='' next={() => {}} />;
+  return <Text data={data} updateStore={updateStore} content={content} buttonText='' next={() => {}} />;
 }

package/src/components/quest.tsx

@@ -4,14 +4,11 @@ import { ReactQuestionFactory, Survey, SurveyQuestionElementBase } from 'survey-
 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;
@@ -21,13 +18,12 @@ const registerCustomQuestion = (name: string, component: ComponentType<any>) =>
   Serializer.addClass(
     name,
     [],
-    function() {
+    function () {
       return new CustomQuestionModel('');
     },
-    'question'
+    'question',
   );
 
-  // Create the question wrapper
   class CustomQuestionWrapper extends SurveyQuestionElementBase {
     constructor(props: any) {
       super(props);
@@ -50,53 +46,53 @@ const registerCustomQuestion = (name: string, component: ComponentType<any>) =>
     }
   }
 
-  // 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; 
+function Quest({
+  next,
+  surveyJson,
+  customQuestions = {},
+}: {
+  next: (data: object) => void;
   surveyJson: object;
   customQuestions?: ComponentsMap;
 }) {
-  
-  Object.keys(customQuestions).forEach(name => {
+  Object.keys(customQuestions).forEach((name) => {
     registerCustomQuestion(name, customQuestions[name]);
   });
 
-
-  const survey = new Model({ 
-    ...surveyJson, 
-    css: { ...defaultV2Css, root: 'sd-root-modern custom-root' } 
+  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,
-        });
+  const saveResults = useCallback(
+    (sender: any) => {
+      const resultData: Record<string, any> = {};
+      for (const key in sender.data) {
+        const question = sender.getQuestionByName(key);
+        if (question) {
+          resultData[key] = question.value;
+        }
       }
-    }
-    next(resultData);
-  }, [next]);
+      next(resultData);
+    },
+    [next],
+  );
 
   survey.onComplete.add(saveResults);
 
   return (
-    <div className="max-w-4xl mx-auto px-4">
-      <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]" />
+    <div className='max-w-4xl mx-auto px-4'>
+      <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;
+export default Quest;