parent
b0aec2cfd1
commit
0760c93ce4
7 changed files with 107 additions and 48 deletions
@ -1,34 +1,55 @@ |
|||||||
import { Spin } from 'antd' |
|
||||||
import React, { useEffect, useState } from 'react' |
import React, { useEffect, useState } from 'react' |
||||||
import { getClient } from '../api' |
import { Card, Spin } from 'antd' |
||||||
|
import { getSession } from '../api' |
||||||
|
import { client } from '../data' |
||||||
|
import settings from '../settings' |
||||||
|
import { url } from 'inspector' |
||||||
|
|
||||||
type Props = { |
type Props = { |
||||||
clientId: string |
clientId: string |
||||||
} |
} |
||||||
|
|
||||||
export const SessionPictures = ({ clientId }: Props) => { |
export const SessionPictures = ({ clientId }: Props) => { |
||||||
const [pics, setPics] = useState<string[] | null>(null) |
const [urls, setUrls] = useState<string[] | null>(null) |
||||||
|
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
const get = async () => { |
const get = async () => { |
||||||
if (pics) return |
if (urls) return |
||||||
const { photos } = await getClient(clientId) |
|
||||||
if (photos.length) setPics(photos) |
const { photos } = await getSession(clientId) |
||||||
|
if (photos.length) setUrls(photos) |
||||||
} |
} |
||||||
|
|
||||||
const interval = setInterval(get, 300) |
const interval = setInterval(get, 5000) |
||||||
|
|
||||||
return () => clearInterval(interval) |
return () => clearInterval(interval) |
||||||
}, [clientId, pics]) |
}, [clientId, urls]) |
||||||
|
|
||||||
|
const host = settings.env === 'jank' ? 'http://192.168.1.107:5000' : '' |
||||||
|
|
||||||
|
if (!urls?.length) return null |
||||||
|
|
||||||
return ( |
return ( |
||||||
<div> |
<div> |
||||||
<h3>Session Pictures</h3> |
<h3>Session Pictures</h3> |
||||||
{pics ? ( |
<div className="photo-wall"> |
||||||
pics.map((src) => <img id={src} src={src} alt="lol" />) |
{urls ? ( |
||||||
) : ( |
urls |
||||||
<Spin /> |
.sort((a, b) => a.split('_')[0].localeCompare(b.split('_')[0])) |
||||||
)} |
.map((src) => ( |
||||||
|
<Card className="photo" title={src.split('_')[0]}> |
||||||
|
<img |
||||||
|
key={src} |
||||||
|
id={src} |
||||||
|
src={`${host}/output/${clientId}/${src}`} |
||||||
|
alt="lol" |
||||||
|
/> |
||||||
|
</Card> |
||||||
|
)) |
||||||
|
) : ( |
||||||
|
<Spin /> |
||||||
|
)} |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
) |
) |
||||||
} |
} |
||||||
|
Loading…
Reference in new issue