下拉

public/react/src/modules/user/usersInfo/common/CRoundSelect.js

@@ -0,0 +1,96 @@
+import React, { useState, useEffect, useContext, useRef, memo } from 'react';
+import {Link} from 'react-router-dom';
+import { Icon } from 'antd'
+import { getUrl2, isDev, ThemeContext } from 'educoder'
+import axios from 'axios'
+
+
+function CRoundSelect (props) { 
+    const [open, setOpen] = useState(true)
+    const theme = useContext(ThemeContext);
+    const { category, changeCategory, categories, right, width, items,
+            sortKey, onSortChange } = props;
+    const username = props.match.params.username
+    
+    useEffect(() => {
+
+    }, [])
+    function onToggleOpen(over) {
+        if (over) {
+            console.log('over')
+            setOpen(true)
+
+        } else {
+            console.log('out')
+            setOpen(false)
+
+        }
+    }
+    function findIndexByKey(key) {
+        let _index = -1
+        items && items.some((item, index) => {
+            if (item.key == key) {
+                _index = index
+                return true;
+            }
+        }) 
+        return _index
+    }
+    function _onSortChange(key, index) {
+        if (index == 0) {
+            return;
+        }
+        setOpen(false)
+        onSortChange(key, index)
+    }
+    let index = findIndexByKey(sortKey)
+    return (
+        <React.Fragment>
+        <div className="" style={{position: 'relative'}}>
+
+            {/* onMouseOut={onToggleOpen} */}
+            <div className="trigger" onMouseOver={() => onToggleOpen(true)} >
+                <style>{`
+                    .trigger, .droplist {
+                        padding: 0px 6px;
+                        border: 1px solid ${theme.foreground_select};
+                        color: ${theme.foreground_select};
+                        border-radius: 6px; 
+                    }   
+                    .trigger {
+                        width: ${width || 'fit-content'};
+
+                        
+                    }
+                    .droplist {
+                        width: ${width || 'fit-content'};
+                        position: absolute;
+                        z-index: 2;
+                        top: 0px;
+                        background: #fff;
+                        
+
+                        
+                    }
+                `}</style>
+                <div className="currentItem">
+                    {items[index].name} <Icon type="down" />
+                </div>
+            </div>
+            {true && <ul className="droplist" onMouseLeave={() => onToggleOpen(false)}
+                style={{display: open ? 'block' : 'none'}}
+            >   
+                {items.map((item, index) => 
+                    <li key={item.key} className="" 
+                        onClick={() => _onSortChange(item.key, index)}>{item.name}</li> 
+                )}
+                {/* <li className="">AAAAAAAA</li>
+                <li className="">BBBBBBB</li>
+                <li className="">CCCCCCC</li> */}
+            </ul> }
+        </div>
+        </React.Fragment>
+    )
+}
+
+export default CRoundSelect

public/react/src/modules/user/usersInfo/common/InfoTab.js

