Complete implementation of other platforms with comments and Refactor

Author: PinJinx

src/hooks/useCaptureProvider.ts

@@ -27,6 +27,12 @@ export function useCaptureProvider(wsRef: React.RefObject<WebSocket | null>) {
 		}
 		setIsSharing(false)
 	}
+	const getConfig = () => ({
+		sensitivity:
+			Number.parseFloat(localStorage.getItem("rein_sensitivity") || "1.0") ||
+			1.0,
+		invertScroll: localStorage.getItem("rein_invert") === "true" || false,
+	})
 
 	const captureFrame = () => {
 		if (!videoRef.current || !canvasRef.current || !wsRef.current) return
@@ -103,7 +109,9 @@ export function useCaptureProvider(wsRef: React.RefObject<WebSocket | null>) {
 			setIsSharing(true)
 
 			if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-				wsRef.current.send(JSON.stringify({ type: "start-provider" }))
+				wsRef.current.send(
+					JSON.stringify({ type: "start-provider", config: getConfig() }),
+				)
 			}
 
 			// Start capture loop (approx 12 FPS)

src/hooks/useRemoteConnection.ts

@@ -11,6 +11,20 @@ export const useRemoteConnection = () => {
 			keys: msg,
 		})
 	}
+	const sendConfigUpdate = (sensitivity: number, invertScroll: boolean) => {
+		send({
+			type: "update-settings",
+			config: { sensitivity, invertScroll },
+		})
+	}
 
-	return { status, platform, send, sendCombo, wsRef, subscribe }
+	return {
+		status,
+		platform,
+		send,
+		sendCombo,
+		sendConfigUpdate,
+		wsRef,
+		subscribe,
+	}
 }

src/hooks/useTrackpadGesture.ts

@@ -1,10 +1,4 @@
 import { useEffect, useRef, useState } from "react"
