mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-03-10 14:13:19 +00:00
87ff81035f
* added the "Open Preview in a New Tab"
* enhancement
[Open Preview] [▼] // Two buttons side by side
|
+-- [Mobile (375x667)] // Dropdown menu
|-- [Tablet (768x1024)]
|-- [Laptop (1366x768)]
+-- [Desktop (1920x1080)]
* Update Preview.tsx
* Update Preview.tsx
433 lines
14 KiB
TypeScript
433 lines
14 KiB
TypeScript
import { memo, useCallback, useEffect, useRef, useState } from 'react';
|
|
import { useStore } from '@nanostores/react';
|
|
import { IconButton } from '~/components/ui/IconButton';
|
|
import { workbenchStore } from '~/lib/stores/workbench';
|
|
import { PortDropdown } from './PortDropdown';
|
|
import { ScreenshotSelector } from './ScreenshotSelector';
|
|
|
|
type ResizeSide = 'left' | 'right' | null;
|
|
|
|
interface WindowSize {
|
|
name: string;
|
|
width: number;
|
|
height: number;
|
|
}
|
|
|
|
const WINDOW_SIZES: WindowSize[] = [
|
|
{ name: 'Mobile (375x667)', width: 375, height: 667 },
|
|
{ name: 'Tablet (768x1024)', width: 768, height: 1024 },
|
|
{ name: 'Laptop (1366x768)', width: 1366, height: 768 },
|
|
{ name: 'Desktop (1920x1080)', width: 1920, height: 1080 },
|
|
];
|
|
|
|
export const Preview = memo(() => {
|
|
const iframeRef = useRef<HTMLIFrameElement>(null);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const [activePreviewIndex, setActivePreviewIndex] = useState(0);
|
|
const [isPortDropdownOpen, setIsPortDropdownOpen] = useState(false);
|
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
const [isPreviewOnly, setIsPreviewOnly] = useState(false);
|
|
const hasSelectedPreview = useRef(false);
|
|
const previews = useStore(workbenchStore.previews);
|
|
const activePreview = previews[activePreviewIndex];
|
|
|
|
const [url, setUrl] = useState('');
|
|
const [iframeUrl, setIframeUrl] = useState<string | undefined>();
|
|
const [isSelectionMode, setIsSelectionMode] = useState(false);
|
|
|
|
// Toggle between responsive mode and device mode
|
|
const [isDeviceModeOn, setIsDeviceModeOn] = useState(false);
|
|
|
|
// Use percentage for width
|
|
const [widthPercent, setWidthPercent] = useState<number>(37.5);
|
|
|
|
const resizingState = useRef({
|
|
isResizing: false,
|
|
side: null as ResizeSide,
|
|
startX: 0,
|
|
startWidthPercent: 37.5,
|
|
windowWidth: window.innerWidth,
|
|
});
|
|
|
|
const SCALING_FACTOR = 2;
|
|
|
|
const [isWindowSizeDropdownOpen, setIsWindowSizeDropdownOpen] = useState(false);
|
|
const [selectedWindowSize, setSelectedWindowSize] = useState<WindowSize>(WINDOW_SIZES[0]);
|
|
|
|
useEffect(() => {
|
|
if (!activePreview) {
|
|
setUrl('');
|
|
setIframeUrl(undefined);
|
|
|
|
return;
|
|
}
|
|
|
|
const { baseUrl } = activePreview;
|
|
setUrl(baseUrl);
|
|
setIframeUrl(baseUrl);
|
|
}, [activePreview]);
|
|
|
|
const validateUrl = useCallback(
|
|
(value: string) => {
|
|
if (!activePreview) {
|
|
return false;
|
|
}
|
|
|
|
const { baseUrl } = activePreview;
|
|
|
|
if (value === baseUrl) {
|
|
return true;
|
|
} else if (value.startsWith(baseUrl)) {
|
|
return ['/', '?', '#'].includes(value.charAt(baseUrl.length));
|
|
}
|
|
|
|
return false;
|
|
},
|
|
[activePreview],
|
|
);
|
|
|
|
const findMinPortIndex = useCallback(
|
|
(minIndex: number, preview: { port: number }, index: number, array: { port: number }[]) => {
|
|
return preview.port < array[minIndex].port ? index : minIndex;
|
|
},
|
|
[],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (previews.length > 1 && !hasSelectedPreview.current) {
|
|
const minPortIndex = previews.reduce(findMinPortIndex, 0);
|
|
setActivePreviewIndex(minPortIndex);
|
|
}
|
|
}, [previews, findMinPortIndex]);
|
|
|
|
const reloadPreview = () => {
|
|
if (iframeRef.current) {
|
|
iframeRef.current.src = iframeRef.current.src;
|
|
}
|
|
};
|
|
|
|
const toggleFullscreen = async () => {
|
|
if (!isFullscreen && containerRef.current) {
|
|
await containerRef.current.requestFullscreen();
|
|
} else if (document.fullscreenElement) {
|
|
await document.exitFullscreen();
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const handleFullscreenChange = () => {
|
|
setIsFullscreen(!!document.fullscreenElement);
|
|
};
|
|
|
|
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
|
|
|
return () => {
|
|
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
|
};
|
|
}, []);
|
|
|
|
const toggleDeviceMode = () => {
|
|
setIsDeviceModeOn((prev) => !prev);
|
|
};
|
|
|
|
const startResizing = (e: React.MouseEvent, side: ResizeSide) => {
|
|
if (!isDeviceModeOn) {
|
|
return;
|
|
}
|
|
|
|
document.body.style.userSelect = 'none';
|
|
|
|
resizingState.current.isResizing = true;
|
|
resizingState.current.side = side;
|
|
resizingState.current.startX = e.clientX;
|
|
resizingState.current.startWidthPercent = widthPercent;
|
|
resizingState.current.windowWidth = window.innerWidth;
|
|
|
|
document.addEventListener('mousemove', onMouseMove);
|
|
document.addEventListener('mouseup', onMouseUp);
|
|
|
|
e.preventDefault();
|
|
};
|
|
|
|
const onMouseMove = (e: MouseEvent) => {
|
|
if (!resizingState.current.isResizing) {
|
|
return;
|
|
}
|
|
|
|
const dx = e.clientX - resizingState.current.startX;
|
|
const windowWidth = resizingState.current.windowWidth;
|
|
|
|
const dxPercent = (dx / windowWidth) * 100 * SCALING_FACTOR;
|
|
|
|
let newWidthPercent = resizingState.current.startWidthPercent;
|
|
|
|
if (resizingState.current.side === 'right') {
|
|
newWidthPercent = resizingState.current.startWidthPercent + dxPercent;
|
|
} else if (resizingState.current.side === 'left') {
|
|
newWidthPercent = resizingState.current.startWidthPercent - dxPercent;
|
|
}
|
|
|
|
newWidthPercent = Math.max(10, Math.min(newWidthPercent, 90));
|
|
|
|
setWidthPercent(newWidthPercent);
|
|
};
|
|
|
|
const onMouseUp = () => {
|
|
resizingState.current.isResizing = false;
|
|
resizingState.current.side = null;
|
|
document.removeEventListener('mousemove', onMouseMove);
|
|
document.removeEventListener('mouseup', onMouseUp);
|
|
|
|
document.body.style.userSelect = '';
|
|
};
|
|
|
|
useEffect(() => {
|
|
const handleWindowResize = () => {
|
|
// Optional: Adjust widthPercent if necessary
|
|
};
|
|
|
|
window.addEventListener('resize', handleWindowResize);
|
|
|
|
return () => {
|
|
window.removeEventListener('resize', handleWindowResize);
|
|
};
|
|
}, []);
|
|
|
|
const GripIcon = () => (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: '100%',
|
|
pointerEvents: 'none',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
color: 'rgba(0,0,0,0.5)',
|
|
fontSize: '10px',
|
|
lineHeight: '5px',
|
|
userSelect: 'none',
|
|
marginLeft: '1px',
|
|
}}
|
|
>
|
|
••• •••
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const openInNewWindow = (size: WindowSize) => {
|
|
if (activePreview?.baseUrl) {
|
|
const match = activePreview.baseUrl.match(/^https?:\/\/([^.]+)\.local-credentialless\.webcontainer-api\.io/);
|
|
|
|
if (match) {
|
|
const previewId = match[1];
|
|
const previewUrl = `/webcontainer/preview/${previewId}`;
|
|
const newWindow = window.open(
|
|
previewUrl,
|
|
'_blank',
|
|
`noopener,noreferrer,width=${size.width},height=${size.height},menubar=no,toolbar=no,location=no,status=no`,
|
|
);
|
|
|
|
if (newWindow) {
|
|
newWindow.focus();
|
|
}
|
|
} else {
|
|
console.warn('[Preview] Invalid WebContainer URL:', activePreview.baseUrl);
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className={`w-full h-full flex flex-col relative ${isPreviewOnly ? 'fixed inset-0 z-50 bg-white' : ''}`}
|
|
>
|
|
{isPortDropdownOpen && (
|
|
<div className="z-iframe-overlay w-full h-full absolute" onClick={() => setIsPortDropdownOpen(false)} />
|
|
)}
|
|
<div className="bg-bolt-elements-background-depth-2 p-2 flex items-center gap-1.5">
|
|
<IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
|
|
<IconButton
|
|
icon="i-ph:selection"
|
|
onClick={() => setIsSelectionMode(!isSelectionMode)}
|
|
className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''}
|
|
/>
|
|
<div className="flex items-center gap-1 flex-grow bg-bolt-elements-preview-addressBar-background border border-bolt-elements-borderColor text-bolt-elements-preview-addressBar-text rounded-full px-3 py-1 text-sm hover:bg-bolt-elements-preview-addressBar-backgroundHover hover:focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within-border-bolt-elements-borderColorActive focus-within:text-bolt-elements-preview-addressBar-textActive">
|
|
<input
|
|
title="URL"
|
|
ref={inputRef}
|
|
className="w-full bg-transparent outline-none"
|
|
type="text"
|
|
value={url}
|
|
onChange={(event) => {
|
|
setUrl(event.target.value);
|
|
}}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter' && validateUrl(url)) {
|
|
setIframeUrl(url);
|
|
|
|
if (inputRef.current) {
|
|
inputRef.current.blur();
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{previews.length > 1 && (
|
|
<PortDropdown
|
|
activePreviewIndex={activePreviewIndex}
|
|
setActivePreviewIndex={setActivePreviewIndex}
|
|
isDropdownOpen={isPortDropdownOpen}
|
|
setHasSelectedPreview={(value) => (hasSelectedPreview.current = value)}
|
|
setIsDropdownOpen={setIsPortDropdownOpen}
|
|
previews={previews}
|
|
/>
|
|
)}
|
|
|
|
<IconButton
|
|
icon="i-ph:devices"
|
|
onClick={toggleDeviceMode}
|
|
title={isDeviceModeOn ? 'Switch to Responsive Mode' : 'Switch to Device Mode'}
|
|
/>
|
|
|
|
<IconButton
|
|
icon="i-ph:layout-light"
|
|
onClick={() => setIsPreviewOnly(!isPreviewOnly)}
|
|
title={isPreviewOnly ? 'Show Full Interface' : 'Show Preview Only'}
|
|
/>
|
|
|
|
<IconButton
|
|
icon={isFullscreen ? 'i-ph:arrows-in' : 'i-ph:arrows-out'}
|
|
onClick={toggleFullscreen}
|
|
title={isFullscreen ? 'Exit Full Screen' : 'Full Screen'}
|
|
/>
|
|
|
|
<div className="relative">
|
|
<IconButton
|
|
icon="i-ph:arrow-square-out"
|
|
onClick={() => openInNewWindow(selectedWindowSize)}
|
|
title={`Open Preview in ${selectedWindowSize.name} Window`}
|
|
/>
|
|
<IconButton
|
|
icon="i-ph:caret-down"
|
|
onClick={() => setIsWindowSizeDropdownOpen(!isWindowSizeDropdownOpen)}
|
|
className="ml-1"
|
|
title="Select Window Size"
|
|
/>
|
|
|
|
{isWindowSizeDropdownOpen && (
|
|
<>
|
|
<div className="fixed inset-0 z-50" onClick={() => setIsWindowSizeDropdownOpen(false)} />
|
|
<div className="absolute right-0 top-full mt-1 z-50 bg-bolt-elements-background-depth-2 rounded-lg shadow-lg border border-bolt-elements-borderColor overflow-hidden">
|
|
{WINDOW_SIZES.map((size) => (
|
|
<button
|
|
key={size.name}
|
|
className="w-full px-4 py-2 text-left hover:bg-bolt-elements-background-depth-3 text-sm whitespace-nowrap"
|
|
onClick={() => {
|
|
setSelectedWindowSize(size);
|
|
setIsWindowSizeDropdownOpen(false);
|
|
openInNewWindow(size);
|
|
}}
|
|
>
|
|
{size.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 border-t border-bolt-elements-borderColor flex justify-center items-center overflow-auto">
|
|
<div
|
|
style={{
|
|
width: isDeviceModeOn ? `${widthPercent}%` : '100%',
|
|
height: '100%',
|
|
overflow: 'visible',
|
|
background: '#fff',
|
|
position: 'relative',
|
|
display: 'flex',
|
|
}}
|
|
>
|
|
{activePreview ? (
|
|
<>
|
|
<iframe
|
|
ref={iframeRef}
|
|
title="preview"
|
|
className="border-none w-full h-full bg-white"
|
|
src={iframeUrl}
|
|
sandbox="allow-scripts allow-forms allow-popups allow-modals allow-storage-access-by-user-activation allow-same-origin"
|
|
allow="cross-origin-isolated"
|
|
/>
|
|
<ScreenshotSelector
|
|
isSelectionMode={isSelectionMode}
|
|
setIsSelectionMode={setIsSelectionMode}
|
|
containerRef={iframeRef}
|
|
/>
|
|
</>
|
|
) : (
|
|
<div className="flex w-full h-full justify-center items-center bg-white">No preview available</div>
|
|
)}
|
|
|
|
{isDeviceModeOn && (
|
|
<>
|
|
<div
|
|
onMouseDown={(e) => startResizing(e, 'left')}
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '15px',
|
|
marginLeft: '-15px',
|
|
height: '100%',
|
|
cursor: 'ew-resize',
|
|
background: 'rgba(255,255,255,.2)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
transition: 'background 0.2s',
|
|
userSelect: 'none',
|
|
}}
|
|
onMouseOver={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.5)')}
|
|
onMouseOut={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.2)')}
|
|
title="Drag to resize width"
|
|
>
|
|
<GripIcon />
|
|
</div>
|
|
|
|
<div
|
|
onMouseDown={(e) => startResizing(e, 'right')}
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
width: '15px',
|
|
marginRight: '-15px',
|
|
height: '100%',
|
|
cursor: 'ew-resize',
|
|
background: 'rgba(255,255,255,.2)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
transition: 'background 0.2s',
|
|
userSelect: 'none',
|
|
}}
|
|
onMouseOver={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.5)')}
|
|
onMouseOut={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.2)')}
|
|
title="Drag to resize width"
|
|
>
|
|
<GripIcon />
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|