Groundwork for crossfading now playing artwork; Initial Setup pre-fill from queryParams

This commit is contained in:
James Barnsley
2020-02-11 09:52:18 +13:00
parent ff8b7df8b1
commit 066da7f7ca
6 changed files with 83 additions and 69 deletions

View File

@ -233,7 +233,7 @@ class Queue extends React.Component {
<Icon name="play_arrow" type="material" />
Now playing
</Header>
<Parallax blur image={current_track_image} />
<Parallax image={current_track_image} blur />
<div className="content-wrapper">
<div className="current-track">
{this.renderArtwork(current_track_image)}

View File

@ -15,16 +15,35 @@ class InitialSetup extends React.Component {
constructor(props) {
super(props);
const {
host,
port,
username,
allow_reporting,
} = props;
this.state = {
username: this.props.username,
allow_reporting: this.props.allow_reporting,
host: this.props.host,
port: this.props.port,
username,
allow_reporting,
host,
port,
};
}
componentDidMount() {
this.props.uiActions.setWindowTitle('Welcome to Iris');
const {
location: {
search,
},
uiActions,
} = this.props;
// Check for url-parsed configuration values
const customHost = helpers.queryString('host', search);
const customPort = helpers.queryString('port', search);
this.setState({ host: customHost, port: customPort });
uiActions.setWindowTitle('Welcome to Iris');
}
handleSubmit(e) {
@ -49,7 +68,7 @@ class InitialSetup extends React.Component {
this.setState({ saving: true });
// Wait a jiffy to allow changes to apply to store
setTimeout(() => {
setTimeout(() => {
// We've changed a connection setting, so need to reload
if (self.state.host !== self.props.host || self.state.port !== self.props.port) {
window.location = '/';
@ -78,7 +97,7 @@ class InitialSetup extends React.Component {
<input
type="text"
onChange={(e) => this.setState({ username: e.target.value.replace(/\W/g, '') })}
value={this.state.username}
value={this.state.username}
/>
<div className="description">
A non-unique string used to identify this client (no special characters)
@ -92,7 +111,7 @@ class InitialSetup extends React.Component {
<input
type="text"
onChange={(e) => this.setState({ host: e.target.value })}
value={this.state.host}
value={this.state.host}
/>
</div>
</div>
@ -102,12 +121,12 @@ class InitialSetup extends React.Component {
<input
type="text"
onChange={(e) => this.setState({ port: e.target.value })}
value={this.state.port}
value={this.state.port}
/>
</div>
</div>
{helpers.isHosted() ? null : (
{helpers.isHosted() ? null : (
<div className="field checkbox">
<div className="input">
<label>
@ -115,21 +134,21 @@ class InitialSetup extends React.Component {
type="checkbox"
name="allow_reporting"
checked={this.state.allow_reporting}
onChange={(e) => this.setState({ allow_reporting: !this.state.allow_reporting })}
onChange={(e) => this.setState({ allow_reporting: !this.state.allow_reporting })}
/>
<span className="label">
Allow reporting of anonymous usage statistics
</span>
</label>
<p className="description">
This anonymous usage data is important in identifying errors and potential features that make Iris better for everyone. Want to know more? Read the
<a href="https://github.com/jaedb/Iris/wiki/Terms-of-use#privacy-policy" target="_blank">privacy policy</a>
{!this.state.allow_reporting ? <span className="red-text"> Are you sure you don't want to support this?</span> : null}
.
{' '}
<p className="description">
This anonymous usage data is important in identifying errors and potential features that make Iris better for everyone. Want to know more? Read the
<a href="https://github.com/jaedb/Iris/wiki/Terms-of-use#privacy-policy" target="_blank">privacy policy</a>
{!this.state.allow_reporting ? <span className="red-text"> Are you sure you don't want to support this?</span> : null}
.
{' '}
</p>
</div>
</div>
</div>
)}
<div className="actions centered-text">
@ -158,4 +177,4 @@ const mapDispatchToProps = (dispatch) => ({
mopidyActions: bindActionCreators(mopidyActions, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(InitialSetup);
export default connect(mapStateToProps, mapDispatchToProps)(InitialSetup);