1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
import { useMemo, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { useTranslation } from "@/lib/i18n/client";
import { BookmarkTypes, ZBookmark } from "@karakeep/shared/types/bookmarks";
import { getAssetUrl } from "@karakeep/shared/utils/assetUtils";
// 20 MB
const BIG_FILE_SIZE = 20 * 1024 * 1024;
function PDFContentSection({ bookmark }: { bookmark: ZBookmark }) {
if (bookmark.content.type != BookmarkTypes.ASSET) {
throw new Error("Invalid content type");
}
const { t } = useTranslation();
const initialSection = useMemo(() => {
if (bookmark.content.type != BookmarkTypes.ASSET) {
throw new Error("Invalid content type");
}
const screenshot = bookmark.assets.find(
(item) => item.assetType === "assetScreenshot",
);
const bigSize =
bookmark.content.size && bookmark.content.size > BIG_FILE_SIZE;
if (bigSize && screenshot) {
return "screenshot";
}
return "pdf";
}, [bookmark]);
const [section, setSection] = useState(initialSection);
const screenshot = bookmark.assets.find(
(r) => r.assetType === "assetScreenshot",
)?.id;
const content =
section === "screenshot" && screenshot ? (
<div className="relative h-full min-w-full">
<Image
alt="screenshot"
src={getAssetUrl(screenshot)}
fill={true}
className="object-contain"
/>
</div>
) : (
<iframe
title={bookmark.content.assetId}
className="h-full w-full"
src={getAssetUrl(bookmark.content.assetId)}
/>
);
return (
<div className="flex h-full flex-col items-center gap-2">
<div className="flex w-full items-center justify-center gap-4">
<Select onValueChange={setSection} value={section}>
<SelectTrigger className="w-fit">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="screenshot" disabled={!screenshot}>
{t("common.screenshot")}
</SelectItem>
<SelectItem value="pdf">PDF</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
{content}
</div>
);
}
function ImageContentSection({ bookmark }: { bookmark: ZBookmark }) {
if (bookmark.content.type != BookmarkTypes.ASSET) {
throw new Error("Invalid content type");
}
return (
<div className="relative h-full min-w-full">
<Link href={getAssetUrl(bookmark.content.assetId)} target="_blank">
<Image
alt="asset"
fill={true}
className="object-contain"
src={getAssetUrl(bookmark.content.assetId)}
/>
</Link>
</div>
);
}
export function AssetContentSection({ bookmark }: { bookmark: ZBookmark }) {
if (bookmark.content.type != BookmarkTypes.ASSET) {
throw new Error("Invalid content type");
}
switch (bookmark.content.assetType) {
case "image":
return <ImageContentSection bookmark={bookmark} />;
case "pdf":
return <PDFContentSection bookmark={bookmark} />;
default:
return <div>Unsupported asset type</div>;
}
}
|
