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

package/README.md

@@ -215,3 +215,7 @@ export default App;
 ## Author
 
 [Yoshiki Kadoshita](https://github.com/kadoshita)
+
+## Contributors
+
+- [kounoike](https://github.com/kounoike)

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

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