Start work on adding meta data to images

This commit is contained in:
Lee 2022-11-17 05:59:53 +00:00
parent acfcba4d82
commit 50881fc943
No known key found for this signature in database
GPG Key ID: 6EA25896ECCB3121

@ -1,5 +1,6 @@
import { Button } from "@nextui-org/react"; import { Button } from "@nextui-org/react";
import moment from "moment/moment"; import moment from "moment/moment";
import { NextSeo } from "next-seo";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { getFileInfo } from "src/utils/helpers/fileHelpers"; import { getFileInfo } from "src/utils/helpers/fileHelpers";
@ -22,19 +23,24 @@ export default function File(props) {
size, size,
} = file; } = file;
const metaData = <NextSeo title={`${fileId}.${ext}`} />;
let toShow; let toShow;
if (!isValidFile) { if (!isValidFile) {
return ( return (
<div className="h-screen flex items-center justify-center"> <>
<div className="flex flex-col text-center items-center justify-center"> {metaData}
<h1 className="text-red-500 text-3xl mb-5">Invalid File</h1> <div className="h-screen flex items-center justify-center">
<Link href="/"> <div className="flex flex-col text-center items-center justify-center">
<Button auto className="bg-blue-600"> <h1 className="text-red-500 text-3xl mb-5">Invalid File</h1>
Go Home <Link href="/">
</Button> <Button auto className="bg-blue-600">
</Link> Go Home
</Button>
</Link>
</div>
</div> </div>
</div> </>
); );
} }
if (isValidFile) { if (isValidFile) {
@ -56,28 +62,35 @@ export default function File(props) {
} }
return ( return (
<div className="h-screen flex items-center justify-center"> <>
<div className="flex flex-col items-center justify-center"> {metaData}
<h1 className="font-bold text-lg"> <div className="h-screen flex items-center justify-center">
{originalFileName} ({fileId}.{ext}) <div className="flex flex-col items-center justify-center">
</h1> <h1 className="font-bold text-lg">
<h3>{moment(uploadDate).format("MMMM Do YYYY, h:mm:ss a")}</h3> {originalFileName} ({fileId}.{ext})
<h3> </h1>
Uploader: <span className="font-bold">{uploader.username}</span> -{" "} <h3>{moment(uploadDate).format("MMMM Do YYYY, h:mm:ss a")}</h3>
{formatBytes(size)} <h3>
</h3> Uploader: <span className="font-bold">{uploader.username}</span> -{" "}
<div className="md:w-4/6 md:h-4/6 sm:w-fit sm:h-fit mt-3">{toShow}</div> {formatBytes(size)}
<Button </h3>
auto <div className="md:max-w-[70%] sm:w-fit sm:h-fit mt-3 items-center justify-center">
className="bg-blue-600 mt-5" {toShow}
onPress={() => { </div>
downloadURI(fileUrl, `${fileId}.${ext}`); {!toShow ? (
}} <Button
> auto
Download className="bg-blue-600 mt-5"
</Button> onPress={() => {
downloadURI(fileUrl, `${fileId}.${ext}`);
}}
>
Download
</Button>
) : null}
</div>
</div> </div>
</div> </>
); );
} }