diff --git a/src/components/alert-info/index.tsx b/src/components/alert-info/index.tsx index 0ae4646f..c8d23f1f 100644 --- a/src/components/alert-info/index.tsx +++ b/src/components/alert-info/index.tsx @@ -7,10 +7,12 @@ interface AlertInfoProps { message: string; rows?: number; icon?: React.ReactNode; + ellipsis?: boolean; + style?: React.CSSProperties; } const AlertInfo: React.FC = (props) => { - const { message, type, rows = 1 } = props; + const { message, type, rows = 1, ellipsis, style } = props; if (!message) { return null; } @@ -18,16 +20,21 @@ const AlertInfo: React.FC = (props) => { return ( diff --git a/src/components/audio-player/index.less b/src/components/audio-player/index.less index 9412e03f..f310c532 100644 --- a/src/components/audio-player/index.less +++ b/src/components/audio-player/index.less @@ -2,19 +2,54 @@ width: 100%; display: flex; background-color: var(--ant-color-fill-quaternary); - border-radius: 36px; + border-radius: 6px; .player-ui { - padding: 5px 10px; + padding: 8px 16px; flex: 1; display: flex; justify-content: flex-start; align-items: center; } + .controls { + display: flex; + justify-content: center; + align-items: center; + margin-inline: 10px; + } + + .play-btn { + margin-inline: 30px; + height: 22px; + width: 22px; + overflow: hidden; + + .ant-btn { + height: 22px; + width: 22px; + } + } + + .backward, + .forward { + background: none !important; + } + + .slider { + display: flex; + justify-content: center; + align-items: center; + + .slider-inner { + flex: 1; + margin-inline: 10px; + } + } + .play-content { display: flex; - justify-content: flex-start; + justify-content: center; align-items: center; flex: 1; } @@ -43,7 +78,7 @@ } .ant-slider-horizontal { - margin-block: 2px; + margin-block: 5px; } } diff --git a/src/components/audio-player/index.tsx b/src/components/audio-player/index.tsx index 49718bd7..68be5d8d 100644 --- a/src/components/audio-player/index.tsx +++ b/src/components/audio-player/index.tsx @@ -1,5 +1,11 @@ import { formatTime } from '@/utils/index'; -import { PauseCircleFilled, PlayCircleFilled } from '@ant-design/icons'; +import { + FastBackwardOutlined, + FastForwardOutlined, + PauseCircleFilled, + PlayCircleFilled +} from '@ant-design/icons'; +import { useIntl } from '@umijs/max'; import { Button, Slider, Tooltip } from 'antd'; import { round } from 'lodash'; import React, { @@ -8,8 +14,6 @@ import React, { useEffect, useImperativeHandle } from 'react'; -import CheckButtons from '../check-buttons'; -import IconFont from '../icon-font'; import './index.less'; interface AudioPlayerProps { @@ -30,7 +34,14 @@ const speedOptions = [ { label: '4x', value: 4 } ]; +const speedConfig = { + min: 0.5, + max: 2, + step: 0.25 +}; + const AudioPlayer: React.FC = forwardRef((props, ref) => { + const intl = useIntl(); const { autoplay = false, speed: defaultSpeed = 1 } = props; const audioRef = React.useRef(null); const [audioState, setAudioState] = React.useState<{ @@ -95,7 +106,10 @@ const AudioPlayer: React.FC = forwardRef((props, ref) => { setPlayOn(!playOn); }, [playOn]); - const handleFormatVolume = (val: number) => { + const handleFormatVolume = (val?: number) => { + if (val === undefined) { + return `${round(volume * 100)}%`; + } return `${round(val * 100)}%`; }; @@ -132,6 +146,28 @@ const AudioPlayer: React.FC = forwardRef((props, ref) => { }); }, []); + const handleReduceSpeed = () => { + setSpeed((pre) => { + if (pre - speedConfig.step < speedConfig.min) { + return speedConfig.min; + } + const next = pre - speedConfig.step; + audioRef.current!.playbackRate = next; + return next; + }); + }; + + const handleAddSpeed = () => { + setSpeed((pre) => { + if (pre + speedConfig.step > speedConfig.max) { + return speedConfig.max; + } + const next = pre + speedConfig.step; + audioRef.current!.playbackRate = next; + return next; + }); + }; + useEffect(() => { if (audioRef.current) { initPlayerConfig(); @@ -147,69 +183,115 @@ const AudioPlayer: React.FC = forwardRef((props, ref) => { return (
- - -
- - {' '} - {formatTime(audioState.currentTime)} -
{props.name}
- + + {' '} + {formatTime(audioState.currentTime)} + +
+ +
+ {formatTime(audioState.duration)}
- + {/* + } + > + + {speed ? `${speed}x` : '1x'} + + */} + + + + + - + + + +
- {formatTime(audioState.duration)}
- + {/* {speakerOn && ( @@ -225,7 +307,7 @@ const AudioPlayer: React.FC = forwardRef((props, ref) => { onChange={handleVolumeChange} /> )} - + */}