You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.8 KiB
73 lines
1.8 KiB
import React, { useEffect, useState } from 'react' |
|
import { Card, Modal, Spin } from 'antd' |
|
import { getSession } from '../api' |
|
import settings from '../settings' |
|
|
|
type Props = { |
|
clientId: string |
|
} |
|
|
|
export const SessionPictures = ({ clientId }: Props) => { |
|
const [urls, setUrls] = useState<string[] | null>(null) |
|
const [activeUrl, setActiveUrl] = 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, 250) |
|
|
|
return () => clearInterval(interval) |
|
}, [clientId, urls]) |
|
|
|
const closeModal = () => setActiveUrl(null) |
|
|
|
const host = settings.env === 'jank' ? 'http://192.168.1.107:5000' : '' |
|
|
|
if (!urls?.length) return null |
|
|
|
return ( |
|
<> |
|
<Modal |
|
visible={!!activeUrl} |
|
onOk={closeModal} |
|
cancelText={null} |
|
onCancel={closeModal} |
|
width="50%" |
|
> |
|
<img |
|
width="100%" |
|
onClick={closeModal} |
|
src={`${host}/output/${clientId}/${activeUrl}`} |
|
alt="large image" |
|
></img> |
|
</Modal> |
|
<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 |
|
onClick={() => setActiveUrl(src)} |
|
key={src} |
|
id={src} |
|
src={`${host}/output/${clientId}/${src}`} |
|
alt="lol" |
|
/> |
|
</Card> |
|
)) |
|
) : ( |
|
<Spin /> |
|
)} |
|
</div> |
|
</div> |
|
</> |
|
) |
|
}
|
|
|