centered image if no clips avail

This commit is contained in:
Bernt Christian Egeland 2021-08-22 18:15:06 +02:00
parent aa776d94f1
commit e96b8facff

View File

@ -82,12 +82,11 @@ export default function Event({ eventId, close }) {
/> />
) : null} ) : null}
</div> </div>
<div className="outer-max-width m-auto">
{data.has_clip ? ( <div className="aspect-ratio-box w-full relative">
<Fragment> <div className="absolute w-full top-10 left-0">
<div className="outer-max-width m-auto"> {data.has_clip ? (
<div className="aspect-ratio-box w-full relative"> <Fragment>
<div className="absolute w-full top-10 left-0">
<VideoPlayer <VideoPlayer
options={{ options={{
sources: [ sources: [
@ -103,23 +102,23 @@ export default function Event({ eventId, close }) {
seekOptions={{ forward: 10, back: 5 }} seekOptions={{ forward: 10, back: 5 }}
onReady={(player) => {}} onReady={(player) => {}}
/> />
</div> </Fragment>
</div> ) : (
<Fragment>
<Heading size="sm">{data.has_snapshot ? 'Best Image' : 'Thumbnail'}</Heading>
<img
src={
data.has_snapshot
? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
: `data:image/jpeg;base64,${data.thumbnail}`
}
alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
/>
</Fragment>
)}
</div> </div>
</Fragment> </div>
) : ( </div>
<Fragment>
<Heading size="sm">{data.has_snapshot ? 'Best Image' : 'Thumbnail'}</Heading>
<img
src={
data.has_snapshot
? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
: `data:image/jpeg;base64,${data.thumbnail}`
}
alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
/>
</Fragment>
)}
</div> </div>
); );
} }