Adding /live to broadcast livestream (#40)

* Created live page

* Added /live page

* Added Stream to page

* Updated lockfile

* Briefly fixed errors

* Prettier write

apps/web/package.json

@@ -59,6 +59,7 @@
     "embla-carousel-react": "8.1.7",
     "framer-motion": "^11.3.8",
     "gsap": "^3.12.5",
+    "hls.js": "^1.5.17",
     "jiti": "^1.21.6",
     "lucide-react": "^0.411.0",
     "nanoid": "^5.0.7",

apps/web/src/app/live/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+import React, { useEffect, useRef } from "react";
+import Hls from "hls.js";
+
+export default function LivePage() {
+	const streamUrl =
+		"https://82934cf9c8696bd2.mediapackage.us-east-1.amazonaws.com/out/v1/0909ac7915bf450da5267c52f49797cb/index.m3u8";
+
+	const videoRef = useRef(null);
+
+	useEffect(() => {
+		// Initialize HLS only if supported
+		if (Hls.isSupported()) {
+			const hls = new Hls();
+			hls.loadSource(streamUrl);
+			hls.attachMedia(videoRef.current!);
+
+			hls.on(Hls.Events.MANIFEST_PARSED, () => {
+				// TODO: WILL FIX LATER
+				// @ts-ignore
+				videoRef.current.play();
+			});
+
+			return () => {
+				hls.destroy();
+			};
+		} else {
+			// @ts-ignore
+			if (videoRef.current.canPlayType("application/vnd.apple.mpegurl")) {
+				// For Safari browsers where HLS is natively supported
+				// @ts-ignore
+				videoRef.current.src = streamUrl;
+				// @ts-ignore
+				videoRef.current.play();
+			}
+		}
+	}, [streamUrl]);
+
+	return (
+		<div>
+			<video
+				ref={videoRef}
+				controls
+				width="1920"
+				height="1080"
+				style={{ maxWidth: "100%" }}
+			/>
+		</div>
+	);
+}

packages/config/hackkit.config.ts

@@ -973,6 +973,9 @@ const publicRoutes = [
 	"/404",
 	"/bugreport",
 	"/faq",
+	"/live",
+	"/live/overlay",
+	"/api/live/announcement",
 ];
 
 export default c;