administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-18 22:28:23 +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

101
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"
@ -825,51 +828,59 @@ export default function DraggableGridLayout({
hydrateCameraZoomFromStorage(camera.name); hydrateCameraZoomFromStorage(camera.name);
}} }}
> >
<LivePlayer <div
key={camera.name} className="size-full"
streamName={streamName} style={{
autoLive={autoLive ?? globalAutoLive} transform: `translate3d(${cameraZoomTransform.positionX}px, ${cameraZoomTransform.positionY}px, 0) scale(${cameraZoomTransform.scale})`,
showStillWithoutActivity={ transformOrigin: "top left",
showStillWithoutActivity ?? true
}
alwaysShowCameraName={displayCameraNames}
useWebGL={useWebGL}
cameraRef={cameraRef}
className={cn(
"draggable-live-grid-mse-cover size-full rounded-lg bg-black md:rounded-2xl",
camera.ui?.rotate &&
"draggable-live-grid-rotated [--frigate-mse-grid-rotated:1] [--frigate-mse-grid-rotation:rotate(90deg)]",
isEditMode &&
showCircles &&
"outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing",
)}
windowVisible={
windowVisible && visibleCameras.includes(camera.name)
}
cameraConfig={camera}
preferredLiveMode={
preferredLiveModes[camera.name] ?? "mse"
}
playInBackground={false}
showStats={statsStates[camera.name] ?? true}
onClick={() => {
!isEditMode && onSelectCamera(camera.name);
}} }}
onError={(e) => { >
setPreferredLiveModes((prevModes) => { <LivePlayer
const newModes = { ...prevModes }; key={camera.name}
if (e === "mse-decode") { streamName={streamName}
delete newModes[camera.name]; autoLive={autoLive ?? globalAutoLive}
} showStillWithoutActivity={
return newModes; showStillWithoutActivity ?? true
}); }
}} alwaysShowCameraName={displayCameraNames}
onResetLiveMode={() => useWebGL={useWebGL}
resetPreferredLiveMode(camera.name) cameraRef={cameraRef}
} className={cn(
playAudio={audioStates[camera.name]} "draggable-live-grid-mse-cover size-full rounded-lg bg-black md:rounded-2xl",
volume={volumeStates[camera.name]} camera.ui?.rotate &&
/> "draggable-live-grid-rotated [--frigate-mse-grid-rotated:1] [--frigate-mse-grid-rotation:rotate(90deg)]",
isEditMode &&
showCircles &&
"outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing",
)}
windowVisible={
windowVisible && visibleCameras.includes(camera.name)
}
cameraConfig={camera}
preferredLiveMode={
preferredLiveModes[camera.name] ?? "mse"
}
playInBackground={false}
showStats={statsStates[camera.name] ?? true}
onClick={() => {
!isEditMode && onSelectCamera(camera.name);
}}
onError={(e) => {
setPreferredLiveModes((prevModes) => {
const newModes = { ...prevModes };
if (e === "mse-decode") {
delete newModes[camera.name];
}
return newModes;
});
}}
onResetLiveMode={() =>
resetPreferredLiveMode(camera.name)
}
playAudio={audioStates[camera.name]}
volume={volumeStates[camera.name]}
/>
</div>
</div> </div>
{isEditMode && showCircles && <CornerCircles />} {isEditMode && showCircles && <CornerCircles />}
</GridLiveContextMenu> </GridLiveContextMenu>