[HOLD] [$250] Attachment - Unable to play video when inside a thread.

[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.1.8-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
Email or phone of affected tester (no customers): ibellicotest+345@gmail.com
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 - Android 12 - Chrome / Windows 10 - Chrome
App Component: Other

Action Performed:

1. Open the Expensify app.
2. Open any chat.
3. Tap on the "+" button and select "Add Attachment"
4. Tap on "Choose File" and select any video.
5. Tap on "Send"
6. Once redirected to chat, long tap on the video and select "Reply in thread"
7. Once inside the thread, open the video.
8. Tap on play.
9. Check if the video can be played.

Expected Result:

User should be able to reproduce a video when inside a thread.

Actual Result:

User is unable to reproduce a video attachment when inside a thread.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6760590_1741065469782.Video_Thread.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021901634819453284677
• Upwork Job ID: 1901634819453284677
• Last Price Increase: 2025-03-31

Issue Owner

Current Issue Owner: @abekkala

[melvin-bot]

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

[melvin-bot]

@abekkala Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[M00rish]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-24 03:35:51 UTC.

Proposal

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

Attachment - Unable to reproduce video when inside a thread

What is the root cause of that problem?

the issue happens because the currentVideoPlayerRef is empty when going into thread:

App/src/components/VideoPlayerContexts/PlaybackContext.tsx

Line 40 in f2a5de7

currentVideoPlayerRef.current?.getStatusAsync?.().then((status) => {

currentVideoPlayerRef is empty because once user going into thread currentlyPlayingURLReportID changes to the child report, so reportID and currentlyPlayingURLReportID are different and so we return early before setting the currentVideoPlayerRef:

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Lines 354 to 359 in f2a5de7

	useEffect(() => {
	if (shouldUseSharedVideoElement || url !== currentlyPlayingURL || reportID !== currentlyPlayingURLReportID) {
	return;
	}
	// On mobile safari, we need to auto-play when sharing video element here
	shareVideoPlayerElements(

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

add a function to check if currentlyPlayingURLReportID is a child of reportID in ReportUtils.ts, here's pseudocode :

function isReportChildofParent(currentlyPlayingURLReportID: string, parentReportID: string): boolean {
    const report = getReport(currentlyPlayingURLReportID, allReports);
    return report?.parentReportID === parentReportID;
}

and in BaseVideoPlayer.tsx :

    useEffect(() => {
        if (shouldUseSharedVideoElement || url !== currentlyPlayingURL || (reportID !== currentlyPlayingURLReportID && !isReportChildofParent(currentlyPlayingURLReportID,reportID))) {
            return;
        }
        // On mobile safari, we need to auto-play when sharing video element here
        shareVideoPlayerElements(
            videoPlayerRef.current,
            videoPlayerElementParentRef.current,
            videoPlayerElementRef.current,
....

and in VideoPlayerPreview add same condition:

App/src/components/VideoPlayerPreview/index.tsx

Line 69 in 4750e38

if (videoUrl !== currentlyPlayingURL || reportID !== currentlyPlayingURLReportID) {

useEffect(() => {
        if (videoUrl !== currentlyPlayingURL ||  (reportID !== currentlyPlayingURLReportID && !isReportChildofParent(currentlyPlayingURLReportID, reportID))) {
            return;
        }
....

this change will lead to this error:
Cannot complete operation because the Video component has not yet loaded

we're trying to update volume before video is loaded while navigating from reports to chat because of this condition :

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Lines 226 to 230 in 4750e38

	// These two conditions are essential for the mute and unmute functionality to work properly during
	// fullscreen playback on the web
	if (prevIsMuted.get() && prevVolume.get() === 0 && !status.isMuted) {
	updateVolume(lastNonZeroVolume.get());
	}

fix by checking if loading is done :

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

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

add test for isReportChildofParent to assert correcting checking of parent report

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

@abekkala Still overdue 6 days?! Let's take care of this!

[melvin-bot]

@abekkala 12 days overdue now... This issue's end is nigh!

[melvin-bot]

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