react-select-media-devices-modal 1.2.1 → 1.2.3

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

@@ -1,17 +1,17 @@
-import c, { useState as f, useEffect as w, useRef as Z, useMemo as K } from "react";
+import c, { useState as L, useEffect as w, useRef as Z, useMemo as K } from "react";
 const y = () => {
-  const [g, p] = f([]);
-  return [g, () => {
+  const [s, g] = L([]);
+  return [s, () => {
     (async () => {
-      const o = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), m = await navigator.mediaDevices.enumerateDevices();
-      p(m), o.getTracks().forEach((B) => B.stop());
+      const o = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), r = await navigator.mediaDevices.enumerateDevices();
+      g(r), o.getTracks().forEach((B) => B.stop());
     })();
   }];
-}, 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);
+}, ae = ({ name: s, value: g, style: f }) => /* @__PURE__ */ c.createElement("option", { style: f, value: g }, s), U = ({ devices: s, label: g, selectedDevice: f, style: o, onChange: r }) => {
+  if (s === 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 = {
+    r(E.target.value);
+  }, H = `device-select-${g.toLowerCase().replace(/\s/g, "-")}`, I = {
     deviceList: {
       paddingTop: "8px"
     },
@@ -26,39 +26,39 @@ const y = () => {
       width: "100%"
     },
     deviceItems: {}
-  }, A = {
+  }, V = {
     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 = {
+  return /* @__PURE__ */ c.createElement("div", { style: V.deviceList }, /* @__PURE__ */ c.createElement("label", { style: V.label, htmlFor: H }, g), /* @__PURE__ */ c.createElement("select", { style: V.select, id: H, onChange: B, defaultValue: f?.deviceId }, s.map((E, e) => /* @__PURE__ */ c.createElement(ae, { style: V.deviceItems, value: E.deviceId, name: E.label, key: e }))));
+}, J = ({ children: s, disabled: g, style: f, onClick: o }) => {
+  const r = {
     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);
+  }, B = f ? { ...r, ...f } : r;
+  return /* @__PURE__ */ c.createElement("button", { onClick: o, disabled: g, style: B }, s);
 }, ve = ({
-  isSelectAudioInput: g = !0,
-  isSelectAudioOutput: p = !0,
-  isSelectVideoInput: L = !0,
+  isSelectAudioInput: s = !0,
+  isSelectAudioOutput: g = !0,
+  isSelectVideoInput: f = !0,
   open: o,
-  audioInputDeviceLabel: m = "audio input device",
+  audioInputDeviceLabel: r = "audio input device",
   audioOutputDeviceLabel: B = "audio output device",
-  videoInputDeviceLabel: G = "video input device",
+  videoInputDeviceLabel: H = "video input device",
   confirmButtonText: I = "Confirm",
-  cancelButtonText: A = "Cancel",
+  cancelButtonText: V = "Cancel",
   allowOutsideClick: E = !0,
   style: e,
-  onDeviceSelected: i,
+  onDeviceSelected: t,
   onDeviceSelectCanceled: $
 }) => {
-  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 = {
+  const [k, h] = y(), [S, A] = L(), [j, M] = L(), [R, G] = L(), Q = k.filter((v) => v.kind === "audioinput"), W = k.filter((v) => v.kind === "audiooutput"), T = k.filter((v) => v.kind === "videoinput"), d = {
     background: {
       position: "fixed",
       top: 0,
@@ -90,7 +90,7 @@ const y = () => {
     confirmButton: {
       marginLeft: "4px"
     }
-  }, [l, b] = f({
+  }, [p, b] = L({
     background: e ? { ...d.background, ...e.background } : d.background,
     modal: e ? { ...d.modal, ...e.modal } : d.modal,
     deviceLists: e ? { ...d.deviceLists, ...e.deviceLists } : d.deviceLists,
@@ -117,90 +117,90 @@ const y = () => {
     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]
+    t({
+      audioInput: S !== void 0 ? S : Q[0],
+      audioOutput: j !== void 0 ? j : W[0],
+      videoInput: R !== void 0 ? R : T[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));
+  }, n = (v) => {
+    A(Q.find((x) => x.deviceId === v));
+  }, l = (v) => {
+    M(W.find((x) => x.deviceId === v));
+  }, F = (v) => {
+    G(T.find((x) => x.deviceId === v));
   }, q = () => {
     $();
   };
-  return o ? /* @__PURE__ */ c.createElement("div", { style: l.background, ...E ? { onClick: q } : {} }, /* @__PURE__ */ c.createElement(
+  return o ? /* @__PURE__ */ c.createElement("div", { style: p.background, ...E ? { onClick: q } : {} }, /* @__PURE__ */ c.createElement(
     "div",
     {
-      style: l.modal,
+      style: p.modal,
       ...E ? {
-        onClick: (r) => r.stopPropagation()
+        onClick: (v) => v.stopPropagation()
       } : {}
     },
-    /* @__PURE__ */ c.createElement("div", { style: l.deviceLists }, g && /* @__PURE__ */ c.createElement(
-      H,
+    /* @__PURE__ */ c.createElement("div", { style: p.deviceLists }, s && /* @__PURE__ */ c.createElement(
+      U,
       {
-        style: l == null ? void 0 : l.audioInputDeviceList,
-        label: m,
+        style: p?.audioInputDeviceList,
+        label: r,
         devices: Q,
-        selectedDevice: V,
+        selectedDevice: S,
         onChange: n
       }
-    ), p && /* @__PURE__ */ c.createElement(
-      H,
+    ), g && /* @__PURE__ */ c.createElement(
+      U,
       {
-        style: l == null ? void 0 : l.audioOutputDeviceList,
+        style: p?.audioOutputDeviceList,
         label: B,
-        devices: F,
-        selectedDevice: W,
-        onChange: v
+        devices: W,
+        selectedDevice: j,
+        onChange: l
       }
-    ), L && /* @__PURE__ */ c.createElement(
-      H,
+    ), f && /* @__PURE__ */ c.createElement(
+      U,
       {
-        style: l == null ? void 0 : l.videoInputDeviceList,
-        label: G,
-        devices: j,
-        selectedDevice: x,
-        onChange: U
+        style: p?.videoInputDeviceList,
+        label: H,
+        devices: T,
+        selectedDevice: R,
+        onChange: F
       }
     )),
-    /* @__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("div", { style: p.buttons }, /* @__PURE__ */ c.createElement(J, { style: p.cancelButton, onClick: _ }, V), /* @__PURE__ */ c.createElement(J, { style: p.confirmButton, onClick: D }, I))
   )) : /* @__PURE__ */ c.createElement(c.Fragment, null);
 }, P = () => {
-  const [g, p] = f();
+  const [s, g] = L();
   return w(() => () => {
-    g !== void 0 && g.getTracks().forEach((m) => m.stop());
-  }, []), [g, (m) => {
-    m.kind !== "audiooutput" && (async () => {
+    s !== void 0 && s.getTracks().forEach((r) => r.stop());
+  }, []), [s, (r) => {
+    r.kind !== "audiooutput" && (async () => {
       const B = await navigator.mediaDevices.getUserMedia(
-        m.kind === "audioinput" ? { video: !1, audio: { deviceId: m.deviceId } } : { video: { deviceId: m.deviceId }, audio: !1 }
+        r.kind === "audioinput" ? { video: !1, audio: { deviceId: r.deviceId } } : { video: { deviceId: r.deviceId }, audio: !1 }
       );
-      p(B);
+      g(B);
     })();
   }, () => {
-    g !== void 0 && (g.getTracks().forEach((m) => m.stop()), p(void 0));
+    s !== void 0 && (s.getTracks().forEach((r) => r.stop()), g(void 0));
   }];
 }, re = ({
-  isSelectAudioInput: g = !0,
-  isSelectAudioOutput: p = !0,
-  isSelectVideoInput: L = !0,
+  isSelectAudioInput: s = !0,
+  isSelectAudioOutput: g = !0,
+  isSelectVideoInput: f = !0,
   open: o,
-  audioInputDeviceLabel: m = "audio input device",
+  audioInputDeviceLabel: r = "audio input device",
   audioOutputDeviceLabel: B = "audio output device",
-  videoInputDeviceLabel: G = "video input device",
+  videoInputDeviceLabel: H = "video input device",
   confirmButtonText: I = "Confirm",
-  cancelButtonText: A = "Cancel",
+  cancelButtonText: V = "Cancel",
   allowOutsideClick: E = !0,
   style: e,
-  onDeviceSelected: i,
+  onDeviceSelected: t,
   onDeviceSelectCanceled: $
 }) => {
-  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 = {
+  const [k, h] = y(), [S, A] = L(), [j, M] = L(), [R, G] = L(), [Q, W, T] = P(), d = Z(null), p = K(() => k.filter((a) => a.kind === "audioinput"), [k]), b = K(() => k.filter((a) => a.kind === "audiooutput"), [k]), D = K(() => k.filter((a) => a.kind === "videoinput"), [k]), _ = matchMedia("(max-width: 640px)"), n = {
     background: {
       position: "fixed",
       top: 0,
@@ -253,7 +253,7 @@ const y = () => {
     confirmButton: {
       marginLeft: "4px"
     }
-  }, [v, U] = f({
+  }, [l, F] = L({
     background: e ? { ...n.background, ...e.background } : n.background,
     modal: e ? { ...n.modal, ...e.modal } : n.modal,
     deviceSelectContainer: e ? { ...n.deviceSelectContainer, ...e.deviceSelectContainer } : n.deviceSelectContainer,
@@ -268,7 +268,7 @@ const y = () => {
     confirmButton: e ? { ...n.confirmButton, ...e.confirmButton } : n.confirmButton
   });
   w(() => {
-    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,
@@ -283,109 +283,109 @@ const y = () => {
       confirmButton: e ? { ...n.confirmButton, ...e.confirmButton } : n.confirmButton
     });
   }, [e]), w(() => {
-    const u = () => {
-      _.matches ? U({
-        ...v,
+    const a = () => {
+      _.matches ? F({
+        ...l,
         deviceSelectContainer: {
           display: "grid",
           gridTemplateColumns: "100%"
         }
-      }) : U({
-        ...v,
+      }) : F({
+        ...l,
         deviceSelectContainer: {
           display: "grid",
           gridTemplateColumns: "50% 50%"
         }
       });
     };
-    return _.addEventListener("change", u), () => {
-      _.removeEventListener("change", u);
+    return _.addEventListener("change", a), () => {
+      _.removeEventListener("change", a);
     };
   }, []), 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);
+    const a = D.find((O) => O.deviceId === R?.deviceId) ?? D[0];
+    W(a);
   }, [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]
+    T(), t({
+      audioInput: S !== void 0 ? S : p[0],
+      audioOutput: j !== void 0 ? j : b[0],
+      videoInput: R !== void 0 ? R : D[0]
     });
-  }, 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 = () => {
+    T(), $();
+  }, x = (a) => {
+    A(p.find((O) => O.deviceId === a));
+  }, i = (a) => {
+    M(b.find((O) => O.deviceId === a));
+  }, m = (a) => {
+    const O = D.find((Y) => Y.deviceId === a);
+    G(O), W(O);
   };
   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());
+    const { current: a } = d;
+    a && (a.srcObject !== null && a.srcObject instanceof MediaStream && (a.srcObject.getTracks().forEach((O) => O.stop()), a.pause()), a.srcObject = Q, a.play());
   }, [Q]);
   const N = () => {
-    j(), $();
+    T(), $();
   };
-  return o ? /* @__PURE__ */ c.createElement("div", { style: v.background, ...E ? { onClick: N } : {} }, /* @__PURE__ */ c.createElement(
+  return o ? /* @__PURE__ */ c.createElement("div", { style: l.background, ...E ? { onClick: N } : {} }, /* @__PURE__ */ c.createElement(
     "div",
     {
-      style: v.modal,
+      style: l.modal,
       ...E ? {
-        onClick: (u) => u.stopPropagation()
+        onClick: (a) => a.stopPropagation()
       } : {}
     },
-    /* @__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,
+    /* @__PURE__ */ c.createElement("div", { style: l.deviceSelectContainer }, /* @__PURE__ */ c.createElement("div", { style: l.preview }, /* @__PURE__ */ c.createElement("video", { style: l.previewVideo, ref: d, autoPlay: !0, muted: !0, playsInline: !0 })), /* @__PURE__ */ c.createElement("div", { style: l.deviceLists }, s && /* @__PURE__ */ c.createElement(
+      U,
       {
-        style: v.audioInputDeviceList,
-        label: m,
-        devices: l,
-        selectedDevice: V,
-        onChange: O
+        style: l.audioInputDeviceList,
+        label: r,
+        devices: p,
+        selectedDevice: S,
+        onChange: x
       }
-    ), p && /* @__PURE__ */ c.createElement(
-      H,
+    ), g && /* @__PURE__ */ c.createElement(
+      U,
       {
-        style: v == null ? void 0 : v.audioOutputDeviceList,
+        style: l?.audioOutputDeviceList,
         label: B,
         devices: b,
-        selectedDevice: W,
-        onChange: t
+        selectedDevice: j,
+        onChange: i
       }
-    ), L && /* @__PURE__ */ c.createElement(
-      H,
+    ), f && /* @__PURE__ */ c.createElement(
+      U,
       {
-        style: v == null ? void 0 : v.videoInputDeviceList,
-        label: G,
+        style: l?.videoInputDeviceList,
+        label: H,
         devices: D,
-        selectedDevice: x,
-        onChange: s
+        selectedDevice: R,
+        onChange: 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("div", { style: l.buttons }, /* @__PURE__ */ c.createElement(J, { style: l.cancelButton, onClick: v }, V), /* @__PURE__ */ c.createElement(J, { style: l.confirmButton, onClick: q }, I))
   )) : /* @__PURE__ */ c.createElement(c.Fragment, null);
 }, se = ({
-  isSelectAudioInput: g = !0,
-  isSelectAudioOutput: p = !0,
-  isSelectVideoInput: L = !0,
+  isSelectAudioInput: s = !0,
+  isSelectAudioOutput: g = !0,
+  isSelectVideoInput: f = !0,
   open: o,
-  audioInputDeviceLabel: m = "audio input device",
+  audioInputDeviceLabel: r = "audio input device",
   audioOutputDeviceLabel: B = "audio output device",
-  videoInputDeviceLabel: G = "video input device",
+  videoInputDeviceLabel: H = "video input device",
   confirmButtonText: I = "Confirm",
-  cancelButtonText: A = "Cancel",
+  cancelButtonText: V = "Cancel",
   recordingButtonText: E = "Recording",
   allowOutsideClick: e = !0,
-  style: i,
+  style: t,
   onDeviceSelected: $,
   onDeviceSelectCanceled: k
 }) => {
-  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 = {
+  const [h, S] = y(), [A, j] = L(), [M, R] = L(), [G, Q] = L(), [W, T, d] = P(), p = Z(null), b = Z(null), [D, _] = L(), [n, l] = L(!1), F = K(() => h.filter((u) => u.kind === "audioinput"), [h]), q = K(() => h.filter((u) => u.kind === "audiooutput"), [h]), v = K(() => h.filter((u) => u.kind === "videoinput"), [h]), x = matchMedia("(max-width: 640px)"), i = {
     background: {
       position: "fixed",
       top: 0,
@@ -402,7 +402,7 @@ const y = () => {
       padding: "16px",
       borderRadius: "8px"
     },
-    deviceSelectContainer: O.matches ? {
+    deviceSelectContainer: x.matches ? {
       display: "grid",
       gridTemplateColumns: "100%"
     } : {
@@ -442,159 +442,159 @@ const y = () => {
     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
+  }, [m, N] = L({
+    background: t ? { ...i.background, ...t.background } : i.background,
+    modal: t ? { ...i.modal, ...t.modal } : i.modal,
+    deviceSelectContainer: t ? { ...i.deviceSelectContainer, ...t.deviceSelectContainer } : i.deviceSelectContainer,
+    preview: t ? { ...i.preview, ...t.preview } : i.preview,
+    previewVideo: t ? { ...i.previewVideo, ...t.previewVideo } : i.previewVideo,
+    previewAudio: t ? { ...i.previewAudio, ...t.previewAudio } : i.previewAudio,
+    deviceLists: t ? { ...i.deviceLists, ...t.deviceLists } : i.deviceLists,
+    recordingButtons: t ? { ...i.recordingButtons, ...t.recordingButtons } : i.recordingButtons,
+    recordingButton: t ? { ...i.recordingButton, ...t.recordingButton } : i.recordingButton,
+    audioInputDeviceList: t ? { ...i.audioInputDeviceList, ...t.audioInputDeviceList } : i.audioInputDeviceList,
+    audioOutputDeviceList: t ? { ...i.audioOutputDeviceList, ...t.audioOutputDeviceList } : i.audioOutputDeviceList,
+    videoInputDeviceList: t ? { ...i.videoInputDeviceList, ...t.videoInputDeviceList } : i.videoInputDeviceList,
+    buttons: t ? { ...i.buttons, ...t.buttons } : i.buttons,
+    cancelButton: t ? { ...i.cancelButton, ...t.cancelButton } : i.cancelButton,
+    confirmButton: t ? { ...i.confirmButton, ...t.confirmButton } : i.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
+      background: t ? { ...i.background, ...t.background } : i.background,
+      modal: t ? { ...i.modal, ...t.modal } : i.modal,
+      deviceSelectContainer: t ? { ...i.deviceSelectContainer, ...t.deviceSelectContainer } : i.deviceSelectContainer,
+      preview: t ? { ...i.preview, ...t.preview } : i.preview,
+      previewVideo: t ? { ...i.previewVideo, ...t.previewVideo } : i.previewVideo,
+      previewAudio: t ? { ...i.previewAudio, ...t.previewAudio } : i.previewAudio,
+      deviceLists: t ? { ...i.deviceLists, ...t.deviceLists } : i.deviceLists,
+      recordingButtons: t ? { ...i.recordingButtons, ...t.recordingButtons } : i.recordingButtons,
+      recordingButton: t ? { ...i.recordingButton, ...t.recordingButton } : i.recordingButton,
+      audioInputDeviceList: t ? { ...i.audioInputDeviceList, ...t.audioInputDeviceList } : i.audioInputDeviceList,
+      audioOutputDeviceList: t ? { ...i.audioOutputDeviceList, ...t.audioOutputDeviceList } : i.audioOutputDeviceList,
+      videoInputDeviceList: t ? { ...i.videoInputDeviceList, ...t.videoInputDeviceList } : i.videoInputDeviceList,
+      buttons: t ? { ...i.buttons, ...t.buttons } : i.buttons,
+      cancelButton: t ? { ...i.cancelButton, ...t.cancelButton } : i.cancelButton,
+      confirmButton: t ? { ...i.confirmButton, ...t.confirmButton } : i.confirmButton
     });
-  }, [i]), w(() => {
-    const a = () => {
-      O.matches ? N({
-        ...s,
+  }, [t]), w(() => {
+    const u = () => {
+      x.matches ? N({
+        ...m,
         deviceSelectContainer: {
           display: "grid",
           gridTemplateColumns: "100%"
         }
       }) : N({
-        ...s,
+        ...m,
         deviceSelectContainer: {
           display: "grid",
           gridTemplateColumns: "50% 50%"
         }
       });
     };
-    return O.addEventListener("change", a), () => {
-      O.removeEventListener("change", a);
+    return x.addEventListener("change", u), () => {
+      x.removeEventListener("change", u);
     };
   }, []), w(() => {
-    o ? (navigator.mediaDevices.addEventListener("devicechange", V), V()) : navigator.mediaDevices.removeEventListener("devicechange", V);
+    o ? (navigator.mediaDevices.addEventListener("devicechange", S), S()) : navigator.mediaDevices.removeEventListener("devicechange", S);
   }, [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 = () => {
+    if (v.length < 1) return;
+    const u = v.find((C) => C.deviceId === G?.deviceId) ?? v[0];
+    T(u);
+  }, [v]);
+  const a = () => {
     !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]
+    }), D.stop(), D.stream.getTracks().forEach((u) => u.stop())), b.current.src = "", b.current.pause(), d());
+  }, O = () => {
+    a(), $({
+      audioInput: A !== void 0 ? A : F[0],
+      audioOutput: M !== void 0 ? M : q[0],
+      videoInput: G !== void 0 ? G : v[0]
     });
   }, 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);
+    a(), k();
+  }, ee = (u) => {
+    j(F.find((C) => C.deviceId === u));
+  }, te = async (u) => {
+    R(q.find((C) => C.deviceId === u)), await b.current.setSinkId(u);
+  }, ie = (u) => {
+    const C = v.find((z) => z.deviceId === u);
+    Q(C), T(C);
   }, ne = async () => {
-    const a = await navigator.mediaDevices.getUserMedia({
-      audio: M && M.deviceId !== "" ? {
-        deviceId: M.deviceId
+    const u = await navigator.mediaDevices.getUserMedia({
+      audio: A && A.deviceId !== "" ? {
+        deviceId: A.deviceId
       } : !0,
       video: !1
     });
     let C = [];
-    const z = new MediaRecorder(a);
+    const z = new MediaRecorder(u);
     z.addEventListener("dataavailable", (X) => {
       C.push(X.data);
     }), z.addEventListener("stop", async (X) => {
-      if (v(!1), !b.current) return;
+      if (l(!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());
+      const ue = URL.createObjectURL(de);
+      b.current.src = ue, M && M.deviceId !== "" && await b.current.setSinkId(M.deviceId);
+    }), z.start(), _(z), l(!0), setTimeout(() => {
+      z.stop(), u.getTracks().forEach((X) => X.stop());
     }, 5e3);
   };
   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 { current: u } = p;
+    u && (u.srcObject !== null && u.srcObject instanceof MediaStream && (u.srcObject.getTracks().forEach((C) => C.stop()), u.pause()), u.srcObject = W, u.play());
+  }, [W]);
   const ce = () => {
-    u(), k();
+    a(), k();
   };
-  return o ? /* @__PURE__ */ c.createElement("div", { style: s.background, ...e ? { onClick: ce } : {} }, /* @__PURE__ */ c.createElement(
+  return o ? /* @__PURE__ */ c.createElement("div", { style: m.background, ...e ? { onClick: ce } : {} }, /* @__PURE__ */ c.createElement(
     "div",
     {
-      style: s.modal,
+      style: m.modal,
       ...e ? {
-        onClick: (a) => a.stopPropagation()
+        onClick: (u) => u.stopPropagation()
       } : {}
     },
-    /* @__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,
+    /* @__PURE__ */ c.createElement("div", { style: m.deviceSelectContainer }, /* @__PURE__ */ c.createElement("div", { style: m.preview }, /* @__PURE__ */ c.createElement("video", { style: m.previewVideo, ref: p, autoPlay: !0, muted: !0, playsInline: !0 }), /* @__PURE__ */ c.createElement("audio", { style: m.previewAudio, ref: b, autoPlay: !0, playsInline: !0, controls: !0 })), /* @__PURE__ */ c.createElement("div", { style: m.deviceLists }, s && /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement(
+      U,
       {
-        style: s.audioInputDeviceList,
-        label: m,
-        devices: U,
-        selectedDevice: M,
+        style: m.audioInputDeviceList,
+        label: r,
+        devices: F,
+        selectedDevice: A,
         onChange: ee
       }
-    ), /* @__PURE__ */ c.createElement("div", { style: s.recordingButtons }, /* @__PURE__ */ c.createElement(
+    ), /* @__PURE__ */ c.createElement("div", { style: m.recordingButtons }, /* @__PURE__ */ c.createElement(
       J,
       {
-        style: s.recordingButton,
+        style: m.recordingButton,
         onClick: ne,
         disabled: n
       },
       E
-    ))), p && /* @__PURE__ */ c.createElement(
-      H,
+    ))), g && /* @__PURE__ */ c.createElement(
+      U,
       {
-        style: s == null ? void 0 : s.audioOutputDeviceList,
+        style: m?.audioOutputDeviceList,
         label: B,
         devices: q,
-        selectedDevice: R,
-        onChange: ie
+        selectedDevice: M,
+        onChange: te
       }
-    ), L && /* @__PURE__ */ c.createElement(
-      H,
+    ), f && /* @__PURE__ */ c.createElement(
+      U,
       {
-        style: s == null ? void 0 : s.videoInputDeviceList,
-        label: G,
-        devices: r,
-        selectedDevice: T,
-        onChange: te
+        style: m?.videoInputDeviceList,
+        label: H,
+        devices: v,
+        selectedDevice: G,
+        onChange: ie
       }
     ))),
-    /* @__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("div", { style: m.buttons }, /* @__PURE__ */ c.createElement(J, { style: m.cancelButton, onClick: Y }, V), /* @__PURE__ */ c.createElement(J, { style: m.confirmButton, onClick: O }, I))
   )) : /* @__PURE__ */ c.createElement(c.Fragment, null);
 };
 export {

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

@@ -1 +1 @@
-(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"})});
+(function(A,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],e):(A=typeof globalThis<"u"?globalThis:A||self,e(A.ReactSelectMediaDevicesModal={},A.React))})(this,function(A,e){"use strict";const X=()=>{const[s,g]=e.useState([]);return[s,()=>{(async()=>{const a=await navigator.mediaDevices.getUserMedia({audio:!0,video:!0}),r=await navigator.mediaDevices.enumerateDevices();g(r),a.getTracks().forEach(C=>C.stop())})()}]},y=({name:s,value:g,style:D})=>e.createElement("option",{style:D,value:g},s),j=({devices:s,label:g,selectedDevice:D,style:a,onChange:r})=>{if(s===void 0)return e.createElement(e.Fragment,null);const C=E=>{r(E.target.value)},H=`device-select-${g.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:{}},x={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:x.deviceList},e.createElement("label",{style:x.label,htmlFor:H},g),e.createElement("select",{style:x.select,id:H,onChange:C,defaultValue:D?.deviceId},s.map((E,i)=>e.createElement(y,{style:x.deviceItems,value:E.deviceId,name:E.label,key:i}))))},_=({children:s,disabled:g,style:D,onClick:a})=>{const r={borderRadius:"4px",height:"32px",paddingLeft:"16px",paddingRight:"16px",backgroundColor:"white",borderWidth:"1px"},C=D?{...r,...D}:r;return e.createElement("button",{onClick:a,disabled:g,style:C},s)},R=({isSelectAudioInput:s=!0,isSelectAudioOutput:g=!0,isSelectVideoInput:D=!0,open:a,audioInputDeviceLabel:r="audio input device",audioOutputDeviceLabel:C="audio output device",videoInputDeviceLabel:H="video input device",confirmButtonText:L="Confirm",cancelButtonText:x="Cancel",allowOutsideClick:E=!0,style:i,onDeviceSelected:t,onDeviceSelectCanceled:$})=>{const[B,I]=X(),[S,O]=e.useState(),[W,M]=e.useState(),[V,G]=e.useState(),Q=B.filter(v=>v.kind==="audioinput"),F=B.filter(v=>v.kind==="audiooutput"),T=B.filter(v=>v.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"}},[f,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 p=()=>{t({audioInput:S!==void 0?S:Q[0],audioOutput:W!==void 0?W:F[0],videoInput:V!==void 0?V:T[0]})},q=()=>{$()},d=v=>{O(Q.find(k=>k.deviceId===v))},l=v=>{M(F.find(k=>k.deviceId===v))},U=v=>{G(T.find(k=>k.deviceId===v))},z=()=>{$()};return a?e.createElement("div",{style:f.background,...E?{onClick:z}:{}},e.createElement("div",{style:f.modal,...E?{onClick:v=>v.stopPropagation()}:{}},e.createElement("div",{style:f.deviceLists},s&&e.createElement(j,{style:f?.audioInputDeviceList,label:r,devices:Q,selectedDevice:S,onChange:d}),g&&e.createElement(j,{style:f?.audioOutputDeviceList,label:C,devices:F,selectedDevice:W,onChange:l}),D&&e.createElement(j,{style:f?.videoInputDeviceList,label:H,devices:T,selectedDevice:V,onChange:U})),e.createElement("div",{style:f.buttons},e.createElement(_,{style:f.cancelButton,onClick:q},x),e.createElement(_,{style:f.confirmButton,onClick:p},L)))):e.createElement(e.Fragment,null)},Z=()=>{const[s,g]=e.useState();return e.useEffect(()=>()=>{s!==void 0&&s.getTracks().forEach(r=>r.stop())},[]),[s,r=>{r.kind!=="audiooutput"&&(async()=>{const C=await navigator.mediaDevices.getUserMedia(r.kind==="audioinput"?{video:!1,audio:{deviceId:r.deviceId}}:{video:{deviceId:r.deviceId},audio:!1});g(C)})()},()=>{s!==void 0&&(s.getTracks().forEach(r=>r.stop()),g(void 0))}]},P=({isSelectAudioInput:s=!0,isSelectAudioOutput:g=!0,isSelectVideoInput:D=!0,open:a,audioInputDeviceLabel:r="audio input device",audioOutputDeviceLabel:C="audio output device",videoInputDeviceLabel:H="video input device",confirmButtonText:L="Confirm",cancelButtonText:x="Cancel",allowOutsideClick:E=!0,style:i,onDeviceSelected:t,onDeviceSelectCanceled:$})=>{const[B,I]=X(),[S,O]=e.useState(),[W,M]=e.useState(),[V,G]=e.useState(),[Q,F,T]=Z(),c=e.useRef(null),f=e.useMemo(()=>B.filter(o=>o.kind==="audioinput"),[B]),h=e.useMemo(()=>B.filter(o=>o.kind==="audiooutput"),[B]),p=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"}},[l,U]=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(()=>{U({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?U({...l,deviceSelectContainer:{display:"grid",gridTemplateColumns:"100%"}}):U({...l,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(p.length<1)return;const o=p.find(w=>w.deviceId===V?.deviceId)??p[0];F(o)},[p]);const z=()=>{T(),t({audioInput:S!==void 0?S:f[0],audioOutput:W!==void 0?W:h[0],videoInput:V!==void 0?V:p[0]})},v=()=>{T(),$()},k=o=>{O(f.find(w=>w.deviceId===o))},n=o=>{M(h.find(w=>w.deviceId===o))},m=o=>{const w=p.find(Y=>Y.deviceId===o);G(w),F(w)};e.useEffect(()=>{const{current:o}=c;o&&(o.srcObject!==null&&o.srcObject instanceof MediaStream&&(o.srcObject.getTracks().forEach(w=>w.stop()),o.pause()),o.srcObject=Q,o.play())},[Q]);const K=()=>{T(),$()};return a?e.createElement("div",{style:l.background,...E?{onClick:K}:{}},e.createElement("div",{style:l.modal,...E?{onClick:o=>o.stopPropagation()}:{}},e.createElement("div",{style:l.deviceSelectContainer},e.createElement("div",{style:l.preview},e.createElement("video",{style:l.previewVideo,ref:c,autoPlay:!0,muted:!0,playsInline:!0})),e.createElement("div",{style:l.deviceLists},s&&e.createElement(j,{style:l.audioInputDeviceList,label:r,devices:f,selectedDevice:S,onChange:k}),g&&e.createElement(j,{style:l?.audioOutputDeviceList,label:C,devices:h,selectedDevice:W,onChange:n}),D&&e.createElement(j,{style:l?.videoInputDeviceList,label:H,devices:p,selectedDevice:V,onChange:m}))),e.createElement("div",{style:l.buttons},e.createElement(_,{style:l.cancelButton,onClick:v},x),e.createElement(_,{style:l.confirmButton,onClick:z},L)))):e.createElement(e.Fragment,null)},ee=({isSelectAudioInput:s=!0,isSelectAudioOutput:g=!0,isSelectVideoInput:D=!0,open:a,audioInputDeviceLabel:r="audio input device",audioOutputDeviceLabel:C="audio output device",videoInputDeviceLabel:H="video input device",confirmButtonText:L="Confirm",cancelButtonText:x="Cancel",recordingButtonText:E="Recording",allowOutsideClick:i=!0,style:t,onDeviceSelected:$,onDeviceSelectCanceled:B})=>{const[I,S]=X(),[O,W]=e.useState(),[M,V]=e.useState(),[G,Q]=e.useState(),[F,T,c]=Z(),f=e.useRef(null),h=e.useRef(null),[p,q]=e.useState(),[d,l]=e.useState(!1),U=e.useMemo(()=>I.filter(u=>u.kind==="audioinput"),[I]),z=e.useMemo(()=>I.filter(u=>u.kind==="audiooutput"),[I]),v=e.useMemo(()=>I.filter(u=>u.kind==="videoinput"),[I]),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:k.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"}},[m,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=()=>{k.matches?K({...m,deviceSelectContainer:{display:"grid",gridTemplateColumns:"100%"}}):K({...m,deviceSelectContainer:{display:"grid",gridTemplateColumns:"50% 50%"}})};return k.addEventListener("change",u),()=>{k.removeEventListener("change",u)}},[]),e.useEffect(()=>{a?(navigator.mediaDevices.addEventListener("devicechange",S),S()):navigator.mediaDevices.removeEventListener("devicechange",S)},[a]),e.useEffect(()=>{if(v.length<1)return;const u=v.find(b=>b.deviceId===G?.deviceId)??v[0];T(u)},[v]);const o=()=>{!p||!h||(p.state==="recording"&&(p.removeEventListener("dataavailable",()=>{}),p.removeEventListener("stop",()=>{}),p.stop(),p.stream.getTracks().forEach(u=>u.stop())),h.current.src="",h.current.pause(),c())},w=()=>{o(),$({audioInput:O!==void 0?O:U[0],audioOutput:M!==void 0?M:z[0],videoInput:G!==void 0?G:v[0]})},Y=()=>{o(),B()},ie=u=>{W(U.find(b=>b.deviceId===u))},te=async u=>{V(z.find(b=>b.deviceId===u)),await h.current.setSinkId(u)},ne=u=>{const b=v.find(J=>J.deviceId===u);Q(b),T(b)},de=async()=>{const u=await navigator.mediaDevices.getUserMedia({audio:O&&O.deviceId!==""?{deviceId:O.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(l(!1),!h.current)return;const ue=new Blob(b,{type:"audio/ogg; codecs=opus"});b=[];const oe=URL.createObjectURL(ue);h.current.src=oe,M&&M.deviceId!==""&&await h.current.setSinkId(M.deviceId)}),J.start(),q(J),l(!0),setTimeout(()=>{J.stop(),u.getTracks().forEach(N=>N.stop())},5e3)};e.useEffect(()=>{const{current:u}=f;u&&(u.srcObject!==null&&u.srcObject instanceof MediaStream&&(u.srcObject.getTracks().forEach(b=>b.stop()),u.pause()),u.srcObject=F,u.play())},[F]);const ce=()=>{o(),B()};return a?e.createElement("div",{style:m.background,...i?{onClick:ce}:{}},e.createElement("div",{style:m.modal,...i?{onClick:u=>u.stopPropagation()}:{}},e.createElement("div",{style:m.deviceSelectContainer},e.createElement("div",{style:m.preview},e.createElement("video",{style:m.previewVideo,ref:f,autoPlay:!0,muted:!0,playsInline:!0}),e.createElement("audio",{style:m.previewAudio,ref:h,autoPlay:!0,playsInline:!0,controls:!0})),e.createElement("div",{style:m.deviceLists},s&&e.createElement(e.Fragment,null,e.createElement(j,{style:m.audioInputDeviceList,label:r,devices:U,selectedDevice:O,onChange:ie}),e.createElement("div",{style:m.recordingButtons},e.createElement(_,{style:m.recordingButton,onClick:de,disabled:d},E))),g&&e.createElement(j,{style:m?.audioOutputDeviceList,label:C,devices:z,selectedDevice:M,onChange:te}),D&&e.createElement(j,{style:m?.videoInputDeviceList,label:H,devices:v,selectedDevice:G,onChange:ne}))),e.createElement("div",{style:m.buttons},e.createElement(_,{style:m.cancelButton,onClick:Y},x),e.createElement(_,{style:m.confirmButton,onClick:w},L)))):e.createElement(e.Fragment,null)};A.SelectMediaDevicesModal=R,A.SelectMediaDevicesPreviewModal=P,A.SelectMediaDevicesRecordingModal=ee,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})});

package/dist/types/hooks/useGetMediaStream.d.ts

@@ -1 +1 @@
-export declare const useGetMediaStream: () => [MediaStream, (device: MediaDeviceInfo) => void, () => void];
+export declare const useGetMediaStream: () => [MediaStream | undefined, (device: MediaDeviceInfo) => void, () => void];

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-select-media-devices-modal",
     "description": "A React component library for select media devices",
-    "version": "1.2.1",
+    "version": "1.2.3",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -41,29 +41,27 @@
         "test:e2e:watch": "vitest watch -c vitest.e2e.config.ts"
     },
     "dependencies": {
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-router-dom": "^6.14.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "react-router-dom": "^7.0.1"
     },
     "devDependencies": {
-        "@mdx-js/react": "^3.0.1",
         "@playwright/test": "^1.35.1",
-        "@rollup/plugin-typescript": "^11.1.1",
+        "@rollup/plugin-typescript": "^12.1.0",
         "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^14.4.3",
-        "@types/node": "^22.0.0",
-        "@types/react": "^18.2.14",
-        "@vitejs/plugin-react": "^4.0.1",
-        "@vitest/coverage-v8": "^2.0.0",
-        "@vitest/ui": "^2.0.0",
-        "jsdom": "^25.0.0",
+        "@types/node": "^24.1.0",
+        "@types/react": "^19.0.1",
+        "@vitejs/plugin-react": "^5.0.2",
+        "@vitest/coverage-v8": "^4.0.6",
+        "@vitest/ui": "^4.0.6",
+        "jsdom": "^27.0.0",
         "playwright": "^1.35.1",
-        "rimraf": "^6.0.1",
-        "serve": "^14.2.0",
-        "vite": "^5.3.1",
-        "vite-pages-theme-doc": "^5.0.0",
-        "vite-plugin-react-pages": "^5.0.0",
-        "vitest": "^2.0.0"
+        "vite": "^7.0.6",
+        "vitest": "^4.0.6"
+    },
+    "peerDependencies": {
+        "tslib": "^2.8.1"
     }
 }