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
Split 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 KeyboardIcon from '@material-ui/icons/Keyboard';
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 { BLACK, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
import keyCombinations from './keyCombinations';
@ -18,6 +18,8 @@ const VncDisplay = dynamic(() => import('./VncDisplay'), { ssr: false });
const useStyles = makeStyles(() => ({
displayBox: {
width: '75vw',
height: '75vh',
paddingTop: '1em',
paddingBottom: 0,
paddingLeft: 0,
@ -77,16 +79,12 @@ interface VncConnectionProps {
const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const rfb = useRef<RFB>();
const rfb = useRef<typeof RFB>();
const hostname = useRef<string | undefined>(undefined);
const [vncConnection, setVncConnection] = useState<
VncConnectionProps | undefined
>(undefined);
const [isError, setIsError] = useState<boolean>(false);
const [displaySize] = useState<{
width: string;
height: string;
}>({ width: '100%', height: '75vh' });
const classes = useStyles();
useEffect(() => {
@ -146,103 +144,94 @@ const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
<Box flexGrow={1}>
<HeaderText text={`Server: ${serverName}`} />
</Box>
<Box display="flex" className={classes.displayBox}>
{vncConnection ? (
<>
<VncDisplay
rfb={rfb}
url={`${vncConnection.protocol}://${hostname.current}:${vncConnection.forward_port}`}
style={displaySize}
viewOnly={false}
focusOnClick={false}
clipViewport={false}
dragViewport={false}
scaleViewport
resizeSession
showDotCursor={false}
background=""
qualityLevel={6}
compressionLevel={2}
/>
<Box>
<Box className={classes.closeBox}>
<IconButton
className={classes.closeButton}
style={{ color: TEXT }}
component="span"
onClick={() => {
handleClickClose();
setMode(true);
}}
>
<CloseIcon />
</IconButton>
</Box>
<Box className={classes.closeBox}>
<IconButton
className={classes.keyboardButton}
style={{ color: BLACK }}
component="span"
onClick={handleClick}
>
<KeyboardIcon />
</IconButton>
<Menu
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)}
>
{keyCombinations.map(({ keys, scans }) => {
return (
<MenuItem
onClick={() => handleSendKeys(scans)}
className={classes.keysItem}
key={keys}
>
<Typography variant="subtitle1">{keys}</Typography>
</MenuItem>
);
})}
</Menu>
</Box>
{vncConnection ? (
<Box display="flex" className={classes.displayBox}>
<VncDisplay
rfb={rfb}
url={`${vncConnection.protocol}://${hostname.current}:${vncConnection.forward_port}`}
viewOnly={false}
focusOnClick={false}
clipViewport={false}
dragViewport={false}
scaleViewport
resizeSession
showDotCursor={false}
background=""
qualityLevel={6}
compressionLevel={2}
/>
<Box>
<Box className={classes.closeBox}>
<IconButton
className={classes.closeButton}
style={{ color: TEXT }}
component="span"
onClick={() => {
handleClickClose();
setMode(true);
}}
>
<CloseIcon />
</IconButton>
</Box>
<Box className={classes.closeBox}>
<IconButton
className={classes.keyboardButton}
style={{ color: BLACK }}
component="span"
onClick={handleClick}
>
<KeyboardIcon />
</IconButton>
<Menu
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)}
>
{keyCombinations.map(({ keys, scans }) => {
return (
<MenuItem
onClick={() => handleSendKeys(scans)}
className={classes.keysItem}
key={keys}
>
<Typography variant="subtitle1">{keys}</Typography>
</MenuItem>
);
})}
</Menu>
</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 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>
);
};

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

@ -1,10 +1,9 @@
import { useEffect, useRef, MutableRefObject, memo } from 'react';
import RFB from './noVNC/core/rfb';
import RFB from '@novnc/novnc/core/rfb';
type Props = {
rfb: MutableRefObject<RFB | undefined>;
rfb: MutableRefObject<typeof RFB | undefined>;
url: string;
style: { width: string; height: string };
viewOnly: boolean;
focusOnClick: boolean;
clipViewport: boolean;
@ -23,7 +22,6 @@ const VncDisplay = (props: Props): JSX.Element => {
const {
rfb,
url,
style,
viewOnly,
focusOnClick,
clipViewport,
@ -86,7 +84,13 @@ const VncDisplay = (props: Props): JSX.Element => {
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);

Write Preview
Loading…
Cancel
Save