对接上获取歌词接口。

This commit is contained in:
luocai 2023-06-08 19:30:31 +08:00
parent 6e11f7155c
commit 3deb8c058e
12 changed files with 218 additions and 205 deletions

View File

@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

View File

@ -1,11 +1,44 @@
import './App.css';
import { Routes, Route, Navigate } from 'react-router-dom'
import { useEffect } from 'react';
import { Routes, Route, Navigate, useNavigate } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { setUdid, setAccessToken, setUserInfo, setSelectInfo } from "./business/userSlice.js"
import { useCookies } from 'react-cookie';
import LoginPage from './LoginPage';
import MainPage from './MainPage';
import yzs from "./business/request.js";
function App() {
const [cookies] = useCookies(['accessToken']);
const dispatch = useDispatch();
const navigate = useNavigate();
const [cookies, setCookie, removeCookie] = useCookies(['accessToken']);
const udid = useSelector(state => state.user.udid)
const getIp = async () => {
const response = await fetch("https://ipapi.co/json/")
const data = await response.json()
dispatch(setUdid(data.ip));
}
// Run `getIP` function above just once when the page is rendered
useEffect(() => {
getIp()
}, [])
if (cookies.accessToken) {
dispatch(setAccessToken(cookies.accessToken));
yzs.get_user_info(udid, cookies.accessToken).then(info => {
dispatch(setUserInfo(info));
yzs.user_select(udid, cookies.accessToken).then(info => {
dispatch(setSelectInfo(info));
});
}).catch(error => {
console.log(error)
if (error.returnCode === "uc_0106") {
removeCookie("accessToken");
navigate("/login");
}
});
}
return (
<div className="App">
<Routes>

View File

@ -1,4 +1,5 @@
import React from 'react';
import { useSelector, useDispatch } from 'react-redux'
import AppBar from '@mui/material/AppBar';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
@ -7,14 +8,18 @@ import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import IconButton from '@mui/material/IconButton';
import Toolbar from '@mui/material/Toolbar';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import AdbIcon from '@mui/icons-material/Adb';
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
import logo from './assets/logo.png';
import styles from './AppBar.module.css';
import { Stack, CssBaseline } from '@mui/material';
import { useCookies } from 'react-cookie';
import { useNavigate } from "react-router-dom";
export default function () {
const avatarUrl = useSelector(state => state.user.avatarUrl);
const nickName = useSelector(state => state.user.nickName);
const [cookies, setCookie, removeCookie] = useCookies(['accessToken']);
const navigate = useNavigate();
const [anchorElUser, setAnchorElUser] = React.useState(null);
const handleOpenUserMenu = (event) => {
setAnchorElUser(event.currentTarget);
@ -23,18 +28,29 @@ export default function () {
setAnchorElUser(null);
};
const onLogout = () => {
removeCookie("accessToken");
handleCloseUserMenu();
navigate("/login");
}
return <AppBar sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} position="sticky">
<Container maxWidth="xl">
<Toolbar disableGutters>
<AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
<Typography sx={{ flexGrow: 4 }}></Typography>
<Box sx={{ flexGrow: 1 }}>
<Tooltip title="Open settings">
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
</IconButton>
</Tooltip>
return <AppBar sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} position="sticky" color='black'>
<CssBaseline />
<Container maxWidth={false} >
<Toolbar disableGutters variant="dense">
<Stack direction="row" sx={{ flexGrow: 1 }}>
<img className={styles.titleIcon} src={logo} />
<Typography variant='h6' sx={{ color: "#FFFFFF" }}>纽曼AI语记</Typography>
</Stack>
<Box sx={{
display: "flex",
alignItems: "center",
}} >
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<Avatar alt={nickName} src={avatarUrl} />
</IconButton>
<Typography sx={{ color: "#FFFFFF", paddingLeft: 2 }}>{nickName}</Typography>
<Menu
sx={{ mt: '45px' }}
id="menu-appbar"
@ -51,11 +67,10 @@ export default function () {
open={Boolean(anchorElUser)}
onClose={handleCloseUserMenu}
>
{settings.map((setting) => (
<MenuItem key={setting} onClick={handleCloseUserMenu}>
<Typography textAlign="center">{setting}</Typography>
</MenuItem>
))}
<MenuItem onClick={onLogout}>
<Typography textAlign="center">退出</Typography>
</MenuItem>
</Menu>
</Box>
</Toolbar>

5
src/AppBar.module.css Normal file
View File

@ -0,0 +1,5 @@
.titleIcon {
width: 28px;
height: 30px;
margin-right: 24px;
}

View File

@ -1,11 +1,11 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import Button from '@mui/material/Button';
import yzs from "./business/request.js";
import styles from './LoginPage.module.css';
import { useSelector, useDispatch } from 'react-redux'
import { setUdid, setFlushToken, setAccessToken, setUserInfo } from "./business/userSlice.js"
import { setList } from "./business/recorderSlice.js"
import logo from './assets/logo.png'; // Tell webpack this JS file uses this image
import logo from './assets/logo.png';
import { Container, Tab, Box } from '@mui/material';
import TabPanel from '@mui/lab/TabPanel';
import { TabList } from '@mui/lab';
@ -32,6 +32,7 @@ const theme = createTheme({
});
export default function () {
const navigate = useNavigate();
const [cookies, setCookie] = useCookies(['accessToken']);
const [value, setValue] = useState("1");
const account = useSelector(state => state.user.account)
@ -48,18 +49,6 @@ export default function () {
const dispatch = useDispatch()
const getIp = async () => {
// Connect ipapi.co with fetch()
const response = await fetch("https://ipapi.co/json/")
const data = await response.json()
// Set the IP address to the constant `ip`
dispatch(setUdid(data.ip));
}
// Run `getIP` function above just once when the page is rendered
useEffect(() => {
getIp()
}, [])
const debug_test = () => {
@ -77,11 +66,8 @@ export default function () {
setCookie("accessToken", token)
yzs.get_user_info(udid, token).then(info => {
dispatch(setUserInfo(info));
let passportId = info.passportId;
yzs.user_select(udid, token).then(info => {
yzs.get_record_list(token, passportId).then(list => {
dispatch(setList(list.result));
});
navigate("/");
})
});

View File

@ -1,26 +1,60 @@
import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux'
import AppBar from './AppBar';
import RecordList from './RecordList';
import PlayerBar from './PlayerBar';
import styles from './MainPage.module.css';
import yzs from "./business/request.js";
import { setList } from "./business/recorderSlice.js"
import { CssBaseline, Box, Container, Typography } from '@mui/material';
import RecordLyrics from './RecordLyrics';
import { createTheme, ThemeProvider } from '@mui/material/styles';
const theme = createTheme({
status: {
danger: '#e53e3e',
},
palette: {
primary: {
main: '#FF595A',
darker: '#FF595A',
},
neutral: {
main: '#64748B',
contrastText: '#fff',
},
black: {
main: "#222222",
}
},
});
export default function () {
const dispatch = useDispatch()
const accessToken = useSelector(state => state.user.accessToken);
const passportId = useSelector(state => state.user.passportId);
useEffect(() => {
yzs.get_record_list(accessToken, passportId).then(list => {
dispatch(setList(list.result));
});
}, [accessToken, passportId]);
return <div>
<CssBaseline />
<AppBar />
<RecordList />
<Box
component="main"
sx={{
width: `calc(100% - 240px)`, ml: `240px`
}}
>
<Typography>2022-12-13 14:39_同传翻译</Typography>
<PlayerBar />
<RecordLyrics />
</Box>
<ThemeProvider theme={theme}>
<CssBaseline />
<AppBar />
<RecordList />
<Box
component="main"
sx={{
width: `calc(100% - 240px)`, ml: `240px`
}}
>
<Typography>2022-12-13 14:39_同传翻译</Typography>
<PlayerBar />
<RecordLyrics />
</Box>
</ThemeProvider>
</div >
}

View File

@ -1,46 +1,32 @@
import React from 'react';
import { useSelector, useDispatch } from 'react-redux'
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Toolbar from '@mui/material/Toolbar';
import { CssBaseline } from '@mui/material';
import { setCurrentIndex, setCurrentLyric } from "./business/recorderSlice.js"
import yzs from "./business/request.js";
const drawerWidth = 240;
const recordList = [
{
title: "2022-12-14 14:39_同传翻译",
time: "2022-12-14 14:39",
content: "当面对重重困难,你感觉举步维艰的时候,回想你以前是如何坚持到底战胜困难的最后时刻的。这样,你就会发现你有能力克服每个障碍。"
},
{
title: "2022-12-14 14:39_同传翻译",
time: "2022-12-14 14:39",
content: "当面对重重困难,你感觉举步维艰的时候,回想你以前是如何坚持到底战胜困难的最后时刻的。这样,你就会发现你有能力克服每个障碍。"
},
{
title: "2022-12-14 14:39_同传翻译",
time: "2022-12-14 14:39",
content: "当面对重重困难,你感觉举步维艰的时候,回想你以前是如何坚持到底战胜困难的最后时刻的。这样,你就会发现你有能力克服每个障碍。"
},
{
title: "2022-12-14 14:39_同传翻译",
time: "2022-12-14 14:39",
content: "当面对重重困难,你感觉举步维艰的时候,回想你以前是如何坚持到底战胜困难的最后时刻的。这样,你就会发现你有能力克服每个障碍。"
},
{
title: "2022-12-14 14:39_同传翻译",
time: "2022-12-14 14:39",
content: "当面对重重困难,你感觉举步维艰的时候,回想你以前是如何坚持到底战胜困难的最后时刻的。这样,你就会发现你有能力克服每个障碍。"
},
];
export default function () {
const dispatch = useDispatch();
const accessToken = useSelector(state => state.user.accessToken);
const currentIndex = useSelector(state => state.recorder.currentIndex);
const recordList = useSelector(state => state.recorder.list);
const onSelected = (event, index) => {
console.log("onSelected", index, recordList.at(index).transResultUrl)
yzs.download(accessToken, recordList.at(index).transResultUrl).then(
blob => blob.text()
).then(text => {
console.log(text);
dispatch(setCurrentLyric(JSON.parse(text)));
});
dispatch(setCurrentIndex(index));
}
return <Drawer
variant="permanent"
sx={{
@ -52,13 +38,13 @@ export default function () {
<Toolbar />
<Box sx={{ overflow: 'auto' }}>
<List>
{recordList.map((item, index) => (
{recordList === undefined ? <React.Fragment /> : recordList.map((item, index) => (
<ListItem key={index} disablePadding>
<ListItemButton>
<ListItemText primary={item.title} secondary={
<ListItemButton selected={currentIndex === index} onClick={(event) => onSelected(event, index)}>
<ListItemText primary={item.editName} secondary={
<React.Fragment>
<div>{item.content}</div>
<div>更新于 {item.time}</div>
<div>{item.content.slice(0, 50) + '......'}</div>
<div>更新于 {new Date(item.createTime).toLocaleString()}</div>
</React.Fragment>
} />
</ListItemButton>

View File

@ -1,64 +1,16 @@
import { Typography } from "@mui/material";
import styles from './RecordLyrics.module.css';
import { useSelector, useDispatch } from 'react-redux'
const lyrics = [
{
original: "当你身陷困境的时候(你有时会),回想你生命中快乐和幸福的时刻。回想它是如何使你快乐,你便有了走出困境的勇气。",
translation: "When times become difficult (and you know they sometimes will), remember a moment in your life that was filled with joy and happiness. Remember how it made you feel, and you will have the strength you need to get through any trial.",
},
{
original: "当面对重重困难,你感觉举步维艰的时候,回想你以前是如何坚持到底战胜困难的最后时刻的。这样,你就会发现你有能力克服每个障碍。",
translation: "When life throws you one more obstacle than you think you can handle, remember something you achieved through perseverance and by struggling to the end. In doing so, you'll find you have the ability to overcome each obstacle brought your way.",
},
{
original: "当你觉得精疲力尽的时候,暂时离开,让自己稍作休息。",
translation: "When you find yourself drained and depleted of energy, remember to find a place of sanctuary and rest.",
},
{
original: "当你身陷困境的时候(你有时会),回想你生命中快乐和幸福的时刻。回想它是如何使你快乐,你便有了走出困境的勇气。",
translation: "When times become difficult (and you know they sometimes will), remember a moment in your life that was filled with joy and happiness. Remember how it made you feel, and you will have the strength you need to get through any trial.",
},
{
original: "当面对重重困难,你感觉举步维艰的时候,回想你以前是如何坚持到底战胜困难的最后时刻的。这样,你就会发现你有能力克服每个障碍。",
translation: "When life throws you one more obstacle than you think you can handle, remember something you achieved through perseverance and by struggling to the end. In doing so, you'll find you have the ability to overcome each obstacle brought your way.",
},
{
original: "当你觉得精疲力尽的时候,暂时离开,让自己稍作休息。",
translation: "When you find yourself drained and depleted of energy, remember to find a place of sanctuary and rest.",
},
{
original: "当你身陷困境的时候(你有时会),回想你生命中快乐和幸福的时刻。回想它是如何使你快乐,你便有了走出困境的勇气。",
translation: "When times become difficult (and you know they sometimes will), remember a moment in your life that was filled with joy and happiness. Remember how it made you feel, and you will have the strength you need to get through any trial.",
},
{
original: "当面对重重困难,你感觉举步维艰的时候,回想你以前是如何坚持到底战胜困难的最后时刻的。这样,你就会发现你有能力克服每个障碍。",
translation: "When life throws you one more obstacle than you think you can handle, remember something you achieved through perseverance and by struggling to the end. In doing so, you'll find you have the ability to overcome each obstacle brought your way.",
},
{
original: "当你觉得精疲力尽的时候,暂时离开,让自己稍作休息。",
translation: "When you find yourself drained and depleted of energy, remember to find a place of sanctuary and rest.",
},
{
original: "当你身陷困境的时候(你有时会),回想你生命中快乐和幸福的时刻。回想它是如何使你快乐,你便有了走出困境的勇气。",
translation: "When times become difficult (and you know they sometimes will), remember a moment in your life that was filled with joy and happiness. Remember how it made you feel, and you will have the strength you need to get through any trial.",
},
{
original: "当面对重重困难,你感觉举步维艰的时候,回想你以前是如何坚持到底战胜困难的最后时刻的。这样,你就会发现你有能力克服每个障碍。",
translation: "When life throws you one more obstacle than you think you can handle, remember something you achieved through perseverance and by struggling to the end. In doing so, you'll find you have the ability to overcome each obstacle brought your way.",
},
{
original: "当你觉得精疲力尽的时候,暂时离开,让自己稍作休息。",
translation: "When you find yourself drained and depleted of energy, remember to find a place of sanctuary and rest.",
},
];
export default function () {
const currentLyric = useSelector(state => state.recorder.currentLyric);
return <div className={styles.lyricsBrowser}>
{lyrics.map((lyric, index) => {
{currentLyric.map((lyric, index) => {
return <div className={styles.lyricItem}>
<Typography align="left">{lyric.original}</Typography>
<Typography align="left">{lyric.text}</Typography>
<Typography align="left">{lyric.translation}</Typography>
</div>
})}

View File

@ -1,18 +1,26 @@
import { createSlice } from '@reduxjs/toolkit'
export const recorderSlice = createSlice({
name: 'user',
name: 'recorder',
initialState: {
list: [],
currentIndex: 0,
currentLyric: [],
},
reducers: {
setList: (state, action) => {
state.list = action.payload;
},
setCurrentIndex: (state, action) => {
state.currentIndex = action.payload;
},
setCurrentLyric: (state, action) => {
state.currentLyric = action.payload;
}
}
})
// Action creators are generated for each case reducer function
export const { setList } = recorderSlice.actions
export const { setCurrentIndex, setList, setCurrentLyric } = recorderSlice.actions
export default recorderSlice.reducer

View File

@ -1,3 +1,5 @@
import { json } from 'react-router-dom';
const appKey = "k5hfiei5eevouvjohkapjaudpk2gakpaxha22fiy";
const appSecret = "e65ffb25148b08207088148d5bce114d";
@ -83,9 +85,8 @@ const yzs = {
},
}).then(response => response.json()).then((json) => {
console.log(json);
if (json.returnCode != "uc_0000") throw json;
return json.result;
}).catch(error => {
console.log(error);
});
},
user_select: function (ip, accessToken) {
@ -104,12 +105,9 @@ const yzs = {
'timestamp': timestamp,
'signature': sig,
},
}).then(response => {
console.log(response);
response.text()
}).then((json) => {
}).then(response => response.json()).then((json) => {
console.log(json)
return json;
return json.result;
});
},
@ -117,7 +115,7 @@ const yzs = {
let sha256 = require('sha256');
let timestamp = new Date().getTime();
let sig = appKey + timestamp.toString() + appSecret;
sig = sha256(sig).toUpperCase();;
sig = sha256(sig).toUpperCase();
let url = `/api/app/app-voice-recorder/rest/v1/trans/info/list?accessToken=${encodeURIComponent(accessToken)}&passportId=${passportId}`;
@ -129,12 +127,33 @@ const yzs = {
'timestamp': timestamp,
'signature': sig,
},
}).then(response => response.json()
).then((json) => {
}).then(response => response.json()).then((json) => {
console.log(json)
return json;
});
},
download: function (accessToken, url) {
let sha256 = require('sha256');
let timestamp = new Date().getTime();
let sig = appKey + timestamp.toString() + appSecret;
sig = sha256(sig).toUpperCase();
let body = {
url: url,
accessToken: accessToken,
};
return fetch("/api/app/app-voice-recorder/rest/v1/trans/info/download", {
method: "POST",
headers: {
'appKey': appKey,
'timestamp': timestamp,
'signature': sig,
'Content-Type': 'application/json; charset=utf-8',
},
body: JSON.stringify(body),
}).then(response => response.blob());
},
login: function (udid, account, password) {
let md5 = require('md5');

View File

@ -9,6 +9,8 @@ export const userSlice = createSlice({
passportId: 0,
createTime: "",
userName: "",
nickName: "",
avatarUrl: "",
agreeAgreement: true,
account: "13682423271",
password: "yzs123456",
@ -19,19 +21,19 @@ export const userSlice = createSlice({
state.udid = action.payload;
},
setFlushToken: (state, token) => {
// Redux Toolkit allows us to write "mutating" logic in reducers. It
// doesn't actually mutate the state because it uses the Immer library,
// which detects changes to a "draft state" and produces a brand new
// immutable state based off those changes
state.flushToken = token.payload;
},
setAccessToken: (state, token) => {
state.accessToken = token.payload;
},
setUserInfo: (state, info) => {
state.passportId = info.payload.passportId
state.createTime = info.payload.createTime
state.userName = info.payload.userName
setUserInfo: (state, action) => {
state.passportId = action.payload.passportId
state.createTime = action.payload.createTime
state.userName = action.payload.userName
},
setSelectInfo: (state, action) => {
state.nickName = action.payload.nickName;
state.avatarUrl = action.payload.avatarUrl;
},
setAccount: (state, action) => {
state.account = action.payload;
@ -46,6 +48,6 @@ export const userSlice = createSlice({
})
// Action creators are generated for each case reducer function
export const { setUdid, setFlushToken, setAccessToken, setUserInfo, setAccount, setPassword, setVerificationCode } = userSlice.actions
export const { setUdid, setFlushToken, setAccessToken, setUserInfo, setSelectInfo, setAccount, setPassword, setVerificationCode } = userSlice.actions
export default userSlice.reducer

View File

@ -24,4 +24,15 @@ module.exports = function (app) {
},
})
);
app.use(
'/api/app/app-voice-recorder/rest/v1/trans/info/download',
createProxyMiddleware({
target: 'http://ai-api.uat.hivoice.cn',
changeOrigin: true,
logger: console,
onProxyReq: (proxyReq, req, res) => {
proxyReq.setHeader('appKey', 'k5hfiei5eevouvjohkapjaudpk2gakpaxha22fiy');
},
})
);
};