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

Modal blur bg; Editing/creating playlists with descriptions and collab

Browse Source
This commit is contained in:
James Barnsley
2017-07-13 15:26:30 +12:00
parent f272c6f733
commit bbc2cf8961
8 changed files with 136 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/js/App.js
View File

@ -205,11 +205,15 @@ class App extends React.Component{
return (
<div className={className}>
<Sidebar />
<PlaybackControls />
<main>
{this.props.children}
</main>
<div className="body">
<Sidebar />
<PlaybackControls />
<main>
{this.props.children}
</main>
</div>
<ContextMenu />
<Dragger />
<Modal />

57
src/js/components/Modal/CreatePlaylistModal.js
View File

@ -9,27 +9,26 @@ export default class CreatePlaylistModal extends React.Component{
constructor(props){
super(props)
this.state = {
submit_enabled: false,
name: '',
description: '',
scheme: 'spotify',
is_public: true
is_public: true,
is_collaborative: false
}
}
createPlaylist(e){
e.preventDefault();
this.props.uiActions.createPlaylist( this.state.scheme, this.state.name, this.state.is_public )
this.props.uiActions.closeModal()
return false;
}
e.preventDefault();
setPlaylistName(name){
var submit_enabled = false
if( name && name != '' ) submit_enabled = true
this.setState({
name: name,
submit_enabled: submit_enabled
})
if (!this.state.name || this.state.name == ''){
this.setState({error: 'Name is required'})
return false
} else {
this.props.uiActions.createPlaylist( this.state.scheme, this.state.name, this.state.description, this.state.is_public, this.state.is_collaborative )
this.props.uiActions.closeModal()
}
return false
}
render(){
@ -37,14 +36,25 @@ export default class CreatePlaylistModal extends React.Component{
<div>
<h1>Create playlist</h1>
<form onSubmit={(e) => this.createPlaylist(e)}>
<div className="field">
<div className="field text">
<span className="label">Name</span>
<input
type="text"
placeholder="Playlist name"
onChange={ e => this.setPlaylistName( e.target.value )}
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>
<div className="field text">
<span className="label">Description</span>
<input
type="text"
onChange={ e => this.setState({ description: e.target.value })}
value={ this.state.description } />
</div>
<div className="field radio white">
<span className="label">Provider</span>
<label>
<input
type="radio"
@ -61,10 +71,11 @@ export default class CreatePlaylistModal extends React.Component{
value="m3u"
checked={ this.state.scheme == 'm3u' }
onChange={ e => this.setState({ scheme: e.target.value })} />
<span className="label">Local (m3u)</span>
<span className="label">Mopidy</span>
</label>
</div>
<div className="field checkbox white">
<span className="label">Options</span>
<label>
<input
type="checkbox"
@ -73,9 +84,17 @@ export default class CreatePlaylistModal extends React.Component{
onChange={ e => this.setState({ is_public: !this.state.is_public })} />
<span className="label">Public</span>
</label>
<label>
<input
type="checkbox"
name="is_collaborative"
checked={ this.state.is_collaborative }
onChange={ e => this.setState({ is_collaborative: !this.state.is_collaborative })} />
<span className="label">Collaborative</span>
</label>
</div>
<div className="actions centered-text">
<button type="submit" className="primary wide" disabled={!this.state.submit_enabled}>Save</button>
<button type="submit" className="primary wide">Create</button>
</div>
</form>
</div>

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

@ -12,7 +12,8 @@ export default class EditPlaylistModal extends React.Component{
error: null,
name: this.props.data.name,
description: (this.props.data.description ? this.props.data.description : ''),
is_public: this.props.data.is_public
is_public: this.props.data.is_public,
is_collaborative: this.props.data.is_collaborative
}
}
@ -23,7 +24,7 @@ export default class EditPlaylistModal extends React.Component{
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.savePlaylist(this.props.data.uri, this.state.name, this.state.description, this.state.is_public, this.state.is_collaborative)
this.props.uiActions.closeModal()
return false
}
@ -35,21 +36,22 @@ export default class EditPlaylistModal extends React.Component{
case 'spotify':
return (
<div>
<div className="field">
<div className="field text">
<span className="label">Name</span>
<input
type="text"
placeholder="Name"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>
<div className="field">
<div className="field text">
<span className="label">Description</span>
<input
type="text"
placeholder="Description"
onChange={ e => this.setState({ description: e.target.value })}
value={ this.state.description } />
</div>
<div className="field checkbox white">
<span className="label">Options</span>
<label>
<input
type="checkbox"
@ -58,6 +60,14 @@ export default class EditPlaylistModal extends React.Component{
onChange={ e => this.setState({ is_public: !this.state.is_public })} />
<span className="label">Public</span>
</label>
<label>
<input
type="checkbox"
name="is_collaborative"
checked={ this.state.is_collaborative }
onChange={ e => this.setState({ is_collaborative: !this.state.is_collaborative })} />
<span className="label">Collaborative</span>
</label>
</div>
</div>
)
@ -67,9 +77,9 @@ export default class EditPlaylistModal extends React.Component{
return (
<div>
<div className="field">
<span className="label">Name</span>
<input
type="text"
placeholder="Name"
onChange={ e => this.setState({ name: e.target.value })}
value={ this.state.name } />
</div>

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

@ -1072,10 +1072,17 @@ export function toggleAlbumInLibrary( uri, method ){
* ======================================================================================
**/
export function createPlaylist( name, is_public ){
export function createPlaylist( name, description, is_public, is_collaborative ){
return (dispatch, getState) => {
sendRequest( dispatch, getState, 'users/'+ getState().spotify.me.id +'/playlists/', 'POST', { name: name, public: is_public } )
var data = {
name: name,
description: description,
public: is_public,
collaborative: is_collaborative
}
sendRequest(dispatch, getState, 'users/'+ getState().spotify.me.id +'/playlists/', 'POST', data)
.then( response => {
dispatch({
@ -1102,13 +1109,14 @@ export function createPlaylist( name, is_public ){
}
}
export function savePlaylist(uri, name, is_public, description){
export function savePlaylist(uri, name, description, is_public, is_collaborative){
return (dispatch, getState) => {
var data = {
name: name,
name: name,
description: description,
public: is_public,
description: description
collaborative: is_collaborative
}
sendRequest( dispatch, getState, 'users/'+ getState().spotify.me.id +'/playlists/'+ helpers.getFromUri('playlistid',uri), 'PUT', data)
@ -1119,6 +1127,7 @@ export function savePlaylist(uri, name, is_public, description){
playlist: {
name: name,
public: is_public,
collaborative: is_collaborative,
description: description
}
})

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

@ -23,7 +23,7 @@ const SpotifyMiddleware = (function(){
store.dispatch( uiActions.createNotification( "Must be logged in to Spotify to do that", 'bad' ) )
return
}
store.dispatch( spotifyActions.createPlaylist( action.name, action.is_private ))
store.dispatch( spotifyActions.createPlaylist( action.name, action.description, action.is_private, action.is_collaborative ))
break
case 'SPOTIFY_REMOVE_PLAYLIST_TRACKS':
@ -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, action.description ))
store.dispatch( spotifyActions.savePlaylist( action.key, action.name, action.description, action.is_public, action.is_collaborative ))
break
// when radio returns

11
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, description = ''){
export function savePlaylist(uri, name, description = '', is_public = false, is_collaborative = false){
switch( helpers.uriSource( uri ) ){
case 'spotify':
@ -138,8 +138,9 @@ export function savePlaylist(uri, name, is_public = false, description = ''){
type: 'SPOTIFY_SAVE_PLAYLIST',
key: uri,
name: name,
description: (description == '' ? null : description),
is_public: is_public,
description: (description == '' ? null : description)
is_collaborative: is_collaborative
}
case 'm3u':
@ -152,14 +153,16 @@ export function savePlaylist(uri, name, is_public = false, description = ''){
return false
}
export function createPlaylist( scheme, name, is_public = false ){
export function createPlaylist(scheme, name, description = '', is_public = false, is_collaborative = false){
switch( scheme ){
case 'spotify':
return {
type: 'SPOTIFY_CREATE_PLAYLIST',
name: name,
is_public: is_public
description: (description == '' ? null : description),
is_public: is_public,
is_collaborative: is_collaborative
}
case 'm3u':

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

@ -1,4 +1,10 @@
.modal-open {
.body {
@include blur(10px);
}
}
.modal {
position: fixed;
top: 0;
@ -32,31 +38,55 @@
padding: 100px 25%;
margin: 0 auto;
width: 50%;
color: #FFFFFF;
h4 {
padding-bottom: 40px;
}
color: $white;
form {
padding-top: 50px;
.field {
padding-bottom: 20px;
input[type="text"]{
background: $dark_grey;
font-size: 18px;
width: 100%;
color: $white;
&:focus,
&:active {
border-color: $turquoise;
}
}
padding-bottom: 40px;
position: relative;
.label {
font-size: 16px;
}
&.text,
&.radio,
&.checkbox {
& > .label {
opacity: 0.5;
width: 100px;
position: absolute;
top: 12px;
left: 0;
pointer-events: none;
padding: 0;
}
}
&.text {
input {
background: transparent;
font-size: 18px;
padding-left: 100px;
padding-right: 0;
width: 100%;
color: $white;
border-bottom: 2px solid $white;
&:focus,
&:active {
border-color: $turquoise;
}
}
}
&.radio,
&.checkbox {
padding-left: 100px;
padding-top: 8px;
}
}
button[type="submit"]{
@ -66,7 +96,6 @@
.list {
@include clearfix();
padding-top: 50px;
.list-item {
box-sizing: border-box;

2
src/scss/global/_variables.scss
View File

@ -15,7 +15,7 @@ $green: #47af2a;
$blue: #32b5f2;
$yellow: #FFF39C;
$orange: #f16f19;
$overlay_dark: rgba(10, 10, 10, 0.95);
$overlay_dark: rgba(0, 0, 0, 0.88);
$bp_wide: 1000px;
$bp_medium: 800px;