|
|
import React,{ Component } from "react";
|
|
|
import { Modal , Form , Input , Spin , Select , AutoComplete , DatePicker , InputNumber } from 'antd';
|
|
|
import locale from 'antd/lib/date-picker/locale/zh_CN';
|
|
|
import moment from 'moment';
|
|
|
import { handleDateString } from 'educoder';
|
|
|
|
|
|
import './video.css';
|
|
|
import axios from 'axios';
|
|
|
|
|
|
const { TextArea } = Input;
|
|
|
const { Option } = Select;
|
|
|
const array=['腾讯课堂','斗鱼直播','Bilibili','威佰通','zoom'];
|
|
|
|
|
|
function range(start, end) {
|
|
|
const result = [];
|
|
|
for (let i = start; i < end; i++) {
|
|
|
result.push(i);
|
|
|
}
|
|
|
return result;
|
|
|
}
|
|
|
function disabledDateTime() {
|
|
|
return {
|
|
|
disabledMinutes: () => range(1, 30).concat(range(31, 60)),
|
|
|
};
|
|
|
}
|
|
|
function disabledDate(current) {
|
|
|
return current && current < moment().endOf('day').subtract(1, 'days');
|
|
|
}
|
|
|
|
|
|
|
|
|
class LiveNew extends Component{
|
|
|
|
|
|
constructor(props){
|
|
|
super(props);
|
|
|
this.state={
|
|
|
isSpining:false,
|
|
|
beginTime:undefined,
|
|
|
wei_flag:undefined
|
|
|
}
|
|
|
}
|
|
|
|
|
|
componentDidMount=()=>{
|
|
|
this.checkType();
|
|
|
}
|
|
|
|
|
|
componentDidUpdate=(prevState)=>{
|
|
|
if(prevState && prevState.liveId !== this.props.liveId){
|
|
|
this.setState({
|
|
|
isSpining:true
|
|
|
})
|
|
|
this.checkType();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
checkType=()=>{
|
|
|
const { liveId } = this.props;
|
|
|
this.clearAll();
|
|
|
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,
|
|
|
platform:result.data.platform || "腾讯课堂",
|
|
|
duration:result.data.duration,
|
|
|
course_name:result.data.course_name
|
|
|
})
|
|
|
this.setState({
|
|
|
beginTime:result.data.live_time && moment(result.data.live_time,"YYYY-MM-DD HH:mm"),
|
|
|
wei_flag:result.data.platform && (result.data.platform === "威佰通"||result.data.platform === "zoom")
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
this.setState({
|
|
|
isSpining:false
|
|
|
})
|
|
|
}
|
|
|
|
|
|
handleSubmit=()=>{
|
|
|
this.props.form.validateFields((err, values) => {
|
|
|
if(!err){
|
|
|
this.setState({
|
|
|
isSpining:true
|
|
|
})
|
|
|
const { liveId } = this.props;
|
|
|
if(liveId){
|
|
|
// 修改
|
|
|
this.updateFunc(liveId,values);
|
|
|
}else{
|
|
|
this.creatFunc(values);
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
// 修改
|
|
|
updateFunc=(id,values)=>{
|
|
|
const url = `/live_links/${id}.json`;
|
|
|
const { beginTime } = this.state;
|
|
|
axios.put(url,{
|
|
|
...values,
|
|
|
live_time:beginTime
|
|
|
}).then(result=>{
|
|
|
if(result){
|
|
|
this.props.showNotification("修改成功!");
|
|
|
const { setliveVisibel } = this.props;
|
|
|
setliveVisibel && setliveVisibel(false,true);
|
|
|
}
|
|
|
this.setState({
|
|
|
isSpining:false
|
|
|
})
|
|
|
}).catch(error=>{
|
|
|
this.setState({
|
|
|
isSpining:false
|
|
|
})
|
|
|
console.log(error);
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// 新增
|
|
|
creatFunc=(values)=>{
|
|
|
const CourseId=this.props.match.params.coursesId;
|
|
|
const url = `/courses/${CourseId}/live_links.json`;
|
|
|
const { beginTime } = this.state;
|
|
|
axios.post(url,{
|
|
|
...values,
|
|
|
live_time:beginTime
|
|
|
}).then(result=>{
|
|
|
if(result){
|
|
|
this.props.showNotification("添加成功!");
|
|
|
const { setliveVisibel } = this.props;
|
|
|
setliveVisibel && setliveVisibel(false,true);
|
|
|
}
|
|
|
this.setState({
|
|
|
isSpining:false
|
|
|
})
|
|
|
}).catch(error=>{
|
|
|
this.setState({
|
|
|
isSpining:false
|
|
|
})
|
|
|
console.log(error);
|
|
|
})
|
|
|
}
|
|
|
|
|
|
validateDesc= (rule, value, callback) => {
|
|
|
if(!value){
|
|
|
callback();
|
|
|
}
|
|
|
if (value.length > 100) {
|
|
|
callback("直播说明不能超过100个字！");
|
|
|
}else{
|
|
|
callback();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
cancelNew=()=>{
|
|
|
const { setliveVisibel } = this.props;
|
|
|
this.clearAll();
|
|
|
setliveVisibel && setliveVisibel(false);
|
|
|
}
|
|
|
|
|
|
clearAll=()=>{
|
|
|
this.props.form.setFieldsValue({
|
|
|
course_name:undefined,
|
|
|
platform:"腾讯课堂",
|
|
|
url:undefined,
|
|
|
description:undefined,
|
|
|
duration:undefined
|
|
|
})
|
|
|
this.setState({
|
|
|
beginTime:undefined,
|
|
|
wei_flag:false
|
|
|
})
|
|
|
}
|
|
|
|
|
|
onChangeTime=(data,dateString)=>{
|
|
|
this.setState({
|
|
|
beginTime:handleDateString(dateString)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
ChangePlatform=(e)=>{
|
|
|
if(e === "威佰通"||e==="zoom"){
|
|
|
this.setState({
|
|
|
wei_flag:true
|
|
|
})
|
|
|
}else{
|
|
|
this.setState({
|
|
|
wei_flag:false
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
render(){
|
|
|
const { isSpining , beginTime , wei_flag } = this.state;
|
|
|
const {getFieldDecorator} = this.props.form;
|
|
|
const { visible } = this.props;
|
|
|
|
|
|
const dataSource = array.map((item,key)=>{
|
|
|
return(
|
|
|
<Option value={item}>{item}</Option>
|
|
|
)
|
|
|
})
|
|
|
return(
|
|
|
<Modal
|
|
|
visible={visible}
|
|
|
width="560px"
|
|
|
title={'添加直播'}
|
|
|
footer={null}
|
|
|
closable={false}
|
|
|
className="liveModal"
|
|
|
>
|
|
|
<Spin spinning={isSpining}>
|
|
|
<style>
|
|
|
{`
|
|
|
.ant-select-dropdown-menu-item{
|
|
|
text-align:center;
|
|
|
padding: 10px 0px;
|
|
|
border-bottom: 1px solid #eee;
|
|
|
}
|
|
|
.ant-select-dropdown-menu-item:last-child{
|
|
|
border-bottom:none;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</style>
|
|
|
<div className="task-popup-content">
|
|
|
<Form onSubmit={this.handleSubmit}>
|
|
|
<Form.Item label={`直播课程`}>
|
|
|
{getFieldDecorator('course_name', {
|
|
|
rules: [{required: true, message: "请输入课程名称"}],
|
|
|
})(
|
|
|
<Input placeholder="请输入课程名称" />
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
<Form.Item label={`直播平台`}>
|
|
|
{getFieldDecorator('platform', {
|
|
|
rules: [{required: true, message: "请选择直播平台"}],
|
|
|
})(
|
|
|
<AutoComplete
|
|
|
placeholder="请选择或输入直播平台名称"
|
|
|
onChange={this.ChangePlatform}
|
|
|
dataSource={dataSource}
|
|
|
className="plateAutoComplete"
|
|
|
>
|
|
|
</AutoComplete>
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
<Form.Item label={wei_flag?`会议号`:`直播链接`}>
|
|
|
{getFieldDecorator('url', {
|
|
|
rules: [],
|
|
|
})(
|
|
|
<Input placeholder={wei_flag?`请输入会议号`:"请输入第三方直播链接，如：腾讯课堂播放链接等。"} />
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
<div className="flex-bottom">
|
|
|
<div className="flex1">
|
|
|
<p className="ant-col ant-form-item-label color-grey-3 font-16 setStyle">开播时间</p>
|
|
|
<DatePicker
|
|
|
dropdownClassName="hideDisable"
|
|
|
className="timeStyle mb20"
|
|
|
placeholder="如：2020/02/02 12:00"
|
|
|
style={{width:"220px"}}
|
|
|
showTime={{ format: 'HH:mm' }}
|
|
|
locale={locale}
|
|
|
format="YYYY-MM-DD HH:mm"
|
|
|
showToday={false}
|
|
|
disabledTime={disabledDateTime}
|
|
|
disabledDate={disabledDate}
|
|
|
value={beginTime && moment(beginTime,"YYYY-MM-DD HH:mm")}
|
|
|
onChange={this.onChangeTime}
|
|
|
></DatePicker>
|
|
|
</div>
|
|
|
<Form.Item label={`直播预计时长`}>
|
|
|
{getFieldDecorator('duration', {
|
|
|
rules: [],
|
|
|
})(
|
|
|
<InputNumber placeholder="请输入直播时长" style={{width:"220px"}}/>
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
<span className="mb20 ml5">分钟</span>
|
|
|
</div>
|
|
|
<Form.Item label={`直播说明`}>
|
|
|
{getFieldDecorator('description', {
|
|
|
rules: [{
|
|
|
validator: this.validateDesc,
|
|
|
}],
|
|
|
})(
|
|
|
<TextArea rows={4} placeholder="可在此介绍开播具体事项，如开播时间安排等。" />
|
|
|
)}
|
|
|
</Form.Item>
|
|
|
|
|
|
</Form>
|
|
|
<div className="clearfix mt30 edu-txt-center">
|
|
|
<a onClick={this.cancelNew} className="task-btn mr30">取消</a>
|
|
|
<a type="submit" onClick={this.handleSubmit} className="task-btn task-btn-orange">确定</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Spin>
|
|
|
</Modal>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
const WrappedLiveNew = Form.create({name: 'LiveNew'})(LiveNew);
|
|
|
export default WrappedLiveNew;
|
