react-select-media-devices-modal 1.1.2 → 1.1.4

package/dist/react-select-media-devices-modal.mjs

@@ -1,336 +1,604 @@
-import e, { useState as p, useEffect as V, useRef as Q, useMemo as q } from "react";
-const ae = "_background_1djbv_1", se = "_modal_1djbv_13", de = "_deviceLists_1djbv_20", re = "_buttons_1djbv_24", ue = "_chancelButton_1djbv_31", le = "_confirmButton_1djbv_33", U = {
-  background: ae,
-  modal: se,
-  deviceLists: de,
-  buttons: re,
-  chancelButton: ue,
-  confirmButton: le
-}, W = () => {
-  const [i, s] = p([]);
-  return [i, () => {
+import c, { useState as f, useEffect as w, useRef as Z, useMemo as K } from "react";
+const y = () => {
+  const [g, p] = f([]);
+  return [g, () => {
     (async () => {
-      const c = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), o = await navigator.mediaDevices.enumerateDevices();
-      s(o), c.getTracks().forEach((f) => f.stop());
+      const o = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), m = await navigator.mediaDevices.enumerateDevices();
+      p(m), o.getTracks().forEach((B) => B.stop());
     })();
   }];
-}, ve = ({ name: i, value: s }) => /* @__PURE__ */ e.createElement("option", { value: s }, i), me = "_deviceList_1bfq1_1", pe = "_select_1bfq1_5", X = {
-  deviceList: me,
-  select: pe
-}, O = ({ devices: i, label: s, selectedDevice: v, onChange: c }) => {
-  if (i === void 0)
-    return /* @__PURE__ */ e.createElement(e.Fragment, null);
-  const o = (k) => {
-    c(k.target.value);
-  }, f = `device-select-${s.toLowerCase().replace(/\s/g, "-")}`;
-  return /* @__PURE__ */ e.createElement("div", { className: X.deviceList }, /* @__PURE__ */ e.createElement("label", { htmlFor: f }, s), /* @__PURE__ */ e.createElement("select", { className: X.select, id: f, onChange: o, defaultValue: v == null ? void 0 : v.deviceId }, i.map((k, j) => /* @__PURE__ */ e.createElement(ve, { value: k.deviceId, name: k.label, key: j }))));
-}, fe = "_button_keu24_1", ge = {
-  button: fe
-}, P = ({ className: i, children: s, disabled: v, onClick: c }) => /* @__PURE__ */ e.createElement("button", { onClick: c, disabled: v, className: [ge.button, i].filter(Boolean).join(" ") }, s), Pe = ({
-  isSelectAudioInput: i = !0,
-  isSelectAudioOutput: s = !0,
-  isSelectVideoInput: v = !0,
-  open: c,
-  audioInputDeviceLabel: o = "audio input device",
-  audioOutputDeviceLabel: f = "audio output device",
-  videoInputDeviceLabel: k = "video input device",
-  confirmButtonText: j = "Confirm",
-  cancelButtonText: G = "Cancel",
-  allowOutsideClick: A = !0,
-  onDeviceSelected: T,
-  onDeviceSelectCanceled: y
+}, ue = ({ name: g, value: p, style: L }) => /* @__PURE__ */ c.createElement("option", { style: L, value: p }, g), H = ({ devices: g, label: p, selectedDevice: L, style: o, onChange: m }) => {
+  if (g === void 0) return /* @__PURE__ */ c.createElement(c.Fragment, null);
+  const B = (E) => {
+    m(E.target.value);
+  }, G = `device-select-${p.toLowerCase().replace(/\s/g, "-")}`, I = {
+    deviceList: {
+      paddingTop: "8px"
+    },
+    label: {},
+    select: {
+      marginTop: "4px",
+      borderRadius: "4px",
+      height: "32px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "right",
+      width: "100%"
+    },
+    deviceItems: {}
+  }, A = {
+    deviceList: o ? { ...I.deviceList, ...o.deviceList } : I.deviceList,
+    label: o ? { ...I.label, ...o.label } : I.label,
+    select: o ? { ...I.select, ...o.select } : I.select,
+    deviceItems: o ? { ...I.deviceItems, ...o.deviceItems } : I.deviceItems
+  };
+  return /* @__PURE__ */ c.createElement("div", { style: A.deviceList }, /* @__PURE__ */ c.createElement("label", { style: A.label, htmlFor: G }, p), /* @__PURE__ */ c.createElement("select", { style: A.select, id: G, onChange: B, defaultValue: L == null ? void 0 : L.deviceId }, g.map((E, e) => /* @__PURE__ */ c.createElement(ue, { style: A.deviceItems, value: E.deviceId, name: E.label, key: e }))));
+}, J = ({ children: g, disabled: p, style: L, onClick: o }) => {
+  const m = {
+    borderRadius: "4px",
+    height: "32px",
+    paddingLeft: "16px",
+    paddingRight: "16px",
+    backgroundColor: "white",
+    borderWidth: "1px"
+  }, B = L ? { ...m, ...L } : m;
+  return /* @__PURE__ */ c.createElement("button", { onClick: o, disabled: p, style: B }, g);
+}, ve = ({
+  isSelectAudioInput: g = !0,
+  isSelectAudioOutput: p = !0,
+  isSelectVideoInput: L = !0,
+  open: o,
+  audioInputDeviceLabel: m = "audio input device",
+  audioOutputDeviceLabel: B = "audio output device",
+  videoInputDeviceLabel: G = "video input device",
+  confirmButtonText: I = "Confirm",
+  cancelButtonText: A = "Cancel",
+  allowOutsideClick: E = !0,
+  style: e,
+  onDeviceSelected: i,
+  onDeviceSelectCanceled: $
 }) => {
-  const [m, r] = W(), [h, C] = p(), [L, D] = p(), [g, I] = p(), M = m.filter((a) => a.kind === "audioinput"), w = m.filter((a) => a.kind === "audiooutput"), B = m.filter((a) => a.kind === "videoinput");
-  V(() => {
-    c ? (navigator.mediaDevices.addEventListener("devicechange", r), r()) : navigator.mediaDevices.removeEventListener("devicechange", r);
-  }, [c]);
-  const F = () => {
-    T({
-      audioInput: h !== void 0 ? h : M[0],
-      audioOutput: L !== void 0 ? L : w[0],
-      videoInput: g !== void 0 ? g : B[0]
+  const [k, h] = y(), [V, M] = f(), [W, R] = f(), [x, T] = f(), Q = k.filter((r) => r.kind === "audioinput"), F = k.filter((r) => r.kind === "audiooutput"), j = k.filter((r) => r.kind === "videoinput"), d = {
+    background: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      backgroundColor: "rgba(0, 0, 0, 0.3)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    modal: {
+      background: "white",
+      padding: "16px",
+      borderRadius: "8px",
+      minWidth: "270px"
+    },
+    deviceLists: { display: "grid" },
+    audioInputDeviceList: {},
+    audioOutputDeviceList: {},
+    videoInputDeviceList: {},
+    buttons: {
+      paddingTop: "16px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "right"
+    },
+    cancelButton: {},
+    confirmButton: {
+      marginLeft: "4px"
+    }
+  }, [l, b] = f({
+    background: e ? { ...d.background, ...e.background } : d.background,
+    modal: e ? { ...d.modal, ...e.modal } : d.modal,
+    deviceLists: e ? { ...d.deviceLists, ...e.deviceLists } : d.deviceLists,
+    audioInputDeviceList: e ? { ...d.audioInputDeviceList, ...e.audioInputDeviceList } : {},
+    audioOutputDeviceList: e ? { ...d.audioOutputDeviceList, ...e.audioOutputDeviceList } : {},
+    videoInputDeviceList: e ? { ...d.videoInputDeviceList, ...e.videoInputDeviceList } : {},
+    buttons: e ? { ...d.buttons, ...e.buttons } : d.buttons,
+    cancelButton: e ? { ...d.cancelButton, ...e.cancelButton } : d.cancelButton,
+    confirmButton: e ? { ...d.confirmButton, ...e.confirmButton } : d.confirmButton
+  });
+  w(() => {
+    b({
+      background: e ? { ...d.background, ...e.background } : d.background,
+      modal: e ? { ...d.modal, ...e.modal } : d.modal,
+      deviceLists: e ? { ...d.deviceLists, ...e.deviceLists } : d.deviceLists,
+      audioInputDeviceList: e ? { ...d.audioInputDeviceList, ...e.audioInputDeviceList } : {},
+      audioOutputDeviceList: e ? { ...d.audioOutputDeviceList, ...e.audioOutputDeviceList } : {},
+      videoInputDeviceList: e ? { ...d.videoInputDeviceList, ...e.videoInputDeviceList } : {},
+      buttons: e ? { ...d.buttons, ...e.buttons } : d.buttons,
+      cancelButton: e ? { ...d.cancelButton, ...e.cancelButton } : d.cancelButton,
+      confirmButton: e ? { ...d.confirmButton, ...e.confirmButton } : d.confirmButton
     });
-  }, $ = () => {
-    y();
-  }, u = (a) => {
-    C(M.find((E) => E.deviceId === a));
-  }, d = (a) => {
-    D(w.find((E) => E.deviceId === a));
-  }, x = (a) => {
-    I(B.find((E) => E.deviceId === a));
-  }, z = () => {
-    y();
+  }, [e]), w(() => {
+    o ? (navigator.mediaDevices.addEventListener("devicechange", h), h()) : navigator.mediaDevices.removeEventListener("devicechange", h);
+  }, [o]);
+  const D = () => {
+    i({
+      audioInput: V !== void 0 ? V : Q[0],
+      audioOutput: W !== void 0 ? W : F[0],
+      videoInput: x !== void 0 ? x : j[0]
+    });
+  }, _ = () => {
+    $();
+  }, n = (r) => {
+    M(Q.find((O) => O.deviceId === r));
+  }, v = (r) => {
+    R(F.find((O) => O.deviceId === r));
+  }, U = (r) => {
+    T(j.find((O) => O.deviceId === r));
+  }, q = () => {
+    $();
   };
-  return c ? /* @__PURE__ */ e.createElement("div", { className: U.background, ...A ? { onClick: z } : {} }, /* @__PURE__ */ e.createElement(
+  return o ? /* @__PURE__ */ c.createElement("div", { style: l.background, ...E ? { onClick: q } : {} }, /* @__PURE__ */ c.createElement(
     "div",
     {
-      className: U.modal,
-      ...A ? {
-        onClick: (a) => a.stopPropagation()
+      style: l.modal,
+      ...E ? {
+        onClick: (r) => r.stopPropagation()
       } : {}
     },
-    /* @__PURE__ */ e.createElement("div", { className: U.deviceLists }, i && /* @__PURE__ */ e.createElement(
-      O,
+    /* @__PURE__ */ c.createElement("div", { style: l.deviceLists }, g && /* @__PURE__ */ c.createElement(
+      H,
       {
-        label: o,
-        devices: M,
-        selectedDevice: h,
-        onChange: u
+        style: l == null ? void 0 : l.audioInputDeviceList,
+        label: m,
+        devices: Q,
+        selectedDevice: V,
+        onChange: n
       }
-    ), s && /* @__PURE__ */ e.createElement(
-      O,
+    ), p && /* @__PURE__ */ c.createElement(
+      H,
       {
-        label: f,
-        devices: w,
-        selectedDevice: L,
-        onChange: d
+        style: l == null ? void 0 : l.audioOutputDeviceList,
+        label: B,
+        devices: F,
+        selectedDevice: W,
+        onChange: v
       }
-    ), v && /* @__PURE__ */ e.createElement(
-      O,
+    ), L && /* @__PURE__ */ c.createElement(
+      H,
       {
-        label: k,
-        devices: B,
-        selectedDevice: g,
-        onChange: x
+        style: l == null ? void 0 : l.videoInputDeviceList,
+        label: G,
+        devices: j,
+        selectedDevice: x,
+        onChange: U
       }
     )),
-    /* @__PURE__ */ e.createElement("div", { className: U.buttons }, /* @__PURE__ */ e.createElement(P, { className: U.cancelButton, onClick: $ }, G), /* @__PURE__ */ e.createElement(P, { className: U.confirmButton, onClick: F }, j))
-  )) : /* @__PURE__ */ e.createElement(e.Fragment, null);
-}, _e = "_background_kb025_1", be = "_modal_kb025_13", he = "_deviceSelectContainer_kb025_19", Ee = "_preview_kb025_31", ke = "_previewVideo_kb025_39", Ce = "_deviceLists_kb025_44", De = "_buttons_kb025_50", Ie = "_chancelButton_kb025_57", Be = "_confirmButton_kb025_59", S = {
-  background: _e,
-  modal: be,
-  deviceSelectContainer: he,
-  preview: Ee,
-  previewVideo: ke,
-  deviceLists: Ce,
-  buttons: De,
-  chancelButton: Ie,
-  confirmButton: Be
-}, Y = () => {
-  const [i, s] = p();
-  return V(() => () => {
-    i !== void 0 && i.getTracks().forEach((o) => o.stop());
-  }, []), [i, (o) => {
-    o.kind !== "audiooutput" && (async () => {
-      const f = await navigator.mediaDevices.getUserMedia(
-        o.kind === "audioinput" ? { video: !1, audio: { deviceId: o.deviceId } } : { video: { deviceId: o.deviceId }, audio: !1 }
+    /* @__PURE__ */ c.createElement("div", { style: l.buttons }, /* @__PURE__ */ c.createElement(J, { style: l.cancelButton, onClick: _ }, A), /* @__PURE__ */ c.createElement(J, { style: l.confirmButton, onClick: D }, I))
+  )) : /* @__PURE__ */ c.createElement(c.Fragment, null);
+}, P = () => {
+  const [g, p] = f();
+  return w(() => () => {
+    g !== void 0 && g.getTracks().forEach((m) => m.stop());
+  }, []), [g, (m) => {
+    m.kind !== "audiooutput" && (async () => {
+      const B = await navigator.mediaDevices.getUserMedia(
+        m.kind === "audioinput" ? { video: !1, audio: { deviceId: m.deviceId } } : { video: { deviceId: m.deviceId }, audio: !1 }
       );
-      s(f);
+      p(B);
     })();
   }, () => {
-    i !== void 0 && (i.getTracks().forEach((o) => o.stop()), s(void 0));
+    g !== void 0 && (g.getTracks().forEach((m) => m.stop()), p(void 0));
   }];
-}, Te = ({
-  isSelectAudioInput: i = !0,
-  isSelectAudioOutput: s = !0,
-  isSelectVideoInput: v = !0,
-  open: c,
-  audioInputDeviceLabel: o = "audio input device",
-  audioOutputDeviceLabel: f = "audio output device",
-  videoInputDeviceLabel: k = "video input device",
-  confirmButtonText: j = "Confirm",
-  cancelButtonText: G = "Cancel",
-  allowOutsideClick: A = !0,
-  onDeviceSelected: T,
-  onDeviceSelectCanceled: y
+}, re = ({
+  isSelectAudioInput: g = !0,
+  isSelectAudioOutput: p = !0,
+  isSelectVideoInput: L = !0,
+  open: o,
+  audioInputDeviceLabel: m = "audio input device",
+  audioOutputDeviceLabel: B = "audio output device",
+  videoInputDeviceLabel: G = "video input device",
+  confirmButtonText: I = "Confirm",
+  cancelButtonText: A = "Cancel",
+  allowOutsideClick: E = !0,
+  style: e,
+  onDeviceSelected: i,
+  onDeviceSelectCanceled: $
 }) => {
-  const [m, r] = W(), [h, C] = p(), [L, D] = p(), [g, I] = p(), [M, w, B] = Y(), F = Q(), $ = q(() => m.filter((n) => n.kind === "audioinput"), [m]), u = q(() => m.filter((n) => n.kind === "audiooutput"), [m]), d = q(() => m.filter((n) => n.kind === "videoinput"), [m]);
-  V(() => {
-    c ? (navigator.mediaDevices.addEventListener("devicechange", r), r()) : navigator.mediaDevices.removeEventListener("devicechange", r);
-  }, [c]), V(() => {
-    if (d.length < 1)
-      return;
-    const n = d.find((_) => _.deviceId === (g == null ? void 0 : g.deviceId)) ?? d[0];
-    w(n);
-  }, [d]);
-  const x = () => {
-    B(), T({
-      audioInput: h !== void 0 ? h : $[0],
-      audioOutput: L !== void 0 ? L : u[0],
-      videoInput: g !== void 0 ? g : d[0]
+  const [k, h] = y(), [V, M] = f(), [W, R] = f(), [x, T] = f(), [Q, F, j] = P(), d = Z(), l = K(() => k.filter((u) => u.kind === "audioinput"), [k]), b = K(() => k.filter((u) => u.kind === "audiooutput"), [k]), D = K(() => k.filter((u) => u.kind === "videoinput"), [k]), _ = matchMedia("(max-width: 640px)"), n = {
+    background: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      backgroundColor: "rgba(0, 0, 0, 0.3)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    modal: {
+      background: "white",
+      padding: "16px",
+      borderRadius: "8px"
+    },
+    deviceSelectContainer: _.matches ? {
+      display: "grid",
+      gridTemplateColumns: "100%"
+    } : {
+      display: "grid",
+      gridTemplateColumns: "50% 50%"
+    },
+    preview: {
+      minWidth: "270px",
+      minHeight: "180px",
+      maxWidth: "270px",
+      maxHeight: "180px",
+      marginRight: "4px"
+    },
+    previewVideo: {
+      width: "270px",
+      height: "180px"
+    },
+    deviceLists: {
+      display: "grid",
+      minWidth: "270px",
+      marginLeft: "8px"
+    },
+    audioInputDeviceList: {},
+    audioOutputDeviceList: {},
+    videoInputDeviceList: {},
+    buttons: {
+      paddingTop: "16px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "right"
+    },
+    cancelButton: {},
+    confirmButton: {
+      marginLeft: "4px"
+    }
+  }, [v, U] = f({
+    background: e ? { ...n.background, ...e.background } : n.background,
+    modal: e ? { ...n.modal, ...e.modal } : n.modal,
+    deviceSelectContainer: e ? { ...n.deviceSelectContainer, ...e.deviceSelectContainer } : n.deviceSelectContainer,
+    preview: e ? { ...n.preview, ...e.preview } : n.preview,
+    previewVideo: e ? { ...n.previewVideo, ...e.previewVideo } : n.previewVideo,
+    deviceLists: e ? { ...n.deviceLists, ...e.deviceLists } : n.deviceLists,
+    audioInputDeviceList: e ? { ...n.audioInputDeviceList, ...e.audioInputDeviceList } : n.audioInputDeviceList,
+    audioOutputDeviceList: e ? { ...n.audioOutputDeviceList, ...e.audioOutputDeviceList } : n.audioOutputDeviceList,
+    videoInputDeviceList: e ? { ...n.videoInputDeviceList, ...e.videoInputDeviceList } : n.videoInputDeviceList,
+    buttons: e ? { ...n.buttons, ...e.buttons } : n.buttons,
+    cancelButton: e ? { ...n.cancelButton, ...e.cancelButton } : n.cancelButton,
+    confirmButton: e ? { ...n.confirmButton, ...e.confirmButton } : n.confirmButton
+  });
+  w(() => {
+    U({
+      background: e ? { ...n.background, ...e.background } : n.background,
+      modal: e ? { ...n.modal, ...e.modal } : n.modal,
+      deviceSelectContainer: e ? { ...n.deviceSelectContainer, ...e.deviceSelectContainer } : n.deviceSelectContainer,
+      preview: e ? { ...n.preview, ...e.preview } : n.preview,
+      previewVideo: e ? { ...n.previewVideo, ...e.previewVideo } : n.previewVideo,
+      deviceLists: e ? { ...n.deviceLists, ...e.deviceLists } : n.deviceLists,
+      audioInputDeviceList: e ? { ...n.audioInputDeviceList, ...e.audioInputDeviceList } : n.audioInputDeviceList,
+      audioOutputDeviceList: e ? { ...n.audioOutputDeviceList, ...e.audioOutputDeviceList } : n.audioOutputDeviceList,
+      videoInputDeviceList: e ? { ...n.videoInputDeviceList, ...e.videoInputDeviceList } : n.videoInputDeviceList,
+      buttons: e ? { ...n.buttons, ...e.buttons } : n.buttons,
+      cancelButton: e ? { ...n.cancelButton, ...e.cancelButton } : n.cancelButton,
+      confirmButton: e ? { ...n.confirmButton, ...e.confirmButton } : n.confirmButton
+    });
+  }, [e]), w(() => {
+    const u = () => {
+      _.matches ? U({
+        ...v,
+        deviceSelectContainer: {
+          display: "grid",
+          gridTemplateColumns: "100%"
+        }
+      }) : U({
+        ...v,
+        deviceSelectContainer: {
+          display: "grid",
+          gridTemplateColumns: "50% 50%"
+        }
+      });
+    };
+    return _.addEventListener("change", u), () => {
+      _.removeEventListener("change", u);
+    };
+  }, []), w(() => {
+    o ? (navigator.mediaDevices.addEventListener("devicechange", h), h()) : navigator.mediaDevices.removeEventListener("devicechange", h);
+  }, [o]), w(() => {
+    if (D.length < 1) return;
+    const u = D.find((S) => S.deviceId === (x == null ? void 0 : x.deviceId)) ?? D[0];
+    F(u);
+  }, [D]);
+  const q = () => {
+    j(), i({
+      audioInput: V !== void 0 ? V : l[0],
+      audioOutput: W !== void 0 ? W : b[0],
+      videoInput: x !== void 0 ? x : D[0]
     });
-  }, z = () => {
-    B(), y();
-  }, a = (n) => {
-    C($.find((_) => _.deviceId === n));
-  }, E = (n) => {
-    D(u.find((_) => _.deviceId === n));
-  }, H = (n) => {
-    const _ = d.find((K) => K.deviceId === n);
-    I(_), w(_);
+  }, r = () => {
+    j(), $();
+  }, O = (u) => {
+    M(l.find((S) => S.deviceId === u));
+  }, t = (u) => {
+    R(b.find((S) => S.deviceId === u));
+  }, s = (u) => {
+    const S = D.find((Y) => Y.deviceId === u);
+    T(S), F(S);
   };
-  V(() => {
-    const { current: n } = F;
-    n && (n.srcObject !== null && n.srcObject instanceof MediaStream && (n.srcObject.getTracks().forEach((_) => _.stop()), n.pause()), n.srcObject = M, n.play());
-  }, [M]);
+  w(() => {
+    const { current: u } = d;
+    u && (u.srcObject !== null && u.srcObject instanceof MediaStream && (u.srcObject.getTracks().forEach((S) => S.stop()), u.pause()), u.srcObject = Q, u.play());
+  }, [Q]);
   const N = () => {
-    B(), y();
+    j(), $();
   };
-  return c ? /* @__PURE__ */ e.createElement("div", { className: S.background, ...A ? { onClick: N } : {} }, /* @__PURE__ */ e.createElement(
+  return o ? /* @__PURE__ */ c.createElement("div", { style: v.background, ...E ? { onClick: N } : {} }, /* @__PURE__ */ c.createElement(
     "div",
     {
-      className: S.modal,
-      ...A ? {
-        onClick: (n) => n.stopPropagation()
+      style: v.modal,
+      ...E ? {
+        onClick: (u) => u.stopPropagation()
       } : {}
     },
-    /* @__PURE__ */ e.createElement("div", { className: S.deviceSelectContainer }, /* @__PURE__ */ e.createElement("div", { className: S.preview }, /* @__PURE__ */ e.createElement("video", { className: S.previewVideo, ref: F, autoPlay: !0, muted: !0, playsInline: !0 })), /* @__PURE__ */ e.createElement("div", { className: S.deviceLists }, i && /* @__PURE__ */ e.createElement(
-      O,
+    /* @__PURE__ */ c.createElement("div", { style: v.deviceSelectContainer }, /* @__PURE__ */ c.createElement("div", { style: v.preview }, /* @__PURE__ */ c.createElement("video", { style: v.previewVideo, ref: d, autoPlay: !0, muted: !0, playsInline: !0 })), /* @__PURE__ */ c.createElement("div", { style: v.deviceLists }, g && /* @__PURE__ */ c.createElement(
+      H,
       {
-        label: o,
-        devices: $,
-        selectedDevice: h,
-        onChange: a
+        style: v.audioInputDeviceList,
+        label: m,
+        devices: l,
+        selectedDevice: V,
+        onChange: O
       }
-    ), s && /* @__PURE__ */ e.createElement(
-      O,
+    ), p && /* @__PURE__ */ c.createElement(
+      H,
       {
-        label: f,
-        devices: u,
-        selectedDevice: L,
-        onChange: E
+        style: v == null ? void 0 : v.audioOutputDeviceList,
+        label: B,
+        devices: b,
+        selectedDevice: W,
+        onChange: t
       }
-    ), v && /* @__PURE__ */ e.createElement(
-      O,
+    ), L && /* @__PURE__ */ c.createElement(
+      H,
       {
-        label: k,
-        devices: d,
-        selectedDevice: g,
-        onChange: H
+        style: v == null ? void 0 : v.videoInputDeviceList,
+        label: G,
+        devices: D,
+        selectedDevice: x,
+        onChange: s
       }
     ))),
-    /* @__PURE__ */ e.createElement("div", { className: S.buttons }, /* @__PURE__ */ e.createElement(P, { className: S.cancelButton, onClick: z }, G), /* @__PURE__ */ e.createElement(P, { className: S.confirmButton, onClick: x }, j))
-  )) : /* @__PURE__ */ e.createElement(e.Fragment, null);
-}, Le = "_background_1s81f_1", we = "_modal_1s81f_13", Ne = "_deviceSelectContainer_1s81f_19", Se = "_preview_1s81f_31", Oe = "_previewVideo_1s81f_39", Me = "_previewAudio_1s81f_44", $e = "_deviceLists_1s81f_48", Ve = "_buttons_1s81f_54", je = "_chancelButton_1s81f_61", Ae = "_confirmButton_1s81f_63", ye = "_recordingButton_1s81f_67", b = {
-  background: Le,
-  modal: we,
-  deviceSelectContainer: Ne,
-  preview: Se,
-  previewVideo: Oe,
-  previewAudio: Me,
-  deviceLists: $e,
-  buttons: Ve,
-  chancelButton: je,
-  confirmButton: Ae,
-  recordingButton: ye
-}, Fe = ({
-  isSelectAudioInput: i = !0,
-  isSelectAudioOutput: s = !0,
-  isSelectVideoInput: v = !0,
-  open: c,
-  audioInputDeviceLabel: o = "audio input device",
-  audioOutputDeviceLabel: f = "audio output device",
-  videoInputDeviceLabel: k = "video input device",
-  confirmButtonText: j = "Confirm",
-  cancelButtonText: G = "Cancel",
-  recordingButtonText: A = "Recording",
-  allowOutsideClick: T = !0,
-  onDeviceSelected: y,
-  onDeviceSelectCanceled: m
+    /* @__PURE__ */ c.createElement("div", { style: v.buttons }, /* @__PURE__ */ c.createElement(J, { style: v.cancelButton, onClick: r }, A), /* @__PURE__ */ c.createElement(J, { style: v.confirmButton, onClick: q }, I))
+  )) : /* @__PURE__ */ c.createElement(c.Fragment, null);
+}, se = ({
+  isSelectAudioInput: g = !0,
+  isSelectAudioOutput: p = !0,
+  isSelectVideoInput: L = !0,
+  open: o,
+  audioInputDeviceLabel: m = "audio input device",
+  audioOutputDeviceLabel: B = "audio output device",
+  videoInputDeviceLabel: G = "video input device",
+  confirmButtonText: I = "Confirm",
+  cancelButtonText: A = "Cancel",
+  recordingButtonText: E = "Recording",
+  allowOutsideClick: e = !0,
+  style: i,
+  onDeviceSelected: $,
+  onDeviceSelectCanceled: k
 }) => {
-  const [r, h] = W(), [C, L] = p(), [D, g] = p(), [I, M] = p(), [w, B, F] = Y(), $ = Q(), u = Q(), [d, x] = p(), [z, a] = p(!1), E = q(() => r.filter((t) => t.kind === "audioinput"), [r]), H = q(() => r.filter((t) => t.kind === "audiooutput"), [r]), N = q(() => r.filter((t) => t.kind === "videoinput"), [r]);
-  V(() => {
-    c ? (navigator.mediaDevices.addEventListener("devicechange", h), h()) : navigator.mediaDevices.removeEventListener("devicechange", h);
-  }, [c]), V(() => {
-    if (N.length < 1)
-      return;
-    const t = N.find((l) => l.deviceId === (I == null ? void 0 : I.deviceId)) ?? N[0];
-    B(t);
-  }, [N]);
-  const n = () => {
-    !d || !u || (d.state === "recording" && (d.removeEventListener("dataavailable", () => {
-    }), d.removeEventListener("stop", () => {
-    }), d.stop(), d.stream.getTracks().forEach((t) => t.stop())), u.current.src = "", u.current.pause(), F());
-  }, _ = () => {
-    n(), y({
-      audioInput: C !== void 0 ? C : E[0],
-      audioOutput: D !== void 0 ? D : H[0],
-      videoInput: I !== void 0 ? I : N[0]
+  const [h, V] = y(), [M, W] = f(), [R, x] = f(), [T, Q] = f(), [F, j, d] = P(), l = Z(), b = Z(), [D, _] = f(), [n, v] = f(!1), U = K(() => h.filter((a) => a.kind === "audioinput"), [h]), q = K(() => h.filter((a) => a.kind === "audiooutput"), [h]), r = K(() => h.filter((a) => a.kind === "videoinput"), [h]), O = matchMedia("(max-width: 640px)"), t = {
+    background: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      backgroundColor: "rgba(0, 0, 0, 0.3)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    modal: {
+      background: "white",
+      padding: "16px",
+      borderRadius: "8px"
+    },
+    deviceSelectContainer: O.matches ? {
+      display: "grid",
+      gridTemplateColumns: "100%"
+    } : {
+      display: "grid",
+      gridTemplateColumns: "50% 50%"
+    },
+    preview: {
+      minWidth: "270px",
+      minHeight: "180px",
+      maxWidth: "270px",
+      marginRight: "4px"
+    },
+    previewVideo: {
+      width: "270px",
+      height: "180px"
+    },
+    previewAudio: {
+      width: "270px"
+    },
+    deviceLists: {
+      display: "grid",
+      minWidth: "270px",
+      marginLeft: "8px"
+    },
+    recordingButtons: {},
+    recordingButton: {},
+    audioInputDeviceList: {},
+    audioOutputDeviceList: {},
+    videoInputDeviceList: {},
+    buttons: {
+      paddingTop: "16px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "right"
+    },
+    cancelButton: {},
+    confirmButton: {
+      marginLeft: "4px"
+    }
+  }, [s, N] = f({
+    background: i ? { ...t.background, ...i.background } : t.background,
+    modal: i ? { ...t.modal, ...i.modal } : t.modal,
+    deviceSelectContainer: i ? { ...t.deviceSelectContainer, ...i.deviceSelectContainer } : t.deviceSelectContainer,
+    preview: i ? { ...t.preview, ...i.preview } : t.preview,
+    previewVideo: i ? { ...t.previewVideo, ...i.previewVideo } : t.previewVideo,
+    previewAudio: i ? { ...t.previewAudio, ...i.previewAudio } : t.previewAudio,
+    deviceLists: i ? { ...t.deviceLists, ...i.deviceLists } : t.deviceLists,
+    recordingButtons: i ? { ...t.recordingButtons, ...i.recordingButtons } : t.recordingButtons,
+    recordingButton: i ? { ...t.recordingButton, ...i.recordingButton } : t.recordingButton,
+    audioInputDeviceList: i ? { ...t.audioInputDeviceList, ...i.audioInputDeviceList } : t.audioInputDeviceList,
+    audioOutputDeviceList: i ? { ...t.audioOutputDeviceList, ...i.audioOutputDeviceList } : t.audioOutputDeviceList,
+    videoInputDeviceList: i ? { ...t.videoInputDeviceList, ...i.videoInputDeviceList } : t.videoInputDeviceList,
+    buttons: i ? { ...t.buttons, ...i.buttons } : t.buttons,
+    cancelButton: i ? { ...t.cancelButton, ...i.cancelButton } : t.cancelButton,
+    confirmButton: i ? { ...t.confirmButton, ...i.confirmButton } : t.confirmButton
+  });
+  w(() => {
+    N({
+      background: i ? { ...t.background, ...i.background } : t.background,
+      modal: i ? { ...t.modal, ...i.modal } : t.modal,
+      deviceSelectContainer: i ? { ...t.deviceSelectContainer, ...i.deviceSelectContainer } : t.deviceSelectContainer,
+      preview: i ? { ...t.preview, ...i.preview } : t.preview,
+      previewVideo: i ? { ...t.previewVideo, ...i.previewVideo } : t.previewVideo,
+      previewAudio: i ? { ...t.previewAudio, ...i.previewAudio } : t.previewAudio,
+      deviceLists: i ? { ...t.deviceLists, ...i.deviceLists } : t.deviceLists,
+      recordingButtons: i ? { ...t.recordingButtons, ...i.recordingButtons } : t.recordingButtons,
+      recordingButton: i ? { ...t.recordingButton, ...i.recordingButton } : t.recordingButton,
+      audioInputDeviceList: i ? { ...t.audioInputDeviceList, ...i.audioInputDeviceList } : t.audioInputDeviceList,
+      audioOutputDeviceList: i ? { ...t.audioOutputDeviceList, ...i.audioOutputDeviceList } : t.audioOutputDeviceList,
+      videoInputDeviceList: i ? { ...t.videoInputDeviceList, ...i.videoInputDeviceList } : t.videoInputDeviceList,
+      buttons: i ? { ...t.buttons, ...i.buttons } : t.buttons,
+      cancelButton: i ? { ...t.cancelButton, ...i.cancelButton } : t.cancelButton,
+      confirmButton: i ? { ...t.confirmButton, ...i.confirmButton } : t.confirmButton
+    });
+  }, [i]), w(() => {
+    const a = () => {
+      O.matches ? N({
+        ...s,
+        deviceSelectContainer: {
+          display: "grid",
+          gridTemplateColumns: "100%"
+        }
+      }) : N({
+        ...s,
+        deviceSelectContainer: {
+          display: "grid",
+          gridTemplateColumns: "50% 50%"
+        }
+      });
+    };
+    return O.addEventListener("change", a), () => {
+      O.removeEventListener("change", a);
+    };
+  }, []), w(() => {
+    o ? (navigator.mediaDevices.addEventListener("devicechange", V), V()) : navigator.mediaDevices.removeEventListener("devicechange", V);
+  }, [o]), w(() => {
+    if (r.length < 1) return;
+    const a = r.find((C) => C.deviceId === (T == null ? void 0 : T.deviceId)) ?? r[0];
+    j(a);
+  }, [r]);
+  const u = () => {
+    !D || !b || (D.state === "recording" && (D.removeEventListener("dataavailable", () => {
+    }), D.removeEventListener("stop", () => {
+    }), D.stop(), D.stream.getTracks().forEach((a) => a.stop())), b.current.src = "", b.current.pause(), d());
+  }, S = () => {
+    u(), $({
+      audioInput: M !== void 0 ? M : U[0],
+      audioOutput: R !== void 0 ? R : q[0],
+      videoInput: T !== void 0 ? T : r[0]
     });
-  }, K = () => {
-    n(), m();
-  }, Z = (t) => {
-    L(E.find((l) => l.deviceId === t));
-  }, ee = async (t) => {
-    g(H.find((l) => l.deviceId === t)), await u.current.setSinkId(t);
-  }, te = (t) => {
-    const l = N.find((R) => R.deviceId === t);
-    M(l), B(l);
+  }, Y = () => {
+    u(), k();
+  }, ee = (a) => {
+    W(U.find((C) => C.deviceId === a));
+  }, ie = async (a) => {
+    x(q.find((C) => C.deviceId === a)), await b.current.setSinkId(a);
+  }, te = (a) => {
+    const C = r.find((z) => z.deviceId === a);
+    Q(C), j(C);
   }, ne = async () => {
-    const t = await navigator.mediaDevices.getUserMedia({
-      audio: C && C.deviceId !== "" ? {
-        deviceId: C.deviceId
+    const a = await navigator.mediaDevices.getUserMedia({
+      audio: M && M.deviceId !== "" ? {
+        deviceId: M.deviceId
       } : !0,
       video: !1
     });
-    let l = [];
-    const R = new MediaRecorder(t);
-    R.addEventListener("dataavailable", (J) => {
-      l.push(J.data);
-    }), R.addEventListener("stop", async (J) => {
-      if (a(!1), !u.current)
-        return;
-      const ce = new Blob(l, { type: "audio/ogg; codecs=opus" });
-      l = [];
-      const oe = URL.createObjectURL(ce);
-      u.current.src = oe, D && D.deviceId !== "" && await u.current.setSinkId(D.deviceId);
-    }), R.start(), x(R), a(!0), setTimeout(() => {
-      R.stop(), t.getTracks().forEach((J) => J.stop());
+    let C = [];
+    const z = new MediaRecorder(a);
+    z.addEventListener("dataavailable", (X) => {
+      C.push(X.data);
+    }), z.addEventListener("stop", async (X) => {
+      if (v(!1), !b.current) return;
+      const de = new Blob(C, { type: "audio/ogg; codecs=opus" });
+      C = [];
+      const ae = URL.createObjectURL(de);
+      b.current.src = ae, R && R.deviceId !== "" && await b.current.setSinkId(R.deviceId);
+    }), z.start(), _(z), v(!0), setTimeout(() => {
+      z.stop(), a.getTracks().forEach((X) => X.stop());
     }, 5e3);
   };
-  V(() => {
-    const { current: t } = $;
-    t && (t.srcObject !== null && t.srcObject instanceof MediaStream && (t.srcObject.getTracks().forEach((l) => l.stop()), t.pause()), t.srcObject = w, t.play());
-  }, [w]);
-  const ie = () => {
-    n(), m();
+  w(() => {
+    const { current: a } = l;
+    a && (a.srcObject !== null && a.srcObject instanceof MediaStream && (a.srcObject.getTracks().forEach((C) => C.stop()), a.pause()), a.srcObject = F, a.play());
+  }, [F]);
+  const ce = () => {
+    u(), k();
   };
-  return c ? /* @__PURE__ */ e.createElement("div", { className: b.background, ...T ? { onClick: ie } : {} }, /* @__PURE__ */ e.createElement(
+  return o ? /* @__PURE__ */ c.createElement("div", { style: s.background, ...e ? { onClick: ce } : {} }, /* @__PURE__ */ c.createElement(
     "div",
     {
-      className: b.modal,
-      ...T ? {
-        onClick: (t) => t.stopPropagation()
+      style: s.modal,
+      ...e ? {
+        onClick: (a) => a.stopPropagation()
       } : {}
     },
-    /* @__PURE__ */ e.createElement("div", { className: b.deviceSelectContainer }, /* @__PURE__ */ e.createElement("div", { className: b.preview }, /* @__PURE__ */ e.createElement("video", { className: b.previewVideo, ref: $, autoPlay: !0, muted: !0, playsInline: !0 }), /* @__PURE__ */ e.createElement("audio", { className: b.previewAudio, ref: u, autoPlay: !0, playsInline: !0, controls: !0 })), /* @__PURE__ */ e.createElement("div", { className: b.deviceLists }, i && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
-      O,
+    /* @__PURE__ */ c.createElement("div", { style: s.deviceSelectContainer }, /* @__PURE__ */ c.createElement("div", { style: s.preview }, /* @__PURE__ */ c.createElement("video", { style: s.previewVideo, ref: l, autoPlay: !0, muted: !0, playsInline: !0 }), /* @__PURE__ */ c.createElement("audio", { style: s.previewAudio, ref: b, autoPlay: !0, playsInline: !0, controls: !0 })), /* @__PURE__ */ c.createElement("div", { style: s.deviceLists }, g && /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement(
+      H,
       {
-        label: o,
-        devices: E,
-        selectedDevice: C,
-        onChange: Z
+        style: s.audioInputDeviceList,
+        label: m,
+        devices: U,
+        selectedDevice: M,
+        onChange: ee
       }
-    ), /* @__PURE__ */ e.createElement("div", { className: b.buttons }, /* @__PURE__ */ e.createElement(
-      P,
+    ), /* @__PURE__ */ c.createElement("div", { style: s.recordingButtons }, /* @__PURE__ */ c.createElement(
+      J,
       {
-        className: b.recordingButton,
+        style: s.recordingButton,
         onClick: ne,
-        disabled: z
+        disabled: n
       },
-      A
-    ))), s && /* @__PURE__ */ e.createElement(
-      O,
+      E
+    ))), p && /* @__PURE__ */ c.createElement(
+      H,
       {
-        label: f,
-        devices: H,
-        selectedDevice: D,
-        onChange: ee
+        style: s == null ? void 0 : s.audioOutputDeviceList,
+        label: B,
+        devices: q,
+        selectedDevice: R,
+        onChange: ie
       }
-    ), v && /* @__PURE__ */ e.createElement(
-      O,
+    ), L && /* @__PURE__ */ c.createElement(
+      H,
       {
-        label: k,
-        devices: N,
-        selectedDevice: I,
+        style: s == null ? void 0 : s.videoInputDeviceList,
+        label: G,
+        devices: r,
+        selectedDevice: T,
         onChange: te
       }
     ))),
-    /* @__PURE__ */ e.createElement("div", { className: b.buttons }, /* @__PURE__ */ e.createElement(P, { className: b.cancelButton, onClick: K }, G), /* @__PURE__ */ e.createElement(P, { className: b.confirmButton, onClick: _ }, j))
-  )) : /* @__PURE__ */ e.createElement(e.Fragment, null);
+    /* @__PURE__ */ c.createElement("div", { style: s.buttons }, /* @__PURE__ */ c.createElement(J, { style: s.cancelButton, onClick: Y }, A), /* @__PURE__ */ c.createElement(J, { style: s.confirmButton, onClick: S }, I))
+  )) : /* @__PURE__ */ c.createElement(c.Fragment, null);
 };
 export {
-  Pe as SelectMediaDevicesModal,
-  Te as SelectMediaDevicesPreviewModal,
-  Fe as SelectMediaDevicesRecordingModal
+  ve as SelectMediaDevicesModal,
+  re as SelectMediaDevicesPreviewModal,
+  se as SelectMediaDevicesRecordingModal
 };

package/dist/react-select-media-devices-modal.umd.js

@@ -1 +1 @@
-(function(S,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],e):(S=typeof globalThis<"u"?globalThis:S||self,e(S.ReactSelectMediaDevicesModal={},S.React))})(this,function(S,e){"use strict";const T={background:"_background_1djbv_1",modal:"_modal_1djbv_13",deviceLists:"_deviceLists_1djbv_20",buttons:"_buttons_1djbv_24",chancelButton:"_chancelButton_1djbv_31",confirmButton:"_confirmButton_1djbv_33"},J=()=>{const[n,d]=e.useState([]);return[n,()=>{(async()=>{const o=await navigator.mediaDevices.getUserMedia({audio:!0,video:!0}),c=await navigator.mediaDevices.enumerateDevices();d(c),o.getTracks().forEach(p=>p.stop())})()}]},X=({name:n,value:d})=>e.createElement("option",{value:d},n),Q={deviceList:"_deviceList_1bfq1_1",select:"_select_1bfq1_5"},B=({devices:n,label:d,selectedDevice:v,onChange:o})=>{if(n===void 0)return e.createElement(e.Fragment,null);const c=E=>{o(E.target.value)},p=`device-select-${d.toLowerCase().replace(/\s/g,"-")}`;return e.createElement("div",{className:Q.deviceList},e.createElement("label",{htmlFor:p},d),e.createElement("select",{className:Q.select,id:p,onChange:c,defaultValue:v==null?void 0:v.deviceId},n.map((E,y)=>e.createElement(X,{value:E.deviceId,name:E.label,key:y}))))},Y={button:"_button_keu24_1"},V=({className:n,children:d,disabled:v,onClick:o})=>e.createElement("button",{onClick:o,disabled:v,className:[Y.button,n].filter(Boolean).join(" ")},d),Z=({isSelectAudioInput:n=!0,isSelectAudioOutput:d=!0,isSelectVideoInput:v=!0,open:o,audioInputDeviceLabel:c="audio input device",audioOutputDeviceLabel:p="audio output device",videoInputDeviceLabel:E="video input device",confirmButtonText:y="Confirm",cancelButtonText:q="Cancel",allowOutsideClick:j=!0,onDeviceSelected:F,onDeviceSelectCanceled:A})=>{const[m,r]=J(),[b,k]=e.useState(),[L,D]=e.useState(),[g,C]=e.useState(),N=m.filter(s=>s.kind==="audioinput"),$=m.filter(s=>s.kind==="audiooutput"),I=m.filter(s=>s.kind==="videoinput");e.useEffect(()=>{o?(navigator.mediaDevices.addEventListener("devicechange",r),r()):navigator.mediaDevices.removeEventListener("devicechange",r)},[o]);const U=()=>{F({audioInput:b!==void 0?b:N[0],audioOutput:L!==void 0?L:$[0],videoInput:g!==void 0?g:I[0]})},O=()=>{A()},u=s=>{k(N.find(h=>h.deviceId===s))},a=s=>{D($.find(h=>h.deviceId===s))},G=s=>{C(I.find(h=>h.deviceId===s))},x=()=>{A()};return o?e.createElement("div",{className:T.background,...j?{onClick:x}:{}},e.createElement("div",{className:T.modal,...j?{onClick:s=>s.stopPropagation()}:{}},e.createElement("div",{className:T.deviceLists},n&&e.createElement(B,{label:c,devices:N,selectedDevice:b,onChange:u}),d&&e.createElement(B,{label:p,devices:$,selectedDevice:L,onChange:a}),v&&e.createElement(B,{label:E,devices:I,selectedDevice:g,onChange:G})),e.createElement("div",{className:T.buttons},e.createElement(V,{className:T.cancelButton,onClick:O},q),e.createElement(V,{className:T.confirmButton,onClick:U},y)))):e.createElement(e.Fragment,null)},w={background:"_background_kb025_1",modal:"_modal_kb025_13",deviceSelectContainer:"_deviceSelectContainer_kb025_19",preview:"_preview_kb025_31",previewVideo:"_previewVideo_kb025_39",deviceLists:"_deviceLists_kb025_44",buttons:"_buttons_kb025_50",chancelButton:"_chancelButton_kb025_57",confirmButton:"_confirmButton_kb025_59"},W=()=>{const[n,d]=e.useState();return e.useEffect(()=>()=>{n!==void 0&&n.getTracks().forEach(c=>c.stop())},[]),[n,c=>{c.kind!=="audiooutput"&&(async()=>{const p=await navigator.mediaDevices.getUserMedia(c.kind==="audioinput"?{video:!1,audio:{deviceId:c.deviceId}}:{video:{deviceId:c.deviceId},audio:!1});d(p)})()},()=>{n!==void 0&&(n.getTracks().forEach(c=>c.stop()),d(void 0))}]},R=({isSelectAudioInput:n=!0,isSelectAudioOutput:d=!0,isSelectVideoInput:v=!0,open:o,audioInputDeviceLabel:c="audio input device",audioOutputDeviceLabel:p="audio output device",videoInputDeviceLabel:E="video input device",confirmButtonText:y="Confirm",cancelButtonText:q="Cancel",allowOutsideClick:j=!0,onDeviceSelected:F,onDeviceSelectCanceled:A})=>{const[m,r]=J(),[b,k]=e.useState(),[L,D]=e.useState(),[g,C]=e.useState(),[N,$,I]=W(),U=e.useRef(),O=e.useMemo(()=>m.filter(i=>i.kind==="audioinput"),[m]),u=e.useMemo(()=>m.filter(i=>i.kind==="audiooutput"),[m]),a=e.useMemo(()=>m.filter(i=>i.kind==="videoinput"),[m]);e.useEffect(()=>{o?(navigator.mediaDevices.addEventListener("devicechange",r),r()):navigator.mediaDevices.removeEventListener("devicechange",r)},[o]),e.useEffect(()=>{if(a.length<1)return;const i=a.find(_=>_.deviceId===(g==null?void 0:g.deviceId))??a[0];$(i)},[a]);const G=()=>{I(),F({audioInput:b!==void 0?b:O[0],audioOutput:L!==void 0?L:u[0],videoInput:g!==void 0?g:a[0]})},x=()=>{I(),A()},s=i=>{k(O.find(_=>_.deviceId===i))},h=i=>{D(u.find(_=>_.deviceId===i))},z=i=>{const _=a.find(K=>K.deviceId===i);C(_),$(_)};e.useEffect(()=>{const{current:i}=U;i&&(i.srcObject!==null&&i.srcObject instanceof MediaStream&&(i.srcObject.getTracks().forEach(_=>_.stop()),i.pause()),i.srcObject=N,i.play())},[N]);const M=()=>{I(),A()};return o?e.createElement("div",{className:w.background,...j?{onClick:M}:{}},e.createElement("div",{className:w.modal,...j?{onClick:i=>i.stopPropagation()}:{}},e.createElement("div",{className:w.deviceSelectContainer},e.createElement("div",{className:w.preview},e.createElement("video",{className:w.previewVideo,ref:U,autoPlay:!0,muted:!0,playsInline:!0})),e.createElement("div",{className:w.deviceLists},n&&e.createElement(B,{label:c,devices:O,selectedDevice:b,onChange:s}),d&&e.createElement(B,{label:p,devices:u,selectedDevice:L,onChange:h}),v&&e.createElement(B,{label:E,devices:a,selectedDevice:g,onChange:z}))),e.createElement("div",{className:w.buttons},e.createElement(V,{className:w.cancelButton,onClick:x},q),e.createElement(V,{className:w.confirmButton,onClick:G},y)))):e.createElement(e.Fragment,null)},f={background:"_background_1s81f_1",modal:"_modal_1s81f_13",deviceSelectContainer:"_deviceSelectContainer_1s81f_19",preview:"_preview_1s81f_31",previewVideo:"_previewVideo_1s81f_39",previewAudio:"_previewAudio_1s81f_44",deviceLists:"_deviceLists_1s81f_48",buttons:"_buttons_1s81f_54",chancelButton:"_chancelButton_1s81f_61",confirmButton:"_confirmButton_1s81f_63",recordingButton:"_recordingButton_1s81f_67"},ee=({isSelectAudioInput:n=!0,isSelectAudioOutput:d=!0,isSelectVideoInput:v=!0,open:o,audioInputDeviceLabel:c="audio input device",audioOutputDeviceLabel:p="audio output device",videoInputDeviceLabel:E="video input device",confirmButtonText:y="Confirm",cancelButtonText:q="Cancel",recordingButtonText:j="Recording",allowOutsideClick:F=!0,onDeviceSelected:A,onDeviceSelectCanceled:m})=>{const[r,b]=J(),[k,L]=e.useState(),[D,g]=e.useState(),[C,N]=e.useState(),[$,I,U]=W(),O=e.useRef(),u=e.useRef(),[a,G]=e.useState(),[x,s]=e.useState(!1),h=e.useMemo(()=>r.filter(t=>t.kind==="audioinput"),[r]),z=e.useMemo(()=>r.filter(t=>t.kind==="audiooutput"),[r]),M=e.useMemo(()=>r.filter(t=>t.kind==="videoinput"),[r]);e.useEffect(()=>{o?(navigator.mediaDevices.addEventListener("devicechange",b),b()):navigator.mediaDevices.removeEventListener("devicechange",b)},[o]),e.useEffect(()=>{if(M.length<1)return;const t=M.find(l=>l.deviceId===(C==null?void 0:C.deviceId))??M[0];I(t)},[M]);const i=()=>{!a||!u||(a.state==="recording"&&(a.removeEventListener("dataavailable",()=>{}),a.removeEventListener("stop",()=>{}),a.stop(),a.stream.getTracks().forEach(t=>t.stop())),u.current.src="",u.current.pause(),U())},_=()=>{i(),A({audioInput:k!==void 0?k:h[0],audioOutput:D!==void 0?D:z[0],videoInput:C!==void 0?C:M[0]})},K=()=>{i(),m()},te=t=>{L(h.find(l=>l.deviceId===t))},ie=async t=>{g(z.find(l=>l.deviceId===t)),await u.current.setSinkId(t)},ne=t=>{const l=M.find(P=>P.deviceId===t);N(l),I(l)},oe=async()=>{const t=await navigator.mediaDevices.getUserMedia({audio:k&&k.deviceId!==""?{deviceId:k.deviceId}:!0,video:!1});let l=[];const P=new MediaRecorder(t);P.addEventListener("dataavailable",H=>{l.push(H.data)}),P.addEventListener("stop",async H=>{if(s(!1),!u.current)return;const se=new Blob(l,{type:"audio/ogg; codecs=opus"});l=[];const de=URL.createObjectURL(se);u.current.src=de,D&&D.deviceId!==""&&await u.current.setSinkId(D.deviceId)}),P.start(),G(P),s(!0),setTimeout(()=>{P.stop(),t.getTracks().forEach(H=>H.stop())},5e3)};e.useEffect(()=>{const{current:t}=O;t&&(t.srcObject!==null&&t.srcObject instanceof MediaStream&&(t.srcObject.getTracks().forEach(l=>l.stop()),t.pause()),t.srcObject=$,t.play())},[$]);const ce=()=>{i(),m()};return o?e.createElement("div",{className:f.background,...F?{onClick:ce}:{}},e.createElement("div",{className:f.modal,...F?{onClick:t=>t.stopPropagation()}:{}},e.createElement("div",{className:f.deviceSelectContainer},e.createElement("div",{className:f.preview},e.createElement("video",{className:f.previewVideo,ref:O,autoPlay:!0,muted:!0,playsInline:!0}),e.createElement("audio",{className:f.previewAudio,ref:u,autoPlay:!0,playsInline:!0,controls:!0})),e.createElement("div",{className:f.deviceLists},n&&e.createElement(e.Fragment,null,e.createElement(B,{label:c,devices:h,selectedDevice:k,onChange:te}),e.createElement("div",{className:f.buttons},e.createElement(V,{className:f.recordingButton,onClick:oe,disabled:x},j))),d&&e.createElement(B,{label:p,devices:z,selectedDevice:D,onChange:ie}),v&&e.createElement(B,{label:E,devices:M,selectedDevice:C,onChange:ne}))),e.createElement("div",{className:f.buttons},e.createElement(V,{className:f.cancelButton,onClick:K},q),e.createElement(V,{className:f.confirmButton,onClick:_},y)))):e.createElement(e.Fragment,null)};S.SelectMediaDevicesModal=Z,S.SelectMediaDevicesPreviewModal=R,S.SelectMediaDevicesRecordingModal=ee,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})});
+(function(j,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],e):(j=typeof globalThis<"u"?globalThis:j||self,e(j.ReactSelectMediaDevicesModal={},j.React))})(this,function(j,e){"use strict";const X=()=>{const[g,f]=e.useState([]);return[g,()=>{(async()=>{const a=await navigator.mediaDevices.getUserMedia({audio:!0,video:!0}),m=await navigator.mediaDevices.enumerateDevices();f(m),a.getTracks().forEach(C=>C.stop())})()}]},y=({name:g,value:f,style:p})=>e.createElement("option",{style:p,value:f},g),W=({devices:g,label:f,selectedDevice:p,style:a,onChange:m})=>{if(g===void 0)return e.createElement(e.Fragment,null);const C=E=>{m(E.target.value)},G=`device-select-${f.toLowerCase().replace(/\s/g,"-")}`,L={deviceList:{paddingTop:"8px"},label:{},select:{marginTop:"4px",borderRadius:"4px",height:"32px",display:"flex",alignItems:"center",justifyContent:"right",width:"100%"},deviceItems:{}},O={deviceList:a?{...L.deviceList,...a.deviceList}:L.deviceList,label:a?{...L.label,...a.label}:L.label,select:a?{...L.select,...a.select}:L.select,deviceItems:a?{...L.deviceItems,...a.deviceItems}:L.deviceItems};return e.createElement("div",{style:O.deviceList},e.createElement("label",{style:O.label,htmlFor:G},f),e.createElement("select",{style:O.select,id:G,onChange:C,defaultValue:p==null?void 0:p.deviceId},g.map((E,i)=>e.createElement(y,{style:O.deviceItems,value:E.deviceId,name:E.label,key:i}))))},_=({children:g,disabled:f,style:p,onClick:a})=>{const m={borderRadius:"4px",height:"32px",paddingLeft:"16px",paddingRight:"16px",backgroundColor:"white",borderWidth:"1px"},C=p?{...m,...p}:m;return e.createElement("button",{onClick:a,disabled:f,style:C},g)},R=({isSelectAudioInput:g=!0,isSelectAudioOutput:f=!0,isSelectVideoInput:p=!0,open:a,audioInputDeviceLabel:m="audio input device",audioOutputDeviceLabel:C="audio output device",videoInputDeviceLabel:G="video input device",confirmButtonText:L="Confirm",cancelButtonText:O="Cancel",allowOutsideClick:E=!0,style:i,onDeviceSelected:t,onDeviceSelectCanceled:$})=>{const[B,I]=X(),[x,M]=e.useState(),[F,V]=e.useState(),[k,T]=e.useState(),Q=B.filter(r=>r.kind==="audioinput"),U=B.filter(r=>r.kind==="audiooutput"),A=B.filter(r=>r.kind==="videoinput"),c={background:{position:"fixed",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0, 0, 0, 0.3)",display:"flex",alignItems:"center",justifyContent:"center"},modal:{background:"white",padding:"16px",borderRadius:"8px",minWidth:"270px"},deviceLists:{display:"grid"},audioInputDeviceList:{},audioOutputDeviceList:{},videoInputDeviceList:{},buttons:{paddingTop:"16px",display:"flex",alignItems:"center",justifyContent:"right"},cancelButton:{},confirmButton:{marginLeft:"4px"}},[l,h]=e.useState({background:i?{...c.background,...i.background}:c.background,modal:i?{...c.modal,...i.modal}:c.modal,deviceLists:i?{...c.deviceLists,...i.deviceLists}:c.deviceLists,audioInputDeviceList:i?{...c.audioInputDeviceList,...i.audioInputDeviceList}:{},audioOutputDeviceList:i?{...c.audioOutputDeviceList,...i.audioOutputDeviceList}:{},videoInputDeviceList:i?{...c.videoInputDeviceList,...i.videoInputDeviceList}:{},buttons:i?{...c.buttons,...i.buttons}:c.buttons,cancelButton:i?{...c.cancelButton,...i.cancelButton}:c.cancelButton,confirmButton:i?{...c.confirmButton,...i.confirmButton}:c.confirmButton});e.useEffect(()=>{h({background:i?{...c.background,...i.background}:c.background,modal:i?{...c.modal,...i.modal}:c.modal,deviceLists:i?{...c.deviceLists,...i.deviceLists}:c.deviceLists,audioInputDeviceList:i?{...c.audioInputDeviceList,...i.audioInputDeviceList}:{},audioOutputDeviceList:i?{...c.audioOutputDeviceList,...i.audioOutputDeviceList}:{},videoInputDeviceList:i?{...c.videoInputDeviceList,...i.videoInputDeviceList}:{},buttons:i?{...c.buttons,...i.buttons}:c.buttons,cancelButton:i?{...c.cancelButton,...i.cancelButton}:c.cancelButton,confirmButton:i?{...c.confirmButton,...i.confirmButton}:c.confirmButton})},[i]),e.useEffect(()=>{a?(navigator.mediaDevices.addEventListener("devicechange",I),I()):navigator.mediaDevices.removeEventListener("devicechange",I)},[a]);const D=()=>{t({audioInput:x!==void 0?x:Q[0],audioOutput:F!==void 0?F:U[0],videoInput:k!==void 0?k:A[0]})},q=()=>{$()},d=r=>{M(Q.find(w=>w.deviceId===r))},v=r=>{V(U.find(w=>w.deviceId===r))},H=r=>{T(A.find(w=>w.deviceId===r))},z=()=>{$()};return a?e.createElement("div",{style:l.background,...E?{onClick:z}:{}},e.createElement("div",{style:l.modal,...E?{onClick:r=>r.stopPropagation()}:{}},e.createElement("div",{style:l.deviceLists},g&&e.createElement(W,{style:l==null?void 0:l.audioInputDeviceList,label:m,devices:Q,selectedDevice:x,onChange:d}),f&&e.createElement(W,{style:l==null?void 0:l.audioOutputDeviceList,label:C,devices:U,selectedDevice:F,onChange:v}),p&&e.createElement(W,{style:l==null?void 0:l.videoInputDeviceList,label:G,devices:A,selectedDevice:k,onChange:H})),e.createElement("div",{style:l.buttons},e.createElement(_,{style:l.cancelButton,onClick:q},O),e.createElement(_,{style:l.confirmButton,onClick:D},L)))):e.createElement(e.Fragment,null)},Z=()=>{const[g,f]=e.useState();return e.useEffect(()=>()=>{g!==void 0&&g.getTracks().forEach(m=>m.stop())},[]),[g,m=>{m.kind!=="audiooutput"&&(async()=>{const C=await navigator.mediaDevices.getUserMedia(m.kind==="audioinput"?{video:!1,audio:{deviceId:m.deviceId}}:{video:{deviceId:m.deviceId},audio:!1});f(C)})()},()=>{g!==void 0&&(g.getTracks().forEach(m=>m.stop()),f(void 0))}]},P=({isSelectAudioInput:g=!0,isSelectAudioOutput:f=!0,isSelectVideoInput:p=!0,open:a,audioInputDeviceLabel:m="audio input device",audioOutputDeviceLabel:C="audio output device",videoInputDeviceLabel:G="video input device",confirmButtonText:L="Confirm",cancelButtonText:O="Cancel",allowOutsideClick:E=!0,style:i,onDeviceSelected:t,onDeviceSelectCanceled:$})=>{const[B,I]=X(),[x,M]=e.useState(),[F,V]=e.useState(),[k,T]=e.useState(),[Q,U,A]=Z(),c=e.useRef(),l=e.useMemo(()=>B.filter(o=>o.kind==="audioinput"),[B]),h=e.useMemo(()=>B.filter(o=>o.kind==="audiooutput"),[B]),D=e.useMemo(()=>B.filter(o=>o.kind==="videoinput"),[B]),q=matchMedia("(max-width: 640px)"),d={background:{position:"fixed",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0, 0, 0, 0.3)",display:"flex",alignItems:"center",justifyContent:"center"},modal:{background:"white",padding:"16px",borderRadius:"8px"},deviceSelectContainer:q.matches?{display:"grid",gridTemplateColumns:"100%"}:{display:"grid",gridTemplateColumns:"50% 50%"},preview:{minWidth:"270px",minHeight:"180px",maxWidth:"270px",maxHeight:"180px",marginRight:"4px"},previewVideo:{width:"270px",height:"180px"},deviceLists:{display:"grid",minWidth:"270px",marginLeft:"8px"},audioInputDeviceList:{},audioOutputDeviceList:{},videoInputDeviceList:{},buttons:{paddingTop:"16px",display:"flex",alignItems:"center",justifyContent:"right"},cancelButton:{},confirmButton:{marginLeft:"4px"}},[v,H]=e.useState({background:i?{...d.background,...i.background}:d.background,modal:i?{...d.modal,...i.modal}:d.modal,deviceSelectContainer:i?{...d.deviceSelectContainer,...i.deviceSelectContainer}:d.deviceSelectContainer,preview:i?{...d.preview,...i.preview}:d.preview,previewVideo:i?{...d.previewVideo,...i.previewVideo}:d.previewVideo,deviceLists:i?{...d.deviceLists,...i.deviceLists}:d.deviceLists,audioInputDeviceList:i?{...d.audioInputDeviceList,...i.audioInputDeviceList}:d.audioInputDeviceList,audioOutputDeviceList:i?{...d.audioOutputDeviceList,...i.audioOutputDeviceList}:d.audioOutputDeviceList,videoInputDeviceList:i?{...d.videoInputDeviceList,...i.videoInputDeviceList}:d.videoInputDeviceList,buttons:i?{...d.buttons,...i.buttons}:d.buttons,cancelButton:i?{...d.cancelButton,...i.cancelButton}:d.cancelButton,confirmButton:i?{...d.confirmButton,...i.confirmButton}:d.confirmButton});e.useEffect(()=>{H({background:i?{...d.background,...i.background}:d.background,modal:i?{...d.modal,...i.modal}:d.modal,deviceSelectContainer:i?{...d.deviceSelectContainer,...i.deviceSelectContainer}:d.deviceSelectContainer,preview:i?{...d.preview,...i.preview}:d.preview,previewVideo:i?{...d.previewVideo,...i.previewVideo}:d.previewVideo,deviceLists:i?{...d.deviceLists,...i.deviceLists}:d.deviceLists,audioInputDeviceList:i?{...d.audioInputDeviceList,...i.audioInputDeviceList}:d.audioInputDeviceList,audioOutputDeviceList:i?{...d.audioOutputDeviceList,...i.audioOutputDeviceList}:d.audioOutputDeviceList,videoInputDeviceList:i?{...d.videoInputDeviceList,...i.videoInputDeviceList}:d.videoInputDeviceList,buttons:i?{...d.buttons,...i.buttons}:d.buttons,cancelButton:i?{...d.cancelButton,...i.cancelButton}:d.cancelButton,confirmButton:i?{...d.confirmButton,...i.confirmButton}:d.confirmButton})},[i]),e.useEffect(()=>{const o=()=>{q.matches?H({...v,deviceSelectContainer:{display:"grid",gridTemplateColumns:"100%"}}):H({...v,deviceSelectContainer:{display:"grid",gridTemplateColumns:"50% 50%"}})};return q.addEventListener("change",o),()=>{q.removeEventListener("change",o)}},[]),e.useEffect(()=>{a?(navigator.mediaDevices.addEventListener("devicechange",I),I()):navigator.mediaDevices.removeEventListener("devicechange",I)},[a]),e.useEffect(()=>{if(D.length<1)return;const o=D.find(S=>S.deviceId===(k==null?void 0:k.deviceId))??D[0];U(o)},[D]);const z=()=>{A(),t({audioInput:x!==void 0?x:l[0],audioOutput:F!==void 0?F:h[0],videoInput:k!==void 0?k:D[0]})},r=()=>{A(),$()},w=o=>{M(l.find(S=>S.deviceId===o))},n=o=>{V(h.find(S=>S.deviceId===o))},s=o=>{const S=D.find(Y=>Y.deviceId===o);T(S),U(S)};e.useEffect(()=>{const{current:o}=c;o&&(o.srcObject!==null&&o.srcObject instanceof MediaStream&&(o.srcObject.getTracks().forEach(S=>S.stop()),o.pause()),o.srcObject=Q,o.play())},[Q]);const K=()=>{A(),$()};return a?e.createElement("div",{style:v.background,...E?{onClick:K}:{}},e.createElement("div",{style:v.modal,...E?{onClick:o=>o.stopPropagation()}:{}},e.createElement("div",{style:v.deviceSelectContainer},e.createElement("div",{style:v.preview},e.createElement("video",{style:v.previewVideo,ref:c,autoPlay:!0,muted:!0,playsInline:!0})),e.createElement("div",{style:v.deviceLists},g&&e.createElement(W,{style:v.audioInputDeviceList,label:m,devices:l,selectedDevice:x,onChange:w}),f&&e.createElement(W,{style:v==null?void 0:v.audioOutputDeviceList,label:C,devices:h,selectedDevice:F,onChange:n}),p&&e.createElement(W,{style:v==null?void 0:v.videoInputDeviceList,label:G,devices:D,selectedDevice:k,onChange:s}))),e.createElement("div",{style:v.buttons},e.createElement(_,{style:v.cancelButton,onClick:r},O),e.createElement(_,{style:v.confirmButton,onClick:z},L)))):e.createElement(e.Fragment,null)},ee=({isSelectAudioInput:g=!0,isSelectAudioOutput:f=!0,isSelectVideoInput:p=!0,open:a,audioInputDeviceLabel:m="audio input device",audioOutputDeviceLabel:C="audio output device",videoInputDeviceLabel:G="video input device",confirmButtonText:L="Confirm",cancelButtonText:O="Cancel",recordingButtonText:E="Recording",allowOutsideClick:i=!0,style:t,onDeviceSelected:$,onDeviceSelectCanceled:B})=>{const[I,x]=X(),[M,F]=e.useState(),[V,k]=e.useState(),[T,Q]=e.useState(),[U,A,c]=Z(),l=e.useRef(),h=e.useRef(),[D,q]=e.useState(),[d,v]=e.useState(!1),H=e.useMemo(()=>I.filter(u=>u.kind==="audioinput"),[I]),z=e.useMemo(()=>I.filter(u=>u.kind==="audiooutput"),[I]),r=e.useMemo(()=>I.filter(u=>u.kind==="videoinput"),[I]),w=matchMedia("(max-width: 640px)"),n={background:{position:"fixed",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0, 0, 0, 0.3)",display:"flex",alignItems:"center",justifyContent:"center"},modal:{background:"white",padding:"16px",borderRadius:"8px"},deviceSelectContainer:w.matches?{display:"grid",gridTemplateColumns:"100%"}:{display:"grid",gridTemplateColumns:"50% 50%"},preview:{minWidth:"270px",minHeight:"180px",maxWidth:"270px",marginRight:"4px"},previewVideo:{width:"270px",height:"180px"},previewAudio:{width:"270px"},deviceLists:{display:"grid",minWidth:"270px",marginLeft:"8px"},recordingButtons:{},recordingButton:{},audioInputDeviceList:{},audioOutputDeviceList:{},videoInputDeviceList:{},buttons:{paddingTop:"16px",display:"flex",alignItems:"center",justifyContent:"right"},cancelButton:{},confirmButton:{marginLeft:"4px"}},[s,K]=e.useState({background:t?{...n.background,...t.background}:n.background,modal:t?{...n.modal,...t.modal}:n.modal,deviceSelectContainer:t?{...n.deviceSelectContainer,...t.deviceSelectContainer}:n.deviceSelectContainer,preview:t?{...n.preview,...t.preview}:n.preview,previewVideo:t?{...n.previewVideo,...t.previewVideo}:n.previewVideo,previewAudio:t?{...n.previewAudio,...t.previewAudio}:n.previewAudio,deviceLists:t?{...n.deviceLists,...t.deviceLists}:n.deviceLists,recordingButtons:t?{...n.recordingButtons,...t.recordingButtons}:n.recordingButtons,recordingButton:t?{...n.recordingButton,...t.recordingButton}:n.recordingButton,audioInputDeviceList:t?{...n.audioInputDeviceList,...t.audioInputDeviceList}:n.audioInputDeviceList,audioOutputDeviceList:t?{...n.audioOutputDeviceList,...t.audioOutputDeviceList}:n.audioOutputDeviceList,videoInputDeviceList:t?{...n.videoInputDeviceList,...t.videoInputDeviceList}:n.videoInputDeviceList,buttons:t?{...n.buttons,...t.buttons}:n.buttons,cancelButton:t?{...n.cancelButton,...t.cancelButton}:n.cancelButton,confirmButton:t?{...n.confirmButton,...t.confirmButton}:n.confirmButton});e.useEffect(()=>{K({background:t?{...n.background,...t.background}:n.background,modal:t?{...n.modal,...t.modal}:n.modal,deviceSelectContainer:t?{...n.deviceSelectContainer,...t.deviceSelectContainer}:n.deviceSelectContainer,preview:t?{...n.preview,...t.preview}:n.preview,previewVideo:t?{...n.previewVideo,...t.previewVideo}:n.previewVideo,previewAudio:t?{...n.previewAudio,...t.previewAudio}:n.previewAudio,deviceLists:t?{...n.deviceLists,...t.deviceLists}:n.deviceLists,recordingButtons:t?{...n.recordingButtons,...t.recordingButtons}:n.recordingButtons,recordingButton:t?{...n.recordingButton,...t.recordingButton}:n.recordingButton,audioInputDeviceList:t?{...n.audioInputDeviceList,...t.audioInputDeviceList}:n.audioInputDeviceList,audioOutputDeviceList:t?{...n.audioOutputDeviceList,...t.audioOutputDeviceList}:n.audioOutputDeviceList,videoInputDeviceList:t?{...n.videoInputDeviceList,...t.videoInputDeviceList}:n.videoInputDeviceList,buttons:t?{...n.buttons,...t.buttons}:n.buttons,cancelButton:t?{...n.cancelButton,...t.cancelButton}:n.cancelButton,confirmButton:t?{...n.confirmButton,...t.confirmButton}:n.confirmButton})},[t]),e.useEffect(()=>{const u=()=>{w.matches?K({...s,deviceSelectContainer:{display:"grid",gridTemplateColumns:"100%"}}):K({...s,deviceSelectContainer:{display:"grid",gridTemplateColumns:"50% 50%"}})};return w.addEventListener("change",u),()=>{w.removeEventListener("change",u)}},[]),e.useEffect(()=>{a?(navigator.mediaDevices.addEventListener("devicechange",x),x()):navigator.mediaDevices.removeEventListener("devicechange",x)},[a]),e.useEffect(()=>{if(r.length<1)return;const u=r.find(b=>b.deviceId===(T==null?void 0:T.deviceId))??r[0];A(u)},[r]);const o=()=>{!D||!h||(D.state==="recording"&&(D.removeEventListener("dataavailable",()=>{}),D.removeEventListener("stop",()=>{}),D.stop(),D.stream.getTracks().forEach(u=>u.stop())),h.current.src="",h.current.pause(),c())},S=()=>{o(),$({audioInput:M!==void 0?M:H[0],audioOutput:V!==void 0?V:z[0],videoInput:T!==void 0?T:r[0]})},Y=()=>{o(),B()},ie=u=>{F(H.find(b=>b.deviceId===u))},te=async u=>{k(z.find(b=>b.deviceId===u)),await h.current.setSinkId(u)},ne=u=>{const b=r.find(J=>J.deviceId===u);Q(b),A(b)},de=async()=>{const u=await navigator.mediaDevices.getUserMedia({audio:M&&M.deviceId!==""?{deviceId:M.deviceId}:!0,video:!1});let b=[];const J=new MediaRecorder(u);J.addEventListener("dataavailable",N=>{b.push(N.data)}),J.addEventListener("stop",async N=>{if(v(!1),!h.current)return;const ue=new Blob(b,{type:"audio/ogg; codecs=opus"});b=[];const oe=URL.createObjectURL(ue);h.current.src=oe,V&&V.deviceId!==""&&await h.current.setSinkId(V.deviceId)}),J.start(),q(J),v(!0),setTimeout(()=>{J.stop(),u.getTracks().forEach(N=>N.stop())},5e3)};e.useEffect(()=>{const{current:u}=l;u&&(u.srcObject!==null&&u.srcObject instanceof MediaStream&&(u.srcObject.getTracks().forEach(b=>b.stop()),u.pause()),u.srcObject=U,u.play())},[U]);const ce=()=>{o(),B()};return a?e.createElement("div",{style:s.background,...i?{onClick:ce}:{}},e.createElement("div",{style:s.modal,...i?{onClick:u=>u.stopPropagation()}:{}},e.createElement("div",{style:s.deviceSelectContainer},e.createElement("div",{style:s.preview},e.createElement("video",{style:s.previewVideo,ref:l,autoPlay:!0,muted:!0,playsInline:!0}),e.createElement("audio",{style:s.previewAudio,ref:h,autoPlay:!0,playsInline:!0,controls:!0})),e.createElement("div",{style:s.deviceLists},g&&e.createElement(e.Fragment,null,e.createElement(W,{style:s.audioInputDeviceList,label:m,devices:H,selectedDevice:M,onChange:ie}),e.createElement("div",{style:s.recordingButtons},e.createElement(_,{style:s.recordingButton,onClick:de,disabled:d},E))),f&&e.createElement(W,{style:s==null?void 0:s.audioOutputDeviceList,label:C,devices:z,selectedDevice:V,onChange:te}),p&&e.createElement(W,{style:s==null?void 0:s.videoInputDeviceList,label:G,devices:r,selectedDevice:T,onChange:ne}))),e.createElement("div",{style:s.buttons},e.createElement(_,{style:s.cancelButton,onClick:Y},O),e.createElement(_,{style:s.confirmButton,onClick:S},L)))):e.createElement(e.Fragment,null)};j.SelectMediaDevicesModal=R,j.SelectMediaDevicesPreviewModal=P,j.SelectMediaDevicesRecordingModal=ee,Object.defineProperty(j,Symbol.toStringTag,{value:"Module"})});

package/dist/types/SelectMediaDevicesModal/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import DeviceList from '../components/deviceList';
 interface SelectMediaDevicesModalProps {
     isSelectAudioInput?: boolean;
     isSelectAudioOutput?: boolean;
@@ -10,6 +11,17 @@ interface SelectMediaDevicesModalProps {
     confirmButtonText?: string;
     cancelButtonText?: string;
     allowOutsideClick?: boolean;
+    style?: {
+        background?: React.CSSProperties;
+        modal?: React.CSSProperties;
+        deviceLists?: React.CSSProperties;
+        audioInputDeviceList?: Parameters<typeof DeviceList>[0]['style'];
+        audioOutputDeviceList?: Parameters<typeof DeviceList>[0]['style'];
+        videoInputDeviceList?: Parameters<typeof DeviceList>[0]['style'];
+        buttons?: React.CSSProperties;
+        cancelButton?: React.CSSProperties;
+        confirmButton?: React.CSSProperties;
+    };
     onDeviceSelected: (devices: {
         audioInput?: MediaDeviceInfo;
         audioOutput?: MediaDeviceInfo;
@@ -17,5 +29,5 @@ interface SelectMediaDevicesModalProps {
     }) => void;
     onDeviceSelectCanceled: () => void;
 }
-declare const SelectMediaDevicesModal: ({ isSelectAudioInput, isSelectAudioOutput, isSelectVideoInput, open, audioInputDeviceLabel, audioOutputDeviceLabel, videoInputDeviceLabel, confirmButtonText, cancelButtonText, allowOutsideClick, onDeviceSelected, onDeviceSelectCanceled, }: SelectMediaDevicesModalProps) => React.JSX.Element;
+declare const SelectMediaDevicesModal: ({ isSelectAudioInput, isSelectAudioOutput, isSelectVideoInput, open, audioInputDeviceLabel, audioOutputDeviceLabel, videoInputDeviceLabel, confirmButtonText, cancelButtonText, allowOutsideClick, style: styleProps, onDeviceSelected, onDeviceSelectCanceled, }: SelectMediaDevicesModalProps) => React.JSX.Element;
 export default SelectMediaDevicesModal;

package/dist/types/SelectMediaDevicesPreviewModal/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import DeviceList from '../components/deviceList';
 interface SelectMediaDevicesPreviewModalProps {
     isSelectAudioInput?: boolean;
     isSelectAudioOutput?: boolean;
@@ -10,6 +11,20 @@ interface SelectMediaDevicesPreviewModalProps {
     confirmButtonText?: string;
     cancelButtonText?: string;
     allowOutsideClick?: boolean;
+    style?: {
+        background?: React.CSSProperties;
+        modal?: React.CSSProperties;
+        deviceSelectContainer?: React.CSSProperties;
+        preview?: React.CSSProperties;
+        previewVideo?: React.CSSProperties;
+        deviceLists?: React.CSSProperties;
+        audioInputDeviceList?: Parameters<typeof DeviceList>[0]['style'];
+        audioOutputDeviceList?: Parameters<typeof DeviceList>[0]['style'];
+        videoInputDeviceList?: Parameters<typeof DeviceList>[0]['style'];
+        buttons?: React.CSSProperties;
+        cancelButton?: React.CSSProperties;
+        confirmButton?: React.CSSProperties;
+    };
     onDeviceSelected: (devices: {
         audioInput?: MediaDeviceInfo;
         audioOutput?: MediaDeviceInfo;
@@ -17,5 +32,5 @@ interface SelectMediaDevicesPreviewModalProps {
     }) => void;
     onDeviceSelectCanceled: () => void;
 }
-declare const SelectMediaDevicesPreviewModal: ({ isSelectAudioInput, isSelectAudioOutput, isSelectVideoInput, open, audioInputDeviceLabel, audioOutputDeviceLabel, videoInputDeviceLabel, confirmButtonText, cancelButtonText, allowOutsideClick, onDeviceSelected, onDeviceSelectCanceled, }: SelectMediaDevicesPreviewModalProps) => React.JSX.Element;
+declare const SelectMediaDevicesPreviewModal: ({ isSelectAudioInput, isSelectAudioOutput, isSelectVideoInput, open, audioInputDeviceLabel, audioOutputDeviceLabel, videoInputDeviceLabel, confirmButtonText, cancelButtonText, allowOutsideClick, style: styleProps, onDeviceSelected, onDeviceSelectCanceled, }: SelectMediaDevicesPreviewModalProps) => React.JSX.Element;
 export default SelectMediaDevicesPreviewModal;

package/dist/types/SelectMediaDevicesRecordingModal/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import DeviceList from '../components/deviceList';
 interface SelectMediaDevicesRecordingModalProps {
     isSelectAudioInput?: boolean;
     isSelectAudioOutput?: boolean;
@@ -11,6 +12,23 @@ interface SelectMediaDevicesRecordingModalProps {
     cancelButtonText?: string;
     recordingButtonText?: string;
     allowOutsideClick?: boolean;
+    style?: {
+        background?: React.CSSProperties;
+        modal?: React.CSSProperties;
+        deviceSelectContainer?: React.CSSProperties;
+        preview?: React.CSSProperties;
+        previewVideo?: React.CSSProperties;
+        previewAudio?: React.CSSProperties;
+        deviceLists?: React.CSSProperties;
+        recordingButtons?: React.CSSProperties;
+        recordingButton?: React.CSSProperties;
+        audioInputDeviceList?: Parameters<typeof DeviceList>[0]['style'];
+        audioOutputDeviceList?: Parameters<typeof DeviceList>[0]['style'];
+        videoInputDeviceList?: Parameters<typeof DeviceList>[0]['style'];
+        buttons?: React.CSSProperties;
+        cancelButton?: React.CSSProperties;
+        confirmButton?: React.CSSProperties;
+    };
     onDeviceSelected: (devices: {
         audioInput?: MediaDeviceInfo;
         audioOutput?: MediaDeviceInfo;
@@ -18,5 +36,5 @@ interface SelectMediaDevicesRecordingModalProps {
     }) => void;
     onDeviceSelectCanceled: () => void;
 }
-declare const SelectMediaDevicesRecordingModal: ({ isSelectAudioInput, isSelectAudioOutput, isSelectVideoInput, open, audioInputDeviceLabel, audioOutputDeviceLabel, videoInputDeviceLabel, confirmButtonText, cancelButtonText, recordingButtonText, allowOutsideClick, onDeviceSelected, onDeviceSelectCanceled, }: SelectMediaDevicesRecordingModalProps) => React.JSX.Element;
+declare const SelectMediaDevicesRecordingModal: ({ isSelectAudioInput, isSelectAudioOutput, isSelectVideoInput, open, audioInputDeviceLabel, audioOutputDeviceLabel, videoInputDeviceLabel, confirmButtonText, cancelButtonText, recordingButtonText, allowOutsideClick, style: styleProps, onDeviceSelected, onDeviceSelectCanceled, }: SelectMediaDevicesRecordingModalProps) => React.JSX.Element;
 export default SelectMediaDevicesRecordingModal;

package/dist/types/components/button/index.d.ts

@@ -3,7 +3,8 @@ interface ButtonProps {
     className?: string;
     children: ReactNode;
     disabled?: boolean;
+    style?: React.CSSProperties;
     onClick: () => void;
 }
-declare const Button: ({ className, children, disabled, onClick }: ButtonProps) => React.JSX.Element;
+declare const Button: ({ children, disabled, style: styleProps, onClick }: ButtonProps) => React.JSX.Element;
 export default Button;

package/dist/types/components/deviceItem/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 interface DeviceItemProps {
     name: string;
     value: string;
+    style?: React.CSSProperties;
 }
-declare const DeviceItem: ({ name, value }: DeviceItemProps) => React.JSX.Element;
+declare const DeviceItem: ({ name, value, style }: DeviceItemProps) => React.JSX.Element;
 export default DeviceItem;

package/dist/types/components/deviceList/index.d.ts

@@ -3,7 +3,13 @@ interface DeviceListProps {
     devices: MediaDeviceInfo[];
     label: string;
     selectedDevice?: MediaDeviceInfo;
+    style?: {
+        deviceList?: React.CSSProperties;
+        label?: React.CSSProperties;
+        select?: React.CSSProperties;
+        deviceItems?: React.CSSProperties;
+    };
     onChange: (deviceId: string) => void;
 }
-declare const DeviceList: ({ devices, label, selectedDevice, onChange }: DeviceListProps) => React.JSX.Element;
+declare const DeviceList: ({ devices, label, selectedDevice, style: styleProps, onChange }: DeviceListProps) => React.JSX.Element;
 export default DeviceList;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-select-media-devices-modal",
     "description": "A React component library for select media devices",
-    "version": "1.1.2",
+    "version": "1.1.4",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -35,6 +35,7 @@
         "dev": "vite serve example",
         "build": "vite build",
         "test": "vitest run",
+        "test:watch": "vitest",
         "coverage": "vitest run --coverage",
         "test:e2e": "vitest run -c vitest.e2e.config.ts",
         "test:e2e:watch": "vitest watch -c vitest.e2e.config.ts"
@@ -45,24 +46,24 @@
         "react-router-dom": "^6.14.0"
     },
     "devDependencies": {
-        "@mdx-js/react": "^2.3.0",
+        "@mdx-js/react": "^3.0.1",
         "@playwright/test": "^1.35.1",
         "@rollup/plugin-typescript": "^11.1.1",
-        "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/react": "^14.0.0",
+        "@testing-library/jest-dom": "^6.4.6",
+        "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^14.4.3",
         "@types/node": "^20.3.1",
         "@types/react": "^18.2.14",
         "@vitejs/plugin-react": "^4.0.1",
-        "@vitest/coverage-c8": "^0.32.2",
-        "@vitest/ui": "^0.32.2",
-        "jsdom": "^22.1.0",
+        "@vitest/coverage-v8": "^1.6.0",
+        "@vitest/ui": "^1.6.0",
+        "jsdom": "^24.1.0",
         "playwright": "^1.35.1",
         "rimraf": "^5.0.1",
         "serve": "^14.2.0",
-        "vite": "^4.3.9",
-        "vite-pages-theme-doc": "^4.1.5",
-        "vite-plugin-react-pages": "^4.1.3",
-        "vitest": "^0.32.2"
+        "vite": "^5.3.1",
+        "vite-pages-theme-doc": "^5.0.0",
+        "vite-plugin-react-pages": "^5.0.0",
+        "vitest": "^1.6.0"
     }
 }

package/dist/style.css

@@ -1 +0,0 @@
-._background_1djbv_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;display:flex;align-items:center;justify-content:center}._modal_1djbv_13{background:white;padding:16px;border-radius:8px;min-width:270px}._deviceLists_1djbv_20{display:grid}._buttons_1djbv_24{padding-top:16px;display:flex;align-items:center;justify-content:right}._confirmButton_1djbv_33{margin-left:4px}._deviceList_1bfq1_1{padding-top:8px}._select_1bfq1_5{margin-top:4px;border-radius:4px;height:32px;display:flex;align-items:center;justify-content:right;width:100%}._button_keu24_1{border-radius:4px;height:32px;padding-left:16px;padding-right:16px;background-color:#fff;border-width:1px}._background_kb025_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;display:flex;align-items:center;justify-content:center}._modal_kb025_13{background:white;padding:16px;border-radius:8px}._deviceSelectContainer_kb025_19{display:grid;grid-template-columns:50% 50%}@media (max-width: 640px){._deviceSelectContainer_kb025_19{display:grid;grid-template-columns:100%}}._preview_kb025_31{min-width:270px;min-height:180px;max-width:270px;max-height:180px;margin-right:4px}._previewVideo_kb025_39{width:270px;height:180px}._deviceLists_kb025_44{display:grid;min-width:270px;margin-left:8px}._buttons_kb025_50{padding-top:16px;display:flex;align-items:center;justify-content:right}._confirmButton_kb025_59{margin-left:4px}._background_1s81f_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;display:flex;align-items:center;justify-content:center}._modal_1s81f_13{background:white;padding:16px;border-radius:8px}._deviceSelectContainer_1s81f_19{display:grid;grid-template-columns:50% 50%}@media (max-width: 640px){._deviceSelectContainer_1s81f_19{display:grid;grid-template-columns:100%}}._preview_1s81f_31{min-width:270px;min-height:180px;max-width:270px;max-height:180px;margin-right:4px}._previewVideo_1s81f_39{width:270px;height:180px}._previewAudio_1s81f_44{width:270px}._deviceLists_1s81f_48{display:grid;min-width:270px;margin-left:8px}._buttons_1s81f_54{padding-top:16px;display:flex;align-items:center;justify-content:right}._confirmButton_1s81f_63{margin-left:4px}