refactor: replace local state with usePlayerStore for hidePlayer in ControlsPlayer, SimulationPlayer, and KeyPressListener

app/src/components/layout/controls/ControlsPlayer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import useCameraModeStore, {
   usePlayButtonStore,
 } from "../../../store/usePlayButtonStore";
@@ -8,12 +8,13 @@ import InputToggle from "../../ui/inputs/InputToggle";
 import { EyeCloseIcon, WalkIcon } from "../../icons/ExportCommonIcons";
 import { ExitIcon } from "../../icons/SimulationIcons";
 import { useCamMode } from "../../../store/builder/store";
+import { usePlayerStore } from "../../../store/useUIToggleStore";
 
 const ControlsPlayer: React.FC = () => {
   const { setIsPlaying } = usePlayButtonStore();
   const { activeModule } = useModuleStore();
   const { walkMode, toggleWalkMode } = useCameraModeStore();
-  const [hidePlayer, setHidePlayer] = useState(false);
+  const { hidePlayer, setHidePlayer } = usePlayerStore();
   const { camMode } = useCamMode();
 
   const changeCamMode = () => {

app/src/components/ui/simulation/simulationPlayer.tsx

@@ -23,6 +23,7 @@ import { useSubModuleStore } from "../../../store/useModuleStore";
 import ProductionCapacity from "../analysis/ThroughputSummary";
 import ThroughputSummary from "../analysis/ProductionCapacity";
 import ROISummary from "../analysis/ROISummary";
+import { usePlayerStore } from "../../../store/useUIToggleStore";
 
 const SimulationPlayer: React.FC = () => {
   const MAX_SPEED = 4; // Maximum speed
@@ -31,7 +32,7 @@ const SimulationPlayer: React.FC = () => {
   const sliderRef = useRef<HTMLDivElement>(null);
   const [expand, setExpand] = useState(true);
   const [playSimulation, setPlaySimulation] = useState(false);
-  const [hidePlayer, setHidePlayer] = useState(false);
+  const { hidePlayer, setHidePlayer } = usePlayerStore();
 
   const { speed, setSpeed } = useAnimationPlaySpeed();
   const { setIsPlaying } = usePlayButtonStore();
@@ -111,22 +112,9 @@ const SimulationPlayer: React.FC = () => {
   const hourlySimulation = 25;
   const dailyProduction = 75;
   const monthlyROI = 50;
-  const { processBar, setProcessBar } = useProcessBar();
+  const { processBar } = useProcessBar();
-  // const process = [
-  //   { name: "process 1", completed: 0 }, // 0% completed
-  //   { name: "process 2", completed: 20 }, // 20% completed
-  //   { name: "process 3", completed: 40 }, // 40% completed
-  //   { name: "process 4", completed: 60 }, // 60% completed
-  //   { name: "process 5", completed: 80 }, // 80% completed
-  //   { name: "process 6", completed: 100 }, // 100% completed
-  //   { name: "process 7", completed: 0 }, // 0% completed
-  //   { name: "process 8", completed: 50 }, // 50% completed
-  //   { name: "process 9", completed: 90 }, // 90% completed
-  //   { name: "process 10", completed: 30 }, // 30% completed
-  // ];
 
   useEffect(() => {
-    // console.log('processBar: ', processBar);
   }, [processBar])
 
   const intervals = [50, 20, 30, 40, 50, 60]; // in minutes

app/src/utils/shortcutkeys/handleShortcutKeys.ts

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import useModuleStore, { useThreeDStore } from "../../store/useModuleStore";
-import {useToggleStore} from "../../store/useUIToggleStore";
+import { usePlayerStore, useToggleStore } from "../../store/useUIToggleStore";
 import {
   useActiveSubTool,
   useActiveTool,
@@ -36,7 +36,7 @@ const KeyPressListener: React.FC = () => {
   const { setWalkMode } = useCameraModeStore();
   const { setIsVersionSaved } = useSaveVersion();
   const { isLogListVisible, setIsLogListVisible } = useLogger();
-
+  const { hidePlayer, setHidePlayer } = usePlayerStore();
 
   const isTextInput = (element: Element | null): boolean =>
     element instanceof HTMLInputElement ||
@@ -182,6 +182,10 @@ const KeyPressListener: React.FC = () => {
       setIsLogListVisible(!isLogListVisible);
     }
 
+    if (keyCombination === "H") {
+      setHidePlayer(!hidePlayer);
+    }
+
     if (keyCombination === "ESCAPE") {
       setWalkMode(false);
       setActiveTool("cursor");
@@ -198,7 +202,7 @@ const KeyPressListener: React.FC = () => {
 
     // Placeholder for future implementation
     if (
-      ["Ctrl+Z", "Ctrl+Y", "Ctrl+Shift+Z", "Ctrl+H", "Ctrl+F"].includes(
+      ["Ctrl+Z", "Ctrl+Y", "Ctrl+Shift+Z", "Ctrl+F"].includes(
         keyCombination
       )
     ) {
@@ -217,7 +221,8 @@ const KeyPressListener: React.FC = () => {
     toggleView,
     showShortcuts,
     isPlaying,
-    isLogListVisible
+    isLogListVisible,
+    hidePlayer
   ]);
 
   return null;