feat: screen picker for windows desktop screen sharing

packages/client/components/app/interface/settings/user/Native.tsx

@@ -30,6 +30,17 @@ declare global {
       minimise(): void;
       maximise(): void;
       close(): void;
+      onceScreenPicker(
+        onScreenPick: (
+          sources: {
+            idx: number;
+            name: string;
+            isFullScreen: boolean;
+            image?: string;
+          }[],
+        ) => void,
+      ): void;
+      screenPickerCallback(idx: number, audio: boolean): void;
     };
 
     desktopConfig: {

packages/client/components/modal/modals.tsx

@@ -48,6 +48,7 @@ import { PolicyChangeModal } from "./modals/PolicyChange";
 import { RenameSessionModal } from "./modals/RenameSession";
 import { ReportContentModal } from "./modals/ReportContent";
 import { ResetBotTokenModal } from "./modals/ResetBotToken";
+import { ScreenSharePickerModal } from "./modals/ScreenSharePicker";
 import { ScreenShareSettingsModal } from "./modals/ScreenShareSettings";
 import { ServerIdentityModal } from "./modals/ServerIdentity";
 import { ServerInfoModal } from "./modals/ServerInfo";
@@ -186,6 +187,8 @@ export function RenderModal(props: ActiveModal & { onClose: () => void }) {
       return <EditCategoryModal {...modalProps} />;
     case "screen_share_settings":
       return <ScreenShareSettingsModal {...modalProps} />;
+    case "screen_share_picker":
+      return <ScreenSharePickerModal {...modalProps} />;
     default:
       console.error(
         "Failed to create modal for",

packages/client/components/modal/modals/ScreenSharePicker.tsx

@@ -0,0 +1,116 @@
+import { Trans, useLingui } from "@lingui-solid/solid/macro";
+import { createFormControl, createFormGroup } from "solid-forms";
+
+import { useState } from "@revolt/state";
+import { ScreenShareQualityName } from "@revolt/state/stores/Voice";
+import { Avatar, Column, Dialog, DialogProps, Form2, Ripple } from "@revolt/ui";
+
+import { createMemo } from "solid-js";
+import { styled } from "styled-system/jsx";
+import { Modals } from "../types";
+
+export function ScreenSharePickerModal(
+  props: DialogProps & Modals & { type: "screen_share_picker" },
+) {
+  const { voice } = useState();
+  const { t } = useLingui();
+
+  const group = createFormGroup({
+    qualityName: createFormControl<ScreenShareQualityName>(
+      voice.screenShareQuality || "low",
+    ),
+    idx: createFormControl([0], { required: true }),
+  });
+
+  async function onSubmit() {
+    props.callback(
+      group.controls.idx.value[0],
+      group.controls.qualityName.value,
+    );
+    props.onClose();
+  }
+
+  const submit = Form2.useSubmitHandler(group, onSubmit);
+
+  const sources = createMemo(() =>
+    props.sources.map((source) => {
+      return { item: source, value: source.idx };
+    }),
+  );
+
+  return (
+    <Dialog
+      minWidth={420}
+      show={props.show}
+      onClose={() => {
+        props.onCancel();
+        props.onClose();
+      }}
+      title={t`Pick a Screen to Share`}
+      actions={[
+        { text: <Trans>Cancel</Trans> },
+        {
+          text: <Trans>Go</Trans>,
+          onClick: () => {
+            onSubmit();
+            return false;
+          },
+        },
+      ]}
+    >
+      <form onSubmit={submit}>
+        <Column>
+          <Form2.VirtualSelect
+            control={group.controls.idx}
+            items={sources()}
+            selectHeight="max(30vh, 200px)"
+            isMaxHeight={true}
+            itemHeight={60}
+          >
+            {(val, selected) => (
+              <Item selected={selected}>
+                <Ripple />
+                <Avatar
+                  src={val.image}
+                  fallback={val.name}
+                  size={36}
+                  shape="rounded-square"
+                />
+                <span>{val.name}</span>
+              </Item>
+            )}
+          </Form2.VirtualSelect>
+          <Form2.ButtonGroup
+            control={group.controls.qualityName}
+            buttonDefinitions={props.qualities.map((quality) => {
+              return {
+                children: quality.fullName,
+                value: quality.name,
+              };
+            })}
+          />
+        </Column>
+      </form>
+    </Dialog>
+  );
+}
+
+const Item = styled("div", {
+  base: {
+    height: "60px",
+    display: "flex",
+    position: "relative",
+    alignItems: "center",
+    gap: "var(--gap-md)",
+    padding: "var(--gap-md)",
+    borderRadius: "var(--borderRadius-sm)",
+  },
+  variants: {
+    selected: {
+      true: {
+        color: "var(--md-sys-color-on-primary)",
+        background: "var(--md-sys-color-primary)",
+      },
+    },
+  },
+});

packages/client/components/modal/types.ts

@@ -323,4 +323,16 @@ export type Modals =
       qualities: { name: string; fullName: string }[];
       callback: (qualityName: ScreenShareQualityName) => void;
       onCancel: () => void;
+    }
+  | {
+      type: "screen_share_picker";
+      callback: (idx: number, qualityName: ScreenShareQualityName) => void;
+      qualities: { name: string; fullName: string }[];
+      sources: {
+        idx: number;
+        name: string;
+        isFullScreen: boolean;
+        image?: string;
+      }[];
+      onCancel: () => void;
     };

packages/client/components/rtc/state.tsx

@@ -318,12 +318,37 @@ class Voice {
   async toggleScreenshare() {
     const room = this.room();
     if (!room) throw "invalid state";
+
     if (this.screenshare()) {
       await room.localParticipant.setScreenShareEnabled(false);
 
       this.#setScreenshare(room.localParticipant.isScreenShareEnabled);
     } else {
       const qualities = this.getEnabledScreenShareQualities();
+      let screenPickerQualityName: ScreenShareQualityName | undefined;
+
+      // Register the modal on screen picker handler if it exists
+      if (window.native && window.native.onceScreenPicker) {
+        window.native.onceScreenPicker((sources) => {
+          this.openModal({
+            type: "screen_share_picker",
+            onCancel: () => {
+              window.native.screenPickerCallback(-1, false);
+            },
+            callback: (idx: number, qualityName: ScreenShareQualityName) => {
+              // TODO: Change this to true when enabling screen share audio.
+              window.native.screenPickerCallback(idx, false);
+              screenPickerQualityName = qualityName;
+            },
+            sources: sources,
+            qualities: Object.keys(qualities).map((k) => {
+              const v = qualities[k as ScreenShareQualityName]!;
+              return { name: k, fullName: v.fullName };
+            }),
+          });
+        });
+      }
+
       try {
         const localTrack = await room.localParticipant.setScreenShareEnabled(
           true,
@@ -360,7 +385,9 @@ class Voice {
             }
           };
 
-          if (this.#settings.screenShareQualityAsk) {
+          if (screenPickerQualityName) {
+            callback(screenPickerQualityName || "low");
+          } else if (this.#settings.screenShareQualityAsk) {
             if (Object.keys(qualities).length > 1) {
               localTrack.pauseUpstream();
               this.openModal({

packages/client/components/ui/components/utils/Form2.tsx

@@ -282,6 +282,7 @@ function FormVirtualSelect<K, T>(props: {
   children: (item: T, selected?: boolean) => JSX.Element;
   itemHeight?: number;
   selectHeight?: string;
+  isMaxHeight?: boolean;
   multiple?: boolean;
 }) {
   let ref;
@@ -290,9 +291,15 @@ function FormVirtualSelect<K, T>(props: {
     <div
       ref={ref}
       use:scrollable
-      style={{
-        height: props.selectHeight ?? "320px",
-      }}
+      style={
+        props.isMaxHeight
+          ? {
+              "max-height": props.selectHeight ?? "320px",
+            }
+          : {
+              height: props.selectHeight ?? "320px",
+            }
+      }
     >
       <VirtualContainer
         items={props.items}
@@ -308,7 +315,8 @@ function FormVirtualSelect<K, T>(props: {
             onClick={() => {
               if (!props.multiple) {
                 props.control.setValue(
-                  props.control.value[0] === item.item.value
+                  props.control.value[0] === item.item.value &&
+                    !props.control.isRequired
                     ? []
                     : [item.item.value],
                 );