Fix(React): Modifies thumbnail icon positions and layout
This commit is contained in:
parent
7722e14117
commit
043fd6e259
|
@ -86,6 +86,8 @@ class Thumbnail extends Component {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const thumbToolbarStyle = styles.thumbnailIndicatorContainer;
|
||||||
|
|
||||||
// We don't render audio in any of the following:
|
// We don't render audio in any of the following:
|
||||||
// 1. The audio (source) is muted. There's no practical reason (that we
|
// 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
|
// know of, anyway) why we'd want to render it given that it's
|
||||||
|
@ -121,11 +123,13 @@ class Thumbnail extends Component {
|
||||||
{ participant.dominantSpeaker
|
{ participant.dominantSpeaker
|
||||||
&& <DominantSpeakerIndicator /> }
|
&& <DominantSpeakerIndicator /> }
|
||||||
|
|
||||||
{ audioMuted
|
<Container style = { thumbToolbarStyle }>
|
||||||
&& <AudioMutedIndicator /> }
|
{ audioMuted
|
||||||
|
&& <AudioMutedIndicator /> }
|
||||||
|
|
||||||
{ videoMuted
|
{ videoMuted
|
||||||
&& <VideoMutedIndicator /> }
|
&& <VideoMutedIndicator /> }
|
||||||
|
</Container>
|
||||||
|
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
|
|
|
@ -16,7 +16,7 @@ export class AudioMutedIndicator extends Component {
|
||||||
return (
|
return (
|
||||||
<Icon
|
<Icon
|
||||||
name = 'microphone-slash'
|
name = 'microphone-slash'
|
||||||
style = { styles.audioMutedIndicator } />
|
style = { styles.thumbnailIndicator } />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,7 @@ export class VideoMutedIndicator extends Component {
|
||||||
return (
|
return (
|
||||||
<Icon
|
<Icon
|
||||||
name = 'eye-slash'
|
name = 'eye-slash'
|
||||||
style = { styles.videoMutedIndicator } />
|
style = { styles.thumbnailIndicator } />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,14 +22,18 @@ export const styles = createStyleSheet(platformIndependentStyles, {
|
||||||
/**
|
/**
|
||||||
* Audio muted indicator style.
|
* Audio muted indicator style.
|
||||||
*/
|
*/
|
||||||
audioMutedIndicator: indicator,
|
thumbnailIndicator: indicator,
|
||||||
|
|
||||||
|
dominantSpeakerIndicator: {
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Dominant speaker indicator background style.
|
* Dominant speaker indicator background style.
|
||||||
*/
|
*/
|
||||||
dominantSpeakerIndicatorBackground: {
|
dominantSpeakerIndicatorBackground: {
|
||||||
borderRadius: 15,
|
borderRadius: 16,
|
||||||
padding: 5
|
padding: 4
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -43,10 +47,5 @@ export const styles = createStyleSheet(platformIndependentStyles, {
|
||||||
thumbnail: {
|
thumbnail: {
|
||||||
height: 80,
|
height: 80,
|
||||||
width: 80
|
width: 80
|
||||||
},
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Video muted indicator style.
|
|
||||||
*/
|
|
||||||
videoMutedIndicator: indicator
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -4,17 +4,6 @@ import { BoxModel, ColorPalette } from '../../base/styles';
|
||||||
* Film strip related styles common to both Web and native.
|
* Film strip related styles common to both Web and native.
|
||||||
*/
|
*/
|
||||||
export const styles = {
|
export const styles = {
|
||||||
/**
|
|
||||||
* Audio muted indicator style.
|
|
||||||
*/
|
|
||||||
audioMutedIndicator: {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
color: ColorPalette.white,
|
|
||||||
left: 20,
|
|
||||||
position: 'absolute',
|
|
||||||
top: 1
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Dominant speaker indicator style.
|
* Dominant speaker indicator style.
|
||||||
*/
|
*/
|
||||||
|
@ -29,10 +18,10 @@ export const styles = {
|
||||||
dominantSpeakerIndicatorBackground: {
|
dominantSpeakerIndicatorBackground: {
|
||||||
backgroundColor: ColorPalette.blue,
|
backgroundColor: ColorPalette.blue,
|
||||||
borderRadius: 15,
|
borderRadius: 15,
|
||||||
bottom: 2,
|
left: 4,
|
||||||
left: 1,
|
|
||||||
padding: 5,
|
padding: 5,
|
||||||
position: 'absolute'
|
position: 'absolute',
|
||||||
|
top: 4
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -63,10 +52,10 @@ export const styles = {
|
||||||
*/
|
*/
|
||||||
moderatorIndicator: {
|
moderatorIndicator: {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
|
bottom: 4,
|
||||||
color: ColorPalette.white,
|
color: ColorPalette.white,
|
||||||
left: 1,
|
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: 1
|
right: 4
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -76,14 +65,40 @@ export const styles = {
|
||||||
alignItems: 'stretch',
|
alignItems: 'stretch',
|
||||||
backgroundColor: ColorPalette.appBackground,
|
backgroundColor: ColorPalette.appBackground,
|
||||||
borderColor: '#424242',
|
borderColor: '#424242',
|
||||||
|
borderRadius: 3,
|
||||||
borderStyle: 'solid',
|
borderStyle: 'solid',
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
flex: 1,
|
flex: 1,
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
|
marginLeft: 2,
|
||||||
|
marginRight: 2,
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
position: 'relative'
|
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.
|
* Pinned video thumbnail style.
|
||||||
*/
|
*/
|
||||||
|
@ -95,16 +110,5 @@ export const styles = {
|
||||||
width: 5
|
width: 5
|
||||||
},
|
},
|
||||||
shadowRadius: 5
|
shadowRadius: 5
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Video muted indicator style.
|
|
||||||
*/
|
|
||||||
videoMutedIndicator: {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
color: ColorPalette.white,
|
|
||||||
left: 35,
|
|
||||||
position: 'absolute',
|
|
||||||
top: 1
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue