From 4f9f2cd8542da5c717731caefc93497b4617b0a9 Mon Sep 17 00:00:00 2001
From: taDuc <tranduc.wsp@gmail.com>
Date: Tue, 16 Jun 2026 00:58:36 +0700
Subject: [PATCH] feat: hide interface elements on mobile during replay mode
 and adjust overlay positioning

---
 .../editor/ReplayPreviewOverlay.tsx           | 17 ++---
 .../components/preview/PreviewMapShell.tsx    | 72 ++++++++++---------
 .../preview/PublicPreviewClientPage.tsx       | 49 +++++++------
 src/uhm/lib/replay/uiActions.ts               |  6 ++
 4 files changed, 76 insertions(+), 68 deletions(-)

diff --git a/src/uhm/components/editor/ReplayPreviewOverlay.tsx b/src/uhm/components/editor/ReplayPreviewOverlay.tsx
index 87230f6..bf6ce5f 100644
--- a/src/uhm/components/editor/ReplayPreviewOverlay.tsx
+++ b/src/uhm/components/editor/ReplayPreviewOverlay.tsx
@@ -136,19 +136,12 @@ export default function ReplayPreviewOverlay({
                               }
                             : {
                                   position: "absolute",
-                                  left: 18,
-                                  right: 18,
+                                  left: 16,
+                                  right: 16,
+                                  bottom: 20,
                                   pointerEvents: "none",
                                   display: "flex",
                                   justifyContent: "center",
-                                  ...(sidebarOpen
-                                      ? {
-                                            top: 130,
-                                            bottom: "auto",
-                                        }
-                                      : {
-                                            bottom: 110,
-                                        }),
                               }
                     }
                 >
