@domicile-desktop/component-library 0.0.0-alpha-e455955b57c7 → 0.0.0-alpha-cd52ce30fbe6

package/package.json

@@ -2,8 +2,8 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-e455955b57c7",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-e455955b57c7",
+    "@domicile-desktop/sdk": "0.0.0-alpha-cd52ce30fbe6",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-cd52ce30fbe6",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -118,5 +118,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-e455955b57c7"
+  "version": "0.0.0-alpha-cd52ce30fbe6"
 }

package/src/PortalDialogs/CapturingIndicator.tsx

@@ -102,6 +102,9 @@ const summary = (session: Capturing, name: string): string => {
       return `Input capture: ${name} — ${deviceNames(session.devices).join(", ")}`;
     case CapturingKind.ScreenCast:
       return `Sharing: ${name} — ${session.sources.map((source) => sourceName(source)).join(", ")}`;
+    // `<PortalDialogs />` gives the shell's recording its own toolbar.
+    case CapturingKind.Recording:
+      return `Recording: ${session.sources.map((source) => sourceName(source)).join(", ")}`;
     case CapturingKind.Unknown:
       return `${session.wireKind}: ${name}`;
   }

package/src/PortalDialogs/PortalDialogs.tsx

@@ -34,6 +34,8 @@ import { InputCaptureDialog } from "./InputCaptureDialog";
 import { LauncherDialog } from "./LauncherDialog";
 import { PickColorDialog } from "./PickColorDialog";
 import { PrintDialog } from "./PrintDialog";
+import type { Recording } from "./RecordingToolbar";
+import { RecordingToolbar } from "./RecordingToolbar";
 import { RemoteDesktopDialog } from "./RemoteDesktopDialog";
 import { ScreenCastDialog } from "./ScreenCastDialog";
 import { ScreenshotDialog } from "./ScreenshotDialog";
@@ -57,7 +59,14 @@ export type PortalDialogsDesktop = DialogDesktop &
     readonly browser: Pick<Browser, "windows">;
     readonly portals: Pick<
       Portals,
-      "answer" | "capturing" | "on" | "requests" | "stopCapturing"
+      | "answer"
+      | "capturing"
+      | "discardRecording"
+      | "on"
+      | "pauseRecording"
+      | "requests"
+      | "resumeRecording"
+      | "stopCapturing"
     >;
   };
 
@@ -96,7 +105,9 @@ type Props = {
  * Every dialog applications ask for through `xdg-desktop-portal`, one at a
  * time, oldest first, with a screenshot, color pick or screen cast stacked
  * over it so the user can capture it, and an indicator for each session that
- * controls or captures input. Requests of a kind it has no dialog for are refused.
+ * controls or captures input. The shell's own screen recording gets a toolbar
+ * instead, left out of the recording. Requests of a kind it has no dialog for
+ * are refused.
  * Inhibitors are not questions, so it leaves them be. It also fires the
  * chords applications hold through the GlobalShortcuts portal. See
  * docs/PORTALS.md.
@@ -139,22 +150,40 @@ export const PortalDialogs = memo(
       }
     }, [portals, requests]);
 
