[Hold for payment 2024-04-29] [$500] Video - Console error shows up when playing video

[izarutskaya]

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: 1.4.58-0
Reproducible in staging?: Y
Reproducible in production?: N
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to any chat.
3. Upload a video.
4. Play the video.

Expected Result:

No console error will show up when playing the video.

Actual Result:

Console error shows up when playing the video.

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Bug6431599_1711719930994.console_error_play_vid.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01cc61ba1811650dd7
• Upwork Job ID: 1773756452718587904
• Last Price Increase: 2024-03-29

Issue Owner

Current Issue Owner: @rushatgabhane

[melvin-bot]

Triggered auto assignment to @luacmartins (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[izarutskaya]

@garrettmknight 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.

[izarutskaya]

We think this issue might be related to the #vip-vsb.

[garrettmknight]

I don't think this needs to be a deploy blocker since it's just a JS error and the video still plays.

[garrettmknight]

Opening up to External

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01cc61ba1811650dd7

[melvin-bot]

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

[cleverjam]

Proposal

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

When pressing play button a newly uploaded video, the player throws an Error: Cannot complete operation because the Video component has not yet loaded

What is the root cause of that problem?

When pressing play, the video URL the following callback is invoked:

App/src/components/VideoPlayerContexts/PlaybackContext.tsx

Lines 40 to 48 in 905e689

	const updateCurrentlyPlayingURL = useCallback(
	(url: string | null) => {
	if (currentlyPlayingURL && url !== currentlyPlayingURL) {
	pauseVideo();
	}
	setCurrentlyPlayingURL(url);
	},
	[currentlyPlayingURL, pauseVideo],
	);

Followed by a call to pauseVideo:

App/src/components/VideoPlayerContexts/PlaybackContext.tsx

Lines 18 to 20 in 7de6f2e

	const pauseVideo = useCallback(() => {
	currentVideoPlayerRef.current?.setStatusAsync?.({shouldPlay: false});
	}, [currentVideoPlayerRef]);

Which invokes the setStatusAsync method on the Video ref.

This method is throwing because the Video instance in expo-av is not ready: _this._nativeRef.current; is undefined.

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

The isPlaying state should be hoisted up to the PlaybackContext so that it can be used to prevent pausing a non-playing video instance.

App/src/components/VideoPlayer/BaseVideoPlayer.js

Line 61 in b5797f9

const [isPlaying, setIsPlaying] = useState(false);

What alternative solutions did you explore? (Optional)

I attempted to retrieve the Player status from the currentVideoPlayerRef but this requires using the getStatusAsync which also triggers exception.

Also, we can simply add a catch method to the setStatusAsync and expected it to be invoked in some cases.

[melvin-bot]

📣 @nkdengineer You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[rushatgabhane]

@jsdev2547 could you please help me understand the exact error that is thrown? And numbered steps to repro it

I can only reproduce the original issue and not the one you've mentioned

Screen.Recording.2024-04-11.at.04.39.39.mov

[nkdengineer]

@rushatgabhane The PR is here

[rushatgabhane]

responding on slack - https://expensify.enterprise.slack.com/archives/C01GTK53T8Q/p1713183287992099?thread_ts=1713182764.802409&cid=C01GTK53T8Q

[garrettmknight]

Hey @jsdev2547 - responded in the slack thread, but the steps to repro the bug you're highlighting are pretty niche. Feel free to work out the Expected behavior/Actual behavior/Workarounds in a separate thread in #expensify-open-source.

[kbecciv]

@jsdev2547 QA team is not using dev environment, but we tested in staging and issue is reproducible on build 1.4.62.10

bandicam.2024-04-16.21-36-07-749.1.mp4

[garrettmknight]

I'm not able to reproduce the OP on staging with v1.4.63-0. 👍

[rushatgabhane]

PR on production last week - #40068 (comment)

@garrettmknight please attach payment summary when you can, thank you : )

[rushatgabhane]

Payment request here - https://staging.new.expensify.com/r/8166483522261478

[garrettmknight]

Payment summary:

• Contributor: @nkdengineer $500 paid via Upwork
• Reviewer: @rushatgabhane $500

@nkdengineer offer is here

[JmillsExpensify]

$500 approved for @rushatgabhane

[nkdengineer]

@nkdengineer offer is here

@garrettmknight I accepted it 🙇

[garrettmknight]

All paid up - @rushatgabhane can you complete the checklist?

[rushatgabhane]

1. The PR that introduced the bug has been identified. Link to the PR: Video player #30829

2. The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/30829/files#r1598185709

3. A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N.A.

4. Determine if we should create a regression test for this bug. - Yes

5. If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again
   1. Go to any chat
   2. Send a video
   3. Click play
   4. Verify that no console error shows up

[garrettmknight]

All set here