diff --git a/package.json b/package.json index 9ae163a..93cc5da 100644 --- a/package.json +++ b/package.json @@ -21,10 +21,12 @@ "clsx": "^2.1.1", "country-flag-icons": "^1.5.19", "formik": "^2.4.6", + "howler": "^2.2.4", "react": "^19.1.1", "react-dom": "^19.1.1", "react-modal": "^3.16.3", "react-router": "^7.8.0", + "react-sounds": "^1.0.25", "react-swipeable": "^7.0.2", "react-tabs": "^6.1.0", "react-use": "^17.6.0", diff --git a/public/NPED.jpg b/public/NPED.jpg deleted file mode 100644 index e189171..0000000 Binary files a/public/NPED.jpg and /dev/null differ diff --git a/public/NPED_Cat_A.png b/public/NPED_Cat_A.png deleted file mode 100644 index 43948fb..0000000 Binary files a/public/NPED_Cat_A.png and /dev/null differ diff --git a/public/NPED_Cat_A.svg b/public/NPED_Cat_A.svg index a080097..74c16c0 100644 --- a/public/NPED_Cat_A.svg +++ b/public/NPED_Cat_A.svg @@ -13,18 +13,16 @@ - + - - + - diff --git a/public/NPED_Cat_B.png b/public/NPED_Cat_B.png deleted file mode 100644 index d5da0de..0000000 Binary files a/public/NPED_Cat_B.png and /dev/null differ diff --git a/public/NPED_Cat_B.svg b/public/NPED_Cat_B.svg index 5df57f8..3f7b74a 100644 --- a/public/NPED_Cat_B.svg +++ b/public/NPED_Cat_B.svg @@ -14,18 +14,16 @@ - + - - + - diff --git a/public/NPED_Cat_C.png b/public/NPED_Cat_C.png deleted file mode 100644 index 9e52934..0000000 Binary files a/public/NPED_Cat_C.png and /dev/null differ diff --git a/public/NPED_Cat_C.svg b/public/NPED_Cat_C.svg index c894378..7555c52 100644 --- a/public/NPED_Cat_C.svg +++ b/public/NPED_Cat_C.svg @@ -12,18 +12,16 @@ - + - - + - diff --git a/src/App.tsx b/src/App.tsx index 9c644ee..e835576 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,7 +19,7 @@ function App() { } /> } /> } /> - {/* } /> */} + } /> diff --git a/src/components/HistoryList/AlertItem.tsx b/src/components/HistoryList/AlertItem.tsx index 3bfb7b8..abc4119 100644 --- a/src/components/HistoryList/AlertItem.tsx +++ b/src/components/HistoryList/AlertItem.tsx @@ -12,7 +12,6 @@ type AlertItemProps = { const AlertItem = ({ item }: AlertItemProps) => { const [isModalOpen, setIsModalOpen] = useState(false); const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY"; - const isNPEDHit = item?.metadata?.npedJSON?.status_code === 404; const isHotListHit = item?.metadata?.hotlistMatches?.Hotlist0 === true; const handleClick = () => { @@ -36,13 +35,7 @@ const AlertItem = ({ item }: AlertItemProps) => { className="h-20 object-contain rounded-md" /> )} - {isNPEDHit && ( - hotlistHit - )} +
MAKE: {item.make} MODEL: {item.model} diff --git a/src/components/SightingModal/SightingModal.tsx b/src/components/SightingModal/SightingModal.tsx index 2009926..861caf5 100644 --- a/src/components/SightingModal/SightingModal.tsx +++ b/src/components/SightingModal/SightingModal.tsx @@ -25,7 +25,7 @@ const SightingModal = ({ const handleAcknowledgeButton = () => { if (!sighting) { - toast.error("Cannot add sigthing to alert list"); + toast.error("Cannot add sighting to alert list"); handleClose(); return; } @@ -39,7 +39,6 @@ const SightingModal = ({ const isNPEDHitA = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "A"; const isNPEDHitB = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "B"; const isNPEDHitC = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "C"; - const isNPEDHitD = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "D"; return ( <> @@ -88,13 +87,6 @@ const SightingModal = ({ className="h-20 object-contain rounded-md" /> )} - {isNPEDHitD && ( - hotlistHit - )}
Date.now()); @@ -32,14 +33,12 @@ type SightingHistoryProps = { className: string; }; -// /type SightingHistoryWidgetProps = React.HTMLAttributes; - export default function SightingHistoryWidget({ className, title, }: SightingHistoryProps) { useNow(1000); - + const { play } = useSound("notification/notification"); const { sightings, setSelectedSighting, @@ -73,18 +72,18 @@ export default function SightingHistoryWidget({ const isNPEDHitC = obj?.metadata?.npedJSON?.["NPED CATEGORY"] === "C"; if (isNPEDHitA || isNPEDHitB || isNPEDHitC) { + play(); dispatch({ type: "ADD", payload: obj, }); } }); - }, [rows, dispatch]); + }, [rows, dispatch, play]); useEffect(() => { if (hasAutoOpenedRef.current) return; const firstHot = rows?.find((r) => { - // const hotlistHit = r?.metadata?.hotlistMatches?.Hotlist0 === true; const isNPEDHitA = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "A"; const isNPEDHitB = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "B"; const isNPEDHitC = r?.metadata?.npedJSON?.["NPED CATEGORY"] === "C"; @@ -92,10 +91,11 @@ export default function SightingHistoryWidget({ }); if (firstHot) { setSelectedSighting(firstHot); + play(); setSightingModalOpen(true); hasAutoOpenedRef.current = true; } - }, [rows, setSelectedSighting, setSightingModalOpen]); + }, [play, rows, setSelectedSighting, setSightingModalOpen]); const handleClose = () => { setSightingModalOpen(false); @@ -174,7 +174,6 @@ export default function SightingHistoryWidget({ className="h-20 object-contain rounded-md" /> )} -
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index a434b32..7bf11d3 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -4,12 +4,9 @@ import SightingHistoryWidget from "../components/SightingsWidget/SightingWidget" import { SightingFeedProvider } from "../context/providers/SightingFeedProvider"; import { CAM_BASE } from "../utils/config"; const Dashboard = () => { - // const AGX_url = import.meta.env.VITE_AGX_BOX_URL; - // const AGX_rear_url = import.meta.env.VITE_AGX_BOX_REAR_UR; - // const test = import.meta.env.VITE_LOCAL; const dev_REAR_URL = `${CAM_BASE}/SightingListRear/sightingSummary?mostRecentRef=`; const dev_FRONT_URL = `${CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`; - // const testFront = import.meta.env.VITE_LOCAL_FRONT; + console.log(CAM_BASE); return ( diff --git a/yarn.lock b/yarn.lock index 5e9fae3..76c7760 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1461,6 +1461,11 @@ hoist-non-react-statics@^3.3.0: dependencies: react-is "^16.7.0" +howler@^2.2.3, howler@^2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.4.tgz#bd3df4a4f68a0118a51e4bd84a2bfc2e93e6e5a1" + integrity sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w== + hyphenate-style-name@^1.0.3: version "1.1.0" resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz#1797bf50369588b47b72ca6d5e65374607cf4436" @@ -1915,6 +1920,13 @@ react-router@^7.8.0: cookie "^1.0.1" set-cookie-parser "^2.6.0" +react-sounds@^1.0.25: + version "1.0.25" + resolved "https://registry.yarnpkg.com/react-sounds/-/react-sounds-1.0.25.tgz#cc7b176d05c7b8ae8e476749246160c76d325a60" + integrity sha512-szyOayVjaTomED1MSQdcNw5gBxHffClR982sl3yxeUi3hmmfJZf0Q1+hneab7z8x4khM64bvlrF4VQltzyEjUg== + dependencies: + howler "^2.2.3" + react-swipeable@^7.0.2: version "7.0.2" resolved "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.2.tgz"