Share config

mopidy_iris/static/app.css

@@ -3435,6 +3435,10 @@ input[type="submit"] {
     padding: 5px 5px 5px 28px;
     position: relative;
     cursor: pointer; }
+  .field.radio--block .label,
+  .field.radio--block label, .field.checkbox--block .label,
+  .field.checkbox--block label {
+    display: block; }
   .field.range {
     position: relative; }
     .field.range .input-range {

mopidy_iris/static/index.html

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

src/js/App.js

@@ -22,6 +22,7 @@ import * as mopidyActions from './services/mopidy/actions';
 import * as spotifyActions from './services/spotify/actions';
 import * as lastfmActions from './services/lastfm/actions';
 import * as geniusActions from './services/genius/actions';
+import * as snapcastActions from './services/snapcast/actions';
 
 
 /**
@@ -315,6 +316,7 @@ class App extends React.Component{
 			        	spotifyActions={this.props.spotifyActions} 
 			        	geniusActions={this.props.geniusActions} 
 			        	lastfmActions={this.props.lastfmActions} 
+			        	snapcastActions={this.props.snapcastActions} 
 			        	notifications={this.props.notifications} 
 			        	processes={this.props.processes}
 			        	broadcasts={this.props.broadcasts}
@@ -367,7 +369,8 @@ const mapDispatchToProps = (dispatch) => {
 		mopidyActions: bindActionCreators(mopidyActions, dispatch),
 		spotifyActions: bindActionCreators(spotifyActions, dispatch),
 		lastfmActions: bindActionCreators(lastfmActions, dispatch),
-		geniusActions: bindActionCreators(geniusActions, dispatch)
+		geniusActions: bindActionCreators(geniusActions, dispatch),
+		snapcastActions: bindActionCreators(snapcastActions, dispatch)
 	}
 }
 

src/js/components/Notifications.js

@@ -28,6 +28,10 @@ export default class Notifications extends React.Component{
 			this.props.geniusActions.importAuthorization(configuration.genius_authorization);
 		}
 
+		if (configuration.snapcast_client_commands){
+			this.props.snapcastActions.clientCommandsUpdated(configuration.snapcast_client_commands);
+		}
+
 		this.props.uiActions.removeNotification(notification_key, true);
 		this.props.uiActions.createNotification({type: 'info', content: 'Import successful'});
 	}

src/js/components/Services.js

@@ -69,15 +69,6 @@ class Services extends React.Component{
 	}
 
 	renderSpotify(){
-		var share_authorization_button = null;
-		if (this.props.spotify.authorization){
-			share_authorization_button = (
-				<Link className="button" to={global.baseURL+'settings/share-authorization'}>
-					Share authorization
-				</Link>
-			);
-		}
-
 		var user_object = (this.props.spotify.me && this.props.core.users[this.props.spotify.me.uri] ? this.props.core.users[this.props.spotify.me.uri] : null);
 		if (user_object){
 			var user = (
@@ -156,7 +147,6 @@ class Services extends React.Component{
 					<div className="name">Authorization</div>
 					<div className="input">
 						<SpotifyAuthenticationFrame />
-						{share_authorization_button}
 						{this.props.spotify.refreshing_token ? <button className="working">Refreshing...</button> : <button onClick={e => this.props.spotifyActions.refreshingToken()}>Force token refresh</button>}
 					</div>
 				</div>

src/js/services/pusher/middleware.js

@@ -90,7 +90,6 @@ const PusherMiddleware = (function(){
                         store.dispatch(spotifyActions.tokenChanged(message.params.spotify_token));
                         break;
                     case 'share_configuration_received':
-                        console.log(message);
                         store.dispatch(uiActions.createNotification({
                             type: 'share-configuration-received',
                             configuration: message.params,

src/js/services/snapcast/middleware.js

@@ -250,16 +250,13 @@ const SnapcastMiddleware = (function(){
                 var command = JSON.parse(action.command);
                 command.crossDomain = true;
                 command.dataType = "jsonp";
+                command.success = function(response){
+                	store.dispatch(uiActions.createNotification({type: 'info', content: 'Command sent', description: command.url}));
+                }
+
+                // Actually send the request
+                $.ajax(command);
 
-                $.ajax(command)
-                    .then(
-                        response => {
-                            console.log(response);
-                        },
-                        (xhr, status, error) => {
-                            console.error(error);
-                        }
-                    );
                 break
 
             case 'SNAPCAST_SET_CLIENT_GROUP':

src/js/views/modals/ShareConfiguration.js

@@ -18,9 +18,10 @@ class ShareConfiguration extends React.Component {
 
 		this.state = {
 			recipients: [],
-			spotify_authorization: true,
+			spotify_authorization: false,
-			lastfm_authorization: true,
+			lastfm_authorization: false,
-			genius_authorization: true,
+			genius_authorization: false,
+			snapcast_client_commands: false,
 			interface: true
 		};
 	}
@@ -56,6 +57,9 @@ class ShareConfiguration extends React.Component {
 		if (this.state.interface){
 			configuration.interface = this.props.interface;
 		}
+		if (this.state.interface){
+			configuration.snapcast_client_commands = this.props.snapcast_client_commands;
+		}
 
 		for (var recipient of this.state.recipients){
 			this.props.pusherActions.deliverMessage(
@@ -122,8 +126,8 @@ class ShareConfiguration extends React.Component {
 						{recipients}
 					</div>
 
-					<div className="field checkbox">
+					<div className="field checkbox checkbox--block">
-						<div className="name">Interface</div>
+						<div className="name">Configurations</div>
 						<div className="input">
 							<label>
 								<input 
@@ -135,61 +139,55 @@ class ShareConfiguration extends React.Component {
 									UI customisation (theme, sorting, filters)
 								</span>
 							</label>
-						</div>
-					</div>
 
-					<div className="field checkbox">
+							{this.props.snapcast_client_commands ? <label>
-						<div className="name">Spotify</div>
+								<input 
-						<div className="input">
+									type="checkbox"
-							<label>
+									name="snapcast_client_commands"
+									checked={this.state.snapcast_client_commands}
+									onChange={ e => this.setState({ snapcast_client_commands: !this.state.snapcast_client_commands })} />
+								<span className="label">
+									Snapcast client commands
+								</span>
+							</label> : null}
+
+							{this.props.spotify_me && this.props.spotify_authorization ? <label>
 								<input 
 									type="checkbox"
 									name="spotify_authorization"
-									checked={ this.state.spotify_authorization }
+									checked={this.state.spotify_authorization}
 									onChange={ e => this.setState({ spotify_authorization: !this.state.spotify_authorization })} />
 								<span className="label">
-									Authorization {this.props.spotify_me ? '('+this.props.spotify_me.name+')' : null}
+									Spotify authorization <span className="grey-text">&nbsp;Logged in as {this.props.spotify_me.name}</span>
 								</span>
-							</label>
+							</label> : null}
-						</div>
-					</div>
 
-					<div className="field checkbox">
+							{this.props.lastfm_me && this.props.lastfm_authorization ? <label>
-						<div className="name">LastFM</div>
-						<div className="input">
-							<label>
 								<input 
 									type="checkbox"
 									name="lastfm_authorization"
-									checked={ this.state.lastfm_authorization }
+									checked={this.state.lastfm_authorization}
 									onChange={ e => this.setState({ lastfm_authorization: !this.state.lastfm_authorization })} />
 								<span className="label">
-									Authorization {this.props.lastfm_me ? '('+this.props.lastfm_me.name+')' : null}
+									LastFM authorization <span className="grey-text">&nbsp;Logged in as {this.props.lastfm_me.name}</span>
 								</span>
-							</label>
+							</label> : null}
-						</div>
-					</div>
 
-					<div className="field checkbox">
+							{this.props.genius_me && this.props.genius_authorization ? <label>
-						<div className="name">Genius</div>
-						<div className="input">
-							<label>
 								<input 
 									type="checkbox"
 									name="genius_authorization"
-									checked={ this.state.genius_authorization }
+									checked={this.state.genius_authorization}
 									onChange={ e => this.setState({ genius_authorization: !this.state.genius_authorization })} />
 								<span className="label">
-									Authorization {this.props.genius_me ? '('+this.props.genius_me.name+')' : null}
+									Genius authorization <span className="grey-text">&nbsp;Logged in as {this.props.genius_me.name}</span>
 								</span>
-							</label>
+							</label> : null}
 						</div>
 					</div>
 
 					<div className="actions centered-text">
-						<button className="primary large" onClick={e => this.handleSubmit(e)}>
+						{this.state.recipients.length > 0 ? <button className="primary large" onClick={e => this.handleSubmit(e)}>Send</button> : <button className="primary large" disabled="disabled" onClick={e => this.handleSubmit(e)}>Send</button>}
-							Send
-						</button>
 					</div>
 				</form>
 			</Modal>
@@ -205,6 +203,7 @@ const mapStateToProps = (state, ownProps) => {
 		genius_me: state.genius.me,
 		lastfm_authorization: state.lastfm.authorization,
 		lastfm_me: state.lastfm.me,
+		snapcast_client_commands: state.snapcast.client_commands,
 		interface: state.ui,
 		connection_id: state.pusher.connection_id,
 		connections: state.pusher.connections

src/scss/global/_forms.scss

@@ -442,6 +442,13 @@ input[type="submit"] {
 			position: relative;
 			cursor: pointer;
 		}
+
+		&--block {
+			.label,
+			label {
+				display: block;
+			}
+		}
 	}
 
 	&.range {