secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Desktop snapcast mini ready

Browse Source
This commit is contained in:
James Barnsley
2018-05-31 21:34:50 +12:00
parent 7e9fb9fa2a
commit c240c71a59
6 changed files with 622 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/js/components/Fields/SnapcastVolumeControl.js
View File

@ -17,6 +17,8 @@ class SnapcastVolumeControl extends React.Component{
this.state = {
expanded: false
}
this.handleClick = this.handleClick.bind(this);
}
componentDidMount(){
@ -25,6 +27,22 @@ class SnapcastVolumeControl extends React.Component{
}
}
handleClick(e){
if ($(e.target).closest('.snapcast-volume-control').length <= 0){
this.setExpanded(false);
}
}
setExpanded(expanded = !this.state.expanded){
if (expanded){
this.setState({expanded: expanded});
window.addEventListener("click", this.handleClick, false);
} else {
this.setState({expanded: expanded});
window.removeEventListener("click", this.handleClick, false);
}
}
renderVolumes(){
var clients = [];
@ -67,14 +85,14 @@ class SnapcastVolumeControl extends React.Component{
if (this.state.expanded){
return (
<span className="snapcast-volume-control">
<a className="control speakers active" onClick={e => this.setState({expanded: !this.state.expanded})}><Icon name="speaker" /></a>
<a className="control speakers active" onClick={e => this.setExpanded()}><Icon name="speaker" /></a>
{this.renderVolumes()}
</span>
);
} else {
return (
<span className="snapcast-volume-control">
<a className="control speakers" onClick={e => this.setState({expanded: !this.state.expanded})}><Icon name="speaker" /></a>
<a className="control speakers" onClick={e => this.setExpanded()}><Icon name="speaker" /></a>
</span>
);
}