@@ -226,10 +219,10 @@ export default function ReplayPreviewOverlay({
                 <div
                     style={{
                         position: "absolute",
-                        top: 64,
+                        top: isLargeScreen ? 64 : 16,
                         left: "50%",
                         transform: "translateX(-50%)",
-                        width: "min(520px, calc(100% - 72px))",
+                        width: isLargeScreen ? "min(520px, calc(100% - 72px))" : "min(520px, calc(100% - 32px))",
                         borderRadius: 18,
                         border: "1px solid rgba(148, 163, 184, 0.24)",
                         background: "rgba(15, 23, 42, 0.9)",
diff --git a/src/uhm/components/preview/PreviewMapShell.tsx b/src/uhm/components/preview/PreviewMapShell.tsx
index bac7850..8989426 100644
--- a/src/uhm/components/preview/PreviewMapShell.tsx
+++ b/src/uhm/components/preview/PreviewMapShell.tsx
@@ -63,6 +63,7 @@ type Props = {
     onSidebarHeightChange?: (height: number) => void;
     showViewportControls?: boolean;
     hasAnyBottomPanel?: boolean;
+    isReplayMode?: boolean;
 };
 
 export default function PreviewMapShell({
@@ -113,6 +114,7 @@ export default function PreviewMapShell({
     onSidebarHeightChange,
     showViewportControls = true,
     hasAnyBottomPanel = false,
+    isReplayMode = false,
 }: Props) {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
@@ -187,19 +189,21 @@ export default function PreviewMapShell({
                     height="100svh"
                 />
 
-                <TimelineBar
-                    year={timelineYear}
-                    onYearChange={onTimelineYearChange}
-                    timeRange={timelineTimeRange}
-                    onTimeRangeChange={onTimelineTimeRangeChange}
-                    isLoading={isTimelineLoading}
-                    disabled={timelineDisabled}
-                    statusText={timelineStatusText}
-                    filterEnabled={timelineFilterEnabled}
-                    onFilterEnabledChange={onTimelineFilterEnabledChange}
-                    style={timelineStyle}
-                    onPlayReplay={onPlayPreviewReplay}
-                />
+                {!(isReplayMode && isMobileOrTablet) ? (
+                    <TimelineBar
+                        year={timelineYear}
+                        onYearChange={onTimelineYearChange}
+                        timeRange={timelineTimeRange}
+                        onTimeRangeChange={onTimelineTimeRangeChange}
+                        isLoading={isTimelineLoading}
+                        disabled={timelineDisabled}
+                        statusText={timelineStatusText}
+                        filterEnabled={timelineFilterEnabled}
+                        onFilterEnabledChange={onTimelineFilterEnabledChange}
+                        style={timelineStyle}
+                        onPlayReplay={onPlayPreviewReplay}
+                    />
+                ) : null}
 
                 <style dangerouslySetInnerHTML={{ __html: `
                     @keyframes slideDown {
@@ -214,30 +218,31 @@ export default function PreviewMapShell({
                     }
                 `}} />
 
-                <aside
-                    style={{
-                        position: "absolute",
-                        top: 10,
-                        bottom: (hasBottomPanel && isMobileOrTablet) ? `${(sidebarHeight || 400) + 20}px` : 20,
-                        left: 18,
-                        zIndex: 70,
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: 12,
-                        width: 58,
-                        pointerEvents: "none",
-                        transition: "bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                    }}
-                >
-                    <div
+                {!(isReplayMode && isMobileOrTablet) ? (
+                    <aside
                         style={{
+                            position: "absolute",
+                            top: 10,
+                            bottom: (hasBottomPanel && isMobileOrTablet) ? `${(sidebarHeight || 400) + 20}px` : 20,
+                            left: 18,
+                            zIndex: 70,
                             display: "flex",
                             flexDirection: "column",
-                            gap: 8,
-                            alignItems: "center",
-                            pointerEvents: "auto",
+                            gap: 12,
+                            width: 58,
+                            pointerEvents: "none",
+                            transition: "bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
                         }}
                     >
+                        <div
+                            style={{
+                                display: "flex",
+                                flexDirection: "column",
+                                gap: 8,
+                                alignItems: "center",
+                                pointerEvents: "auto",
+                            }}
+                        >
                         <button
                             type="button"
                             onClick={() => setIsMenuOpen(!isMenuOpen)}
@@ -418,6 +423,7 @@ export default function PreviewMapShell({
                         </div>
                     )}
                 </aside>
+                ) : null}
 
 
                 
@@ -461,7 +467,7 @@ export default function PreviewMapShell({
                     </aside>
                 ) : null}
 
-                <ChatbotWidget hideFloatingButton />
+                {!(isReplayMode && isMobileOrTablet) && <ChatbotWidget hideFloatingButton />}
                 {children}
             </div>
         </div>
diff --git a/src/uhm/components/preview/PublicPreviewClientPage.tsx b/src/uhm/components/preview/PublicPreviewClientPage.tsx
index c9839bf..eae2380 100644
--- a/src/uhm/components/preview/PublicPreviewClientPage.tsx
+++ b/src/uhm/components/preview/PublicPreviewClientPage.tsx
@@ -825,6 +825,7 @@ export default function PublicPreviewClientPage({
                         onSelectFeatureIds={setSelectedFeatureIds}
                         instantLoad={instantLoad}
                         onToggleInstantLoad={toggleInstantLoad}
+                        isReplayMode={replayMode !== "idle"}
                         isLayerPanelVisible={isLayerPanelVisible}
                         onLayerPanelVisibleChange={setIsLayerPanelVisible}
                         backgroundVisibility={backgroundVisibility}
@@ -888,30 +889,32 @@ export default function PublicPreviewClientPage({
                             ) : null
                         }
                     >
-                        <div style={searchBarWrapperStyle}>
-                            <PresentPlaceSearch
-                                focusedPlace={focusedPresentPlace}
-                                onFocusPlace={handleFocusPresentPlace}
-                                onFocusHistoricalGeometry={handleFocusHistoricalGeometry}
-                                onFocusWiki={handleFocusWiki}
-                                onClearFocus={clearPresentPlaceFocus}
-                                style={{
-                                    position: "relative",
-                                    top: 0,
-                                    left: 0,
-                                    transform: "none",
-                                    width: searchBarWidth,
-                                }}
-                            />
-                            {isLargeScreen ? (
-                                <PublicMapZoomPanel
-                                    mapHandleRef={mapHandleRef}
-                                    onPlayPreviewReplay={activeReplay && replayMode === "idle" ? handlePlayPreviewReplay : undefined}
-                                    onResumePreviewReplay={replayMode === "paused" ? handleResumePreviewReplay : undefined}
-                                    onStopPreviewReplay={replayMode === "playing" ? handleStopPreviewReplay : undefined}
+                        {!(replayMode !== "idle" && !isLargeScreen) ? (
+                            <div style={searchBarWrapperStyle}>
+                                <PresentPlaceSearch
+                                    focusedPlace={focusedPresentPlace}
+                                    onFocusPlace={handleFocusPresentPlace}
+                                    onFocusHistoricalGeometry={handleFocusHistoricalGeometry}
+                                    onFocusWiki={handleFocusWiki}
+                                    onClearFocus={clearPresentPlaceFocus}
+                                    style={{
+                                        position: "relative",
+                                        top: 0,
+                                        left: 0,
+                                        transform: "none",
+                                        width: searchBarWidth,
+                                    }}
                                 />
-                            ) : null}
-                        </div>
+                                {isLargeScreen ? (
+                                    <PublicMapZoomPanel
+                                        mapHandleRef={mapHandleRef}
+                                        onPlayPreviewReplay={activeReplay && replayMode === "idle" ? handlePlayPreviewReplay : undefined}
+                                        onResumePreviewReplay={replayMode === "paused" ? handleResumePreviewReplay : undefined}
+                                        onStopPreviewReplay={replayMode === "playing" ? handleStopPreviewReplay : undefined}
+                                    />
+                                ) : null}
+                            </div>
+                        ) : null}
                         <FirstVisitGuideModal />
                     </PreviewMapShell>
                 )}
diff --git a/src/uhm/lib/replay/uiActions.ts b/src/uhm/lib/replay/uiActions.ts
index 868f788..61333c4 100644
--- a/src/uhm/lib/replay/uiActions.ts
+++ b/src/uhm/lib/replay/uiActions.ts
@@ -24,6 +24,12 @@ export const uiActions = {
             setSidebarOpen(false);
             onSelectWiki("");
         } else {
+            // Hạn chế không tự động mở wiki trong chế độ Replay trên mobile/tablet để tránh đè giao diện
+            if (typeof window !== "undefined" && window.innerWidth < 1024) {
+                setSidebarOpen(false);
+                onSelectWiki("");
+                return;
+            }
             setSidebarOpen(true);
             onSelectWiki(wikiId);
         }