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

added data-vjs-player and added 2/3 scaling wrapper in event.js

Browse Source
This commit is contained in:
Bernt Christian Egeland 2021-08-19 20:49:31 +02:00
parent c52423206b
commit a5e7ccfa75
2 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/VideoPlayer.jsx
View File

@ -87,7 +87,7 @@ export default function VideoPlayer({ children, options, seekOptions = {}, onRea
}, []); // eslint-disable-line react-hooks/exhaustive-deps }, []); // eslint-disable-line react-hooks/exhaustive-deps
return ( return (
<div className="md:w-2/3 sm:w-full m-auto"> <div data-vjs-player>
<video ref={playerRef} className="video-js vjs-default-skin" controls playsinline /> <video ref={playerRef} className="video-js vjs-default-skin" controls playsinline />
{children} {children}
</div> </div>

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

@ -119,21 +119,23 @@ export default function Event({ eventId }) {
{data.has_clip ? ( {data.has_clip ? (
<Fragment> <Fragment>
<Heading size="lg">Clip</Heading> <Heading size="lg">Clip</Heading>
<VideoPlayer <div className="md:w-2/3 sm:w-full m-auto">
options={{ <VideoPlayer
sources: [ options={{
{ sources: [
src: `${apiHost}/vod/event/${eventId}/index.m3u8`, {
type: 'application/vnd.apple.mpegurl', src: `${apiHost}/vod/event/${eventId}/index.m3u8`,
}, type: 'application/vnd.apple.mpegurl',
], },
poster: data.has_snapshot ],
? `${apiHost}/clips/${data.camera}-${eventId}.jpg` poster: data.has_snapshot
: `data:image/jpeg;base64,${data.thumbnail}`, ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
}} : `data:image/jpeg;base64,${data.thumbnail}`,
seekOptions={{ forward: 10, back: 5 }} }}
onReady={(player) => {}} seekOptions={{ forward: 10, back: 5 }}
/> onReady={(player) => {}}
/>
</div>
<div className="text-center"> <div className="text-center">
<Button <Button
className="mx-2" className="mx-2"