Closed MartinDawson closed 2 months ago
I've seen some scenarios where the recalculation should be suppressed. However, the callback approach is quite noisy. You need to have a state + useCallback. I believe that a method-based API like this would work better.
ref.current.suppressResizeObserve(true); // stops the observation
ref.current.suppressResizeObserve(false); // resumes it
Notice that the component does not use intersection observers, but resize ones.
I've seen some scenarios where the recalculation should be suppressed. However, the callback approach is quite noisy. You need to have a state + useCallback. I believe that a method-based API like this would work better.
ref.current.suppressResizeObserve(true); // stops the observation ref.current.suppressResizeObserve(false); // resumes it
Notice that the component does not use intersection observers, but resize ones.
Thanks, I'll see if I can make that change and update it at a later date. As this does my job for now.
Why is this needed?
When you have a responsive grid that changes size and you have html5 video elements in that grid, when the user goes fullscreen it affects the size of the elements in the grid and causes a re-render due to the intersectionObserver (i debugged this a lot and it seems to just be how the fullscreen API works, i.e it affects the parent element of the fullscreen size).
When a user is going fullscreen mode you never want this to happen, you just want to disable this re-rendering from happening.
The solution is to provide a callback and disable this when in fullScreenMode.
Here's my implementation of it: