Add: wip post detail component
This commit is contained in:
parent
d7c3118405
commit
0a71f38cd2
GPG key ID:
583642324A1D2070
1 changed files with 308 additions and 0 deletions
308
frontend/src/components/partials/PostDetail.tsx
Normal file
308
frontend/src/components/partials/PostDetail.tsx
Normal file
|
|
@ -0,0 +1,308 @@
|
|||
import { useState, useRef, useEffect } from "react";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowLeft, ChevronDown, ChevronUp, Download } from "lucide-react";
|
||||
import { relativeTime, getFirstGrapheme } from "@/lib/utils";
|
||||
import { getFileUrl } from "@/services/api";
|
||||
import { Document, Page, pdfjs } from "react-pdf";
|
||||
import "react-pdf/dist/esm/Page/AnnotationLayer.css";
|
||||
import "react-pdf/dist/esm/Page/TextLayer.css";
|
||||
|
||||
// Import the worker as an asset with Vite
|
||||
import workerSrc from "pdfjs-dist/build/pdf.worker.min.mjs?url";
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
|
||||
|
||||
// For CMaps (if needed)
|
||||
const cMapsUrl = "pdfjs-dist/cmaps/";
|
||||
|
||||
interface PostDetailProps {
|
||||
post: {
|
||||
post_id: string;
|
||||
mature: boolean;
|
||||
title: {
|
||||
[key: string]: string;
|
||||
};
|
||||
description: {
|
||||
[key: string]: string;
|
||||
};
|
||||
creator: {
|
||||
[key: string]: string;
|
||||
};
|
||||
source_site: {
|
||||
name: string;
|
||||
};
|
||||
date: {
|
||||
[key: string]: string;
|
||||
};
|
||||
tags: string[];
|
||||
media: Array<{
|
||||
type: string;
|
||||
mimetype: string;
|
||||
hash: string;
|
||||
}>;
|
||||
};
|
||||
}
|
||||
|
||||
// Media Renderer component to render different media types
|
||||
const MediaRenderer = ({ item, index, alt }) => {
|
||||
const [numPages, setNumPages] = useState(null);
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
const [pdfError, setPdfError] = useState(false);
|
||||
const containerRef = useRef(null);
|
||||
const [width, setWidth] = useState(null);
|
||||
|
||||
// Update container width when it changes
|
||||
const updateWidth = () => {
|
||||
if (containerRef.current) {
|
||||
setWidth(containerRef.current.clientWidth);
|
||||
}
|
||||
};
|
||||
|
||||
// Setup resize listener
|
||||
useEffect(() => {
|
||||
updateWidth(); // Initial width
|
||||
window.addEventListener('resize', updateWidth);
|
||||
return () => window.removeEventListener('resize', updateWidth);
|
||||
}, []);
|
||||
|
||||
// Event handlers for react-pdf
|
||||
const onDocumentLoadSuccess = ({ numPages }) => {
|
||||
setNumPages(numPages);
|
||||
updateWidth(); // Update width after document loads
|
||||
};
|
||||
|
||||
const onDocumentLoadError = (error) => {
|
||||
console.error("Error loading PDF:", error);
|
||||
setPdfError(true);
|
||||
};
|
||||
|
||||
const changePage = (offset) => {
|
||||
const newPage = pageNumber + offset;
|
||||
if (newPage >= 1 && newPage <= numPages) {
|
||||
setPageNumber(newPage);
|
||||
}
|
||||
};
|
||||
|
||||
switch (item.type) {
|
||||
case "image":
|
||||
return (
|
||||
<img
|
||||
src={getFileUrl(item.hash) || "/placeholder.svg"}
|
||||
alt={alt}
|
||||
className="w-full h-auto rounded-lg object-contain"
|
||||
/>
|
||||
);
|
||||
case "video":
|
||||
return (
|
||||
<video
|
||||
src={getFileUrl(item.hash)}
|
||||
controls
|
||||
className="w-full h-auto rounded-lg object-contain"
|
||||
/>
|
||||
);
|
||||
case "pdf":
|
||||
return (
|
||||
<div className="flex flex-col items-center w-full" ref={containerRef}>
|
||||
{pdfError ? (
|
||||
<div className="flex flex-col items-center justify-center p-8 border-2 border-dashed border-gray-300 rounded-lg">
|
||||
<p className="mb-4 text-gray-500">Unable to display PDF in browser</p>
|
||||
<Button variant="outline" className="flex items-center">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
<a href={getFileUrl(item.hash)} download target="_blank" rel="noopener noreferrer">
|
||||
Download PDF
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-full overflow-auto border rounded-lg shadow-lg">
|
||||
<Document
|
||||
file={getFileUrl(item.hash)}
|
||||
onLoadSuccess={onDocumentLoadSuccess}
|
||||
onLoadError={onDocumentLoadError}
|
||||
loading={
|
||||
<div className="flex justify-center items-center py-12">
|
||||
<p>Loading PDF...</p>
|
||||
</div>
|
||||
}
|
||||
error={
|
||||
<div className="flex justify-center items-center py-12">
|
||||
<p>Error loading PDF</p>
|
||||
</div>
|
||||
}
|
||||
options={{
|
||||
cMapUrl: cMapsUrl,
|
||||
cMapPacked: true,
|
||||
}}
|
||||
>
|
||||
{width && <Page pageNumber={pageNumber} width={width} />}
|
||||
</Document>
|
||||
</div>
|
||||
{numPages > 0 && (
|
||||
<div className="flex items-center justify-center mt-4 space-x-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => changePage(-1)}
|
||||
disabled={pageNumber <= 1}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<span className="text-sm">
|
||||
Page {pageNumber} of {numPages}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => changePage(1)}
|
||||
disabled={pageNumber >= numPages}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center p-8 border-2 border-dashed border-gray-300 rounded-lg">
|
||||
<p className="mb-4 text-gray-500">Unsupported file format</p>
|
||||
<Button variant="outline" className="flex items-center">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
<a href={getFileUrl(item.hash)} download target="_blank" rel="noopener noreferrer">
|
||||
Download File
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export function PostDetail({ post }: PostDetailProps) {
|
||||
const navigate = useNavigate();
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
// Generate page title
|
||||
const pageTitle = post.title.content
|
||||
? post.title.content
|
||||
: (post.description.content.length > 24
|
||||
? post.description.content.substring(0, 24) + '...'
|
||||
: post.description.content);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{pageTitle} by {post.creator.name} from {post.source_site.name} | {__SITE_NAME__}
|
||||
</title>
|
||||
</Helmet>
|
||||
|
||||
{/* Back Button */}
|
||||
<div className="max-w-[90rem] mx-auto md:px-8 py-4">
|
||||
<Button variant="ghost" onClick={() => navigate(-1)} className="flex items-center">
|
||||
<ArrowLeft className="w-5 h-5 mr-2" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row max-w-[90rem] mx-auto pb-4 md:pb-8 px-4 md:px-8 gap-4 md:gap-8">
|
||||
{/* Main Content */}
|
||||
<div className="md:w-3/4">
|
||||
{/* Media Section */}
|
||||
<div className="flex flex-col items-center w-full max-w-4xl mx-auto">
|
||||
{post.media.length > 0 && (
|
||||
<div className="w-full">
|
||||
{/* First Media Item */}
|
||||
<div className="mb-4">
|
||||
<MediaRenderer
|
||||
item={post.media[0]}
|
||||
index={0}
|
||||
alt={`${post.title.content} - media 1`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Show All Button (Positioned Below) */}
|
||||
{!expanded && post.media.length > 1 && (
|
||||
<div className="w-full flex justify-center my-4">
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="px-4 py-2 shadow-lg rounded-lg"
|
||||
onClick={() => setExpanded(true)}
|
||||
>
|
||||
<ChevronDown className="mr-2 h-5 w-5" /> Show All
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Expanded Media List */}
|
||||
{expanded && (
|
||||
<div className="w-full flex flex-col items-center">
|
||||
{post.media.slice(1).map((item, index) => (
|
||||
<div key={index} className="mb-4">
|
||||
<MediaRenderer
|
||||
item={item}
|
||||
index={index + 1}
|
||||
alt={`${post.title.content} - media ${index + 2}`}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Close Button */}
|
||||
<div className="w-full flex justify-center mb-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="bg-white text-black px-4 py-2 shadow-lg rounded-lg"
|
||||
onClick={() => setExpanded(false)}
|
||||
>
|
||||
<ChevronUp className="mr-2 h-5 w-5" /> Close
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Post Content */}
|
||||
<div className="bg-white dark:bg-gray-900 p-6 rounded-lg shadow dark:text-gray-100">
|
||||
<h1 className="text-3xl font-bold mb-3">{post.title.content}</h1>
|
||||
<p className="text-lg">{post.description.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="md:w-1/4">
|
||||
<div className="bg-white dark:bg-violet-950 p-5 rounded-lg shadow">
|
||||
<div className="flex flex-col items-center mb-5">
|
||||
<div className="flex items-center">
|
||||
<Avatar className="w-12 h-12 mr-4">
|
||||
{post.creator.avatar && <AvatarImage src={post.creator.avatar + "?t=sm"} />}
|
||||
<AvatarFallback>{getFirstGrapheme(post.creator.name)}</AvatarFallback>
|
||||
</Avatar>
|
||||
<h3 className="font-semibold text-lg">{post.creator.name}</h3>
|
||||
</div>
|
||||
<div className="flex flex-col mt-4">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Posted: {relativeTime(post.date.created)}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Imported: {relativeTime(post.date.imported)}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Tags: {post.tags.map((tag) => tag).join(", ")}
|
||||
</p>
|
||||
<p className={`text-sm ${post.mature ? 'text-red-500 dark:text-red-400' : 'text-gray-500'} dark:text-gray-400`}>
|
||||
Mature: {post.mature ? 'Yes' : 'No'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center mt-4">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue