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

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,4 +1,4 @@
-import e, { useState as l, useEffect as M, useRef as K, useMemo as q } from "react";
+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,
@@ -7,203 +7,203 @@ const oe = "_background_1djbv_1", ae = "_modal_1djbv_13", se = "_deviceLists_1dj
   chancelButton: re,
   confirmButton: ue
 }, Q = () => {
-  const [o, a] = l([]);
+  const [o, a] = m([]);
   return [o, () => {
     (async () => {
-      const c = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), p = await navigator.mediaDevices.enumerateDevices();
-      a(p), c.getTracks().forEach((_) => _.stop());
+      const i = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), _ = await navigator.mediaDevices.enumerateDevices();
+      a(_), i.getTracks().forEach((E) => E.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 }) => {
+}, S = ({ devices: o, label: a, selectedDevice: l, onChange: i }) => {
   if (o === 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 }))));
+  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: r, onClick: c }) => /* @__PURE__ */ e.createElement("button", { onClick: c, disabled: r, className: [fe.button, o].filter(Boolean).join(" ") }, a), Re = ({
+}, 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: r = !0,
-  open: c,
-  audioInputDeviceLabel: p = "audio input device",
-  audioOutputDeviceLabel: _ = "audio output device",
-  videoInputDeviceLabel: g = "video input device",
-  confirmButtonText: V = "Confirm",
+  isSelectVideoInput: l = !0,
+  open: i,
+  audioInputDeviceLabel: _ = "audio input device",
+  audioOutputDeviceLabel: E = "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();
-  }, [c]);
-  const S = () => {
+  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");
+  V(() => {
+    i ? (navigator.mediaDevices.addEventListener("devicechange", d), d()) : navigator.mediaDevices.removeEventListener("devicechange", d);
+  }, [i]);
+  const M = () => {
     T({
-      audioInput: E !== void 0 ? E : O[0],
-      audioOutput: D !== void 0 ? D : B[0],
-      videoInput: I !== void 0 ? I : w[0]
+      audioInput: b !== void 0 ? b : $[0],
+      audioOutput: B !== void 0 ? B : L[0],
+      videoInput: p !== void 0 ? p : w[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));
+  }, 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 = () => {
-    A();
+    y();
   };
-  return c ? /* @__PURE__ */ e.createElement("div", { className: U.background, ...j ? { onClick: F } : {} }, /* @__PURE__ */ e.createElement(
+  return i ? /* @__PURE__ */ e.createElement("div", { className: U.background, ...A ? { onClick: F } : {} }, /* @__PURE__ */ e.createElement(
     "div",
     {
       className: U.modal,
-      ...j ? {
-        onClick: (i) => i.stopPropagation()
+      ...A ? {
+        onClick: (c) => c.stopPropagation()
       } : {}
     },
     /* @__PURE__ */ e.createElement("div", { className: U.deviceLists }, o && /* @__PURE__ */ e.createElement(
-      L,
+      S,
       {
-        label: p,
-        devices: O,
-        selectedDevice: E,
+        label: _,
+        devices: $,
+        selectedDevice: b,
         onChange: s
       }
     ), a && /* @__PURE__ */ e.createElement(
-      L,
+      S,
       {
-        label: _,
-        devices: B,
-        selectedDevice: D,
+        label: E,
+        devices: L,
+        selectedDevice: B,
         onChange: x
       }
-    ), r && /* @__PURE__ */ e.createElement(
-      L,
+    ), l && /* @__PURE__ */ e.createElement(
+      S,
       {
-        label: g,
+        label: k,
         devices: w,
-        selectedDevice: I,
+        selectedDevice: p,
         onChange: z
       }
     )),
-    /* @__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: r }, G), /* @__PURE__ */ e.createElement(P, { className: U.confirmButton, onClick: M }, 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 = {
-  background: _e,
-  modal: ge,
+}, 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: ke,
-  previewVideo: he,
-  deviceLists: Ce,
-  buttons: Ee,
+  preview: he,
+  previewVideo: Ee,
+  deviceLists: ke,
+  buttons: Ce,
   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 }
+  const [o, a] = m();
+  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 }
       );
-      a(p);
+      a(_);
     })();
   }];
 }, Pe = ({
   isSelectAudioInput: o = !0,
   isSelectAudioOutput: a = !0,
-  isSelectVideoInput: r = !0,
-  open: c,
-  audioInputDeviceLabel: p = "audio input device",
-  audioOutputDeviceLabel: _ = "audio output device",
-  videoInputDeviceLabel: g = "video input device",
-  confirmButtonText: V = "Confirm",
+  isSelectVideoInput: l = !0,
+  open: i,
+  audioInputDeviceLabel: _ = "audio input device",
+  audioOutputDeviceLabel: E = "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(() => {
+  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]);
+  V(() => {
+    i ? (navigator.mediaDevices.addEventListener("devicechange", d), d()) : navigator.mediaDevices.removeEventListener("devicechange", d);
+  }, [i]), V(() => {
     if (s.length < 1)
       return;
-    const [n] = s;
-    B(n);
+    const n = s.find((f) => f.deviceId === (p == null ? void 0 : p.deviceId)) ?? s[0];
+    L(n);
   }, [s]);
   const x = () => {
     T({
-      audioInput: E !== void 0 ? E : S[0],
-      audioOutput: D !== void 0 ? D : d[0],
-      videoInput: I !== void 0 ? I : s[0]
+      audioInput: b !== void 0 ? b : M[0],
+      audioOutput: B !== void 0 ? B : r[0],
+      videoInput: p !== void 0 ? p : s[0]
     });
   }, z = () => {
-    A();
+    y();
   }, 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);
