Snapcast to BEM

mopidy_iris/static/app.css

@@ -4445,78 +4445,85 @@ $icon-websocket: \e920;
 .snapcast button {
   margin-bottom: 0px; }
 
-.snapcast .volume-control .mute-control {
+.snapcast__group__volume-control {
-  display: inline-block;
-  float: left;
-  padding: 0 5px;
-  border: 0; }
-
-.snapcast .volume-control .slider-wrapper {
-  margin-left: 30px; }
-
-.snapcast .volume-control.group-volume-control {
   padding: 10px 0 5px;
   display: block;
   width: 100%;
   box-sizing: border-box; }
+  .snapcast__group__volume-control .mute-control {
+    display: inline-block;
+    float: left;
+    padding: 0 5px;
+    border: 0; }
+  .snapcast__group__volume-control .slider-wrapper {
+    margin-left: 30px; }
 
-.snapcast .volume-control.client-volume-control {
+.snapcast__groups {
+  padding-top: 10px; }
+
+.snapcast__group {
+  padding-top: 10px;
+  border-top: 1px solid #383734; }
+  .snapcast__group:not(:last-child) {
+    padding-bottom: 20px; }
+
+.snapcast__clients {
+  padding: 0 10px; }
+
+.snapcast__client {
+  border: 0;
+  padding: 0;
+  clear: both; }
+  .snapcast__client::after {
+    content: '';
+    clear: both;
+    display: block; }
+  .snapcast__client:not(:first-child) {
+    padding-top: 8px; }
+  .snapcast__client__volume-control {
     padding-top: 11px;
     padding-right: 10px;
     display: block;
     vertical-align: middle;
     box-sizing: border-box; }
-
+    .snapcast__client__volume-control .mute-control {
-.snapcast .groups {
+      display: inline-block;
-  padding-top: 10px; }
+      float: left;
-  .snapcast .groups .group {
+      padding: 0 5px;
-    padding-top: 10px;
+      border: 0; }
-    border-top: 1px solid #383734; }
+    .snapcast__client__volume-control .slider-wrapper {
-    .snapcast .groups .group:not(:last-child) {
+      margin-left: 30px; }
-      padding-bottom: 20px; }
+  .snapcast__client__name {
-    .snapcast .groups .group .clients {
-      padding: 0 10px; }
-      .snapcast .groups .group .clients .client {
-        border: 0;
-        padding: 0;
-        clear: both; }
-        .snapcast .groups .group .clients .client::after {
-          content: '';
-          clear: both;
-          display: block; }
-        .snapcast .groups .group .clients .client:not(:first-child) {
-          padding-top: 8px; }
-        .snapcast .groups .group .clients .client > .name {
     width: 40%;
     padding-bottom: 4px;
     position: relative;
     display: block;
     box-sizing: border-box;
     border: 0; }
-          .snapcast .groups .group .clients .client > .name input {
+    .snapcast__client__name input {
       width: 100%;
       padding-right: 30px; }
-          .snapcast .groups .group .clients .client > .name .group-dropdown-field {
+  .snapcast__client__group-dropdown-field {
     float: right;
     margin-bottom: -3.2rem; }
-            .snapcast .groups .group .clients .client > .name .group-dropdown-field .icon {
+    .snapcast__client__group-dropdown-field .icon {
       padding-right: 0; }
-        .snapcast .groups .group .clients .client > .volume {
+  .snapcast__client__volume {
     width: 28%;
     padding-left: 2%; }
-        .snapcast .groups .group .clients .client > .latency {
+  .snapcast__client__latency {
     width: 28%;
     padding-left: 2%; }
-          .snapcast .groups .group .clients .client > .latency input[type="number"] {
+    .snapcast__client__latency input[type="number"] {
       width: 20%; }
-        .snapcast .groups .group .clients .client .latency-control {
+    .snapcast__client__latency .latency-control {
       display: inline-block;
       vertical-align: middle;
       padding-top: 4px;
       width: 80%;
       padding-right: 10px;
       box-sizing: border-box; }
-          .snapcast .groups .group .clients .client .latency-control .zero {
+      .snapcast__client__latency .latency-control .zero {
         position: absolute;
         top: -4px;
         left: 50%;
@@ -4524,31 +4531,31 @@ $icon-websocket: \e920;
         width: 1px;
         background: #383734;
         z-index: 0; }
-          .snapcast .groups .group .clients .client .latency-control .progress.positive {
+      .snapcast__client__latency .latency-control .progress.positive {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0; }
-          .snapcast .groups .group .clients .client .latency-control .progress.negative {
+      .snapcast__client__latency .latency-control .progress.negative {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0; }
-            .snapcast .groups .group .clients .client .latency-control .progress.negative:after {
+        .snapcast__client__latency .latency-control .progress.negative:after {
           right: auto;
           left: -1px; }
   @media (max-width: 800px) {
-          .snapcast .groups .group .clients .client {
+    .snapcast__client {
       padding-left: 0 !important;
       padding-right: 0 !important;
       padding-top: 0 !important; }
-            .snapcast .groups .group .clients .client .col {
+      .snapcast__client .col {
         clear: both;
         display: block !important;
         float: none !important;
         width: auto !important;
         padding: 0; }
-              .snapcast .groups .group .clients .client .col::after {
+        .snapcast__client .col::after {
           content: '';
           clear: both;
           display: block; }
-              .snapcast .groups .group .clients .client .col.volume, .snapcast .groups .group .clients .client .col.latency {
+        .snapcast__client .col.volume, .snapcast__client .col.latency {
           padding-top: 5px; } }
 
 .output-control {

mopidy_iris/static/index.html

@@ -98,7 +98,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1537746267";
+	var build = "1537753000";
 	var version = "3.26.2";
 
 	// Construct the script tag

src/js/components/Snapcast.js

@@ -53,7 +53,7 @@ class Snapcast extends React.Component{
 		}
 
 		return (
-			<div className="list clients">
+			<div className="list snapcast__clients">
 				{
 					group.clients.map(client => {
 						var name = client.config.name ? client.config.name : client.host.name;
@@ -78,10 +78,10 @@ class Snapcast extends React.Component{
 						});
 
 						return (
-							<div className="list-item client" key={client.id}>
+							<div className={"list-item snapcast__client "+(client.connected ? "snapcast__client--connected" : "snapcast__client--disconnected")} key={client.id}>
-								<div className="col name">
+								<div className="col name snapcast__client__name">
 									<DropdownField 
-										className="group-dropdown-field" 
+										className="snapcast__client__group-dropdown-field" 
 										icon="settings" 
 										name="Group" 
 										no_label
@@ -96,16 +96,16 @@ class Snapcast extends React.Component{
 										value={name}
 									/>
 								</div>
-								<div className="col volume">
+								<div className="col snapcast__client__volume">
 									<VolumeControl 
-										className="client-volume-control"
+										className="snapcast__client__volume-control"
 										volume={client.config.volume.percent}
 										mute={client.config.volume.muted}
 										onVolumeChange={percent => this.props.snapcastActions.setClientVolume(client.id, percent)}
 										onMuteChange={mute => this.props.snapcastActions.setClientMute(client.id, mute)}
 									/>
 								</div>
-								<div className="col latency">
+								<div className="col snapcast__client__latency">
 									<LatencyControl 
 										max="100"
 										value={client.config.latency}
@@ -201,7 +201,7 @@ class Snapcast extends React.Component{
 					</div>
 				</div>
 
-				<div className="groups">
+				<div className="snapcast__groups">
 					{
 						groups.map(group => {
 
@@ -214,7 +214,7 @@ class Snapcast extends React.Component{
 							group_volume = group_volume / group.clients.length;
 
 							return (
-								<div className="group" key={group.id}>
+								<div className="snapcast__group" key={group.id}>
 									<div className="field">
 										<div className="name">
 											Name
@@ -250,7 +250,7 @@ class Snapcast extends React.Component{
 										</div>
 										<div className="input">	
 											<VolumeControl 
-												className="group-volume-control"
+												className="snapcast__group__volume-control"
 												volume={group_volume}
 												mute={group.muted}
 												onVolumeChange={(percent, old_percent) => this.props.snapcastActions.setGroupVolume(group.id, percent, old_percent)}

src/js/services/mopidy/actions.js

@@ -8,6 +8,16 @@ export function set(data){
     }
 }
 
+export function request(method, params = null, response_callback = null, error_callback = null){
+	return {
+		type: 'MOPIDY_REQUEST',
+		method: method,
+		params: params,
+		response_callback: response_callback,
+		error_callback: error_callback
+	}
+}
+
 export function connect(){
 	return {
 		type: 'MOPIDY_CONNECT'

src/js/services/mopidy/middleware.js

@@ -241,6 +241,28 @@ const MopidyMiddleware = (function(){
                     })
                 break;
 
+            case 'MOPIDY_REQUEST':
+                request(socket, store, action.method, action.params)
+                    .then(
+                        response => {
+	                        if (action.response_callback){
+	                            store.dispatch(action.response_callback.call(this, response));
+	                        }
+                        },
+                        error => {
+	                        if (action.error_callback){
+	                            store.dispatch(action.error_callback.call(this, error));
+	                        } else {
+	                            store.dispatch(coreActions.handleException(
+	                                'Mopidy request failed',
+	                                error,
+	                                action.method,
+	                                action
+	                            ));
+	                        }
+                        }
+                    );
+                break
 
             /**
              * General playback

src/js/services/pusher/actions.js

@@ -75,9 +75,9 @@ export function connectionRemoved(connection){
 	}
 }
 
-export function instruct(method, params = null, response_callback = null, error_callback = null){
+export function request(method, params = null, response_callback = null, error_callback = null){
 	return {
-		type: 'PUSHER_INSTRUCT',
+		type: 'PUSHER_REQUEST',
 		method: method,
 		params: params,
 		response_callback: response_callback,

src/js/services/pusher/middleware.js

@@ -244,7 +244,7 @@ const PusherMiddleware = (function(){
                 next(action);
                 break;
 
-            case 'PUSHER_INSTRUCT':
+            case 'PUSHER_REQUEST':
                 request(store, action.method, action.params)
                     .then(
                         response => {
@@ -257,8 +257,10 @@ const PusherMiddleware = (function(){
 	                            store.dispatch(action.error_callback.call(this, error));
 	                        } else {
 	                            store.dispatch(coreActions.handleException(
-	                                'Instruct failed',
+	                                'Pusher request failed',
-	                                error
+	                                error,
+	                                action.method,
+	                                action
 	                            ));
 	                        }
                         }

src/js/services/snapcast/middleware.js

@@ -12,7 +12,7 @@ const SnapcastMiddleware = (function(){
 	// A snapcast request is an alias of the Pusher request
     const request = (store, params = null, response_callback = null, error_callback = null) => {
         store.dispatch(
-        	pusherActions.instruct(
+        	pusherActions.request(
         		'snapcast_instruct',
         		params,
         		response_callback,

src/scss/components/_snapcast.scss

@@ -5,7 +5,12 @@
 		margin-bottom: 0px;
 	}
 					
-	.volume-control {
+	&__group {
+		&__volume-control {
+			padding: 10px 0 5px;
+			display: block;
+			width: 100%;
+			box-sizing: border-box;
 
 			.mute-control {
 				display: inline-block;
@@ -17,38 +22,27 @@
 			.slider-wrapper {
 				margin-left: 30px;
 			}
-		
-		&.group-volume-control {
-			padding: 10px 0 5px;
-			display: block;
-			width: 100%;
-			box-sizing: border-box;
-		}
-
-		&.client-volume-control {
-			padding-top: 11px;
-			padding-right: 10px;
-			display: block;
-			vertical-align: middle;
-			box-sizing: border-box;
 		}
 	}
 
-	.groups {
+	&__groups {
 		padding-top: 10px;
+	}
 		
-		.group {
+	&__group {
 		padding-top: 10px;
 		border-top: 1px solid $grey;
 
 		&:not(:last-child){
 			padding-bottom: 20px;
 		}
+	}
 
-			.clients {
+	&__clients {
 		padding: 0 10px;
+	}
 
-				.client {
+	&__client {
 		@include clearfix();
 		border: 0;
 		padding: 0;
@@ -58,7 +52,26 @@
 			padding-top: 8px;
 		}
 
-					& > .name {
+		&__volume-control {
+			padding-top: 11px;
+			padding-right: 10px;
+			display: block;
+			vertical-align: middle;
+			box-sizing: border-box;
+
+			.mute-control {
+				display: inline-block;
+				float: left;
+				padding: 0 5px;
+				border: 0;
+			}
+
+			.slider-wrapper {
+				margin-left: 30px;
+			}
+		}
+
+		&__name {
 			width: 40%;
 			padding-bottom: 4px;
 			position: relative;
@@ -70,8 +83,9 @@
 				width: 100%;
 				padding-right: 30px;
 			}
+		}
 
-						.group-dropdown-field {
+		&__group-dropdown-field {
 			float: right;
 			margin-bottom: -3.2rem;
 
@@ -79,21 +93,19 @@
 				padding-right: 0;
 			}
 		}
-					}
 
-					& > .volume {
+		&__volume {
 			width: 28%;
 			padding-left: 2%;
 		}
 
-					& > .latency {
+		&__latency {
 			width: 28%;
 			padding-left: 2%;
 
 			input[type="number"] {
 				width: 20%;
 			}
-					}
 
 			.latency-control {
 				display: inline-block;
@@ -128,6 +140,7 @@
 					}
 				}
 			}
+		}
 
 		@include responsive($bp_medium){
 			padding-left: 0 !important;
@@ -149,7 +162,4 @@
 			}
 		}
 	}
-			}
-		}
-	}
 }