Function SensorStatusBar

app/src/components/SensorBarStatus.tsx:14–36

()

);

const SensorStatusBar: React.FC = () => {
  const [streams, setStreams] = useState<StreamState>(() => StreamManager.getCurrentState());

  useEffect(() => {
    const handleStreamUpdate = (newState: StreamState) => {
      setStreams(newState);
    };
    StreamManager.addListener(handleStreamUpdate);
    return () => {
      StreamManager.removeListener(handleStreamUpdate);
    };
  }, []);

  return (
    <div className="fixed bottom-0 left-1/2 -translate-x-1/2 mb-4 px-4 py-2 bg-gray-800 bg-opacity-80 backdrop-blur-sm rounded-lg shadow-lg border border-gray-700">
      <div className="flex items-center gap-4">
        <SensorIcon Icon={Monitor} isActive={!!streams.screenVideoStream} label="Screen Sharing" />
        <SensorIcon Icon={Video} isActive={!!streams.cameraStream} label="Camera" />
        <SensorIcon Icon={Mic} isActive={!!streams.microphoneStream} label="Microphone" />
      </div>
    </div>
  );
};

export default SensorStatusBar;