269 lines
8.6 KiB
TypeScript
269 lines
8.6 KiB
TypeScript
import unescapeString from "@/lib/client/unescapeString";
|
|
import { readabilityAvailable } from "@/lib/shared/getArchiveValidity";
|
|
import isValidUrl from "@/lib/shared/isValidUrl";
|
|
import useLinkStore from "@/store/links";
|
|
import {
|
|
ArchivedFormat,
|
|
LinkIncludingShortenedCollectionAndTags,
|
|
} from "@/types/global";
|
|
import { faFolder, faLink } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import ColorThief, { RGBColor } from "colorthief";
|
|
import DOMPurify from "dompurify";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
type LinkContent = {
|
|
title: string;
|
|
content: string;
|
|
textContent: string;
|
|
length: number;
|
|
excerpt: string;
|
|
byline: string;
|
|
dir: string;
|
|
siteName: string;
|
|
lang: string;
|
|
};
|
|
|
|
type Props = {
|
|
link: LinkIncludingShortenedCollectionAndTags;
|
|
};
|
|
|
|
export default function ReadableView({ link }: Props) {
|
|
const [linkContent, setLinkContent] = useState<LinkContent>();
|
|
const [imageError, setImageError] = useState<boolean>(false);
|
|
const [colorPalette, setColorPalette] = useState<RGBColor[]>();
|
|
|
|
const colorThief = new ColorThief();
|
|
|
|
const router = useRouter();
|
|
|
|
const { links, getLink } = useLinkStore();
|
|
|
|
useEffect(() => {
|
|
const fetchLinkContent = async () => {
|
|
if (router.query.id && readabilityAvailable(link)) {
|
|
const response = await fetch(
|
|
`/api/v1/archives/${link?.id}?format=${ArchivedFormat.readability}`
|
|
);
|
|
|
|
const data = await response?.json();
|
|
|
|
setLinkContent(data);
|
|
}
|
|
};
|
|
|
|
fetchLinkContent();
|
|
}, [link]);
|
|
|
|
useEffect(() => {
|
|
if (link) getLink(link?.id as number);
|
|
|
|
let interval: any;
|
|
if (
|
|
link &&
|
|
(link?.screenshotPath === "pending" ||
|
|
link?.pdfPath === "pending" ||
|
|
link?.readabilityPath === "pending" ||
|
|
!link?.screenshotPath ||
|
|
!link?.pdfPath ||
|
|
!link?.readabilityPath)
|
|
) {
|
|
interval = setInterval(() => getLink(link.id as number), 5000);
|
|
} else {
|
|
if (interval) {
|
|
clearInterval(interval);
|
|
}
|
|
}
|
|
|
|
return () => {
|
|
if (interval) {
|
|
clearInterval(interval);
|
|
}
|
|
};
|
|
}, [link?.screenshotPath, link?.pdfPath, link?.readabilityPath]);
|
|
|
|
const rgbToHex = (r: number, g: number, b: number): string =>
|
|
"#" +
|
|
[r, g, b]
|
|
.map((x) => {
|
|
const hex = x.toString(16);
|
|
return hex.length === 1 ? "0" + hex : hex;
|
|
})
|
|
.join("");
|
|
|
|
useEffect(() => {
|
|
const banner = document.getElementById("link-banner");
|
|
const bannerInner = document.getElementById("link-banner-inner");
|
|
|
|
if (colorPalette && banner && bannerInner) {
|
|
if (colorPalette[0] && colorPalette[1]) {
|
|
banner.style.background = `linear-gradient(to bottom, ${rgbToHex(
|
|
colorPalette[0][0],
|
|
colorPalette[0][1],
|
|
colorPalette[0][2]
|
|
)}20, ${rgbToHex(
|
|
colorPalette[1][0],
|
|
colorPalette[1][1],
|
|
colorPalette[1][2]
|
|
)}20)`;
|
|
}
|
|
|
|
if (colorPalette[2] && colorPalette[3]) {
|
|
bannerInner.style.background = `linear-gradient(to bottom, ${rgbToHex(
|
|
colorPalette[2][0],
|
|
colorPalette[2][1],
|
|
colorPalette[2][2]
|
|
)}30, ${rgbToHex(
|
|
colorPalette[3][0],
|
|
colorPalette[3][1],
|
|
colorPalette[3][2]
|
|
)})30`;
|
|
}
|
|
}
|
|
}, [colorPalette]);
|
|
|
|
return (
|
|
<div className={`flex flex-col max-w-screen-md h-full mx-auto py-5`}>
|
|
<div
|
|
id="link-banner"
|
|
className="link-banner bg-opacity-10 border-neutral-content p-3 border mb-3"
|
|
>
|
|
<div id="link-banner-inner" className="link-banner-inner"></div>
|
|
|
|
<div className={`flex flex-col gap-3 items-start`}>
|
|
<div className="flex gap-3 items-start">
|
|
{!imageError && link?.url && (
|
|
<Image
|
|
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
|
|
width={42}
|
|
height={42}
|
|
alt=""
|
|
id={"favicon-" + link.id}
|
|
className="bg-white shadow rounded-md p-1 select-none mt-1"
|
|
draggable="false"
|
|
onLoad={(e) => {
|
|
try {
|
|
const color = colorThief.getPalette(
|
|
e.target as HTMLImageElement,
|
|
4
|
|
);
|
|
|
|
setColorPalette(color);
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
}}
|
|
onError={(e) => {
|
|
setImageError(true);
|
|
}}
|
|
/>
|
|
)}
|
|
<div className="flex flex-col">
|
|
<p className="text-xl">
|
|
{unescapeString(
|
|
link?.name || link?.description || link?.url || ""
|
|
)}
|
|
</p>
|
|
{link?.url ? (
|
|
<Link
|
|
href={link?.url || ""}
|
|
title={link?.url}
|
|
target="_blank"
|
|
className="hover:opacity-60 duration-100 break-all text-sm flex items-center gap-1 text-neutral w-fit"
|
|
>
|
|
<FontAwesomeIcon icon={faLink} className="w-4 h-4" />
|
|
|
|
{isValidUrl(link?.url || "")
|
|
? new URL(link?.url as string).host
|
|
: undefined}
|
|
</Link>
|
|
) : undefined}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-1 items-center flex-wrap">
|
|
<Link
|
|
href={`/collections/${link?.collection.id}`}
|
|
className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
|
|
>
|
|
<FontAwesomeIcon
|
|
icon={faFolder}
|
|
className="w-5 h-5 drop-shadow"
|
|
style={{ color: link?.collection.color }}
|
|
/>
|
|
<p
|
|
title={link?.collection.name}
|
|
className="text-lg truncate max-w-[12rem]"
|
|
>
|
|
{link?.collection.name}
|
|
</p>
|
|
</Link>
|
|
{link?.tags.map((e, i) => (
|
|
<Link key={i} href={`/tags/${e.id}`} className="z-10">
|
|
<p
|
|
title={e.name}
|
|
className="btn btn-xs btn-ghost truncate max-w-[19rem]"
|
|
>
|
|
#{e.name}
|
|
</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<p className="min-w-fit text-sm text-neutral">
|
|
{link?.createdAt
|
|
? new Date(link?.createdAt).toLocaleString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})
|
|
: undefined}
|
|
</p>
|
|
|
|
{link?.name ? <p>{unescapeString(link?.description)}</p> : undefined}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-5 h-full">
|
|
{link?.readabilityPath?.startsWith("archives") ? (
|
|
<div
|
|
className="line-break px-1 reader-view"
|
|
dangerouslySetInnerHTML={{
|
|
__html: DOMPurify.sanitize(linkContent?.content || "") || "",
|
|
}}
|
|
></div>
|
|
) : (
|
|
<div
|
|
className={`w-full h-full flex flex-col justify-center p-10 ${
|
|
link?.readabilityPath === "pending" || !link?.readabilityPath
|
|
? "skeleton"
|
|
: ""
|
|
}`}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
fill="currentColor"
|
|
className="w-1/4 min-w-[7rem] max-w-[15rem] h-auto mx-auto mb-5"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path d="m14.12 10.163 1.715.858c.22.11.22.424 0 .534L8.267 15.34a.598.598 0 0 1-.534 0L.165 11.555a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.66zM7.733.063a.598.598 0 0 1 .534 0l7.568 3.784a.3.3 0 0 1 0 .535L8.267 8.165a.598.598 0 0 1-.534 0L.165 4.382a.299.299 0 0 1 0-.535L7.733.063z" />
|
|
<path d="m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.598.598 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.659z" />
|
|
</svg>
|
|
<p className="text-center text-2xl">
|
|
The Link preservation is currently in the queue
|
|
</p>
|
|
<p className="text-center text-lg mt-2">
|
|
Please check back later to see the result
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|