85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
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>
|
|
);
|
|
};
|