fix: desktop: fallback to web max preview size if http server is unav…

…ailable

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@filen/web",
 	"private": false,
-	"version": "0.1.55",
+	"version": "0.1.56",
 	"type": "module",
 	"description": "Filen Web & Desktop app",
 	"scripts": {

src/components/dialogs/previewDialog/index.tsx

@@ -12,7 +12,7 @@ import { Loader as LoaderIcon, X, Save, ArrowLeft, ArrowRight, Eye } from "lucid
 import { showConfirmDialog } from "../confirm"
 import { uploadFile } from "@/lib/worker/worker"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
-import { TOOLTIP_POPUP_DELAY, IS_APPLE_DEVICE, IS_DESKTOP, MAX_PREVIEW_SIZE, MAX_PREVIEW_SIZE_WEB } from "@/constants"
+import { TOOLTIP_POPUP_DELAY, IS_APPLE_DEVICE, IS_DESKTOP, MAX_PREVIEW_SIZE_DESKTOP, MAX_PREVIEW_SIZE_WEB } from "@/constants"
 import { useTranslation } from "react-i18next"
 import { v4 as uuidv4 } from "uuid"
 import { showInputDialog } from "../input"
@@ -30,7 +30,7 @@ import useLocation from "@/hooks/useLocation"
 import { cn, isValidFileName } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import useErrorToast from "@/hooks/useErrorToast"
-import worker from "@/lib/worker"
+import useIsDesktopHTTPServerOnline from "@/hooks/useIsDesktopHTTPServerOnline"
 
 const goToPreviewTypes = ["audio", "docx", "image", "pdf"]
 
@@ -75,6 +75,7 @@ export const PreviewDialog = memo(() => {
 	const [driveSortBy] = useLocalStorage<DriveSortBy>("driveSortBy", {})
 	const location = useLocation()
 	const errorToast = useErrorToast()
+	const isDesktopHTTPServerOnline = useIsDesktopHTTPServerOnline()
 
 	const itemsOrdered = useMemo(() => {
 		if (!open) {
@@ -262,8 +263,13 @@ export const PreviewDialog = memo(() => {
 			}
 
 			const previewType = fileNameToPreviewType(itm.name)
+			const maxPreviewSize = IS_DESKTOP
+				? isDesktopHTTPServerOnline
+					? MAX_PREVIEW_SIZE_DESKTOP
+					: MAX_PREVIEW_SIZE_WEB
+				: MAX_PREVIEW_SIZE_WEB
 
-			if (previewType === "other" || itm.size >= MAX_PREVIEW_SIZE) {
+			if (previewType === "other" || itm.size >= maxPreviewSize) {
 				return
 			}
 
@@ -273,46 +279,36 @@ export const PreviewDialog = memo(() => {
 					IS_DESKTOP &&
 					isFileStreamable(itm.name, itm.mime)
 				) {
-					const isDesktopHTTPOnline = await worker.httpHealthCheck({
-						url: "http://localhost:61034/ping",
-						expectedStatusCode: 200,
-						method: "GET",
-						timeout: 5000
-					})
-
-					if (isDesktopHTTPOnline) {
-						const fileBase64 = Buffer.from(
-							JSON.stringify({
-								name: itm.name,
-								mime: itm.mime,
-								size: itm.size,
-								uuid: itm.uuid,
-								bucket: itm.bucket,
-								key: itm.key,
-								version: itm.version,
-								chunks: itm.chunks,
-								region: itm.region
-							}),
-							"utf-8"
-						).toString("base64")
-
-						setURLObjects(prev => ({
-							...prev,
-							[itm.uuid]: `http://localhost:61034/stream?file=${encodeURIComponent(fileBase64)}`
-						}))
-
-						return
-					}
+					const fileBase64 = Buffer.from(
+						JSON.stringify({
+							name: itm.name,
+							mime: itm.mime,
+							size: itm.size,
+							uuid: itm.uuid,
+							bucket: itm.bucket,
+							key: itm.key,
+							version: itm.version,
+							chunks: itm.chunks,
+							region: itm.region
+						}),
+						"utf-8"
+					).toString("base64")
 
-					if (itm.size >= MAX_PREVIEW_SIZE_WEB) {
-						return
-					}
+					setURLObjects(prev => ({
+						...prev,
+						[itm.uuid]: `http://localhost:61034/stream?file=${encodeURIComponent(fileBase64)}`
+					}))
+
+					return
 				}
 
 				const buffer = await readFileAndSanitize({ item: itm, emitEvents: false })
 
 				if (previewType === "text" || previewType === "docx" || previewType === "md" || previewType === "code") {
-					setBuffers(prev => ({ ...prev, [itm.uuid]: buffer }))
+					setBuffers(prev => ({
+						...prev,
+						[itm.uuid]: buffer
+					}))
 				} else {
 					setURLObjects(prev => ({
 						...prev,
@@ -325,7 +321,7 @@ export const PreviewDialog = memo(() => {
 				cleanup()
 			}
 		},
-		[cleanup]
+		[cleanup, isDesktopHTTPServerOnline]
 	)
 
 	const saveFile = useCallback(async () => {
@@ -353,7 +349,11 @@ export const PreviewDialog = memo(() => {
 
 			eventEmitter.emit("refetchDrive")
 
-			setBuffers(prev => ({ ...prev, [itm.uuid]: buffer }))
+			setBuffers(prev => ({
+				...prev,
+				[itm.uuid]: buffer
+			}))
+
 			setItem(itm)
 			setDidChange(false)
 		} catch (e) {
@@ -475,7 +475,10 @@ export const PreviewDialog = memo(() => {
 		setSaving(false)
 		setDidChange(false)
 		setItem(newTextFileItem)
-		setBuffers(prev => ({ ...prev, [newTextFileItem.uuid]: Buffer.from("", "utf8") }))
+		setBuffers(prev => ({
+			...prev,
+			[newTextFileItem.uuid]: Buffer.from("", "utf8")
+		}))
 		setOpen(true)
 	}, [
 		saving,

src/components/drive/list/item/contextMenu/index.tsx

@@ -48,12 +48,13 @@ import {
 } from "lucide-react"
 import useSuccessToast from "@/hooks/useSuccessToast"
 import { selectContacts } from "@/components/dialogs/selectContacts"
-import { MAX_PREVIEW_SIZE } from "@/constants"
+import { MAX_PREVIEW_SIZE_DESKTOP, MAX_PREVIEW_SIZE_WEB, IS_DESKTOP } from "@/constants"
 import { usePublicLinkURLState } from "@/hooks/usePublicLink"
 import { isValidFileName, isValidHexColor } from "@/lib/utils"
 import { v4 as uuidv4 } from "uuid"
 import { type WorkerToMainMessage } from "@/lib/worker/types"
 import Input from "@/components/input"
+import useIsDesktopHTTPServerOnline from "@/hooks/useIsDesktopHTTPServerOnline"
 
 const iconSize = 16
 
@@ -93,6 +94,7 @@ export const ContextMenu = memo(
 		const { passwordState: publicLinkPaswordState } = usePublicLinkStore()
 		const successToast = useSuccessToast()
 		const publicLinkURLState = usePublicLinkURLState()
+		const isDesktopHTTPServerOnline = useIsDesktopHTTPServerOnline()
 
 		const isInsidePublicLink = useMemo(() => {
 			return location.includes("/f/") || location.includes("/d/")
@@ -639,12 +641,17 @@ export const ContextMenu = memo(
 
 		const contextMenuContent = useMemo((): React.ReactNode => {
 			const groups: Record<string, React.ReactNode[]> = {}
+			const maxPreviewSize = IS_DESKTOP
+				? isDesktopHTTPServerOnline
+					? MAX_PREVIEW_SIZE_DESKTOP
+					: MAX_PREVIEW_SIZE_WEB
+				: MAX_PREVIEW_SIZE_WEB
 
 			if (
 				selectedItems.length === 1 &&
 				item.type === "file" &&
 				previewType !== "other" &&
-				MAX_PREVIEW_SIZE >= item.size &&
+				maxPreviewSize >= item.size &&
 				!selectedItemsContainUndecryptableItems
 			) {
 				if (!groups["download"]) {
@@ -997,7 +1004,8 @@ export const ContextMenu = memo(
 			copyId,
 			restore,
 			deletePermanently,
-			trash
+			trash,
+			isDesktopHTTPServerOnline
 		])
 
 		useEffect(() => {

src/components/drive/list/item/index.tsx

@@ -12,7 +12,7 @@ import { fileNameToThumbnailType, fileNameToPreviewType } from "@/components/dia
 import { cn } from "@/lib/utils"
 import { Heart, MoreHorizontal } from "lucide-react"
 import useMountedEffect from "@/hooks/useMountedEffect"
-import { THUMBNAIL_MAX_FETCH_SIZE, MAX_PREVIEW_SIZE } from "@/constants"
+import { THUMBNAIL_MAX_FETCH_SIZE, MAX_PREVIEW_SIZE_DESKTOP, MAX_PREVIEW_SIZE_WEB, IS_DESKTOP } from "@/constants"
 import { Badge } from "@/components/ui/badge"
 import { showConfirmDialog } from "@/components/dialogs/confirm"
 import { useDriveSharedStore, useDriveItemsStore } from "@/stores/drive.store"
@@ -27,6 +27,7 @@ import useDriveURLState from "@/hooks/useDriveURLState"
 import useDriveListColumnSize from "@/hooks/useDriveListColumnSize"
 import { useDoubleTap } from "use-double-tap"
 import useIsMobile from "@/hooks/useIsMobile"
+import useIsDesktopHTTPServerOnline from "@/hooks/useIsDesktopHTTPServerOnline"
 
 let draggedItems: DriveCloudItem[] = []
 
@@ -87,6 +88,7 @@ export const ListItem = memo(({ item, index, type }: { item: DriveCloudItem; ind
 	const listItemRef = useRef<HTMLDivElement>(null)
 	const driveListColumnSize = useDriveListColumnSize()
 	const isMobile = useIsMobile()
+	const isDesktopHTTPServerOnline = useIsDesktopHTTPServerOnline()
 
 	const previewType = useMemo(() => {
 		return fileNameToPreviewType(item.name)
@@ -109,7 +111,13 @@ export const ListItem = memo(({ item, index, type }: { item: DriveCloudItem; ind
 	}, [isInsidePublicLink, setPublicLinkSearch, setDriveSearch])
 
 	const onDoubleClick = useCallback(() => {
-		if (item.type === "file" && previewType !== "other" && MAX_PREVIEW_SIZE >= item.size) {
+		const maxPreviewSize = IS_DESKTOP
+			? isDesktopHTTPServerOnline
+				? MAX_PREVIEW_SIZE_DESKTOP
+				: MAX_PREVIEW_SIZE_WEB
+			: MAX_PREVIEW_SIZE_WEB
+
+		if (item.type === "file" && previewType !== "other" && maxPreviewSize >= item.size) {
 			eventEmitter.emit("openPreviewModal", { item })
 
 			return
@@ -152,7 +160,8 @@ export const ListItem = memo(({ item, index, type }: { item: DriveCloudItem; ind
 		setVirtualURL,
 		isInsidePublicLink,
 		navigating,
-		setSearch
+		setSearch,
+		isDesktopHTTPServerOnline
 	])
 
 	const onClick = useCallback(

src/constants.ts

@@ -41,12 +41,14 @@ export const UNCACHED_QUERY_KEYS = [
 	"networkDriveStats",
 	"isNetworkDriveMounted",
 	"isS3Online",
-	"isWebDAVOnline"
+	"isWebDAVOnline",
+	"useIsDesktopHTTPServerOnline"
 ]
 export const IS_INSIDE_PUBLIC_LINK_ON_LOAD =
 	typeof window !== "undefined" ? window.location.href.includes("/f/") || window.location.href.includes("/d/") : false
 export const MAX_PREVIEW_SIZE_WEB = 256 * MiB
-export const MAX_PREVIEW_SIZE = IS_DESKTOP ? Infinity : MAX_PREVIEW_SIZE_WEB
+export const MAX_PREVIEW_SIZE_DESKTOP = Infinity
+export const MAX_PREVIEW_SIZE = IS_DESKTOP ? MAX_PREVIEW_SIZE_DESKTOP : MAX_PREVIEW_SIZE_WEB
 export const VALID_LOCAL_PORT_RANGE = [1024, 65535]
 export const SIDEBAR_WIDTH = IS_DESKTOP && IS_APPLE_DEVICE ? 75 : 64
 export const DESKTOP_TOPBAR_HEIGHT = IS_DESKTOP ? (IS_APPLE_DEVICE ? 0 : 24) : 0
@@ -55,3 +57,4 @@ export const DESKTOP_CONFIG_VERSION = 4
 export const AUTHED_VERSION = 4
 export const MAX_CONCURRENT_UPLOADS = 16
 export const MAX_CONCURRENT_DOWNLOADS = 16
+export const DESKTOP_HTTP_SERVER_PORT = 61034

src/hooks/useIsDesktopHTTPServerOnline.tsx

@@ -0,0 +1,25 @@
+import worker from "@/lib/worker"
+import { useQuery } from "@tanstack/react-query"
+import { IS_DESKTOP, DESKTOP_HTTP_SERVER_PORT } from "@/constants"
+
+export default function useIsDesktopHTTPServerOnline(): boolean {
+	const query = useQuery({
+		queryKey: ["useIsDesktopHTTPServerOnline"],
+		queryFn: () =>
+			IS_DESKTOP
+				? worker.httpHealthCheck({
+						url: `http://localhost:${DESKTOP_HTTP_SERVER_PORT}/ping`,
+						expectedStatusCode: 200,
+						method: "GET",
+						timeout: 5000
+					})
+				: Promise.resolve(false),
+		refetchInterval: 5000,
+		refetchIntervalInBackground: true,
+		refetchOnMount: true,
+		refetchOnReconnect: true,
+		refetchOnWindowFocus: true
+	})
+
+	return query.isSuccess ? query.data : false
+}