48 lines
1.5 KiB
Svelte
48 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { formatDuration } from '$lib/util/fragments/time';
|
|
import Ellipsis from '$lib/components/utils/Ellipsis.svelte';
|
|
import Editable from '$lib/components/utils/Editable.svelte';
|
|
import UpObject from '$lib/components/display/UpObject.svelte';
|
|
import { IValue } from '@upnd/upend';
|
|
import { formatRelative, fromUnixTime } from 'date-fns';
|
|
import filesize from 'filesize';
|
|
import { ATTR_ADDED } from '@upnd/upend/constants';
|
|
|
|
export let value: IValue;
|
|
export let attribute: string | undefined;
|
|
export let labels: string[] | undefined = undefined;
|
|
|
|
function formatValue(value: string | number | null, attribute: string | undefined): string {
|
|
if (attribute) {
|
|
try {
|
|
switch (attribute) {
|
|
case 'FILE_SIZE':
|
|
return filesize(parseInt(String(value), 10), { base: 2 });
|
|
case ATTR_ADDED:
|
|
case 'LAST_VISITED':
|
|
return formatRelative(fromUnixTime(parseInt(String(value), 10)), new Date());
|
|
case 'NUM_VISITED':
|
|
return `${value} times`;
|
|
case 'MEDIA_DURATION':
|
|
return formatDuration(parseInt(String(value), 10));
|
|
}
|
|
} catch {
|
|
// noop.
|
|
}
|
|
}
|
|
return String(value);
|
|
}
|
|
</script>
|
|
|
|
<div class="cell value mark-value" data-address={value.t === 'Address' ? value.c : undefined}>
|
|
<Editable {value} on:edit>
|
|
{#if value.t === 'Address'}
|
|
<UpObject link address={String(value.c)} {labels} on:resolved />
|
|
{:else}
|
|
<div class:formatted={Boolean(formatValue(value.c, attribute))}>
|
|
<Ellipsis value={formatValue(value.c, attribute) || String(value.c)} />
|
|
</div>
|
|
{/if}
|
|
</Editable>
|
|
</div>
|