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.
79 lines
2.0 KiB
79 lines
2.0 KiB
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) |
|
|
|
useEffect(() => { |
|
const get = async () => { |
|
if (urls && urls.length >= 89 * 1) { |
|
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 modal" |
|
></img> |
|
</Modal> |
|
<PageHeader |
|
title="Session Pictures" |
|
subTitle={`${urls.length}/${89 * 1} loaded`} |
|
> |
|
<div className="loading-bar-container"> |
|
<div className="loading-bar"></div> |
|
</div> |
|
</PageHeader> |
|
<div className="photo-wall"> |
|
{urls ? ( |
|
urls |
|
.sort((a, b) => a.split('_')[0].localeCompare(b.split('_')[0])) |
|
.map((src) => ( |
|
<Card key={src} className="photo" title={src.split('_')[0]}> |
|
<img |
|
onClick={() => setActiveUrl(src)} |
|
src={`${host}/output/${clientId}/${src}`} |
|
alt="lol" |
|
/> |
|
</Card> |
|
)) |
|
) : ( |
|
<Spin /> |
|
)} |
|
</div> |
|
</> |
|
) |
|
}
|
|
|