Language and Whip changes

Author: PinJinx

package-lock.json

@@ -98,11 +98,5 @@
 			"target": "dmg"
 		}
 	},
-	"allowScripts": {
-		"electron@40.10.3": true,
-		"electron-winstaller@5.4.0": true,
-		"esbuild@0.28.0": true,
-		"esbuild@0.27.7": true,
-		"koffi@2.16.2": true
-	}
+	"allowScripts": {}
 }

package.json

@@ -3,17 +3,21 @@
 import type React from "react"
 import { useEffect, useRef } from "react"
 
+import { t } from "../../utils/i18n"
+
 interface ScreenMirrorProps {
 	scrollMode: boolean
 	isTracking: boolean
 	handlers: React.HTMLAttributes<HTMLDivElement>
 	videoStream: MediaStream | null
 	trackActive: boolean
+	status: "connecting" | "connected" | "disconnected"
 }
 
 const TEXTS = {
-	WAITING: "Connecting to host desktop...",
-	AUTOMATIC: "Establishing secure connection",
+	get AUTOMATIC() {
+		return t("screenMirror", "establishingSecure")
+	},
 }
 
 export const ScreenMirror = ({
@@ -22,6 +26,7 @@ export const ScreenMirror = ({
 	handlers,
 	videoStream,
 	trackActive,
+	status,
 }: ScreenMirrorProps) => {
 	const videoElementRef = useRef<HTMLVideoElement | null>(null)
 	useEffect(() => {
@@ -32,16 +37,40 @@ export const ScreenMirror = ({
 			video.play().catch(() => {})
 		}
 		return () => {
-			video.srcObject = null
+			if (video) {
+				video.srcObject = null
+			}
 		}
 	}, [videoStream])
 
+	const getWaitingText = () => {
+		switch (status) {
+			case "disconnected":
+				return t("screenMirror", "disconnected")
+			case "connected":
+				return t("screenMirror", "connectedButNoVideo")
+			default:
+				return t("screenMirror", "connecting")
+		}
+	}
+
+	const getSubText = () => {
+		switch (status) {
+			case "disconnected":
+				return t("screenMirror", "checkNetwork")
+			case "connected":
+				return t("screenMirror", "settingUpScreen")
+			default:
+				return TEXTS.AUTOMATIC
+		}
+	}
+
 	return (
 		<div className="absolute inset-0 flex items-center justify-center bg-black overflow-hidden select-none touch-none">
 			{/* Hardware Accelerated Video Renderer */}
 			<video
 				ref={videoElementRef}
-				aria-label="Remote desktop screen share"
+				aria-label={t("screenMirror", "ariaLabel")}
 				autoPlay
 				playsInline
 				muted
@@ -56,8 +85,8 @@ export const ScreenMirror = ({
 				<div className="absolute inset-0 flex flex-col items-center justify-center text-gray-400 gap-4 bg-base-300">
 					<div className="loading loading-spinner loading-lg text-primary" />
 					<div className="text-center px-6">
-						<p className="font-semibold text-lg">{TEXTS.WAITING}</p>
-						<p className="text-sm opacity-60">{TEXTS.AUTOMATIC}</p>
+						<p className="font-semibold text-lg">{getWaitingText()}</p>
+						<p className="text-sm opacity-60">{getSubText()}</p>
 					</div>
 				</div>
 			)}

src/components/Trackpad/ScreenMirror.tsx

@@ -41,7 +41,7 @@ function TrackpadPage() {
 	const isComposingRef = useRef(false)
 	const [keyboardOpen, setKeyboardOpen] = useState(false)
 	const [extraKeysVisible, setExtraKeysVisible] = useState(true)
-	const { send, sendCombo } = useRemoteConnection()
+	const { status, send, sendCombo } = useRemoteConnection()
 	const { trackActive, videoStream } = useWebRtcStream({
 		token,
 	})
@@ -215,6 +215,7 @@ function TrackpadPage() {
 					handlers={handlers}
 					videoStream={videoStream}
 					trackActive={trackActive}
+					status={status}
 				/>
 				{bufferText !== "" && <BufferBar bufferText={bufferText} />}
 			</div>

src/routes/trackpad.tsx

@@ -672,6 +672,21 @@ export async function handleWhipSignalingExchange(
 		return
 	}
 
+	let token = url.searchParams.get("token")
+	if (!token) {
+		const authHeader = req.headers.authorization ?? ""
+		if (authHeader.startsWith("Bearer ")) {
+			token = authHeader.slice(7).trim()
+		} else if (authHeader.startsWith("Bearer_")) {
+			token = authHeader.slice(7).trim()
+		}
+	}
+
+	if (!token || !isKnownToken(token)) {
+		json(res, 401, { error: "Unauthorized" })
+		return
+	}
+
 	const hostOfferSdp = await readBody(req)
 	logger.info(`WHIP offer received for session: ${sessionId}`)
 

src/server/api/apiHandlers.ts

@@ -36,7 +36,6 @@ export type HostStatus = "stopped" | "starting" | "running" | "error"
 export const sessions = new Map<string, Session>()
 export const sseClients = new Map<string, Set<ServerResponse>>()
 export const inputConnections = new Map<string, InputPeerConnection>()
-export const WHIP_INTERNAL_PORT = 8001
 
 export let hostStatus: HostStatus = "stopped"
 export let runnerInstance: HostRunner | null = null

src/server/api/apiState.ts

@@ -81,17 +81,16 @@ export class GstManager extends EventEmitter {
 		args.push(
 			"!",
 			"whipclientsink",
-			`signaller::whip-endpoint=http://localhost:${whipPort}/api/webrtc/whip?sessionId=${this.sessionId}`,
+			`signaller::whip-endpoint=http://localhost:${whipPort}/api/webrtc/whip?sessionId=${this.sessionId}&token=${token}`,
 			`signaller::auth-token=Bearer_${token}`,
 		)
 
 		return args
 	}
 
-	public async start(token: string): Promise<void> {
+	public async start(token: string, whipPort: number): Promise<void> {
 		if (this.process) return
 		this.intentionalStop = false
-		const whipPort = 8001
 
 		logger.info("Spawning GStreamer WHIP engine")
 
@@ -199,7 +198,7 @@ export class GstManager extends EventEmitter {
 			"target-bitrate=2500000",
 			"!",
 			"whipclientsink",
-			`signaller::whip-endpoint=http://localhost:${serverPort}/api/webrtc/whip?sessionId=${this.sessionId}`,
+			`signaller::whip-endpoint=http://localhost:${serverPort}/api/webrtc/whip?sessionId=${this.sessionId}&token=${token}`,
 			`signaller::auth-token=Bearer_${token}`,
 		]
 

src/server/gstreamer/gstManager.ts

@@ -45,7 +45,7 @@ export class HostRunner {
 			this.activeSessions.delete(sessionId)
 		})
 
-		gst.start(this.token).catch((err) => {
+		gst.start(this.token, this.serverPort).catch((err) => {
 			logger.error(`Failed to launch GstManager: ${String(err)}`)
 		})
 	}

src/server/gstreamer/hostRunner.ts

@@ -3,9 +3,8 @@
  */
 
 import type { IncomingMessage, ServerResponse } from "node:http"
-import http from "node:http"
+import { AsyncLocalStorage } from "node:async_hooks"
 import logger from "../utils/logger"
-import { WHIP_INTERNAL_PORT } from "./api/apiState"
 import {
 	handleCreateSession,
 	handleGetSession,
@@ -85,25 +84,7 @@ const routes: Route[] = [
 	},
 ]
 
-function startWhipInternalServer(): void {
-	const server = http.createServer((req, res) => {
-		const url = new URL(req.url ?? "", `http://127.0.0.1:${WHIP_INTERNAL_PORT}`)
-		if (req.method === "POST" && url.pathname === "/api/webrtc/whip") {
-			handleWhipSignalingExchange(req, res)
-		} else {
-			res.writeHead(404)
-			res.end()
-		}
-	})
-	server.listen(WHIP_INTERNAL_PORT, "127.0.0.1", () => {
-		logger.info(
-			`WHIP internal endpoint listening on port ${WHIP_INTERNAL_PORT}`,
-		)
-	})
-	server.on("error", (err) => {
-		logger.error(`WHIP internal server failed to start: ${String(err)}`)
-	})
-}
+const reinStorage = new AsyncLocalStorage<boolean>()
 
 export function attachSignalingRoutes(
 	server: NonNullable<import("vite").ViteDevServer["httpServer"]>,
@@ -124,30 +105,61 @@ export function attachSignalingRoutes(
 				const match = pathname.match(route.pattern)
 				if (!match) continue
 
+				const anyRes = res as ServerResponse & { __handledByRein?: boolean }
+				anyRes.__handledByRein = true
+
 				const originalSetHeader = res.setHeader.bind(res)
 				const originalWriteHead = res.writeHead.bind(res)
-				res.setHeader = (...args: Parameters<typeof res.setHeader>) => {
+				const originalWrite = res.write.bind(res)
+				const originalEnd = res.end.bind(res)
+
+				res.setHeader = ((...args: Parameters<typeof res.setHeader>) => {
+					if (anyRes.__handledByRein && !reinStorage.getStore()) {
+						return res
+					}
 					if (res.headersSent) return res
 					return originalSetHeader(...args)
-				}
+				}) as typeof res.setHeader
+
 				res.writeHead = ((...args: unknown[]) => {
+					if (anyRes.__handledByRein && !reinStorage.getStore()) {
+						return res
+					}
 					if (res.writableEnded) return res
 					return (originalWriteHead as (...a: unknown[]) => ServerResponse)(
 						...args,
 					)
 				}) as typeof res.writeHead
 
+				res.write = ((...args: unknown[]) => {
+					if (anyRes.__handledByRein && !reinStorage.getStore()) {
+						return true
+					}
+					return (originalWrite as (...a: unknown[]) => boolean)(...args)
+				}) as typeof res.write
+
+				res.end = ((...args: unknown[]) => {
+					if (anyRes.__handledByRein && !reinStorage.getStore()) {
+						return res
+					}
+					return (originalEnd as (...a: unknown[]) => ServerResponse)(...args)
+				}) as typeof res.end
+
 				const params = match.slice(1)
-				Promise.resolve(route.handler(req, res, ...params)).catch((err) => {
+				Promise.resolve(
+					reinStorage.run(true, () => route.handler(req, res, ...params)),
+				).catch((err) => {
 					logger.error(`Signaling route error: ${String(err)}`)
-					if (!res.headersSent)
-						json(res, 500, { error: "Internal server error" })
+					if (!res.headersSent) {
+						reinStorage.run(true, () => {
+							json(res, 500, { error: "Internal server error" })
+						})
+					}
 				})
 				return
 			}
 		},
 	)
-	startWhipInternalServer()
 	logger.info("Signaling HTTP routes attached")
 }
 

src/server/server.ts

@@ -0,0 +1,38 @@
+/**
+ * Lightweight internationalization resource layer.
+ */
+
+export const i18n = {
+	en: {
+		screenMirror: {
+			ariaLabel: "Remote desktop screen share",
+			connecting: "Connecting to host...",
+			disconnected: "Disconnected from host",
+			connectedButNoVideo: "Establishing stream...",
+			establishingSecure: "Establishing secure connection",
+			settingUpScreen: "Setting up screen sharing",
+			checkNetwork: "Please check your network or token",
+		},
+	},
+} as const
+
+export type Locale = keyof typeof i18n
+export type TranslationKeys = typeof i18n.en
+
+const currentLocale: Locale = "en"
+
+/**
+ * Basic translation helper to retrieve localized strings.
+ */
+export function t<
+	K1 extends keyof TranslationKeys,
+	K2 extends keyof TranslationKeys[K1],
+>(category: K1, key: K2): string {
+	return (
+		(i18n[currentLocale][category] as Record<string, string>)[
+			key as unknown as string
+		] ??
+		(i18n.en[category] as Record<string, string>)[key as unknown as string] ??
+		""
+	)
+}