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