feat: implement lazy loading for hls.js and enhance video player initialization

CHANGELOG.md

@@ -19,6 +19,7 @@
 - Updated chat runtime image to include ffmpeg/ffprobe for media duration probing on upload.
 - Rebuilt viewer, admin, and admin-login pages around custom semantic class structures with accessibility-focused landmarks, tab semantics, and keyboard-focus behavior.
 - Replaced legacy and Tailwind-based stylesheet rules with a custom design-token CSS system covering responsive layouts, forms, tables, and reduced-motion behavior.
+- Code-split `hls.js` via lazy loading in the viewer bootstrap to shrink the main frontend bundle and isolate stream playback logic into a dedicated chunk.
 
 ### Fixed
 

frontend/src/main.ts

@@ -1,6 +1,7 @@
-import Hls from "hls.js";
 import "./style.css";
 
+type HlsClass = typeof import("hls.js")["default"];
+
 declare global {
   interface Window {
     switchRoom: (room: string) => void;
@@ -9,7 +10,7 @@ declare global {
   }
 }
 
-let hls: Hls | null = null;
+let hls: InstanceType<HlsClass> | null = null;
 let ws: WebSocket | null = null;
 let currentRoom = "main";
 let username = "viewer" + Math.floor(Math.random() * 1000);
@@ -109,18 +110,26 @@ function addMessage(
   messages.scrollTop = messages.scrollHeight;
 }
 
-function initPlayerAndChat() {
+async function initPlayerAndChat() {
   const video = document.getElementById("player") as HTMLVideoElement;
   const manifestUrl = resolveManifestUrl();
 
+  if (video.canPlayType("application/vnd.apple.mpegurl")) {
+    video.src = manifestUrl;
+    video.addEventListener("loadedmetadata", () => video.play());
+  } else {
+    try {
+      const { default: Hls } = await import("hls.js");
       if (Hls.isSupported()) {
         hls = new Hls();
         hls.loadSource(manifestUrl);
         hls.attachMedia(video);
         hls.on(Hls.Events.MANIFEST_PARSED, () => video.play());
-  } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
+      }
-    video.src = manifestUrl;
+    } catch (error) {
-    video.addEventListener("loadedmetadata", () => video.play());
+      console.error("Failed to load HLS player", error);
+      addMessage("system", "Unable to initialize video player.");
+    }
   }
 
   connectWebSocket("main");
@@ -183,5 +192,5 @@ window.sendMessage = sendMessage;
 window.togglePrivateDM = togglePrivateDM;
 
 document.addEventListener("DOMContentLoaded", () => {
-  initPlayerAndChat();
+  void initPlayerAndChat();
 });

frontend/vite.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from "vite";
 export default defineConfig({
   envDir: "..",
   build: {
+    chunkSizeWarningLimit: 600,
     rollupOptions: {
       input: {
         main: "index.html",