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

Volume and mute controls

Browse Source
This commit is contained in:
James Barnsley
2018-03-23 16:54:56 +13:00
parent b2067512a3
commit 2be4851ecc
11 changed files with 328 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/js/components/PlaybackControls.js
View File

@ -114,7 +114,12 @@ class PlaybackControls extends React.Component{
</section>
<section className="volume">
<VolumeControl />
<VolumeControl
volume={this.props.volume}
mute={this.props.mute}
onVolumeChange={percent => this.props.mopidyActions.setVolume(percent)}
onMuteChange={mute => this.props.mopidyActions.setMute(mute)}
/>
</section>
<section className="triggers">
@ -151,6 +156,8 @@ const mapStateToProps = (state, ownProps) => {
consume: state.mopidy.consume,
repeat: state.mopidy.repeat,
random: state.mopidy.random,
volume: state.mopidy.volume,
mute: state.mopidy.mute,
sidebar_open: state.ui.sidebar_open
}
}

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

@ -6,6 +6,8 @@ import { Link, hashHistory } from 'react-router'
import FontAwesome from 'react-fontawesome'
import ArtistSentence from './ArtistSentence'
import VolumeControl from './VolumeControl'
import * as helpers from '../helpers'
import * as coreActions from '../services/core/actions'
import * as uiActions from '../services/ui/actions'
@ -14,7 +16,11 @@ import * as pusherActions from '../services/pusher/actions'
class Snapcast extends React.Component{
constructor(props){
super(props)
super(props);
this.state = {
editing_client: null
}
}
componentDidMount(){
@ -29,18 +35,27 @@ class Snapcast extends React.Component{
}
}
renderMuteToggle(client){
if (client.config.volume.muted){
saveEditingClient(){
this.props.pusherActions.setSnapcastClientName(this.state.editing_client.id, this.state.editing_client.name);
this.setState({editing_client: null});
}
renderClientName(client){
if (this.state.editing_client && this.state.editing_client.id == client.id){
return (
<span className="mute-button" onClick={e => this.props.pusherActions.setSnapcastClientVolume(client.id, false, client.config.volume.percent)}>
<FontAwesome name="volume-off" />
</span>
<input
className="name editing"
value={this.state.editing_client.name}
onChange={e => this.setState({editing_client: {id: client.id, name: e.target.value}})}
onBlur={e => this.saveEditingClient()}
/>
);
} else {
var name = client.config.name ? client.config.name : client.host.name;
return (
<span className="mute-button" onClick={e => this.props.pusherActions.setSnapcastClientVolume(client.id, true, client.config.volume.percent)}>
<FontAwesome name="volume-up" />
</span>
<div className="name" onClick={e => this.setState({editing_client: {id: client.id, name: name}})}>
{name} {!client.connected ? '(disconnected)' : null}
</div>
);
}
}
@ -80,14 +95,27 @@ class Snapcast extends React.Component{
groups.map(group => {
return (
<div className="group" key={group.id}>
{group.muted ? <FontAwesome name="volume-off" /> : <FontAwesome name="volume-up" />} {group.name ? group.name : 'Untitled'}
<div className="inner">
<div className="name">
{group.name ? group.name : 'Untitled group'}
</div>
</div>
<div className="clients">
{
group.clients.map(client => {
return (
<div className="client" key={client.id}>
{this.renderMuteToggle(client)}
{client.config.name ? client.config.name : client.host.name} {client.config.volume.percent}
<div className={"client "+(client.connected ? 'connected' : 'disconnected')} key={client.id}>
<div className="inner">
{this.renderClientName(client)}
<div className="controls">
<VolumeControl
volume={client.config.volume.percent}
mute={client.config.volume.muted}
onVolumeChange={percent => this.props.pusherActions.setSnapcastClientVolume(client.id, client.config.volume.muted, percent)}
onMuteChange={mute => this.props.pusherActions.setSnapcastClientVolume(client.id, mute, client.config.volume.percent)}
/>
</div>
</div>
</div>
);
})

35
src/js/components/VolumeControl.js
View File

@ -1,14 +1,8 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import FontAwesome from 'react-fontawesome'
import * as mopidyActions from '../services/mopidy/actions'
import * as uiActions from '../services/ui/actions'
class VolumeControl extends React.Component{
export default class VolumeControl extends React.Component{
constructor(props){
super(props)
@ -28,7 +22,7 @@ class VolumeControl extends React.Component{
percent = 0
}
this.props.mopidyActions.setVolume(percent)
this.props.onVolumeChange(percent);
}
handleWheel(e){
@ -47,22 +41,21 @@ class VolumeControl extends React.Component{
percent = 0
}
this.props.mopidyActions.setVolume(percent);
this.props.onVolumeChange(percent);
e.preventDefault();
}
renderMuteButton(){
if (this.props.mute){
return (
<a className="control has-tooltip" onClick={() => this.props.mopidyActions.setMute(false)}>
<FontAwesome className="red-text" name="volume-down" />
<a className="control mute-control has-tooltip" onClick={() => this.props.onMuteChange(false)}>
<FontAwesome className="red-text" name="volume-off" />
<span className="tooltip">Unmute</span>
</a>
)
} else {
return (
<a className="control has-tooltip" onClick={() => this.props.mopidyActions.setMute(true)}>
<a className="control mute-control has-tooltip" onClick={() => this.props.onMuteChange(true)}>
<FontAwesome className="muted" name="volume-off" />
<span className="tooltip">Mute</span>
</a>
@ -89,19 +82,3 @@ class VolumeControl extends React.Component{
);
}
}
const mapStateToProps = (state, ownProps) => {
return {
volume: state.mopidy.volume,
mute: state.mopidy.mute
}
}
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(VolumeControl)

13
src/js/services/pusher/actions.js
View File

@ -187,3 +187,16 @@ export function setSnapcastClientVolume(id, muted, percent){
}
}
export function setSnapcastClientName(id, name){
return {
type: 'PUSHER_SET_SNAPCAST_CLIENT_NAME',
data: {
method: 'Client.SetName',
params: {
id: id,
name: name
}
}
}
}

24
src/js/services/pusher/middleware.js
View File

@ -580,6 +580,30 @@ const PusherMiddleware = (function(){
);
break
case 'PUSHER_SET_SNAPCAST_CLIENT_NAME':
request(store, 'snapcast_instruct', action.data)
.then(
response => {
store.dispatch({
type: 'PUSHER_SNAPCAST_CLIENT_UPDATED',
key: action.data.params.id,
client: {
config: {
name: response.name
}
}
})
},
error => {
store.dispatch(coreActions.handleException(
'Error',
error,
error.message
));
}
);
break
// This action is irrelevant to us, pass it on to the next middleware
default:
return next(action);

4
src/js/services/pusher/reducer.js
View File

@ -56,7 +56,9 @@ export default function reducer(pusher = {}, action){
case 'PUSHER_SNAPCAST_CLIENT_UPDATED':
var snapcast_clients = Object.assign({}, pusher.snapcast_clients);
snapcast_clients[action.key] = Object.assign({}, snapcast_clients[action.key], action.client);
var client = snapcast_clients[action.key];
client.config = Object.assign({}, client.config, action.client.config);
snapcast_clients[action.key] = client;
return Object.assign({}, pusher, { snapcast_clients: snapcast_clients });
default: