administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-26 18:18:22 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #37 from ibs0d/codex/restore-grid-card-zoom-functionality

Browse Source 
Restore live grid card zoom at grid layout layer
This commit is contained in:
ibs0d 2026-03-09 14:16:00 +11:00 committed by GitHub
commit 8ba487c281
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 56 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/views/live/DraggableGridLayout.tsx
View File

@ -435,7 +435,7 @@ export default function DraggableGridLayout({
const [audioStates, setAudioStates] = useState<AudioState>({}); const [audioStates, setAudioStates] = useState<AudioState>({});
const [volumeStates, setVolumeStates] = useState<VolumeState>({}); const [volumeStates, setVolumeStates] = useState<VolumeState>({});
const [statsStates, setStatsStates] = useState<StatsState>({}); const [statsStates, setStatsStates] = useState<StatsState>({});
const [_cameraZoomStates, setCameraZoomStates] = useState< const [cameraZoomStates, setCameraZoomStates] = useState<
Record<string, CameraZoomRuntimeTransform> Record<string, CameraZoomRuntimeTransform>
>({}); >({});
const cameraZoomViewportRefs = useRef<Record<string, HTMLDivElement | null>>( const cameraZoomViewportRefs = useRef<Record<string, HTMLDivElement | null>>(
@ -779,6 +779,9 @@ export default function DraggableGridLayout({
const useWebGL = const useWebGL =
currentGroupStreamingSettings?.[camera.name] currentGroupStreamingSettings?.[camera.name]
?.compatibilityMode || false; ?.compatibilityMode || false;
const cameraZoomTransform =
cameraZoomStates[camera.name] ?? getDefaultZoomTransform();
return ( return (
<GridLiveContextMenu <GridLiveContextMenu
className="size-full" className="size-full"
@ -824,6 +827,13 @@ export default function DraggableGridLayout({
hydrateCameraZoomFromStorage(camera.name); hydrateCameraZoomFromStorage(camera.name);
}} }}
>
<div
className="size-full"
style={{
transform: `translate3d(${cameraZoomTransform.positionX}px, ${cameraZoomTransform.positionY}px, 0) scale(${cameraZoomTransform.scale})`,
transformOrigin: "top left",
}}
> >
<LivePlayer <LivePlayer
key={camera.name} key={camera.name}
@ -871,6 +881,7 @@ export default function DraggableGridLayout({
volume={volumeStates[camera.name]} volume={volumeStates[camera.name]}
/> />
</div> </div>
</div>
{isEditMode && showCircles && <CornerCircles />} {isEditMode && showCircles && <CornerCircles />}
</GridLiveContextMenu> </GridLiveContextMenu>
); );