react-select-media-devices-modal 0.0.1 → 0.0.3

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

@@ -0,0 +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 = {
+  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());
+    })();
+  }];
+}, z = ({ name: n, value: c }) => /* @__PURE__ */ e.createElement("option", { value: c }, n), g = ({ devices: n, label: c, onChange: a }) => {
+  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 = ({
+  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,
+  onDeviceSelected: B,
+  onDeviceSelectCanceled: k
+}) => {
+  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(() => {
+    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]
+    });
+  }, F = () => {
+    k();
+  }, 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();
+  };
+  return s ? /* @__PURE__ */ e.createElement("div", { className: o.background, ...D ? { onClick: j } : {} }, /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: o.modal,
+      ...D ? {
+        onClick: (t) => t.stopPropagation()
+      } : {}
+    },
+    /* @__PURE__ */ e.createElement("div", { className: o.deviceLists }, n && /* @__PURE__ */ e.createElement(
+      g,
+      {
+        label: i,
+        devices: v,
+        onChange: M
+      }
+    ), c && /* @__PURE__ */ e.createElement(
+      g,
+      {
+        label: u,
+        devices: m,
+        onChange: y
+      }
+    ), a && /* @__PURE__ */ e.createElement(
+      g,
+      {
+        label: C,
+        devices: p,
+        onChange: V
+      }
+    )),
+    /* @__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(e.Fragment, null);
+};
+export {
+  J as SelectMediaDevicesModal
+};

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

@@ -0,0 +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"})});

package/dist/style.css

@@ -0,0 +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}

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

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface ButtonProps {
+    className: string;
+    children: ReactNode;
+    onClick: () => void;
+}
+declare const Button: ({ className, children, onClick }: ButtonProps) => JSX.Element;
+export default Button;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface DeviceItemProps {
+    name: string;
+    value: string;
+}
+declare const DeviceItem: ({ name, value }: DeviceItemProps) => JSX.Element;
+export default DeviceItem;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface DeviceListProps {
+    devices: MediaDeviceInfo[];
+    label: string;
+    onChange: (deviceId: string) => void;
+}
+declare const DeviceList: ({ devices, label, onChange }: DeviceListProps) => JSX.Element;
+export default DeviceList;

package/dist/types/SelectMediaDevicesModal/hooks/getDevices.d.ts

@@ -0,0 +1 @@
+export declare const useGetDevices: () => [MediaDeviceInfo[], () => void];

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+interface SelectMediaDevicesModalProps {
+    isSelectAudioInput: boolean;
+    isSelectAudioOutput: boolean;
+    isSelectVideoInput: boolean;
+    open: boolean;
+    audioInputDeviceLabel: string;
+    audioOutputDeviceLabel: string;
+    videoInputDeviceLabel: string;
+    ConfirmButtonText: string;
+    CancelButtonText: string;
+    allowOutsideClick: boolean;
+    onDeviceSelected: (devices: {
+        audioInput?: MediaDeviceInfo;
+        audioOutput?: MediaDeviceInfo;
+        videoInput?: MediaDeviceInfo;
+    }) => void;
+    onDeviceSelectCanceled: () => void;
+}
+declare const SelectMediaDevicesModal: ({ isSelectAudioInput, isSelectAudioOutput, isSelectVideoInput, open, audioInputDeviceLabel, audioOutputDeviceLabel, videoInputDeviceLabel, ConfirmButtonText, CancelButtonText, allowOutsideClick, onDeviceSelected, onDeviceSelectCanceled, }: SelectMediaDevicesModalProps) => JSX.Element;
+export default SelectMediaDevicesModal;

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export { default as SelectMediaDevicesModal } from './SelectMediaDevicesModal';

package/package.json

@@ -1,7 +1,8 @@
 {
     "name": "react-select-media-devices-modal",
     "description": "A React component library for select media devices",
-    "version": "0.0.1",
+    "version": "0.0.3",
+    "license": "MIT",
     "main": "./dist/react-select-media-devices-modal.umd.js",
     "module": "./dist/react-select-media-devices-modal.mjs",
     "types": "./dist/types/index.d.ts",
@@ -15,6 +16,14 @@
     "files": [
         "dist"
     ],
+    "keywords": [
+        "react",
+        "modal",
+        "compoennt",
+        "mediadevices",
+        "getusermedia",
+        "enumeratedevices"
+    ],
     "scripts": {
         "dev": "vite serve example",
         "build": "vite build"