@ai-matrx/meet 0.7.75 → 0.7.77

package/dist/react.js

@@ -6692,7 +6692,20 @@ function useGuestRecordAccess(meeting) {
 
 // src/react/components.tsx
 import { useEffect as useEffect4, useLayoutEffect, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
-import { ErrorBox } from "@ai-matrx/design-system";
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  Checkbox,
+  ErrorBox,
+  Label,
+  SegmentedControl,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@ai-matrx/design-system";
 import { avatarPaletteIndex, formatDurationMs as formatDurationMs4, getInitials } from "@ai-matrx/kit/format";
 
 // src/core/after.ts
@@ -9545,38 +9558,41 @@ function EffectsSettings({ preview }) {
     }
   };
   return /* @__PURE__ */ jsxs3("section", { className: "mx-meet__section", "aria-label": "Effects", children: [
-    /* @__PURE__ */ jsxs3("label", { className: "mx-meet__toggle", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "mx-meet__check", children: [
       /* @__PURE__ */ jsx4(
-        "input",
+        Checkbox,
         {
-          type: "checkbox",
+          id: "mx-meet-noise",
           checked: effects.effects.noiseSuppression,
-          onChange: (event) => apply({ noiseSuppression: event.target.checked })
+          onCheckedChange: (checked) => apply({ noiseSuppression: checked === true })
         }
       ),
-      "Noise suppression",
-      /* @__PURE__ */ jsx4("span", { className: "mx-meet__hint", children: "Filters keyboards, fans and background chatter." })
+      /* @__PURE__ */ jsxs3("div", { className: "mx-meet__check-text", children: [
+        /* @__PURE__ */ jsx4(Label, { htmlFor: "mx-meet-noise", children: "Noise suppression" }),
+        /* @__PURE__ */ jsx4("span", { className: "mx-meet__hint", children: "Filters keyboards, fans and background chatter." })
+      ] })
     ] }),
     supported ? /* @__PURE__ */ jsxs3("div", { className: "mx-meet__field", children: [
-      /* @__PURE__ */ jsx4("span", { className: "mx-meet__field-label", children: "Background" }),
-      /* @__PURE__ */ jsx4("div", { className: "mx-meet__pills", role: "radiogroup", "aria-label": "Background", children: ["none", "blur", "image"].map((kind) => /* @__PURE__ */ jsx4(
-        "button",
+      /* @__PURE__ */ jsx4(Label, { children: "Background" }),
+      /* @__PURE__ */ jsx4(
+        SegmentedControl,
         {
-          type: "button",
-          role: "radio",
-          "aria-checked": effects.effects.background === kind,
-          className: effects.effects.background === kind ? "mx-meet__pill mx-meet__pill--on" : "mx-meet__pill",
-          onClick: () => {
+          fullWidth: true,
+          value: effects.effects.background,
+          onValueChange: (kind) => {
             if (kind === "image") {
               fileRef.current?.click();
               return;
             }
             apply({ background: kind });
           },
-          children: kind === "none" ? "None" : kind === "blur" ? "Blur" : "Picture\u2026"
-        },
-        kind
-      )) }),
+          data: [
+            { value: "none", label: "None" },
+            { value: "blur", label: "Blur" },
+            { value: "image", label: "Picture\u2026" }
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx4(
         "input",
         {
@@ -9960,10 +9976,10 @@ function PreJoinBody({
       /* @__PURE__ */ jsxs3("div", { className: "mx-meet__field-row", children: [
         /* @__PURE__ */ jsx4(DevicePicker, { kind: "audiooutput", label: "Speaker" }),
         /* @__PURE__ */ jsxs3(
-          "button",
+          Button,
           {
             type: "button",
-            className: "mx-meet__chip",
+            variant: "outline",
             disabled: speakerTesting,
             onClick: () => {
               setSpeakerTesting(true);
@@ -9972,7 +9988,7 @@ function PreJoinBody({
               );
             },
             children: [
-              /* @__PURE__ */ jsx4(SpeakerIcon, { width: 14, height: 14 }),
+              /* @__PURE__ */ jsx4(SpeakerIcon, {}),
               " ",
               speakerTesting ? "Playing\u2026" : "Test"
             ]
@@ -9981,35 +9997,36 @@ function PreJoinBody({
       ] }),
       /* @__PURE__ */ jsx4(DevicePicker, { kind: "videoinput", label: "Camera" }),
       /* @__PURE__ */ jsx4(EffectsSettings, { preview: preview.preview }),
-      recording.consentNotice !== null ? /* @__PURE__ */ jsx4("p", { className: "mx-meet__consent", children: recording.consentNotice }) : null,
+      recording.consentNotice !== null ? /* @__PURE__ */ jsx4(Alert, { variant: "info", children: /* @__PURE__ */ jsx4(AlertDescription, { children: recording.consentNotice }) }) : null,
       /* @__PURE__ */ jsxs3("div", { className: "mx-meet__prejoin-actions", children: [
-        /* @__PURE__ */ jsxs3("label", { className: "mx-meet__toggle", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "mx-meet__check", children: [
           /* @__PURE__ */ jsx4(
-            "input",
+            Checkbox,
             {
-              type: "checkbox",
+              id: "mx-meet-join-video",
               checked: mode === "video",
-              onChange: (event) => setMode(event.target.checked ? "video" : "audio")
+              onCheckedChange: (checked) => setMode(checked === true ? "video" : "audio")
             }
           ),
-          "Join with video"
+          /* @__PURE__ */ jsx4(Label, { htmlFor: "mx-meet-join-video", children: "Join with video" })
         ] }),
-        /* @__PURE__ */ jsxs3("label", { className: "mx-meet__toggle", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "mx-meet__check", children: [
           /* @__PURE__ */ jsx4(
-            "input",
+            Checkbox,
             {
-              type: "checkbox",
+              id: "mx-meet-join-mic",
               checked: microphone,
-              onChange: (event) => setMicrophone(event.target.checked)
+              onCheckedChange: (checked) => setMicrophone(checked === true)
             }
           ),
-          "Join with microphone"
+          /* @__PURE__ */ jsx4(Label, { htmlFor: "mx-meet-join-mic", children: "Join with microphone" })
         ] }),
         /* @__PURE__ */ jsx4(
-          "button",
+          Button,
           {
             type: "button",
-            className: "mx-meet__primary",
+            className: "mx-meet__join",
+            disabled: joining,
             onClick: () => {
               setJoining(true);
               preview.release();
@@ -10082,18 +10099,24 @@ function DevicePicker({
   const devices = useDeviceSnapshot();
   const list = devices?.devices[kind] ?? [];
   if (list.length === 0) return null;
-  return /* @__PURE__ */ jsxs3("label", { className: "mx-meet__field", children: [
-    /* @__PURE__ */ jsx4("span", { className: "mx-meet__field-label", children: label }),
-    /* @__PURE__ */ jsx4(
-      "select",
+  const triggerId = `mx-meet-device-${kind}`;
+  const valueOf = (deviceId2) => deviceId2.length > 0 ? deviceId2 : "default";
+  const current = devices?.selected[kind] ?? host.devices.resolve(kind) ?? "";
+  return /* @__PURE__ */ jsxs3("div", { className: "mx-meet__field", children: [
+    /* @__PURE__ */ jsx4(Label, { htmlFor: triggerId, children: label }),
+    /* @__PURE__ */ jsxs3(
+      Select,
       {
-        className: "mx-meet__select",
-        value: devices?.selected[kind] ?? host.devices.resolve(kind) ?? "",
-        onChange: (event) => {
-          if (onPick !== void 0) onPick(kind, event.target.value);
-          else host.devices.select(kind, event.target.value);
+        ...current.length > 0 ? { value: valueOf(current) } : {},
+        onValueChange: (value) => {
+          const deviceId2 = list.find((device) => valueOf(device.deviceId) === value)?.deviceId ?? value;
+          if (onPick !== void 0) onPick(kind, deviceId2);
+          else host.devices.select(kind, deviceId2);
         },
-        children: list.map((device) => /* @__PURE__ */ jsx4("option", { value: device.deviceId, children: device.label.length > 0 ? device.label : `${label} (name hidden)` }, device.deviceId))
+        children: [
+          /* @__PURE__ */ jsx4(SelectTrigger, { id: triggerId, "aria-label": label, children: /* @__PURE__ */ jsx4(SelectValue, { placeholder: label }) }),
+          /* @__PURE__ */ jsx4(SelectContent, { children: list.map((device) => /* @__PURE__ */ jsx4(SelectItem, { value: valueOf(device.deviceId), children: device.label.length > 0 ? device.label : `${label} (name hidden)` }, device.deviceId || "default")) })
+        ]
       }
     )
   ] });