[$250] Video doesn't auto play after refreshing the page

[m-natarajan]

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.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. Go to any chat with a video
2. Click on a video
3. Click on 'Expand' button
4. Refresh the page

Expected Result:

Video should start playing

Actual Result:

Video does not start playing, instead the following error is thrown in console:
NotAllowedError: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

Workaround:

Unknown

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021893004673912508623
• Upwork Job ID: 1893004673912508623
• Last Price Increase: 2025-02-21
• Automatic offers:
• mkzie2 | Contributor | 106261426

Issue Owner

Current Issue Owner: @parasharrajat

[melvin-bot]

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

[linhvovan29546]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-22 09:28:21 UTC.

Proposal

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

Video doesn't auto play after refreshing the page

What is the root cause of that problem?

When the page is refreshed, the video player attempts to autoplay the video. However, this fails due to specific error in the playVideo function, which prevent the video from playing as expected.

NotAllowedError: play() failed because the user didn't interact with the document first this error appears due to the code here and here.

• Modern browsers (Chrome) enforce autoplay policies that require user interaction before a video can autoplay. When the attachment modal is refreshed, the video attempts to autoplay without any prior user interaction, triggering this error.
• Per Google's autoplay policy, this results in an error because there was no interaction.
• Reference: Google's Autoplay Policy
  

  App/src/components/VideoPlayerContexts/PlaybackContext.tsx

  Lines 33 to 45 in 0392e3a

  	const playVideo = useCallback(() => {
  	if (!Visibility.isVisible()) {
  	isPlayPendingRef.current = true;
  	return;
  	}
  	currentVideoPlayerRef.current?.getStatusAsync?.().then((status) => {
  	const newStatus: AVPlaybackStatusToSet = {shouldPlay: true};
  	if ('durationMillis' in status && status.durationMillis === status.positionMillis) {
  	newStatus.positionMillis = 0;
  	}
  	playVideoPromiseRef.current = currentVideoPlayerRef.current?.setStatusAsync(newStatus);
  	});
  	}, [currentVideoPlayerRef]);

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

To fix the NotAllowedError: play() failed because the user didn't interact with the document first, we need to comply with browser autoplay policies. We first mute the video and then attempt to play it, as most browsers allow muted autoplay without user interaction.

            playVideoPromiseRef.current = currentVideoPlayerRef.current?.setStatusAsync(newStatus).then()
                .catch((error) => {
                    if (error?.code === 0) {// In this case, I determine the error based on the error code
                        currentVideoPlayerRef.current?.setStatusAsync({
                            isMuted: true
                        }).finally(() => {
                            currentVideoPlayerRef.current?.setStatusAsync(newStatus);
                        });
                        return
                    }
                    // Throw or log other error for tracking
                });

Since playVideoPromiseRef is used inside resetVideoPlayerData, we also need to update it accordingly to prevent breaking the existing function.

App/src/components/VideoPlayerContexts/PlaybackContext.tsx

Lines 87 to 94 in 0392e3a

	(playVideoPromiseRef.current ?? Promise.resolve()).then(stopVideo).finally(() => {
	videoResumeTryNumberRef.current = 0;
	setCurrentlyPlayingURL(null);
	setSharedElement(null);
	setOriginalParent(null);
	currentVideoPlayerRef.current = null;
	unloadVideo();
	});

        (playVideoPromiseRef.current ?? Promise.resolve()).finally(() => {
            stopVideo()
            videoResumeTryNumberRef.current = 0;
            setCurrentlyPlayingURL(null);
            setSharedElement(null);
            setOriginalParent(null);
            currentVideoPlayerRef.current = null;
            unloadVideo();
        });

After applying the code above, I noticed the video is successfully muted. However, the mute button does not display the correct state, so we need to apply the code below here to handle the muted video.

            if (status.isMuted && !prevIsMuted.get() && prevVolume.get() !== 0) {
                updateVolume(0)
            }

cc @Expensify/design for visibility, as this will change the autoplay behavior.

Result

Screen.Recording.2025-02-22.at.02.14.54.mp4

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

N/A UI bug

What alternative solutions did you explore? (Optional)

N/A
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[CortneyOfstad]

I got a constant spinner when attempting to recreate this, so going to get eyes on it!

2025-02-21_12-26-22.mp4

[melvin-bot]

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

[melvin-bot]

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

[parasharrajat]

@linhvovan29546 Can you show us the end result of your changes?

[linhvovan29546]

Proposal updated Added result

[linhvovan29546]

@linhvovan29546 Can you show us the end result of your changes?

I've updated result

[parasharrajat]

@linhvovan29546 Can you please add explanations for each step to your proposal as well?

[mkzie2]

Proposal

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

Video does not start playing, instead the following error is thrown in console:
NotAllowedError: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

What is the root cause of that problem?

In the past, we already have the logic to update the volume to 0 here to prevent errors. But it's outdated now, we should update isMuted to true instead.

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Lines 411 to 413 in 0b6d1a0

	useEffect(() => {
	videoPlayerRef.current?.setStatusAsync({volume: 0});
	}, []);

So the error appears when we're trying to auto-play here or here

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

For now, we should update the isMuted to true

useEffect(() => {
    videoPlayerRef.current?.setStatusAsync({isMuted: true});
}, []);

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Lines 411 to 413 in 0b6d1a0

	useEffect(() => {
	videoPlayerRef.current?.setStatusAsync({volume: 0});
	}, []);

When we call shareVideoPlayerElements here we can also prevent auto-playing video if it is not ready for display to prevent playVideo function is called two times when the video is loaded.

const isReadyForDisplayRef = useRef(false);
onReadyForDisplay={(e) => { 
    isReadyForDisplayRef.current = true;

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Lines 479 to 483 in 0b6d1a0

	isLooping={isLooping}
	onReadyForDisplay={(e) => {
	if (isCurrentlyURLSet && !isUploading) {
	playVideo();
	}

shareVideoPlayerElements(
    videoPlayerRef.current,
    videoPlayerElementParentRef.current,
    videoPlayerElementRef.current,
    isUploading || isFullScreenRef.current || !isReadyForDisplayRef.current,
);

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Line 354 in 0b6d1a0

shareVideoPlayerElements(videoPlayerRef.current, videoPlayerElementParentRef.current, videoPlayerElementRef.current, isUploading || isFullScreenRef.current);

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

NA

What alternative solutions did you explore? (Optional)

Result

Screen.Recording.2025-02-22.at.15.46.28.mov

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[mkzie2]

@parasharrajat What do you think about my proposal?

[linhvovan29546]

@linhvovan29546 Can you please add explanations for each step to your proposal as well?

Proposal updated
@parasharrajat From the OP's attachment, we initially had two errors. However, after i merging main, only one error remains: NotAllowedError: play() failed because the user didn't interact with the document first. So, I've updated the proposal to focus on resolving this error only

[parasharrajat]

Thanks, both of you. But you don't explain why are you making any changes on each step. We generally discourage code snippets in proposals without explanation. Proposals should have sufficient information to explain each step verbally.

Optional: When we call shareVideoPlayerElements here we can also prevent auto-playing video if the is not ready for display

Why? Did you notice something about auto-playing? @mkzie2 What does not ready mean where?

Since playVideoPromiseRef is used inside resetVideoPlayerData, we also need to update it accordingly to prevent breaking the existing function.

What is being broken here? @linhvovan29546

[linhvovan29546]

What is being broken here?

@parasharrajat My solution modifies playVideoPromiseRef.current, and since resetVideoPlayerData uses this ref, I need to update the code inside resetVideoPlayerData to maintain its original behavior

[parasharrajat]

I was checking the old code and it looks like

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Lines 411 to 413 in 0b6d1a0

	useEffect(() => {
	videoPlayerRef.current?.setStatusAsync({volume: 0});
	}, []);

was used to prevent this error in the past but it is not working as expected. So technically this should be changed to fix this issue.

And if we know already that some browsers prevent the auto-play if videos with audio, it is better to mute the video instead. This will also keep the same intentional behavior on all platforms.

Maybe we can pass isMuted along with volumn:0 because difference between these is not very clear to me from the documentation

[linhvovan29546]

Maybe we can pass isMuted along with volumn:0 because difference between these is not very clear to me from the documentation

I tried, but the issue is not resolved. I think we only need to handle this on Chrome when an error occurs during playback and maybe remove that useEffect

Test

Screen.Recording.2025-02-22.at.23.08.31.mov

[mkzie2]

Why? Did you notice something about auto-playing? @mkzie2 What does not ready mean where?

@parasharrajat What I mean here is that the first time the video is loaded, shareVideoPlayerElements will be called before onReadyForDisplay is triggered then that will cause us to call playVideo function two times, one in shareVideoPlayerElements on from onReadyForDisplay that can also cause the error in the OP. So we need to prevent it by the way I mentioned in my proposal,

onReadyForDisplay={(e) => { 
 if (isCurrentlyURLSet && !isUploading) { 
     playVideo(); 
 } 

Maybe we can pass isMuted along with volumn:0 because the difference between these is not very clear to me from the documentation

I think we only need to pass isMuted. I tested my solution and it works well.

[parasharrajat]

Ok, thanks. Let's go with @mkzie2 proposal. If we already know that many browsers will prevent the auto-play then waiting for the error to show up does not sound best. Instead, if are fine with showing muted vide on auto-play, then we should just play the video with mute from the start.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[linhvovan29546]

@parasharrajat @mkzie2 Just a reminder, since you updated the onReadyForDisplay in the proposal, make sure to include the tests from #37674 as well.

[parasharrajat]

Nice Catch @linhvovan29546. I don't expect that to break but @mkzie2 Can you do a try run and let us know that your proposal does not break #37674

[mkzie2]

@parasharrajat Just tested and it doesn't break #37674

[mkzie2]

@parasharrajat @mkzie2 Just a reminder, since you updated the onReadyForDisplay in the proposal, make sure to include the tests from #37674 as well.

I only add a logic to update the ref in onReadyForDisplay, not change any existing logic.

[parasharrajat]

Thanks.

[melvin-bot]

📣 @mkzie2 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[mkzie2]

@parasharrajat The PR is ready.