feat(native-participants-pane) review remarks pt 2 volume slider

react/features/filmstrip/functions.native.js

@@ -26,12 +26,3 @@ 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/participants-pane/components/native/ContextMenuMeetingParticipantDetails.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TouchableOpacity, View } from 'react-native';
 import { Divider, Text } from 'react-native-paper';
@@ -20,7 +20,6 @@ import {
 } from '../../../base/participants';
 import { getIsParticipantVideoMuted } from '../../../base/tracks';
 import { openChat } from '../../../chat/actions.native';
-import { getParticipantsVolume } from '../../../filmstrip';
 import {
     KickRemoteParticipantDialog,
     MuteEveryoneDialog,
@@ -40,17 +39,14 @@ type Props = {
 };
 
 export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props) => {
-    const [ volume, setVolume ] = useState(0);
     const dispatch = useDispatch();
     const cancel = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
-    const participantsVolume = useSelector(getParticipantsVolume)[p.id];
-    const changeVolume = useCallback(() => {
-        setVolume(volume + 1);
-    }, [ volume ]);
+    const isStartingSilent = useSelector(getIsStartingSilent);
+    const participantsVolume = 1;
+    const initialParticipantsVolume = isStartingSilent ? undefined : participantsVolume;
     const displayName = p.name;
     const isLocalModerator = useSelector(isLocalParticipantModerator);
     const isParticipantVideoMuted = useSelector(getIsParticipantVideoMuted(p));
-    const isStartingSilent = useSelector(getIsStartingSilent);
 
     const kickRemoteParticipant = useCallback(() => {
         dispatch(openDialog(KickRemoteParticipantDialog, {
@@ -72,7 +68,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
             participantID: p.id
         }));
     }, [ dispatch, p ]);
-    const onVolumeChange = isStartingSilent ? undefined : changeVolume;
+
     const sendPrivateMessage = useCallback(() => {
         dispatch(hideDialog());
         dispatch(openChat(p));
@@ -177,8 +173,7 @@ export const ContextMenuMeetingParticipantDetails = ({ participant: p }: Props)
             {/* </TouchableOpacity>*/}
             <Divider style = { styles.divider } />
             <VolumeSlider
-                initialValue = { participantsVolume }
-                onChange = { onVolumeChange } />
+                initialValue = { initialParticipantsVolume } />
         </BottomSheet>
     );
 };

react/features/participants-pane/components/native/LobbyParticipantList.js

@@ -10,13 +10,12 @@ 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
+        knockingParticipants: participants
     } = useSelector(getLobbyState);
 
     const dispatch = useDispatch();
@@ -25,9 +24,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/video-menu/components/native/VolumeSlider.js

@@ -1,6 +1,7 @@
 // @flow
 
 import Slider from '@react-native-community/slider';
+import _ from 'lodash';
 import React, { Component } from 'react';
 import { View } from 'react-native';
 import { withTheme } from 'react-native-paper';
@@ -20,11 +21,6 @@ type Props = {
      */
     initialValue: number,
 
-    /**
-     * The callback to invoke when the audio slider value changes.
-     */
-    onChange: Function,
-
     /**
      * Theme used for styles.
      */
@@ -49,6 +45,8 @@ type State = {
  * @returns {React$Element<any>}
  */
 class VolumeSlider extends Component<Props, State> {
+    _onVolumeChange: Function;
+    _originalVolumeChange: Function;
 
     /**
      * Initializes a new {@code VolumeSlider} instance.
@@ -63,8 +61,11 @@ class VolumeSlider extends Component<Props, State> {
             volumeLevel: (props.initialValue || 0) * VOLUME_SLIDER_SCALE
         };
 
-        // Bind event handlers so they are only bound once for every instance.
-        this._onVolumeChange = this._onVolumeChange.bind(this);
+        this._originalVolumeChange = this._onVolumeChange;
+
+        this._onVolumeChange = _.throttle(
+            volumeLevel => this._originalVolumeChange(volumeLevel), 500
+        );
     }
 
     /**
@@ -96,8 +97,6 @@ class VolumeSlider extends Component<Props, State> {
         );
     }
 
-    _onVolumeChange: (Object) => void;
-
     /**
      * Sets the internal state of the volume level for the volume slider.
      * Invokes the prop onVolumeChange to notify of volume changes.
@@ -107,9 +106,6 @@ class VolumeSlider extends Component<Props, State> {
      * @returns {void}
      */
     _onVolumeChange(volumeLevel) {
-        const { onChange } = this.props;
-
-        onChange(volumeLevel / VOLUME_SLIDER_SCALE);
         this.setState({ volumeLevel });
     }
 }