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

实现视频地址

Browse Source
dev_video
杨树林 5 years ago
parent b1cf2c0679
commit 4823030923
2 changed files with 325 additions and 224 deletions
Show Stats Download Patch File Download Diff File

518
public/react/src/modules/courses/Resource/Fileslistitem.js
Unescape View File

@ -1,102 +1,152 @@
import React,{ Component } from "react";
import { WordsBtn } from 'educoder';
import {Tooltip,message} from 'antd';
import { WordsBtn,ActionBtn,getUrl } from 'educoder';
import {Tooltip,message,Input, Button} from 'antd';
import {Link} from 'react-router-dom';
import {getImageUrl} from 'educoder';
import axios from 'axios'
import {getUrl} from 'educoder';
import {} from 'educoder';
import moment from 'moment'
import CoursesListType from '../coursesPublic/CoursesListType';
import Showoldfiles from "../coursesPublic/Showoldfiles";
import Modals from '../../modals/Modals';
import HeadlessModal from '../../user/usersInfo/common/HeadlessModal'
import ClipboardJS from 'clipboard'
import '../../user/usersInfo/video/InfosVideo.css'
let _clipboard = null;
let getUrls=getUrl();
class Fileslistitem extends Component{
constructor(props){
super(props);
this.state = {
}
}
settingList=()=>{
let {discussMessage}=this.props
this.setState({
discussMessageid:discussMessage.id
})
this.props.Settingtypes(discussMessage.id)
}
showfiles=(list)=>{
if(this.props.checkIfLogin()===false){
this.props.showLoginDialog()
return
}
// if(this.props.checkIfProfileCompleted()===false){
// this.setState({
// AccountProfiletype:true
// })
// return
// }
// if(this.props.checkIfProfessionalCertification()===false){
// this.props.showProfileCompleteDialog()
// return
// }
if(list.is_history_file===false){
// this.props.DownloadFileA(list.title,list.url)
//window.location.href=list.url;
window.open(list.url, '_blank');
constructor(props){
super(props);
this.state = {
videoModalObj:false,
file_url:"",
}
}
setVisible=(bool)=>{
this.setState({
videoModalObj:bool
})
}
settingList=()=>{
let {discussMessage}=this.props
this.setState({
discussMessageid:discussMessage.id
})
this.props.Settingtypes(discussMessage.id)
}
showfiles=(list)=>{
// console.log("showfiles");
// console.log(list);
if(this.props.checkIfLogin()===false){
this.props.showLoginDialog()
return
}
// if(this.props.checkIfProfileCompleted()===false){
// this.setState({
// AccountProfiletype:true
// })
// return
// }
// if(this.props.checkIfProfessionalCertification()===false){
// this.props.showProfileCompleteDialog()
// return
// }
if(list.is_history_file===false){
// this.props.DownloadFileA(list.title,list.url)
//window.location.href=list.url;
if(list.content_type){
if(list.content_type==="video/mp4"){
this.setState({
videoModalObj:true,
file_url:getUrls+list.url+'?file_name='+list.title,
})
return
}else{
window.open(list.url, '_blank');
}
}else{
let {discussMessage,coursesId}=this.props
let file_id=discussMessage.id
let url="/files/"+file_id+"/histories.json"
axios.get(url,{
params:{
course_id:coursesId
},
}).then((result)=>{
if(result.data.attachment_histories.length===0){
// if(result.data.is_pdf===true){
// this.props.ShowOnlinePdf(result.data.url)
// //预览pdf
// }else{
//
// }
// this.props.DownloadFileA(result.data.title,result.data.url)
window.open(list.url, '_blank');
window.open(list.url, '_blank');
}
}else{
let {discussMessage,coursesId}=this.props
let file_id=discussMessage.id
let url="/files/"+file_id+"/histories.json"
axios.get(url,{
params:{
course_id:coursesId
},
}).then((result)=>{
if(result.data.attachment_histories.length===0){
// if(result.data.is_pdf===true){
// this.props.ShowOnlinePdf(result.data.url)
// //预览pdf
// }else{
//
// }
// this.props.DownloadFileA(result.data.title,result.data.url)
if(list.content_type){
if(list.content_type==="video/mp4"){
this.setState({
videoModalObj:true,
file_url:getUrls+list.url+'?file_name='+list.title,
})
return
}else{
window.open(list.url, '_blank');
}
}else{
this.setState({
Showoldfiles:true,
allfiles:result.data
})
window.open(list.url, '_blank');
}
}).catch((error)=>{
console.log(error)
})
}
}else{
this.setState({
Showoldfiles:true,
allfiles:result.data
})
}
}
closaoldfilesprops=()=>{
this.setState({
Showoldfiles:false,
})
}
}).catch((error)=>{
console.log(error)
})
}
onDelete = (id) => {
}
closaoldfilesprops=()=>{
this.setState({
Showoldfiles:false,
})
}
Clicktobroadcastthevideo=(bool,url)=>{
this.setState({
Modalstype:true,
Modalstopval:"是否确认删除?",
ModalCancel:this.cancelmodel,
ModalSave:()=>this.savedelete(id),
})
videoModalObj:bool,
file_url:getUrls+url,
})
}
}
onDelete = (id) => {
this.setState({
Modalstype:true,
Modalstopval:"是否确认删除?",
ModalCancel:this.cancelmodel,
ModalSave:()=>this.savedelete(id),
})
}
cancelmodel=()=>{
@ -111,6 +161,17 @@ class Fileslistitem extends Component{
}
copyurls =()=>{
//复制网络链接
setTimeout(() => {
if (!_clipboard) {
_clipboard = new ClipboardJS('.copybtn');
_clipboard.on('success', (e) => {
this.props.showNotification("复制成功");
});
}
}, 200)
}
savedelete=(id)=>{
this.setState({
@ -145,37 +206,61 @@ class Fileslistitem extends Component{
.catch(function (error) {
console.log(error);
});
}
eventStop = (event) =>{
event.stopPropagation()
}
}
eventStop = (event) =>{
event.stopPropagation()
}
render(){
const {videoModalObj,file_url}=this.state
const { checkBox,
discussMessage,index
} = this.props;
return(
<div className="graduateTopicList boardsList">
{
videoModalObj&&videoModalObj===true?
<HeadlessModal
visible={videoModalObj}
setVisible={(bool)=>this.setVisible(bool)}
className="showVideoModal"
width={800 - 1}
>
<video
autoplay="true"
src={file_url} controls="true" controlslist="nodownload">
您的浏览器不支持 video 标签。
</video>
<div className="df copyLine">
<Input value={file_url}
className="dark"
></Input>
<ActionBtn className="copybtn" data-clipboard-text={file_url} onClick={() =>this.copyurls()}>复制视频地址</ActionBtn>
</div>
</HeadlessModal>
:""
}
const { checkBox,
discussMessage,index
} = this.props;
return(
<div className="graduateTopicList boardsList">
{/*提示*/}
{this.state.Modalstype&&this.state.Modalstype===true?<Modals
modalsType={this.state.Modalstype}
modalsTopval={this.state.Modalstopval}
modalCancel={this.state.ModalCancel}
modalSave={this.state.ModalSave}
modalsBottomval={this.state.ModalsBottomval}
loadtype={this.state.Loadtype}
/>:""}
<Showoldfiles
{...this.props}
visible={this.state.Showoldfiles}
allfiles={this.state.allfiles}
closaoldfilesprops={this.closaoldfilesprops}
/>
<style>{`
{/*提示*/}
{this.state.Modalstype&&this.state.Modalstype===true?<Modals
modalsType={this.state.Modalstype}
modalsTopval={this.state.Modalstopval}
modalCancel={this.state.ModalCancel}
modalSave={this.state.ModalSave}
modalsBottomval={this.state.ModalsBottomval}
loadtype={this.state.Loadtype}
/>:""}
<Showoldfiles
{...this.props}
visible={this.state.Showoldfiles}
allfiles={this.state.allfiles}
Clicktobroadcastthevideo={(bool,urls)=>this.Clicktobroadcastthevideo(bool,urls)}
closaoldfilesprops={this.closaoldfilesprops}
/>
<style>{`
.graduateTopicList .ant-checkbox-input {
margin-right: 15px;
}
@ -185,21 +270,21 @@ class Fileslistitem extends Component{
`}</style>
<style>{`
<style>{`
.boardsList .panel-list-img {
width: 50px;
height: 50px;
}
`}</style>
{/*<a href={"/users/"+this.props.user.login} alt="用户"*/}
{/*style={{"width": "50px", "height": "50px", "display": "block", margin: "0 10px"}}>*/}
{/*<img*/}
{/*alt="1?1529221779" className="panel-list-img mr15" height="50"*/}
{/*src={getImageUrl("images/"+discussMessage.author.image_url)} width="50"*/}
{/*></img>*/}
{/*</a>*/}
<style>{`
{/*<a href={"/users/"+this.props.user.login} alt="用户"*/}
{/*style={{"width": "50px", "height": "50px", "display": "block", margin: "0 10px"}}>*/}
{/*<img*/}
{/*alt="1?1529221779" className="panel-list-img mr15" height="50"*/}
{/*src={getImageUrl("images/"+discussMessage.author.image_url)} width="50"*/}
{/*></img>*/}
{/*</a>*/}
<style>{`
.boardsList .contentSection{
margin-left:0px;
}
@ -213,55 +298,55 @@ class Fileslistitem extends Component{
margin-top:2px;
}
`}</style>
<div className="clearfix ds pr contentSection" style={{cursor : this.props.isAdmin ? "pointer" : "default"}} onClick={() => window.$(`.sourceitem${index} input`).click() }>
<h6 onClick={(event)=>this.eventStop(event)}>
<div className="clearfix ds pr contentSection" style={{cursor : this.props.isAdmin ? "pointer" : "default"}} onClick={() => window.$(`.sourceitem${index} input`).click() }>
<h6 onClick={(event)=>this.eventStop(event)}>
<span className={`sourceitem${index} fl mr12 mt3`}>
{checkBox}
</span>
{
this.props.isAdmin ? <a
// href={"/courses/" + coursesId + "/graduation/graduation_tasks/" + categoryid + "/" + taskid + "/list"}
onClick={()=>this.showfiles(discussMessage)}
title={discussMessage.title}
className="fl mt3 font-16 font-bd color-dark maxwidth580">{discussMessage.title}</a> : ""
}
{
this.props.isStudent? <a
onClick={()=>this.showfiles(discussMessage)}
title={discussMessage.title}
className="fl mt3 font-16 font-bd color-dark maxwidth580">{discussMessage.title}</a> :""
}
{
this.props.isNotMember===true?
discussMessage.is_lock === true ?
<span className="fl mt3 font-16 font-bd color-dark maxwidth580 pointer" title={"私有属性，非课堂成员不能访问"}>{discussMessage.title}</span>
:<a
onClick={()=>this.showfiles(discussMessage)}
title={discussMessage.title}
className="fl mt3 font-16 font-bd color-dark maxwidth580">{discussMessage.title}</a>:""
}
{
discussMessage.is_lock === true ?
<Tooltip title={"私有属性，非课堂成员不能访问"} placement="bottom">
<i className="iconfont icon-guansuo color-grey-c ml10 font-16 fl mt4"></i>
</Tooltip>
:""
}
{discussMessage.is_publish===false?<CoursesListType typelist={["未发布"]} typesylename={""}/>:""}
{this.props.isAdmin?
<span className={"fr mt2"} onClick={(event)=>this.eventStop(event)}>
{
this.props.isAdmin ? <a
// href={"/courses/" + coursesId + "/graduation/graduation_tasks/" + categoryid + "/" + taskid + "/list"}
onClick={()=>this.showfiles(discussMessage)}
title={discussMessage.title}
className="fl mt3 font-16 font-bd color-dark maxwidth580">{discussMessage.title}</a> : ""
}
{
this.props.isStudent? <a
onClick={()=>this.showfiles(discussMessage)}
title={discussMessage.title}
className="fl mt3 font-16 font-bd color-dark maxwidth580">{discussMessage.title}</a> :""
}
{
this.props.isNotMember===true?
discussMessage.is_lock === true ?
<span className="fl mt3 font-16 font-bd color-dark maxwidth580 pointer" title={"私有属性，非课堂成员不能访问"}>{discussMessage.title}</span>
:<a
onClick={()=>this.showfiles(discussMessage)}
title={discussMessage.title}
className="fl mt3 font-16 font-bd color-dark maxwidth580">{discussMessage.title}</a>:""
}
{
discussMessage.is_lock === true ?
<Tooltip title={"私有属性，非课堂成员不能访问"} placement="bottom">
<i className="iconfont icon-guansuo color-grey-c ml10 font-16 fl mt4"></i>
</Tooltip>
:""
}
{discussMessage.is_publish===false?<CoursesListType typelist={["未发布"]} typesylename={""}/>:""}
{this.props.isAdmin?
<span className={"fr mt2"} onClick={(event)=>this.eventStop(event)}>
<WordsBtn style="blue" className="colorblue font-16 ml20 fr">
<a className="btn colorblue fontweight400"
onClick={()=>this.settingList()}>设置</a>
</WordsBtn>
</span>:""}
{this.props.isStudent===true&&this.props.current_user.login===discussMessage.author.login?
<span className={"fr mt2"} onClick={(event)=>this.eventStop(event)}>
{this.props.isStudent===true&&this.props.current_user.login===discussMessage.author.login?
<span className={"fr mt2"} onClick={(event)=>this.eventStop(event)}>
<WordsBtn style="blue" className="colorblue font-16 ml20 fr">
<a className="btn colorblue fontweight400"
@ -274,24 +359,24 @@ class Fileslistitem extends Component{
</WordsBtn>
</span>:""}
</h6>
<style>
{
`
</h6>
<style>
{
`
.sttingbox{
position: absolute;
right: 0px;
top: 20px;
}
`
}
</style>
}
</style>
<style>
{
`
<style>
{
`
.lightgreybox{
min-width: 260px;
}
@ -299,47 +384,47 @@ class Fileslistitem extends Component{
margin-top: -2px;
}
`
}
</style>
{/*资源分班*/}
{/*{discussMessage.course_groups.length===0?"":*/}
{/*<p className="color-grey panel-lightgrey mt8 fl lightgreybox ml30" style={{width:'100%'}}>*/}
{/*{discussMessage.course_groups.map((item,key)=>{*/}
{/*return(*/}
{/*<div className="mr50">*/}
{/*<span className="mr15 color-dark">{item.course_group_name}</span>*/}
{/*<span className="mr15 color-grey9 ">将发布于 { moment(item.course_group_publish_time).format('YYYY-MM-DD HH:mm')}</span>*/}
{/*</div>*/}
{/*)*/}
{/*})}*/}
{/*</p>}*/}
<p className={this.props.isAdmin===true?"color-grey panel-lightgrey mt8 fl ml30":"color-grey panel-lightgrey mt8 fl ml13"} style={{width:'100%'}}>
}
</style>
{/*资源分班*/}
{/*{discussMessage.course_groups.length===0?"":*/}
{/*<p className="color-grey panel-lightgrey mt8 fl lightgreybox ml30" style={{width:'100%'}}>*/}
{/*{discussMessage.course_groups.map((item,key)=>{*/}
{/*return(*/}
{/*<div className="mr50">*/}
{/*<span className="mr15 color-dark">{item.course_group_name}</span>*/}
{/*<span className="mr15 color-grey9 ">将发布于 { moment(item.course_group_publish_time).format('YYYY-MM-DD HH:mm')}</span>*/}
{/*</div>*/}
{/*)*/}
{/*})}*/}
{/*</p>}*/}
<p className={this.props.isAdmin===true?"color-grey panel-lightgrey mt8 fl ml30":"color-grey panel-lightgrey mt8 fl ml13"} style={{width:'100%'}}>
<span className="mr50">
<span className="mr15 color-dark">{discussMessage.author.name}</span>
<span className="mr15 color-grey9">大小 {discussMessage.filesize}</span>
<span className="mr15 color-grey9">下载 {discussMessage.downloads_count}</span>
{/*<span className="mr15 color-grey9">引用 {discussMessage.quotes}</span>*/}
<span className="mr15 color-grey-c">
{/*<span className="mr15 color-grey9">引用 {discussMessage.quotes}</span>*/}
<span className="mr15 color-grey-c">
{/*{moment(discussMessage.publish_time).format('YYYY-MM-DD HH:mm:ss')}*/}
{/*{moment(discussMessage.publish_time).fromNow()}*/}
{ discussMessage.publish_time===null?"":
discussMessage.is_publish===true?"":"发布于"}
{ discussMessage.publish_time===null?"":discussMessage.is_publish===true?moment(discussMessage.publish_time).fromNow():moment(discussMessage.publish_time).format('YYYY-MM-DD HH:mm')}
{/*{moment(discussMessage.publish_time).fromNow()}*/}
{ discussMessage.publish_time===null?"":
discussMessage.is_publish===true?"":"发布于"}
{ discussMessage.publish_time===null?"":discussMessage.is_publish===true?moment(discussMessage.publish_time).fromNow():moment(discussMessage.publish_time).format('YYYY-MM-DD HH:mm')}
</span>
</span>
{discussMessage&&discussMessage.category_name===null?"":this.props.child===false?<div className="color-grey9 task-hide fr mr30" title={discussMessage&&discussMessage.category_name}
style={{"max-width":"268px"}}>所属目录：{discussMessage&&discussMessage.category_name}
</div>:""}
</p>
{discussMessage&&discussMessage.category_name===null?"":this.props.child===false?<div className="color-grey9 task-hide fr mr30" title={discussMessage&&discussMessage.category_name}
style={{"max-width":"268px"}}>所属目录：{discussMessage&&discussMessage.category_name}
</div>:""}
</p>
<p className={this.props.isAdmin===true?"color-grey panel-lightgrey mt8 fl ml30":"color-grey panel-lightgrey mt8 fl ml13"} style={{width:'94%'}}>
<style>
{
`
<p className={this.props.isAdmin===true?"color-grey panel-lightgrey mt8 fl ml30":"color-grey panel-lightgrey mt8 fl ml13"} style={{width:'94%'}}>
<style>
{
`
.isspans{
text-align: left;
white-space: pre-wrap;
@ -347,22 +432,23 @@ class Fileslistitem extends Component{
overflow-wrap: break-word;
}
`
}
</style>
<span className="color-dark isspans">资源描述 :{discussMessage.description===null?"暂无描述":discussMessage.description}</span>
{/*<span className="mr50">*/}
{/*/!*<span className="mr15 color-dark"></span>*!/*/}
{/*<span className="mr15 color-dark">*/}
{/*</span>*/}
{/*/!*{this.props.isAdmin ?<span><i className="iconfont icon-bianjidaibeijing font-22 color-green" onClick={()=>this.settingList()}></i></span>:""}*!/*/}
{/*</span>*/}
</p>
</div>
</div>
)
}
}
</style>
<span className="color-dark isspans">资源描述 :{discussMessage.description===null?"暂无描述":discussMessage.description}</span>
{/*<span className="mr50">*/}
{/*/!*<span className="mr15 color-dark"></span>*!/*/}
{/*<span className="mr15 color-dark">*/}
{/*</span>*/}
{/*/!*{this.props.isAdmin ?<span><i className="iconfont icon-bianjidaibeijing font-22 color-green" onClick={()=>this.settingList()}></i></span>:""}*!/*/}
{/*</span>*/}
</p>
</div>
</div>
)
}
}
export default Fileslistitem;
export default Fileslistitem;

31
public/react/src/modules/courses/coursesPublic/Showoldfiles.js
Unescape View File

@ -45,11 +45,15 @@ class Showoldfiles extends Component{
showfiless=(url)=>{
this.props.ShowOnlinePdf(url)
}
isaboxonClick=(item)=>{
this.props.Clicktobroadcastthevideo(true,item.url+'&file_name='+item.title);
}
render(){
let {visible,allfiles}=this.props;
return(
<div>
<div >
{/*提示*/}
<Modals
modalsType={this.state.Modalstype}
@ -68,6 +72,9 @@ class Showoldfiles extends Component{
width="600px"
destroyOnClose={true}
keyboard={false}
style={{
marginTop: '30px',
}}
>
<a id='closeIcon' onClick={this.cloasshanchudiao}><i className='iconfont icon-shanchudiao'></i></a>
<style>
@ -178,11 +185,13 @@ class Showoldfiles extends Component{
<div className="clearfix edu-txt-center lineh-40 bor-bottom-greyE" id={allfiles.id}>
<li className="fl fontlefts">
<a className={"isabox"} href={allfiles.url} target="_blank" >{allfiles.title}</a>
{/*{allfiles.is_pdf===false?*/}
{/*<a className={"isabox"} href={allfiles.url} >{allfiles.title}</a>:*/}
{/*<a className={"isabox"} onClick={()=>this.showfiless(allfiles.url)} >{allfiles.title}</a>*/}
{/*}*/}
{
allfiles&&allfiles.content_type&&allfiles.content_type==="video/mp4"?
<a className={"isabox"} target="_blank" onClick={()=>this.isaboxonClick(allfiles)}>{allfiles.title}</a>
:
<a className={"isabox"} href={allfiles.url} target="_blank" >{allfiles.title}</a>
}
<span className={"newcolor-orange fl"}>当前版本</span>
</li>
@ -198,7 +207,13 @@ class Showoldfiles extends Component{
<div className="clearfix edu-txt-center lineh-40 bor-bottom-greyE" id={item.id} key={key}>
<li className="fl fontlefts">
<a className={"isabox"} href={item.url} target="_blank" >{item.title}</a>
{
item&&item.content_type&&item.content_type==="video/mp4"?
<a className={"isabox"} target="_blank" onClick={()=>this.isaboxonClick(item)}>{item.title}</a>
:
<a className={"isabox"} href={item.url} target="_blank" >{item.title}</a>
}
{/*{item.is_pdf===false?*/}
{/*<a className={"isabox"} href={item.url}>{item.title}</a>:*/}
{/*<a className={"isabox"} onClick={()=>this.showfiless(item.url)} >{item.title}</a>*/}
@ -224,4 +239,4 @@ class Showoldfiles extends Component{
)
}
}
export default Showoldfiles;
export default Showoldfiles;

Write Preview
Loading…
Cancel
Save