From d98d575adbf082b611d3b2b80a5cb14c98ff84f6 Mon Sep 17 00:00:00 2001
From: Jacob Ellerbrock <113381905+jacobellerbrock@users.noreply.github.com>
Date: Sat, 26 Oct 2024 10:36:00 -0500
Subject: [PATCH] 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             |  1 +
 apps/web/src/app/live/page.tsx    | 50 +++++++++++++++++++++++++++++++
 packages/config/hackkit.config.ts |  3 ++
 pnpm-lock.yaml                    |  7 +++++
 4 files changed, 61 insertions(+)
 create mode 100644 apps/web/src/app/live/page.tsx

diff --git a/apps/web/package.json b/apps/web/package.json
index c2656115..eb19a435 100644
--- a/apps/web/package.json
+++ b/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",
diff --git a/apps/web/src/app/live/page.tsx b/apps/web/src/app/live/page.tsx
new file mode 100644
index 00000000..af728ee5
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/packages/config/hackkit.config.ts b/packages/config/hackkit.config.ts
index 0a925de9..d3b29c80 100644
--- a/packages/config/hackkit.config.ts
+++ b/packages/config/hackkit.config.ts
@@ -973,6 +973,9 @@ const publicRoutes = [
 	"/404",
 	"/bugreport",
 	"/faq",
+	"/live",
+	"/live/overlay",
+	"/api/live/announcement",
 ];
 
 export default c;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a3d2e369..60b4dc1e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -227,6 +227,9 @@ importers:
       gsap:
         specifier: ^3.12.5
         version: 3.12.5
+      hls.js:
+        specifier: ^1.5.17
+        version: 1.5.17
       jiti:
         specifier: ^1.21.6
         version: 1.21.6
@@ -9261,6 +9264,10 @@ packages:
       upper-case: 1.1.3
     dev: true
 
+  /hls.js@1.5.17:
+    resolution: {integrity: sha512-wA66nnYFvQa1o4DO/BFgLNRKnBTVXpNeldGRBJ2Y0SvFtdwvFKCbqa9zhHoZLoxHhZ+jYsj3aIBkWQQCPNOhMw==}
+    dev: false
+
   /hono@4.5.0:
     resolution: {integrity: sha512-ZbezypZfn4odyApjCCv+Fw5OgweBqRLA/EsMyc4FUknFvBJcBIKhHy4sqmD1rWpBc/3wUlaQ6tqOPjk36R1ckg==}
     engines: {node: '>=16.0.0'}