From f4d9419bb0c06d1afd65cd5bd389c3f882ee5891 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Sun, 2 Jul 2023 20:34:12 +0330
Subject: [PATCH] minor fix

---
 components/Modal/Link/LinkDetails.tsx | 93 +++++++++++++--------------
 lib/api/archive.ts                    |  4 +-
 2 files changed, 48 insertions(+), 49 deletions(-)

diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
index 6c4c741..c374aec 100644
--- a/components/Modal/Link/LinkDetails.tsx
+++ b/components/Modal/Link/LinkDetails.tsx
@@ -3,7 +3,7 @@ import {
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import Image from "next/image";
-// import ColorThief, { RGBColor } from "colorthief";
+import ColorThief, { RGBColor } from "colorthief";
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -53,47 +53,47 @@ export default function LinkDetails({ link }: Props) {
     );
   }, [collections]);
 
-  // const [colorPalette, setColorPalette] = useState<RGBColor[]>();
+  const [colorPalette, setColorPalette] = useState<RGBColor[]>();
 
-  // const colorThief = new ColorThief();
+  const colorThief = new ColorThief();
 
   const url = isValidUrl(link.url) ? new URL(link.url) : undefined;
 
-  // 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("");
+  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");
+  useEffect(() => {
+    const banner = document.getElementById("link-banner");
+    const bannerInner = document.getElementById("link-banner-inner");
 
-  //   if (colorPalette && banner && bannerInner) {
-  //     banner.style.background = `linear-gradient(to right, ${rgbToHex(
-  //       colorPalette[0][0],
-  //       colorPalette[0][1],
-  //       colorPalette[0][2]
-  //     )}, ${rgbToHex(
-  //       colorPalette[1][0],
-  //       colorPalette[1][1],
-  //       colorPalette[1][2]
-  //     )})`;
+    if (colorPalette && banner && bannerInner) {
+      banner.style.background = `linear-gradient(to right, ${rgbToHex(
+        colorPalette[0][0],
+        colorPalette[0][1],
+        colorPalette[0][2]
+      )}, ${rgbToHex(
+        colorPalette[1][0],
+        colorPalette[1][1],
+        colorPalette[1][2]
+      )})`;
 
-  //     bannerInner.style.background = `linear-gradient(to right, ${rgbToHex(
-  //       colorPalette[2][0],
-  //       colorPalette[2][1],
-  //       colorPalette[2][2]
-  //     )}, ${rgbToHex(
-  //       colorPalette[3][0],
-  //       colorPalette[3][1],
-  //       colorPalette[3][2]
-  //     )})`;
-  //   }
-  // }, [colorPalette]);
+      bannerInner.style.background = `linear-gradient(to right, ${rgbToHex(
+        colorPalette[2][0],
+        colorPalette[2][1],
+        colorPalette[2][2]
+      )}, ${rgbToHex(
+        colorPalette[3][0],
+        colorPalette[3][1],
+        colorPalette[3][2]
+      )})`;
+    }
+  }, [colorPalette]);
 
   const handleDownload = (format: "png" | "pdf") => {
     const path = `/api/archives/${link.collection.id}/${link.id}.${format}`;
@@ -133,19 +133,18 @@ export default function LinkDetails({ link }: Props) {
             id={"favicon-" + link.id}
             className="select-none mt-2 rounded-full shadow border-[3px] border-white bg-white aspect-square"
             draggable="false"
-            // onLoad={(e) => {
-            //   try {
-            //     const color = colorThief.getPalette(
-            //       e.target as HTMLImageElement,
-            //       4,
-            //       20
-            //     );
+            onLoad={(e) => {
+              try {
+                const color = colorThief.getPalette(
+                  e.target as HTMLImageElement,
+                  4
+                );
 
-            //     setColorPalette(color);
-            //   } catch (err) {
-            //     console.log(err);
-            //   }
-            // }}
+                setColorPalette(color);
+              } catch (err) {
+                console.log(err);
+              }
+            }}
             onError={(e) => {
               setImageError(true);
             }}
diff --git a/lib/api/archive.ts b/lib/api/archive.ts
index 077879e..546c76e 100644
--- a/lib/api/archive.ts
+++ b/lib/api/archive.ts
@@ -44,10 +44,10 @@ export default async function archive(
       });
     }
 
-    // await browser.close();
+    await browser.close();
   } catch (err) {
     console.log(err);
-    // await browser.close();
+    await browser.close();
   }
 }