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 { 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 = { |
||||
clientId: string |
||||
} |
||||
|
||||
export const SessionPictures = ({ clientId }: Props) => { |
||||
const [pics, setPics] = useState<string[] | null>(null) |
||||
const [urls, setUrls] = useState<string[] | null>(null) |
||||
|
||||
useEffect(() => { |
||||
const get = async () => { |
||||
if (pics) return |
||||
const { photos } = await getClient(clientId) |
||||
if (photos.length) setPics(photos) |
||||
if (urls) return |
||||
|
||||
const { photos } = await getSession(clientId) |
||||
if (photos.length) setUrls(photos) |
||||
} |
||||
|
||||
const interval = setInterval(get, 300) |
||||
const interval = setInterval(get, 5000) |
||||
|
||||
return () => clearInterval(interval) |
||||
}, [clientId, pics]) |
||||
}, [clientId, urls]) |
||||
|
||||
const host = settings.env === 'jank' ? 'http://192.168.1.107:5000' : '' |
||||
|
||||
if (!urls?.length) return null |
||||
|
||||
return ( |
||||
<div> |
||||
<h3>Session Pictures</h3> |
||||
{pics ? ( |
||||
pics.map((src) => <img id={src} src={src} alt="lol" />) |
||||
) : ( |
||||
<Spin /> |
||||
)} |
||||
<div className="photo-wall"> |
||||
{urls ? ( |
||||
urls |
||||
.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> |
||||
) |
||||
} |
||||
|
Loading…
Reference in new issue