Keep buttons in their associated features

Contributing all buttons in one place goes against the designs that we
set out at the beginning of the project's rewrite and that multiple of
us have been following since then.

react/features/always-on-top/AudioMuteButton.js

@@ -1,10 +1,7 @@
 // @flow
 
-// XXX Import the button directly in order to avoid bringing in other components
-// that use lib-jitsi-meet, which always-on-top does not import.
-import AbstractAudioMuteButton
-    from '../toolbox/components/buttons/AbstractAudioMuteButton';
-import type { Props } from '../toolbox/components/buttons/AbstractButton';
+import { AbstractAudioMuteButton } from '../base/toolbox';
+import type { AbstractButtonProps as Props } from '../base/toolbox';
 
 const { api } = window.alwaysOnTop;
 

react/features/always-on-top/HangupButton.js

@@ -1,10 +1,7 @@
 // @flow
 
-// XXX Import the button directly in order to avoid bringing in other components
-// that use lib-jitsi-meet, which always-on-top does not import.
-import AbstractHangupButton
-    from '../toolbox/components/buttons/AbstractHangupButton';
-import type { Props } from '../toolbox/components/buttons/AbstractButton';
+import { AbstractHangupButton } from '../base/toolbox';
+import type { AbstractButtonProps as Props } from '../base/toolbox';
 
 const { api } = window.alwaysOnTop;
 

react/features/always-on-top/VideoMuteButton.js

@@ -1,10 +1,7 @@
 // @flow
 
-// XXX Import the button directly in order to avoid bringing in other components
-// that use lib-jitsi-meet, which always-on-top does not import.
-import AbstractVideoMuteButton
-    from '../toolbox/components/buttons/AbstractVideoMuteButton';
-import type { Props } from '../toolbox/components/buttons/AbstractButton';
+import { AbstractVideoMuteButton } from '../base/toolbox';
+import type { AbstractButtonProps as Props } from '../base/toolbox';
 
 const { api } = window.alwaysOnTop;
 

react/features/base/toolbox/components/AbstractAudioMuteButton.js

@@ -6,7 +6,9 @@ import type { Props } from './AbstractButton';
 /**
  * An abstract implementation of a button for toggling audio mute.
  */
