[HOLD for payment 2024-06-28] [$250] mWeb - Video - Download option is not working

[lanitochka17]

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.79-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4594355
Email or phone of affected tester (no customers): applausetester+vd_mweb060424@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

Pre-requisite: the user must be logged in

1. Go to any chat
2. Send a video
3. Tap on the video preview
4. Tap on the three dots menu and select "Download"

Expected Result:

The video should start downloading on the device

Actual Result:

Nothing happens after tapping on "Download" option

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

Add any screenshot/video evidence

Bug6502136_1717538746108.Vnsc8116_1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013079356c488afb74
• Upwork Job ID: 1798664874044810128
• Last Price Increase: 2024-06-06
• Automatic offers:
• ShridharGoel | Contributor | 102736117
• bernhardoj | Contributor | 102779959

Issue Owner

Current Issue Owner: @twisterdotcom

[melvin-bot]

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

[lanitochka17]

@twisterdotcom 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

[lanitochka17]

We think that this bug might be related to #vip-vsp

[bernhardoj]

Proposal

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

Download video option doesn't work.

What is the root cause of that problem?

When we press the download option, it will take the video player ref source uri props and append an encryptedAuthToken to it.

App/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx

Lines 32 to 42 in 66b4072

	const downloadAttachment = useCallback(() => {
	if (videoPopoverMenuPlayerRef.current === null) {
	return;
	}
	const {source} = videoPopoverMenuPlayerRef.current?.props ?? {};
	if (typeof source === 'number' || !source) {
	return;
	}
	const sourceURI = addEncryptedAuthTokenToURL(source.uri);
	fileDownload(sourceURI);
	}, [videoPopoverMenuPlayerRef]);

However, the video player ref source uri already has encryptedAuthToken appended to it. (if not a local file)

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Line 73 in 66b4072

const [sourceURL] = useState(VideoUtils.addSkipTimeTagToURL(url.includes('blob:') || url.includes('file:///') ? url : addEncryptedAuthTokenToURL(url), 0.001));

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Lines 347 to 351 in 66b4072

	source={{
	// if video is loading and is offline, we want to change uri to "" to
	// reset the video player after connection is back
	uri: !isLoading || (isLoading && !isOffline) ? sourceURL : '',
	}}

So, encryptedAuthToken is appended twice resulting in error.

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

Remove addEncryptedAuthTokenToURL from here.

App/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx

Lines 32 to 42 in 66b4072

	const downloadAttachment = useCallback(() => {
	if (videoPopoverMenuPlayerRef.current === null) {
	return;
	}
	const {source} = videoPopoverMenuPlayerRef.current?.props ?? {};
	if (typeof source === 'number' || !source) {
	return;
	}
	const sourceURI = addEncryptedAuthTokenToURL(source.uri);
	fileDownload(sourceURI);
	}, [videoPopoverMenuPlayerRef]);

[ShridharGoel]

Proposal

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

mWeb - Video - Download option is not working.

What is the root cause of that problem?

In below code, we are adding encryptedAuthToken in the URL, but there's a possibility that it's already added:

App/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx

Line 40 in 90dee7a

const sourceURI = addEncryptedAuthTokenToURL(source.uri);

This is already being added from here as well:

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Line 73 in 90dee7a

const [sourceURL] = useState(VideoUtils.addSkipTimeTagToURL(url.includes('blob:') || url.includes('file:///') ? url : addEncryptedAuthTokenToURL(url), 0.001));

This leads to duplicate query params.

There are multiple other places as well where addEncryptedAuthTokenToURL is being called (all these are needed, but again there can be places where it gets added twice. Future logic changes can lead to same situation again.)

App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

Line 471 in 90dee7a

const sourceURLWithAuth = addEncryptedAuthTokenToURL(sourceURL ?? '');

App/src/components/PDFThumbnail/index.tsx

Line 23 in 90dee7a

file={isAuthTokenRequired ? addEncryptedAuthTokenToURL(previewSourceURL) : previewSourceURL}

App/src/components/PDFThumbnail/index.native.tsx

Line 23 in 90dee7a

source={{uri: isAuthTokenRequired ? addEncryptedAuthTokenToURL(previewSourceURL) : previewSourceURL}}

App/src/components/Attachments/AttachmentView/index.tsx

Line 156 in 90dee7a

const encryptedSourceUrl = isAuthTokenRequired ? addEncryptedAuthTokenToURL(source as string) : (source as string);

Why does this issue happen only on mWeb?

Because on normal web, duplicate params are being handled gracefully (extra one is not there in the request). But on mWeb, the duplicate ones don't get removed which leads to an exception.

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

We should update the logic of addEncryptedAuthTokenToURL to only add the token if it doesn't exist:

export default function (url: string) {
    if (url.includes('encryptedAuthToken')) {
        return url
    }
    return `${url}?encryptedAuthToken=${encodeURIComponent(encryptedAuthToken)}`;
}

We can also change the name to addEncryptedAuthTokenToURLIfNeeded.ts or something similar.

This will also make it future-proof, even if the auth token method gets called multiple times, it would only be added once.

[melvin-bot]

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

[melvin-bot]

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

[jayeshmangwani]

We can remove the addEncryptedAuthTokenToURL from downloadAttachment function, tested with few Download scenarios and it looks that we are already passing the auth token to every source files, @ShridharGoel do you have any scenario where you have found if we are not passing the addEncryptedAuthTokenToURL to the source ? If yes then I would agree with the adding the check of the encryptedAuthToken in the function.

But It looks that we already passing the EncryptedAuthToken already then @bernhardoj 's Proposal of removing the addEncryptedAuthTokenToURL from downloadAttachment function Looks good to me

🎀 👀 🎀 C+ reviewed