Skip to content

B
biz.qingxiao.com
Commit 76a213fe authored by wangxuelai's avatar wangxuelai
Browse files
Options

'最新代码提交'

parent fec8f03e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1238 additions and 8 deletions
index.html
View file @ 76a213fe
......@@ -17,6 +17,6 @@
</head>
<body>
<div id="root"></div>
<script src="dist/main.js?1574669055988" charset="utf-8"></script>
<script src="dist/main.js?1574673220194" charset="utf-8"></script>
</body>
</html>
\ No newline at end of file
src/components/AudioPlay.js 0 → 100644
View file @ 76a213fe
import React from 'react';
import { Icon } from 'antd';
import componentStyle from './AudioPlay.less';
import { audioorigin } from '../utils/index';
class AudioPlay extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount() {
}
componentWillUpdate() {
}
cancelCropper = () => {
}
sureCropper = () => {
}
rotateLeft = () => {
}
rotateRight = () => {
}
closeImgPreview = () => {
}
render() {
const { src, closeVideoPlay } = this.props;
return (
<div className={`${componentStyle.VideoPlayBox} VideoPlayBox`}>
<Icon type="close-circle" className={componentStyle.closeIcon} onClick={closeVideoPlay} />
<audio controls="controls" className={componentStyle.videoitem} src={audioorigin(src)}>
</audio>
</div>
);
}
}
export default AudioPlay;
src/components/AudioPlay.less 0 → 100644
View file @ 76a213fe
This diff is collapsed.
src/components/ImagePreview.js
View file @ 76a213fe
......@@ -39,7 +39,7 @@ class ImagePreview extends React.Component {
>
{urls.map((ele) => {
return (
<div className={componentStyle.CarouselBox}>
<div className={componentStyle.CarouselBox} key={ele}>
<img className={componentStyle.CarouselImg} alt="" src={imagify(ele.src)} />
</div>
);
......
src/components/ImagePreview.less
View file @ 76a213fe
......@@ -8,6 +8,13 @@
display: flex;
align-items: center;
justify-content: center;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently*/
cursor: pointer;
.mask {
width: 100%;
height: 100%;
......@@ -20,7 +27,7 @@
.Carousel {
z-index: 2;
max-width: 800px;
min-width: 200px;
min-width: 800px;
max-height: 600px;
position: relative;
}
......
src/pages/coursemateria/MediaCard.js
View file @ 76a213fe
......@@ -25,12 +25,12 @@ class MediaCard extends React.Component {
return (
<div className={pageStyle.box} {...this.props}>
{info.type == 1 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.imgBox}`}>
<div className={`${pageStyle.mediaBox} ${pageStyle.imgBox}`} onClick={() => methods.preview(info)}>
<img className={pageStyle.image} src={`${imagify(info.src)}`} alt="" />
<img className={pageStyle.imageicon} src={`${__IMGCDN__}/course/photo_icon.png`} alt="" />
</div>}
{info.type == 2 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.videoBox}`}>
<div className={`${pageStyle.mediaBox} ${pageStyle.videoBox}`} onClick={() => methods.preview(info)}>
<img className={pageStyle.videoposter} src={`${videoPoster(info.src)}`} alt="" />
<img className={pageStyle.videoicon} src={`${__IMGCDN__}/course/video_icon.png`} alt="" />
<div className={pageStyle.videoplay}>
......@@ -38,12 +38,12 @@ class MediaCard extends React.Component {
</div>
</div>}
{info.type == 4 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.fileBox}`}>
<div className={`${pageStyle.mediaBox} ${pageStyle.fileBox}`} onClick={() => methods.preview(info)}>
<img className={pageStyle.fileIcon} src={`${__IMGCDN__}/course/ppt_icon.png`} alt="" />
<div className={pageStyle.fileName}>{content.name}</div>
</div>}
{info.type == 3 &&
<div className={`${pageStyle.mediaBox} ${pageStyle.audioBox}`}>
<div className={`${pageStyle.mediaBox} ${pageStyle.audioBox}`} onClick={() => methods.preview(info)}>
<img className={pageStyle.audioIcon} src={`${__IMGCDN__}/course/audio_icon.png`} alt="" />
<div className={pageStyle.audioTime}>60&ldquo;</div>
</div>}
......
src/pages/coursemateria/MediaCard.less
View file @ 76a213fe
......@@ -6,6 +6,7 @@
// width: 200px;
height: 164px;
position: relative;;
cursor: pointer;
&.imgBox {
.imageicon {
width: 25px;
......
src/pages/coursemateria/index.js
View file @ 76a213fe
......@@ -5,8 +5,23 @@ import {
} from 'antd';
import MediaCard from './MediaCard';
import pageStyle from './index.less';
import { pageIn } from '../../utils/index';
import { pageIn, imagify, pptImagify, audioorigin } from '../../utils/index';
import VideoPlay from '../../components/VideoPlay';
import ImagePreview from '../../components/ImagePreview';
import AudioPlay from '../../components/AudioPlay';
class StaticCenter extends React.Component {
constructor(props) {
super(props);
this.state = {
imgPreviewShow: false,
imgUrls: [],
videoPlayShow: false,
videoSrc: '',
audioPlayShow: false,
audioSrc: '',
// currentIndex: 0,
};
}
componentDidMount() { // 挂载
pageIn('轻校-素材库');
}
......@@ -96,6 +111,73 @@ class StaticCenter extends React.Component {
},
});
}
// imgPreview = (currentIndex, urls) => {
// this.setState({
// currentIndex,
// imgUrls: ,
// imgPreviewShow: true,
// });
// }
closeImgPreview = (currentIndex, urls) => {
this.setState({
imgPreviewShow: false,
});
}
closeVideoPlay = () => {
this.setState({
videoPlayShow: false,
videoSrc: '',
});
}
closeAudioPlay = () => {
this.setState({
audioPlayShow: false,
audioSrc: '',
});
}
preview = (item) => {
const content = JSON.parse(item.content);
let imgs = null;
switch (Number(item.type)) {
case 1:
this.setState({
// currentIndex: 0,
imgUrls: [{ src: item.src }],
imgPreviewShow: true,
});
break;
case 2:
this.setState({
// currentIndex: 0,
videoSrc: item.src,
videoPlayShow: true,
});
break;
case 3:
this.setState({
// currentIndex: 0,
audioPlayShow: true,
audioSrc: item.src,
// videoSrc: audioorigin(item.src),
// videoPlayShow: true,
});
break;
case 4:
imgs = content.images.map((ele) => {
return {
src: pptImagify(ele),
};
});
this.setState({
// currentIndex: 0,
imgUrls: imgs,
imgPreviewShow: true,
});
break;
default:
break;
}
}
render() {
const that = this;
const {
......@@ -133,6 +215,7 @@ class StaticCenter extends React.Component {
<MediaCard
methods={{
delmateria: this.delMateria,
preview: this.preview,
}}
info={ele}
key={ele.id}
......@@ -154,6 +237,26 @@ class StaticCenter extends React.Component {
pageSize={queryParams.perPage}
/>
</div>
{this.state.imgPreviewShow &&
<ImagePreview
// currentIndex={this.state.currentIndex}
urls={this.state.imgUrls}
current={0}
closeImgPreview={this.closeImgPreview}
/>
}
{this.state.videoPlayShow &&
<VideoPlay
src={this.state.videoSrc}
closeVideoPlay={this.closeVideoPlay}
/>
}
{this.state.audioPlayShow &&
<AudioPlay
src={this.state.audioSrc}
closeVideoPlay={this.closeAudioPlay}
/>
}
</div>
);
}
......
src/utils/index.js
View file @ 76a213fe
......@@ -648,6 +648,10 @@ function showWeekDays(timestamp, currenttimestamp) {
}
function videoorigin(src) {
let url = src || '';
const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g;
if (reg.test(src)) {
return src;
}
// url = `https://omedia.shangjiadao.cn/${url}`;
url = `https://media.shangjiadao.cn/${url}.mp4`;
return url;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment