163 lines
3.6 KiB
JavaScript
163 lines
3.6 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
|
|
const styles = () =>
|
|
({
|
|
volumeLarge :
|
|
{
|
|
position : 'absolute',
|
|
top : 0,
|
|
bottom : 0,
|
|
right : 2,
|
|
width : 10,
|
|
display : 'flex',
|
|
flexDirection : 'column',
|
|
justifyContent : 'center',
|
|
alignItems : 'center'
|
|
},
|
|
largeBar :
|
|
{
|
|
width : 6,
|
|
borderRadius : 6,
|
|
background : 'rgba(yellow, 0.65)',
|
|
transitionProperty : 'height background-color',
|
|
transitionDuration : '0.25s',
|
|
'&.level0' :
|
|
{
|
|
height : 0,
|
|
backgroundColor : 'rgba(255, 255, 0, 0.65)'
|
|
},
|
|
'&.level1' :
|
|
{
|
|
height : '10%',
|
|
backgroundColor : 'rgba(255, 255, 0, 0.65)'
|
|
},
|
|
'&.level2' :
|
|
{
|
|
height : '20%',
|
|
backgroundColor : 'rgba(255, 255, 0, 0.65)'
|
|
},
|
|
'&.level3' :
|
|
{
|
|
height : '30%',
|
|
backgroundColor : 'rgba(255, 255, 0, 0.65)'
|
|
},
|
|
'&.level4' :
|
|
{
|
|
height : '40%',
|
|
backgroundColor : 'rgba(255, 165, 0, 0.65)'
|
|
},
|
|
'&.level5' :
|
|
{
|
|
height : '50%',
|
|
backgroundColor : 'rgba(255, 165, 0, 0.65)'
|
|
},
|
|
'&.level6' :
|
|
{
|
|
height : '60%',
|
|
backgroundColor : 'rgba(255, 0, 0, 0.65)'
|
|
},
|
|
'&.level7' :
|
|
{
|
|
height : '70%',
|
|
backgroundColor : 'rgba(255, 0, 0, 0.65)'
|
|
},
|
|
'&.level8' :
|
|
{
|
|
height : '80%',
|
|
backgroundColor : 'rgba(0, 0, 0, 0.65)'
|
|
},
|
|
'&.level9' :
|
|
{
|
|
height : '90%',
|
|
backgroundColor : 'rgba(0, 0, 0, 0.65)'
|
|
},
|
|
'&.level10' :
|
|
{
|
|
height : '100%',
|
|
backgroundColor : 'rgba(0, 0, 0, 0.65)'
|
|
}
|
|
},
|
|
volumeSmall :
|
|
{
|
|
float : 'right',
|
|
display : 'flex',
|
|
flexDirection : 'row',
|
|
justifyContent : 'flex-start',
|
|
width : '1vmin',
|
|
position : 'relative',
|
|
backgroundSize : '75%'
|
|
},
|
|
smallBar :
|
|
{
|
|
flex : '0 0 auto',
|
|
margin : '0.3rem',
|
|
backgroundSize : '75%',
|
|
backgroundRepeat : 'no-repeat',
|
|
backgroundColor : 'rgba(0, 0, 0, 1)',
|
|
cursor : 'pointer',
|
|
transitionProperty : 'opacity, background-color',
|
|
width : 3,
|
|
borderRadius : 6,
|
|
transitionDuration : '0.25s',
|
|
position : 'absolute',
|
|
bottom : 0,
|
|
'&.level0' : { height: 0 },
|
|
'&.level1' : { height: '0.2vh' },
|
|
'&.level2' : { height: '0.4vh' },
|
|
'&.level3' : { height: '0.6vh' },
|
|
'&.level4' : { height: '0.8vh' },
|
|
'&.level5' : { height: '1.0vh' },
|
|
'&.level6' : { height: '1.2vh' },
|
|
'&.level7' : { height: '1.4vh' },
|
|
'&.level8' : { height: '1.6vh' },
|
|
'&.level9' : { height: '1.8vh' },
|
|
'&.level10' : { height: '2.0vh' }
|
|
}
|
|
});
|
|
|
|
const Volume = (props) =>
|
|
{
|
|
const {
|
|
small,
|
|
volume,
|
|
classes
|
|
} = props;
|
|
|
|
return (
|
|
<div className={small ? classes.volumeSmall : classes.volumeLarge}>
|
|
<div
|
|
className={classnames(
|
|
small ? classes.smallBar : classes.largeBar, `level${volume}`
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Volume.propTypes =
|
|
{
|
|
small : PropTypes.bool,
|
|
volume : PropTypes.number,
|
|
classes : PropTypes.object.isRequired
|
|
};
|
|
|
|
const makeMapStateToProps = (initialState, props) =>
|
|
{
|
|
const mapStateToProps = (state) =>
|
|
{
|
|
return {
|
|
volume : state.peerVolumes[props.name]
|
|
};
|
|
};
|
|
|
|
return mapStateToProps;
|
|
};
|
|
|
|
export default connect(
|
|
makeMapStateToProps
|
|
)(withStyles(styles)(Volume));
|