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 @@ ...@@ -17,6 +17,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <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> </body>
</html> </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 { ...@@ -39,7 +39,7 @@ class ImagePreview extends React.Component {
> >
{urls.map((ele) => { {urls.map((ele) => {
return ( return (
<div className={componentStyle.CarouselBox}> <div className={componentStyle.CarouselBox} key={ele}>
<img className={componentStyle.CarouselImg} alt="" src={imagify(ele.src)} /> <img className={componentStyle.CarouselImg} alt="" src={imagify(ele.src)} />
</div> </div>
); );
......
src/components/ImagePreview.less
View file @ 76a213fe
...@@ -8,6 +8,13 @@ ...@@ -8,6 +8,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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 { .mask {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -20,7 +27,7 @@ ...@@ -20,7 +27,7 @@
.Carousel { .Carousel {
z-index: 2; z-index: 2;
max-width: 800px; max-width: 800px;
min-width: 200px; min-width: 800px;
max-height: 600px; max-height: 600px;
position: relative; position: relative;
} }
......
src/pages/coursemateria/MediaCard.js
View file @ 76a213fe
...@@ -25,12 +25,12 @@ class MediaCard extends React.Component { ...@@ -25,12 +25,12 @@ class MediaCard extends React.Component {
return ( return (
<div className={pageStyle.box} {...this.props}> <div className={pageStyle.box} {...this.props}>
{info.type == 1 && {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.image} src={`${imagify(info.src)}`} alt="" />
<img className={pageStyle.imageicon} src={`${__IMGCDN__}/course/photo_icon.png`} alt="" /> <img className={pageStyle.imageicon} src={`${__IMGCDN__}/course/photo_icon.png`} alt="" />
</div>} </div>}
{info.type == 2 && {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.videoposter} src={`${videoPoster(info.src)}`} alt="" />
<img className={pageStyle.videoicon} src={`${__IMGCDN__}/course/video_icon.png`} alt="" /> <img className={pageStyle.videoicon} src={`${__IMGCDN__}/course/video_icon.png`} alt="" />
<div className={pageStyle.videoplay}> <div className={pageStyle.videoplay}>
...@@ -38,12 +38,12 @@ class MediaCard extends React.Component { ...@@ -38,12 +38,12 @@ class MediaCard extends React.Component {
</div> </div>
</div>} </div>}
{info.type == 4 && {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="" /> <img className={pageStyle.fileIcon} src={`${__IMGCDN__}/course/ppt_icon.png`} alt="" />
<div className={pageStyle.fileName}>{content.name}</div> <div className={pageStyle.fileName}>{content.name}</div>
</div>} </div>}
{info.type == 3 && {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="" /> <img className={pageStyle.audioIcon} src={`${__IMGCDN__}/course/audio_icon.png`} alt="" />
<div className={pageStyle.audioTime}>60&ldquo;</div> <div className={pageStyle.audioTime}>60&ldquo;</div>
</div>} </div>}
......
src/pages/coursemateria/MediaCard.less
View file @ 76a213fe
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
// width: 200px; // width: 200px;
height: 164px; height: 164px;
position: relative;; position: relative;;
cursor: pointer;
&.imgBox { &.imgBox {
.imageicon { .imageicon {
width: 25px; width: 25px;
......
src/pages/coursemateria/index.js
View file @ 76a213fe
...@@ -5,8 +5,23 @@ import { ...@@ -5,8 +5,23 @@ import {
} from 'antd'; } from 'antd';
import MediaCard from './MediaCard'; import MediaCard from './MediaCard';
import pageStyle from './index.less'; 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 { class StaticCenter extends React.Component {
constructor(props) {
super(props);
this.state = {
imgPreviewShow: false,
imgUrls: [],
videoPlayShow: false,
videoSrc: '',
audioPlayShow: false,
audioSrc: '',
// currentIndex: 0,
};
}
componentDidMount() { // 挂载 componentDidMount() { // 挂载
pageIn('轻校-素材库'); pageIn('轻校-素材库');
} }
...@@ -96,6 +111,73 @@ class StaticCenter extends React.Component { ...@@ -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() { render() {
const that = this; const that = this;
const { const {
...@@ -133,6 +215,7 @@ class StaticCenter extends React.Component { ...@@ -133,6 +215,7 @@ class StaticCenter extends React.Component {
<MediaCard <MediaCard
methods={{ methods={{
delmateria: this.delMateria, delmateria: this.delMateria,
preview: this.preview,
}} }}
info={ele} info={ele}
key={ele.id} key={ele.id}
...@@ -154,6 +237,26 @@ class StaticCenter extends React.Component { ...@@ -154,6 +237,26 @@ class StaticCenter extends React.Component {
pageSize={queryParams.perPage} pageSize={queryParams.perPage}
/> />
</div> </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> </div>
); );
} }
......
src/utils/index.js
View file @ 76a213fe
...@@ -648,6 +648,10 @@ function showWeekDays(timestamp, currenttimestamp) { ...@@ -648,6 +648,10 @@ function showWeekDays(timestamp, currenttimestamp) {
} }
function videoorigin(src) { function videoorigin(src) {
let url = 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://omedia.shangjiadao.cn/${url}`;
url = `https://media.shangjiadao.cn/${url}.mp4`; url = `https://media.shangjiadao.cn/${url}.mp4`;
return url; 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