[HOLD for payment 2024-03-19] [$500] Video duration is displayed incorrectly

[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:
Reproducible in staging?: repro for IST timezone
Reproducible in production?: repro for IST timezone
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: @MonilBhavsar
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1708409401548339

Action Performed:

1. Open any chat and click on add attachment
2. Select any video
3. In the video player check the start/end timings of the video

Expected Result:

It should start with 00:00

##Actual Result:
For IST timezone(UTC + 5:30), It starts with 30:00 minutes

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c4ec8be79be38a61
• Upwork Job ID: 1762164094751191040
• Last Price Increase: 2024-02-26
• Automatic offers:
• Pujan92 | Contributor | 0

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[Pujan92]

Proposal

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

For non-UTC timezones the video duration values aren't shown correctly

What is the root cause of that problem?

A new date gets created in the below function convertMillisecondsToTime with the local timezone and formatting on that date returns time(minutes) with the respective timezone. In case of IST(UTC+5:30) format(mm:ss) will give 30:00.

App/src/components/VideoPlayer/utils.ts

Lines 4 to 7 in 03c81a6

	const convertMillisecondsToTime = (milliseconds: number) => {
	const date = new Date(milliseconds);
	return format(date, 'mm:ss');
	};

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

Instead of using Date we can use the straight logic to convert milliseconds into the minutes and seconds like below.

const minutes = Math.floor(milliseconds / 60000);
const seconds = String(((milliseconds % 60000) / 1000).toFixed(0)).padStart(2, '0');
return `${minutes}:${seconds}`;

For including hours optionally we can do like below

return hours > 0 ? 
  `${hours}:${String(minutes).padStart(2, '0')}:${seconds}` : `${minutes}:${seconds}`;

[eucool]

Proposal

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

Video duration is displayed incorrectly

What is the root cause of that problem?

In the function convertMillisecondsToTime, a new date is generated using the local timezone. The formatting applied to this date results in the representation of time in minutes, accounting for the respective timezone.

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

We need to use date-fns-tz package to solve this issue for global timezones

import { formatDuration, intervalToDuration, utcToZonedTime } from 'date-fns-tz';

// Converts milliseconds to 'hours:minutes:seconds' or 'minutes:seconds' format in UTC
const convertMillisecondsToTime = (milliseconds: number) => {
    // Create a new Date object with milliseconds since epoch
    const date = new Date(0);

    // Set the milliseconds
    date.setUTCMilliseconds(milliseconds);

    // Get the duration object
    const duration = intervalToDuration({ start: 0, end: milliseconds });

    // Format the duration in UTC timezone with hours, minutes, and seconds if applicable
    const formattedDuration = formatDuration(duration, {
        format: ['hours', 'minutes', 'seconds'],
    });

    // Format the date in UTC timezone with hours, minutes, and seconds if applicable
    if (formattedDuration.hours > 0) {
        return format(utcToZonedTime(date, 'UTC'), 'HH:mm:ss');
    } else {
        return format(utcToZonedTime(date, 'UTC'), 'mm:ss');
    }
};

export default convertMillisecondsToTime;

Result:

simplescreenrecorder-2024-02-26_23.24.14.mp4

Note:

We already use date-fns-tz at other places as well:

App/tests/unit/DateUtilsTest.js

Line 2 in 066d6c8

import {format as tzFormat, utcToZonedTime} from 'date-fns-tz';

App/tests/actions/ReportTest.js

Line 2 in 066d6c8

import {utcToZonedTime} from 'date-fns-tz';

Note:

We shouldn't use formatInTimeZone as this is doesn't work with DST, so my solution would be more fool-proof in this sense ;)

Where my proposal use of utcToZonedTime covers every case and is already used in many places in our existing codebase:

App/src/libs/actions/Report.ts

Line 2075 in ba135b3

const createdAt = timezoneFormat(utcToZonedTime(new Date(), 'UTC'), CONST.DATE.FNS_DB_FORMAT_STRING);

App/tests/actions/ReportTest.js

Line 329 in ba135b3

expect(utcToZonedTime(report.lastReadTime, UTC).getTime()).toBeGreaterThanOrEqual(utcToZonedTime(currentTime, UTC).getTime());

[parasharrajat]

Both proposal make sense but I think going with date based solution over custom calculation is better for longer run thus @codinggeek2023's proposal looks good to me.

[melvin-bot]

Triggered auto assignment to @francoisl, see https://stackoverflow.com/c/expensify/questions/7972 for more details.