secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Splitting out helpers into separate files

Browse Source
This commit is contained in:
James Barnsley
2020-03-03 16:39:37 +13:00
parent 57dd18e870
commit 5a1f08fdf0
105 changed files with 5456 additions and 5574 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/js/views/modals/AddToPlaylist.js
View File

@ -2,8 +2,6 @@
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ReactGA from 'react-ga';
import Loader from '../../components/Loader';
import Modal from './Modal';
import Icon from '../../components/Icon';
@ -12,7 +10,8 @@ import * as coreActions from '../../services/core/actions';
import * as uiActions from '../../services/ui/actions';
import * as mopidyActions from '../../services/mopidy/actions';
import * as spotifyActions from '../../services/spotify/actions';
import * as helpers from '../../helpers';
import { sourceIcon } from '../../util/helpers';
import { sortItems } from '../../util/arrays';
class AddToPlaylist extends React.Component {
constructor(props) {
@ -50,7 +49,7 @@ class AddToPlaylist extends React.Component {
if (playlists[uri].can_edit) editablePlaylists.push(playlists[uri]);
}
editablePlaylists = helpers.sortItems(editablePlaylists, 'name');
editablePlaylists = sortItems(editablePlaylists, 'name');
const isLoading = spotify_library_playlists_status === 'running';
@ -71,7 +70,7 @@ class AddToPlaylist extends React.Component {
<Thumbnail images={playlist.images} size="small" />
<h4 className="list__item__name">{ playlist.name }</h4>
<ul className="list__item__details details">
<li><Icon type="fontawesome" className="source" name={helpers.sourceIcon(playlist.uri)} /></li>
<li><Icon type="fontawesome" className="source" name={sourceIcon(playlist.uri)} /></li>
<li>
{ playlist.tracks_total ? (
<span className="mid_grey-text">

15
src/js/views/modals/AddToQueue.js
View File

@ -2,18 +2,13 @@
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ReactGA from 'react-ga';
import Link from '../../components/Link';
import Modal from './Modal';
import Icon from '../../components/Icon';
import * as coreActions from '../../services/core/actions';
import * as uiActions from '../../services/ui/actions';
import * as mopidyActions from '../../services/mopidy/actions';
import * as spotifyActions from '../../services/spotify/actions';
import * as helpers from '../../helpers';
class AddToQueue extends React.Component {
class AddToQueue extends React.Component {
constructor(props) {
super(props);
this.state = {
@ -46,7 +41,7 @@ class AddToQueue extends React.Component {
<input
type="text"
onChange={(e) => this.setState({ uris: e.target.value })}
value={this.state.uris}
value={this.state.uris}
/>
</div>
</div>
@ -61,7 +56,7 @@ class AddToQueue extends React.Component {
type="radio"
name="next"
checked={!this.state.next}
onChange={(e) => this.setState({ next: false })}
onChange={(e) => this.setState({ next: false })}
/>
<span className="label">End</span>
</label>
@ -70,7 +65,7 @@ class AddToQueue extends React.Component {
type="radio"
name="next"
checked={this.state.next}
onChange={(e) => this.setState({ next: true })}
onChange={(e) => this.setState({ next: true })}
/>
<span className="label">After current track</span>
</label>
@ -99,4 +94,4 @@ const mapDispatchToProps = (dispatch) => ({
spotifyActions: bindActionCreators(spotifyActions, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(AddToQueue);
export default connect(mapStateToProps, mapDispatchToProps)(AddToQueue);

25
src/js/views/modals/CreatePlaylist.js
View File

@ -2,16 +2,11 @@
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ReactGA from 'react-ga';
import Link from '../../components/Link';
import Modal from './Modal';
import Icon from '../../components/Icon';
import * as coreActions from '../../services/core/actions';
import * as uiActions from '../../services/ui/actions';
import * as helpers from '../../helpers';
class CreatePlaylist extends React.Component {
class CreatePlaylist extends React.Component {
constructor(props) {
super(props);
this.state = {
@ -48,7 +43,7 @@ class CreatePlaylist extends React.Component {
}
renderFields() {
switch (this.state.scheme) {
switch (this.state.scheme) {
case 'spotify':
return (
<div>
@ -58,7 +53,7 @@ class CreatePlaylist extends React.Component {
<input
type="text"
onChange={(e) => this.setState({ name: e.target.value })}
value={this.state.name}
value={this.state.name}
/>
</div>
</div>
@ -70,7 +65,7 @@ class CreatePlaylist extends React.Component {
type="text"
onChange={(e) => this.setState({ description: e.target.value })}
value={this.state.description}
value={this.state.description}
/>
</div>
</div>
@ -85,7 +80,7 @@ class CreatePlaylist extends React.Component {
type="checkbox"
name="is_public"
checked={this.state.is_public}
onChange={(e) => this.setState({ is_public: !this.state.is_public })}
onChange={(e) => this.setState({ is_public: !this.state.is_public })}
/>
<span className="label">Public</span>
</label>
@ -94,7 +89,7 @@ class CreatePlaylist extends React.Component {
type="checkbox"
name="is_collaborative"
checked={this.state.is_collaborative}
onChange={(e) => this.setState({ is_collaborative: !this.state.is_collaborative })}
onChange={(e) => this.setState({ is_collaborative: !this.state.is_collaborative })}
/>
<span className="label">Collaborative</span>
</label>
@ -112,7 +107,7 @@ class CreatePlaylist extends React.Component {
<input
type="text"
onChange={(e) => this.setState({ name: e.target.value })}
value={this.state.name}
value={this.state.name}
/>
</div>
</div>
@ -138,7 +133,7 @@ class CreatePlaylist extends React.Component {
name="scheme"
value="spotify"
checked={this.state.scheme == 'spotify'}
onChange={(e) => this.setState({ scheme: e.target.value })}
onChange={(e) => this.setState({ scheme: e.target.value })}
/>
<span className="label">Spotify</span>
</label>
@ -148,7 +143,7 @@ class CreatePlaylist extends React.Component {
name="scheme"
value="m3u"
checked={this.state.scheme == 'm3u'}
onChange={(e) => this.setState({ scheme: e.target.value })}
onChange={(e) => this.setState({ scheme: e.target.value })}
/>
<span className="label">Mopidy</span>
</label>
@ -174,4 +169,4 @@ const mapDispatchToProps = (dispatch) => ({
uiActions: bindActionCreators(uiActions, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(CreatePlaylist);
export default connect(mapStateToProps, mapDispatchToProps)(CreatePlaylist);

47
src/js/views/modals/EditCommand.js
View File

@ -2,24 +2,19 @@
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ReactGA from 'react-ga';
import Modal from './Modal';
import Link from '../../components/Link';
import Icon from '../../components/Icon';
import ColourField from '../../components/Fields/ColourField';
import IconField from '../../components/Fields/IconField';
import TextField from '../../components/Fields/TextField';
import * as pusherActions from '../../services/pusher/actions';
import * as uiActions from '../../services/ui/actions';
import * as helpers from '../../helpers';
import { scrollTo, generateGuid } from '../../util/helpers';
class EditCommand extends React.Component {
class EditCommand extends React.Component {
constructor(props) {
super(props);
this.state = {
id: helpers.generateGuid(),
id: generateGuid(),
icon: 'power_settings_new',
name: '',
colour: '',
@ -49,7 +44,7 @@ class EditCommand extends React.Component {
// A bit hacky, but wait for a moment to allow the back navigation
// and then scroll down to our commands list
setTimeout(() => {
helpers.scrollTo('#commands-setup');
scrollTo('#commands-setup');
},
10);
@ -63,12 +58,12 @@ class EditCommand extends React.Component {
// A bit hacky, but wait for a moment to allow the back navigation
// and then scroll down to our commands list
setTimeout(() => {
helpers.scrollTo('#commands-setup');
scrollTo('#commands-setup');
},
10);
}
render() {
render() {
const icons = [
'power_settings_new',
'eject',
@ -114,10 +109,10 @@ class EditCommand extends React.Component {
return (
<Modal className="modal--create-command">
<h1>
{this.props.command ? 'Edit' : 'Create'}
{' '}
command
<h1>
{this.props.command ? 'Edit' : 'Create'}
{' '}
command
</h1>
<form onSubmit={(e) => this.handleSubmit(e)}>
@ -129,7 +124,7 @@ command
<TextField
name="name"
value={this.state.name}
onChange={(value) => this.setState({ name: value })}
onChange={(value) => this.setState({ name: value })}
/>
</div>
</div>
@ -141,7 +136,7 @@ command
<div className="input">
<ColourField
colour={this.state.colour}
onChange={(colour) => this.setState({ colour })}
onChange={(colour) => this.setState({ colour })}
/>
</div>
</div>
@ -154,7 +149,7 @@ command
<IconField
icon={this.state.icon}
icons={icons}
onChange={(icon) => this.setState({ icon })}
onChange={(icon) => this.setState({ icon })}
/>
</div>
</div>
@ -167,7 +162,7 @@ command
<TextField
name="url"
value={this.state.url}
onChange={(value) => this.setState({ url: value })}
onChange={(value) => this.setState({ url: value })}
/>
</div>
</div>
@ -183,7 +178,7 @@ command
name="method"
value="GET"
checked={this.state.method == 'GET'}
onChange={(e) => this.setState({ method: e.target.value })}
onChange={(e) => this.setState({ method: e.target.value })}
/>
<span className="label">GET</span>
</label>
@ -193,14 +188,14 @@ command
name="method"
value="POST"
checked={this.state.method == 'POST'}
onChange={(e) => this.setState({ method: e.target.value })}
onChange={(e) => this.setState({ method: e.target.value })}
/>
<span className="label">POST</span>
</label>
</div>
</div>
{this.state.method == 'POST' && (
{this.state.method == 'POST' && (
<div className="field textarea white">
<div className="name">
Data
@ -209,10 +204,10 @@ command
<textarea
name="command"
value={this.state.post_data}
onChange={(e) => this.setState({ post_data: e.target.value })}
onChange={(e) => this.setState({ post_data: e.target.value })}
/>
</div>
</div>
</div>
)}
<div className="field textarea white">
@ -223,7 +218,7 @@ command
<textarea
name="headers"
value={this.state.additional_headers}
onChange={(e) => this.setState({ additional_headers: e.target.value })}
onChange={(e) => this.setState({ additional_headers: e.target.value })}
/>
</div>
</div>
@ -253,4 +248,4 @@ const mapDispatchToProps = (dispatch) => ({
uiActions: bindActionCreators(uiActions, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(EditCommand);
export default connect(mapStateToProps, mapDispatchToProps)(EditCommand);

32
src/js/views/modals/EditPlaylist.js
View File

@ -2,18 +2,14 @@
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ReactGA from 'react-ga';
import Link from '../../components/Link';
import Modal from './Modal';
import Icon from '../../components/Icon';
import * as coreActions from '../../services/core/actions';
import * as uiActions from '../../services/ui/actions';
import * as mopidyActions from '../../services/mopidy/actions';
import * as spotifyActions from '../../services/spotify/actions';
import * as helpers from '../../helpers';
import { uriSource } from '../../util/helpers';
class EditPlaylist extends React.Component {
class EditPlaylist extends React.Component {
constructor(props) {
super(props);
this.state = {
@ -26,7 +22,7 @@ class EditPlaylist extends React.Component {
};
}
componentDidMount() {
componentDidMount() {
this.props.uiActions.setWindowTitle('Edit playlist');
if (this.props.playlist) {
@ -37,7 +33,7 @@ class EditPlaylist extends React.Component {
collaborative: (this.props.playlist.collaborative == true),
});
} else {
switch (helpers.uriSource(this.props.uri)) {
switch (helpers.uriSource(this.props.uri)) {
case 'spotify':
this.props.spotifyActions.getPlaylist(this.props.uri);
this.props.spotifyActions.following(this.props.uri);
@ -52,7 +48,7 @@ class EditPlaylist extends React.Component {
}
}
componentWillReceiveProps(nextProps) {
componentWillReceiveProps(nextProps) {
// Playlist just loaded
if (!this.props.playlist && nextProps.playlist) {
this.setState({
@ -84,7 +80,7 @@ class EditPlaylist extends React.Component {
this.state.image,
);
window.history.back();
return false;
return false;
}
setImage(e) {
@ -104,7 +100,7 @@ class EditPlaylist extends React.Component {
}
renderFields() {
switch (helpers.uriSource(this.props.uri)) {
switch (uriSource(this.props.uri)) {
case 'spotify':
return (
<div>
@ -114,7 +110,7 @@ class EditPlaylist extends React.Component {
<input
type="text"
onChange={(e) => this.setState({ name: e.target.value })}
value={this.state.name}
value={this.state.name}
/>
</div>
</div>
@ -124,7 +120,7 @@ class EditPlaylist extends React.Component {
<input
type="text"
onChange={(e) => this.setState({ description: e.target.value })}
value={this.state.description}
value={this.state.description}
/>
</div>
</div>
@ -134,7 +130,7 @@ class EditPlaylist extends React.Component {
<input
type="file"
placeholder="Leave empty to keep existing image"
onChange={(e) => this.setImage(e)}
onChange={(e) => this.setImage(e)}
/>
<div className="description">
JPEG only, 256kB max. Leave empty to keep cover image unchanged.
@ -151,7 +147,7 @@ class EditPlaylist extends React.Component {
type="checkbox"
name="playlist_private"
checked={this.state.public}
onChange={(e) => this.setState({ public: !this.state.public })}
onChange={(e) => this.setState({ public: !this.state.public })}
/>
<span className="label">Public</span>
</label>
@ -160,7 +156,7 @@ class EditPlaylist extends React.Component {
type="checkbox"
name="collaborative"
checked={this.state.collaborative}
onChange={(e) => this.setState({ collaborative: !this.state.collaborative })}
onChange={(e) => this.setState({ collaborative: !this.state.collaborative })}
/>
<span className="label">Collaborative</span>
</label>
@ -179,7 +175,7 @@ class EditPlaylist extends React.Component {
<input
type="text"
onChange={(e) => this.setState({ name: e.target.value })}
value={this.state.name}
value={this.state.name}
/>
</div>
</div>
@ -206,7 +202,7 @@ class EditPlaylist extends React.Component {
}
}
const mapStateToProps = (state, ownProps) => {
const mapStateToProps = (state, ownProps) => {
// Decode the URI, and then re-encode selected characters
// This is needed as Mopidy encodes *some* characters in playlist URIs (but not other characters)
// We need to retain ":" because this a reserved URI separator

19
src/js/views/modals/EditRadio.js
View File

@ -2,18 +2,17 @@
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ReactGA from 'react-ga';
import Link from '../../components/Link';
import Modal from './Modal';
import Icon from '../../components/Icon';
import * as coreActions from '../../services/core/actions';
import * as uiActions from '../../services/ui/actions';
import * as mopidyActions from '../../services/mopidy/actions';
import * as spotifyActions from '../../services/spotify/actions';
import * as pusherActions from '../../services/pusher/actions';
import * as helpers from '../../helpers';
import {
uriSource,
uriType,
} from '../../util/helpers';
class EditRadio extends React.Component {
constructor(props) {
@ -110,7 +109,7 @@ class EditRadio extends React.Component {
}
for (let i = 0; i < uris.length; i++) {
if (helpers.uriSource(uris[i]) !== 'spotify') {
if (uriSource(uris[i]) !== 'spotify') {
this.setState({ error_message: 'Non-Spotify URIs not supported' });
return;
} if (seeds.indexOf(uris[i]) > -1) {
@ -120,7 +119,7 @@ class EditRadio extends React.Component {
}
// Resolve
switch (helpers.uriType(uris[i])) {
switch (uriType(uris[i])) {
case 'track':
this.props.spotifyActions.getTrack(uris[i]);
break;
@ -155,7 +154,7 @@ class EditRadio extends React.Component {
for (let i = 0; i < this.state.seeds.length && i < 5; i++) {
const uri = this.state.seeds[i];
if (uri) {
if (helpers.uriType(uri) == 'artist') {
if (uriType(uri) == 'artist') {
if (this.props.artists && this.props.artists.hasOwnProperty(uri)) {
seeds.push(this.props.artists[uri]);
} else {
@ -164,7 +163,7 @@ class EditRadio extends React.Component {
uri,
});
}
} else if (helpers.uriType(uri) == 'track') {
} else if (uriType(uri) == 'track') {
if (this.props.tracks && this.props.tracks.hasOwnProperty(uri)) {
seeds.push(this.props.tracks[uri]);
} else {
@ -195,7 +194,7 @@ class EditRadio extends React.Component {
{!seed.unresolved ? (
<span className="mid_grey-text">
&nbsp;(
{helpers.uriType(seed.uri)}
{uriType(seed.uri)}
)
</span>
) : null}

14
src/js/views/modals/ImageZoom.js
View File

@ -1,19 +1,11 @@
import React from 'react';
import { connect } from 'react-redux';
import { createStore, bindActionCreators } from 'redux';
import { bindActionCreators } from 'redux';
import Modal from './Modal';
import Thumbnail from '../../components/Thumbnail';
import * as helpers from '../../helpers';
import * as uiActions from '../../services/ui/actions';
class ImageZoom extends React.Component {
constructor(props) {
super(props);
}
class ImageZoom extends React.Component {
componentDidMount() {
this.props.uiActions.setWindowTitle('Zoomed image');
}
@ -33,4 +25,4 @@ const mapDispatchToProps = (dispatch) => ({
uiActions: bindActionCreators(uiActions, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(ImageZoom);
export default connect(mapStateToProps, mapDispatchToProps)(ImageZoom);

10
src/js/views/modals/InitialSetup.js
View File

@ -2,14 +2,12 @@
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Modal from './Modal';
import * as coreActions from '../../services/core/actions';
import * as uiActions from '../../services/ui/actions';
import * as pusherActions from '../../services/pusher/actions';
import * as mopidyActions from '../../services/mopidy/actions';
import * as helpers from '../../helpers';
import { queryString, isHosted } from '../../util/helpers';
class InitialSetup extends React.Component {
constructor(props) {
@ -39,8 +37,8 @@ class InitialSetup extends React.Component {
} = this.props;
// Check for url-parsed configuration values
const customHost = helpers.queryString('host', search);
const customPort = helpers.queryString('port', search);
const customHost = queryString('host', search);
const customPort = queryString('port', search);
if (customHost) this.setState({ host: customHost });
if (customPort) this.setState({ port: customPort });
@ -127,7 +125,7 @@ class InitialSetup extends React.Component {
</div>
</div>
{helpers.isHosted() ? null : (
{isHosted() ? null : (
<div className="field checkbox">
<div className="input">
<label>

8
src/js/views/modals/KioskMode.js
View File

@ -1,20 +1,18 @@
import React from 'react';
import { connect } from 'react-redux';
import { createStore, bindActionCreators } from 'redux';
import { bindActionCreators } from 'redux';
import Link from '../../components/Link';
import Modal from './Modal';
import Thumbnail from '../../components/Thumbnail';
import LinksSentence from '../../components/LinksSentence';
import Loader from '../../components/Loader';
import Icon from '../../components/Icon';
import ProgressSlider from '../../components/Fields/ProgressSlider';
import * as helpers from '../../helpers';
import * as uiActions from '../../services/ui/actions';
import * as mopidyActions from '../../services/mopidy/actions';
import * as geniusActions from '../../services/genius/actions';
import { isLoading } from '../../util/helpers';
const LyricsScroller = ({ content = '', time_position = 1, duration = 100 }) => {
const percent = ((time_position / duration) * 110).toFixed(4);
@ -123,7 +121,7 @@ class KioskMode extends React.Component {
const { lyrics, duration } = current_track || {};
if (helpers.isLoading(load_queue, ['genius_'])) {
if (isLoading(load_queue, ['genius_'])) {
return (
<div className="lyrics">
<Loader body loading />

7
src/js/views/modals/Modal.js
View File

@ -1,16 +1,9 @@
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as helpers from '../../helpers';
import Icon from '../../components/Icon';
class Modal extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
$('body').addClass('modal-open');
}

9
src/js/views/modals/ShareConfiguration.js
View File

@ -1,15 +1,10 @@
import React from 'react';
import { connect } from 'react-redux';
import { createStore, bindActionCreators } from 'redux';
import Link from '../../components/Link';
import { bindActionCreators } from 'redux';
import Modal from './Modal';
import Icon from '../../components/Icon';
import * as uiActions from '../../services/ui/actions';
import * as pusherActions from '../../services/pusher/actions';
import * as helpers from '../../helpers';
class ShareConfiguration extends React.Component {
constructor(props) {
@ -223,7 +218,7 @@ class ShareConfiguration extends React.Component {
</div>
</label>
</div>
<div className="checkbox-group__item">
<label>
<input