|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
import React,{ Component } from "react";
|
|
|
|
|
import { WordsBtn,on, trigger ,publicSearchs} from 'educoder';
|
|
|
|
|
import React, {Component} from "react";
|
|
|
|
|
import {WordsBtn, on, trigger, publicSearchs} from 'educoder';
|
|
|
|
|
|
|
|
|
|
import { Menu, Spin } from 'antd';
|
|
|
|
|
import {Menu, Spin} from 'antd';
|
|
|
|
|
|
|
|
|
|
import axios from 'axios';
|
|
|
|
|
import Videos from './Video';
|
|
|
|
@ -12,114 +12,129 @@ import Videostatistics from '../videostatistics/Videostatistics';
|
|
|
|
|
import './video.css';
|
|
|
|
|
import '../css/Courses.css';
|
|
|
|
|
import '../publicNav/nav.css';
|
|
|
|
|
|
|
|
|
|
const PAGE_SIZE = 15;
|
|
|
|
|
const LIVE_PAGE_SIZE = 10;
|
|
|
|
|
const $ = window.$;
|
|
|
|
|
|
|
|
|
|
function getRight(){
|
|
|
|
|
function getRight() {
|
|
|
|
|
var right = parseInt($(".-task-sidebar").css("right"));
|
|
|
|
|
return right===0?0:right;
|
|
|
|
|
return right === 0 ? 0 : right;
|
|
|
|
|
}
|
|
|
|
|
class VideoIndex extends Component{
|
|
|
|
|
constructor(props){
|
|
|
|
|
|
|
|
|
|
class VideoIndex extends Component {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.state={
|
|
|
|
|
page:1,
|
|
|
|
|
upload:false,
|
|
|
|
|
videos:undefined,
|
|
|
|
|
videoData:undefined,
|
|
|
|
|
otherLinkVisible:false,
|
|
|
|
|
type:"video",
|
|
|
|
|
isSpining:false,
|
|
|
|
|
this.state = {
|
|
|
|
|
page: 1,
|
|
|
|
|
upload: false,
|
|
|
|
|
videos: undefined,
|
|
|
|
|
videoData: undefined,
|
|
|
|
|
otherLinkVisible: false,
|
|
|
|
|
type: "video",
|
|
|
|
|
isSpining: false,
|
|
|
|
|
|
|
|
|
|
lives:undefined,
|
|
|
|
|
liveData:undefined,
|
|
|
|
|
lives: undefined,
|
|
|
|
|
liveData: undefined,
|
|
|
|
|
|
|
|
|
|
liveId:undefined,
|
|
|
|
|
|
|
|
|
|
liveVisible:false,
|
|
|
|
|
statistics:false,
|
|
|
|
|
liveId: undefined,
|
|
|
|
|
|
|
|
|
|
liveVisible: false,
|
|
|
|
|
statistics: false,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
checkType=(type,page)=>{
|
|
|
|
|
checkType = (type, page) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
type,
|
|
|
|
|
isSpining:true
|
|
|
|
|
isSpining: true
|
|
|
|
|
})
|
|
|
|
|
if(type === "video"){
|
|
|
|
|
if (type === "video") {
|
|
|
|
|
this.getList(page);
|
|
|
|
|
}else{
|
|
|
|
|
} else {
|
|
|
|
|
this.getLiveList(page);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount=()=>{
|
|
|
|
|
const { search } = this.props.location;
|
|
|
|
|
const { page } = this.state;
|
|
|
|
|
if(search && search === "?open=live"){
|
|
|
|
|
componentDidMount = () => {
|
|
|
|
|
const {search} = this.props.location;
|
|
|
|
|
const {page} = this.state;
|
|
|
|
|
if (search && search === "?open=live") {
|
|
|
|
|
this.setState({
|
|
|
|
|
type:"live"
|
|
|
|
|
type: "live"
|
|
|
|
|
})
|
|
|
|
|
this.checkType("live",page);
|
|
|
|
|
}else{
|
|
|
|
|
if(search === "?open=new"){
|
|
|
|
|
this.checkType("live", page);
|
|
|
|
|
} else {
|
|
|
|
|
if (search === "?open=new") {
|
|
|
|
|
this.setState({
|
|
|
|
|
upload:true
|
|
|
|
|
upload: true
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.checkType("video",page);
|
|
|
|
|
this.checkType("video", page);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
componentDidUpdate = (prevProps) => {
|
|
|
|
|
if(this.props.match.params.videoId !== prevProps.match.params.videoId ){
|
|
|
|
|
try {
|
|
|
|
|
if (this.props.homedirectory !== prevProps.homedirectory) {
|
|
|
|
|
if(this.props.homedirectory ===true){
|
|
|
|
|
this.setState({
|
|
|
|
|
statistics:false,
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}catch (e) {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.props.match.params.videoId !== prevProps.match.params.videoId) {
|
|
|
|
|
this.setState({
|
|
|
|
|
upload:false
|
|
|
|
|
upload: false,
|
|
|
|
|
})
|
|
|
|
|
const { page } = this.state;
|
|
|
|
|
this.checkType("video",page);
|
|
|
|
|
const {page} = this.state;
|
|
|
|
|
this.checkType("video", page);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
// 获取直播列表
|
|
|
|
|
getLiveList=(page)=>{
|
|
|
|
|
const CourseId=this.props.match.params.coursesId;
|
|
|
|
|
getLiveList = (page) => {
|
|
|
|
|
const CourseId = this.props.match.params.coursesId;
|
|
|
|
|
const url = `/courses/${CourseId}/live_links.json`;
|
|
|
|
|
axios.get(url,{
|
|
|
|
|
params:{
|
|
|
|
|
axios.get(url, {
|
|
|
|
|
params: {
|
|
|
|
|
page,
|
|
|
|
|
limit:LIVE_PAGE_SIZE
|
|
|
|
|
limit: LIVE_PAGE_SIZE
|
|
|
|
|
}
|
|
|
|
|
}).then(result=>{
|
|
|
|
|
if(result){
|
|
|
|
|
}).then(result => {
|
|
|
|
|
if (result) {
|
|
|
|
|
this.setState({
|
|
|
|
|
liveData:result.data,
|
|
|
|
|
lives:result.data.lives,
|
|
|
|
|
isSpining:false,
|
|
|
|
|
liveData: result.data,
|
|
|
|
|
lives: result.data.lives,
|
|
|
|
|
isSpining: false,
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}).catch(error=>{
|
|
|
|
|
}).catch(error => {
|
|
|
|
|
console.log(error);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 获取视频列表
|
|
|
|
|
getList=(page)=>{
|
|
|
|
|
const { coursesId , videoId }=this.props.match.params;
|
|
|
|
|
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
|
|
|
|
|
category_id: videoId
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then((response) => {
|
|
|
|
|
if(response){
|
|
|
|
|
if (response) {
|
|
|
|
|
this.setState({
|
|
|
|
|
videos:response.data.videos,
|
|
|
|
|
videoData:response.data,
|
|
|
|
|
isSpining:false
|
|
|
|
|
videos: response.data.videos,
|
|
|
|
|
videoData: response.data,
|
|
|
|
|
isSpining: false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}).catch((error) => {
|
|
|
|
@ -127,23 +142,23 @@ class VideoIndex extends Component{
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
changeType=(e)=>{
|
|
|
|
|
changeType = (e) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
type:e.key,
|
|
|
|
|
upload:false,
|
|
|
|
|
page:1
|
|
|
|
|
type: e.key,
|
|
|
|
|
upload: false,
|
|
|
|
|
page: 1
|
|
|
|
|
})
|
|
|
|
|
this.checkType(e.key,1);
|
|
|
|
|
this.checkType(e.key, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
changePage=(page,type)=>{
|
|
|
|
|
changePage = (page, type) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
page
|
|
|
|
|
})
|
|
|
|
|
this.checkType(type,page);
|
|
|
|
|
this.checkType(type, page);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onEditVideo=(item)=>{
|
|
|
|
|
onEditVideo = (item) => {
|
|
|
|
|
let videoId = {
|
|
|
|
|
videoId: item.id,
|
|
|
|
|
title: item.title
|
|
|
|
@ -153,25 +168,25 @@ class VideoIndex extends Component{
|
|
|
|
|
})
|
|
|
|
|
this.setVisible(true);
|
|
|
|
|
}
|
|
|
|
|
uploadVideo=(upload)=>{
|
|
|
|
|
uploadVideo = (upload) => {
|
|
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
upload,
|
|
|
|
|
isSpining:true
|
|
|
|
|
isSpining: true
|
|
|
|
|
})
|
|
|
|
|
const { page } = this.state;
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
const {page} = this.state;
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.getList(page);
|
|
|
|
|
},500)
|
|
|
|
|
}, 500)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
toUpload =()=> {
|
|
|
|
|
const { admin , is_teacher,business} = this.props.user;
|
|
|
|
|
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
|
|
|
|
|
type: "video",
|
|
|
|
|
upload: true,
|
|
|
|
|
page: 1
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.props.showProfessionalCertificationDialog();
|
|
|
|
@ -187,69 +202,76 @@ class VideoIndex extends Component{
|
|
|
|
|
// this.checkType("live",1);
|
|
|
|
|
// }
|
|
|
|
|
// 直播设置
|
|
|
|
|
liveSetting=()=>{
|
|
|
|
|
liveSetting = () => {
|
|
|
|
|
this.setState({
|
|
|
|
|
liveId:undefined
|
|
|
|
|
liveId: undefined
|
|
|
|
|
})
|
|
|
|
|
this.setliveVisibel(true);
|
|
|
|
|
}
|
|
|
|
|
//直播设置弹框
|
|
|
|
|
setliveVisibel=(flag,changetypeFlag)=>{
|
|
|
|
|
setliveVisibel = (flag, changetypeFlag) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
liveVisible:flag
|
|
|
|
|
liveVisible: flag
|
|
|
|
|
})
|
|
|
|
|
if(flag === false){
|
|
|
|
|
if (flag === false) {
|
|
|
|
|
this.setState({
|
|
|
|
|
liveId:undefined
|
|
|
|
|
liveId: undefined
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
if(changetypeFlag){
|
|
|
|
|
this.checkType("live",1);
|
|
|
|
|
if (changetypeFlag) {
|
|
|
|
|
this.checkType("live", 1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 列表-编辑(修改传到编辑的id)
|
|
|
|
|
setLiveId=(id)=>{
|
|
|
|
|
setLiveId = (id) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
liveId:id
|
|
|
|
|
liveId: id
|
|
|
|
|
})
|
|
|
|
|
this.setliveVisibel(true);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 新增目录
|
|
|
|
|
addDir=()=>{
|
|
|
|
|
let {videoData}=this.state;
|
|
|
|
|
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);
|
|
|
|
|
editDir = (name, id) => {
|
|
|
|
|
let data = {id, name, update: this.getList}
|
|
|
|
|
trigger('editVideo', data);
|
|
|
|
|
}
|
|
|
|
|
// 增加外链
|
|
|
|
|
setLinkeVisible=(flag,refresh)=>{
|
|
|
|
|
setLinkeVisible = (flag, refresh) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
otherLinkVisible:flag
|
|
|
|
|
otherLinkVisible: flag
|
|
|
|
|
})
|
|
|
|
|
if(refresh){
|
|
|
|
|
const { page } = this.state;
|
|
|
|
|
if (refresh) {
|
|
|
|
|
const {page} = this.state;
|
|
|
|
|
this.getList(page);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//统计
|
|
|
|
|
statisticsy=(bool)=>{
|
|
|
|
|
statisticsy = (bool) => {
|
|
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
statistics:bool
|
|
|
|
|
statistics: bool,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
render(){
|
|
|
|
|
const { videos , upload , videoData , type , liveData , lives , page , liveVisible , isSpining , liveId , otherLinkVisible,statistics } = 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;
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const {videos, upload, videoData, type, liveData, lives, page, liveVisible, isSpining, liveId, otherLinkVisible, statistics} = 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());
|
|
|
|
|
return(
|
|
|
|
|
|
|
|
|
|
const isAdmin = this.props&& this.props.isAdmin();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<React.Fragment>
|
|
|
|
|
<VideoLink
|
|
|
|
|
coursesId={coursesId}
|
|
|
|
@ -274,9 +296,9 @@ class VideoIndex extends Component{
|
|
|
|
|
overflow: hidden!important;
|
|
|
|
|
}
|
|
|
|
|
.-task-sidebar{
|
|
|
|
|
right:${getRight()+7}px!important;
|
|
|
|
|
right:${getRight() + 7}px!important;
|
|
|
|
|
}
|
|
|
|
|
`}</style>:
|
|
|
|
|
`}</style> :
|
|
|
|
|
<style>{
|
|
|
|
|
`
|
|
|
|
|
body{
|
|
|
|
@ -285,15 +307,15 @@ class VideoIndex extends Component{
|
|
|
|
|
`}</style>
|
|
|
|
|
}
|
|
|
|
|
{
|
|
|
|
|
statistics===false?
|
|
|
|
|
<div className="edu-back-white" style={{marginBottom:"1px"}}>
|
|
|
|
|
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"}}>
|
|
|
|
|
<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>
|
|
|
|
@ -304,32 +326,50 @@ class VideoIndex extends Component{
|
|
|
|
|
{
|
|
|
|
|
type === "video" ?
|
|
|
|
|
<React.Fragment>
|
|
|
|
|
{
|
|
|
|
|
newOperation ?
|
|
|
|
|
<span>
|
|
|
|
|
{
|
|
|
|
|
videoId ?
|
|
|
|
|
""
|
|
|
|
|
:
|
|
|
|
|
<WordsBtn style="blue" className="ml30 font-16 tongjis"
|
|
|
|
|
onClick={()=>this.statisticsy(true)}
|
|
|
|
|
onClick={() => this.statisticsy(true)}
|
|
|
|
|
><i className="iconfont icon-tongji1 mr5"></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"
|
|
|
|
|
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>:""
|
|
|
|
|
<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="grey" className="font-16 ml30"
|
|
|
|
|
onClick={() => this.uploadVideo(false)}>取消</WordsBtn>
|
|
|
|
|
:
|
|
|
|
|
<WordsBtn style="blue" className="font-16 ml30" onClick={this.toUpload}>上传视频</WordsBtn>
|
|
|
|
|
}
|
|
|
|
|
</span>:""
|
|
|
|
|
</span>
|
|
|
|
|
: ""
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</React.Fragment>
|
|
|
|
|
:
|
|
|
|
|
<WordsBtn style="blue" className="font-16 ml30" onClick={this.liveSetting}>添加直播</WordsBtn>
|
|
|
|
@ -338,10 +378,10 @@ class VideoIndex extends Component{
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
:
|
|
|
|
|
<Videostatistics {...this.props} {...this.state} statisticsy={(b)=>this.statisticsy(b)}></Videostatistics>
|
|
|
|
|
<Videostatistics {...this.props} {...this.state} statisticsy={(b) => this.statisticsy(b)}></Videostatistics>
|
|
|
|
|
}
|
|
|
|
|
{
|
|
|
|
|
statistics===false?
|
|
|
|
|
statistics === false ?
|
|
|
|
|
<Spin spinning={isSpining}>
|
|
|
|
|
{
|
|
|
|
|
type === "video" ?
|
|
|
|
@ -378,4 +418,5 @@ class VideoIndex extends Component{
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default VideoIndex;
|
|
|
|
|