Comments; Snapcast mobile

mopidy_iris/core.py

@@ -184,6 +184,7 @@ class IrisCore(object):
     ##
     # Send a command to the broadlink API
     # Credentials for this API are defined in Mopidy config file.
+    # Uses https://github.com/radinsky/broadlink-http-rest
     #
     # @return String
     ##

mopidy_iris/static/app.css

@@ -3910,46 +3910,46 @@ input[type="submit"] {
   cursor: pointer; }
 
 @media (max-width: 800px) {
-  .list .list__item {
+  .list__item {
     padding: 12px !important; }
-    .list .list__item .source {
+    .list__item .source {
       position: static;
       float: none; }
-    .list .list__item .context-zone {
+    .list__item .context-zone {
       top: 14px; }
-    .list .list__item .col.name {
+    .list__item .col.name {
       width: auto !important;
       padding-right: 10%;
       display: block;
       float: none; }
-    .list .list__item .col.duration {
+    .list__item .col.duration {
       width: auto !important;
       position: absolute;
       right: 10px;
       text-align: right;
       z-index: 1; }
-    .list .list__item .col:not(.name):not(.duration):not(.album):not(.added) {
+    .list__item .col:not(.name):not(.duration):not(.album):not(.added) {
       color: #a3a19f;
       display: inline;
       width: auto !important;
       float: none !important;
       word-wrap: break-word; }
-    .list .list__item .col.followers_total:after {
+    .list__item .col.followers_total:after {
       content: ' followers'; }
-    .list .list__item .col.tracks_total:after {
+    .list__item .col.tracks_total:after {
       content: ' tracks'; }
-    .list .list__item .col.popularity {
+    .list__item .col.popularity {
       padding-left: 14px; }
-      .list .list__item .col.popularity:before {
+      .list__item .col.popularity:before {
         content: '\2022' !important;
         display: inline-block;
         margin-left: -8px;
         padding-right: 6px; }
-      .list .list__item .col.popularity .popularity-bars {
+      .list__item .col.popularity .popularity-bars {
         margin: 0.1em 0 0 0; }
-    .list .list__item .col.album, .list .list__item .col.can_edit, .list .list__item .col.release_date {
+    .list__item .col.album, .list__item .col.can_edit, .list__item .col.release_date {
       display: none; }
-    .list .list__item.header {
+    .list__item.header {
       display: none; }
   .list.queue-track-list .list__item .artists {
     padding-left: 0 !important; }
@@ -5997,24 +5997,26 @@ main header {
     background: #ebe8e4; }
 
 @media (max-width: 800px) {
-  .services .menu {
-    overflow-x: auto;
-    margin: 0 -20px; }
-    .services .menu::-webkit-scrollbar {
-      width: 0px;
-      height: 0px; }
-    .services .menu__inner {
-      width: 700px;
-      padding: 0 20px; }
-    .services .menu .menu-item {
-      width: 140px; }
-      .services .menu .menu-item__inner {
-        padding-top: 10px;
-        padding-bottom: 10px; }
-      .services .menu .menu-item--active .menu-item__inner {
-        padding-bottom: 20px; }
-  .services .service {
-    margin-top: 0; } }
+  .services {
+    margin-left: -20px;
+    margin-right: -20px; }
+    .services .menu {
+      overflow-x: auto; }
+      .services .menu::-webkit-scrollbar {
+        width: 0px;
+        height: 0px; }
+      .services .menu__inner {
+        width: 700px;
+        padding: 0 20px; }
+      .services .menu .menu-item {
+        width: 140px; }
+        .services .menu .menu-item__inner {
+          padding-top: 10px;
+          padding-bottom: 10px; }
+        .services .menu .menu-item--active .menu-item__inner {
+          padding-bottom: 20px; }
+    .services .service {
+      margin-top: 0; } }
 
 .snapcast button {
   margin-bottom: 0px; }
@@ -6045,7 +6047,7 @@ main header {
   padding: 0 10px; }
 
 .snapcast__client {
-  padding: 0; }
+  padding: 0 !important; }
   .snapcast__client::after {
     content: '';
     clear: both;
@@ -6126,19 +6128,7 @@ main header {
     .snapcast__client {
       padding-left: 0 !important;
       padding-right: 0 !important;
-      padding-top: 0 !important; }
-      .snapcast__client .col {
-        clear: both;
-        display: block !important;
-        float: none !important;
-        width: auto !important;
-        padding: 0; }
-        .snapcast__client .col::after {
-          content: '';
-          clear: both;
-          display: block; }
-        .snapcast__client .col.volume, .snapcast__client .col.latency {
-          padding-top: 5px; } }
+      padding-top: 0 !important; } }
 
 .popularity-bars {
   display: inline-block;

mopidy_iris/static/index.html

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

src/js/components/Fields/SnapcastPowerButton.js

@@ -6,6 +6,7 @@ import { bindActionCreators } from 'redux'
 import Icon from '../Icon'
 
 import * as helpers from '../../helpers';
+import * as snapcastActions from '../../services/snapcast/actions';
 
 class SnapcastPowerButton extends React.Component{
 
@@ -16,8 +17,9 @@ class SnapcastPowerButton extends React.Component{
 	}
 
 	handleClick(e){
-		var command = JSON.parse(this.props.client.commands.power_on);
-		$.ajax(command);
+
+		// Dynamic-ify the command itself
+		this.props.snapcastActions.sendClientCommand(this.props.client.id, 'power_on');
 	}
 
 	render(){
@@ -38,7 +40,9 @@ const mapStateToProps = (state, ownProps) => {
 }
 
 const mapDispatchToProps = (dispatch) => {
-	return {}
+	return {
+		snapcastActions: bindActionCreators(snapcastActions, dispatch)
+	}
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(SnapcastPowerButton)

src/js/components/Snapcast.js

@@ -163,30 +163,30 @@ class Snapcast extends React.Component{
 										</div>
 										<div className="field">
 											<div className="name tooltip">
-												Power on request
+												Power off command
 												<span className="tooltip__content">
-													Fire this HTTP request to turn power on
+													Broadlink command to send
 												</span>
 											</div>
 											<div className="input">
 												<TextField
 													onChange={value => this.props.snapcastActions.setClientCommand(client.id, "power_on", value)}
-													value={client.power_on_command ? client.power_on_command : ""}
+													value={client.commands && client.commands.power_on ? client.commands.power_on : ""}
 													placeholder="Leave empty to disable"
 												/>
 											</div>
 										</div>
 										<div className="field">
 											<div className="name tooltip">
-												Power off request
+												Power off command
 												<span className="tooltip__content">
-													Fire this HTTP request to turn power off
+													Broadlink command to send
 												</span>
 											</div>
 											<div className="input">
 												<TextField
 													onChange={value => this.props.snapcastActions.setClientCommand(client.id, "power_off", value)}
-													value={client.power_off_command ? client.power_off_command : ""}
+													value={client.commands && client.commands.power_off ? client.commands.power_off : ""}
 													placeholder="Leave empty to disable"
 												/>
 											</div>

src/scss/components/_lists.scss

@@ -328,7 +328,7 @@
 
 	@include responsive($bp_medium){
 
-		.list__item {
+		&__item {
 			padding: 12px !important;
 
 			.source {

src/scss/components/_services.scss

@@ -117,9 +117,11 @@
 	}
 
 	@include responsive($bp_medium){
+		margin-left: -20px;
+		margin-right: -20px;
+		
 		.menu {
 			overflow-x: auto;
-			margin: 0 -20px;
 
 			&::-webkit-scrollbar{
 				width: 0px;

src/scss/components/_snapcast.scss

@@ -44,7 +44,7 @@
 
 	&__client {
 		@include clearfix();
-		padding: 0;
+		padding: 0 !important;
 
 		&--expanded {
 			background: rgba(255,255,255,0.05);
@@ -166,20 +166,6 @@
 			padding-left: 0 !important;
 			padding-right: 0 !important;
 			padding-top: 0 !important;
-
-			.col {
-				@include clearfix();
-				clear: both;
-				display: block !important;
-				float: none !important;
-				width: auto !important;
-				padding: 0;
-
-				&.volume,
-				&.latency {
-					padding-top: 5px;
-				}
-			}
 		}
 	}
 }