parent
2abd97a217
commit
702b471d0b
@ -0,0 +1,68 @@
|
||||
import React, { Component } from 'react';
|
||||
import {Link} from 'react-router-dom';
|
||||
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
|
||||
|
||||
import { SnackbarHOC } from 'educoder';
|
||||
import { TPMIndexHOC } from '../../tpm/TPMIndexHOC';
|
||||
import { CNotificationHOC } from '../../courses/common/CNotificationHOC'
|
||||
|
||||
import Loadable from 'react-loadable';
|
||||
import Loading from '../../../Loading';
|
||||
|
||||
|
||||
const UsersInfo = Loadable({
|
||||
loader: () => import('./Infos'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
const VideoUploadList = Loadable({
|
||||
loader: () => import('./video/VideoUploadList'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
const $ = window.$;
|
||||
class InfosIndex extends Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state={
|
||||
data:undefined,
|
||||
}
|
||||
}
|
||||
componentDidMount =()=>{
|
||||
|
||||
}
|
||||
|
||||
|
||||
//判断是否看的是当前用户的个人主页
|
||||
componentDidUpdate =(prevProps)=> {
|
||||
|
||||
}
|
||||
render(){
|
||||
let {
|
||||
data ,
|
||||
}=this.state;
|
||||
return(
|
||||
<Switch {...this.props}>
|
||||
|
||||
{/* --------------------------------------------------------------------- */}
|
||||
|
||||
|
||||
{/* 视频发布 */}
|
||||
<Route exact path="/users/:username/videoes/upload"
|
||||
render={
|
||||
(props) => (<VideoUploadList {...this.props} {...props} {...this.state} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
|
||||
<Route path="/users/:username"
|
||||
render={
|
||||
(props) => (<UsersInfo {...this.props} {...props} {...this.state} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
</Switch>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default CNotificationHOC() ( SnackbarHOC() ( TPMIndexHOC(InfosIndex) ));
|
||||
@ -0,0 +1,36 @@
|
||||
import update from 'immutability-helper'
|
||||
|
||||
export function reducer(state, action) {
|
||||
switch (action.type) {
|
||||
case 'addVideo':
|
||||
const uploadInfo = action.uploadInfo
|
||||
return {videoes: [...state.videoes, {
|
||||
name: uploadInfo.file.name,
|
||||
size: uploadInfo.file.size,
|
||||
type: uploadInfo.file.type,
|
||||
|
||||
fileHash: uploadInfo.fileHash, // "ba1bbc53fdecd9eaaae479fbd9518442"
|
||||
state: uploadInfo.state, // "Uploading" "Ready" "Success"
|
||||
videoId: uploadInfo.videoId, // "719b82c875c34ac39f94feb145d25ad2"
|
||||
loaded: 0
|
||||
}]};
|
||||
case 'updateProgress':
|
||||
let _index = -1;
|
||||
state.videoes.some((item, index) => {
|
||||
// addFileSuccess的时候没有fileHash
|
||||
// if (uploadInfo.fileHash == item.fileHash) {
|
||||
if (action.uploadInfo.fileHash == item.fileHash || action.uploadInfo.file.name == item.name) {
|
||||
_index = index
|
||||
return true;
|
||||
}
|
||||
})
|
||||
return {videoes: update(state.videoes, {[_index]: {
|
||||
loaded: {$set: action.progressPercent},
|
||||
fileHash: {$set: action.uploadInfo.fileHash}
|
||||
}})};
|
||||
default:
|
||||
throw new Error();
|
||||
}
|
||||
}
|
||||
|
||||
export const initialState = {videoes: []};
|
||||
@ -0,0 +1,45 @@
|
||||
import React, { useState, useEffect, memo } from 'react';
|
||||
import { Progress, Input } from 'antd'
|
||||
import { getUrl2, isDev, CBreadcrumb, ActionBtn } from 'educoder'
|
||||
import axios from 'axios'
|
||||
|
||||
|
||||
const MAX_LENGTH = 60
|
||||
|
||||
/**
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
type: file.type,
|
||||
|
||||
fileHash: uploadInfo.fileHash, // "ba1bbc53fdecd9eaaae479fbd9518442"
|
||||
state: uploadInfo.state, // "Uploading"
|
||||
videoId: uploadInfo.videoId, // "719b82c875c34ac39f94feb145d25ad2"
|
||||
loaded: 0
|
||||
|
||||
*/
|
||||
function VideoUpload (props) {
|
||||
const { className, index, name, loaded, state, cancelUpload } = props;
|
||||
const [title, setTitle] = useState('')
|
||||
const username = props.match.params.username
|
||||
|
||||
function titleChange () {
|
||||
setTitle(e.target.value)
|
||||
}
|
||||
return (
|
||||
<div className={`videoUpload ${className}`}>
|
||||
<div className="filename">{index+1}. {name}</div>
|
||||
<div className="progress df">
|
||||
<Progress percent={loaded}
|
||||
status={state == "Uploading" ? "active" : ''}
|
||||
/>
|
||||
<ActionBtn className="cancelUpload" onClick={() => cancelUpload(index)}>取消上传</ActionBtn>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
export default VideoUpload
|
||||
Loading…
Reference in new issue