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

package/README.md

@@ -1,7 +1,10 @@
 # react-select-media-devices-modal
 
 [![npm version](https://badge.fury.io/js/react-select-media-devices-modal.svg)](https://badge.fury.io/js/react-select-media-devices-modal)
+[![Test](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/test.yaml/badge.svg?branch=master)](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/test.yaml)
+[![E2E Test](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/e2e-test.yaml/badge.svg)](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/e2e-test.yaml)
 [![Release](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/release.yaml/badge.svg)](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/release.yaml)
+[![Deploy to GitHub Pages](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/deploy.yaml/badge.svg?branch=master)](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/deploy.yaml)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 A React component library for select media devices.
@@ -22,7 +25,7 @@ npm install --save react-select-media-devices-modal
 
 ## Usage
 
-```tsx
+```jsx
 import { useState } from 'react';
 import { SelectMediaDevicesModal } from 'react-select-media-devices-modal';
 

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

@@ -1,94 +1,99 @@
-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
-}, $ = () => {
+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, () => {
     (async () => {
-      const u = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), a = await navigator.mediaDevices.enumerateDevices();
-      c(a), u.getTracks().forEach((i) => i.stop());
+      const o = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), a = await navigator.mediaDevices.enumerateDevices();
+      c(a), o.getTracks().forEach((i) => i.stop());
     })();
   }];
-}, q = ({ name: n, value: c }) => /* @__PURE__ */ e.createElement("option", { value: c }, n), D = ({ devices: n, label: c, onChange: o }) => {
+}, 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)
     return /* @__PURE__ */ e.createElement(e.Fragment, null);
-  const u = (i) => {
-    o(i.target.value);
+  const o = (i) => {
+    s(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 = ({
+  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: o = !0,
-  open: u,
+  isSelectVideoInput: s = !0,
+  open: o,
   audioInputDeviceLabel: a = "audio input device",
   audioOutputDeviceLabel: i = "audio output device",
   videoInputDeviceLabel: r = "video input device",
   confirmButtonText: I = "Confirm",
-  cancelButtonText: b = "Cancel",
-  allowOutsideClick: k = !0,
+  cancelButtonText: L = "Cancel",
+  allowOutsideClick: g = !0,
   onDeviceSelected: B,
-  onDeviceSelectCanceled: h
+  onDeviceSelectCanceled: D
 }) => {
-  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 = () => {
+  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: E !== void 0 ? E : m[0],
-      audioOutput: f !== void 0 ? f : p[0],
-      videoInput: C !== void 0 ? C : g[0]
+      audioInput: f !== void 0 ? f : m[0],
+      audioOutput: h !== void 0 ? h : p[0],
+      videoInput: E !== void 0 ? E : _[0]
     });
-  }, F = () => {
-    h();
-  }, M = (t) => {
-    L(m.find((d) => d.deviceId === t));
+  }, M = () => {
+    D();
+  }, $ = (t) => {
+    j(m.find((u) => u.deviceId === t));
+  }, q = (t) => {
+    O(p.find((u) => u.deviceId === t));
   }, w = (t) => {
-    N(p.find((d) => d.deviceId === t));
-  }, y = (t) => {
-    O(g.find((d) => d.deviceId === t));
-  }, V = () => {
-    h();
+    A(_.find((u) => u.deviceId === t));
+  }, y = () => {
+    D();
   };
-  return u ? /* @__PURE__ */ e.createElement("div", { className: s.background, ...k ? { onClick: V } : {} }, /* @__PURE__ */ e.createElement(
+  return o ? /* @__PURE__ */ e.createElement("div", { className: d.background, ...g ? { onClick: y } : {} }, /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: s.modal,
-      ...k ? {
+      className: d.modal,
+      ...g ? {
         onClick: (t) => t.stopPropagation()
       } : {}
     },
-    /* @__PURE__ */ e.createElement("div", { className: s.deviceLists }, n && /* @__PURE__ */ e.createElement(
-      D,
+    /* @__PURE__ */ e.createElement("div", { className: d.deviceLists }, n && /* @__PURE__ */ e.createElement(
+      b,
       {
         label: a,
         devices: m,
-        onChange: M
+        onChange: $
       }
     ), c && /* @__PURE__ */ e.createElement(
-      D,
+      b,
       {
         label: i,
         devices: p,
-        onChange: w
+        onChange: q
       }
-    ), o && /* @__PURE__ */ e.createElement(
-      D,
+    ), s && /* @__PURE__ */ e.createElement(
+      b,
       {
         label: r,
-        devices: g,
-        onChange: y
+        devices: _,
+        onChange: w
       }
     )),
-    /* @__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("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(e.Fragment, null);
 };
 export {
-  H as SelectMediaDevicesModal
+  X 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"},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"})});
+(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"})});

package/dist/style.css

@@ -1 +1 @@
-._background_a8nxk_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;display:flex;align-items:center;justify-content:center}._modal_a8nxk_13{background:white;padding:16px;border-radius:8px}._deviceLists_a8nxk_19{display:grid}._buttons_a8nxk_23{padding-top:8px;display:flex;align-items:center;justify-content:right}._confirmButton_a8nxk_32{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}

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.7",
+    "version": "0.0.9",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -25,6 +25,7 @@
     "keywords": [
         "react",
         "modal",
+        "webrtc",
         "compoennt",
         "mediadevices",
         "getusermedia",