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

Editing playlist description; Handling change of local playlist URIs

Browse Source
This commit is contained in:
James Barnsley
2017-07-13 07:53:00 +12:00
parent eabdec24cc
commit f272c6f733
8 changed files with 127 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/js/components/Modal/EditPlaylistModal.js
View File

@ -9,52 +9,86 @@ export default class EditPlaylistModal extends React.Component{
constructor(props){
super(props)
this.state = {
submit_enabled: true,
error: null,
name: this.props.data.name,
description: (this.props.data.description ? this.props.data.description : ''),
is_public: this.props.data.is_public
}
}
setPlaylistName(name){
var submit_enabled = false
if( name && name != '' ) submit_enabled = true
this.setState({
name: name,
submit_enabled: submit_enabled
})
}
savePlaylist(e){
e.preventDefault();
this.props.uiActions.savePlaylist(this.props.data.uri, this.state.name, this.state.is_public)
this.props.uiActions.closeModal()
return false;
if (!this.state.name || this.state.name == ''){
this.setState({error: 'Name is required'})
return false
} else {
this.props.uiActions.savePlaylist(this.props.data.uri, this.state.name, this.state.is_public, this.state.description)
this.props.uiActions.closeModal()
return false
}
}
renderFields(){
switch (helpers.uriSource(this.props.data.uri)){
case 'spotify':
return (
<div>
<div className="field">
<input
type="text"
placeholder="Name"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>
<div className="field">
<input
type="text"
placeholder="Description"
onChange={ e => this.setState({ description: e.target.value })}
value={ this.state.description } />
</div>
<div className="field checkbox white">
<label>
<input
type="checkbox"
name="playlist_private"
checked={ this.state.is_public }
onChange={ e => this.setState({ is_public: !this.state.is_public })} />
<span className="label">Public</span>
</label>
</div>
</div>
)
break
default:
return (
<div>
<div className="field">
<input
type="text"
placeholder="Name"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>
</div>
)
}
}
render(){
return (
<div>
<h1>Edit playlist</h1>
{this.state.error ? <h3 className="red-text">{this.state.error}</h3> : null}
<form onSubmit={(e) => this.savePlaylist(e)}>
<div className="field">
<input
type="text"
placeholder="Playlist name"
onChange={ e => this.setPlaylistName( e.target.value )}
value={ this.state.name } />
</div>
<div className="field checkbox white">
<label>
<input
type="checkbox"
name="playlist_private"
checked={ this.state.is_public }
onChange={ e => this.setState({ is_public: !this.state.is_public })} />
<span className="label">Public</span>
</label>
</div>
{this.renderFields()}
<div className="actions centered-text">
<button type="submit" className="primary wide" disabled={!this.state.submit_enabled}>Save</button>
<button type="submit" className="primary wide">Save</button>
</div>
</form>
</div>

25
src/js/services/mopidy/middleware.js
View File

@ -1,5 +1,6 @@
import Mopidy from 'mopidy'
import { hashHistory } from 'react-router'
import * as helpers from '../../helpers'
var mopidyActions = require('./actions.js')
@ -733,17 +734,33 @@ const MopidyMiddleware = (function(){
});
break
case 'MOPIDY_SAVE_PLAYLIST':
case 'MOPIDY_SAVE_PLAYLIST':
var uri = action.key
instruct( socket, store, 'playlists.lookup', { uri: action.key })
.then( response => {
var playlist = Object.assign({}, response, { name: action.name })
instruct( socket, store, 'playlists.save', { playlist: playlist } )
.then( response => {
store.dispatch({
type: 'PLAYLIST_UPDATED',
key: action.key,
key: action.key,
playlist: playlist
})
// When we rename a playlist, the URI also changes to reflect the name change
// We need to update our index, as well as redirect our current page URL
if (action.key != response.key){
store.dispatch({
type: 'PLAYLIST_KEY_UPDATED',
key: action.key,
new_key: response.uri
})
hashHistory.push(global.baseURL+'playlist/'+response.uri)
}
store.dispatch(uiActions.createNotification('Saved'))
})
});
break
@ -793,7 +810,8 @@ const MopidyMiddleware = (function(){
case 'MOPIDY_CREATE_PLAYLIST':
instruct( socket, store, 'playlists.create', { name: action.name, uri_scheme: action.scheme })
.then( response => {
.then( response => {
store.dispatch(uiActions.createNotification('Created playlist'))
// re-load our global playlists
//store.dispatch({ type: 'MOPIDY_GET_PLAYLISTS' });
@ -803,6 +821,7 @@ const MopidyMiddleware = (function(){
case 'MOPIDY_DELETE_PLAYLIST':
instruct( socket, store, 'playlists.delete', { uri: action.key })
.then( response => {
store.dispatch(uiActions.createNotification('Deleted playlist'))
// re-load our global playlists
// store.dispatch({ type: 'MOPIDY_PLAYLISTS' });

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

@ -1095,23 +1095,34 @@ export function createPlaylist( name, is_public ){
dispatch({
type: 'LIBRARY_PLAYLISTS_LOADED',
uris: [response.uri]
});
})
dispatch(uiActions.createNotification('Created playlist'))
})
}
}
export function savePlaylist(uri, name, is_public){
export function savePlaylist(uri, name, is_public, description){
return (dispatch, getState) => {
sendRequest( dispatch, getState, 'users/'+ getState().spotify.me.id +'/playlists/'+ helpers.getFromUri('playlistid',uri), 'PUT', { name: name, public: is_public } )
var data = {
name: name,
public: is_public,
description: description
}
sendRequest( dispatch, getState, 'users/'+ getState().spotify.me.id +'/playlists/'+ helpers.getFromUri('playlistid',uri), 'PUT', data)
.then( response => {
dispatch({
type: 'PLAYLIST_UPDATED',
key: uri,
playlist: {
name: name,
public: is_public
public: is_public,
description: description
}
});
})
dispatch(uiActions.createNotification('Saved'))
})
}
}

2
src/js/services/spotify/middleware.js
View File

@ -72,7 +72,7 @@ const SpotifyMiddleware = (function(){
store.dispatch( uiActions.createNotification( "Must be logged in to Spotify to do that", 'bad' ) )
return
}
store.dispatch( spotifyActions.savePlaylist( action.key, action.name, action.is_public ))
store.dispatch( spotifyActions.savePlaylist( action.key, action.name, action.is_public, action.description ))
break
// when radio returns

5
src/js/services/ui/actions.js
View File

@ -130,7 +130,7 @@ export function reorderPlaylistTracks( uri, indexes, insert_before, snapshot_id
}
}
export function savePlaylist( uri, name, is_public = false ){
export function savePlaylist(uri, name, is_public = false, description = ''){
switch( helpers.uriSource( uri ) ){
case 'spotify':
@ -138,7 +138,8 @@ export function savePlaylist( uri, name, is_public = false ){
type: 'SPOTIFY_SAVE_PLAYLIST',
key: uri,
name: name,
is_public: is_public
is_public: is_public,
description: (description == '' ? null : description)
}
case 'm3u':

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

@ -471,7 +471,22 @@ export default function reducer(ui = {}, action){
}
playlists[action.key] = merged_playlist
return Object.assign({}, ui, { playlists: playlists });
return Object.assign({}, ui, { playlists: playlists })
case 'PLAYLIST_KEY_UPDATED':
var playlists = Object.assign([], ui.playlists)
// URI not in our index? No change needed then
if (typeof(playlists[action.key]) === 'undefined'){
return ui
}
// Delete our old playlist by key, and add by new key
var playlist = Object.assign({}, playlists[action.key])
delete playlists[action.key]
playlists[playlist.uri] = playlist
return Object.assign({}, ui, { playlists: playlists })
case 'PLAYLISTS_LOADED':
var playlists = Object.assign([], ui.playlists)

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

@ -124,7 +124,7 @@ class Playlist extends React.Component{
return (
<div className="actions">
<button className="primary" onClick={ e => this.play() }>Play</button>
<button className="secondary" 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>
<button className="secondary" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.playlist.uri, name: this.props.playlist.name, is_public: this.props.playlist.public, description: this.props.playlist.description }) }>Edit</button>
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
</div>
)

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

@ -43,13 +43,10 @@
padding-bottom: 20px;
input[type="text"]{
background: transparent;
font-size: 24px;
border-bottom: 2px solid #FFFFFF;
padding-left: 0;
padding-right: 0;
background: $dark_grey;
font-size: 18px;
width: 100%;
color: #FFFFFF;
color: $white;
&:focus,
&:active {