-
-
- Logout sarsoo.xyz
-
-
-
+
+
+
+ this.setOpen(true)}>
+
+
+
+
+
+ this.setOpen(false)}
+ >
+
+ this.setOpen(false)}>
+
+
+ this.setOpen(false)}
+ onKeyDown={(e) => this.setOpen(false)}
+ >
+
+
+
+
+
+
+
+
+
+ { this.state.type == 'admin' &&
+
+
+ }
+
+
+
+
+
+
+
- }>
+
-
-
+
);
}
}
+function LoadingMessage(props) {
+ return
Loading... ;
+}
+
export default MusicTools;
\ No newline at end of file
diff --git a/src/js/Playlist/Playlists.js b/src/js/Playlist/AllPlaylistsRouter.js
similarity index 52%
rename from src/js/Playlist/Playlists.js
rename to src/js/Playlist/AllPlaylistsRouter.js
index 03299dc..6f95c59 100644
--- a/src/js/Playlist/Playlists.js
+++ b/src/js/Playlist/AllPlaylistsRouter.js
@@ -1,20 +1,14 @@
import React, { Component } from "react";
-import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
-const axios = require('axios');
+import { Route, Switch } from "react-router-dom";
-import PlaylistsView from "./PlaylistsView.js"
-import NewPlaylist from "./NewPlaylist.js";
+import PlaylistsView from "./PlaylistsList.js"
+import NewPlaylist from "./New.js";
import ScratchView from "./ScratchView.js";
class Playlists extends Component {
render(){
return (
-
-
-
+
Default
+ Recents
+ Last.fm Chart
+
+
+
+
+
+
+ { this.state.description }
+
+
+
+
+ Create
+
+
+
);
}
diff --git a/src/js/Playlist/PlaylistsView.js b/src/js/Playlist/PlaylistsList.js
similarity index 63%
rename from src/js/Playlist/PlaylistsView.js
rename to src/js/Playlist/PlaylistsList.js
index b0035c9..5dc37a1 100644
--- a/src/js/Playlist/PlaylistsView.js
+++ b/src/js/Playlist/PlaylistsList.js
@@ -1,5 +1,8 @@
import React, { Component } from "react";
-import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { Button, ButtonGroup, Typography, Card, Grid, CircularProgress } from '@material-ui/core';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
const axios = require('axios');
import showMessage from "../Toast.js"
@@ -90,58 +93,66 @@ class PlaylistsView extends Component {
render() {
- const table =
;
- const loadingMessage = loading...
;
-
- return this.state.isLoading ? loadingMessage : table;
+ return this.state.isLoading ?
+
+
+
+ New
+ Run All
+
+
{ props.playlists.length == 0 ? (
-
-
-
- No Playlists
-
-
-
+
+ No Playlists
+
) : (
-
- { props.playlists.map((playlist) =>
- Run All
-
+ key={ playlist.name }/>)
)}
-
+
);
}
-function Row(props){
+function PlaylistCard(props){
return (
-
-
- props.handleRunPlaylist(props.playlist.name, e)}>Run props.handleDeletePlaylist(props.playlist.name, e)}>Delete
- );
-}
-
-function PlaylistLink(props){
- return (
-
-
+
+
+
+
+ { props.playlist.name }
+
+
+
+
+ View
+ props.handleRunPlaylist(props.playlist.name, e)}>Run
+ props.handleDeletePlaylist(props.playlist.name, e)}>Delete
+
+
+
+
);
}
diff --git a/src/js/Playlist/View/Count.js b/src/js/Playlist/View/Count.js
index 40070a5..9910df8 100644
--- a/src/js/Playlist/View/Count.js
+++ b/src/js/Playlist/View/Count.js
@@ -1,10 +1,13 @@
import React, { Component } from "react";
const axios = require('axios');
-import showMessage from "../../Toast.js"
-import PieChart from "../../Maths/PieChart.js";
+import { Card, Button, CardActions, CardContent, Typography, Grid } from '@material-ui/core';
-class Count extends Component {
+import showMessage from "../../Toast.js"
+
+const LazyPieChart = React.lazy(() => import("../../Maths/PieChart"))
+
+export class Count extends Component {
constructor(props){
super(props);
@@ -64,34 +67,35 @@ class Count extends Component {
render() {
return (
-
-
- Scrobble Count: {this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}%
-
-
- Album Count: {this.state.playlist.lastfm_stat_album_count.toLocaleString()} / {this.state.playlist.lastfm_stat_album_percent}%
-
-
- Artist Count: {this.state.playlist.lastfm_stat_artist_count.toLocaleString()} / {this.state.playlist.lastfm_stat_artist_percent}%
-
-
- Last Updated {this.state.playlist.lastfm_stat_last_refresh.toLocaleString()}
-
-
-
-
-
-
-
-
-
+
+
+
+
+ Scrobble Count: {this.state.playlist.lastfm_stat_count.toLocaleString()} / {this.state.playlist.lastfm_stat_percent}%
+
+
+ Album Count: {this.state.playlist.lastfm_stat_album_count.toLocaleString()} / {this.state.playlist.lastfm_stat_album_percent}%
+
+
+ Artist Count: {this.state.playlist.lastfm_stat_artist_count.toLocaleString()} / {this.state.playlist.lastfm_stat_artist_percent}%
+
+
+ Last Updated {this.state.playlist.lastfm_stat_last_refresh.toLocaleString()}
+
+ }>
+
+
+
+
+
-
-
-
-
-
-
-
-
-
- Update
-
-
-
+
+
+
+
+
+
+
+
+ Update
+
+
+
);
}
}
-export default Count;
\ No newline at end of file
+function LoadingMessage(props) {
+ return Loading... ;
+}
\ No newline at end of file
diff --git a/src/js/Playlist/View/Edit.js b/src/js/Playlist/View/Edit.js
index 60d886e..4745855 100644
--- a/src/js/Playlist/View/Edit.js
+++ b/src/js/Playlist/View/Edit.js
@@ -1,6 +1,11 @@
import React, { Component } from "react";
const axios = require('axios');
+import { Card, Button, CircularProgress, FormControl, TextField, InputLabel, Select, Checkbox, FormControlLabel,
+ CardActions, CardContent, Typography, Grid } from '@material-ui/core';
+import { Delete } from '@material-ui/icons';
+import { makeStyles } from '@material-ui/core/styles';
+
import showMessage from "../../Toast.js";
var thisMonth = [
@@ -33,7 +38,15 @@ var lastMonth = [
'november'
];
-class Edit extends Component{
+
+const useStyles = makeStyles({
+ root: {
+ background: '#9e9e9e',
+ color: '#212121'
+ },
+ });
+
+export class Edit extends Component{
constructor(props){
super(props);
@@ -112,7 +125,7 @@ class Edit extends Component{
getPlaylistInfo(){
return axios.get(`/api/playlist?name=${ this.state.name }`);
- }
+ }
getPlaylists(){
return axios.get(`/api/playlists`);
@@ -155,7 +168,7 @@ class Edit extends Component{
showMessage(`Error Updating Boundary Value (${error.response.status})`);
});
}
-
+
handleRecommendationsSampleChange(sample){
if(sample == ''){
sample = 0;
@@ -393,196 +406,168 @@ class Edit extends Component{
var date = new Date();
const table = (
-
- { this.state.playlist_references.length > 0 && Managed }
+
+
+
+ {this.state.name}
+
+
+ { this.state.playlist_references.length > 0 && Managed }
- { this.state.parts.length > 0 && Spotify }
-
-
-
-
-
-
-
-
- Add
-
-
-
-
-
- { this.state.playlists
- .filter((entry) => entry.name != this.state.name)
- .map((entry) =>
-
-
- Add
-
-
-
-
- Shuffle Output
-
-
-
-
-
-
- Include Recommendations
-
-
-
-
-
-
- Include Library Tracks
-
-
-
-
-
-
- Recommendation Size
-
-
-
-
-
- { this.state.type == 'fmchart' &&
-
-
- Chart Size
-
-
-
-
- }
- { this.state.type == 'fmchart' &&
-
-
- Chart Range
-
-
-
- 7 Day
- 30 Day
- 90 Day
- 180 Day
- 365 Day
- Overall
-
-
-
- }
-
- { this.state.type == 'recents' &&
-
-
- Added Since (days)
-
-
-
-
- }
- { this.state.type == 'recents' &&
-
-
- Include {thisMonth[date.getMonth()]} Playlist
-
-
-
-
- }
- { this.state.type == 'recents' &&
-
-
- Include {lastMonth[date.getMonth()]} Playlist
-
-
-
-
- }
-
-
-
-
- Type
-
-
- 0 && Spotify }
+ Spotify playlist can be the name of either your own created playlist or one you follow, names are case sensitive
+
- Default
- Recents
- Last.fm Chart
-
-
-
-
-
- Run
-
-
-
+
+ />
+
+
+ Add
+
+
+
+ Managed Playlist
+
+ { this.state.playlists
+ .filter((entry) => entry.name != this.state.name)
+ .map((entry) =>
+
+
+
+ Add
+
+
+
+
+
+
+ { this.state.type == 'fmchart' &&
+
+
+ }
+ { this.state.type == 'fmchart' &&
+
+
+ Chart Range
+
+ 7 Day
+ 30 Day
+ 90 Day
+ 180 Day
+ 365 Day
+ Overall
+
+
+
+ }
+ { this.state.type == 'recents' &&
+
+
+ }
+ { this.state.type == 'recents' &&
+
+
+ }
+
+
+ Type
+
+ Default
+ Recents
+ Last.fm Chart
+
+
+
+
+
+
+ Run
+
+
+
);
- const loadingMessage =
-
-
-
- Loading...
-
-
- ;
-
- return this.state.isLoading ? loadingMessage : table;
+ return this.state.isLoading ? );
+ return
+ {props.list.map((part) => )}
+
}
-function Row (props) {
+function BlockGridItem (props) {
+ const classes = useStyles();
return (
-
- { props.part }
- props.handler(props.part, e)}>Remove
+
+
+
+ { props.part }
+
+
+ props.handler(props.part, e)} startIcon={
+
+
+
);
-}
-
-export default Edit;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/js/Playlist/View/PlaylistRouter.js b/src/js/Playlist/View/PlaylistRouter.js
new file mode 100644
index 0000000..3bd5c5e
--- /dev/null
+++ b/src/js/Playlist/View/PlaylistRouter.js
@@ -0,0 +1,50 @@
+import React, { Component } from "react";
+import { Route, Link, Switch } from "react-router-dom";
+import { Paper, Tabs, Tab} from '@material-ui/core';
+
+
+import {Edit} from "./Edit.js";
+import {Count} from "./Count.js";
+
+class View extends Component{
+
+ constructor(props){
+ super(props);
+ this.state = {
+ tab: 0
+ }
+ this.handleChange = this.handleChange.bind(this);
+ }
+
+ handleChange(e, newValue){
+ this.setState({
+ tab: newValue
+ });
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+ } />
+ } />
+
+
-
-
- { this.props.match.params.name }
-
-
-
-
-
-
- } />
- } />
-
- );
- }
-
-}
-
-export default View;
\ No newline at end of file
diff --git a/src/js/Settings/ChangePassword.js b/src/js/Settings/ChangePassword.js
index 2cdb810..5b1f074 100644
--- a/src/js/Settings/ChangePassword.js
+++ b/src/js/Settings/ChangePassword.js
@@ -1,6 +1,8 @@
import React, { Component } from "react";
const axios = require('axios');
+import { Card, Grid, Button, TextField, CardContent, CardActions, Typography } from "@material-ui/core";
+
import showMessage from "../Toast.js"
class ChangePassword extends Component {
@@ -63,49 +65,52 @@ class ChangePassword extends Component {
render(){
return (
-
-
- { this.state.error &&
{this.state.errorValue}
}
+ name="new2"
+ value={this.state.new2}
+ className="full-width" />
+
+ { this.state.error &&
{this.state.errorValue} }
+
+
+
+ Change
+
+
+
+
+
+
+
;
const loadingMessage = Loading...
;
diff --git a/src/js/Settings/Settings.js b/src/js/Settings/Settings.js
deleted file mode 100644
index a664e49..0000000
--- a/src/js/Settings/Settings.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { Component } from "react";
-import { BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
-
-import ChangePassword from "./ChangePassword.js";
-import SpotifyLink from "./SpotifyLink.js";
-import LastFM from "./LastFM.js";
-
-class Settings extends Component {
-
- render() {
- return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
- Spotify Link
-
-
-
-
- Status: { this.state.spotify_linked ? "Linked" : "Unlinked" }
-
-
-
-
- { this.state.spotify_linked ?
-
-
-
;
+
+
+
+ Admin Functions
+ Status: { this.state.spotify_linked ? "Linked" : "Unlinked" }
+
+
+ { this.state.spotify_linked ?
+
+
Loading...
;
@@ -56,11 +50,11 @@ class SpotifyLink extends Component {
}
function AuthButton(props) {
- return Auth ;
+ return Auth ;
}
function DeAuthButton(props) {
- return De-Auth ;
+ return De-Auth ;
}
export default SpotifyLink;
\ No newline at end of file
diff --git a/src/js/Theme.js b/src/js/Theme.js
new file mode 100644
index 0000000..c8780f7
--- /dev/null
+++ b/src/js/Theme.js
@@ -0,0 +1,42 @@
+import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
+
+let GlobalTheme = createMuiTheme({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ },
+ spacing: 4,
+ typography: {
+ button: {
+ fontSize: '1rem',
+ },
+ },
+ paper: {
+ display: 'flex',
+ spacing: 5
+ },
+ card: {
+ marginTop: 24,
+ display: 'flex',
+ spacing: 5
+ },
+ palette: {
+ type: 'dark',
+ primary: {
+ main: '#1976d2',
+ },
+ secondary: {
+ main: '#dc004e',
+ },
+ error: {
+ main: '#f44336'
+ }
+ },
+ status: {
+ danger: 'orange',
+ }
+});
+GlobalTheme = responsiveFontSizes(GlobalTheme);
+
+export default GlobalTheme;
\ No newline at end of file
diff --git a/webpack.common.js b/webpack.common.js
index 1a357b5..0a3ea8c 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -27,7 +27,9 @@ module.exports = {
],
resolve: { extensions: ["*", ".js", ".jsx"] },
output: {
- filename: '[name].bundle.js',
- path: path.resolve(__dirname, 'build/js')
+ filename: '[name].bundle.js',
+ chunkFilename: '[name].bundle.js',
+ path: path.resolve(__dirname, 'build/js'),
+ publicPath: '/build/js/'
}
};