mirror of
https://github.com/MrXujiang/h5-Dooring.git
synced 2025-12-11 17:32:50 +00:00
🆕 添加音频组件，修复组件中图片链接失效问题
This commit is contained in:
xujiang
parent
0332f27970
commit
a1516cfffa
@ -71,6 +71,7 @@
|
||||
"keymaster": "^1.6.2",
|
||||
"qrcode.react": "^1.0.0",
|
||||
"react": "^16.12.0",
|
||||
"react-audio-player": "^0.14.0",
|
||||
"react-codemirror2": "^7.2.1",
|
||||
"react-color": "^2.18.1",
|
||||
"react-contexify": "^4.1.1",
|
||||
|
||||
BIN
src/assets/music@2x.png
Normal file
BIN
src/assets/music@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
@ -55,7 +55,7 @@ const Qrcode: IQrcodeSchema = {
|
||||
uid: '001',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: 'http://io.nainor.com/uploads/code_173e1705e0c.png',
|
||||
url: 'http://49.234.61.19/uploads/code_173e1705e0c.png',
|
||||
},
|
||||
],
|
||||
text: '二维码',
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,5 @@
|
||||
.audioWrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -1,30 +1,32 @@
|
||||
import React, { memo } from 'react';
|
||||
import ReactAudioPlayer from 'react-audio-player';
|
||||
import './index.css';
|
||||
import { IVideoConfig } from './schema';
|
||||
import logo from '@/assets/14-视频.png';
|
||||
// import Audio from '@/assets/audio'
|
||||
const VideoPlayer = memo((props: IVideoConfig & { isTpl: boolean }) => {
|
||||
const { poster, url, isTpl } = props;
|
||||
import styles from './index.less';
|
||||
import { IAudioConfig } from './schema';
|
||||
import logo from '@/assets/music@2x.png';
|
||||
|
||||
const AudioPlayer = memo((props: IAudioConfig & { isTpl: boolean }) => {
|
||||
const { height, url, isTpl } = props;
|
||||
return (
|
||||
<>
|
||||
{isTpl ? (
|
||||
<div>
|
||||
<img src={logo} alt=""></img>
|
||||
<img src={logo} style={{ width: '100%' }} alt="h5-dooring音频播放组件"></img>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<Player
|
||||
playsInline
|
||||
poster={poster[0].url}
|
||||
src={url || 'https://gossv.vcg.com/cmsUploadVideo/creative/1移轴/7月移轴.mp4'}
|
||||
>
|
||||
<BigPlayButton position="center" />
|
||||
</Player>
|
||||
<div className={styles.audioWrap}>
|
||||
<ReactAudioPlayer
|
||||
src={url}
|
||||
autoPlay={false}
|
||||
controls
|
||||
style={{
|
||||
width: '100%',
|
||||
height: height + 'px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
export default VideoPlayer;
|
||||
export default AudioPlayer;
|
||||
|
||||
@ -1,45 +1,38 @@
|
||||
import {
|
||||
ITextConfigType,
|
||||
IUploadConfigType,
|
||||
INumberConfigType,
|
||||
TTextDefaultType,
|
||||
TUploadDefaultType,
|
||||
TNumberDefaultType,
|
||||
} from '@/components/PanelComponents/FormEditor/types';
|
||||
|
||||
export type TVideoEditData = Array<IUploadConfigType | ITextConfigType>;
|
||||
export interface IVideoConfig {
|
||||
poster: TUploadDefaultType;
|
||||
export type TAudioEditData = Array<INumberConfigType | ITextConfigType>;
|
||||
export interface IAudioConfig {
|
||||
height: TNumberDefaultType;
|
||||
url: TTextDefaultType;
|
||||
}
|
||||
|
||||
export interface IVideoSchema {
|
||||
editData: TVideoEditData;
|
||||
config: IVideoConfig;
|
||||
export interface IAudioSchema {
|
||||
editData: TAudioEditData;
|
||||
config: IAudioConfig;
|
||||
}
|
||||
|
||||
const Video: IVideoSchema = {
|
||||
const Audio: IAudioSchema = {
|
||||
editData: [
|
||||
{
|
||||
key: 'poster',
|
||||
name: '视频封面',
|
||||
type: 'Upload',
|
||||
key: 'height',
|
||||
name: '音频高度',
|
||||
type: 'Number',
|
||||
},
|
||||
{
|
||||
key: 'url',
|
||||
name: '视频链接',
|
||||
name: '音频链接',
|
||||
type: 'Text',
|
||||
},
|
||||
],
|
||||
config: {
|
||||
poster: [
|
||||
{
|
||||
uid: '001',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png',
|
||||
},
|
||||
],
|
||||
url: '',
|
||||
height: 32,
|
||||
url: 'http://io.nainor.com/audio.mp3',
|
||||
},
|
||||
};
|
||||
|
||||
export default Video;
|
||||
export default Audio;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
const template = {
|
||||
type: 'Audio',
|
||||
h: 107,
|
||||
h: 48,
|
||||
displayName: '音频组件',
|
||||
};
|
||||
export default template;
|
||||
|
||||
@ -35,7 +35,7 @@ const Video: IVideoSchema = {
|
||||
uid: '001',
|
||||
name: 'image.png',
|
||||
status: 'done',
|
||||
url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png',
|
||||
url: 'http://49.234.61.19/uploads/1_1740c6fbcd9.png',
|
||||
},
|
||||
],
|
||||
url: '',
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import Video from './Video/schema';
|
||||
import Audio from './Audio/schema';
|
||||
|
||||
const mediaSchema = {
|
||||
Video,
|
||||
Audio,
|
||||
};
|
||||
export default mediaSchema;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import Video from './Video/template';
|
||||
import Audio from './Audio/template';
|
||||
|
||||
const mediaTemplate = [Video];
|
||||
const mediaTemplate = [Video, Audio];
|
||||
|
||||
const MediaTemplate = mediaTemplate.map(v => {
|
||||
return { ...v, category: 'media' };
|
||||
|
||||
@ -13,8 +13,8 @@ export default memo(function ZanPao() {
|
||||
return (
|
||||
<div className={styles.takeCat} style={{ display: 'inline-block' }}>
|
||||
<Popover placement="top" title={null} content={content} trigger="hover">
|
||||
<Button type="primary" danger>
|
||||
赞助作者
|
||||
<Button type="primary" size="large">
|
||||
支持开源, 请作者喝奶茶~
|
||||
</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
@ -481,27 +481,6 @@ const Container = (props: {
|
||||
>
|
||||
{!rightColla ? <DoubleRightOutlined /> : <DoubleLeftOutlined />}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: rightColla ? 0 : '279px',
|
||||
position: 'absolute',
|
||||
transform: 'translate(0,-10%)',
|
||||
transition: 'all ease-in-out 0.5s',
|
||||
textAlign: 'center',
|
||||
bottom: -5,
|
||||
right: rightColla ? 0 : 16,
|
||||
background: 'hsla(0,0%,88.2%,.7)',
|
||||
padding: rightColla ? 0 : '10px',
|
||||
}}
|
||||
>
|
||||
{curPoint?.id ? (
|
||||
<Button block type="primary" onClick={() => handleDel(curPoint.id)}>
|
||||
删除
|
||||
</Button>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: rightColla ? 0 : '304px',
|
||||
|
||||
@ -94,25 +94,20 @@ const Home = () => {
|
||||
<div style={{ marginTop: '30px' }}>
|
||||
<Zan />
|
||||
</div>
|
||||
<div style={{ width: '160px', marginLeft: '60px', marginTop: '32px' }}>
|
||||
<a
|
||||
href="http://49.234.61.19/h5?tid=B73349B8&isTpl=1"
|
||||
style={{ marginRight: '24px' }}
|
||||
target="_blank"
|
||||
>
|
||||
商务合作
|
||||
</a>
|
||||
<a href="http://49.234.61.19/h5?tid=7B4008F7&isTpl=1" target="_blank">
|
||||
友情链接
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<div style={{ width: '360px', marginLeft: '60px', marginTop: '32px' }}>
|
||||
<div style={{ width: '500px', marginLeft: '40px', marginTop: '32px' }}>
|
||||
<span style={{ marginRight: '24px' }}>更多产品: </span>
|
||||
<a href="http://49.234.61.19/qt" style={{ marginRight: '24px' }} target="_blank">
|
||||
趣图-在线gif动图制作平台
|
||||
</a>
|
||||
<a
|
||||
href="http://49.234.61.19/tool/cssTriangle"
|
||||
style={{ marginRight: '24px' }}
|
||||
target="_blank"
|
||||
>
|
||||
在线css三角形生成器
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -11847,6 +11847,13 @@ rc-virtual-list@^3.0.1, rc-virtual-list@^3.0.3:
|
||||
rc-resize-observer "^0.2.3"
|
||||
rc-util "^5.0.7"
|
||||
|
||||
react-audio-player@^0.14.0:
|
||||
version "0.14.0"
|
||||
resolved "https://registry.yarnpkg.com/react-audio-player/-/react-audio-player-0.14.0.tgz#b57bc2b980b1bb3c8b4f6a2134062160462c5081"
|
||||
integrity sha512-B0kP3KVjbp+TXG8TUh1kl91xnYwYx8c+YLbx3oZS9drcHvgTPWl4sl8inmwyLWPH0bMW5eqGFL5qT1fuHk8Ysw==
|
||||
dependencies:
|
||||
prop-types "^15.7.2"
|
||||
|
||||
react-codemirror2@^7.2.1:
|
||||
version "7.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-7.2.1.tgz#38dab492fcbe5fb8ebf5630e5bb7922db8d3a10c"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user