noUploads

public/react/src/modules/user/usersInfo/video/VideoUploadList.js

@@ -9,6 +9,8 @@ import { Button } from 'antd'
 import { getUploader } from './AliyunUploaderManager'
 import { reducer, initialState } from './VideoReducer'
 import { deleteVideoInCloud } from './VideoUtil'
+import uploadIcon from './images/upload.png'
+
 let uploader
 const files = []
 const MAX_FILE_COUNT = 3
@@ -186,6 +188,8 @@ function VideoUploadList (props) {
         dispatch({type: 'updateTitle', title, index})
     }
     // login
+    const noUploads = (!state.videoes || state.videoes.length == 0);
+    const protocolLine = <div>上传视频，即表示您已同意<span style={{color: theme.foreground_select}}>上传内容协议</span>，不得上传未经他人授权的作品</div>
     return (
         <div className="educontent videoUploadList" style={{ marginBottom: '200px' }}>
             <style>{`
@@ -194,10 +198,15 @@ function VideoUploadList (props) {
                     padding: 16px 20px;
                     padding-top: 0px;
                     position: relative;
+
+                    padding-bottom: 36px;
                 }
                 .videoUploadList .cBreadcrumb {
                     margin-top: 16px;
                 }
+                .videoUploadList .title {
+                    margin-bottom: 4px;
+                }
                 .videoUploadList .title .head {
                     display: inline-block;
                     margin-right: 8px;
@@ -209,10 +218,20 @@ function VideoUploadList (props) {
                     padding-top: 10px;
                     margin-top: 20px;
                     margin-bottom: 30px;
+                    
+
+                    color: #777;
+                }
+                .videoUploadList .section .description.noUploads {
+                  text-align: 'center';
                 }
                 .videoUploadList .publishBtn {
                     padding: 0 16px
                 }
+                .videoUploadList .publishRow .publishBtn {
+                    padding: 6px 24px;
+                    height: auto;
+                }
                 .videoUploadList .addVideoBtn {
                     position: absolute;
                     right: 30px;
@@ -225,6 +244,10 @@ function VideoUploadList (props) {
                     justify-content: center;
                     align-items: center;
                 }
+
+                .noUploads {
+                    text-align: center;
+                }
                     
 
                 /* item */
@@ -259,6 +282,18 @@ function VideoUploadList (props) {
             </div>
             
             <div className="section">
+                {/* noUploads */}
+                {noUploads && <div className="noUploads" style={{paddingTop: '72px'}}>
+                    <img src={uploadIcon} onClick={() => document.getElementById('fileUpload').click()}></img>
+                    <div style={{
+                        color: '#000000',
+                        fontSize: '18px',
+                        fontWeight: 'bold',
+                        marginBottom: '20px'
+                    }}>选择您要上传的视频</div>
+                    {protocolLine}
+                </div>}
+
                 <div>
                 {state.videoes.map((item, vIndex) => {
                     return (
@@ -276,28 +311,37 @@ function VideoUploadList (props) {
                     <i className="iconfont icon-tishi" style={{color: '#FF6F6F', verticalAlign: 'text-bottom'}}></i>
                     <span>单次最多支持3个视频文件上传</span> 
                 </div>}
-                <div className="description">
+
+                {!noUploads && <ActionBtn className="publishBtn" onClick={() => document.getElementById('fileUpload').click()}
+                >继续添加</ActionBtn>}
+
+                <div className={`description ${noUploads ? 'noUploads' : ''}`}>
                     <div className="">视频大小：不支持断点续传，单个视频文件最大200M；单次最多支持3个视频文件上传 </div>
                     <div className="">视频规格：avi、flv、f4v、m4v、mov、mp4、rmvb、swf、webm </div>
                     <div className="">温馨提示：请勿上传违法视频。平台将为每一个视频分配一个地址，您可以通过引用改地址将视频使用在开发社区等模块</div>
                 </div>
 
-                {(!state.videoes || state.videoes.length < MAX_FILE_COUNT) && <Button type="primary" icon="plus-square"
+                {!noUploads && <React.Fragment>
+
+                {/* {(state.videoes.length < MAX_FILE_COUNT) && <Button type="primary" icon="plus-square"
                     onClick={() => { document.getElementById('fileUpload').click()}}
                     className="fr addVideoBtn"
                 >
                     添加更多视频
-                </Button>}
+                </Button>} */}
-                <input type="file" id="fileUpload" style={{display: 'none'}} onChange={onUploadChange}
+                
-                    accept="video/*"
-                ></input>
                 <div style={{}} className="publishRow">
                     <ActionBtn className="publishBtn" onClick={() => onPublish()}
                     >立即发布</ActionBtn>
 
-                    <div>上传视频，即表示您已同意<span style={{color: theme.foreground_select}}>上传内容协议</span>，不得上传未经他人授权的作品</div>
+                    {protocolLine}
                 </div>
+
+                </React.Fragment>}
             </div>
+            <input type="file" id="fileUpload" style={{display: 'none'}} onChange={onUploadChange}
+                accept="video/*"
+            ></input>
         </div>
     )
 }