Adding /live to website (#41)

* migrate from clerk user metadata * adds hackkit credits * Added text saying only accepted files are PDF. Might want to make it dynamic later (acmutsa#121) * Upgrade Next Safe Action (acmutsa#118) * fix registration default * Added "Presented by SWIVEL" * Update README.md * Fixed text overflow on user dashboard (#25) * Fixed text sizing in user dashboard * Formatted Project with Prettier * Revert "Fixed text overflow on user dashboard (#25)" (#26) This reverts commit ae09168. * fixes overflow * adds guilds * fixes schedule default * Add event location (acmutsa#124) * add event location * Prettier format * fixed xs screen size overriding all other sizes (#28) * updates bot name * updates user profile * updates media query size * Adding Team Section (#29) * meet the team page * color change to show cards * adjustments to card flip and mobile * Testing on build if rotating cards is laggy * Created team.json according to form/pictures as of 10/17 * Added all pictures * RowdyHacks X Team Section added * Prettier write * Updated organizer list as of 10/21 Improved responsive design * Added pictures for organizer list as of 10/21 * Prettier write * Prettier write * Updated pictures * Prettier write --------- Co-authored-by: Carter LaVigne <[email protected]> * Merging in new schedule enhancements (acmutsa#128) * schedule timeline initial styling * Timeline days added * add live pulsing effect * add little line * Bigger day headers * run prettier --------- Co-authored-by: joshuasilva414 <[email protected]> * updates from prod * Fix Hackathon Check-In Scanner (acmutsa#130) * fix admin link check * Satisfies User Settings w/ New Schema (acmutsa#112) * test update image * mobile optimize pass * I made cool schedule (#33) * Schedule timeline * Mobile optimizations * Prettier formatted * fix current event logic * fix current event display * adds survival guide * small event layout change * updates theming * updates settings * updates build command * Added sponsors section to the website (#37) * Improved hacker dashboard color palette and fixed font issues (#38) * Adding /live to broadcast livestream (#40) * Created live page * Added /live page * Added Stream to page * Updated lockfile * Briefly fixed errors * Prettier write --------- Co-authored-by: joshuasilva414 <[email protected]> Co-authored-by: Christian Walker <[email protected]> Co-authored-by: Joshua Silva <[email protected]> Co-authored-by: Liam Murray <[email protected]> Co-authored-by: Matthew Anderson <[email protected]> Co-authored-by: Christian Walker <[email protected]> Co-authored-by: Carter LaVigne <[email protected]>
acmutsa · Oct 26, 2024 · 3c27b7d · 3c27b7d
1 parent 32a0c1f
commit 3c27b7d
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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