From b977353a78c050995bf663ad3c7ff3f437253dd1 Mon Sep 17 00:00:00 2001
From: caicai8 <1149225589@qq.com>
Date: Sun, 9 Feb 2020 18:20:41 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=9B=B4=E6=92=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../react/src/modules/courses/Video/Live.js   |  49 +++
 .../src/modules/courses/Video/LiveItem.js     |  52 ++++
 .../src/modules/courses/Video/LiveNew.js      |  79 +++++
 .../react/src/modules/courses/Video/Video.js  | 222 ++++++++++++++
 .../src/modules/courses/Video/VideoIndex.js   | 290 ++++++++----------
 .../src/modules/courses/Video/VideoItem.js    |  45 ---
 .../react/src/modules/courses/Video/video.css |  77 ++++-
 .../user/usersInfo/video/VideoUploadList.js   |   3 +-
 8 files changed, 605 insertions(+), 212 deletions(-)
 create mode 100644 public/react/src/modules/courses/Video/Live.js
 create mode 100644 public/react/src/modules/courses/Video/LiveItem.js
 create mode 100644 public/react/src/modules/courses/Video/LiveNew.js
 create mode 100644 public/react/src/modules/courses/Video/Video.js
 delete mode 100644 public/react/src/modules/courses/Video/VideoItem.js

