react-select-media-devices-modal 0.0.9 → 0.0.10

package/README.md

@@ -12,6 +12,7 @@ A React component library for select media devices.
 ## Features
 
 - Select audio input, audio output, and video input device.
+- Show preview media stream get from selected device.
 
 ## Demo
 
@@ -25,6 +26,8 @@ npm install --save react-select-media-devices-modal
 
 ## Usage
 
+### SelectMediaDevicesModal
+
 ```jsx
 import { useState } from 'react';
 import { SelectMediaDevicesModal } from 'react-select-media-devices-modal';
@@ -65,6 +68,48 @@ function App() {
 export default App;
 ```
 
+### SelectMediaDevicesPreviewModal
+
+```jsx
+import { useState } from 'react';
+import { SelectMediaDevicesPreviewModal } 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>
+            <SelectMediaDevicesPreviewModal
+                isSelectAudioInput
+                isSelectAudioOutput
+                isSelectVideoInput
+                open={modalOpen}
+                audioInputDeviceLabel="Audio input device"
+                audioOutputDeviceLabel="Audio output device"
+                videoInputDeviceLabel="Video input device"
+                confirmButtonText="Confirm"
+                cancelButtonText="Cancel"
+                allowOutsideClick={false}
+                onDeviceSelected={handleDeviceSelected}
+                onDeviceSelectCanceled={handleDeviceSelectCanceled}
+            ></SelectMediaDevicesPreviewModal>
+        </div>
+    );
+}
+
+export default App;
+```
+
 ## Props
 
 ### `SelectMediaDevicesModalProps`
@@ -84,6 +129,23 @@ 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. |
 
+### `SelectMediaDevicesPreviewModalProps`
+
+| 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. |
+| 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,99 +1,209 @@
-import e, { useState as l, useEffect as V } from "react";
-const x = "_background_1djbv_1", G = "_modal_1djbv_13", P = "_deviceLists_1djbv_20", R = "_buttons_1djbv_24", S = "_chancelButton_1djbv_31", T = "_confirmButton_1djbv_33", d = {
-  background: x,
-  modal: G,
-  deviceLists: P,
-  buttons: R,
-  chancelButton: S,
-  confirmButton: T
-}, U = () => {
-  const [n, c] = l([]);
-  return [n, () => {
+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, () => {
     (async () => {
-      const o = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), a = await navigator.mediaDevices.enumerateDevices();
-      c(a), o.getTracks().forEach((i) => i.stop());
+      const n = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), a = await navigator.mediaDevices.enumerateDevices();
+      o(a), n.getTracks().forEach((s) => s.stop());
     })();
   }];
-}, z = ({ name: n, value: c }) => /* @__PURE__ */ e.createElement("option", { value: c }, n), H = "_deviceList_1bfq1_1", J = "_select_1bfq1_5", C = {
-  deviceList: H,
-  select: J
-}, b = ({ devices: n, label: c, onChange: s }) => {
-  if (n === void 0)
+}, 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)
     return /* @__PURE__ */ e.createElement(e.Fragment, null);
-  const o = (i) => {
-    s(i.target.value);
-  }, a = `device-select-${c.toLowerCase().replace(/\s/g, "-")}`;
-  return /* @__PURE__ */ e.createElement("div", { className: C.deviceList }, /* @__PURE__ */ e.createElement("label", { htmlFor: a }, c), /* @__PURE__ */ e.createElement("select", { className: C.select, id: a, onChange: o }, n.map((i, r) => /* @__PURE__ */ e.createElement(z, { value: i.deviceId, name: i.label, key: r }))));
-}, K = "_button_keu24_1", Q = {
-  button: K
-}, k = ({ className: n, children: c, onClick: s }) => /* @__PURE__ */ e.createElement("button", { onClick: s, className: [Q.button, n].filter(Boolean).join(" ") }, c), X = ({
-  isSelectAudioInput: n = !0,
-  isSelectAudioOutput: c = !0,
-  isSelectVideoInput: s = !0,
-  open: o,
+  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: i = "audio output device",
-  videoInputDeviceLabel: r = "video input device",
-  confirmButtonText: I = "Confirm",
-  cancelButtonText: L = "Cancel",
-  allowOutsideClick: g = !0,
-  onDeviceSelected: B,
+  audioOutputDeviceLabel: s = "audio output device",
+  videoInputDeviceLabel: h = "video input device",
+  confirmButtonText: w = "Confirm",
+  cancelButtonText: M = "Cancel",
+  allowOutsideClick: C = !0,
+  onDeviceSelected: j,
   onDeviceSelectCanceled: D
 }) => {
-  const [v, N] = U(), [f, j] = l(), [h, O] = l(), [E, A] = l(), m = v.filter((t) => t.kind === "audioinput"), p = v.filter((t) => t.kind === "audiooutput"), _ = v.filter((t) => t.kind === "videoinput");
-  V(() => {
-    o && N();
-  }, [o]);
-  const F = () => {
-    B({
-      audioInput: f !== void 0 ? f : m[0],
-      audioOutput: h !== void 0 ? h : p[0],
-      videoInput: E !== void 0 ? E : _[0]
+  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]
     });
-  }, M = () => {
+  }, L = () => {
     D();
-  }, $ = (t) => {
-    j(m.find((u) => u.deviceId === t));
-  }, q = (t) => {
-    O(p.find((u) => u.deviceId === t));
-  }, w = (t) => {
-    A(_.find((u) => u.deviceId === t));
-  }, y = () => {
+  }, 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();
   };
