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

Editing playlist modal

Browse Source
This commit is contained in:
James Barnsley
2016-11-14 17:32:36 +13:00
parent cc99c8bf37
commit df30327fe3
18 changed files with 423 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/views/App.js
View File

@ -8,7 +8,7 @@ import { connect } from 'react-redux'
import Sidebar from '../components/Sidebar'
import ContextMenu from '../components/ContextMenu'
import Dragger from '../components/Dragger'
import Modal from '../components/Modal'
import Modal from '../components/Modal/Modal'
import * as uiActions from '../services/ui/actions'
import * as pusherActions from '../services/pusher/actions'

23
src/js/views/Playlist.js
View File

@ -74,23 +74,30 @@ class Playlist extends React.Component{
this.props.uiActions.removeTracksFromPlaylist( this.props.playlist.uri, track_indexes )
}
renderFollowOrDeleteButton(){
renderEditButtons(){
switch( helpers.uriSource( this.props.params.uri ) ){
case 'm3u':
return <ConfirmationButton className="large tertiary" content="Delete" confirmingContent="Are you sure?" onConfirm={ e => this.delete() } />
break
return (
<span>
<button className="large tertiary" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.playlist.uri, name: this.props.playlist.name }) }>Edit</button>
<ConfirmationButton className="large tertiary" content="Delete" confirmingContent="Are you sure?" onConfirm={ e => this.delete() } />
</span>
)
case 'spotify':
if( !this.props.spotify_authorized ) return null
if( this.props.playlist.owner && this.props.playlist.owner.id == this.props.spotify_userid ){
return <ConfirmationButton className="large tertiary" content="Delete" confirmingContent="Are you sure?" onConfirm={ e => this.unfollow() } />
return (
<span>
<button className="large tertiary" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.playlist.uri, name: this.props.playlist.name, is_public: this.props.playlist.public }) }>Edit</button>
<ConfirmationButton className="large tertiary" content="Delete" confirmingContent="Are you sure?" onConfirm={ e => this.unfollow() } />
</span>
)
}else if( this.props.playlist.following ){
return <button className="large tertiary" onClick={ e => this.unfollow() }>Unfollow</button>
}else{
return <button className="large tertiary" onClick={ e => this.follow() }>Follow</button>
}
break
return <button className="large tertiary" onClick={ e => this.follow() }>Follow</button>
}
}
@ -107,7 +114,7 @@ class Playlist extends React.Component{
<div className="actions">
<button className="large primary" onClick={ e => this.play() }>Play</button>
{ this.renderFollowOrDeleteButton() }
{ this.renderEditButtons() }
</div>
<ul className="details">

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

@ -27,15 +27,17 @@ class LibraryPlaylists extends React.Component{
{ name: 'uri', width: '40'}
]
var actions = (
<button onClick={ () => this.props.uiActions.openModal('create_playlist', {} ) }>
<FontAwesome name="plus" />&nbsp;
New
</button>
)
return (
<div className="view library-playlists-view">
<Header icon="playlist" title="My playlists" />
<button onClick={ () => this.props.uiActions.openModal('create_playlist',false) }>
<FontAwesome name="plus" />&nbsp;
New playlist
</button>
<Header icon="playlist" title="My playlists" actions={actions} />
<section className="grid-wrapper">
<PlaylistGrid playlists={this.props.playlists} />