diff --git a/public/react/src/modules/courses/Video/Live.js b/public/react/src/modules/courses/Video/Live.js
new file mode 100644
index 000000000..b903b38bd
--- /dev/null
+++ b/public/react/src/modules/courses/Video/Live.js
@@ -0,0 +1,49 @@
+import React,{ Component } from "react";
+import { Switch , Pagination } from 'antd';
+import { NoneData } from 'educoder';
+
+import LiveItem from './LiveItem';
+import './video.css';
+class Live extends Component{
+ 
+   render(){
+    const { liveData , lives , successFunc , admin , business , is_teacher , pageSize , changePage } = this.props;
+    const operation = admin || business || (is_teacher && this.props.checkIfProfessionalCertification())
+
+     return(
+       <div className="livePanel">
+          {
+            lives && lives.length > 0 ?
+            <React.Fragment>
+              <p className="font-grey-9 mt20 mb20 pl5">共 <span className="color-orange">{liveData && liveData.total_count}</span> 个视频</p>
+              <div className="liveContent">
+                {
+                  lives.map((item,key)=>{
+                    return(
+                      <LiveItem 
+                      item={item} 
+                      {...this.props} 
+                      {...this.state} 
+                      successFunc={()=>successFunc()}
+                      operation={operation}
+                      ></LiveItem>
+                    )
+                  })
+                }
+              </div>
+              {
+                liveData && liveData.total_count > pageSize &&
+                <div className="mt30 mb50 edu-txt-center">
+                  <Pagination showQuickJumper total={liveData.total_count} pageSize={pageSize} onChange={(page)=>changePage(page,'live')}></Pagination>
+                </div>
+              }
+            </React.Fragment>
+            :
+            <NoneData style={{width: '100%'}}></NoneData>
+          } 
+          
+       </div>
+     )
+   }
+}
+export default Live;
\ No newline at end of file
diff --git a/public/react/src/modules/courses/Video/LiveItem.js b/public/react/src/modules/courses/Video/LiveItem.js
new file mode 100644
index 000000000..10586cdd7
--- /dev/null
+++ b/public/react/src/modules/courses/Video/LiveItem.js
@@ -0,0 +1,52 @@
+import React,{ Component } from "react";
+import { Switch } from 'antd';
+import { getImageUrl } from 'educoder';
+
+import axios from 'axios';
+class LiveItem extends Component{
+
+  changeStatus=(flag,event,id)=>{
+    const url = `/live_links/${id}.json`;
+    axios.put(url,{
+      on_status:flag?1:0
+    }).then(result=>{
+      if(result){
+        this.props.showNotification(`直播已${flag?"开启":"关闭"}!`);
+        const { successFunc } = this.props;
+        successFunc && successFunc(1);
+      }
+    }).catch(error=>{
+      console.log(error);
+    })
+  }
+  render(){
+    const { item , operation } = this.props;
+    return(
+      <div className="liveItem">
+        <div className="lineMiddle livesMain">
+          <span className="lineMiddle">
+            <img alt={`${item.author_name}`} className="liveAuthor" src={getImageUrl(`images/${item.author_img}`)}/>
+            <label>{item.author_name}</label>
+            <span className={item.on_status?"labels living":"labels lived"}>{item.on_status?'已开播':'未开播'}</span>
+          </span>
+          {
+            operation && 
+            <Switch checkedChildren="on" unCheckedChildren="off" defaultChecked={item.on_status} onChange={(flag,event)=>this.changeStatus(flag,event,item.id)}></Switch>
+          }
+        </div>
+        <div className="lineMiddle mt15">
+          <div className="liveDesc">
+            <p><span className="task-hide-2">{item.description}</span></p>
+          </div>
+          {
+            item.on_status?
+            <a className="btns going" href={`${item.url}`}>进入</a>
+            :
+            <span className="btns ect">进入</span>
+          }
+        </div>
+      </div>
+    )
+  }
+}
+export default LiveItem;
\ No newline at end of file
diff --git a/public/react/src/modules/courses/Video/LiveNew.js b/public/react/src/modules/courses/Video/LiveNew.js
new file mode 100644
index 000000000..0663525b2
--- /dev/null
+++ b/public/react/src/modules/courses/Video/LiveNew.js
@@ -0,0 +1,79 @@
+import React,{ Component } from "react";
+import { Modal , Form , Input } from 'antd';
+
+import './video.css';
+import axios from 'axios';
+const { TextArea } = Input;
+
+class LiveNew extends Component{
+  constructor(props){
+    super(props);
+    this.state={
+
+    }
+  }
+
+  handleSubmit=()=>{
+    this.props.form.validateFields((err, values) => {
+      if(!err){
+        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);
+          }
+        }).catch(error=>{
+          console.log(error);
+        })
+      }
+    })
+  }
+
+  render(){
+    const {getFieldDecorator} = this.props.form;
+    const { visible , setliveVisibel } = this.props;
+    return(
+      <Modal
+        visible={visible}
+        width="560px"
+        title={'直播设置'}
+        footer={null}
+        closable={false}
+        className="liveModal"
+      >
+        <div className="task-popup-content">
+          <Form onSubmit={this.handleSubmit}>
+            <Form.Item label={`直播链接`}>
+              {getFieldDecorator('url', {
+                  rules: [{required: true, message: "请输入第三方直播链接"}],
+              })(
+                <Input placeholder="请输入第三方直播链接，如：腾讯课堂播放链接等。" />
+              )}
+            </Form.Item>
+            <Form.Item label={`直播说明`} style={{marginBottom:"0px"}}>
+              {getFieldDecorator('description', {
+                  rules: [],
+              })(
+                <TextArea rows={4} placeholder="可在此介绍开播具体事项，如开播时间安排等。" />
+              )}
+            </Form.Item>
+            <p className="flex-middle" style={{justifyContent:"space-between"}}>
+              <span>EduCoder推荐您使用<a href="https://ke.qq.com/" target="_blank" className="color-blue">腾讯课堂</a>进行直播</span>
+              <a href="https://pub.idqqimg.com/pc/misc/files/20200204/2e4cb765bef54f0c919c0ab8ab79d969.pdf" target="_blank" className="color-blue">下载操作指引</a>
+            </p>
+          </Form>
+          <div className="clearfix mt30 edu-txt-center">
+            <a onClick={()=>setliveVisibel(false)} className="task-btn mr30">取消</a>
+            <a type="submit" onClick={this.handleSubmit} className="task-btn task-btn-orange">确定</a>
+          </div>
+        </div>
+      </Modal>
+    )
+  }
+}
+const WrappedLiveNew = Form.create({name: 'LiveNew'})(LiveNew);
+export default WrappedLiveNew;
\ No newline at end of file
diff --git a/public/react/src/modules/courses/Video/Video.js b/public/react/src/modules/courses/Video/Video.js
new file mode 100644
index 000000000..189503be9
--- /dev/null
+++ b/public/react/src/modules/courses/Video/Video.js
@@ -0,0 +1,222 @@
+import React,{ Component } from "react";
+import { Input , Pagination } from 'antd';
+import { NoneData ,ActionBtn } from 'educoder';
+
+import VideoUploadList from '../../user/usersInfo/video/VideoUploadList';
+import VideoInReviewItem from '../../user/usersInfo/video/VideoInReviewItem';
+import HeadlessModal from '../../user/usersInfo/common/HeadlessModal';
+import EditVideoModal from '../../user/usersInfo/video/EditVideoModal'
+import ClipboardJS from 'clipboard'
+
+import './video.css';
+import '../../user/usersInfo/video/InfosVideo.css'
+
+const DEFAULT_VIDEO_WIDTH_IN_MD = "90%" // 400
+const DEFAULT_VIDEO_HEIGHT_IN_MD = "55%" // 400
+
+const videoEl = null;
+let _clipboard = null;
+
+
+class Video extends Component{
+  constructor(props){
+    super(props);
+    this.state={
+      videos:undefined,
+      count:0,
+      page:1,
+
+      videoId:undefined,
+      videoVisible:false,
+      visible:false
+    }
+  }
+
+  // 编辑的弹框visible
+  setVisible=(flag)=>{
+    this.setState({
+      visible:flag
+    })
+  }
+
+  setVideoVisible=(flag)=>{
+
+    this.setState({
+      videoVisible:flag
+    })
+    if (flag === false) {
+      if (_clipboard) {
+        this.setState({
+          videoId:undefined
+        })
+        _clipboard.listener.destroy();
+        _clipboard = null;
+      }
+    } else {
+        // videoEl.current && videoEl.current.play()
+
+        setTimeout(() => {
+            if (!_clipboard) {
+                _clipboard = new ClipboardJS('.copybtn');
+                _clipboard.on('success', (e) => {
+                    this.props.showNotification('复制成功');
+                });
+            }
+        }, 200)
+    }
+  }
+  
+
+  // 编辑成功后回调的方法
+  editSuccess=()=>{
+    const { page } = this.state;
+    this.props.showNotification("视频名称修改成功!");
+    const { listFunc } = this.props;
+    listFunc && listFunc(page);
+  }
+
+  onEditVideo=(item)=>{
+    let videoId = {
+          videoId: item.id,
+          title: item.title
+      }
+      this.setState({
+        videoId,
+      })
+      this.setVisible(true);
+  }
+
+  onMaskClick=(item)=> {
+    let videoId = {
+      videoId: item.id,
+      title: item.title,
+      file_url: item.file_url,
+      cover_url: item.cover_url
+    }
+    this.setState({
+      videoId
+    })
+    this.setVideoVisible(true);
+  }
+
+
+  setVideoVisible=(flag)=>{
+
+    this.setState({
+      videoVisible:flag
+    })
+    if (flag === false) {
+      if (_clipboard) {
+        this.setState({
+          videoId:undefined
+        })
+        _clipboard.listener.destroy();
+        _clipboard = null;
+      }
+    } else {
+        // videoEl.current && videoEl.current.play()
+
+        setTimeout(() => {
+            if (!_clipboard) {
+                _clipboard = new ClipboardJS('.copybtn');
+                _clipboard.on('success', (e) => {
+                    this.props.showNotification('复制成功');
+                });
+            }
+        }, 200)
+    }
+
+  }
+
+  getCopyText = (file_url, cover_url)=>{
+    return `<video src="${file_url}" controls="true" controlslist="nodownload" width="${DEFAULT_VIDEO_WIDTH_IN_MD}" height="${DEFAULT_VIDEO_HEIGHT_IN_MD}" poster="${cover_url}">您的浏览器不支持 video 标签。</video>`
+  }
+
+  render(){
+    const { count , visible , videoVisible , videoId } = this.state;
+    const CourseId=this.props.match.params.coursesId;
+    const login=this.props.user&&this.props.user.login;
+    const _inputValue = videoId && this.getCopyText(videoId.file_url, videoId.cover_url);
+
+    const { admin , is_teacher ,business} = this.props.user;
+
+    const { videos , upload , uploadVideo , videoData , changePage ,pageSize } = this.props;
+
+    const operation = admin || business || (is_teacher && this.props.checkIfProfessionalCertification())
+    return(
+      <div>
+        <EditVideoModal {...this.props} visible={visible} setVisible={this.setVisible}
+            editSuccess={this.editSuccess}
+            {...videoId} CourseUser={login}
+        ></EditVideoModal>
+        <HeadlessModal
+            visible={videoVisible}
+            setVisible={this.setVideoVisible}
+            className="showVideoModal"
+            width={800 - 1}
+          >
+            {
+              videoId &&
+              <video
+                autoplay="true"
+                ref={videoEl}
+                src={videoId.file_url} controls="true" controlslist="nodownload">
+                您的浏览器不支持 video 标签。
+              </video>
+            }
+
+            <div className="df copyLine">
+              <Input value={_inputValue}
+                  className="dark"
+              ></Input>
+              <ActionBtn className="copybtn" data-clipboard-text={_inputValue}>复制视频地址</ActionBtn>
+            </div>
+          </HeadlessModal>
+        <div className="videoPanel">
+          {
+            upload ?
+            <VideoUploadList {...this.props} flag={true} CourseId={CourseId} CourseUser={login} successFunc={()=>uploadVideo()}></VideoUploadList>
+            :
+            <React.Fragment>
+              {
+                videos && videos.length > 0 ?
+                <React.Fragment>
+                  <p className="font-grey-9 mt20 mb20 pl5">共 <span className="color-orange">{videoData && videoData.count}</span> 个视频</p>
+                  <div className="videoContent">
+                  {
+                    videos.map((item,key)=>{
+                      return(
+                        <VideoInReviewItem
+                          {...this.props}
+
+                          {...item}
+                          key={item.id}
+                          onEditVideo={this.onEditVideo}
+                          onMaskClick={this.onMaskClick}
+                          getCopyText={this.getCopyText}
+                          operation={operation}
+                      >
+                      </VideoInReviewItem>
+                      )
+                    })
+                  }
+                  </div>
+                </React.Fragment>
+                :
+                <NoneData style={{width: '100%'}}></NoneData>
+              }
+              
+              {
+                videoData && videoData.count > pageSize &&
+                <div className="mt30 mb50 edu-txt-center">
+                  <Pagination showQuickJumper total={videoData.count} pageSize={pageSize} onChange={(page)=>changePage(page,'video')}></Pagination>
+                </div>
+              }
+            </React.Fragment>
+          }
+        </div>
+      </div>
+    )
+  }
+}
+export default Video;
\ No newline at end of file
diff --git a/public/react/src/modules/courses/Video/VideoIndex.js b/public/react/src/modules/courses/Video/VideoIndex.js
index 74b09b6e4..59b8dc882 100644
--- a/public/react/src/modules/courses/Video/VideoIndex.js
+++ b/public/react/src/modules/courses/Video/VideoIndex.js
@@ -1,80 +1,75 @@
 import React,{ Component } from "react";
