From 4fcb1ea7ac5504b661fb64d814ae17b833f9023a Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 25 Aug 2025 12:33:17 -0600
Subject: [PATCH] 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                         | 14 +++++++++++---
 web/src/components/player/HlsVideoPlayer.tsx | 16 +++++++++-------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/frigate/api/media.py b/frigate/api/media.py
index 1b9b98a16..60110345f 100644
--- a/frigate/api/media.py
+++ b/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
-    return recording_clip(request, event.camera, event.start_time, end_ts)
+    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")
diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 7fde436ad..93f1da702 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/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