Skip to content

L
lab-learnvideo-web
Commit 5801ce16 authored by yangyutan's avatar yangyutan
Browse files
Options

feat: backendData driven preview page

parent 0c0f4aa0
Hide whitespace changes
Inline Side-by-side
Showing with 664 additions and 656 deletions
package.json
View file @ 5801ce16
......@@ -4,7 +4,7 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"dev": "vite --host",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
......
public/test.mp4
View file @ 5801ce16
No preview for this file type
src/commonents/antTest/index.jsx
View file @ 5801ce16
import React from 'react';
import { Button } from 'antd';
const AntTest = () => (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
export default AntTest;
import React from 'react';
import { Button } from 'antd';
const AntTest = () => (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
export default AntTest;
src/commonents/cssAnimation/index.css
View file @ 5801ce16
body {
background-color: rgb(48, 66, 148);
}
#box {
width:300px;
height:300px;
border:1px solid yellow;
}
#boll {
width:50px;
height:50px;
background-color:chartreuse;
animation-name:move,chColor;
animation-duration:2s,2s;
animation-direction:alternate-reverse;
animation-iteration-count:4,1; /*infinite*/
}
@keyframes toGroat {
from {
width:50px;
height: 50px;
}
to {
width:200px;
height:200px;
}
}
@keyframes chColor {
from,to {
background-color:green;
}
25% {
background-color:yellow;
}
50% {
background-color: red;
}
75% {
background-color:blueviolet;
}
}
@keyframes move {
25% {
transform: translateX(250px);
}
50% {
transform: translate(250px,250px);
}
75% {
transform: translateY(250px);
}
body {
background-color: rgb(48, 66, 148);
}
#box {
width:300px;
height:300px;
border:1px solid yellow;
}
#boll {
width:50px;
height:50px;
background-color:chartreuse;
animation-name:move,chColor;
animation-duration:2s,2s;
animation-direction:alternate-reverse;
animation-iteration-count:4,1; /*infinite*/
}
@keyframes toGroat {
from {
width:50px;
height: 50px;
}
to {
width:200px;
height:200px;
}
}
@keyframes chColor {
from,to {
background-color:green;
}
25% {
background-color:yellow;
}
50% {
background-color: red;
}
75% {
background-color:blueviolet;
}
}
@keyframes move {
25% {
transform: translateX(250px);
}
50% {
transform: translate(250px,250px);
}
75% {
transform: translateY(250px);
}
}
\ No newline at end of file
src/commonents/cssAnimation/index.jsx
View file @ 5801ce16
import './index.css'
import { useEffect } from 'react'
function cssAnimation() {
useEffect(() => {
console.log('all')
})
return (
<>
<div className="container">
<p>css animation</p>
<div id="box">
<div id="boll"></div>
</div>
</div>
</>
)
}
export default cssAnimation
import './index.css'
import { useEffect } from 'react'
function cssAnimation() {
useEffect(() => {
console.log('all')
})
return (
<>
<div className="container">
<p>css animation</p>
<div id="box">
<div id="boll"></div>
</div>
</div>
</>
)
}
export default cssAnimation
src/commonents/fabricTest/index.css
View file @ 5801ce16
#canvas-container {
width: 360px;
height: 640px;
background-color: #E4E4E4;
#canvas-container {
width: 360px;
height: 640px;
background-color: #E4E4E4;
}
\ No newline at end of file
src/commonents/fabricTest/index.jsx
View file @ 5801ce16
import './index.css'
import { useEffect } from 'react'
// import { fabric } from 'fabric'
function Fabric() {
// useEffect(() => {
// var canvas =new fabric.Canvas('canvas-container');
// var rect = new fabric.Rect({
// left:100,//距离画布左侧的距离，单位是像素
// top:100,//距离画布上边的距离
// fill:'red',//填充的颜色
// width:30,//方形的宽度
// height:30//方形的高度
// })
// canvas.add(rect)
// })
return (
<>
<div className="container">
<p>画布</p>
<canvas id="canvas-container">3</canvas>
</div>
</>
)
}
export default Fabric
import './index.css'
import { useEffect } from 'react'
// import { fabric } from 'fabric'
function Fabric() {
// useEffect(() => {
// var canvas =new fabric.Canvas('canvas-container');
// var rect = new fabric.Rect({
// left:100,//距离画布左侧的距离，单位是像素
// top:100,//距离画布上边的距离
// fill:'red',//填充的颜色
// width:30,//方形的宽度
// height:30//方形的高度
// })
// canvas.add(rect)
// })
return (
<>
<div className="container">
<p>画布</p>
<canvas id="canvas-container">3</canvas>
</div>
</>
)
}
export default Fabric
src/pages/home/index.jsx
View file @ 5801ce16
import AntTest from '../../commonents/antTest/index.jsx'
let Home = () => {
return <>
<AntTest />
</>
}
import AntTest from '../../commonents/antTest/index.jsx'
let Home = () => {
return <>
<AntTest />
</>
}
export default Home
\ No newline at end of file
src/pages/preview/components/videoBox/index.jsx
View file @ 5801ce16
import { Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
const VideoBox = (props) => {
let spin = (
<Spin
delay={1000}
spinning={false}
indicator={
<LoadingOutlined
style={{
fontSize: 64
}}
spin
/>
}
/>
)
return (
<div
style={{
width: 440,
height: 330,
display: 'flex',
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'
}}>
<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>
)
}
export default VideoBox
import { Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
const VideoBox = (props) => {
let spin = (
<Spin
delay={1000}
spinning={false}
indicator={
<LoadingOutlined
style={{
fontSize: 64
}}
spin
/>
}
/>
)
return (
<div
style={{
width: 440,
height: 330,
display: 'flex',
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'
}}>
<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>
)
}
export default VideoBox
src/pages/preview/index.jsx
View file @ 5801ce16
import React, { useEffect, useState } from 'react'
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
const headerStyle = {
color: '#fff',
height: 64,
paddingInline: 48,
lineHeight: '64px',
backgroundColor: '#4096ff'
}
const contentStyle = {
minHeight: 120,
backgroundColor: '#0958d9',
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'flex-start',
alignItems: 'flex-start',
alignContent: 'flex-start',
padding: 25,
gap: 25
}
const footerStyle = {
color: '#fff',
backgroundColor: '#4096ff'
}
const layoutStyle = {
borderRadius: 8,
overflow: 'hidden',
width: 'calc(100% - 8px)',
maxWidth: 'calc(100% - 8px)',
minHeight: '100vh'
}
const VideoList = () => {
const { state } = useLocation()
const [Videos, setVideos] = useState([])
//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)
}
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}>TapVideo</Header>
<Content style={contentStyle}>
<VideoList />
</Content>
<Footer style={footerStyle}>©Goyoo</Footer>
</Layout>
</Flex>
)
}
export default Preview
import React, { useEffect, useState } from 'react'
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
const headerStyle = {
color: '#fff',
height: 64,
paddingInline: 48,
lineHeight: '64px',
backgroundColor: '#4096ff'
}
const contentStyle = {
minHeight: 120,
backgroundColor: '#0958d9',
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'flex-start',
alignItems: 'flex-start',
alignContent: 'flex-start',
padding: 25,
gap: 25
}
const footerStyle = {
color: '#fff',
backgroundColor: '#4096ff'
}
const layoutStyle = {
borderRadius: 8,
overflow: 'hidden',
width: 'calc(100% - 8px)',
maxWidth: 'calc(100% - 8px)',
minHeight: '100vh'
}
const VideoList = () => {
const { state } = useLocation()
const [Videos, setVideos] = useState([])
//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)
// }
// if (res.data.code != 200) {
// console.log(res.data)
// 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)
// 模拟请求和渲染过程
let res = {}
res.data = {
code: 200,
data: [
{
url: '/test.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}>TapVideo</Header>
<Content style={contentStyle}>
<VideoList />
</Content>
<Footer style={footerStyle}>©Goyoo</Footer>
</Layout>
</Flex>
)
}
export default Preview
src/pages/upload/components/uploadVideo/index.jsx
View file @ 5801ce16
import React from 'react'
import { InboxOutlined } from '@ant-design/icons'
import { message, Upload, Card } from 'antd'
import $eventbus from '../../../../utils/EventBus.js'
const { Dragger } = Upload
const UploadVideo = (props) => {
let lock = false
const opts = {
name: 'file',
accept: '.mp4',
multiple: false,
directory: true,
action: 'http://10.20.1.10:3100/2403/learnvideo/upload',
beforeUpload(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,
name: file.webkitRelativePath.split('/')[0]
})
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)
}
if (status === 'done') {
message.success(`${info.file.name} file uploaded successfully.`)
} else if (status === 'error') {
message.error(`${info.file.name} file upload failed.`)
}
},
onDrop(e) {
// console.log('Dropped files', e.dataTransfer.files)
}
}
return (
<Card
title={props.title}
bordered={false}
style={{
flexBasis: 'max(400px, calc(44%))',
marginTop: 25
}}>
<Dragger {...opts}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">Click or drag the folder to this area for uploading</p>
</Dragger>
</Card>
)
}
export default UploadVideo
import React from 'react'
import { InboxOutlined } from '@ant-design/icons'
import { message, Upload, Card } from 'antd'
import $eventbus from '../../../../utils/EventBus.js'
const { Dragger } = Upload
const UploadVideo = (props) => {
let lock = false
const opts = {
name: 'file',
accept: '.mp4',
multiple: false,
directory: true,
action: 'http://10.20.1.10:3100/2403/learnvideo/upload',
beforeUpload(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,
name: file.webkitRelativePath.split('/')[0]
})
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)
}
if (status === 'done') {
message.success(`${info.file.name} file uploaded successfully.`)
} else if (status === 'error') {
message.error(`${info.file.name} file upload failed.`)
}
},
onDrop(e) {
// console.log('Dropped files', e.dataTransfer.files)
}
}
return (
<Card
title={props.title}
bordered={false}
style={{
flexBasis: 'max(400px, calc(44%))',
marginTop: 25
}}>
<Dragger {...opts}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">Click or drag the folder to this area for uploading</p>
</Dragger>
</Card>
)
}
export default UploadVideo
src/pages/upload/index.jsx
View file @ 5801ce16
import React, { useState, useEffect } from 'react'
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
const headerStyle = {
color: '#fff',
height: 64,
paddingInline: 48,
lineHeight: '64px',
backgroundColor: '#4096ff'
}
const contentStyle = {
minHeight: 120,
lineHeight: '120px',
color: '#fff',
backgroundColor: '#0958d9',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around',
flexWrap: 'wrap',
padding: 25,
gap: 25
}
const footerStyle = {
color: '#fff',
backgroundColor: '#4096ff'
}
const layoutStyle = {
borderRadius: 8,
overflow: 'hidden',
width: 'calc(100% - 8px)',
maxWidth: 'calc(100% - 8px)',
minHeight: '100vh'
}
const Upload = () => {
const navigate = useNavigate()
const [loading, setLoading] = useState(false)
const [folds, setFolds] = useState([])
const [form] = Form.useForm()
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: { reqData } })
}, 2000)
}
useEffect(() => {
const recvFoldData = (fold) => {
console.log('======================')
setFolds((prevFolds) => {
const newFolds = [...prevFolds]
newFolds.push(fold)
return newFolds
})
}
$eventbus.on('upload_fold_name', recvFoldData)
return () => {
$eventbus.off('upload_fold_name', recvFoldData)
}
}, [])
return (
<Flex gap="middle" wrap="wrap">
<Layout style={layoutStyle}>
<Header style={headerStyle}>TapVideo</Header>
<Content style={contentStyle}>
<UploadVideo title="Upload excellent videos：" group={0} />
<UploadVideo title="Upload project shots：" group={1} />
{/* <Card
bordered={false}
style={{
display: 'flex',
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={{
}}>
Click to generate
</Button>
</Form.Item>
</Form>
{/* </Card> */}
</Content>
<Footer style={footerStyle}>©Goyoo</Footer>
</Layout>
</Flex>
)
}
export default Upload
import React, { useState, useEffect } from 'react'
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
const headerStyle = {
color: '#fff',
height: 64,
paddingInline: 48,
lineHeight: '64px',
backgroundColor: '#4096ff'
}
const contentStyle = {
minHeight: 120,
lineHeight: '120px',
color: '#fff',
backgroundColor: '#0958d9',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around',
flexWrap: 'wrap',
padding: 25,
gap: 25
}
const footerStyle = {
color: '#fff',
backgroundColor: '#4096ff'
}
const layoutStyle = {
borderRadius: 8,
overflow: 'hidden',
width: 'calc(100% - 8px)',
maxWidth: 'calc(100% - 8px)',
minHeight: '100vh'
}
const Upload = () => {
const navigate = useNavigate()
const [loading, setLoading] = useState(false)
const [folds, setFolds] = useState([])
const [form] = Form.useForm()
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: { reqData } })
}, 5000)
}
useEffect(() => {
const recvFoldData = (fold) => {
console.log('======================')
setFolds((prevFolds) => {
const newFolds = [...prevFolds]
newFolds.push(fold)
return newFolds
})
}
$eventbus.on('upload_fold_name', recvFoldData)
return () => {
$eventbus.off('upload_fold_name', recvFoldData)
}
}, [])
return (
<Flex gap="middle" wrap="wrap">
<Layout style={layoutStyle}>
<Header style={headerStyle}>TapVideo</Header>
<Content style={contentStyle}>
<UploadVideo title="Upload excellent videos：" group={0} />
<UploadVideo title="Upload project shots：" group={1} />
{/* <Card
bordered={false}
style={{
display: 'flex',
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={{
}}>
Click to generate
</Button>
</Form.Item>
</Form>
{/* </Card> */}
</Content>
<Footer style={footerStyle}>©Goyoo</Footer>
</Layout>
</Flex>
)
}
export default Upload
src/routes/index.jsx
View file @ 5801ce16
import Home from '../pages/home/index.jsx'
import Upload from '../pages/upload/index.jsx'
import Preview from '../pages/preview/index.jsx'
import { Navigate } from 'react-router-dom'
let routes = [
{
path: '/',
element: <Navigate to="/upload" />
},{
path: '/home',
element: <Home />
},
{
path: '/upload',
element: <Upload />
},
{
path: '/preview',
element: <Preview />
}
]
import Home from '../pages/home/index.jsx'
import Upload from '../pages/upload/index.jsx'
import Preview from '../pages/preview/index.jsx'
import { Navigate } from 'react-router-dom'
let routes = [
{
path: '/',
element: <Navigate to="/upload" />
},{
path: '/home',
element: <Home />
},
{
path: '/upload',
element: <Upload />
},
{
path: '/preview',
element: <Preview />
}
]
export default routes
\ No newline at end of file
src/utils/EventBus.js
View file @ 5801ce16
import mitt from 'mitt'
const $eventbus = mitt()
import mitt from 'mitt'
const $eventbus = mitt()
export default $eventbus
\ No newline at end of file
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