From 58e54dd802316de781338d96079556c2ea86dd42 Mon Sep 17 00:00:00 2001 From: hjm <63528605@qq.com> Date: Wed, 14 Aug 2019 17:27:34 +0800 Subject: [PATCH] video --- .../react/src/common/context/ThemeContext.js | 4 +- public/react/src/common/educoder.js | 1 + .../modules/courses/common/ModalWrapper.js | 1 + .../react/src/modules/courses/css/Courses.css | 1 + .../src/modules/user/usersInfo/InfosIndex.js | 11 +++ .../user/usersInfo/video/EditVideoModal.js | 70 ++++++++++++++ .../user/usersInfo/video/InfosVideo.css | 68 +++++++++++++ .../user/usersInfo/video/InfosVideo.js | 90 +++++++++++++++++- .../user/usersInfo/video/VideoInReviewItem.js | 57 +++++++++++ .../modules/user/usersInfo/video/VideoItem.js | 0 .../usersInfo/video/VideoPublishSuccess.js | 67 +++++++++++++ .../user/usersInfo/video/VideoUploadList.js | 53 ++++++++--- .../user/usersInfo/video/images/play.png | Bin 0 -> 413 bytes .../user/usersInfo/video/images/upload.png | Bin 0 -> 337 bytes 14 files changed, 405 insertions(+), 18 deletions(-) create mode 100644 public/react/src/modules/user/usersInfo/video/EditVideoModal.js create mode 100644 public/react/src/modules/user/usersInfo/video/InfosVideo.css create mode 100644 public/react/src/modules/user/usersInfo/video/VideoInReviewItem.js create mode 100644 public/react/src/modules/user/usersInfo/video/VideoItem.js create mode 100644 public/react/src/modules/user/usersInfo/video/VideoPublishSuccess.js create mode 100644 public/react/src/modules/user/usersInfo/video/images/play.png create mode 100644 public/react/src/modules/user/usersInfo/video/images/upload.png diff --git a/public/react/src/common/context/ThemeContext.js b/public/react/src/common/context/ThemeContext.js index e4fe3da89..db639729e 100644 --- a/public/react/src/common/context/ThemeContext.js +++ b/public/react/src/common/context/ThemeContext.js @@ -4,7 +4,9 @@ export const themes = { light: { foreground: '#000000', background: '#eeeeee', - foreground_select: '#4CACFF' + foreground_select: '#4CACFF', + foreground_tip: '#333' + }, dark: { foreground: '#ffffff', diff --git a/public/react/src/common/educoder.js b/public/react/src/common/educoder.js index f37c4d0f6..058aa7e6e 100644 --- a/public/react/src/common/educoder.js +++ b/public/react/src/common/educoder.js @@ -64,3 +64,4 @@ export { default as ImageLayerHook } from './hooks/ImageLayerHook' // 外部 export { default as CBreadcrumb } from '../modules/courses/common/CBreadcrumb' +export { default as ModalWrapper } from '../modules/courses/common/ModalWrapper' diff --git a/public/react/src/modules/courses/common/ModalWrapper.js b/public/react/src/modules/courses/common/ModalWrapper.js index 9fff8d928..44495d336 100644 --- a/public/react/src/modules/courses/common/ModalWrapper.js +++ b/public/react/src/modules/courses/common/ModalWrapper.js @@ -16,6 +16,7 @@ class ModalWrapper extends Component{ } onCancel = () => { this.setVisible(false) + this.props.onCancel && this.props.onCancel() } onOk = () => { this.props.onOk && this.props.onOk() diff --git a/public/react/src/modules/courses/css/Courses.css b/public/react/src/modules/courses/css/Courses.css index 47db2f595..96a214680 100644 --- a/public/react/src/modules/courses/css/Courses.css +++ b/public/react/src/modules/courses/css/Courses.css @@ -1173,6 +1173,7 @@ samp { border-right: none!important; box-shadow: none!important; } +/* 这个加了干嘛的?影响到了带addonAfter的input */ .searchViewAfter,.searchViewAfter:focus,.searchViewAfter .ant-input:hover,.ant-input-group .ant-input:focus{ border-right: none!important; } diff --git a/public/react/src/modules/user/usersInfo/InfosIndex.js b/public/react/src/modules/user/usersInfo/InfosIndex.js index d6eca3401..092ae9009 100644 --- a/public/react/src/modules/user/usersInfo/InfosIndex.js +++ b/public/react/src/modules/user/usersInfo/InfosIndex.js @@ -19,6 +19,10 @@ const VideoUploadList = Loadable({ loader: () => import('./video/VideoUploadList'), loading: Loading, }) +const VideoPublishSuccess = Loadable({ + loader: () => import('./video/VideoPublishSuccess'), + loading: Loading, +}) const $ = window.$; class InfosIndex extends Component{ @@ -53,6 +57,13 @@ class InfosIndex extends Component{ (props) => () } > + () + } + > + + { + + if (!err) { + + + } else { + // $("html").animate({ scrollTop: $('html').scrollTop() - 100 }) + } + }) + + // setVisible(false) + + } + function onCancel() { + setVisible(false) + } + useEffect(() => { + modalEl.current.setVisible(visible) + }, [visible]) + const _title = form.getFieldsValue().title; + return ( + + + + {getFieldDecorator('title', { + rules: [{ + required: true, message: '请输入标题', + }, { + max: 30, message: '最大限制为30个字符', + }], + })( + + )} + + + ) +} +const WrappedEditVideoModal = Form.create({ name: 'editVideoModal' })(EditVideoModal); +export default WrappedEditVideoModal diff --git a/public/react/src/modules/user/usersInfo/video/InfosVideo.css b/public/react/src/modules/user/usersInfo/video/InfosVideo.css new file mode 100644 index 000000000..edbfb94aa --- /dev/null +++ b/public/react/src/modules/user/usersInfo/video/InfosVideo.css @@ -0,0 +1,68 @@ +.itemWrap { + display: flex; + flex-wrap: wrap; +} + + +/* item */ +.videoItem { + width: 280px; + margin-right: 26px; + margin-bottom: 26px; + position: relative; +} +.videoItem:nth-child(4n+0) { + margin-right: 0px; +} +.videoItem img.cover { + width: 100%; + border-radius: 6px 6px 0px 0px; + height: 180px; +} +.nItem.videoItem:hover .mask { + display: block; + top: 0px; + width: 100%; + height: 180px; + cursor: pointer; +} +.nItem .mask { + border-radius: 6px 6px 0px 0px; + display: none; + text-align: center; + position: absolute; + background: #000; + opacity: 0.5; +} + +.videoItem img.play { + margin-top: 20%; +} +.videoItem .square-main { + padding: 10px 8px; + + background: #fff; + border-radius: 0px 0px 6px 6px; +} +.videoItem .square-main .title{ + max-width: 256px; + line-height: 18px; + +} + +.videoInReviewItem .square-main { + background: #EAEAEA; +} +.videoItem .time { + color: #A0A0A0; +} + +.videoItem .square-main .buttonRow { + justify-content: space-between; + line-height: 15px; +} + +.nItem.videoItem:hover .square-main { + color: #fff; + background: #333; +} \ No newline at end of file diff --git a/public/react/src/modules/user/usersInfo/video/InfosVideo.js b/public/react/src/modules/user/usersInfo/video/InfosVideo.js index 3098462df..ac20d86ff 100644 --- a/public/react/src/modules/user/usersInfo/video/InfosVideo.js +++ b/public/react/src/modules/user/usersInfo/video/InfosVideo.js @@ -1,12 +1,33 @@ -import React, { useState, useEffect, memo } from 'react'; +import React, { useState, useEffect, useContext, useRef, memo } from 'react'; import {Link} from 'react-router-dom'; -import { getUrl2, isDev } from 'educoder' +import { getUrl2, isDev, ThemeContext } from 'educoder' import axios from 'axios' +import VideoInReviewItem from './VideoInReviewItem' +import EditVideoModal from './EditVideoModal' +import './InfosVideo.css' + +function useModal(initValue) { + const [visible, setVisible] = useState(initValue) + + return { + visible, + setVisible + } +} const PAGE_SIZE = 12 function InfoVideo (props) { + const [videoes, setVideoes] = useState([]) + const [reviewVideoes, setReviewVideoes] = useState([]) + const editModalObj = useModal(false) + + const theme = useContext(ThemeContext); + const editModalEl = useRef(null); + + const username = props.match.params.username + let cVideo = {}; function fetchVideoes() { const fetchUrl = `/users/${username}/videos.json` @@ -16,7 +37,9 @@ function InfoVideo (props) { } }) .then((response) => { - + if (response.data.videos) { + setVideoes(response.data.videos) + } }).catch(() => { }) @@ -29,7 +52,9 @@ function InfoVideo (props) { } }) .then((response) => { - + if (response.data.videos) { + setReviewVideoes(response.data.videos) + } }).catch(() => { }) @@ -40,9 +65,64 @@ function InfoVideo (props) { fetchReviewVideoes() }, []) + function onEditVideo(video) { + cVideo = video + editModalObj.setVisible(true) + // editModalEl.current.toList(true, video); + // this.refs['editVideoModal'].setVisible(true, video); + } + return ( -
123 +
+ + + + +
+ {reviewVideoes.map((item, index) => { + return ( + ) + })} +
+ + gogogo +
+ {videoes.map((item, index) => { + return ( + ) + })} +
to upload
) diff --git a/public/react/src/modules/user/usersInfo/video/VideoInReviewItem.js b/public/react/src/modules/user/usersInfo/video/VideoInReviewItem.js new file mode 100644 index 000000000..7c2af5070 --- /dev/null +++ b/public/react/src/modules/user/usersInfo/video/VideoInReviewItem.js @@ -0,0 +1,57 @@ +import React, { useState, useEffect, useContext, memo } from 'react'; +import { Progress, Input, Tooltip } from 'antd' +import { getUrl2, isDev, CBreadcrumb, ActionBtn, ThemeContext } from 'educoder' +import axios from 'axios' +import moment from 'moment' +import playIcon from './images/play.png' + +/** +cover_url: "http://video.educoder.net/f6ba49c3944b43ee98736898e31b7d88/snapshots/12da3f7df07c499b8f0fc6dc410094e9-00005.jpg" +created_at: "2019-08-12 13:48:26" +file_url: "http://video.educoder.net/sv/4c7eb4-16c845ee09c/4c7eb4-16c845ee09c.mp4" +id: 1 +published_at: "2019-08-12 15:38:00" +title: "测试标题" +updated_at: "2019-08-12 17:17:09" + */ +function VideoInReviewItem (props) { + const theme = useContext(ThemeContext); + const { history, cover_url, title, created_at, isReview, onEditVideo } = props; + + const username = props.match.params.username + function toList() { + history.push(`/users/${username}/videoes`) + } + function toUpload() { + history.push(`/users/${username}/videoes/upload`) + } + return ( +
+ + + {!isReview &&
+ +
} +
+
20 ? title : ''} + >{title}
+
+ {/* 2019-09-01 10:00:22 */} + {moment(created_at).format('YYYY-MM-DD HH:mm:ss')} + { isReview != true &&
+ + onEditVideo(props)}> + + + + +
} +
+
+
+ ) +} + +export default VideoInReviewItem diff --git a/public/react/src/modules/user/usersInfo/video/VideoItem.js b/public/react/src/modules/user/usersInfo/video/VideoItem.js new file mode 100644 index 000000000..e69de29bb diff --git a/public/react/src/modules/user/usersInfo/video/VideoPublishSuccess.js b/public/react/src/modules/user/usersInfo/video/VideoPublishSuccess.js new file mode 100644 index 000000000..d0cd04b06 --- /dev/null +++ b/public/react/src/modules/user/usersInfo/video/VideoPublishSuccess.js @@ -0,0 +1,67 @@ +import React, { useState, useEffect, useContext, memo } from 'react'; +import { Progress, Input } from 'antd' +import { getUrl2, isDev, CBreadcrumb, ActionBtn, ThemeContext } from 'educoder' +import axios from 'axios' + +function VideoUpload (props) { + const theme = useContext(ThemeContext); + const { history } = props; + + const username = props.match.params.username + function toList() { + history.push(`/users/${username}/videoes`) + } + function toUpload() { + history.push(`/users/${username}/videoes/upload`) + + } + return ( +
+ + + + +
+
+ +
+
恭喜!
+
提交成功
+
平台正在审核您的申请,审核结果将以平台消息的形式通知您
+
+ 查看已上传视频 + 继续上传 +
+
+
+ ) +} + +export default VideoUpload diff --git a/public/react/src/modules/user/usersInfo/video/VideoUploadList.js b/public/react/src/modules/user/usersInfo/video/VideoUploadList.js index c97c72c15..4d626b88f 100644 --- a/public/react/src/modules/user/usersInfo/video/VideoUploadList.js +++ b/public/react/src/modules/user/usersInfo/video/VideoUploadList.js @@ -1,6 +1,6 @@ -import React, { useState, useEffect, useReducer, memo } from 'react'; +import React, { useState, useEffect, useReducer, useContext, memo } from 'react'; -import { getUrl2, isDev, CBreadcrumb, ActionBtn } from 'educoder' +import { getUrl2, isDev, CBreadcrumb, ActionBtn, ThemeContext } from 'educoder' import axios from 'axios' import VideoUpload from './VideoUpload' @@ -17,8 +17,10 @@ function VideoUploadList (props) { const [videoes, setVideoes] = useState([]); const [state, dispatch] = useReducer(reducer, initialState); + const theme = useContext(ThemeContext) + const username = props.match.params.username - const { showNotification } = props; + const { showNotification, history } = props; const uploaderOptions = { } @@ -163,13 +165,13 @@ function VideoUploadList (props) { return { video_id: item.videoId, // todo - title: item.name + title: item.title } }) }).then((response) => { // to success page if (response.data.status == 0) { - + history.push(`/users/${username}/videoes/success`) } }).catch((error) => { console.log(error) @@ -180,12 +182,13 @@ function VideoUploadList (props) { } // login return ( -
+

上传视频

- 单次最多支持{MAX_FILE_COUNT}个视频文件上传,不支持断点续传,单个视频文件最大{MAX_FILE_SIZE}M + {/* 单次最多支持{MAX_FILE_COUNT}个视频文件上传,不支持断点续传,单个视频文件最大{MAX_FILE_SIZE}M */}
@@ -248,21 +266,32 @@ function VideoUploadList (props) { ) })}
- + {state.videoes && state.videoes.length === MAX_FILE_COUNT && +
+ + 单次最多支持3个视频文件上传 +
}
视频大小:不支持断点续传,单个视频文件最大200M;单次最多支持3个视频文件上传
视频规格:avi、flv、f4v、m4v、mov、mp4、rmvb、swf、webm
温馨提示:请勿上传违法视频。平台将为每一个视频分配一个地址,您可以通过引用改地址将视频使用在开发社区等模块
- + } +
+ onPublish()} + >立即发布 - onPublish()}>立即发布 +
上传视频,即表示您已同意上传内容协议,不得上传未经他人授权的作品
+
) diff --git a/public/react/src/modules/user/usersInfo/video/images/play.png b/public/react/src/modules/user/usersInfo/video/images/play.png new file mode 100644 index 0000000000000000000000000000000000000000..e2787ea9de62275ef3bc516ae55fdc0ac9177379 GIT binary patch literal 413 zcmV;O0b>4%P)oTzmyk5kR*P$GMGS;(MAD@YyMV<> zx>Nxh3yXAVt_s*)5eQgW7|0)xJ2BDsqnr&Xyv@vRo4odY2RF;^5K;Vm1u?hNlx&`$ zrepgWJh@}=-~(SobzuEQVn!J-rXh+kDXAM=(+j>yjV&`wbkM+>4CXp$qM$xf9mFUJ zAWyhGH1K#D0C{=u2Y@T~fGhTaBLq+t5~v6fplk;Kena3h1TF*MCh>z_;-BJwFM&!g zfNJjo=bg8VnhZa@hA`9m3-AJq z49eFNF@rt|o?zkIv|T$&uJ@bm5wwif7rPUPmhwNG+3)`VTIh4InayK=00000NkvXX Hu0mjflIydb literal 0 HcmV?d00001 diff --git a/public/react/src/modules/user/usersInfo/video/images/upload.png b/public/react/src/modules/user/usersInfo/video/images/upload.png new file mode 100644 index 0000000000000000000000000000000000000000..9424371926f4a4e0e732b1b4af22ca062888aa10 GIT binary patch literal 337 zcmeAS@N?(olHy`uVBq!ia0vp^4nSnkI&lw0qg$<@Awa7 z_^t(!K5PE_uKVw|4#cPtdOjbhn5!hnFPPzuDtGvd1D~7RAK9Kx1Bzbtba4!^IQ{hM zTE0UDBCHQ)|K*U8JSntHY90eiW z<)ZD@%D3hT&UxLdp>?1qa0`>Q@vhGc7IXKB%rTW(wSlKuLYMJKkL_PK0Zm2`S^l5} zDUEDdd`t4|RhhRimr5-8+jUyuLPp{q4*44mmS^fD9y0T8Zt!dql-s}<$>MDG$dIe- z8?SYO^0LJV%{?+31eXU+c(RIpat!PGU%WeF|8RD!cB{C0{;+<{p7{EYV`njxgN@xNAGk%99 literal 0 HcmV?d00001