diff --git a/react/features/filmstrip/actions.web.js b/react/features/filmstrip/actions.web.js
index 631573ee3..3a7218896 100644
--- a/react/features/filmstrip/actions.web.js
+++ b/react/features/filmstrip/actions.web.js
@@ -137,7 +137,7 @@ export function clickOnVideo(n: number) {
}
/**
- * Sets the volume for a thumnail's audio.
+ * Sets the volume for a thumbnail's audio.
*
* @param {string} participantId - The participant ID asociated with the audio.
* @param {string} volume - The volume level.
diff --git a/react/features/filmstrip/functions.native.js b/react/features/filmstrip/functions.native.js
index 700a58f50..4fb827ea2 100644
--- a/react/features/filmstrip/functions.native.js
+++ b/react/features/filmstrip/functions.native.js
@@ -25,3 +25,13 @@ export function isFilmstripVisible(stateful: Object | Function) {
return getParticipantCountWithFake(state) > 1;
}
+
+/**
+ * Selector used to get participants volume
+ *
+ * @param {Object} state - The global state.
+ * @returns {string}
+ */
+export function getParticipantsVolume(state: Object) {
+ return state['features/filmstrip'].participantsVolume;
+}
diff --git a/react/features/filmstrip/reducer.js b/react/features/filmstrip/reducer.js
index 69b81d54b..b201ee683 100644
--- a/react/features/filmstrip/reducer.js
+++ b/react/features/filmstrip/reducer.js
@@ -31,7 +31,7 @@ const DEFAULT_STATE = {
horizontalViewDimensions: {},
/**
- * The custom audio volume levels per perticipant.
+ * The custom audio volume levels per participant.
*
* @type {Object}
*/
diff --git a/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js b/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js
index 5a22732ba..f99beb947 100644
--- a/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js
+++ b/react/features/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js
@@ -15,9 +15,12 @@ import {
IconMicrophoneEmptySlash,
IconMuteEveryoneElse, IconVideoOff
} from '../../../base/icons';
-import { isLocalParticipantModerator } from '../../../base/participants';
+import {
+ isLocalParticipantModerator
+} from '../../../base/participants';
import { getIsParticipantVideoMuted } from '../../../base/tracks';
import { openChat } from '../../../chat/actions.native';
+import { getParticipantsVolume } from '../../../filmstrip';
import {
KickRemoteParticipantDialog,
MuteEveryoneDialog,
@@ -37,10 +40,13 @@ type Props = {
};
export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props) => {
- const [ volume, setVolume ] = useState(undefined);
+ const [ volume, setVolume ] = useState(0);
const dispatch = useDispatch();
const cancel = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
- const changeVolume = useCallback(() => setVolume(volume), [ setVolume, volume ]);
+ const participantsVolume = useSelector(getParticipantsVolume)[p.id];
+ const changeVolume = useCallback(() => {
+ setVolume(volume + 1);
+ }, [ volume ]);
const displayName = p.name;
const isLocalModerator = useSelector(isLocalParticipantModerator);
const isParticipantVideoMuted = useSelector(getIsParticipantVideoMuted(p));
@@ -171,7 +177,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
{/* */}
);
diff --git a/react/features/participants-pane/components/native/LobbyParticipantList.js b/react/features/participants-pane/components/native/LobbyParticipantList.js
index fe935ac49..8d051fb4a 100644
--- a/react/features/participants-pane/components/native/LobbyParticipantList.js
+++ b/react/features/participants-pane/components/native/LobbyParticipantList.js
@@ -10,12 +10,13 @@ import { admitMultiple } from '../../../lobby/actions.native';
import { getLobbyState } from '../../../lobby/functions';
import { LobbyParticipantItem } from './LobbyParticipantItem';
+import { participants } from './participants';
import styles from './styles';
export const LobbyParticipantList = () => {
const {
lobbyEnabled,
- knockingParticipants: participants
+ knockingParticipants
} = useSelector(getLobbyState);
const dispatch = useDispatch();
@@ -24,9 +25,9 @@ export const LobbyParticipantList = () => {
[ dispatch ]);
const { t } = useTranslation();
- if (!lobbyEnabled || !participants.length) {
- return null;
- }
+ // if (!lobbyEnabled || !participants.length) {
+ // return null;
+ // }
return (
diff --git a/react/features/participants-pane/components/native/participants.js b/react/features/participants-pane/components/native/participants.js
new file mode 100644
index 000000000..2e21ec787
--- /dev/null
+++ b/react/features/participants-pane/components/native/participants.js
@@ -0,0 +1,102 @@
+export const participants = [
+ {
+ audioOutputDeviceId: 'default',
+ avatarURL: undefined,
+ botType: undefined,
+ conference: undefined,
+ connectionStatus: undefined,
+ dominantSpeaker: false,
+ email: undefined,
+ id: 'd0816677',
+ isFakeParticipant: undefined,
+ isJigasi: undefined,
+ loadableAvatarUrl: undefined,
+ local: true,
+ name: 'testuser2',
+ pinned: false,
+ presence: undefined,
+ role: 'moderator',
+ startWithAudioMuted: true,
+ startWithVideoMuted: true
+ },
+ {
+ audioOutputDeviceId: 'default',
+ avatarURL: undefined,
+ botType: undefined,
+ conference: undefined,
+ connectionStatus: undefined,
+ dominantSpeaker: false,
+ email: undefined,
+ id: 'a0496597',
+ isFakeParticipant: undefined,
+ isJigasi: undefined,
+ loadableAvatarUrl: undefined,
+ local: true,
+ name: 'me',
+ pinned: false,
+ presence: undefined,
+ role: 'participant',
+ startWithAudioMuted: true,
+ startWithVideoMuted: false
+ },
+ {
+ audioOutputDeviceId: 'default',
+ avatarURL: undefined,
+ botType: undefined,
+ conference: undefined,
+ connectionStatus: undefined,
+ dominantSpeaker: false,
+ email: undefined,
+ id: 'b01081018',
+ isFakeParticipant: undefined,
+ isJigasi: undefined,
+ loadableAvatarUrl: undefined,
+ local: true,
+ name: 'Tom',
+ pinned: false,
+ presence: undefined,
+ role: 'participant',
+ startWithAudioMuted: true,
+ startWithVideoMuted: false
+ },
+ {
+ audioOutputDeviceId: 'default',
+ avatarURL: undefined,
+ botType: undefined,
+ conference: undefined,
+ connectionStatus: undefined,
+ dominantSpeaker: false,
+ email: undefined,
+ id: 'b0aad221e1',
+ isFakeParticipant: undefined,
+ isJigasi: undefined,
+ loadableAvatarUrl: undefined,
+ local: true,
+ name: 'George',
+ pinned: false,
+ presence: undefined,
+ role: 'participant',
+ startWithAudioMuted: true,
+ startWithVideoMuted: false
+ },
+ {
+ audioOutputDeviceId: 'default',
+ avatarURL: undefined,
+ botType: undefined,
+ conference: undefined,
+ connectionStatus: undefined,
+ dominantSpeaker: false,
+ email: undefined,
+ id: 'c0108301',
+ isFakeParticipant: undefined,
+ isJigasi: undefined,
+ loadableAvatarUrl: undefined,
+ local: true,
+ name: 'Carlin',
+ pinned: false,
+ presence: undefined,
+ role: 'participant',
+ startWithAudioMuted: true,
+ startWithVideoMuted: false
+ }
+];
diff --git a/react/features/video-menu/components/native/VolumeSlider.js b/react/features/video-menu/components/native/VolumeSlider.js
index a8571454a..ffcb9df0f 100644
--- a/react/features/video-menu/components/native/VolumeSlider.js
+++ b/react/features/video-menu/components/native/VolumeSlider.js
@@ -8,8 +8,6 @@ import { withTheme } from 'react-native-paper';
import { Icon, IconVolumeEmpty } from '../../../base/icons';
import { VOLUME_SLIDER_SCALE } from '../../constants';
-import styles from './styles';
-
/**
* The type of the React {@code Component} props of {@link VolumeSlider}.
*/
@@ -81,18 +79,16 @@ class VolumeSlider extends Component {
const { palette } = theme;
return (
-
+
+ src = { IconVolumeEmpty } />