css

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();
   }

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 (
         <div className={`videoUpload ${className}`}>
@@ -32,12 +32,19 @@ function VideoUpload (props) {
                 <Progress percent={loaded} 
                     status={loaded == '100' ? "" : 'active'}
                 />
-                <ActionBtn className="cancelUpload" onClick={() => cancelUpload(index, loaded == '100' )}>{loaded == '100' ? "删除" : "取消上传"}</ActionBtn>
+                <div className="cancelUpload">
+                    <ActionBtn className="" onClick={() => cancelUpload(index, loaded == '100' )}>{loaded == '100' ? "删除" : "取消上传"}</ActionBtn>
+                </div>
+            </div>
+            
+            <div>
+                <span className="titleLabel">标题：</span>
+                <Input placeholder={`标题支持最多${MAX_LENGTH}个字符`} onInput={titleChange} maxLength={MAX_LENGTH} suffix={
+                        <span className="color-grey-6 font-13">{String(title.length)}/{MAX_LENGTH}</span>
+                    }
+                    className="titleInput"
+                ></Input>
             </div>
-
-            <Input placeholder={`标题支持最多${MAX_LENGTH}个字符`} onInput={titleChange} maxLength={MAX_LENGTH} suffix ={
-                <span className="color-grey-6 font-13">{String(title.length)}/{MAX_LENGTH}</span>
-            }></Input>
         </div>
     )
 }

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 (
         <div className="educontent videoUploadList">
@@ -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;
+                }
+                
             `}</style>
             <CBreadcrumb
+                className="mb30"
                 separator=" > "
                 items={[
                     { to: `/users/${username}/videoes`, name:  '视频'},
@@ -189,31 +230,40 @@ function VideoUploadList (props) {
                 ]}
             ></CBreadcrumb>
 
-            <div className="title section">上传视频</div>
-
-            {state.videoes.map((item, vIndex) => {
-                return (
-                    <VideoUpload {...props} {...item} className="section"
-                        cancelUpload={cancelUpload} key={vIndex}
-                        index={vIndex}
-                    ></VideoUpload>
-                )
-            })}
-
-            <div className="description section">
-                <div className="">视频大小：不支持断点续传，单个视频文件最大200M；单次最多支持3个视频文件上传 </div>
-                <div className="">视频规格：avi、flv、f4v、m4v、mov、mp4、rmvb、swf、webm </div>
-                <div className="">温馨提示：请勿上传违法视频。平台将为每一个视频分配一个地址，您可以通过引用改地址将视频使用在开发社区等模块</div>
+            <div className="title">
+                <h2 className="head">上传视频</h2>
+                <span className="titleDescription">单次最多支持{MAX_FILE_COUNT}个视频文件上传，不支持断点续传，单个视频文件最大{MAX_FILE_SIZE}M</span>
+            </div>
+            
+            <div className="section">
+                <div>
+                {state.videoes.map((item, vIndex) => {
+                    return (
+                        <VideoUpload {...props} {...item} className=""
+                            cancelUpload={cancelUpload}
+                            onTitleChange={onTitleChange}
+                            key={vIndex}
+                            index={vIndex}
+                        ></VideoUpload>
+                    )
+                })}
+                </div>
+
+                <div className="description">
+                    <div className="">视频大小：不支持断点续传，单个视频文件最大200M；单次最多支持3个视频文件上传 </div>
+                    <div className="">视频规格：avi、flv、f4v、m4v、mov、mp4、rmvb、swf、webm </div>
+                    <div className="">温馨提示：请勿上传违法视频。平台将为每一个视频分配一个地址，您可以通过引用改地址将视频使用在开发社区等模块</div>
+                </div>
+
+                <Button type="primary" icon="plus-square" onClick={() => { document.getElementById('fileUpload').click()}}>
+                    添加更多视频
+                </Button>
+                <input type="file" id="fileUpload" style={{display: 'none'}} onChange={onUploadChange}
+                    accept="video/*"
+                ></input>
+
+                <ActionBtn className="publishBtn" onClick={() => onPublish()}>立即发布</ActionBtn>
             </div>
-
-            <Button type="primary" icon="plus-square" onClick={() => { document.getElementById('fileUpload').click()}}>
-                添加更多视频
-            </Button>
-            <input type="file" id="fileUpload" style={{display: 'none'}} onChange={onUploadChange}
-                accept="video/*"
-            ></input>
-
-            <ActionBtn className="publishBtn" onClick={() => onPublish()}>立即发布</ActionBtn>
         </div>
     )
 }