Removing clients from a group

mopidy_iris/static/app.css

@@ -5384,7 +5384,7 @@ main header {
         background: linear-gradient(to bottom right, white, rgba(0, 0, 0, 0.5)); }
       .dropdown-field .options .option .fa {
         position: absolute;
-        top: 9px;
+        top: 11px;
         left: 8px;
         font-size: 10px; }
       .notouch .dropdown-field .options .option:hover {

mopidy_iris/static/index.html

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

src/js/components/Snapcast.js

@@ -124,7 +124,7 @@ class Snapcast extends React.Component{
 						return (
 							<div className="group" key={group.id}>
 								<h3 className="name">
-									{group.name ? group.name : group.stream_id}
+									{group.name ? group.name : group.id} ({group.stream_id})
 								</h3>
 								<div className="field dropdown">
 									<div className="name">
@@ -162,7 +162,7 @@ class Snapcast extends React.Component{
 																/>
 																<div className="tools">
 																	{client.connected ? null : <FontAwesome className="disconnected red-text" name="plug" />}
-																	<DropdownField icon="cog" name="Group" no_label value={group.id} options={groups_dropdown} handleChange={val => {this.props.pusherActions.setSnapcastClientGroup(client.id, group.id); this.props.uiActions.hideContextMenu()}} />
+																	<DropdownField icon="cog" name="Group" no_label value={group.id} options={groups_dropdown} handleChange={value => {this.props.pusherActions.setSnapcastClientGroup(client.id, value); this.props.uiActions.hideContextMenu()}} />
 																</div>
 															</div>
 															<div className="col volume">

src/js/services/mopidy/middleware.js

@@ -93,7 +93,6 @@ const MopidyMiddleware = (function(){
                 break;
 
             case 'event:trackPlaybackEnded':
-                // This doesn't fire when it's the last track in the queue... bug in Mopidy?
                 store.dispatch(mopidyActions.clearCurrentTrack());
                 store.dispatch(mopidyActions.getTimePosition());
                 break;

src/js/services/pusher/actions.js

@@ -243,7 +243,6 @@ export function setSnapcastClientLatency(id, latency){
 }
 
 export function setSnapcastClientGroup(id, group_id){
-	console.log(id,group_id);
 	return {
 		type: 'PUSHER_SET_SNAPCAST_CLIENT_GROUP',
 		id: id,

src/js/services/pusher/middleware.js

@@ -599,7 +599,6 @@ const PusherMiddleware = (function(){
                 break
 
             case 'PUSHER_SNAPCAST_SERVER_LOADED':
-                console.log(action);
                 var groups = {};
                 var clients = {};
                 var streams = {};
@@ -778,8 +777,22 @@ const PusherMiddleware = (function(){
                 break
 
             case 'PUSHER_SET_SNAPCAST_CLIENT_GROUP':
+
                 var group = store.getState().pusher.snapcast_groups[action.group_id];
-                var clients_ids = Object.assign([], group.clients_ids, [action.id]);
+                var clients_ids = group.clients_ids;
+                var clients_ids_index = clients_ids.indexOf(action.id);
+
+                // Not in group (yet), so add it
+                if (clients_ids_index <= -1){
+                    clients_ids.push(action.id);
+
+                // Already there, so remove it
+                } else {
+                    clients_ids.splice(clients_ids_index, 1);
+                }
+
+                console.log(clients_ids, action.id, clients_ids_index);
+
                 var data = {
                     method: 'Group.SetClients',
                     params: {

src/scss/components/_dropdown-field.scss

@@ -90,7 +90,7 @@
 
 			.fa {
 				position: absolute;
-				top: 9px;
+				top: 11px;
 				left: 8px;
 				font-size: 10px;
 			}