feat(rnsdk): add audio and video muted state changed

This commit is contained in:
Abbas Al-Mansoori
2023-11-16 09:28:52 +01:00
committed by Calinteodor
parent a71143891e
commit 6d02f50d09
6 changed files with 94 additions and 4 deletions

View File

@@ -19,6 +19,8 @@ import { setAudioMuted, setVideoMuted } from './react/features/base/media/action
interface IEventListeners {
onAudioMutedChanged?: Function;
onVideoMutedChanged?: Function;
onConferenceBlurred?: Function;
onConferenceFocused?: Function;
onConferenceJoined?: Function;
@@ -107,6 +109,8 @@ export const JitsiMeeting = forwardRef((props: IAppProps, ref) => {
setAppProps({
'flags': flags,
'rnSdkHandlers': {
onAudioMutedChanged: eventListeners?.onAudioMutedChanged,
onVideoMutedChanged: eventListeners?.onVideoMutedChanged,
onConferenceBlurred: eventListeners?.onConferenceBlurred,
onConferenceFocused: eventListeners?.onConferenceFocused,
onConferenceJoined: eventListeners?.onConferenceJoined,

View File

@@ -72,6 +72,24 @@ export const CONFERENCE_BLURRED = 'CONFERENCE_BLURRED';
*/
export const CONFERENCE_FOCUSED = 'CONFERENCE_FOCUSED';
/**
* The type of (redux) action which signals that the audio mute state is changed.
*
* {
* type: AUDIO_MUTED_CHANGED,
* }
*/
export const AUDIO_MUTED_CHANGED = 'AUDIO_MUTED_CHANGED';
/**
* The type of (redux) action which signals that the video mute state is changed.
*
* {
* type: VIDEO_MUTED_CHANGED,
* }
*/
export const VIDEO_MUTED_CHANGED = 'VIDEO_MUTED_CHANGED';
/**
* The type of (redux) action, which indicates conference local subject changes.
*

View File

@@ -10,13 +10,15 @@ import { appNavigate } from '../../app/actions.native';
import { IStore } from '../../app/types';
import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../base/app/actionTypes';
import {
AUDIO_MUTED_CHANGED,
CONFERENCE_BLURRED,
CONFERENCE_FAILED,
CONFERENCE_FOCUSED,
CONFERENCE_JOINED,
CONFERENCE_LEFT,
CONFERENCE_WILL_JOIN,
SET_ROOM
SET_ROOM,
VIDEO_MUTED_CHANGED
} from '../../base/conference/actionTypes';
import { JITSI_CONFERENCE_URL_KEY } from '../../base/conference/constants';
import {
@@ -158,6 +160,16 @@ externalAPIEnabled && MiddlewareRegistry.register(store => next => action => {
sendEvent(store, CONFERENCE_BLURRED, {});
break;
case AUDIO_MUTED_CHANGED:
sendEvent(store, AUDIO_MUTED_CHANGED,
/* data */ { muted: action.muted });
break;
case VIDEO_MUTED_CHANGED:
sendEvent(store, VIDEO_MUTED_CHANGED,
/* data */ { muted: action.muted });
break;
case CONFERENCE_FOCUSED:
sendEvent(store, CONFERENCE_FOCUSED, {});
break;

View File

@@ -2,11 +2,13 @@ import { NativeModules } from 'react-native';
import { getAppProp } from '../../base/app/functions';
import {
AUDIO_MUTED_CHANGED,
CONFERENCE_BLURRED,
CONFERENCE_FOCUSED,
CONFERENCE_JOINED,
CONFERENCE_LEFT,
CONFERENCE_WILL_JOIN
CONFERENCE_WILL_JOIN,
VIDEO_MUTED_CHANGED
} from '../../base/conference/actionTypes';
import { PARTICIPANT_JOINED } from '../../base/participants/actionTypes';
import MiddlewareRegistry from '../../base/redux/MiddlewareRegistry';
@@ -31,6 +33,12 @@ const { JMOngoingConference } = NativeModules;
const rnSdkHandlers = getAppProp(store, 'rnSdkHandlers');
switch (type) {
case AUDIO_MUTED_CHANGED:
rnSdkHandlers?.onAudioMutedChanged && rnSdkHandlers?.onAudioMutedChanged(action.muted);
break;
case VIDEO_MUTED_CHANGED:
rnSdkHandlers?.onVideoMutedChanged && rnSdkHandlers?.onVideoMutedChanged(action.muted);
break;
case CONFERENCE_BLURRED:
rnSdkHandlers?.onConferenceBlurred && rnSdkHandlers?.onConferenceBlurred();
break;

View File

@@ -1,6 +1,30 @@
import { connect } from 'react-redux';
import { AUDIO_MUTED_CHANGED } from '../../../base/conference/actionTypes';
import { translate } from '../../../base/i18n/functions';
import AbstractAudioMuteButton, { IProps, mapStateToProps } from '../AbstractAudioMuteButton';
export default translate(connect(mapStateToProps)(AbstractAudioMuteButton<IProps>));
/**
* Component that renders native toolbar button for toggling audio mute.
*
* @augments AbstractAudioMuteButton
*/
class AudioMuteButton extends AbstractAudioMuteButton<IProps> {
/**
* Changes audio muted state and dispatches the state to redux.
*
* @param {boolean} audioMuted - Whether audio should be muted or not.
* @protected
* @returns {void}
*/
_setAudioMuted(audioMuted: boolean) {
this.props.dispatch?.({
type: AUDIO_MUTED_CHANGED,
muted: audioMuted
});
super._setAudioMuted(audioMuted);
}
}
export default translate(connect(mapStateToProps)(AudioMuteButton));

View File

@@ -1,7 +1,31 @@
import { connect } from 'react-redux';
import { VIDEO_MUTED_CHANGED } from '../../../base/conference/actionTypes';
import { translate } from '../../../base/i18n/functions';
import AbstractVideoMuteButton, { IProps, mapStateToProps } from '../AbstractVideoMuteButton';
/**
* Component that renders native toolbar button for toggling video mute.
*
* @augments AbstractVideoMuteButton
*/
class VideoMuteButton extends AbstractVideoMuteButton<IProps> {
/**
* Changes video muted state and dispatches the state to redux.
*
* @override
* @param {boolean} videoMuted - Whether video should be muted or not.
* @protected
* @returns {void}
*/
_setVideoMuted(videoMuted: boolean) {
this.props.dispatch?.({
type: VIDEO_MUTED_CHANGED,
muted: videoMuted
});
export default translate(connect(mapStateToProps)(AbstractVideoMuteButton<IProps>));
super._setVideoMuted(videoMuted);
}
}
export default translate(connect(mapStateToProps)(VideoMuteButton));