|
|
@ -1,19 +1,21 @@ |
|
|
|
import { FC, ReactNode, useEffect, useState } from 'react'; |
|
|
|
import { |
|
|
|
|
|
|
|
DesktopWindows as DesktopWindowsIcon, |
|
|
|
|
|
|
|
PowerOffOutlined as PowerOffOutlinedIcon, |
|
|
|
|
|
|
|
} from '@mui/icons-material'; |
|
|
|
import { |
|
|
|
import { |
|
|
|
Box, |
|
|
|
Box, |
|
|
|
IconButton as MUIIconButton, |
|
|
|
IconButton as MUIIconButton, |
|
|
|
IconButtonProps as MUIIconButtonProps, |
|
|
|
IconButtonProps as MUIIconButtonProps, |
|
|
|
} from '@mui/material'; |
|
|
|
} from '@mui/material'; |
|
|
|
import { |
|
|
|
import { FC, ReactNode, useEffect, useMemo, useState } from 'react'; |
|
|
|
DesktopWindows as DesktopWindowsIcon, |
|
|
|
|
|
|
|
PowerOffOutlined as PowerOffOutlinedIcon, |
|
|
|
|
|
|
|
} from '@mui/icons-material'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import API_BASE_URL from '../../lib/consts/API_BASE_URL'; |
|
|
|
import API_BASE_URL from '../../lib/consts/API_BASE_URL'; |
|
|
|
import { BORDER_RADIUS, GREY } from '../../lib/consts/DEFAULT_THEME'; |
|
|
|
import { BORDER_RADIUS, GREY } from '../../lib/consts/DEFAULT_THEME'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import FlexBox from '../FlexBox'; |
|
|
|
import IconButton, { IconButtonProps } from '../IconButton'; |
|
|
|
import IconButton, { IconButtonProps } from '../IconButton'; |
|
|
|
import { InnerPanel, InnerPanelHeader, Panel, PanelHeader } from '../Panels'; |
|
|
|
import { InnerPanel, InnerPanelHeader, Panel, PanelHeader } from '../Panels'; |
|
|
|
|
|
|
|
import Spinner from '../Spinner'; |
|
|
|
import { BodyText, HeaderText } from '../Text'; |
|
|
|
import { BodyText, HeaderText } from '../Text'; |
|
|
|
|
|
|
|
|
|
|
|
type PreviewOptionalProps = { |
|
|
|
type PreviewOptionalProps = { |
|
|
@ -85,9 +87,35 @@ const Preview: FC<PreviewProps> = ({ |
|
|
|
serverUUID, |
|
|
|
serverUUID, |
|
|
|
onClickConnectButton: connectButtonClickHandle = previewClickHandler, |
|
|
|
onClickConnectButton: connectButtonClickHandle = previewClickHandler, |
|
|
|
}) => { |
|
|
|
}) => { |
|
|
|
|
|
|
|
const [isPreviewLoading, setIsPreviewLoading] = useState<boolean>(true); |
|
|
|
const [isPreviewStale, setIsPreviewStale] = useState<boolean>(false); |
|
|
|
const [isPreviewStale, setIsPreviewStale] = useState<boolean>(false); |
|
|
|
const [preview, setPreview] = useState<string>(''); |
|
|
|
const [preview, setPreview] = useState<string>(''); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const previewButtonContent = useMemo( |
|
|
|
|
|
|
|
() => |
|
|
|
|
|
|
|
preview ? ( |
|
|
|
|
|
|
|
<Box |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
component="img" |
|
|
|
|
|
|
|
src={`data:image/png;base64,${preview}`} |
|
|
|
|
|
|
|
sx={{ |
|
|
|
|
|
|
|
height: '100%', |
|
|
|
|
|
|
|
opacity: isPreviewStale ? '0.4' : '1', |
|
|
|
|
|
|
|
padding: isUseInnerPanel ? '.2em' : 0, |
|
|
|
|
|
|
|
width: '100%', |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
<PowerOffOutlinedIcon |
|
|
|
|
|
|
|
sx={{ |
|
|
|
|
|
|
|
height: '100%', |
|
|
|
|
|
|
|
width: '100%', |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
[isPreviewStale, isUseInnerPanel, preview], |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (isFetchPreview) { |
|
|
|
if (isFetchPreview) { |
|
|
|
(async () => { |
|
|
|
(async () => { |
|
|
@ -107,11 +135,14 @@ const Preview: FC<PreviewProps> = ({ |
|
|
|
setIsPreviewStale(false); |
|
|
|
setIsPreviewStale(false); |
|
|
|
} catch { |
|
|
|
} catch { |
|
|
|
setIsPreviewStale(true); |
|
|
|
setIsPreviewStale(true); |
|
|
|
|
|
|
|
} finally { |
|
|
|
|
|
|
|
setIsPreviewLoading(false); |
|
|
|
} |
|
|
|
} |
|
|
|
})(); |
|
|
|
})(); |
|
|
|
} else if (externalPreview) { |
|
|
|
} else if (externalPreview) { |
|
|
|
setPreview(externalPreview); |
|
|
|
setPreview(externalPreview); |
|
|
|
setIsPreviewStale(isExternalPreviewStale); |
|
|
|
setIsPreviewStale(isExternalPreviewStale); |
|
|
|
|
|
|
|
setIsPreviewLoading(false); |
|
|
|
} |
|
|
|
} |
|
|
|
}, [externalPreview, isExternalPreviewStale, isFetchPreview, serverUUID]); |
|
|
|
}, [externalPreview, isExternalPreviewStale, isFetchPreview, serverUUID]); |
|
|
|
|
|
|
|
|
|
|
@ -120,57 +151,33 @@ const Preview: FC<PreviewProps> = ({ |
|
|
|
<PreviewPanelHeader isUseInnerPanel={isUseInnerPanel} text={serverName}> |
|
|
|
<PreviewPanelHeader isUseInnerPanel={isUseInnerPanel} text={serverName}> |
|
|
|
{headerEndAdornment} |
|
|
|
{headerEndAdornment} |
|
|
|
</PreviewPanelHeader> |
|
|
|
</PreviewPanelHeader> |
|
|
|
<Box |
|
|
|
<FlexBox row sx={{ '& > :first-child': { flexGrow: 1 } }}> |
|
|
|
sx={{ |
|
|
|
{/* Box wrapper below is required to keep external preview size sane. */} |
|
|
|
display: 'flex', |
|
|
|
|
|
|
|
width: '100%', |
|
|
|
|
|
|
|
justifyContent: 'center', |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
'& > :not(:last-child)': { |
|
|
|
|
|
|
|
marginRight: '1em', |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<Box> |
|
|
|
<Box> |
|
|
|
<MUIIconButton |
|
|
|
{isPreviewLoading ? ( |
|
|
|
component="span" |
|
|
|
<Spinner mt="1em" mb="1em" /> |
|
|
|
onClick={previewClickHandler} |
|
|
|
) : ( |
|
|
|
sx={{ |
|
|
|
<MUIIconButton |
|
|
|
borderRadius: BORDER_RADIUS, |
|
|
|
component="span" |
|
|
|
color: GREY, |
|
|
|
onClick={previewClickHandler} |
|
|
|
padding: 0, |
|
|
|
sx={{ |
|
|
|
}} |
|
|
|
borderRadius: BORDER_RADIUS, |
|
|
|
> |
|
|
|
color: GREY, |
|
|
|
{preview ? ( |
|
|
|
padding: 0, |
|
|
|
<Box |
|
|
|
}} |
|
|
|
alt="" |
|
|
|
> |
|
|
|
component="img" |
|
|
|
{previewButtonContent} |
|
|
|
src={`data:image/png;base64,${preview}`} |
|
|
|
</MUIIconButton> |
|
|
|
sx={{ |
|
|
|
)} |
|
|
|
height: '100%', |
|
|
|
|
|
|
|
opacity: isPreviewStale ? '0.4' : '1', |
|
|
|
|
|
|
|
padding: isUseInnerPanel ? '.2em' : 0, |
|
|
|
|
|
|
|
width: '100%', |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
) : ( |
|
|
|
|
|
|
|
<PowerOffOutlinedIcon |
|
|
|
|
|
|
|
sx={{ |
|
|
|
|
|
|
|
height: '100%', |
|
|
|
|
|
|
|
width: '100%', |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</MUIIconButton> |
|
|
|
|
|
|
|
</Box> |
|
|
|
</Box> |
|
|
|
{isShowControls && ( |
|
|
|
{isShowControls && ( |
|
|
|
<Box> |
|
|
|
<FlexBox> |
|
|
|
<IconButton onClick={connectButtonClickHandle}> |
|
|
|
<IconButton onClick={connectButtonClickHandle}> |
|
|
|
<DesktopWindowsIcon /> |
|
|
|
<DesktopWindowsIcon /> |
|
|
|
</IconButton> |
|
|
|
</IconButton> |
|
|
|
</Box> |
|
|
|
</FlexBox> |
|
|
|
)} |
|
|
|
)} |
|
|
|
</Box> |
|
|
|
</FlexBox> |
|
|
|
</PreviewPanel> |
|
|
|
</PreviewPanel> |
|
|
|
); |
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|