From 3c27b7db64e9fb8946da1596647705737d047139 Mon Sep 17 00:00:00 2001
From: Jacob Ellerbrock <113381905+jacobellerbrock@users.noreply.github.com>
Date: Sat, 26 Oct 2024 10:45:25 -0500
Subject: [PATCH] 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 (#121)

* Upgrade Next Safe Action (#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 ae09168f7bc8655913ea30cc01dc4d5b36db3cee.

* fixes overflow

* adds guilds

* fixes schedule default

* Add event location (#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 <carterlavigne3@gmail.com>

* Merging in new schedule enhancements (#128)

* schedule timeline initial styling

* Timeline days added

* add live pulsing effect

* add little line

* Bigger day headers

* run prettier

---------

Co-authored-by: joshuasilva414 <joshuasilva414@gmail.com>

* updates from prod

* Fix Hackathon Check-In Scanner (#130)

* fix admin link check

* Satisfies User Settings w/ New Schema (#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 <joshuasilva414@gmail.com>
Co-authored-by: Christian Walker <christiandwalker2021@gmail.com>
Co-authored-by: Joshua Silva <72359611+joshuasilva414@users.noreply.github.com>
Co-authored-by: Liam Murray <38444224+Lermatroid@users.noreply.github.com>
Co-authored-by: Matthew Anderson <92887765+mjanderson1227@users.noreply.github.com>
Co-authored-by: Christian Walker <76548772+christianhelp@users.noreply.github.com>
Co-authored-by: Carter LaVigne <carterlavigne3@gmail.com>
---
 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'}