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

需求

Browse Source
dev_video
caicai8 5 years ago
parent e5d1f6afbe
commit c813b6fd44
7 changed files with 219 additions and 87 deletions
Show Stats Download Patch File Download Diff File

7
public/react/src/modules/courses/Video/Live.js
Unescape View File

@ -7,10 +7,10 @@ import './video.css';
class Live extends Component{ class Live extends Component{
render(){ render(){
const { liveData , lives , successFunc , pageSize , changePage } = this.props; const { liveData , lives , successFunc , pageSize , changePage , page } = this.props;
return( return(
<div className="livePanel"> <div className="livePanel" style={{minHeight:`${lives && lives.length *165}px`}}>
{ {
lives && lives.length > 0 ? lives && lives.length > 0 ?
<React.Fragment> <React.Fragment>
@ -20,6 +20,7 @@ class Live extends Component{
lives.map((item,key)=>{ lives.map((item,key)=>{
return( return(
<LiveItem <LiveItem
key={key}
item={item} item={item}
{...this.props} {...this.props}
{...this.state} {...this.state}
@ -32,7 +33,7 @@ class Live extends Component{
{ {
liveData && liveData.total_count > pageSize && liveData && liveData.total_count > pageSize &&
<div className="mt30 mb50 edu-txt-center"> <div className="mt30 mb50 edu-txt-center">
<Pagination showQuickJumper total={liveData.total_count} pageSize={pageSize} onChange={(page)=>changePage(page,'live')}></Pagination> <Pagination showQuickJumper total={liveData.total_count} pageSize={pageSize} current={page} onChange={(page)=>changePage(page,'live')}></Pagination>
</div> </div>
} }
</React.Fragment> </React.Fragment>

42
public/react/src/modules/courses/Video/LiveItem.js
Unescape View File

@ -1,6 +1,7 @@
import React,{ Component } from "react"; import React,{ Component } from "react";
import { Switch } from 'antd'; import { Switch } from 'antd';
import { getImageUrl } from 'educoder'; import { getImageUrl } from 'educoder';
import { WordsBtn } from 'educoder';
import axios from 'axios'; import axios from 'axios';
class LiveItem extends Component{ class LiveItem extends Component{
@ -19,10 +20,33 @@ class LiveItem extends Component{
console.log(error); console.log(error);
}) })
} }
deleteLive=(id)=>{
this.props.confirm({
content: '是否确认删除?',
onOk: () => {
const url = `/live_links/${id}.json`;
axios.delete(url).then(result=>{
if(result){
this.props.showNotification(`删除成功!`);
const { successFunc } = this.props;
successFunc && successFunc(1);
}
}).catch(error=>{
console.log(error);
})
},
onCancel() {
console.log('Cancel');
},
});
}
render(){ render(){
const { item } = this.props; const { key, item , setLiveId } = this.props;
return( return(
<div className="liveItem"> <div className="liveItem" key={key}>
<div className="lineMiddle livesMain"> <div className="lineMiddle livesMain">
<span className="lineMiddle"> <span className="lineMiddle">
<img alt={`${item.author_name}`} className="liveAuthor" src={getImageUrl(`images/${item.author_img}`)}/> <img alt={`${item.author_name}`} className="liveAuthor" src={getImageUrl(`images/${item.author_img}`)}/>
@ -30,8 +54,8 @@ class LiveItem extends Component{
<span className={item.on_status?"labels living":"labels lived"}>{item.on_status?'已开播':'未开播'}</span> <span className={item.on_status?"labels living":"labels lived"}>{item.on_status?'已开播':'未开播'}</span>
</span> </span>
{ {
item.op_auth && item.op_auth ?
<Switch checkedChildren="on" unCheckedChildren="off" defaultChecked={item.on_status} onChange={(flag,event)=>this.changeStatus(flag,event,item.id)}></Switch> <Switch checkedChildren="on" key={key} className="switchStyle" unCheckedChildren="off" defaultChecked={item.on_status} onChange={(flag,event)=>this.changeStatus(flag,event,item.id)}></Switch>:""
} }
</div> </div>
<div className="lineMiddle mt15"> <div className="lineMiddle mt15">
@ -45,6 +69,16 @@ class LiveItem extends Component{
<span className="btns ect">进入</span> <span className="btns ect">进入</span>
} }
</div> </div>
<p className="lineMiddle livesMain mt15 font-12">
<span className="color-grey-9">创建时间：{item.created_at}</span>
{
item.op_auth ?
<span>
<WordsBtn style="grey" onClick={()=>setLiveId(item.id)}>编辑</WordsBtn>
<WordsBtn style="grey" className="ml30" onClick={()=>this.deleteLive(item.id)}>删除</WordsBtn>
</span>:""
}
</p>
</div> </div>
) )
} }

144
public/react/src/modules/courses/Video/LiveNew.js
Unescape View File

@ -1,5 +1,5 @@
import React,{ Component } from "react"; import React,{ Component } from "react";
import { Modal , Form , Input } from 'antd'; import { Modal , Form , Input , Spin } from 'antd';
import './video.css'; import './video.css';
import axios from 'axios'; import axios from 'axios';
@ -7,25 +7,83 @@ const { TextArea } = Input;
class LiveNew extends Component{ class LiveNew extends Component{
constructor(props){
super(props);
this.state={
isSpining:true
}
}
componentDidUpdate=(prevState)=>{
if(prevState && prevState.liveId !== this.props.liveId){
this.checkType();
}
}
checkType=()=>{
const { liveId } = this.props;
if(liveId){
const url =`/live_links/${liveId}/edit.json`;
axios.get(url).then(result=>{
if(result){
this.props.form.setFieldsValue({
url:result.data.url,
description:result.data.description,
})
}
})
}
this.setState({
isSpining:false
})
}
handleSubmit=()=>{ handleSubmit=()=>{
this.props.form.validateFields((err, values) => { this.props.form.validateFields((err, values) => {
if(!err){ if(!err){
const CourseId=this.props.match.params.coursesId; const { liveId } = this.props;
const url = `/courses/${CourseId}/live_links.json`; if(liveId){
axios.post(url,{ // 修改
...values this.updateFunc(liveId,values);
}).then(result=>{ }else{
if(result){ this.creatFunc(values);
this.props.showNotification("添加成功!"); }
const { setliveVisibel } = this.props;
setliveVisibel && setliveVisibel(false,true);
}
}).catch(error=>{
console.log(error);
})
} }
}) })
} }
// 修改
updateFunc=(id,values)=>{
const url = `/live_links/${id}.json`;
axios.put(url,{
...values
}).then(result=>{
if(result){
this.props.showNotification("修改成功!");
const { setliveVisibel } = this.props;
setliveVisibel && setliveVisibel(false,true);
}
}).catch(error=>{
console.log(error);
})
}
// 新增
creatFunc=(values)=>{
const CourseId=this.props.match.params.coursesId;
const url = `/courses/${CourseId}/live_links.json`;
axios.post(url,{
...values
}).then(result=>{
if(result){
this.props.showNotification("添加成功!");
const { setliveVisibel } = this.props;
setliveVisibel && setliveVisibel(false,true);
}
}).catch(error=>{
console.log(error);
})
}
validateDesc= (rule, value, callback) => { validateDesc= (rule, value, callback) => {
if (value.length > 100) { if (value.length > 100) {
@ -44,8 +102,10 @@ class LiveNew extends Component{
} }
render(){ render(){
const { isSpining } = this.state;
const {getFieldDecorator} = this.props.form; const {getFieldDecorator} = this.props.form;
const { visible } = this.props; const { visible } = this.props;
return( return(
<Modal <Modal
visible={visible} visible={visible}
@ -55,34 +115,36 @@ class LiveNew extends Component{
closable={false} closable={false}
className="liveModal" className="liveModal"
> >
<div className="task-popup-content"> <Spin spinning={isSpining}>
<Form onSubmit={this.handleSubmit}> <div className="task-popup-content">
<Form.Item label={`直播链接`}> <Form onSubmit={this.handleSubmit}>
{getFieldDecorator('url', { <Form.Item label={`直播链接`}>
rules: [{required: true, message: "请输入第三方直播链接"}], {getFieldDecorator('url', {
})( rules: [{required: true, message: "请输入第三方直播链接"}],
<Input placeholder="请输入第三方直播链接，如：腾讯课堂播放链接等。" /> })(
)} <Input placeholder="请输入第三方直播链接，如：腾讯课堂播放链接等。" />
</Form.Item> )}
<Form.Item label={`直播说明`}> </Form.Item>
{getFieldDecorator('description', { <Form.Item label={`直播说明`}>
rules: [{ {getFieldDecorator('description', {
validator: this.validateDesc, rules: [{
}], validator: this.validateDesc,
})( }],
<TextArea rows={4} placeholder="可在此介绍开播具体事项，如开播时间安排等。" /> })(
)} <TextArea rows={4} placeholder="可在此介绍开播具体事项，如开播时间安排等。" />
</Form.Item> )}
<p className="flex-middle" style={{justifyContent:"space-between"}}> </Form.Item>
<span>EduCoder推荐您使用<a href="https://ke.qq.com/" target="_blank" className="color-blue">腾讯课堂</a>进行直播</span> <p className="flex-middle" style={{justifyContent:"space-between"}}>
<a href="https://pub.idqqimg.com/pc/misc/files/20200204/2e4cb765bef54f0c919c0ab8ab79d969.pdf" target="_blank" className="color-blue">操作指引</a> <span>EduCoder推荐您使用<a href="https://ke.qq.com/" target="_blank" className="color-blue">腾讯课堂</a>进行直播</span>
</p> <a href="https://pub.idqqimg.com/pc/misc/files/20200204/2e4cb765bef54f0c919c0ab8ab79d969.pdf" target="_blank" className="color-blue">操作指引</a>
</Form> </p>
<div className="clearfix mt30 edu-txt-center"> </Form>
<a onClick={this.cancelNew} className="task-btn mr30">取消</a> <div className="clearfix mt30 edu-txt-center">
<a type="submit" onClick={this.handleSubmit} className="task-btn task-btn-orange">确定</a> <a onClick={this.cancelNew} className="task-btn mr30">取消</a>
<a type="submit" onClick={this.handleSubmit} className="task-btn task-btn-orange">确定</a>
</div>
</div> </div>
</div> </Spin>
</Modal> </Modal>
) )
} }

6
public/react/src/modules/courses/Video/Video.js
Unescape View File

@ -133,14 +133,14 @@ class Video extends Component{
} }
render(){ render(){
const { count , visible , videoVisible , videoId } = this.state; const { visible , videoVisible , videoId } = this.state;
const CourseId=this.props.match.params.coursesId; const CourseId=this.props.match.params.coursesId;
const login=this.props.user&&this.props.user.login; const login=this.props.user&&this.props.user.login;
const _inputValue = videoId && this.getCopyText(videoId.file_url, videoId.cover_url); const _inputValue = videoId && this.getCopyText(videoId.file_url, videoId.cover_url);
const { admin , is_teacher ,business} = this.props.user; const { admin , is_teacher ,business} = this.props.user;
const { videos , upload , uploadVideo , videoData , changePage ,pageSize } = this.props; const { videos , upload , uploadVideo , videoData , changePage ,pageSize ,page } = this.props;
const operation = admin || business || (is_teacher && this.props.checkIfProfessionalCertification()) const operation = admin || business || (is_teacher && this.props.checkIfProfessionalCertification())
return( return(
@ -209,7 +209,7 @@ class Video extends Component{
{ {
videoData && videoData.count > pageSize && videoData && videoData.count > pageSize &&
<div className="mt30 mb50 edu-txt-center"> <div className="mt30 mb50 edu-txt-center">
<Pagination showQuickJumper total={videoData.count} pageSize={pageSize} onChange={(page)=>changePage(page,'video')}></Pagination> <Pagination showQuickJumper total={videoData.count} current={page} pageSize={pageSize} onChange={(page)=>changePage(page,'video')}></Pagination>
</div> </div>
} }
</React.Fragment> </React.Fragment>

59
public/react/src/modules/courses/Video/VideoIndex.js
Unescape View File

@ -28,6 +28,9 @@ class VideoIndex extends Component{
lives:undefined, lives:undefined,
liveData:undefined, liveData:undefined,
my_liveId:undefined,
liveId:undefined,
liveVisible:false liveVisible:false
} }
} }
@ -50,6 +53,10 @@ class VideoIndex extends Component{
} }
// 获取直播列表 // 获取直播列表
getLiveList=(page)=>{ getLiveList=(page)=>{
this.setState({
lives:undefined,
isSpining:true
})
const CourseId=this.props.match.params.coursesId; const CourseId=this.props.match.params.coursesId;
const url = `/courses/${CourseId}/live_links.json`; const url = `/courses/${CourseId}/live_links.json`;
axios.get(url,{ axios.get(url,{
@ -62,7 +69,9 @@ class VideoIndex extends Component{
this.setState({ this.setState({
liveData:result.data, liveData:result.data,
lives:result.data.lives, lives:result.data.lives,
isSpining:false isSpining:false,
my_liveId:result.data.my_live_id,
liveId:result.data.my_live_id
}) })
} }
}).catch(error=>{ }).catch(error=>{
@ -111,13 +120,13 @@ class VideoIndex extends Component{
onEditVideo=(item)=>{ onEditVideo=(item)=>{
let videoId = { let videoId = {
videoId: item.id, videoId: item.id,
title: item.title title: item.title
} }
this.setState({ this.setState({
videoId, videoId,
}) })
this.setVisible(true); this.setVisible(true);
} }
uploadVideo=(upload)=>{ uploadVideo=(upload)=>{
this.setState({ this.setState({
@ -132,7 +141,8 @@ class VideoIndex extends Component{
if (admin || business || (is_teacher && this.props.checkIfProfessionalCertification())) { if (admin || business || (is_teacher && this.props.checkIfProfessionalCertification())) {
this.setState({ this.setState({
type:"video", type:"video",
upload:true upload:true,
page:1
}) })
} else { } else {
this.props.showProfessionalCertificationDialog(); this.props.showProfessionalCertificationDialog();
@ -140,12 +150,20 @@ class VideoIndex extends Component{
} }
// 直播设置后回调的方法 // 直播设置后回调的方法
successFunc=()=>{ // successFunc=()=>{
// this.setState({
// type:"live",
// page:1
// })
// this.checkType("live",1);
// }
// 直播设置
liveSetting=()=>{
const { my_liveId } = this.state;
this.setState({ this.setState({
type:"live", liveId:my_liveId
page:1
}) })
this.checkType("live",1); this.setliveVisibel(true);
} }
//直播设置弹框 //直播设置弹框
setliveVisibel=(flag,changetypeFlag)=>{ setliveVisibel=(flag,changetypeFlag)=>{
@ -156,13 +174,21 @@ class VideoIndex extends Component{
this.checkType("live",1); this.checkType("live",1);
} }
} }
// 列表-编辑（修改传到编辑的id）
setLiveId=(id)=>{
this.setState({
liveId:id
})
this.setliveVisibel(true);
}
render(){ render(){
const { videos , upload , videoData , type , liveData , lives , liveVisible , isSpining } = this.state; const { videos , upload , videoData , type , liveData , lives , page , liveVisible , isSpining , liveId } = this.state;
const { admin , is_teacher } = this.props.user; const { admin , is_teacher } = this.props.user;
return( return(
<React.Fragment> <React.Fragment>
<LivesNew <LivesNew
visible={liveVisible} visible={liveVisible}
liveId={liveId}
setliveVisibel={this.setliveVisibel} setliveVisibel={this.setliveVisibel}
{...this.props} {...this.props}
{...this.state} {...this.state}
@ -185,7 +211,7 @@ class VideoIndex extends Component{
: :
<WordsBtn style="blue" className="font-16" onClick={this.toUpload}>上传视频</WordsBtn> <WordsBtn style="blue" className="font-16" onClick={this.toUpload}>上传视频</WordsBtn>
} }
<WordsBtn style="blue" className="font-16 ml30" onClick={()=>this.setliveVisibel(true)}>直播设置</WordsBtn> <WordsBtn style="blue" className="font-16 ml30" onClick={this.liveSetting}>直播设置</WordsBtn>
</li> </li>
} }
</div> </div>
@ -196,6 +222,7 @@ class VideoIndex extends Component{
<Videos <Videos
upload={upload} upload={upload}
videos={videos} videos={videos}
page={page}
data={videoData} data={videoData}
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
uploadVideo={this.uploadVideo} uploadVideo={this.uploadVideo}
@ -208,9 +235,11 @@ class VideoIndex extends Component{
<Lives <Lives
lives={lives} lives={lives}
liveData={liveData} liveData={liveData}
page={page}
pageSize={LIVE_PAGE_SIZE} pageSize={LIVE_PAGE_SIZE}
successFunc={this.getLiveList} successFunc={this.getLiveList}
changePage={this.changePage} changePage={this.changePage}
setLiveId={this.setLiveId}
{...this.props} {...this.props}
{...this.state} {...this.state}
></Lives> ></Lives>

8
public/react/src/modules/courses/Video/video.css
Unescape View File

@ -83,8 +83,8 @@
border-radius: 16px; border-radius: 16px;
} }
.labels.living{ .labels.living{
border:1px solid #FF5555; border:1px solid #25C03B;
color: #FF5555; color: #25C03B;
} }
.labels.lived{ .labels.lived{
border:1px solid #999999; border:1px solid #999999;
@ -117,7 +117,9 @@
line-clamp: 2; line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.switchStyle.ant-switch-checked{
background-color: #25C03B;
}
.liveModal .ant-modal-body{ .liveModal .ant-modal-body{
padding:20px; padding:20px;
} }

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

@ -4,7 +4,7 @@ import { getUrl2, isDev, CBreadcrumb, ActionBtn, ThemeContext } from 'educoder'
import axios from 'axios' import axios from 'axios'
import VideoUpload from './VideoUpload' import VideoUpload from './VideoUpload'
import { Button } from 'antd' import { Button, Spin } from 'antd'
import { getUploader } from './AliyunUploaderManager' import { getUploader } from './AliyunUploaderManager'
import { reducer, initialState } from './VideoReducer' import { reducer, initialState } from './VideoReducer'
@ -23,7 +23,8 @@ function VideoUploadList (props) {
// const [videos, setvideos] = 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)
const [couldRouteNav, setCouldRouteNav] = useState(false) const [couldRouteNav, setCouldRouteNav] = useState(false);
const [loading,setLoading] = useState(false);
useEffect(() => { useEffect(() => {
setCouldRouteNav(false); setCouldRouteNav(false);
@ -96,13 +97,14 @@ function VideoUploadList (props) {
var userData = '{"Vod":{}}' var userData = '{"Vod":{}}'
if (!uploader) { if (!uploader) {
getUploader(username, getUploader(username,
// Object.assign(uploaderOptions,
{ {
// 重新创建 才会用最新的 dispatch // 重新创建 才会用最新的 dispatch
create: !uploader, create: !uploader,
addFileSuccess: (uploadInfo) => { addFileSuccess: (uploadInfo) => {
const file = uploadInfo.file setLoading(true);
const file = uploadInfo.file;
console.log('addFileSuccess', uploadInfo) console.log('addFileSuccess', uploadInfo)
// const newvideos = [...videos, { // const newvideos = [...videos, {
// name: file.name, // name: file.name,
@ -121,7 +123,8 @@ function VideoUploadList (props) {
dispatch({type: 'addVideo', uploadInfo}) dispatch({type: 'addVideo', uploadInfo})
}, },
onUploadProgress: (uploadInfo, totalSize, progress) => { onUploadProgress: (uploadInfo, totalSize, progress) => {
setLoading(false);
console.log("upload",uploadInfo);
var progressPercent = Math.ceil(progress * 100) var progressPercent = Math.ceil(progress * 100)
// let _index = -1; // let _index = -1;
@ -401,19 +404,20 @@ function VideoUploadList (props) {
}}>选择您要上传的视频</div> }}>选择您要上传的视频</div>
{protocolLine} {protocolLine}
</div>} </div>}
<Spin spinning={loading}>
<div> <div>
{state.videos.map((item, vIndex) => { {state.videos.map((item, vIndex) => {
return ( return (
<VideoUpload {...props} {...item} className="" <VideoUpload {...props} {...item} className=""
cancelUpload={cancelUpload} cancelUpload={cancelUpload}
onTitleChange={onTitleChange} onTitleChange={onTitleChange}
key={vIndex} key={vIndex}
index={vIndex} index={vIndex}
></VideoUpload> ></VideoUpload>
) )
})} })}
</div> </div>
</Spin>
{state.videos && state.videos.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> */}

Write Preview
Loading…
Cancel
Save