enhance(frontend): MFMでUNIX時間を指定して日時を表示できるように

Resolve #12294

CHANGELOG.md

@@ -22,6 +22,8 @@
 ### Client
 - Enhance: MFMでルビを振れるように
 	- 例: `$[ruby 三須木 みすき]`
+- Enhance: MFMでUNIX時間を指定して日時を表示できるように
+	- 例: `$[unixtime 1701356400]`
 - Enhance: プラグインでエラーが発生した場合のハンドリングを強化
 - Enhance: 細かなUIのブラッシュアップ
 - Fix: 効果音が再生されるとデバイスで再生している動画や音声が停止する問題を修正 #12339

locales/index.d.ts

@@ -1948,6 +1948,15 @@ export interface Locale {
         "yearsAgo": string;
         "invalid": string;
     };
+    "_timeIn": {
+        "seconds": string;
+        "minutes": string;
+        "hours": string;
+        "days": string;
+        "weeks": string;
+        "months": string;
+        "years": string;
+    };
     "_time": {
         "second": string;
         "minute": string;

locales/ja-JP.yml

@@ -1853,6 +1853,15 @@ _ago:
   yearsAgo: "{n}年前"
   invalid: "ありません"
 
+_timeIn:
+  seconds: "{n}秒後"
+  minutes: "{n}分後"
+  hours: "{n}時間後"
+  days: "{n}日後"
+  weeks: "{n}週間後"
+  months: "{n}ヶ月後"
+  years: "{n}年後"
+
 _time:
   second: "秒"
   minute: "分"

packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts

@@ -7,6 +7,7 @@ import { VNode, h } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import MkUrl from '@/components/global/MkUrl.vue';
+import MkTime from '@/components/global/MkTime.vue';
 import MkLink from '@/components/MkLink.vue';
 import MkMention from '@/components/MkMention.vue';
 import MkEmoji from '@/components/global/MkEmoji.vue';
@@ -249,6 +250,19 @@ export default function(props: MfmProps) {
 							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 var(--divider); border-radius: 999px; padding: 4px 10px 4px 6px;',
+						}, [
+							h('i', {
+								class: 'ti ti-clock',
+								style: 'margin-right: 0.25em;',
+							}),
+							h(MkTime, { time: unixtime * 1000, mode: 'detail' }),
+						]);
+					}
 				}
 				if (style == null) {
 					return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children, scale), ']']);

packages/frontend/src/components/global/MkTime.vue

@@ -50,7 +50,15 @@ const relative = $computed<string>(() => {
 		ago >= 60 ? i18n.t('_ago.minutesAgo', { n: (~~(ago / 60)).toString() }) :
 		ago >= 10 ? i18n.t('_ago.secondsAgo', { n: (~~(ago % 60)).toString() }) :
 		ago >= -1 ? i18n.ts._ago.justNow :
-		i18n.ts._ago.future);
+		ago < -31536000 ? i18n.t('_timeIn.years', { n: Math.round(-ago / 31536000).toString() }) :
+		ago < -2592000 ? i18n.t('_timeIn.months', { n: Math.round(-ago / 2592000).toString() }) :
+		ago < -604800 ? i18n.t('_timeIn.weeks', { n: Math.round(-ago / 604800).toString() }) :
+		ago < -86400 ? i18n.t('_timeIn.days', { n: Math.round(-ago / 86400).toString() }) :
+		ago < -3600 ? i18n.t('_timeIn.hours', { n: Math.round(-ago / 3600).toString() }) :
+		ago < -60 ? i18n.t('_timeIn.minutes', { n: (~~(-ago / 60)).toString() }) :
+		ago < -10 ? i18n.t('_timeIn.seconds', { n: (~~(-ago % 60)).toString() }) :
+		'?'
+	);
 });
 
 let tickId: number;

packages/frontend/src/const.ts

@@ -93,4 +93,4 @@ export const DEFAULT_SERVER_ERROR_IMAGE_URL = 'https://xn--931a.moe/assets/error
 export const DEFAULT_NOT_FOUND_IMAGE_URL = 'https://xn--931a.moe/assets/not-found.jpg';
 export const DEFAULT_INFO_IMAGE_URL = 'https://xn--931a.moe/assets/info.jpg';
 
-export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'position', 'fg', 'bg', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'ruby'];
+export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'position', 'fg', 'bg', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'ruby', 'unixtime'];