From 6498ae794b59f677fc7f4814c9197bcc5d87da1d Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Mon, 26 Aug 2024 21:04:52 -0400
Subject: [PATCH] custom preview initial commit

---
 components/Drawer.tsx                         |  2 +-
 components/Modal.tsx                          |  2 +-
 .../ModalContent/EditCollectionModal.tsx      |  2 +-
 components/ModalContent/EditLinkModal.tsx     | 74 +++++++++++++------
 .../ModalContent/NewCollectionModal.tsx       |  2 +-
 components/ModalContent/NewLinkModal.tsx      |  2 +-
 components/ModalContent/UploadFileModal.tsx   |  2 +-
 public/locales/en/common.json                 |  4 +-
 8 files changed, 61 insertions(+), 29 deletions(-)

diff --git a/components/Drawer.tsx b/components/Drawer.tsx
index 12f931ec..07673fb1 100644
--- a/components/Drawer.tsx
+++ b/components/Drawer.tsx
@@ -40,7 +40,7 @@ export default function Drawer({
           <ClickAwayHandler
             onClickOutside={() => dismissible && setDrawerIsOpen(false)}
           >
-            <D.Content className="flex flex-col rounded-t-2xl min-h-max mt-24 fixed bottom-0 left-0 right-0 z-30 h-[90%]">
+            <D.Content className="flex flex-col rounded-t-2xl mt-24 fixed bottom-0 left-0 right-0 z-30 h-[90%]">
               <div
                 className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
                 data-testid="mobile-modal-container"
diff --git a/components/Modal.tsx b/components/Modal.tsx
index 2eb97e4a..7b7b5286 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -40,7 +40,7 @@ export default function Modal({
           <ClickAwayHandler
             onClickOutside={() => dismissible && setDrawerIsOpen(false)}
           >
-            <Drawer.Content className="flex flex-col rounded-t-2xl min-h-max mt-24 fixed bottom-0 left-0 right-0 z-30">
+            <Drawer.Content className="flex flex-col rounded-t-2xl h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-30">
               <div
                 className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
                 data-testid="mobile-modal-container"
diff --git a/components/ModalContent/EditCollectionModal.tsx b/components/ModalContent/EditCollectionModal.tsx
index e5f81daf..36f13f9e 100644
--- a/components/ModalContent/EditCollectionModal.tsx
+++ b/components/ModalContent/EditCollectionModal.tsx
@@ -97,7 +97,7 @@ export default function EditCollectionModal({
           <div className="w-full">
             <p className="mb-2">{t("description")}</p>
             <textarea
-              className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
+              className="w-full h-32 resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
               placeholder={t("collection_description_placeholder")}
               value={collection.description}
               onChange={(e) =>
diff --git a/components/ModalContent/EditLinkModal.tsx b/components/ModalContent/EditLinkModal.tsx
index fa338709..5640cea1 100644
--- a/components/ModalContent/EditLinkModal.tsx
+++ b/components/ModalContent/EditLinkModal.tsx
@@ -3,7 +3,10 @@ import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
 import TextInput from "@/components/TextInput";
 import unescapeString from "@/lib/client/unescapeString";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
 import Link from "next/link";
 import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
@@ -11,6 +14,8 @@ import { useUpdateLink } from "@/hooks/store/links";
 import toast from "react-hot-toast";
 import IconPicker from "../IconPicker";
 import { IconWeight } from "@phosphor-icons/react";
+import Image from "next/image";
+import { previewAvailable } from "@/lib/shared/getArchiveValidity";
 
 type Props = {
   onClose: Function;
@@ -137,31 +142,56 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
                 setLink({ ...link, description: e.target.value })
               }
               placeholder={t("link_description_placeholder")}
-              className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
+              className="resize-none w-full rounded-md p-2 h-32 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
             />
           </div>
 
           <div>
-            <IconPicker
-              hideDefaultIcon
-              color={link.color || "#0ea5e9"}
-              setColor={(color: string) => setLink({ ...link, color })}
-              weight={(link.iconWeight || "regular") as IconWeight}
-              setWeight={(iconWeight: string) =>
-                setLink({ ...link, iconWeight })
-              }
-              iconName={link.icon as string}
-              setIconName={(icon: string) => setLink({ ...link, icon })}
-              reset={() =>
-                setLink({
-                  ...link,
-                  color: "",
-                  icon: "",
-                  iconWeight: "",
-                })
-              }
-              alignment="-top-10 translate-x-20"
-            />
+            <p className="mb-2">{t("icon_and_preview")}</p>
+            <div className="flex gap-3">
+              <IconPicker
+                hideDefaultIcon
+                color={link.color || "#0ea5e9"}
+                setColor={(color: string) => setLink({ ...link, color })}
+                weight={(link.iconWeight || "regular") as IconWeight}
+                setWeight={(iconWeight: string) =>
+                  setLink({ ...link, iconWeight })
+                }
+                iconName={link.icon as string}
+                setIconName={(icon: string) => setLink({ ...link, icon })}
+                reset={() =>
+                  setLink({
+                    ...link,
+                    color: "",
+                    icon: "",
+                    iconWeight: "",
+                  })
+                }
+                alignment="-top-10 translate-x-20"
+              />
+
+              {previewAvailable(link) ? (
+                <Image
+                  src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
+                  width={1280}
+                  height={720}
+                  alt=""
+                  className="object-cover h-20 w-32 rounded-lg opacity-80"
+                  onError={(e) => {
+                    const target = e.target as HTMLElement;
+                    target.style.display = "none";
+                  }}
+                />
+              ) : link.preview === "unavailable" ? (
+                <div className="bg-gray-50 duration-100 h-20 w-32 bg-opacity-80 rounded-lg flex flex-col justify-center">
+                  <p className="text-black text-sm text-center">
+                    {t("preview_unavailable")}
+                  </p>
+                </div>
+              ) : (
+                <div className="duration-100 h-20 w-32 bg-opacity-80 skeleton rounded-lg"></div>
+              )}
+            </div>
           </div>
         </div>
       </div>
diff --git a/components/ModalContent/NewCollectionModal.tsx b/components/ModalContent/NewCollectionModal.tsx
index 292a8d00..191086a2 100644
--- a/components/ModalContent/NewCollectionModal.tsx
+++ b/components/ModalContent/NewCollectionModal.tsx
@@ -113,7 +113,7 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
           <div className="w-full">
             <p className="mb-2">{t("description")}</p>
             <textarea
-              className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
+              className="w-full h-32 resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
               placeholder={t("collection_description_placeholder")}
               value={collection.description}
               onChange={(e) =>
diff --git a/components/ModalContent/NewLinkModal.tsx b/components/ModalContent/NewLinkModal.tsx
index 63ea4c27..f0030e4c 100644
--- a/components/ModalContent/NewLinkModal.tsx
+++ b/components/ModalContent/NewLinkModal.tsx
@@ -169,7 +169,7 @@ export default function NewLinkModal({ onClose }: Props) {
                     setLink({ ...link, description: e.target.value })
                   }
                   placeholder={t("link_description_placeholder")}
-                  className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
+                  className="resize-none w-full h-32 rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
                 />
               </div>
             </div>
diff --git a/components/ModalContent/UploadFileModal.tsx b/components/ModalContent/UploadFileModal.tsx
index c1f851fe..ca78a309 100644
--- a/components/ModalContent/UploadFileModal.tsx
+++ b/components/ModalContent/UploadFileModal.tsx
@@ -207,7 +207,7 @@ export default function UploadFileModal({ onClose }: Props) {
                   setLink({ ...link, description: e.target.value })
                 }
                 placeholder={t("description_placeholder")}
-                className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
+                className="resize-none w-full h-32 rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
               />
             </div>
           </div>
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index e5141481..3a890cab 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -385,5 +385,7 @@
   "show": "Show",
   "image": "Image",
   "icon": "Icon",
-  "date": "Date"
+  "date": "Date",
+  "preview_unavailable": "Preview Unavailable",
+  "icon_and_preview": "Icon & Preview"
 }
\ No newline at end of file