diff --git a/.env b/.env index 3649f70..81e1238 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ VITE_BASEURL=http://192.168.75.11/ -VITE_CAM_BASE=http://100.72.72.70 +VITE_CAM_BASE=http://100.72.72.70:8080 VITE_FOLKESTONE_BASE=http://100.116.253.81 VITE_TESTURL=http://100.82.205.44/SightingListRear/sightingSummary?mostRecentRef=-1 VITE_OUTSIDE_BASEURL=http://100.82.205.44 diff --git a/src/components/CameraSettings/CameraSettings.tsx b/src/components/CameraSettings/CameraSettings.tsx index 3b0faf5..32c18a6 100644 --- a/src/components/CameraSettings/CameraSettings.tsx +++ b/src/components/CameraSettings/CameraSettings.tsx @@ -15,7 +15,7 @@ const CameraSettings = ({ title, side }: { title: string; side: string }) => { console.log(updateCameraConfigError); return ( - + {isPending && <>Loading camera config} {isError && <>Error fetching camera config}
diff --git a/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx b/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx index 2bd572e..463b3c7 100644 --- a/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx +++ b/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx @@ -1,16 +1,11 @@ import clsx from "clsx"; import Card from "../UI/Card"; -import CardHeader from "../UI/CardHeader"; -import { faCamera } from "@fortawesome/free-regular-svg-icons"; import { useSwipeable } from "react-swipeable"; import { useNavigate } from "react-router"; import { useOverviewVideo } from "../../hooks/useOverviewVideo"; import SightingOverview from "../SightingOverview/SightingOverview"; -import { useSightingFeedContext } from "../../context/SightingFeedContext"; -type CardProps = React.HTMLAttributes; - -const FrontCameraOverviewCard = ({ className }: CardProps) => { +const FrontCameraOverviewCard = () => { useOverviewVideo(); const navigate = useNavigate(); const handlers = useSwipeable({ @@ -18,23 +13,15 @@ const FrontCameraOverviewCard = ({ className }: CardProps) => { trackMouse: true, }); - const { mostRecent } = useSightingFeedContext(); return ( -
- +
- {/* */}
); diff --git a/src/components/FrontCameraSettings/OverviewVideoContainer.tsx b/src/components/FrontCameraSettings/OverviewVideoContainer.tsx index 207b2f6..90d8e61 100644 --- a/src/components/FrontCameraSettings/OverviewVideoContainer.tsx +++ b/src/components/FrontCameraSettings/OverviewVideoContainer.tsx @@ -14,7 +14,11 @@ const OverviewVideoContainer = ({ settingsPage?: boolean; }) => { return ( - +
diff --git a/src/components/PlateStack/NumberPlate.tsx b/src/components/PlateStack/NumberPlate.tsx index 56438f7..3e359fd 100644 --- a/src/components/PlateStack/NumberPlate.tsx +++ b/src/components/PlateStack/NumberPlate.tsx @@ -4,21 +4,53 @@ import { formatNumberPlate } from "../../utils/utils"; type NumberPlateProps = { vrm?: string | undefined; motion?: boolean; + size?: "xs" | "sm" | "md" | "lg"; }; -const NumberPlate = ({ motion, vrm }: NumberPlateProps) => { +const NumberPlate = ({ motion, vrm, size }: NumberPlateProps) => { + let options = { + plateWidth: "w-[14rem]", + textSize: "text-2xl", + borderWidth: "border-6", + }; + + switch (size) { + case "xs": + options = { + plateWidth: "w-[8rem]", + textSize: "text-md", + borderWidth: "border-4", + }; + break; + case "sm": + options = { + plateWidth: "w-[10rem]", + textSize: "text-lg", + borderWidth: "border-4", + }; + break; + case "lg": + options = { + plateWidth: "w-[16rem]", + textSize: "text-3xl", + borderWidth: "border-6", + }; + break; + } + return (
-

+

{vrm && formatNumberPlate(vrm)}

diff --git a/src/components/SightingOverview/SightingOverview.tsx b/src/components/SightingOverview/SightingOverview.tsx index 243bacf..9b24a15 100644 --- a/src/components/SightingOverview/SightingOverview.tsx +++ b/src/components/SightingOverview/SightingOverview.tsx @@ -1,10 +1,10 @@ import { useCallback, useRef, useState } from "react"; import { BLANK_IMG } from "../../utils/utils"; -import SightingWidgetDetails from "../SightingsWidget/SightingWidgetDetails"; import { useOverviewOverlay } from "../../hooks/useOverviewOverlay"; import { useSightingFeedContext } from "../../context/SightingFeedContext"; import { useHiDPICanvas } from "../../hooks/useHiDPICanvas"; import NavigationArrow from "../UI/NavigationArrow"; +import NumberPlate from "../PlateStack/NumberPlate"; const SightingOverview = () => { const [overlayMode, setOverlayMode] = useState<0 | 1 | 2>(0); @@ -27,42 +27,34 @@ const SightingOverview = () => { if (isError) return

An error occurred, Cannot display footage

; return ( -
-
- -
-
- { - sync(); - setOverlayMode((m) => m); - }} - src={mostRecent?.overviewUrl || BLANK_IMG} - alt="overview" - className="absolute inset-0 w-full h-full object-contain cursor-pointer z-10 " - onClick={onOverviewClick} - style={{ - display: mostRecent?.overviewUrl ? "block" : "none", - }} - /> - -
-
-
- Overlay:{" "} - {overlayMode === 0 - ? "Off" - : overlayMode === 1 - ? "Plate box" - : "Track + box"}{" "} - (click image to toggle) +
+ {mostRecent && ( +
+
+ )} + + +
+ { + sync(); + setOverlayMode((m) => m); + }} + src={mostRecent?.overviewUrl || BLANK_IMG} + alt="overview" + className="absolute inset-0 object-contain cursor-pointer z-10 min-h-[100%] rounded-lg" + onClick={onOverviewClick} + style={{ + display: mostRecent?.overviewUrl ? "block" : "none", + }} + /> +
-
); }; diff --git a/src/components/SightingsWidget/SightingWidget.tsx b/src/components/SightingsWidget/SightingWidget.tsx index 2ea925f..fcfd3b2 100644 --- a/src/components/SightingsWidget/SightingWidget.tsx +++ b/src/components/SightingsWidget/SightingWidget.tsx @@ -32,7 +32,7 @@ type SightingHistoryProps = { pollMs?: number; autoSelectLatest?: boolean; title: string; - className: string; + className?: string; }; export default function SightingHistoryWidget({ @@ -113,7 +113,12 @@ export default function SightingHistoryWidget({ }; return ( <> - +
{/* Rows */} diff --git a/src/components/UI/Card.tsx b/src/components/UI/Card.tsx index 0fee4bc..8a4663b 100644 --- a/src/components/UI/Card.tsx +++ b/src/components/UI/Card.tsx @@ -10,7 +10,7 @@ const Card = ({ children, className }: CardProps) => { return (
diff --git a/src/components/UI/CardHeader.tsx b/src/components/UI/CardHeader.tsx index 120df69..d39e675 100644 --- a/src/components/UI/CardHeader.tsx +++ b/src/components/UI/CardHeader.tsx @@ -5,7 +5,7 @@ import NumberPlate from "../PlateStack/NumberPlate"; import type { SightingType } from "../../types/types"; type CameraOverviewHeaderProps = { - title: string; + title?: string; icon?: IconProp; img?: string; sighting?: SightingType | null; diff --git a/src/hooks/useGetOverviewSnapshot.ts b/src/hooks/useGetOverviewSnapshot.ts index 66dcc7b..1cbaff0 100644 --- a/src/hooks/useGetOverviewSnapshot.ts +++ b/src/hooks/useGetOverviewSnapshot.ts @@ -1,8 +1,8 @@ import { useRef, useCallback, useEffect } from "react"; import { useQuery } from "@tanstack/react-query"; -import { CAM_BASE } from "../utils/config"; +import { OUTSIDE_CAM_BASE } from "../utils/config"; -const apiUrl = CAM_BASE; +const apiUrl = OUTSIDE_CAM_BASE; async function fetchSnapshot(cameraSide: string) { const response = await fetch(`${apiUrl}/${cameraSide}-preview`); diff --git a/src/main.tsx b/src/main.tsx index 258824d..7e0dfaf 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -13,7 +13,7 @@ Modal.setAppElement("#root"); createRoot(document.getElementById("root")!).render( - + diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index fa99529..cb81f39 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -1,34 +1,18 @@ import FrontCameraOverviewCard from "../components/FrontCameraOverview/FrontCameraOverviewCard"; -import RearCameraOverviewCard from "../components/RearCameraOverview/RearCameraOverviewCard"; import SightingHistoryWidget from "../components/SightingsWidget/SightingWidget"; import { SightingFeedProvider } from "../context/providers/SightingFeedProvider"; - -import { CAM_BASE } from "../utils/config"; +// import { OUTSIDE_CAM_BASE } from "../utils/config"; const Dashboard = () => { - const dev_REAR_URL = `${CAM_BASE}/SightingListRear/sightingSummary?mostRecentRef=`; - const dev_FRONT_URL = `${CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`; - - console.log(CAM_BASE); - + // const dev_OUTSIDE_URL = `${OUTSIDE_CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`; + const folkestone_OUTSIDE_URL = `http://100.116.253.81/mergedHistory/sightingSummary?mostRecentRef=`; return ( -
- - - - - - - - - -
+ +
+ + +
+ ); }; diff --git a/src/utils/config.ts b/src/utils/config.ts index 6665faa..3cd72f3 100644 --- a/src/utils/config.ts +++ b/src/utils/config.ts @@ -1,6 +1,7 @@ const rawCamBase = import.meta.env.VITE_CAM_BASE; - export const CAM_BASE = rawCamBase && rawCamBase.trim().length > 0 ? rawCamBase : window.location.origin; + +export const OUTSIDE_CAM_BASE = import.meta.env.VITE_OUTSIDE_BASEURL; diff --git a/vite.config.ts b/vite.config.ts index ce718e8..12e3e76 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -6,5 +6,5 @@ import tailwindcss from "@tailwindcss/vite"; export default defineConfig({ plugins: [react(), tailwindcss()], server: { host: true }, - base: "/InCarTest", + base: "/Mobile", });