You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
2.8 KiB
114 lines
2.8 KiB
import { Dispatch, SetStateAction, useEffect, useState } from 'react'; |
|
import { Box } from '@material-ui/core'; |
|
import { makeStyles } from '@material-ui/core/styles'; |
|
import IconButton from '@material-ui/core/IconButton'; |
|
import DesktopWindowsIcon from '@material-ui/icons/DesktopWindows'; |
|
import CropOriginal from '@material-ui/icons/Image'; |
|
import { Panel } from '../Panels'; |
|
import { BLACK, GREY, TEXT } from '../../lib/consts/DEFAULT_THEME'; |
|
import { HeaderText } from '../Text'; |
|
|
|
interface PreviewProps { |
|
setMode: Dispatch<SetStateAction<boolean>>; |
|
uuid: string; |
|
serverName: string | string[] | undefined; |
|
} |
|
|
|
const useStyles = makeStyles(() => ({ |
|
displayBox: { |
|
padding: 0, |
|
paddingTop: '.7em', |
|
width: '100%', |
|
}, |
|
fullScreenButton: { |
|
borderRadius: 8, |
|
backgroundColor: TEXT, |
|
'&:hover': { |
|
backgroundColor: TEXT, |
|
}, |
|
}, |
|
fullScreenBox: { |
|
paddingLeft: '1em', |
|
padding: 0, |
|
}, |
|
imageButton: { |
|
padding: 0, |
|
color: TEXT, |
|
}, |
|
imageIcon: { |
|
borderRadius: 8, |
|
padding: 0, |
|
backgroundColor: GREY, |
|
fontSize: '8em', |
|
}, |
|
previewImage: { |
|
width: '100%', |
|
height: '100%', |
|
}, |
|
})); |
|
|
|
const Preview = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => { |
|
const classes = useStyles(); |
|
const [preview, setPreview] = useState<string>(); |
|
|
|
useEffect(() => { |
|
(async () => { |
|
try { |
|
const res = await fetch( |
|
`${process.env.NEXT_PUBLIC_API_URL}/get_server_screenshot?server_uuid=${uuid}`, |
|
{ |
|
method: 'GET', |
|
headers: { |
|
'Content-Type': 'application/json', |
|
}, |
|
}, |
|
); |
|
const { screenshot } = await res.json(); |
|
setPreview(screenshot); |
|
} catch { |
|
setPreview(''); |
|
} |
|
})(); |
|
}, [uuid]); |
|
|
|
return ( |
|
<Panel> |
|
<Box flexGrow={1}> |
|
<HeaderText text={`Server: ${serverName}`} /> |
|
</Box> |
|
<Box display="flex" className={classes.displayBox}> |
|
<Box> |
|
<IconButton |
|
className={classes.imageButton} |
|
style={{ color: BLACK }} |
|
component="span" |
|
onClick={() => setMode(false)} |
|
> |
|
{!preview ? ( |
|
<CropOriginal className={classes.imageIcon} /> |
|
) : ( |
|
<img |
|
alt="" |
|
key="preview" |
|
src={`data:image/png;base64,${preview}`} |
|
className={classes.previewImage} |
|
/> |
|
)} |
|
</IconButton> |
|
</Box> |
|
<Box className={classes.fullScreenBox}> |
|
<IconButton |
|
className={classes.fullScreenButton} |
|
style={{ color: BLACK }} |
|
component="span" |
|
onClick={() => setMode(false)} |
|
> |
|
<DesktopWindowsIcon /> |
|
</IconButton> |
|
</Box> |
|
</Box> |
|
</Panel> |
|
); |
|
}; |
|
|
|
export default Preview;
|
|
|