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 } />