Use resize observer

[globbertot]

Fixes

Issue Number: #3406

What is the current behavior?

When theater mode is enabled on a livestream it works, but if it is disabled the video and the livestream chat overlap

What is the new behavior?

This PR uses resize observer to dynamically report on changes

Other information

PR Checklist

Toggle...

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting)
• Refactoring (no functional changes)
• Documentation changes
• Other - Please describe:

Please check all that apply to this PR using "x":

• I have checked that this PR is not a duplicate of an existing PR (open, closed or merged)
• I have checked that this PR does not introduce a breaking change
• This PR introduces breaking changes and I have provided a detailed explanation below

Summary by CodeRabbit

• Bug Fixes

  • Enhanced the floating video player to respond more accurately and reliably when the window or container size changes, ensuring it maintains proper positioning and dimensions during all viewport changes.

• Performance

  • Optimized the resize detection mechanism to reduce resource consumption and provide faster, more responsive behavior during resizing operations and viewport adjustments.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

The resize handling mechanism in the video render floating component is refactored to use a ResizeObserver watching the primary player wrapper element instead of relying on global window resize events. This enables targeted detection and response to element-specific resize changes.

Changes

Cohort / File(s)	Summary
Resize Observer Migration ui/component/videoRenderFloating/view.jsx	Replaces window 'resize' event listener with ResizeObserver monitoring the primary player wrapper element; triggers clampToScreenOnResize when floating or handleResize otherwise; updates cleanup logic to disconnect observer instead of removing event listener.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A whisper of resize, once from afar,
Now watches the wrapper where players are.
The observer is keen, the pattern is new—
From window-wide echoes to element true! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Use resize observer' directly and clearly identifies the main technical change in the pull request—replacing window resize handling with a ResizeObserver implementation to fix the theater mode overlap issue.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}