+    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);
   };
-  M(() => {
+  V(() => {
     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();
+    n !== void 0 && (n.srcObject !== null && n.srcObject instanceof MediaStream && (n.srcObject.getTracks().forEach((f) => f.stop()), n.pause()), n.srcObject = $, n.play());
+  }, [$]);
+  const N = () => {
+    y();
   };
-  return c ? /* @__PURE__ */ e.createElement("div", { className: N.background, ...j ? { onClick: $ } : {} }, /* @__PURE__ */ e.createElement(
+  return i ? /* @__PURE__ */ e.createElement("div", { className: O.background, ...A ? { onClick: N } : {} }, /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: N.modal,
-      ...j ? {
+      className: O.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: 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,
       {
-        label: p,
-        devices: S,
-        selectedDevice: E,
+        label: _,
+        devices: M,
+        selectedDevice: b,
         onChange: F
       }
     ), a && /* @__PURE__ */ e.createElement(
-      L,
+      S,
       {
-        label: _,
-        devices: d,
-        selectedDevice: D,
-        onChange: i
+        label: E,
+        devices: r,
+        selectedDevice: B,
+        onChange: c
       }
-    ), r && /* @__PURE__ */ e.createElement(
-      L,
+    ), l && /* @__PURE__ */ e.createElement(
+      S,
       {
-        label: g,
+        label: k,
         devices: s,
-        selectedDevice: I,
-        onChange: f
+        selectedDevice: p,
+        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: 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(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 = {
+}, 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: we,
-  deviceSelectContainer: Ne,
-  preview: Le,
+  modal: Le,
+  deviceSelectContainer: we,
+  preview: Ne,
   previewVideo: Oe,
   previewAudio: Se,
   deviceLists: $e,
@@ -214,117 +214,117 @@ const oe = "_background_1djbv_1", ae = "_modal_1djbv_13", se = "_deviceLists_1dj
 }, Te = ({
   isSelectAudioInput: o = !0,
   isSelectAudioOutput: a = !0,
-  isSelectVideoInput: r = !0,
-  open: c,
-  audioInputDeviceLabel: p = "audio input device",
-  audioOutputDeviceLabel: _ = "audio output device",
-  videoInputDeviceLabel: g = "video input device",
-  confirmButtonText: V = "Confirm",
+  isSelectVideoInput: l = !0,
+  open: i,
+  audioInputDeviceLabel: _ = "audio input device",
+  audioOutputDeviceLabel: E = "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: v
 }) => {
-  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 [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]);
+  V(() => {
+    i ? (navigator.mediaDevices.addEventListener("devicechange", b), b()) : navigator.mediaDevices.removeEventListener("devicechange", b);
+  }, [i]), V(() => {
+    if (N.length < 1)
       return;
-    const [t] = $;
+    const t = N.find((u) => u.deviceId === (I == null ? void 0 : I.deviceId)) ?? N[0];
     w(t);
-  }, [$]);
+  }, [N]);
   const n = () => {
-    !s || !d || (s.state === "recording" && (s.removeEventListener("dataavailable", () => {
+    !s || !r || (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]
+    }), s.stop(), s.stream.getTracks().forEach((t) => t.stop())), r.current.src = "", r.current.pause());
+  }, f = () => {
+    n(), y({
+      audioInput: C !== void 0 ? C : c[0],
+      audioOutput: D !== void 0 ? D : h[0],
+      videoInput: I !== void 0 ? I : N[0]
     });
   }, J = () => {
-    n(), u();
+    n(), v();
   }, Y = (t) => {
-    D(i.find((v) => v.deviceId === t));
+    B(c.find((u) => u.deviceId === t));
   }, Z = async (t) => {
-    I(f.find((v) => v.deviceId === t)), await d.current.setSinkId(t);
+    p(h.find((u) => u.deviceId === t)), await r.current.setSinkId(t);
   }, ee = (t) => {
-    const v = $.find((R) => R.deviceId === t);
-    O(v), w(v);
+    const u = N.find((R) => R.deviceId === t);
+    $(u), w(u);
   }, te = 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 u = [];
     const R = new MediaRecorder(t);
     R.addEventListener("dataavailable", (H) => {
-      v.push(H.data);
+      u.push(H.data);
     }), R.addEventListener("stop", async (H) => {
-      if (F(!1), !d.current)
+      if (F(!1), !r.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);
+      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());
     }, 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]);
+  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(), u();
+    n(), v();
   };
-  return c ? /* @__PURE__ */ e.createElement("div", { className: m.background, ...T ? { onClick: ne } : {} }, /* @__PURE__ */ e.createElement(
+  return i ? /* @__PURE__ */ e.createElement("div", { className: g.background, ...T ? { onClick: ne } : {} }, /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: m.modal,
+      className: g.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: 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,
       {
-        label: p,
-        devices: i,
-        selectedDevice: k,
+        label: _,
+        devices: c,
+        selectedDevice: C,
         onChange: Y
       }
-    ), /* @__PURE__ */ e.createElement("div", { className: m.buttons }, /* @__PURE__ */ e.createElement(
+    ), /* @__PURE__ */ e.createElement("div", { className: g.buttons }, /* @__PURE__ */ e.createElement(
       P,
       {
-        className: m.recordingButton,
+        className: g.recordingButton,
         onClick: te,
         disabled: z
       },
-      j
+      A
     ))), a && /* @__PURE__ */ e.createElement(
-      L,
+      S,
       {
-        label: _,
-        devices: f,
-        selectedDevice: h,
+        label: E,
+        devices: h,
+        selectedDevice: D,
         onChange: Z
       }
-    ), r && /* @__PURE__ */ e.createElement(
-      L,
+    ), l && /* @__PURE__ */ e.createElement(
+      S,
       {
-        label: g,
-        devices: $,
-        selectedDevice: y,
+        label: k,
+        devices: N,
+        selectedDevice: I,
         onChange: ee
       }
     ))),
-    /* @__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: 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(e.Fragment, null);
 };
 export {

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(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"})});

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.7",
+    "version": "1.1.0",
     "license": "MIT",
     "repository": {
         "type": "git",