-import {
-	PINCH_THRESHOLD,
-	TOUCH_MOVE_THRESHOLD,
-	TOUCH_TIMEOUT,
-	calculateAccelerationMult,
-} from "../utils/math"
 
 interface TrackedTouch {
 	identifier: number
@@ -30,8 +24,6 @@ const BUTTON_MAP: Record<number, "left" | "right" | "middle"> = {
 export const useTrackpadGesture = (
 	send: (msg: unknown) => void,
 	scrollMode: boolean,
-	sensitivity = 1.5,
-	invertScroll = false,
 	axisThreshold = 2.5,
 ) => {
 	const [isTracking, setIsTracking] = useState(false)
@@ -43,20 +35,20 @@ export const useTrackpadGesture = (
 	const releasedCount = useRef(0)
 	const dragging = useRef(false)
 	const draggingTimeout = useRef<NodeJS.Timeout | null>(null)
+	const TOUCH_MOVE_THRESHOLD = [10, 15, 15]
+	const TOUCH_TIMEOUT = 250
+	const PINCH_THRESHOLD = 10
 	const lastPinchDist = useRef<number | null>(null)
 	const pinching = useRef(false)
 
 	const processMovement = (sumX: number, sumY: number) => {
 		const touchCount = ongoingTouches.current.size
+
 		if (dragging.current) {
-			send({
-				type: "move",
-				dx: Math.round(sumX * sensitivity * 10) / 10,
-				dy: Math.round(sumY * sensitivity * 10) / 10,
-			})
+			send({ type: "move", dx: sumX, dy: sumY })
 			return
 		}
-		const invertMult = invertScroll ? -1 : 1
+
 		if (!scrollMode && touchCount === 2) {
 			const touches = Array.from(ongoingTouches.current.values())
 			const dist = getTouchDistance(touches[0], touches[1])
@@ -65,38 +57,23 @@ export const useTrackpadGesture = (
 			if (pinching.current || Math.abs(delta) > PINCH_THRESHOLD) {
 				pinching.current = true
 				lastPinchDist.current = dist
-				send({ type: "zoom", delta: delta * sensitivity * invertMult })
+				send({ type: "zoom", delta })
 			} else {
 				lastPinchDist.current = dist
-				send({
-					type: "scroll",
-					dx: -sumX * sensitivity * invertMult,
-					dy: -sumY * sensitivity * invertMult,
-				})
+				send({ type: "scroll", dx: -sumX, dy: -sumY })
 			}
 		} else if (scrollMode || touchCount === 2) {
-			let scrollDx = sumX
-			let scrollDy = sumY
+			let dx = sumX,
+				dy = sumY
 			if (scrollMode) {
-				const absDx = Math.abs(scrollDx)
-				const absDy = Math.abs(scrollDy)
-				if (absDx > absDy * axisThreshold) {
-					scrollDy = 0
-				} else if (absDy > absDx * axisThreshold) {
-					scrollDx = 0
-				}
+				const absDx = Math.abs(dx),
+					absDy = Math.abs(dy)
+				if (absDx > absDy * axisThreshold) dy = 0
+				else if (absDy > absDx * axisThreshold) dx = 0
 			}
-			send({
-				type: "scroll",
-				dx: Math.round(-scrollDx * sensitivity * 10 * invertMult) / 10,
-				dy: Math.round(-scrollDy * sensitivity * 10 * invertMult) / 10,
-			})
+			send({ type: "scroll", dx: -dx, dy: -dy })
 		} else if (touchCount === 1) {
-			send({
-				type: "move",
-				dx: Math.round(sumX * sensitivity * 10) / 10,
-				dy: Math.round(sumY * sensitivity * 10) / 10,
-			})
+			send({ type: "move", dx: sumX, dy: sumY })
 		}
 	}
 
@@ -173,18 +150,10 @@ export const useTrackpadGesture = (
 					moved.current = true
 				}
 			}
-
-			// Calculate delta with acceleration
 			const dx = touch.pageX - tracked.pageX
 			const dy = touch.pageY - tracked.pageY
-			const timeDelta = e.timeStamp - tracked.timeStamp
-
-			if (timeDelta > 0) {
-				const speedX = (Math.abs(dx) / timeDelta) * 1000
-				const speedY = (Math.abs(dy) / timeDelta) * 1000
-				sumX += dx * calculateAccelerationMult(speedX)
-				sumY += dy * calculateAccelerationMult(speedY)
-			}
+			sumX += dx
+			sumY += dy
 
 			// Update tracked position
 			tracked.pageX = touch.pageX

src/routes/settings.tsx

@@ -1,9 +1,9 @@
 import { createFileRoute } from "@tanstack/react-router"
 import QRCode from "qrcode"
-import { useEffect, useState } from "react"
+import { useEffect, useState, useRef, useMemo } from "react"
 import { APP_CONFIG, THEMES } from "../config"
 import serverConfig from "../server-config.json"
-
+import { useRemoteConnection } from "../hooks/useRemoteConnection"
 export const Route = createFileRoute("/settings")({
 	component: SettingsPage,
 })
@@ -14,26 +14,26 @@ function SettingsPage() {
 		String(serverConfig.frontendPort),
 	)
 	const [originalPort] = useState(String(serverConfig.frontendPort))
-
 	const serverConfigChanged = frontendPort !== originalPort
-
+	const sendConfigUpdate = useRemoteConnection().sendConfigUpdate
 	// Client Side Settings (LocalStorage)
-	const [invertScroll, setInvertScroll] = useState(() => {
-		if (typeof window === "undefined") return false
+	const [initialSensitivity, initialInvert] = (() => {
 		try {
-			const saved = localStorage.getItem("rein_invert")
-			return saved === "true"
+			const savedSensitivity = localStorage.getItem("rein_sensitivity")
+			const parsed = savedSensitivity
+				? Number.parseFloat(savedSensitivity)
+				: Number.NaN
+			return [
+				Number.isFinite(parsed) ? parsed : 1.0,
+				localStorage.getItem("rein_invert") === "true",
+			] as const
 		} catch {
-			return false
+			return [1.0, false] as const
 		}
-	})
+	})()
 
-	const [sensitivity, setSensitivity] = useState(() => {
-		if (typeof window === "undefined") return 1.0
-		const saved = localStorage.getItem("rein_sensitivity")
-		const parsed = saved ? Number.parseFloat(saved) : Number.NaN
-		return Number.isFinite(parsed) ? parsed : 1.0
-	})
+	const sensitivity = useRef(initialSensitivity)
+	const invertScroll = useRef(initialInvert)
 
 	const [theme, setTheme] = useState(() => {
 		if (typeof window === "undefined") return THEMES.DEFAULT
@@ -48,6 +48,16 @@ function SettingsPage() {
 	})
 
 	const [qrData, setQrData] = useState("")
+	const setConfig = (sensitivity_val: number, invertedScroll_val: boolean) => {
+		sensitivity.current = sensitivity_val
+		invertScroll.current = invertedScroll_val
+		localStorage.setItem("rein_sensitivity", String(sensitivity_val))
+		localStorage.setItem("rein_invert", JSON.stringify(invertedScroll_val))
+		const timer = setTimeout(() => {
+			sendConfigUpdate(sensitivity.current, invertScroll.current)
+		}, 300)
+		return () => clearTimeout(timer)
+	}
 
 	// Load initial state (IP is not stored in localStorage; only sensitivity, invert, theme are client settings)
 	const [authToken, setAuthToken] = useState(() => {
@@ -112,15 +122,6 @@ function SettingsPage() {
 		}
 	}, [])
 
-	// Effect: Update LocalStorage when settings change
-	useEffect(() => {
-		localStorage.setItem("rein_sensitivity", String(sensitivity))
-	}, [sensitivity])
-
-	useEffect(() => {
-		localStorage.setItem("rein_invert", JSON.stringify(invertScroll))
-	}, [invertScroll])
-
 	// Effect: Theme
 	useEffect(() => {
 		if (typeof window === "undefined") return
@@ -137,20 +138,6 @@ function SettingsPage() {
 			.catch((e) => console.error("QR Error:", e))
 	}, [ip, shareUrl])
 
-	const [acceleration, setAcceleration] = useState(() => {
-		if (typeof window === "undefined") return true
-		try {
-			const saved = localStorage.getItem("rein_acceleration")
-			return saved === "true"
-		} catch {
-			return true
-		}
-	})
-
-	useEffect(() => {
-		localStorage.setItem("rein_acceleration", JSON.stringify(acceleration))
-	}, [acceleration])
-
 	// Effect: Auto-detect LAN IP from Server (only if on localhost)
 	useEffect(() => {
 		if (typeof window === "undefined") return
@@ -195,19 +182,22 @@ function SettingsPage() {
 							<label className="label mb-3" htmlFor="sensitivity-slider">
 								<span className="label-text">Mouse Sensitivity</span>
 								<span className="label-text-alt font-mono">
-									{sensitivity.toFixed(1)}x
+									{sensitivity.current.toFixed(1)}x
 								</span>
 							</label>
 
 							<input
 								type="range"
 								id="sensitivity-slider"
 								min="0.1"
-								max="3.0"
+								max="6.0"
 								step="0.1"
-								value={sensitivity}
+								defaultValue={sensitivity.current}
 								onChange={(e) =>
-									setSensitivity(Number.parseFloat(e.target.value))
+									setConfig(
+										parseFloat(e.target.value) || 1.0,
+										invertScroll.current,
+									)
 								}
 								className="range range-primary range-sm w-full"
 							/>
@@ -229,8 +219,10 @@ function SettingsPage() {
 									id="invert-scroll-toggle"
 									type="checkbox"
 									className="toggle toggle-primary"
-									checked={invertScroll}
-									onChange={(e) => setInvertScroll(e.target.checked)}
+									defaultChecked={invertScroll.current}
+									onChange={(e) =>
+										setConfig(sensitivity.current, e.target.checked)
+									}
 								/>
 							</label>
 

src/routes/trackpad.tsx

@@ -7,9 +7,7 @@ import { ExtraKeys } from "../components/Trackpad/ExtraKeys"
 import { TouchArea } from "../components/Trackpad/TouchArea"
 import { useRemoteConnection } from "../hooks/useRemoteConnection"
 import { useTrackpadGesture } from "../hooks/useTrackpadGesture"
-import { useWindowsTouch } from "../hooks/useWindowsTouch"
 import { ScreenMirror } from "../components/Trackpad/ScreenMirror"
-
 export const Route = createFileRoute("/trackpad")({
 	component: TrackpadPage,
 })
@@ -24,36 +22,10 @@ function TrackpadPage() {
 	const isComposingRef = useRef(false)
 	const [keyboardOpen, setKeyboardOpen] = useState(false)
 	const [extraKeysVisible, setExtraKeysVisible] = useState(true)
+	const { send, sendCombo } = useRemoteConnection()
+	const gesture = useTrackpadGesture(send, scrollMode)
 
-	// Load Client Settings
-	const [sensitivity] = useState(() => {
-		if (typeof window === "undefined") return 1.0
-		const s = localStorage.getItem("rein_sensitivity")
-		return s ? Number.parseFloat(s) : 1.0
-	})
-
-	const [invertScroll] = useState(() => {
-		if (typeof window === "undefined") return false
-		const s = localStorage.getItem("rein_invert")
-		return s ? JSON.parse(s) : false
-	})
-
-	const { send, sendCombo, platform } = useRemoteConnection()
-
-	const isWindows = platform === "win32"
-
-	// Gesture hook for non-windows
-	const gesture = useTrackpadGesture(
-		send,
-		scrollMode,
-		sensitivity,
-		invertScroll,
-	)
-
-	// Native touch hook for windows
-	const winTouch = useWindowsTouch(send, canvasRef)
-
-	const { isTracking, handlers } = isWindows ? winTouch : gesture
+	const { isTracking, handlers } = gesture
 
 	// When keyboardOpen changes, focus or blur the hidden input
 	useEffect(() => {

src/server-config.json

@@ -2,5 +2,7 @@
 	"host": "0.0.0.0",
 	"frontendPort": 3000,
 	"address": "rein.local",
-	"inputThrottleMs": 8
+	"inputThrottleMs": 8,
+	"sensitivity": 4.8,
+	"invertScroll": false
 }