s

public/react/src/modules/user/usersInfo/Infos.js

@@ -298,7 +298,7 @@ class Infos extends Component{
             ></Route>
 
             {/* 项目 */}
-            <Route exact path="/users/:username/videoes"
+            <Route exact path="/users/:username/videos"
               render={
                 (props) => (<InfosVideo {...this.props} {...props} {...this.state} {..._commonProps}/>)
               }

public/react/src/modules/user/usersInfo/InfosBanner.js

@@ -101,10 +101,10 @@ class InfosBanner extends Component{
                 to={`/users/${username}/package`}>众包</Link>
             </li>
             {((is_current && current_user && current_user.is_teacher ) || current_user && current_user.admin) 
-            && <li className={`${moduleName == 'videoes' ? 'active' : '' }`}>
+            && <li className={`${moduleName == 'videos' ? 'active' : '' }`}>
               <Link
-                onClick={() => this.setState({moduleName: 'videoes'})}
-                to={`/users/${username}/videoes`}>视频</Link>
+                onClick={() => this.setState({moduleName: 'videos'})}
+                to={`/users/${username}/videos`}>视频</Link>
             </li>}
           </div>
         </div>

public/react/src/modules/user/usersInfo/InfosIndex.js

@@ -52,12 +52,12 @@ class InfosIndex extends Component{
 
 
             {/* 视频发布 */}
-            <Route exact path="/users/:username/videoes/upload"
+            <Route exact path="/users/:username/videos/upload"
                 render={
                     (props) => (<VideoUploadList {...this.props} {...props} {...this.state} />)
                 }
             ></Route>
-            <Route exact path="/users/:username/videoes/success"
+            <Route exact path="/users/:username/videos/success"
                 render={
                     (props) => (<VideoPublishSuccess {...this.props} {...props} {...this.state} />)
                 }

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

@@ -93,6 +93,8 @@ function doCreateUploader (options) {
                 
                 axios.put(refreshUrl, {
                     video_id: uploadInfo.videoId,
+                    title: fileName,
+                    file_name: fileName
                 }).then((response) => {
                     if (response.data.status == -1) {
                         options.onUploadError && options.onUploadError(uploadInfo)

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

@@ -14,10 +14,10 @@ function EditVideoModal (props) {
     const _title = form.getFieldsValue().title;
 
     function toList() {
-        history.push(`/users/${username}/videoes`)
+        history.push(`/users/${username}/videos`)
     }
     function toUpload() {
-        history.push(`/users/${username}/videoes/upload`)
+        history.push(`/users/${username}/videos/upload`)
     }
     function onOk() {
         form.validateFieldsAndScroll((err, values) => {

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

@@ -50,8 +50,8 @@ const _items=[
     {key: 'published_at-asc', name: '最早上传'},
 ]
 function InfoVideo (props) {
-    const [videoes, setVideoes] = useState(undefined)
-    const [reviewVideoes, setReviewVideoes] = useState(undefined)
+    const [videos, setvideos] = useState(undefined)
+    const [reviewvideos, setReviewvideos] = useState(undefined)
     const [count, setCount] = useState(0)
     const [loading, setLoading] = useState(true)
     const [sortKey, setSortKey] = useState(_items[0].key)
@@ -70,13 +70,13 @@ function InfoVideo (props) {
 
     function toUpload() {
         if (props.current_user.admin || (props.current_user.is_teacher && props.checkIfProfessionalCertification())) {
-            history.push(`/users/${username}/videoes/upload`)
+            history.push(`/users/${username}/videos/upload`)
         } else {
             props.showProfessionalCertificationDialog()
         }
         
     }
-    function fetchVideoes() {
+    function fetchvideos() {
         const fetchUrl = `/users/${username}/videos.json`
         const sorts = sortKey.split('-')
         setLoading(true)
@@ -92,14 +92,14 @@ function InfoVideo (props) {
         .then((response) => {
             setLoading(false)
             if (response.data.videos) {
-                setVideoes(response.data.videos)
+                setvideos(response.data.videos)
                 setCount(response.data.count)
             }
         }).catch(() => {
 
         })
     }
-    function fetchReviewVideoes() {
+    function fetchReviewvideos() {
         const fetchUrl = `/users/${username}/videos/review.json`
         setLoading(true)
         axios.get(fetchUrl, { 
@@ -110,7 +110,7 @@ function InfoVideo (props) {
         .then((response) => {
             setLoading(false)
             if (response.data.videos) {
-                setReviewVideoes(response.data.videos)
+                setReviewvideos(response.data.videos)
                 setCount(response.data.count)
             }
         }).catch(() => {
@@ -119,14 +119,14 @@ function InfoVideo (props) {
     }
     
     useEffect(() => {
-        fetchVideoes()
+        fetchvideos()
     }, [pageObj.current, sortKey])
 
     useEffect(() => {
         if (categoryObj.category == 'all') {
-            fetchVideoes()
+            fetchvideos()
         } else {
-            fetchReviewVideoes()
+            fetchReviewvideos()
         }
     }, [categoryObj.category])
 
@@ -139,6 +139,8 @@ function InfoVideo (props) {
                 _clipboard = null;
             }
         } else {
+            videoEl.current && videoEl.current.play()
+
             setTimeout(() => {
                 if (!_clipboard) {
                     _clipboard = new ClipboardJS('.copybtn');
@@ -155,7 +157,7 @@ function InfoVideo (props) {
     }, [])
 
     function editSuccess() {
-        fetchVideoes()
+        fetchvideos()
     }
     
     function onEditVideo(item) {
@@ -201,6 +203,7 @@ function InfoVideo (props) {
                 width={800 - 1}
             >
                 <video 
+                    autoplay="true"
                     ref={videoEl}
                     src={videoId.file_url} controls="true" controlslist="nodownload">
                     您的浏览器不支持 video 标签。
@@ -285,9 +288,9 @@ function InfoVideo (props) {
             {categoryObj.category == 'all' ?
              <div className="itemWrap">
                 {
-                 videoes == undefined ? '' :   
-                 videoes.length  ? 
-                 videoes.map((item, index) => {
+                 videos == undefined ? '' :   
+                 videos.length  ? 
+                 videos.map((item, index) => {
                     return (<VideoInReviewItem
                         {...props}
 
@@ -306,9 +309,9 @@ function InfoVideo (props) {
             :
             <div className="itemWrap">
                 {
-                reviewVideoes == undefined ? '' :
-                reviewVideoes.length ? 
-                reviewVideoes.map((item, index) => {
+                reviewvideos == undefined ? '' :
+                reviewvideos.length ? 
+                reviewvideos.map((item, index) => {
                     return (<VideoInReviewItem
                         {...props}
 

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

@@ -38,10 +38,10 @@ function VideoInReviewItem (props) {
     }, [])
     const username = props.match.params.username
     function toList() {
-        history.push(`/users/${username}/videoes`)
+        history.push(`/users/${username}/videos`)
     }
     function toUpload() {
-        history.push(`/users/${username}/videoes/upload`)
+        history.push(`/users/${username}/videos/upload`)
     }
     return (
         <div className={`${isReview ? 'videoInReviewItem' : 'nItem'} videoItem`}>

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

@@ -10,10 +10,10 @@ function VideoUpload (props) {
     
     const username = props.match.params.username
     function toList() {
-        history.push(`/users/${username}/videoes`)
+        history.push(`/users/${username}/videos`)
     }
     function toUpload() {
-        history.push(`/users/${username}/videoes/upload`)
+        history.push(`/users/${username}/videos/upload`)
 
     }
     return (
@@ -22,7 +22,7 @@ function VideoUpload (props) {
                 className="mb26 mt16"
                 separator=" > "
                 items={[
-                    { to: `/users/${username}/videoes`, name:  '视频'},
+                    { to: `/users/${username}/videos`, name:  '视频'},
                     { name: '上传'}
                 ]}
             ></CBreadcrumb>

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

@@ -2,7 +2,7 @@ import update from 'immutability-helper'
 
 function find(state, action) {
     let _index = -1
-    state.videoes.some((item, index) => {
+    state.videos.some((item, index) => {
         // 同文件不同名字 fileHash也是一样的
         if (item.loaded != 100 && (action.uploadInfo.fileHash == item.fileHash && action.uploadInfo.file.name == item.name)) {
             _index = index
@@ -15,7 +15,7 @@ export function reducer(state, action) {
   switch (action.type) {
     case 'addVideo':
         const uploadInfo = action.uploadInfo
-        return {videoes: [...state.videoes, {
+        return {videos: [...state.videos, {
             name: uploadInfo.file.name,
             size: uploadInfo.file.size,
             type: uploadInfo.file.type,
@@ -29,14 +29,14 @@ export function reducer(state, action) {
         }]};
     case 'removeVideo': 
         return {
-            videoes: update(state.videoes, {$splice: [[action.index, 1]]}) 
+            videos: update(state.videos, {$splice: [[action.index, 1]]}) 
         }
     case 'updateProgress':
         let _index = find(state, action)
-        let newVideoes = state.videoes
+        let newvideos = state.videos
         // 删除先执行
         if (_index != -1) {
-            newVideoes = update(state.videoes, {[_index]: { 
+            newvideos = update(state.videos, {[_index]: { 
                 loaded: {$set: action.progressPercent},
 
                 videoId: {$set: action.uploadInfo.videoId},
@@ -44,21 +44,21 @@ export function reducer(state, action) {
                 fileHash: {$set: action.uploadInfo.fileHash}
             }})
         }
-        return {videoes: newVideoes};
+        return {videos: newvideos};
     case 'updateTitle':
         let _upadteIndex = action.index
 
-        let newVideoes2 = state.videoes
+        let newvideos2 = state.videos
         
         if (_upadteIndex != -1) {
-            newVideoes2 = update(state.videoes, {[_upadteIndex]: { 
+            newvideos2 = update(state.videos, {[_upadteIndex]: { 
                 title: {$set: action.title},
             }})
         }
-        return {videoes: newVideoes2};
+        return {videos: newvideos2};
     default:
       throw new Error();
   }
 }
 
-export const initialState = {videoes: []};
+export const initialState = {videos: []};

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

@@ -19,20 +19,23 @@ const MAX_FILE_SIZE = 200
 let noUploads = true
 function VideoUploadList (props) {
     
-    // const [videoes, setVideoes] = useState([]);
+    // const [videos, setvideos] = useState([]);
     const [state, dispatch] = useReducer(reducer, initialState);
     const theme = useContext(ThemeContext)
 
     useEffect(() => {
+        // Chrome removed support for custom message in ver 51
+        // https://stackoverflow.com/questions/38879742/is-it-possible-to-display-a-custom-message-in-the-beforeunload-popup
         window.addEventListener("beforeunload", beforeunload);
-
+        // window.onbeforeunload = beforeunload
         return () => {
             uploader = null;
+            // window.onbeforeunload = null;
             window.removeEventListener("beforeunload", beforeunload);
         }
     }, [])
     // TODO 闭包！
-    noUploads = (!state.videoes || state.videoes.length == 0);
+    noUploads = (!state.videos || state.videos.length == 0);
     function beforeunload(e) {
         if (noUploads) {
             return true;
@@ -62,7 +65,7 @@ function VideoUploadList (props) {
             return;
         }
         let gotTheSameFileName = false;
-        state.videoes.some((item) => {
+        state.videos.some((item) => {
             if (item.name == file.name) {
                 gotTheSameFileName = true;
                 return true;
@@ -86,7 +89,7 @@ function VideoUploadList (props) {
                 addFileSuccess: (uploadInfo) => {
                     const file = uploadInfo.file
                     console.log('addFileSuccess', uploadInfo)
-                    // const newVideoes = [...videoes, {
+                    // const newvideos = [...videos, {
                     //     name: file.name,
                     //     size: file.size,
                     //     type: file.type,
@@ -96,7 +99,7 @@ function VideoUploadList (props) {
                     //     videoId: uploadInfo.videoId, //   "719b82c875c34ac39f94feb145d25ad2"
                     //     loaded: 0
                     // }]
-                    // setVideoes(newVideoes)
+                    // setvideos(newvideos)
 
                     // files.push(file)
                     clearInput()
@@ -107,7 +110,7 @@ function VideoUploadList (props) {
                     var progressPercent = Math.ceil(progress * 100)
 
                     // let _index = -1;
-                    // videoes.some((item, index) => {
+                    // videos.some((item, index) => {
                     //     // addFileSuccess的时候没有fileHash
                     //     // if (uploadInfo.fileHash == item.fileHash) {
                     //     if (uploadInfo.file.name == item.name) {
@@ -119,7 +122,7 @@ function VideoUploadList (props) {
                     // TODO 这里不用reducer，会出现state被重置的问题
 
                     // if (_index == -1) {
-                    //     const newVideoes = [...videoes, {
+                    //     const newvideos = [...videos, {
                     //         name: file.name,
                     //         size: file.size,
                     //         type: file.type,
@@ -129,12 +132,12 @@ function VideoUploadList (props) {
                     //         videoId: uploadInfo.videoId, //   "719b82c875c34ac39f94feb145d25ad2"
                     //         loaded: progressPercent
                     //     }]
-                    //     setVideoes(newVideoes)
+                    //     setvideos(newvideos)
                     //     return;
                     // }
 
                     // //           exercise_questions : update(prevState.exercise_questions, {[index]: { isNew: {$set: false}}})
-                    // setVideoes(update(videoes, {[_index]: { loaded: {$set: progressPercent}}}))
+                    // setvideos(update(videos, {[_index]: { loaded: {$set: progressPercent}}}))
 
                     dispatch({type: 'updateProgress', uploadInfo, progressPercent})
                 },
@@ -179,14 +182,14 @@ function VideoUploadList (props) {
         uploader.deleteFile(index)
         if (isSuccess) {
             // uploader.deleteFile(index)
-            // deleteVideoInCloud(username, state.videoes[index].videoId)
+            // deleteVideoInCloud(username, state.videos[index].videoId)
         } else {
             // uploader.cancelFile(index)
         }
             
         clearInput()
         dispatch({type: 'removeVideo', index}) 
-        // setVideoes([...videoes.splice(index, 1)])
+        // setvideos([...videos.splice(index, 1)])
     }
     //  uploader.deleteFile(index);
     function cancelUpload(index, isSuccess) {
@@ -201,13 +204,13 @@ function VideoUploadList (props) {
         
     }
     function onPublish() {
-        if (state.videoes.length == 0) {
+        if (state.videos.length == 0) {
             showNotification('请先上传视频')
             return;
         }
         const publishUrl = `/users/${username}/videos/batch_publish.json`
         axios.post(publishUrl, {
-            videos: state.videoes.map(item => {
+            videos: state.videos.map(item => {
                 return {
                     video_id: item.videoId,
                     // todo
@@ -217,7 +220,7 @@ function VideoUploadList (props) {
         }).then((response) => {
            // to success page
            if (response.data.status == 0) {
-               history.push(`/users/${username}/videoes/success`)
+               history.push(`/users/${username}/videos/success`)
            }
         }).catch((error) => {
             console.log(error)
@@ -334,7 +337,7 @@ function VideoUploadList (props) {
                 className="mb26"
                 separator=" > "
                 items={[
-                    { to: `/users/${username}/videoes`, name:  '视频'},
+                    { to: `/users/${username}/videos`, name:  '视频'},
                     { name: '上传'}
                 ]}
             ></CBreadcrumb>
@@ -363,7 +366,7 @@ function VideoUploadList (props) {
                 </div>}
 
                 <div>
-                {state.videoes.map((item, vIndex) => {
+                {state.videos.map((item, vIndex) => {
                     return (
                         <VideoUpload {...props} {...item} className=""
                             cancelUpload={cancelUpload}
@@ -374,13 +377,13 @@ function VideoUploadList (props) {
                     )
                 })}
                 </div>
-                {state.videoes && state.videoes.length === MAX_FILE_COUNT && 
+                {state.videos && state.videos.length === MAX_FILE_COUNT && 
                 <div className="uploadTip">
                     <i className="iconfont icon-tishi" style={{color: '#FF6F6F', verticalAlign: 'text-bottom'}}></i>
                     <span>单次最多支持3个视频文件上传</span> 
                 </div>}
 
-                {(!noUploads && state.videoes.length < MAX_FILE_COUNT) && <ActionBtn className="publishBtn" onClick={() => document.getElementById('fileUpload').click()}
+                {(!noUploads && state.videos.length < MAX_FILE_COUNT) && <ActionBtn className="publishBtn" onClick={() => document.getElementById('fileUpload').click()}
                 >继续添加</ActionBtn>}
 
                 <div className={`description ${noUploads ? 'noUploads' : ''}`}>
@@ -391,7 +394,7 @@ function VideoUploadList (props) {
 
                 {!noUploads && <React.Fragment>
 
-                {/* {(state.videoes.length < MAX_FILE_COUNT) && <Button type="primary" icon="plus-square"
+                {/* {(state.videos.length < MAX_FILE_COUNT) && <Button type="primary" icon="plus-square"
                     onClick={() => { document.getElementById('fileUpload').click()}}
                     className="fr addVideoBtn"
                 >