Fixing event payloads

2019-10-30 15:28:19 +13:00
parent 622d898704
commit 98aacffabc
9 changed files with 10084 additions and 13187 deletions
--- a/src/js/components/Snapcast.js
+++ b/src/js/components/Snapcast.js
@ -23,20 +23,6 @@ class Snapcast extends React.Component {
    };
  }

-  componentDidMount() {
-    const { connected, actions: snapcastActions } = this.props;
-    if (this.props.connected) {
-      actions.getServer();
-    }
-  }
-
-  componentWillReceiveProps(newProps) {
-    const { connected, actions: snapcastActions } = this.props;
-    if (newProps.connected && !connected) {
-      actions.getServer();
-    }
-  }
-
  toggleClientExpanded(client_id) {
    const { clients_expanded } = this.state;
    const index = clients_expanded.indexOf(client_id);
@ -214,7 +200,7 @@ class Snapcast extends React.Component {
                type="checkbox"
                name="enabled"
                checked={enabled}
-                onChange={() => actions.set({ enabled: !enabled })}
+                onChange={() => actions.setEnabled(!enabled)}
              />
              <span className="label">
                Enabled
@ -254,82 +240,84 @@ class Snapcast extends React.Component {
          </div>
        </div>

-        <div className="snapcast__groups">
-          {
-            groups.map((group) => {
-              group = helpers.collate(group, { clients: this.props.clients });
+        {connected && enabled && (
+          <div className="snapcast__groups">
+            {
+              groups.map((group) => {
+                group = helpers.collate(group, { clients: this.props.clients });

-              // Average our clients' volume for an overall group volume
-              let group_volume = 0;
-              for (let i = 0; i < group.clients.length; i++) {
-                const client = group.clients[i];
-                group_volume += client.volume;
-              }
-              group_volume /= group.clients.length;
+                // Average our clients' volume for an overall group volume
+                let group_volume = 0;
+                for (let i = 0; i < group.clients.length; i++) {
+                  const client = group.clients[i];
+                  group_volume += client.volume;
+                }
+                group_volume /= group.clients.length;

-              return (
-                <div className="snapcast__group" key={group.id}>
-                  <div className="field text">
-                    <div className="name">
-                      Name
+                return (
+                  <div className="snapcast__group" key={group.id}>
+                    <div className="field text">
+                      <div className="name">
+                        Name
+                      </div>
+                      <div className="input">
+                        <TextField
+                          value={group.name}
+                          onChange={value => actions.setGroupName(group.id, value)}
+                        />
+                      </div>
                    </div>
-                    <div className="input">
-                      <TextField
-                        value={group.name}
-                        onChange={value => actions.setGroupName(group.id, value)}
-                      />
+                    <div className="field dropdown">
+                      <div className="name">
+                        Stream
+                      </div>
+                      <div className="input">
+                        <select onChange={(e) => actions.setGroupStream(group.id, e.target.value)} value={group.stream_id}>
+                          {
+                            streams.map((stream) => (
+                              <option value={stream.id} key={stream.id}>
+                                {stream.id}
+                                {' '}
+                                (
+                                  {stream.status}
+                                )
+                              </option>
+                            ))
+                          }
+                        </select>
+                      </div>
+                    </div>
+                    <div className="field">
+                      <div className="name">
+                        Volume
+                      </div>
+                      <div className="input">
+                        <MuteControl
+                          className="snapcast__group__mute-control"
+                          mute={group.muted}
+                          onMuteChange={(mute) => actions.setGroupMute(group.id, mute)}
+                        />
+                        <VolumeControl
+                          className="snapcast__group__volume-control"
+                          volume={group_volume}
+                          onVolumeChange={(percent, previousPercent) => actions.setGroupVolume(group.id, percent, previousPercent)}
+                        />
+                      </div>
+                    </div>
+                    <div className="field">
+                      <div className="name">
+                        Clients
+                      </div>
+                      <div className="input">
+                        {this.renderClientsList(group, groups)}
+                      </div>
                    </div>
                  </div>
-                  <div className="field dropdown">
-                    <div className="name">
-                      Stream
-                    </div>
-                    <div className="input">
-                      <select onChange={(e) => actions.setGroupStream(group.id, e.target.value)} value={group.stream_id}>
-                        {
-                          streams.map((stream) => (
-                            <option value={stream.id} key={stream.id}>
-                              {stream.id}
-                              {' '}
-                              (
-                                {stream.status}
-                              )
-                            </option>
-                          ))
-                        }
-                      </select>
-                    </div>
-                  </div>
-                  <div className="field">
-                    <div className="name">
-                      Volume
-                    </div>
-                    <div className="input">
-                      <MuteControl
-                        className="snapcast__group__mute-control"
-                        mute={group.muted}
-                        onMuteChange={(mute) => actions.setGroupMute(group.id, mute)}
-                      />
-                      <VolumeControl
-                        className="snapcast__group__volume-control"
-                        volume={group_volume}
-                        onVolumeChange={(percent, old_percent) => actions.setGroupVolume(group.id, percent, old_percent)}
-                      />
-                    </div>
-                  </div>
-                  <div className="field">
-                    <div className="name">
-                      Clients
-                    </div>
-                    <div className="input">
-                      {this.renderClientsList(group, groups)}
-                    </div>
-                  </div>
-                </div>
-              );
-            })
-          }
-        </div>
+                );
+              })
+            }
+          </div>
+        )}
      </div>
    );
  }
--- a/src/js/helpers.js
+++ b/src/js/helpers.js
@ -114,7 +114,7 @@ export const setStorage = function (key, value, replace = false) {
 * Cache handlers
 * This allows arbritrary requests to be cached by key into local storage. Typically key would be
 * a URL, but it could also be a asset id.
- * 
+ *
 * Use sparingly as localStorage is limited in size! Ideally store only the request data needed,
 * rather than the entire response data.
 */
@ -836,6 +836,18 @@ export const formatClient = function (data) {
        client.mute = data.config.volume.muted;
      }
    }
+  } else {
+    if (client.latency === undefined && data.latency !== undefined) {
+      client.latency = data.latency;
+    }
+    if (typeof data.volume === 'object') {
+      if (data.volume.percent) {
+        client.volume = data.volume.percent;
+      }
+      if (data.volume.muted) {
+        client.mute = data.volume.muted;
+      }
+    }
  }

  if (client.name === undefined && data.host && data.host.name) {
--- a/src/js/services/snapcast/actions.js
+++ b/src/js/services/snapcast/actions.js
@ -5,6 +5,12 @@ export function set(data) {
    data,
  };
 }
