From 8cc030e6aff3e08d8f560b314efabb6fbfbe97dc Mon Sep 17 00:00:00 2001 From: an-lee Date: Fri, 17 May 2024 10:23:39 +0800 Subject: [PATCH] Fix: use local timezone as default (#615) * use local timezone as default * refactor code * fix time display --- .../components/audios/audios-table.tsx | 2 +- .../conversations/conversation-card.tsx | 2 +- .../recordings/recording-calendar.tsx | 13 +++------- .../components/recordings/recording-stats.tsx | 2 +- .../components/videos/videos-table.tsx | 2 +- enjoy/src/renderer/lib/dayjs.ts | 26 +++++++++++++++++++ enjoy/src/renderer/lib/utils.ts | 13 +++------- enjoy/src/renderer/pages/profile.tsx | 2 +- 8 files changed, 38 insertions(+), 24 deletions(-) create mode 100644 enjoy/src/renderer/lib/dayjs.ts diff --git a/enjoy/src/renderer/components/audios/audios-table.tsx b/enjoy/src/renderer/components/audios/audios-table.tsx index 1ebdd185..df1acd5e 100644 --- a/enjoy/src/renderer/components/audios/audios-table.tsx +++ b/enjoy/src/renderer/components/audios/audios-table.tsx @@ -19,7 +19,7 @@ import { CheckCircleIcon, AudioWaveformIcon, } from "lucide-react"; -import dayjs from "dayjs"; +import dayjs from "@renderer/lib/dayjs"; import { secondsToTimestamp } from "@renderer/lib/utils"; import { Link } from "react-router-dom"; diff --git a/enjoy/src/renderer/components/conversations/conversation-card.tsx b/enjoy/src/renderer/components/conversations/conversation-card.tsx index ec61d81b..57b1faa8 100644 --- a/enjoy/src/renderer/components/conversations/conversation-card.tsx +++ b/enjoy/src/renderer/components/conversations/conversation-card.tsx @@ -1,5 +1,5 @@ import { MessageCircleIcon, SpeechIcon } from "lucide-react"; -import dayjs from "dayjs"; +import dayjs from "@renderer/lib/dayjs"; export const ConversationCard = (props: { conversation: ConversationType }) => { const { conversation } = props; diff --git a/enjoy/src/renderer/components/recordings/recording-calendar.tsx b/enjoy/src/renderer/components/recordings/recording-calendar.tsx index d2a63a4c..5fcb2899 100644 --- a/enjoy/src/renderer/components/recordings/recording-calendar.tsx +++ b/enjoy/src/renderer/components/recordings/recording-calendar.tsx @@ -6,11 +6,9 @@ import Calendar, { } from "react-activity-calendar"; import { AppSettingsProviderContext, useTheme } from "@renderer/context"; import { ScrollArea, Button } from "@renderer/components/ui"; -import i18next, { t } from "i18next"; -import dayjs, { Dayjs } from "dayjs"; -import "dayjs/locale/en"; -import "dayjs/locale/zh-cn"; -import localeData from "dayjs/plugin/localeData"; +import { t } from "i18next"; +import dayjs from "@renderer/lib/dayjs"; +import { Dayjs } from "dayjs"; import { Tooltip } from "react-tooltip"; const DEFAULT_THEME: ThemeInput = { @@ -24,9 +22,6 @@ export const RecordingCalendar = (props: { const { onSelectRange } = props; const { colorScheme } = useTheme(); - dayjs.extend(localeData); - dayjs.locale(i18next.resolvedLanguage?.toLowerCase() || "en"); - const [tab, setTab] = useState("lastYear"); const [range, setRange] = useState<[Dayjs, Dayjs]>([ dayjs().subtract(1, "year").add(1, "day"), @@ -136,7 +131,7 @@ export const RecordingCalendar = (props: { }), }} theme={DEFAULT_THEME} - colorScheme={colorScheme as 'light' | 'dark'} + colorScheme={colorScheme as "light" | "dark"} renderBlock={(block, activity) => React.cloneElement(block, { ...block.props, diff --git a/enjoy/src/renderer/components/recordings/recording-stats.tsx b/enjoy/src/renderer/components/recordings/recording-stats.tsx index 02ad4693..1307b917 100644 --- a/enjoy/src/renderer/components/recordings/recording-stats.tsx +++ b/enjoy/src/renderer/components/recordings/recording-stats.tsx @@ -8,7 +8,7 @@ import { CardContent, } from "@renderer/components/ui"; import { t } from "i18next"; -import dayjs from "dayjs"; +import dayjs from "@renderer/lib/dayjs"; export const RecordingStats = () => { return ( diff --git a/enjoy/src/renderer/components/videos/videos-table.tsx b/enjoy/src/renderer/components/videos/videos-table.tsx index 6c2ab856..8977a082 100644 --- a/enjoy/src/renderer/components/videos/videos-table.tsx +++ b/enjoy/src/renderer/components/videos/videos-table.tsx @@ -19,7 +19,7 @@ import { CheckCircleIcon, AudioWaveformIcon, } from "lucide-react"; -import dayjs from "dayjs"; +import dayjs from "@renderer/lib/dayjs"; import { secondsToTimestamp } from "@renderer/lib/utils"; import { Link } from "react-router-dom"; diff --git a/enjoy/src/renderer/lib/dayjs.ts b/enjoy/src/renderer/lib/dayjs.ts new file mode 100644 index 00000000..a01a4501 --- /dev/null +++ b/enjoy/src/renderer/lib/dayjs.ts @@ -0,0 +1,26 @@ +import dayjs from "dayjs"; +import "dayjs/locale/en"; +import "dayjs/locale/zh-cn"; +import utc from "dayjs/plugin/utc"; +import timezone from "dayjs/plugin/timezone"; +import localeData from "dayjs/plugin/localeData"; +import localizedFormat from "dayjs/plugin/localizedFormat"; +import relativeTime from "dayjs/plugin/relativeTime"; +import duration from "dayjs/plugin/duration"; +import i18next from "i18next"; + +dayjs.extend(localizedFormat); +dayjs.extend(duration); +dayjs.extend(relativeTime); +dayjs.extend(localeData); +dayjs.extend(utc); +dayjs.extend(timezone); + +dayjs.locale(i18next.resolvedLanguage?.toLowerCase() || "en"); +try { + dayjs.tz.setDefault(Intl.DateTimeFormat().resolvedOptions().timeZone); +} catch (e) { + dayjs.tz.guess(); +} + +export default dayjs; diff --git a/enjoy/src/renderer/lib/utils.ts b/enjoy/src/renderer/lib/utils.ts index f8fb8f7e..a8b51cc5 100644 --- a/enjoy/src/renderer/lib/utils.ts +++ b/enjoy/src/renderer/lib/utils.ts @@ -1,15 +1,8 @@ import { type ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; -import dayjs from "dayjs"; -import localizedFormat from "dayjs/plugin/localizedFormat"; -import relativeTime from "dayjs/plugin/relativeTime"; -import duration, { type DurationUnitType } from "dayjs/plugin/duration"; -import "dayjs/locale/en"; -import "dayjs/locale/zh-cn"; +import dayjs from "@renderer/lib/dayjs"; +import { type DurationUnitType } from "dayjs/plugin/duration"; import i18next, { t } from "i18next"; -dayjs.extend(localizedFormat); -dayjs.extend(duration); -dayjs.extend(relativeTime); import Chart from "chart.js/auto"; export function cn(...inputs: ClassValue[]) { @@ -58,7 +51,7 @@ export function formatDateTime(date: Date) { if (now.diff(then, "hour") === 0) { return then.fromNow(); - } else if (now.diff(then, "day") === 0) { + } else if (now.isSame(then, "day")) { return then.format("HH:mm"); } else if (now.diff(then, "year") === 0) { return then.format("MM/DD HH:mm"); diff --git a/enjoy/src/renderer/pages/profile.tsx b/enjoy/src/renderer/pages/profile.tsx index 11739469..c8cadbf3 100644 --- a/enjoy/src/renderer/pages/profile.tsx +++ b/enjoy/src/renderer/pages/profile.tsx @@ -8,7 +8,7 @@ import { AppSettingsProviderContext } from "@renderer/context"; import { Button } from "@renderer/components/ui"; import { ChevronLeftIcon } from "lucide-react"; import { useNavigate } from "react-router-dom"; -import dayjs from "dayjs"; +import dayjs from "@renderer/lib/dayjs"; import { t } from "i18next"; export default () => {