Video controls are hidden in some cases

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.1.0-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @linhvovan29546
Slack conversation (hyperlinked to channel name): #Expensify bugs

Action Performed:

1. Open any chat with a video
2. Click on a video, click the "Expand" button
3. Click on the "More" button in the bottom right (it can be any button in fact)
4. Dismiss the modal by clicking outside of it
5. Click on the video (outside the video controls toolbar) to pause it

Expected Result:

Video controls are displayed, since mouse is still hovering over a video

Actual Result:

1. Video controls are hidden, the only way to get them to display is to move the mouse outside the attachment modal an then hover it over the modal again
2. When you get the controls to show again, pressing "More" button for the first time does not open the modal. Video controls toolbar just flickers

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Screen.Recording.2025-02-18.at.18.33.42.mov

Recording.997.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[eVoloshchak]

Issue reported by: @linhvovan29546

@m-natarajan, this one was reported by me (there was a batch of four bugs, the other 3 were reported by @linhvovan29546, so it was easy to miss 😄)

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Video controls are hidden in some cases

What is the root cause of that problem?

• In this PR we updated the ActiveHoverable component to enhance the performance of the App.

• However, the logic to retain the hovered state when events occur inside the main container was removed, which is causing this bug.

What changes do you think we should make in order to solve the problem?

• We should add the logic back to only call handleMouseEvents('blur')(); when event only occurs outside the main container (hoverable area).

        onBlur: (e: MouseEvent) => {
            if (!elementRef.current?.contains(e.target as Node) && !elementRef.current?.contains(e.relatedTarget as Node) && !shouldFreezeCapture) {
                handleMouseEvents('blur')();
            }
            onBlur?.(e);
        },

• We should also thoroughly review the other changes to fix or avoid similar bugs related to the ActiveHoverable component.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Result

[bernhardoj]

Looks like same root cause as #57022