Android - Video Attachment shows Link Preview for OldDot

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Go to App
2. Open any chat
3. Send an mp4 video as attachment.
4. Once the attachment is sent, link preview appears with link to OldDot.

Expected Result:

No link preview should appear for mp4 videos.

Actual Result:

Link preview appears with link to OldDot.

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.39-11
Reproducible in staging?: y
Reproducible in production?: y
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
Notes/Photos/Videos: Any additional supporting documentation

link-preview.mp4

Screen_Recording_20230715_072700_Expensify.Chat.1.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Talha345
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1689338090641839

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[namhihi237]

Proposal

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

No link preview should appear for videos.

What is the root cause of that problem?

Here is a condition show preview link.

App/src/pages/home/report/ReportActionItem.js

Lines 347 to 351 in b9508b6

	{!isHidden && !_.isEmpty(props.action.linkMetadata) && (
	<View style={props.draftMessage ? styles.chatItemReactionsDraftRight : {}}>
	<LinkPreviewer linkMetadata={_.filter(props.action.linkMetadata, (item) => !_.isEmpty(item))} />
	</View>
	)}

When the video is uploaded we will have the linkMetadata because the originalMessage.html is tag a so it will show a preview link

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

We should add the condition if the comment is an attachment we will not show the preview link here:

{!isHidden && !props.action.isAttachment && !_.isEmpty(props.action.linkMetadata) && (

What alternative solutions did you explore? (Optional)

N/A

[Talha345]

Proposal

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

When an mp4 attachment is sent in any chat ,a link preview to oldDot is shown.

What is the root cause of that problem?

Since attachments are being stored and served via oldDot props.action.linkMetadata is available and it shows the link preview to the oldDot.

App/src/pages/home/report/ReportActionItem.js

Lines 347 to 351 in b9508b6

	{!isHidden && !_.isEmpty(props.action.linkMetadata) && (
	<View style={props.draftMessage ? styles.chatItemReactionsDraftRight : {}}>
	<LinkPreviewer linkMetadata={_.filter(props.action.linkMetadata, (item) => !_.isEmpty(item))} />
	</View>
	)}

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

This should be handled on the backend and checked if the link is an attachment which can be easily checked because attachment links have the format https://www.expensify.com/chat-attachments/4394150321175956513/w_7cc37f35a8be2bfdeacbb54c9c851fd1d2997e79.mp4 and contain https://www.expensify.com/chat-attachments/ and linkMetadata should not be sent in this case.

What alternative solutions did you explore? (Optional)

If the team wants to handle this on the frontend, this const should be converted to let isAttachment = false; and initalized here and this line should be modified like:

{!isHidden && !isAttachment && !_.isEmpty(props.action.linkMetadata)

[StevenKKC]

Proposal

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

Video Attachment shows Link Preview for OldDot.

What is the root cause of that problem?

For video attachment, report action have a message like below.
<a href=\"https://www.expensify.com/chat-attachments/2687969988479401278/w_2785bfac52cf0546baa2ce84fff817380202cda2.mov\" data-expensify-source=\"https://www.expensify.com/chat-attachments/2687969988479401278/w_2785bfac52cf0546baa2ce84fff817380202cda2.mov\">iOS-Safari.mov</a>

This is a valid url, so the ReportActionsUtils.extractLinksFromMessageHtml will returns a url, and then ExpandURLPreview API will be called.

App/src/pages/home/report/ReportActionItem.js

Lines 144 to 152 in 78f8a70

	useEffect(() => {
	const urls = ReportActionsUtils.extractLinksFromMessageHtml(props.action);
	if (_.isEqual(downloadedPreviews.current, urls) || props.action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
	return;
	}
	downloadedPreviews.current = urls;
	Report.expandURLPreview(props.report.reportID, props.action.reportActionID);
	}, [props.action, props.report.reportID]);

So the url preview is displayed for video attachment.

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

We should add checking if url is a video file or not.

-   if (_.isEqual(downloadedPreviews.current, urls) || props.action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
+   if (_.isEqual(downloadedPreviews.current, urls) || props.action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || FileUtils.getFileType(urls[0]) === CONST.ATTACHMENT_FILE_TYPE.VIDEO) {

What alternative solutions did you explore? (Optional)

None.

[twisterdotcom]

I think we should close this given we're building video playback anyway: #20471