feat: send screen recordings (#128)

* first pass implementation * remove screenrecord shortcut hint * refactor * fix: prevent mirror review of screen recording * feat: allow recording with webcam overlay * fix: review screen recording without clipped content * tidy keyboard hints consistent position * refactor: re-use one component for screen picker huddles and screen clips use same picker component now. We had to make sure that tailwind works for both of them. * fix: improve visibility of keyboard hints During compose video or screen recording, the keyboard hints were invisible if the content was super bright.
2026-04-08 17:14:39 -07:00
parent bebd814c46
commit be7a42c483
18 changed files with 694 additions and 29 deletions
@@ -0,0 +1,139 @@
+import { useState, useEffect } from "react";
+
+interface ScreenSourcePickerProps {
+  title?: string;
+  confirmLabel?: string;
+  getSources: () => Promise<ScreenSource[]>;
+  onSelect: (sourceId: string) => void;
+  onCancel: () => void;
+}
+
+export function ScreenSourcePicker({
+  title = "Select a screen",
+  confirmLabel = "Select",
+  getSources,
+  onSelect,
+  onCancel,
+}: ScreenSourcePickerProps) {
+  const [sources, setSources] = useState<ScreenSource[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getSources().then((result) => {
+      setSources(result);
+      setLoading(false);
+    });
+  }, [getSources]);
+
+  // Auto-select if there's only one source
+  useEffect(() => {
+    if (!loading && sources.length === 1) {
+      setSelectedId(sources[0].id);
+    }
+  }, [loading, sources]);
+
+  const screens = sources.filter((s) => s.id.startsWith("screen:"));
+  const windows = sources.filter((s) => s.id.startsWith("window:"));
+
+  return (
+    <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/90">
+      <div className="mx-4 flex max-h-[80vh] w-full max-w-2xl flex-col rounded-lg bg-zinc-900 shadow-xl">
+        <div className="flex items-center justify-between border-b border-zinc-700 px-5 py-4">
+          <h2 className="text-base font-medium text-zinc-100">{title}</h2>
+          <button
+            onClick={onCancel}
+            className="text-zinc-400 hover:text-zinc-200"
+          >
+            ✕
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto px-5 py-4">
+          {loading ? (
+            <p className="text-center text-sm text-zinc-400">
+              Loading sources...
+            </p>
+          ) : (
+            <>
+              {screens.length > 0 && (
+                <SourceSection
+                  title="Screens"
+                  sources={screens}
+                  selectedId={selectedId}
+                  onSelect={setSelectedId}
+                />
+              )}
+              {windows.length > 0 && (
+                <SourceSection
+                  title="Windows"
+                  sources={windows}
+                  selectedId={selectedId}
+                  onSelect={setSelectedId}
+                />
+              )}
+            </>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-2 border-t border-zinc-700 px-5 py-3">
+          <button
+            onClick={onCancel}
+            className="rounded-md px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800"
+          >
+            Cancel
+          </button>
+          <button
+            disabled={!selectedId}
+            onClick={() => selectedId && onSelect(selectedId)}
+            className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-500 disabled:opacity-40 disabled:hover:bg-blue-600"
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SourceSection({
+  title,
+  sources,
+  selectedId,
+  onSelect,
+}: {
+  title: string;
+  sources: ScreenSource[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <div className="mb-4">
+      <h3 className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400">
+        {title}
+      </h3>
+      <div className="grid grid-cols-3 gap-3">
+        {sources.map((source) => (
+          <button
+            key={source.id}
+            onClick={() => onSelect(source.id)}
+            className={`overflow-hidden rounded-lg border-2 text-left transition-colors ${
+              selectedId === source.id
+                ? "border-blue-500 bg-zinc-800"
+                : "border-transparent bg-zinc-800/50 hover:border-zinc-600"
+            }`}
+          >
+            <img
+              src={source.thumbnailDataUrl}
+              alt={source.name}
+              className="aspect-video w-full object-cover"
+            />
+            <p className="truncate px-2 py-1.5 text-xs text-zinc-300">
+              {source.name}
+            </p>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}