diff --git a/src/js/bootstrap.js b/src/js/bootstrap.js index a04e836a..bb0bf411 100755 --- a/src/js/bootstrap.js +++ b/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 diff --git a/src/js/components/VolumeControl.js b/src/js/components/VolumeControl.js index 3e1d310e..1e02797f 100755 --- a/src/js/components/VolumeControl.js +++ b/src/js/components/VolumeControl.js @@ -26,7 +26,9 @@ class VolumeControl extends React.Component{ render(){ return ( - this.props.mopidyActions.toggleMute()}> + this.props.mopidyActions.setMute(!this.props.mute)}> + {this.props.mute ? : } +
this.handleClick(e) } >
@@ -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 } } diff --git a/src/js/services/mopidy/actions.js b/src/js/services/mopidy/actions.js index 2a873130..c65e25b7 100755 --- a/src/js/services/mopidy/actions.js +++ b/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') } \ No newline at end of file diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js index 067cdc81..f07604d8 100755 --- a/src/js/services/mopidy/middleware.js +++ b/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 } diff --git a/src/js/services/mopidy/reducer.js b/src/js/services/mopidy/reducer.js index 7a84c167..f1a4a9b2 100755 --- a/src/js/services/mopidy/reducer.js +++ b/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 diff --git a/src/scss/components/_player.scss b/src/scss/components/_player.scss index 36a75187..339cccc1 100755 --- a/src/scss/components/_player.scss +++ b/src/scss/components/_player.scss @@ -159,6 +159,10 @@ } } + .fa { + width: 6px; + } + .slider-wrapper { display: none; position: absolute;