Make Birdseye clickable (#18628)

* keep track of layout changes and publish on change

* websocket hook

* clickable overlay div to navigate to full camera view
This commit is contained in:
Josh Hawkins
2025-06-08 13:06:17 -05:00
committed by Blake Blackshear
parent 937459be47
commit 40ab7d6c38
6 changed files with 175 additions and 22 deletions

View File

@@ -13,6 +13,7 @@ type LivePlayerProps = {
liveMode: LivePlayerMode;
pip?: boolean;
containerRef: React.MutableRefObject<HTMLDivElement | null>;
playerRef?: React.MutableRefObject<HTMLDivElement | null>;
onClick?: () => void;
};
@@ -22,6 +23,7 @@ export default function BirdseyeLivePlayer({
liveMode,
pip,
containerRef,
playerRef,
onClick,
}: LivePlayerProps) {
let player;
@@ -76,7 +78,9 @@ export default function BirdseyeLivePlayer({
>
<div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent md:rounded-2xl"></div>
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent md:rounded-2xl"></div>
<div className="size-full">{player}</div>
<div className="size-full" ref={playerRef}>
{player}
</div>
</div>
);
}