230 lines
9.5 KiB
JavaScript
230 lines
9.5 KiB
JavaScript
import React from 'react';
|
|
import logo from './../../logo-small.svg';
|
|
import './AppAdmin.css';
|
|
import { Paper, Container, AppBar, Tabs, Tab, Box } from '@material-ui/core';
|
|
import PropTypes from 'prop-types';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import TopTenSongs from "../TopTenSongs/TopTenSongs";
|
|
import TopTenSingers from "../TopTenSingers/TopTenSingers";
|
|
import DuetData from "../DuetData/DuetData";
|
|
import CacheDeets from "../CacheDeets/CacheDeets";
|
|
import BotDeets from "../BotDeets/BotDeets";
|
|
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core';
|
|
import ProblemContainer from "../ProblemContainer/ProblemContainer";
|
|
|
|
function TabPanel(props) {
|
|
const { children, value, index, ...other } = props;
|
|
|
|
return (
|
|
<Typography
|
|
component="div"
|
|
role="tabpanel"
|
|
hidden={value !== index}
|
|
id={`vertical-tabpanel-${index}`}
|
|
aria-labelledby={`vertical-tab-${index}`}
|
|
{...other}
|
|
>
|
|
<Box p={3}>{children}</Box>
|
|
</Typography>
|
|
);
|
|
}
|
|
|
|
TabPanel.propTypes = {
|
|
children: PropTypes.node,
|
|
index: PropTypes.any.isRequired,
|
|
value: PropTypes.any.isRequired
|
|
};
|
|
|
|
function a11yProps(index) {
|
|
return {
|
|
id: `tab-${index}`,
|
|
"aria-controls": `tabpanel-${index}`
|
|
};
|
|
}
|
|
|
|
class AppAdmin extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.setPage = this.setPage.bind(this);
|
|
this.reloadSongComponent = this.reloadSongComponent.bind(this);
|
|
this.reloadSingersComponent = this.reloadSingersComponent.bind(this);
|
|
this.reloadDuetComponent = this.reloadDuetComponent.bind(this);
|
|
this.state = {
|
|
page: 0,
|
|
reloadSongComponent: false,
|
|
reloadSingersComponent: false,
|
|
reloadDuetComponent: false,
|
|
};
|
|
}
|
|
|
|
setPage(pageNum) {
|
|
let newState = this.state;
|
|
newState.page = pageNum;
|
|
this.setState(newState);
|
|
}
|
|
|
|
reloadSongComponent(components) {
|
|
let newState = this.state;
|
|
newState.reloadComponents = components;
|
|
this.setState(newState);
|
|
}
|
|
|
|
reloadSingersComponent(components) {
|
|
let newState = this.state;
|
|
newState.reloadComponents = components;
|
|
this.setState(newState);
|
|
}
|
|
|
|
reloadDuetComponent(components) {
|
|
let newState = this.state;
|
|
newState.reloadDuetComponent = components;
|
|
console.log("I'm trying!")
|
|
this.setState(newState);
|
|
}
|
|
|
|
render() {
|
|
const page = this.state.page
|
|
if (
|
|
(window.location.href.split("/").length < 6) ||
|
|
(window.location.href.split("/")[3].search(/^admin/) < 0) ||
|
|
(window.location.href.split("/")[5].length !== 48)
|
|
) {
|
|
if (window.location.href.split("/")[2] !== "192.168.1.111:3000") {
|
|
return (
|
|
<ProblemContainer />
|
|
)
|
|
}
|
|
}
|
|
|
|
const channelName = window.location.href.split("/")[4]
|
|
const adminToken = window.location.href.split("/")[5]
|
|
const csvURL = "/csv/"+ channelName + "/" + adminToken
|
|
const tsvURL = "/tsv/"+ channelName + "/" + adminToken
|
|
const scriptURL = "/script.bat/"+ channelName + "/" + adminToken
|
|
const bockScriptURL = "https://tsdownloader.azurewebsites.net/api/ScriptApi/GenerateScript?userName="+ channelName
|
|
const setPage = this.setPage
|
|
const reloadDuetComponent = this.state.reloadDuetComponent
|
|
const reloadSongComponent = this.state.reloadSongComponent
|
|
const reloadSingersComponent = this.state.reloadSingersComponent
|
|
|
|
function handleChange(event, newValue) {
|
|
setPage(newValue);
|
|
}
|
|
|
|
return (
|
|
<Container className="App">
|
|
<Paper>
|
|
<img src={logo} className="App-logo" alt="logo" />
|
|
<Typography variant="h4" component="h1" gutterBottom>
|
|
Twitch Sings Tools
|
|
</Typography>
|
|
<AppBar position="static" className="App-menu">
|
|
<Tabs value={page} onChange={handleChange} aria-label="simple tabs example">
|
|
<Tab label="Top Songs" {...a11yProps(0)}/>
|
|
<Tab label="Top Singers" {...a11yProps(1)}/>
|
|
<Tab label="Data" {...a11yProps(2)}/>
|
|
<Tab label="Download Videos" {...a11yProps(3)}/>
|
|
<Tab label="Export" {...a11yProps(4)}/>
|
|
<Tab label="Cache Details" {...a11yProps(5)}/>
|
|
<Tab label="Chatbot" {...a11yProps(6)}/>
|
|
</Tabs>
|
|
</AppBar>
|
|
<TabPanel value={page} index={0}>
|
|
<TopTenSongs reloadSongComponent={reloadSongComponent}
|
|
onReloadedChange={this.reloadSongComponent}/>
|
|
</TabPanel>
|
|
<TabPanel value={page} index={1}>
|
|
<TopTenSingers reloadSingersComponent={reloadSingersComponent}
|
|
onReloadedChange={this.reloadSingersComponent}/>
|
|
</TabPanel>
|
|
<TabPanel value={page} index={2}>
|
|
<DuetData reloadDuetComponent={reloadDuetComponent}
|
|
onReloadedChange={this.reloadDuetComponent}/>
|
|
</TabPanel>
|
|
<TabPanel value={page} index={3}>
|
|
<Typography variant="h3" component="h2" gutterBottom>
|
|
RIP Twitch sings!
|
|
</Typography>
|
|
<Typography variant="h5" component="h2" gutterBottom>
|
|
Here is a script to download all your published duets and solo performances.
|
|
</Typography>
|
|
<Typography variant="p">
|
|
First, you need to <a href="https://github.com/ytdl-org/youtube-dl/releases/download/2020.07.28/youtube-dl.exe">download youtube-dl from here</a>.
|
|
Then, download your <a href={scriptURL}>personal script from here</a>.<br/><br/>
|
|
</Typography>
|
|
<Typography variant="p">
|
|
Put both files in the same folder and run script.bat. I know, that's not a nice interface, but, it works. Right now, I can't bear to do much more,
|
|
hurts to even think about the situation. It creates a subfolder per person and dates the files.
|
|
It even works if you sang the same song with the same person on the same day.<br/><br/>
|
|
</Typography>
|
|
<Typography variant="p">
|
|
If you need to pause, press "Control" and "C" and say "Y" to the question. Next run the script will actually happily resume where it left off.<br/><br/>
|
|
</Typography>
|
|
<Typography variant="h5" component="h2" gutterBottom>
|
|
You might be interested in BockTown's script that does the other side of the coin - finds and downloads duets completed by others of your open seeds
|
|
</Typography>
|
|
<Typography variant="p">
|
|
You can download your version of his script <a href={bockScriptURL}>from here</a>. It'll take a bit to generate so be patient, click the link once and wait. ;-)
|
|
</Typography>
|
|
</TabPanel>
|
|
<TabPanel value={page} index={4}>
|
|
<Typography variant="h5" component="h2" gutterBottom>
|
|
Download your data as :
|
|
</Typography>
|
|
<TableContainer component={Paper}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>TSV</TableCell>
|
|
<TableCell>CSV</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell><a href={tsvURL}>here</a></TableCell>
|
|
<TableCell><a href={csvURL}>here</a></TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
<Typography variant="h5" component="h2" gutterBottom>
|
|
Note: Excel is not very good at handling CSV format it seems...
|
|
</Typography>
|
|
<Typography component="p" gutterBottom>It is important to "Import Data" not "Open" the csv in many cases (8 year old discussion of this behaviour <a href="https://superuser.com/questions/407082/easiest-way-to-open-csv-with-commas-in-excel">here</a>) - from that post the instructions are :</Typography>
|
|
<Typography component="q" gutterBottom>In Excel, DATA tab, in the Get External Data subsection, click "From Text" and import your CSV in the Wizard.</Typography>
|
|
<Typography component="p" gutterBottom>LibreOffice calc kinda just works...just sayin' ;-)</Typography>
|
|
|
|
</TabPanel>
|
|
<TabPanel value={page} index={4}>
|
|
<CacheDeets
|
|
onReloadSongsChange={this.reloadSongComponent}
|
|
onReloadSingersChange={this.reloadSingersComponent}
|
|
onReloadDuetChange={this.reloadDuetComponent}
|
|
/>
|
|
</TabPanel>
|
|
<TabPanel value={page} index={5}>
|
|
<BotDeets />
|
|
</TabPanel>
|
|
<AppBar position="static" className="Footer">
|
|
<TableContainer component={Container}>
|
|
<Table><TableBody>
|
|
<TableRow className="FooterRow">
|
|
<TableCell className="FooterCell"><a href="https://discord.gg/sVgZeRt">Discord</a></TableCell>
|
|
<TableCell className="FooterCell"><a href="https://git.martyn.berlin/martyn/twitchsingstools">Source Code</a></TableCell>
|
|
<TableCell className="FooterCell"><a href="https://twitch.tv/iMartynOnTwitch">Martyn's Twitch</a></TableCell>
|
|
</TableRow>
|
|
<TableRow className="FooterRow">
|
|
<TableCell className="FooterCell">Announcements, Support, Optional notifications</TableCell>
|
|
<TableCell className="FooterCell">Geek out at the really hacky source code from an SRE type person</TableCell>
|
|
<TableCell className="FooterCell">Streaming and singing is my hobby, not my job, so only if you want to...</TableCell>
|
|
</TableRow>
|
|
</TableBody></Table>
|
|
</TableContainer>
|
|
</AppBar>
|
|
</Paper>
|
|
</Container>
|
|
);
|
|
}
|
|
}
|
|
export default AppAdmin;
|