@hienlh/ppm 0.21.0 → 0.22.1

package/src/web/components/remote-desktop/remote-desktop-mobile-view.tsx

@@ -9,14 +9,23 @@
 import { useRef, useState, useCallback } from "react";
 import { RotateCw, MonitorX } from "@/lib/icons";
 import { useVisualViewport } from "@/hooks/use-visual-viewport";
+import { useSettingsStore } from "@/stores/settings-store";
 import { useRemoteDesktopConnection } from "./use-remote-desktop-connection";
 import { useRemoteDesktopTouch, type RemoteDesktopInputMode } from "./use-remote-desktop-touch";
 import { useRemoteDesktopVirtualKeyboard } from "./use-remote-desktop-virtual-keyboard";
 import { RemoteDesktopMobileToolbar } from "./remote-desktop-mobile-toolbar";
+import {
+  nextQualityChoice, shortQualityLabel, type QualityChoice,
+} from "../../../shared/remote-desktop-quality";
 import { RemoteDesktopMobileKeyBar } from "./remote-desktop-mobile-key-bar";
+import { RemoteDesktopMobileSettings } from "./remote-desktop-mobile-settings";
+import { useRemoteDesktopRecorder } from "./use-remote-desktop-recorder";
+import { saveCanvasScreenshot } from "./remote-desktop-recording";
 import { RemoteDesktopStatsOverlay } from "./remote-desktop-stats-overlay";
 import { letterboxedContentRect } from "./remote-desktop-coords";
 import { useRemoteDesktopDisplayChoice } from "./use-remote-desktop-display-choice";