-import { Input , Pagination } from 'antd';
-import { WordsBtn , NoneData ,ActionBtn } from 'educoder';
 
-import VideoItem from './VideoItem';
-import ClipboardJS from 'clipboard'
+import { Menu, Spin } from 'antd';
 
+import { WordsBtn } from 'educoder';
 import axios from 'axios';
+import Videos from './Video';
+import Lives from './Live';
+import LivesNew from './LiveNew';
 
-import VideoUploadList from '../../user/usersInfo/video/VideoUploadList';
-import VideoInReviewItem from '../../user/usersInfo/video/VideoInReviewItem';
-import HeadlessModal from '../../user/usersInfo/common/HeadlessModal';
-import EditVideoModal from '../../user/usersInfo/video/EditVideoModal'
 
 import './video.css';
-import '../../user/usersInfo/video/InfosVideo.css'
-
+import '../css/Courses.css';
+import '../publicNav/nav.css';
 const PAGE_SIZE = 15;
-const DEFAULT_VIDEO_WIDTH_IN_MD = "90%" // 400
-const DEFAULT_VIDEO_HEIGHT_IN_MD = "55%" // 400
-
-const videoEl = null;
-let _clipboard = null;
-
+const LIVE_PAGE_SIZE = 10;
 class VideoIndex extends Component{
   constructor(props){
     super(props);
     this.state={
+      page:1,
       upload:false,
       videos:undefined,
-      count:0,
-      page:1,
+      videoData:undefined,
+      type:"video",
+      isSpining:false,
 
-      videoId:undefined,
-      videoVisible:false,
-      visible:false
+      lives:undefined,
+      liveData:undefined,
+
+      liveVisible:false
     }
   }
 
-  // 编辑的弹框visible
-  setVisible=(flag)=>{
+  checkType=(type,page)=>{
     this.setState({
-      visible:flag
+      type,
+      isSpining:true
     })
+    if(type === "video"){
+      this.getList(page);
+    }else{
+      this.getLiveList(page);
+    }
   }
-  setVideoVisible=(flag)=>{
 
-    this.setState({
-      videoVisible:flag
-    })
-    if (flag === false) {
-      if (_clipboard) {
+  componentDidMount=()=>{
+    const { type ,page } = this.state;
+    this.checkType(type,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({
-          videoId:undefined
+          liveData:result.data,
+          lives:result.data.lives,
+          isSpining:false
         })
-        _clipboard.listener.destroy();
-        _clipboard = null;
       }
-    } else {
-        // videoEl.current && videoEl.current.play()
-
-        setTimeout(() => {
-            if (!_clipboard) {
-                _clipboard = new ClipboardJS('.copybtn');
-                _clipboard.on('success', (e) => {
-                    this.props.showNotification('复制成功');
-                });
-            }
-        }, 200)
-    }
-
-  }
-  // 编辑成功后回调的方法
-  editSuccess=()=>{
-    const { page } = this.state;
-    this.getList(page);
+    }).catch(error=>{
+      console.log(error);
+    })
   }
+  
   // 获取视频列表
   getList=(page)=>{
     const CourseId=this.props.match.params.coursesId;
@@ -88,8 +83,9 @@ class VideoIndex extends Component{
     .then((response) => {
       if(response){
         this.setState({
-          count:response.data.count,
-          videos:response.data.videos
+          videos:response.data.videos,
+          videoData:response.data,
+          isSpining:false
         })
       }
     }).catch((error) => {
@@ -97,6 +93,22 @@ class VideoIndex extends Component{
     })
   }
 
+  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,
@@ -115,144 +127,94 @@ class VideoIndex extends Component{
     this.getList(page);
   }
 
-  onMaskClick=(item)=> {
-    let videoId = {
-      videoId: item.id,
-      title: item.title,
-      file_url: item.file_url,
-      cover_url: item.cover_url
-    }
-    this.setState({
-      videoId
-    })
-    this.setVideoVisible(true);
-  }
-
-  getCopyText = (file_url, cover_url)=>{
-    return `<video src="${file_url}" controls="true" controlslist="nodownload" width="${DEFAULT_VIDEO_WIDTH_IN_MD}" height="${DEFAULT_VIDEO_HEIGHT_IN_MD}" poster="${cover_url}">您的浏览器不支持 video 标签。</video>`
-  }
-
-  componentDidMount=()=>{
-    const { page } = this.state;
-    this.getList(page);
-  }
-
-  changePage=(page)=>{
-    this.setState({
-      page
-    })
-    this.getList(page);
-  }
-
   toUpload =()=> {
     const { admin , is_teacher,business} = this.props.user;
     if (admin || business || (is_teacher && this.props.checkIfProfessionalCertification())) {
       this.setState({
+        type:"video",
         upload:true
       })
     } else {
       this.props.showProfessionalCertificationDialog();
     }
   }
-  render(){
-    const { count , videos , upload , visible , videoVisible , videoId } = this.state;
-    const CourseId=this.props.match.params.coursesId;
-    const login=this.props.user&&this.props.user.login;
-    const _inputValue = videoId && this.getCopyText(videoId.file_url, videoId.cover_url);
 
-    const { admin , is_teacher ,business} = this.props.user;
-    // console.log(this.props && this.props.admin());
-    const operation = admin || business || (is_teacher && this.props.checkIfProfessionalCertification())
+  // 直播设置后回调的方法
+  successFunc=()=>{
+    this.setState({
+      type:"live",
+      page:1
+    })
+    this.checkType("live",1);
+  }
+  //直播设置弹框
+  setliveVisibel=(flag)=>{
+    this.setState({
+      liveVisible:flag,
+      type:"live"
+    })
+    this.checkType("live",1);
+  }
+  render(){
+    const { videos , upload , videoData , type , liveData , lives , liveVisible , isSpining } = this.state;
+    const { admin , is_teacher } = this.props.user;
     return(
       <React.Fragment>
-        <div className="edu-back-white">
-          <EditVideoModal {...this.props} visible={visible} setVisible={this.setVisible}
-              editSuccess={this.editSuccess}
-              {...videoId} CourseUser={login}
-          ></EditVideoModal>
-          <HeadlessModal
-            visible={videoVisible}
-            setVisible={this.setVideoVisible}
-            className="showVideoModal"
-            width={800 - 1}
-          >
-            {
-              videoId &&
-              <video
-                autoplay="true"
-                ref={videoEl}
-                src={videoId.file_url} controls="true" controlslist="nodownload">
-                您的浏览器不支持 video 标签。
-              </video>
-            }
-
-            <div className="df copyLine">
-              <Input value={_inputValue}
-                  className="dark"
-              ></Input>
-              <ActionBtn className="copybtn" data-clipboard-text={_inputValue}>复制视频地址</ActionBtn>
+        <LivesNew 
+          visible={liveVisible} 
+          setliveVisibel={this.setliveVisibel} 
+          {...this.props} 
+          {...this.state}
+        ></LivesNew>
+        <div className="edu-back-white" style={{marginBottom:"1px"}}>
+
+          <div className="clearfix pl30 pr30 menuDiv">
+            <div className="task_menu_ul fl">
+              <Menu mode="horizontal" selectedKeys={[type]} onClick={this.changeType}>
+                <Menu.Item key="video">视频</Menu.Item>
+                <Menu.Item key="live">直播</Menu.Item>
+              </Menu>
             </div>
-          </HeadlessModal>
-          <p className="clearfix padding30">
-            <span className="fl font-grey-9">共 <span className="color-orange">{count}</span> 个视频</span>
             {
               (admin || is_teacher) &&
-              <li className="fr">
+              <li className="fr mt18">
                 {
                   upload ?
                   <WordsBtn style="grey" className="font-16" onClick={()=>this.uploadVideo(false)}>取消</WordsBtn>
                   :
                   <WordsBtn style="blue" className="font-16" onClick={this.toUpload}>上传视频</WordsBtn>
                 }
+                <WordsBtn style="blue" className="font-16 ml30" onClick={()=>this.setliveVisibel(true)}>直播设置</WordsBtn>
               </li>
             }
-          </p>
+          </div>
         </div>
+        <Spin spinning={isSpining}>
         {
-          upload ?
-          <VideoUploadList {...this.props} flag={true} CourseId={CourseId} CourseUser={login} successFunc={this.uploadVideo}></VideoUploadList>
-          :
-          <React.Fragment>
-          <div className="videoContent">
-            {
-              videos && videos.length > 0 ?
-              <React.Fragment>
-                {
-                  videos.map((item,key)=>{
-                    return(
-                      // <VideoItem
-                      //   item={item}
-                      //   key={key}
-                      //   onEditVideo={this.onEditVideo}
-                      // ></VideoItem>
-                      <VideoInReviewItem
-                        {...this.props}
-
-                        {...item}
-                        key={item.id}
-                        onEditVideo={this.onEditVideo}
-                        onMaskClick={this.onMaskClick}
-                        getCopyText={this.getCopyText}
-                        operation={operation}
-										>
-                    </VideoInReviewItem>
-                    )
-                  })
-                }
-              </React.Fragment>
-              :
-              <NoneData style={{width: '100%'}}></NoneData>
-            }
-          </div>
-          {
-            count > PAGE_SIZE &&
-            <div className="mt30 mb50 edu-txt-center">
-              <Pagination showQuickJumper total={count} pageSize={PAGE_SIZE} onChange={this.changePage}></Pagination>
-            </div>
-          }
-          </React.Fragment>
+          type === "video" ? 
+            <Videos 
+              upload={upload} 
+              videos={videos} 
+              data={videoData}
+              pageSize={PAGE_SIZE}
+              uploadVideo={this.uploadVideo}
+              listFunc={this.getList}
+              changePage={this.changePage}
+              {...this.props} 
+              {...this.state}
+            ></Videos>
+            :
+            <Lives
+              lives={lives}
+              liveData={liveData}
+              pageSize={LIVE_PAGE_SIZE}
+              successFunc={this.getLiveList}
+              changePage={this.changePage}
+              {...this.props}
+              {...this.state}
+            ></Lives>
         }
-
+        </Spin>
       </React.Fragment>
     )
   }
diff --git a/public/react/src/modules/courses/Video/VideoItem.js b/public/react/src/modules/courses/Video/VideoItem.js
deleted file mode 100644
index f8aba0183..000000000
--- a/public/react/src/modules/courses/Video/VideoItem.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React,{ Component } from "react";
-import moment from 'moment';
-import playIcon from '../../user/usersInfo/video/images/play.png'
-
-import { Tooltip } from 'antd';
-
-class VideoItem extends Component{
-  render(){
-    const { item , onEditVideo} = this.props;
-    return(
-      <div>
-        <img className="cover" src="http://video.educoder.net/5040e61081fe4380ba7bdfd181e44350/snapshots/88d4bf91061149e1ae45fab811ee1a33-00005.jpg" alt="" />
-        <div className="playWrap">
-          <img className="play mp23" alt="" src={playIcon}></img>
-        </div>
-        <div className="videoInfo">
-          <div className="title overflowHidden1 font-16"
-              title={item.title && item.title.length > 20 ? item.title : ''}
-          >{item.title}</div>
-          <div className="time">
-            {moment(item.published_at || item.created_at).format('YYYY-MM-DD HH:mm:ss')}
-          </div>
-          <div className="flex-middle">
-            {
-              item.vv === 0 ? <span></span> :
-              <Tooltip title="播放次数" placement="bottom" className="color-grey-6">
-                <i className={`icon-dianjiliang iconfont dianjilianicon font-14 fl`}></i>
-                <span className="ml8">item.vv</span>
-              </Tooltip> 
-            }
-            <span>
-              <Tooltip title="编辑" placement="bottom">
-                <a onClick={()=>onEditVideo(item)}><i className={`icon-bianji1 iconfont font-18 color-blue`}></i></a>
-              </Tooltip>
-              <Tooltip title="复制链接" placement="bottom">
-                <i className={`icon-fuzhi iconfont font-18 color-blue ml20`}></i>
-              </Tooltip>
-            </span>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-export default VideoItem;
\ No newline at end of file
diff --git a/public/react/src/modules/courses/Video/video.css b/public/react/src/modules/courses/Video/video.css
index 12c1350b3..0163d072b 100644
--- a/public/react/src/modules/courses/Video/video.css
+++ b/public/react/src/modules/courses/Video/video.css
@@ -1,7 +1,6 @@
 .videoContent{
   display: flex;
   flex-wrap: wrap;
-  margin-top: 20px;
   align-items: flex-start;
 }
 .videoContent > div{
@@ -48,4 +47,80 @@
   font-size: 16px;
   color: #4CACFF !important;
   margin-left: 6px;
+}
+
+.leftMenu{
+  float: left;
+  border:none;
+  font-size: 18px;
+}
+
+.liveItem{
+  padding: 30px 30px 15px 30px;
+  background: #fff;
+  margin-bottom: 10px;
+}
+.livesMain{
+  justify-content: space-between;
+}
+.lineMiddle{
+  display: flex;
+  align-items: center;
+}
+.liveAuthor{
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  margin-right: 20px;
+}
+.labels{
+  display: block;
+  padding: 0px 16px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+  margin-left: 20px;
+  border-radius: 16px;
+}
+.labels.living{
+  border:1px solid #FF5555;
+  color: #FF5555;
+}
+.labels.lived{
+  border:1px solid #999999;
+  color: #999999;
+}
+.btns
+{
+  display: block;
+  height: 34px;
+  line-height: 34px;
+  padding: 0px 26px;
+  border-radius: 4px;
+}
+.btns.going{
+  background: #5091FF;
+  color: #fff;
+}
+.btns.ect{
+  background: #CCCCCC;
+  color: #fff;
+}
+.liveDesc{
+  flex:1;
+  margin-right: 30px;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.liveModal .ant-modal-body{
+  padding:10px 20px 20px 20px;
+}
+.liveModal .ant-modal-body .task-popup-content{
+  padding:0px;
 }
\ No newline at end of file
diff --git a/public/react/src/modules/user/usersInfo/video/VideoUploadList.js b/public/react/src/modules/user/usersInfo/video/VideoUploadList.js
index 1857770a9..0ca13731b 100644
--- a/public/react/src/modules/user/usersInfo/video/VideoUploadList.js
+++ b/public/react/src/modules/user/usersInfo/video/VideoUploadList.js
@@ -51,7 +51,6 @@ function VideoUploadList (props) {
     const _beforeunload = beforeunload // .bind(this, noUploads, state)
 
     const username = props.match.params.username || props.CourseUser;
-    console.log("username",username);
     const { showNotification, history } = props;
     const uploaderOptions = {
             
@@ -260,7 +259,7 @@ function VideoUploadList (props) {
         <Link to={`/users/${username}/videos/protocol`} style={{color: theme.foreground_select}}>上传内容协议</Link>，不得上传未经他人授权的作品</div>
     const { flag } = props;
     return (
-        <div className={flag?"edu-back-white pb100 bor-top-greyE videoUploadList":"educontent videoUploadList"} style={{ marginBottom: `${flag?"0px":"200px"}` }}>
+        <div className={flag?"edu-back-white pb100 videoUploadList":"educontent videoUploadList"} style={{ marginBottom: `${flag?"0px":"200px"}` }}>
             <Prompt
                 when={state.videos.length }
                 message='确认要离开当前页面，当前数据不可恢复'