+    const recordings = sessions.filter(isRecording);
     return (
       <>
         <CapturingIndicator
           apps={apps}
           screen={screen}
-          sessions={
-            omitScreenCasts
-              ? sessions.filter(
-                  (session) => session.kind !== CapturingKind.ScreenCast,
-                )
-              : sessions
-          }
+          sessions={sessions.filter(
+            (session) =>
+              !isRecording(session) &&
+              !(omitScreenCasts && session.kind === CapturingKind.ScreenCast),
+          )}
           stop={(id) => {
             portals.stopCapturing(id);
           }}
         />
+        {recordings.map((recording) => (
+          <RecordingToolbar
+            discard={() => {
+              portals.discardRecording(recording.id);
+            }}
+            key={recording.id}
+            pause={() => {
+              portals.pauseRecording(recording.id);
+            }}
+            recording={recording}
+            resume={() => {
+              portals.resumeRecording(recording.id);
+            }}
+            screen={screen}
+            stop={() => {
+              portals.stopCapturing(recording.id);
+            }}
+          />
+        ))}
         {stacked(
           requests.filter(
             (request) =>
@@ -186,6 +215,9 @@ export const PortalDialogs = memo(
 /** The windows this page draws. */
 const drawnOnPage = () => drawnWindows(document);
 
+const isRecording = (session: Capturing): session is Recording =>
+  session.kind === CapturingKind.Recording;
+
 /** The dialog for `request`'s kind. */
 const Dialog = ({
   answer,
@@ -319,6 +351,7 @@ const Dialog = ({
           browserWindows={browserWindows}
           castTo={claim?.kind === CastClaimKind.Pick ? claim.to : undefined}
           previewWindow={domicile.capture.preview}
+          record={request.appId === SHELL_APP_ID}
           screen={screen}
           shownWindows={shownWindows}
         />

package/src/PortalDialogs/RecordingToolbar.tsx

@@ -0,0 +1,180 @@
+import type { Capturing, CapturingKind } from "@domicile-desktop/sdk/portal";
+import { hideFromCaptures } from "@domicile-desktop/sdk/portal";
+import { PauseIcon } from "@phosphor-icons/react/dist/ssr/Pause";
+import { PlayIcon } from "@phosphor-icons/react/dist/ssr/Play";
+import { StopIcon } from "@phosphor-icons/react/dist/ssr/Stop";
+import { TrashIcon } from "@phosphor-icons/react/dist/ssr/Trash";
+import { useEffect, useRef, useState } from "react";
+import { css } from "../../styled-system/css";
+import { hstack } from "../../styled-system/patterns";
+import { Button } from "../Button/Button";
+import { useScreenRegion } from "../Screen/DisplayProvider";
+
+/** The shell's own screen recording. */
+export type Recording = Extract<Capturing, { kind: CapturingKind.Recording }>;
+
+type Props = {
+  recording: Recording;
+  pause: () => void;
+  resume: () => void;
+  stop: () => void;
+  discard: () => void;
+  screen: string | undefined;
+};
+
+/**
+ * A floating toolbar over the bottom of the screen while the shell records:
+ * how long it has recorded, and buttons that pause or resume, stop and
+ * discard it. It shows on screen and is left out of the recording, and of
+ * every other capture of the desk.
+ */
+export const RecordingToolbar = ({
+  discard,
+  pause,
+  recording,
+  resume,
+  screen,
+  stop,
+}: Props) => {
+  const region = useScreenRegion(screen);
+  const toolbar = useRef<HTMLDivElement>(null);
+  const paused = recording.runningSinceMs === undefined;
+  const elapsed = useElapsed(recording);
+
+  useEffect(() => {
+    if (toolbar.current === null) {
+      throw new Error("the recording toolbar is not drawn");
+    }
+    hideFromCaptures(toolbar.current).catch((error: unknown) => {
+      // biome-ignore lint/suspicious/noConsole: the toolbar would show in the recording
+      console.error(
+        "Failed to hide the recording toolbar from captures",
+        error,
+      );
+    });
+  }, []);
+
+  return (
+    <div className={regionStyles} style={region}>
+      <div
+        aria-label="Screen recording"
+        className={toolbarStyles}
+        ref={toolbar}
+        role="toolbar"
+      >
+        <span
+          aria-hidden
+          className={css(dotStyles, paused && pausedDotStyles)}
+        />
+        <span aria-label={paused ? "Paused at" : "Recorded"} role="timer">
+          {clock(elapsed)}
+        </span>
+        <Button
+          label={paused ? "Resume" : "Pause"}
+          onClick={paused ? resume : pause}
+          rounded
+          size="sm"
+          variant="ghost"
+        >
+          {paused ? <PlayIcon weight="fill" /> : <PauseIcon weight="fill" />}
+        </Button>
+        <Button
+          beforeIcon={<StopIcon weight="fill" />}
+          onClick={stop}
+          rounded
+          size="sm"
+          variant="danger"
+        >
+          Stop
+        </Button>
+        <Button
+          label="Discard"
+          onClick={discard}
+          rounded
+          size="sm"
+          variant="ghost"
+        >
+          <TrashIcon />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+/** How long `recording` has recorded, in milliseconds, kept up to date. */
+const useElapsed = (recording: Recording): number => {
+  const [now, setNow] = useState(Date.now);
+  const { recordedMs, runningSinceMs } = recording;
+  useEffect(() => {
+    if (runningSinceMs === undefined) {
+      return;
+    }
+    setNow(Date.now());
+    const ticking = setInterval(() => {
+      setNow(Date.now());
+    }, TICK_MS);
+    return () => {
+      clearInterval(ticking);
+    };
+  }, [runningSinceMs]);
+  return runningSinceMs === undefined
+    ? recordedMs
+    : recordedMs + Math.max(0, now - runningSinceMs);
+};
+
+/** Often enough that the seconds never lag by more than this. */
+const TICK_MS = 250;
+
+/** `ms` as minutes and seconds, or hours, minutes and seconds past an hour. */
+export const clock = (ms: number): string => {
+  const seconds = Math.floor(ms / 1000);
+  const [hours, minutes] = [
+    Math.floor(seconds / 3600),
+    Math.floor(seconds / 60) % 60,
+  ];
+  const ss = String(seconds % 60).padStart(2, "0");
+  return hours > 0
+    ? `${String(hours)}:${String(minutes).padStart(2, "0")}:${ss}`
+    : `${String(minutes)}:${ss}`;
+};
+
+// Spans the screen so the toolbar can sit at its foot; takes no clicks
+// itself.
+const regionStyles = css({
+  inset: 0,
+  pointerEvents: "none",
+  position: "fixed",
+  zIndex: "toast",
+});
+
+// Its own stacking context and group, or Element Capture will not leave it
+// out.
+const toolbarStyles = hstack({
+  backgroundColor: "card",
+  border: "1px solid {colors.border}",
+  borderRadius: "full",
+  boxShadow: "{shadows.lifted}",
+  color: "foreground",
+  fontSize: "sm",
+  fontVariantNumeric: "tabular-nums",
+  gap: 2,
+  insetBlockEnd: 6,
+  insetInlineStart: "50%",
+  isolation: "isolate",
+  paddingBlock: 1,
+  paddingInline: 2,
+  paddingInlineStart: 4,
+  pointerEvents: "auto",
+  position: "absolute",
+  transform: "translateX(-50%)",
+});
+
+const dotStyles = css.raw({
+  backgroundColor: "danger",
+  blockSize: 2.5,
+  borderRadius: "full",
+  flexShrink: 0,
+  inlineSize: 2.5,
+});
+
+const pausedDotStyles = css.raw({ backgroundColor: "muted" });

package/src/PortalDialogs/ScreenCastDialog.tsx

@@ -43,6 +43,11 @@ type Props = {
   screen: string | undefined;
   /** Draws a window that is not on screen. */
   previewWindow: DrawPreview;
+  /**
+   * Whether the shell asks, for its own screen recording: the dialog then
+   * records rather than shares, and names nobody.
+   */
+  record?: boolean | undefined;
   /** The windows the shell draws on screen, read once as the dialog opens. */
   shownWindows: () => readonly ShownWindow[];
 };
@@ -58,7 +63,8 @@ type Offered = Choice & { source: CastSource };
  * application asks for more, or, when it may have a region, an area dragged
  * over the desk shot as the screenshot picker's is. Without a desk shot, the
  * region is drawn over the page instead. Dismissing it cancels. For a cast to a
- * TV, it is titled for the TV rather than for who asks.
+ * TV, it is titled for the TV rather than for who asks. For the shell's own
+ * screen recording, it offers to record instead.
  */
 export const ScreenCastDialog = ({
   answer,
@@ -68,6 +74,7 @@ export const ScreenCastDialog = ({
   browserWindows,
   castTo,
   previewWindow,
+  record = false,
   screen,
   shownWindows,
 }: Props) => {
@@ -194,7 +201,7 @@ export const ScreenCastDialog = ({
               );
             }}
           >
-            {castTo === undefined ? "Share" : "Cast"}
+            {action(castTo, record)}
           </Button>
         </>
       }
@@ -207,20 +214,19 @@ export const ScreenCastDialog = ({
       screen={screen}
       size="xl"
       title={
-        castTo === undefined
-          ? title(body.multiple, windows.length > 0, screens.length > 0)
-          : `Cast to ${castTo}`
+        heading(castTo, record) ??
+        title(body.multiple, windows.length > 0, screens.length > 0)
       }
     >
-      {castTo === undefined && (
+      {castTo === undefined && !record && (
         <p className={askerStyles}>{`${asker} wants to record`}</p>
       )}
       <SourcePicker
-        caption={caption(offered, picked, dragged, part, body.region)}
+        caption={caption(offered, picked, dragged, part, body.region, record)}
         desk={desk}
         dragged={dragged}
         draggedPart={part?.area}
-        label="What to share"
+        label={record ? "What to record" : "What to share"}
         multiple={body.multiple}
         onDrag={
           body.region
@@ -256,6 +262,25 @@ export const ScreenCastDialog = ({
 
 const askerStyles = css({ color: "muted", fontSize: "sm", margin: 0 });
 
+/** The confirm button's label: a cast to a TV, a recording or a share. */
+const action = (castTo: string | undefined, record: boolean): string => {
+  if (castTo !== undefined) {
+    return "Cast";
+  }
+  return record ? "Record" : "Share";
+};
+
+/** The title of a cast to a TV or a recording; others are titled by asker. */
+const heading = (
+  castTo: string | undefined,
+  record: boolean,
+): string | undefined => {
+  if (castTo !== undefined) {
+    return `Cast to ${castTo}`;
+  }
+  return record ? "Record your screen" : undefined;
+};
+
 /** The dialog's title for what it offers. */
 const title = (
   multiple: boolean,
@@ -286,6 +311,7 @@ const partOf = (source: CastSource, area: ShotRect): CastSource => {
 /**
  * What the desk says of the sources `picked` from `offered`, of the area
  * `dragged` or of a window's `part`, and whether a `region` may be dragged.
+ * Said of a recording when `record` is set.
  */
 const caption = (
   offered: readonly Offered[],
@@ -293,18 +319,20 @@ const caption = (
   dragged: ShotRect | undefined,
   part: { index: number; area: ShotRect } | undefined,
   region: boolean,
+  record: boolean,
 ): string => {
+  const [verb, done] = record ? ["record", "Recorded"] : ["share", "Shared"];
   if (dragged !== undefined) {
-    return "Shared live, as it changes.";
+    return `${done} live, as it changes.`;
   } else if (picked.length === 0) {
     return region
-      ? "Pick what to share, or drag over the desk for an area."
-      : "Pick what to share.";
+      ? `Pick what to ${verb}, or drag over the desk for an area.`
+      : `Pick what to ${verb}.`;
   } else if (part !== undefined) {
-    return "A part of the window, shared as it draws itself.";
+    return `A part of the window, ${done.toLowerCase()} as it draws itself.`;
   } else if (picked.some((index) => offered[index]?.area === undefined)) {
-    return "Not on screen: shared as it draws itself. Drag over it to pick a part.";
+    return `Not on screen: ${done.toLowerCase()} as it draws itself. Drag over it to pick a part.`;
   } else {
-    return "Shared live, as it changes.";
+    return `${done} live, as it changes.`;
   }
 };