mirror of https://github.com/jetkvm/kvm.git
Merge branch 'jetkvm:dev' into chore/embed-golint
This commit is contained in:
Aveline
GitHub
commit
a3f472f557
19
Makefile
19
Makefile
|
|
@ -1,21 +1,26 @@
|
|||
BRANCH ?= $(shell git rev-parse --abbrev-ref HEAD)
|
||||
BUILDDATE ?= $(shell date -u +%FT%T%z)
|
||||
BUILDTS ?= $(shell date -u +%s)
|
||||
REVISION ?= $(shell git rev-parse HEAD)
|
||||
VERSION_DEV := 0.3.8-dev$(shell date +%Y%m%d%H%M)
|
||||
VERSION := 0.3.7
|
||||
VERSION_DEV := 0.3.9-dev$(shell date +%Y%m%d%H%M)
|
||||
VERSION := 0.3.8
|
||||
|
||||
PROMETHEUS_TAG := github.com/prometheus/common/version
|
||||
KVM_PKG_NAME := github.com/jetkvm/kvm
|
||||
|
||||
GO_LDFLAGS := \
|
||||
-s -w \
|
||||
-X github.com/prometheus/common/version.Branch=$(BRANCH) \
|
||||
-X github.com/prometheus/common/version.BuildDate=$(BUILDDATE) \
|
||||
-X github.com/prometheus/common/version.Revision=$(REVISION)
|
||||
-X $(PROMETHEUS_TAG).Branch=$(BRANCH) \
|
||||
-X $(PROMETHEUS_TAG).BuildDate=$(BUILDDATE) \
|
||||
-X $(PROMETHEUS_TAG).Revision=$(REVISION) \
|
||||
-X $(KVM_PKG_NAME).builtTimestamp=$(BUILDTS)
|
||||
|
||||
hash_resource:
|
||||
@shasum -a 256 resource/jetkvm_native | cut -d ' ' -f 1 > resource/jetkvm_native.sha256
|
||||
|
||||
build_dev: hash_resource
|
||||
@echo "Building..."
|
||||
GOOS=linux GOARCH=arm GOARM=7 go build -ldflags="$(GO_LDFLAGS) -X kvm.builtAppVersion=$(VERSION_DEV)" -o bin/jetkvm_app cmd/main.go
|
||||
GOOS=linux GOARCH=arm GOARM=7 go build -ldflags="$(GO_LDFLAGS) -X $(KVM_PKG_NAME).builtAppVersion=$(VERSION_DEV)" -o bin/jetkvm_app cmd/main.go
|
||||
|
||||
frontend:
|
||||
cd ui && npm ci && npm run build:device
|
||||
|
|
@ -28,7 +33,7 @@ dev_release: frontend build_dev
|
|||
|
||||
build_release: frontend hash_resource
|
||||
@echo "Building release..."
|
||||
GOOS=linux GOARCH=arm GOARM=7 go build -ldflags="$(GO_LDFLAGS) -X kvm.builtAppVersion=$(VERSION)" -o bin/jetkvm_app cmd/main.go
|
||||
GOOS=linux GOARCH=arm GOARM=7 go build -ldflags="$(GO_LDFLAGS) -X $(KVM_PKG_NAME).builtAppVersion=$(VERSION)" -o bin/jetkvm_app cmd/main.go
|
||||
|
||||
release:
|
||||
@if rclone lsf r2://jetkvm-update/app/$(VERSION)/ | grep -q "jetkvm_app"; then \
|
||||
|
|
|
|||
|
|
@ -128,6 +128,15 @@ func (u *UsbGadget) GetConfigPath(itemKey string) (string, error) {
|
|||
return joinPath(u.kvmGadgetPath, item.configPath), nil
|
||||
}
|
||||
|
||||
// GetPath returns the path to the item.
|
||||
func (u *UsbGadget) GetPath(itemKey string) (string, error) {
|
||||
item, ok := u.configMap[itemKey]
|
||||
if !ok {
|
||||
return "", fmt.Errorf("config item %s not found", itemKey)
|
||||
}
|
||||
return joinPath(u.kvmGadgetPath, item.path), nil
|
||||
}
|
||||
|
||||
func mountConfigFS() error {
|
||||
_, err := os.Stat(gadgetPath)
|
||||
// TODO: check if it's mounted properly
|
||||
|
|
|
|||
|
|
@ -799,6 +799,7 @@ var rpcHandlers = map[string]RPCHandler{
|
|||
"getCloudState": {Func: rpcGetCloudState},
|
||||
"keyboardReport": {Func: rpcKeyboardReport, Params: []string{"modifier", "keys"}},
|
||||
"absMouseReport": {Func: rpcAbsMouseReport, Params: []string{"x", "y", "buttons"}},
|
||||
"relMouseReport": {Func: rpcRelMouseReport, Params: []string{"dx", "dy", "buttons"}},
|
||||
"wheelReport": {Func: rpcWheelReport, Params: []string{"wheelY"}},
|
||||
"getVideoState": {Func: rpcGetVideoState},
|
||||
"getUSBState": {Func: rpcGetUSBState},
|
||||
|
|
|
|||
5
main.go
5
main.go
|
|
@ -35,6 +35,8 @@ func Main() {
|
|||
StartNativeCtrlSocketServer()
|
||||
StartNativeVideoSocketServer()
|
||||
|
||||
initPrometheus()
|
||||
|
||||
go func() {
|
||||
err = ExtractAndRunNativeBin()
|
||||
if err != nil {
|
||||
|
|
@ -67,6 +69,9 @@ func Main() {
|
|||
}()
|
||||
//go RunFuseServer()
|
||||
go RunWebServer()
|
||||
if config.TLSMode != "" {
|
||||
go RunWebSecureServer()
|
||||
}
|
||||
// If the cloud token isn't set, the client won't be started by default.
|
||||
// However, if the user adopts the device via the web interface, handleCloudRegister will start the client.
|
||||
if config.CloudToken != "" {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
package kvm
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
|
||||
"github.com/prometheus/client_golang/prometheus"
|
||||
versioncollector "github.com/prometheus/client_golang/prometheus/collectors/version"
|
||||
"github.com/prometheus/common/version"
|
||||
)
|
||||
|
||||
var promHandler http.Handler
|
||||
|
||||
func initPrometheus() {
|
||||
// A Prometheus metrics endpoint.
|
||||
version.Version = builtAppVersion
|
||||
prometheus.MustRegister(versioncollector.NewCollector("jetkvm"))
|
||||
}
|
||||
|
|
@ -14,6 +14,7 @@ export default function InfoBar() {
|
|||
const activeModifiers = useHidStore(state => state.activeModifiers);
|
||||
const mouseX = useMouseStore(state => state.mouseX);
|
||||
const mouseY = useMouseStore(state => state.mouseY);
|
||||
const mouseMove = useMouseStore(state => state.mouseMove);
|
||||
|
||||
const videoClientSize = useVideoStore(
|
||||
state => `${Math.round(state.clientWidth)}x${Math.round(state.clientHeight)}`,
|
||||
|
|
@ -62,7 +63,7 @@ export default function InfoBar() {
|
|||
</div>
|
||||
) : null}
|
||||
|
||||
{settings.debugMode ? (
|
||||
{(settings.debugMode && settings.mouseMode == "absolute") ? (
|
||||
<div className="flex w-[118px] items-center gap-x-1">
|
||||
<span className="text-xs font-semibold">Pointer:</span>
|
||||
<span className="text-xs">
|
||||
|
|
@ -71,6 +72,17 @@ export default function InfoBar() {
|
|||
</div>
|
||||
) : null}
|
||||
|
||||
{(settings.debugMode && settings.mouseMode == "relative") ? (
|
||||
<div className="flex w-[118px] items-center gap-x-1">
|
||||
<span className="text-xs font-semibold">Last Move:</span>
|
||||
<span className="text-xs">
|
||||
{mouseMove ?
|
||||
`${mouseMove.x},${mouseMove.y} ${mouseMove.buttons ? `(${mouseMove.buttons})` : ""}` :
|
||||
"N/A"}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{settings.debugMode && (
|
||||
<div className="flex w-[156px] items-center gap-x-1">
|
||||
<span className="text-xs font-semibold">USB State:</span>
|
||||
|
|
|
|||
|
|
@ -1,117 +0,0 @@
|
|||
import { Button } from "@components/Button";
|
||||
import { InputFieldWithLabel } from "./InputField";
|
||||
import { UsbConfigState } from "@/hooks/stores";
|
||||
import { useEffect, useCallback, useState } from "react";
|
||||
import { useJsonRpc } from "../hooks/useJsonRpc";
|
||||
import { USBConfig } from "./UsbConfigSetting";
|
||||
|
||||
export default function UpdateUsbConfigModal({
|
||||
onSetUsbConfig,
|
||||
onRestoreToDefault,
|
||||
}: {
|
||||
onSetUsbConfig: (usbConfig: USBConfig) => void;
|
||||
onRestoreToDefault: () => void;
|
||||
}) {
|
||||
const [usbConfigState, setUsbConfigState] = useState<USBConfig>({
|
||||
vendor_id: "",
|
||||
product_id: "",
|
||||
serial_number: "",
|
||||
manufacturer: "",
|
||||
product: "",
|
||||
});
|
||||
|
||||
const [send] = useJsonRpc();
|
||||
|
||||
const syncUsbConfig = useCallback(() => {
|
||||
send("getUsbConfig", {}, resp => {
|
||||
if ("error" in resp) {
|
||||
console.error("Failed to load USB Config:", resp.error);
|
||||
} else {
|
||||
setUsbConfigState(resp.result as UsbConfigState);
|
||||
}
|
||||
});
|
||||
}, [send, setUsbConfigState]);
|
||||
|
||||
// Load stored usb config from the backend
|
||||
useEffect(() => {
|
||||
syncUsbConfig();
|
||||
}, [syncUsbConfig]);
|
||||
|
||||
const handleUsbVendorIdChange = (value: string) => {
|
||||
setUsbConfigState({ ...usbConfigState, vendor_id: value });
|
||||
};
|
||||
|
||||
const handleUsbProductIdChange = (value: string) => {
|
||||
setUsbConfigState({ ...usbConfigState, product_id: value });
|
||||
};
|
||||
|
||||
const handleUsbSerialChange = (value: string) => {
|
||||
setUsbConfigState({ ...usbConfigState, serial_number: value });
|
||||
};
|
||||
|
||||
const handleUsbManufacturer = (value: string) => {
|
||||
setUsbConfigState({ ...usbConfigState, manufacturer: value });
|
||||
};
|
||||
|
||||
const handleUsbProduct = (value: string) => {
|
||||
setUsbConfigState({ ...usbConfigState, product: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<InputFieldWithLabel
|
||||
required
|
||||
label="Vendor ID"
|
||||
placeholder="Enter Vendor ID"
|
||||
pattern="^0[xX][\da-fA-F]{4}$"
|
||||
defaultValue={usbConfigState?.vendor_id}
|
||||
onChange={e => handleUsbVendorIdChange(e.target.value)}
|
||||
/>
|
||||
<InputFieldWithLabel
|
||||
required
|
||||
label="Product ID"
|
||||
placeholder="Enter Product ID"
|
||||
pattern="^0[xX][\da-fA-F]{4}$"
|
||||
defaultValue={usbConfigState?.product_id}
|
||||
onChange={e => handleUsbProductIdChange(e.target.value)}
|
||||
/>
|
||||
<InputFieldWithLabel
|
||||
required
|
||||
label="Serial Number"
|
||||
placeholder="Enter Serial Number"
|
||||
defaultValue={usbConfigState?.serial_number}
|
||||
onChange={e => handleUsbSerialChange(e.target.value)}
|
||||
/>
|
||||
<InputFieldWithLabel
|
||||
required
|
||||
label="Manufacturer"
|
||||
placeholder="Enter Manufacturer"
|
||||
defaultValue={usbConfigState?.manufacturer}
|
||||
onChange={e => handleUsbManufacturer(e.target.value)}
|
||||
/>
|
||||
<InputFieldWithLabel
|
||||
required
|
||||
label="Product Name"
|
||||
placeholder="Enter Product Name"
|
||||
defaultValue={usbConfigState?.product}
|
||||
onChange={e => handleUsbProduct(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-x-2">
|
||||
<Button
|
||||
size="SM"
|
||||
theme="primary"
|
||||
text="Update USB Config"
|
||||
onClick={() => onSetUsbConfig(usbConfigState)}
|
||||
/>
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
text="Restore to Default"
|
||||
onClick={onRestoreToDefault}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -5,7 +5,10 @@ import { useJsonRpc } from "../hooks/useJsonRpc";
|
|||
import notifications from "../notifications";
|
||||
import { SettingsItem } from "../routes/devices.$id.settings";
|
||||
import Checkbox from "./Checkbox";
|
||||
|
||||
import { Button } from "./Button";
|
||||
import { SelectMenuBasic } from "./SelectMenuBasic";
|
||||
import { SettingsSectionHeader } from "./SettingsSectionHeader";
|
||||
import Fieldset from "./Fieldset";
|
||||
export interface USBConfig {
|
||||
vendor_id: string;
|
||||
product_id: string;
|
||||
|
|
@ -26,12 +29,43 @@ const defaultUsbDeviceConfig: UsbDeviceConfig = {
|
|||
absolute_mouse: true,
|
||||
relative_mouse: true,
|
||||
mass_storage: true,
|
||||
}
|
||||
};
|
||||
|
||||
const usbPresets = [
|
||||
{
|
||||
label: "Keyboard, Mouse and Mass Storage",
|
||||
value: "default",
|
||||
config: {
|
||||
keyboard: true,
|
||||
absolute_mouse: true,
|
||||
relative_mouse: true,
|
||||
mass_storage: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Keyboard Only",
|
||||
value: "keyboard_only",
|
||||
config: {
|
||||
keyboard: true,
|
||||
absolute_mouse: false,
|
||||
relative_mouse: false,
|
||||
mass_storage: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Custom",
|
||||
value: "custom",
|
||||
},
|
||||
];
|
||||
|
||||
export function UsbDeviceSetting() {
|
||||
const [send] = useJsonRpc();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [usbDeviceConfig, setUsbDeviceConfig] =
|
||||
useState<UsbDeviceConfig>(defaultUsbDeviceConfig);
|
||||
const [selectedPreset, setSelectedPreset] = useState<string>("default");
|
||||
|
||||
const [usbDeviceConfig, setUsbDeviceConfig] = useState<UsbDeviceConfig>(defaultUsbDeviceConfig);
|
||||
const syncUsbDeviceConfig = useCallback(() => {
|
||||
send("getUsbDevices", {}, resp => {
|
||||
if ("error" in resp) {
|
||||
|
|
@ -40,51 +74,110 @@ export function UsbDeviceSetting() {
|
|||
`Failed to load USB devices: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
} else {
|
||||
console.log("syncUsbDeviceConfig#getUsbDevices result:", resp.result);
|
||||
const usbConfigState = resp.result as UsbDeviceConfig;
|
||||
setUsbDeviceConfig(usbConfigState);
|
||||
|
||||
// Set the appropriate preset based on current config
|
||||
const matchingPreset = usbPresets.find(
|
||||
preset =>
|
||||
preset.value !== "custom" &&
|
||||
preset.config &&
|
||||
Object.keys(preset.config).length === Object.keys(usbConfigState).length &&
|
||||
Object.keys(preset.config).every(key => {
|
||||
const configKey = key as keyof typeof preset.config;
|
||||
return preset.config[configKey] === usbConfigState[configKey];
|
||||
}),
|
||||
);
|
||||
|
||||
setSelectedPreset(matchingPreset ? matchingPreset.value : "custom");
|
||||
}
|
||||
});
|
||||
}, [send]);
|
||||
|
||||
const handleUsbConfigChange = useCallback(
|
||||
(devices: UsbDeviceConfig) => {
|
||||
send("setUsbDevices", { devices }, resp => {
|
||||
setLoading(true);
|
||||
send("setUsbDevices", { devices }, async resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to set usb devices: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
notifications.success(
|
||||
`USB Devices updated`
|
||||
);
|
||||
|
||||
// We need some time to ensure the USB devices are updated
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
setLoading(false);
|
||||
syncUsbDeviceConfig();
|
||||
notifications.success(`USB Devices updated`);
|
||||
});
|
||||
},
|
||||
[send, syncUsbDeviceConfig],
|
||||
);
|
||||
|
||||
const onUsbConfigItemChange = useCallback((key: keyof UsbDeviceConfig) => (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setUsbDeviceConfig((val) => {
|
||||
val[key] = e.target.checked;
|
||||
handleUsbConfigChange(val);
|
||||
return val;
|
||||
});
|
||||
}, [handleUsbConfigChange]);
|
||||
const onUsbConfigItemChange = useCallback(
|
||||
(key: keyof UsbDeviceConfig) => (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setUsbDeviceConfig(prev => ({
|
||||
...prev,
|
||||
[key]: e.target.checked,
|
||||
}));
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handlePresetChange = useCallback(
|
||||
async (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const newPreset = e.target.value;
|
||||
setSelectedPreset(newPreset);
|
||||
|
||||
if (newPreset !== "custom") {
|
||||
const presetConfig = usbPresets.find(
|
||||
preset => preset.value === newPreset,
|
||||
)?.config;
|
||||
|
||||
if (presetConfig) {
|
||||
handleUsbConfigChange(presetConfig);
|
||||
}
|
||||
}
|
||||
},
|
||||
[handleUsbConfigChange],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
syncUsbDeviceConfig();
|
||||
}, [syncUsbDeviceConfig]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Fieldset disabled={loading} className="space-y-4">
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
||||
<div className="space-y-4">
|
||||
|
||||
<SettingsSectionHeader
|
||||
title="USB Device"
|
||||
description="USB devices to emulate on the target computer"
|
||||
/>
|
||||
|
||||
<SettingsItem
|
||||
title="Enable Keyboard"
|
||||
description="Enable Keyboard"
|
||||
loading={loading}
|
||||
title="Classes"
|
||||
description="USB device classes in the composite device"
|
||||
>
|
||||
<SelectMenuBasic
|
||||
size="SM"
|
||||
label=""
|
||||
className="max-w-[292px]"
|
||||
value={selectedPreset}
|
||||
fullWidth
|
||||
onChange={handlePresetChange}
|
||||
options={usbPresets}
|
||||
/>
|
||||
</SettingsItem>
|
||||
|
||||
{selectedPreset === "custom" && (
|
||||
<div className="ml-2 border-l border-slate-800/10 pl-4 dark:border-slate-300/20 ">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-4">
|
||||
<SettingsItem title="Enable Keyboard" description="Enable Keyboard">
|
||||
<Checkbox
|
||||
checked={usbDeviceConfig.keyboard}
|
||||
onChange={onUsbConfigItemChange("keyboard")}
|
||||
|
|
@ -124,6 +217,24 @@ export function UsbDeviceSetting() {
|
|||
/>
|
||||
</SettingsItem>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
<div className="mt-6 flex gap-x-2">
|
||||
<Button
|
||||
size="SM"
|
||||
loading={loading}
|
||||
theme="primary"
|
||||
text="Update USB Classes"
|
||||
onClick={() => handleUsbConfigChange(usbDeviceConfig)}
|
||||
/>
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
text="Restore to Default"
|
||||
onClick={() => handleUsbConfigChange(defaultUsbDeviceConfig)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Fieldset>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { useMemo } from "react";
|
||||
|
||||
import { useCallback } from "react";
|
||||
import { Button } from "@components/Button";
|
||||
import { InputFieldWithLabel } from "./InputField";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { UsbConfigState } from "../hooks/stores";
|
||||
|
|
@ -8,7 +10,7 @@ import { useJsonRpc } from "../hooks/useJsonRpc";
|
|||
import notifications from "../notifications";
|
||||
import { SettingsItem } from "../routes/devices.$id.settings";
|
||||
import { SelectMenuBasic } from "./SelectMenuBasic";
|
||||
import USBConfigDialog from "./USBConfigDialog";
|
||||
import Fieldset from "./Fieldset";
|
||||
|
||||
const generatedSerialNumber = [generateNumber(1, 9), generateHex(7, 7), 0, 1].join("&");
|
||||
|
||||
|
|
@ -51,8 +53,9 @@ const usbConfigs = [
|
|||
|
||||
type UsbConfigMap = Record<string, USBConfig>;
|
||||
|
||||
export function UsbConfigSetting() {
|
||||
export function UsbInfoSetting() {
|
||||
const [send] = useJsonRpc();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [usbConfigProduct, setUsbConfigProduct] = useState("");
|
||||
const [deviceId, setDeviceId] = useState("");
|
||||
|
|
@ -110,17 +113,23 @@ export function UsbConfigSetting() {
|
|||
|
||||
const handleUsbConfigChange = useCallback(
|
||||
(usbConfig: USBConfig) => {
|
||||
send("setUsbConfig", { usbConfig }, resp => {
|
||||
setLoading(true);
|
||||
send("setUsbConfig", { usbConfig }, async resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to set usb config: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
// setUsbConfigProduct(usbConfig.product);
|
||||
|
||||
// We need some time to ensure the USB devices are updated
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
setLoading(false);
|
||||
notifications.success(
|
||||
`USB Config set to ${usbConfig.manufacturer} ${usbConfig.product}`,
|
||||
);
|
||||
|
||||
syncUsbConfigProduct();
|
||||
});
|
||||
},
|
||||
|
|
@ -141,18 +150,18 @@ export function UsbConfigSetting() {
|
|||
}, [send, syncUsbConfigProduct]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
||||
|
||||
<Fieldset disabled={loading} className="space-y-4">
|
||||
<SettingsItem
|
||||
title="USB Device Emulation"
|
||||
description="Set a Preconfigured USB Device"
|
||||
loading={loading}
|
||||
title="Identifiers"
|
||||
description="USB device identifiers exposed to the target computer"
|
||||
>
|
||||
<SelectMenuBasic
|
||||
size="SM"
|
||||
label=""
|
||||
className="max-w-[192px]"
|
||||
value={usbConfigProduct}
|
||||
fullWidth
|
||||
onChange={e => {
|
||||
if (e.target.value === "custom") {
|
||||
setUsbConfigProduct(e.target.value);
|
||||
|
|
@ -165,13 +174,130 @@ export function UsbConfigSetting() {
|
|||
/>
|
||||
</SettingsItem>
|
||||
{usbConfigProduct === "custom" && (
|
||||
<div className="ml-2 space-y-4 border-l border-slate-800/10 pl-4 dark:border-slate-300/20 ">
|
||||
<USBConfigDialog
|
||||
loading={loading}
|
||||
onSetUsbConfig={usbConfig => handleUsbConfigChange(usbConfig)}
|
||||
onRestoreToDefault={() =>
|
||||
handleUsbConfigChange(usbConfigData[usbConfigs[0].value])
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
</Fieldset>
|
||||
);
|
||||
}
|
||||
|
||||
function USBConfigDialog({
|
||||
loading,
|
||||
onSetUsbConfig,
|
||||
onRestoreToDefault,
|
||||
}: {
|
||||
loading: boolean;
|
||||
onSetUsbConfig: (usbConfig: USBConfig) => void;
|
||||
onRestoreToDefault: () => void;
|
||||
}) {
|
||||
const [usbConfigState, setUsbConfigState] = useState<USBConfig>({
|
||||
vendor_id: "",
|
||||
product_id: "",
|
||||
serial_number: "",
|
||||
manufacturer: "",
|
||||
product: "",
|
||||
});
|
||||
|
||||
const [send] = useJsonRpc();
|
||||
|
||||
const syncUsbConfig = useCallback(() => {
|
||||
send("getUsbConfig", {}, resp => {
|
||||
if ("error" in resp) {
|
||||
console.error("Failed to load USB Config:", resp.error);
|
||||
} else {
|
||||
setUsbConfigState(resp.result as UsbConfigState);
|
||||
}
|
||||
});
|
||||
}, [send, setUsbConfigState]);
|
||||
|
||||
// Load stored usb config from the backend
|
||||
useEffect(() => {
|
||||
syncUsbConfig();
|
||||
}, [syncUsbConfig]);
|
||||
|
||||
const handleUsbVendorIdChange = (value: string) => {
|
||||
setUsbConfigState({ ...usbConfigState, vendor_id: value });
|
||||
};
|
||||
|
||||
const handleUsbProductIdChange = (value: string) => {
|
||||
setUsbConfigState({ ...usbConfigState, product_id: value });
|
||||
};
|
||||
|
||||
const handleUsbSerialChange = (value: string) => {
|
||||
setUsbConfigState({ ...usbConfigState, serial_number: value });
|
||||
};
|
||||
|
||||
const handleUsbManufacturer = (value: string) => {
|
||||
setUsbConfigState({ ...usbConfigState, manufacturer: value });
|
||||
};
|
||||
|
||||
const handleUsbProduct = (value: string) => {
|
||||
setUsbConfigState({ ...usbConfigState, product: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<InputFieldWithLabel
|
||||
required
|
||||
label="Vendor ID"
|
||||
placeholder="Enter Vendor ID"
|
||||
pattern="^0[xX][\da-fA-F]{4}$"
|
||||
defaultValue={usbConfigState?.vendor_id}
|
||||
onChange={e => handleUsbVendorIdChange(e.target.value)}
|
||||
/>
|
||||
<InputFieldWithLabel
|
||||
required
|
||||
label="Product ID"
|
||||
placeholder="Enter Product ID"
|
||||
pattern="^0[xX][\da-fA-F]{4}$"
|
||||
defaultValue={usbConfigState?.product_id}
|
||||
onChange={e => handleUsbProductIdChange(e.target.value)}
|
||||
/>
|
||||
<InputFieldWithLabel
|
||||
required
|
||||
label="Serial Number"
|
||||
placeholder="Enter Serial Number"
|
||||
defaultValue={usbConfigState?.serial_number}
|
||||
onChange={e => handleUsbSerialChange(e.target.value)}
|
||||
/>
|
||||
<InputFieldWithLabel
|
||||
required
|
||||
label="Manufacturer"
|
||||
placeholder="Enter Manufacturer"
|
||||
defaultValue={usbConfigState?.manufacturer}
|
||||
onChange={e => handleUsbManufacturer(e.target.value)}
|
||||
/>
|
||||
<InputFieldWithLabel
|
||||
required
|
||||
label="Product Name"
|
||||
placeholder="Enter Product Name"
|
||||
defaultValue={usbConfigState?.product}
|
||||
onChange={e => handleUsbProduct(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-6 flex gap-x-2">
|
||||
<Button
|
||||
loading={loading}
|
||||
size="SM"
|
||||
theme="primary"
|
||||
text="Update USB Identifiers"
|
||||
onClick={() => onSetUsbConfig(usbConfigState)}
|
||||
/>
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
text="Restore to Default"
|
||||
onClick={onRestoreToDefault}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -29,6 +29,7 @@ export default function WebRTCVideo() {
|
|||
const settings = useSettingsStore();
|
||||
const { sendKeyboardEvent, resetKeyboardState } = useKeyboard();
|
||||
const setMousePosition = useMouseStore(state => state.setMousePosition);
|
||||
const setMouseMove = useMouseStore(state => state.setMouseMove);
|
||||
const {
|
||||
setClientSize: setVideoClientSize,
|
||||
setSize: setVideoSize,
|
||||
|
|
@ -93,19 +94,44 @@ export default function WebRTCVideo() {
|
|||
);
|
||||
|
||||
// Mouse-related
|
||||
const sendMouseMovement = useCallback(
|
||||
const calcDelta = (pos: number) => (Math.abs(pos) < 10 ? pos * 2 : pos);
|
||||
const sendRelMouseMovement = useCallback(
|
||||
(x: number, y: number, buttons: number) => {
|
||||
send("absMouseReport", { x, y, buttons });
|
||||
if (settings.mouseMode !== "relative") return;
|
||||
// if we ignore the event, double-click will not work
|
||||
// if (x === 0 && y === 0 && buttons === 0) return;
|
||||
send("relMouseReport", { dx: calcDelta(x), dy: calcDelta(y), buttons });
|
||||
setMouseMove({ x, y, buttons });
|
||||
},
|
||||
[send, setMouseMove, settings.mouseMode],
|
||||
);
|
||||
|
||||
const relMouseMoveHandler = useCallback(
|
||||
(e: MouseEvent) => {
|
||||
if (settings.mouseMode !== "relative") return;
|
||||
|
||||
// Send mouse movement
|
||||
const { buttons } = e;
|
||||
sendRelMouseMovement(e.movementX, e.movementY, buttons);
|
||||
},
|
||||
[sendRelMouseMovement, settings.mouseMode],
|
||||
);
|
||||
|
||||
const sendAbsMouseMovement = useCallback(
|
||||
(x: number, y: number, buttons: number) => {
|
||||
if (settings.mouseMode !== "absolute") return;
|
||||
send("absMouseReport", { x, y, buttons });
|
||||
// We set that for the debug info bar
|
||||
setMousePosition(x, y);
|
||||
},
|
||||
[send, setMousePosition],
|
||||
[send, setMousePosition, settings.mouseMode],
|
||||
);
|
||||
|
||||
const mouseMoveHandler = useCallback(
|
||||
const absMouseMoveHandler = useCallback(
|
||||
(e: MouseEvent) => {
|
||||
if (!videoClientWidth || !videoClientHeight) return;
|
||||
if (settings.mouseMode !== "absolute") return;
|
||||
|
||||
// Get the aspect ratios of the video element and the video stream
|
||||
const videoElementAspectRatio = videoClientWidth / videoClientHeight;
|
||||
const videoStreamAspectRatio = videoWidth / videoHeight;
|
||||
|
|
@ -140,9 +166,16 @@ export default function WebRTCVideo() {
|
|||
|
||||
// Send mouse movement
|
||||
const { buttons } = e;
|
||||
sendMouseMovement(x, y, buttons);
|
||||
sendAbsMouseMovement(x, y, buttons);
|
||||
},
|
||||
[sendMouseMovement, videoClientHeight, videoClientWidth, videoWidth, videoHeight],
|
||||
[
|
||||
sendAbsMouseMovement,
|
||||
videoClientHeight,
|
||||
videoClientWidth,
|
||||
videoWidth,
|
||||
videoHeight,
|
||||
settings.mouseMode,
|
||||
],
|
||||
);
|
||||
|
||||
const trackpadSensitivity = useDeviceSettingsStore(state => state.trackpadSensitivity);
|
||||
|
|
@ -193,8 +226,8 @@ export default function WebRTCVideo() {
|
|||
);
|
||||
|
||||
const resetMousePosition = useCallback(() => {
|
||||
sendMouseMovement(0, 0, 0);
|
||||
}, [sendMouseMovement]);
|
||||
sendAbsMouseMovement(0, 0, 0);
|
||||
}, [sendAbsMouseMovement]);
|
||||
|
||||
// Keyboard-related
|
||||
const handleModifierKeys = useCallback(
|
||||
|
|
@ -329,28 +362,6 @@ export default function WebRTCVideo() {
|
|||
],
|
||||
);
|
||||
|
||||
// Effect hooks
|
||||
useEffect(
|
||||
function setupKeyboardEvents() {
|
||||
const abortController = new AbortController();
|
||||
const signal = abortController.signal;
|
||||
|
||||
document.addEventListener("keydown", keyDownHandler, { signal });
|
||||
document.addEventListener("keyup", keyUpHandler, { signal });
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
window.clearKeys = () => sendKeyboardEvent([], []);
|
||||
window.addEventListener("blur", resetKeyboardState, { signal });
|
||||
document.addEventListener("visibilitychange", resetKeyboardState, { signal });
|
||||
|
||||
return () => {
|
||||
abortController.abort();
|
||||
};
|
||||
},
|
||||
[keyDownHandler, keyUpHandler, resetKeyboardState, sendKeyboardEvent],
|
||||
);
|
||||
|
||||
const videoKeyUpHandler = useCallback((e: KeyboardEvent) => {
|
||||
// In fullscreen mode in chrome & safari, the space key is used to pause/play the video
|
||||
// there is no way to prevent this, so we need to simply force play the video when it's paused.
|
||||
|
|
@ -363,46 +374,6 @@ export default function WebRTCVideo() {
|
|||
}
|
||||
}, []);
|
||||
|
||||
useEffect(
|
||||
function setupVideoEventListeners() {
|
||||
let videoElmRefValue = null;
|
||||
if (!videoElm.current) return;
|
||||
videoElmRefValue = videoElm.current;
|
||||
const abortController = new AbortController();
|
||||
const signal = abortController.signal;
|
||||
|
||||
videoElmRefValue.addEventListener("mousemove", mouseMoveHandler, { signal });
|
||||
videoElmRefValue.addEventListener("pointerdown", mouseMoveHandler, { signal });
|
||||
videoElmRefValue.addEventListener("pointerup", mouseMoveHandler, { signal });
|
||||
videoElmRefValue.addEventListener("keyup", videoKeyUpHandler, { signal });
|
||||
videoElmRefValue.addEventListener("wheel", mouseWheelHandler, {
|
||||
signal,
|
||||
passive: true,
|
||||
});
|
||||
videoElmRefValue.addEventListener(
|
||||
"contextmenu",
|
||||
(e: MouseEvent) => e.preventDefault(),
|
||||
{ signal },
|
||||
);
|
||||
videoElmRefValue.addEventListener("playing", onVideoPlaying, { signal });
|
||||
|
||||
const local = resetMousePosition;
|
||||
window.addEventListener("blur", local, { signal });
|
||||
document.addEventListener("visibilitychange", local, { signal });
|
||||
|
||||
return () => {
|
||||
if (videoElmRefValue) abortController.abort();
|
||||
};
|
||||
},
|
||||
[
|
||||
mouseMoveHandler,
|
||||
resetMousePosition,
|
||||
onVideoPlaying,
|
||||
mouseWheelHandler,
|
||||
videoKeyUpHandler,
|
||||
],
|
||||
);
|
||||
|
||||
useEffect(
|
||||
function updateVideoStream() {
|
||||
if (!mediaStream) return;
|
||||
|
|
@ -425,6 +396,120 @@ export default function WebRTCVideo() {
|
|||
],
|
||||
);
|
||||
|
||||
// Setup Keyboard Events
|
||||
useEffect(
|
||||
function setupKeyboardEvents() {
|
||||
const abortController = new AbortController();
|
||||
const signal = abortController.signal;
|
||||
|
||||
document.addEventListener("keydown", keyDownHandler, { signal });
|
||||
document.addEventListener("keyup", keyUpHandler, { signal });
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-expect-error
|
||||
window.clearKeys = () => sendKeyboardEvent([], []);
|
||||
window.addEventListener("blur", resetKeyboardState, { signal });
|
||||
document.addEventListener("visibilitychange", resetKeyboardState, { signal });
|
||||
|
||||
return () => {
|
||||
abortController.abort();
|
||||
};
|
||||
},
|
||||
[keyDownHandler, keyUpHandler, resetKeyboardState, sendKeyboardEvent],
|
||||
);
|
||||
|
||||
useEffect(
|
||||
function setupVideoEventListeners() {
|
||||
const videoElmRefValue = videoElm.current;
|
||||
if (!videoElmRefValue) return;
|
||||
|
||||
const abortController = new AbortController();
|
||||
const signal = abortController.signal;
|
||||
|
||||
// To prevent the video from being paused when the user presses a space in fullscreen mode
|
||||
videoElmRefValue.addEventListener("keyup", videoKeyUpHandler, { signal });
|
||||
|
||||
// We need to know when the video is playing to update state and video size
|
||||
videoElmRefValue.addEventListener("playing", onVideoPlaying, { signal });
|
||||
|
||||
return () => {
|
||||
abortController.abort();
|
||||
};
|
||||
},
|
||||
[
|
||||
absMouseMoveHandler,
|
||||
resetMousePosition,
|
||||
onVideoPlaying,
|
||||
mouseWheelHandler,
|
||||
videoKeyUpHandler,
|
||||
],
|
||||
);
|
||||
|
||||
// Setup Absolute Mouse Events
|
||||
useEffect(
|
||||
function setAbsoluteMouseModeEventListeners() {
|
||||
const videoElmRefValue = videoElm.current;
|
||||
if (!videoElmRefValue) return;
|
||||
|
||||
if (settings.mouseMode !== "absolute") return;
|
||||
|
||||
const abortController = new AbortController();
|
||||
const signal = abortController.signal;
|
||||
|
||||
videoElmRefValue.addEventListener("mousemove", absMouseMoveHandler, { signal });
|
||||
videoElmRefValue.addEventListener("pointerdown", absMouseMoveHandler, { signal });
|
||||
videoElmRefValue.addEventListener("pointerup", absMouseMoveHandler, { signal });
|
||||
videoElmRefValue.addEventListener("wheel", mouseWheelHandler, {
|
||||
signal,
|
||||
passive: true,
|
||||
});
|
||||
|
||||
// Reset the mouse position when the window is blurred or the document is hidden
|
||||
const local = resetMousePosition;
|
||||
window.addEventListener("blur", local, { signal });
|
||||
document.addEventListener("visibilitychange", local, { signal });
|
||||
|
||||
return () => {
|
||||
abortController.abort();
|
||||
};
|
||||
},
|
||||
[absMouseMoveHandler, mouseWheelHandler, resetMousePosition, settings.mouseMode],
|
||||
);
|
||||
|
||||
// Setup Relative Mouse Events
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
useEffect(
|
||||
function setupRelativeMouseEventListeners() {
|
||||
if (settings.mouseMode !== "relative") return;
|
||||
|
||||
const abortController = new AbortController();
|
||||
const signal = abortController.signal;
|
||||
|
||||
// We bind to the larger container in relative mode because of delta between the acceleration of the local
|
||||
// mouse and the mouse movement of the remote mouse. This simply makes it a bit less painful to use.
|
||||
// When we get Pointer Lock support, we can remove this.
|
||||
const containerElm = containerRef.current;
|
||||
if (!containerElm) return;
|
||||
|
||||
containerElm.addEventListener("mousemove", relMouseMoveHandler, { signal });
|
||||
containerElm.addEventListener("pointerdown", relMouseMoveHandler, { signal });
|
||||
containerElm.addEventListener("pointerup", relMouseMoveHandler, { signal });
|
||||
|
||||
containerElm.addEventListener("wheel", mouseWheelHandler, {
|
||||
signal,
|
||||
passive: true,
|
||||
});
|
||||
|
||||
const preventContextMenu = (e: MouseEvent) => e.preventDefault();
|
||||
containerElm.addEventListener("contextmenu", preventContextMenu, { signal });
|
||||
|
||||
return () => {
|
||||
abortController.abort();
|
||||
};
|
||||
},
|
||||
[settings.mouseMode, relMouseMoveHandler, mouseWheelHandler],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid h-full w-full grid-rows-layout">
|
||||
<div className="min-h-[39.5px]">
|
||||
|
|
@ -439,7 +524,12 @@ export default function WebRTCVideo() {
|
|||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div className="h-full overflow-hidden">
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={cx("h-full overflow-hidden", {
|
||||
"cursor-none": settings.mouseMode === "relative" && settings.isCursorHidden,
|
||||
})}
|
||||
>
|
||||
<div className="relative h-full">
|
||||
<div
|
||||
className={cx(
|
||||
|
|
@ -468,7 +558,9 @@ export default function WebRTCVideo() {
|
|||
className={cx(
|
||||
"outline-50 max-h-full max-w-full object-contain transition-all duration-1000",
|
||||
{
|
||||
"cursor-none": settings.isCursorHidden,
|
||||
"cursor-none":
|
||||
settings.mouseMode === "absolute" &&
|
||||
settings.isCursorHidden,
|
||||
"opacity-0": isLoading || isConnectionError || hdmiError,
|
||||
"animate-slideUpFade border border-slate-800/30 opacity-0 shadow dark:border-slate-300/20":
|
||||
isPlaying,
|
||||
|
|
|
|||
|
|
@ -197,15 +197,23 @@ export const useRTCStore = create<RTCState>(set => ({
|
|||
setTerminalChannel: channel => set({ terminalChannel: channel }),
|
||||
}));
|
||||
|
||||
interface MouseMove {
|
||||
x: number;
|
||||
y: number;
|
||||
buttons: number;
|
||||
}
|
||||
interface MouseState {
|
||||
mouseX: number;
|
||||
mouseY: number;
|
||||
mouseMove?: MouseMove;
|
||||
setMouseMove: (move?: MouseMove) => void;
|
||||
setMousePosition: (x: number, y: number) => void;
|
||||
}
|
||||
|
||||
export const useMouseStore = create<MouseState>(set => ({
|
||||
mouseX: 0,
|
||||
mouseY: 0,
|
||||
setMouseMove: (move?: MouseMove) => set({ mouseMove: move }),
|
||||
setMousePosition: (x, y) => set({ mouseX: x, mouseY: y }),
|
||||
}));
|
||||
|
||||
|
|
|
|||
|
|
@ -100,8 +100,6 @@ export function Dialog({ onClose }: { onClose: () => void }) {
|
|||
.finally(() => {
|
||||
setMountInProgress(false);
|
||||
});
|
||||
|
||||
navigate("..");
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -115,7 +113,7 @@ export function Dialog({ onClose }: { onClose: () => void }) {
|
|||
clearMountMediaState();
|
||||
syncRemoteVirtualMediaState()
|
||||
.then(() => {
|
||||
false;
|
||||
navigate("..");
|
||||
})
|
||||
.catch(err => {
|
||||
triggerError(err instanceof Error ? err.message : String(err));
|
||||
|
|
@ -839,7 +837,11 @@ function DeviceFileView({
|
|||
onDelete={() => {
|
||||
const selectedFile = onStorageFiles.find(f => f.name === file.name);
|
||||
if (!selectedFile) return;
|
||||
if (window.confirm("Are you sure you want to delete " + selectedFile.name + "?")) {
|
||||
if (
|
||||
window.confirm(
|
||||
"Are you sure you want to delete " + selectedFile.name + "?",
|
||||
)
|
||||
) {
|
||||
handleDeleteFile(selectedFile);
|
||||
}
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { useJsonRpc } from "@/hooks/useJsonRpc";
|
|||
|
||||
import notifications from "../notifications";
|
||||
import { SelectMenuBasic } from "@components/SelectMenuBasic";
|
||||
import { UsbConfigSetting } from "../components/UsbConfigSetting";
|
||||
import { UsbInfoSetting } from "../components/UsbInfoSetting";
|
||||
import { UsbDeviceSetting } from "@components/UsbDeviceSetting";
|
||||
import { FeatureFlag } from "../components/FeatureFlag";
|
||||
|
||||
|
|
@ -131,11 +131,11 @@ export default function SettingsHardwareRoute() {
|
|||
</div>
|
||||
|
||||
<FeatureFlag minAppVersion="0.3.8">
|
||||
<UsbConfigSetting />
|
||||
<UsbDeviceSetting />
|
||||
</FeatureFlag>
|
||||
|
||||
<FeatureFlag minAppVersion="0.3.8">
|
||||
<UsbDeviceSetting />
|
||||
<UsbInfoSetting />
|
||||
</FeatureFlag>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,23 +1,27 @@
|
|||
import { SettingsPageHeader } from "@components/SettingsPageheader";
|
||||
import { SettingsItem } from "./devices.$id.settings";
|
||||
import { Checkbox } from "@/components/Checkbox";
|
||||
import { GridCard } from "@/components/Card";
|
||||
import MouseIcon from "@/assets/mouse-icon.svg";
|
||||
import PointingFinger from "@/assets/pointing-finger.svg";
|
||||
import { CheckCircleIcon } from "@heroicons/react/16/solid";
|
||||
import { GridCard } from "@/components/Card";
|
||||
import { Checkbox } from "@/components/Checkbox";
|
||||
import { useDeviceSettingsStore, useSettingsStore } from "@/hooks/stores";
|
||||
import notifications from "@/notifications";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useJsonRpc } from "@/hooks/useJsonRpc";
|
||||
import { cx } from "../cva.config";
|
||||
import notifications from "@/notifications";
|
||||
import { SettingsPageHeader } from "@components/SettingsPageheader";
|
||||
import { CheckCircleIcon } from "@heroicons/react/16/solid";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { FeatureFlag } from "../components/FeatureFlag";
|
||||
import { SelectMenuBasic } from "../components/SelectMenuBasic";
|
||||
import { useFeatureFlag } from "../hooks/useFeatureFlag";
|
||||
import { FeatureFlag } from "../components/FeatureFlag";
|
||||
import { SettingsItem } from "./devices.$id.settings";
|
||||
|
||||
type ScrollSensitivity = "low" | "default" | "high";
|
||||
|
||||
export default function SettingsKeyboardMouseRoute() {
|
||||
const hideCursor = useSettingsStore(state => state.isCursorHidden);
|
||||
const setHideCursor = useSettingsStore(state => state.setCursorVisibility);
|
||||
|
||||
const mouseMode = useSettingsStore(state => state.mouseMode);
|
||||
const setMouseMode = useSettingsStore(state => state.setMouseMode);
|
||||
|
||||
const scrollSensitivity = useDeviceSettingsStore(state => state.scrollSensitivity);
|
||||
const setScrollSensitivity = useDeviceSettingsStore(
|
||||
state => state.setScrollSensitivity,
|
||||
|
|
@ -122,19 +126,19 @@ export default function SettingsKeyboardMouseRoute() {
|
|||
</SettingsItem>
|
||||
<div className="space-y-4">
|
||||
<SettingsItem title="Modes" description="Choose the mouse input mode" />
|
||||
<div className="flex flex-col items-center gap-4 md:flex-row">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
className="group block w-full grow"
|
||||
onClick={() => console.log("Absolute mouse mode clicked")}
|
||||
className="block group grow"
|
||||
onClick={() => { setMouseMode("absolute"); }}
|
||||
>
|
||||
<GridCard>
|
||||
<div className="group flex items-center gap-x-4 px-4 py-3">
|
||||
<div className="flex items-center px-4 py-3 group gap-x-4">
|
||||
<img
|
||||
className="w-6 shrink-0 dark:invert"
|
||||
src={PointingFinger}
|
||||
alt="Finger touching a screen"
|
||||
/>
|
||||
<div className="flex grow items-center justify-between">
|
||||
<div className="flex items-center justify-between grow">
|
||||
<div className="text-left">
|
||||
<h3 className="text-sm font-semibold text-black dark:text-white">
|
||||
Absolute
|
||||
|
|
@ -143,41 +147,32 @@ export default function SettingsKeyboardMouseRoute() {
|
|||
Most convenient
|
||||
</p>
|
||||
</div>
|
||||
<CheckCircleIcon
|
||||
className={cx(
|
||||
"h-4 w-4 text-blue-700 transition-opacity duration-300 dark:text-blue-500",
|
||||
{mouseMode === "absolute" && (
|
||||
<CheckCircleIcon className="w-4 h-4 text-blue-700 dark:text-blue-500" />
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</GridCard>
|
||||
</button>
|
||||
<button
|
||||
className="group block w-full grow cursor-not-allowed opacity-50"
|
||||
disabled
|
||||
className="block group grow"
|
||||
onClick={() => { setMouseMode("relative"); }}
|
||||
>
|
||||
<GridCard>
|
||||
<div className="group flex items-center gap-x-4 px-4 py-3">
|
||||
<img
|
||||
className="w-6 shrink-0 dark:invert"
|
||||
src={PointingFinger}
|
||||
alt="Finger touching a screen"
|
||||
/>
|
||||
<div className="flex grow items-center justify-between">
|
||||
<div className="flex items-center px-4 py-3 gap-x-4">
|
||||
<img className="w-6 shrink-0 dark:invert" src={MouseIcon} alt="Mouse icon" />
|
||||
<div className="flex items-center justify-between grow">
|
||||
<div className="text-left">
|
||||
<h3 className="text-sm font-semibold text-black dark:text-white">
|
||||
Relative
|
||||
</h3>
|
||||
<p className="text-xs leading-none text-slate-800 dark:text-slate-300">
|
||||
Most Compatible
|
||||
Most Compatible (Beta)
|
||||
</p>
|
||||
</div>
|
||||
<CheckCircleIcon
|
||||
className={cx(
|
||||
"hidden",
|
||||
"h-4 w-4 text-blue-700 transition-opacity duration-300 dark:text-blue-500",
|
||||
{mouseMode === "relative" && (
|
||||
<CheckCircleIcon className="w-4 h-4 text-blue-700 dark:text-blue-500" />
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</GridCard>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import { cx } from "../cva.config";
|
|||
import { useUiStore } from "../hooks/stores";
|
||||
import useKeyboard from "../hooks/useKeyboard";
|
||||
import { useResizeObserver } from "../hooks/useResizeObserver";
|
||||
import LoadingSpinner from "../components/LoadingSpinner";
|
||||
|
||||
/* TODO: Migrate to using URLs instead of the global state. To simplify the refactoring, we'll keep the global state for now. */
|
||||
export default function SettingsRoute() {
|
||||
|
|
@ -206,7 +207,7 @@ export default function SettingsRoute() {
|
|||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="w-full md:col-span-5">
|
||||
<div className="w-full md:col-span-6">
|
||||
{/* <AutoHeight> */}
|
||||
<Card className="dark:bg-slate-800">
|
||||
<div
|
||||
|
|
@ -230,12 +231,14 @@ export function SettingsItem({
|
|||
description,
|
||||
children,
|
||||
className,
|
||||
loading,
|
||||
}: {
|
||||
title: string;
|
||||
description: string | React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
name?: string;
|
||||
loading?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<label
|
||||
|
|
@ -245,7 +248,10 @@ export function SettingsItem({
|
|||
)}
|
||||
>
|
||||
<div className="space-y-0.5">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<h3 className="text-base font-semibold text-black dark:text-white">{title}</h3>
|
||||
{loading && <LoadingSpinner className="h-4 w-4 text-blue-500" />}
|
||||
</div>
|
||||
<p className="text-sm text-slate-700 dark:text-slate-300">{description}</p>
|
||||
</div>
|
||||
{children ? <div>{children}</div> : null}
|
||||
|
|
|
|||
|
|
@ -516,6 +516,10 @@ export default function KvmIdRoute() {
|
|||
|
||||
<div
|
||||
className="isolate"
|
||||
// onMouseMove={e => e.stopPropagation()}
|
||||
// onMouseDown={e => e.stopPropagation()}
|
||||
// onMouseUp={e => e.stopPropagation()}
|
||||
// onPointerMove={e => e.stopPropagation()}
|
||||
onKeyUp={e => e.stopPropagation()}
|
||||
onKeyDown={e => {
|
||||
e.stopPropagation();
|
||||
|
|
|
|||
7
usb.go
7
usb.go
|
|
@ -1,8 +1,9 @@
|
|||
package kvm
|
||||
|
||||
import (
|
||||
"github.com/jetkvm/kvm/internal/usbgadget"
|
||||
"time"
|
||||
|
||||
"github.com/jetkvm/kvm/internal/usbgadget"
|
||||
)
|
||||
|
||||
var gadget *usbgadget.UsbGadget
|
||||
|
|
@ -33,6 +34,10 @@ func rpcAbsMouseReport(x, y int, buttons uint8) error {
|
|||
return gadget.AbsMouseReport(x, y, buttons)
|
||||
}
|
||||
|
||||
func rpcRelMouseReport(dx, dy int8, buttons uint8) error {
|
||||
return gadget.RelMouseReport(dx, dy, buttons)
|
||||
}
|
||||
|
||||
func rpcWheelReport(wheelY int8) error {
|
||||
return gadget.AbsMouseWheelReport(wheelY)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@ import (
|
|||
"time"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
"github.com/psanford/httpreadat"
|
||||
"github.com/google/uuid"
|
||||
"github.com/pion/webrtc/v4"
|
||||
"github.com/psanford/httpreadat"
|
||||
|
||||
"github.com/jetkvm/kvm/resource"
|
||||
)
|
||||
|
|
@ -27,7 +27,7 @@ func writeFile(path string, data string) error {
|
|||
}
|
||||
|
||||
func setMassStorageImage(imagePath string) error {
|
||||
massStorageFunctionPath, err := gadget.GetConfigPath("mass_storage_lun0")
|
||||
massStorageFunctionPath, err := gadget.GetPath("mass_storage_lun0")
|
||||
if err != nil {
|
||||
return fmt.Errorf("failed to get mass storage path: %w", err)
|
||||
}
|
||||
|
|
@ -39,7 +39,7 @@ func setMassStorageImage(imagePath string) error {
|
|||
}
|
||||
|
||||
func setMassStorageMode(cdrom bool) error {
|
||||
massStorageFunctionPath, err := gadget.GetConfigPath("mass_storage_lun0")
|
||||
massStorageFunctionPath, err := gadget.GetPath("mass_storage_lun0")
|
||||
if err != nil {
|
||||
return fmt.Errorf("failed to get mass storage path: %w", err)
|
||||
}
|
||||
|
|
@ -110,7 +110,7 @@ func rpcMountBuiltInImage(filename string) error {
|
|||
}
|
||||
|
||||
func getMassStorageMode() (bool, error) {
|
||||
massStorageFunctionPath, err := gadget.GetConfigPath("mass_storage_lun0")
|
||||
massStorageFunctionPath, err := gadget.GetPath("mass_storage_lun0")
|
||||
if err != nil {
|
||||
return false, fmt.Errorf("failed to get mass storage path: %w", err)
|
||||
}
|
||||
|
|
|
|||
5
web.go
5
web.go
|
|
@ -11,10 +11,7 @@ import (
|
|||
|
||||
"github.com/gin-gonic/gin"
|
||||
"github.com/google/uuid"
|
||||
"github.com/prometheus/client_golang/prometheus"
|
||||
versioncollector "github.com/prometheus/client_golang/prometheus/collectors/version"
|
||||
"github.com/prometheus/client_golang/prometheus/promhttp"
|
||||
"github.com/prometheus/common/version"
|
||||
"golang.org/x/crypto/bcrypt"
|
||||
)
|
||||
|
||||
|
|
@ -86,8 +83,6 @@ func setupRouter() *gin.Engine {
|
|||
r.POST("/device/setup", handleSetup)
|
||||
|
||||
// A Prometheus metrics endpoint.
|
||||
version.Version = builtAppVersion
|
||||
prometheus.MustRegister(versioncollector.NewCollector("jetkvm"))
|
||||
r.GET("/metrics", gin.WrapH(promhttp.Handler()))
|
||||
|
||||
// Protected routes (allows both password and noPassword modes)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,132 @@
|
|||
package kvm
|
||||
|
||||
import (
|
||||
"crypto/ecdsa"
|
||||
"crypto/elliptic"
|
||||
"crypto/rand"
|
||||
"crypto/tls"
|
||||
"crypto/x509"
|
||||
"crypto/x509/pkix"
|
||||
"encoding/pem"
|
||||
"log"
|
||||
"math/big"
|
||||
"net"
|
||||
"net/http"
|
||||
"strings"
|
||||
"sync"
|
||||
"time"
|
||||
)
|
||||
|
||||
const (
|
||||
WebSecureListen = ":443"
|
||||
WebSecureSelfSignedDefaultDomain = "jetkvm.local"
|
||||
WebSecureSelfSignedDuration = 365 * 24 * time.Hour
|
||||
)
|
||||
|
||||
var (
|
||||
tlsCerts = make(map[string]*tls.Certificate)
|
||||
tlsCertLock = &sync.Mutex{}
|
||||
)
|
||||
|
||||
// RunWebSecureServer runs a web server with TLS.
|
||||
func RunWebSecureServer() {
|
||||
r := setupRouter()
|
||||
|
||||
server := &http.Server{
|
||||
Addr: WebSecureListen,
|
||||
Handler: r,
|
||||
TLSConfig: &tls.Config{
|
||||
// TODO: cache certificate in persistent storage
|
||||
GetCertificate: func(info *tls.ClientHelloInfo) (*tls.Certificate, error) {
|
||||
hostname := WebSecureSelfSignedDefaultDomain
|
||||
if info.ServerName != "" {
|
||||
hostname = info.ServerName
|
||||
} else {
|
||||
hostname = strings.Split(info.Conn.LocalAddr().String(), ":")[0]
|
||||
}
|
||||
|
||||
logger.Infof("TLS handshake for %s, SupportedProtos: %v", hostname, info.SupportedProtos)
|
||||
|
||||
cert := createSelfSignedCert(hostname)
|
||||
|
||||
return cert, nil
|
||||
},
|
||||
},
|
||||
}
|
||||
logger.Infof("Starting websecure server on %s", RunWebSecureServer)
|
||||
err := server.ListenAndServeTLS("", "")
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
func createSelfSignedCert(hostname string) *tls.Certificate {
|
||||
if tlsCert := tlsCerts[hostname]; tlsCert != nil {
|
||||
return tlsCert
|
||||
}
|
||||
tlsCertLock.Lock()
|
||||
defer tlsCertLock.Unlock()
|
||||
|
||||
logger.Infof("Creating self-signed certificate for %s", hostname)
|
||||
|
||||
priv, err := ecdsa.GenerateKey(elliptic.P256(), rand.Reader)
|
||||
if err != nil {
|
||||
log.Fatalf("Failed to generate private key: %v", err)
|
||||
}
|
||||
keyUsage := x509.KeyUsageDigitalSignature
|
||||
|
||||
notBefore := time.Now()
|
||||
notAfter := notBefore.AddDate(1, 0, 0)
|
||||
|
||||
serialNumberLimit := new(big.Int).Lsh(big.NewInt(1), 128)
|
||||
serialNumber, err := rand.Int(rand.Reader, serialNumberLimit)
|
||||
if err != nil {
|
||||
logger.Errorf("Failed to generate serial number: %v", err)
|
||||
}
|
||||
|
||||
dnsName := hostname
|
||||
ip := net.ParseIP(hostname)
|
||||
if ip != nil {
|
||||
dnsName = WebSecureSelfSignedDefaultDomain
|
||||
}
|
||||
|
||||
template := x509.Certificate{
|
||||
SerialNumber: serialNumber,
|
||||
Subject: pkix.Name{
|
||||
CommonName: hostname,
|
||||
Organization: []string{"JetKVM"},
|
||||
},
|
||||
NotBefore: notBefore,
|
||||
NotAfter: notAfter,
|
||||
|
||||
KeyUsage: keyUsage,
|
||||
ExtKeyUsage: []x509.ExtKeyUsage{x509.ExtKeyUsageServerAuth},
|
||||
BasicConstraintsValid: true,
|
||||
|
||||
DNSNames: []string{dnsName},
|
||||
IPAddresses: []net.IP{},
|
||||
}
|
||||
|
||||
if ip != nil {
|
||||
template.IPAddresses = append(template.IPAddresses, ip)
|
||||
}
|
||||
|
||||
derBytes, err := x509.CreateCertificate(rand.Reader, &template, &template, &priv.PublicKey, priv)
|
||||
if err != nil {
|
||||
logger.Errorf("Failed to create certificate: %v", err)
|
||||
}
|
||||
|
||||
cert := pem.EncodeToMemory(&pem.Block{Type: "CERTIFICATE", Bytes: derBytes})
|
||||
if cert == nil {
|
||||
logger.Errorf("Failed to encode certificate")
|
||||
}
|
||||
|
||||
tlsCert := &tls.Certificate{
|
||||
Certificate: [][]byte{derBytes},
|
||||
PrivateKey: priv,
|
||||
}
|
||||
tlsCerts[hostname] = tlsCert
|
||||
|
||||
return tlsCert
|
||||
}
|
||||
Loading…
Reference in New Issue