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

A React component library for select media devices

(function(A,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],e):(A=typeof globalThis<"u"?globalThis:A||self,e(A.ReactSelectMediaDevicesModal={},A.React))})(this,function(A,e){"use strict";const X=()=>{const[s,g]=e.useState([]);return[s,()=>{(async()=>{const a=await navigator.mediaDevices.getUserMedia({audio:!0,video:!0}),r=await navigator.mediaDevices.enumerateDevices();g(r),a.getTracks().forEach(C=>C.stop())})()}]},y=({name:s,value:g,style:D})=>e.createElement("option",{style:D,value:g},s),j=({devices:s,label:g,selectedDevice:D,style:a,onChange:r})=>{if(s===void 0)return e.createElement(e.Fragment,null);const C=E=>{r(E.target.value)},H=`device-select-${g.toLowerCase().replace(/\s/g,"-")}`,L={deviceList:{paddingTop:"8px"},label:{},select:{marginTop:"4px",borderRadius:"4px",height:"32px",display:"flex",alignItems:"center",justifyContent:"right",width:"100%"},deviceItems:{}},x={deviceList:a?{...L.deviceList,...a.deviceList}:L.deviceList,label:a?{...L.label,...a.label}:L.label,select:a?{...L.select,...a.select}:L.select,deviceItems:a?{...L.deviceItems,...a.deviceItems}:L.deviceItems};return e.createElement("div",{style:x.deviceList},e.createElement("label",{style:x.label,htmlFor:H},g),e.createElement("select",{style:x.select,id:H,onChange:C,defaultValue:D?.deviceId},s.map((E,i)=>e.createElement(y,{style:x.deviceItems,value:E.deviceId,name:E.label,key:i}))))},_=({children:s,disabled:g,style:D,onClick:a})=>{const r={borderRadius:"4px",height:"32px",paddingLeft:"16px",paddingRight:"16px",backgroundColor:"white",borderWidth:"1px"},C=D?{...r,...D}:r;return e.createElement("button",{onClick:a,disabled:g,style:C},s)},R=({isSelectAudioInput:s=!0,isSelectAudioOutput:g=!0,isSelectVideoInput:D=!0,open:a,audioInputDeviceLabel:r="audio input device",audioOutputDeviceLabel:C="audio output device",videoInputDeviceLabel:H="video input device",confirmButtonText:L="Confirm",cancelButtonText:x="Cancel",allowOutsideClick:E=!0,style:i,onDeviceSelected:t,onDeviceSelectCanceled:$})=>{const[B,I]=X(),[S,O]=e.useState(),[W,M]=e.useState(),[V,G]=e.useState(),Q=B.filter(v=>v.kind==="audioinput"),F=B.filter(v=>v.kind==="audiooutput"),T=B.filter(v=>v.kind==="videoinput"),c={background:{position:"fixed",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0, 0, 0, 0.3)",display:"flex",alignItems:"center",justifyContent:"center"},modal:{background:"white",padding:"16px",borderRadius:"8px",minWidth:"270px"},deviceLists:{display:"grid"},audioInputDeviceList:{},audioOutputDeviceList:{},videoInputDeviceList:{},buttons:{paddingTop:"16px",display:"flex",alignItems:"center",justifyContent:"right"},cancelButton:{},confirmButton:{marginLeft:"4px"}},[f,h]=e.useState({background:i?{...c.background,...i.background}:c.background,modal:i?{...c.modal,...i.modal}:c.modal,deviceLists:i?{...c.deviceLists,...i.deviceLists}:c.deviceLists,audioInputDeviceList:i?{...c.audioInputDeviceList,...i.audioInputDeviceList}:{},audioOutputDeviceList:i?{...c.audioOutputDeviceList,...i.audioOutputDeviceList}:{},videoInputDeviceList:i?{...c.videoInputDeviceList,...i.videoInputDeviceList}:{},buttons:i?{...c.buttons,...i.buttons}:c.buttons,cancelButton:i?{...c.cancelButton,...i.cancelButton}:c.cancelButton,confirmButton:i?{...c.confirmButton,...i.confirmButton}:c.confirmButton});e.useEffect(()=>{h({background:i?{...c.background,...i.background}:c.background,modal:i?{...c.modal,...i.modal}:c.modal,deviceLists:i?{...c.deviceLists,...i.deviceLists}:c.deviceLists,audioInputDeviceList:i?{...c.audioInputDeviceList,...i.audioInputDeviceList}:{},audioOutputDeviceList:i?{...c.audioOutputDeviceList,...i.audioOutputDeviceList}:{},videoInputDeviceList:i?{...c.videoInputDeviceList,...i.videoInputDeviceList}:{},buttons:i?{...c.buttons,...i.buttons}:c.buttons,cancelButton:i?{...c.cancelButton,...i.cancelButton}:c.cancelButton,confirmButton:i?{...c.confirmButton,...i.confirmButton}:c.confirmButton})},[i]),e.useEffect(()=>{a?(navigator.mediaDevices.addEventListener("devicechange",I),I()):navigator.mediaDevices.removeEventListener("devicechange",I)},[a]);const p=()=>{t({audioInput:S!==void 0?S:Q[0],audioOutput:W!==void 0?W:F[0],videoInput:V!==void 0?V:T[0]})},q=()=>{$()},d=v=>{O(Q.find(k=>k.deviceId===v))},l=v=>{M(F.find(k=>k.deviceId===v))},U=v=>{G(T.find(k=>k.deviceId===v))},z=()=>{$()};return a?e.createElement("div",{style:f.background,...E?{onClick:z}:{}},e.createElement("div",{style:f.modal,...E?{onClick:v=>v.stopPropagation()}:{}},e.createElement("div",{style:f.deviceLists},s&&e.createElement(j,{style:f?.audioInputDeviceList,label:r,devices:Q,selectedDevice:S,onChange:d}),g&&e.createElement(j,{style:f?.audioOutputDeviceList,label:C,devices:F,selectedDevice:W,onChange:l}),D&&e.createElement(j,{style:f?.videoInputDeviceList,label:H,devices:T,selectedDevice:V,onChange:U})),e.createElement("div",{style:f.buttons},e.createElement(_,{style:f.cancelButton,onClick:q},x),e.createElement(_,{style:f.confirmButton,onClick:p},L)))):e.createElement(e.Fragment,null)},Z=()=>{const[s,g]=e.useState();return e.useEffect(()=>()=>{s!==void 0&&s.getTracks().forEach(r=>r.stop())},[]),[s,r=>{r.kind!=="audiooutput"&&(async()=>{const C=await navigator.mediaDevices.getUserMedia(r.kind==="audioinput"?{video:!1,audio:{deviceId:r.deviceId}}:{video:{deviceId:r.deviceId},audio:!1});g(C)})()},()=>{s!==void 0&&(s.getTracks().forEach(r=>r.stop()),g(void 0))}]},P=({isSelectAudioInput:s=!0,isSelectAudioOutput:g=!0,isSelectVideoInput:D=!0,open:a,audioInputDeviceLabel:r="audio input device",audioOutputDeviceLabel:C="audio output device",videoInputDeviceLabel:H="video input device",confirmButtonText:L="Confirm",cancelButtonText:x="Cancel",allowOutsideClick:E=!0,style:i,onDeviceSelected:t,onDeviceSelectCanceled:$})=>{const[B,I]=X(),[S,O]=e.useState(),[W,M]=e.useState(),[V,G]=e.useState(),[Q,F,T]=Z(),c=e.useRef(null),f=e.useMemo(()=>B.filter(o=>o.kind==="audioinput"),[B]),h=e.useMemo(()=>B.filter(o=>o.kind==="audiooutput"),[B]),p=e.useMemo(()=>B.filter(o=>o.kind==="videoinput"),[B]),q=matchMedia("(max-width: 640px)"),d={background:{position:"fixed",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0, 0, 0, 0.3)",display:"flex",alignItems:"center",justifyContent:"center"},modal:{background:"white",padding:"16px",borderRadius:"8px"},deviceSelectContainer:q.matches?{display:"grid",gridTemplateColumns:"100%"}:{display:"grid",gridTemplateColumns:"50% 50%"},preview:{minWidth:"270px",minHeight:"180px",maxWidth:"270px",maxHeight:"180px",marginRight:"4px"},previewVideo:{width:"270px",height:"180px"},deviceLists:{display:"grid",minWidth:"270px",marginLeft:"8px"},audioInputDeviceList:{},audioOutputDeviceList:{},videoInputDeviceList:{},buttons:{paddingTop:"16px",display:"flex",alignItems:"center",justifyContent:"right"},cancelButton:{},confirmButton:{marginLeft:"4px"}},[l,U]=e.useState({background:i?{...d.background,...i.background}:d.background,modal:i?{...d.modal,...i.modal}:d.modal,deviceSelectContainer:i?{...d.deviceSelectContainer,...i.deviceSelectContainer}:d.deviceSelectContainer,preview:i?{...d.preview,...i.preview}:d.preview,previewVideo:i?{...d.previewVideo,...i.previewVideo}:d.previewVideo,deviceLists:i?{...d.deviceLists,...i.deviceLists}:d.deviceLists,audioInputDeviceList:i?{...d.audioInputDeviceList,...i.audioInputDeviceList}:d.audioInputDeviceList,audioOutputDeviceList:i?{...d.audioOutputDeviceList,...i.audioOutputDeviceList}:d.audioOutputDeviceList,videoInputDeviceList:i?{...d.videoInputDeviceList,...i.videoInputDeviceList}:d.videoInputDeviceList,buttons:i?{...d.buttons,...i.buttons}:d.buttons,cancelButton:i?{...d.cancelButton,...i.cancelButton}:d.cancelButton,confirmButton:i?{...d.confirmButton,...i.confirmButton}:d.confirmButton});e.useEffect(()=>{U({background:i?{...d.background,...i.background}:d.background,modal:i?{...d.modal,...i.modal}:d.modal,deviceSelectContainer:i?{...d.deviceSelectContainer,...i.deviceSelectContainer}:d.deviceSelectContainer,preview:i?{...d.preview,...i.preview}:d.preview,previewVideo:i?{...d.previewVideo,...i.previewVideo}:d.previewVideo,deviceLists:i?{...d.deviceLists,...i.deviceLists}:d.deviceLists,audioInputDeviceList:i?{...d.audioInputDeviceList,...i.audioInputDeviceList}:d.audioInputDeviceList,audioOutputDeviceList:i?{...d.audioOutputDeviceList,...i.audioOutputDeviceList}:d.audioOutputDeviceList,videoInputDeviceList:i?{...d.videoInputDeviceList,...i.videoInputDeviceList}:d.videoInputDeviceList,buttons:i?{...d.buttons,...i.buttons}:d.buttons,cancelButton:i?{...d.cancelButton,...i.cancelButton}:d.cancelButton,confirmButton:i?{...d.confirmButton,...i.confirmButton}:d.confirmButton})},[i]),e.useEffect(()=>{const o=()=>{q.matches?U({...l,deviceSelectContainer:{display:"grid",gridTemplateColumns:"100%"}}):U({...l,deviceSelectContainer:{display:"grid",gridTemplateColumns:"50% 50%"}})};return q.addEventListener("change",o),()=>{q.removeEventListener("change",o)}},[]),e.useEffect(()=>{a?(navigator.mediaDevices.addEventListener("devicechange",I),I()):navigator.mediaDevices.removeEventListener("devicechange",I)},[a]),e.useEffect(()=>{if(p.length<1)return;const o=p.find(w=>w.deviceId===V?.deviceId)??p[0];F(o)},[p]);const z=()=>{T(),t({audioInput:S!==void 0?S:f[0],audioOutput:W!==void 0?W:h[0],videoInput:V!==void 0?V:p[0]})},v=()=>{T(),$()},k=o=>{O(f.find(w=>w.deviceId===o))},n=o=>{M(h.find(w=>w.deviceId===o))},m=o=>{const w=p.find(Y=>Y.deviceId===o);G(w),F(w)};e.useEffect(()=>{const{current:o}=c;o&&(o.srcObject!==null&&o.srcObject instanceof MediaStream&&(o.srcObject.getTracks().forEach(w=>w.stop()),o.pause()),o.srcObject=Q,o.play())},[Q]);const K=()=>{T(),$()};return a?e.createElement("div",{style:l.background,...E?{onClick:K}:{}},e.createElement("div",{style:l.modal,...E?{onClick:o=>o.stopPropagation()}:{}},e.createElement("div",{style:l.deviceSelectContainer},e.createElement("div",{style:l.preview},e.createElement("video",{style:l.previewVideo,ref:c,autoPlay:!0,muted:!0,playsInline:!0})),e.createElement("div",{style:l.deviceLists},s&&e.createElement(j,{style:l.audioInputDeviceList,label:r,devices:f,selectedDevice:S,onChange:k}),g&&e.createElement(j,{style:l?.audioOutputDeviceList,label:C,devices:h,selectedDevice:W,onChange:n}),D&&e.createElement(j,{style:l?.videoInputDeviceList,label:H,devices:p,selectedDevice:V,onChange:m}))),e.createElement("div",{style:l.buttons},e.createElement(_,{style:l.cancelButton,onClick:v},x),e.createElement(_,{style:l.confirmButton,onClick:z},L)))):e.createElement(e.Fragment,null)},ee=({isSelectAudioInput:s=!0,isSelectAudioOutput:g=!0,isSelectVideoInput:D=!0,open:a,audioInputDeviceLabel:r="audio input device",audioOutputDeviceLabel:C="audio output device",videoInputDeviceLabel:H="video input device",confirmButtonText:L="Confirm",cancelButtonText:x="Cancel",recordingButtonText:E="Recording",allowOutsideClick:i=!0,style:t,onDeviceSelected:$,onDeviceSelectCanceled:B})=>{const[I,S]=X(),[O,W]=e.useState(),[M,V]=e.useState(),[G,Q]=e.useState(),[F,T,c]=Z(),f=e.useRef(null),h=e.useRef(null),[p,q]=e.useState(),[d,l]=e.useState(!1),U=e.useMemo(()=>I.filter(u=>u.kind==="audioinput"),[I]),z=e.useMemo(()=>I.filter(u=>u.kind==="audiooutput"),[I]),v=e.useMemo(()=>I.filter(u=>u.kind==="videoinput"),[I]),k=matchMedia("(max-width: 640px)"),n={background:{position:"fixed",top:0,left:0,width:"100%",height:"100%",backgroundColor:"rgba(0, 0, 0, 0.3)",display:"flex",alignItems:"center",justifyContent:"center"},modal:{background:"white",padding:"16px",borderRadius:"8px"},deviceSelectContainer:k.matches?{display:"grid",gridTemplateColumns:"100%"}:{display:"grid",gridTemplateColumns:"50% 50%"},preview:{minWidth:"270px",minHeight:"180px",maxWidth:"270px",marginRight:"4px"},previewVideo:{width:"270px",height:"180px"},previewAudio:{width:"270px"},deviceLists:{display:"grid",minWidth:"270px",marginLeft:"8px"},recordingButtons:{},recordingButton:{},audioInputDeviceList:{},audioOutputDeviceList:{},videoInputDeviceList:{},buttons:{paddingTop:"16px",display:"flex",alignItems:"center",justifyContent:"right"},cancelButton:{},confirmButton:{marginLeft:"4px"}},[m,K]=e.useState({background:t?{...n.background,...t.background}:n.background,modal:t?{...n.modal,...t.modal}:n.modal,deviceSelectContainer:t?{...n.deviceSelectContainer,...t.deviceSelectContainer}:n.deviceSelectContainer,preview:t?{...n.preview,...t.preview}:n.preview,previewVideo:t?{...n.previewVideo,...t.previewVideo}:n.previewVideo,previewAudio:t?{...n.previewAudio,...t.previewAudio}:n.previewAudio,deviceLists:t?{...n.deviceLists,...t.deviceLists}:n.deviceLists,recordingButtons:t?{...n.recordingButtons,...t.recordingButtons}:n.recordingButtons,recordingButton:t?{...n.recordingButton,...t.recordingButton}:n.recordingButton,audioInputDeviceList:t?{...n.audioInputDeviceList,...t.audioInputDeviceList}:n.audioInputDeviceList,audioOutputDeviceList:t?{...n.audioOutputDeviceList,...t.audioOutputDeviceList}:n.audioOutputDeviceList,videoInputDeviceList:t?{...n.videoInputDeviceList,...t.videoInputDeviceList}:n.videoInputDeviceList,buttons:t?{...n.buttons,...t.buttons}:n.buttons,cancelButton:t?{...n.cancelButton,...t.cancelButton}:n.cancelButton,confirmButton:t?{...n.confirmButton,...t.confirmButton}:n.confirmButton});e.useEffect(()=>{K({background:t?{...n.background,...t.background}:n.background,modal:t?{...n.modal,...t.modal}:n.modal,deviceSelectContainer:t?{...n.deviceSelectContainer,...t.deviceSelectContainer}:n.deviceSelectContainer,preview:t?{...n.preview,...t.preview}:n.preview,previewVideo:t?{...n.previewVideo,...t.previewVideo}:n.previewVideo,previewAudio:t?{...n.previewAudio,...t.previewAudio}:n.previewAudio,deviceLists:t?{...n.deviceLists,...t.deviceLists}:n.deviceLists,recordingButtons:t?{...n.recordingButtons,...t.recordingButtons}:n.recordingButtons,recordingButton:t?{...n.recordingButton,...t.recordingButton}:n.recordingButton,audioInputDeviceList:t?{...n.audioInputDeviceList,...t.audioInputDeviceList}:n.audioInputDeviceList,audioOutputDeviceList:t?{...n.audioOutputDeviceList,...t.audioOutputDeviceList}:n.audioOutputDeviceList,videoInputDeviceList:t?{...n.videoInputDeviceList,...t.videoInputDeviceList}:n.videoInputDeviceList,buttons:t?{...n.buttons,...t.buttons}:n.buttons,cancelButton:t?{...n.cancelButton,...t.cancelButton}:n.cancelButton,confirmButton:t?{...n.confirmButton,...t.confirmButton}:n.confirmButton})},[t]),e.useEffect(()=>{const u=()=>{k.matches?K({...m,deviceSelectContainer:{display:"grid",gridTemplateColumns:"100%"}}):K({...m,deviceSelectContainer:{display:"grid",gridTemplateColumns:"50% 50%"}})};return k.addEventListener("change",u),()=>{k.removeEventListener("change",u)}},[]),e.useEffect(()=>{a?(navigator.mediaDevices.addEventListener("devicechange",S),S()):navigator.mediaDevices.removeEventListener("devicechange",S)},[a]),e.useEffect(()=>{if(v.length<1)return;const u=v.find(b=>b.deviceId===G?.deviceId)??v[0];T(u)},[v]);const o=()=>{!p||!h||(p.state==="recording"&&(p.removeEventListener("dataavailable",()=>{}),p.removeEventListener("stop",()=>{}),p.stop(),p.stream.getTracks().forEach(u=>u.stop())),h.current.src="",h.current.pause(),c())},w=()=>{o(),$({audioInput:O!==void 0?O:U[0],audioOutput:M!==void 0?M:z[0],videoInput:G!==void 0?G:v[0]})},Y=()=>{o(),B()},ie=u=>{W(U.find(b=>b.deviceId===u))},te=async u=>{V(z.find(b=>b.deviceId===u)),await h.current.setSinkId(u)},ne=u=>{const b=v.find(J=>J.deviceId===u);Q(b),T(b)},de=async()=>{const u=await navigator.mediaDevices.getUserMedia({audio:O&&O.deviceId!==""?{deviceId:O.deviceId}:!0,video:!1});let b=[];const J=new MediaRecorder(u);J.addEventListener("dataavailable",N=>{b.push(N.data)}),J.addEventListener("stop",async N=>{if(l(!1),!h.current)return;const ue=new Blob(b,{type:"audio/ogg; codecs=opus"});b=[];const oe=URL.createObjectURL(ue);h.current.src=oe,M&&M.deviceId!==""&&await h.current.setSinkId(M.deviceId)}),J.start(),q(J),l(!0),setTimeout(()=>{J.stop(),u.getTracks().forEach(N=>N.stop())},5e3)};e.useEffect(()=>{const{current:u}=f;u&&(u.srcObject!==null&&u.srcObject instanceof MediaStream&&(u.srcObject.getTracks().forEach(b=>b.stop()),u.pause()),u.srcObject=F,u.play())},[F]);const ce=()=>{o(),B()};return a?e.createElement("div",{style:m.background,...i?{onClick:ce}:{}},e.createElement("div",{style:m.modal,...i?{onClick:u=>u.stopPropagation()}:{}},e.createElement("div",{style:m.deviceSelectContainer},e.createElement("div",{style:m.preview},e.createElement("video",{style:m.previewVideo,ref:f,autoPlay:!0,muted:!0,playsInline:!0}),e.createElement("audio",{style:m.previewAudio,ref:h,autoPlay:!0,playsInline:!0,controls:!0})),e.createElement("div",{style:m.deviceLists},s&&e.createElement(e.Fragment,null,e.createElement(j,{style:m.audioInputDeviceList,label:r,devices:U,selectedDevice:O,onChange:ie}),e.createElement("div",{style:m.recordingButtons},e.createElement(_,{style:m.recordingButton,onClick:de,disabled:d},E))),g&&e.createElement(j,{style:m?.audioOutputDeviceList,label:C,devices:z,selectedDevice:M,onChange:te}),D&&e.createElement(j,{style:m?.videoInputDeviceList,label:H,devices:v,selectedDevice:G,onChange:ne}))),e.createElement("div",{style:m.buttons},e.createElement(_,{style:m.cancelButton,onClick:Y},x),e.createElement(_,{style:m.confirmButton,onClick:w},L)))):e.createElement(e.Fragment,null)};A.SelectMediaDevicesModal=R,A.SelectMediaDevicesPreviewModal=P,A.SelectMediaDevicesRecordingModal=ee,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})});