enhance keyboard experience

Now we have network root and stream-view defining their own hints instead of trying to re-use one component. And we also introduce an overlay for additional commands for people.
2026-04-08 08:40:07 -07:00
parent f95ccf134d
commit 7e11d66dc2
5 changed files with 271 additions and 111 deletions
@@ -0,0 +1,99 @@
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+
+export interface KeybindingEntry {
+  keys: string[];
+  description: string;
+}
+
+export interface KeybindingGroup {
+  label: string;
+  bindings: KeybindingEntry[];
+}
+
+interface KeybindingsOverlayProps {
+  open: boolean;
+  onClose: () => void;
+  groups: KeybindingGroup[];
+  title?: string;
+}
+
+export function KeybindingsOverlay({
+  open,
+  onClose,
+  groups,
+  title = "Keyboard Shortcuts",
+}: KeybindingsOverlayProps) {
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape" || e.key === "?") {
+        e.preventDefault();
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handler, { capture: true });
+    return () => window.removeEventListener("keydown", handler, { capture: true });
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-[100]">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={onClose}
+      />
+      {/* Panel */}
+      <div className="absolute left-1/2 top-1/2 w-full max-w-sm -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-white/10 bg-white/5 p-6 shadow-2xl backdrop-blur-xl">
+        <div className="mb-5 flex items-center justify-between">
+          <h2 className="text-sm font-semibold text-white/70">{title}</h2>
+          <span className="text-xs text-white/30">
+            <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+              Esc
+            </kbd>{" "}
+            or{" "}
+            <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+              ?
+            </kbd>{" "}
+            to close
+          </span>
+        </div>
+        <div className="flex flex-col gap-5">
+          {groups.map((group) => (
+            <section key={group.label}>
+              <h3 className="mb-2 text-[10px] font-medium uppercase tracking-widest text-white/30">
+                {group.label}
+              </h3>
+              <ul className="flex flex-col gap-1">
+                {group.bindings.map((binding) => (
+                  <li
+                    key={binding.description}
+                    className="flex items-center justify-between border-b border-white/5 pb-1 last:border-0 last:pb-0"
+                  >
+                    <span className="text-sm text-white/70">
+                      {binding.description}
+                    </span>
+                    <span className="flex items-center gap-1">
+                      {binding.keys.map((k) => (
+                        <kbd
+                          key={k}
+                          className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs text-white/60"
+                        >
+                          {k}
+                        </kbd>
+                      ))}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ))}
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
@@ -0,0 +1,32 @@
+import { Video, Mic } from "lucide-react";
+import { useMediaSettingsStore } from "@/stores/media-settings-store";
+
+export function VideoAudioToggle() {
+  const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
+  const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);
+
+  return (
+    <span>
+      <kbd
+        role="button"
+        onClick={() =>
+          setRecordingMode(recordingMode === "video" ? "audio" : "video")
+        }
+        title={
+          recordingMode === "video" ? "Switch to audio-only" : "Switch to video"
+        }
+        className="cursor-pointer rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs transition-colors hover:text-white/80"
+      >
+        {recordingMode === "video" ? (
+          <>
+            <Video className="inline size-3" /> Video
+          </>
+        ) : (
+          <>
+            <Mic className="inline size-3" /> Audio
+          </>
+        )}
+      </kbd>
+    </span>
+  );
+}