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

Adding Queue modals

Browse Source
This commit is contained in:
James Barnsley
2018-07-09 19:09:12 +12:00
parent e5d48b2216
commit 610fe5da24
9 changed files with 24030 additions and 21092 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44971
mopidy_iris/static/app.js
View File

File diff suppressed because it is too large Load Diff

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -74,7 +74,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1531038820";
var build = "1531081129";
var version = "3.22.0";
// Construct the script tag

6
src/js/index.js
View File

@ -36,6 +36,9 @@ import LibraryPlaylists from './views/library/LibraryPlaylists';
import LibraryBrowse from './views/library/LibraryBrowse';
import EditPlaylist from './views/modals/EditPlaylist';
import CreatePlaylist from './views/modals/CreatePlaylist';
import EditRadio from './views/modals/EditRadio';
import AddToQueue from './views/modals/AddToQueue';
/*
// Hijack console error for Raven to capture
@ -55,12 +58,15 @@ ReactDOM.render(
<IndexRoute component={Queue} />
<Route path="queue" component={Queue} />
<Route path="queue/history" component={QueueHistory} />
<Route path="queue/radio" component={EditRadio} />
<Route path="queue/add-uri" component={AddToQueue} />
<Route path="settings/debug" component={Debug} />
<Route path="settings(/service/:sub_view)" component={Settings} />
<Route path="search(/:query)" component={Search} />
<Route path="album/:uri" component={Album} />
<Route path="artist/:uri(/:sub_view)" component={Artist} />
<Route path="playlist/create" component={CreatePlaylist} />
<Route path="playlist/:uri" component={Playlist} />
<Route path="playlist/:uri/edit" component={EditPlaylist} />
<Route path="user/:uri" component={User} />

12
src/js/views/Queue.js
View File

@ -143,19 +143,19 @@ class Queue extends React.Component{
var options = (
<span>
{this.props.spotify_enabled ? <button className="no-hover" onClick={e => this.props.uiActions.openModal('edit_radio')}>
{this.props.spotify_enabled ? <Link className="button no-hover" to={global.baseURL+'queue/radio'}>
<Icon name="radio" />Radio
{this.props.radio && this.props.radio.enabled ? <span className="flag blue">On</span> : null}
</button> : null}
<button className="no-hover" onClick={e => hashHistory.push(global.baseURL+'queue/history')}>
</Link> : null}
<Link className="button no-hover" to={global.baseURL+'queue/history'}>
<Icon name="history" />History
</button>
</Link>
<button className="no-hover" onClick={e => {this.props.mopidyActions.clearTracklist(); this.props.uiActions.hideContextMenu();}}>
<Icon name="delete_sweep" />Clear
</button>
<button className="no-hover" onClick={e => this.props.uiActions.openModal('add_to_queue', {})}>
<Link className="button no-hover" to={global.baseURL+'queue/add-uri'}>
<Icon name="playlist_add" />Add URI
</button>
</Link>
</span>
)

4
src/js/views/library/LibraryPlaylists.js
View File

@ -254,9 +254,9 @@ class LibraryPlaylists extends React.Component{
options={source_options}
handleChange={value => {this.props.uiActions.set({ library_playlists_source: value}); this.props.uiActions.hideContextMenu() }}
/>
<button className="no-hover" onClick={ () => this.props.uiActions.openModal('create_playlist', {} ) }>
<Link className="button no-hover" to={global.baseURL+'playlist/create'}>
<Icon name="add_box" />New
</button>
</Link>
</span>
)

43
src/js/views/modals/AddToQueueModal.js → src/js/views/modals/AddToQueue.js
View File

@ -1,10 +1,19 @@
import React, { PropTypes } from 'react';;
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import ReactGA from 'react-ga'
import Icon from '../Icon';
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';
export default class AddToQueueModal extends React.Component{
class AddToQueue extends React.Component{
constructor(props){
super(props)
@ -15,14 +24,15 @@ export default class AddToQueueModal extends React.Component{
}
handleSubmit(e){
e.preventDefault();
var uris = this.state.uris.split(',');
this.props.mopidyActions.enqueueURIs(uris, null, this.state.next);
this.props.uiActions.closeModal();
window.history.back();
}
render(){
return (
<div>
<Modal className="add-to-queue-modal">
<h1>Add to queue</h1>
<h2 className="grey-text">Add a comma-separated list of URIs to the play queue. You must have the appropriate Mopidy backend enabled for each URI schema (eg spotify:, yt:).</h2>
@ -65,7 +75,26 @@ export default class AddToQueueModal extends React.Component{
<button type="submit" className="primary large">Add</button>
</div>
</form>
</div>
</Modal>
)
}
}
}
const mapStateToProps = (state, ownProps) => {
return {
mopidy_connected: state.mopidy.connected,
playlist: (state.core.playlists[ownProps.params.uri] !== undefined ? state.core.playlists[ownProps.params.uri] : null),
playlists: state.core.playlists
}
}
const mapDispatchToProps = (dispatch) => {
return {
coreActions: bindActionCreators(coreActions, dispatch),
uiActions: bindActionCreators(uiActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(AddToQueue)

42
src/js/views/modals/CreatePlaylistModal.js → src/js/views/modals/CreatePlaylist.js
View File

@ -1,10 +1,17 @@
import React, { PropTypes } from 'react';;
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import ReactGA from 'react-ga'
import Icon from '../Icon';
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';
export default class CreatePlaylistModal extends React.Component{
class CreatePlaylist extends React.Component{
constructor(props){
super(props)
@ -24,8 +31,14 @@ export default class CreatePlaylistModal extends React.Component{
this.setState({error: 'Name is required'})
return false
} else {
this.props.coreActions.createPlaylist(this.state.scheme, this.state.name, this.state.description, this.state.is_public, this.state.is_collaborative )
this.props.uiActions.closeModal()
this.props.coreActions.createPlaylist(
this.state.scheme,
this.state.name,
this.state.description,
this.state.is_public,
this.state.is_collaborative
);
window.history.back();
}
return false
@ -103,7 +116,7 @@ export default class CreatePlaylistModal extends React.Component{
render(){
return (
<div>
<Modal className="create-playlist-modal">
<h1>Create playlist</h1>
<form onSubmit={(e) => this.createPlaylist(e)}>
@ -140,7 +153,20 @@ export default class CreatePlaylistModal extends React.Component{
</div>
</form>
</div>
</Modal>
)
}
}
}
const mapStateToProps = (state, ownProps) => {
return {}
}
const mapDispatchToProps = (dispatch) => {
return {
coreActions: bindActionCreators(coreActions, dispatch),
uiActions: bindActionCreators(uiActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(CreatePlaylist)

40
src/js/views/modals/EditRadioModal.js → src/js/views/modals/EditRadio.js
View File

@ -1,10 +1,19 @@
import React, { PropTypes } from 'react';;
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import ReactGA from 'react-ga'
import Icon from '../Icon';
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';
export default class EditRadioModal extends React.Component{
class EditRadio extends React.Component{
constructor(props){
super(props)
@ -191,7 +200,7 @@ export default class EditRadioModal extends React.Component{
render(){
return (
<div>
<Modal className="edit-radio-modal">
<h1>Radio</h1>
<h2 className="grey-text">Add and remove seeds to shape the sound of your radio. Radio uses Spotify's recommendations engine to suggest tracks similar to your seeds.</h2>
@ -220,7 +229,26 @@ export default class EditRadioModal extends React.Component{
{this.state.enabled ? <button className="primary large" onClick={e => this.handleUpdate(e)}>Save</button> : <button className="primary large" onClick={e => this.handleStart(e)}>Start</button>}
</div>
</form>
</div>
</Modal>
)
}
}
}
const mapStateToProps = (state, ownProps) => {
return {
mopidy_connected: state.mopidy.connected,
playlist: (state.core.playlists[ownProps.params.uri] !== undefined ? state.core.playlists[ownProps.params.uri] : null),
playlists: state.core.playlists
}
}
const mapDispatchToProps = (dispatch) => {
return {
coreActions: bindActionCreators(coreActions, dispatch),
uiActions: bindActionCreators(uiActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(EditRadio)