I have a problem.
I have a div in absolute hover the videoplayer that set the video to muted or not when clicked.
the problem is that if i try to click it, hovering it, the HoverVideoPlayer in background stops hovering and so stops displaying the video, turning back to the image.
<div className="ratio ratio-16x9" style={{ position: "relative" }}>
<div className="filmItem__favouriteCont" style={{ position: "absolute", top: 0, right: 0 }}>
<FavouriteBtn id={props.id} isFavourite={props.isFavourite} films={props.films} />
</div>
<div className="d-flex justify-content-center" style={{pointerEvents:"none", position: "absolute", top: 0, right: 0 }}>
<RecentAdded recentAdded={props.recentAdded} />
</div>
<div style={{pointerEvents:"none", position: "absolute", bottom: 0, right: 0 }}>
<FilmTopProp isNet={props.isNet} isTop={props.isTop} />
</div>
<div className="filmItem__audioCont" style={{ position: "absolute", top: 0, right: 0 }}>
<AudioBtn videoTag="video.filmItem__video"/>
</div>
<HoverVideoPlayer
className="filmItem__video"
muted={true}
preload="metadata"
restartOnPaused
videoSrc={props.urlVideo}
overlayTransitionDuration={500}
pausedOverlay={<img src={props.urlImg} alt={props.id} className="filmItem__image" style={{ height: "100%", maxWidth: "100%"}} />}
/>
</div>
const [muted, setMuted] = useState(true);
const toggleMute = (event) => {
event.stopPropagation();
const videoElement = document.querySelector(`${props.videoTag}`);
if (videoElement) {
videoElement.muted = !videoElement.muted;
setMuted(videoElement.muted);
}
};
return (
<div onClick={toggleMute} id="audioBtn" className="filmItem__favouriteCont-button d-flex justify-content-center align-items-center">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-name="Refresh">
<path d={muted ?
"M11 4.00003C11 3.59557 10.7564 3.23093 10.3827 3.07615C10.009 2.92137 9.57889 3.00692 9.29289 3.29292L4.58579 8.00003H1C0.447715 8.00003 0 8.44774 0 9.00003V15C0 15.5523 0.447715 16 1 16H4.58579L9.29289 20.7071C9.57889 20.9931 10.009 21.0787 10.3827 20.9239C10.7564 20.7691 11 20.4045 11 20V4.00003ZM5.70711 9.70714L9 6.41424V17.5858L5.70711 14.2929L5.41421 14H5H2V10H5H5.41421L5.70711 9.70714ZM15.2929 9.70714L17.5858 12L15.2929 14.2929L16.7071 15.7071L19 13.4142L21.2929 15.7071L22.7071 14.2929L20.4142 12L22.7071 9.70714L21.2929 8.29292L19 10.5858L16.7071 8.29292L15.2929 9.70714Z" :
"M 24 12 C 24 8.28693 22.525 4.72597 19.8995 2.10046 L 18.4853 3.51468 C 20.7357 5.76511 22 8.81736 22 12 C 22 15.1826 20.7357 18.2348 18.4853 20.4852 L 19.8995 21.8995 C 22.525 19.2739 24 15.713 24 12 Z M 11 3.99995 C 11 3.59549 10.7564 3.23085 10.3827 3.07607 C 10.009 2.92129 9.57889 3.00685 9.29289 3.29285 L 4.58579 7.99995 H 1 C 0.447715 7.99995 0 8.44767 0 8.99995 V 15 C 0 15.5522 0.447715 16 1 16 H 4.58579 L 9.29289 20.7071 C 9.57889 20.9931 10.009 21.0786 10.3827 20.9238 C 10.7564 20.7691 11 20.4044 11 20 V 3.99995 Z M 5.70711 9.70706 L 9 6.41417 V 17.5857 L 5.70711 14.2928 L 5.41421 14 H 5 H 2 V 9.99995 H 5 H 5.41421 L 5.70711 9.70706 Z M 16.0001 12 C 16.0001 10.4087 15.368 8.88254 14.2428 7.75732 L 12.8285 9.17154 C 13.5787 9.92168 14.0001 10.9391 14.0001 12 C 14.0001 13.0608 13.5787 14.0782 12.8285 14.8284 L 14.2428 16.2426 C 15.368 15.1174 16.0001 13.5913 16.0001 12 Z M 17.0709 4.92889 C 18.9462 6.80426 19.9998 9.3478 19.9998 12 C 19.9998 14.6521 18.9462 17.1957 17.0709 19.071 L 15.6567 17.6568 C 17.157 16.1565 17.9998 14.1217 17.9998 12 C 17.9998 9.87823 17.157 7.8434 15.6567 6.34311 L 17.0709 4.92889 Z"
} fill="currentColor"></path>
</svg>
</div>
);