Hiding outputs button completely

- When snapcast is not enabled AND
- When no controls saved
- Supercedes PR #858

src/js/components/Fields/OutputControl.js

@@ -1,15 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { connect, useSelector, useDispatch } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { find, groupBy, map } from 'lodash';
+import { useSelector, useDispatch } from 'react-redux';
+import { find, groupBy, map, isEmpty } from 'lodash';
 import VolumeControl from './VolumeControl';
 import MuteControl from './MuteControl';
 import Icon from '../Icon';
 import Thumbnail from '../Thumbnail';
 import LinksSentence from '../LinksSentence';
 import DropdownField from './DropdownField';
-import * as coreActions from '../../services/core/actions';
-import * as mopidyActions from '../../services/mopidy/actions';
 import * as pusherActions from '../../services/pusher/actions';
 import * as snapcastActions from '../../services/snapcast/actions';
 import { sortItems, indexToArray } from '../../util/arrays';
@@ -166,18 +163,10 @@ const Group = ({
 };
 
 const Outputs = () => {
- const snapcastEnabled = useSelector((state) => state.snapcast.enabled);
  const allGroups = indexToArray(useSelector((state) => state.snapcast.groups || {}));
  const allStreams = useSelector((state) => state.snapcast.streams || {});
  const allServers = indexToArray(useSelector((state) => state.mopidy.servers || {}));
  const groupsByStream = groupBy(allGroups, 'stream_id');
- if (!snapcastEnabled) {
- return (
- <p className="no-results">
- <I18n path="playback_controls.snapcast_not_enabled" />
- </p>
- );
- }
 
  return (
  <ErrorBoundary>
@@ -199,12 +188,10 @@ const Outputs = () => {
  );
 }
 
-const Commands = () => {
+const Commands = ({ commands }) => {
  const dispatch = useDispatch();
- const commandsObj = useSelector((state) => state.pusher.commands || {});
- if (!commandsObj) return null;
 
- let items = indexToArray(commandsObj);
+ let items = indexToArray(commands);
  if (items.length <= 0) return null;
 
  items = sortItems(items, 'sort_order');
@@ -230,6 +217,8 @@ const Commands = () => {
 };
 
 const OutputControl = ({ force_expanded }) => {
+ const snapcastEnabled = useSelector((state) => state.snapcast.enabled);
+ const commands = useSelector((state) => state.pusher.commands);
  const [expanded, setExpanded] = useState(false);
 
  useEffect(() => {
@@ -238,9 +227,9 @@ const OutputControl = ({ force_expanded }) => {
  }
  }, [force_expanded]);
 
+ if (!snapcastEnabled && isEmpty(commands)) return null;
+
  if (expanded) {
- const outputs = <Outputs />;
- const commands = <Commands />;
  return (
  <span className="output-control">
  {!force_expanded && <div className="click-outside" onClick={() => setExpanded(false)} />}
@@ -251,8 +240,8 @@ const OutputControl = ({ force_expanded }) => {
  <Icon name="speaker" />
  </button>
  <div className="output-control__inner">
- {commands}
- {outputs}
+ {!isEmpty(commands) && <Commands commands={commands} />}
+ {snapcastEnabled && <Outputs />}
  </div>
  </span>
  );