mirror of
https://github.com/mgerb/go-discord-bot
synced 2026-01-10 09:02:49 +00:00
client: updated everything, deprecated pubg stuff
This commit is contained in:
@@ -5,8 +5,8 @@ import { Navbar } from './components/Navbar';
|
||||
import './scss/index.scss';
|
||||
|
||||
export class Wrapper extends React.Component<any, any> {
|
||||
constructor() {
|
||||
super();
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
@@ -1,27 +1,31 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
|
||||
import { BrowserRouter, Route, Switch } from 'react-router-dom';
|
||||
|
||||
import { Wrapper } from './Wrapper';
|
||||
import { Home } from './pages/Home/Home';
|
||||
import { Soundboard } from './pages/Soundboard/Soundboard';
|
||||
import { NotFound } from './pages/NotFound/NotFound';
|
||||
import { Downloader } from './pages/Downloader/Downloader';
|
||||
import { Pubg } from './pages/Pubg/Pubg';
|
||||
import { Clips } from './pages/Clips';
|
||||
import { Oauth } from './pages/oauth/oauth';
|
||||
import 'babel-polyfill';
|
||||
|
||||
ReactDOM.render(
|
||||
<Router history={browserHistory}>
|
||||
<Route path="/" component={Wrapper}>
|
||||
<IndexRoute component={Home}/>
|
||||
<Route path="/soundboard" component={Soundboard}/>
|
||||
<Route path="/downloader" component={Downloader}/>
|
||||
<Route path="/pubg" component={Pubg}/>
|
||||
<Route path="/clips" component={Clips}/>
|
||||
<Route path="/oauth" component={Oauth}/>
|
||||
<Route path="*" component={NotFound}/>
|
||||
</Route>
|
||||
</Router>
|
||||
, document.getElementById('app'));
|
||||
const App: any = (): any => {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Wrapper>
|
||||
<Switch>
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route path="/soundboard" component={Soundboard} />
|
||||
<Route path="/downloader" component={Downloader} />
|
||||
<Route path="/clips" component={Clips} />
|
||||
<Route path="/oauth" component={Oauth} />
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
</Wrapper>
|
||||
</BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
ReactDOM.render(<App /> as any, document.getElementById('app'));
|
||||
|
||||
2337
client/app/assets/font-awesome/css/font-awesome.css
vendored
2337
client/app/assets/font-awesome/css/font-awesome.css
vendored
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
461
client/app/assets/normalize.css
vendored
461
client/app/assets/normalize.css
vendored
@@ -1,461 +0,0 @@
|
||||
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/**
|
||||
* 1. Change the default font family in all browsers (opinionated).
|
||||
* 2. Correct the line height in all browsers.
|
||||
* 3. Prevent adjustments of font size after orientation changes in
|
||||
* IE on Windows Phone and in iOS.
|
||||
*/
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
line-height: 1.15; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 3 */
|
||||
-webkit-text-size-adjust: 100%; /* 3 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main { /* 1 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct margin in IE 8.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the outline on focused links when they are also active or hovered
|
||||
* in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct background and color in IE 9-.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the border, margin, and padding in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
*/
|
||||
|
||||
details, /* 1 */
|
||||
menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Scripting
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import jwt_decode from 'jwt-decode';
|
||||
|
||||
import './Navbar.scss';
|
||||
@@ -15,7 +15,6 @@ if (!process.env.NODE_ENV) {
|
||||
oauthUrl = `https://discordapp.com/api/oauth2/authorize?client_id=271998875802402816&redirect_uri=https%3A%2F%2Fcashdiscord.com%2Foauth&response_type=code&scope=identify%20guilds%20email`;
|
||||
}
|
||||
|
||||
|
||||
interface Props {}
|
||||
|
||||
interface State {
|
||||
@@ -24,7 +23,6 @@ interface State {
|
||||
}
|
||||
|
||||
export class Navbar extends React.Component<Props, State> {
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
@@ -37,6 +35,7 @@ export class Navbar extends React.Component<Props, State> {
|
||||
|
||||
if (token) {
|
||||
const claims: any = jwt_decode(token!);
|
||||
console.log(claims);
|
||||
const email = claims['email'];
|
||||
this.setState({ token, email });
|
||||
}
|
||||
@@ -45,23 +44,34 @@ export class Navbar extends React.Component<Props, State> {
|
||||
private logout = () => {
|
||||
localStorage.clear();
|
||||
window.location.href = '/';
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="Navbar">
|
||||
<div className="Navbar__header">Go Discord Bot</div>
|
||||
<Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Home</Link>
|
||||
<Link to="/soundboard" className="Navbar__item" activeClassName="Navbar__item--active">Soundboard</Link>
|
||||
<Link to="/downloader" className="Navbar__item" activeClassName="Navbar__item--active">Youtube Downloader</Link>
|
||||
{/* PUBG - DEPRECATED */}
|
||||
{/* <Link to="/pubg" className="Navbar__item" activeClassName="Navbar__item--active">Pubg</Link> */}
|
||||
<Link to="/clips" className="Navbar__item" activeClassName="Navbar__item--active">Clips</Link>
|
||||
<NavLink exact to="/" className="Navbar__item" activeClassName="Navbar__item--active">
|
||||
Home
|
||||
</NavLink>
|
||||
<NavLink to="/soundboard" className="Navbar__item" activeClassName="Navbar__item--active">
|
||||
Soundboard
|
||||
</NavLink>
|
||||
<NavLink to="/downloader" className="Navbar__item" activeClassName="Navbar__item--active">
|
||||
Youtube Downloader
|
||||
</NavLink>
|
||||
<NavLink to="/clips" className="Navbar__item" activeClassName="Navbar__item--active">
|
||||
Clips
|
||||
</NavLink>
|
||||
|
||||
{ !this.state.token ?
|
||||
<a href={oauthUrl} className="Navbar__item">Login</a> :
|
||||
<a className="Navbar__item" onClick={this.logout}>Logout</a>
|
||||
}
|
||||
{!this.state.token ? (
|
||||
<a href={oauthUrl} className="Navbar__item">
|
||||
Login
|
||||
</a>
|
||||
) : (
|
||||
<a className="Navbar__item" onClick={this.logout}>
|
||||
Logout
|
||||
</a>
|
||||
)}
|
||||
|
||||
{this.state.email && <div className="Navbar__email">{this.state.email}</div>}
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
@import "../../scss/variables";
|
||||
@import '../../scss/variables';
|
||||
|
||||
.SoundList__item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
|
||||
& + .SoundList__item {
|
||||
border-top: 1px solid $gray3;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
|
||||
& + .SoundList__item {
|
||||
border-top: 1px solid $gray3;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,81 +3,85 @@ import React from 'react';
|
||||
import './SoundList.scss';
|
||||
|
||||
interface Props {
|
||||
soundList: SoundType[];
|
||||
type: string;
|
||||
soundList: SoundType[];
|
||||
type: string;
|
||||
}
|
||||
|
||||
interface State {
|
||||
showAudioControls: boolean[];
|
||||
showAudioControls: boolean[];
|
||||
}
|
||||
|
||||
export interface SoundType {
|
||||
extension: string;
|
||||
name: string;
|
||||
prefix?: string;
|
||||
extension: string;
|
||||
name: string;
|
||||
prefix?: string;
|
||||
}
|
||||
|
||||
export class SoundList extends React.Component<Props, State> {
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
showAudioControls: [],
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
showAudioControls: [],
|
||||
};
|
||||
}
|
||||
|
||||
checkExtension(extension: string) {
|
||||
switch(extension) {
|
||||
case "wav":
|
||||
return true;
|
||||
case "mp3":
|
||||
return true;
|
||||
case "mpeg":
|
||||
return true;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
checkExtension(extension: string) {
|
||||
switch (extension) {
|
||||
case 'wav':
|
||||
return true;
|
||||
case 'mp3':
|
||||
return true;
|
||||
case 'mpeg':
|
||||
return true;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
handleShowAudio(index: any) {
|
||||
let temp = this.state.showAudioControls;
|
||||
temp[index] = true;
|
||||
handleShowAudio(index: any) {
|
||||
let temp = this.state.showAudioControls;
|
||||
temp[index] = true;
|
||||
|
||||
this.setState({
|
||||
showAudioControls: temp,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
this.setState({
|
||||
showAudioControls: temp,
|
||||
});
|
||||
}
|
||||
|
||||
const { soundList, type } = this.props;
|
||||
render() {
|
||||
const { soundList, type } = this.props;
|
||||
|
||||
return (
|
||||
<div className="Card">
|
||||
<div className="Card__header" style={{display:'flex'}}>
|
||||
<div>
|
||||
<span>{type}</span>
|
||||
<i className="fa fa fa-volume-up" aria-hidden="true"/>
|
||||
</div>
|
||||
<div style={{flex:1}}/>
|
||||
<div>({soundList.length})</div>
|
||||
return (
|
||||
<div className="Card">
|
||||
<div className="Card__header" style={{ display: 'flex' }}>
|
||||
<div>
|
||||
<span>{type}</span>
|
||||
<i className="fa fa fa-volume-up" aria-hidden="true" />
|
||||
</div>
|
||||
<div style={{ flex: 1 }} />
|
||||
<div>({soundList.length})</div>
|
||||
</div>
|
||||
|
||||
{soundList.length > 0
|
||||
? soundList.map((sound: SoundType, index: number) => {
|
||||
return (
|
||||
<div key={index} className="SoundList__item">
|
||||
<div>{(sound.prefix || '') + sound.name}</div>
|
||||
|
||||
{this.checkExtension(sound.extension) && this.state.showAudioControls[index] ? (
|
||||
<audio
|
||||
controls
|
||||
src={`/public/${type.toLowerCase()}/` + sound.name + '.' + sound.extension}
|
||||
itemType={'audio/' + sound.extension}
|
||||
style={{ width: '100px' }}
|
||||
/>
|
||||
) : (
|
||||
<i className="fa fa-play link" aria-hidden="true" onClick={() => this.handleShowAudio(index)} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{soundList.length > 0 ? soundList.map((sound: SoundType, index: number) => {
|
||||
return (
|
||||
<div key={index} className="SoundList__item">
|
||||
<div>{(sound.prefix || '') + sound.name}</div>
|
||||
|
||||
{this.checkExtension(sound.extension) && this.state.showAudioControls[index] ?
|
||||
<audio controls src={`/public/${type.toLowerCase()}/` + sound.name + "." + sound.extension}
|
||||
itemType={"audio/" + sound.extension}
|
||||
style={{width: "100px"}}/>
|
||||
: <i className="fa fa-play link" aria-hidden="true" onClick={() => this.handleShowAudio(index)}/> }
|
||||
</div>
|
||||
);
|
||||
}) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
})
|
||||
: null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,8 +10,8 @@ interface State {
|
||||
}
|
||||
|
||||
export class Clips extends React.Component<Props, State> {
|
||||
constructor() {
|
||||
super();
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
clipList: [],
|
||||
};
|
||||
@@ -38,7 +38,7 @@ export class Clips extends React.Component<Props, State> {
|
||||
return (
|
||||
<div className="Soundboard">
|
||||
<div className="column">
|
||||
<SoundList soundList={this.state.clipList} type="Clips"/>
|
||||
<SoundList soundList={this.state.clipList} type="Clips" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,16 +1,15 @@
|
||||
.Downloader {
|
||||
padding: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.Downloader__input {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.Downloader__button {
|
||||
|
||||
& + & {
|
||||
margin-left: 10px;
|
||||
}
|
||||
& + & {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,97 +3,102 @@ import axios from 'axios';
|
||||
|
||||
import './Downloader.scss';
|
||||
|
||||
interface Props {
|
||||
|
||||
}
|
||||
interface Props {}
|
||||
|
||||
interface State {
|
||||
fileType: string;
|
||||
url: string;
|
||||
message: string;
|
||||
downloadLink: string;
|
||||
downLoadFileName: string;
|
||||
dataLoading: boolean;
|
||||
dataLoaded: boolean;
|
||||
fileType: string;
|
||||
url: string;
|
||||
message: string;
|
||||
downloadLink: string;
|
||||
downLoadFileName: string;
|
||||
dataLoading: boolean;
|
||||
dataLoaded: boolean;
|
||||
}
|
||||
|
||||
export class Downloader extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
fileType: 'mp3',
|
||||
url: '',
|
||||
message: '',
|
||||
dataLoaded: false,
|
||||
downloadLink: '',
|
||||
downLoadFileName: '',
|
||||
dataLoading: false,
|
||||
};
|
||||
}
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
fileType: "mp3",
|
||||
url: "",
|
||||
message: "",
|
||||
dataLoaded: false,
|
||||
downloadLink: "",
|
||||
downLoadFileName: "",
|
||||
dataLoading: false,
|
||||
};
|
||||
sendRequest() {
|
||||
if (this.state.url === '') {
|
||||
this.setState({
|
||||
message: 'Invalid URL',
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
sendRequest() {
|
||||
if (this.state.url === "") {
|
||||
this.setState({
|
||||
message: "Invalid URL",
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
message: '',
|
||||
url: '',
|
||||
dataLoaded: false,
|
||||
dataLoading: true,
|
||||
});
|
||||
|
||||
axios
|
||||
.get(`/api/ytdownloader`, {
|
||||
params: {
|
||||
fileType: this.state.fileType,
|
||||
url: this.state.url,
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
this.setState({
|
||||
message: "",
|
||||
url: "",
|
||||
dataLoaded: false,
|
||||
dataLoading: true,
|
||||
dataLoaded: true,
|
||||
dataLoading: false,
|
||||
downloadLink: `/public/youtube/${res.data.fileName}`,
|
||||
downLoadFileName: res.data.fileName,
|
||||
});
|
||||
|
||||
axios.get(`/api/ytdownloader`, {
|
||||
params: {
|
||||
fileType: this.state.fileType,
|
||||
url: this.state.url,
|
||||
}
|
||||
}).then((res) => {
|
||||
this.setState({
|
||||
dataLoaded: true,
|
||||
dataLoading: false,
|
||||
downloadLink: `/public/youtube/${res.data.fileName}`,
|
||||
downLoadFileName: res.data.fileName,
|
||||
});
|
||||
}).catch(() => {
|
||||
this.setState({
|
||||
message: "Internal error.",
|
||||
dataLoading: false,
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.setState({
|
||||
message: 'Internal error.',
|
||||
dataLoading: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="Downloader">
|
||||
<div className="card">
|
||||
<div className="card__header">
|
||||
Youtube to MP3
|
||||
</div>
|
||||
render() {
|
||||
return (
|
||||
<div className="Downloader">
|
||||
<div className="card">
|
||||
<div className="card__header">Youtube to MP3</div>
|
||||
|
||||
<input placeholder="Enter Youtube URL"
|
||||
className="input Downloader__input"
|
||||
value={this.state.url}
|
||||
onChange={(event) => this.setState({url: event.target.value})}/>
|
||||
<input
|
||||
placeholder="Enter Youtube URL"
|
||||
className="input Downloader__input"
|
||||
value={this.state.url}
|
||||
onChange={event => this.setState({ url: event.target.value })}
|
||||
/>
|
||||
|
||||
<div style={{marginBottom:'10px'}}>
|
||||
<button className="button button--primary"
|
||||
style={{width: '100px', height: '40px', fontSize: 'large'}}
|
||||
onClick={this.sendRequest.bind(this)}>
|
||||
{this.state.dataLoading ? <i className="fa fa-spinner fa-spin fa-fw"/> : 'Convert'}
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ marginBottom: '10px' }}>
|
||||
<button
|
||||
className="button button--primary"
|
||||
style={{ width: '100px', height: '40px', fontSize: 'large' }}
|
||||
onClick={this.sendRequest.bind(this)}
|
||||
>
|
||||
{this.state.dataLoading ? <i className="fa fa-spinner fa-spin fa-fw" /> : 'Convert'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{this.state.message !== "" && <div>{this.state.message}</div>}
|
||||
{this.state.dataLoaded && <a href={this.state.downloadLink} download>{this.state.downLoadFileName}</a>}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
{this.state.message !== '' && <div>{this.state.message}</div>}
|
||||
{this.state.dataLoaded && (
|
||||
<a href={this.state.downloadLink} download>
|
||||
{this.state.downLoadFileName}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.Home {
|
||||
padding: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@@ -2,50 +2,47 @@ import React from 'react';
|
||||
|
||||
import './Home.scss';
|
||||
|
||||
interface Props {
|
||||
interface Props {}
|
||||
|
||||
}
|
||||
|
||||
interface State {
|
||||
|
||||
}
|
||||
interface State {}
|
||||
|
||||
export class Home extends React.Component<Props, State> {
|
||||
render() {
|
||||
return (
|
||||
<div className="Home">
|
||||
<div className="Card">
|
||||
<div className="Card__header">Go Discord Bot</div>
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="Home">
|
||||
<div className="Card">
|
||||
<div className="Card__header">
|
||||
Go Discord Bot
|
||||
</div>
|
||||
<h3>Audio Clipping</h3>
|
||||
<p><em>NEW:</em> Audio clipping now supported! Try it out with the <code>clip</code> command!</p>
|
||||
<h3>04-09-18 Update</h3>
|
||||
<ul>
|
||||
<li>pubg stats no longer updated on this site</li>
|
||||
<li>client dependencies all updated (including webpack 4 and react router 4)</li>
|
||||
</ul>
|
||||
|
||||
<br/>
|
||||
<h3>Audio Clipping</h3>
|
||||
<p>
|
||||
<em>NEW:</em> Audio clipping now supported! Try it out with the <code>clip</code> command!
|
||||
</p>
|
||||
|
||||
<h3>PUBG Stats</h3>
|
||||
<p>PUBG stats are pulled from the score API.</p>
|
||||
<h3>PUBG Stats</h3>
|
||||
<p>PUBG stats are pulled from the score API.</p>
|
||||
|
||||
<br/>
|
||||
<h3>Youtube Downloader</h3>
|
||||
<p>Convert Youtube URL's to MP3 files.</p>
|
||||
|
||||
<h3>Youtube Downloader</h3>
|
||||
<p>Convert Youtube URL's to MP3 files.</p>
|
||||
<h3>Soundboard Upload</h3>
|
||||
<p>Drag and drop files to upload. Sounds can be played in discord by typing the commands on the next page.</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<h3>Soundboard Upload</h3>
|
||||
<p>Drag and drop files to upload. Sounds can be played in discord by typing the commands on the next page.</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<p>Check out the source code on
|
||||
<a href="https://github.com/mgerb/GoBot" target="_blank"> GitHub
|
||||
<i className="fa fa-github" aria-hidden="true"/>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<p>
|
||||
Check out the source code on
|
||||
<a href="https://github.com/mgerb/GoBot" target="_blank">
|
||||
{' '}
|
||||
GitHub
|
||||
<i className="fa fa-github" aria-hidden="true" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.NotFound {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
font-size: 20px;
|
||||
}
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@@ -1,20 +1,12 @@
|
||||
import React from 'react';
|
||||
import './NotFound.scss';
|
||||
|
||||
interface Props {
|
||||
interface Props {}
|
||||
|
||||
}
|
||||
|
||||
interface State {
|
||||
|
||||
}
|
||||
interface State {}
|
||||
|
||||
export class NotFound extends React.Component<Props, State> {
|
||||
render() {
|
||||
return (
|
||||
<div className="NotFound">
|
||||
404 Not Found
|
||||
</div>
|
||||
);
|
||||
}
|
||||
render() {
|
||||
return <div className="NotFound">404 Not Found</div>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,32 +1,33 @@
|
||||
@import "../../scss/variables";
|
||||
@import '../../scss/variables';
|
||||
|
||||
.pubg__container {
|
||||
padding: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pubg__table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin-top: 20px;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin-top: 20px;
|
||||
|
||||
tr + tr {
|
||||
border-top: 1px solid $gray3;
|
||||
}
|
||||
tr + tr {
|
||||
border-top: 1px solid $gray3;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 5px;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.pubg__button-row {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.button {
|
||||
min-width: 100px;
|
||||
.button {
|
||||
min-width: 100px;
|
||||
|
||||
& + .button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
& + .button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,146 +1,159 @@
|
||||
// DEPRECATED
|
||||
/**
|
||||
* DEPRECATED
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import axios from 'axios';
|
||||
import * as _ from 'lodash';
|
||||
import './Pubg.scss';
|
||||
|
||||
interface Props {
|
||||
|
||||
}
|
||||
interface Props {}
|
||||
|
||||
interface State {
|
||||
players: Player[];
|
||||
selectedRegion: string;
|
||||
selectedMatch: string;
|
||||
statList: string[];
|
||||
players: Player[];
|
||||
selectedRegion: string;
|
||||
selectedMatch: string;
|
||||
statList: string[];
|
||||
}
|
||||
|
||||
interface Player {
|
||||
PlayerName: string;
|
||||
agg?: any;
|
||||
as?: any;
|
||||
na?: any;
|
||||
sa?: any;
|
||||
PlayerName: string;
|
||||
agg?: any;
|
||||
as?: any;
|
||||
na?: any;
|
||||
sa?: any;
|
||||
}
|
||||
|
||||
export class Pubg extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
players: [],
|
||||
selectedRegion: 'agg',
|
||||
selectedMatch: 'squad',
|
||||
statList: [],
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
players: [],
|
||||
selectedRegion: 'agg',
|
||||
selectedMatch: 'squad',
|
||||
statList: [],
|
||||
};
|
||||
componentDidMount() {
|
||||
axios.get('/api/stats/pubg').then(res => {
|
||||
this.setState({
|
||||
players: _.map(res.data) as any,
|
||||
});
|
||||
|
||||
this.setStatList();
|
||||
});
|
||||
}
|
||||
|
||||
// get stat list
|
||||
setStatList() {
|
||||
// hacky way to find existing content -- to tired to make it pretty
|
||||
let i = 0;
|
||||
let stats;
|
||||
while (!stats) {
|
||||
if (i > this.state.players.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
stats = _.find(
|
||||
_.get(this.state, `players[${i}].Stats`),
|
||||
(s: any) => s.Match === this.state.selectedMatch.toLowerCase(),
|
||||
);
|
||||
i++;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
axios.get("/api/stats/pubg").then((res) => {
|
||||
if (stats) {
|
||||
this.setState({
|
||||
statList: _.sortBy(_.map(stats.Stats, 'field')) as any,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
players: _.map(res.data) as any,
|
||||
insertRows(): any {
|
||||
return this.state.statList.map((val: any, index: any) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td>{val}</td>
|
||||
{this.state.players.map((player: any, i: number) => {
|
||||
// find player stats for field
|
||||
let playerStat = _.find(player.Stats, (p: any) => {
|
||||
return (
|
||||
p.Match === this.state.selectedMatch.toLowerCase() &&
|
||||
p.Region === this.state.selectedRegion.toLowerCase()
|
||||
);
|
||||
});
|
||||
|
||||
this.setStatList();
|
||||
});
|
||||
}
|
||||
|
||||
// get stat list
|
||||
setStatList() {
|
||||
|
||||
// hacky way to find existing content -- to tired to make it pretty
|
||||
let i = 0;
|
||||
let stats;
|
||||
while (!stats) {
|
||||
if (i > this.state.players.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
stats = _.find(_.get(this.state, `players[${i}].Stats`), (s: any) => s.Match === this.state.selectedMatch.toLowerCase());
|
||||
i++;
|
||||
}
|
||||
|
||||
if (stats) {
|
||||
this.setState({
|
||||
statList: _.sortBy(_.map(stats.Stats, 'field')) as any,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
insertRows(): any {
|
||||
return this.state.statList.map((val: any, index: any) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td>{val}</td>
|
||||
{this.state.players.map((player: any, i: number) => {
|
||||
// find player stats for field
|
||||
let playerStat = _.find(player.Stats, (p: any) => {
|
||||
return p.Match === this.state.selectedMatch.toLowerCase() && p.Region === this.state.selectedRegion.toLowerCase();
|
||||
});
|
||||
|
||||
return <td key={i}>{_.get(_.find(_.get(playerStat, 'Stats'), (p: any) => p.field === val), 'displayValue')}</td>
|
||||
})}
|
||||
</tr>
|
||||
<td key={i}>{_.get(_.find(_.get(playerStat, 'Stats'), (p: any) => p.field === val), 'displayValue')}</td>
|
||||
);
|
||||
});
|
||||
}
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
buttonRegion(title: string) {
|
||||
let lowerTitle = title === 'All' ? 'agg' : title.toLowerCase()
|
||||
return (
|
||||
<button className={`button ${lowerTitle === this.state.selectedRegion ? 'button--primary' : ''}`}
|
||||
onClick={() => {
|
||||
this.setState({selectedRegion: lowerTitle});
|
||||
this.setStatList();
|
||||
}}>{title}</button>
|
||||
);
|
||||
}
|
||||
buttonRegion(title: string) {
|
||||
let lowerTitle = title === 'All' ? 'agg' : title.toLowerCase();
|
||||
return (
|
||||
<button
|
||||
className={`button ${lowerTitle === this.state.selectedRegion ? 'button--primary' : ''}`}
|
||||
onClick={() => {
|
||||
this.setState({ selectedRegion: lowerTitle });
|
||||
this.setStatList();
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
buttonMatch(title: string) {
|
||||
let lowerTitle = title.toLowerCase()
|
||||
return (
|
||||
<button className={`button ${lowerTitle === this.state.selectedMatch ? 'button--primary' : ''}`}
|
||||
onClick={() => {
|
||||
this.setState({selectedMatch: lowerTitle});
|
||||
this.setStatList();
|
||||
}}>{title}</button>
|
||||
);
|
||||
}
|
||||
buttonMatch(title: string) {
|
||||
let lowerTitle = title.toLowerCase();
|
||||
return (
|
||||
<button
|
||||
className={`button ${lowerTitle === this.state.selectedMatch ? 'button--primary' : ''}`}
|
||||
onClick={() => {
|
||||
this.setState({ selectedMatch: lowerTitle });
|
||||
this.setStatList();
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="pubg__container">
|
||||
<div className="card" style={{maxWidth:'initial'}}>
|
||||
<div className="card__header">PUBG Stats</div>
|
||||
render() {
|
||||
return (
|
||||
<div className="pubg__container">
|
||||
<div className="card" style={{ maxWidth: 'initial' }}>
|
||||
<div className="card__header">PUBG Stats</div>
|
||||
|
||||
<div className="pubg__button-row">
|
||||
{this.buttonMatch('Solo')}
|
||||
{this.buttonMatch('Duo')}
|
||||
{this.buttonMatch('Squad')}
|
||||
</div>
|
||||
<div className="pubg__button-row">
|
||||
{this.buttonMatch('Solo')}
|
||||
{this.buttonMatch('Duo')}
|
||||
{this.buttonMatch('Squad')}
|
||||
</div>
|
||||
|
||||
<div className="pubg__button-row">
|
||||
{this.buttonRegion('All')}
|
||||
{this.buttonRegion('Na')}
|
||||
{this.buttonRegion('As')}
|
||||
{this.buttonRegion('Au')}
|
||||
</div>
|
||||
<div className="pubg__button-row">
|
||||
{this.buttonRegion('All')}
|
||||
{this.buttonRegion('Na')}
|
||||
{this.buttonRegion('As')}
|
||||
{this.buttonRegion('Au')}
|
||||
</div>
|
||||
|
||||
<table className="pubg__table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th></th>
|
||||
{this.state.players.map((val: any, index: number) => {
|
||||
return <th key={index}>{val.PlayerName}</th>;
|
||||
})}
|
||||
</tr>
|
||||
{this.insertRows()}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<table className="pubg__table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th />
|
||||
{this.state.players.map((val: any, index: number) => {
|
||||
return <th key={index}>{val.PlayerName}</th>;
|
||||
})}
|
||||
</tr>
|
||||
{this.insertRows()}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
@import '../../scss/variables';
|
||||
|
||||
.Soundboard {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.Soundboard__column {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.Soundboard__input {
|
||||
display: block;
|
||||
width: 200px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
display: block;
|
||||
width: 200px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.Dropzone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid $primaryBlue;
|
||||
border-radius: 1em;
|
||||
padding: 20px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
color: $lightGray;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: $gray2;
|
||||
transition: box-shadow 0.1s linear, background-color 0.1s linear;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid $primaryBlue;
|
||||
border-radius: 1em;
|
||||
padding: 20px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
color: $lightGray;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: $gray2;
|
||||
transition: box-shadow 0.1s linear, background-color 0.1s linear;
|
||||
}
|
||||
|
||||
.Dropzone--active {
|
||||
background-color: $gray3;
|
||||
box-shadow: 0px 0px 5px 1px $primaryBlue;
|
||||
background-color: $gray3;
|
||||
box-shadow: 0px 0px 5px 1px $primaryBlue;
|
||||
}
|
||||
|
||||
@@ -22,8 +22,8 @@ export class Soundboard extends React.Component<Props, State> {
|
||||
private config: AxiosRequestConfig;
|
||||
private soundListCache: any;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
(this.state = {
|
||||
percentCompleted: 0,
|
||||
uploaded: false,
|
||||
@@ -37,13 +37,11 @@ export class Soundboard extends React.Component<Props, State> {
|
||||
this.config = {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
'Authorization': `Bearer ${storage.getJWT()}`
|
||||
Authorization: `Bearer ${storage.getJWT()}`,
|
||||
},
|
||||
onUploadProgress: progressEvent => {
|
||||
this.setState({
|
||||
percentCompleted: Math.round(
|
||||
progressEvent.loaded * 100 / progressEvent.total,
|
||||
),
|
||||
percentCompleted: Math.round(progressEvent.loaded * 100 / progressEvent.total),
|
||||
});
|
||||
},
|
||||
};
|
||||
@@ -123,16 +121,8 @@ export class Soundboard extends React.Component<Props, State> {
|
||||
accept={'audio/*'}
|
||||
>
|
||||
<div style={{ fontSize: '20px' }}>Drop file here to upload.</div>
|
||||
{this.state.percentCompleted > 0 ? (
|
||||
<div>Uploading: {this.state.percentCompleted}</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
{this.state.uploaded ? (
|
||||
<div style={{ color: 'green' }}>File uploded!</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
{this.state.percentCompleted > 0 ? <div>Uploading: {this.state.percentCompleted}</div> : ''}
|
||||
{this.state.uploaded ? <div style={{ color: 'green' }}>File uploded!</div> : ''}
|
||||
<div style={{ color: '#f95f59' }}>{this.state.uploadError}</div>
|
||||
</Dropzone>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import React from 'react';
|
||||
import { get } from 'lodash';
|
||||
import axios from 'axios';
|
||||
import queryString from 'query-string';
|
||||
import { RouteComponentProps } from 'react-router-dom';
|
||||
import { storage } from '../../storage';
|
||||
|
||||
interface Props {}
|
||||
interface Props extends RouteComponentProps<any> {}
|
||||
|
||||
interface State {}
|
||||
|
||||
@@ -13,11 +14,11 @@ export class Oauth extends React.Component<Props, State> {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const code = get(this, 'props.location.query.code');
|
||||
const params = queryString.parse(this.props.location.search);
|
||||
|
||||
if (code) {
|
||||
if (params['code']) {
|
||||
// do stuff here
|
||||
this.fetchOauth(code as string);
|
||||
this.fetchOauth(params['code']);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../assets/normalize.css';
|
||||
@import '../assets/font-awesome/css/font-awesome.css';
|
||||
@import '~normalize.css/normalize.css';
|
||||
@import '~font-awesome/css/font-awesome.css';
|
||||
@import './variables.scss';
|
||||
@import './style.scss';
|
||||
|
||||
@@ -1,85 +1,86 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a, .link {
|
||||
text-decoration: none;
|
||||
color: $primaryBlue;
|
||||
transition: color 0.1s linear;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
a,
|
||||
.link {
|
||||
text-decoration: none;
|
||||
color: $primaryBlue;
|
||||
transition: color 0.1s linear;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $gray1;
|
||||
color: $white;
|
||||
padding-left: $navbarWidth;
|
||||
background-color: $gray1;
|
||||
color: $white;
|
||||
padding-left: $navbarWidth;
|
||||
}
|
||||
|
||||
.input {
|
||||
border-radius: 3px;
|
||||
border: 1px solid $lightGray;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
height: 30px;
|
||||
background: $gray5;
|
||||
color: $white;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $lightGray;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
height: 30px;
|
||||
background: $gray5;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: $white;
|
||||
background: $lightGray;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: $white;
|
||||
background: $lightGray;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: lighten($lightGray, 5%);
|
||||
}
|
||||
&:hover {
|
||||
background: lighten($lightGray, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
background: $primaryBlue;
|
||||
background: $primaryBlue;
|
||||
|
||||
&:hover {
|
||||
background: lighten($primaryBlue, 2%);
|
||||
}
|
||||
&:hover {
|
||||
background: lighten($primaryBlue, 2%);
|
||||
}
|
||||
}
|
||||
|
||||
.Card {
|
||||
background-color: $gray2;
|
||||
border-radius: 5px;
|
||||
max-width: 800px;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid $gray3;
|
||||
background-color: $gray2;
|
||||
border-radius: 5px;
|
||||
max-width: 800px;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid $gray3;
|
||||
}
|
||||
|
||||
.Card__header {
|
||||
margin: -10px -10px 10px -10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
height: 50px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
font-size: 25px;
|
||||
background-color: $gray3;
|
||||
margin: -10px -10px 10px -10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
height: 50px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
font-size: 25px;
|
||||
background-color: $gray3;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
|
||||
& + .column {
|
||||
margin-left: 10px;
|
||||
}
|
||||
flex: 1;
|
||||
|
||||
& + .column {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
$navbarWidth: 200px;
|
||||
|
||||
|
||||
// colors
|
||||
$primaryBlue: #7289da;
|
||||
$white: darken(white, 20%);
|
||||
|
||||
Reference in New Issue
Block a user