snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/connection-indicator/components/web/ConnectionIndicatorIcon.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { useStyles } from 'tss-react/mui';
+
+import Icon from '../../../base/icons/components/Icon';
+import { IconConnection, IconConnectionInactive } from '../../../base/icons/svg';
+import { useTrackStreamingStatus } from '../../../base/tracks/hooks.any';
+import { ITrack } from '../../../base/tracks/types';
+
+interface IProps {
+
+    /**
+     * An object containing the CSS classes.
+     */
+    classes?: Partial<Record<'icon' | 'inactiveIcon', string>>;
+
+    /**
+     * A CSS class that interprets the current connection status as a color.
+     */
+    colorClass: string;
+
+    /**
+     * Disable/enable inactive indicator.
+     */
+    connectionIndicatorInactiveDisabled: boolean;
+
+    /**
+     * Whether or not the connection status is inactive.
+     */
+    isConnectionStatusInactive: boolean;
+
+    /**
+     * Whether or not the connection status is interrupted.
+     */
+    isConnectionStatusInterrupted?: boolean;
+
+    /**
+     * JitsiTrack instance.
+     */
+    track?: ITrack;
+}
+
+export const ConnectionIndicatorIcon = ({
+    classes,
+    colorClass,
+    connectionIndicatorInactiveDisabled,
+    isConnectionStatusInactive,
+    isConnectionStatusInterrupted,
+    track
+}: IProps) => {
+    const { cx } = useStyles();
+
+    useTrackStreamingStatus(track);
+
+    if (isConnectionStatusInactive) {
+        if (connectionIndicatorInactiveDisabled) {
+            return null;
+        }
+
+        return (
+            <span className = 'connection_ninja'>
+                <Icon
+                    className = { cx(classes?.icon, classes?.inactiveIcon, colorClass) }
+                    size = { 24 }
+                    src = { IconConnectionInactive } />
+            </span>
+        );
+    }
+
+    let emptyIconWrapperClassName = 'connection_empty';
+
+    if (isConnectionStatusInterrupted) {
+        // emptyIconWrapperClassName is used by the torture tests to identify lost connection status handling.
+        emptyIconWrapperClassName = 'connection_lost';
+    }
+
+    return (
+        <span className = { emptyIconWrapperClassName }>
+            <Icon
+                className = { cx(classes?.icon, colorClass) }
+                size = { 16 }
+                src = { IconConnection } />
+        </span>
+    );
+};