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
}
};