amass/newsmy_recorder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.实现短信登录

Browse Source
This commit is contained in:
amass 2023-06-15 19:41:31 +08:00
parent b98c1b9ed8
commit 1030f285dc
8 changed files with 95 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/LoginPage.js
View File

@ -33,10 +33,12 @@ const theme = createTheme({
export default function () {
const navigate = useNavigate();
const dispatch = useDispatch();
const [cookies, setCookie] = useCookies(['accessToken']);
const [value, setValue] = useState("1");
const account = useSelector(state => state.user.account)
const password = useSelector(state => state.user.password)
const verificationCode = useSelector(state => state.user.verificationCode)
const handleChange = (event, newValue) => {
setValue(newValue);
@ -46,19 +48,20 @@ export default function () {
const flushToken = useSelector(state => state.user.flushToken)
const udid = useSelector(state => state.user.udid)
const dispatch = useDispatch()
const debug_test = () => {
console.log("accessToken", accessToken);
}
const handleSubmit = (event) => {
event.preventDefault();
console.log(`account: ${account}\nPassword: ${password} udid: ${udid}`);
console.log(`account: ${account}\nPassword: ${password} udid: ${udid}`, value);
yzs.login(udid, account, password).then(token => {
let result = null;
if (value === "1") {
result = yzs.dynamic_code_login(udid, account, verificationCode);
} else if (value === "2") {
result = yzs.login(udid, account, password);
}
result.then(token => {
dispatch(setFlushToken(token));
yzs.get_access_token(udid, token).then(token => {
// yzs.update_access_token(ip.payload, token);
@ -73,8 +76,6 @@ export default function () {
});
})
});
};
return (
@ -102,9 +103,7 @@ export default function () {
>
<TabContext value={value}>
<Box>
<TabList
aria-label="basic tabs example" value={value} onChange={handleChange} >
<Tab label="手机动态码登录" value="1" />
<Tab label="账号密码登录" value="2" />
@ -112,7 +111,7 @@ export default function () {
</Box>
<TabPanel value="1" >
<DynamicCodeForm />
<DynamicCodeForm udid={udid} />
</TabPanel>
<TabPanel value="2" >
<PasswordForm />

7
src/PlayerBar.js
View File

@ -61,6 +61,10 @@ export default function ({ currentTime }) {
player.current.currentTime = second;
}
const onChange = (event) => {
player.current.playbackRate = event.target.value;
};
return <Stack sx={{
position: "sticky",
top: 48,
@ -82,13 +86,14 @@ export default function ({ currentTime }) {
<img src={pause ? pauseIcon : playIcon} />
</IconButton>
<audio autoPlay ref={player} src={currentBlob} onDurationChange={onDurationChange} onTimeUpdate={onTimeUpdate} />
<audio ref={player} src={currentBlob} onDurationChange={onDurationChange} onTimeUpdate={onTimeUpdate} />
<ProgressBar width={isNaN(canvasWidth) ? 0 : canvasWidth} duration={Math.ceil(duration * 1000)}
currentTime={currentTime} playing={!pause} seek={seekRecord}
waveData={currentWaveData}
/>
<Select
defaultValue={1.0}
onChange={onChange}
sx={{
flexGrow: 1,
width: 90

4
src/RecordList.js
View File

@ -23,7 +23,7 @@ export default function () {
yzs.download(accessToken, recordList.at(index).transResultUrl).then(
blob => blob.text()
).then(text => {
console.log(text);
console.log("type", recordList.at(index).type, text);
let payload = recordList.at(index).type === 1 ? JSON.parse(text) : text;
dispatch(setCurrentLyric(payload));
});
@ -35,13 +35,11 @@ export default function () {
context.decodeAudioData(arrayBuffer).then(audioBuffer => {
let interval = audioBuffer.sampleRate / 1000 * 100;
let waveData = audioBuffer.getChannelData(0);
let wave = [];
let amplitude = 0;
for (let i = 0; i < waveData.length; i++) {
amplitude += Math.abs(waveData[i]);
if (i % interval == 0) {
console.log(amplitude / interval)
wave.push(Math.floor(amplitude * 500 / interval));
amplitude = 0;
}

2
src/RecordLyrics.js
View File

@ -23,6 +23,6 @@ export default function ({ currentTime }) {
return <div className={styles.lyricItem}>
<Typography align="left" color={isHighlight(currentTime, lyric) ? "red" : "black"}>{lyric.text}</Typography>
</div>
}) : <React.Fragment />) : <div> {typeof currentLyric === "string" ? currentLyric : ""}</div>}
}) : <React.Fragment />) : <div style={{ whiteSpace: "pre-wrap" }}>{typeof currentLyric === "string" ? currentLyric : ""}</div>}
</Paper>
}

45
src/business/request.js
View File

@ -170,7 +170,7 @@ const yzs = {
let body = {};
body.subsystemId = 16;
body.clientId = udid;
body.timestamp = parseInt(new Date().getTime() / 1000);
body.timestamp = Math.round(new Date().getTime() / 1000);
body.account = account;
body.password = md5(password);
@ -188,6 +188,49 @@ const yzs = {
}).catch(error => {
console.log(error);
});
},
dynamic_code_login: function (udid, userCell, phoneCode) {
let body = {};
body.subsystemId = 16;
body.clientId = udid;
body.timestamp = Math.round(new Date().getTime() / 1000);
body.userCell = userCell;
body.phoneCode = phoneCode;
return fetch(`${accessServer}/rest/v2/phone/login`, {
method: "POST",
body: constructParameter(body),
// mode: "no-cors",
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
"Access-Control-Allow-Origin": "*",
},
}).then(response => response.json()).then((json) => {
console.log("flushToken: ", json.result.flushToken);
return json.result.flushToken;
}).catch(error => {
console.log(error);
});
},
send_phone_code: function (udid, userCell) {
let body = {};
body.subsystemId = 16;
body.clientId = udid;
body.timestamp = Math.round(new Date().getTime() / 1000);
body.userCell = userCell;
return fetch(`${accessServer}/rest/v2/phone/send_phone_code`, {
method: "POST",
body: constructParameter(body),
// mode: "no-cors",
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
"Access-Control-Allow-Origin": "*",
},
}).then(response => response.json()).then((json) => {
console.log("send_phone_code: ", json);
return json;
}).catch(error => {
console.log(error);
});
}
};

33
src/components/DynamicCodeForm.js
View File

@ -1,13 +1,17 @@
import { Container, TextField, InputAdornment, Link, Button, Stack, Typography } from "@mui/material";
import { CheckBox } from '@mui/icons-material';
import React, { useState } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone';
import LockIcon from '@mui/icons-material/Lock';
import { useSelector, useDispatch } from 'react-redux'
import { setAccount, setVerificationCode } from "../business/userSlice.js"
import yzs from "../business/request.js";
export default function () {
export default function ({ udid }) {
const dispatch = useDispatch();
const code = useRef(null);
const [seconds, setSeconds] = useState(0); // 倒计时
const account = useSelector(state => state.user.account)
const verificationCode = useSelector(state => state.user.verificationCode)
@ -17,13 +21,32 @@ export default function () {
if (name === 'password') dispatch(setVerificationCode(value));
};
useEffect(() => {
const timer = window.setInterval(() => {
if (seconds > 0) {
setSeconds(seconds - 1);
} else {
code.current.disabled = false;
}
}, 1000);
return () => {
window.clearInterval(timer);
};
}, [seconds]);
const onClick = (event) => {
event.preventDefault();
code.current.disabled = true;
yzs.send_phone_code(udid, account)
setSeconds(60);
};
return <Container disableGutters={true}
sx={{
width: 300,
height: 200,
}}
>
<TextField
name="username"
label="请输入手机号码"
@ -58,7 +81,9 @@ export default function () {
),
endAdornment: <InputAdornment position="end">
<Link>发送动态码</Link>
<Link ref={code}
color={seconds > 0 ? "#FFB3B3" : "red"}
component="button" underline="none" onClick={onClick}>{seconds > 0 ? `重新发送(${seconds})` : "发送动态码"}</Link>
</InputAdornment>
}}
/>

10
src/components/ProgressBar.js
View File

@ -106,13 +106,9 @@ export default function ({ width, duration, currentTime, playing, seek, waveData
const onMouseUp = (event) => {
setMouseDown(false);
console.log("onMouseUp");
// onMouseLeave(event);
seek(scrollLeft * interval / (pointWidth + pointMargin) / 1000);
}
const onMouseMove = (event) => {
event.preventDefault();
if (!mouseDown) return;
@ -122,8 +118,7 @@ export default function ({ width, duration, currentTime, playing, seek, waveData
}
const onScroll = () => {
setScrollLeft(container.current.scrollLeft);
// console.log("onScroll", container.current.scrollLeft, duration);
setScrollLeft(Math.round(container.current.scrollLeft));
};
const paintWaveform = useCallback(() => {
paintCanvas({
@ -144,9 +139,8 @@ export default function ({ width, duration, currentTime, playing, seek, waveData
}, [canvas, width, duration, scrollLeft, waveData])
useEffect(() => {
console.log("mouseDown", mouseDown);
if (!mouseDown)
container.current.scrollLeft = currentTime * 1000 / interval * (pointWidth + pointMargin);
container.current.scrollLeft = Math.round(currentTime * 1000 / interval * (pointWidth + pointMargin));
}, [currentTime]);
return <div ref={container}

2
src/setupProxy.js
View File

@ -37,7 +37,7 @@ module.exports = function (app) {
changeOrigin: true,
logger: console,
onProxyReq: (proxyReq, req, res) => {
proxyReq.setHeader('appKey', 'k5hfiei5eevouvjohkapjaudpk2gakpaxha22fiy');
proxyReq.setHeader('appKey', appKey);
},
})
);