[Payment due 8-26][$250] Web - Onboarding - "welcome-video:1 DOMException" console error if an app is opened before video

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.18-7
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Open Chrome console
3. Open Microsoft Word or Outlook and put in in the background
4. Log in with a new Gmail account
5. Choose "Something else" on the onboarding modal
6. Input anything for "First name"
7. Click on the "Continue" button and quickly open Microsoft Word
8. Switch back to Expensify

Expected Result:

There shouldn't be any console errors.

Actual Result:

"welcome-video:1 Uncaught (in promise) DOMException" console error if an app is opened before video

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6566571_1723200179508.bandicam_2024-08-09_12-35-33-005.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01285e52202504c005
• Upwork Job ID: 1822020298300148127
• Last Price Increase: 2024-08-09

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (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.

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[IuliiaHerets]

@Christinadobrzyn FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[bernhardoj]

Proposal

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

The play() request was interrupted because video-only background media was paused to save power error is logged in the console when opening the onboarding video while the tab is not active.

What is the root cause of that problem?

The onboarding video is auto-played and when the tab isn't active, the play request throws an error. The video will start play when we go back to the tab.

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

We can ignore the error by catching the play promise error here (.catch),

App/src/components/VideoPlayerContexts/PlaybackContext.tsx

Line 37 in db669c4

playVideoPromiseRef.current = currentVideoPlayerRef.current?.setStatusAsync(newStatus);

OR

We can prevent the video to play if the tab is not active, and play it once the tab become active again.

1. In playVideo, if the tab is not active, then return early and save a ref to indicate that there is a pending play.

if (!Visibility.isVisible()) {
    isPlayPendingRef.current = true;
    return;
}

2. Create a new visibility change listener which will play the pending play request once the tab is active/visible.

useEffect(() => {
    const unsubscribeVisibilityListener = Visibility.onVisibilityChange(() => {
        if (!Visibility.isVisible() || !isPlayPendingRef.current) {
            return;
        }
        playVideo();
        isPlayPendingRef.current = false;
    });
    return unsubscribeVisibilityListener;
}, []);

[Christinadobrzyn]

I'm not getting the same console error. I'm seeing this one:

But since @bernhardoj can reproduce it, we'll keep it going.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01285e52202504c005

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @aimane-chnaif (External)