From 0ce198aa5e5b67db17ac620cd01c0ea0ebbea5cf Mon Sep 17 00:00:00 2001
From: taDuc <tranduc.wsp@gmail.com>
Date: Sun, 7 Jun 2026 18:46:00 +0700
Subject: [PATCH] fix replay bug

---
 .../editor/ReplayPreviewOverlay.tsx           |  6 +-
 .../preview/FirstVisitGuideModal.tsx          |  2 +-
 src/uhm/components/preview/PreviewLayout.tsx  | 66 +++++++++++++++----
 .../preview/PublicPreviewClientPage.tsx       | 13 +++-
 4 files changed, 66 insertions(+), 21 deletions(-)

diff --git a/src/uhm/components/editor/ReplayPreviewOverlay.tsx b/src/uhm/components/editor/ReplayPreviewOverlay.tsx
index 35bf10c..ea70a89 100644
--- a/src/uhm/components/editor/ReplayPreviewOverlay.tsx
+++ b/src/uhm/components/editor/ReplayPreviewOverlay.tsx
@@ -56,8 +56,8 @@ export default function ReplayPreviewOverlay({
             style={{
                 position: "absolute",
                 inset: 0,
-                zIndex: 15,
-                pointerEvents: "none",
+                zIndex: 60,
+                pointerEvents: isPreviewMode ? "auto" : "none",
             }}
         >
             {toasts.length ? (
@@ -272,7 +272,7 @@ export default function ReplayPreviewOverlay({
                                         onClick={onResetPreview}
                                         style={previewButtonStyle("#1e3a8a")}
                                     >
-                                        Reset
+                                        Phát lại từ đầu
                                     </button>
                                 </>
                             ) : (
diff --git a/src/uhm/components/preview/FirstVisitGuideModal.tsx b/src/uhm/components/preview/FirstVisitGuideModal.tsx
index d990c06..0f9c288 100644
--- a/src/uhm/components/preview/FirstVisitGuideModal.tsx
+++ b/src/uhm/components/preview/FirstVisitGuideModal.tsx
@@ -38,7 +38,7 @@ const guideItems: GuideItem[] = [
     {
         title: "Nếu đối tượng có replay, nhấn nút phát để xem diễn biến.",
         details: [
-            "Trong quá trình replay có thể dừng và tương tác như bình thường.",
+            "Trong quá trình replay có thể dừng và tương tác như bình thường(những vì vấn đề kĩ thuật chúng tôi chưa thể làm việc đó mà không xảy ra lỗi, nên hiện tại chức năng replay bị hạn chế tương tác).",
         ],
     },
     {
diff --git a/src/uhm/components/preview/PreviewLayout.tsx b/src/uhm/components/preview/PreviewLayout.tsx
index 47e0bea..f69d5d1 100644
--- a/src/uhm/components/preview/PreviewLayout.tsx
+++ b/src/uhm/components/preview/PreviewLayout.tsx
@@ -133,6 +133,13 @@ const PreviewLayout = forwardRef<PreviewLayoutHandle, Props>(({
     }, [currentActiveReplay, mode, setPreviewActiveEntityId, setPreviewWikiCache]);
 
     const autoplayedReplayIdRef = useRef<string | number | null>(null);
+    const playFromStartRef = useRef(replayPreview.playFromStart);
+    const playFromSelectionRef = useRef(replayPreview.playFromSelection);
+
+    useEffect(() => {
+        playFromStartRef.current = replayPreview.playFromStart;
+        playFromSelectionRef.current = replayPreview.playFromSelection;
+    }, [replayPreview.playFromSelection, replayPreview.playFromStart]);
 
     // Autoplay replay on mount/session load
     useEffect(() => {
@@ -143,12 +150,16 @@ const PreviewLayout = forwardRef<PreviewLayoutHandle, Props>(({
         if (autoplayedReplayIdRef.current === currentActiveReplay.id) return;
         autoplayedReplayIdRef.current = currentActiveReplay.id;
 
-        if (autoplayMode === "selection") {
-            replayPreview.playFromSelection();
-        } else {
-            replayPreview.playFromStart();
-        }
-    }, [autoplayMode, isReplayPreviewMode, currentActiveReplay, replayPreview]);
+        const timeoutId = window.setTimeout(() => {
+            if (autoplayMode === "selection") {
+                playFromSelectionRef.current();
+            } else {
+                playFromStartRef.current();
+            }
+        }, 30);
+
+        return () => window.clearTimeout(timeoutId);
+    }, [autoplayMode, isReplayPreviewMode, currentActiveReplay]);
 
     const {
         timelineYear: replayPreviewTimelineYear,
@@ -644,6 +655,24 @@ const PreviewLayout = forwardRef<PreviewLayoutHandle, Props>(({
         };
     }, [isReplayPreviewRightPanelOpen, isLargeScreen, previewSidebarWidth]);
 
+    const searchBarWrapperStyle = useMemo(() => {
+        return {
+            position: "absolute" as const,
+            top: 10,
+            left: 84,
+            right: (isReplayPreviewRightPanelOpen && isLargeScreen) ? previewSidebarWidth + 32 : 18,
+            zIndex: 18,
+            display: "flex",
+            alignItems: "flex-start",
+            pointerEvents: "none" as const,
+            maxWidth: "calc(100vw - 102px)",
+        };
+    }, [isLargeScreen, isReplayPreviewRightPanelOpen, previewSidebarWidth]);
+
+    const searchBarWidth = useMemo(() => {
+        return "min(392px, calc(100vw - 120px))";
+    }, []);
+
 
 
     // WikiSelectionPanel rows
@@ -673,13 +702,22 @@ const PreviewLayout = forwardRef<PreviewLayoutHandle, Props>(({
     return (
         <>
 
-            <PresentPlaceSearch
-                focusedPlace={focusedPresentPlace}
-                onFocusPlace={handleFocusPresentPlace}
-                onFocusHistoricalGeometry={handleFocusHistoricalGeometry}
-                onFocusWiki={handleFocusWiki}
-                onClearFocus={clearPresentPlaceFocus}
-            />
+            <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,
+                    }}
+                />
+            </div>
 
             {isReplayPreviewMode ? (
                 <ReplayPreviewOverlay
@@ -695,7 +733,7 @@ const PreviewLayout = forwardRef<PreviewLayoutHandle, Props>(({
                     totalSteps={replayPreview.totalSteps}
                     onPlayPreview={replayPreview.playFromStart}
                     onStopPreview={replayPreview.stopPreview}
-                    onResetPreview={replayPreview.resetPreview}
+                    onResetPreview={replayPreview.playFromStart}
                     onExitPreview={handleExitReplayPreview}
                 />
             ) : null}
diff --git a/src/uhm/components/preview/PublicPreviewClientPage.tsx b/src/uhm/components/preview/PublicPreviewClientPage.tsx
index a6ad772..26d0b94 100644
--- a/src/uhm/components/preview/PublicPreviewClientPage.tsx
+++ b/src/uhm/components/preview/PublicPreviewClientPage.tsx
@@ -504,9 +504,16 @@ export default function PublicPreviewClientPage({
     }, []);
 
     const handleResetPreviewReplay = useCallback(() => {
-        setReplayMode("idle");
-        replayPreview.resetPreview();
-    }, [replayPreview]);
+        if (!activeReplay) {
+            setReplayMode("idle");
+            replayPreview.resetPreview();
+            return;
+        }
+        setReplayMode("playing");
+        setSelectedReplayStageId(activeReplay.stageId);
+        setSelectedReplayStepIndex(activeReplay.stepIndex);
+        replayPreview.playFromStart();
+    }, [activeReplay, replayPreview]);
 
     const handleExitReplay = useCallback(() => {
         setReplayMode("idle");