feat(native-participants-pane) fixed comment typos and reworks on volume slider

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.

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;
+}

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

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)
             {/* </TouchableOpacity>*/}
             <Divider style = { styles.divider } />
             <VolumeSlider
-                initialValue = { volume }
+                initialValue = { participantsVolume }
                 onChange = { onVolumeChange } />
         </BottomSheet>
     );

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 (
         <View style = { styles.lobbyList }>

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
+    }
+];

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<Props, State> {
         const { palette } = theme;
 
         return (
-            <View style = { styles.volumeSliderContainer }>
+            <View>
                 <Icon
                     size = { 24 }
-                    src = { IconVolumeEmpty }
-                    style = { styles.volumeIcon } />
+                    src = { IconVolumeEmpty } />
                 <Slider
                     maximumTrackTintColor = { palette.field02 }
                     maximumValue = { VOLUME_SLIDER_SCALE }
                     minimumTrackTintColor = { palette.action01 }
                     minimumValue = { 0 }
                     onValueChange = { this._onVolumeChange }
-                    style = { styles.sliderContainer }
                     thumbTintColor = { palette.field02 }
                     value = { volumeLevel } />
             </View>