@adriansteffan/reactive 0.0.26 → 0.0.27

package/src/components/checkdevice.tsx

@@ -0,0 +1,158 @@
+import { BaseComponentProps } from '../mod';
+import { useEffect, useRef, useState } from 'react';
+
+interface DeviceInfo {
+  windowWidth: number;
+  windowHeight: number;
+  screenWidth: number;
+  screenHeight: number;
+  browser: string;
+  browserVersion: string;
+  isMobile: boolean;
+  operatingSystem: string;
+  hasWebAudio: boolean;
+  hasFullscreen: boolean;
+  hasWebcam: boolean;
+  hasMicrophone: boolean;
+}
+
+function CheckDevice({
+  check,
+  content = <div>Your device doesn't meet the requirements for this experiment.</div>,
+  data,
+  store,
+  updateStore,
+  next,
+}: {
+  check: (deviceInfo: DeviceInfo, data: any, store: any) => boolean;
+  content?: React.ReactNode;
+} & BaseComponentProps) {
+  const [showContent, setShowContent] = useState<boolean>(false);
+
+  const hasNavigatedRef = useRef(false);
+
+  useEffect(() => {
+    if (hasNavigatedRef.current) {
+      return;
+    }
+
+    const gatherDeviceInfo = async () => {
+      const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight;
+
+      const screenWidth = window.screen.width;
+      const screenHeight = window.screen.height;
+
+      const userAgent = navigator.userAgent;
+      let browser = 'Unknown';
+      let browserVersion = 'Unknown';
+
+      if (userAgent.indexOf('Chrome') > -1) {
+        browser = 'Chrome';
+        const match = userAgent.match(/Chrome\/(\d+\.\d+)/);
+        browserVersion = match ? match[1] : 'Unknown';
+      } else if (userAgent.indexOf('Firefox') > -1) {
+        browser = 'Firefox';
+        const match = userAgent.match(/Firefox\/(\d+\.\d+)/);
+        browserVersion = match ? match[1] : 'Unknown';
+      } else if (userAgent.indexOf('Safari') > -1) {
+        browser = 'Safari';
+        const match = userAgent.match(/Version\/(\d+\.\d+)/);
+        browserVersion = match ? match[1] : 'Unknown';
+      } else if (userAgent.indexOf('Edge') > -1) {
+        browser = 'Edge';
+        const match = userAgent.match(/Edge\/(\d+\.\d+)/);
+        browserVersion = match ? match[1] : 'Unknown';
+      } else if (userAgent.indexOf('MSIE') > -1 || userAgent.indexOf('Trident/') > -1) {
+        browser = 'Internet Explorer';
+        const match = userAgent.match(/(?:MSIE |rv:)(\d+\.\d+)/);
+        browserVersion = match ? match[1] : 'Unknown';
+      }
+
+      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+        userAgent,
+      );
+
+      let operatingSystem = 'Unknown';
+      if (/Windows/.test(userAgent)) {
+        operatingSystem = 'Windows';
+      } else if (/Macintosh|Mac OS X/.test(userAgent)) {
+        operatingSystem = 'MacOS';
+      } else if (/Linux/.test(userAgent)) {
+        operatingSystem = 'Linux';
+      } else if (/Android/.test(userAgent)) {
+        operatingSystem = 'Android';
+      } else if (/iOS|iPhone|iPad|iPod/.test(userAgent)) {
+        operatingSystem = 'iOS';
+      }
+
+      const hasWebAudio = !!(
+        window.AudioContext ||
+        (window as any).webkitAudioContext ||
+        (window as any).mozAudioContext ||
+        (window as any).oAudioContext ||
+        (window as any).msAudioContext
+      );
+
+      const hasFullscreen = !!(
+        document.exitFullscreen ||
+        (document as any).webkitExitFullscreen ||
+        (document as any).mozCancelFullScreen ||
+        (document as any).msExitFullscreen ||
+        document.fullscreenEnabled ||
+        (document as any).webkitFullscreenEnabled ||
+        (document as any).mozFullScreenEnabled ||
+        (document as any).msFullscreenEnabled
+      );
+
+      let hasWebcam = false;
+      let hasMicrophone = false;
+
+      try {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        hasWebcam = devices.some((device) => device.kind === 'videoinput');
+        hasMicrophone = devices.some((device) => device.kind === 'audioinput');
+      } catch (error) {
+        console.error('Error checking media devices:', error);
+      }
+
+      const deviceInfo: DeviceInfo = {
+        windowWidth,
+        windowHeight,
+        screenWidth,
+        screenHeight,
+        browser,
+        browserVersion,
+        isMobile,
+        operatingSystem,
+        hasWebAudio,
+        hasFullscreen,
+        hasWebcam,
+        hasMicrophone,
+      };
+
+      updateStore({ _reactiveDeviceInfo: deviceInfo });
+
+      const checkResult = check ? check(deviceInfo, data, store) : true;
+
+      if (checkResult && !hasNavigatedRef.current) {
+        hasNavigatedRef.current = true;
+        next(deviceInfo);
+      } else {
+        setShowContent(true);
+      }
+    };
+
+    gatherDeviceInfo();
+  }, [check, data, updateStore, next]);
+
+  return showContent ? (
+    <div className='max-w-prose mx-auto mt-20 mb-20 px-4'>
+      <article className='prose prose-2xl prose-slate text-xl prose-a:text-blue-600 prose-a:underline prose-h1:text-4xl prose-h1:mb-10 prose-h1:font-bold prose-p:mb-4 prose-strong:font-bold text-black leading-relaxed'>
+        {content}
+      </article>
+    </div>
+  ) : null;
+}
+
+export default CheckDevice;

