56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
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 [urls, setUrls] = useState<string[] | null>(null)
|
|
|
|
useEffect(() => {
|
|
const get = async () => {
|
|
if (urls) return
|
|
|
|
const { photos } = await getSession(clientId)
|
|
if (photos.length) setUrls(photos)
|
|
}
|
|
|
|
const interval = setInterval(get, 5000)
|
|
|
|
return () => clearInterval(interval)
|
|
}, [clientId, urls])
|
|
|
|
const host = settings.env === 'jank' ? 'http://192.168.1.107:5000' : ''
|
|
|
|
if (!urls?.length) return null
|
|
|
|
return (
|
|
<div>
|
|
<h3>Session Pictures</h3>
|
|
<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>
|
|
)
|
|
}
|