administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-02 01:05:20 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

styling

Browse Source
This commit is contained in:
Bernt Christian Egeland 2021-08-23 20:01:44 +02:00
parent 0d490e6727
commit 378b743866
2 changed files with 33 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/index.css
View File

@ -38,7 +38,3 @@ Could not find a proper tailwind css.
.outer-max-width { .outer-max-width {
max-width: 60%; max-width: 60%;
} }
.aspect-ratio-box {
padding-top: calc(9 / 16 * 100%);
padding-bottom: 20%;
}

68
web/src/routes/Event.jsx
View File

@ -92,41 +92,39 @@ export default function Event({ eventId, close, scrollRef }) {
) : null} ) : null}
</div> </div>
<div className="outer-max-width m-auto"> <div className="outer-max-width m-auto">
<div className="aspect-ratio-box w-full relative"> <div className="w-full pt-5 relative pb-20">
<div className="absolute w-full top-10 left-0"> {data.has_clip ? (
{data.has_clip ? ( <Fragment>
<Fragment> <Heading size="lg">Clip</Heading>
<Heading size="lg">Clip</Heading> <VideoPlayer
<VideoPlayer options={{
options={{ sources: [
sources: [ {
{ src: `${apiHost}/vod/event/${eventId}/index.m3u8`,
src: `${apiHost}/vod/event/${eventId}/index.m3u8`, type: 'application/vnd.apple.mpegurl',
type: 'application/vnd.apple.mpegurl', },
}, ],
], poster: data.has_snapshot
poster: data.has_snapshot ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
? `${apiHost}/clips/${data.camera}-${eventId}.jpg` : `data:image/jpeg;base64,${data.thumbnail}`,
: `data:image/jpeg;base64,${data.thumbnail}`, }}
}} seekOptions={{ forward: 10, back: 5 }}
seekOptions={{ forward: 10, back: 5 }} onReady={() => {}}
onReady={() => {}} />
/> </Fragment>
</Fragment> ) : (
) : ( <Fragment>
<Fragment> <Heading size="sm">{data.has_snapshot ? 'Best Image' : 'Thumbnail'}</Heading>
<Heading size="sm">{data.has_snapshot ? 'Best Image' : 'Thumbnail'}</Heading> <img
<img src={
src={ data.has_snapshot
data.has_snapshot ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
? `${apiHost}/clips/${data.camera}-${eventId}.jpg` : `data:image/jpeg;base64,${data.thumbnail}`
: `data:image/jpeg;base64,${data.thumbnail}` }
} alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`} />
/> </Fragment>
</Fragment> )}
)}
</div>
</div> </div>
</div> </div>
</div> </div>