-
Waiting for the telegram account to be initialized, please wait
+
+
Waiting for the telegram account to be initialized, please wait.
If it takes too long, please refresh the page or try again later.
diff --git a/web/src/components/file-extra.tsx b/web/src/components/file-extra.tsx
index 2d8e064..297b6ea 100644
--- a/web/src/components/file-extra.tsx
+++ b/web/src/components/file-extra.tsx
@@ -25,110 +25,141 @@ interface FileExtraProps {
rowHeight: RowHeight;
}
-export default function FileExtra({ file, rowHeight }: FileExtraProps) {
+function FileName({ file }: { file: TelegramFile }) {
+ if (!file.fileName) {
+ return null;
+ }
+ return (
+
+
+
+
+ {file.fileName}
+
+
+
+ );
+}
+
+function FileCaption({ file, rowHeight }: FileExtraProps) {
+ if (!file.caption) {
+ return null;
+ }
+ return (
+
+
+
+
+
+
+ "),
+ }}
+ >
+
+
+
+ );
+}
+
+function FilePath({ file }: { file: TelegramFile }) {
const [, copyToClipboard] = useCopyToClipboard();
+ if (!file.localPath) {
+ return null;
+ }
+ return (
+
+
+
+
+
copyToClipboard(file.localPath)}
+ >
+ {file.localPath.split("/").pop()}
+
+
+
{file.localPath}
+
+
+ );
+}
+
+function FileTime({ file }: { file: TelegramFile }) {
+ return (
+
+
+
+
+
+
+ {formatDistanceToNow(new Date(file.date * 1000), {
+ addSuffix: true,
+ })}
+
+
+
+
+
+ {`Message received at ${new Date(file.date * 1000).toLocaleString()}`}
+
+
+
+ {file.completionDate && (
+
+
+
+
+
+ {formatDistanceToNow(new Date(file.completionDate), {
+ addSuffix: true,
+ })}
+
+
+
+
+
+ {`File downloaded at ${new Date(file.completionDate).toLocaleString()}`}
+
+
+
+ )}
+
+ );
+}
+
+export default function FileExtra({ file, rowHeight }: FileExtraProps) {
+ if (rowHeight === "s") {
+ return (
+
+ {file.fileName ? : }
+
+ );
+ }
+
return (
- {file.fileName && (
-
-
-
-
- {file.fileName}
-
-
-
- )}
- {rowHeight !== "s" && file.caption && (
-
-
-
-
-
-
- "),
- }}
- >
-
-
-
- )}
- {rowHeight !== "s" && file.localPath && (
-
-
-
-
-
copyToClipboard(file.localPath)}
- >
- {file.localPath.split("/").pop()}
-
-
-
- {file.localPath}
-
-
-
- )}
- {rowHeight !== "s" && (
-
-
-
-
-
-
- {formatDistanceToNow(new Date(file.date * 1000), {
- addSuffix: true,
- })}
-
-
-
-
-
- {`Message received at ${new Date(file.date * 1000).toLocaleString()}`}
-
-
-
- {file.completionDate && (
-
-
-
-
-
- {formatDistanceToNow(new Date(file.completionDate), {
- addSuffix: true,
- })}
-
-
-
-
-
- {`File downloaded at ${new Date(file.completionDate).toLocaleString()}`}
-
-
-
- )}
-
);
diff --git a/web/src/hooks/use-file-speed.ts b/web/src/hooks/use-file-speed.ts
index 318fdd7..ae21029 100644
--- a/web/src/hooks/use-file-speed.ts
+++ b/web/src/hooks/use-file-speed.ts
@@ -14,9 +14,14 @@ export function useFileSpeed(fileId: number) {
lastTimestamp: 0,
});
- const [debounceSpeed] = useDebounce(downloadSpeed.speed, 1000, {
+ const [debounceSpeed] = useDebounce(downloadSpeed.speed, 300, {
leading: true,
- maxWait: 2000,
+ maxWait: 1000,
+ });
+
+ const [debounceProgress] = useDebounce(downloadProgress, 300, {
+ leading: true,
+ maxWait: 1000,
});
useEffect(() => {
@@ -94,7 +99,7 @@ export function useFileSpeed(fileId: number) {
}, []);
return {
- downloadProgress,
+ downloadProgress: debounceProgress,
downloadSpeed: debounceSpeed,
};
}
diff --git a/web/src/hooks/use-files.ts b/web/src/hooks/use-files.ts
index 12f730f..f06f755 100644
--- a/web/src/hooks/use-files.ts
+++ b/web/src/hooks/use-files.ts
@@ -8,7 +8,7 @@ import useSWRInfinite from "swr/infinite";
import { useWebsocket } from "@/hooks/use-websocket";
import { WebSocketMessageType } from "@/lib/websocket-types";
import useLocalStorage from "@/hooks/use-local-storage";
-import {useDebounce} from "use-debounce";
+import { useDebounce } from "use-debounce";
const DEFAULT_FILTERS: FileFilter = {
search: "",
@@ -31,6 +31,7 @@ export function useFiles(accountId: string, chatId: string) {
downloadStatus: DownloadStatus;
localPath: string;
completionDate: number;
+ downloadedSize: number;
}
>
>({});
@@ -76,6 +77,7 @@ export function useFiles(accountId: string, chatId: string) {
downloadStatus: DownloadStatus;
localPath: string;
completionDate: number;
+ downloadedSize: number;
};
setLatestFileStatus((prev) => ({
@@ -84,7 +86,10 @@ export function useFiles(accountId: string, chatId: string) {
downloadStatus:
data.downloadStatus ?? prev[data.fileId]?.downloadStatus,
localPath: data.localPath ?? prev[data.fileId]?.localPath,
- completionDate: data.completionDate ?? prev[data.fileId]?.completionDate,
+ completionDate:
+ data.completionDate ?? prev[data.fileId]?.completionDate,
+ downloadedSize:
+ data.downloadedSize ?? prev[data.fileId]?.downloadedSize,
},
}));
}, [lastJsonMessage]);
@@ -101,6 +106,8 @@ export function useFiles(accountId: string, chatId: string) {
localPath: latestFilesStatus[file.id]?.localPath ?? file.localPath,
completionDate:
latestFilesStatus[file.id]?.completionDate ?? file.completionDate,
+ downloadedSize:
+ latestFilesStatus[file.id]?.downloadedSize ?? file.downloadedSize,
});
});
});
diff --git a/web/src/hooks/use-websocket.tsx b/web/src/hooks/use-websocket.tsx
index 17fac6f..19363b4 100644
--- a/web/src/hooks/use-websocket.tsx
+++ b/web/src/hooks/use-websocket.tsx
@@ -17,6 +17,7 @@ import {
import { useToast } from "./use-toast";
import { useDebounce } from "use-debounce";
import { getWsUrl } from "@/lib/api";
+import { useParams } from "next/navigation";
const WS_URL = `${getWsUrl()}`;
@@ -39,6 +40,7 @@ interface WebSocketProviderProps {
export const WebSocketProvider: React.FC
= ({
children,
}) => {
+ const params = useParams();
const [isReady, setIsReady] = useState(false);
const [accountDownloadSpeed, setAccountDownloadSpeed] = useState({
speed: 0,
@@ -46,17 +48,20 @@ export const WebSocketProvider: React.FC = ({
lastTimestamp: 0,
});
const { toast } = useToast();
- const [debounceSpeed] = useDebounce(accountDownloadSpeed.speed, 1000, {
+ const [debounceSpeed] = useDebounce(accountDownloadSpeed.speed, 300, {
leading: true,
- maxWait: 2000,
+ maxWait: 1000,
});
const { sendMessage, lastJsonMessage, readyState } =
- useWebSocket(WS_URL, {
- shouldReconnect: (closeEvent) => true,
- reconnectAttempts: 3,
- reconnectInterval: 3000,
- });
+ useWebSocket(
+ `${WS_URL}?telegramId=${(params.accountId as string) ?? ""}`,
+ {
+ shouldReconnect: (closeEvent) => true,
+ reconnectAttempts: 3,
+ reconnectInterval: 3000,
+ },
+ );
const connectionStatus = {
[ReadyState.CONNECTING]: "Connecting",
@@ -106,7 +111,7 @@ export const WebSocketProvider: React.FC = ({
lastDownloadedSize: downloadedSize,
};
const timeDiff = (timestamp - prev.lastTimestamp) / 1000;
- if (prev.lastTimestamp === 0 || timeDiff <= 0) {
+ if (prev.lastTimestamp === 0 || timeDiff <= 0 || downloadedSize <= prev.lastDownloadedSize) {
return {
...state,
speed: prev.speed,