Mutability, #100

src/js/bootstrap.js

@@ -29,6 +29,7 @@ var initialState = {
 		connected: false,
 		host: window.location.hostname,
 		port: (window.location.port ? window.location.port : '80'),
+		mute: false,
 		volume: 0,
 		progress: 0,
 		play_state: false

src/js/components/VolumeControl.js

@@ -26,7 +26,9 @@ class VolumeControl extends React.Component{
 	render(){
 		return (
 			<span className="volume-control">
-				<a onClick={() => this.props.mopidyActions.toggleMute()}><FontAwesome name="volume-off" /> </a>
+				<a onClick={() => this.props.mopidyActions.setMute(!this.props.mute)}>
+					{this.props.mute ? <FontAwesome name="volume-off" /> : <FontAwesome name="volume-down" />}
+				</a>
 				<div className="slider-wrapper">
 					<div className="slider vertical" onClick={ (e) => this.handleClick(e) } >
 						<div className="track">
@@ -41,7 +43,8 @@ class VolumeControl extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
-		volume: state.mopidy.volume
+		volume: state.mopidy.volume,
+		mute: state.mopidy.mute
 	}
 }
 

src/js/services/mopidy/actions.js

@@ -1,7 +1,7 @@
 
 import * as helpers from '../../helpers'
 
-export function setConfig( config ){
+export function setConfig(config){
 	return {
 		type: 'MOPIDY_SET_CONFIG',
 		config: config
@@ -20,7 +20,7 @@ export function disconnect(){
 	}
 }
 
-export function instruct( call, value ){
+export function instruct(call, value){
 	return {
 		type: 'MOPIDY_INSTRUCT',
 		call: call,
@@ -28,7 +28,7 @@ export function instruct( call, value ){
 	}
 }
 
-export function debug( call, value ){
+export function debug(call, value){
 	return {
 		type: 'MOPIDY_DEBUG',
 		call: call,
@@ -42,11 +42,7 @@ export function debug( call, value ){
  **/
 
 export function changeTrack( tlid ){
-	return {
-		type: 'MOPIDY_INSTRUCT',
-		call: 'playback.play',
-		value: { tlid: tlid }
-	}
+	return instruct('playback.play', {tlid: tlid})
 }
 
 export function playURIs(uris, from_uri = null){
@@ -101,11 +97,7 @@ export function playAlbum(uri){
 }
 
 export function removeTracks( tlids ){
-	return {
-		type: 'MOPIDY_INSTRUCT',
-		call: 'tracklist.remove',
-		value: { tlid: tlids }
-	}
+	return instruct('tracklist.remove', {tlid: tlids})
 }
 
 export function reorderTracklist( indexes, insert_before ){
@@ -120,53 +112,46 @@ export function reorderTracklist( indexes, insert_before ){
 }
 
 export function clearTracklist(){
-	return instruct('tracklist.clear');
+	return instruct('tracklist.clear')
 }
 
 export function play(){
-	return instruct('playback.play');
+	return instruct('playback.play')
 }
 
 export function pause(){
-	return instruct('playback.pause');
+	return instruct('playback.pause')
 }
 
 export function stop(){
-	return instruct('playback.stop');
+	return instruct('playback.stop')
 }
 
 export function next(){
-	return instruct('playback.next');
+	return instruct('playback.next')
 }
 
 export function previous(){
-	return instruct('playback.previous');
+	return instruct('playback.previous')
 }
 
-export function setVolume( volume ){
-	return {
-		type: 'MOPIDY_INSTRUCT',
-		call: 'playback.setVolume',
-		value: { volume: volume }
-	}
+export function setMute(mute){
+	return instruct('mixer.setMute', {mute: mute})
 }
 
-export function seek( time_position ){
-	return {
-		type: 'MOPIDY_INSTRUCT',
-		call: 'playback.seek',
-		value: { time_position: parseInt(time_position) }
-	}
+export function setVolume(volume){
+	return instruct('playback.setVolume', {volume: volume})
+}
+
+export function seek(time_position){
+	return instruct('playback.seek', {time_position: parseInt(time_position)})
 }
 
 export function getTimePosition(){
-	return {
-		type: 'MOPIDY_INSTRUCT',
-		call: 'playback.getTimePosition'
-	}
+	return instruct('playback.getTimePosition')
 }
 
-export function setTimePosition( time_position ){
+export function setTimePosition(time_position){
 	return {
 		type: 'MOPIDY_TIMEPOSITION',
 		data: time_position
@@ -284,9 +269,6 @@ export function getPlaylistSearchResults(query, limit = 100, uri_scheme){
  **/
 
 export function getQueueHistory(){
-	return {
-		type: 'MOPIDY_INSTRUCT',
-		call: 'history.getHistory'
-	}
+	return instruct('history.getHistory')
 }
  

src/js/services/mopidy/middleware.js

@@ -29,6 +29,7 @@ const MopidyMiddleware = (function(){
                 store.dispatch({ type: 'MOPIDY_CONNECTED' });
                 instruct( ws, store, 'playback.getState' );
                 instruct( ws, store, 'playback.getVolume' );
+                instruct( ws, store, 'mixer.getMute' );
                 instruct( ws, store, 'tracklist.getConsume' );
                 instruct( ws, store, 'tracklist.getRandom' );
                 instruct( ws, store, 'tracklist.getRepeat' );
@@ -89,6 +90,10 @@ const MopidyMiddleware = (function(){
                 store.dispatch({ type: 'MOPIDY_VOLUME', data: data.volume });
                 break;
 
+            case 'event:muteChanged':
+                store.dispatch({ type: 'MOPIDY_MUTE', data: data.mute });
+                break;
+
             case 'event:optionsChanged':
                 instruct( ws, store, 'tracklist.getConsume' );
                 instruct( ws, store, 'tracklist.getRandom' );
@@ -111,7 +116,7 @@ const MopidyMiddleware = (function(){
      * @param string value (optional) = value of the property to pass
      * @return promise
      **/
-    const instruct = ( ws, store, call, value = {} ) => {
+    const instruct = (ws, store, call, value = {}) => {
 
         if( !store.getState().mopidy.connected ) return false
 
@@ -131,7 +136,7 @@ const MopidyMiddleware = (function(){
                 }
             }else{
                 var error = {
-                    message: 'Call to an invalid object. Check your are calling a valid Mopidy endpoint.',
+                    message: 'Call to an invalid object. Check you are calling a valid Mopidy object.',
                     call: call,
                     value: value
                 }

src/js/services/mopidy/reducer.js

@@ -58,6 +58,11 @@ export default function reducer(mopidy = {}, action){
                 volume: action.data   
             });
 
+        case 'MOPIDY_MUTE':
+            return Object.assign({}, mopidy, {
+                mute: action.data
+            });
+
         case 'MOPIDY_TIMEPOSITION':
             return Object.assign({}, mopidy, {
                 time_position: action.data

src/scss/components/_player.scss

@@ -159,6 +159,10 @@
 		}
 	}
 
+	.fa {
+		width: 6px;
+	}
+
 	.slider-wrapper {
 		display: none;
 		position: absolute;