oldschoolshuffle
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//PlaylistChooser.js | |
import React, { Component } from 'react'; | |
import './PlaylistChooser.css'; | |
import { withStyles } from '@material-ui/core/styles'; | |
import List from '@material-ui/core/List'; | |
import ListItem from '@material-ui/core/ListItem'; | |
import ListItemText from '@material-ui/core/ListItemText'; | |
import Menu from '@material-ui/core/Menu'; | |
import MenuItem from '@material-ui/core/MenuItem'; | |
import Radio from '@material-ui/core/Radio'; | |
import RadioGroup from '@material-ui/core/RadioGroup'; | |
import FormControlLabel from '@material-ui/core/FormControlLabel'; | |
import FormControl from '@material-ui/core/FormControl'; | |
import FormLabel from '@material-ui/core/FormLabel'; | |
import FormGroup from '@material-ui/core/FormGroup'; | |
import * as SpotifyFunctions from '../spotifyFunctions.js' | |
class PlaylistChooser extends Component { | |
constructor(props){ | |
super(props) | |
this.classes = props; | |
this.state = { | |
addRelatedDiscography: "false", | |
playlists: [], | |
chosenPlaylistIndex: 0, | |
chosenPlaylistName: 'Choose a playlist', | |
chosenPlaylistId: null, | |
anchorElement: null | |
} | |
} | |
async componentDidMount() { | |
await SpotifyFunctions.setAccessToken(this.props.accessToken); | |
const playlists = await SpotifyFunctions.getUserPlaylists(); | |
this.setState({playlists: playlists}); | |
} | |
changeAddRelatedDiscography(e){ | |
e.preventDefault() | |
this.setState({addRelatedDiscography: e.target.value}) | |
} | |
handlePlaylistChooserTopLevelClick(e) { | |
this.setState({anchorElement: e.currentTarget}) | |
} | |
handlePlaylistMenuClick(e, playlistIndex){ | |
this.setState({ | |
chosenPlaylistIndex: playlistIndex, | |
chosenPlaylistName: this.state.playlists[playlistIndex].playlistName, | |
chosenPlaylistId: this.state.playlists[playlistIndex].id, | |
anchorElement: null}) | |
} | |
handlePlaylistMenuClose(e){ | |
this.setState({anchorElement: null}) | |
} | |
generateListItem(playlistObj) { | |
return ( | |
<ListItem key={playlistObj.id}> | |
<ListItemText primary={playlistObj.playlistName}/> | |
</ListItem> | |
) | |
} | |
generateMenuItem(playlistObj, index) { | |
return ( | |
<MenuItem key={playlistObj.id} selected={index === this.state.chosenPlaylistIndex} onClick={(e) => {this.handlePlaylistMenuClick(e, index)}}> | |
{playlistObj.playlistName} | |
</MenuItem> | |
) | |
} | |
render() { | |
return ( | |
<div className='PlaylistChooser'> | |
<List className={this.classes.playlistViewer}> | |
<ListItem button onClick={(e) => this.handlePlaylistChooserTopLevelClick(e)}> | |
<ListItemText primary="Choose a playlist to shuffle" secondary={this.state.chosenPlaylistName} /> | |
</ListItem> | |
</List> | |
<Menu | |
id="lock-menu" | |
anchorelement={this.state.anchorElement} | |
open={Boolean(this.state.anchorElement)} | |
onClose={(e) => this.handlePlaylistMenuClose(e)} | |
> | |
{this.state.playlists.map((playlistObj, index) => {return this.generateMenuItem(playlistObj, index)})} | |
</Menu> | |
<div className='optionsSelection'> | |
<FormControl component="fieldset" className={this.classes.optionsSelection}> | |
<FormGroup> | |
<FormLabel component="legend">Add Related Discography</FormLabel> | |
<RadioGroup | |
aria-label="Add Related Discography" | |
name="addRelatedDiscography" | |
value={this.state.addRelatedDiscography} | |
onChange={(e) => this.changeAddRelatedDiscography(e)} | |
> | |
<FormControlLabel value="true" control={<Radio />} label="Include" /> | |
<FormControlLabel value="false" control={<Radio />} label="Just my Playlist" /> | |
</RadioGroup> | |
</FormGroup> | |
</FormControl> | |
</div> | |
<button className="playNowButton" onClick={(e) => {this.state.addRelatedDiscography === "false" ? SpotifyFunctions.byAlbumNoDiscography(this.state) : SpotifyFunctions.byAlbumWithDiscography(this.state)}}>Play Now</button> | |
<p className="checkYourPlaylistsAlert">{`You have to have Spotify open to start playback. If Spotify can't find an active device it will create a new playlist you can access later`}</p> | |
</div> | |
) | |
} | |
} | |
export default PlaylistChooser; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment