From 59f93e0d18d34df6149bbd3c0b533a89a01ba6a8 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Thu, 14 Nov 2019 09:12:41 +1300
Subject: [PATCH] Adding stream control to output control, addresses #451

---
 src/js/components/Fields/DropdownField.js | 21 ++++++++++++---------
 src/js/components/Fields/OutputControl.js | 17 +++++++++++++++++
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/js/components/Fields/DropdownField.js b/src/js/components/Fields/DropdownField.js
index e51964a1..7cfb854e 100755
--- a/src/js/components/Fields/DropdownField.js
+++ b/src/js/components/Fields/DropdownField.js
@@ -118,13 +118,14 @@ export default class DropdownField extends React.Component {
       no_status_icon,
       no_label,
       button,
-      className: classNameProp,
+      className: classNameProp = '',
       name,
       value,
       icon,
       icon_type,
       selected_icon: selectedIconProp,
       valueAsLabel,
+      noLabel,
     } = this.props;
     const { expanded } = this.state;
 
@@ -156,15 +157,17 @@ export default class DropdownField extends React.Component {
       <div className={className} data-uid={this.uid}>
         <div className={`dropdown-field__label${button ? ` button ${button}` : ''}`} onClick={(e) => this.setExpanded()}>
           {icon ? <Icon name={icon} type={icon_type ? icon_type : 'material'} /> : null}
-          <span className="text">
-            <span className="dropdown-field__label__value">
-              {valueAsLabel && selectedOptions.length === 1 ? selectedOptions[0].label : name}
+          {!noLabel && (
+            <span className="text">
+              <span className="dropdown-field__label__value">
+                {valueAsLabel && selectedOptions.length === 1 ? selectedOptions[0].label : name}
+              </span>
+              <span className="dropdown-field__label__name">
+                {name}
+              </span>
+              {this.isMultiSelect() ? ` (${selectedOptions.length})` : null}
             </span>
-            <span className="dropdown-field__label__name">
-              {name}
-            </span>
-            {this.isMultiSelect() ? ` (${selectedOptions.length})` : null}
-          </span>
+          )}
         </div>
         <div className="dropdown-field__options">
           <div className="dropdown-field__options__liner">
diff --git a/src/js/components/Fields/OutputControl.js b/src/js/components/Fields/OutputControl.js
index 0bb998a0..3318146a 100755
--- a/src/js/components/Fields/OutputControl.js
+++ b/src/js/components/Fields/OutputControl.js
@@ -6,6 +6,7 @@ import { bindActionCreators } from 'redux';
 import VolumeControl from './VolumeControl';
 import MuteControl from './MuteControl';
 import Icon from '../Icon';
+import DropdownField from './DropdownField';
 import * as helpers from '../../helpers';
 
 import * as coreActions from '../../services/core/actions';
@@ -54,6 +55,9 @@ class OutputControl extends React.Component {
   }
 
   renderOutputs() {
+    const {
+      snapcast_streams,
+    } = this.props;
     let has_outputs = false;
 
     const groups = [];
@@ -62,6 +66,10 @@ class OutputControl extends React.Component {
         groups.push(this.props.snapcast_groups[key]);
       }
     }
+    
+    const streams = Object.keys(snapcast_streams).map(
+      (id) => ({ value: id, label: id })
+    );
 
     let snapcast_groups = null;
     if (groups.length > 0) {
@@ -75,6 +83,14 @@ class OutputControl extends React.Component {
                   {group.name}
                 </div>
                 <div className="output-control__item__controls">
+                  <DropdownField
+                    icon="settings_input_component"
+                    name="Source"
+                    value={group.stream_id}
+                    options={streams}
+                    noLabel
+                    handleChange={(value) => this.props.snapcastActions.setGroupStream(group.id, value)}
+                  />
                   <MuteControl
                     className="output-control__item__mute"
                     noTooltip
@@ -203,6 +219,7 @@ const mapStateToProps = (state, ownProps) => ({
   snapcast_enabled: (state.pusher.config ? state.pusher.config.snapcast_enabled : null),
   show_disconnected_clients: (state.ui.snapcast_show_disconnected_clients !== undefined ? state.ui.snapcast_show_disconnected_clients : false),
   snapcast_groups: state.snapcast.groups,
+  snapcast_streams: state.snapcast.streams,
   pusher_commands: (state.pusher.commands ? state.pusher.commands : {}),
 });