-  return o ? /* @__PURE__ */ e.createElement("div", { className: d.background, ...g ? { onClick: y } : {} }, /* @__PURE__ */ e.createElement(
+  return n ? /* @__PURE__ */ e.createElement("div", { className: g.background, ...C ? { onClick: R } : {} }, /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: d.modal,
-      ...g ? {
-        onClick: (t) => t.stopPropagation()
+      className: g.modal,
+      ...C ? {
+        onClick: (c) => c.stopPropagation()
       } : {}
     },
-    /* @__PURE__ */ e.createElement("div", { className: d.deviceLists }, n && /* @__PURE__ */ e.createElement(
-      b,
+    /* @__PURE__ */ e.createElement("div", { className: g.deviceLists }, i && /* @__PURE__ */ e.createElement(
+      k,
       {
         label: a,
-        devices: m,
-        onChange: $
+        devices: _,
+        onChange: l
       }
-    ), c && /* @__PURE__ */ e.createElement(
-      b,
+    ), o && /* @__PURE__ */ e.createElement(
+      k,
       {
-        label: i,
-        devices: p,
-        onChange: q
+        label: s,
+        devices: b,
+        onChange: P
       }
-    ), s && /* @__PURE__ */ e.createElement(
-      b,
+    ), u && /* @__PURE__ */ e.createElement(
+      k,
       {
-        label: r,
-        devices: _,
-        onChange: w
+        label: h,
+        devices: f,
+        onChange: F
       }
     )),
-    /* @__PURE__ */ e.createElement("div", { className: d.buttons }, /* @__PURE__ */ e.createElement(k, { className: d.cancelButton, onClick: M }, L), /* @__PURE__ */ e.createElement(k, { className: d.confirmButton, onClick: F }, I))
+    /* @__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(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 }
+      );
+      o(a);
+    })();
+  }];
+}, _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
+}) => {
+  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)
+      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]
+    });
+  }, 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);
+  };
+  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();
+  };
+  return n ? /* @__PURE__ */ e.createElement("div", { className: r.background, ...C ? { onClick: U } : {} }, /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: r.modal,
+      ...C ? {
+        onClick: (t) => t.stopPropagation()
+      } : {}
+    },
+    /* @__PURE__ */ e.createElement("div", { className: r.deviceSelectContainer }, /* @__PURE__ */ e.createElement("div", { className: r.preview }, /* @__PURE__ */ e.createElement(
+      "video",
+      {
+        className: r.previewVideo,
+        ref: f,
+        autoPlay: !0,
+        muted: !0,
+        playsInline: !0
+      }
+    )), /* @__PURE__ */ e.createElement("div", { className: r.deviceLists }, i && /* @__PURE__ */ e.createElement(
+      k,
+      {
+        label: a,
+        devices: N,
+        onChange: R
+      }
+    ), o && /* @__PURE__ */ e.createElement(
+      k,
+      {
+        label: s,
+        devices: L,
+        onChange: c
+      }
+    ), u && /* @__PURE__ */ e.createElement(
+      k,
+      {
+        label: h,
+        devices: l,
+        onChange: p
+      }
+    ))),
+    /* @__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(e.Fragment, null);
 };
 export {
-  X as SelectMediaDevicesModal
+  pe as SelectMediaDevicesModal,
+  _e as SelectMediaDevicesPreviewModal
 };

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

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

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_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}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface SelectMediaDevicesModalProps {
     isSelectAudioInput: boolean;
     isSelectAudioOutput: boolean;

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

@@ -0,0 +1,20 @@
+interface SelectMediaDevicesPreviewModalProps {
+    isSelectAudioInput: boolean;
+    isSelectAudioOutput: boolean;
+    isSelectVideoInput: boolean;
+    open: boolean;
+    audioInputDeviceLabel: string;
+    audioOutputDeviceLabel: string;
+    videoInputDeviceLabel: string;
+    confirmButtonText: string;
+    cancelButtonText: string;
+    allowOutsideClick: boolean;
+    onDeviceSelected: (devices: {
+        audioInput?: MediaDeviceInfo;
+        audioOutput?: MediaDeviceInfo;
+        videoInput?: MediaDeviceInfo;
+    }) => void;
+    onDeviceSelectCanceled: () => void;
+}
+declare const SelectMediaDevicesPreviewModal: ({ isSelectAudioInput, isSelectAudioOutput, isSelectVideoInput, open, audioInputDeviceLabel, audioOutputDeviceLabel, videoInputDeviceLabel, confirmButtonText, cancelButtonText, allowOutsideClick, onDeviceSelected, onDeviceSelectCanceled, }: SelectMediaDevicesPreviewModalProps) => JSX.Element;
+export default SelectMediaDevicesPreviewModal;

package/dist/types/{SelectMediaDevicesModal/components → components}/deviceItem/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface DeviceItemProps {
     name: string;
     value: string;

package/dist/types/{SelectMediaDevicesModal/components → components}/deviceList/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface DeviceListProps {
     devices: MediaDeviceInfo[];
     label: string;

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

@@ -0,0 +1 @@
+export declare const useGetMediaStream: () => [MediaStream, (device: MediaDeviceInfo) => void];

package/dist/types/index.d.ts

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

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.9",
+    "version": "0.0.10",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -34,9 +34,10 @@
     "scripts": {
         "dev": "vite serve example",
         "build": "vite build",
-        "test": "vitest",
+        "test": "vitest run",
         "coverage": "vitest run --coverage",
-        "test:e2e": "vitest run -c vitest.e2e.config.ts"
+        "test:e2e": "vitest run -c vitest.e2e.config.ts",
+        "test:e2e:watch": "vitest watch -c vitest.e2e.config.ts"
     },
     "dependencies": {
         "react": "^18.2.0",