+export function setEnabled(enabled) {
+  return {
+    type: 'SNAPCAST_SET_ENABLED',
+    enabled,
+  };
+}

 export function connect() {
  return {
--- a/src/js/services/snapcast/middleware.js
+++ b/src/js/services/snapcast/middleware.js
@ -65,61 +65,27 @@ const SnapcastMiddleware = (function () {
      } else {
        switch (message.method) {
          case 'Client.OnConnect':
-            store.dispatch(snapcastActions.clientLoaded(
-              {
-                id: message.params.client.id,
-                name: message.params.client.name,
-                volume: message.params.client.config.volume.percent,
-                mute: message.params.client.config.volume.muted,
-                connected: message.params.client.connected,
-              },
-            ));
+            store.dispatch(snapcastActions.clientLoaded(message.params.client));
            break;

          case 'Client.OnDisconnect':
-            store.dispatch(snapcastActions.clientLoaded(
-              {
-                id: message.params.client.id,
-                connected: message.params.client.connected,
-              },
-            ));
+            store.dispatch(snapcastActions.clientLoaded(message.params.client));
            break;

          case 'Client.OnVolumeChanged':
-            store.dispatch(snapcastActions.clientLoaded(
-              {
-                id: message.params.id,
-                mute: message.params.volume.muted,
-                volume: message.params.volume.percent,
-              },
-            ));
+            store.dispatch(snapcastActions.clientLoaded(message.params));
            break;

          case 'Client.OnLatencyChanged':
-            store.dispatch(snapcastActions.clientLoaded(
-              {
-                id: message.params.id,
-                latency: message.params.latency,
-              },
-            ));
+              store.dispatch(snapcastActions.clientLoaded(message.params));
            break;

          case 'Client.OnNameChanged':
-            store.dispatch(snapcastActions.clientLoaded(
-              {
-                id: message.params.id,
-                name: message.params.name,
-              },
-            ));
+              store.dispatch(snapcastActions.clientLoaded(message.params));
            break;

          case 'Group.OnMute':
-            store.dispatch(snapcastActions.groupLoaded(
-              {
-                id: message.params.id,
-                mute: message.params.mute,
-              },
-            ));
+            store.dispatch(snapcastActions.groupLoaded(message.params));
            break;

          case 'Server.OnUpdate':
@ -175,16 +141,14 @@ const SnapcastMiddleware = (function () {
    switch (action.type) {

      case 'SNAPCAST_CONNECT':
-        if (socket != null) {
+        if (socket) {
          socket.close();
        }

        store.dispatch({ type: 'SNAPCAST_CONNECTING' });

-        var state = store.getState();
-
        socket = new WebSocket(
-          `ws${window.location.protocol === 'https:' ? 's' : ''}://${state.snapcast.host}:${state.snapcast.port}/jsonrpc`,
+          `ws${window.location.protocol === 'https:' ? 's' : ''}://${store.getState().snapcast.host}:${store.getState().snapcast.port}/jsonrpc`,
        );

        socket.onopen = () => {
@ -199,7 +163,7 @@ const SnapcastMiddleware = (function () {
          });

          // attempt to reconnect every 5 seconds
-          if (state.snapcast.enabled) {
+          if (store.getState().snapcast.enabled) {
            setTimeout(() => {
              store.dispatch(snapcastActions.connect());
            }, 5000);
@ -235,12 +199,12 @@ const SnapcastMiddleware = (function () {
      case 'SNAPCAST_DISCONNECT':
        if (socket != null) socket.close();
        socket = null;
-        store.dispatch({ type: 'SNAPCAST_DISCONNECTED' });
        break;

      case 'SNAPCAST_DISCONNECTED':
-        store.dispatch(uiActions.createNotification({ type: 'bad', content: 'Snapcast disconnected' }));
-        helpers.setFavicon('favicon_error.png');
+        if (store.getState().snapcast.enabled) {
+          store.dispatch(uiActions.createNotification({ type: 'bad', content: 'Snapcast disconnected' }));
+        }
        break;

      case 'SNAPCAST_DEBUG':
@ -264,7 +228,7 @@ const SnapcastMiddleware = (function () {
          .then(
            (response) => {
              if (action.response_callback) {
-                  action.response_callback.call(this, response);
+                action.response_callback.call(this, response);
              }
            },
            (error) => {
@ -282,6 +246,11 @@ const SnapcastMiddleware = (function () {
          );
        break;

+      case 'SNAPCAST_SET_ENABLED':
+        store.dispatch(snapcastActions.set({ enabled: action.enabled }));
+        store.dispatch(action.enabled ? snapcastActions.connect() : snapcastActions.disconnect());
+        break;
+
      case 'SNAPCAST_GET_SERVER':
        request(store, 'Server.GetStatus')
          .then(
@ -512,14 +481,14 @@ const SnapcastMiddleware = (function () {
            },
          );
        break;
-      
+
      case 'SNAPCAST_SET_GROUP_NAME':
          var group = snapcast.groups[action.id];
          var params = {
            id: action.id,
            name: action.name,
          };
-  
+
          request(store, 'Group.SetName', params)
            .then(
              response => {
@ -621,7 +590,7 @@ const SnapcastMiddleware = (function () {
          store.dispatch(snapcastActions.setClientVolume(client_to_update.id, volume));
        }
        break;
-        
+
      default:
        return next(action);
    }