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

71
mopidy_iris/static/app.css
View File

@ -3183,25 +3183,25 @@ input[type="submit"] {
content: '';
clear: both;
display: block; }
.field .name {
.field > .name {
display: block;
padding-top: 10px;
width: 20%;
float: left; }
.field > .input {
width: 80%;
float: left; }
.field > .input input,
.field > .input select,
.field > .input textarea {
width: 100%; }
.field > .input .text {
display: block;
padding: 10px 14px 10px 0; }
.field label {
display: inline-block; }
.field .label .tooltip {
left: -4px; }
.field .input {
width: 80%;
float: left; }
.field .input input,
.field .input select,
.field .input textarea {
width: 100%; }
.field .input .text {
display: block;
padding: 10px 14px 10px 0; }
.field.radio input, .field.checkbox input {
display: none; }
.field.radio .input, .field.checkbox .input {
@ -4269,19 +4269,44 @@ input[type="submit"] {
left: 0;
right: 0; } }
.snapcast .mute-button {
display: inline-block;
padding: 10px;
cursor: pointer; }
.snapcast .mute-button:hover {
color: #08d58f; }
.snapcast .group {
padding: 10px 0;
.snapcast .group > .inner {
padding-bottom: 5px;
border-bottom: 1px solid #383734; }
.snapcast .group .clients .client {
padding: 10px 0 10px 20px;
border-top: 1px solid #383734; }
.snapcast .group > .inner > .name {
font-weight: bold; }
.snapcast .group .clients .client.disconnected {
opacity: 0.5; }
.snapcast .group .clients .client > .inner {
padding: 5px 5px 5px 20px;
border-bottom: 1px solid #383734; }
.snapcast .group .clients .client .name {
padding: 6px 0 5px 0;
display: block;
width: 100%;
box-sizing: border-box;
border: 0; }
.snapcast .group .clients .client .name.editing {
background: transparent;
color: inherit;
font-family: inherit;
font-size: 14px;
letter-spacing: -0.01rem;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); }
.snapcast .group .clients .client .volume-control .mute-control {
display: inline-block;
float: left;
padding: 0 10px;
border: 0; }
.snapcast .group .clients .client .volume-control .slider-wrapper {
padding-left: 30px; }
.snapcast .group .clients .client .volume-control.muted .slider .progress {
background: #a3a19f; }
aside {
position: fixed;

182
mopidy_iris/static/app.js
View File

@ -15591,6 +15591,7 @@ exports.queueMetadataChanged = queueMetadataChanged;
exports.addQueueMetadata = addQueueMetadata;
exports.getSnapcast = getSnapcast;
exports.setSnapcastClientVolume = setSnapcastClientVolume;
exports.setSnapcastClientName = setSnapcastClientName;
/**
* Actions and Action Creators
@ -15787,6 +15788,19 @@ function setSnapcastClientVolume(id, muted, percent) {
};
}
function setSnapcastClientName(id, name) {
return {
type: 'PUSHER_SET_SNAPCAST_CLIENT_NAME',
data: {
method: 'Client.SetName',
params: {
id: id,
name: name
}
}
};
}
/***/ }),
/* 25 */
/***/ (function(module, exports, __webpack_require__) {
@ -51612,7 +51626,9 @@ function reducer() {
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:
@ -53574,6 +53590,22 @@ var PusherMiddleware = function () {
});
break;
case 'PUSHER_SET_SNAPCAST_CLIENT_NAME':
request(store, 'snapcast_instruct', action.data).then(function (response) {
store.dispatch({
type: 'PUSHER_SNAPCAST_CLIENT_UPDATED',
key: action.data.params.id,
client: {
config: {
name: response.name
}
}
});
}, function (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);
@ -60417,7 +60449,16 @@ var PlaybackControls = function (_React$Component) {
_react2.default.createElement(
'section',
{ className: 'volume' },
_react2.default.createElement(_VolumeControl2.default, null)
_react2.default.createElement(_VolumeControl2.default, {
volume: this.props.volume,
mute: this.props.mute,
onVolumeChange: function onVolumeChange(percent) {
return _this6.props.mopidyActions.setVolume(percent);
},
onMuteChange: function onMuteChange(mute) {
return _this6.props.mopidyActions.setMute(mute);
}
})
),
_react2.default.createElement(
'section',
@ -60463,6 +60504,8 @@ var mapStateToProps = function 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
};
};
@ -60608,26 +60651,10 @@ var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _reactRedux = __webpack_require__(4);
var _redux = __webpack_require__(3);
var _reactRouter = __webpack_require__(8);
var _reactFontawesome = __webpack_require__(6);
var _reactFontawesome2 = _interopRequireDefault(_reactFontawesome);
var _actions = __webpack_require__(11);
var mopidyActions = _interopRequireWildcard(_actions);
var _actions2 = __webpack_require__(5);
var uiActions = _interopRequireWildcard(_actions2);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@ -60661,7 +60688,7 @@ var VolumeControl = function (_React$Component) {
percent = 0;
}
this.props.mopidyActions.setVolume(percent);
this.props.onVolumeChange(percent);
}
}, {
key: 'handleWheel',
@ -60681,8 +60708,7 @@ var VolumeControl = function (_React$Component) {
percent = 0;
}
this.props.mopidyActions.setVolume(percent);
this.props.onVolumeChange(percent);
e.preventDefault();
}
}, {
@ -60693,10 +60719,10 @@ var VolumeControl = function (_React$Component) {
if (this.props.mute) {
return _react2.default.createElement(
'a',
{ className: 'control has-tooltip', onClick: function onClick() {
return _this2.props.mopidyActions.setMute(false);
{ className: 'control mute-control has-tooltip', onClick: function onClick() {
return _this2.props.onMuteChange(false);
} },
_react2.default.createElement(_reactFontawesome2.default, { className: 'red-text', name: 'volume-down' }),
_react2.default.createElement(_reactFontawesome2.default, { className: 'red-text', name: 'volume-off' }),
_react2.default.createElement(
'span',
{ className: 'tooltip' },
@ -60706,8 +60732,8 @@ var VolumeControl = function (_React$Component) {
} else {
return _react2.default.createElement(
'a',
{ className: 'control has-tooltip', onClick: function onClick() {
return _this2.props.mopidyActions.setMute(true);
{ className: 'control mute-control has-tooltip', onClick: function onClick() {
return _this2.props.onMuteChange(true);
} },
_react2.default.createElement(_reactFontawesome2.default, { className: 'muted', name: 'volume-off' }),
_react2.default.createElement(
@ -60755,21 +60781,7 @@ var VolumeControl = function (_React$Component) {
return VolumeControl;
}(_react2.default.Component);
var mapStateToProps = function mapStateToProps(state, ownProps) {
return {
volume: state.mopidy.volume,
mute: state.mopidy.mute
};
};
var mapDispatchToProps = function mapDispatchToProps(dispatch) {
return {
uiActions: (0, _redux.bindActionCreators)(uiActions, dispatch),
mopidyActions: (0, _redux.bindActionCreators)(mopidyActions, dispatch)
};
};
exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(VolumeControl);
exports.default = VolumeControl;
/***/ }),
/* 379 */
@ -71092,6 +71104,10 @@ var _ArtistSentence = __webpack_require__(27);
var _ArtistSentence2 = _interopRequireDefault(_ArtistSentence);
var _VolumeControl = __webpack_require__(378);
var _VolumeControl2 = _interopRequireDefault(_VolumeControl);
var _helpers = __webpack_require__(2);
var helpers = _interopRequireWildcard(_helpers);
@ -71124,7 +71140,12 @@ var Snapcast = function (_React$Component) {
function Snapcast(props) {
_classCallCheck(this, Snapcast);
return _possibleConstructorReturn(this, (Snapcast.__proto__ || Object.getPrototypeOf(Snapcast)).call(this, props));
var _this = _possibleConstructorReturn(this, (Snapcast.__proto__ || Object.getPrototypeOf(Snapcast)).call(this, props));
_this.state = {
editing_client: null
};
return _this;
}
_createClass(Snapcast, [{
@ -71142,25 +71163,37 @@ var Snapcast = function (_React$Component) {
}
}
}, {
key: 'renderMuteToggle',
value: function renderMuteToggle(client) {
key: 'saveEditingClient',
value: function saveEditingClient() {
this.props.pusherActions.setSnapcastClientName(this.state.editing_client.id, this.state.editing_client.name);
this.setState({ editing_client: null });
}
}, {
key: 'renderClientName',
value: function renderClientName(client) {
var _this2 = this;
if (client.config.volume.muted) {
return _react2.default.createElement(
'span',
{ className: 'mute-button', onClick: function onClick(e) {
return _this2.props.pusherActions.setSnapcastClientVolume(client.id, false, client.config.volume.percent);
} },
_react2.default.createElement(_reactFontawesome2.default, { name: 'volume-off' })
);
if (this.state.editing_client && this.state.editing_client.id == client.id) {
return _react2.default.createElement('input', {
className: 'name editing',
value: this.state.editing_client.name,
onChange: function onChange(e) {
return _this2.setState({ editing_client: { id: client.id, name: e.target.value } });
},
onBlur: function onBlur(e) {
return _this2.saveEditingClient();
}
});
} else {
var name = client.config.name ? client.config.name : client.host.name;
return _react2.default.createElement(
'span',
{ className: 'mute-button', onClick: function onClick(e) {
return _this2.props.pusherActions.setSnapcastClientVolume(client.id, true, client.config.volume.percent);
'div',
{ className: 'name', onClick: function onClick(e) {
return _this2.setState({ editing_client: { id: client.id, name: name } });
} },
_react2.default.createElement(_reactFontawesome2.default, { name: 'volume-up' })
name,
' ',
!client.connected ? '(disconnected)' : null
);
}
}
@ -71200,20 +71233,41 @@ var Snapcast = function (_React$Component) {
return _react2.default.createElement(
'div',
{ className: 'group', key: group.id },
group.muted ? _react2.default.createElement(_reactFontawesome2.default, { name: 'volume-off' }) : _react2.default.createElement(_reactFontawesome2.default, { name: 'volume-up' }),
' ',
group.name ? group.name : 'Untitled',
_react2.default.createElement(
'div',
{ className: 'inner' },
_react2.default.createElement(
'div',
{ className: 'name' },
group.name ? group.name : 'Untitled group'
)
),
_react2.default.createElement(
'div',
{ className: 'clients' },
group.clients.map(function (client) {
return _react2.default.createElement(
'div',
{ className: 'client', key: client.id },
_this3.renderMuteToggle(client),
client.config.name ? client.config.name : client.host.name,
' ',
client.config.volume.percent
{ className: "client " + (client.connected ? 'connected' : 'disconnected'), key: client.id },
_react2.default.createElement(
'div',
{ className: 'inner' },
_this3.renderClientName(client),
_react2.default.createElement(
'div',
{ className: 'controls' },
_react2.default.createElement(_VolumeControl2.default, {
volume: client.config.volume.percent,
mute: client.config.volume.muted,
onVolumeChange: function onVolumeChange(percent) {
return _this3.props.pusherActions.setSnapcastClientVolume(client.id, client.config.volume.muted, percent);
},
onMuteChange: function onMuteChange(mute) {
return _this3.props.pusherActions.setSnapcastClientVolume(client.id, mute, client.config.volume.percent);
}
})
)
)
);
})
)

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

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:

67
src/scss/components/_snapcast.scss
View File

@ -1,24 +1,63 @@
.snapcast {
.mute-button {
display: inline-block;
padding: 10px;
cursor: pointer;
&:hover {
color: $turquoise;
}
}
.group {
padding: 10px 0;
border-bottom: 1px solid $grey;
& > .inner {
padding-bottom: 5px;
border-bottom: 1px solid $grey;
& > .name {
font-weight: bold;
}
}
.clients {
.client {
padding: 10px 0 10px 20px;
border-top: 1px solid $grey;
&.disconnected {
opacity: 0.5;
}
& > .inner {
padding: 5px 5px 5px 20px;
border-bottom: 1px solid $grey;
}
.name {
padding: 6px 0 5px 0;
display: block;
width: 100%;
box-sizing: border-box;
border: 0;
&.editing {
background: transparent;
color: inherit;
font-family: inherit;
font-size: 14px;
letter-spacing: -0.01rem;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
}
.volume-control {
.mute-control {
display: inline-block;
float: left;
padding: 0 10px;
border: 0;
}
.slider-wrapper {
padding-left: 30px;
}
&.muted {
.slider .progress {
background: $mid_grey;
}
}
}
}
}
}

26
src/scss/global/_forms.scss
View File

@ -208,28 +208,18 @@ input[type="submit"] {
}
.field {
@include clearfix();
display: block;
padding-bottom: 12px;
@include clearfix;
.name {
& > .name {
display: block;
padding-top: 10px;
width: 20%;
float: left;
}
label {
display: inline-block;
}
.label {
.tooltip {
left: -4px;
}
}
.input {
& > .input {
width: 80%;
float: left;
@ -245,6 +235,16 @@ input[type="submit"] {
}
}
label {
display: inline-block;
}
.label {
.tooltip {
left: -4px;
}
}
&.radio,
&.checkbox {
input{