mirror of https://github.com/jitsi/jitsi-meet
pull/13596/head
jitsi-meet_8833
Mihaela Dumitru
1 year ago
committed by
GitHub
parent
470e987fad
commit
1b7a81afa5
@ -1,43 +1,42 @@ |
|||||||
import React, { useCallback } from 'react'; |
import React, { useCallback } from 'react'; |
||||||
import { WithTranslation } from 'react-i18next'; |
import { useTranslation } from 'react-i18next'; |
||||||
import { connect } from 'react-redux'; |
import { useDispatch } from 'react-redux'; |
||||||
|
|
||||||
import { IStore } from '../../../app/types'; |
|
||||||
import { translate } from '../../../base/i18n/functions'; |
|
||||||
import { IconInfoCircle } from '../../../base/icons/svg'; |
import { IconInfoCircle } from '../../../base/icons/svg'; |
||||||
import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; |
import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; |
||||||
|
import { NOTIFY_CLICK_MODE } from '../../../toolbox/constants'; |
||||||
import { renderConnectionStatus } from '../../actions.web'; |
import { renderConnectionStatus } from '../../actions.web'; |
||||||
|
import { IButtonProps } from '../../types'; |
||||||
|
|
||||||
interface IProps extends WithTranslation { |
/** |
||||||
|
* Implements a React {@link Component} which displays a button that shows |
||||||
/** |
* the connection status for the given participant. |
||||||
* The Redux dispatch function. |
* |
||||||
*/ |
* @returns {JSX.Element} |
||||||
dispatch: IStore['dispatch']; |
|
||||||
|
|
||||||
/** |
|
||||||
* The ID of the participant for which to show connection stats. |
|
||||||
*/ |
*/ |
||||||
participantId: string; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
const ConnectionStatusButton = ({ |
const ConnectionStatusButton = ({ |
||||||
dispatch, |
notifyClick, |
||||||
t |
notifyMode |
||||||
}: IProps) => { |
}: IButtonProps): JSX.Element => { |
||||||
const onClick = useCallback(e => { |
const { t } = useTranslation(); |
||||||
|
const dispatch = useDispatch(); |
||||||
|
|
||||||
|
const handleClick = useCallback(e => { |
||||||
e.stopPropagation(); |
e.stopPropagation(); |
||||||
|
notifyClick?.(); |
||||||
|
if (notifyMode === NOTIFY_CLICK_MODE.PREVENT_AND_NOTIFY) { |
||||||
|
return; |
||||||
|
} |
||||||
dispatch(renderConnectionStatus(true)); |
dispatch(renderConnectionStatus(true)); |
||||||
}, [ dispatch ]); |
}, [ dispatch, notifyClick, notifyMode ]); |
||||||
|
|
||||||
return ( |
return ( |
||||||
<ContextMenuItem |
<ContextMenuItem |
||||||
accessibilityLabel = { t('videothumbnail.connectionInfo') } |
accessibilityLabel = { t('videothumbnail.connectionInfo') } |
||||||
icon = { IconInfoCircle } |
icon = { IconInfoCircle } |
||||||
onClick = { onClick } |
onClick = { handleClick } |
||||||
text = { t('videothumbnail.connectionInfo') } /> |
text = { t('videothumbnail.connectionInfo') } /> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|
||||||
export default translate(connect()(ConnectionStatusButton)); |
export default ConnectionStatusButton; |
||||||
|
|||||||
@ -1,48 +1,48 @@ |
|||||||
import React from 'react'; |
import React, { useCallback } from 'react'; |
||||||
import { connect } from 'react-redux'; |
import { useTranslation } from 'react-i18next'; |
||||||
|
import { useDispatch } from 'react-redux'; |
||||||
|
|
||||||
import { translate } from '../../../base/i18n/functions'; |
import { createToolbarEvent } from '../../../analytics/AnalyticsEvents'; |
||||||
|
import { sendAnalytics } from '../../../analytics/functions'; |
||||||
|
import { openDialog } from '../../../base/dialog/actions'; |
||||||
import { IconMicSlash } from '../../../base/icons/svg'; |
import { IconMicSlash } from '../../../base/icons/svg'; |
||||||
import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; |
import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; |
||||||
import AbstractMuteEveryoneElseButton, { IProps } from '../AbstractMuteEveryoneElseButton'; |
import { NOTIFY_CLICK_MODE } from '../../../toolbox/constants'; |
||||||
|
import { IButtonProps } from '../../types'; |
||||||
|
|
||||||
|
import MuteEveryoneDialog from './MuteEveryoneDialog'; |
||||||
|
|
||||||
/** |
/** |
||||||
* Implements a React {@link Component} which displays a button for audio muting |
* Implements a React {@link Component} which displays a button for audio muting |
||||||
* every participant in the conference except the one with the given |
* every participant in the conference except the one with the given |
||||||
* participantID. |
* participantID. |
||||||
*/ |
|
||||||
class MuteEveryoneElseButton extends AbstractMuteEveryoneElseButton { |
|
||||||
/** |
|
||||||
* Instantiates a new {@code Component}. |
|
||||||
* |
* |
||||||
* @inheritdoc |
* @returns {JSX.Element} |
||||||
*/ |
*/ |
||||||
constructor(props: IProps) { |
const MuteEveryoneElseButton = ({ |
||||||
super(props); |
notifyClick, |
||||||
|
notifyMode, |
||||||
|
participantID |
||||||
|
}: IButtonProps): JSX.Element => { |
||||||
|
const { t } = useTranslation(); |
||||||
|
const dispatch = useDispatch(); |
||||||
|
|
||||||
this._handleClick = this._handleClick.bind(this); |
const handleClick = useCallback(() => { |
||||||
|
notifyClick?.(); |
||||||
|
if (notifyMode === NOTIFY_CLICK_MODE.PREVENT_AND_NOTIFY) { |
||||||
|
return; |
||||||
} |
} |
||||||
|
sendAnalytics(createToolbarEvent('mute.everyoneelse.pressed')); |
||||||
/** |
dispatch(openDialog(MuteEveryoneDialog, { exclude: [ participantID ] })); |
||||||
* Implements React's {@link Component#render()}. |
}, [ dispatch, notifyMode, notifyClick, participantID, sendAnalytics ]); |
||||||
* |
|
||||||
* @inheritdoc |
|
||||||
* @returns {ReactElement} |
|
||||||
*/ |
|
||||||
render() { |
|
||||||
const { t } = this.props; |
|
||||||
|
|
||||||
return ( |
return ( |
||||||
<ContextMenuItem |
<ContextMenuItem |
||||||
accessibilityLabel = { t('toolbar.accessibilityLabel.muteEveryoneElse') } |
accessibilityLabel = { t('toolbar.accessibilityLabel.muteEveryoneElse') } |
||||||
icon = { IconMicSlash } |
icon = { IconMicSlash } |
||||||
// eslint-disable-next-line react/jsx-handler-names
|
onClick = { handleClick } |
||||||
onClick = { this._handleClick } |
|
||||||
text = { t('videothumbnail.domuteOthers') } /> |
text = { t('videothumbnail.domuteOthers') } /> |
||||||
); |
); |
||||||
} |
}; |
||||||
|
|
||||||
_handleClick: () => void; |
|
||||||
} |
|
||||||
|
|
||||||
export default translate(connect()(MuteEveryoneElseButton)); |
export default MuteEveryoneElseButton; |
||||||
|
|||||||
@ -1,48 +1,48 @@ |
|||||||
import React from 'react'; |
import React, { useCallback } from 'react'; |
||||||
import { connect } from 'react-redux'; |
import { useTranslation } from 'react-i18next'; |
||||||
|
import { useDispatch } from 'react-redux'; |
||||||
|
|
||||||
import { translate } from '../../../base/i18n/functions'; |
import { createToolbarEvent } from '../../../analytics/AnalyticsEvents'; |
||||||
|
import { sendAnalytics } from '../../../analytics/functions'; |
||||||
|
import { openDialog } from '../../../base/dialog/actions'; |
||||||
import { IconVideoOff } from '../../../base/icons/svg'; |
import { IconVideoOff } from '../../../base/icons/svg'; |
||||||
import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; |
import ContextMenuItem from '../../../base/ui/components/web/ContextMenuItem'; |
||||||
import AbstractMuteEveryoneElsesVideoButton, { IProps } from '../AbstractMuteEveryoneElsesVideoButton'; |
import { NOTIFY_CLICK_MODE } from '../../../toolbox/constants'; |
||||||
|
import { IButtonProps } from '../../types'; |
||||||
|
|
||||||
|
import MuteEveryonesVideoDialog from './MuteEveryonesVideoDialog'; |
||||||
|
|
||||||
/** |
/** |
||||||
* Implements a React {@link Component} which displays a button for audio muting |
* Implements a React {@link Component} which displays a button for audio muting |
||||||
* every participant in the conference except the one with the given |
* every participant in the conference except the one with the given |
||||||
* participantID. |
* participantID. |
||||||
*/ |
|
||||||
class MuteEveryoneElsesVideoButton extends AbstractMuteEveryoneElsesVideoButton { |
|
||||||
/** |
|
||||||
* Instantiates a new {@code Component}. |
|
||||||
* |
* |
||||||
* @inheritdoc |
* @returns {JSX.Element} |
||||||
*/ |
*/ |
||||||
constructor(props: IProps) { |
const MuteEveryoneElsesVideoButton = ({ |
||||||
super(props); |
notifyClick, |
||||||
|
notifyMode, |
||||||
|
participantID |
||||||
|
}: IButtonProps): JSX.Element => { |
||||||
|
const { t } = useTranslation(); |
||||||
|
const dispatch = useDispatch(); |
||||||
|
|
||||||
this._handleClick = this._handleClick.bind(this); |
const handleClick = useCallback(() => { |
||||||
|
notifyClick?.(); |
||||||
|
if (notifyMode === NOTIFY_CLICK_MODE.PREVENT_AND_NOTIFY) { |
||||||
|
return; |
||||||
} |
} |
||||||
|
sendAnalytics(createToolbarEvent('mute.everyoneelsesvideo.pressed')); |
||||||
/** |
dispatch(openDialog(MuteEveryonesVideoDialog, { exclude: [ participantID ] })); |
||||||
* Implements React's {@link Component#render()}. |
}, [ notifyClick, notifyMode, participantID ]); |
||||||
* |
|
||||||
* @inheritdoc |
|
||||||
* @returns {ReactElement} |
|
||||||
*/ |
|
||||||
render() { |
|
||||||
const { t } = this.props; |
|
||||||
|
|
||||||
return ( |
return ( |
||||||
<ContextMenuItem |
<ContextMenuItem |
||||||
accessibilityLabel = { t('toolbar.accessibilityLabel.muteEveryoneElsesVideoStream') } |
accessibilityLabel = { t('toolbar.accessibilityLabel.muteEveryoneElsesVideoStream') } |
||||||
icon = { IconVideoOff } |
icon = { IconVideoOff } |
||||||
// eslint-disable-next-line react/jsx-handler-names
|
onClick = { handleClick } |
||||||
onClick = { this._handleClick } |
|
||||||
text = { t('videothumbnail.domuteVideoOfOthers') } /> |
text = { t('videothumbnail.domuteVideoOfOthers') } /> |
||||||
); |
); |
||||||
} |
}; |
||||||
|
|
||||||
_handleClick: () => void; |
|
||||||
} |
|
||||||
|
|
||||||
export default translate(connect()(MuteEveryoneElsesVideoButton)); |
export default MuteEveryoneElsesVideoButton; |
||||||
|
|||||||
@ -0,0 +1,18 @@ |
|||||||
|
export interface IButtonProps { |
||||||
|
|
||||||
|
/** |
||||||
|
* Callback to execute when the button is clicked. |
||||||
|
*/ |
||||||
|
notifyClick?: Function; |
||||||
|
|
||||||
|
/** |
||||||
|
* Notify mode for the `participantMenuButtonClicked` event - |
||||||
|
* whether to only notify or to also prevent button click routine. |
||||||
|
*/ |
||||||
|
notifyMode?: string; |
||||||
|
|
||||||
|
/** |
||||||
|
* The ID of the participant that's linked to the button. |
||||||
|
*/ |
||||||
|
participantID: string; |
||||||
|
} |
||||||
Loading…
Reference in new issue