m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

s

Browse Source
dev_unstable
hjm 6 years ago
parent fa17886de0
commit 819fd483c3
10 changed files with 68 additions and 60 deletions
Show Stats Download Patch File Download Diff File

2
public/react/src/modules/user/usersInfo/Infos.js
Unescape View File

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

6
public/react/src/modules/user/usersInfo/InfosBanner.js
Unescape View File

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

4
public/react/src/modules/user/usersInfo/InfosIndex.js
Unescape View File

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

2
public/react/src/modules/user/usersInfo/video/AliyunUploaderManager.js
Unescape View File

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

4
public/react/src/modules/user/usersInfo/video/EditVideoModal.js
Unescape View File

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

37
public/react/src/modules/user/usersInfo/video/InfosVideo.js
Unescape View File

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

4
public/react/src/modules/user/usersInfo/video/VideoInReviewItem.js
Unescape View File

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

6
public/react/src/modules/user/usersInfo/video/VideoPublishSuccess.js
Unescape View File

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

20
public/react/src/modules/user/usersInfo/video/VideoReducer.js
Unescape View File

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

43
public/react/src/modules/user/usersInfo/video/VideoUploadList.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save