Adding advanced server controls
This commit is contained in:
James Barnsley
@ -51,6 +51,9 @@ export default class DropdownField extends React.Component{
|
||||
if (this.props.no_status_icon){
|
||||
className += ' no-status-icon';
|
||||
}
|
||||
if (this.props.no_label){
|
||||
className += ' no-label';
|
||||
}
|
||||
if (this.props.button){
|
||||
className += ' buttonify';
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ import ArtistSentence from './ArtistSentence'
|
||||
import VolumeControl from './Fields/VolumeControl'
|
||||
import LatencyControl from './Fields/LatencyControl'
|
||||
import TextField from './Fields/TextField'
|
||||
import DropdownField from './Fields/DropdownField'
|
||||
|
||||
import * as helpers from '../helpers'
|
||||
import * as coreActions from '../services/core/actions'
|
||||
@ -58,12 +59,26 @@ class Snapcast extends React.Component{
|
||||
)
|
||||
}
|
||||
|
||||
var streams = [];
|
||||
for (var key in this.props.snapcast_streams){
|
||||
if (this.props.snapcast_streams.hasOwnProperty(key)){
|
||||
streams.push(this.props.snapcast_streams[key]);
|
||||
}
|
||||
}
|
||||
|
||||
// Construct a simple array of our groups index
|
||||
var groups = [];
|
||||
var groups_dropdown = [];
|
||||
for (var group_id in this.props.snapcast_groups){
|
||||
if (this.props.snapcast_groups.hasOwnProperty(group_id)){
|
||||
var group = this.props.snapcast_groups[group_id];
|
||||
|
||||
// Append to our groups dropdown source array
|
||||
groups_dropdown.push({
|
||||
label: (group.name ? group.name : group.stream_id),
|
||||
value: group.id
|
||||
});
|
||||
|
||||
// Merge the group's clients into this group (also as a simple array)
|
||||
var clients = [];
|
||||
for (var i = 0; i < group.clients_ids.length; i++){
|
||||
@ -107,65 +122,81 @@ class Snapcast extends React.Component{
|
||||
{
|
||||
groups.map(group => {
|
||||
return (
|
||||
<div className="list group" key={group.id}>
|
||||
<div className="list-item header">
|
||||
<div className="col name">
|
||||
{group.name ? group.name : 'Untitled group'}
|
||||
<div className="group" key={group.id}>
|
||||
<h3 className="name">
|
||||
{group.name ? group.name : group.stream_id}
|
||||
</h3>
|
||||
<div className="field dropdown">
|
||||
<div className="name">
|
||||
Source
|
||||
</div>
|
||||
<div className="col volume">
|
||||
Volume
|
||||
</div>
|
||||
<div className="col latency">
|
||||
Latency
|
||||
<div className="input">
|
||||
<select onChange={e => this.props.pusherActions.setSnapcastGroupStream(group.id, e.target.value)} value={group.stream_id}>
|
||||
{
|
||||
streams.map(stream => {
|
||||
return (
|
||||
<option value={stream.id} key={stream.id}>
|
||||
{stream.id} ({stream.status})
|
||||
</option>
|
||||
);
|
||||
})
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<div className="name">
|
||||
Clients
|
||||
</div>
|
||||
<div className="input">
|
||||
<div className="list clients">
|
||||
{
|
||||
group.clients.map(client => {
|
||||
var name = client.config.name ? client.config.name : client.host.name;
|
||||
return (
|
||||
<div className="list-item client" key={client.id}>
|
||||
<div className="col name">
|
||||
<TextField
|
||||
onChange={value => this.props.pusherActions.setSnapcastClientName(client.id, value)}
|
||||
value={name}
|
||||
/>
|
||||
<div className="tools">
|
||||
{client.connected ? null : <FontAwesome className="disconnected red-text" name="plug" />}
|
||||
<DropdownField icon="cog" name="Group" no_label value={group.id} options={groups_dropdown} handleChange={val => {this.props.pusherActions.setSnapcastClientGroup(client.id, group.id); this.props.uiActions.hideContextMenu()}} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col volume">
|
||||
<VolumeControl
|
||||
volume={client.config.volume.percent}
|
||||
mute={client.config.volume.muted}
|
||||
onVolumeChange={percent => this.props.pusherActions.setSnapcastClientVolume(client.id, percent)}
|
||||
onMuteChange={mute => this.props.pusherActions.setSnapcastClientMute(client.id, mute)}
|
||||
/>
|
||||
<TextField
|
||||
className="tiny"
|
||||
onChange={value => this.props.pusherActions.setSnapcastClientVolume(client.id, parseInt(value))}
|
||||
value={client.config.volume.percent}
|
||||
/>
|
||||
</div>
|
||||
<div className="col latency">
|
||||
<LatencyControl
|
||||
max="100"
|
||||
value={client.config.latency}
|
||||
onChange={value => this.props.pusherActions.setSnapcastClientLatency(client.id, parseInt(value))}
|
||||
/>
|
||||
<TextField
|
||||
className="tiny"
|
||||
onChange={value => this.props.pusherActions.setSnapcastClientLatency(client.id, parseInt(value))}
|
||||
value={String(client.config.latency)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
group.clients.map(client => {
|
||||
var name = client.config.name ? client.config.name : client.host.name;
|
||||
return (
|
||||
<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="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="col volume">
|
||||
<VolumeControl
|
||||
volume={client.config.volume.percent}
|
||||
mute={client.config.volume.muted}
|
||||
onVolumeChange={percent => this.props.pusherActions.setSnapcastClientVolume(client.id, percent)}
|
||||
onMuteChange={mute => this.props.pusherActions.setSnapcastClientMute(client.id, mute)}
|
||||
/>
|
||||
<TextField
|
||||
className="tiny"
|
||||
onChange={value => this.props.pusherActions.setSnapcastClientVolume(client.id, parseInt(value))}
|
||||
value={client.config.volume.percent}
|
||||
/>
|
||||
</div>
|
||||
<div className="col latency">
|
||||
<LatencyControl
|
||||
max="100"
|
||||
value={client.config.latency}
|
||||
onChange={value => this.props.pusherActions.setSnapcastClientLatency(client.id, parseInt(value))}
|
||||
/>
|
||||
<TextField
|
||||
className="tiny"
|
||||
onChange={value => this.props.pusherActions.setSnapcastClientLatency(client.id, parseInt(value))}
|
||||
value={String(client.config.latency)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
@ -180,6 +211,7 @@ const mapStateToProps = (state, ownProps) => {
|
||||
snapcast_enabled: state.pusher.config.snapcast_enabled,
|
||||
pusher_connected: state.pusher.connected,
|
||||
snapcast_show_disconnected_clients: (state.ui.snapcast_show_disconnected_clients !== undefined ? state.ui.snapcast_show_disconnected_clients : false),
|
||||
snapcast_streams: state.pusher.snapcast_streams,
|
||||
snapcast_groups: state.pusher.snapcast_groups,
|
||||
snapcast_clients: state.pusher.snapcast_clients
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user