import { useState } from "react";
import { Pressable, View } from "react-native";
import ImageView from "react-native-image-viewing";
import WebView from "react-native-webview";
import { WebViewSourceUri } from "react-native-webview/lib/WebViewTypes";
import { Text } from "@/components/ui/Text";
import { useAssetUrl } from "@/lib/hooks";
import { api } from "@/lib/trpc";
import { useColorScheme } from "@/lib/useColorScheme";
import { BookmarkTypes, ZBookmark } from "@karakeep/shared/types/bookmarks";
import FullPageError from "../FullPageError";
import FullPageSpinner from "../ui/FullPageSpinner";
import BookmarkAssetImage from "./BookmarkAssetImage";
export function BookmarkLinkBrowserPreview({
bookmark,
}: {
bookmark: ZBookmark;
}) {
if (bookmark.content.type !== BookmarkTypes.LINK) {
throw new Error("Wrong content type rendered");
}
return (
);
}
export function BookmarkLinkReaderPreview({
bookmark,
}: {
bookmark: ZBookmark;
}) {
const { isDarkColorScheme: isDark } = useColorScheme();
const {
data: bookmarkWithContent,
error,
isLoading,
refetch,
} = api.bookmarks.getBookmark.useQuery({
bookmarkId: bookmark.id,
includeContent: true,
});
if (isLoading) {
return ;
}
if (error) {
return ;
}
if (bookmarkWithContent?.content.type !== BookmarkTypes.LINK) {
throw new Error("Wrong content type rendered");
}
return (
${bookmarkWithContent.content.htmlContent}
`,
}}
style={{
flex: 1,
backgroundColor: isDark ? "#000000" : "#ffffff",
}}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
decelerationRate={0.998}
/>
);
}
export function BookmarkLinkArchivePreview({
bookmark,
}: {
bookmark: ZBookmark;
}) {
const asset =
bookmark.assets.find((r) => r.assetType == "precrawledArchive") ??
bookmark.assets.find((r) => r.assetType == "fullPageArchive");
const assetSource = useAssetUrl(asset?.id ?? "");
if (!asset) {
return (
Asset has no offline archive
);
}
const webViewUri: WebViewSourceUri = {
uri: assetSource.uri!,
headers: assetSource.headers,
};
return (
);
}
export function BookmarkLinkScreenshotPreview({
bookmark,
}: {
bookmark: ZBookmark;
}) {
const asset = bookmark.assets.find((r) => r.assetType == "screenshot");
const assetSource = useAssetUrl(asset?.id ?? "");
const [imageZoom, setImageZoom] = useState(false);
if (!asset) {
return (
Asset has no screenshot
);
}
return (
setImageZoom(false)}
doubleTapToZoomEnabled={true}
images={[assetSource]}
/>
setImageZoom(true)}>
);
}