main 🧊 fix use device list

Author: debabin

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siberiacancode/reactuse",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "The ultimate collection of react hooks",
   "author": {
     "name": "SIBERIA CAN CODE 🧊",

packages/core/src/bundle/hooks/useDeviceList/useDeviceList.js

@@ -47,11 +47,13 @@ export const useDeviceList = (...params) => {
     const hasCamera = list.some((device) => device.kind === 'videoinput');
     const hasMicrophone = list.some((device) => device.kind === 'audioinput');
     if (!hasCamera && !hasMicrophone) return update();
-    const stream = await navigator.mediaDevices.getUserMedia({
-      video: hasCamera,
-      audio: hasMicrophone
-    });
-    stream?.getTracks().forEach((track) => track.stop());
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: hasCamera,
+        audio: hasMicrophone
+      });
+      stream.getTracks().forEach((track) => track.stop());
+    } catch {}
     setDevices(list);
     optionsRef.current?.onUpdate?.(list);
     return list;

packages/core/src/hooks/useDeviceList/useDeviceList.ts

@@ -95,12 +95,13 @@ export const useDeviceList = ((...params: any[]) => {
     const hasMicrophone = list.some((device) => device.kind === 'audioinput');
     if (!hasCamera && !hasMicrophone) return update();
 
-    const stream = await navigator.mediaDevices.getUserMedia({
-      video: hasCamera,
-      audio: hasMicrophone
-    });
-
-    stream?.getTracks().forEach((track) => track.stop());
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: hasCamera,
+        audio: hasMicrophone
+      });
+      stream.getTracks().forEach((track) => track.stop());
+    } catch {}
 
     setDevices(list);
     optionsRef.current?.onUpdate?.(list);

packages/newdocs/content/functions/hooks/useMediaStream.meta.json

@@ -135,12 +135,12 @@ const Demo = () => {
             <div ref={dropdownRef} className='relative'>
               <button
                 aria-label='Select camera'
-                className='flex items-center gap-2'
+                className='flex w-44 items-center gap-2'
                 data-variant='secondary'
                 type='button'
                 onClick={() => dropdownMenu.toggle()}
               >
-                <span className='max-w-[120px] truncate text-xs'>
+                <span className='min-w-0 flex-1 truncate text-left text-xs'>
                   {activeCamera?.label || 'Default camera'}
                 </span>
                 <ChevronDownIcon className='size-4' />