react-select-media-devices-modal 1.1.0 → 1.1.1

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

@@ -1,38 +1,38 @@
-import e, { useState as m, useEffect as V, useRef as K, useMemo as q } from "react";
-const oe = "_background_1djbv_1", ae = "_modal_1djbv_13", se = "_deviceLists_1djbv_20", de = "_buttons_1djbv_24", re = "_chancelButton_1djbv_31", ue = "_confirmButton_1djbv_33", U = {
-  background: oe,
-  modal: ae,
-  deviceLists: se,
-  buttons: de,
-  chancelButton: re,
-  confirmButton: ue
-}, Q = () => {
-  const [o, a] = m([]);
-  return [o, () => {
+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, () => {
     (async () => {
-      const i = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), _ = await navigator.mediaDevices.enumerateDevices();
-      a(_), i.getTracks().forEach((E) => E.stop());
+      const c = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), o = await navigator.mediaDevices.enumerateDevices();
+      s(o), c.getTracks().forEach((f) => f.stop());
     })();
   }];
-}, le = ({ name: o, value: a }) => /* @__PURE__ */ e.createElement("option", { value: a }, o), ve = "_deviceList_1bfq1_1", me = "_select_1bfq1_5", W = {
-  deviceList: ve,
-  select: me
-}, S = ({ devices: o, label: a, selectedDevice: l, onChange: i }) => {
-  if (o === void 0)
+}, 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 _ = (k) => {
-    i(k.target.value);
-  }, E = `device-select-${a.toLowerCase().replace(/\s/g, "-")}`;
-  return /* @__PURE__ */ e.createElement("div", { className: W.deviceList }, /* @__PURE__ */ e.createElement("label", { htmlFor: E }, a), /* @__PURE__ */ e.createElement("select", { className: W.select, id: E, onChange: _, defaultValue: l == null ? void 0 : l.deviceId }, o.map((k, j) => /* @__PURE__ */ e.createElement(le, { value: k.deviceId, name: k.label, key: j }))));
-}, pe = "_button_keu24_1", fe = {
-  button: pe
-}, P = ({ className: o, children: a, disabled: l, onClick: i }) => /* @__PURE__ */ e.createElement("button", { onClick: i, disabled: l, className: [fe.button, o].filter(Boolean).join(" ") }, a), Re = ({
-  isSelectAudioInput: o = !0,
-  isSelectAudioOutput: a = !0,
-  isSelectVideoInput: l = !0,
-  open: i,
-  audioInputDeviceLabel: _ = "audio input device",
-  audioOutputDeviceLabel: E = "audio output device",
+  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",
@@ -40,91 +40,93 @@ const oe = "_background_1djbv_1", ae = "_modal_1djbv_13", se = "_deviceLists_1dj
   onDeviceSelected: T,
   onDeviceSelectCanceled: y
 }) => {
-  const [v, d] = Q(), [b, C] = m(), [B, D] = m(), [p, I] = m(), $ = v.filter((c) => c.kind === "audioinput"), L = v.filter((c) => c.kind === "audiooutput"), w = v.filter((c) => c.kind === "videoinput");
+  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(() => {
-    i ? (navigator.mediaDevices.addEventListener("devicechange", d), d()) : navigator.mediaDevices.removeEventListener("devicechange", d);
-  }, [i]);
-  const M = () => {
+    c ? (navigator.mediaDevices.addEventListener("devicechange", r), r()) : navigator.mediaDevices.removeEventListener("devicechange", r);
+  }, [c]);
+  const F = () => {
     T({
-      audioInput: b !== void 0 ? b : $[0],
-      audioOutput: B !== void 0 ? B : L[0],
-      videoInput: p !== void 0 ? p : w[0]
+      audioInput: h !== void 0 ? h : M[0],
+      audioOutput: L !== void 0 ? L : w[0],
+      videoInput: g !== void 0 ? g : B[0]
     });
-  }, r = () => {
+  }, $ = () => {
     y();
-  }, s = (c) => {
-    C($.find((h) => h.deviceId === c));
-  }, x = (c) => {
-    D(L.find((h) => h.deviceId === c));
-  }, z = (c) => {
-    I(w.find((h) => h.deviceId === c));
-  }, F = () => {
+  }, 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();
   };
