yashwin/VMS-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add camera intersection image loading

Browse Source
This commit is contained in:
NlightN22 2024-03-02 16:49:57 +07:00
parent ea48a538a5
commit 4100f731d1
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/shared/components/images/AutoUpdatedImage.tsx
View File

@ -66,7 +66,7 @@ const AutoUpdatedImage = ({
return ( return (
<Flex direction="column" justify="center" h="100%"> <Flex direction="column" justify="center" h="100%">
{enabled ? <Image ref={ref} src={imageSrc} alt="Dynamic Content" {...rest} /> {enabled ? <Image ref={ref} src={imageSrc} alt="Dynamic Content" {...rest} withPlaceholder />
: :
<Text align="center">Camera is disabled in config, no stream or snapshot available!</Text> <Text align="center">Camera is disabled in config, no stream or snapshot available!</Text>
} }

14
src/widgets/CameraCard.tsx
View File

@ -1,4 +1,6 @@
import { Button, Card, Flex, Grid, Group, Text, createStyles } from '@mantine/core'; import { Button, Card, Flex, Grid, Group, Text, createStyles } from '@mantine/core';
import { useIntersection } from '@mantine/hooks';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { recordingsPageQuery } from '../pages/RecordingsPage'; import { recordingsPageQuery } from '../pages/RecordingsPage';
import { routesPath } from '../router/routes.path'; import { routesPath } from '../router/routes.path';
@ -7,7 +9,6 @@ import { GetCameraWHostWConfig } from '../services/frigate.proxy/frigate.schema'
import AutoUpdatedImage from '../shared/components/images/AutoUpdatedImage'; import AutoUpdatedImage from '../shared/components/images/AutoUpdatedImage';
import { strings } from '../shared/strings/strings'; import { strings } from '../shared/strings/strings';
const useStyles = createStyles((theme) => ({ const useStyles = createStyles((theme) => ({
mainCard: { mainCard: {
display: 'flex', display: 'flex',
@ -40,11 +41,18 @@ interface CameraCardProps {
const CameraCard = ({ const CameraCard = ({
camera camera
}: CameraCardProps) => { }: CameraCardProps) => {
const [renderImage, setRenderImage] = useState<boolean>(false)
const { classes } = useStyles(); const { classes } = useStyles();
const { ref, entry } = useIntersection({ threshold: 0.5, })
const navigate = useNavigate() const navigate = useNavigate()
const hostName = mapHostToHostname(camera.frigateHost) const hostName = mapHostToHostname(camera.frigateHost)
const imageUrl = hostName ? proxyApi.cameraImageURL(hostName, camera.name) : '' //todo implement get URL from live cameras const imageUrl = hostName ? proxyApi.cameraImageURL(hostName, camera.name) : '' //todo implement get URL from live cameras
useEffect(() => {
if (entry?.isIntersecting)
setRenderImage(true)
}, [entry?.isIntersecting])
const handleOpenLiveView = () => { const handleOpenLiveView = () => {
const url = routesPath.LIVE_PATH.replace(':id', camera.id) const url = routesPath.LIVE_PATH.replace(':id', camera.id)
navigate(url) navigate(url)
@ -55,9 +63,11 @@ const CameraCard = ({
} }
return ( return (
<Grid.Col md={6} lg={3} p='0.2rem'> <Grid.Col md={6} lg={3} p='0.2rem'>
<Card h='100%' radius="lg" padding='0.5rem' className={classes.mainCard}> <Card ref={ref} h='100%' radius="lg" padding='0.5rem' className={classes.mainCard}>
<Text align='center' size='md' className={classes.headText} >{camera.name} / {camera.frigateHost?.name}</Text> <Text align='center' size='md' className={classes.headText} >{camera.name} / {camera.frigateHost?.name}</Text>
{!renderImage ? '' :
<AutoUpdatedImage onClick={handleOpenLiveView} enabled={camera.config?.enabled} imageUrl={imageUrl} /> <AutoUpdatedImage onClick={handleOpenLiveView} enabled={camera.config?.enabled} imageUrl={imageUrl} />
}
<Group <Group
className={classes.bottomGroup}> className={classes.bottomGroup}>
<Flex justify='space-evenly' mt='0.5rem' w='100%'> <Flex justify='space-evenly' mt='0.5rem' w='100%'>