fix(striker-ui): distinct server preview loading and power off

main
Tsu-ba-me 2 years ago
parent 188b08f87b
commit 4c057a30f7
  1. 105
      striker-ui/components/Display/Preview.tsx

@ -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>
); );
}; };

Loading…
Cancel
Save