react-select-media-devices-modal 0.0.6 → 0.0.7

package/README.md

@@ -49,8 +49,8 @@ function App() {
                 audioInputDeviceLabel="Audio input device"
                 audioOutputDeviceLabel="Audio output device"
                 videoInputDeviceLabel="Video input device"
-                ConfirmButtonText="Confirm"
-                CancelButtonText="Cancel"
+                confirmButtonText="Confirm"
+                cancelButtonText="Cancel"
                 allowOutsideClick={false}
                 onDeviceSelected={handleDeviceSelected}
                 onDeviceSelectCanceled={handleDeviceSelectCanceled}
@@ -75,8 +75,8 @@ export default App;
 | 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. |
+| 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. |

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

@@ -1,94 +1,94 @@
-import e, { useState as l, useEffect as w } from "react";
-const G = "_background_a8nxk_1", P = "_modal_a8nxk_13", R = "_deviceLists_a8nxk_19", S = "_buttons_a8nxk_23", T = "_chancelButton_a8nxk_30", U = "_confirmButton_a8nxk_32", o = {
+import e, { useState as l, useEffect as j } from "react";
+const G = "_background_a8nxk_1", P = "_modal_a8nxk_13", R = "_deviceLists_a8nxk_19", S = "_buttons_a8nxk_23", T = "_chancelButton_a8nxk_30", U = "_confirmButton_a8nxk_32", s = {
   background: G,
   modal: P,
   deviceLists: R,
   buttons: S,
   chancelButton: T,
   confirmButton: U
-}, q = () => {
+}, $ = () => {
   const [n, c] = l([]);
   return [n, () => {
     (async () => {
-      const s = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), i = await navigator.mediaDevices.enumerateDevices();
-      c(i), s.getTracks().forEach((u) => u.stop());
+      const u = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), a = await navigator.mediaDevices.enumerateDevices();
+      c(a), u.getTracks().forEach((i) => i.stop());
     })();
   }];
-}, z = ({ name: n, value: c }) => /* @__PURE__ */ e.createElement("option", { value: c }, n), g = ({ devices: n, label: c, onChange: a }) => {
+}, q = ({ name: n, value: c }) => /* @__PURE__ */ e.createElement("option", { value: c }, n), D = ({ devices: n, label: c, onChange: o }) => {
   if (n === void 0)
     return /* @__PURE__ */ e.createElement(e.Fragment, null);
-  const s = (i) => {
-    a(i.target.value);
-  };
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("label", { htmlFor: "device-select" }, c), /* @__PURE__ */ e.createElement("select", { name: "device-select", onChange: s }, n.map((i, u) => /* @__PURE__ */ e.createElement(z, { value: i.deviceId, name: i.label, key: u }))));
-}, _ = ({ className: n, children: c, onClick: a }) => /* @__PURE__ */ e.createElement("button", { onClick: a, className: [n].filter(Boolean).join(" ") }, c), J = ({
+  const u = (i) => {
+    o(i.target.value);
+  }, a = `device-select-${c.toLowerCase().replace(/\s/g, "-")}`;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("label", { htmlFor: a }, c), /* @__PURE__ */ e.createElement("select", { id: a, onChange: u }, n.map((i, r) => /* @__PURE__ */ e.createElement(q, { value: i.deviceId, name: i.label, key: r }))));
+}, _ = ({ className: n, children: c, onClick: o }) => /* @__PURE__ */ e.createElement("button", { onClick: o, className: [n].filter(Boolean).join(" ") }, c), H = ({
   isSelectAudioInput: n = !0,
   isSelectAudioOutput: c = !0,
-  isSelectVideoInput: a = !0,
-  open: s,
-  audioInputDeviceLabel: i = "audio input device",
-  audioOutputDeviceLabel: u = "audio output device",
-  videoInputDeviceLabel: C = "video input device",
-  ConfirmButtonText: I = "Confirm",
-  CancelButtonText: b = "Cancel",
-  allowOutsideClick: D = !0,
+  isSelectVideoInput: o = !0,
+  open: u,
+  audioInputDeviceLabel: a = "audio input device",
+  audioOutputDeviceLabel: i = "audio output device",
+  videoInputDeviceLabel: r = "video input device",
+  confirmButtonText: I = "Confirm",
+  cancelButtonText: b = "Cancel",
+  allowOutsideClick: k = !0,
   onDeviceSelected: B,
-  onDeviceSelectCanceled: k
+  onDeviceSelectCanceled: h
 }) => {
-  const [r, x] = q(), [h, N] = l(), [E, L] = l(), [f, O] = l(), v = r.filter((t) => t.kind === "audioinput"), m = r.filter((t) => t.kind === "audiooutput"), p = r.filter((t) => t.kind === "videoinput");
-  w(() => {
+  const [v, x] = $(), [E, L] = l(), [f, N] = l(), [C, O] = l(), m = v.filter((t) => t.kind === "audioinput"), p = v.filter((t) => t.kind === "audiooutput"), g = v.filter((t) => t.kind === "videoinput");
+  j(() => {
     x();
   }, []);
   const A = () => {
     B({
-      audioInput: h !== void 0 ? h : v[0],
-      audioOutput: E !== void 0 ? E : m[0],
-      videoInput: f !== void 0 ? f : p[0]
+      audioInput: E !== void 0 ? E : m[0],
+      audioOutput: f !== void 0 ? f : p[0],
+      videoInput: C !== void 0 ? C : g[0]
     });
   }, F = () => {
-    k();
+    h();
   }, M = (t) => {
-    N(v.find((d) => d.deviceId === t));
-  }, y = (t) => {
     L(m.find((d) => d.deviceId === t));
-  }, V = (t) => {
-    O(p.find((d) => d.deviceId === t));
-  }, j = () => {
-    k();
+  }, w = (t) => {
+    N(p.find((d) => d.deviceId === t));
+  }, y = (t) => {
+    O(g.find((d) => d.deviceId === t));
+  }, V = () => {
+    h();
   };
-  return s ? /* @__PURE__ */ e.createElement("div", { className: o.background, ...D ? { onClick: j } : {} }, /* @__PURE__ */ e.createElement(
+  return u ? /* @__PURE__ */ e.createElement("div", { className: s.background, ...k ? { onClick: V } : {} }, /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: o.modal,
-      ...D ? {
+      className: s.modal,
+      ...k ? {
         onClick: (t) => t.stopPropagation()
       } : {}
     },
-    /* @__PURE__ */ e.createElement("div", { className: o.deviceLists }, n && /* @__PURE__ */ e.createElement(
-      g,
+    /* @__PURE__ */ e.createElement("div", { className: s.deviceLists }, n && /* @__PURE__ */ e.createElement(
+      D,
       {
-        label: i,
-        devices: v,
+        label: a,
+        devices: m,
         onChange: M
       }
     ), c && /* @__PURE__ */ e.createElement(
-      g,
+      D,
       {
-        label: u,
-        devices: m,
-        onChange: y
+        label: i,
+        devices: p,
+        onChange: w
       }
-    ), a && /* @__PURE__ */ e.createElement(
-      g,
+    ), o && /* @__PURE__ */ e.createElement(
+      D,
       {
-        label: C,
-        devices: p,
-        onChange: V
+        label: r,
+        devices: g,
+        onChange: y
       }
     )),
-    /* @__PURE__ */ e.createElement("div", { className: o.buttons }, /* @__PURE__ */ e.createElement(_, { className: o.cancelButton, onClick: F }, b), /* @__PURE__ */ e.createElement(_, { className: o.confirmButton, onClick: A }, I))
+    /* @__PURE__ */ e.createElement("div", { className: s.buttons }, /* @__PURE__ */ e.createElement(_, { className: s.cancelButton, onClick: F }, b), /* @__PURE__ */ e.createElement(_, { className: s.confirmButton, onClick: A }, I))
   )) : /* @__PURE__ */ e.createElement(e.Fragment, null);
 };
 export {
-  J as SelectMediaDevicesModal
+  H as SelectMediaDevicesModal
 };

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 s={background:"_background_a8nxk_1",modal:"_modal_a8nxk_13",deviceLists:"_deviceLists_a8nxk_19",buttons:"_buttons_a8nxk_23",chancelButton:"_chancelButton_a8nxk_30",confirmButton:"_confirmButton_a8nxk_32"},_=()=>{const[n,i]=e.useState([]);return[n,()=>{(async()=>{const u=await navigator.mediaDevices.getUserMedia({audio:!0,video:!0}),o=await navigator.mediaDevices.enumerateDevices();i(o),u.getTracks().forEach(d=>d.stop())})()}]},C=({name:n,value:i})=>e.createElement("option",{value:i},n),r=({devices:n,label:i,onChange:a})=>{if(n===void 0)return e.createElement(e.Fragment,null);const u=o=>{a(o.target.value)};return e.createElement(e.Fragment,null,e.createElement("label",{htmlFor:"device-select"},i),e.createElement("select",{name:"device-select",onChange:u},n.map((o,d)=>e.createElement(C,{value:o.deviceId,name:o.label,key:d}))))},g=({className:n,children:i,onClick:a})=>e.createElement("button",{onClick:a,className:[n].filter(Boolean).join(" ")},i),I=({isSelectAudioInput:n=!0,isSelectAudioOutput:i=!0,isSelectVideoInput:a=!0,open:u,audioInputDeviceLabel:o="audio input device",audioOutputDeviceLabel:d="audio output device",videoInputDeviceLabel:B="video input device",ConfirmButtonText:x="Confirm",CancelButtonText:M="Cancel",allowOutsideClick:h=!0,onDeviceSelected:S,onDeviceSelectCanceled:D})=>{const[v,L]=_(),[k,N]=e.useState(),[E,y]=e.useState(),[b,O]=e.useState(),m=v.filter(t=>t.kind==="audioinput"),p=v.filter(t=>t.kind==="audiooutput"),f=v.filter(t=>t.kind==="videoinput");e.useEffect(()=>{L()},[]);const A=()=>{S({audioInput:k!==void 0?k:m[0],audioOutput:E!==void 0?E:p[0],videoInput:b!==void 0?b:f[0]})},F=()=>{D()},T=t=>{N(m.find(l=>l.deviceId===t))},j=t=>{y(p.find(l=>l.deviceId===t))},P=t=>{O(f.find(l=>l.deviceId===t))},V=()=>{D()};return u?e.createElement("div",{className:s.background,...h?{onClick:V}:{}},e.createElement("div",{className:s.modal,...h?{onClick:t=>t.stopPropagation()}:{}},e.createElement("div",{className:s.deviceLists},n&&e.createElement(r,{label:o,devices:m,onChange:T}),i&&e.createElement(r,{label:d,devices:p,onChange:j}),a&&e.createElement(r,{label:B,devices:f,onChange:P})),e.createElement("div",{className:s.buttons},e.createElement(g,{className:s.cancelButton,onClick:F},M),e.createElement(g,{className:s.confirmButton,onClick:A},x)))):e.createElement(e.Fragment,null)};c.SelectMediaDevicesModal=I,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
+(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 s={background:"_background_a8nxk_1",modal:"_modal_a8nxk_13",deviceLists:"_deviceLists_a8nxk_19",buttons:"_buttons_a8nxk_23",chancelButton:"_chancelButton_a8nxk_30",confirmButton:"_confirmButton_a8nxk_32"},b=()=>{const[n,i]=e.useState([]);return[n,()=>{(async()=>{const d=await navigator.mediaDevices.getUserMedia({audio:!0,video:!0}),u=await navigator.mediaDevices.enumerateDevices();i(u),d.getTracks().forEach(o=>o.stop())})()}]},I=({name:n,value:i})=>e.createElement("option",{value:i},n),r=({devices:n,label:i,onChange:a})=>{if(n===void 0)return e.createElement(e.Fragment,null);const d=o=>{a(o.target.value)},u=`device-select-${i.toLowerCase().replace(/\s/g,"-")}`;return e.createElement(e.Fragment,null,e.createElement("label",{htmlFor:u},i),e.createElement("select",{id:u,onChange:d},n.map((o,v)=>e.createElement(I,{value:o.deviceId,name:o.label,key:v}))))},h=({className:n,children:i,onClick:a})=>e.createElement("button",{onClick:a,className:[n].filter(Boolean).join(" ")},i),B=({isSelectAudioInput:n=!0,isSelectAudioOutput:i=!0,isSelectVideoInput:a=!0,open:d,audioInputDeviceLabel:u="audio input device",audioOutputDeviceLabel:o="audio output device",videoInputDeviceLabel:v="video input device",confirmButtonText:x="Confirm",cancelButtonText:L="Cancel",allowOutsideClick:D=!0,onDeviceSelected:M,onDeviceSelectCanceled:k})=>{const[m,S]=b(),[E,N]=e.useState(),[C,y]=e.useState(),[_,O]=e.useState(),p=m.filter(t=>t.kind==="audioinput"),f=m.filter(t=>t.kind==="audiooutput"),g=m.filter(t=>t.kind==="videoinput");e.useEffect(()=>{S()},[]);const A=()=>{M({audioInput:E!==void 0?E:p[0],audioOutput:C!==void 0?C:f[0],videoInput:_!==void 0?_:g[0]})},F=()=>{k()},T=t=>{N(p.find(l=>l.deviceId===t))},j=t=>{y(f.find(l=>l.deviceId===t))},w=t=>{O(g.find(l=>l.deviceId===t))},P=()=>{k()};return d?e.createElement("div",{className:s.background,...D?{onClick:P}:{}},e.createElement("div",{className:s.modal,...D?{onClick:t=>t.stopPropagation()}:{}},e.createElement("div",{className:s.deviceLists},n&&e.createElement(r,{label:u,devices:p,onChange:T}),i&&e.createElement(r,{label:o,devices:f,onChange:j}),a&&e.createElement(r,{label:v,devices:g,onChange:w})),e.createElement("div",{className:s.buttons},e.createElement(h,{className:s.cancelButton,onClick:F},L),e.createElement(h,{className:s.confirmButton,onClick:A},x)))):e.createElement(e.Fragment,null)};c.SelectMediaDevicesModal=B,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 interface ButtonProps {
-    className: string;
+    className?: string;
     children: ReactNode;
     onClick: () => void;
 }

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

@@ -7,8 +7,8 @@ interface SelectMediaDevicesModalProps {
     audioInputDeviceLabel: string;
     audioOutputDeviceLabel: string;
     videoInputDeviceLabel: string;
-    ConfirmButtonText: string;
-    CancelButtonText: string;
+    confirmButtonText: string;
+    cancelButtonText: string;
     allowOutsideClick: boolean;
     onDeviceSelected: (devices: {
         audioInput?: MediaDeviceInfo;
@@ -17,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) => JSX.Element;
 export default SelectMediaDevicesModal;

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.6",
+    "version": "0.0.7",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -32,7 +32,10 @@
     ],
     "scripts": {
         "dev": "vite serve example",
-        "build": "vite build"
+        "build": "vite build",
+        "test": "vitest",
+        "coverage": "vitest run --coverage",
+        "test:e2e": "vitest run -c vitest.e2e.config.ts"
     },
     "dependencies": {
         "react": "^18.2.0",
@@ -41,14 +44,23 @@
     },
     "devDependencies": {
         "@mdx-js/react": "^2.3.0",
+        "@playwright/test": "^1.33.0",
         "@rollup/plugin-typescript": "^11.1.0",
+        "@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",
         "serve": "^14.2.0",
         "vite": "^4.2.1",
         "vite-pages-theme-doc": "^4.0.0",
-        "vite-plugin-react-pages": "^4.0.0"
+        "vite-plugin-react-pages": "^4.0.0",
+        "vitest": "^0.30.1"
     }
 }