dank swag pop and lolz

This commit is contained in:
E 2021-03-07 21:58:36 -07:00
parent 91e26fe9fc
commit 9fe790ed9c
2 changed files with 47 additions and 27 deletions

View File

@ -23,16 +23,17 @@ export const Session = (props: Props) => {
const [active, setActive] = useState(false) const [active, setActive] = useState(false)
const handleStartSession = async () => { const handleStartSession = async () => {
await startSession(clientId)
message.loading('Photo sequence starting! Stand by...') message.loading('Photo sequence starting! Stand by...')
await startSession(clientId)
setActive(true) setActive(true)
} }
const handleRestartSession = async () => { const handleRestartSession = async () => {
setActive(false) setActive(false)
message.loading('Removing all photos...') message.loading(
'Deleting photos & restarting capture sequence! Stand by...',
)
await restartSession(clientId) await restartSession(clientId)
message.loading('Restarting capture sequence! Stand by...')
setActive(true) setActive(true)
} }
@ -42,6 +43,7 @@ export const Session = (props: Props) => {
const handleNuke = async () => { const handleNuke = async () => {
await killSession(clientId) await killSession(clientId)
message.success('Photos Deleted! Going back to dashboard')
history.push('/') history.push('/')
} }

View File

@ -1,9 +1,7 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { Card, Spin } from 'antd' import { Card, Modal, Spin } from 'antd'
import { getSession } from '../api' import { getSession } from '../api'
import { client } from '../data'
import settings from '../settings' import settings from '../settings'
import { url } from 'inspector'
type Props = { type Props = {
clientId: string clientId: string
@ -11,6 +9,7 @@ type Props = {
export const SessionPictures = ({ clientId }: Props) => { export const SessionPictures = ({ clientId }: Props) => {
const [urls, setUrls] = useState<string[] | null>(null) const [urls, setUrls] = useState<string[] | null>(null)
const [activeUrl, setActiveUrl] = useState<string | null>(null)
useEffect(() => { useEffect(() => {
const get = async () => { const get = async () => {
@ -20,36 +19,55 @@ export const SessionPictures = ({ clientId }: Props) => {
if (photos.length) setUrls(photos) if (photos.length) setUrls(photos)
} }
const interval = setInterval(get, 5000) const interval = setInterval(get, 250)
return () => clearInterval(interval) return () => clearInterval(interval)
}, [clientId, urls]) }, [clientId, urls])
const closeModal = () => setActiveUrl(null)
const host = settings.env === 'jank' ? 'http://192.168.1.107:5000' : '' const host = settings.env === 'jank' ? 'http://192.168.1.107:5000' : ''
if (!urls?.length) return null if (!urls?.length) return null
return ( return (
<div> <>
<h3>Session Pictures</h3> <Modal
<div className="photo-wall"> visible={!!activeUrl}
{urls ? ( onOk={closeModal}
urls cancelText={null}
.sort((a, b) => a.split('_')[0].localeCompare(b.split('_')[0])) onCancel={closeModal}
.map((src) => ( width="50%"
<Card className="photo" title={src.split('_')[0]}> >
<img <img
key={src} width="100%"
id={src} onClick={closeModal}
src={`${host}/output/${clientId}/${src}`} src={`${host}/output/${clientId}/${activeUrl}`}
alt="lol" alt="large image"
/> ></img>
</Card> </Modal>
)) <div>
) : ( <h3>Session Pictures</h3>
<Spin /> <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> </div>
</div> </>
) )
} }