diff --git a/public/react/src/modules/user/usersInfo/video/VideoReducer.js b/public/react/src/modules/user/usersInfo/video/VideoReducer.js index fda577fa0..30478da5c 100644 --- a/public/react/src/modules/user/usersInfo/video/VideoReducer.js +++ b/public/react/src/modules/user/usersInfo/video/VideoReducer.js @@ -1,5 +1,16 @@ import update from 'immutability-helper' +function find(state, action) { + let _index = -1 + state.videoes.some((item, index) => { + // 同文件不同名字 fileHash也是一样的 + if (item.loaded != 100 && (action.uploadInfo.fileHash == item.fileHash && action.uploadInfo.file.name == item.name)) { + _index = index + return true; + } + }) + return _index; +} export function reducer(state, action) { switch (action.type) { case 'addVideo': @@ -12,21 +23,16 @@ export function reducer(state, action) { fileHash: uploadInfo.fileHash, // "ba1bbc53fdecd9eaaae479fbd9518442" state: uploadInfo.state, // "Uploading" "Ready" "Success" videoId: uploadInfo.videoId, // "719b82c875c34ac39f94feb145d25ad2" - loaded: 0 + loaded: 0, + + title: '' }]}; case 'removeVideo': return { videoes: update(state.videoes, {$splice: [[action.index, 1]]}) } case 'updateProgress': - let _index = -1; - state.videoes.some((item, index) => { - // 同文件不同名字 fileHash也是一样的 - if (item.loaded != 100 && (action.uploadInfo.fileHash == item.fileHash && action.uploadInfo.file.name == item.name)) { - _index = index - return true; - } - }) + let _index = find(state, action) let newVideoes = state.videoes // 删除先执行 if (_index != -1) { @@ -39,6 +45,17 @@ export function reducer(state, action) { }}) } return {videoes: newVideoes}; + case 'updateTitle': + let _upadteIndex = action.index + + let newVideoes2 = state.videoes + + if (_upadteIndex != -1) { + newVideoes2 = update(state.videoes, {[_upadteIndex]: { + title: {$set: action.title}, + }}) + } + return {videoes: newVideoes2}; default: throw new Error(); } diff --git a/public/react/src/modules/user/usersInfo/video/VideoUpload.js b/public/react/src/modules/user/usersInfo/video/VideoUpload.js index dc936c48f..ec63454f9 100644 --- a/public/react/src/modules/user/usersInfo/video/VideoUpload.js +++ b/public/react/src/modules/user/usersInfo/video/VideoUpload.js @@ -18,12 +18,12 @@ loaded: 0 */ function VideoUpload (props) { - const { className, index, name, loaded, state, cancelUpload } = props; - const [title, setTitle] = useState('') + const { className, index, name, loaded, state, cancelUpload, onTitleChange, title } = props; + // const [title, setTitle] = useState('') const username = props.match.params.username function titleChange (e) { - setTitle(e.target.value) + onTitleChange(e.target.value, index) } return (
@@ -32,12 +32,19 @@ function VideoUpload (props) { - cancelUpload(index, loaded == '100' )}>{loaded == '100' ? "删除" : "取消上传"} +
+ cancelUpload(index, loaded == '100' )}>{loaded == '100' ? "删除" : "取消上传"} +
+
+ +
+ 标题: + {String(title.length)}/{MAX_LENGTH} + } + className="titleInput" + >
- - {String(title.length)}/{MAX_LENGTH} - }> ) } diff --git a/public/react/src/modules/user/usersInfo/video/VideoUploadList.js b/public/react/src/modules/user/usersInfo/video/VideoUploadList.js index 15749d504..c97c72c15 100644 --- a/public/react/src/modules/user/usersInfo/video/VideoUploadList.js +++ b/public/react/src/modules/user/usersInfo/video/VideoUploadList.js @@ -11,6 +11,8 @@ import { reducer, initialState } from './VideoReducer' import { deleteVideoInCloud } from './VideoUtil' let uploader const files = [] +const MAX_FILE_COUNT = 3 +const MAX_FILE_SIZE = 200 function VideoUploadList (props) { const [videoes, setVideoes] = useState([]); @@ -28,13 +30,22 @@ function VideoUploadList (props) { } if (file.size > 200 * 1024 * 1024) { // 超过200m TODO - alert("视频大小超过200M") + showNotification(`视频大小超过${MAX_FILE_SIZE}M`) + return; + } + let gotTheSameFileName = false; + state.videoes.some((item) => { + if (item.name == file.name) { + gotTheSameFileName = true; + return true; + } + }) + if (gotTheSameFileName) { + showNotification(`你不能上传同一个视频文件名称,请重新选择。`) return; } - // TODO 判断文件类型 var Title = file.name - file.type var userData = '{"Vod":{}}' if (!uploader) { @@ -164,6 +175,9 @@ function VideoUploadList (props) { console.log(error) }) } + function onTitleChange(title, index) { + dispatch({type: 'updateTitle', title, index}) + } // login return (
@@ -171,17 +185,44 @@ function VideoUploadList (props) { .videoUploadList .section { background: #fff; padding: 16px 20px; + padding-top: 0px; + } + .videoUploadList .cBreadcrumb { + margin-top: 16px; + } + .videoUploadList .title .head { + display: inline-block; + margin-right: 8px; + } + .videoUploadList .title .titleDescription { + color: #555; + } + .videoUploadList .section .description { + padding-top: 10px; margin-top: 20px; + margin-bottom: 30px; } - + /* item */ .videoUploadList .cancelUpload { - flex: 0 0 92px; + flex: 0 0 200px; } - + .videoUploadList .titleInput { + width: 480px; + margin-top: 16px; + } + .videoUploadList .videoUpload { + padding: 26px 0; + border-bottom: 1px dashed #DCDCDC; + } + .videoUploadList .videoUpload:last-child { + border-bottom: none; + } + `} -
上传视频
- - {state.videoes.map((item, vIndex) => { - return ( - - ) - })} - -
-
视频大小:不支持断点续传,单个视频文件最大200M;单次最多支持3个视频文件上传
-
视频规格:avi、flv、f4v、m4v、mov、mp4、rmvb、swf、webm
-
温馨提示:请勿上传违法视频。平台将为每一个视频分配一个地址,您可以通过引用改地址将视频使用在开发社区等模块
+
+

上传视频

+ 单次最多支持{MAX_FILE_COUNT}个视频文件上传,不支持断点续传,单个视频文件最大{MAX_FILE_SIZE}M +
+ +
+
+ {state.videoes.map((item, vIndex) => { + return ( + + ) + })} +
+ +
+
视频大小:不支持断点续传,单个视频文件最大200M;单次最多支持3个视频文件上传
+
视频规格:avi、flv、f4v、m4v、mov、mp4、rmvb、swf、webm
+
温馨提示:请勿上传违法视频。平台将为每一个视频分配一个地址,您可以通过引用改地址将视频使用在开发社区等模块
+
+ + + + + onPublish()}>立即发布
- - - - - onPublish()}>立即发布
) }