Skip to content

L
lab-learnvideo-web
Commit 0c0f4aa0 authored by yangyutan's avatar yangyutan
Browse files
Options

feat:add the function of calling interfaces

parent dc87e256
Show whitespace changes
Inline Side-by-side
Showing with 372 additions and 65 deletions
package-lock.json
View file @ 0c0f4aa0
{
"name": "lab-tapvideo-web",
"name": "lab-learnvideo-web",
"version": "0.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "lab-tapvideo-web",
"name": "lab-learnvideo-web",
"version": "0.0.0",
"dependencies": {
"antd": "^5.15.3",
"axios": "^1.6.8",
"mitt": "^3.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
......@@ -1690,6 +1691,11 @@
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
"integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/available-typed-arrays": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
......@@ -1705,6 +1711,16 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/axios": {
"version": "1.6.8",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
"integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
......@@ -1835,6 +1851,17 @@
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
"dev": true
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/compute-scroll-into-view": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
......@@ -1992,6 +2019,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/doctrine": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
......@@ -2603,6 +2638,25 @@
"integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
"dev": true
},
"node_modules/follow-redirects": {
"version": "1.15.6",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/for-each": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
......@@ -2612,6 +2666,19 @@
"is-callable": "^1.1.3"
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
......@@ -3439,6 +3506,25 @@
"yallist": "^3.0.2"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
......@@ -3763,6 +3849,11 @@
"react-is": "^16.13.1"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
......
package.json
View file @ 0c0f4aa0
{
"name": "lab-tapvideo-web",
"name": "lab-learnvideo-web",
"private": true,
"version": "0.0.0",
"type": "module",
......@@ -11,6 +11,7 @@
},
"dependencies": {
"antd": "^5.15.3",
"axios": "^1.6.8",
"mitt": "^3.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
......
src/pages/preview/components/videoBox/index.jsx
View file @ 0c0f4aa0
......@@ -19,22 +19,97 @@ const VideoBox = (props) => {
return (
<div
style={{
width: 200,
width: 440,
height: 330,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor: '#E4E4E4',
padding: 0,
margin: 0,
borderRadius: 10,
overflow: 'hidden'
}}>
<div
style={{
width: '42%',
height: '100%',
overflow: 'hidden',
backgroundColor: 'orange'
}}>
<video
controls
height="100%"
style={{
cursor: 'pointer',
overflow: 'hidden'
}}>
<video controls width="100%">
<source src={props.src} type="video/mp4" />
<source src={props.videoData.url} type="video/mp4" />
</video>
</div>
<div
style={{
flex: 1,
width: '58%',
height: '100%',
padding: 10,
backgroundColor: '#fff',
display: 'flex',
flexDirection: 'column'
}}>
<div
style={{
flex: 1,
height: '50%',
marginBottom: 16
// backgroundColor: 'skyblue'
}}>
<div
style={{
height: '18%',
fontSize: 18,
fontWeight: 'bold',
borderBottom: '1px solid #000'
}}>
Target user group：
</div>
<div
style={{
height: '82%',
fontSize: 15,
overflowY: 'auto',
lineHeight: '24px'
}}>
{props.videoData.targetAudience}
</div>
</div>
<div
style={{
flex: 1,
height: '50%'
}}>
<div
style={{
width: '100%',
height: '18%',
fontSize: 18,
fontWeight: 'bold',
borderBottom: '1px solid #000'
}}>
Pain points for users：
</div>
<div
style={{
width: '100%',
height: '100%',
fontSize: 15,
overflowY: 'auto'
}}>
{props.videoData.painPoint}
</div>
</div>
</div>
</div>
)
}
......
src/pages/preview/index.jsx
View file @ 0c0f4aa0
import React, { useEffect, useState } from 'react'
import { Layout, Flex } from 'antd'
import { Layout, Flex, message } from 'antd'
import VideoBox from './components/videoBox'
import { useLocation } from 'react-router-dom'
import axios from 'axios'
const { Header, Footer, Content } = Layout
......@@ -14,8 +15,6 @@ const headerStyle = {
}
const contentStyle = {
minHeight: 120,
lineHeight: '120px',
color: '#fff',
backgroundColor: '#0958d9',
display: 'flex',
flexDirection: 'row',
......@@ -40,27 +39,107 @@ const layoutStyle = {
const VideoList = () => {
const { state } = useLocation()
const [videos, setVideos] = useState([])
const [Videos, setVideos] = useState([])
useEffect(() => {
console.log('state is:', state)
if (state.videos.length) {
setVideos(() => state.videos.map((video, index) => <VideoBox src={video.src} key={index} />))
//Call the backend interface to obtain the latest video results
const refreshVideo = async () => {
let res = null
try {
res = await axios.get(`http://10.20.1.10:3100/2403/learnvideo/check?shotDirName=${state.reqData.shotDirName}`)
} catch (err) {
message.error('Connect server failed')
console.error(err)
}
}, [])
return <>{videos}</>
if (res.data.code != 200) {
message.error(`request server failed: ${res.data.code}`)
}
//Always refresh display list
if (res.data.data.length) {
let _Videos = res.data.data.map((video, index) => {
let videoData = {
url: video.url,
targetAudience: video.data.targetAudience,
painPoint: video.data.painPoint
}
return <VideoBox videoData={videoData} key={index} />
})
setVideos(_Videos)
}
let timer = setTimeout(() => {
clearTimeout(timer)
refreshVideo()
}, 4000)
}
useEffect(() => {
console.log('state_is:', state)
refreshVideo()
// let res = {}
// res.data = {
// code: 200,
// data: [
// {
// url: '/test1.mp4',
// data: {
// targetAudience: '1忙碌的上班族和年轻家庭主妇...',
// painPoint: '1工作繁忙，没时间去市场挑选新鲜海鲜...'
// }
// },
// {
// url: '/test.mp4',
// data: {
// targetAudience: '2忙碌的上班族和年轻家庭主妇...',
// painPoint: '2工作繁忙，没时间去市场挑选新鲜海鲜...'
// }
// },
// {
// url: '/test.mp4',
// data: {
// targetAudience: '3忙碌的上班族和年轻家庭主妇...',
// painPoint: '3工作繁忙，没时间去市场挑选新鲜海鲜...'
// }
// }
// ]
// }
// const refreshVideo = () => {
// setTimeout(() => {
// if (res.data.code == 200) {
// let _Videos = res.data.data.map((video, index) => {
// let videoData = {
// url: video.url,
// targetAudience: video.data.targetAudience,
// painPoint: video.data.painPoint
// }
// return <VideoBox videoData={videoData} key={index} />
// })
// setVideos(_Videos)
// res.data.data.push({
// url: '/test.mp4',
// data: {
// targetAudience: '3忙碌的上班族和年轻家庭主妇...',
// painPoint: '3工作繁忙，没时间去市场挑选新鲜海鲜...'
// }
// })
// refreshVideo()
// }
// }, 3000)
// }
// refreshVideo()
}, [])
return <>{Videos}</>
}
const Preview = () => {
return (
<Flex gap="middle" wrap="wrap">
<Layout style={layoutStyle}>
<Header style={headerStyle}>预览数据</Header>
<Header style={headerStyle}>TapVideo</Header>
<Content style={contentStyle}>
<VideoList />
</Content>
<Footer style={footerStyle}>Footer</Footer>
<Footer style={footerStyle}>©Goyoo</Footer>
</Layout>
</Flex>
)
......
src/pages/upload/components/uploadVideo/index.jsx
View file @ 0c0f4aa0
......@@ -9,12 +9,15 @@ const UploadVideo = (props) => {
let lock = false
const opts = {
name: 'file',
accept: '.mp4',
multiple: false,
directory: true,
action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188',
action: 'http://10.20.1.10:3100/2403/learnvideo/upload',
beforeUpload(file) {
console.log('++++++++++')
console.log(file)
if (file.webkitRelativePath.split('/').length != 2) {
console.log('---', file.webkitRelativePath)
return Upload.LIST_IGNORE
}
if (!lock) {
$eventbus.emit('upload_fold_name', {
group: props.group,
......@@ -23,10 +26,17 @@ const UploadVideo = (props) => {
lock = true
}
},
customRequest(config) {
let rand = Math.random() * 1500
let timer = setTimeout(() => {
clearTimeout(timer)
config.onSuccess()
}, rand)
},
onChange(info) {
const { status } = info.file
if (status !== 'uploading') {
console.log(info.file, info.fileList)
// console.log(info.file, info.fileList)
}
if (status === 'done') {
message.success(`${info.file.name} file uploaded successfully.`)
......@@ -35,7 +45,7 @@ const UploadVideo = (props) => {
}
},
onDrop(e) {
console.log('Dropped files', e.dataTransfer.files)
// console.log('Dropped files', e.dataTransfer.files)
}
}
......@@ -51,8 +61,7 @@ const UploadVideo = (props) => {
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">单击或拖动文件夹到此区域进行上传</p>
<p className="ant-upload-hint">支持单次或批量上传。</p>
<p className="ant-upload-text">Click or drag the folder to this area for uploading</p>
</Dragger>
</Card>
)
......
src/pages/upload/index.jsx
View file @ 0c0f4aa0
import React, { useState, useEffect } from 'react'
import { Layout, Flex, Card, Button } from 'antd'
import { Layout, Flex, Card, Button, Form, Input } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import UploadVideo from './components/uploadVideo'
import $eventbus from '../../utils/EventBus.js'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
const { Header, Footer, Content } = Layout
......@@ -34,43 +35,57 @@ const layoutStyle = {
borderRadius: 8,
overflow: 'hidden',
width: 'calc(100% - 8px)',
maxWidth: 'calc(100% - 8px)'
maxWidth: 'calc(100% - 8px)',
minHeight: '100vh'
}
const Upload = () => {
const navigate = useNavigate()
const [loading, setLoading] = useState(false)
const [folds, setFolds] = useState([])
const fetchData = async () => {
setLoading(true)
// const res = await fetch('http://10.20.1.10:port/upload', {
// method: "POST",
// mode: "cors",
// body: JSON.stringify(folds)
// })
// if(res.status == 200) {
// setLoading(false)
// const videos = res.body
// navigate('/preview', { state: { videos } })
// } else {
// console.error('res.status:', res.status)
// }
const [form] = Form.useForm()
setTimeout(() => {
const videos = [
{
src: '/test.mp4'
},
{
src: '/test.mp4'
},
{
src: '/test.mp4'
const submitTask = async () => {
let values = ''
try {
values = await form.validateFields()
console.log('Success:', values)
} catch (errorInfo) {
console.log('Failed:', errorInfo)
return
}
if (!values.productDesc) {
alert('Please input the description of your product')
return
}
let filmFold = folds.find((fold) => fold.group === 0)
let shotFold = folds.find((fold) => fold.group === 1)
if (!filmFold) {
alert('Please upload excellent videos')
return
}
if (!shotFold) {
alert('Please upload project footage')
return
}
]
let reqData = {
filmDirName: filmFold.name,
shotDirName: shotFold.name,
productDesc: values.productDesc,
count: 5
}
console.log(reqData)
setLoading(true)
const res = axios.post('http://10.20.1.10:3100/2403/learnvideo/start', reqData)
let timer = setTimeout(() => {
clearTimeout(timer)
setLoading(false)
navigate('/preview', { state: { videos } })
}, 3000)
navigate('/preview', { state: { reqData } })
}, 2000)
}
useEffect(() => {
......@@ -91,24 +106,61 @@ const Upload = () => {
return (
<Flex gap="middle" wrap="wrap">
<Layout style={layoutStyle}>
<Header style={headerStyle}>上传数据</Header>
<Header style={headerStyle}>TapVideo</Header>
<Content style={contentStyle}>
<UploadVideo title="上传第一组视频：" group={0} />
<UploadVideo title="上传第二组视频：" group={1} />
<Card
<UploadVideo title="Upload excellent videos：" group={0} />
<UploadVideo title="Upload project shots：" group={1} />
{/* <Card
bordered={false}
style={{
display: 'flex',
justifyContent: 'space-around',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
flexBasis: 'max(calc(95%), min(400px, calc(100%)))',
marginTop: 25
}}> */}
{/* <Button type="primary" size="large" icon={<UploadOutlined />} loading={loading} onClick={() => submitTask()}>
点击生成视频
</Button> */}
<Form
// inputFontSizeLG
form={form}
name="wrap"
labelCol={{
flex: '110px'
}}
labelAlign="left"
labelWrap
wrapperCol={{
flex: 1
}}
colon={false}
style={{
display: 'flex',
flexDirection: 'column',
maxWidth: 1600,
width: '50vw',
flexBasis: 'max(calc(95%), min(400px, calc(100%)))',
backgroundColor: '#fff',
borderRadius: 10,
padding: 20
}}>
<Form.Item label="DESCRIPTION：" name="productDesc" inputFontSize={20}>
<Input placeholder="Please input the description of your product" />
</Form.Item>
<Form.Item label=" ">
<Button type="primary" size="large" htmlType="submit" loading={loading} onClick={() => submitTask()} style={{
}}>
<Button type="primary" size="large" icon={<UploadOutlined />} loading={loading} onClick={() => fetchData()}>
上传处理视频
Click to generate
</Button>
</Card>
</Form.Item>
</Form>
{/* </Card> */}
</Content>
<Footer style={footerStyle}>Footer</Footer>
<Footer style={footerStyle}>©Goyoo</Footer>
</Layout>
</Flex>
)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment