[$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

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});
	}, []);

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

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