From 46752970b76dd73c8e3bb347bbfddffa4098f354 Mon Sep 17 00:00:00 2001
From: Sergey Krashevich <svk@svk.su>
Date: Fri, 7 Jul 2023 15:18:22 +0300
Subject: [PATCH] Add poster option to JSMpegPlayer for displaying a snapshot
 of the camera feed

---
 web/src/components/JSMpegPlayer.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/components/JSMpegPlayer.jsx b/web/src/components/JSMpegPlayer.jsx
index c77f2530d..c3c666957 100644
--- a/web/src/components/JSMpegPlayer.jsx
+++ b/web/src/components/JSMpegPlayer.jsx
@@ -6,12 +6,13 @@ import JSMpeg from '@cycjimmy/jsmpeg-player';
 export default function JSMpegPlayer({ camera, width, height }) {
   const playerRef = useRef();
   const url = `${baseUrl.replace(/^http/, 'ws')}live/jsmpeg/${camera}`;
+  const snapshot = `${baseUrl}api/${camera}/latest.jpg?h=${height}`;
 
   useEffect(() => {
     const video = new JSMpeg.VideoElement(
       playerRef.current,
       url,
-      {},
+      {poster: snapshot},
       {protocols: [], audio: false, videoBufferSize: 1024*1024*4}
     );
 
@@ -29,7 +30,7 @@ export default function JSMpegPlayer({ camera, width, height }) {
     return () => {
       video.destroy();
     };
-  }, [url]);
+  }, [snapshot, url]);
 
   return (
     <div ref={playerRef} class="jsmpeg" style={`max-height: ${height}px; max-width: ${width}px`} />