parent
de399372b7
commit
3a4b8ac4ad
File diff suppressed because one or more lines are too long
@ -0,0 +1,236 @@
|
||||
import React,{ Component , useRef } from "react";
|
||||
import { Input } 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';
|
||||
|
||||
const PAGE_SIZE = 15;
|
||||
const DEFAULT_VIDEO_WIDTH_IN_MD = "90%" // 400
|
||||
const DEFAULT_VIDEO_HEIGHT_IN_MD = "55%" // 400
|
||||
|
||||
const videoEl = useRef(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) {
|
||||
// 关闭视频
|
||||
videoEl.current && videoEl.current.pause()
|
||||
if (_clipboard) {
|
||||
_clipboard.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,
|
||||
per_page: PAGE_SIZE,
|
||||
}
|
||||
})
|
||||
.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
|
||||
})
|
||||
}
|
||||
}).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
|
||||
})
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
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);
|
||||
return(
|
||||
<React.Fragment>
|
||||
<div className="edu-back-white">
|
||||
<EditVideoModal {...this.props} visible={visible} setVisible={this.setVisible}
|
||||
editSuccess={this.editSuccess}
|
||||
{...videoId}
|
||||
></EditVideoModal>
|
||||
<HeadlessModal
|
||||
visible={videoVisible}
|
||||
setVisible={this.setVideoVisible}
|
||||
className="showVideoModal"
|
||||
width={800 - 1}
|
||||
>
|
||||
<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>
|
||||
<li className="fr">
|
||||
{
|
||||
upload ?
|
||||
<WordsBtn style="grey" className="font-16" onClick={()=>this.uploadVideo(false)}>取消</WordsBtn>
|
||||
:
|
||||
<WordsBtn style="blue" className="font-16" onClick={()=>this.uploadVideo(true)}>上传视频</WordsBtn>
|
||||
}
|
||||
</li>
|
||||
</p>
|
||||
</div>
|
||||
{
|
||||
upload ?
|
||||
<VideoUploadList {...this.props} flag={true} CourseId={CourseId} CourseUser={login} successFunc={this.uploadVideo}></VideoUploadList>
|
||||
:
|
||||
<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}
|
||||
|
||||
>
|
||||
</VideoInReviewItem>
|
||||
)
|
||||
})
|
||||
}
|
||||
</React.Fragment>
|
||||
:
|
||||
<NoneData style={{width: '100%'}}></NoneData>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
</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,36 @@
|
||||
.videoContent{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.videoContent > div{
|
||||
width: 285px;
|
||||
margin-bottom: 20px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
Loading…
Reference in new issue