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

Polishing snapcast UI

Browse Source
This commit is contained in:
James Barnsley
2018-04-19 06:20:54 +12:00
parent 4e049d403e
commit 6035963f1f
7 changed files with 23829 additions and 25638 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/js/components/LatencyControl.js
View File

@ -79,6 +79,7 @@ export default class LatencyControl extends React.Component{
var percentage = Math.round((value / this.props.max) * 100 / 2);
var left = 50;
var width = percentage;
var negative = false;
// Negative value
// We reverse it to a positive for easier maths and style rules
@ -90,14 +91,16 @@ export default class LatencyControl extends React.Component{
var percentage = Math.round((value / this.props.max) * 100 / 2);
var left = 50 - percentage;
var width = percentage;
var negative = true;
}
return (
<span className="latency-control" onWheel={e => this.handleWheel(e)}>
<div className="slider-wrapper">
<div className="slider horizontal" onClick={e => this.handleClick(e)}>
<div className="zero"></div>
<div className="track">
<div className="progress" style={{ width: width+'%', left: left+'%' }}></div>
<div className={"progress "+(negative ? 'negative' : 'positive')} style={{ width: width+'%', left: left+'%' }}></div>
</div>
</div>
</div>

30
src/js/components/Snapcast.js
View File

@ -32,6 +32,12 @@ class Snapcast extends React.Component{
// Just connected
if (newProps.snapcast_enabled && !this.props.pusher_connected && newProps.pusher_connected){
this.props.pusherActions.getSnapcast();
// Just enabled
// This is the more probable scenario as we don't know if we're enabled until pusher connects
// and then gets the config from the server
} else if (!this.props.snapcast_enabled && newProps.snapcast_enabled && newProps.pusher_connected){
this.props.pusherActions.getSnapcast();
}
}
@ -83,13 +89,13 @@ class Snapcast extends React.Component{
return (
<div className="list group" key={group.id}>
<div className="list-item header">
<div className="name">
<div className="col name">
{group.name ? group.name : 'Untitled group'}
</div>
<div className="volume">
<div className="col volume">
Volume
</div>
<div className="latency">
<div className="col latency">
Latency
</div>
</div>
@ -97,15 +103,21 @@ class Snapcast extends React.Component{
group.clients.map(client => {
var name = client.config.name ? client.config.name : client.host.name;
return (
<div className={"list-item client "+(client.connected ? 'connected' : 'disconnected')} key={client.id}>
<div className="name">
<div className="list-item client" key={client.id}>
<div className="col name">
<TextField
onChange={value => this.props.pusherActions.setSnapcastClientName(client.id, value)}
value={name}
/>
{!client.connected ? <span className="disconnected flag grey">DISCONNECTED</span> : null}
{client.connected ? <span className="status has-tooltip">
<FontAwesome className="green-text" name="circle" />
<span className="tooltip">Connected</span>
</span> : <span className="status has-tooltip">
<FontAwesome className="grey-text" name="circle" />
<span className="tooltip">Not connected</span>
</span>}
</div>
<div className="volume">
<div className="col volume">
<VolumeControl
volume={client.config.volume.percent}
mute={client.config.volume.muted}
@ -118,7 +130,7 @@ class Snapcast extends React.Component{
value={client.config.volume.percent}
/>
</div>
<div className="latency">
<div className="col latency">
<LatencyControl
max="100"
value={client.config.latency}
@ -127,7 +139,7 @@ class Snapcast extends React.Component{
<TextField
className="tiny"
onChange={value => this.props.pusherActions.setSnapcastClientLatency(client.id, parseInt(value))}
value={client.config.latency}
value={String(client.config.latency)}
/>
</div>
</div>