react-select-media-devices-modal 0.0.8 → 0.0.9
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import e, { useState as l, useEffect as
|
|
2
|
-
const x = "
|
|
1
|
+
import e, { useState as l, useEffect as V } from "react";
|
|
2
|
+
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 = {
|
|
3
3
|
background: x,
|
|
4
4
|
modal: G,
|
|
5
5
|
deviceLists: P,
|
|
@@ -10,88 +10,88 @@ const x = "_background_2h4vl_1", G = "_modal_2h4vl_13", P = "_deviceLists_2h4vl_
|
|
|
10
10
|
const [n, c] = l([]);
|
|
11
11
|
return [n, () => {
|
|
12
12
|
(async () => {
|
|
13
|
-
const
|
|
14
|
-
c(
|
|
13
|
+
const o = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), a = await navigator.mediaDevices.enumerateDevices();
|
|
14
|
+
c(a), o.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
18
|
deviceList: H,
|
|
19
19
|
select: J
|
|
20
|
-
},
|
|
20
|
+
}, b = ({ devices: n, label: c, onChange: s }) => {
|
|
21
21
|
if (n === void 0)
|
|
22
22
|
return /* @__PURE__ */ e.createElement(e.Fragment, null);
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
},
|
|
26
|
-
return /* @__PURE__ */ e.createElement("div", { className: C.deviceList }, /* @__PURE__ */ e.createElement("label", { htmlFor:
|
|
23
|
+
const o = (i) => {
|
|
24
|
+
s(i.target.value);
|
|
25
|
+
}, a = `device-select-${c.toLowerCase().replace(/\s/g, "-")}`;
|
|
26
|
+
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 }))));
|
|
27
27
|
}, K = "_button_keu24_1", Q = {
|
|
28
28
|
button: K
|
|
29
|
-
}, k = ({ className: n, children: c, onClick:
|
|
29
|
+
}, k = ({ className: n, children: c, onClick: s }) => /* @__PURE__ */ e.createElement("button", { onClick: s, className: [Q.button, n].filter(Boolean).join(" ") }, c), X = ({
|
|
30
30
|
isSelectAudioInput: n = !0,
|
|
31
31
|
isSelectAudioOutput: c = !0,
|
|
32
|
-
isSelectVideoInput:
|
|
33
|
-
open:
|
|
34
|
-
audioInputDeviceLabel:
|
|
32
|
+
isSelectVideoInput: s = !0,
|
|
33
|
+
open: o,
|
|
34
|
+
audioInputDeviceLabel: a = "audio input device",
|
|
35
35
|
audioOutputDeviceLabel: i = "audio output device",
|
|
36
|
-
videoInputDeviceLabel:
|
|
36
|
+
videoInputDeviceLabel: r = "video input device",
|
|
37
37
|
confirmButtonText: I = "Confirm",
|
|
38
38
|
cancelButtonText: L = "Cancel",
|
|
39
39
|
allowOutsideClick: g = !0,
|
|
40
40
|
onDeviceSelected: B,
|
|
41
41
|
onDeviceSelectCanceled: D
|
|
42
42
|
}) => {
|
|
43
|
-
const [
|
|
44
|
-
|
|
45
|
-
N();
|
|
46
|
-
}, []);
|
|
47
|
-
const
|
|
43
|
+
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");
|
|
44
|
+
V(() => {
|
|
45
|
+
o && N();
|
|
46
|
+
}, [o]);
|
|
47
|
+
const F = () => {
|
|
48
48
|
B({
|
|
49
49
|
audioInput: f !== void 0 ? f : m[0],
|
|
50
|
-
audioOutput:
|
|
50
|
+
audioOutput: h !== void 0 ? h : p[0],
|
|
51
51
|
videoInput: E !== void 0 ? E : _[0]
|
|
52
52
|
});
|
|
53
|
-
},
|
|
53
|
+
}, M = () => {
|
|
54
54
|
D();
|
|
55
|
+
}, $ = (t) => {
|
|
56
|
+
j(m.find((u) => u.deviceId === t));
|
|
55
57
|
}, q = (t) => {
|
|
56
|
-
O(
|
|
58
|
+
O(p.find((u) => u.deviceId === t));
|
|
57
59
|
}, w = (t) => {
|
|
58
|
-
A(
|
|
59
|
-
}, y = (
|
|
60
|
-
F(_.find((d) => d.deviceId === t));
|
|
61
|
-
}, V = () => {
|
|
60
|
+
A(_.find((u) => u.deviceId === t));
|
|
61
|
+
}, y = () => {
|
|
62
62
|
D();
|
|
63
63
|
};
|
|
64
|
-
return
|
|
64
|
+
return o ? /* @__PURE__ */ e.createElement("div", { className: d.background, ...g ? { onClick: y } : {} }, /* @__PURE__ */ e.createElement(
|
|
65
65
|
"div",
|
|
66
66
|
{
|
|
67
|
-
className:
|
|
67
|
+
className: d.modal,
|
|
68
68
|
...g ? {
|
|
69
69
|
onClick: (t) => t.stopPropagation()
|
|
70
70
|
} : {}
|
|
71
71
|
},
|
|
72
|
-
/* @__PURE__ */ e.createElement("div", { className:
|
|
73
|
-
|
|
72
|
+
/* @__PURE__ */ e.createElement("div", { className: d.deviceLists }, n && /* @__PURE__ */ e.createElement(
|
|
73
|
+
b,
|
|
74
74
|
{
|
|
75
|
-
label:
|
|
75
|
+
label: a,
|
|
76
76
|
devices: m,
|
|
77
|
-
onChange:
|
|
77
|
+
onChange: $
|
|
78
78
|
}
|
|
79
79
|
), c && /* @__PURE__ */ e.createElement(
|
|
80
|
-
|
|
80
|
+
b,
|
|
81
81
|
{
|
|
82
82
|
label: i,
|
|
83
83
|
devices: p,
|
|
84
|
-
onChange:
|
|
84
|
+
onChange: q
|
|
85
85
|
}
|
|
86
|
-
),
|
|
87
|
-
|
|
86
|
+
), s && /* @__PURE__ */ e.createElement(
|
|
87
|
+
b,
|
|
88
88
|
{
|
|
89
|
-
label:
|
|
89
|
+
label: r,
|
|
90
90
|
devices: _,
|
|
91
|
-
onChange:
|
|
91
|
+
onChange: w
|
|
92
92
|
}
|
|
93
93
|
)),
|
|
94
|
-
/* @__PURE__ */ e.createElement("div", { className:
|
|
94
|
+
/* @__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))
|
|
95
95
|
)) : /* @__PURE__ */ e.createElement(e.Fragment, null);
|
|
96
96
|
};
|
|
97
97
|
export {
|
|
@@ -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
|
|
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"})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-select-media-devices-modal",
|
|
3
3
|
"description": "A React component library for select media devices",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.9",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
"keywords": [
|
|
26
26
|
"react",
|
|
27
27
|
"modal",
|
|
28
|
+
"webrtc",
|
|
28
29
|
"compoennt",
|
|
29
30
|
"mediadevices",
|
|
30
31
|
"getusermedia",
|