fix(Map): Trying to fix problem with fast forwarding after page are inactive some time.

assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/components/ImportExport.tsx

@@ -76,9 +76,6 @@ export const ImportExport = () => {
         detail: 'Settings already imported. Or something went wrong.',
         life: 3000,
       });
-
-      // eslint-disable-next-line no-console
-      console.log('JOipP', `text`, text);
     } catch (error) {
       console.error(`Import from file Error: `, error);
 

assets/js/hooks/Mapper/components/mapRootContent/components/RightBar/DebugComponent.tsx

@@ -0,0 +1,49 @@
+import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
+import useLocalStorageState from 'use-local-storage-state';
+import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
+
+export const DebugComponent = () => {
+  const { outCommand } = useMapRootState();
+
+  const [record, setRecord] = useLocalStorageState<boolean>('record', {
+    defaultValue: false,
+  });
+
+  // @ts-ignore
+  const [recordsList] = useLocalStorageState<{ type; data }[]>('recordsList', {
+    defaultValue: [],
+  });
+
+  const handleRunSavedEvents = () => {
+    recordsList.forEach(record => outCommand(record));
+  };
+
+  return (
+    <>
+      <WdTooltipWrapper content="Run saved events" position={TooltipPosition.left}>
+        <button
+          className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent py-2 h-auto min-h-auto"
+          type="button"
+          onClick={handleRunSavedEvents}
+          disabled={recordsList.length === 0 || record}
+        >
+          <i className="pi pi-forward"></i>
+        </button>
+      </WdTooltipWrapper>
+
+      <WdTooltipWrapper content="Record" position={TooltipPosition.left}>
+        <button
+          className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent py-2 h-auto min-h-auto"
+          type="button"
+          onClick={() => setRecord(x => !x)}
+        >
+          {!record ? (
+            <i className="pi pi-play-circle text-green-500"></i>
+          ) : (
+            <i className="pi pi-stop-circle text-red-500"></i>
+          )}
+        </button>
+      </WdTooltipWrapper>
+    </>
+  );
+};

assets/js/hooks/Mapper/components/mapRootContent/components/RightBar/RightBar.tsx

@@ -7,6 +7,7 @@ import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
 
 import { useMapCheckPermissions } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { UserPermission } from '@/hooks/Mapper/types/permissions.ts';
+// import { DebugComponent } from '@/hooks/Mapper/components/mapRootContent/components/RightBar/DebugComponent.tsx';
 
 interface RightBarProps {
   onShowOnTheMap?: () => void;
@@ -79,6 +80,9 @@ export const RightBar = ({
       </div>
 
       <div className="flex flex-col items-center mb-2 gap-1">
+        {/* TODO - do not delete this code needs for debug */}
+        {/*<DebugComponent />*/}
+
         <WdTooltipWrapper content="Map user settings" position={TooltipPosition.left}>
           <button
             className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent py-2 h-auto min-h-auto"

assets/js/hooks/Mapper/helpers/getFormattedTime.ts

@@ -0,0 +1,11 @@
+export function getFormattedTime() {
+  const now = new Date();
+
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  const seconds = String(now.getSeconds()).padStart(2, '0');
+
+  const ms = String(now.getMilliseconds() + 1000).slice(1);
+
+  return `${hours}:${minutes}:${seconds} ${ms}`;
+}

assets/js/hooks/Mapper/hooks/usePageVisibility.ts

@@ -1,11 +1,12 @@
 import { useState, useEffect } from 'react';
 
 function usePageVisibility() {
-  const [isVisible, setIsVisible] = useState(!document.hidden);
+  const getIsVisible = () => !document.hidden;
+  const [isVisible, setIsVisible] = useState(getIsVisible());
 
   useEffect(() => {
     const handleVisibilityChange = () => {
-      setIsVisible(!document.hidden);
+      setIsVisible(getIsVisible());
     };
 
     document.addEventListener('visibilitychange', handleVisibilityChange);

assets/js/hooks/Mapper/useMapperHandlers.ts

@@ -1,19 +1,69 @@
 import { MapHandlers } from '@/hooks/Mapper/types/mapHandlers.ts';
-import { RefObject, useCallback } from 'react';
+import { RefObject, useCallback, useEffect, useRef } from 'react';
+import debounce from 'lodash.debounce';
+import usePageVisibility from '@/hooks/Mapper/hooks/usePageVisibility.ts';
 
+// const inIndex = 0;
+// const prevEventTime = +new Date();
+const LAST_VERSION_KEY = 'wandererLastVersion';
+
+// @ts-ignore
 export const useMapperHandlers = (handlerRefs: RefObject<MapHandlers>[], hooksRef: RefObject<any>) => {
+  const visible = usePageVisibility();
+  const wasHiddenOnce = useRef(false);
+  const visibleRef = useRef(visible);
+  visibleRef.current = visible;
+
+  // TODO - do not delete THIS code it needs for debug
+  // const [record, setRecord] = useLocalStorageState<boolean>('record', {
+  //   defaultValue: false,
+  // });
+  // const [recordsList, setRecordsList] = useLocalStorageState<{ type; data }[]>('recordsList', {
+  //   defaultValue: [],
+  // });
+  //
+  // const ref = useRef({ record, setRecord, recordsList, setRecordsList });
+  // ref.current = { record, setRecord, recordsList, setRecordsList };
+  //
+  // const recordBufferRef = useRef<{ type; data }[]>([]);
+  // useEffect(() => {
+  //   if (record || recordBufferRef.current.length === 0) {
+  //     return;
+  //   }
+  //
+  //   ref.current.setRecordsList([...recordBufferRef.current]);
+  //   recordBufferRef.current = [];
+  // }, [record]);
+
   const handleCommand = useCallback(
+    // @ts-ignore
     async ({ type, data }) => {
       if (!hooksRef.current) {
         return;
       }
 
+      // TODO - do not delete THIS code it needs for debug
+      // console.log('JOipP', `OUT`, ref.current.record, { type, data });
+      // if (ref.current.record) {
+      //   recordBufferRef.current.push({ type, data });
+      // }
+
+      // 'ui_loaded'
       return await hooksRef.current.pushEventAsync(type, data);
     },
     [hooksRef.current],
   );
 
-  const handleMapEvent = useCallback(({ type, body }) => {
+  // @ts-ignore
+  const eventsBufferRef = useRef<{ type; body }[]>([]);
+
+  const eventTick = useCallback(
+    debounce(() => {
+      if (eventsBufferRef.current.length === 0) {
+        return;
+      }
+
+      const { type, body } = eventsBufferRef.current.shift()!;
       handlerRefs.forEach(ref => {
         if (!ref.current) {
           return;
@@ -21,7 +71,51 @@ export const useMapperHandlers = (handlerRefs: RefObject<MapHandlers>[], hooksRe
 
         ref.current?.command(type, body);
       });
+
+      // TODO - do not delete THIS code it needs for debug
+      // console.log('JOipP', `Tick Buff`, eventsBufferRef.current.length);
+
+      if (eventsBufferRef.current.length > 0) {
+        eventTick();
+      }
+    }, 10),
+    [],
+  );
+  const eventTickRef = useRef(eventTick);
+  eventTickRef.current = eventTick;
+
+  // @ts-ignore
+  const handleMapEvent = useCallback(({ type, body }) => {
+    // TODO - do not delete THIS code it needs for debug
+    // const currentTime = +new Date();
+    // const timeDiff = currentTime - prevEventTime;
+    // prevEventTime = currentTime;
+    // console.log('JOipP', `IN [${inIndex++}] [${timeDiff}] ${getFormattedTime()}`, { type, body });
+
+    if (!eventTickRef.current || !visibleRef.current) {
+      return;
+    }
+
+    eventsBufferRef.current.push({ type, body });
+    eventTickRef.current();
   }, []);
 
+  useEffect(() => {
+    if (!visible && !wasHiddenOnce.current) {
+      wasHiddenOnce.current = true;
+      return;
+    }
+
+    if (!wasHiddenOnce.current) {
+      return;
+    }
+
+    if (!visible) {
+      return;
+    }
+
+    hooksRef.current.pushEventAsync('ui_loaded', { version: localStorage.getItem(LAST_VERSION_KEY) });
+  }, [hooksRef.current, visible]);
+
   return { handleCommand, handleMapEvent };
 };