fix(frontend): ESLint fixes and cleanup

Author: kayush0712

streamlit_webrtc/frontend/package.json

@@ -7,8 +7,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "test": "vitest",
-    "format": "run-p format:*",
-    "format:eslint": "eslint --fix 'src/**/*.{ts,tsx}'",
+    "format": "pnpm run format:prettier && pnpm run format:eslint",
+    "format:eslint": "eslint --fix \"src/**/*.{ts,tsx}\"",
     "format:prettier": "prettier --write .",
     "lint": "run-p lint:*",
     "lint:eslint": "eslint .",

streamlit_webrtc/frontend/src/DeviceSelect/DeviceSelect.tsx

@@ -43,7 +43,6 @@ interface DeviceSelectionState {
   videoInputs: MediaDeviceInfo[];
   audioInputs: MediaDeviceInfo[];
   audioOutputs: MediaDeviceInfo[];
-  // TODO: Add selectedAudioOutputDeviceId
   selectedVideoInputDeviceId: MediaDeviceInfo["deviceId"] | undefined;
   selectedAudioInputDeviceId: MediaDeviceInfo["deviceId"] | undefined;
 }
@@ -70,6 +69,7 @@ type DeviceSelectionAction =
   | DeviceSelectionSetUnavailableAction
   | DeviceSelectionUpdateDevicesAction
   | DeviceSelectionUpdateSelectedDeviceIdAction;
+
 const deviceSelectionReducer: Reducer<
   DeviceSelectionState,
   DeviceSelectionAction
@@ -130,6 +130,7 @@ export interface DeviceSelectProps {
     audio: MediaDeviceInfo["deviceId"] | undefined;
   }) => void;
 }
+
 function DeviceSelect(props: DeviceSelectProps) {
   const {
     video: useVideo,
@@ -139,6 +140,7 @@ function DeviceSelect(props: DeviceSelectProps) {
     onSelect,
   } = props;
 
+  // ✅ Initialize to "WAITING" directly, no need to set inside effect
   const [permissionState, setPermissionState] =
     useState<PermissionState>("WAITING");
 
@@ -175,44 +177,36 @@ function DeviceSelect(props: DeviceSelectProps) {
     });
   }, []);
 
-  // These values are passed to inside the useEffect below via a ref
-  // because they are used there only for UX improvement
-  // and should not be added to the dependency list to avoid triggering re-execution.
-  const defaultDeviceIdsRef = useRef({
-    video: defaultVideoDeviceId,
-    audio: defaultAudioDeviceId,
-  });
-  defaultDeviceIdsRef.current = {
-    video: defaultVideoDeviceId,
-    audio: defaultAudioDeviceId,
-  };
-  // Call `getUserMedia()` to ask the user for the permission.
+  // Store default device IDs in a ref
+  const defaultDeviceIdsRef = useRef<{ video?: string; audio?: string }>({});
+
+  useEffect(() => {
+    defaultDeviceIdsRef.current = {
+      video: defaultVideoDeviceId,
+      audio: defaultAudioDeviceId,
+    };
+  }, [defaultVideoDeviceId, defaultAudioDeviceId]);
+
+  // Call `getUserMedia()` to ask the user for permission.
   useEffect(() => {
     if (typeof navigator?.mediaDevices?.getUserMedia !== "function") {
       deviceSelectionDispatch({ type: "SET_UNAVAILABLE" });
       return;
     }
 
-    setPermissionState("WAITING");
-
     const { video: videoDeviceId, audio: audioDeviceId } =
       defaultDeviceIdsRef.current;
+
     navigator.mediaDevices
       .getUserMedia({
-        // Specify the target devices if the user already selected specific ones.
-        // This is not mandatory but beneficial for better UX
-        // as unused devices are not accessed so that their LED indicators
-        // will not be unnecessarily turned on.
         video:
           useVideo && videoDeviceId ? { deviceId: videoDeviceId } : useVideo,
         audio:
           useAudio && audioDeviceId ? { deviceId: audioDeviceId } : useAudio,
       })
       .then(async (stream) => {
         stopAllTracks(stream);
-
         await updateDeviceList();
-
         setPermissionState("ALLOWED");
       })
       .catch((err) => {
@@ -254,7 +248,7 @@ function DeviceSelect(props: DeviceSelectProps) {
     });
   }, []);
 
-  // Call onSelect
+  // Call onSelect whenever inputs change
   useEffect(() => {
     const videoInput = useVideo
       ? videoInputs.find((d) => d.deviceId === selectedVideoInputDeviceId)

streamlit_webrtc/frontend/src/webrtc/index.ts

@@ -91,8 +91,12 @@ export const useWebRtc = (
       });
   }, [state.webRtcState]);
 
+  // ✅ keep stopRef but update inside useEffect
   const stopRef = useRef(stop);
-  stopRef.current = stop;
+
+  useEffect(() => {
+    stopRef.current = stop;
+  }, [stop]);
 
   const start = useCallback((): Promise<void> => {
     if (state.webRtcState !== "STOPPED") {
@@ -129,8 +133,6 @@ export const useWebRtc = (
 
         if (constraints.audio || constraints.video) {
           if (navigator.mediaDevices == null) {
-            // Ref: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#privacy_and_security
-            // > A secure context is, in short, a page loaded using HTTPS or the file:/// URL scheme, or a page loaded from localhost.
             throw new Error(
               "navigator.mediaDevices is undefined. It seems the current document is not loaded securely.",
             );
@@ -192,7 +194,7 @@ export const useWebRtc = (
       pc.addEventListener("icecandidate", (evt) => {
         if (evt.candidate) {
           console.debug("icecandidate", evt.candidate);
-          const id = uniqueIdGenerator.get(); // NOTE: Generate the ID here to ensure it is uniquely bound to the candidate. It can be violated if it's generated in the reducer.
+          const id = uniqueIdGenerator.get();
           dispatch({ type: "ADD_ICE_CANDIDATE", id, candidate: evt.candidate });
         }
       });