feat: update modal and sighting components for improved layout and timestamp display

This commit is contained in:
2025-12-23 12:41:25 +00:00
parent 3b7487da09
commit 9394793669
5 changed files with 40 additions and 11 deletions

View File

@@ -1,4 +1,4 @@
import { Stage, Layer, Image, Rect } from "react-konva";
import { Stage, Layer, Image, Rect, Text } from "react-konva";
import type { SightingType } from "../../../../utils/types";
import { useCreateVideoSnapshot } from "../../hooks/useCreateVideoSnapshot";
import { useEffect, useState } from "react";
@@ -96,6 +96,23 @@ const VideoFeed = ({ mostRecentSighting, isLoading, size, modeSetting, isModal =
))}
</Layer>
)}
<Layer>
<Rect
x={5}
y={0.955 * size.height}
width={size.width * 0.35}
height={30}
fill="rgba(255, 255, 255, 0.45)"
cornerRadius={5}
/>
<Text
text={`Overlay Mode: ${mode === 0 ? "None" : mode === 1 ? "Plate Highlight" : "Plate Track"}`}
x={10}
y={0.96 * size.height}
fontSize={16}
fill="#000000"
/>
</Layer>
</Stage>
</div>
);