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

Edit modal

Browse Source
This commit is contained in:
James Barnsley
2017-01-30 16:59:37 +13:00
parent 3e4cd00b74
commit 53e9a456f8
9 changed files with 157 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/js/components/ContextMenu.js
View File

@ -137,7 +137,6 @@ class ContextMenu extends React.Component{
{ handleClick: 'playURIs', label: 'Play' },
{ handleClick: 'playURIsNext', label: 'Play next' },
{ handleClick: 'addToQueue', label: 'Add to queue' },
{ handleClick: 'startRadio', label: 'Start radio' },
{ handleClick: 'copyURIs', label: 'Copy URI' }
]
break

2
src/js/components/Modal/AddToPlaylistModal.js
View File

@ -31,7 +31,7 @@ export default class AddToPlaylistModal extends React.Component{
{
playlists.map( playlist => {
return (
<div className="list-item playlist" key={playlist.uri} onClick={ () => this.playlistSelected(playlist.uri) }>
<div className="list-item small" key={playlist.uri} onClick={ () => this.playlistSelected(playlist.uri) }>
<FontAwesome className="source" name={helpers.sourceIcon(playlist.uri)} />
&nbsp;
<span className="name">{ playlist.name }</span>

111
src/js/components/Modal/EditRadioModal.js Executable file
View File

@ -0,0 +1,111 @@
import React, { PropTypes } from 'react'
import FontAwesome from 'react-fontawesome'
import Icon from '../Icon'
import * as helpers from '../../helpers'
export default class EditRadioModal extends React.Component{
constructor(props){
super(props)
this.state = {
seed_tracks: [],
seed_genres: [],
seed_artists: [],
uri: ''
}
}
componentDidMount(){
this.setState(this.props.radio)
}
save(){
this.props.uiActions.closeModal()
}
addSeed(seed){
this.setState({uri: ''})
}
removeSeed(type,seed){
console.log('remove', type, seed)
}
renderSeeds(){
if (!this.props.radio || !this.props.radio.enabled) return null
/*
var seeds = this.props.radio.resolved_seeds
var uri
var seeds = []
for (var i = 0; i < this.props.radio.seed_tracks.length; i++){
var uri = this.props.radio.seed_tracks[i]
if (this.props.radio.resolved_seeds.hasOwnProperty(uri)){
seeds.push(this.props.radio.resolved_seeds[uri])
}
}
for (var i = 0; i < this.props.radio.seed_artists.length; i++){
var uri = this.props.radio.seed_artists[i]
if (this.props.radio.resolved_seeds.hasOwnProperty(uri)){
seeds.push(this.props.radio.resolved_seeds[uri])
}
}*/
return (
<div className="list">
{
this.state.seed_tracks.map(seed => {
return (
<div className="list-item" key={seed}>
{seed}
<FontAwesome name="close" className="pull-right destructive" onClick={() => this.removeSeed('track',seed)} />
</div>
)
})
}
{
this.state.seed_genres.map(seed => {
return (
<div className="list-item" key={seed}>
{seed}
<FontAwesome name="close" className="pull-right destructive" onClick={() => this.removeSeed('genre',seed)} />
</div>
)
})
}
{
this.state.seed_artists.map(seed => {
return (
<div className="list-item" key={seed}>
{seed}
<FontAwesome name="close" className="pull-right destructive" onClick={() => this.removeSeed('artist',seed)} />
</div>
)
})
}
</div>
)
}
render(){
return (
<div>
<h4>Edit radio</h4>
<form>
{this.renderSeeds()}
<div className="field">
<input
type="text"
placeholder="URI"
onChange={e => this.setState({uri: e.target.value})}
value={this.state.uri} />
</div>
<button className="secondary" onClick={e => this.addSeed(this.state.uri)}>Add</button>
<button type="submit" className="primary" onClick={e => this.save()}>Save and close</button>
</form>
</div>
)
}
}

3
src/js/components/Modal/Modal.js
View File

@ -9,6 +9,7 @@ import AddToPlaylistModal from './AddToPlaylistModal'
import CreatePlaylistModal from './CreatePlaylistModal'
import EditPlaylistModal from './EditPlaylistModal'
import SendAuthorizationModal from './SendAuthorizationModal'
import EditRadioModal from './EditRadioModal'
import ImageZoomModal from './ImageZoomModal'
import * as uiActions from '../../services/ui/actions'
@ -36,6 +37,7 @@ class Modal extends React.Component{
{ this.props.modal.name == 'create_playlist' ? <CreatePlaylistModal uiActions={this.props.uiActions} /> : null }
{ this.props.modal.name == 'edit_playlist' ? <EditPlaylistModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'send_authorization' ? <SendAuthorizationModal uiActions={this.props.uiActions} pusherActions={this.props.pusherActions} data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'edit_radio' ? <EditRadioModal uiActions={this.props.uiActions} pusherActions={this.props.pusherActions} data={this.props.modal.data} radio={this.props.radio} /> : null }
{ this.props.modal.name == 'image_zoom' ? <ImageZoomModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
</div>
@ -47,6 +49,7 @@ class Modal extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
modal: state.ui.modal,
radio: state.ui.radio,
playlists: state.ui.playlists,
context_menu: state.ui.context_menu,
mopidy_connected: state.mopidy.connected,

2
src/js/components/Modal/SendAuthorizationModal.js
View File

@ -35,7 +35,7 @@ class SendAuthorizationModal extends React.Component{
if (connection.connectionid == this.props.connectionid) return null
return (
<div className='list-item connection' key={connection.connectionid} onClick={ e => this.handleClick(e, connection.connectionid) }>
<div className='list-item small connection' key={connection.connectionid} onClick={ e => this.handleClick(e, connection.connectionid) }>
{ connection.username }
&nbsp;
<span className="grey-text">({ connection.ip })</span>

17
src/js/services/spotify/actions.js
View File

@ -498,12 +498,7 @@ export function resolveRadioSeeds( radio ){
// flush out the previous store value
dispatch({ type: 'RADIO_SEEDS_RESOLVING' });
var resolved_seeds = {
seed_artists: [],
seed_tracks: [],
seed_genres: []
}
var resolved_seeds = {}
var requests = []
if (radio.seed_artists.length > 0){
@ -518,7 +513,9 @@ export function resolveRadioSeeds( radio ){
sendRequest( dispatch, getState, 'artists/'+ artist_ids )
.then( response => {
if (!(response instanceof Array)) response = [response]
Object.assign(resolved_seeds.seed_artists, response);
for (var i = 0; i < response.length; i++){
resolved_seeds[response[i].uri] = response[i]
}
})
)
}
@ -534,7 +531,9 @@ export function resolveRadioSeeds( radio ){
requests.push(
sendRequest( dispatch, getState, 'tracks?ids='+ track_ids )
.then( response => {
Object.assign(resolved_seeds.seed_tracks, response.tracks);
for (var i = 0; i < response.tracks.length; i++){
resolved_seeds[response.tracks[i].uri] = response.tracks[i]
}
})
)
}
@ -544,7 +543,7 @@ export function resolveRadioSeeds( radio ){
).then( () => {
dispatch({
type: 'RADIO_SEEDS_RESOLVED',
data: resolved_seeds
resolved_seeds: resolved_seeds
});
});
}

2
src/js/services/ui/reducer.js
View File

@ -121,7 +121,7 @@ export default function reducer(ui = {}, action){
return Object.assign({}, ui, { seeds_resolved: false }, { radio: action.data.radio })
case 'RADIO_SEEDS_RESOLVED':
var radio = Object.assign({}, ui.radio, action.data, { seeds_resolved: true })
var radio = Object.assign({}, ui.radio, { resolved_seeds: action.resolved_seeds })
return Object.assign({}, ui, { radio: radio })

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

@ -55,28 +55,6 @@ class Queue extends React.Component{
)
}
renderRadio(){
if (!this.props.radio || !this.props.radio.enabled) return null
var seed_sentence = 'nothing'
if (this.props.radio.seed_artists.length > 0){
if (this.props.radio.seeds_resolved){
seed_sentence = <ArtistSentence artists={this.props.radio.seed_artists} />
}else{
seed_sentence = this.props.radio.seed_artists.length +' artists'
}
}
if (this.props.radio.seed_genres.length > 0) seed_sentence =this.props.radio.seed_artists.length+' genres'
if (this.props.radio.seed_tracks.length > 0) seed_sentence =this.props.radio.seed_tracks.length+' tracks'
return (
<div className="radio">
Playing radio based on {seed_sentence}
<a className="text-button destructive pull-right" onClick={ e => this.props.pusherActions.stopRadio() }><FontAwesome name="close" />&nbsp; Stop radio</a>
</div>
)
}
render(){
var actions = (
<button onClick={() => this.props.mopidyActions.clearTracklist()}>
@ -85,17 +63,27 @@ class Queue extends React.Component{
</button>
)
return (
<div className="view queue-view">
<Header icon="play" title="Now playing" actions={actions} />
if (this.props.radio && this.props.radio.enabled){
var actions = (
<span>
<button onClick={() => this.props.uiActions.openModal('edit_radio')}>
<FontAwesome name="pencil" />&nbsp;
Edit
</button>
<button onClick={() => this.props.pusherActions.stopRadio()}>
<FontAwesome name="trash" />&nbsp;
Stop
</button>
</span>
)
}
return (
<div className="view queue-view">
<Header icon="play" title="Now playing" actions={actions} />
<FullPlayer />
{ this.renderRadio() }
<section className="list-wrapper">
<TrackList
show_source_icon={true}
context="queue-track"

27
src/scss/components/_modal.scss
View File

@ -70,17 +70,29 @@
@include clearfix();
.list-item {
float: left;
box-sizing: border-box;
display: block;
width: 49%;
padding: 16px 18px;
border-bottom: 1px solid $mid_grey;
border-top: 0;
position: relative;
&.playlist {
&:nth-child(1){
border-top: 1px solid $mid_grey;
}
&.small {
padding-left: 30px;
width: 49%;
float: left;
&:nth-child(2){
border-top: 1px solid $mid_grey;
}
&:nth-child(2n){
margin-left: 2%;
}
}
.source {
@ -89,15 +101,6 @@
left: 10px;
}
&:nth-child(1),
&:nth-child(2){
border-top: 1px solid $mid_grey;
}
&:nth-child(2n){
margin-left: 2%;
}
&:hover {
cursor: pointer;
background: rgba(255,255,255,0.1);