diff --git a/public/react/config/webpack.config.dev.js b/public/react/config/webpack.config.dev.js index b3c1cea5b..98396ab18 100644 --- a/public/react/config/webpack.config.dev.js +++ b/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. diff --git a/public/react/src/modules/courses/Video/VideoIndex.js b/public/react/src/modules/courses/Video/VideoIndex.js index d82ec52a1..d8d1c6ff3 100644 --- a/public/react/src/modules/courses/Video/VideoIndex.js +++ b/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,19 +43,21 @@ class VideoIndex extends Component{ }) } setVideoVisible=(flag)=>{ + this.setState({ videoVisible:flag }) if (flag === false) { - // 关闭视频 - videoEl.current && videoEl.current.pause() if (_clipboard) { - _clipboard.destroy(); - _clipboard = null; + this.setState({ + videoId:undefined + }) + _clipboard.listener.destroy(); + _clipboard = null; } } else { - videoEl.current && videoEl.current.play() - + // videoEl.current && videoEl.current.play() + setTimeout(() => { if (!_clipboard) { _clipboard = new ClipboardJS('.copybtn'); @@ -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,20 +110,21 @@ class VideoIndex extends Component{ this.setState({ upload }) + const { page } = this.state; + 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.setVisible(true); + 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)=>{ @@ -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(
- + { + videoId && + + } +
: +
{ videos && videos.length > 0 ? @@ -227,6 +228,13 @@ class VideoIndex extends Component{ }
+ { + count > PAGE_SIZE && +
+ +
+ } + } diff --git a/public/react/src/modules/courses/Video/video.css b/public/react/src/modules/courses/Video/video.css index 5cad9074f..133cac4c2 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; - 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; @@ -33,4 +36,10 @@ justify-content: space-between; align-items: center; height: 25px; +} +.square-main .buttonRow i { + vertical-align: top; + font-size: 16px; + color: #4CACFF !important; + margin-left: 6px; } \ No newline at end of file diff --git a/public/react/src/modules/user/usersInfo/video/EditVideoModal.js b/public/react/src/modules/user/usersInfo/video/EditVideoModal.js index 7420d6750..25aadd119 100644 --- a/public/react/src/modules/user/usersInfo/video/EditVideoModal.js +++ b/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`) }