import React, { useImperativeHandle, useRef, forwardRef, useState, useContext } from 'react'; import Broadcast from '@/components/svgIcon'; import { defaultTheme } from '@/core/config'; import { FlowContext } from '@/core/context'; import './index.scss'; export interface VolumeType { volume: number; isMuted: boolean; changeCurrentVolume: React.MouseEventHandler; slideCurrentVolume: React.MouseEventHandler; clearVolumeInterval: React.MouseEventHandler; toggleVolume: Function; style?: React.CSSProperties; } const Volume = function Volume( { volume, changeCurrentVolume, slideCurrentVolume, clearVolumeInterval, isMuted, toggleVolume, style, }: VolumeType, ref: React.Ref | undefined, ) { const volumeSliderMirror = useRef(null); const reviceProps = useContext(FlowContext); const { theme } = reviceProps.propsAttributes!; const [isShow, setIsShow] = useState(false); useImperativeHandle(ref, () => ({ element: volumeSliderMirror.current, })); return (
[setIsShow(true)]} onMouseLeave={(e) => [setIsShow(false)]} onClick={(e) => [toggleVolume()]} style={style} >

{Math.floor(volume)}

); }; const VolumeForwardRef = forwardRef(Volume); export default VolumeForwardRef;