diff --git a/react/features/filmStrip/components/Thumbnail.js b/react/features/filmStrip/components/Thumbnail.js index fb39eb521..76880d7dc 100644 --- a/react/features/filmStrip/components/Thumbnail.js +++ b/react/features/filmStrip/components/Thumbnail.js @@ -86,6 +86,8 @@ class Thumbnail extends Component { }; } + const thumbToolbarStyle = styles.thumbnailIndicatorContainer; + // We don't render audio in any of the following: // 1. The audio (source) is muted. There's no practical reason (that we // know of, anyway) why we'd want to render it given that it's @@ -121,11 +123,13 @@ class Thumbnail extends Component { { participant.dominantSpeaker && } - { audioMuted - && } + + { audioMuted + && } - { videoMuted - && } + { videoMuted + && } + ); diff --git a/react/features/filmStrip/components/native/AudioMutedIndicator.js b/react/features/filmStrip/components/native/AudioMutedIndicator.js index 4ad8f8c57..b6597f70d 100644 --- a/react/features/filmStrip/components/native/AudioMutedIndicator.js +++ b/react/features/filmStrip/components/native/AudioMutedIndicator.js @@ -16,7 +16,7 @@ export class AudioMutedIndicator extends Component { return ( + style = { styles.thumbnailIndicator } /> ); } } diff --git a/react/features/filmStrip/components/native/VideoMutedIndicator.js b/react/features/filmStrip/components/native/VideoMutedIndicator.js index 38fb42ad3..d5b8a1af2 100644 --- a/react/features/filmStrip/components/native/VideoMutedIndicator.js +++ b/react/features/filmStrip/components/native/VideoMutedIndicator.js @@ -18,7 +18,7 @@ export class VideoMutedIndicator extends Component { return ( + style = { styles.thumbnailIndicator } /> ); } } diff --git a/react/features/filmStrip/components/native/styles.js b/react/features/filmStrip/components/native/styles.js index 1fd26dc1f..81119b01e 100644 --- a/react/features/filmStrip/components/native/styles.js +++ b/react/features/filmStrip/components/native/styles.js @@ -22,14 +22,18 @@ export const styles = createStyleSheet(platformIndependentStyles, { /** * Audio muted indicator style. */ - audioMutedIndicator: indicator, + thumbnailIndicator: indicator, + + dominantSpeakerIndicator: { + fontSize: 12 + }, /** * Dominant speaker indicator background style. */ dominantSpeakerIndicatorBackground: { - borderRadius: 15, - padding: 5 + borderRadius: 16, + padding: 4 }, /** @@ -43,10 +47,5 @@ export const styles = createStyleSheet(platformIndependentStyles, { thumbnail: { height: 80, width: 80 - }, - - /** - * Video muted indicator style. - */ - videoMutedIndicator: indicator + } }); diff --git a/react/features/filmStrip/components/styles.js b/react/features/filmStrip/components/styles.js index 3e5b5af2d..75474a6ef 100644 --- a/react/features/filmStrip/components/styles.js +++ b/react/features/filmStrip/components/styles.js @@ -4,17 +4,6 @@ import { BoxModel, ColorPalette } from '../../base/styles'; * Film strip related styles common to both Web and native. */ export const styles = { - /** - * Audio muted indicator style. - */ - audioMutedIndicator: { - backgroundColor: 'transparent', - color: ColorPalette.white, - left: 20, - position: 'absolute', - top: 1 - }, - /** * Dominant speaker indicator style. */ @@ -29,10 +18,10 @@ export const styles = { dominantSpeakerIndicatorBackground: { backgroundColor: ColorPalette.blue, borderRadius: 15, - bottom: 2, - left: 1, + left: 4, padding: 5, - position: 'absolute' + position: 'absolute', + top: 4 }, /** @@ -63,10 +52,10 @@ export const styles = { */ moderatorIndicator: { backgroundColor: 'transparent', + bottom: 4, color: ColorPalette.white, - left: 1, position: 'absolute', - top: 1 + right: 4 }, /** @@ -76,14 +65,40 @@ export const styles = { alignItems: 'stretch', backgroundColor: ColorPalette.appBackground, borderColor: '#424242', + borderRadius: 3, borderStyle: 'solid', borderWidth: 1, flex: 1, justifyContent: 'center', + marginLeft: 2, + marginRight: 2, overflow: 'hidden', position: 'relative' }, + /** + * The thumbnail audio and video muted indicator style. + */ + thumbnailIndicator: { + backgroundColor: 'transparent', + color: ColorPalette.white, + paddingLeft: 1, + paddingRight: 1, + position: 'relative' + }, + + /** + * The thumbnails indicator container. + */ + thumbnailIndicatorContainer: { + alignSelf: 'stretch', + bottom: 4, + flex: 1, + flexDirection: 'row', + left: 4, + position: 'absolute' + }, + /** * Pinned video thumbnail style. */ @@ -95,16 +110,5 @@ export const styles = { width: 5 }, shadowRadius: 5 - }, - - /** - * Video muted indicator style. - */ - videoMutedIndicator: { - backgroundColor: 'transparent', - color: ColorPalette.white, - left: 35, - position: 'absolute', - top: 1 } };