@bothub-chat/ui/dist/components/message/video/volume/index.js

Bothub UI Components

import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useState as n,useCallback as t}from"react";import{VolumeIcon as r}from"../../../../icons/volume/index.js";import{MessageVideoVolumeContainer as i,MessageVideoControlsButton as l,MessageVideoVolumeLine as c}from"../styled.js";const s=({iconSize:s=16,handleChangeVolume:u})=>{const[m,f]=n(!1),[a,d]=n(100),p=t((e=>{e.preventDefault();const{clientX:o}=e,{width:n,left:t}=e.currentTarget.getBoundingClientRect(),r=(o-t)/n*100;r>100||r<0||(d(r),null==u||u(r))}),[u]),h=t((()=>{f(!0)}),[]),v=t((e=>{m&&p(e)}),[m]),M=t((()=>{f(!1)}),[]);return e(i,{onMouseLeave:M,children:[o(l,{children:o(r,{fill:"#fff",size:s})}),o(c,{onClick:p,onMouseMove:v,onMouseUp:M,onMouseDown:h,$volume:a})]})};export{s as MessageVideoVolume};