HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Merge branch 'fix/reactive' into 'develop'

Browse source 
fix: use reactive MkTime

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

See merge request firefish/firefish!10796
This commit is contained in:
naskya 2024-05-07 19:59:12 +00:00
commit 769f52c8ee
1 changed files with 32 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
packages/client/src/components/global/MkTime.vue
View file

@ -10,7 +10,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref } from "vue"; import { computed, onMounted, onUnmounted, ref, watch } from "vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { dateTimeFormat } from "@/scripts/intl-const"; import { dateTimeFormat } from "@/scripts/intl-const";
@ -25,7 +25,7 @@ const props = withDefaults(
}, },
); );
const _time = const _time = computed(() =>
props.time == null props.time == null
? Number.NaN ? Number.NaN
: typeof props.time === "number" : typeof props.time === "number"
@ -33,16 +33,19 @@ const _time =
: (props.time instanceof Date : (props.time instanceof Date
? props.time ? props.time
: new Date(props.time) : new Date(props.time)
).getTime(); ).getTime(),
const invalid = Number.isNaN(_time); );
const absolute = !invalid ? dateTimeFormat.format(_time) : i18n.ts._ago.invalid; const invalid = computed(() => Number.isNaN(_time.value));
const absolute = computed(() =>
!invalid.value ? dateTimeFormat.format(_time.value) : i18n.ts._ago.invalid,
);
const now = ref(props.origin?.getTime() ?? Date.now()); const now = ref(props.origin?.getTime() ?? Date.now());
const relative = computed<string>(() => { const relative = computed<string>(() => {
if (props.mode === "absolute") return ""; // absoluteではrelativeを使わないので計算しない if (props.mode === "absolute") return ""; // absoluteではrelativeを使わないので計算しない
if (invalid) return i18n.ts._ago.invalid; if (invalid.value) return i18n.ts._ago.invalid;
const ago = (now.value - _time) / 1000; /* ms */ const ago = (now.value - _time.value) / 1000; /* ms */
return ago >= 31536000 return ago >= 31536000
? i18n.t("_ago.yearsAgo", { n: Math.floor(ago / 31536000).toString() }) ? i18n.t("_ago.yearsAgo", { n: Math.floor(ago / 31536000).toString() })
: ago >= 2592000 : ago >= 2592000
@ -74,15 +77,25 @@ const relative = computed<string>(() => {
: i18n.ts._ago.future; : i18n.ts._ago.future;
}); });
let tickId: number; let tickId: number | undefined;
function tick() { function tick() {
if (
invalid.value ||
props.origin ||
(props.mode !== "relative" && props.mode !== "detail")
) {
if (tickId) window.clearInterval(tickId);
tickId = undefined;
return;
}
const _now = Date.now(); const _now = Date.now();
const agoPrev = (now.value - _time) / 1000; /* ms */ // 現状のinterval const agoPrev = (now.value - _time.value) / 1000; /* ms */ // 現状のinterval
now.value = _now; now.value = _now;
const ago = (now.value - _time) / 1000; /* ms */ // 次のinterval const ago = (now.value - _time.value) / 1000; /* ms */ // 次のinterval
const prev = agoPrev < 60 ? 10000 : agoPrev < 3600 ? 60000 : 180000; const prev = agoPrev < 60 ? 10000 : agoPrev < 3600 ? 60000 : 180000;
const next = ago < 60 ? 10000 : ago < 3600 ? 60000 : 180000; const next = ago < 60 ? 10000 : ago < 3600 ? 60000 : 180000;
@ -94,16 +107,13 @@ function tick() {
} }
} }
if ( watch(() => props.time, tick);
!invalid &&
!props.origin &&
(props.mode === "relative" || props.mode === "detail")
) {
onMounted(() => { onMounted(() => {
tick(); tick();
}); });
onUnmounted(() => { onUnmounted(() => {
if (tickId) window.clearInterval(tickId); if (tickId) window.clearInterval(tickId);
}); });
}
</script> </script>