enhance: support unixtime MFM (#394)

Co-authored-by: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>

Author: poppingmoon

components/mk/Mfm.ts

@@ -8,10 +8,12 @@ import type { VNode } from 'vue';
 import * as mfm from 'mfm-js';
 import MkGoogle from '@/components/mk/Google.vue';
 import MkSparkle from '@/components/mk/Sparkle.vue';
+import MkTime from '@/components/mk/Time.vue';
 import MkCustomEmoji from '@/components/mk/CustomEmoji.vue';
 import MkMention from '@/components/mk/Mention.vue';
 import NuxtLink from '@/components/g/NuxtLink.vue';
 import ProseAVue from '@/components/content/ProseA.vue';
+import ClockIco from 'bi/clock.svg';
 
 const QUOTE_STYLE = `
 display: block;
@@ -248,6 +250,22 @@ export default function(props: {
 							return h('ruby', {}, [...genEl(token.children.slice(0, token.children.length - 1), scale), h('rt', text.trim())]);
 						}
 					}
+					case 'unixtime': {
+						const child = token.children[0];
+						const unixtime = parseInt(child.type === 'text' ? child.props.text : '');
+						return h('span', {
+							style: 'display: inline-block; font-size: 90%; border: solid 1px light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); border-radius: 999px; padding: 4px 10px 4px 6px;',
+						}, [
+							h(ClockIco, {
+								style: 'margin-right: 0.25em;',
+							}),
+							h(MkTime, { 
+								key: Math.random(),
+								time: unixtime * 1000, 
+								mode: 'detail',
+							}),
+						]);
+					}
 				}
 				if (style == null) {
 					return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children, scale), ']']);

components/mk/Time.vue

@@ -0,0 +1,101 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<time :title="absolute">
+	<template v-if="invalid">{{ $t('_mk._ago.invalid') }}</template>
+	<template v-else-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 { computed } from 'vue';
+const { locale } = useI18n();
+
+const props = withDefaults(defineProps<{
+	time: Date | string | number | null;
+	mode?: 'relative' | 'absolute' | 'detail';
+}>(), {
+	mode: 'relative',
+});
+
+function getDateSafe(n: Date | string | number) {
+	try {
+		if (n instanceof Date) {
+			return n;
+		}
+		return new Date(n);
+	} catch (err) {
+		return {
+			getTime: () => NaN,
+		};
+	}
+}
+
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+const _time = props.time == null ? NaN : getDateSafe(props.time).getTime();
+const invalid = Number.isNaN(_time);
+const dateTimeFormat = new Intl.DateTimeFormat(locale.value, {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+});
+const absolute = !invalid ? dateTimeFormat.format(_time) : $t('_mk._ago.invalid');
+const now = ref(Date.now());
+
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+const ago = computed(() => (now.value - _time) / 1000/*ms*/);
+
+const relative = computed<string>(() => {
+	if (props.mode === 'absolute') return ''; // absoluteではrelativeを使わないので計算しない
+	if (invalid) return $t('_mk._ago.invalid');
+
+	return (
+		ago.value >= 31536000 ? $t('_mk._ago.yearsAgo', { n: Math.round(ago.value / 31536000).toString() }) :
+		ago.value >= 2592000 ? $t('_mk._ago.monthsAgo', { n: Math.round(ago.value / 2592000).toString() }) :
+		ago.value >= 604800 ? $t('_mk._ago.weeksAgo', { n: Math.round(ago.value / 604800).toString() }) :
+		ago.value >= 86400 ? $t('_mk._ago.daysAgo', { n: Math.round(ago.value / 86400).toString() }) :
+		ago.value >= 3600 ? $t('_mk._ago.hoursAgo', { n: Math.round(ago.value / 3600).toString() }) :
+		ago.value >= 60 ? $t('_mk._ago.minutesAgo', { n: (~~(ago.value / 60)).toString() }) :
+		ago.value >= 10 ? $t('_mk._ago.secondsAgo', { n: (~~(ago.value % 60)).toString() }) :
+		ago.value >= -3 ? $t('_mk._ago.justNow') :
+		ago.value < -31536000 ? $t('_mk._timeIn.years', { n: Math.round(-ago.value / 31536000).toString() }) :
+		ago.value < -2592000 ? $t('_mk._timeIn.months', { n: Math.round(-ago.value / 2592000).toString() }) :
+		ago.value < -604800 ? $t('_mk._timeIn.weeks', { n: Math.round(-ago.value / 604800).toString() }) :
+		ago.value < -86400 ? $t('_mk._timeIn.days', { n: Math.round(-ago.value / 86400).toString() }) :
+		ago.value < -3600 ? $t('_mk._timeIn.hours', { n: Math.round(-ago.value / 3600).toString() }) :
+		ago.value < -60 ? $t('_mk._timeIn.minutes', { n: (~~(-ago.value / 60)).toString() }) :
+		$t('_mk._timeIn.seconds', { n: (~~(-ago.value % 60)).toString() })
+	);
+});
+
+let tickId: number;
+let currentInterval: number;
+
+function tick() {
+	now.value = Date.now();
+	const nextInterval = ago.value < 60 ? 10000 : ago.value < 3600 ? 60000 : 180000;
+
+	if (currentInterval !== nextInterval) {
+		if (tickId) window.clearInterval(tickId);
+		currentInterval = nextInterval;
+		tickId = window.setInterval(tick, nextInterval);
+	}
+}
+
+if (!invalid && (props.mode === 'relative' || props.mode === 'detail')) {
+	onMounted(() => {
+		tick();
+	});
+	onUnmounted(() => {
+		if (tickId) window.clearInterval(tickId);
+	});
+}
+</script>

locales/ja-JP.yml

@@ -350,6 +350,25 @@ _content:
 
 _mk:
   searchByGoogle: "検索"
+  _ago:
+    future: "未来"
+    justNow: "たった今"
+    secondsAgo: "{n}秒前"
+    minutesAgo: "{n}分前"
+    hoursAgo: "{n}時間前"
+    daysAgo: "{n}日前"
+    weeksAgo: "{n}週間前"
+    monthsAgo: "{n}ヶ月前"
+    yearsAgo: "{n}年前"
+    invalid: "日時の解析に失敗"
+  _timeIn:
+    seconds: "{n}秒後"
+    minutes: "{n}分後"
+    hours: "{n}時間後"
+    days: "{n}日後"
+    weeks: "{n}週間後"
+    months: "{n}ヶ月後"
+    years: "{n}年後"
 
 _other:
   title: "もっと！"