Calculating group volume on render rather than on load, fixes #534

jaedb · May 16, 2020 · afb06ba · afb06ba
1 parent 65b3a33
commit afb06ba
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 97 deletions.
diff --git a/mopidy_iris/static/app.js b/mopidy_iris/static/app.js
@@ -63075,13 +63075,6 @@ var OutputControl = function (_React$Component) {
   }
 
   _createClass(OutputControl, [{
-    key: 'handleClick',
-    value: function handleClick(e) {
-      if (!this.props.force_expanded && $(e.target).closest('.output-control').length <= 0) {
-        this.setExpanded(false);
-      }
-    }
-  }, {
     key: 'setExpanded',
     value: function setExpanded() {
       var expanded = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !this.state.expanded;
@@ -63102,14 +63095,22 @@ var OutputControl = function (_React$Component) {
         window.removeEventListener('click', this.handleClick, false);
       }
     }
+  }, {
+    key: 'handleClick',
+    value: function handleClick(e) {
+      if (!this.props.force_expanded && $(e.target).closest('.output-control').length <= 0) {
+        this.setExpanded(false);
+      }
+    }
   }, {
     key: 'snapcastGroups',
     value: function snapcastGroups() {
       var _props = this.props,
           snapcast_streams = _props.snapcast_streams,
           snapcastActions = _props.snapcastActions,
           snapcast_groups = _props.snapcast_groups,
-          clients = _props.snapcast_clients;
+          clients = _props.snapcast_clients,
+          show_disconnected_clients = _props.show_disconnected_clients;
 
 
       var groups = (0, _arrays.indexToArray)(snapcast_groups);
@@ -63124,11 +63125,19 @@ var OutputControl = function (_React$Component) {
         null,
         groups.map(function (simpleGroup) {
           var group = (0, _format.collate)(simpleGroup, { clients: clients });
-          if (!group.clients || !group.clients.length || !group.clients.filter(function (client) {
-            return client.connected;
-          }).length) {
-            return null;
+          var _group$clients = group.clients,
+              groupClients = _group$clients === undefined ? [] : _group$clients;
+
+          if (!show_disconnected_clients) {
+            groupClients = (0, _arrays.applyFilter)('connected', true, groupClients);
           }
+
+          if (!groupClients.length) return null;
+
+          var volume = groupClients.reduce(function (acc, client) {
+            return acc + (client.volume || 0);
+          }, 0) / groupClients.length;
+
           return _react2.default.createElement(
             'div',
             { className: 'output-control__item outputs__item--snapcast', key: group.id },
@@ -63160,7 +63169,7 @@ var OutputControl = function (_React$Component) {
               }),
               _react2.default.createElement(_VolumeControl2.default, {
                 className: 'output-control__item__volume',
-                volume: group.volume,
+                volume: volume,
                 mute: group.mute,
                 onVolumeChange: function onVolumeChange(percent, previousPercent) {
                   return snapcastActions.setGroupVolume(group.id, percent, previousPercent);
@@ -68847,8 +68856,6 @@ var _react = __webpack_require__(/*! react */ "./node_modules/react/index.js");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _arrays = __webpack_require__(/*! ../util/arrays */ "./src/js/util/arrays.js");
-
 var _VolumeControl = __webpack_require__(/*! ./Fields/VolumeControl */ "./src/js/components/Fields/VolumeControl.js");
 
 var _VolumeControl2 = _interopRequireDefault(_VolumeControl);
@@ -68876,14 +68883,8 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
 var SnapcastClients = function SnapcastClients(_ref) {
   var actions = _ref.actions,
       group = _ref.group,
-      groups = _ref.groups,
-      show_disconnected_clients = _ref.show_disconnected_clients;
-
-  if (!show_disconnected_clients && group.clients) {
-    var clients = (0, _arrays.applyFilter)('connected', true, group.clients);
-  } else {
-    var clients = group.clients;
-  }
+      clients = _ref.clients,
+      groups = _ref.groups;
 
   if (!clients || clients.length <= 0) {
     return _react2.default.createElement(
@@ -69107,6 +69108,20 @@ var SnapcastGroups = function SnapcastGroups(props) {
   var renderGroup = function renderGroup() {
     if (!group) return null;
 
+    var _group$clients = group.clients,
+        groupClients = _group$clients === undefined ? [] : _group$clients;
+
+    if (!show_disconnected_clients) {
+      groupClients = (0, _arrays.applyFilter)('connected', true, groupClients);
+    }
+
+    var volume = 0;
+    if (groupClients.length) {
+      volume = groupClients.reduce(function (acc, client) {
+        return acc + (client.volume || 0);
+      }, 0) / groupClients.length;
+    };
+
     return _react2.default.createElement(
       'div',
       { className: 'snapcast__group', key: group.id },
@@ -69177,7 +69192,7 @@ var SnapcastGroups = function SnapcastGroups(props) {
           }),
           _react2.default.createElement(_VolumeControl2.default, {
             className: 'snapcast__group__volume-control snapcast__volume-control',
-            volume: group.volume,
+            volume: volume,
             mute: group.mute,
             onVolumeChange: function onVolumeChange(percent, previousPercent) {
               return actions.setGroupVolume(group.id, percent, previousPercent);
@@ -69186,10 +69201,10 @@ var SnapcastGroups = function SnapcastGroups(props) {
         )
       ),
       _react2.default.createElement(_SnapcastClients2.default, {
+        clients: groupClients,
         group: group,
         groups: groupsArray,
-        actions: actions,
-        show_disconnected_clients: show_disconnected_clients
+        actions: actions
       })
     );
   };
@@ -78992,7 +79007,6 @@ var SnapcastMiddleware = function () {
               if (raw_group.clients) {
                 group.clients_ids = (0, _arrays.arrayOf)('id', raw_group.clients);
                 clients_loaded = [].concat(_toConsumableArray(clients_loaded), _toConsumableArray(raw_group.clients));
-                store.dispatch(snapcastActions.calculateGroupVolume(group.id, raw_group.clients));
               }
 
               // Create a name (display only) based on it's ID
@@ -79012,17 +79026,6 @@ var SnapcastMiddleware = function () {
             next(action);
             break;
 
-          case 'SNAPCAST_CALCULATE_GROUP_VOLUME':
-            var totalVolume = action.clients.reduce(function (accumulator, client) {
-              return accumulator += (0, _format.formatClient)(client).volume;
-            }, 0);
-
-            store.dispatch(snapcastActions.groupLoaded({
-              id: action.id,
-              volume: totalVolume / action.clients.length
-            }));
-            break;
-
           case 'SNAPCAST_CLIENTS_LOADED':
             var clients_index = _extends({}, snapcast.clients);
             var clients_loaded = [];
@@ -84512,7 +84515,7 @@ var formatClient = function formatClient(data) {
  * */
 var formatGroup = function formatGroup(data) {
   var group = {};
-  var fields = ['id', 'name', 'mute', 'volume', 'stream_id', 'clients_ids'];
+  var fields = ['id', 'name', 'mute', 'stream_id', 'clients_ids'];
 
   var _iteratorNormalCompletion13 = true;
   var _didIteratorError13 = false;

diff --git a/mopidy_iris/static/app.js.map b/mopidy_iris/static/app.js.map
diff --git a/mopidy_iris/static/app.min.js b/mopidy_iris/static/app.min.js
diff --git a/mopidy_iris/static/index.html b/mopidy_iris/static/index.html
@@ -100,13 +100,8 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-<<<<<<< HEAD
-	var build = "1588909200";
-	var version = "3.48.0";
-=======
-	var build = "1589413478";
+	var build = "1589613389";
 	var version = "3.49.0";
->>>>>>> c16bbab023703a69d3a95f3366450daa9fbc2b48
 
 	// Construct the script tag
 	var js = document.createElement("script");

diff --git a/src/js/components/Fields/OutputControl.js b/src/js/components/Fields/OutputControl.js
@@ -9,7 +9,7 @@ import DropdownField from './DropdownField';
 import * as coreActions from '../../services/core/actions';
 import * as pusherActions from '../../services/pusher/actions';
 import * as snapcastActions from '../../services/snapcast/actions';
-import { sortItems, indexToArray } from '../../util/arrays';
+import { sortItems, indexToArray, applyFilter } from '../../util/arrays';
 import { collate } from '../../util/format';
 
 class OutputControl extends React.Component {
@@ -23,12 +23,6 @@ class OutputControl extends React.Component {
     this.handleClick = this.handleClick.bind(this);
   }
 
-  handleClick(e) {
-    if (!this.props.force_expanded && $(e.target).closest('.output-control').length <= 0) {
-      this.setExpanded(false);
-    }
-  }
-
   componentDidUpdate = ({
     force_expanded: prev_force_expanded,
   }) => {
@@ -53,12 +47,19 @@ class OutputControl extends React.Component {
     }
   }
 
+  handleClick(e) {
+    if (!this.props.force_expanded && $(e.target).closest('.output-control').length <= 0) {
+      this.setExpanded(false);
+    }
+  }
+
   snapcastGroups() {
     const {
       snapcast_streams,
       snapcastActions,
       snapcast_groups,
       snapcast_clients: clients,
+      show_disconnected_clients
     } = this.props;
 
     const groups = indexToArray(snapcast_groups);
@@ -73,13 +74,18 @@ class OutputControl extends React.Component {
         {
           groups.map((simpleGroup) => {
             const group = collate(simpleGroup, { clients });
-            if (
-              !group.clients ||
-              !group.clients.length ||
-              !group.clients.filter((client) => client.connected).length
-            ) {
-              return null;
+            let { clients: groupClients = [] } = group;
+            if (!show_disconnected_clients) {
+              groupClients = applyFilter('connected', true, groupClients);
             }
+
+            if (!groupClients.length) return null;
+
+            const volume = groupClients.reduce(
+              (acc, client) => acc + (client.volume || 0),
+              0,
+            ) / groupClients.length;
+
             return (
               <div className="output-control__item outputs__item--snapcast" key={group.id}>
                 <div className="output-control__item__name">
@@ -102,7 +108,7 @@ class OutputControl extends React.Component {
                   />
                   <VolumeControl
                     className="output-control__item__volume"
-                    volume={group.volume}
+                    volume={volume}
                     mute={group.mute}
                     onVolumeChange={(percent, previousPercent) => snapcastActions.setGroupVolume(group.id, percent, previousPercent)}
                   />

diff --git a/src/js/components/SnapcastClients.js b/src/js/components/SnapcastClients.js
@@ -1,19 +1,12 @@
 
 import React from 'react';
-import { applyFilter } from '../util/arrays';
 import VolumeControl from './Fields/VolumeControl';
 import MuteControl from './Fields/MuteControl';
 import LatencyControl from './Fields/LatencyControl';
 import TextField from './Fields/TextField';
 import SelectField from './Fields/SelectField';
 
-const SnapcastClients = ({ actions, group, groups, show_disconnected_clients }) => {
-  if (!show_disconnected_clients && group.clients) {
-    var clients = applyFilter('connected', true, group.clients);
-  } else {
-    var { clients } = group;
-  }
-
+const SnapcastClients = ({ actions, group, clients, groups }) => {
   if (!clients || clients.length <= 0) {
     return <p className="no-results">No connected clients</p>;
   }

diff --git a/src/js/components/SnapcastGroups.js b/src/js/components/SnapcastGroups.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { collate } from '../util/format';
-import { sortItems } from '../util/arrays';
+import { sortItems, applyFilter } from '../util/arrays';
 import { iconFromKeyword } from '../util/helpers';
 import VolumeControl from './Fields/VolumeControl';
 import MuteControl from './Fields/MuteControl';
@@ -39,6 +39,19 @@ const SnapcastGroups = (props) => {
   const renderGroup = () => {
     if (!group) return null;
 
+    let { clients: groupClients = [] } = group;
+    if (!show_disconnected_clients) {
+      groupClients = applyFilter('connected', true, groupClients);
+    }
+
+    let volume = 0;
+    if (groupClients.length) {
+      volume = groupClients.reduce(
+        (acc, client) => acc + (client.volume || 0),
+        0,
+      ) / groupClients.length;
+    };
+
     return (
       <div className="snapcast__group" key={group.id}>
         <div className="field text">
@@ -48,7 +61,7 @@ const SnapcastGroups = (props) => {
           <div className="input">
             <TextField
               value={group.name}
-              onChange={value => actions.setGroupName(group.id, value)}
+              onChange={(value) => actions.setGroupName(group.id, value)}
               autosave
             />
           </div>
@@ -84,17 +97,17 @@ const SnapcastGroups = (props) => {
             />
             <VolumeControl
               className="snapcast__group__volume-control snapcast__volume-control"
-              volume={group.volume}
+              volume={volume}
               mute={group.mute}
               onVolumeChange={(percent, previousPercent) => actions.setGroupVolume(group.id, percent, previousPercent)}
             />
           </div>
         </div>
         <SnapcastClients
+          clients={groupClients}
           group={group}
           groups={groupsArray}
           actions={actions}
-          show_disconnected_clients={show_disconnected_clients}
         />
       </div>
     );

diff --git a/src/js/services/snapcast/middleware.js b/src/js/services/snapcast/middleware.js
@@ -306,7 +306,6 @@ const SnapcastMiddleware = (function () {
           if (raw_group.clients) {
             group.clients_ids = arrayOf('id', raw_group.clients);
             clients_loaded = [...clients_loaded, ...raw_group.clients];
-            store.dispatch(snapcastActions.calculateGroupVolume(group.id, raw_group.clients));
           }
 
           // Create a name (display only) based on it's ID
@@ -326,18 +325,6 @@ const SnapcastMiddleware = (function () {
         next(action);
         break;
 
-      case 'SNAPCAST_CALCULATE_GROUP_VOLUME':
-        const totalVolume = action.clients.reduce((accumulator, client) =>
-          accumulator += formatClient(client).volume,
-          0,
-        );
-
-        store.dispatch(snapcastActions.groupLoaded({
-          id: action.id,
-          volume: totalVolume / action.clients.length,
-        }));
-        break;
-
       case 'SNAPCAST_CLIENTS_LOADED':
         var clients_index = { ...snapcast.clients };
         var clients_loaded = [];

diff --git a/src/js/util/format.js b/src/js/util/format.js
@@ -696,7 +696,6 @@ const formatGroup = function (data) {
     'id',
     'name',
     'mute',
-    'volume',
     'stream_id',
     'clients_ids',
   ];
-Original file line number
+Diff line change
@@ Expand Up / @@ -696,7 +696,6 @@ const formatGroup = function (data) { @@
         'id',
         'name',
         'mute',
-        'volume',
         'stream_id',
         'clients_ids',
       ];
@@ Expand Down @@