diff --git a/react/features/base/media/components/native/Video.js b/react/features/base/media/components/native/Video.js index 471de3223..6cb32e4ab 100644 --- a/react/features/base/media/components/native/Video.js +++ b/react/features/base/media/components/native/Video.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import { RTCView } from 'react-native-webrtc'; -import { styles } from './styles'; +import styles from './styles'; /** * The React Native {@link Component} which is similar to Web's diff --git a/react/features/base/media/components/native/VideoTrack.js b/react/features/base/media/components/native/VideoTrack.js index a5ad3dd3f..f9248ac9d 100644 --- a/react/features/base/media/components/native/VideoTrack.js +++ b/react/features/base/media/components/native/VideoTrack.js @@ -3,7 +3,7 @@ import { Animated } from 'react-native'; import { connect } from 'react-redux'; import AbstractVideoTrack from '../AbstractVideoTrack'; -import { styles } from './styles'; +import styles from './styles'; /** * Component that renders video element for a specified video track. diff --git a/react/features/base/media/components/native/styles.js b/react/features/base/media/components/native/styles.js index b1f13f833..274c03edc 100644 --- a/react/features/base/media/components/native/styles.js +++ b/react/features/base/media/components/native/styles.js @@ -1,15 +1,15 @@ import { StyleSheet } from 'react-native'; /** - * Make video element fill its container. + * Make {@code Video} fill its container. */ const video = { flex: 1 }; /** - * Native-specific styles for media components. + * The styles of the feature base/media. */ -export const styles = StyleSheet.create({ +export default StyleSheet.create({ video }); diff --git a/react/features/base/participants/components/ParticipantView.native.js b/react/features/base/participants/components/ParticipantView.native.js index 272f3b4d6..cefea018a 100644 --- a/react/features/base/participants/components/ParticipantView.native.js +++ b/react/features/base/participants/components/ParticipantView.native.js @@ -12,7 +12,7 @@ import { getTrackByMediaTypeAndParticipant } from '../../tracks'; import Avatar from './Avatar'; import { getAvatarURL, getParticipantById } from '../functions'; -import { styles } from './styles'; +import styles from './styles'; /** * Implements a React Component which depicts a specific participant's avatar diff --git a/react/features/base/participants/components/styles.js b/react/features/base/participants/components/styles.js index 23df688f3..f33fea28c 100644 --- a/react/features/base/participants/components/styles.js +++ b/react/features/base/participants/components/styles.js @@ -1,11 +1,11 @@ import { createStyleSheet } from '../../styles'; /** - * The style of the avatar and participant view UI (components). + * The styles of the feature base/participants. */ -export const styles = createStyleSheet({ +export default createStyleSheet({ /** - * ParticipantView style. + * {@code ParticipantView} style. */ participantView: { alignItems: 'stretch', diff --git a/react/features/conference/components/Conference.native.js b/react/features/conference/components/Conference.native.js index 9941de18a..0ac9c4e3e 100644 --- a/react/features/conference/components/Conference.native.js +++ b/react/features/conference/components/Conference.native.js @@ -9,7 +9,7 @@ import { LargeVideo } from '../../large-video'; import { OverlayContainer } from '../../overlay'; import { setToolboxVisible, Toolbox } from '../../toolbox'; -import { styles } from './styles'; +import styles from './styles'; /** * The timeout in milliseconds after which the Toolbox will be hidden. @@ -145,19 +145,21 @@ class Conference extends Component { */} + {/* + * The overlays need to be bellow the Toolbox so that the user + * may tap the ToolbarButtons. + */} + + {/* * The Toolbox is in a stacking layer above the Filmstrip. */} {/* - * The dialogs and overlays are in the topmost stacking layers. - * Generally, the dialogs and overlays should not be visible at - * the same time so it is not really defined which one is above - * the other. + * The dialogs are in the topmost stacking layers. */} - ); } diff --git a/react/features/conference/components/styles.js b/react/features/conference/components/styles.js index 3973a78a7..8962e2c2c 100644 --- a/react/features/conference/components/styles.js +++ b/react/features/conference/components/styles.js @@ -5,11 +5,11 @@ import { } from '../../base/styles'; /** - * The style of the conference UI (component). + * The styles of the feature conference. */ -export const styles = createStyleSheet({ +export default createStyleSheet({ /** - * Conference style. + * {@code Conference} style. */ conference: fixAndroidViewClipping({ alignSelf: 'stretch', diff --git a/react/features/filmstrip/components/native/AudioMutedIndicator.js b/react/features/filmstrip/components/native/AudioMutedIndicator.js index b6597f70d..b6b6591a5 100644 --- a/react/features/filmstrip/components/native/AudioMutedIndicator.js +++ b/react/features/filmstrip/components/native/AudioMutedIndicator.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import Icon from 'react-native-vector-icons/FontAwesome'; -import { styles } from './styles'; +import styles from './styles'; /** * Thumbnail badge for displaying the audio mute status of a participant. diff --git a/react/features/filmstrip/components/native/DominantSpeakerIndicator.js b/react/features/filmstrip/components/native/DominantSpeakerIndicator.js index a8abd6c03..442fc107e 100644 --- a/react/features/filmstrip/components/native/DominantSpeakerIndicator.js +++ b/react/features/filmstrip/components/native/DominantSpeakerIndicator.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import { View } from 'react-native'; import Icon from 'react-native-vector-icons/FontAwesome'; -import { styles } from './styles'; +import styles from './styles'; /** * Thumbnail badge showing that the participant is the dominant speaker in diff --git a/react/features/filmstrip/components/native/ModeratorIndicator.js b/react/features/filmstrip/components/native/ModeratorIndicator.js index ea0bfc9f0..d48be6843 100644 --- a/react/features/filmstrip/components/native/ModeratorIndicator.js +++ b/react/features/filmstrip/components/native/ModeratorIndicator.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import Icon from 'react-native-vector-icons/FontAwesome'; -import { styles } from './styles'; +import styles from './styles'; /** * Thumbnail badge showing that the participant is a conference moderator. diff --git a/react/features/filmstrip/components/native/VideoMutedIndicator.js b/react/features/filmstrip/components/native/VideoMutedIndicator.js index d5b8a1af2..a43ac6ec0 100644 --- a/react/features/filmstrip/components/native/VideoMutedIndicator.js +++ b/react/features/filmstrip/components/native/VideoMutedIndicator.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import Icon from 'react-native-vector-icons/FontAwesome'; -import { styles } from './styles'; +import styles from './styles'; /** * Thumbnail badge for displaying the video mute status of a participant. diff --git a/react/features/filmstrip/components/native/index.js b/react/features/filmstrip/components/native/index.js index 1ef90a3b8..36d8e9696 100644 --- a/react/features/filmstrip/components/native/index.js +++ b/react/features/filmstrip/components/native/index.js @@ -1,5 +1,5 @@ export * from './AudioMutedIndicator'; export * from './DominantSpeakerIndicator'; export * from './ModeratorIndicator'; -export * from './styles'; +export { default as styles } from './styles'; export * from './VideoMutedIndicator'; diff --git a/react/features/filmstrip/components/native/styles.js b/react/features/filmstrip/components/native/styles.js index 33e9e9a92..ded2d7e18 100644 --- a/react/features/filmstrip/components/native/styles.js +++ b/react/features/filmstrip/components/native/styles.js @@ -1,6 +1,6 @@ import { ColorPalette, createStyleSheet } from '../../../base/styles'; -import { styles as platformIndependentStyles } from '../styles'; +import { default as platformIndependentStyles } from '../styles'; /** * The base/default style of indicators such as audioMutedIndicator, @@ -15,9 +15,9 @@ const indicator = { }; /** - * Native-specific styles for the filmstrip. + * The styles of the feature filmstrip. */ -export const styles = createStyleSheet(platformIndependentStyles, { +export default createStyleSheet(platformIndependentStyles, { /** * Audio muted indicator style. diff --git a/react/features/filmstrip/components/styles.js b/react/features/filmstrip/components/styles.js index 1ad2f8931..00850469a 100644 --- a/react/features/filmstrip/components/styles.js +++ b/react/features/filmstrip/components/styles.js @@ -2,9 +2,9 @@ import { Platform } from '../../base/react'; import { BoxModel, ColorPalette } from '../../base/styles'; /** - * Filmstrip related styles common to both Web and native. + * The styles of the feature filmstrip common to both Web and native. */ -export const styles = { +export default { /** * Avatar style. */ diff --git a/react/features/large-video/components/LargeVideo.native.js b/react/features/large-video/components/LargeVideo.native.js index cac3a506c..981255595 100644 --- a/react/features/large-video/components/LargeVideo.native.js +++ b/react/features/large-video/components/LargeVideo.native.js @@ -5,7 +5,7 @@ import { connect } from 'react-redux'; import { ParticipantView } from '../../base/participants'; -import { styles } from './styles'; +import styles from './styles'; /** * Implements a React {@link Component} which represents the large video (a.k.a. diff --git a/react/features/large-video/components/styles.js b/react/features/large-video/components/styles.js index 498e37d3c..a3ac55547 100644 --- a/react/features/large-video/components/styles.js +++ b/react/features/large-video/components/styles.js @@ -1,6 +1,6 @@ import { ColorPalette, createStyleSheet } from '../../base/styles'; -export const styles = createStyleSheet({ +export default createStyleSheet({ /** * The style of the avatar of the participant displayed in largeVideo. It's * an addition to the default style of Avatar. diff --git a/react/features/toolbox/components/Toolbox.native.js b/react/features/toolbox/components/Toolbox.native.js index a2aa182bd..3df47ace6 100644 --- a/react/features/toolbox/components/Toolbox.native.js +++ b/react/features/toolbox/components/Toolbox.native.js @@ -13,7 +13,7 @@ import { abstractMapDispatchToProps, abstractMapStateToProps } from '../functions'; -import { styles } from './styles'; +import styles from './styles'; import ToolbarButton from './ToolbarButton'; /** diff --git a/react/features/toolbox/components/styles.js b/react/features/toolbox/components/styles.js index ebe0490f5..e2419bb41 100644 --- a/react/features/toolbox/components/styles.js +++ b/react/features/toolbox/components/styles.js @@ -70,7 +70,7 @@ const secondaryToolbarButtonIcon = { /** * The (conference) Toolbox/Toolbar related styles. */ -export const styles = createStyleSheet({ +export default createStyleSheet({ /** * The style of the toolbar button in {@link #primaryToolbar} which * hangs the current conference up. diff --git a/react/features/welcome/components/WelcomePage.native.js b/react/features/welcome/components/WelcomePage.native.js index 2da8c9db8..3be938bc5 100644 --- a/react/features/welcome/components/WelcomePage.native.js +++ b/react/features/welcome/components/WelcomePage.native.js @@ -7,7 +7,7 @@ import { Link, Text } from '../../base/react'; import { ColorPalette } from '../../base/styles'; import { AbstractWelcomePage, _mapStateToProps } from './AbstractWelcomePage'; -import { styles } from './styles'; +import styles from './styles'; /** * The URL at which the privacy policy is available to the user. diff --git a/react/features/welcome/components/styles.js b/react/features/welcome/components/styles.js index 5e71578a6..56b510674 100644 --- a/react/features/welcome/components/styles.js +++ b/react/features/welcome/components/styles.js @@ -13,7 +13,7 @@ const TEXT_COLOR = ColorPalette.white; /** * The styles of WelcomePage. */ -export const styles = createStyleSheet({ +export default createStyleSheet({ /** * Join button style. */