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

Averaging group volume

Browse Source
This commit is contained in:
James Barnsley
2018-05-02 16:14:53 +12:00
parent 781d46168a
commit 0e87515e29
9 changed files with 192 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
mopidy_iris/static/app.css
View File

@ -4291,6 +4291,32 @@ input[type="submit"] {
left: 0;
right: 0; } }
.snapcast .volume-control .mute-control {
display: inline-block;
float: left;
padding: 0 10px;
border: 0; }
.snapcast .volume-control .slider-wrapper {
margin-left: 25px; }
.snapcast .volume-control.muted .slider .progress {
background: #a3a19f; }
.snapcast .volume-control.group-volume-control {
padding: 10px 0 5px;
display: block;
width: 100%;
box-sizing: border-box; }
.snapcast .volume-control.client-volume-control {
padding-top: 4px;
width: 80%;
padding-right: 10px;
display: inline-block;
vertical-align: middle;
box-sizing: border-box; }
.snapcast .group {
padding-top: 10px;
border-top: 1px solid #383734; }
@ -4330,22 +4356,6 @@ input[type="submit"] {
.snapcast .group .clients .client > .volume input,
.snapcast .group .clients .client > .latency input {
width: 20%; }
.snapcast .group .clients .client .volume-control {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
width: 80%;
padding-right: 10px;
box-sizing: border-box; }
.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 {
margin-left: 25px; }
.snapcast .group .clients .client .volume-control.muted .slider .progress {
background: #a3a19f; }
.snapcast .group .clients .client .latency-control {
display: inline-block;
vertical-align: middle;

72
mopidy_iris/static/app.js
View File

@ -5065,10 +5065,13 @@ function setSnapcastGroupMute(id, mute) {
}
function setSnapcastGroupVolume(id, percent) {
var old_percent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
return {
type: 'PUSHER_SET_SNAPCAST_GROUP_VOLUME',
id: id,
percent: percent
percent: percent,
old_percent: old_percent
};
}
@ -24125,6 +24128,7 @@ var VolumeControl = function (_React$Component) {
_createClass(VolumeControl, [{
key: 'handleClick',
value: function handleClick(e) {
var old_percent = this.props.volume;
var slider = e.target;
if (slider.className != 'slider') slider = slider.parentElement;
@ -24138,12 +24142,13 @@ var VolumeControl = function (_React$Component) {
percent = 0;
}
this.props.onVolumeChange(percent);
this.props.onVolumeChange(percent, old_percent);
}
}, {
key: 'handleWheel',
value: function handleWheel(e) {
if (this.props.scrollWheel) {
var old_percent = this.props.volume;
// Identify which direction we've scrolled (inverted)
// This is simplified and doesn't consider momentum as it varies wildly
@ -24159,7 +24164,7 @@ var VolumeControl = function (_React$Component) {
percent = 0;
}
this.props.onVolumeChange(percent);
this.props.onVolumeChange(percent, old_percent);
e.preventDefault();
}
}
@ -24205,6 +24210,10 @@ var VolumeControl = function (_React$Component) {
if (this.props.mute) {
className += " muted";
}
if (this.props.className) {
className += " " + this.props.className;
}
return _react2.default.createElement(
'span',
{ className: className, onWheel: function onWheel(e) {
@ -51721,7 +51730,7 @@ var PusherMiddleware = function () {
}
});
}, function (error) {
store.dispatch(coreActions.handleException('Error', error, error.message));
store.dispatch(coreActions.handleException('Could not change stream', error, error.message));
});
break;
@ -51744,10 +51753,46 @@ var PusherMiddleware = function () {
}
});
}, function (error) {
store.dispatch(coreActions.handleException('Error', error, error.message));
store.dispatch(coreActions.handleException('Could not toggle mute', error, error.message));
});
break;
case 'PUSHER_SET_SNAPCAST_GROUP_VOLUME':
var clients_to_update = [];
var group = store.getState().pusher.snapcast_groups[action.id];
var change = action.percent - action.old_percent;
for (var i = 0; i < group.clients_ids.length; i++) {
// Apply the change proportionately to each client
var client = store.getState().pusher.snapcast_clients[group.clients_ids[i]];
var current_percent = client.config.volume.percent;
var new_percent = current_percent + change;
// Only change if the client is within min/max limits
if (change > 0 && current_percent < 100 || change < 0 && current_percent > 0) {
clients_to_update.push({
id: client.id,
percent: new_percent
});
}
}
// Loop our required changes, and post each to Snapcast
for (var i = 0; i < clients_to_update.length; i++) {
var update = clients_to_update[i];
var percent = update.percent + (group.clients_ids.length - clients_to_update.length) * change;
// Make sure we're not creating an impossible percent
if (percent < 0) {
percent = 0;
} else if (percent > 100) {
percent = 100;
}
store.dispatch(pusherActions.setSnapcastClientVolume(update.id, percent));
}
// This action is irrelevant to us, pass it on to the next middleware
default:
return next(action);
@ -70573,6 +70618,7 @@ var Snapcast = function (_React$Component) {
'div',
{ className: 'col volume' },
_react2.default.createElement(_VolumeControl2.default, {
className: 'client-volume-control',
volume: client.config.volume.percent,
mute: client.config.volume.muted,
onVolumeChange: function onVolumeChange(percent) {
@ -70704,6 +70750,15 @@ var Snapcast = function (_React$Component) {
)
),
groups.map(function (group, i) {
// Average our clients' volume for an overall group volume
var group_volume = 0;
for (var i = 0; i < group.clients.length; i++) {
var client = group.clients[i];
group_volume += client.config.volume.percent;
}
group_volume = group_volume / group.clients.length;
return _react2.default.createElement(
'div',
{ className: 'group', key: group.id },
@ -70774,10 +70829,11 @@ var Snapcast = function (_React$Component) {
'div',
{ className: 'input' },
_react2.default.createElement(_VolumeControl2.default, {
volume: group.volume,
className: 'group-volume-control',
volume: group_volume,
mute: group.muted,
onVolumeChange: function onVolumeChange(percent) {
return _this3.props.pusherActions.setSnapcastGroupVolume(group.id, percent);
onVolumeChange: function onVolumeChange(percent, old_percent) {
return _this3.props.pusherActions.setSnapcastGroupVolume(group.id, percent, old_percent);
},
onMuteChange: function onMuteChange(mute) {
return _this3.props.pusherActions.setSnapcastGroupMute(group.id, mute);

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

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -77,7 +77,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1525163067";
var build = "1525215421";
var version = "3.17.4";
// Construct the script tag

14
src/js/components/Fields/VolumeControl.js
View File

@ -9,6 +9,7 @@ export default class VolumeControl extends React.Component{
}
handleClick(e){
var old_percent = this.props.volume;
var slider = e.target;
if (slider.className != 'slider' ) slider = slider.parentElement;
@ -22,11 +23,12 @@ export default class VolumeControl extends React.Component{
percent = 0
}
this.props.onVolumeChange(percent);
this.props.onVolumeChange(percent, old_percent);
}
handleWheel(e){
if (this.props.scrollWheel){
var old_percent = this.props.volume;
// Identify which direction we've scrolled (inverted)
// This is simplified and doesn't consider momentum as it varies wildly
@ -42,7 +44,7 @@ export default class VolumeControl extends React.Component{
percent = 0
}
this.props.onVolumeChange(percent);
this.props.onVolumeChange(percent, old_percent);
e.preventDefault();
}
}
@ -66,10 +68,14 @@ export default class VolumeControl extends React.Component{
}
render(){
var className = "volume-control"
var className = "volume-control";
if (this.props.mute){
className += " muted"
className += " muted";
}
if (this.props.className){
className += " "+this.props.className;
}
return (
<span className={className} onWheel={e => this.handleWheel(e)}>
{this.renderMuteButton()}

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

@ -96,6 +96,7 @@ class Snapcast extends React.Component{
</div>
<div className="col volume">
<VolumeControl
className="client-volume-control"
volume={client.config.volume.percent}
mute={client.config.volume.muted}
onVolumeChange={percent => this.props.pusherActions.setSnapcastClientVolume(client.id, percent)}
@ -199,6 +200,15 @@ class Snapcast extends React.Component{
{
groups.map((group, i) => {
// Average our clients' volume for an overall group volume
var group_volume = 0;
for (var i = 0; i < group.clients.length; i++){
var client = group.clients[i];
group_volume += client.config.volume.percent;
}
group_volume = group_volume / group.clients.length;
return (
<div className="group" key={group.id}>
<div className="field">
@ -236,9 +246,10 @@ class Snapcast extends React.Component{
</div>
<div className="input">
<VolumeControl
volume={group.volume}
className="group-volume-control"
volume={group_volume}
mute={group.muted}
onVolumeChange={percent => this.props.pusherActions.setSnapcastGroupVolume(group.id, percent)}
onVolumeChange={(percent, old_percent) => this.props.pusherActions.setSnapcastGroupVolume(group.id, percent, old_percent)}
onMuteChange={mute => this.props.pusherActions.setSnapcastGroupMute(group.id, mute)}
/>
</div>

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

@ -273,11 +273,12 @@ export function setSnapcastGroupMute(id, mute){
}
}
export function setSnapcastGroupVolume(id, percent){
export function setSnapcastGroupVolume(id, percent, old_percent = 0){
return {
type: 'PUSHER_SET_SNAPCAST_GROUP_VOLUME',
id: id,
percent: percent
percent: percent,
old_percent: old_percent
}
}

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

@ -865,7 +865,7 @@ const PusherMiddleware = (function(){
},
error => {
store.dispatch(coreActions.handleException(
'Error',
'Could not change stream',
error,
error.message
));
@ -896,7 +896,7 @@ const PusherMiddleware = (function(){
},
error => {
store.dispatch(coreActions.handleException(
'Error',
'Could not toggle mute',
error,
error.message
));
@ -904,6 +904,42 @@ const PusherMiddleware = (function(){
);
break
case 'PUSHER_SET_SNAPCAST_GROUP_VOLUME':
var clients_to_update = [];
var group = store.getState().pusher.snapcast_groups[action.id];
var change = action.percent - action.old_percent;
for (var i = 0; i < group.clients_ids.length; i++){
// Apply the change proportionately to each client
var client = store.getState().pusher.snapcast_clients[group.clients_ids[i]];
var current_percent = client.config.volume.percent;
var new_percent = current_percent + change;
// Only change if the client is within min/max limits
if ((change > 0 && current_percent < 100) || (change < 0 && current_percent > 0)){
clients_to_update.push({
id: client.id,
percent: new_percent
});
}
}
// Loop our required changes, and post each to Snapcast
for (var i = 0; i < clients_to_update.length; i++){
var update = clients_to_update[i];
var percent = update.percent + ((group.clients_ids.length - clients_to_update.length) * change);
// Make sure we're not creating an impossible percent
if (percent < 0){
percent = 0;
} else if (percent > 100){
percent = 100;
}
store.dispatch(pusherActions.setSnapcastClientVolume(update.id, percent));
}
// This action is irrelevant to us, pass it on to the next middleware
default:
return next(action);

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

@ -1,5 +1,41 @@
.snapcast {
.volume-control {
.mute-control {
display: inline-block;
float: left;
padding: 0 10px;
border: 0;
}
.slider-wrapper {
margin-left: 25px;
}
&.muted {
.slider .progress {
background: $mid_grey;
}
}
&.group-volume-control {
padding: 10px 0 5px;
display: block;
width: 100%;
box-sizing: border-box;
}
&.client-volume-control {
padding-top: 4px;
width: 80%;
padding-right: 10px;
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
}
}
.group {
padding-top: 10px;
@ -57,32 +93,6 @@
width: 20%;
}
}
.volume-control {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
width: 80%;
padding-right: 10px;
box-sizing: border-box;
.mute-control {
display: inline-block;
float: left;
padding: 0 10px;
border: 0;
}
.slider-wrapper {
margin-left: 25px;
}
&.muted {
.slider .progress {
background: $mid_grey;
}
}
}
.latency-control {
display: inline-block;