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

Merge branch 'dev_aliyun' of https://bdgit.educoder.net/Hjqreturn/educoder into courseware

Browse Source
courseware
杨树明 5 years ago
parent e2f246ba2e dc941a417b
commit 04a1abf178
3 changed files with 300 additions and 290 deletions
Show Stats Download Patch File Download Diff File

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

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

2
public/react/src/modules/courses/videostatistics/component/Videostatisticscomtwo.js
Unescape View File

@ -16,7 +16,7 @@ class Videostatisticscomtwo extends Component {
this.state = { this.state = {
data: [], data: [],
page: 1, page: 1,
limit: 10, limit: 20,
members_count: 0, members_count: 0,
columnsstu: [ columnsstu: [
{ {

4
public/react/src/modules/courses/videostatistics/component/Videostatisticslist.js
Unescape View File

@ -89,7 +89,7 @@ class Videostatisticslist extends Component {
loading:false, loading:false,
data:[], data:[],
page:1, page:1,
limit:10, limit:20,
members_count:0, members_count:0,
order:undefined, order:undefined,
} }
@ -134,7 +134,7 @@ class Videostatisticslist extends Component {
let datalists = []; let datalists = [];
for (var i = 0; i < response.data.videos.length; i++) { for (var i = 0; i < response.data.videos.length; i++) {
datalists.push({ datalists.push({
number: (parseInt(this.state.spage) - 1) * parseInt(this.state.limit) + (i + 1), number: (parseInt(this.state.page) - 1) * parseInt(this.state.limit) + (i + 1),
title: response.data.videos[i].title, title: response.data.videos[i].title,
people_num: response.data.videos[i].people_num, people_num: response.data.videos[i].people_num,
total_time: response.data.videos[i].total_time, total_time: response.data.videos[i].total_time,

Write Preview
Loading…
Cancel
Save