fix replay bug

src/uhm/components/editor/ReplayPreviewOverlay.tsx

@@ -56,8 +56,8 @@ export default function ReplayPreviewOverlay({
             style={{
                 position: "absolute",
                 inset: 0,
-                zIndex: 15,
+                zIndex: 60,
-                pointerEvents: "none",
+                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>
                                 </>
                             ) : (

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).",
         ],
     },
     {

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") {
+        const timeoutId = window.setTimeout(() => {
-            replayPreview.playFromSelection();
+            if (autoplayMode === "selection") {
-        } else {
+                playFromSelectionRef.current();
-            replayPreview.playFromStart();
+            } else {
-        }
+                playFromStartRef.current();
-    }, [autoplayMode, isReplayPreviewMode, currentActiveReplay, replayPreview]);
+            }
+        }, 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
+            <div style={searchBarWrapperStyle}>
-                focusedPlace={focusedPresentPlace}
+                <PresentPlaceSearch
-                onFocusPlace={handleFocusPresentPlace}
+                    focusedPlace={focusedPresentPlace}
-                onFocusHistoricalGeometry={handleFocusHistoricalGeometry}
+                    onFocusPlace={handleFocusPresentPlace}
-                onFocusWiki={handleFocusWiki}
+                    onFocusHistoricalGeometry={handleFocusHistoricalGeometry}
-                onClearFocus={clearPresentPlaceFocus}
+                    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}

src/uhm/components/preview/PublicPreviewClientPage.tsx

@@ -504,9 +504,16 @@ export default function PublicPreviewClientPage({
     }, []);
 
     const handleResetPreviewReplay = useCallback(() => {
-        setReplayMode("idle");
+        if (!activeReplay) {
-        replayPreview.resetPreview();
+            setReplayMode("idle");
-    }, [replayPreview]);
+            replayPreview.resetPreview();
+            return;
+        }
+        setReplayMode("playing");
+        setSelectedReplayStageId(activeReplay.stageId);
+        setSelectedReplayStepIndex(activeReplay.stepIndex);
+        replayPreview.playFromStart();
+    }, [activeReplay, replayPreview]);
 
     const handleExitReplay = useCallback(() => {
         setReplayMode("idle");