@@ -8,7 +8,7 @@ import axios from 'axios'
 function InfoTab (props) { 
 
     const theme = useContext(ThemeContext);
-    const { category, changeCategory, categories } = props;
+    const { category, changeCategory, categories, right } = props;
     const username = props.match.params.username
     
     useEffect(() => {
@@ -25,6 +25,9 @@ function InfoTab (props) {
           {/* <li className={category ? "" : "active"}><a href="javascript:void(0)" onClick={()=>this.changeCategory()}>全部</a></li>
           <li className={category=="manage" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeCategory("manage")}>{is_current ? "我":"TA"}管理的</a></li>
           <li className={category=="study" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeCategory("study")}>{is_current ? "我":"TA"}学习的</a></li> */}
+          <div className="fr">
+          {right}
+          </div>
         </div>
     )
 }

public/react/src/modules/user/usersInfo/video/InfosVideo.css

@@ -65,4 +65,38 @@
 .nItem.videoItem:hover .square-main {
     color: #fff;
     background: #333;
+}
+
+/* 预览弹框 */
+.showVideoModal .ant-modal-body {
+    display: flex;
+    flex-direction: column;
+}
+.showVideoModal video{
+    width: 800px;
+    height: 450px;
+}
+.showVideoModal .copyLine {
+    justify-content: space-between;
+    padding: 9px;
+    background: #000000;
+    width: 800px;
+}
+.showVideoModal .copyLine input {
+    color: #707070;
+    background-color: #000 !important;
+    border-color: #707070;
+    margin-right: 12px;
+}
+.showVideoModal .copyLine a {
+    flex: 0 0 106px;
+}
+.toolbarRow {
+    justify-content: space-between;
+    padding: 0 8px;
+}
+/* 跳转按钮 */
+.infoVideo .toUploadBtn {
+    height: 50px;
+    margin-right: 20px;
 }

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext, useRef, memo } from 'react';
 import {Link} from 'react-router-dom';
-import { Pagination, Input } from 'antd'
+import { Pagination, Input, Button } from 'antd'
 import { getUrl2, isDev, ThemeContext, ActionBtn } from 'educoder'
 import axios from 'axios'
 import VideoInReviewItem from './VideoInReviewItem'
@@ -8,6 +8,8 @@ import EditVideoModal from './EditVideoModal'
 import './InfosVideo.css'
 import InfoTab from '../common/InfoTab'
 import HeadlessModal from '../common/HeadlessModal'
+import CRoundSelect from '../common/CRoundSelect'
+
 import ClipboardJS from 'clipboard'
 
 function useModal(initValue) {
@@ -43,10 +45,16 @@ const DEFAULT_VIDEO_WIDTH_IN_MD = "90%" // 400
 const DEFAULT_VIDEO_HEIGHT_IN_MD = "55%" // 400
 let videoId = {};
 let _clipboard = null;
+const _items=[
+    {key: 'published_at-desc', name: '最新上传'},
+    {key: 'published_at-asc', name: '最早上传'},
+]
 function InfoVideo (props) {
     const [videoes, setVideoes] = useState([])
     const [reviewVideoes, setReviewVideoes] = useState([])
     const [count, setCount] = useState(0)
+    const [sortKey, setSortKey] = useState(_items[0].key)
+    
     const editModalObj = useModal(false)
     const videoModalObj = useModal(false)
     const categoryObj = useCategory('all')
@@ -56,17 +64,22 @@ function InfoVideo (props) {
     const editModalEl = useRef(null);
     const videoEl = useRef(null);
     
-    const { showNotification } = props;
+    const { showNotification, history } = props;
     const username = props.match.params.username
 
+    function toUpload() {
+        history.push(`/users/${username}/videoes/upload`)
+    }
     function fetchVideoes() {
         const fetchUrl = `/users/${username}/videos.json`
+        const sorts = sortKey.split('-')
         axios.get(fetchUrl, { 
             params: {
                 page: pageObj.current,
                 per_page: PAGE_SIZE,
-                // sort_by
-                // sort_direction
+                sort_by: sorts[0],
+                sort_direction: sorts[1],
+                // 
             }
         })
         .then((response) => {
@@ -96,7 +109,7 @@ function InfoVideo (props) {
     
     useEffect(() => {
         fetchVideoes()
-    }, [pageObj.current])
+    }, [pageObj.current, sortKey])
 
     useEffect(() => {
         if (categoryObj.category == 'all') {
@@ -153,6 +166,13 @@ function InfoVideo (props) {
         }
         videoModalObj.setVisible(true)
     }
+    // TODO use封装
+    function onSortChange(key, index) {
+        const _item = _items[index]
+        _items.splice(index, 1)
+        _items.unshift(_item)
+        setSortKey(key)
+    }
     function getCopyText (file_url, cover_url) {
         return `<video src="${file_url}" controls="true" controlslist="nodownload" width="${DEFAULT_VIDEO_WIDTH_IN_MD}" height="${DEFAULT_VIDEO_HEIGHT_IN_MD}" poster="${cover_url}">您的浏览器不支持 video 标签。</video>`
     }
@@ -182,29 +202,6 @@ function InfoVideo (props) {
                 </div>
             </HeadlessModal>
             <style>{`
-                .showVideoModal .ant-modal-body {
-                    display: flex;
-                    flex-direction: column;
-                }
-                .showVideoModal video{
-                    width: 800px;
-                    height: 450px;
-                }
-                .showVideoModal .copyLine {
-                    justify-content: space-between;
-                    padding: 9px;
-                    background: #000000;
-                    width: 800px;
-                }
-                .showVideoModal .copyLine input {
-                    color: #707070;
-                    background-color: #000 !important;
-                    border-color: #707070;
-                    margin-right: 12px;
-                }
-                .showVideoModal .copyLine a {
-                    flex: 0 0 106px;
-                }
                 
                 /* item */
                 .videoPublishSuccess .section {
@@ -235,16 +232,31 @@ function InfoVideo (props) {
                     name: '待审核视频'
                 }]}
                 {...categoryObj}
+
+                right={
+                    <Button type="primary" icon="upload"
+                        onClick={() => { toUpload() }}
+                        className="toUploadBtn"
+                        
+                    >
+                        上传视频
+                    </Button>
+                }
             ></InfoTab>
 
-            <div className="toolbarRow mt20">
+            <div className="toolbarRow mt20 df">
                 <span>
                     共
                     <span style={{color: theme.foreground_orange1}}> {count} </span>
                     个视频
                 </span>
 
-                
+                {categoryObj.category == 'all' && <CRoundSelect {...props}
+                    width={'88px'}
+                    items={_items}
+                    onSortChange={onSortChange}
+                    sortKey={sortKey }
+                ></CRoundSelect>}
             </div>
 
             {categoryObj.category == 'all' ?
@@ -289,7 +301,6 @@ function InfoVideo (props) {
                 </div>
             }
            
-            <Link to={`/users/${username}/videoes/upload`}>to upload</Link>
         </div>
     )
 }

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

@@ -18,7 +18,7 @@ updated_at: "2019-08-12 17:17:09"
 let _clipboard = null;
 function VideoInReviewItem (props) {
     const theme = useContext(ThemeContext);
-    const { history, file_url, cover_url, title, created_at, isReview, id
+    const { history, file_url, cover_url, title, created_at, published_at, isReview, id
         , onEditVideo, onMaskClick, getCopyText, showNotification } = props;
     useEffect(()=> {
         if (!isReview) {
@@ -52,7 +52,7 @@ function VideoInReviewItem (props) {
                 >{title}</div>
                 <div className="df buttonRow">
                     {/* 2019-09-01 10:00:22 */}
-                    <span className="time">{moment(created_at).format('YYYY-MM-DD HH:mm:ss')}</span>
+                    <span className="time">{moment(published_at || created_at).format('YYYY-MM-DD HH:mm:ss')}</span>
                     { isReview != true && <div>
                         <Tooltip title="编辑">
                             <i className="icon-bianji1 iconfont" onClick={() => onEditVideo(props)}

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

@@ -32,6 +32,7 @@ function VideoUploadList (props) {
         }
         if (file.size > 200 * 1024 * 1024) {
             // 超过200m TODO
+            clearInput()
             showNotification(`视频大小超过${MAX_FILE_SIZE}M`)
             return;
         }
@@ -43,6 +44,7 @@ function VideoUploadList (props) {
             }
         })
         if (gotTheSameFileName) {
+            clearInput()
             showNotification(`你不能上传同一个视频文件名称，请重新选择。`)
             return;
         }
@@ -138,6 +140,10 @@ function VideoUploadList (props) {
             let result = uploader.addFile(file, null, null, null, userData)
         }
     }
+    function clearInput() {
+        const _input = document.getElementById('fileUpload')
+        _input.value = ''
+    }
     //  uploader.deleteFile(index);
     function cancelUpload(index, isSuccess) {
         // TODO 确定取消？
@@ -148,8 +154,7 @@ function VideoUploadList (props) {
         // else {
             // uploader.cancelFile(index)
         // }
-        const _input = document.getElementById('fileUpload')
-        _input.value = ''
+       clearInput()
 
         dispatch({type: 'removeVideo', index}) 
         // setVideoes([...videoes.splice(index, 1)])