yumechi-no-kuni/packages/client/src/components/global/time.vue

<template>
<time :title="absolute">
	<template v-if="mode === 'relative'">{{ relative }}</template>
	<template v-else-if="mode === 'absolute'">{{ absolute }}</template>
	<template v-else-if="mode === 'detail'">{{ absolute }} ({{ relative }})</template>
</time>
</template>

<script lang="ts" setup>
import { onUnmounted } from 'vue';
import { i18n } from '@/i18n';

const props = withDefaults(defineProps<{
	time: Date | string;
	mode?: 'relative' | 'absolute' | 'detail';
}>(), {
	mode: 'relative',
});

const _time = typeof props.time == 'string' ? new Date(props.time) : props.time;
const absolute = _time.toLocaleString();

let now = $ref(new Date());
const relative = $computed(() => {
	const ago = (now.getTime() - _time.getTime()) / 1000/*ms*/;
	return (
		ago >= 31536000 ? i18n.t('_ago.yearsAgo',   { n: (~~(ago / 31536000)).toString() }) :
		ago >= 2592000  ? i18n.t('_ago.monthsAgo',  { n: (~~(ago / 2592000)).toString() }) :
		ago >= 604800   ? i18n.t('_ago.weeksAgo',   { n: (~~(ago / 604800)).toString() }) :
		ago >= 86400    ? i18n.t('_ago.daysAgo',    { n: (~~(ago / 86400)).toString() }) :
		ago >= 3600     ? i18n.t('_ago.hoursAgo',   { n: (~~(ago / 3600)).toString() }) :
		ago >= 60       ? i18n.t('_ago.minutesAgo', { n: (~~(ago / 60)).toString() }) :
		ago >= 10       ? i18n.t('_ago.secondsAgo', { n: (~~(ago % 60)).toString() }) :
		ago >= -1       ? i18n.locale._ago.justNow :
		ago <  -1       ? i18n.locale._ago.future :
		i18n.locale._ago.unknown);
});

function tick() {
	// TODO: パフォーマンス向上のため、このコンポーネントが画面内に表示されている場合のみ更新する
	now = new Date();

	tickId = window.setTimeout(() => {
		window.requestAnimationFrame(tick);
	}, 10000);
}

let tickId: number;

if (props.mode === 'relative' || props.mode === 'detail') {
	tickId = window.requestAnimationFrame(tick);

	onUnmounted(() => {
		window.clearTimeout(tickId);
	});
}
</script>