[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 [email protected] 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)

[aimane-chnaif]

@bernhardoj's 2nd solution looks good to me.
🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @techievivek, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[bernhardoj]

The PR is ready

cc: @aimane-chnaif

[Christinadobrzyn]

Monitoring PR - #47217

[Christinadobrzyn]

Looks like it was deployed to prod yesterday so adding a payment date to the Subject

[Christinadobrzyn]

Looks like the payment notification didn't send.

Payouts due:

• Contributor: $250 @bernhardoj (Paid in NewDot)
• Contributor+: $250 @aimane-chnaif (offer - https://www.upwork.com/nx/wm/offer/103710836)

Are you both paid via NewDot? Do we need a regression test for this?

[aimane-chnaif]

I'd like to be paid via upwork

This is just console error which already exists in PR checklist. So no need regression test

[bernhardoj]

@Christinadobrzyn I'd like to be paid in ND.

Requested in ND.

[JmillsExpensify]

$250 approved for @bernhardoj

[Christinadobrzyn]

@aimane-chnaif can you accept the upwork offer? thanks! #47162 (comment)

[Christinadobrzyn]

Dmd @aimane-chnaif about the upwork offer

[Christinadobrzyn]

I'm going to be ooo 9/4-9/10.

I'll assign a BZ teammate to pay this Upwork offer when @aimane-chnaif accepts it.

@stephanieelliott - that is the only remaining step - to pay @aimane-chnaif through Upwork. After that's done, this can be closed! TY!

[melvin-bot]

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

[aimane-chnaif]

Accepted offer. Thanks

[Christinadobrzyn]

Thanks @aimane-chnaif - I paid you in upwork based on this payment summary. Closing!