From fcaa9d5f0028bfb6ae0280c86d6ae3d41f8fc43b Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Fri, 17 May 2024 22:49:53 -0700 Subject: [PATCH] feat: add zoom recording buttons to des24 --- .../components/Schedule/index.jsx | 77 ++++++++++++++----- 1 file changed, 57 insertions(+), 20 deletions(-) diff --git a/src/app/pages/Designathons/Designathon24/components/Schedule/index.jsx b/src/app/pages/Designathons/Designathon24/components/Schedule/index.jsx index a861cc07..3b750858 100644 --- a/src/app/pages/Designathons/Designathon24/components/Schedule/index.jsx +++ b/src/app/pages/Designathons/Designathon24/components/Schedule/index.jsx @@ -71,7 +71,8 @@ const FridaySchedule = () => { @@ -119,7 +120,10 @@ const FridaySchedule = () => {

Hosted by Commit the Change

- +
9:00 PM | Venue Closes
@@ -155,7 +159,10 @@ const FridaySchedule = () => {

- + ); @@ -234,7 +241,10 @@ const SaturdaySchedule = () => {

Hosted by Wenting Zhu

- +
@@ -361,7 +371,10 @@ const SaturdaySchedule = () => {

- +
@@ -415,7 +428,10 @@ const SaturdaySchedule = () => {

- +
9:00 PM | Venue Closes
@@ -542,7 +558,10 @@ const SundaySchedule = () => {

- +
@@ -585,7 +604,8 @@ const SundaySchedule = () => {
@@ -656,11 +676,14 @@ const DateToggle = ({ handleSelect, defaultDay }) => { ); }; -const ZoomButton = ({ date, eventType }) => { - const [isUpcoming, setIsUpcoming] = useState(date > new Date()); +const ZoomButton = ({ start, duration, eventType, recording }) => { + const [isUpcoming, setIsUpcoming] = useState(start > new Date()); + const [isOver, setIsOver] = useState(false); const handleClick = useCallback(() => { - if (!isUpcoming) { + if (isOver && recording) { + window.open(recording, "_blank"); + } else if (!isUpcoming) { window.open( eventType === "ceremony" ? "https://uci.zoom.us/j/92344530635" @@ -668,29 +691,43 @@ const ZoomButton = ({ date, eventType }) => { "_blank", ); } - }, [eventType, isUpcoming]); + }, [eventType, isOver, isUpcoming, recording]); useEffect(() => { const interval = setInterval(() => { - setIsUpcoming(date > new Date()); + setIsUpcoming(start > new Date()); + + const end = new Date(start.getTime() + duration * 60000); // minutes to milliseconds + + setIsOver(new Date() > end); }, 1000); return () => clearInterval(interval); - }, [date]); + }, [duration, start]); const buttonClassName = useMemo(() => { return clsx(cn.zoomButton, isUpcoming ? cn.beforeDate : cn.afterDate); }, [isUpcoming]); const buttonText = useMemo(() => { - return isUpcoming ? "Zoom Link Posted Soon" : "Join Zoom"; - }, [isUpcoming]); + return isOver + ? "Zoom Recording" + : isUpcoming + ? "Zoom Link Posted Soon" + : "Join Zoom"; + }, [isOver, isUpcoming]); const ariaLabel = useMemo(() => { - return isUpcoming - ? "Zoom link will be posted soon" - : "Join Zoom meeting in a new tab"; - }, [isUpcoming]); + return isOver + ? "Watch Zoom recording in a new tab" + : isUpcoming + ? "Zoom link will be posted soon" + : "Join Zoom meeting in a new tab"; + }, [isOver, isUpcoming]); + + if (isOver && !recording) { + return null; + } return (