@ai-matrx/media 0.12.0 → 0.14.0

package/dist/react.cjs

@@ -56,6 +56,8 @@ __export(react_exports, {
   PenToolIcon: () => PenToolIcon,
   PlayIcon: () => PlayIcon,
   PlusIcon: () => PlusIcon,
+  ReadAloudButton: () => ReadAloudButton,
+  ReadAloudLanguagePicker: () => ReadAloudLanguagePicker,
   SearchIcon: () => SearchIcon,
   Settings2Icon: () => Settings2Icon,
   Share2Icon: () => Share2Icon,
@@ -2531,4 +2533,122 @@ function MediaLightbox({
     }
   );
 }
+
+// src/react/read-aloud-button.tsx
+var import_buttons = require("@ai-matrx/tap-target/buttons");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function ReadAloudButton({
+  status,
+  onPress,
+  error,
+  disabled = false,
+  variant,
+  className,
+  label = "Read aloud"
+}) {
+  if (status === "playing") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_buttons.PauseTapButton, { variant, onClick: onPress, disabled, ariaLabel: "Pause", className });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_buttons.TriangleAlertTapButton,
+      {
+        variant,
+        onClick: onPress,
+        disabled,
+        ariaLabel: error || "Read aloud failed. Press to try again.",
+        className
+      }
+    );
+  }
+  const loading = status === "loading";
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_buttons.Volume2TapButton,
+    {
+      variant,
+      onClick: onPress,
+      disabled: disabled || loading,
+      ariaLabel: loading ? "Connecting\u2026" : status === "paused" ? "Resume" : label,
+      className
+    }
+  );
+}
+
+// src/react/read-aloud-language-picker.tsx
+var import_design_system = require("@ai-matrx/design-system");
+var import_lucide_react = require("lucide-react");
+var import_react17 = require("react");
+
+// src/voices/read-aloud-languages.ts
+var READ_ALOUD_LANGUAGES = [
+  { code: "en", englishName: "English", nativeName: "English" },
+  { code: "es", englishName: "Spanish", nativeName: "Espa\xF1ol" },
+  { code: "fr", englishName: "French", nativeName: "Fran\xE7ais" },
+  { code: "de", englishName: "German", nativeName: "Deutsch" },
+  { code: "it", englishName: "Italian", nativeName: "Italiano" },
+  { code: "pt", englishName: "Portuguese", nativeName: "Portugu\xEAs" },
+  { code: "zh", englishName: "Chinese", nativeName: "\u4E2D\u6587" },
+  { code: "ja", englishName: "Japanese", nativeName: "\u65E5\u672C\u8A9E" },
+  { code: "ko", englishName: "Korean", nativeName: "\uD55C\uAD6D\uC5B4" },
+  { code: "ru", englishName: "Russian", nativeName: "\u0420\u0443\u0441\u0441\u043A\u0438\u0439" },
+  { code: "hi", englishName: "Hindi", nativeName: "\u0939\u093F\u0928\u094D\u0926\u0940" },
+  { code: "nl", englishName: "Dutch", nativeName: "Nederlands" },
+  { code: "pl", englishName: "Polish", nativeName: "Polski" },
+  { code: "sv", englishName: "Swedish", nativeName: "Svenska" },
+  { code: "tr", englishName: "Turkish", nativeName: "T\xFCrk\xE7e" },
+  { code: "fa", englishName: "Persian", nativeName: "\u0641\u0627\u0631\u0633\u06CC" }
+];
+function readAloudLanguage(code) {
+  return READ_ALOUD_LANGUAGES.find((l) => l.code === code) ?? READ_ALOUD_LANGUAGES[0];
+}
+
+// src/react/read-aloud-language-picker.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function ReadAloudLanguagePicker({ value, onChange, className }) {
+  const [open, setOpen] = (0, import_react17.useState)(false);
+  const selected = readAloudLanguage(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_design_system.Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_design_system.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_design_system.Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: cn("size-7 text-muted-foreground", className),
+        title: `Voice language: ${selected.englishName}`,
+        "aria-label": `Voice language, currently ${selected.englishName}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.Languages, { className: "size-3.5" })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_design_system.PopoverContent, { className: "max-h-80 w-56 overflow-y-auto p-1", align: "end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-2.5 py-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Voice language" }),
+      READ_ALOUD_LANGUAGES.map((option) => {
+        const isSelected = option.code === selected.code;
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "menuitemradio",
+            "aria-checked": isSelected,
+            onClick: () => {
+              onChange(option.code);
+              setOpen(false);
+            },
+            className: cn(
+              "flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left transition-colors hover:bg-accent",
+              isSelected && "bg-accent"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "block text-sm", children: option.nativeName }),
+                option.nativeName !== option.englishName ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "block text-[11px] text-muted-foreground", children: option.englishName }) : null
+              ] }),
+              isSelected ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.Check, { className: "size-3.5 shrink-0 text-primary" }) : null
+            ]
+          },
+          option.code
+        );
+      })
+    ] })
+  ] });
+}
 //# sourceMappingURL=react.cjs.map