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 * 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 * 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 Co-authored-by: Christian Walker 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 --- 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 ( +
+
+ ); +} 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'}