Duration

`formatDuration`

Converts numeric duration values (in seconds) into time strings in the format "M:SS" or "H:MM:SS". Handles database string values, null values, and invalid inputs gracefully.

import { formatDuration } from "@tilt-legal/cubitt-components/utilities/formatters";

formatDuration(154); // "2:34"
formatDuration(3665); // "1:01:05"
formatDuration("154"); // "2:34" (handles string from database)
formatDuration(null); // "-"

Input Type	Example	Output
`number`	`154`	`"2:34"`
`string`	`"154"`	`"2:34"`
`null`	`null`	`"-"`

Examples

Media player

<div className="flex items-center gap-2">
  <span>{formatDuration(currentTime)}</span>
  <Slider value={currentTime} max={duration} />
  <span>{formatDuration(duration)}</span>
</div>
// Displays: "1:23 ──────●──── 3:45"

Data table

<DataTable
  columns={[
    {
      accessorKey: 'duration',
      header: 'Duration',
      cell: ({ row }) => formatDuration(row.original.duration),
    },
  ]}
/>

Video cards

<Card>
  <CardContent>
    <video src={video.url} />
    <Badge variant="secondary" className="absolute bottom-2 right-2">
      {formatDuration(video.duration)}
    </Badge>
  </CardContent>
</Card>

`formatETA`

Formats estimated time remaining in a compact format like "2m 30s" or "1h 5m". Ideal for upload progress, download timers, and countdown displays.

import { formatETA } from "@tilt-legal/cubitt-components/utilities/formatters";

formatETA(30);   // "30s"
formatETA(90);   // "1m 30s"
formatETA(3600); // "1h"
formatETA(3900); // "1h 5m"

Input	Output
`30`	`"30s"`
`60`	`"1m"`
`90`	`"1m 30s"`
`3600`	`"1h"`
`3900`	`"1h 5m"`

Upload progress

<div>
  Uploading... {progress}%
  <span>{formatETA(remainingSeconds)} remaining</span>
</div>
// Output: "Uploading... 45% 2m 15s remaining"