package/src/components/enterfullscreen.tsx

@@ -1,52 +1,135 @@
-import { BaseComponentProps } from '../utils/common';
+import React, { useState, useCallback, useRef, useEffect } from 'react'; // Import useState
+import { BaseComponentProps, getPlatform, isFullscreen } from '../utils/common';
 import Text from '../components/text';
 
 import { StatusBar } from '@capacitor/status-bar';
 import { ImmersiveMode } from '@adriansteffan/immersive-mode';
-
-
-function enterFullscreen(element: any) {
-  
-  // Android
-  StatusBar.hide();
-  ImmersiveMode.enable();
-
-  if (element.requestFullscreen) {
-    element.requestFullscreen();
-  } else if (element.mozRequestFullScreen) {
-    // Firefox
-    element.mozRequestFullScreen();
-  } else if (element.webkitRequestFullscreen) {
-    // Chrome, Safari and Opera
-    element.webkitRequestFullscreen();
-  } else if (element.msRequestFullscreen) {
-    // IE/Edge
-    element.msRequestFullscreen();
-  }
-}
+import { Capacitor } from '@capacitor/core';
 
 export default function EnterFullscreen({
   content,
   buttonText,
   next,
-}: { prolificCode?: string; content?: React.ReactNode; buttonText?: string } & BaseComponentProps) {
+  data,
+  updateStore,
+  delayMs = 0,
+}: {
+  prolificCode?: string;
+  content?: React.ReactNode;
+  buttonText?: string;
+  delayMs?: number;
+} & BaseComponentProps) {
   const contentWrap = (
     <div className='flex flex-col items-center'>
       {!!content && content}
-      {!content && (
-        <p className=''>Please click the Button below to enter Fullscreen mode.</p>
-      )}
+      {!content && <p className=''>Please click the Button below to enter Fullscreen mode.</p>}
     </div>
   );
 
+  const [isWaiting, setIsWaiting] = useState(false);
+  const listenerFallbackActive = useRef(false);
+  const timeoutId = useRef<NodeJS.Timeout | null>(null);
+
+  const cancelPendingTimeout = useCallback(() => {
+      if (timeoutId.current) {
+          clearTimeout(timeoutId.current);
+          timeoutId.current = null;
+      }
+  }, []);
+
+  const removeListenersAndTimeout = useCallback(() => {
+    document.removeEventListener('fullscreenchange', handleFullscreenChangeForFallback);
+    document.removeEventListener('webkitfullscreenchange', handleFullscreenChangeForFallback);
+    document.removeEventListener('mozfullscreenchange', handleFullscreenChangeForFallback);
+    document.removeEventListener('MSFullscreenChange', handleFullscreenChangeForFallback);
+    cancelPendingTimeout();
+    listenerFallbackActive.current = false;
+  }, [cancelPendingTimeout]);
+
+  const proceedWithDelay = useCallback(() => {
+    cancelPendingTimeout();
+    setIsWaiting(true);
+    timeoutId.current = setTimeout(() => {
+        timeoutId.current = null;
+
+        next({});
+    }, delayMs);
+  }, [next, delayMs, cancelPendingTimeout]);
+
+  const handleFullscreenChangeForFallback = useCallback(() => {
+    if (!listenerFallbackActive.current) return;
+    const currentlyFullscreen = isFullscreen();
+    removeListenersAndTimeout();
+    if (currentlyFullscreen) {
+        proceedWithDelay();
+    } else {
+        setIsWaiting(false);
+    }
+  }, [proceedWithDelay, removeListenersAndTimeout]);
+
+  const addListenersForFallback = useCallback(() => {
+    removeListenersAndTimeout();
+    listenerFallbackActive.current = true;
+    document.addEventListener('fullscreenchange', handleFullscreenChangeForFallback);
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChangeForFallback);
+    document.addEventListener('mozfullscreenchange', handleFullscreenChangeForFallback);
+    document.addEventListener('MSFullscreenChange', handleFullscreenChangeForFallback);
+  }, [handleFullscreenChangeForFallback, removeListenersAndTimeout]);
+
+  const handleEnterFullscreenClick = useCallback(async () => {
+    setIsWaiting(true);
+    removeListenersAndTimeout();
+
+    const element = document.documentElement;
+
+    if (getPlatform() === 'mobile' && Capacitor.getPlatform() === 'android') {
+      StatusBar.hide();
+      ImmersiveMode.enable();
+    }
+
+    if (element.requestFullscreen) {
+      try {
+        await element.requestFullscreen();
+        proceedWithDelay();
+        return;
+      } catch (err) {
+        console.error("Fullscreen request failed:", err);
+        return;
+      }
+    }
+
+    if ((element as any).mozRequestFullScreen) {
+      (element as any).mozRequestFullScreen();
+      addListenersForFallback();
+    } else if ((element as any).webkitRequestFullscreen) {
+      (element as any).webkitRequestFullscreen();
+      addListenersForFallback();
+    } else if ((element as any).msRequestFullscreen) {
+      (element as any).msRequestFullscreen();
+      addListenersForFallback();
+    } else {
+      console.warn('Fullscreen API is not supported by this browser.');
+    }
+  }, [proceedWithDelay, addListenersForFallback, removeListenersAndTimeout]);
+
+  useEffect(() => {
+    return () => {
+      removeListenersAndTimeout();
+    };
+  }, [removeListenersAndTimeout]);
+
+ 
+  if (isWaiting) {
+    return null;
+  }
+
   return (
     <Text
+      data={data}
+      updateStore={updateStore}
       content={contentWrap}
       buttonText={buttonText ?? 'Enter Fullscreen Mode'}
-      next={() => {
-        enterFullscreen(document.documentElement);
-        next({});
-      }}
+      next={handleEnterFullscreenClick}
     />
   );
