perf(hls): lazy-load hls.js so the chunk loads only when a tile mounts

hls.js is ~509 KB / ~157 KB gzip. Before this change ``HlsPlayer.jsx``
imported it statically at module top, so any route whose chunk pulled
in HlsPlayer (DashboardPage via CameraCard, plus TestHlsPage) paid the
full gzip cost as part of route resolution — even if the user had zero
cameras and never rendered a tile.

Move the import inside ``setupHls()`` (the existing async function in
the player's main useEffect). The module-level dependency is gone, so
the hls.js chunk no longer rides along with /dashboard's first paint.
It now downloads on the first ``HlsPlayer`` mount; the browser caches
it for the rest of the session.

Race handling: the useEffect cleanup flips a local ``cancelled`` flag
that the post-await branch checks before instantiating Hls. Without
this, navigating away from /dashboard while the chunk is still in
flight would leak an orphaned Hls instance.

Build numbers (1080p, prod build, gzip):

  Before:  /dashboard first paint = ~726 KB JS (index 62 + dashboard 6 +
                                                player 2 + hls 157 ≈ 727)
  After:   /dashboard first paint = ~221 KB JS (index 62 + dashboard 6 +
                                                player 2 + preload-helper 1)
                                    hls 157 KB loads async on first tile

Phase 2 item #3 from the tech-debt audit. No behaviour change for
end users beyond the perf win — same player code, same player events,
same Clerk-JWT xhrSetup.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: Sbussiso

frontend/src/components/HlsPlayer.jsx

@@ -1,7 +1,13 @@
 import { useEffect, useRef, useState } from "react"
-import Hls from "hls.js"
 import { useSharedToken } from "../hooks/useSharedToken.jsx"
 
+// hls.js is ~500 KB / ~155 KB gzipped. Static import would bloat the main
+// bundle on every route — including landing/pricing/security/docs which
+// never play video. Dynamic import below keeps it out until a HlsPlayer
+// actually mounts. The first video tile takes one extra round-trip to
+// fetch the chunk (cached thereafter); every other route gets a faster
+// first paint.
+
 // Set to true to connect directly to CloudNode on localhost:8080
 // Set to false to use backend proxy with authentication
 const LOCAL_TEST_MODE = import.meta.env.VITE_LOCAL_HLS === "true"
@@ -34,8 +40,23 @@ function HlsPlayer({ cameraId, cameraName }) {
         const API_URL = import.meta.env.VITE_API_URL || ""
         const ownOrigin = API_URL || window.location.origin
 
+        // Cancellation flag for the async chunk load below — if the
+        // component unmounts (or cameraId changes) while the dynamic
+        // import is still in flight, we must NOT proceed to instantiate
+        // an Hls that nobody will clean up. The cleanup function below
+        // flips this to true.
+        let cancelled = false
+
         const setupHls = async () => {
             try {
+                // Lazy-load hls.js. Vite splits it into its own chunk
+                // (see comment at top of file). After the first call in
+                // a session the browser cache serves the chunk
+                // instantly; the cost is one round-trip on the first
+                // video the user opens.
+                const { default: Hls } = await import("hls.js")
+                if (cancelled) return
+
                 const playlistUrl = LOCAL_TEST_MODE
                     ? `http://localhost:8080/hls/${cameraId}/stream.m3u8`
                     : `${API_URL}/api/cameras/${cameraId}/stream.m3u8`
@@ -189,6 +210,9 @@ function HlsPlayer({ cameraId, cameraName }) {
         setupHls()
 
         return () => {
+            // Block the late branch in setupHls (post-await) from running
+            // its setup if the dynamic import hasn't resolved yet.
+            cancelled = true
             if (stallRef.current) {
                 clearInterval(stallRef.current)
                 stallRef.current = null