Unload HLS on unmount (#19747)

* Unload HLS player on unmount so segments don't continue to load

* Add query arg for event padding

frigate/api/media.py

@@ -1156,7 +1156,11 @@ def event_snapshot_clean(request: Request, event_id: str, download: bool = False
 
 
 @router.get("/events/{event_id}/clip.mp4")
-def event_clip(request: Request, event_id: str):
+def event_clip(
+    request: Request,
+    event_id: str,
+    padding: int = Query(0, description="Padding to apply to clip."),
+):
     try:
         event: Event = Event.get(Event.id == event_id)
     except DoesNotExist:
@@ -1169,8 +1173,12 @@ def event_clip(request: Request, event_id: str):
             content={"success": False, "message": "Clip not available"}, status_code=404
         )
 
-    end_ts = datetime.now().timestamp() if event.end_time is None else event.end_time
+    end_ts = (
-    return recording_clip(request, event.camera, event.start_time, end_ts)
+        datetime.now().timestamp()
+        if event.end_time is None
+        else event.end_time + padding
+    )
+    return recording_clip(request, event.camera, event.start_time - padding, end_ts)
 
 
 @router.get("/events/{event_id}/preview.gif")

web/src/components/player/HlsVideoPlayer.tsx

@@ -123,13 +123,6 @@ export default function HlsVideoPlayer({
       return;
     }
 
-    // we must destroy the hlsRef every time the source changes
-    // so that we can create a new HLS instance with startPosition
-    // set at the optimal point in time
-    if (hlsRef.current) {
-      hlsRef.current.destroy();
-    }
-
     hlsRef.current = new Hls({
       maxBufferLength: 10,
       maxBufferSize: 20 * 1000 * 1000,
@@ -138,6 +131,15 @@ export default function HlsVideoPlayer({
     hlsRef.current.attachMedia(videoRef.current);
     hlsRef.current.loadSource(currentSource.playlist);
     videoRef.current.playbackRate = currentPlaybackRate;
+
+    return () => {
+      // we must destroy the hlsRef every time the source changes
+      // so that we can create a new HLS instance with startPosition
+      // set at the optimal point in time
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+      }
+    }
   }, [videoRef, hlsRef, useHlsCompat, currentSource]);
 
   // state handling