Merge branches 'dev_aliyun' and 'develop' of https://bdgit.educoder.net/Hjqreturn/educoder into dev_aliyun
commit
4b9185718f
|
Before Width: | Height: | Size: 128 KiB After Width: | Height: | Size: 207 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,260 @@
|
|||||||
|
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 axios from 'axios';
|
||||||
|
|
||||||
|
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'
|
||||||
|
|
||||||
|
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;
|
||||||
|
|
||||||
|
class VideoIndex extends Component{
|
||||||
|
constructor(props){
|
||||||
|
super(props);
|
||||||
|
this.state={
|
||||||
|
upload:false,
|
||||||
|
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.getList(page);
|
||||||
|
}
|
||||||
|
// 获取视频列表
|
||||||
|
getList=(page)=>{
|
||||||
|
const CourseId=this.props.match.params.coursesId;
|
||||||
|
const fetchUrl = `/courses/${CourseId}/course_videos.json`;
|
||||||
|
axios.get(fetchUrl, {
|
||||||
|
params: {
|
||||||
|
page,
|
||||||
|
limit: PAGE_SIZE,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if(response){
|
||||||
|
this.setState({
|
||||||
|
count:response.data.count,
|
||||||
|
videos:response.data.videos
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
console.log(error);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditVideo=(item)=>{
|
||||||
|
let videoId = {
|
||||||
|
videoId: item.id,
|
||||||
|
title: item.title
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
videoId,
|
||||||
|
})
|
||||||
|
this.setVisible(true);
|
||||||
|
}
|
||||||
|
uploadVideo=(upload)=>{
|
||||||
|
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.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({
|
||||||
|
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())
|
||||||
|
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>
|
||||||
|
</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">
|
||||||
|
{
|
||||||
|
upload ?
|
||||||
|
<WordsBtn style="grey" className="font-16" onClick={()=>this.uploadVideo(false)}>取消</WordsBtn>
|
||||||
|
:
|
||||||
|
<WordsBtn style="blue" className="font-16" onClick={this.toUpload}>上传视频</WordsBtn>
|
||||||
|
}
|
||||||
|
</li>
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
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>
|
||||||
|
}
|
||||||
|
|
||||||
|
</React.Fragment>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default VideoIndex;
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
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;
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
import React,{ Component } from "react";
|
||||||
|
|
||||||
|
|
||||||
|
class VideoNew extends Component{
|
||||||
|
render(){
|
||||||
|
return(
|
||||||
|
<div></div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default VideoNew;
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
.videoContent{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 20px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.videoContent > div{
|
||||||
|
width: 285px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
.videoContent > div:nth-child(3n+0){
|
||||||
|
margin-right: 0px!important;
|
||||||
|
}
|
||||||
|
.videoContent > div.videoItem:nth-child(4n+0){
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
.videoItem:nth-child(4n+0) {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
.videoContent > div .cover{
|
||||||
|
border-radius: 12px 12px 0px 0px;
|
||||||
|
height: 158px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.videoInfo{
|
||||||
|
padding:15px;
|
||||||
|
}
|
||||||
|
.videoInfo .title{
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
.videoInfo .time{
|
||||||
|
line-height: 15px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #C0C4CC;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.flex-middle{
|
||||||
|
display: flex;
|
||||||
|
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;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue