dank swag pop and lolz
This commit is contained in:
		| @@ -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('/') | ||||||
|   } |   } | ||||||
|  |  | ||||||
|   | |||||||
| @@ -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> |     </> | ||||||
|   ) |   ) | ||||||
| } | } | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user