85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { Card, message, Modal, PageHeader, Spin } from 'antd'
|
|
import { getSession } from '../api'
|
|
|
|
type Props = {
|
|
clientId: string
|
|
}
|
|
|
|
export const SessionPictures = ({ clientId }: Props) => {
|
|
const [urls, setUrls] = useState<string[] | null>(null)
|
|
const [activeUrl, setActiveUrl] = useState<string | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
const handleSync = async () => {
|
|
message.info('Syncing photos...')
|
|
const { photos } = await getSession(clientId)
|
|
if (photos.length) setUrls(photos)
|
|
}
|
|
|
|
useEffect(() => {
|
|
const get = async () => {
|
|
if (urls && urls.length >= 89 * 2) {
|
|
setLoading(false)
|
|
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 =
|
|
process.env.NODE_ENV === 'development' ? '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>
|
|
<PageHeader
|
|
title="Session Pictures"
|
|
subTitle={`${urls.length}/${89 * 2} loaded`}
|
|
></PageHeader>
|
|
<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>
|
|
</>
|
|
)
|
|
}
|