feat(conference) add end conference

Add the ability (for moderators) to end the meeting for everyone.

react/features/toolbox/components/native/Toolbox.js

@@ -18,6 +18,7 @@ import AudioMuteButton from '../AudioMuteButton';
 import HangupButton from '../HangupButton';
 import VideoMuteButton from '../VideoMuteButton';
 
+import HangupMenuButton from './HangupMenuButton';
 import OverflowMenuButton from './OverflowMenuButton';
 import RaiseHandButton from './RaiseHandButton';
 import styles from './styles';
@@ -27,6 +28,11 @@ import styles from './styles';
  */
 type Props = {
 
+    /**
+     * Whether the end conference feature is supported.
+     */
+    _endConferenceSupported: boolean,
+
     /**
      * Whether or not the reactions feature is enabled.
      */
@@ -55,14 +61,14 @@ type Props = {
  * @returns {React$Element}.
  */
 function Toolbox(props: Props) {
-    const { _reactionsEnabled, _styles, _visible, _width } = props;
+    const { _endConferenceSupported, _reactionsEnabled, _styles, _visible, _width } = props;
 
     if (!_visible) {
         return null;
     }
 
     const bottomEdge = Platform.OS === 'ios' && _visible;
-    const { buttonStylesBorderless, hangupButtonStyles, toggledButtonStyles } = _styles;
+    const { buttonStylesBorderless, hangupButtonStyles, hangupMenuButtonStyles, toggledButtonStyles } = _styles;
     const additionalButtons = getMovableButtons(_width);
     const backgroundToggledStyle = {
         ...toggledButtonStyles,
@@ -110,8 +116,13 @@ function Toolbox(props: Props) {
                 <OverflowMenuButton
                     styles = { buttonStylesBorderless }
                     toggledStyles = { toggledButtonStyles } />
-                <HangupButton
-                    styles = { hangupButtonStyles } />
+                { _endConferenceSupported
+                    ? <HangupMenuButton
+                        styles = { hangupMenuButtonStyles }
+                        toggledStyles = { toggledButtonStyles } />
+                    : <HangupButton
+                        styles = { hangupButtonStyles } />
+                }
             </SafeAreaView>
         </View>
     );
@@ -127,7 +138,11 @@ function Toolbox(props: Props) {
  * @returns {Props}
  */
 function _mapStateToProps(state: Object): Object {
+    const { conference } = state['features/base/conference'];
+    const endConferenceSupported = conference?.isEndConferenceSupported();
+
     return {
+        _endConferenceSupported: Boolean(endConferenceSupported),
         _styles: ColorSchemeRegistry.get(state, 'Toolbox'),
         _visible: isToolboxVisible(state),
         _width: state['features/base/responsive-ui'].clientWidth,