refactor: Implement hidePlayer state in ControlsPlayer and SimulationPlayer for better UI control

2025-05-15 11:32:16 +05:30 · 2025-05-15 11:32:16 +05:30 · 8facad31bc
parent 304ccf134a
commit 8facad31bc
4 changed files with 189 additions and 143 deletions
--- a/app/src/components/layout/controls/ControlsPlayer.tsx
+++ b/app/src/components/layout/controls/ControlsPlayer.tsx
@ -10,6 +10,7 @@ const ControlsPlayer = () => {
  const { setIsPlaying } = usePlayButtonStore();
  const { activeModule } = useModuleStore();
  const [walkMode, setWalkMode] = useState(false);
+  const [hidePlayer, setHidePlayer] = useState(false);

  const changeCamMode = () => {
    setWalkMode(!walkMode);
@ -17,37 +18,47 @@ const ControlsPlayer = () => {
  };
  return (
    <div className="controls-player-container">
-      <div className="controls-left">
-        <PlayIcon />
-        <div className="label">Running {activeModule}...</div>
-      </div>
+      {!hidePlayer && (
+        <div className="controls-left">
+          <PlayIcon />
+          <div className="label">Running {activeModule}...</div>
+        </div>
+      )}

      <div className="controls-right">
-        <div className="walkMode-wrapper">
-          <WalkIcon />
-          <InputToggle
-            value={walkMode}
-            inputKey="1"
-            label="Walk Mode"
-            onClick={changeCamMode}
-          />
-        </div>
+        {!hidePlayer && (
+          <div className="walkMode-wrapper">
+            <WalkIcon />
+            <InputToggle
+              value={walkMode}
+              inputKey="1"
+              label="Walk Mode"
+              onClick={changeCamMode}
+            />
+          </div>
+        )}
        <button
          id="controls-player-play-button"
-          className="btn-wrapper"
+          className={`btn-wrapper${hidePlayer ? " hide" : ""}`}
          onClick={() => setIsPlaying(false)}
        >
          <div className="icon">
            <ExitIcon />
          </div>
-          Exit
+          {!hidePlayer && "Exit"}
        </button>
-        <div className="btn-wrapper">
+        <button
+          className={`btn-wrapper${hidePlayer ? " hide" : ""}`}
+          id="hide-btn"
+          onClick={() => {
+            setHidePlayer(!hidePlayer);
+          }}
+        >
          <div className="icon">
            <EyeCloseIcon />
          </div>
-          Hide
-        </div>
+          {!hidePlayer && "Hide"}
+        </button>
      </div>
    </div>
  );
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@ -11,6 +11,7 @@ import {
  DailyProductionIcon,
  EndIcon,
  ExpandIcon,
+  EyeCloseIcon,
  HourlySimulationIcon,
  InfoIcon,
  MonthlyROI,
@ -30,6 +31,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 { speed, setSpeed } = useAnimationPlaySpeed();
  const { setIsPlaying } = usePlayButtonStore();
@ -161,10 +163,10 @@ const SimulationPlayer: React.FC = () => {

  return (
    <>
-      <div className="simulation-player-wrapper">
+      <div className={`simulation-player-wrapper${hidePlayer ? " hide" : ""}`}>
        <div className={`simulation-player-container ${expand ? "open" : ""}`}>
          <div className="controls-container">
-            {subModule === "analysis" && (
+            {!hidePlayer && subModule === "analysis" && (
              <div className="production-details">
                {/* hourlySimulation */}
                <div className="hourly-wrapper production-wrapper">
@ -213,7 +215,7 @@ const SimulationPlayer: React.FC = () => {
                </div>
              </div>
            )}
-            {subModule !== "analysis" && (
+            {!hidePlayer && subModule !== "analysis" && (
              <div className="header">
                <InfoIcon />
                {playSimulation
@ -222,26 +224,30 @@ const SimulationPlayer: React.FC = () => {
              </div>
            )}
            <div className="controls-wrapper">
-              <button
-                id="simulation-reset-button"
-                className="simulation-button-container"
-                onClick={() => {
-                  handleReset();
-                }}
-              >
-                <ResetIcon />
-                Reset
-              </button>
-              <button
-                id="simulation-play-button"
-                className="simulation-button-container"
-                onClick={() => {
-                  handlePlayStop();
-                }}
-              >
-                <PlayStopIcon />
-                {playSimulation ? "Play" : "Stop"}
-              </button>
+              {!hidePlayer && (
+                <button
+                  id="simulation-reset-button"
+                  className="simulation-button-container"
+                  onClick={() => {
+                    handleReset();
+                  }}
+                >
+                  <ResetIcon />
+                  Reset
+                </button>
+              )}
+              {!hidePlayer && (
+                <button
+                  id="simulation-play-button"
+                  className="simulation-button-container"
+                  onClick={() => {
+                    handlePlayStop();
+                  }}
+                >
+                  <PlayStopIcon />
+                  {playSimulation ? "Play" : "Stop"}
+                </button>
+              )}
              <button
                id="simulation-reset-button"
                className="simulation-button-container"
@ -250,7 +256,17 @@ const SimulationPlayer: React.FC = () => {
                }}
              >
                <ExitIcon />
-                Exit
+                {!hidePlayer && "Exit"}
+              </button>
+              <button
+                id="simulation-reset-button"
+                className="simulation-button-container"
+                onClick={() => {
+                  setHidePlayer(!hidePlayer);
+                }}
+              >
+                <EyeCloseIcon />
+                {!hidePlayer && "Hide"}
              </button>
              {subModule === "analysis" && (
                <button
@ -263,100 +279,102 @@ const SimulationPlayer: React.FC = () => {
              )}
            </div>
          </div>
-          <div className="progresser-wrapper">
-            <div className="time-displayer">
-              <div className="start-time-wrappper">
-                <div className="icon">
-                  <StartIcon />
-                </div>
-                <div className="time-wrapper">
-                  <div className="date">23 April ,25</div>
-                  <div className="time">04:41 PM</div>
-                </div>
-              </div>
-              <div className="time-progresser">
-                <div className="timeline">
-                  {intervals.map((label, index) => {
-                    const segmentProgress = (index / totalSegments) * 100;
-                    const isFilled = progress >= segmentProgress;
-                    return (
-                      <React.Fragment key={`${index}-${label}`}>
-                        <div className="label-dot-wrapper">
-                          <div className="label">{label} mins</div>
-                          <div
-                            className={`dot ${isFilled ? "filled" : ""}`}
-                          ></div>
-                        </div>
-                        {index < intervals.length - 1 && (
-                          <div
-                            className={`line ${
-                              progress >= ((index + 1) / totalSegments) * 100
-                                ? "filled"
-                                : ""
-                            }`}
-                          ></div>
-                        )}
-                      </React.Fragment>
-                    );
-                  })}
-                </div>
-              </div>
-
-              <div className="end-time-wrappper">
-                <div className="time-wrapper">
-                  <div className="time">00:10:20</div>
-                </div>
-                <div className="icon">
-                  <EndIcon />
-                </div>
-              </div>
-            </div>
-            <div className="speed-control-container">
-              <div className="min-value">
-                <div className="icon">
-                  <SpeedIcon />
-                </div>
-                Speed
-              </div>
-              <div className="slider-container" ref={sliderRef}>
-                <div className="speed-label mix-value">0.5X</div>
-                <div className="marker marker-10"></div>
-                <div className="marker marker-20"></div>
-                <div className="marker marker-30"></div>
-                <div className="marker marker-40"></div>
-                <div className="marker marker-50"></div>
-                <div className="marker marker-60"></div>
-                <div className="marker marker-70"></div>
-                <div className="marker marker-80"></div>
-                <div className="marker marker-90"></div>
-                <div className="custom-slider-wrapper">
-                  <div className="custom-slider">
-                    <button
-                      id="slider-handle"
-                      className={`slider-handle ${
-                        isDragging ? "dragging" : ""
-                      }`}
-                      style={{ left: `${calculateHandlePosition()}%` }}
-                      onMouseDown={handleMouseDown}
-                    >
-                      {speed.toFixed(1)}x
-                    </button>
-                    <input
-                      type="range"
-                      min="0.5"
-                      max={MAX_SPEED}
-                      step="0.1"
-                      value={speed}
-                      onChange={handleSpeedChange}
-                      className="slider-input"
-                    />
+          {!hidePlayer && (
+            <div className="progresser-wrapper">
+              <div className="time-displayer">
+                <div className="start-time-wrappper">
+                  <div className="icon">
+                    <StartIcon />
+                  </div>
+                  <div className="time-wrapper">
+                    <div className="date">23 April ,25</div>
+                    <div className="time">04:41 PM</div>
+                  </div>
+                </div>
+                <div className="time-progresser">
+                  <div className="timeline">
+                    {intervals.map((label, index) => {
+                      const segmentProgress = (index / totalSegments) * 100;
+                      const isFilled = progress >= segmentProgress;
+                      return (
+                        <React.Fragment key={`${index}-${label}`}>
+                          <div className="label-dot-wrapper">
+                            <div className="label">{label} mins</div>
+                            <div
+                              className={`dot ${isFilled ? "filled" : ""}`}
+                            ></div>
+                          </div>
+                          {index < intervals.length - 1 && (
+                            <div
+                              className={`line ${
+                                progress >= ((index + 1) / totalSegments) * 100
+                                  ? "filled"
+                                  : ""
+                              }`}
+                            ></div>
+                          )}
+                        </React.Fragment>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                <div className="end-time-wrappper">
+                  <div className="time-wrapper">
+                    <div className="time">00:10:20</div>
+                  </div>
+                  <div className="icon">
+                    <EndIcon />
+                  </div>
+                </div>
+              </div>
+              <div className="speed-control-container">
+                <div className="min-value">
+                  <div className="icon">
+                    <SpeedIcon />
+                  </div>
+                  Speed
+                </div>
+                <div className="slider-container" ref={sliderRef}>
+                  <div className="speed-label mix-value">0.5X</div>
+                  <div className="marker marker-10"></div>
+                  <div className="marker marker-20"></div>
+                  <div className="marker marker-30"></div>
+                  <div className="marker marker-40"></div>
+                  <div className="marker marker-50"></div>
+                  <div className="marker marker-60"></div>
+                  <div className="marker marker-70"></div>
+                  <div className="marker marker-80"></div>
+                  <div className="marker marker-90"></div>
+                  <div className="custom-slider-wrapper">
+                    <div className="custom-slider">
+                      <button
+                        id="slider-handle"
+                        className={`slider-handle ${
+                          isDragging ? "dragging" : ""
+                        }`}
+                        style={{ left: `${calculateHandlePosition()}%` }}
+                        onMouseDown={handleMouseDown}
+                      >
+                        {speed.toFixed(1)}x
+                      </button>
+                      <input
+                        type="range"
+                        min="0.5"
+                        max={MAX_SPEED}
+                        step="0.1"
+                        value={speed}
+                        onChange={handleSpeedChange}
+                        className="slider-input"
+                      />
+                    </div>
+                    <div className="speed-label max-value">{MAX_SPEED}x</div>
                  </div>
-                  <div className="speed-label max-value">{MAX_SPEED}x</div>
                </div>
              </div>
            </div>
-          </div>
-          {subModule === "analysis" && (
+          )}
+          {!hidePlayer && subModule === "analysis" && (
            <div className="processDisplayer">
              <div className="start-displayer timmer">00:00</div>
              <div className="end-displayer timmer">24:00</div>
--- a/app/src/styles/components/simulation/simulation.scss
+++ b/app/src/styles/components/simulation/simulation.scss
@ -8,7 +8,16 @@
  z-index: 2;
  transform: translate(-50%, 0);
  width: 70vw;
-
+  transition: all 0.3s;
+  &.hide {
+    width: fit-content;
+    .simulation-player-container
+      .controls-container
+      .simulation-button-container {
+      width: 32px;
+      height: 24px;
+    }
+  }
  .simulation-player-container {
    background: var(--background-color);
    padding: 7px;
@ -90,11 +99,12 @@
        @include flex-center;
        gap: 2px;
        padding: 4px 8px;
-        min-width: 64px;
+        width: 64px;
        background: var(--background-color);
        border-radius: #{$border-radius-extra-large};
        height: fit-content;
        cursor: pointer;
+        transition: all 0.2s;

        &:hover {
          outline: 1px solid var(--border-color);
@ -357,7 +367,7 @@
  @include flex-center;
  justify-content: space-between;
  position: fixed;
-  bottom: 40px;
+  bottom: 32px;
  left: 50%;
  transform: translate(-50%, 0);
  color: var(--accent-color);
@ -394,21 +404,23 @@
    }

    .btn-wrapper {
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      @include flex-center;
      gap: 2px;
      padding: 4px 8px;
-      min-width: 64px;
+      width: 64px;
      background: var(--background-color);
      border-radius: 20px;
      height: fit-content;
      cursor: pointer;
-      transition: color .2s;
+      transition: all 0.2s;
+      outline: 1px solid transparent;
      &:hover {
        outline: 1px solid var(--border-color);
        color: var(--accent-color);
      }
+      &.hide{
+        width: 32px;
+      }
      .icon {
        width: 16px;
        height: 16px;
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@ -22,7 +22,6 @@

  .floating {
    // width: calc(var(--realTimeViz-container-width) * 0.2px);
-
    // transform: scale(min(1, calc(var(--realTimeViz-container-width) / 1000)));

    min-width: 230px;
@ -63,7 +62,6 @@
    left: 50%;
    gap: 6px;
    border-radius: #{$border-radius-medium};
-
    overflow: auto;
    max-width: calc(100% - 500px);
    z-index: 3;
@ -71,6 +69,10 @@
    pointer-events: all;
    transition: all 0.3s linear;

+    &.bottom{
+      bottom: var(--bottomWidth);
+    }
+
    &::-webkit-scrollbar {
      display: none;
    }
@ -118,7 +120,10 @@
  }

  .zone-container.visualization-playing {
-    bottom: 70px;
+    bottom: 74px;
+    &.bottom{
+      bottom: var(--bottomWidth);
+    }
  }

  .zone-wrapper.bottom {