administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-05 10:45:21 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add hover functionality to Cameras component

Browse Source
This commit is contained in:
Sergey Krashevich 2023-07-07 14:01:55 +03:00
parent dd02958f7c
commit ca09f5d2d3
No known key found for this signature in database
GPG Key ID: 625171324E7D3856
1 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/routes/Cameras.jsx
View File

@ -2,12 +2,13 @@ import { h, Fragment } from 'preact';
import ActivityIndicator from '../components/ActivityIndicator';
import Card from '../components/Card';
import CameraImage from '../components/CameraImage';
import JSMpegPlayer from '../components/JSMpegPlayer';
import AudioIcon from '../icons/Audio';
import ClipIcon from '../icons/Clip';
import MotionIcon from '../icons/Motion';
import SnapshotIcon from '../icons/Snapshot';
import { useAudioState, useDetectState, useRecordingsState, useSnapshotsState } from '../api/ws';
import { useMemo } from 'preact/hooks';
import { useMemo, useState } from 'preact/hooks';
import useSWR from 'swr';
export default function Cameras() {
@ -99,13 +100,27 @@ function Camera({ name, config }) {
[config, audioValue, sendAudio, detectValue, sendDetect, recordValue, sendRecordings, snapshotValue, sendSnapshots]
);
const [isHovered, setIsHovered] = useState(false); // Add a state to track if the mouse is over the card
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
return (
<Card
buttons={buttons}
href={href}
header={cleanName}
icons={icons}
media={<CameraImage camera={name} stretch />}
//media={<CameraImage camera={name} stretch />}
media={isHovered ? <JSMpegPlayer camera={name} stretch /> : <CameraImage camera={name} stretch />} // Use the state to decide which component to render
onMouseEnter={handleMouseEnter} // Handle mouse enter event
onMouseLeave={handleMouseLeave} // Handle mouse leave event
/>
);
}