Fix: use local timezone as default (#615)

* use local timezone as default

* refactor code

* fix time display

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";
 

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;

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<string | number>("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,

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 (

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";
 

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;

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");

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 () => {