Reputation: 10173
function HomePageVideoPlayer() {
const containerRef = useRef(null);
const [containerWidth, setContainerWidth] = useState(0);
// get container width to make video take up full size of container with 16:9 aspect ratio
useEffect(() => {
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
const { width } = entry.contentRect;
const maxWidth = Math.min(Math.floor(window.innerHeight * 16 / 9) - 120, 980);
const newWidth = Math.min(maxWidth, width);
setContainerWidth(newWidth);
}
});
// start observing the container element for size changes.
if (containerRef.current) {
observer.observe(containerRef.current);
}
// cleanup by disconnecting the observer when the component unmounts.
return () => observer.disconnect();
}, []);
// and return
return (
<HomePageSectionWrapper>
<div ref={containerRef}>
<ReactPlayer
url={ourVideoUrl}
width={containerWidth}
height={containerWidth * 9 / 16}
controls
/>
</div>
</HomePageSectionWrapper>
);
}
export default HomePageVideoPlayer;
This code is meant to set a containerWidth
variable for a <ReactPlayer
component that shows a video. However, many of our users are getting a Error: ResizeObserver loop completed with undelivered notifications
error from this addition (even though I am not able to reproduce the issue locally on my end). What could be causing this issue, and how could we go about improving the code to resolve this issue?
As an aside, the whole purpose of the useEffect and the containerWidth
variable being set in this manner is so that we can set the ReactPlayer
to a fixed pixel width (as opposed to %, or vw) for home page load performance, but I am beginning to think we would simply be better off setting the width to some percentage width of the parent container instead...
Upvotes: 0
Views: 706