140 lines
4.3 KiB
TypeScript
140 lines
4.3 KiB
TypeScript
import { useState } from "react";
|
|
import { useParams } from "react-router";
|
|
|
|
import Article from "~/components/common/article";
|
|
import LightBox, { useLightBox } from "~/components/biz/gallery/image-box";
|
|
import Comments from "~/components/shared/comment";
|
|
import { CupFill, ShareFill, ThumbUpFill } from "~/components/ui/icons";
|
|
import { useHydrated } from "~/hooks/use-hydrated";
|
|
import { siteTitle } from "~/utils";
|
|
import { getImageThumbUrl } from "~/utils/media";
|
|
|
|
import type { Route } from "./+types/note-detail";
|
|
|
|
const { APP_APIURL } = import.meta.env;
|
|
|
|
export function meta({ loaderData }: Route.MetaArgs) {
|
|
return [
|
|
{ title: loaderData ? siteTitle(loaderData.data.title) : "404" },
|
|
{ name: "description", content: loaderData?.data.except },
|
|
];
|
|
}
|
|
|
|
export async function loader({ params }: Route.LoaderArgs) {
|
|
if (Number.isNaN(Number(params.year)) || Number.isNaN(Number(params.id))) {
|
|
throw new Response("Not Found", { status: 404 });
|
|
}
|
|
|
|
const note = (await fetch(
|
|
`${APP_APIURL}/api/note/get?id=${params.id}&year=${params.year}`,
|
|
).then((res) => res.json())) as API.Response<API.Note.INoteData>;
|
|
|
|
if (note.status === "Failed") {
|
|
throw new Response("Not Found", { status: 404 });
|
|
}
|
|
|
|
return note;
|
|
}
|
|
|
|
export default function NoteDetail({ loaderData }: Route.ComponentProps) {
|
|
const note = loaderData;
|
|
const params = useParams();
|
|
const hydrated = useHydrated();
|
|
const { ref: mediaLightBoxRef, open: onShowMediaLightBox } = useLightBox();
|
|
|
|
const [likes, setLikes] = useState(note.data.likes);
|
|
|
|
const mediaList = note.data.media?.length
|
|
? note.data.media.map((item) => ({
|
|
...item,
|
|
thumb_url: item.thumb_url || getImageThumbUrl(item.url),
|
|
}))
|
|
: [];
|
|
|
|
const hasMedia = mediaList.length > 0;
|
|
const commentRef = `note-${params.year}-${params.id}`;
|
|
|
|
const onLike = () => {
|
|
setLikes((prevLike) => prevLike + 1);
|
|
};
|
|
|
|
const onShare = () => {
|
|
const shareData = {
|
|
title: note.data.title,
|
|
text: note.data.except,
|
|
url: `${location.protocol}//${location.host}${location.pathname}`,
|
|
};
|
|
|
|
if ("share" in navigator) {
|
|
navigator.share(shareData);
|
|
} else {
|
|
alert("当前操作系统尚未实现此 API");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main className="px-2 py-24 max-w-4xl mx-auto">
|
|
<section className="mb-12">
|
|
<h1
|
|
className="text-center text-5xl/tight md:text-7xl/tight mb-4"
|
|
style={{ viewTransitionName: `note-title-${note.data.id}` }}
|
|
>
|
|
{note.data.title}
|
|
</h1>
|
|
<p className="text-center opacity-60">{note.data.date}</p>
|
|
</section>
|
|
<section className="p-5 md:p-12 bg-white rounded-xl border-b-4 border-b-cyan-200 mb-16">
|
|
<Article html={note.data.content_html} />
|
|
{hasMedia && (
|
|
<div className="mt-8 flex flex-col gap-4">
|
|
{mediaList.map((media, index) => {
|
|
const isVideo = media.type === "mp4" || media.url.includes("mp4");
|
|
|
|
if (isVideo) {
|
|
return (
|
|
<video
|
|
key={media.id || media.url}
|
|
src={media.url}
|
|
controls
|
|
className="w-full rounded-xl cursor-pointer"
|
|
onClick={() => onShowMediaLightBox(index)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<img
|
|
key={media.id || media.url}
|
|
src={getImageThumbUrl(media.url)}
|
|
alt={media.title}
|
|
loading="lazy"
|
|
className="w-full rounded-xl cursor-pointer hover:opacity-90 transition-opacity"
|
|
onClick={() => onShowMediaLightBox(index)}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</section>
|
|
<section className="flex gap-16 items-center justify-center text-base md:text-lg mb-16">
|
|
<button onClick={onLike}>
|
|
<ThumbUpFill className="inline-block h-8 w-8 mr-2" />
|
|
{likes}
|
|
</button>
|
|
<button onClick={onShare}>
|
|
<ShareFill className="inline-block h-8 w-8 mr-2" />
|
|
分享
|
|
</button>
|
|
<button>
|
|
<CupFill className="inline-block h-8 w-8 mr-2" />
|
|
打赏
|
|
</button>
|
|
</section>
|
|
|
|
<Comments refs={commentRef} />
|
|
|
|
{hydrated && <LightBox ref={mediaLightBoxRef} list={mediaList} />}
|
|
</main>
|
|
);
|
|
}
|