-class AbstractAudioMuteButton<P: Props, S: *> extends AbstractButton<P, S> {
+export default class AbstractAudioMuteButton<P: Props, S: *>
+    extends AbstractButton<P, S> {
+
     accessibilityLabel = 'Audio mute';
     iconName = 'icon-microphone';
     toggledIconName = 'icon-mic-disabled toggled';
@@ -58,5 +60,3 @@ class AbstractAudioMuteButton<P: Props, S: *> extends AbstractButton<P, S> {
         // To be implemented by subclass.
     }
 }
-
-export default AbstractAudioMuteButton;

react/features/base/toolbox/components/AbstractButton.js

@@ -2,8 +2,8 @@
 
 import React, { Component } from 'react';
 
-import ToolboxItem from '../ToolboxItem';
-import type { Styles } from '../AbstractToolboxItem';
+import type { Styles } from './AbstractToolboxItem';
+import ToolboxItem from './ToolboxItem';
 
 export type Props = {
 

react/features/base/toolbox/components/AbstractHangupButton.js

@@ -6,7 +6,9 @@ import type { Props } from './AbstractButton';
 /**
  * An abstract implementation of a button for disconnecting a conference.
  */
-class AbstractHangupButton<P : Props, S: *> extends AbstractButton<P, S> {
+export default class AbstractHangupButton<P : Props, S: *>
+    extends AbstractButton<P, S> {
+
     accessibilityLabel = 'Hangup';
     iconName = 'icon-hangup';
 
@@ -31,5 +33,3 @@ class AbstractHangupButton<P : Props, S: *> extends AbstractButton<P, S> {
         // To be implemented by subclass.
     }
 }
-
-export default AbstractHangupButton;

react/features/base/toolbox/components/AbstractVideoMuteButton.js

@@ -6,7 +6,9 @@ import type { Props } from './AbstractButton';
 /**
  * An abstract implementation of a button for toggling video mute.
  */
-class AbstractVideoMuteButton<P : Props, S : *> extends AbstractButton<P, S> {
+export default class AbstractVideoMuteButton<P : Props, S : *>
+    extends AbstractButton<P, S> {
+
     accessibilityLabel = 'Video mute';
     iconName = 'icon-camera';
     toggledIconName = 'icon-camera-disabled toggled';
@@ -57,5 +59,3 @@ class AbstractVideoMuteButton<P : Props, S : *> extends AbstractButton<P, S> {
         // To be implemented by subclass.
     }
 }
-
-export default AbstractVideoMuteButton;

react/features/base/toolbox/components/ToolboxItem.native.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { TouchableHighlight } from 'react-native';
 
-import { Icon } from '../../base/font-icons';
+import { Icon } from '../../../base/font-icons';
 
 import AbstractToolboxItem from './AbstractToolboxItem';
 import type { Props } from './AbstractToolboxItem';

react/features/base/toolbox/components/index.js

@@ -0,0 +1,7 @@
+// @flow
+
+export { default as AbstractButton } from './AbstractButton';
+export type { Props as AbstractButtonProps } from './AbstractButton';
+export { default as AbstractAudioMuteButton } from './AbstractAudioMuteButton';
+export { default as AbstractHangupButton } from './AbstractHangupButton';
+export { default as AbstractVideoMuteButton } from './AbstractVideoMuteButton';

react/features/base/toolbox/index.js

@@ -0,0 +1,3 @@
+// @flow
+
+export * from './components';

react/features/filmstrip/components/index.js

@@ -1,3 +1 @@
 export * from './_';
-
-export { default as Filmstrip } from './Filmstrip';

react/features/filmstrip/components/native/AudioMutedIndicator.js

@@ -7,7 +7,7 @@ import styles from './styles';
 /**
  * Thumbnail badge for displaying the audio mute status of a participant.
  */
-export class AudioMutedIndicator extends Component {
+export default class AudioMutedIndicator extends Component {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/filmstrip/components/native/DominantSpeakerIndicator.js

@@ -8,7 +8,7 @@ import styles from './styles';
  * Thumbnail badge showing that the participant is the dominant speaker in
  * the conference.
  */
-export class DominantSpeakerIndicator extends Component {
+export default class DominantSpeakerIndicator extends Component {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/filmstrip/components/native/Filmstrip.js

@@ -4,11 +4,11 @@ import React, { Component } from 'react';
 import { ScrollView } from 'react-native';
 import { connect } from 'react-redux';
 
-import { Container } from '../../base/react';
+import { Container } from '../../../base/react';
 import {
     isNarrowAspectRatio,
     makeAspectRatioAware
-} from '../../base/responsive-ui';
+} from '../../../base/responsive-ui';
 
 import LocalThumbnail from './LocalThumbnail';
 import styles from './styles';

react/features/filmstrip/components/native/LocalThumbnail.js

@@ -4,9 +4,9 @@ import React, { Component } from 'react';
 import { View } from 'react-native';
 import { connect } from 'react-redux';
 
-import { getLocalParticipant } from '../../base/participants';
+import { getLocalParticipant } from '../../../base/participants';
 
-import styles from './styles';
+import styles from '../styles';
 import Thumbnail from './Thumbnail';
 
 type Props = {

react/features/filmstrip/components/native/ModeratorIndicator.js

@@ -6,7 +6,7 @@ import styles from './styles';
 /**
  * Thumbnail badge showing that the participant is a conference moderator.
  */
-export class ModeratorIndicator extends Component {
+export default class ModeratorIndicator extends Component {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/filmstrip/components/native/Thumbnail.js

@@ -2,23 +2,21 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import { Audio, MEDIA_TYPE } from '../../base/media';
+import { Audio, MEDIA_TYPE } from '../../../base/media';
 import {
     PARTICIPANT_ROLE,
     ParticipantView,
     pinParticipant
-} from '../../base/participants';
-import { Container } from '../../base/react';
-import { getTrackByMediaTypeAndParticipant } from '../../base/tracks';
+} from '../../../base/participants';
+import { Container } from '../../../base/react';
+import { getTrackByMediaTypeAndParticipant } from '../../../base/tracks';
 
-import {
-    AudioMutedIndicator,
-    DominantSpeakerIndicator,
-    ModeratorIndicator,
-    styles,
-    VideoMutedIndicator
-} from './_';
-import { AVATAR_SIZE } from './styles';
+import AudioMutedIndicator from './AudioMutedIndicator';
+import DominantSpeakerIndicator from './DominantSpeakerIndicator';
+import ModeratorIndicator from './ModeratorIndicator';
+import { AVATAR_SIZE } from '../styles';
+import styles from './styles';
+import VideoMutedIndicator from './VideoMutedIndicator';
 
 /**
  * React component for video thumbnail.

react/features/filmstrip/components/native/VideoMutedIndicator.js

@@ -7,7 +7,7 @@ import styles from './styles';
 /**
  * Thumbnail badge for displaying the video mute status of a participant.
  */
-export class VideoMutedIndicator extends Component {
+export default class VideoMutedIndicator extends Component {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/filmstrip/components/native/index.js

@@ -1,5 +1,2 @@
-export * from './AudioMutedIndicator';
-export * from './DominantSpeakerIndicator';
-export * from './ModeratorIndicator';
+export { default as Filmstrip } from './Filmstrip';
 export { default as styles } from './styles';
-export * from './VideoMutedIndicator';

react/features/filmstrip/components/native/styles.js

@@ -18,12 +18,6 @@ const indicator = {
  * The styles of the feature filmstrip.
  */
 export default createStyleSheet(platformIndependentStyles, {
-
-    /**
-     * Audio muted indicator style.
-     */
-    thumbnailIndicator: indicator,
-
     dominantSpeakerIndicator: {
         fontSize: 12
     },
@@ -47,5 +41,10 @@ export default createStyleSheet(platformIndependentStyles, {
     thumbnail: {
         height: 80,
         width: 80
-    }
+    },
+
+    /**
+     * Audio muted indicator style.
+     */
+    thumbnailIndicator: indicator
 });

react/features/filmstrip/components/web/Filmstrip.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import { dockToolbox } from '../../toolbox';
+import { dockToolbox } from '../../../toolbox';
 
-import { setFilmstripHovered } from '../actions';
-import { shouldRemoteVideosBeVisible } from '../functions';
+import { setFilmstripHovered } from '../../actions';
+import { shouldRemoteVideosBeVisible } from '../../functions';
 import Toolbar from './Toolbar';
 
 declare var interfaceConfig: Object;

react/features/filmstrip/components/web/Toolbar.js

@@ -3,12 +3,12 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
+import { SettingsButton } from '../../../settings';
 import {
     AudioMuteButton,
     HangupButton,
-    SettingsButton,
     VideoMuteButton
-} from '../../toolbox';
+} from '../../../toolbox';
 
 declare var interfaceConfig: Object;
 

react/features/filmstrip/components/web/index.js

@@ -1,6 +1,7 @@
 export { default as AudioMutedIndicator } from './AudioMutedIndicator';
 export { default as DominantSpeakerIndicator }
     from './DominantSpeakerIndicator';
+export { default as Filmstrip } from './Filmstrip';
 export { default as ModeratorIndicator } from './ModeratorIndicator';
 export { default as RaisedHandIndicator } from './RaisedHandIndicator';
 export { default as VideoMutedIndicator } from './VideoMutedIndicator';

react/features/invite/components/InviteButton.native.js

@@ -2,15 +2,12 @@
 
 import { connect } from 'react-redux';
 
-import {
-    beginAddPeople,
-    isAddPeopleEnabled,
-    isDialOutEnabled
-} from '../../../../invite';
-import { beginShareRoom } from '../../../../share-room';
+import { AbstractButton } from '../../base/toolbox';
+import type { AbstractButtonProps } from '../../base/toolbox';
+import { beginShareRoom } from '../../share-room';
 
-import AbstractButton from '../AbstractButton';
-import type { Props as AbstractButtonProps } from '../AbstractButton';
+import { beginAddPeople } from '../actions';
+import { isAddPeopleEnabled, isDialOutEnabled } from '../functions';
 
 type Props = AbstractButtonProps & {
 

react/features/invite/components/index.js

@@ -1,3 +1,4 @@
 export { default as AddPeopleDialog } from './AddPeopleDialog';
-export { default as InfoDialogButton } from './InfoDialogButton';
 export { DialInSummary } from './dial-in-summary';
+export { default as InfoDialogButton } from './InfoDialogButton';
+export { default as InviteButton } from './InviteButton';

react/features/mobile/audio-mode/components/AudioRouteButton.js

@@ -9,13 +9,12 @@ import {
 } from 'react-native';
 import { connect } from 'react-redux';
 
-import { openDialog } from '../../../../base/dialog';
-import { translate } from '../../../../base/i18n';
-import { AudioRoutePickerDialog } from '../../../../mobile/audio-mode';
-
-import AbstractButton from '../AbstractButton';
-import type { Props as AbstractButtonProps } from '../AbstractButton';
+import { openDialog } from '../../../base/dialog';
+import { translate } from '../../../base/i18n';
+import { AbstractButton } from '../../../base/toolbox';
+import type { AbstractButtonProps } from '../../../base/toolbox';
 
+import AudioRoutePickerDialog from './AudioRoutePickerDialog';
 
 /**
  * The {@code MPVolumeView} React {@code Component}. It will only be available

react/features/mobile/audio-mode/components/index.js

@@ -1,3 +1 @@
-export {
-    default as AudioRoutePickerDialog
-} from './AudioRoutePickerDialog';
+export { default as AudioRouteButton } from './AudioRouteButton';

react/features/mobile/picture-in-picture/components/PictureInPictureButton.js

@@ -2,12 +2,12 @@
 
 import { connect } from 'react-redux';
 
-import { getAppProp } from '../../../../app';
-import { translate } from '../../../../base/i18n';
-import { enterPictureInPicture } from '../../../../mobile/picture-in-picture';
+import { getAppProp } from '../../../app';
+import { translate } from '../../../base/i18n';
+import { AbstractButton } from '../../../base/toolbox';
+import type { AbstractButtonProps } from '../../../base/toolbox';
 
-import AbstractButton from '../AbstractButton';
-import type { Props as AbstractButtonProps } from '../AbstractButton';
+import { enterPictureInPicture } from '../actions';
 
 type Props = AbstractButtonProps & {
 

react/features/mobile/picture-in-picture/components/index.js

@@ -0,0 +1 @@
+export { default as PictureInPictureButton } from './PictureInPictureButton';

react/features/mobile/picture-in-picture/index.js

@@ -1,2 +1,3 @@
 export * from './actions';
 export * from './actionTypes';
+export * from './components';

react/features/room-lock/components/RoomLockButton.js

@@ -2,11 +2,11 @@
 
 import { connect } from 'react-redux';
 
-import { translate } from '../../../../base/i18n';
-import { beginRoomLockRequest } from '../../../../room-lock';
+import { translate } from '../../base/i18n';
+import { AbstractButton } from '../../base/toolbox';
+import type { AbstractButtonProps } from '../../base/toolbox';
 
-import AbstractButton from '../AbstractButton';
-import type { Props as AbstractButtonProps } from '../AbstractButton';
+import { beginRoomLockRequest } from '../actions';
 
 type Props = AbstractButtonProps & {
 
@@ -24,7 +24,7 @@ type Props = AbstractButtonProps & {
      * The redux {@code dispatch} function.
      */
     dispatch: Function
-}
+};
 
 /**
  * An implementation of a button for locking / unlocking a room.

react/features/room-lock/components/index.js

@@ -1,2 +1,3 @@
 export { default as PasswordRequiredPrompt } from './PasswordRequiredPrompt';
+export { default as RoomLockButton } from './RoomLockButton';
 export { default as RoomLockPrompt } from './RoomLockPrompt';

react/features/settings/components/web/SettingsButton.js

@@ -2,13 +2,12 @@
 
 import { connect } from 'react-redux';
 
-import { createToolbarEvent, sendAnalytics } from '../../../../analytics';
-import { translate } from '../../../../base/i18n';
-import { openDeviceSelectionDialog } from '../../../../device-selection';
-import { toggleSettings } from '../../../../side-panel';
-
-import AbstractButton from '../AbstractButton';
-import type { Props as AbstractButtonProps } from '../AbstractButton';
+import { createToolbarEvent, sendAnalytics } from '../../../analytics';
+import { translate } from '../../../base/i18n';
+import { AbstractButton } from '../../../base/toolbox';
+import type { AbstractButtonProps } from '../../../base/toolbox';
+import { openDeviceSelectionDialog } from '../../../device-selection';
+import { toggleSettings } from '../../../side-panel';
 
 declare var interfaceConfig: Object;
 
@@ -28,7 +27,7 @@ type Props = AbstractButtonProps & {
      * The redux {@code dispatch} function.
      */
     dispatch: Function
-}
+};
 
 /**
  * An abstract implementation of a button for accessing settings.

react/features/settings/components/web/index.js

@@ -1 +1,2 @@
+export { default as SettingsButton } from './SettingsButton';
 export { default as SettingsMenu } from './SettingsMenu';

react/features/toolbox/components/AudioMuteButton.js

@@ -6,16 +6,12 @@ import {
     AUDIO_MUTE,
     createToolbarEvent,
     sendAnalytics
-} from '../../../analytics';
-import { translate } from '../../../base/i18n';
-import {
-    MEDIA_TYPE,
-    setAudioMuted
-} from '../../../base/media';
-import { isLocalTrackMuted } from '../../../base/tracks';
-
-import AbstractAudioMuteButton from './AbstractAudioMuteButton';
-import type { Props as AbstractButtonProps } from './AbstractButton';
+} from '../../analytics';
+import { translate } from '../../base/i18n';
+import { MEDIA_TYPE, setAudioMuted } from '../../base/media';
+import { AbstractAudioMuteButton } from '../../base/toolbox';
+import type { AbstractButtonProps } from '../../base/toolbox';
+import { isLocalTrackMuted } from '../../base/tracks';
 
 type Props = AbstractButtonProps & {
 

react/features/toolbox/components/HangupButton.js

@@ -2,14 +2,13 @@
 
 import { connect } from 'react-redux';
 
-import { createToolbarEvent, sendAnalytics } from '../../../analytics';
-import { appNavigate } from '../../../app';
+import { createToolbarEvent, sendAnalytics } from '../../analytics';
+import { appNavigate } from '../../app';
 
-import { disconnect } from '../../../base/connection';
-import { translate } from '../../../base/i18n';
-
-import AbstractHangupButton from './AbstractHangupButton';
-import type { Props as AbstractButtonProps } from './AbstractButton';
+import { disconnect } from '../../base/connection';
+import { translate } from '../../base/i18n';
+import { AbstractHangupButton } from '../../base/toolbox';
+import type { AbstractButtonProps } from '../../base/toolbox';
 
 type Props = AbstractButtonProps & {
 

react/features/toolbox/components/Notice.js

@@ -1,57 +0,0 @@
-/* @flow */
-
-import React, { Component } from 'react';
-
-declare var config: Object;
-
-/**
- * Notice react component.
- *
- * @class Notice
- */
-export default class Notice extends Component<*, *> {
-    state: Object;
-
-    /**
-     * Constructor of Notice component.
-     *
-     * @param {Object} props - The read-only React Component props with which
-     * the new instance is to be initialized.
-     */
-    constructor(props: Object) {
-        super(props);
-
-        const { noticeMessage } = config;
-
-        this.state = {
-            /**
-             * Message to be shown in notice component.
-             *
-             * @type {string}
-             */
-            noticeMessage
-        };
-    }
-
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        const { noticeMessage } = this.state;
-
-        if (!noticeMessage) {
-            return null;
-        }
-
-        return (
-            <div className = 'notice'>
-                <span className = 'notice__message' >
-                    { noticeMessage }
-                </span>
-            </div>
-        );
-    }
-}

react/features/toolbox/components/VideoMuteButton.js

@@ -6,17 +6,16 @@ import {
     VIDEO_MUTE,
     createToolbarEvent,
     sendAnalytics
-} from '../../../analytics';
-import { translate } from '../../../base/i18n';
+} from '../../analytics';
+import { translate } from '../../base/i18n';
 import {
     MEDIA_TYPE,
     VIDEO_MUTISM_AUTHORITY,
     setVideoMuted
-} from '../../../base/media';
-import { isLocalTrackMuted } from '../../../base/tracks';
-
-import AbstractVideoMuteButton from './AbstractVideoMuteButton';
-import type { Props as AbstractButtonProps } from './AbstractButton';
+} from '../../base/media';
+import { AbstractVideoMuteButton } from '../../base/toolbox';
+import type { AbstractButtonProps } from '../../base/toolbox';
+import { isLocalTrackMuted } from '../../base/tracks';
 
 type Props = AbstractButtonProps & {
 

react/features/toolbox/components/buttons/index.js

@@ -1,5 +0,0 @@
-export * from './_';
-
-export { default as AudioMuteButton } from './AudioMuteButton';
-export { default as HangupButton } from './HangupButton';
-export { default as VideoMuteButton } from './VideoMuteButton';

react/features/toolbox/components/buttons/native/ShareRoomButton.js

@@ -1,50 +0,0 @@
-// @flow
-
-import { connect } from 'react-redux';
-
-import { translate } from '../../../../base/i18n';
-import { beginShareRoom } from '../../../../share-room';
-
-import AbstractButton from '../AbstractButton';
-import type { Props as AbstractButtonProps } from '../AbstractButton';
-
-type Props = AbstractButtonProps & {
-
-    /**
-     * The redux {@code dispatch} function.
-     */
-    dispatch: Function
-}
-
-/**
- * An implementation of a button for sharing a room using the native OS sharing
- * capabilities.
- */
-class ShareRoomButton extends AbstractButton<Props, *> {
-    accessibilityLabel = 'Share room';
-    iconName = 'icon-link';
-    label = 'toolbar.shareRoom';
-
-    /**
-     * Handles clicking / pressing the button, and opens the appropriate dialog.
-     *
-     * @private
-     * @returns {void}
-     */
-    _handleClick() {
-        this.props.dispatch(beginShareRoom());
-    }
-
-    /**
-     * Indicates whether this button is disabled or not.
-     *
-     * @override
-     * @private
-     * @returns {boolean}
-     */
-    _isDisabled() {
-        return false;
-    }
-}
-
-export default translate(connect()(ShareRoomButton));

react/features/toolbox/components/buttons/native/index.js

@@ -1,6 +0,0 @@
-export { default as AudioOnlyButton } from './AudioOnlyButton';
-export { default as AudioRouteButton } from './AudioRouteButton';
-export { default as InviteButton } from './InviteButton';
-export { default as PictureInPictureButton } from './PictureInPictureButton';
-export { default as RoomLockButton } from './RoomLockButton';
-export { default as ToggleCameraButton } from './ToggleCameraButton';

react/features/toolbox/components/buttons/web/index.js

@@ -1 +0,0 @@
-export { default as SettingsButton } from './SettingsButton';

react/features/toolbox/components/index.js

@@ -1,3 +1,6 @@
-export { default as ToolbarButton } from './ToolbarButton';
-export { default as Toolbox } from './Toolbox';
-export * from './buttons';
+// @flow
+
+export * from './_';
+export { default as AudioMuteButton } from './AudioMuteButton';
+export { default as HangupButton } from './HangupButton';
+export { default as VideoMuteButton } from './VideoMuteButton';

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

@@ -2,11 +2,10 @@
 
 import { connect } from 'react-redux';
 
-import { toggleAudioOnly } from '../../../../base/conference';
-import { translate } from '../../../../base/i18n';
-
-import AbstractButton from '../AbstractButton';
-import type { Props as AbstractButtonProps } from '../AbstractButton';
+import { toggleAudioOnly } from '../../../base/conference';
+import { translate } from '../../../base/i18n';
+import { AbstractButton } from '../../../base/toolbox';
+import type { AbstractButtonProps } from '../../../base/toolbox';
 
 type Props = AbstractButtonProps & {
 
@@ -19,7 +18,7 @@ type Props = AbstractButtonProps & {
      * The redux {@code dispatch} function.
      */
     dispatch: Function
-}
+};
 
 /**
  * An implementation of a button for toggling the audio-only mode.

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

@@ -2,12 +2,11 @@
 
 import { connect } from 'react-redux';
 
-import { translate } from '../../../../base/i18n';
-import { MEDIA_TYPE, toggleCameraFacingMode } from '../../../../base/media';
-import { isLocalTrackMuted } from '../../../../base/tracks';
-
-import AbstractButton from '../AbstractButton';
-import type { Props as AbstractButtonProps } from '../AbstractButton';
+import { translate } from '../../../base/i18n';
+import { MEDIA_TYPE, toggleCameraFacingMode } from '../../../base/media';
+import { AbstractButton } from '../../../base/toolbox';
+import type { AbstractButtonProps } from '../../../base/toolbox';
+import { isLocalTrackMuted } from '../../../base/tracks';
 
 type Props = AbstractButtonProps & {
 
@@ -25,7 +24,7 @@ type Props = AbstractButtonProps & {
      * The redux {@code dispatch} function.
      */
     dispatch: Function
-}
+};
 
 /**
  * An implementation of a button for toggling the camera facing mode.

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

@@ -3,9 +3,9 @@ import React from 'react';
 import { TouchableHighlight } from 'react-native';
 import { connect } from 'react-redux';
 
-import { Icon } from '../../base/font-icons';
+import { Icon } from '../../../base/font-icons';
 
-import AbstractToolbarButton from './AbstractToolbarButton';
+import AbstractToolbarButton from '../AbstractToolbarButton';
 
 /**
  * Represents a button in {@link Toolbar} on React Native.

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

@@ -4,26 +4,23 @@ import React, { Component } from 'react';
 import { View } from 'react-native';
 import { connect } from 'react-redux';
 
-import { Container } from '../../base/react';
+import { Container } from '../../../base/react';
 import {
     isNarrowAspectRatio,
     makeAspectRatioAware
-} from '../../base/responsive-ui';
-import { ColorPalette } from '../../base/styles';
+} from '../../../base/responsive-ui';
+import { ColorPalette } from '../../../base/styles';
+import { InviteButton } from '../../../invite';
+import { AudioRouteButton } from '../../../mobile/audio-mode';
+import { PictureInPictureButton } from '../../../mobile/picture-in-picture';
+import { RoomLockButton } from '../../../room-lock';
 
+import AudioMuteButton from '../AudioMuteButton';
+import AudioOnlyButton from './AudioOnlyButton';
+import HangupButton from '../HangupButton';
 import styles from './styles';
-
-import {
-    AudioMuteButton,
-    AudioOnlyButton,
-    AudioRouteButton,
-    HangupButton,
-    PictureInPictureButton,
-    RoomLockButton,
-    InviteButton,
-    ToggleCameraButton,
-    VideoMuteButton
-} from './buttons';
+import ToggleCameraButton from './ToggleCameraButton';
+import VideoMuteButton from '../VideoMuteButton';
 
 /**
  * Styles for the hangup button.

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

@@ -0,0 +1,2 @@
+export { default as ToolbarButton } from './ToolbarButton';
+export { default as Toolbox } from './Toolbox';

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

@@ -1,4 +1,4 @@
-import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles';
+import { BoxModel, ColorPalette, createStyleSheet } from '../../../base/styles';
 
 /**
  * The base style for toolbars.

react/features/toolbox/components/web/OverflowMenuButton.js

@@ -2,8 +2,8 @@ import InlineDialog from '@atlaskit/inline-dialog';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
-import { createToolbarEvent, sendAnalytics } from '../../analytics';
-import { translate } from '../../base/i18n';
+import { createToolbarEvent, sendAnalytics } from '../../../analytics';
+import { translate } from '../../../base/i18n';
 
 import ToolbarButton from './ToolbarButton';
 

react/features/toolbox/components/web/OverflowMenuProfileItem.js

@@ -8,7 +8,7 @@ import {
     Avatar,
     getAvatarURL,
     getLocalParticipant
-} from '../../base/participants';
+} from '../../../base/participants';
 
 /**
  * A React {@code Component} for displaying a link with a profile avatar as an

react/features/toolbox/components/web/ToolbarButton.js

@@ -2,7 +2,7 @@ import Tooltip from '@atlaskit/tooltip';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import AbstractToolbarButton from './AbstractToolbarButton';
+import AbstractToolbarButton from '../AbstractToolbarButton';
 
 /**
  * Represents a button in the toolbar.

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

@@ -8,50 +8,47 @@ import {
     createShortcutEvent,
     createToolbarEvent,
     sendAnalytics
-} from '../../analytics';
-import { openDialog } from '../../base/dialog';
-import { translate } from '../../base/i18n';
+} from '../../../analytics';
+import { openDialog } from '../../../base/dialog';
+import { translate } from '../../../base/i18n';
 import {
     PARTICIPANT_ROLE,
     getLocalParticipant,
     participantUpdated
-} from '../../base/participants';
-import { getLocalVideoTrack, toggleScreensharing } from '../../base/tracks';
-import { ChatCounter } from '../../chat';
-import { toggleDocument } from '../../etherpad';
-import { openFeedbackDialog } from '../../feedback';
+} from '../../../base/participants';
+import { getLocalVideoTrack, toggleScreensharing } from '../../../base/tracks';
+import { ChatCounter } from '../../../chat';
+import { toggleDocument } from '../../../etherpad';
+import { openFeedbackDialog } from '../../../feedback';
 import {
     beginAddPeople,
     InfoDialogButton,
     isAddPeopleEnabled,
     isDialOutEnabled
-} from '../../invite';
-import { openKeyboardShortcutsDialog } from '../../keyboard-shortcuts';
-import { RECORDING_TYPES, toggleRecording } from '../../recording';
-import { toggleSharedVideo } from '../../shared-video';
-import { toggleChat, toggleProfile } from '../../side-panel';
-import { SpeakerStats } from '../../speaker-stats';
+} from '../../../invite';
+import { openKeyboardShortcutsDialog } from '../../../keyboard-shortcuts';
+import { RECORDING_TYPES, toggleRecording } from '../../../recording';
+import { SettingsButton } from '../../../settings';
+import { toggleSharedVideo } from '../../../shared-video';
+import { toggleChat, toggleProfile } from '../../../side-panel';
+import { SpeakerStats } from '../../../speaker-stats';
 import {
     OverflowMenuVideoQualityItem,
     VideoQualityDialog
-} from '../../video-quality';
+} from '../../../video-quality';
 
 import {
     setFullScreen,
     setOverflowMenuVisible,
     setToolbarHovered
-} from '../actions';
-
+} from '../../actions';
+import AudioMuteButton from '../AudioMuteButton';
+import HangupButton from '../HangupButton';
 import OverflowMenuButton from './OverflowMenuButton';
 import OverflowMenuItem from './OverflowMenuItem';
 import OverflowMenuProfileItem from './OverflowMenuProfileItem';
 import ToolbarButton from './ToolbarButton';
-import {
-    AudioMuteButton,
-    HangupButton,
-    SettingsButton,
-    VideoMuteButton
-} from './buttons';
+import VideoMuteButton from '../VideoMuteButton';
 
 type Props = {
 

react/features/toolbox/components/web/index.js

@@ -0,0 +1,2 @@
+export { default as ToolbarButton } from './ToolbarButton';
+export { default as Toolbox } from './Toolbox';