实现视频地址

public/react/src/modules/courses/Resource/Fileslistitem.js

@@ -1,21 +1,30 @@
 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 = {
-
+			videoModalObj:false,
+			file_url:"",
+		}
 	}
+	setVisible=(bool)=>{
+		this.setState({
+			videoModalObj:bool
+		})
 	}
 
 	settingList=()=>{
@@ -28,6 +37,9 @@ class Fileslistitem extends Component{
 	}
 
 	showfiles=(list)=>{
+		// console.log("showfiles");
+		// console.log(list);
+
 		if(this.props.checkIfLogin()===false){
 			this.props.showLoginDialog()
 			return
@@ -46,7 +58,20 @@ class Fileslistitem extends Component{
 		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{
 				window.open(list.url, '_blank');
+			}
 		}else{
 			let {discussMessage,coursesId}=this.props
 			let file_id=discussMessage.id
@@ -65,7 +90,22 @@ class Fileslistitem extends Component{
 					//
 					// }
 					// 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{
+						window.open(list.url, '_blank');
+					}
+
+
 				}else{
 					this.setState({
 						Showoldfiles:true,
@@ -87,6 +127,16 @@ class Fileslistitem extends Component{
 		})
 	}
 
+	Clicktobroadcastthevideo=(bool,url)=>{
+			this.setState({
+									videoModalObj:bool,
+									file_url:getUrls+url,
+		})
+	}
+
+
+
+
 	onDelete = (id) => {
 
 		this.setState({
@@ -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({
@@ -152,13 +213,36 @@ class Fileslistitem extends Component{
 	}
 
 	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>
+
+						:""
+				}
 
 				{/*提示*/}
 				{this.state.Modalstype&&this.state.Modalstype===true?<Modals
@@ -173,6 +257,7 @@ class Fileslistitem extends Component{
 					{...this.props}
 					visible={this.state.Showoldfiles}
 					allfiles={this.state.allfiles}
+					Clicktobroadcastthevideo={(bool,urls)=>this.Clicktobroadcastthevideo(bool,urls)}
 					closaoldfilesprops={this.closaoldfilesprops}
 				/>
 				<style>{`
@@ -366,3 +451,4 @@ class Fileslistitem extends Component{
 	}
 }
 export default Fileslistitem;
+

public/react/src/modules/courses/coursesPublic/Showoldfiles.js

@@ -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">
+
+														{
+															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>
-														{/*{allfiles.is_pdf===false?*/}
-														{/*<a className={"isabox"} href={allfiles.url} >{allfiles.title}</a>:*/}
-															{/*<a className={"isabox"} onClick={()=>this.showfiless(allfiles.url)} >{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">
+																		{
+																			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>*/}