-}
+}

package/src/components/exitfullscreen.tsx

@@ -1,29 +1,106 @@
-import { BaseComponentProps } from '../utils/common';
-import { useEffect } from 'react';
+import { useCallback, useRef, useEffect } from 'react';
+import { BaseComponentProps, getPlatform, isFullscreen } from '../utils/common';
 import { StatusBar } from '@capacitor/status-bar';
 import { ImmersiveMode } from '@adriansteffan/immersive-mode';
+import { Capacitor } from '@capacitor/core';
 
-function exitFullscreen() {
+export default function ExitFullscreen({
+  next,
+  delayMs = 0,
+}: {
+  delayMs?: number;
+} & BaseComponentProps) {
+  
+  const listenerFallbackActive = useRef(false);
+  const timeoutId = useRef<NodeJS.Timeout | null>(null);
 
-  StatusBar.show();
-  ImmersiveMode.disable();
+  const cancelPendingTimeout = useCallback(() => {
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+      timeoutId.current = null;
+    }
+  }, []);
+
+  const removeListenersAndTimeout = useCallback(() => {
+    document.removeEventListener('fullscreenchange', handleFullscreenChangeForFallback);
+    document.removeEventListener('webkitfullscreenchange', handleFullscreenChangeForFallback);
+    document.removeEventListener('mozfullscreenchange', handleFullscreenChangeForFallback);
+    document.removeEventListener('MSFullscreenChange', handleFullscreenChangeForFallback);
+    cancelPendingTimeout();
+    listenerFallbackActive.current = false;
+  }, [cancelPendingTimeout]);
+
+  const proceedWithDelay = useCallback(() => {
+    cancelPendingTimeout();
+    timeoutId.current = setTimeout(() => {
+      timeoutId.current = null;
+      next({});
+    }, delayMs);
+  }, [next, delayMs, cancelPendingTimeout]);
+
+  const handleFullscreenChangeForFallback = useCallback(() => {
+    if (!listenerFallbackActive.current) return;
+    const currentlyFullscreen = isFullscreen();
+    removeListenersAndTimeout();
+    if (!currentlyFullscreen) {
+      proceedWithDelay();
+    }
+  }, [proceedWithDelay, removeListenersAndTimeout]);
 
-  if (document.exitFullscreen) {
-    document.exitFullscreen();
-  } else if ((document as any).mozCancelFullScreen) {
-    (document as any).mozCancelFullScreen();
-  } else if ((document as any).webkitExitFullscreen) {
-    (document as any).webkitExitFullscreen();
-  } else if ((document as any).msExitFullscreen) {
-    (document as any).msExitFullscreen();
-  }
-}
+  const addListenersForFallback = useCallback(() => {
+    removeListenersAndTimeout();
+    listenerFallbackActive.current = true;
+    document.addEventListener('fullscreenchange', handleFullscreenChangeForFallback);
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChangeForFallback);
+    document.addEventListener('mozfullscreenchange', handleFullscreenChangeForFallback);
+    document.addEventListener('MSFullscreenChange', handleFullscreenChangeForFallback);
+  }, [handleFullscreenChangeForFallback, removeListenersAndTimeout]);
 
