seasharp
/
anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(front-end): use novnc npm package instead of partially cloned novnc repo

Browse Source
main
Josue 3 years ago
parent 079d89fedc
commit e2a226db9c
2 changed files with 99 additions and 106 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 191
      striker-ui/components/Display/FullSize.tsx
  2. 14
      striker-ui/components/Display/VncDisplay.tsx

191
striker-ui/components/Display/FullSize.tsx
Unescape View File

@ -5,7 +5,7 @@ import { makeStyles } from '@material-ui/core/styles';
import CloseIcon from '@material-ui/icons/Close'; import CloseIcon from '@material-ui/icons/Close';
import KeyboardIcon from '@material-ui/icons/Keyboard'; import KeyboardIcon from '@material-ui/icons/Keyboard';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton';
import RFB from './noVNC/core/rfb'; import RFB from '@novnc/novnc/core/rfb';
import { Panel } from '../Panels'; import { Panel } from '../Panels';
import { BLACK, RED, TEXT } from '../../lib/consts/DEFAULT_THEME'; import { BLACK, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
import keyCombinations from './keyCombinations'; import keyCombinations from './keyCombinations';
@ -18,6 +18,8 @@ const VncDisplay = dynamic(() => import('./VncDisplay'), { ssr: false });
const useStyles = makeStyles(() => ({ const useStyles = makeStyles(() => ({
displayBox: { displayBox: {
width: '75vw',
height: '75vh',
paddingTop: '1em', paddingTop: '1em',
paddingBottom: 0, paddingBottom: 0,
paddingLeft: 0, paddingLeft: 0,
@ -77,16 +79,12 @@ interface VncConnectionProps {
const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => { const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null); const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const rfb = useRef<RFB>(); const rfb = useRef<typeof RFB>();
const hostname = useRef<string | undefined>(undefined); const hostname = useRef<string | undefined>(undefined);
const [vncConnection, setVncConnection] = useState< const [vncConnection, setVncConnection] = useState<
VncConnectionProps | undefined VncConnectionProps | undefined
>(undefined); >(undefined);
const [isError, setIsError] = useState<boolean>(false); const [isError, setIsError] = useState<boolean>(false);
const [displaySize] = useState<{
width: string;
height: string;
}>({ width: '100%', height: '75vh' });
const classes = useStyles(); const classes = useStyles();
useEffect(() => { useEffect(() => {
@ -146,103 +144,94 @@ const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
<Box flexGrow={1}> <Box flexGrow={1}>
<HeaderText text={`Server: ${serverName}`} /> <HeaderText text={`Server: ${serverName}`} />
</Box> </Box>
{vncConnection ? (
<Box display="flex" className={classes.displayBox}> <Box display="flex" className={classes.displayBox}>
{vncConnection ? ( <VncDisplay
<> rfb={rfb}
<VncDisplay url={`${vncConnection.protocol}://${hostname.current}:${vncConnection.forward_port}`}
rfb={rfb} viewOnly={false}
url={`${vncConnection.protocol}://${hostname.current}:${vncConnection.forward_port}`} focusOnClick={false}
style={displaySize} clipViewport={false}
viewOnly={false} dragViewport={false}
focusOnClick={false} scaleViewport
clipViewport={false} resizeSession
dragViewport={false} showDotCursor={false}
scaleViewport background=""
resizeSession qualityLevel={6}
showDotCursor={false} compressionLevel={2}
background="" />
qualityLevel={6} <Box>
compressionLevel={2} <Box className={classes.closeBox}>
/> <IconButton
<Box> className={classes.closeButton}
<Box className={classes.closeBox}> style={{ color: TEXT }}
<IconButton component="span"
className={classes.closeButton} onClick={() => {
style={{ color: TEXT }} handleClickClose();
component="span" setMode(true);
onClick={() => { }}
handleClickClose(); >
setMode(true); <CloseIcon />
}} </IconButton>
> </Box>
<CloseIcon /> <Box className={classes.closeBox}>
</IconButton> <IconButton
</Box> className={classes.keyboardButton}
<Box className={classes.closeBox}> style={{ color: BLACK }}
<IconButton component="span"
className={classes.keyboardButton} onClick={handleClick}
style={{ color: BLACK }} >
component="span" <KeyboardIcon />
onClick={handleClick} </IconButton>
> <Menu
<KeyboardIcon /> anchorEl={anchorEl}
</IconButton> keepMounted
<Menu open={Boolean(anchorEl)}
anchorEl={anchorEl} onClose={() => setAnchorEl(null)}
keepMounted >
open={Boolean(anchorEl)} {keyCombinations.map(({ keys, scans }) => {
onClose={() => setAnchorEl(null)} return (
> <MenuItem
{keyCombinations.map(({ keys, scans }) => { onClick={() => handleSendKeys(scans)}
return ( className={classes.keysItem}
<MenuItem key={keys}
onClick={() => handleSendKeys(scans)} >
className={classes.keysItem} <Typography variant="subtitle1">{keys}</Typography>
key={keys} </MenuItem>
> );
<Typography variant="subtitle1">{keys}</Typography> })}
</MenuItem> </Menu>
);
})}
</Menu>
</Box>
</Box> </Box>
</>
) : (
<Box display="flex" className={classes.spinnerBox}>
{!isError ? (
<>
<HeaderText
text={`Establishing connection with ${serverName}`}
/>
<HeaderText text="This may take a few minutes" />
<Spinner />
</>
) : (
<>
<Box style={{ paddingBottom: '2em' }}>
<HeaderText text="There was a problem connecting to the server, please try again" />
</Box>
<Button
variant="contained"
onClick={() => {
setIsError(false);
}}
style={{ textTransform: 'none' }}
>
<Typography
className={classes.buttonText}
variant="subtitle1"
>
Reconnect
</Typography>
</Button>
</>
)}
</Box> </Box>
)} </Box>
</Box> ) : (
<Box display="flex" className={classes.spinnerBox}>
{!isError ? (
<>
<HeaderText text={`Establishing connection with ${serverName}`} />
<HeaderText text="This may take a few minutes" />
<Spinner />
</>
) : (
<>
<Box style={{ paddingBottom: '2em' }}>
<HeaderText text="There was a problem connecting to the server, please try again" />
</Box>
<Button
variant="contained"
onClick={() => {
setIsError(false);
}}
style={{ textTransform: 'none' }}
>
<Typography className={classes.buttonText} variant="subtitle1">
Reconnect
</Typography>
</Button>
</>
)}
</Box>
)}
</Panel> </Panel>
); );
}; };

14
striker-ui/components/Display/VncDisplay.tsx
Unescape View File

@ -1,10 +1,9 @@
import { useEffect, useRef, MutableRefObject, memo } from 'react'; import { useEffect, useRef, MutableRefObject, memo } from 'react';
import RFB from './noVNC/core/rfb'; import RFB from '@novnc/novnc/core/rfb';
type Props = { type Props = {
rfb: MutableRefObject<RFB | undefined>; rfb: MutableRefObject<typeof RFB | undefined>;
url: string; url: string;
style: { width: string; height: string };
viewOnly: boolean; viewOnly: boolean;
focusOnClick: boolean; focusOnClick: boolean;
clipViewport: boolean; clipViewport: boolean;
@ -23,7 +22,6 @@ const VncDisplay = (props: Props): JSX.Element => {
const { const {
rfb, rfb,
url, url,
style,
viewOnly, viewOnly,
focusOnClick, focusOnClick,
clipViewport, clipViewport,
@ -86,7 +84,13 @@ const VncDisplay = (props: Props): JSX.Element => {
if (rfb?.current) rfb.current.focus(); if (rfb?.current) rfb.current.focus();
}; };
return <div style={style} ref={screen} onMouseEnter={handleMouseEnter} />; return (
<div
style={{ width: '100%', height: '75vh' }}
ref={screen}
onMouseEnter={handleMouseEnter}
/>
);
}; };
export default memo(VncDisplay); export default memo(VncDisplay);

Write Preview
Loading…
Cancel
Save