react-select-media-devices-modal 0.0.7 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
# react-select-media-devices-modal
|
|
2
2
|
|
|
3
3
|
[](https://badge.fury.io/js/react-select-media-devices-modal)
|
|
4
|
+
[](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/test.yaml)
|
|
5
|
+
[](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/e2e-test.yaml)
|
|
4
6
|
[](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/release.yaml)
|
|
7
|
+
[](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/deploy.yaml)
|
|
5
8
|
[](https://opensource.org/licenses/MIT)
|
|
6
9
|
|
|
7
10
|
A React component library for select media devices.
|
|
@@ -22,7 +25,7 @@ npm install --save react-select-media-devices-modal
|
|
|
22
25
|
|
|
23
26
|
## Usage
|
|
24
27
|
|
|
25
|
-
```
|
|
28
|
+
```jsx
|
|
26
29
|
import { useState } from 'react';
|
|
27
30
|
import { SelectMediaDevicesModal } from 'react-select-media-devices-modal';
|
|
28
31
|
|
|
@@ -1,94 +1,99 @@
|
|
|
1
1
|
import e, { useState as l, useEffect as j } from "react";
|
|
2
|
-
const
|
|
3
|
-
background:
|
|
4
|
-
modal:
|
|
5
|
-
deviceLists:
|
|
6
|
-
buttons:
|
|
7
|
-
chancelButton:
|
|
8
|
-
confirmButton:
|
|
9
|
-
},
|
|
2
|
+
const x = "_background_2h4vl_1", G = "_modal_2h4vl_13", P = "_deviceLists_2h4vl_19", R = "_buttons_2h4vl_23", S = "_chancelButton_2h4vl_30", T = "_confirmButton_2h4vl_32", a = {
|
|
3
|
+
background: x,
|
|
4
|
+
modal: G,
|
|
5
|
+
deviceLists: P,
|
|
6
|
+
buttons: R,
|
|
7
|
+
chancelButton: S,
|
|
8
|
+
confirmButton: T
|
|
9
|
+
}, U = () => {
|
|
10
10
|
const [n, c] = l([]);
|
|
11
11
|
return [n, () => {
|
|
12
12
|
(async () => {
|
|
13
|
-
const u = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }),
|
|
14
|
-
c(
|
|
13
|
+
const u = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), s = await navigator.mediaDevices.enumerateDevices();
|
|
14
|
+
c(s), u.getTracks().forEach((i) => i.stop());
|
|
15
15
|
})();
|
|
16
16
|
}];
|
|
17
|
-
},
|
|
17
|
+
}, z = ({ name: n, value: c }) => /* @__PURE__ */ e.createElement("option", { value: c }, n), H = "_deviceList_1bfq1_1", J = "_select_1bfq1_5", C = {
|
|
18
|
+
deviceList: H,
|
|
19
|
+
select: J
|
|
20
|
+
}, h = ({ devices: n, label: c, onChange: o }) => {
|
|
18
21
|
if (n === void 0)
|
|
19
22
|
return /* @__PURE__ */ e.createElement(e.Fragment, null);
|
|
20
23
|
const u = (i) => {
|
|
21
24
|
o(i.target.value);
|
|
22
|
-
},
|
|
23
|
-
return /* @__PURE__ */ e.createElement(
|
|
24
|
-
},
|
|
25
|
+
}, s = `device-select-${c.toLowerCase().replace(/\s/g, "-")}`;
|
|
26
|
+
return /* @__PURE__ */ e.createElement("div", { className: C.deviceList }, /* @__PURE__ */ e.createElement("label", { htmlFor: s }, c), /* @__PURE__ */ e.createElement("select", { className: C.select, id: s, onChange: u }, n.map((i, v) => /* @__PURE__ */ e.createElement(z, { value: i.deviceId, name: i.label, key: v }))));
|
|
27
|
+
}, K = "_button_keu24_1", Q = {
|
|
28
|
+
button: K
|
|
29
|
+
}, k = ({ className: n, children: c, onClick: o }) => /* @__PURE__ */ e.createElement("button", { onClick: o, className: [Q.button, n].filter(Boolean).join(" ") }, c), X = ({
|
|
25
30
|
isSelectAudioInput: n = !0,
|
|
26
31
|
isSelectAudioOutput: c = !0,
|
|
27
32
|
isSelectVideoInput: o = !0,
|
|
28
33
|
open: u,
|
|
29
|
-
audioInputDeviceLabel:
|
|
34
|
+
audioInputDeviceLabel: s = "audio input device",
|
|
30
35
|
audioOutputDeviceLabel: i = "audio output device",
|
|
31
|
-
videoInputDeviceLabel:
|
|
36
|
+
videoInputDeviceLabel: v = "video input device",
|
|
32
37
|
confirmButtonText: I = "Confirm",
|
|
33
|
-
cancelButtonText:
|
|
34
|
-
allowOutsideClick:
|
|
38
|
+
cancelButtonText: L = "Cancel",
|
|
39
|
+
allowOutsideClick: g = !0,
|
|
35
40
|
onDeviceSelected: B,
|
|
36
|
-
onDeviceSelectCanceled:
|
|
41
|
+
onDeviceSelectCanceled: D
|
|
37
42
|
}) => {
|
|
38
|
-
const [
|
|
43
|
+
const [r, N] = U(), [f, O] = l(), [b, A] = l(), [E, F] = l(), m = r.filter((t) => t.kind === "audioinput"), p = r.filter((t) => t.kind === "audiooutput"), _ = r.filter((t) => t.kind === "videoinput");
|
|
39
44
|
j(() => {
|
|
40
|
-
|
|
45
|
+
N();
|
|
41
46
|
}, []);
|
|
42
|
-
const
|
|
47
|
+
const M = () => {
|
|
43
48
|
B({
|
|
44
|
-
audioInput:
|
|
45
|
-
audioOutput:
|
|
46
|
-
videoInput:
|
|
49
|
+
audioInput: f !== void 0 ? f : m[0],
|
|
50
|
+
audioOutput: b !== void 0 ? b : p[0],
|
|
51
|
+
videoInput: E !== void 0 ? E : _[0]
|
|
47
52
|
});
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
},
|
|
51
|
-
|
|
53
|
+
}, $ = () => {
|
|
54
|
+
D();
|
|
55
|
+
}, q = (t) => {
|
|
56
|
+
O(m.find((d) => d.deviceId === t));
|
|
52
57
|
}, w = (t) => {
|
|
53
|
-
|
|
58
|
+
A(p.find((d) => d.deviceId === t));
|
|
54
59
|
}, y = (t) => {
|
|
55
|
-
|
|
60
|
+
F(_.find((d) => d.deviceId === t));
|
|
56
61
|
}, V = () => {
|
|
57
|
-
|
|
62
|
+
D();
|
|
58
63
|
};
|
|
59
|
-
return u ? /* @__PURE__ */ e.createElement("div", { className:
|
|
64
|
+
return u ? /* @__PURE__ */ e.createElement("div", { className: a.background, ...g ? { onClick: V } : {} }, /* @__PURE__ */ e.createElement(
|
|
60
65
|
"div",
|
|
61
66
|
{
|
|
62
|
-
className:
|
|
63
|
-
...
|
|
67
|
+
className: a.modal,
|
|
68
|
+
...g ? {
|
|
64
69
|
onClick: (t) => t.stopPropagation()
|
|
65
70
|
} : {}
|
|
66
71
|
},
|
|
67
|
-
/* @__PURE__ */ e.createElement("div", { className:
|
|
68
|
-
|
|
72
|
+
/* @__PURE__ */ e.createElement("div", { className: a.deviceLists }, n && /* @__PURE__ */ e.createElement(
|
|
73
|
+
h,
|
|
69
74
|
{
|
|
70
|
-
label:
|
|
75
|
+
label: s,
|
|
71
76
|
devices: m,
|
|
72
|
-
onChange:
|
|
77
|
+
onChange: q
|
|
73
78
|
}
|
|
74
79
|
), c && /* @__PURE__ */ e.createElement(
|
|
75
|
-
|
|
80
|
+
h,
|
|
76
81
|
{
|
|
77
82
|
label: i,
|
|
78
83
|
devices: p,
|
|
79
84
|
onChange: w
|
|
80
85
|
}
|
|
81
86
|
), o && /* @__PURE__ */ e.createElement(
|
|
82
|
-
|
|
87
|
+
h,
|
|
83
88
|
{
|
|
84
|
-
label:
|
|
85
|
-
devices:
|
|
89
|
+
label: v,
|
|
90
|
+
devices: _,
|
|
86
91
|
onChange: y
|
|
87
92
|
}
|
|
88
93
|
)),
|
|
89
|
-
/* @__PURE__ */ e.createElement("div", { className:
|
|
94
|
+
/* @__PURE__ */ e.createElement("div", { className: a.buttons }, /* @__PURE__ */ e.createElement(k, { className: a.cancelButton, onClick: $ }, L), /* @__PURE__ */ e.createElement(k, { className: a.confirmButton, onClick: M }, I))
|
|
90
95
|
)) : /* @__PURE__ */ e.createElement(e.Fragment, null);
|
|
91
96
|
};
|
|
92
97
|
export {
|
|
93
|
-
|
|
98
|
+
X as SelectMediaDevicesModal
|
|
94
99
|
};
|
|
@@ -1 +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:"
|
|
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_2h4vl_1",modal:"_modal_2h4vl_13",deviceLists:"_deviceLists_2h4vl_19",buttons:"_buttons_2h4vl_23",chancelButton:"_chancelButton_2h4vl_30",confirmButton:"_confirmButton_2h4vl_32"},I=()=>{const[n,i]=e.useState([]);return[n,()=>{(async()=>{const a=await navigator.mediaDevices.getUserMedia({audio:!0,video:!0}),d=await navigator.mediaDevices.enumerateDevices();i(d),a.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 a=o=>{u(o.target.value)},d=`device-select-${i.toLowerCase().replace(/\s/g,"-")}`;return e.createElement("div",{className:_.deviceList},e.createElement("label",{htmlFor:d},i),e.createElement("select",{className:_.select,id:d,onChange:a},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),N=({isSelectAudioInput:n=!0,isSelectAudioOutput:i=!0,isSelectVideoInput:u=!0,open:a,audioInputDeviceLabel:d="audio input device",audioOutputDeviceLabel:o="audio output device",videoInputDeviceLabel:v="video input device",confirmButtonText:M="Confirm",cancelButtonText:S="Cancel",allowOutsideClick:b=!0,onDeviceSelected:y,onDeviceSelectCanceled:D})=>{const[m,O]=I(),[E,A]=e.useState(),[C,T]=e.useState(),[k,j]=e.useState(),p=m.filter(t=>t.kind==="audioinput"),f=m.filter(t=>t.kind==="audiooutput"),h=m.filter(t=>t.kind==="videoinput");e.useEffect(()=>{O()},[]);const q=()=>{y({audioInput:E!==void 0?E:p[0],audioOutput:C!==void 0?C:f[0],videoInput:k!==void 0?k:h[0]})},F=()=>{D()},$=t=>{A(p.find(l=>l.deviceId===t))},w=t=>{T(f.find(l=>l.deviceId===t))},x=t=>{j(h.find(l=>l.deviceId===t))},P=()=>{D()};return a?e.createElement("div",{className:s.background,...b?{onClick:P}:{}},e.createElement("div",{className:s.modal,...b?{onClick:t=>t.stopPropagation()}:{}},e.createElement("div",{className:s.deviceLists},n&&e.createElement(r,{label:d,devices:p,onChange:$}),i&&e.createElement(r,{label:o,devices:f,onChange:w}),u&&e.createElement(r,{label:v,devices:h,onChange:x})),e.createElement("div",{className:s.buttons},e.createElement(g,{className:s.cancelButton,onClick:F},S),e.createElement(g,{className:s.confirmButton,onClick:q},M)))):e.createElement(e.Fragment,null)};c.SelectMediaDevicesModal=N,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._background_2h4vl_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;display:flex;align-items:center;justify-content:center}._modal_2h4vl_13{background:white;padding:16px;border-radius:8px}._deviceLists_2h4vl_19{display:grid}._buttons_2h4vl_23{padding-top:16px;display:flex;align-items:center;justify-content:right}._confirmButton_2h4vl_32{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}
|