m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix fly file play bug

Browse Source
dev_aliyun2
harry 5 years ago
parent 34edacc835
commit 4dc5bc4f1a
4 changed files with 3593 additions and 170 deletions
Show Stats Download Patch File Download Diff File

3473
public/react/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

264
public/react/src/modules/courses/Video/Video.js
Unescape View File

@ -1,12 +1,13 @@
import React,{ Component } from "react";
import { Input , Pagination } from 'antd';
import { NoneData ,ActionBtn } from 'educoder';
import React, { Component } from "react";
import { Input, Pagination } from 'antd';
import { NoneData, ActionBtn } from 'educoder';
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 ClipboardJS from 'clipboard'
import VideoPanel from './video-play'
import './video.css';
import '../../user/usersInfo/video/InfosVideo.css'
@ -15,77 +16,76 @@ import axios from 'axios';
const DEFAULT_VIDEO_WIDTH_IN_MD = "90%" // 400
const DEFAULT_VIDEO_HEIGHT_IN_MD = "55%" // 400
const videoEl = null;
let _clipboard = null;
class Video extends Component{
constructor(props){
class Video extends Component {
constructor(props) {
super(props);
this.state={
videos:undefined,
count:0,
page:1,
videoId:undefined,
videoVisible:false,
visible:false
this.state = {
videos: undefined,
count: 0,
page: 1,
videoId: undefined,
videoVisible: false,
visible: false
}
}
// 编辑的弹框visible
setVisible=(flag)=>{
setVisible = (flag) => {
this.setState({
visible:flag
visible: flag
})
}
setVideoVisible=(flag)=>{
setVideoVisible = (flag) => {
this.setState({
videoVisible:flag
videoVisible: flag
})
if (flag === false) {
if (_clipboard) {
this.setState({
videoId:undefined
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)
// videoEl.current && videoEl.current.play()
setTimeout(() => {
if (!_clipboard) {
_clipboard = new ClipboardJS('.copybtn');
_clipboard.on('success', (e) => {
this.props.showNotification('复制成功');
});
}
}, 200)
}
}
// 编辑成功后回调的方法
editSuccess=()=>{
editSuccess = () => {
this.props.showNotification("视频名称修改成功!");
const { listFunc , page } = this.props;
const { listFunc, page } = this.props;
listFunc && listFunc(page);
}
onEditVideo=(item)=>{
onEditVideo = (item) => {
let videoId = {
videoId: item.id,
title: item.title
}
this.setState({
videoId,
})
this.setVisible(true);
videoId: item.id,
title: item.title
}
this.setState({
videoId,
})
this.setVisible(true);
}
onMaskClick=(item)=> {
onMaskClick = (item) => {
let videoId = {
videoId: item.id,
title: item.title,
@ -99,59 +99,59 @@ class Video extends Component{
}
setVideoVisible=(flag)=>{
setVideoVisible = (flag) => {
this.setState({
videoVisible:flag
videoVisible: flag
})
if (flag === false) {
if (_clipboard) {
this.setState({
videoId:undefined
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)
// videoEl.current && videoEl.current.play()
setTimeout(() => {
if (!_clipboard) {
_clipboard = new ClipboardJS('.copybtn');
_clipboard.on('success', (e) => {
this.props.showNotification('复制成功');
});
}
}, 200)
}
}
getCopyText = (file_url, cover_url)=>{
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>`
}
// 删除事件
deleteVideo=(item)=>{
deleteVideo = (item) => {
this.props.confirm({
content: '该视频将被删除，不可恢复',
subContent:'是否确认删除?',
subContent: '是否确认删除?',
onOk: () => {
const CourseId=this.props.match.params.coursesId;
const CourseId = this.props.match.params.coursesId;
const url = `/courses/${CourseId}/delete_course_video.json`;
axios.delete(url,{
params:{
video_id:item.id
axios.delete(url, {
params: {
video_id: item.id
}
}).then(result=>{
if(result){
}).then(result => {
if (result) {
this.props.showNotification(`删除成功!`);
this.props.updataleftNavfun();
const { listFunc , page } = this.props;
const { listFunc, page } = this.props;
listFunc && listFunc(page);
}
}).catch(error=>{
}).catch(error => {
console.log(error);
})
},
@ -161,90 +161,82 @@ class Video extends Component{
});
}
render(){
const { visible , videoVisible , videoId } = this.state;
const CourseId=this.props.match.params.coursesId;
const login=this.props.user&&this.props.user.login;
render() {
const { 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 , user_id} = this.props.user;
const { admin, is_teacher, business, user_id } = this.props.user;
const { videos , upload , uploadVideo , videoData , changePage ,pageSize ,page } = this.props;
const { videos, upload, uploadVideo, videoData, changePage, pageSize, page } = this.props;
const operation = admin || business || (is_teacher && this.props.checkIfProfessionalCertification())
return(
return (
<div>
<EditVideoModal {...this.props} visible={visible} setVisible={this.setVisible}
editSuccess={this.editSuccess}
{...videoId} CourseUser={login}
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>
visible={videoVisible}
setVisible={this.setVideoVisible}
className="showVideoModal"
width={800 - 1}
>
{videoId && <VideoPanel src={videoId.file_url} />}
<div className="df copyLine">
<Input value={_inputValue}
className="dark"
></Input>
<ActionBtn className="copybtn" data-clipboard-text={_inputValue}>复制视频地址</ActionBtn>
</div>
</HeadlessModal>
<div className="videoPanel">
{
upload ?
<VideoUploadList {...this.props} flag={true} CourseId={CourseId} CourseUser={login} successFunc={()=>uploadVideo()}></VideoUploadList>
:
<React.Fragment>
{
videos && videos.length > 0 ?
<React.Fragment>
<p className="font-grey-9 mt20 mb20 pl5">共 <span className="color-orange">{videoData && videoData.count}</span> 个视频</p>
<div className="videoContent">
{
videos.map((item,key)=>{
return(
<VideoInReviewItem
{...this.props}
{...item}
key={item.id}
onEditVideo={this.onEditVideo}
onMaskClick={this.onMaskClick}
getCopyText={this.getCopyText}
operation={operation}
deleteVideo={(admin || item.user_id === user_id) ? this.deleteVideo : undefined}
>
</VideoInReviewItem>
)
})
}
<VideoUploadList {...this.props} flag={true} CourseId={CourseId} CourseUser={login} successFunc={() => uploadVideo()}></VideoUploadList>
:
<React.Fragment>
{
videos && videos.length > 0 ?
<React.Fragment>
<p className="font-grey-9 mt20 mb20 pl5">共 <span className="color-orange">{videoData && videoData.count}</span> 个视频</p>
<div className="videoContent">
{
videos.map((item, key) => {
return (
<VideoInReviewItem
{...this.props}
{...item}
key={item.id}
onEditVideo={this.onEditVideo}
onMaskClick={this.onMaskClick}
getCopyText={this.getCopyText}
operation={operation}
deleteVideo={(admin || item.user_id === user_id) ? this.deleteVideo : undefined}
>
</VideoInReviewItem>
)
})
}
</div>
</React.Fragment>
:
<div className="edu-back-white">
<NoneData style={{ width: '100%' }}></NoneData>
</div>
}
{
videoData && videoData.count > pageSize &&
<div className="mt30 mb50 edu-txt-center">
<Pagination showQuickJumper total={videoData.count} current={page} pageSize={pageSize} onChange={(page) => changePage(page, 'video')}></Pagination>
</div>
</React.Fragment>
:
<div className="edu-back-white">
<NoneData style={{width: '100%'}}></NoneData>
</div>
}
{
videoData && videoData.count > pageSize &&
<div className="mt30 mb50 edu-txt-center">
<Pagination showQuickJumper total={videoData.count} current={page} pageSize={pageSize} onChange={(page)=>changePage(page,'video')}></Pagination>
</div>
}
</React.Fragment>
}
</React.Fragment>
}
</div>
</div>

18
public/react/src/modules/courses/Video/video-play.jsx
Unescape View File

@ -0,0 +1,18 @@
import React, { Fragment } from 'react'
import { ReactFlvPlayer } from 'react-flv-player'
export default ({ src }) => {
const suf = src.split('.').pop()
const isFlv = suf === 'flv'
return (
<Fragment>
{
isFlv ? <ReactFlvPlayer url={src} isMuted={true} /> : <video src={src} controls autoPlay={true} controlsList="nodownload">
<source type={`video/${suf}`} src={src} />
您的浏览器不支持 video 标签。
</video>
}
</Fragment>
)
}

8
public/react/src/modules/user/usersInfo/video/InfosVideo.js
Unescape View File

@ -9,6 +9,7 @@ import InfoTab from '../common/InfoTab'
import HeadlessModal from '../common/HeadlessModal'
import ClipboardJS from 'clipboard'
import VideoPlay from '../../../courses/Video/video-play';
function useModal(initValue) {
const [visible, setVisible] = useState(initValue)
@ -236,12 +237,7 @@ function InfoVideo(props) {
className="showVideoModal"
width={800 - 1}
>
<video
autoplay="true"
ref={videoEl}
src={videoId.file_url} controls="true" controlslist="nodownload">
您的浏览器不支持 video 标签。
</video>
<VideoPlay src={videoId.file_url} />
<div className="df copyLine">
<Input value={_inputValue}
className="dark"

Write Preview
Loading…
Cancel
Save