npm - react-select-media-devices-modal - Versions diffs - 1.0.6 → 1.0.8 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/react-select-media-devices-modal.mjs +172 -163
package/dist/react-select-media-devices-modal.umd.js +1 -1
package/dist/types/components/deviceList/index.d.ts +2 -1
package/package.json +1 -1

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

@@ -1,5 +1,5 @@
-import e, { useState as u, useEffect as L, useRef as K, useMemo as U } 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", F = {
+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,
@@ -7,93 +7,96 @@ const oe = "_background_1djbv_1", ae = "_modal_1djbv_13", se = "_deviceLists_1dj
   chancelButton: re,
   confirmButton: ue
 }, Q = () => {
-  const [o, a] = u([]);
+  const [o, a] = l([]);
   return [o, () => {
     (async () => {
-      const c = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), l = await navigator.mediaDevices.enumerateDevices();
-      a(l), c.getTracks().forEach((v) => v.stop());
+      const c = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), p = await navigator.mediaDevices.enumerateDevices();
+      a(p), c.getTracks().forEach((_) => _.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
-}, D = ({ devices: o, label: a, onChange: f }) => {
+}, L = ({ devices: o, label: a, selectedDevice: r, onChange: c }) => {
   if (o === void 0)
     return /* @__PURE__ */ e.createElement(e.Fragment, null);
-  const c = (v) => {
-    f(v.target.value);
-  }, l = `device-select-${a.toLowerCase().replace(/\s/g, "-")}`;
-  return /* @__PURE__ */ e.createElement("div", { className: W.deviceList }, /* @__PURE__ */ e.createElement("label", { htmlFor: l }, a), /* @__PURE__ */ e.createElement("select", { className: W.select, id: l, onChange: c }, o.map((v, O) => /* @__PURE__ */ e.createElement(le, { value: v.deviceId, name: v.label, key: O }))));
+  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
-}, y = ({ className: o, children: a, disabled: f, onClick: c }) => /* @__PURE__ */ e.createElement("button", { onClick: c, disabled: f, className: [fe.button, o].filter(Boolean).join(" ") }, a), Re = ({
+}, 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: f = !0,
+  isSelectVideoInput: r = !0,
   open: c,
-  audioInputDeviceLabel: l = "audio input device",
-  audioOutputDeviceLabel: v = "audio output device",
-  videoInputDeviceLabel: O = "video input device",
-  confirmButtonText: q = "Confirm",
+  audioInputDeviceLabel: p = "audio input device",
+  audioOutputDeviceLabel: _ = "audio output device",
+  videoInputDeviceLabel: g = "video input device",
+  confirmButtonText: V = "Confirm",
   cancelButtonText: G = "Cancel",
-  allowOutsideClick: S = !0,
-  onDeviceSelected: R,
-  onDeviceSelectCanceled: $
+  allowOutsideClick: j = !0,
+  onDeviceSelected: T,
+  onDeviceSelectCanceled: A
 }) => {
-  const [r, g] = Q(), [M, k] = u(), [j, h] = u(), [A, P] = u(), B = r.filter((i) => i.kind === "audioinput"), C = r.filter((i) => i.kind === "audiooutput"), E = r.filter((i) => i.kind === "videoinput");
-  L(() => {
-    c && g();
+  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 w = () => {
-    R({
-      audioInput: M !== void 0 ? M : B[0],
-      audioOutput: j !== void 0 ? j : C[0],
-      videoInput: A !== void 0 ? A : E[0]
+  const S = () => {
+    T({
+      audioInput: E !== void 0 ? E : O[0],
+      audioOutput: D !== void 0 ? D : B[0],
+      videoInput: I !== void 0 ? I : w[0]
     });
   }, d = () => {
-    $();
+    A();
   }, s = (i) => {
-    k(B.find((_) => _.deviceId === i));
+    k(O.find((f) => f.deviceId === i));
   }, x = (i) => {
-    h(C.find((_) => _.deviceId === i));
+    h(B.find((f) => f.deviceId === i));
   }, z = (i) => {
-    P(E.find((_) => _.deviceId === i));
-  }, T = () => {
-    $();
+    y(w.find((f) => f.deviceId === i));
+  }, F = () => {
+    A();
   };
-  return c ? /* @__PURE__ */ e.createElement("div", { className: F.background, ...S ? { onClick: T } : {} }, /* @__PURE__ */ e.createElement(
+  return c ? /* @__PURE__ */ e.createElement("div", { className: U.background, ...j ? { onClick: F } : {} }, /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: F.modal,
-      ...S ? {
+      className: U.modal,
+      ...j ? {
         onClick: (i) => i.stopPropagation()
       } : {}
     },
-    /* @__PURE__ */ e.createElement("div", { className: F.deviceLists }, o && /* @__PURE__ */ e.createElement(
-      D,
+    /* @__PURE__ */ e.createElement("div", { className: U.deviceLists }, o && /* @__PURE__ */ e.createElement(
+      L,
       {
-        label: l,
-        devices: B,
+        label: p,
+        devices: O,
+        selectedDevice: E,
         onChange: s
       }
     ), a && /* @__PURE__ */ e.createElement(
-      D,
+      L,
       {
-        label: v,
-        devices: C,
+        label: _,
+        devices: B,
+        selectedDevice: D,
         onChange: x
       }
-    ), f && /* @__PURE__ */ e.createElement(
-      D,
+    ), r && /* @__PURE__ */ e.createElement(
+      L,
       {
-        label: O,
-        devices: E,
+        label: g,
+        devices: w,
+        selectedDevice: I,
         onChange: z
       }
     )),
-    /* @__PURE__ */ e.createElement("div", { className: F.buttons }, /* @__PURE__ */ e.createElement(y, { className: F.cancelButton, onClick: d }, G), /* @__PURE__ */ e.createElement(y, { className: F.confirmButton, onClick: w }, q))
+    /* @__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(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", Ie = "_chancelButton_kb025_57", De = "_confirmButton_kb025_59", I = {
+}, _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,
   deviceSelectContainer: be,
@@ -101,99 +104,102 @@ const oe = "_background_1djbv_1", ae = "_modal_1djbv_13", se = "_deviceLists_1dj
   previewVideo: he,
   deviceLists: Ce,
   buttons: Ee,
-  chancelButton: Ie,
-  confirmButton: De
+  chancelButton: De,
+  confirmButton: Ie
 }, X = () => {
-  const [o, a] = u();
-  return L(() => () => {
+  const [o, a] = l();
+  return M(() => () => {
     o !== void 0 && o.getTracks().forEach((c) => c.stop());
   }, []), [o, (c) => {
     c.kind !== "audiooutput" && (async () => {
-      const l = await navigator.mediaDevices.getUserMedia(
+      const p = await navigator.mediaDevices.getUserMedia(
         c.kind === "audioinput" ? { video: !1, audio: { deviceId: c.deviceId } } : { video: { deviceId: c.deviceId }, audio: !1 }
       );
-      a(l);
+      a(p);
     })();
   }];
 }, Pe = ({
   isSelectAudioInput: o = !0,
   isSelectAudioOutput: a = !0,
-  isSelectVideoInput: f = !0,
+  isSelectVideoInput: r = !0,
   open: c,
-  audioInputDeviceLabel: l = "audio input device",
-  audioOutputDeviceLabel: v = "audio output device",
-  videoInputDeviceLabel: O = "video input device",
-  confirmButtonText: q = "Confirm",
+  audioInputDeviceLabel: p = "audio input device",
+  audioOutputDeviceLabel: _ = "audio output device",
+  videoInputDeviceLabel: g = "video input device",
+  confirmButtonText: V = "Confirm",
   cancelButtonText: G = "Cancel",
-  allowOutsideClick: S = !0,
-  onDeviceSelected: R,
-  onDeviceSelectCanceled: $
+  allowOutsideClick: j = !0,
+  onDeviceSelected: T,
+  onDeviceSelectCanceled: A
 }) => {
-  const [r, g] = Q(), [M, k] = u(), [j, h] = u(), [A, P] = u(), [B, C] = X(), E = K(), w = U(() => r.filter((n) => n.kind === "audioinput"), [r]), d = U(() => r.filter((n) => n.kind === "audiooutput"), [r]), s = U(() => r.filter((n) => n.kind === "videoinput"), [r]);
-  L(() => {
-    c && g();
-  }, [c]), L(() => {
+  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)
       return;
     const [n] = s;
-    C(n);
+    B(n);
   }, [s]);
   const x = () => {
-    R({
-      audioInput: M !== void 0 ? M : w[0],
-      audioOutput: j !== void 0 ? j : d[0],
-      videoInput: A !== void 0 ? A : s[0]
+    T({
+      audioInput: E !== void 0 ? E : S[0],
+      audioOutput: D !== void 0 ? D : d[0],
+      videoInput: I !== void 0 ? I : s[0]
     });
   }, z = () => {
-    $();
-  }, T = (n) => {
-    k(w.find((b) => b.deviceId === n));
+    A();
+  }, F = (n) => {
+    k(S.find((C) => C.deviceId === n));
   }, i = (n) => {
-    h(d.find((b) => b.deviceId === n));
-  }, _ = (n) => {
-    const b = s.find((J) => J.deviceId === n);
-    P(b), C(b);
+    h(d.find((C) => C.deviceId === n));
+  }, f = (n) => {
+    const C = s.find((J) => J.deviceId === n);
+    y(C), B(C);
   };
-  L(() => {
-    const { current: n } = E;
-    n !== void 0 && (n.srcObject !== null && n.srcObject instanceof MediaStream && (n.srcObject.getTracks().forEach((b) => b.stop()), n.pause()), n.srcObject = B, n.play());
-  }, [B]);
-  const N = () => {
-    $();
+  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();
   };
-  return c ? /* @__PURE__ */ e.createElement("div", { className: I.background, ...S ? { onClick: N } : {} }, /* @__PURE__ */ e.createElement(
+  return c ? /* @__PURE__ */ e.createElement("div", { className: N.background, ...j ? { onClick: $ } : {} }, /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: I.modal,
-      ...S ? {
+      className: N.modal,
+      ...j ? {
         onClick: (n) => n.stopPropagation()
       } : {}
     },
-    /* @__PURE__ */ e.createElement("div", { className: I.deviceSelectContainer }, /* @__PURE__ */ e.createElement("div", { className: I.preview }, /* @__PURE__ */ e.createElement("video", { className: I.previewVideo, ref: E, autoPlay: !0, muted: !0, playsInline: !0 })), /* @__PURE__ */ e.createElement("div", { className: I.deviceLists }, o && /* @__PURE__ */ e.createElement(
-      D,
+    /* @__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,
       {
-        label: l,
-        devices: w,
-        onChange: T
+        label: p,
+        devices: S,
+        selectedDevice: E,
+        onChange: F
       }
     ), a && /* @__PURE__ */ e.createElement(
-      D,
+      L,
       {
-        label: v,
+        label: _,
         devices: d,
+        selectedDevice: D,
         onChange: i
       }
-    ), f && /* @__PURE__ */ e.createElement(
-      D,
+    ), r && /* @__PURE__ */ e.createElement(
+      L,
       {
-        label: O,
+        label: g,
         devices: s,
-        onChange: _
+        selectedDevice: I,
+        onChange: f
       }
     ))),
-    /* @__PURE__ */ e.createElement("div", { className: I.buttons }, /* @__PURE__ */ e.createElement(y, { className: I.cancelButton, onClick: z }, G), /* @__PURE__ */ e.createElement(y, { className: I.confirmButton, onClick: x }, q))
+    /* @__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(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", je = "_chancelButton_1s81f_61", Ae = "_confirmButton_1s81f_63", Ve = "_recordingButton_1s81f_67", p = {
+}, 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,
   modal: we,
   deviceSelectContainer: Ne,
@@ -202,52 +208,52 @@ const oe = "_background_1djbv_1", ae = "_modal_1djbv_13", se = "_deviceLists_1dj
   previewAudio: Se,
   deviceLists: $e,
   buttons: Me,
-  chancelButton: je,
-  confirmButton: Ae,
-  recordingButton: Ve
+  chancelButton: Ve,
+  confirmButton: je,
+  recordingButton: Ae
 }, Te = ({
   isSelectAudioInput: o = !0,
   isSelectAudioOutput: a = !0,
-  isSelectVideoInput: f = !0,
+  isSelectVideoInput: r = !0,
   open: c,
-  audioInputDeviceLabel: l = "audio input device",
-  audioOutputDeviceLabel: v = "audio output device",
-  videoInputDeviceLabel: O = "video input device",
-  confirmButtonText: q = "Confirm",
+  audioInputDeviceLabel: p = "audio input device",
+  audioOutputDeviceLabel: _ = "audio output device",
+  videoInputDeviceLabel: g = "video input device",
+  confirmButtonText: V = "Confirm",
   cancelButtonText: G = "Cancel",
-  recordingButtonText: S = "Recording",
-  allowOutsideClick: R = !0,
-  onDeviceSelected: $,
-  onDeviceSelectCanceled: r
+  recordingButtonText: j = "Recording",
+  allowOutsideClick: T = !0,
+  onDeviceSelected: A,
+  onDeviceSelectCanceled: u
 }) => {
-  const [g, M] = Q(), [k, j] = u(), [h, A] = u(), [P, B] = u(), [C, E] = X(), w = K(), d = K(), [s, x] = u(), [z, T] = u(!1), i = U(() => g.filter((t) => t.kind === "audioinput"), [g]), _ = U(() => g.filter((t) => t.kind === "audiooutput"), [g]), N = U(() => g.filter((t) => t.kind === "videoinput"), [g]);
-  L(() => {
-    c && M();
-  }, [c]), L(() => {
-    if (N.length < 1)
+  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)
       return;
-    const [t] = N;
-    E(t);
-  }, [N]);
+    const [t] = $;
+    w(t);
+  }, [$]);
   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());
-  }, b = () => {
-    n(), $({
+  }, C = () => {
+    n(), A({
       audioInput: k !== void 0 ? k : i[0],
-      audioOutput: h !== void 0 ? h : _[0],
-      videoInput: P !== void 0 ? P : N[0]
+      audioOutput: h !== void 0 ? h : f[0],
+      videoInput: y !== void 0 ? y : $[0]
     });
   }, J = () => {
-    n(), r();
+    n(), u();
   }, Y = (t) => {
-    j(i.find((m) => m.deviceId === t));
+    D(i.find((v) => v.deviceId === t));
   }, Z = async (t) => {
-    A(_.find((m) => m.deviceId === t)), await d.current.setSinkId(t);
+    I(f.find((v) => v.deviceId === t)), await d.current.setSinkId(t);
   }, ee = (t) => {
-    const m = N.find((V) => V.deviceId === t);
-    B(m), E(m);
+    const v = $.find((R) => R.deviceId === t);
+    O(v), w(v);
   }, te = async () => {
     const t = await navigator.mediaDevices.getUserMedia({
       audio: k && k.deviceId !== "" ? {
@@ -255,67 +261,70 @@ const oe = "_background_1djbv_1", ae = "_modal_1djbv_13", se = "_deviceLists_1dj
       } : !0,
       video: !1
     });
-    let m = [];
-    const V = new MediaRecorder(t);
-    V.addEventListener("dataavailable", (H) => {
-      m.push(H.data);
-    }), V.addEventListener("stop", async (H) => {
-      if (T(!1), !d.current)
+    let v = [];
+    const R = new MediaRecorder(t);
+    R.addEventListener("dataavailable", (H) => {
+      v.push(H.data);
+    }), R.addEventListener("stop", async (H) => {
+      if (F(!1), !d.current)
         return;
-      const ce = new Blob(m, { type: "audio/ogg; codecs=opus" });
-      m = [];
+      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);
-    }), V.start(), x(V), T(!0), setTimeout(() => {
-      V.stop(), t.getTracks().forEach((H) => H.stop());
+    }), R.start(), x(R), F(!0), setTimeout(() => {
+      R.stop(), t.getTracks().forEach((H) => H.stop());
     }, 5e3);
   };
-  L(() => {
-    const { current: t } = w;
-    t && (t.srcObject !== null && t.srcObject instanceof MediaStream && (t.srcObject.getTracks().forEach((m) => m.stop()), t.pause()), t.srcObject = C, t.play());
-  }, [C]);
+  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(), r();
+    n(), u();
   };
-  return c ? /* @__PURE__ */ e.createElement("div", { className: p.background, ...R ? { onClick: ne } : {} }, /* @__PURE__ */ e.createElement(
+  return c ? /* @__PURE__ */ e.createElement("div", { className: m.background, ...T ? { onClick: ne } : {} }, /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: p.modal,
-      ...R ? {
+      className: m.modal,
+      ...T ? {
         onClick: (t) => t.stopPropagation()
       } : {}
     },
-    /* @__PURE__ */ e.createElement("div", { className: p.deviceSelectContainer }, /* @__PURE__ */ e.createElement("div", { className: p.preview }, /* @__PURE__ */ e.createElement("video", { className: p.previewVideo, ref: w, autoPlay: !0, muted: !0, playsInline: !0 }), /* @__PURE__ */ e.createElement("audio", { className: p.previewAudio, ref: d, autoPlay: !0, playsInline: !0, controls: !0 })), /* @__PURE__ */ e.createElement("div", { className: p.deviceLists }, o && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
-      D,
+    /* @__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,
       {
-        label: l,
+        label: p,
         devices: i,
+        selectedDevice: k,
         onChange: Y
       }
-    ), /* @__PURE__ */ e.createElement("div", { className: p.buttons }, /* @__PURE__ */ e.createElement(
-      y,
+    ), /* @__PURE__ */ e.createElement("div", { className: m.buttons }, /* @__PURE__ */ e.createElement(
+      P,
       {
-        className: p.recordingButton,
+        className: m.recordingButton,
         onClick: te,
         disabled: z
       },
-      S
+      j
     ))), a && /* @__PURE__ */ e.createElement(
-      D,
+      L,
       {
-        label: v,
-        devices: _,
+        label: _,
+        devices: f,
+        selectedDevice: h,
         onChange: Z
       }
-    ), f && /* @__PURE__ */ e.createElement(
-      D,
+    ), r && /* @__PURE__ */ e.createElement(
+      L,
       {
-        label: O,
-        devices: N,
+        label: g,
+        devices: $,
+        selectedDevice: y,
         onChange: ee
       }
     ))),
-    /* @__PURE__ */ e.createElement("div", { className: p.buttons }, /* @__PURE__ */ e.createElement(y, { className: p.cancelButton, onClick: J }, G), /* @__PURE__ */ e.createElement(y, { className: p.confirmButton, onClick: b }, q))
+    /* @__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(e.Fragment, null);
 };
 export {

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

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

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

@@ -2,7 +2,8 @@ import React from 'react';
 interface DeviceListProps {
     devices: MediaDeviceInfo[];
     label: string;
+    selectedDevice?: MediaDeviceInfo;
     onChange: (deviceId: string) => void;
 }
-declare const DeviceList: ({ devices, label, onChange }: DeviceListProps) => React.JSX.Element;
+declare const DeviceList: ({ devices, label, selectedDevice, onChange }: DeviceListProps) => React.JSX.Element;
 export default DeviceList;

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "name": "react-select-media-devices-modal",
     "description": "A React component library for select media devices",
-    "version": "1.0.6",
+    "version": "1.0.8",
     "license": "MIT",
     "repository": {
         "type": "git",