-  return i ? /* @__PURE__ */ e.createElement("div", { className: U.background, ...A ? { onClick: F } : {} }, /* @__PURE__ */ e.createElement(
+  return c ? /* @__PURE__ */ e.createElement("div", { className: U.background, ...A ? { onClick: z } : {} }, /* @__PURE__ */ e.createElement(
     "div",
     {
       className: U.modal,
       ...A ? {
-        onClick: (c) => c.stopPropagation()
+        onClick: (a) => a.stopPropagation()
       } : {}
     },
-    /* @__PURE__ */ e.createElement("div", { className: U.deviceLists }, o && /* @__PURE__ */ e.createElement(
-      S,
+    /* @__PURE__ */ e.createElement("div", { className: U.deviceLists }, i && /* @__PURE__ */ e.createElement(
+      O,
       {
-        label: _,
-        devices: $,
-        selectedDevice: b,
-        onChange: s
+        label: o,
+        devices: M,
+        selectedDevice: h,
+        onChange: u
       }
-    ), a && /* @__PURE__ */ e.createElement(
-      S,
+    ), s && /* @__PURE__ */ e.createElement(
+      O,
       {
-        label: E,
-        devices: L,
-        selectedDevice: B,
-        onChange: x
+        label: f,
+        devices: w,
+        selectedDevice: L,
+        onChange: d
       }
-    ), l && /* @__PURE__ */ e.createElement(
-      S,
+    ), v && /* @__PURE__ */ e.createElement(
+      O,
       {
         label: k,
-        devices: w,
-        selectedDevice: p,
-        onChange: z
+        devices: B,
+        selectedDevice: g,
+        onChange: x
       }
     )),
-    /* @__PURE__ */ e.createElement("div", { className: U.buttons }, /* @__PURE__ */ e.createElement(P, { className: U.cancelButton, onClick: r }, G), /* @__PURE__ */ e.createElement(P, { className: U.confirmButton, onClick: M }, j))
+    /* @__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);
-}, ge = "_background_kb025_1", _e = "_modal_kb025_13", be = "_deviceSelectContainer_kb025_19", he = "_preview_kb025_31", Ee = "_previewVideo_kb025_39", ke = "_deviceLists_kb025_44", Ce = "_buttons_kb025_50", De = "_chancelButton_kb025_57", Ie = "_confirmButton_kb025_59", O = {
-  background: ge,
-  modal: _e,
-  deviceSelectContainer: be,
-  preview: he,
-  previewVideo: Ee,
-  deviceLists: ke,
-  buttons: Ce,
-  chancelButton: De,
-  confirmButton: Ie
-}, X = () => {
-  const [o, a] = m();
+}, _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(() => () => {
-    o !== void 0 && o.getTracks().forEach((i) => i.stop());
-  }, []), [o, (i) => {
-    i.kind !== "audiooutput" && (async () => {
-      const _ = await navigator.mediaDevices.getUserMedia(
-        i.kind === "audioinput" ? { video: !1, audio: { deviceId: i.deviceId } } : { video: { deviceId: i.deviceId }, audio: !1 }
+    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 }
       );
-      a(_);
+      s(f);
     })();
+  }, () => {
+    i !== void 0 && (i.getTracks().forEach((o) => o.stop()), s(void 0));
   }];
-}, Pe = ({
-  isSelectAudioInput: o = !0,
-  isSelectAudioOutput: a = !0,
-  isSelectVideoInput: l = !0,
-  open: i,
-  audioInputDeviceLabel: _ = "audio input device",
-  audioOutputDeviceLabel: E = "audio output device",
+}, 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",
@@ -132,203 +134,203 @@ const oe = "_background_1djbv_1", ae = "_modal_1djbv_13", se = "_deviceLists_1dj
   onDeviceSelected: T,
   onDeviceSelectCanceled: y
 }) => {
-  const [v, d] = Q(), [b, C] = m(), [B, D] = m(), [p, I] = m(), [$, L] = X(), w = K(), M = q(() => v.filter((n) => n.kind === "audioinput"), [v]), r = q(() => v.filter((n) => n.kind === "audiooutput"), [v]), s = q(() => v.filter((n) => n.kind === "videoinput"), [v]);
+  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(() => {
-    i ? (navigator.mediaDevices.addEventListener("devicechange", d), d()) : navigator.mediaDevices.removeEventListener("devicechange", d);
-  }, [i]), V(() => {
-    if (s.length < 1)
+    c ? (navigator.mediaDevices.addEventListener("devicechange", r), r()) : navigator.mediaDevices.removeEventListener("devicechange", r);
+  }, [c]), V(() => {
+    if (d.length < 1)
       return;
-    const n = s.find((f) => f.deviceId === (p == null ? void 0 : p.deviceId)) ?? s[0];
-    L(n);
-  }, [s]);
+    const n = d.find((_) => _.deviceId === (g == null ? void 0 : g.deviceId)) ?? d[0];
+    w(n);
+  }, [d]);
   const x = () => {
-    T({
-      audioInput: b !== void 0 ? b : M[0],
-      audioOutput: B !== void 0 ? B : r[0],
-      videoInput: p !== void 0 ? p : s[0]
+    B(), T({
+      audioInput: h !== void 0 ? h : $[0],
+      audioOutput: L !== void 0 ? L : u[0],
+      videoInput: g !== void 0 ? g : d[0]
     });
   }, z = () => {
-    y();
-  }, F = (n) => {
-    C(M.find((f) => f.deviceId === n));
-  }, c = (n) => {
-    D(r.find((f) => f.deviceId === n));
-  }, h = (n) => {
-    const f = s.find((J) => J.deviceId === n);
-    I(f), L(f);
+    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(_);
   };
   V(() => {
-    const { current: n } = w;
-    n !== void 0 && (n.srcObject !== null && n.srcObject instanceof MediaStream && (n.srcObject.getTracks().forEach((f) => f.stop()), n.pause()), n.srcObject = $, n.play());
-  }, [$]);
+    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]);
   const N = () => {
-    y();
+    B(), y();
   };
-  return i ? /* @__PURE__ */ e.createElement("div", { className: O.background, ...A ? { onClick: N } : {} }, /* @__PURE__ */ e.createElement(
+  return c ? /* @__PURE__ */ e.createElement("div", { className: S.background, ...A ? { onClick: N } : {} }, /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: O.modal,
+      className: S.modal,
       ...A ? {
         onClick: (n) => n.stopPropagation()
       } : {}
     },
-    /* @__PURE__ */ e.createElement("div", { className: O.deviceSelectContainer }, /* @__PURE__ */ e.createElement("div", { className: O.preview }, /* @__PURE__ */ e.createElement("video", { className: O.previewVideo, ref: w, autoPlay: !0, muted: !0, playsInline: !0 })), /* @__PURE__ */ e.createElement("div", { className: O.deviceLists }, o && /* @__PURE__ */ e.createElement(
-      S,
+    /* @__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,
       {
-        label: _,
-        devices: M,
-        selectedDevice: b,
-        onChange: F
+        label: o,
+        devices: $,
+        selectedDevice: h,
+        onChange: a
       }
-    ), a && /* @__PURE__ */ e.createElement(
-      S,
+    ), s && /* @__PURE__ */ e.createElement(
+      O,
       {
-        label: E,
-        devices: r,
-        selectedDevice: B,
-        onChange: c
+        label: f,
+        devices: u,
+        selectedDevice: L,
+        onChange: E
       }
-    ), l && /* @__PURE__ */ e.createElement(
-      S,
+    ), v && /* @__PURE__ */ e.createElement(
+      O,
       {
         label: k,
-        devices: s,
-        selectedDevice: p,
-        onChange: h
+        devices: d,
+        selectedDevice: g,
+        onChange: H
       }
     ))),
-    /* @__PURE__ */ e.createElement("div", { className: O.buttons }, /* @__PURE__ */ e.createElement(P, { className: O.cancelButton, onClick: z }, G), /* @__PURE__ */ e.createElement(P, { className: O.confirmButton, onClick: x }, j))
+    /* @__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);
-}, Be = "_background_1s81f_1", Le = "_modal_1s81f_13", we = "_deviceSelectContainer_1s81f_19", Ne = "_preview_1s81f_31", Oe = "_previewVideo_1s81f_39", Se = "_previewAudio_1s81f_44", $e = "_deviceLists_1s81f_48", Me = "_buttons_1s81f_54", Ve = "_chancelButton_1s81f_61", je = "_confirmButton_1s81f_63", Ae = "_recordingButton_1s81f_67", g = {
-  background: Be,
-  modal: Le,
-  deviceSelectContainer: we,
-  preview: Ne,
+}, 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: Se,
+  previewAudio: Me,
   deviceLists: $e,
-  buttons: Me,
-  chancelButton: Ve,
-  confirmButton: je,
-  recordingButton: Ae
-}, Te = ({
-  isSelectAudioInput: o = !0,
-  isSelectAudioOutput: a = !0,
-  isSelectVideoInput: l = !0,
-  open: i,
-  audioInputDeviceLabel: _ = "audio input device",
-  audioOutputDeviceLabel: E = "audio output device",
+  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: v
+  onDeviceSelectCanceled: m
 }) => {
-  const [d, b] = Q(), [C, B] = m(), [D, p] = m(), [I, $] = m(), [L, w] = X(), M = K(), r = K(), [s, x] = m(), [z, F] = m(!1), c = q(() => d.filter((t) => t.kind === "audioinput"), [d]), h = q(() => d.filter((t) => t.kind === "audiooutput"), [d]), N = q(() => d.filter((t) => t.kind === "videoinput"), [d]);
+  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(() => {
-    i ? (navigator.mediaDevices.addEventListener("devicechange", b), b()) : navigator.mediaDevices.removeEventListener("devicechange", b);
-  }, [i]), V(() => {
+    c ? (navigator.mediaDevices.addEventListener("devicechange", h), h()) : navigator.mediaDevices.removeEventListener("devicechange", h);
+  }, [c]), V(() => {
     if (N.length < 1)
       return;
-    const t = N.find((u) => u.deviceId === (I == null ? void 0 : I.deviceId)) ?? N[0];
-    w(t);
+    const t = N.find((l) => l.deviceId === (I == null ? void 0 : I.deviceId)) ?? N[0];
+    B(t);
   }, [N]);
   const n = () => {
-    !s || !r || (s.state === "recording" && (s.removeEventListener("dataavailable", () => {
-    }), s.removeEventListener("stop", () => {
-    }), s.stop(), s.stream.getTracks().forEach((t) => t.stop())), r.current.src = "", r.current.pause());
-  }, f = () => {
+    !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 : c[0],
-      audioOutput: D !== void 0 ? D : h[0],
+      audioInput: C !== void 0 ? C : E[0],
+      audioOutput: D !== void 0 ? D : H[0],
       videoInput: I !== void 0 ? I : N[0]
     });
-  }, J = () => {
-    n(), v();
-  }, Y = (t) => {
-    B(c.find((u) => u.deviceId === t));
-  }, Z = async (t) => {
-    p(h.find((u) => u.deviceId === t)), await r.current.setSinkId(t);
-  }, ee = (t) => {
-    const u = N.find((R) => R.deviceId === t);
-    $(u), w(u);
-  }, te = async () => {
+  }, 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);
+  }, ne = async () => {
     const t = await navigator.mediaDevices.getUserMedia({
       audio: C && C.deviceId !== "" ? {
         deviceId: C.deviceId
       } : !0,
       video: !1
     });
-    let u = [];
+    let l = [];
     const R = new MediaRecorder(t);
-    R.addEventListener("dataavailable", (H) => {
-      u.push(H.data);
-    }), R.addEventListener("stop", async (H) => {
-      if (F(!1), !r.current)
+    R.addEventListener("dataavailable", (J) => {
+      l.push(J.data);
+    }), R.addEventListener("stop", async (J) => {
+      if (a(!1), !u.current)
         return;
-      const ie = new Blob(u, { type: "audio/ogg; codecs=opus" });
-      u = [];
-      const ce = URL.createObjectURL(ie);
-      r.current.src = ce, D && D.deviceId !== "" && await r.current.setSinkId(D.deviceId);
-    }), R.start(), x(R), F(!0), setTimeout(() => {
-      R.stop(), t.getTracks().forEach((H) => H.stop());
+      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());
     }, 5e3);
   };
   V(() => {
-    const { current: t } = M;
-    t && (t.srcObject !== null && t.srcObject instanceof MediaStream && (t.srcObject.getTracks().forEach((u) => u.stop()), t.pause()), t.srcObject = L, t.play());
-  }, [L]);
-  const ne = () => {
-    n(), 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();
   };
-  return i ? /* @__PURE__ */ e.createElement("div", { className: g.background, ...T ? { onClick: ne } : {} }, /* @__PURE__ */ e.createElement(
+  return c ? /* @__PURE__ */ e.createElement("div", { className: b.background, ...T ? { onClick: ie } : {} }, /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: g.modal,
+      className: b.modal,
       ...T ? {
         onClick: (t) => t.stopPropagation()
       } : {}
     },
-    /* @__PURE__ */ e.createElement("div", { className: g.deviceSelectContainer }, /* @__PURE__ */ e.createElement("div", { className: g.preview }, /* @__PURE__ */ e.createElement("video", { className: g.previewVideo, ref: M, autoPlay: !0, muted: !0, playsInline: !0 }), /* @__PURE__ */ e.createElement("audio", { className: g.previewAudio, ref: r, autoPlay: !0, playsInline: !0, controls: !0 })), /* @__PURE__ */ e.createElement("div", { className: g.deviceLists }, o && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
-      S,
+    /* @__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,
       {
-        label: _,
-        devices: c,
+        label: o,
+        devices: E,
         selectedDevice: C,
-        onChange: Y
+        onChange: Z
       }
-    ), /* @__PURE__ */ e.createElement("div", { className: g.buttons }, /* @__PURE__ */ e.createElement(
+    ), /* @__PURE__ */ e.createElement("div", { className: b.buttons }, /* @__PURE__ */ e.createElement(
       P,
       {
-        className: g.recordingButton,
-        onClick: te,
+        className: b.recordingButton,
+        onClick: ne,
         disabled: z
       },
       A
-    ))), a && /* @__PURE__ */ e.createElement(
-      S,
+    ))), s && /* @__PURE__ */ e.createElement(
+      O,
       {
-        label: E,
-        devices: h,
+        label: f,
+        devices: H,
         selectedDevice: D,
-        onChange: Z
+        onChange: ee
       }
-    ), l && /* @__PURE__ */ e.createElement(
-      S,
+    ), v && /* @__PURE__ */ e.createElement(
+      O,
       {
         label: k,
         devices: N,
         selectedDevice: I,
-        onChange: ee
+        onChange: te
       }
     ))),
-    /* @__PURE__ */ e.createElement("div", { className: g.buttons }, /* @__PURE__ */ e.createElement(P, { className: g.cancelButton, onClick: J }, G), /* @__PURE__ */ e.createElement(P, { className: g.confirmButton, onClick: f }, j))
+    /* @__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);
 };
 export {
-  Re as SelectMediaDevicesModal,
-  Pe as SelectMediaDevicesPreviewModal,
-  Te as SelectMediaDevicesRecordingModal
+  Pe as SelectMediaDevicesModal,
+  Te as SelectMediaDevicesPreviewModal,
+  Fe as SelectMediaDevicesRecordingModal
 };

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

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

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

@@ -1 +1 @@
-export declare const useGetMediaStream: () => [MediaStream, (device: MediaDeviceInfo) => void];
+export declare const useGetMediaStream: () => [MediaStream, (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.1.0",
+    "version": "1.1.1",
     "license": "MIT",
     "repository": {
         "type": "git",