132 lines
3.5 KiB
TypeScript
132 lines
3.5 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { Card, Modal, Row, Select, Typography } from 'antd'
|
|
import { getSession } from '../api'
|
|
import { ScrollToTop } from './ScrollToTop'
|
|
|
|
type Props = {
|
|
clientId: string
|
|
}
|
|
|
|
export const SessionPictures = ({ clientId }: Props) => {
|
|
const [urls, setUrls] = useState<string[] | null>(null)
|
|
const [activeUrl, setActiveUrl] = useState<string | null>(null)
|
|
const [focusPhotos, setFocusPhotos] = useState<string[]>(
|
|
JSON.parse(window.localStorage.getItem('focusPhotos') || '[]'),
|
|
)
|
|
|
|
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
|
|
|
|
const photos = urls.sort((a, b) =>
|
|
a.split('_')[0].localeCompare(b.split('_')[0]),
|
|
)
|
|
|
|
const u = urls.length / 89
|
|
|
|
const handleSelect = (v: string[]) => {
|
|
console.log('SEelcted', v)
|
|
window.localStorage.setItem('focusPhotos', JSON.stringify(v))
|
|
setFocusPhotos(v)
|
|
}
|
|
|
|
const filteredPhotos = photos.filter((name) => {
|
|
const num = name.split('_')[0]
|
|
return focusPhotos.includes(num)
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<Modal
|
|
visible={!!activeUrl}
|
|
onOk={closeModal}
|
|
footer={null}
|
|
onCancel={closeModal}
|
|
width="50%"
|
|
>
|
|
<img
|
|
width="100%"
|
|
onClick={closeModal}
|
|
src={`${host}/output/${clientId}/${activeUrl}`}
|
|
alt="large modal"
|
|
></img>
|
|
</Modal>
|
|
<Row
|
|
align="middle"
|
|
justify="space-around"
|
|
style={{ display: 'flex', width: '100%' }}
|
|
>
|
|
<Typography.Title style={{ margin: '0.5rem 1rem 0.7rem' }} level={3}>
|
|
Session Pictures
|
|
</Typography.Title>
|
|
<Typography.Text>{urls.length}/ 89 loaded</Typography.Text>
|
|
<Typography.Text>Select Featured Photos:</Typography.Text>
|
|
|
|
<Select
|
|
mode="multiple"
|
|
allowClear
|
|
placeholder="Please select featured"
|
|
style={{ width: '35%' }}
|
|
defaultValue={focusPhotos}
|
|
value={focusPhotos}
|
|
onChange={handleSelect}
|
|
>
|
|
{photos.map((name) => {
|
|
const val = name.split('_')[0]
|
|
return <Select.Option value={val}>{val}</Select.Option>
|
|
})}
|
|
</Select>
|
|
</Row>
|
|
|
|
<div className="loading-bar-container">
|
|
<div
|
|
className="loading-bar"
|
|
style={{
|
|
width: `${u * 100}%`,
|
|
background: `hsl(${Math.floor(u * 120)}, 90%, 70%)`,
|
|
}}
|
|
></div>
|
|
</div>
|
|
<div className="featured-photos" style={{ marginTop: '2rem' }}>
|
|
{filteredPhotos.map((src) => (
|
|
<img
|
|
onClick={() => setActiveUrl(src)}
|
|
src={`${host}/output/${clientId}/${src}`}
|
|
alt="lol"
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="photo-wall">
|
|
{photos.map((src) => (
|
|
<Card key={src} className="photo" title={src.split('_')[0]}>
|
|
<img
|
|
onClick={() => setActiveUrl(src)}
|
|
src={`${host}/output/${clientId}/${src}`}
|
|
alt="lol"
|
|
/>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
<ScrollToTop />
|
|
</>
|
|
)
|
|
}
|