+import { RemoteDesktopClipboardNotice } from "./remote-desktop-clipboard-notice";
+import { useRemoteDesktopReadiness } from "./use-remote-desktop-readiness";
 
 export interface RemoteDesktopMobileViewProps {
   onClose: () => void;
@@ -27,12 +36,21 @@ export default function RemoteDesktopMobileView({ onClose }: RemoteDesktopMobile
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const [mode, setMode] = useState<RemoteDesktopInputMode>("mouse");
   const [keyBarOpen, setKeyBarOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
   const display = useRemoteDesktopDisplayChoice();
 
   const {
     connState, errorMessage, decoderStatus, decoderErrorMessage, sendMessage, reconnect,
-    getTotalBytes, getFrameCount,
+    getTotalBytes, getFrameCount, quality, setQuality, showCursor, setShowCursor,
+    audioOn, setAudioOn, getAudioTracks, privacyOn, privacyError, setPrivacyOn,
+    hostModeId, hostOriginalModeId, resolutionError, setHostMode,
+    pendingHostClipboard, clearHostClipboard, sendClipboard, requestHostClipboard,
   } = useRemoteDesktopConnection(canvasRef, { displayId: display.displayId });
+  const statsVisible = useSettingsStore((s) => s.remoteDesktopStatsVisible);
+  const toggleStats = useSettingsStore((s) => s.toggleRemoteDesktopStatsVisible);
+  const clipboardSync = useSettingsStore((s) => s.remoteDesktopClipboardSync);
+  const setClipboardSync = useSettingsStore((s) => s.setRemoteDesktopClipboardSync);
+  const qualityChoice = useSettingsStore((st) => st.remoteDesktopQuality);
   const streaming = connState === "streaming";
 
   const { transform, virtualCursor, resetZoom } = useRemoteDesktopTouch({
@@ -42,7 +60,24 @@ export default function RemoteDesktopMobileView({ onClose }: RemoteDesktopMobile
     sendMessage,
     enabled: streaming,
   });
-  const { inputRef: keyboardInputRef, show: showKeyboard } = useRemoteDesktopVirtualKeyboard(sendMessage, streaming);
+  // A phone paste goes through the *host clipboard* rather than being typed character by
+  // character: typing is subject to the host's IME (a Telex host rewrites "World" as "ửold"),
+  // and a pasted URL or token is exactly the text that must survive verbatim. The server falls
+  // back to typing by itself when the host has no clipboard tool.
+  const [pasteAttempted, setPasteAttempted] = useState(false);
+  // Undefined with sync off, which is how the toggle is implemented on this surface: the
+  // virtual keyboard then lets the `paste` event's own default action stand (i.e. nothing
+  // leaves the device), and the key bar's Ctrl+V button still pastes the *host's* clipboard.
+  const onPasteText = useCallback((text: string) => {
+    setPasteAttempted(true);
+    sendClipboard(text, true);
+  }, [sendClipboard]);
+  // One fetch, no polling — read only to explain a paste that had to fall back to typing, and
+  // an audio toggle the host cannot honour.
+  const { caps } = useRemoteDesktopReadiness(false);
+  const recorder = useRemoteDesktopRecorder(canvasRef, getAudioTracks);
+  const { inputRef: keyboardInputRef, show: showKeyboard } =
+    useRemoteDesktopVirtualKeyboard(sendMessage, streaming, clipboardSync ? onPasteText : undefined);
 
   // Lifts the toolbar/key-bar row above the on-screen keyboard instead of the whole sheet
   // shrinking to make room for it (that was the previous, since-reverted behavior — see
@@ -169,14 +204,58 @@ export default function RemoteDesktopMobileView({ onClose }: RemoteDesktopMobile
         style={keyboardInset > 0 ? { transform: `translateY(-${keyboardInset}px)` } : undefined}
         data-testid="remote-desktop-mobile-bottom-bar"
       >
-        {keyBarOpen && <RemoteDesktopMobileKeyBar sendMessage={sendMessage} />}
+        {/* In flow above the key bar so it rides the same `keyboardInset` lift and is never
+            hidden behind the toolbar. */}
+        <RemoteDesktopClipboardNotice
+          pendingText={pendingHostClipboard}
+          onDismiss={clearHostClipboard}
+          missingToolAction={pasteAttempted && caps && !caps.clipboard.available ? caps.clipboard.action : null}
+          onDismissMissingTool={() => setPasteAttempted(false)}
+          positionClassName="mx-2 mb-1 max-w-[calc(100%-1rem)]"
+        />
+        {settingsOpen && (
+          <RemoteDesktopMobileSettings
+            statsVisible={statsVisible}
+            onToggleStats={toggleStats}
+            showCursor={showCursor}
+            onSetShowCursor={setShowCursor}
+            clipboardEnabled={clipboardSync}
+            onSetClipboardEnabled={setClipboardSync}
+            audioOn={audioOn}
+            audioReason={caps && !caps.audio.available ? caps.audio.reason : null}
+            onSetAudioOn={setAudioOn}
+            privacyOn={privacyOn}
+            privacyReason={privacyError ?? (caps && !caps.privacy.available ? caps.privacy.reason : null)}
+            hostModes={caps?.resolutions?.modes ?? []}
+            hostModeId={hostModeId}
+            hostOriginalModeId={hostOriginalModeId}
+            onSetHostMode={setHostMode}
+            canResizeHost={caps?.inputReady ?? false}
+            resolutionError={resolutionError}
+            onSetPrivacyOn={setPrivacyOn}
+            recording={recorder.recording}
+            recordingSupported={recorder.supported}
+            onToggleRecording={recorder.toggle}
+            onScreenshot={() => void saveCanvasScreenshot(canvasRef.current)}
+          />
+        )}
+        {keyBarOpen && (
+          <RemoteDesktopMobileKeyBar
+            sendMessage={sendMessage}
+            onCopyCombo={clipboardSync ? requestHostClipboard : undefined}
+          />
+        )}
         <RemoteDesktopMobileToolbar
           displayLabel={display.displays.length > 1 ? display.current?.label ?? null : null}
           onNextDisplay={display.next}
+          qualityLabel={shortQualityLabel(qualityChoice)}
+          onNextQuality={() => setQuality(nextQualityChoice(qualityChoice))}
           mode={mode}
           onToggleMode={toggleMode}
           onOpenKeyboard={openKeyboard}
           onResetZoom={resetZoom}
+          settingsOpen={settingsOpen}
+          onToggleSettings={() => setSettingsOpen((open) => !open)}
           onClose={onClose}
         />
       </div>

package/src/web/components/remote-desktop/remote-desktop-recording.ts

@@ -0,0 +1,76 @@
+/**
+ * Screenshot and session recording, both taken from the **canvas** rather than from the wire.
+ *
+ * That is a deliberate trade. Muxing the access units the host already sent would be lossless
+ * and free of CPU cost, but it needs an MP4 muxer in the browser and it would record the rung
+ * the host chose rather than what the user was looking at — a mid-recording quality change
+ * switches resolution and SPS, which no single-track MP4 can express. `captureStream()` +
+ * `MediaRecorder` re-encodes (so it costs the *client* CPU) and in exchange records exactly
+ * what was on screen, survives every rung change, and carries the audio track in the same file.
+ *
+ * `captureStream()` is called with no frame rate on purpose: that makes the stream emit a frame
+ * whenever the canvas is drawn to, which is the decoder's own cadence. Passing a number
+ * resamples to it, so a 30 fps argument against a 60 fps rung would throw half the frames away
+ * and a 60 against a 15 fps rung would triple every one of them.
+ */
+
+/** Container/codec preference. VP9 is the best quality per byte that is universally present in
+ *  Chromium; H.264-in-MP4 goes first where it exists because it is the one a phone's gallery and
+ *  every video editor will open without being converted. */
+const MIME_CANDIDATES = [
+  "video/mp4;codecs=avc1.42E01E,mp4a.40.2",
+  "video/mp4",
+  "video/webm;codecs=vp9,opus",
+  "video/webm;codecs=vp8,opus",
+  "video/webm",
+];
+
+/** The first candidate this browser will actually record, or null when none is supported (no
+ *  `MediaRecorder` at all — Safari before 14.1, or a locked-down embedded webview). */
+export function pickRecordingMime(
+  isSupported: (mime: string) => boolean = (m) =>
+    typeof MediaRecorder !== "undefined" && MediaRecorder.isTypeSupported(m),
+): string | null {
+  if (typeof MediaRecorder === "undefined") return null;
+  return MIME_CANDIDATES.find(isSupported) ?? null;
+}
+
+/** `video/webm;codecs=vp9,opus` → `webm`. Taken from the MIME the recorder actually accepted,
+ *  because a file named `.webm` that holds MP4 bytes is one no player will open. */
+export function extensionForMime(mime: string): string {
+  return mime.startsWith("video/mp4") ? "mp4" : "webm";
+}
+
+/** `ppm-remote-2026-09-11_14-32-08.mp4` — sortable, and with no `:` so it survives Windows. */
+export function recordingFileName(ext: string, now = new Date()): string {
+  const p = (n: number) => String(n).padStart(2, "0");
+  const stamp = `${now.getFullYear()}-${p(now.getMonth() + 1)}-${p(now.getDate())}`
+    + `_${p(now.getHours())}-${p(now.getMinutes())}-${p(now.getSeconds())}`;
+  return `ppm-remote-${stamp}.${ext}`;
+}
+
+/** Hand a blob to the browser as a download. The object URL is revoked on the next task rather
+ *  than immediately: revoking in the same tick can beat the navigation the click starts, which
+ *  fails as a "network error" download with nothing in the console. */
+export function downloadBlob(blob: Blob, fileName: string): void {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = fileName;
+  a.rel = "noopener";
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 10_000);
+}
+
+/** Save the current frame as a PNG. Resolves false when the canvas has no picture yet (a 0×0
+ *  canvas, i.e. before the first frame) — `toBlob` on one of those yields a blank image rather
+ *  than failing, which would download a file that looks like a bug in the capture. */
+export async function saveCanvasScreenshot(canvas: HTMLCanvasElement | null): Promise<boolean> {
+  if (!canvas || canvas.width === 0 || canvas.height === 0) return false;
+  const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, "image/png"));
+  if (!blob) return false;
+  downloadBlob(blob, recordingFileName("png"));
+  return true;
+}

package/src/web/components/remote-desktop/remote-desktop-resolution-list.ts

@@ -0,0 +1,100 @@
+/**
+ * Turns the host's raw mode list into the menu RustDesk's `_ResolutionsMenu` shows.
+ *
+ * The raw list is per *timing*, not per resolution: this dev host advertises 37 modes across 15
+ * distinct sizes (seven separate 1920x1080 entries alone). A menu of 37 rows is unusable and
+ * says nothing a remote user wants to decide, so they collapse to one row per size.
+ *
+ * Which one survives the collapse is the part that is easy to get wrong. Keeping the highest
+ * refresh looks obviously right — and then a host sitting on 3440x1440@60 while it also
+ * advertises @100 has *nothing* ticked in the menu, because the id that is live was dropped.
+ * So `current` wins within a group and the refresh only breaks the remaining ties.
+ */
+import type { HostMode } from "./use-remote-desktop-readiness";
+
+/** One row of the resolution menu. */
+export interface ResolutionChoice {
+  /** The mode id to ask the host for. */
+  id: string;
+  width: number;
+  height: number;
+  refresh: number;
+  current: boolean;
+  preferred: boolean;
+}
+
+/** One row per distinct size, largest first. */
+export function resolutionChoices(modes: readonly HostMode[]): ResolutionChoice[] {
+  const bySize = new Map<string, HostMode>();
+  for (const mode of modes) {
+    if (mode.width <= 0 || mode.height <= 0) continue;
+    const key = `${mode.width}x${mode.height}`;
+    const held = bySize.get(key);
+    if (!held || beats(mode, held)) bySize.set(key, mode);
+  }
+  return [...bySize.values()]
+    .sort((a, b) => b.width * b.height - a.width * a.height || b.refresh - a.refresh)
+    .map((m) => ({
+      id: m.id, width: m.width, height: m.height, refresh: m.refresh,
+      // `preferred` is kept per *group*: whichever timing survived, the size is still the
+      // display's native one and that is what the badge means to a user.
+      current: m.current, preferred: m.preferred,
+    }));
+}
+
+function beats(candidate: HostMode, held: HostMode): boolean {
+  if (candidate.current !== held.current) return candidate.current;
+  if (candidate.preferred !== held.preferred) return candidate.preferred;
+  return candidate.refresh > held.refresh;
+}
+
+/** The client's own screen, in the units the host reports its modes in. */
+export interface LocalScreen {
+  width: number;
+  height: number;
+}
+
+/**
+ * RustDesk's `_getBestFitResolution` and `_isRemoteResolutionFitLocal` as one decision: the mode
+ * to switch to so the host matches this client's screen, or null when the item must not be shown.
+ *
+ * The match is **exact** — no nearest, no letterboxed approximation. That reads like a missing
+ * feature and is the opposite: offering 1920x1080 to a 1366x768 client puts the picture back on
+ * the scaler the item exists to avoid, so RustDesk returns null and hides the button instead.
+ * On most client/host pairs it is therefore never visible, which is correct.
+ */
+export function fitLocalMode(
+  modes: readonly HostMode[],
+  local: LocalScreen | null,
+  currentModeId: string | null,
+): HostMode | null {
+  if (!local || local.width <= 0 || local.height <= 0) return null;
+  const group = modes.filter((m) => m.width === local.width && m.height === local.height);
+  if (group.length === 0) return null;
+  // Compared by *size*, the way RustDesk compares against the display rect rather than a mode id:
+  // the host may be on another timing of the size the client already has, and switching between
+  // two refresh rates of it would be a menu item that changes nothing the user can see.
+  const live = modes.find((m) => m.id === currentModeId) ?? modes.find((m) => m.current) ?? null;
+  if (live && live.width === local.width && live.height === local.height) return null;
+  // Whichever timing the size's own menu row would offer, so the two cannot disagree.
+  return group.reduce((held, m) => (beats(m, held) ? m : held));
+}
+
+/**
+ * The client's screen in CSS pixels. RustDesk's web branch divides the physical size by
+ * `scaleFactor` to get this number; in a browser `screen.width` already is it, and it is the
+ * one that makes `scale: original` fill the viewport rather than land at 1 host pixel per
+ * *device* pixel — half size on any 2x display.
+ */
+export function localScreenSize(): LocalScreen | null {
+  if (typeof window === "undefined" || !window.screen) return null;
+  const width = Math.round(window.screen.width);
+  const height = Math.round(window.screen.height);
+  return width > 0 && height > 0 ? { width, height } : null;
+}
+
+/** `3440 × 1440`, with the refresh only when there is one to show. */
+export function resolutionLabel(choice: ResolutionChoice): string {
+  const size = `${choice.width} × ${choice.height}`;
+  return choice.refresh > 0 ? `${size} · ${choice.refresh} Hz` : size;
+}