课堂视频

public/react/config/webpack.config.dev.js

@@ -9,7 +9,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+// const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
 
@@ -267,7 +267,7 @@ module.exports = {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-    new MonacoWebpackPlugin(),
+    // new MonacoWebpackPlugin(),
 	],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

public/react/src/modules/courses/Video/VideoIndex.js

@@ -1,5 +1,5 @@
-import React,{ Component , useRef } from "react";
-import { Input } from 'antd';
+import React,{ Component } from "react";
+import { Input , Pagination } from 'antd';
 import { WordsBtn , NoneData ,ActionBtn } from 'educoder';
 
 import VideoItem from './VideoItem';
@@ -18,7 +18,7 @@ const PAGE_SIZE = 15;
 const DEFAULT_VIDEO_WIDTH_IN_MD = "90%" // 400
 const DEFAULT_VIDEO_HEIGHT_IN_MD = "55%" // 400
 
-const videoEl = useRef(null);
+const videoEl = null;
 let _clipboard = null;
 
 class VideoIndex extends Component{
@@ -43,18 +43,20 @@ class VideoIndex extends Component{
     })
   }
   setVideoVisible=(flag)=>{
+    
     this.setState({
       videoVisible:flag
     })
     if (flag === false) {
-      // 关闭视频
-      videoEl.current && videoEl.current.pause()
       if (_clipboard) {
-          _clipboard.destroy();
+        this.setState({
+          videoId:undefined
+        })
+        _clipboard.listener.destroy();
         _clipboard = null;
       }
     } else {
-        videoEl.current && videoEl.current.play()
+        // videoEl.current && videoEl.current.play()
         
         setTimeout(() => {
             if (!_clipboard) {
@@ -65,6 +67,7 @@ class VideoIndex extends Component{
             }
         }, 200)
     }
+    
   }
   // 编辑成功后回调的方法
   editSuccess=()=>{
@@ -83,26 +86,9 @@ class VideoIndex extends Component{
     })
     .then((response) => {
       if(response){
-        let list = {
-          count:1,
-          videos:[
-            {
-              id: 726,
-              title: "c9486fd-16cdaf190d2.mp4",
-              cover_url: "http://video.educoder.net/5040e61081fe4380ba7bdfd181e44350/snapshots/88d4bf91061149e1ae45fab811ee1a33-00005.jpg",
-              file_url: "http://outin-396971199eed11e991a100163e1c7426.oss-cn-shanghai.aliyuncs.com/sv/487032e4-16d09b5d50d/487032e4-16d09b5d50d.mp4",
-              play_url: "http://video.educoder.net/sv/487032e4-16d09b5d50d/487032e4-16d09b5d50d.mp4",
-              vv: 0,
-              play_duration: 0,
-              published_at: "2019-09-07 11:14:19",
-              created_at: "2019-09-07 11:12:54",
-              updated_at: "2020-02-06 19:28:14",
-            }
-          ]
-        }
         this.setState({
-          count:list.count,
-          videos:list.videos
+          count:response.data.count,
+          videos:response.data.videos
         })
       }
     }).catch((error) => {
@@ -124,6 +110,8 @@ class VideoIndex extends Component{
     this.setState({
       upload
     })
+    const { page } = this.state;
+    this.getList(page);
   }
 
   onMaskClick=(item)=> {
@@ -132,12 +120,11 @@ class VideoIndex extends Component{
       title: item.title,
       file_url: item.file_url,
       cover_url: item.cover_url
-
     }
     this.setState({
       videoId
     })
-      this.setVisible(true);
+    this.setVideoVisible(true);
   }
 
   getCopyText = (file_url, cover_url)=>{
@@ -148,18 +135,27 @@ class VideoIndex extends Component{
     const { page } = this.state;
     this.getList(page);
   }
+
+  changePage=(page)=>{
+    this.setState({
+      page
+    })
+    this.getList(page);
+  }
   render(){
     const { count , videos , upload , visible , videoVisible , videoId } = this.state;
     const CourseId=this.props.match.params.coursesId;
     const { login }= this.props.user;
 
-	  const _inputValue = this.getCopyText(videoId.file_url, videoId.cover_url);
+    const _inputValue = videoId && this.getCopyText(videoId.file_url, videoId.cover_url);
+    
+    
     return(
       <React.Fragment>
         <div className="edu-back-white">
           <EditVideoModal {...this.props} visible={visible} setVisible={this.setVisible}
               editSuccess={this.editSuccess}
-              {...videoId}
+              {...videoId} CourseUser={login}
           ></EditVideoModal>
           <HeadlessModal
             visible={videoVisible}
@@ -167,12 +163,16 @@ class VideoIndex extends Component{
             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"
@@ -196,6 +196,7 @@ class VideoIndex extends Component{
           upload ? 
           <VideoUploadList {...this.props} flag={true} CourseId={CourseId} CourseUser={login} successFunc={this.uploadVideo}></VideoUploadList>
           :
+          <React.Fragment>
           <div className="videoContent">
             {
               videos && videos.length > 0 ?
@@ -227,6 +228,13 @@ class VideoIndex extends Component{
               <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>
         }
         
       </React.Fragment>

public/react/src/modules/courses/Video/video.css

@@ -1,7 +1,6 @@
 .videoContent{
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
   margin-top: 20px;
   align-items: flex-start;
 }
@@ -10,6 +9,10 @@
   margin-bottom: 20px;
   background: #fff;
   border-radius: 12px;
+  margin-right: 30px;
+}
+.videoContent > div:nth-child(3n+0){
+  margin-right: 0px;
 }
 .videoContent > div .cover{
   border-radius: 12px 12px 0px 0px;
@@ -34,3 +37,9 @@
   align-items: center;
   height: 25px;
 }
+.square-main .buttonRow i {
+  vertical-align: top;
+  font-size: 16px;
+  color: #4CACFF !important;
+  margin-left: 6px;
+}

public/react/src/modules/user/usersInfo/video/EditVideoModal.js

@@ -10,9 +10,13 @@ function EditVideoModal (props) {
     const { history, videoId, cover_url, title, created_at, isReview, onEditVideo, visible, setVisible,
             form, editSuccess } = props;
     const getFieldDecorator = form.getFieldDecorator
-    const username = props.match.params.username
+    let username = props.match.params.username
     const _title = form.getFieldsValue().title;
 
+    if(props.CourseUser){
+        username = props.CourseUser;
+    }
+
     function toList() {
         history.push(`/users/${username}/videos`)
     }