-export default function ExitFullscreen({ next }: BaseComponentProps) {
   useEffect(() => {
-    exitFullscreen();
-    next({});
-  }, []);
+    const performExitFullscreen = async () => {
+      if (!isFullscreen()) {
+        next({});
+        return;
+      }
+      
+      if (getPlatform() === 'mobile' && Capacitor.getPlatform() === 'android') {
+        StatusBar.show();
+        ImmersiveMode.disable();
+      }
+
+      if (document.exitFullscreen) {
+        try {
+          await document.exitFullscreen();
+          proceedWithDelay();
+          return;
+        } catch (err) {
+          console.error("Exiting fullscreen failed:", err);
+          next({});
+          return;
+        }
+      }
+
+      if ((document as any).mozCancelFullScreen) {
+        (document as any).mozCancelFullScreen();
+        addListenersForFallback();
+      } else if ((document as any).webkitExitFullscreen) {
+        (document as any).webkitExitFullscreen();
+        addListenersForFallback();
+      } else if ((document as any).msExitFullscreen) {
+        (document as any).msExitFullscreen();
+        addListenersForFallback();
+      } else {
+        console.warn('Fullscreen API is not supported by this browser.');
+        next({});
+      }
+    };
+    
+    performExitFullscreen();
+    
+    return () => {
+      removeListenersAndTimeout();
+    };
+  }, [proceedWithDelay, addListenersForFallback, removeListenersAndTimeout]);
 
-  return <></>;
-}
+  return null;
+}

package/src/components/experimentprovider.tsx

@@ -4,25 +4,39 @@ import { ToastContainer } from 'react-toastify';
 const queryClient = new QueryClient();
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactNode } from 'react';
+import { SettingsScreen } from './settingsscreen';
+import { Param } from '../utils/common';
 
-export default function ExperimentProvider({children}: {children: ReactNode}){
-  return(<QueryClientProvider client={queryClient}>
-    {children}
-    <ToastContainer
-      position='top-center'
-      autoClose={3000}
-      hideProgressBar
-      newestOnTop={false}
-      closeOnClick
-      rtl={false}
-      pauseOnFocusLoss
-      draggable={false}
-      pauseOnHover
-      theme='light'
-      toastClassName={() => 
-        'relative flex p-4 min-h-10 rounded-none justify-between overflow-hidden cursor-pointer border-2 border-black shadow-[2px_2px_0px_rgba(0,0,0,1)] bg-white'
-      }
-      bodyClassName="text-black font-sans"
-    />
-  </QueryClientProvider>)
+export default function ExperimentProvider({ children, disableSettings }: { children: ReactNode, disableSettings?: boolean }) {
+ 
+  if (window.location.pathname.endsWith('/settings') && !disableSettings) {
+    return (
+      <SettingsScreen
+        paramRegistry={Param.getRegistry()}
+        timelineRepresentation={Param.getTimelineRepresentation()}
+      />
+    );
+  }
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ToastContainer
+        position='top-center'
+        autoClose={3000}
+        hideProgressBar
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable={false}
+        pauseOnHover
+        theme='light'
+        toastClassName={() =>
+          'relative flex p-4 min-h-10 rounded-none justify-between overflow-hidden cursor-pointer border-2 border-black shadow-[2px_2px_0px_rgba(0,0,0,1)] bg-white'
+        }
+        bodyClassName='text-black font-sans'
+      />
+    </QueryClientProvider>
+  );
 }