react-select-media-devices-modal 0.0.12 → 1.0.1

package/README.md

@@ -13,6 +13,7 @@ A React component library for select media devices.
 
 - Select audio input, audio output, and video input device.
 - Show preview media stream get from selected device.
+- Record sample audio stream and play.
 
 ## Demo
 
@@ -110,6 +111,49 @@ function App() {
 export default App;
 ```
 
+### SelectMediaDevicesRecordingModal
+
+```jsx
+import { useState } from 'react';
+import { SelectMediaDevicesRecordingModal } from 'react-select-media-devices-modal';
+
+function App() {
+    const [modalOpen, setModalOpen] = useState(false);
+
+    const handleDeviceSelected = (devices) => {
+        setModalOpen(false);
+        console.log(devices);
+    };
+
+    const handleDeviceSelectCanceled = () => {
+        setModalOpen(false);
+    };
+
+    return (
+        <div>
+            <button onClick={() => setModalOpen((current) => !current)}>Select Device</button>
+            <SelectMediaDevicesRecordingModal
+                isSelectAudioInput
+                isSelectAudioOutput
+                isSelectVideoInput
+                open={modalOpen}
+                audioInputDeviceLabel="Audio input device"
+                audioOutputDeviceLabel="Audio output device"
+                videoInputDeviceLabel="Video input device"
+                confirmButtonText="Confirm"
+                cancelButtonText="Cancel"
+                recordingButtonText="Recording"
+                allowOutsideClick={false}
+                onDeviceSelected={handleDeviceSelected}
+                onDeviceSelectCanceled={handleDeviceSelectCanceled}
+            ></SelectMediaDevicesRecordingModal>
+        </div>
+    );
+}
+
+export default App;
+```
+
 ## Props
 
 ### `SelectMediaDevicesModalProps`
@@ -146,6 +190,24 @@ export default App;
 | onDeviceSelected | `function` | `(devices: { audioInput?: MediaDeviceInfo; audioOutput?: MediaDeviceInfo; videoInput?: MediaDeviceInfo; }) => void` | Handler function called when devices are selected. |
 | onDeviceSelectCanceled | `function` | `() => void` | Handler function called when selection canceled. |
 
+### `SelectMediaDevicesRecordingModalProps`
+
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| isSelectAudioInput | `boolean` | `true` | Flag that select an audio input device or not. |
+| isSelectAudioOutput | `boolean` | `true` | Flag that select an audio output device or not. |
+| isSelectVideoInput | `boolean` | `true` | Flag that select a video input device or not. |
+| open | `boolean` | `false` | Flag that open the modal or not. |
+| audioInputDeviceLabel | `string` | `'audio input device'` | Label for list of audio input devices. |
+| audioOutputDeviceLabel | `string` | `'audio output device'` | Label for list of audio output devices. |
+| videoInputDeviceLabel | `string` | `'video input device'` | Label for list of video input devices. |
+| confirmButtonText | `string` | `'Confirm'` | Label for the confirm button. |
+| cancelButtonText | `string` | `'Cancel'` | Label for the cancel button. |
+| recordingButtonText | `string` | `'Recording'` | Label for the recording button. |
+| allowOutsideClick | `boolean` | `true` | Flag that cancel selection when clicking outside of the modal. |
+| onDeviceSelected | `function` | `(devices: { audioInput?: MediaDeviceInfo; audioOutput?: MediaDeviceInfo; videoInput?: MediaDeviceInfo; }) => void` | Handler function called when devices are selected. |
+| onDeviceSelectCanceled | `function` | `() => void` | Handler function called when selection canceled. |
+
 ## LICENSE
 
 [MIT](https://github.com/kadoshita/react-select-media-devices-modal/blob/master/LICENSE)

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

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

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

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

package/dist/style.css

@@ -1 +1 @@
-._background_1djbv_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;display:flex;align-items:center;justify-content:center}._modal_1djbv_13{background:white;padding:16px;border-radius:8px;min-width:270px}._deviceLists_1djbv_20{display:grid}._buttons_1djbv_24{padding-top:16px;display:flex;align-items:center;justify-content:right}._confirmButton_1djbv_33{margin-left:4px}._deviceList_1bfq1_1{padding-top:8px}._select_1bfq1_5{margin-top:4px;border-radius:4px;height:32px;display:flex;align-items:center;justify-content:right;width:100%}._button_keu24_1{border-radius:4px;height:32px;padding-left:16px;padding-right:16px;background-color:#fff;border-width:1px}._background_kb025_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;display:flex;align-items:center;justify-content:center}._modal_kb025_13{background:white;padding:16px;border-radius:8px}._deviceSelectContainer_kb025_19{display:grid;grid-template-columns:50% 50%}@media (max-width: 640px){._deviceSelectContainer_kb025_19{display:grid;grid-template-columns:100%}}._preview_kb025_31{min-width:270px;min-height:180px;max-width:270px;max-height:180px;margin-right:4px}._previewVideo_kb025_39{width:270px;height:180px}._deviceLists_kb025_44{display:grid;min-width:270px;margin-left:8px}._buttons_kb025_50{padding-top:16px;display:flex;align-items:center;justify-content:right}._confirmButton_kb025_59{margin-left:4px}
+._background_1djbv_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;display:flex;align-items:center;justify-content:center}._modal_1djbv_13{background:white;padding:16px;border-radius:8px;min-width:270px}._deviceLists_1djbv_20{display:grid}._buttons_1djbv_24{padding-top:16px;display:flex;align-items:center;justify-content:right}._confirmButton_1djbv_33{margin-left:4px}._deviceList_1bfq1_1{padding-top:8px}._select_1bfq1_5{margin-top:4px;border-radius:4px;height:32px;display:flex;align-items:center;justify-content:right;width:100%}._button_keu24_1{border-radius:4px;height:32px;padding-left:16px;padding-right:16px;background-color:#fff;border-width:1px}._background_kb025_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;display:flex;align-items:center;justify-content:center}._modal_kb025_13{background:white;padding:16px;border-radius:8px}._deviceSelectContainer_kb025_19{display:grid;grid-template-columns:50% 50%}@media (max-width: 640px){._deviceSelectContainer_kb025_19{display:grid;grid-template-columns:100%}}._preview_kb025_31{min-width:270px;min-height:180px;max-width:270px;max-height:180px;margin-right:4px}._previewVideo_kb025_39{width:270px;height:180px}._deviceLists_kb025_44{display:grid;min-width:270px;margin-left:8px}._buttons_kb025_50{padding-top:16px;display:flex;align-items:center;justify-content:right}._confirmButton_kb025_59{margin-left:4px}._background_1s81f_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;display:flex;align-items:center;justify-content:center}._modal_1s81f_13{background:white;padding:16px;border-radius:8px}._deviceSelectContainer_1s81f_19{display:grid;grid-template-columns:50% 50%}@media (max-width: 640px){._deviceSelectContainer_1s81f_19{display:grid;grid-template-columns:100%}}._preview_1s81f_31{min-width:270px;min-height:180px;max-width:270px;max-height:180px;margin-right:4px}._previewVideo_1s81f_39{width:270px;height:180px}._previewAudio_1s81f_44{width:270px}._deviceLists_1s81f_48{display:grid;min-width:270px;margin-left:8px}._buttons_1s81f_54{padding-top:16px;display:flex;align-items:center;justify-content:right}._confirmButton_1s81f_63{margin-left:4px}

package/dist/types/SelectMediaDevicesModal/index.d.ts

@@ -1,14 +1,15 @@
+import React from 'react';
 interface SelectMediaDevicesModalProps {
-    isSelectAudioInput: boolean;
-    isSelectAudioOutput: boolean;
-    isSelectVideoInput: boolean;
+    isSelectAudioInput?: boolean;
+    isSelectAudioOutput?: boolean;
+    isSelectVideoInput?: boolean;
     open: boolean;
-    audioInputDeviceLabel: string;
-    audioOutputDeviceLabel: string;
-    videoInputDeviceLabel: string;
-    confirmButtonText: string;
-    cancelButtonText: string;
-    allowOutsideClick: boolean;
+    audioInputDeviceLabel?: string;
+    audioOutputDeviceLabel?: string;
+    videoInputDeviceLabel?: string;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    allowOutsideClick?: boolean;
     onDeviceSelected: (devices: {
         audioInput?: MediaDeviceInfo;
         audioOutput?: MediaDeviceInfo;
@@ -16,5 +17,5 @@ interface SelectMediaDevicesModalProps {
     }) => void;
     onDeviceSelectCanceled: () => void;
 }
-declare const SelectMediaDevicesModal: ({ isSelectAudioInput, isSelectAudioOutput, isSelectVideoInput, open, audioInputDeviceLabel, audioOutputDeviceLabel, videoInputDeviceLabel, confirmButtonText, cancelButtonText, allowOutsideClick, onDeviceSelected, onDeviceSelectCanceled, }: SelectMediaDevicesModalProps) => JSX.Element;
+declare const SelectMediaDevicesModal: ({ isSelectAudioInput, isSelectAudioOutput, isSelectVideoInput, open, audioInputDeviceLabel, audioOutputDeviceLabel, videoInputDeviceLabel, confirmButtonText, cancelButtonText, allowOutsideClick, onDeviceSelected, onDeviceSelectCanceled, }: SelectMediaDevicesModalProps) => React.JSX.Element;
 export default SelectMediaDevicesModal;

package/dist/types/SelectMediaDevicesPreviewModal/index.d.ts

@@ -1,14 +1,15 @@
+import React from 'react';
 interface SelectMediaDevicesPreviewModalProps {
-    isSelectAudioInput: boolean;
-    isSelectAudioOutput: boolean;
-    isSelectVideoInput: boolean;
+    isSelectAudioInput?: boolean;
+    isSelectAudioOutput?: boolean;
+    isSelectVideoInput?: boolean;
     open: boolean;
-    audioInputDeviceLabel: string;
-    audioOutputDeviceLabel: string;
-    videoInputDeviceLabel: string;
-    confirmButtonText: string;
-    cancelButtonText: string;
-    allowOutsideClick: boolean;
+    audioInputDeviceLabel?: string;
+    audioOutputDeviceLabel?: string;
+    videoInputDeviceLabel?: string;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    allowOutsideClick?: boolean;
     onDeviceSelected: (devices: {
         audioInput?: MediaDeviceInfo;
         audioOutput?: MediaDeviceInfo;
@@ -16,5 +17,5 @@ interface SelectMediaDevicesPreviewModalProps {
     }) => void;
     onDeviceSelectCanceled: () => void;
 }
-declare const SelectMediaDevicesPreviewModal: ({ isSelectAudioInput, isSelectAudioOutput, isSelectVideoInput, open, audioInputDeviceLabel, audioOutputDeviceLabel, videoInputDeviceLabel, confirmButtonText, cancelButtonText, allowOutsideClick, onDeviceSelected, onDeviceSelectCanceled, }: SelectMediaDevicesPreviewModalProps) => JSX.Element;
+declare const SelectMediaDevicesPreviewModal: ({ isSelectAudioInput, isSelectAudioOutput, isSelectVideoInput, open, audioInputDeviceLabel, audioOutputDeviceLabel, videoInputDeviceLabel, confirmButtonText, cancelButtonText, allowOutsideClick, onDeviceSelected, onDeviceSelectCanceled, }: SelectMediaDevicesPreviewModalProps) => React.JSX.Element;
 export default SelectMediaDevicesPreviewModal;

package/dist/types/SelectMediaDevicesRecordingModal/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface SelectMediaDevicesRecordingModalProps {
+    isSelectAudioInput?: boolean;
+    isSelectAudioOutput?: boolean;
+    isSelectVideoInput?: boolean;
+    open: boolean;
+    audioInputDeviceLabel?: string;
+    audioOutputDeviceLabel?: string;
+    videoInputDeviceLabel?: string;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    recordingButtonText?: string;
+    allowOutsideClick?: boolean;
+    onDeviceSelected: (devices: {
+        audioInput?: MediaDeviceInfo;
+        audioOutput?: MediaDeviceInfo;
+        videoInput?: MediaDeviceInfo;
+    }) => void;
+    onDeviceSelectCanceled: () => void;
+}
+declare const SelectMediaDevicesRecordingModal: ({ isSelectAudioInput, isSelectAudioOutput, isSelectVideoInput, open, audioInputDeviceLabel, audioOutputDeviceLabel, videoInputDeviceLabel, confirmButtonText, cancelButtonText, recordingButtonText, allowOutsideClick, onDeviceSelected, onDeviceSelectCanceled, }: SelectMediaDevicesRecordingModalProps) => React.JSX.Element;
+export default SelectMediaDevicesRecordingModal;

package/dist/types/components/button/index.d.ts

@@ -1,8 +1,9 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 interface ButtonProps {
     className?: string;
     children: ReactNode;
+    disabled?: boolean;
     onClick: () => void;
 }
-declare const Button: ({ className, children, onClick }: ButtonProps) => JSX.Element;
+declare const Button: ({ className, children, disabled, onClick }: ButtonProps) => React.JSX.Element;
 export default Button;

package/dist/types/components/deviceItem/index.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 interface DeviceItemProps {
     name: string;
     value: string;
 }
-declare const DeviceItem: ({ name, value }: DeviceItemProps) => JSX.Element;
+declare const DeviceItem: ({ name, value }: DeviceItemProps) => React.JSX.Element;
 export default DeviceItem;

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

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

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export { default as SelectMediaDevicesModal } from './SelectMediaDevicesModal';
 export { default as SelectMediaDevicesPreviewModal } from './SelectMediaDevicesPreviewModal';
+export { default as SelectMediaDevicesRecordingModal } from './SelectMediaDevicesRecordingModal';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-select-media-devices-modal",
     "description": "A React component library for select media devices",
-    "version": "0.0.12",
+    "version": "1.0.1",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -42,27 +42,27 @@
     "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.10.0"
+        "react-router-dom": "^6.14.0"
     },
     "devDependencies": {
         "@mdx-js/react": "^2.3.0",
-        "@playwright/test": "^1.33.0",
-        "@rollup/plugin-typescript": "^11.1.0",
+        "@playwright/test": "^1.35.1",
+        "@rollup/plugin-typescript": "^11.1.1",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.4.3",
-        "@types/node": "^18.15.11",
-        "@types/react": "^18.0.33",
-        "@vitejs/plugin-react": "^3.1.0",
-        "@vitest/coverage-c8": "^0.30.1",
-        "@vitest/ui": "^0.30.1",
-        "jsdom": "^21.1.1",
-        "playwright": "^1.33.0",
-        "rimraf": "^4.4.1",
+        "@types/node": "^20.3.1",
+        "@types/react": "^18.2.14",
+        "@vitejs/plugin-react": "^4.0.1",
+        "@vitest/coverage-c8": "^0.32.2",
+        "@vitest/ui": "^0.32.2",
+        "jsdom": "^22.1.0",
+        "playwright": "^1.35.1",
+        "rimraf": "^5.0.1",
         "serve": "^14.2.0",
-        "vite": "^4.2.1",
-        "vite-pages-theme-doc": "^4.0.0",
-        "vite-plugin-react-pages": "^4.0.0",
-        "vitest": "^0.30.1"
+        "vite": "^4.3.9",
+        "vite-pages-theme-doc": "^4.1.5",
+        "vite-plugin-react-pages": "^4.1.3",
+        "vitest": "^0.32.2"
     }
 }