diff --git a/components/VNC/VNC.tsx b/components/VNC/VNC.tsx index e5e01c5e..886d19e7 100644 --- a/components/VNC/VNC.tsx +++ b/components/VNC/VNC.tsx @@ -1,12 +1,9 @@ import { useRef, useEffect, useState, memo } from "react"; import { useRouter } from "next/router"; -import RFB from "@novnc/novnc/core/rfb.js"; +import RFB from "@novnc/novnc/core/rfb"; import Terminal from "../Terminal"; import { styled } from "../../lib/styles/stitches.config"; -// types for @novnc/novnc are defined manually in ../../types/rfb.d.ts: -import type NoVncClient from "@novnc/novnc/core/rfb.js"; - const Display = styled( "div", { @@ -57,7 +54,7 @@ const VNC = ({ server }: VNCProps) => { const [message, setMessage] = useState({ message: "", anyKey: false }); // the actual connection and virtual screen (injected by noVNC when it's ready) - const rfbRef = useRef(); + const rfbRef = useRef(); const screenRef = useRef(null); // ends the session forcefully diff --git a/package.json b/package.json index d0b9bd70..d3a9c67c 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "@types/comma-number": "^2.1.0", "@types/marked": "^4.0.3", "@types/node": "*", + "@types/novnc__novnc": "github:jakejarvis/novnc-types#v0.0.0", "@types/prop-types": "^15.7.5", "@types/react": "^18.0.12", "@types/react-dom": "^18.0.5", diff --git a/types/index.d.ts b/types/index.d.ts index e38741eb..89057dbb 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,4 +1,3 @@ export * from "./note"; export * from "./repository"; -export * from "./rfb"; export * from "./webpack"; diff --git a/types/rfb.d.ts b/types/rfb.d.ts deleted file mode 100644 index eb4d82f6..00000000 --- a/types/rfb.d.ts +++ /dev/null @@ -1,323 +0,0 @@ -// thanks @ovcharik! -// https://gist.github.com/ovcharik/35979d45af808c443e844fc1e6740b87#file-rfb-d-ts - -declare module "@novnc/novnc/core/rfb.js" { - /** - * An `object` specifying the credentials to provide to the server when authenticating. - */ - export interface NoVncCredentials { - /** The user that authenticates */ - username: string; - /** Password for the user */ - password: string; - /** Target machine or session */ - target: string; - } - - /** - * An `object` specifying extra details about how the connection should be made. - */ - export interface NoVncOptions { - /** - * A `boolean` indicating if the remote server should be shared or if any other connected - * clients should be disconnected. Enabled by default. - */ - shared?: boolean; - /** - * An `object` specifying the credentials to provide to the server when authenticating. - */ - credentials?: NoVncCredentials; - /** - * A `string` specifying the ID to provide to any VNC repeater encountered. - */ - repeaterID?: string; - /** - * An `Array` of `string`s specifying the sub-protocols to use in the WebSocket connection. - * Empty by default. - */ - wsProtocols?: string[]; - } - - export interface NoVncEvents { - /** - * The `connect` event is fired after all the handshaking with the server is completed and the - * connection is fully established. After this event the `NoVncClient` object is ready to - * receive graphics updates and to send input. - */ - connect: CustomEvent>; - - /** - * The `disconnect` event is fired when the connection has been terminated. The `detail` - * property is an `object` that contains the property `clean`. `clean` is a `boolean` indicating - * if the termination was clean or not. In the event of an unexpected termination or an error - * `clean` will be set to false. - */ - disconnect: CustomEvent<{ clean: boolean }>; - - /** - * The `credentialsrequired` event is fired when the server requests more credentials than were - * specified to {@link NoVncClient}. The `detail` property is an `object` containing the - * property `types` which is an `Array` of `string` listing the credentials that are required. - */ - credentialsrequired: CustomEvent<{ types: Array }>; - - /** - * The `securityfailure` event is fired when the handshaking process with the server fails - * during the security negotiation step. The `detail` property is an `object` containing the - * following properties: - * - * | Property | Type | Description - * | -------- | ----------- | ----------- - * | `status` | `number` | The failure status code - * | `reason` | `string` | The **optional** reason for the failure - * - * The property `status` corresponds to the - * [SecurityResult](https://github.com/rfbproto/rfbproto/blob/master/rfbproto.rst#securityresult) - * status code in cases of failure. A status of zero will not be sent in this event since that - * indicates a successful security handshaking process. The optional property `reason` is - * provided by the server and thus the language of the string is not known. However most servers - * will probably send English strings. The server can choose to not send a reason and in these - * cases the `reason` property will be omitted. - */ - securityfailure: CustomEvent<{ status: number; reason?: string }>; - - /** - * The `clipboard` event is fired when the server has sent clipboard data. The `detail` property - * is an `object` containing the property `text` which is a `string` with the clipboard data. - */ - clipboard: CustomEvent<{ text: string }>; - - /** - * The `bell` event is fired when the server has requested an audible bell. - */ - bell: CustomEvent>; - - /** - * The `desktopname` event is fired when the name of the remote desktop changes. The `detail` - * property is an `object` with the property `name` which is a `string` specifying the new name. - */ - desktopname: CustomEvent<{ name: string }>; - - /** - * The `capabilities` event is fired whenever an entry is added or removed from `capabilities`. - * The `detail` property is an `object` with the property `capabilities` containing the new - * value of `capabilities`. - */ - capabilities: CustomEvent<{ capabilities: NoVncClient["capabilities"] }>; - } - - export type NoVncEventType = keyof NoVncEvents; - export type NoVncEvent = NoVncEvents[NoVncEventType]; - - export class NoVncEventTarget extends EventTarget { - protected _listeners: Map void>; - - addEventListener(type: T, listener: (event: NoVncEvent[T]) => void): void; - addEventListener(type: string, listener: (event: CustomEvent) => void): void; - - removeEventListener(type: T, listener: (event: NoVncEvent[T]) => void): void; - removeEventListener(type: string, listener: (event: CustomEvent) => void): void; - - dispatchEvent(event: E): boolean; - dispatchEvent(event: CustomEvent): boolean; - } - - /** - * The `NoVncClient` object represents a single connection to a VNC server. It communicates using - * a WebSocket that must provide a standard NoVncClient protocol stream. - */ - export default class NoVncClient extends NoVncEventTarget { - public readonly _target: Element; - public readonly _url: string | null; - - /** - * Returns a new `NoVncClient` object and initiates a new connection to a specified VNC server. - * - * @param target - A block {@link HTMLElement} that specifies where the `NoVncClient` object - * should attach itself. The existing contents of the `HTMLElement` will be untouched, but new - * elements will be added during the lifetime of the `NoVncClient` object. - * @param url - A `string` specifying the VNC server to connect to. This must be a valid - * WebSocket URL. - * @param options - An {@link NoVncOptions} specifying extra details about how the connection - * should be made. - */ - constructor(target: Element, url: string, options?: NoVncOptions); - - /** - * Returns a new `NoVncClient` object and initiates a new connection to a specified VNC server. - * - * @param target - A block {@link HTMLElement} that specifies where the `NoVncClient` object - * should attach itself. The existing contents of the `HTMLElement` will be untouched, but new - * elements will be added during the lifetime of the `NoVncClient` object. - * @param socket - A {@link WebSocket} specifying the VNC server to connect to. This must be a - * valid WebSocket URL. - * @param options - An {@link NoVncOptions} specifying extra details about how the connection - * should be made. - */ - constructor(target: Element, socket: WebSocket, options?: NoVncOptions); - - /** - * Returns a new `NoVncClient` object and initiates a new connection to a specified VNC server. - * - * @param target - A block {@link HTMLElement} that specifies where the `NoVncClient` object - * should attach itself. The existing contents of the `HTMLElement` will be untouched, but new - * elements will be added during the lifetime of the `NoVncClient` object. - * @param channel - A {@link RTCDataChannel} specifying the VNC server to connect to. This must - * be a valid WebSocket URL. - * @param options - An {@link NoVncOptions} specifying extra details about how the connection - * should be made. - */ - constructor(target: Element, channel: RTCDataChannel, options?: NoVncOptions); - - /** - * Is a `boolean` indicating if any events (e.g. key presses or mouse movement) should be - * prevented from being sent to the server. Disabled by default. - */ - public viewOnly: boolean; - - /** - * Is a `boolean` indicating if keyboard focus should automatically be moved to the remote - * session when a `mousedown` or `touchstart` event is received. Enabled by default. - */ - public focusOnClick: boolean; - - /** - * Is a `boolean` indicating if the remote session should be clipped to its container. When - * disabled scrollbars will be shown to handle the resulting overflow. Disabled by default. - */ - public clipViewport: boolean; - - /** - * Is a `boolean` indicating if mouse events should control the relative position of a clipped - * remote session. Only relevant if `clipViewport` is enabled. Disabled by default. - */ - public dragViewport: boolean; - - /** - * Is a `boolean` indicating if the remote session should be scaled locally so it fits its - * container. When disabled it will be centered if the remote session is smaller than its - * container, or handled according to `clipViewport` if it is larger. Disabled by default. - */ - public scaleViewport: boolean; - - /** - * Is a `boolean` indicating if a request to resize the remote session should be sent whenever - * the container changes dimensions. Disabled by default. - */ - public resizeSession: boolean; - - /** - * Is a `boolean` indicating whether a dot cursor should be shown instead of a zero-sized or - * fully-transparent cursor if the server sets such invisible cursor. Disabled by default. - */ - public showDotCursor: boolean; - - /** - * Is a valid CSS [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background) - * style value indicating which background style should be applied to the element containing the - * remote session screen. The default value is `rgb(40, 40, 40)` (solid gray color). - */ - public background: string; - - /** - * Is an `int` in range `[0-9]` controlling the desired JPEG quality. Value `0` implies low - * quality and `9` implies high quality. Default value is `6`. - */ - public qualityLevel: number; - - /** - * Is an `int` in range `[0-9]` controlling the desired compression level. Value `0` means no - * compression. Level 1 uses a minimum of CPU resources and achieves weak compression ratios, - * while level 9 offers best compression but is slow in terms of CPU consumption on the server - * side. Use high levels with very slow network connections. Default value is `2`. - */ - public compressionLevel: number; - - /** - * Is an `object` indicating which optional extensions are available on the server. Some methods - * may only be called if the corresponding capability is set. The following capabilities are - * defined: - * - * | name | type | description - * | -------- | --------- | ----------- - * | `power` | `boolean` | Machine power control is available - */ - public readonly capabilities: { - /** Machine power control is available */ - power: boolean; - }; - - /** - * Disconnect from the server. - */ - public disconnect(): void; - - /** - * Send credentials to server. Should be called after the - * {@link NoVncEventType.credentialsrequired} event has fired. - * - * @param credentials An {@link NoVncCredentials} specifying the credentials to provide to the - * server when authenticating. - */ - public sendCredentials(credentials: NoVncCredentials): void; - - /** - * Send a key event to the server. - * - * @param keysym A `number` specifying the NoVncClient keysym to send. Can be `0` if a valid - * **`code`** is specified. - * @param code A `string` specifying the physical key to send. Valid values are those that can - * be specified to {@link KeyboardEvent.code}. If the physical key cannot be determined then - * `null` shall be specified. - * @param down A `boolean` specifying if a press or a release event should be sent. If omitted - * then both a press and release event are sent. - */ - public sendKey(keysym: number, code: string | null, down?: boolean): void; - - /** - * Send the key sequence *left Control*, *left Alt*, *Delete*. This is a convenience wrapper - * around {@link sendKey}. - */ - public sendCtrlAltDel(): void; - - /** - * Sets the keyboard focus on the remote session. Keyboard events will be sent to the remote - * server after this point. - * - * @param options A {@link FocusOptions} providing options to control how the focus will be - * performed. Please see {@link HTMLElement.focus} for available options. - */ - public focus(options?: FocusOptions): void; - - /** - * Remove keyboard focus on the remote session. Keyboard events will no longer be sent to the - * remote server after this point. - */ - public blur(): void; - - /** - * Request to shut down the remote machine. The capability `power` must be set for this method - * to have any effect. - */ - public machineShutdown(): void; - - /** - * Request a clean reboot of the remote machine. The capability `power` must be set for this - * method to have any effect. - */ - public machineReboot(): void; - - /** - * Request a forced reset of the remote machine. The capability `power` must be set for this - * method to have any effect. - */ - public machineReset(): void; - - /** - * Send clipboard data to the remote server. - * - * @param text A `string` specifying the clipboard data to send. - */ - public clipboardPasteFrom(text: string): void; - } -} diff --git a/yarn.lock b/yarn.lock index 54149e31..bac33e28 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1672,6 +1672,10 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.42.tgz#d7e8f22700efc94d125103075c074396b5f41f9b" integrity sha512-Q5BPGyGKcvQgAMbsr7qEGN/kIPN6zZecYYABeTDBizOsau+2NMdSVTar9UQw21A2+JyA2KRNDYaYrPB0Rpk2oQ== +"@types/novnc__novnc@github:jakejarvis/novnc-types#v0.0.0": + version "0.0.0" + resolved "https://codeload.github.com/jakejarvis/novnc-types/tar.gz/486e2ef37342783f79bcba3efb8fab703cc21478" + "@types/parse-json@^4.0.0": version "4.0.0" resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0" @@ -2287,9 +2291,9 @@ color-name@~1.1.4: integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== colorette@^2.0.16, colorette@^2.0.17: - version "2.0.18" - resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.18.tgz#4c260bcf86437ce94fa58e2e49a83b623f3c4d66" - integrity sha512-rHDY1i4V4JBCXHnHwaVyA202CKSj2kUrjI5cSJQbTdnFeI4ShV3e19Fe7EQfzL2tjSrvYyWugdGAtEc1lLvGDg== + version "2.0.19" + resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798" + integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ== comma-number@^2.1.0: version "2.1.0" @@ -2341,22 +2345,22 @@ copy-to-clipboard@^3.3.1: toggle-selection "^1.0.6" core-js-compat@^3.21.0, core-js-compat@^3.22.1: - version "3.23.0" - resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.23.0.tgz#324191a23bfbd229802718dcc1d213414b244624" - integrity sha512-i4FgbtahOArZBEteiL+czI5N/bp17w16bXmLagGThdA2zuX1a5X4HbBmOVD7ERRtk3wMtPOFEmlXpVV4lsvwNw== + version "3.23.1" + resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.23.1.tgz#23d44d9f209086e60dabf9130cea7719af6e199b" + integrity sha512-KeYrEc8t6FJsKYB2qnDwRHWaC0cJNaqlHfCpMe5q3j/W1nje3moib/txNklddLPCtGb+etcBIyJ8zuMa/LN5/A== dependencies: browserslist "^4.20.4" semver "7.0.0" core-js-pure@^3.20.2: - version "3.23.0" - resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.23.0.tgz#f27426a6144a37484cfc5fd8b56eecc5180cd393" - integrity sha512-ksjJc/xVTQzT2q6trPja2qWynMEaGO36rDui2SiqLPYab9TmPgT8nIVcre/yscviPCSweUdCDGKe4MsQA9w1zQ== + version "3.23.1" + resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.23.1.tgz#0b27e4c3ad46178b84e790dbbb81987218ab82ad" + integrity sha512-3qNgf6TqI3U1uhuSYRzJZGfFd4T+YlbyVPl+jgRiKjdZopvG4keZQwWZDAWpu1UH9nCgTpUzIV3GFawC7cJsqg== core-js@^3.1.3: - version "3.23.0" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.23.0.tgz#9e33448c8fd3b02ad023d85bd6e85da6335b5cc4" - integrity sha512-v2/hZoRcRrvQiBoGsHwmRdr+S4oICKcjA6xb2qjVurin6TpcDC1X2CIDa8rdu/d5n8RT/Sdoos2IlnpQ1rXs5A== + version "3.23.1" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.23.1.tgz#9f9a9255115f62c512db56d567f636da32ca0b78" + integrity sha512-wfMYHWi1WQjpgZNC9kAlN4ut04TM9fUTdi7CqIoTVM7yaiOUQTklOzfb+oWH3r9edQcT3F887swuVmxrV+CC8w== cosmiconfig@^7.0.1: version "7.0.1" @@ -2817,9 +2821,9 @@ eslint-plugin-prettier@~4.0.0: prettier-linter-helpers "^1.0.0" eslint-plugin-react-hooks@^4.5.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz#5f762dfedf8b2cf431c689f533c9d3fa5dcf25ad" - integrity sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw== + version "4.6.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3" + integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g== eslint-plugin-react@^7.29.4: version "7.30.0"