c4patino/know-it-all
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Completed working mp3 files

Browse source
This commit is contained in:
Ceferino Patino 2022-03-19 13:21:17 -05:00
commit c5b9cf843f
16 changed files with 178 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/package.json
View file

@ -21,7 +21,7 @@
},
"scripts": {
"start": "react-scripts start",
"build": "cp ${ENV:-'../.env'} .env && react-scripts build",
"build": "cp ${ENV:-'../.env'} .env && rm -rf ../server/public/build && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

2
client/src/App.jsx
View file

@ -16,8 +16,6 @@ import MemberOrgs from './components/orgs/MemberOrgs';
import OrgDashboard from './components/orgs/OrgDashboard';
import UpdateOrganization from './components/forms/UpdateOrganization';
import RecordMp3 from './components/RecordMp3';
function App() {
const [token, setToken] = useState(false);

8
client/src/components/MainPage.jsx
View file

@ -54,7 +54,7 @@ function MainPage() {
async function getOwnedOrgs() {
await axios
.get(
`${process.env.REACT_APP_DOMAIN_ROOT}/auth?token=${Cookies.get(
`${process.env.REACT_APP_API_ROOT}/auth?token=${Cookies.get(
'token'
)}`
)
@ -79,7 +79,7 @@ function MainPage() {
await axios
.get(
`${
process.env.REACT_APP_DOMAIN_ROOT
process.env.REACT_APP_API_ROOT
}/auth/orgs?token=${Cookies.get('token')}`
)
.then((response) => {
@ -101,7 +101,7 @@ function MainPage() {
console.log('create');
await axios
.post(`${process.env.REACT_APP_DOMAIN_ROOT}/org/create`, {
.post(`${process.env.REACT_APP_API_ROOT}/org/create`, {
token: Cookies.get('token'),
orgName: form.name,
})
@ -115,7 +115,7 @@ function MainPage() {
e.preventDefault();
await axios
.post(`${process.env.REACT_APP_DOMAIN_ROOT}/org/${form.id}/add`, {
.post(`${process.env.REACT_APP_API_ROOT}/org/${form.id}/add`, {
token: Cookies.get('token'),
})
.then(() => {

2
client/src/components/Navbar.jsx
View file

@ -56,7 +56,7 @@ function Navbar({ tokenState }) {
async function handleLogout() {
await axios
.post(`${process.env.REACT_APP_DOMAIN_ROOT}/auth/logout`, {
.post(`${process.env.REACT_APP_API_ROOT}/auth/logout`, {
token: Cookies.get('token'),
})
.catch((e) => {

92
client/src/components/RecordMp3.jsx
View file

@ -1,92 +0,0 @@
import React, { useState } from 'react';
import MicRecorder from 'mic-recorder-to-mp3';
import { IconButton } from '@mui/material';
import PlayArrow from '@mui/icons-material/PlayArrow';
import Mic from '@mui/icons-material/Mic';
import Upload from '@mui/icons-material/Upload';
import Form from './utils/Form';
function RecordMp3() {
const [recorder] = useState(
new MicRecorder({
bitRate: 128,
})
);
const [recording, setRecording] = useState(false);
const [uploadedFile, setUploadedFile] = useState(null);
const [audio, setAudio] = useState(null);
function togglePlay() {
if (audio) {
audio.pause();
audio.currentTime = 0;
setAudio(() => null);
} else {
const audioFile = new Audio(URL.createObjectURL(uploadedFile));
setAudio(() => audioFile);
audioFile.play();
}
}
async function record() {
if (recording) {
console.log('Stopped Recording');
recorder
.stop()
.getMp3()
.then(([buffer, blob]) => {
setRecording(() => false);
setUploadedFile(() => {
return new File(buffer, 'me-at-thevoice.mp3', {
type: blob.type,
lastModified: Date.now(),
});
});
});
} else {
recorder
.start()
.then(() => {
setRecording(() => true);
})
.catch((e) => {
console.error(e);
});
}
}
function uploadRecord() {
setUploadedFile(() => {
return document.getElementById('icon-button-file').files[0];
});
}
return (
<Form>
<form>
<IconButton onClick={togglePlay}>
<PlayArrow />
</IconButton>
<IconButton onClick={record}>
<Mic />
</IconButton>
<input
id='icon-button-file'
type='file'
hidden
onChange={uploadRecord}
/>
<label htmlFor='icon-button-file'>
<IconButton component='span'>
<Upload />
</IconButton>
</label>
</form>
</Form>
);
}
export default RecordMp3;

6
client/src/components/forms/EditUser.jsx
View file

@ -7,6 +7,7 @@ import Cookies from 'js-cookie';
import { Box, Typography, TextField, Button } from '@mui/material';
import Form from '../utils/Form';
import RecordMp3 from '../utils/RecordMp3';
function EditUser() {
const navigate = useNavigate();
@ -25,7 +26,7 @@ function EditUser() {
async function getInfo() {
axios
.get(
`${process.env.REACT_APP_DOMAIN_ROOT}/auth/${Cookies.get(
`${process.env.REACT_APP_API_ROOT}/auth/${Cookies.get(
'userID'
)}?token=${Cookies.get('token')}`
)
@ -60,7 +61,7 @@ function EditUser() {
const { confirmPassword, ...filteredForm } = form;
await axios
.post(
`${process.env.REACT_APP_DOMAIN_ROOT}/auth/register`,
`${process.env.REACT_APP_API_ROOT}/auth/register`,
filteredForm
)
.then(() => {
@ -141,6 +142,7 @@ function EditUser() {
</Link>
</Button>
</form>
<RecordMp3 />
</Form>
);
}

4
client/src/components/forms/Login.jsx
View file

@ -28,7 +28,7 @@ function Login({ setToken }) {
useEffect(() => {
async function logout() {
await axios
.post(`${process.env.REACT_APP_DOMAIN_ROOT}/auth/logout`, {
.post(`${process.env.REACT_APP_API_ROOT}/auth/logout`, {
token: Cookies.get('token'),
})
.catch((e) => {
@ -64,7 +64,7 @@ function Login({ setToken }) {
async function handleSubmit(e) {
e.preventDefault();
await axios
.post(`${process.env.REACT_APP_DOMAIN_ROOT}/auth/login`, form)
.post(`${process.env.REACT_APP_API_ROOT}/auth/login`, form)
.then((response) => {
Cookies.set('token', response.data.token, {
expires: form.remember ? 3650 : 1,

2
client/src/components/forms/Recover.jsx
View file

@ -23,7 +23,7 @@ function Recover() {
e.preventDefault();
await axios
.get(
`${process.env.REACT_APP_DOMAIN_ROOT}/auth/reset-password?${form.email}`
`${process.env.REACT_APP_API_ROOT}/auth/reset-password?${form.email}`
)
.then((response) => {
setSuccess(() => response.data);

2
client/src/components/forms/Register.jsx
View file

@ -35,7 +35,7 @@ function Register() {
const { confirmPassword, ...filteredForm } = form;
await axios
.post(
`${process.env.REACT_APP_DOMAIN_ROOT}/auth/register`,
`${process.env.REACT_APP_API_ROOT}/auth/register`,
filteredForm
)
.then(() => {

2
client/src/components/forms/Reset.jsx
View file

@ -28,7 +28,7 @@ function Reset() {
e.preventDefault();
await axios
.patch(
`${process.env.REACT_APP_DOMAIN_ROOT}/auth/reset-password/${id}`,
`${process.env.REACT_APP_API_ROOT}/auth/reset-password/${id}`,
{
password: form.password,
}

2
client/src/components/forms/UpdateOrganization.jsx
View file

@ -23,7 +23,7 @@ function UpdateOrganization() {
async function handleSubmit(e) {
e.preventDefault();
await axios
.patch(`${process.env.REACT_APP_DOMAIN_ROOT}/org/update`, {
.patch(`${process.env.REACT_APP_API_ROOT}/org/update`, {
token: Cookies.get('token'),
orgName: name,
orgID,

2
client/src/components/orgs/MemberOrgs.jsx
View file

@ -10,7 +10,7 @@ function JoinedOrgs() {
axios
.get(
`${
process.env.REACT_APP_DOMAIN_ROOT
process.env.REACT_APP_API_ROOT
}/auth/orgs?token=${Cookies.get('token')}`
)
.then((response) => {

28
client/src/components/orgs/OrgDashboard.jsx
View file

@ -42,7 +42,7 @@ function OrgDashboard() {
await axios
.get(
`${
process.env.REACT_APP_DOMAIN_ROOT
process.env.REACT_APP_API_ROOT
}/org/${orgID}?token=${Cookies.get('token')}`
)
.then((response) => {
@ -86,7 +86,7 @@ function OrgDashboard() {
async function handleDelete() {
await axios
.delete(`${process.env.REACT_APP_DOMAIN_ROOT}/org/delete`, {
.delete(`${process.env.REACT_APP_API_ROOT}/org/delete`, {
params: {
token: Cookies.get('token'),
orgID,
@ -103,7 +103,7 @@ function OrgDashboard() {
const doomedUserIDs = selection.map((row) => row.id);
await axios.post(
`${process.env.REACT_APP_DOMAIN_ROOT}/org/${orgID}/delete`,
`${process.env.REACT_APP_API_ROOT}/org/${orgID}/delete`,
{
token: Cookies.get('token'),
orgID,
@ -114,7 +114,7 @@ function OrgDashboard() {
async function leaveOrg() {
await axios
.post(`${process.env.REACT_APP_DOMAIN_ROOT}/org/${orgID}/delete`, {
.post(`${process.env.REACT_APP_API_ROOT}/org/${orgID}/delete`, {
token: Cookies.get('token'),
orgID,
})
@ -125,8 +125,26 @@ function OrgDashboard() {
});
}
async function play(id) {
axios
.get(
`${process.env.REACT_APP_DOMAIN_ROOT}/public/audio/${id}.mp3`,
{
responseType: 'blob',
}
)
.then((res) => {
const uploadedFile = new File([res.data], 'userAudio.mp3', {
type: res.data.type,
lastModified: Date.now(),
});
const audioFile = new Audio(URL.createObjectURL(uploadedFile));
audioFile.play();
});
}
return (
<Dashboard rows={rows} setSelection={setSelection}>
<Dashboard rows={rows} setSelection={setSelection} onClick={play}>
<Typography variant='h6'>Organizations/{org.orgName}</Typography>
<Box sx={{ marginTop: '1vh' }}>
<Grid container columns={{ xs: 3, md: 12 }}>

2
client/src/components/orgs/OwnedOrgs.jsx
View file

@ -9,7 +9,7 @@ function JoinedOrgs() {
async function getOrgs(setOrgs) {
axios
.get(
`${process.env.REACT_APP_DOMAIN_ROOT}/auth?token=${Cookies.get(
`${process.env.REACT_APP_API_ROOT}/auth?token=${Cookies.get(
'token'
)}`
)

5
client/src/components/utils/Dashboard.jsx
View file

@ -6,7 +6,7 @@ import { useTheme } from '@mui/material/styles';
import { DataGrid } from '@mui/x-data-grid';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
function Dashboard({ children, rows, setSelection }) {
function Dashboard({ children, rows, setSelection, onClick }) {
const theme = useTheme();
const columns = [
@ -19,13 +19,14 @@ function Dashboard({ children, rows, setSelection }) {
headerName: 'Pronounciation',
flex: 2,
sortable: false,
renderCell: () => (
renderCell: (params) => (
<IconButton
size='large'
edge='start'
color='inherit'
aria-label='menu'
sx={{ mr: 2 }}
onClick={() => onClick(params.id)}
>
<PlayArrowIcon />
</IconButton>

134
client/src/components/utils/RecordMp3.jsx Normal file
View file

@ -0,0 +1,134 @@
import React, { useState, useEffect } from 'react';
import MicRecorder from 'mic-recorder-to-mp3';
import axios from 'axios';
import Cookies from 'js-cookie';
import { IconButton } from '@mui/material';
import PlayArrow from '@mui/icons-material/PlayArrow';
import Mic from '@mui/icons-material/Mic';
import Upload from '@mui/icons-material/Upload';
import SaveAs from '@mui/icons-material/SaveAs';
function RecordMp3() {
const [recorder] = useState(
new MicRecorder({
bitRate: 128,
})
);
const [recording, setRecording] = useState(false);
const [uploadedFile, setUploadedFile] = useState(null);
const [audio, setAudio] = useState(null);
useEffect(() => {
axios
.get(
`${
process.env.REACT_APP_DOMAIN_ROOT
}/public/audio/${Cookies.get('token')}.mp3`,
{
responseType: 'blob',
}
)
.then((res) => {
setUploadedFile(() => {
return new File([res.data], 'userAudio.mp3', {
type: res.data.type,
lastModified: Date.now(),
});
});
});
}, []);
function togglePlay() {
console.log(uploadedFile);
if (audio && !audio.ended) {
audio.pause();
audio.currentTime = 0;
setAudio(() => null);
} else {
const audioFile = new Audio(URL.createObjectURL(uploadedFile));
setAudio(() => audioFile);
audioFile.play();
}
}
async function record() {
if (recording) {
console.log('Stopped Recording');
recorder
.stop()
.getMp3()
.then(([buffer, blob]) => {
setRecording(() => false);
setUploadedFile(() => {
return new File(buffer, 'userAudio.mp3', {
type: blob.type,
lastModified: Date.now(),
});
});
});
} else {
recorder
.start()
.then(() => {
setRecording(() => true);
})
.catch((e) => {
console.error(e);
});
}
}
function uploadRecord() {
setUploadedFile(() => {
return document.getElementById('icon-button-file').files[0];
});
}
async function handleSubmit(e) {
e.preventDefault();
var formData = new FormData();
formData.append('audioFile', uploadedFile, 'userAudio.mp3');
formData.append('token', Cookies.get('token'));
await axios.post(
`${process.env.REACT_APP_API_ROOT}/auth/audio`,
formData,
{
headers: {
'Content-Type': 'multipart/form-data',
},
}
);
}
return (
<form onSubmit={handleSubmit}>
<IconButton onClick={togglePlay}>
<PlayArrow />
</IconButton>
<IconButton onClick={record}>
<Mic />
</IconButton>
<input
id='icon-button-file'
type='file'
accept='audio/*'
hidden
onChange={uploadRecord}
/>
<label htmlFor='icon-button-file'>
<IconButton component='span'>
<Upload />
</IconButton>
</label>
<IconButton type='submit'>
<SaveAs />
</IconButton>
</form>
);
}
export default RecordMp3;