Cleaning up Icecast (local browser) controls, fixes #399

mopidy_iris/static/index.html

@@ -100,7 +100,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1570135951";
+	var build = "1570242229";
 	var version = "3.40.0";
 
 	// Construct the script tag

src/js/components/Fields/OutputControl.js

@@ -12,7 +12,7 @@ import * as coreActions from '../../services/core/actions';
 import * as pusherActions from '../../services/pusher/actions';
 import * as snapcastActions from '../../services/snapcast/actions';
 
-class OutputControl extends React.Component {
+class OutputControl extends React.Component {
   constructor(props) {
     super(props);
 
@@ -29,7 +29,7 @@ class OutputControl extends React.Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps) {
     // When force expanded triggered
     if (!this.props.force_expanded && nextProps.force_expanded) {
       this.setExpanded(true, nextProps);
@@ -82,13 +82,13 @@ class OutputControl extends React.Component {
         className="output-control__item__mute"
         noTooltip
         mute={client.mute}
-        onMuteChange={(mute) => this.props.snapcastActions.setClientMute(client.id, mute)}
+        onMuteChange={(mute) => this.props.snapcastActions.setClientMute(client.id, mute)}
       />
       <VolumeControl
         className="output-control__item__volume"
         volume={client.volume}
         mute={client.mute}
-        onVolumeChange={(percent) => this.props.snapcastActions.setClientVolume(client.id, percent)}
+        onVolumeChange={(percent) => this.props.snapcastActions.setClientVolume(client.id, percent)}
       />
     </div>
   </div>
@@ -111,13 +111,13 @@ class OutputControl extends React.Component {
           <div className="output-control__item__name">
 						Local browser
           </div>
-          <div className="output-control__item__details">
+          <div className="output-control__item__controls">
             <VolumeControl
               className="output-control__item__volume"
               volume={this.props.http_streaming_volume}
               mute={this.props.http_streaming_mute}
               onVolumeChange={(percent) => this.props.coreActions.set({ http_streaming_volume: percent })}
-              onMuteChange={(mute) => this.props.coreActions.set({ http_streaming_mute: mute })}
+              onMuteChange={(mute) => this.props.coreActions.set({ http_streaming_mute: mute })}
             />
           </div>
         </div>
@@ -125,7 +125,7 @@ class OutputControl extends React.Component {
     }
 
     let commands = null;
-    if (this.props.pusher_commands) {
+    if (this.props.pusher_commands) {
       let commands_items = [];
       for (var key in this.props.pusher_commands) {
         if (this.props.pusher_commands.hasOwnProperty(key)) {
@@ -144,7 +144,7 @@ class OutputControl extends React.Component {
   <div
     key={command.id}
     className="commands__item commands__item--interactive"
-    onClick={(e) => this.props.pusherActions.runCommand(command.id)}
+    onClick={(e) => this.props.pusherActions.runCommand(command.id)}
   >
     <Icon className="commands__item__icon" name={command.icon} />
     <span className={`${command.colour}-background commands__item__background`} />
@@ -169,7 +169,7 @@ class OutputControl extends React.Component {
         {local_streaming}
         {snapcast_clients}
       </div>
-    );
+    );
   }
 
   render() {
@@ -194,13 +194,13 @@ class OutputControl extends React.Component {
       <span className="output-control">
         <button className="control speakers" onClick={(e) => this.setExpanded()}><Icon name="speaker" /></button>
       </span>
-    );
+    );
   }
 }
 
 const mapStateToProps = (state, ownProps) => ({
   http_streaming_enabled: state.core.http_streaming_enabled,
-  http_streaming_volume: state.core.http_streaming_volume,
+  http_streaming_volume: parseInt(state.core.http_streaming_volume),
   http_streaming_mute: state.core.http_streaming_mute,
   pusher_connected: state.pusher.connected,
   snapcast_enabled: (state.pusher.config ? state.pusher.config.snapcast_enabled : null),
@@ -215,4 +215,4 @@ const mapDispatchToProps = (dispatch) => ({
   pusherActions: bindActionCreators(pusherActions, dispatch),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(OutputControl);
+export default connect(mapStateToProps, mapDispatchToProps)(OutputControl);

src/js/components/PlaybackControls.js

@@ -341,8 +341,8 @@ class PlaybackControls extends React.Component {
 const mapStateToProps = (state, ownProps) => ({
   snapcast_enabled: state.pusher.config.snapcast_enabled,
   http_streaming_enabled: state.core.http_streaming_enabled,
-  http_streaming_volume: (state.core.http_streaming_volume ? state.core.http_streaming_volume : 50),
-  http_streaming_mute: (state.core.http_streaming_mute ? state.core.http_streaming_mute : false),
+  http_streaming_volume: parseInt(state.core.http_streaming_volume),
+  http_streaming_mute: state.core.http_streaming_mute,
   http_streaming_url: (state.core.http_streaming_url ? state.core.http_streaming_url : null),
   http_streaming_cachebuster: state.core.http_streaming_cachebuster,
   current_track: (state.core.current_track && state.core.tracks[state.core.current_track.uri] !== undefined ? state.core.tracks[state.core.current_track.uri] : null),