[$250] Web - A horizontal thumbnail is displayed for a vertical video attachment

[nlemma]

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.2.16-11
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://github.com/Expensify/Expensify/issues/383873
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Windows 11 Pro - Chrome
App Component: Chat

Action Performed:

1. Navigate to staging.new.expensify.com
2. Open any chat
3. Click on the + button next to the composer
4. Click on Add attachment
5. Select a vertically oriented video
6. Click on Send

Expected Result:

The video should appear in the chat, with a vertical thumbnail (i.e. height greater than width).

Actual Result:

When a vertically oriented video is attached, its thumbnail appears horizontally in the chat.
After revisiting the chat or clicking the thumbnail to play the video, it updates to display a vertical orientation.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6925185_1755995948532.horizontal_thumbnail.mp4

Bug6925185_1755995948521.vertical_video_sample.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021973054240503131912
• Upwork Job ID: 1973054240503131912
• Last Price Increase: 2025-09-30

Issue Owner

Current Issue Owner: @zanyrenney

[melvin-bot]

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

[Eskalifer1]

Proposal

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

Web - A horizontal thumbnail is displayed for a vertical video attachment

What is the root cause of that problem?

This happens because when we first load the video, we don't yet have information about its dimensions, and Nan is set for width and height, but this value is not updated later when we receive the correct dimensions, which results in an incorrect calculation.

App/src/components/VideoPlayerPreview/index.tsx

Line 63 in 49158da

const [measuredDimensions, setMeasuredDimensions] = useState(videoDimensions);

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

We need to track changes and set them via useEffect:

    useEffect(() => {
        setMeasuredDimensions(videoDimensions);
    }, [videoDimensions]);

PS: If for some reason we don't want to do this, we can add some conditional operators, for example, if the previous value was NaN and the new one is different, or if the value already existed, etc.

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

N/A

What alternative solutions did you explore? (Optional)

We can add fallback for videoDimensions for hook useThumbnailDimensions
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.

[bernhardoj]

Proposal

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

Wrong thumbnail aspect ratio when uploading video.

What is the root cause of that problem?

We already have a logic to calculate the aspect ratio, but the width and height stay empty (NaN), so we use the default aspect ratio, that is 1.5.

App/src/hooks/useThumbnailDimensions.ts

Lines 18 to 25 in d87915e

	const thumbnailDimensionsStyles = useMemo(() => {
	if (!width || !height) {
	return {width: fixedDimension, aspectRatio: CONST.THUMBNAIL_IMAGE.NAN_ASPECT_RATIO};
	}
	const aspectRatio = (height && width / height) || 1;
	if (width > height) {
	return {width: fixedDimension, aspectRatio};
	}

It's because initially, the video doesn't have the width and height attributes.

App/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx

Lines 24 to 25 in d87915e

	const width = Number(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_WIDTH_ATTRIBUTE]);
	const height = Number(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_HEIGHT_ATTRIBUTE]);

And we use it for the initial state of measuredDimensions, and we only update it when the video is loaded.

App/src/components/VideoPlayerPreview/index.tsx

Lines 63 to 64 in d87915e

	const [measuredDimensions, setMeasuredDimensions] = useState(videoDimensions);
	const {thumbnailDimensionsStyles} = useThumbnailDimensions(measuredDimensions.width, measuredDimensions.height);

App/src/components/VideoPlayerPreview/index.tsx

Lines 73 to 75 in d87915e

	const onVideoLoaded = (event: VideoReadyForDisplayEvent & {srcElement: HTMLVideoElement}) => {
	setMeasuredDimensions({width: event.srcElement.videoWidth, height: event.srcElement.videoHeight});
	};

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

We can update it so that measuredDimensions contains the dimension when the video is loaded, but it will fall back to videoDimensions.

App/src/components/VideoPlayerPreview/index.tsx

Lines 63 to 64 in d87915e

	const [measuredDimensions, setMeasuredDimensions] = useState(videoDimensions);
	const {thumbnailDimensionsStyles} = useThumbnailDimensions(measuredDimensions.width, measuredDimensions.height);

const [measuredDimensions, setMeasuredDimensions] = useState({width: undefined, height: undefined});
const {thumbnailDimensionsStyles} = useThumbnailDimensions(measuredDimensions.width ?? videoDimensions.width, measuredDimensions.height ?? videoDimensions.height);

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

N/A

[lorretheboy]

Proposal

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

A horizontal thumbnail is displayed for a vertical video attachment

What is the root cause of that problem?

The problem is that when the video is first loaded, the VideoPlayerPreview component initializes with potentially incorrect dimensions from the HTML attributes, but when the onVideoLoaded callback fires and updates measuredDimensions, the thumbnail dimensions aren't being recalculated properly.

App/src/components/VideoPlayerPreview/index.tsx

Lines 73 to 75 in feb05d0

	const onVideoLoaded = (event: VideoReadyForDisplayEvent & {srcElement: HTMLVideoElement}) => {
	setMeasuredDimensions({width: event.srcElement.videoWidth, height: event.srcElement.videoHeight});
	};

App/src/components/VideoPlayerPreview/index.tsx

Line 63 in feb05d0

const [measuredDimensions, setMeasuredDimensions] = useState(videoDimensions);

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

Load video metadata to get correct dimensions for thumbnail display (web only since native platforms should get correct dimensions from the image picker library)

    useEffect(() => {
        if (typeof videoUrl !== 'string' || !videoUrl || getPlatform() !== CONST.PLATFORM.WEB) {
            return;
        }

        const video = document.createElement('video');
        video.onloadedmetadata = () => {
            // Only update dimensions if they're different from what we have
            if (video.videoWidth === measuredDimensions.width && video.videoHeight === measuredDimensions.height) {
                return;
            }
            setMeasuredDimensions({
                width: video.videoWidth,
                height: video.videoHeight,
            });
        };
        video.src = videoUrl;
        video.load();

        return () => {
            video.src = '';
        };
    }, [videoUrl, measuredDimensions.width, measuredDimensions.height]);

Add here

App/src/components/VideoPlayerPreview/index.tsx

Line 67 in feb05d0

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)

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.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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