Merge branch 'fix/MkTime' into 'develop'

refactor MkTime: replace the awful ?: chain with if-else; fix: force update ticker when props.time changed

Co-authored-by: Lhcfl <Lhcfl@outlook.com>

See merge request firefish/firefish!10797

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

@@ -25,15 +25,21 @@ const props = withDefaults(
 	},
 );
 
+function getDateSafe(n: Date | string | number) {
+	try {
+		if (n instanceof Date) {
+			return n;
+		}
+		return new Date(n);
+	} catch (err) {
+		return {
+			getTime: () => Number.NaN,
+		};
+	}
+}
+
 const _time = computed(() =>
-	props.time == null
-		? Number.NaN
-		: typeof props.time === "number"
-			? props.time
-			: (props.time instanceof Date
-					? props.time
-					: new Date(props.time)
-				).getTime(),
+	props.time == null ? Number.NaN : getDateSafe(props.time).getTime(),
 );
 const invalid = computed(() => Number.isNaN(_time.value));
 const absolute = computed(() =>
@@ -41,45 +47,57 @@ const absolute = computed(() =>
 );
 
 const now = ref(props.origin?.getTime() ?? Date.now());
+
 const relative = computed<string>(() => {
 	if (props.mode === "absolute") return ""; // absoluteではrelativeを使わないので計算しない
 	if (invalid.value) return i18n.ts._ago.invalid;
 
 	const ago = (now.value - _time.value) / 1000; /* ms */
-	return ago >= 31536000
-		? i18n.t("_ago.yearsAgo", { n: Math.floor(ago / 31536000).toString() })
-		: ago >= 2592000
-			? i18n.t("_ago.monthsAgo", {
+
+	if (ago >= 31536000) {
+		return i18n.t("_ago.yearsAgo", {
+			n: Math.floor(ago / 31536000).toString(),
+		});
+	}
+	if (ago >= 2592000) {
+		return i18n.t("_ago.monthsAgo", {
 			n: Math.floor(ago / 2592000).toString(),
-				})
-			: ago >= 604800
-				? i18n.t("_ago.weeksAgo", {
+		});
+	}
+	if (ago >= 604800) {
+		return i18n.t("_ago.weeksAgo", {
 			n: Math.floor(ago / 604800).toString(),
-					})
-				: ago >= 86400
-					? i18n.t("_ago.daysAgo", {
+		});
+	}
+	if (ago >= 86400) {
+		return i18n.t("_ago.daysAgo", {
 			n: Math.floor(ago / 86400).toString(),
-						})
-					: ago >= 3600
-						? i18n.t("_ago.hoursAgo", {
+		});
+	}
+	if (ago >= 3600) {
+		return i18n.t("_ago.hoursAgo", {
 			n: Math.floor(ago / 3600).toString(),
-							})
-						: ago >= 60
-							? i18n.t("_ago.minutesAgo", {
+		});
+	}
+	if (ago >= 60) {
+		return i18n.t("_ago.minutesAgo", {
 			n: (~~(ago / 60)).toString(),
-								})
-							: ago >= 10
-								? i18n.t("_ago.secondsAgo", {
+		});
+	}
+	if (ago >= 10) {
+		return i18n.t("_ago.secondsAgo", {
 			n: (~~(ago % 60)).toString(),
-									})
-								: ago >= -1
-									? i18n.ts._ago.justNow
-									: i18n.ts._ago.future;
+		});
+	}
+	if (ago >= -1) {
+		return i18n.ts._ago.justNow;
+	}
+	return i18n.ts._ago.future;
 });
 
 let tickId: number | undefined;
 
-function tick() {
+function tick(forceUpdateTicker = false) {
 	if (
 		invalid.value ||
 		props.origin ||
@@ -101,13 +119,16 @@ function tick() {
 
 	if (!tickId) {
 		tickId = window.setInterval(tick, next);
-	} else if (prev < next) {
+	} else if (prev < next || forceUpdateTicker) {
 		window.clearInterval(tickId);
 		tickId = window.setInterval(tick, next);
 	}
 }
 
-watch(() => props.time, tick);
+watch(
+	() => props.time,
+	() => tick(true),
+);
 
 onMounted(() => {
 	tick();