feat: hide interface elements on mobile during replay mode and adjust overlay positioning
Build and Release / release (push) Successful in 37s
Build and Release / release (push) Successful in 37s
This commit is contained in:
taDuc
@@ -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)",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user