Kain344/History-user
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: hide interface elements on mobile during replay mode and adjust overlay positioning
Build and Release / release (push) Successful in 37s
Details

Browse Source
This commit is contained in:
taDuc
2026-06-16 00:58:36 +07:00
parent 495162ff43
commit 4f9f2cd854
4 changed files with 76 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/uhm/components/editor/ReplayPreviewOverlay.tsx
+5 -12
View File
@@ -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)",
src/uhm/components/preview/PreviewMapShell.tsx
+39 -33
View File
@@ -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>
src/uhm/components/preview/PublicPreviewClientPage.tsx
+26 -23
View File
@@ -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>
)}
src/uhm/lib/replay/uiActions.ts
+6
View File
@@ -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);
}