From 1a0a6adddcdba7039b8f84072f6896fca9cc08e1 Mon Sep 17 00:00:00 2001
From: Andrei Bas <bas.andrei@gmail.com>
Date: Thu, 19 Sep 2024 14:29:06 +0100
Subject: [PATCH] Add color names (not ideal, but something to start with at
 least)

---
 package-lock.json             | 11 +++++++++++
 package.json                  |  1 +
 src/components/video-feed.tsx |  5 ++++-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 91c0852..354c1fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@radix-ui/react-slot": "^1.1.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "color-2-name": "^1.4.4",
         "lucide-react": "^0.441.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -2521,6 +2522,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/color-2-name": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/color-2-name/-/color-2-name-1.4.4.tgz",
+      "integrity": "sha512-CSF+PANU5YSZYviiU88GJBeJADD4g9mydxLRMYtMEqVxhcLyl72b6PkMQnvomZyUZZLbPhfXs42QZcR0We4JOA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=14.0.0",
+        "npm": ">=6.0.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
diff --git a/package.json b/package.json
index 0df92a2..00f48c0 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "color-2-name": "^1.4.4",
     "lucide-react": "^0.441.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src/components/video-feed.tsx b/src/components/video-feed.tsx
index cb182b1..dbf64e8 100644
--- a/src/components/video-feed.tsx
+++ b/src/components/video-feed.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState, MouseEvent } from "react";
 import { Button } from "./ui/button";
 import { SwitchCamera } from "lucide-react";
+import { closest } from "color-2-name";
 
 function VideoFeed() {
   const videoRef = useRef<HTMLVideoElement | null>(null);
@@ -52,7 +53,8 @@ function VideoFeed() {
           1,
           1
         ).data;
-        const color = `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`;
+        let [r, g, b] = pixelData;
+        const color = `rgb(${r}, ${g}, ${b})`;
         setPixelColor(color);
       }
     }
@@ -119,6 +121,7 @@ function VideoFeed() {
           Pixel Coordinates: ({coordinates.x}, {coordinates.y})
         </p>
         <p className="mt-2">Pixel Color: {pixelColor}</p>
+        <p className="mt-2">Closest: {`${closest(pixelColor).name}`}</p>
       </div>
     </div>
   );