|
|
import React, {Component} from "react";
|
|
|
import {WordsBtn, on, trigger, publicSearchs} from 'educoder';
|
|
|
|
|
|
import {Menu, Spin} from 'antd';
|
|
|
|
|
|
import axios from 'axios';
|
|
|
import Videos from './Video';
|
|
|
import Lives from './Live';
|
|
|
import LivesNew from './LiveNew';
|
|
|
import VideoLink from './VideoLink';
|
|
|
import Videostatistics from '../videostatistics/Videostatistics';
|
|
|
import './video.css';
|
|
|
import '../css/Courses.css';
|
|
|
import '../publicNav/nav.css';
|
|
|
import Videostatisticscomtwo from '../videostatistics/component/Videostatisticscomtwo';
|
|
|
const PAGE_SIZE = 15;
|
|
|
const LIVE_PAGE_SIZE = 10;
|
|
|
const $ = window.$;
|
|
|
|
|
|
function getRight() {
|
|
|
var right = parseInt($(".-task-sidebar").css("right"));
|
|
|
return right === 0 ? 0 : right;
|
|
|
}
|
|
|
|
|
|
class VideoIndex extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
page: 1,
|
|
|
upload: false,
|
|
|
videos: undefined,
|
|
|
videoData: undefined,
|
|
|
otherLinkVisible: false,
|
|
|
type: "video",
|
|
|
isSpining: false,
|
|
|
|
|
|
lives: undefined,
|
|
|
liveData: undefined,
|
|
|
|
|
|
liveId: undefined,
|
|
|
|
|
|
liveVisible: false,
|
|
|
statistics: false,
|
|
|
myktid:null,
|
|
|
mytitle:''
|
|
|
}
|
|
|
}
|
|
|
|
|
|
checkType = (type, page) => {
|
|
|
this.setState({
|
|
|
type,
|
|
|
isSpining: true
|
|
|
})
|
|
|
if (type === "video") {
|
|
|
this.getList(page);
|
|
|
} else {
|
|
|
this.getLiveList(page);
|
|
|
}
|
|
|
}
|
|
|
Setmyktid=(id,title)=>{
|
|
|
const isAdmin = this.props&& this.props.isAdmin();
|
|
|
if(isAdmin===true){
|
|
|
this.setState({
|
|
|
myktid:id,
|
|
|
statistics:true,
|
|
|
mytitle:title,
|
|
|
})
|
|
|
}else{
|
|
|
this.setState({
|
|
|
statistics:true,
|
|
|
myktid:null,
|
|
|
mytitle:"",
|
|
|
|
|
|
})
|
|
|
}
|
|
|
|
|
|
}
|
|
|
componentDidMount = () => {
|
|
|
const {search} = this.props.location;
|
|
|
const {page} = this.state;
|
|
|
if (search && search === "?open=live") {
|
|
|
this.setState({
|
|
|
type: "live"
|
|
|
})
|
|
|
this.checkType("live", page);
|
|
|
} else {
|
|
|
if (search === "?open=new") {
|
|
|
this.setState({
|
|
|
upload: true
|
|
|
})
|
|
|
}
|
|
|
this.checkType("video", page);
|
|
|
}
|
|
|
}
|
|
|
componentDidUpdate = (prevProps) => {
|
|
|
try {
|
|
|
if (this.props.homedirectory !== prevProps.homedirectory) {
|
|
|
if(this.props.homedirectory ===true){
|
|
|
this.setState({
|
|
|
statistics:false,
|
|
|
myktid:null,
|
|
|
mytitle:"",
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}catch (e) {
|
|
|
|
|
|
}
|
|
|
|
|
|
if (this.props.match.params.videoId !== prevProps.match.params.videoId) {
|
|
|
this.setState({
|
|
|
upload: false,
|
|
|
})
|
|
|
const {page} = this.state;
|
|
|
this.checkType("video", page);
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
// 获取直播列表
|
|
|
getLiveList = (page) => {
|
|
|
const CourseId = this.props.match.params.coursesId;
|
|
|
const url = `/courses/${CourseId}/live_links.json`;
|
|
|
axios.get(url, {
|
|
|
params: {
|
|
|
page,
|
|
|
limit: LIVE_PAGE_SIZE
|
|
|
}
|
|
|
}).then(result => {
|
|
|
if (result) {
|
|
|
this.setState({
|
|
|
liveData: result.data,
|
|
|
lives: result.data.lives,
|
|
|
isSpining: false,
|
|
|
})
|
|
|
}
|
|
|
}).catch(error => {
|
|
|
console.log(error);
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// 获取视频列表
|
|
|
getList = (page) => {
|
|
|
const {coursesId, videoId} = this.props.match.params;
|
|
|
const fetchUrl = `/courses/${coursesId}/course_videos.json`;
|
|
|
axios.get(fetchUrl, {
|
|
|
params: {
|
|
|
page,
|
|
|
limit: PAGE_SIZE,
|
|
|
category_id: videoId
|
|
|
}
|
|
|
})
|
|
|
.then((response) => {
|
|
|
if (response) {
|
|
|
this.setState({
|
|
|
videos: response.data.videos,
|
|
|
videoData: response.data,
|
|
|
isSpining: false
|
|
|
})
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
console.log(error);
|
|
|
})
|
|
|
}
|
|
|
|
|
|
changeType = (e) => {
|
|
|
this.setState({
|
|
|
type: e.key,
|
|
|
upload: false,
|
|
|
page: 1
|
|
|
})
|
|
|
this.checkType(e.key, 1);
|
|
|
}
|
|
|
|
|
|
changePage = (page, type) => {
|
|
|
this.setState({
|
|
|
page
|
|
|
})
|
|
|
this.checkType(type, page);
|
|
|
}
|
|
|
|
|
|
onEditVideo = (item) => {
|
|
|
let videoId = {
|
|
|
videoId: item.id,
|
|
|
title: item.title
|
|
|
}
|
|
|
this.setState({
|
|
|
videoId,
|
|
|
})
|
|
|
this.setVisible(true);
|
|
|
}
|
|
|
uploadVideo = (upload) => {
|
|
|
|
|
|
this.setState({
|
|
|
upload,
|
|
|
isSpining: true
|
|
|
})
|
|
|
const {page} = this.state;
|
|
|
setTimeout(() => {
|
|
|
this.getList(page);
|
|
|
}, 500)
|
|
|
}
|
|
|
|
|
|
toUpload = () => {
|
|
|
const {admin, is_teacher, business} = this.props.user;
|
|
|
if (admin || business || (is_teacher && this.props.checkIfProfessionalCertification())) {
|
|
|
this.setState({
|
|
|
type: "video",
|
|
|
upload: true,
|
|
|
page: 1
|
|
|
})
|
|
|
} else {
|
|
|
this.props.showProfessionalCertificationDialog();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 直播设置后回调的方法
|
|
|
// successFunc=()=>{
|
|
|
// this.setState({
|
|
|
// type:"live",
|
|
|
// page:1
|
|
|
// })
|
|
|
// this.checkType("live",1);
|
|
|
// }
|
|
|
// 直播设置
|
|
|
liveSetting = () => {
|
|
|
this.setState({
|
|
|
liveId: undefined
|
|
|
})
|
|
|
this.setliveVisibel(true);
|
|
|
}
|
|
|
//直播设置弹框
|
|
|
setliveVisibel = (flag, changetypeFlag) => {
|
|
|
this.setState({
|
|
|
liveVisible: flag
|
|
|
})
|
|
|
if (flag === false) {
|
|
|
this.setState({
|
|
|
liveId: undefined
|
|
|
})
|
|
|
}
|
|
|
if (changetypeFlag) {
|
|
|
this.checkType("live", 1);
|
|
|
}
|
|
|
}
|
|
|
// 列表-编辑（修改传到编辑的id）
|
|
|
setLiveId = (id) => {
|
|
|
this.setState({
|
|
|
liveId: id
|
|
|
})
|
|
|
this.setliveVisibel(true);
|
|
|
}
|
|
|
|
|
|
// 新增目录
|
|
|
addDir = () => {
|
|
|
let {videoData} = this.state;
|
|
|
trigger('videoAdd', parseInt(videoData.course_module_id));
|
|
|
}
|
|
|
// 目录重命名
|
|
|
editDir = (name, id) => {
|
|
|
let data = {id, name, update: this.getList}
|
|
|
trigger('editVideo', data);
|
|
|
}
|
|
|
// 增加外链
|
|
|
setLinkeVisible = (flag, refresh) => {
|
|
|
this.setState({
|
|
|
otherLinkVisible: flag
|
|
|
})
|
|
|
if (refresh) {
|
|
|
const {page} = this.state;
|
|
|
this.getList(page);
|
|
|
}
|
|
|
}
|
|
|
//统计
|
|
|
statisticsy = (bool) => {
|
|
|
|
|
|
this.setState({
|
|
|
statistics: bool,
|
|
|
myktid:null,
|
|
|
mytitle:"",
|
|
|
})
|
|
|
|
|
|
}
|
|
|
mystatisticsys = (bool,n) => {
|
|
|
|
|
|
this.setState({
|
|
|
statistics: bool,
|
|
|
myktid:null,
|
|
|
mytitle:"",
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
const {videos, upload, videoData, type, liveData, lives, page, liveVisible, isSpining, liveId, otherLinkVisible, statistics,myktid,mytitle} = this.state;
|
|
|
const {coursesId, videoId} = this.props.match.params;
|
|
|
let {course_identity} = this.props && this.props.coursedata;
|
|
|
let is_teacher = this.props && this.props.user && this.props.user.is_teacher;
|
|
|
const flag = parseInt(course_identity) < 5;
|
|
|
const newOperation = flag;
|
|
|
const new_upload = flag && (is_teacher && this.props.checkIfProfessionalCertification());
|
|
|
let isAdmin = this.props&&this.props.isAdmin();
|
|
|
|
|
|
return (
|
|
|
<React.Fragment>
|
|
|
<VideoLink
|
|
|
coursesId={coursesId}
|
|
|
videoId={videoId}
|
|
|
visible={otherLinkVisible}
|
|
|
notification={this.props.showNotification}
|
|
|
setVisible={this.setLinkeVisible}
|
|
|
></VideoLink>
|
|
|
<LivesNew
|
|
|
visible={liveVisible}
|
|
|
liveId={liveId}
|
|
|
setliveVisibel={this.setliveVisibel}
|
|
|
{...this.props}
|
|
|
{...this.state}
|
|
|
></LivesNew>
|
|
|
{
|
|
|
liveVisible ?
|
|
|
<style>{
|
|
|
`
|
|
|
body{
|
|
|
width: calc(100% - 7px)!important;
|
|
|
overflow: hidden!important;
|
|
|
}
|
|
|
.-task-sidebar{
|
|
|
right:${getRight() + 7}px!important;
|
|
|
}
|
|
|
`}</style> :
|
|
|
<style>{
|
|
|
`
|
|
|
body{
|
|
|
width: 100%!important;
|
|
|
}
|
|
|
`}</style>
|
|
|
}
|
|
|
{
|
|
|
statistics === false ?
|
|
|
<div className="edu-back-white" style={{marginBottom: "1px"}}>
|
|
|
|
|
|
<div className="clearfix pl30 pr30 menuDiv">
|
|
|
{
|
|
|
videoData && videoData.category_name && type === "video" ?
|
|
|
<span className="font-18 fl color-dark-21 mt20 mb20">{videoData.category_name}</span>
|
|
|
:
|
|
|
<div className="task_menu_ul fl mt2" style={{width: "240px"}}>
|
|
|
<Menu mode="horizontal" selectedKeys={[type]} onClick={this.changeType}>
|
|
|
<Menu.Item key="video">视频</Menu.Item>
|
|
|
<Menu.Item key="live">直播</Menu.Item>
|
|
|
</Menu>
|
|
|
</div>
|
|
|
}
|
|
|
<li className="fr mt20 mb20">
|
|
|
{
|
|
|
type === "video" ?
|
|
|
<React.Fragment>
|
|
|
<span>
|
|
|
{
|
|
|
videoId ?
|
|
|
""
|
|
|
:videos&&videos.length>0?
|
|
|
<WordsBtn style="blue" className="ml30 font-16 tongjis"
|
|
|
onClick={() => this.statisticsy(true)}
|
|
|
><i className="iconfont icon-tongji1 mr5 font-14"></i>统计</WordsBtn>
|
|
|
:""
|
|
|
}
|
|
|
|
|
|
</span>
|
|
|
{
|
|
|
newOperation ?
|
|
|
<span>
|
|
|
{
|
|
|
videoId ?
|
|
|
<WordsBtn style="blue"
|
|
|
onClick={() => this.editDir(videoData && videoData.category_name, videoId)}
|
|
|
className={"ml30 font-16"}>目录重命名</WordsBtn>
|
|
|
:
|
|
|
<WordsBtn style="blue" className="ml30 font-16" onClick={this.addDir}>新建目录</WordsBtn>
|
|
|
|
|
|
}
|
|
|
<WordsBtn style="blue" className="ml30 font-16"
|
|
|
onClick={() => this.setLinkeVisible(true)}>增加外链</WordsBtn>
|
|
|
</span> : ""
|
|
|
}
|
|
|
{
|
|
|
new_upload ?
|
|
|
<span>
|
|
|
{
|
|
|
upload ?
|
|
|
<WordsBtn style="grey" className="font-16 ml30"
|
|
|
onClick={() => this.uploadVideo(false)}>取消</WordsBtn>
|
|
|
:
|
|
|
<WordsBtn style="blue" className="font-16 ml30" onClick={this.toUpload}>上传视频</WordsBtn>
|
|
|
}
|
|
|
</span>
|
|
|
: ""
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</React.Fragment>
|
|
|
:
|
|
|
isAdmin===true?
|
|
|
<WordsBtn style="blue" className="font-16 ml30" onClick={this.liveSetting}>添加直播</WordsBtn>
|
|
|
:
|
|
|
""
|
|
|
}
|
|
|
</li>
|
|
|
</div>
|
|
|
</div>
|
|
|
:
|
|
|
(
|
|
|
myktid===null||myktid===undefined?
|
|
|
<Videostatistics {...this.props} {...this.state} statisticsy={(b) => this.statisticsy(b)}></Videostatistics>
|
|
|
:
|
|
|
<Videostatisticscomtwo {...this.state} {...this.props} tisid={myktid} mytitle={mytitle} tisticsbools={(b,id)=>this.mystatisticsys(b,id)}></Videostatisticscomtwo>
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
{
|
|
|
statistics === false ?
|
|
|
<Spin spinning={isSpining}>
|
|
|
{
|
|
|
type === "video" ?
|
|
|
<Videos
|
|
|
mykt={"mykt"}
|
|
|
Setmyktid={(id,title)=>this.Setmyktid(id,title)}
|
|
|
upload={upload}
|
|
|
videos={videos}
|
|
|
page={page}
|
|
|
data={videoData}
|
|
|
pageSize={PAGE_SIZE}
|
|
|
uploadVideo={this.uploadVideo}
|
|
|
listFunc={this.getList}
|
|
|
changePage={this.changePage}
|
|
|
{...this.props}
|
|
|
{...this.state}
|
|
|
></Videos>
|
|
|
:
|
|
|
<Lives
|
|
|
lives={lives}
|
|
|
liveData={liveData}
|
|
|
page={page}
|
|
|
pageSize={LIVE_PAGE_SIZE}
|
|
|
successFunc={this.getLiveList}
|
|
|
changePage={this.changePage}
|
|
|
setLiveId={this.setLiveId}
|
|
|
{...this.props}
|
|
|
{...this.state}
|
|
|
></Lives>
|
|
|
}
|
|
|
</Spin>
|
|
|
:
|
|
|
""
|
|
|
}
|
|
|
</React.Fragment>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export default VideoIndex;
|
