Sharing of settings (including Snapcast); Fixing commands storage
This commit is contained in:
James Barnsley
@ -63,8 +63,8 @@ class Settings extends React.Component {
|
||||
if ('serviceWorker' in navigator) {
|
||||
|
||||
// Hose out all our caches
|
||||
caches.keys().then(function(cacheNames) {
|
||||
cacheNames.forEach(function(cacheName) {
|
||||
caches.keys().then(function (cacheNames) {
|
||||
cacheNames.forEach(function (cacheName) {
|
||||
caches.delete(cacheName);
|
||||
});
|
||||
});
|
||||
@ -245,7 +245,7 @@ class Settings extends React.Component {
|
||||
|
||||
<div className="field radio">
|
||||
<div className="name">
|
||||
Theme
|
||||
Theme
|
||||
</div>
|
||||
<div className="input">
|
||||
<label>
|
||||
@ -282,7 +282,7 @@ class Settings extends React.Component {
|
||||
onChange={(e) => uiActions.set({ clear_tracklist_on_play: !ui.clear_tracklist_on_play })}
|
||||
/>
|
||||
<span className="label tooltip">
|
||||
Clear tracklist on play of URI(s)
|
||||
Clear tracklist on play of URI(s)
|
||||
<span className="tooltip__content">Playing one or more URIs will clear the current play queue first</span>
|
||||
</span>
|
||||
</label>
|
||||
@ -294,7 +294,7 @@ class Settings extends React.Component {
|
||||
onChange={(e) => uiActions.set({ hotkeys_enabled: !ui.hotkeys_enabled })}
|
||||
/>
|
||||
<span className="label">
|
||||
Enable hotkeys
|
||||
Enable hotkeys
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
@ -305,7 +305,7 @@ class Settings extends React.Component {
|
||||
onChange={(e) => uiActions.set({ smooth_scrolling_enabled: !ui.smooth_scrolling_enabled })}
|
||||
/>
|
||||
<span className="label">
|
||||
Enable smooth scrolling
|
||||
Enable smooth scrolling
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
@ -316,7 +316,7 @@ class Settings extends React.Component {
|
||||
onChange={(e) => uiActions.set({ playback_controls_touch_enabled: !ui.playback_controls_touch_enabled })}
|
||||
/>
|
||||
<span className="label tooltip">
|
||||
Enable touch events on play controls
|
||||
Enable touch events on play controls
|
||||
<span className="tooltip__content">Allows left- and right-swipe to change tracks</span>
|
||||
</span>
|
||||
</label>
|
||||
@ -328,7 +328,7 @@ class Settings extends React.Component {
|
||||
onChange={(e) => uiActions.set({ wide_scrollbar_enabled: !ui.wide_scrollbar_enabled })}
|
||||
/>
|
||||
<span className="label">
|
||||
Use wide scrollbars
|
||||
Use wide scrollbars
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
@ -336,7 +336,7 @@ class Settings extends React.Component {
|
||||
|
||||
<div className="field sources-priority">
|
||||
<div className="name">
|
||||
Sources priority
|
||||
Sources priority
|
||||
</div>
|
||||
<div className="input">
|
||||
<SourcesPriority
|
||||
@ -345,7 +345,7 @@ class Settings extends React.Component {
|
||||
uiActions={uiActions}
|
||||
/>
|
||||
<div className="description">
|
||||
Drag-and-drop to prioritize search providers and results
|
||||
Drag-and-drop to prioritize search providers and results
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -362,13 +362,13 @@ class Settings extends React.Component {
|
||||
onChange={(e) => uiActions.set({ allow_reporting: !ui.allow_reporting })}
|
||||
/>
|
||||
<span className="label">
|
||||
Allow reporting of anonymous usage statistics
|
||||
Allow reporting of anonymous usage statistics
|
||||
</span>
|
||||
</label>
|
||||
<div className="description">
|
||||
This helps identify errors and potential features that make Iris better for everyone. See
|
||||
This helps identify errors and potential features that make Iris better for everyone. See
|
||||
<a href="https://github.com/jaedb/Iris/wiki/Terms-of-use#privacy-policy" target="_blank">privacy policy</a>
|
||||
.
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -376,7 +376,7 @@ This helps identify errors and potential features that make Iris better for ever
|
||||
|
||||
<div className="field commands-setup" id="commands-setup">
|
||||
<div className="name">
|
||||
Commands
|
||||
Commands
|
||||
</div>
|
||||
<div className="input">
|
||||
<Commands
|
||||
@ -389,7 +389,7 @@ This helps identify errors and potential features that make Iris better for ever
|
||||
</div>
|
||||
|
||||
<h4 className="underline">
|
||||
Advanced
|
||||
Advanced
|
||||
<a name="advanced" />
|
||||
</h4>
|
||||
|
||||
@ -403,7 +403,7 @@ Advanced
|
||||
onBlur={(e) => this.handleBlur('mopidy', 'library_artists_uri', e.target.value)}
|
||||
/>
|
||||
<div className="description">
|
||||
URI used for collecting library artists
|
||||
URI used for collecting library artists
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -418,7 +418,7 @@ Advanced
|
||||
onBlur={(e) => this.handleBlur('mopidy', 'library_albums_uri', e.target.value)}
|
||||
/>
|
||||
<div className="description">
|
||||
URI used for collecting library albums
|
||||
URI used for collecting library albums
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
@ -444,11 +444,11 @@ Advanced
|
||||
{' Upgrade available'}
|
||||
</span>
|
||||
) : (
|
||||
<span className="flag flag--dark">
|
||||
<Icon name="check" className="green-text" />
|
||||
{' Up-to-date'}
|
||||
</span>
|
||||
)}
|
||||
<span className="flag flag--dark">
|
||||
<Icon name="check" className="green-text" />
|
||||
{' Up-to-date'}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -463,7 +463,7 @@ Advanced
|
||||
<button className="button button--secondary" onClick={(e) => this.props.pusherActions.upgrade()}>
|
||||
{`Upgrade to ${this.props.pusher.version.latest}`}
|
||||
</button>
|
||||
) : null }
|
||||
) : null}
|
||||
<button className={`button button--destructive${this.props.mopidy.restarting ? ' button--working' : ''}`} onClick={(e) => this.props.pusherActions.restart()}>Restart server</button>
|
||||
<ConfirmationButton
|
||||
className="button--destructive"
|
||||
@ -487,9 +487,9 @@ Advanced
|
||||
<div>
|
||||
<em><a href="https://github.com/jaedb/Iris" target="_blank">Iris</a></em>
|
||||
{' '}
|
||||
is an open-source project by
|
||||
is an open-source project by
|
||||
<a href="https://github.com/jaedb" target="_blank">James Barnsley</a>
|
||||
. It is provided free and with absolutely no warranty. If you paid someone for this software, please let me know.
|
||||
. It is provided free and with absolutely no warranty. If you paid someone for this software, please let me know.
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
@ -497,16 +497,16 @@ is an open-source project by
|
||||
<a className="button button--default" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=james%40barnsley%2enz&lc=NZ&item_name=James%20Barnsley¤cy_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted" target="_blank">
|
||||
<Icon type="fontawesome" name="paypal" />
|
||||
{' '}
|
||||
Donate
|
||||
Donate
|
||||
</a>
|
||||
<a className="button button--default" href="https://github.com/jaedb/Iris" target="_blank">
|
||||
<Icon type="fontawesome" name="github" />
|
||||
{' '}
|
||||
GitHub
|
||||
GitHub
|
||||
</a>
|
||||
<a className="button button--default" href="http://creativecommons.org/licenses/by-nc/4.0/" target="_blank">
|
||||
<Icon type="fontawesome" name="creative-commons" />
|
||||
Licence
|
||||
Licence
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@ -64,6 +64,13 @@ class ShareConfiguration extends React.Component {
|
||||
if (this.state.ui) {
|
||||
configuration.ui = this.props.ui;
|
||||
}
|
||||
if (this.state.snapcast) {
|
||||
configuration.snapcast = {
|
||||
enabled: this.props.snapcast.enabled,
|
||||
host: this.props.snapcast.host,
|
||||
port: this.props.snapcast.port,
|
||||
}
|
||||
}
|
||||
|
||||
for (const recipient of this.state.recipients) {
|
||||
this.props.pusherActions.deliverMessage(
|
||||
@ -88,7 +95,7 @@ class ShareConfiguration extends React.Component {
|
||||
var recipients = (
|
||||
<div className="input checkbox-group">
|
||||
{
|
||||
connections.map((connection, index) => (
|
||||
connections.map((connection, index) => (
|
||||
<div key={connection.connection_id} className="checkbox-group__item">
|
||||
<label>
|
||||
<input
|
||||
@ -99,23 +106,23 @@ class ShareConfiguration extends React.Component {
|
||||
/>
|
||||
<div className="label">
|
||||
<div>
|
||||
<div className="title">{ connection.username }</div>
|
||||
<div className="title">{connection.username}</div>
|
||||
<div className="description mid_grey-text">
|
||||
({ connection.ip })
|
||||
({connection.ip})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
))
|
||||
}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
var recipients = (
|
||||
<div className="input text">
|
||||
<span className="mid_grey-text">
|
||||
No peer connections
|
||||
No peer connections
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
@ -136,19 +143,6 @@ class ShareConfiguration extends React.Component {
|
||||
<div className="field checkbox checkbox--block">
|
||||
<div className="name">Configurations</div>
|
||||
<div className="input">
|
||||
<div className="checkbox-group__item">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="interface"
|
||||
checked={this.state.ui}
|
||||
onChange={(e) => this.setState({ ui: !this.state.ui })}
|
||||
/>
|
||||
<span className="label">
|
||||
<span className="title">UI customisation (theme, sorting, filters)</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{this.props.spotify_me && this.props.spotify_authorization && (
|
||||
<div className="checkbox-group__item">
|
||||
@ -205,13 +199,47 @@ class ShareConfiguration extends React.Component {
|
||||
<div>
|
||||
<div className="title">Genius authorization</div>
|
||||
<div className="description mid_grey-text">
|
||||
{`Logged in as ${this.props.genius_me.name}`}
|
||||
{`Logged in as ${this.props.genius_me.name}`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="checkbox-group__item">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="snapcast"
|
||||
checked={this.state.snapcast}
|
||||
onChange={() => this.setState({ snapcast: !this.state.snapcast })}
|
||||
/>
|
||||
<div className="label">
|
||||
<div>
|
||||
<div className="title">Snapcast</div>
|
||||
<div className="description mid_grey-text">Server connection details</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="checkbox-group__item">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="interface"
|
||||
checked={this.state.ui}
|
||||
onChange={(e) => this.setState({ ui: !this.state.ui })}
|
||||
/>
|
||||
<div className="label">
|
||||
<div>
|
||||
<div className="title">Interface settings</div>
|
||||
<div className="description mid_grey-text">Theme, sorting, filters, etc</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -232,6 +260,7 @@ const mapStateToProps = (state, ownProps) => ({
|
||||
lastfm_authorization: state.lastfm.authorization,
|
||||
lastfm_me: state.lastfm.me,
|
||||
ui: state.ui,
|
||||
snapcast: state.snapcast,
|
||||
connection_id: state.pusher.connection_id,
|
||||
connections: state.pusher.connections,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user