Add Hubble poster handler #7

SuperVK · 2024-11-07T11:28:35Z

Abstracts the main poster logic, and adds overlays defined for GEWIS and Hubble. Still needs the Handler to be added to the core. Later other features can be configured and added

tomudding · 2024-11-07T11:57:05Z

Just a question out of curiosity, at what point would it make more sense to do the layout like this:

./handlers
├── poster
│   ├── index.ts
│   ├── components
│   │   └── ...
│   ├── gewis
│   │   ├── index.ts
│   │   └── components
│   │       └── ...
│   └── hubble
│       ├── index.ts
│       └── components
│           └── ...
├── time-trail-race
│   └── ...
└── ...

So you really make poster a thing with "subclasses" vs "separate" poster-x's. Or is that not possible/against TS conventions?

Gijsdeman · 2024-11-08T21:15:01Z

Rebased on refactor/abstract-poster. If you rebase on that branch all merge conflicts should be resolved:

git remote add upstream git@github.com:GEWIS/aurora-client.git
git fetch upstream
git rebase upstream/refactor/abstract-poster

Co-authored-by: Pim van Leeuwen <50077457+PimVanLeeuwen@users.noreply.github.com>

src/handlers/poster-base/components/Carousel.tsx

src/handlers/poster-gewis/index.tsx

src/handlers/poster-hubble/components/OverlayHubble.tsx

src/handlers/poster-hubble/components/index.scss

JustSamuel

Small remarks, but I am not a prof on Aurora stuff so no approval

Yoronex · 2024-11-24T13:49:38Z

src/handlers/poster-base/index.tsx

+        {overlay({
+          poster: selectedPoster,
+          posterTitle: title,
+          seconds: posterTimeout !== undefined ? selectedPoster?.timeout : undefined,
+          posterIndex: posterIndex,
+          nextPoster: nextPoster,
+          pausePoster: pausePoster,
+          borrelMode: borrelMode,
+        })}


Is it not possible to make this a {children} prop? Then you don't have to pass complete components as attributes, which looks a bit ugly to me in /poster-gewis/index.tsx and in the Hubble equivalent.

Yoronex · 2024-11-24T13:51:46Z

src/handlers/poster-hubble/components/Clock.tsx

+import { useEffect, useState } from 'react';
+
+interface Props {
+  color: string;
+}
+
+export default function Clock({ color }: Props) {
+  const [hours, setHours] = useState<number | undefined>();
+  const [minutes, setMinutes] = useState<number | undefined>();
+
+  const setTime = () => {
+    const now = new Date();
+    setHours(now.getHours());
+    setMinutes(now.getMinutes());
+  };
+
+  useEffect(() => {
+    const interval = setInterval(setTime, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return (
+    <div
+      className="inline-flex flex-row flex-nowrap w-auto h-full items-center"
+      style={{ fontFamily: '"Lato", monospace', fontSize: '8vh', color: color }}
+    >
+      <div>{hours?.toString().padStart(2, '0') ?? '--'}</div>
+      <div className="w-full text-center" style={{ width: '=10%' }}>
+        :
+      </div>
+      <div>{minutes?.toString().padStart(2, '0') ?? '--'}</div>
+    </div>
+  );
+}


Is the Hubble clock so different from the GEWIS clock that it needs its own component? Is there no way to reuse the existing clock and parameterize it more to be able to create the Hubble clock?

The clock did change quite a bit for how simple the clock is. Furthermore I think for this one, and also most of the others, that is easier to just leave them as seperate components than to create switches and parameters for every little thing. Especially for maintability, then new Hubble people can just make pull request changing the HTML+CSS of the overlay, instead of having to do all sort of complicated things with making sure it switches correctly based on if it is for Hubble or for GEWIS etc etc. It is code duplication but in favor of readability and maintability

Yoronex · 2024-11-24T13:53:00Z

src/handlers/poster-hubble/components/HubbleProgressBar.tsx

+import Clock from './Clock';
+import ProgressBarSlider from './ProgressBarSlider';
+
+interface Props {
+  seconds?: number;
+  posterIndex?: number;
+  color?: string;
+  hideClock?: boolean;
+  nextPoster?: () => void;
+  pausePoster?: () => void;
+}
+
+export default function HubbleProgressBar({ seconds, posterIndex, color, hideClock, nextPoster, pausePoster }: Props) {
+  return (
+    <div
+      className="absolute w-full bottom-0 z-50 text-white flex flex-col text-5xl"
+      style={{ backgroundColor: '', height: '14.3518519%' }}
+    >
+      <div className="absolute w-full" style={{ height: '3%', marginTop: -2, bottom: 0 }}>
+        {seconds !== undefined && posterIndex && (
+          <ProgressBarSlider seconds={seconds} posterIndex={posterIndex} color={color || '#ffffff'} />
+        )}
+      </div>
+      <div className={`flex-grow flex justify-center items-center px-6`}>
+        <div className="relative h-full py-3" style={{ width: '10%' }}>
+          <div className="h-full flex flex-row gap-6 items-center"></div>
+        </div>
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+        <div
+          className="flex-grow h-full text-center text-shadow whitespace-nowrap overflow-hidden text-ellipsis"
+          style={{ minHeight: '1rem' }}
+          onClick={pausePoster}
+        ></div>
+        {!hideClock && (
+          <div className="text-right h-full" style={{ width: '20%' }}>
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+            <div className="h-full" onClick={nextPoster}>
+              <Clock color={color || '#ffffff'} />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+HubbleProgressBar.defaultProps = {
+  color: '#ffffff',
+  hideClock: false,
+  nextPoster: undefined,
+  pausePoster: undefined,
+};


Same as the clock: is the Hubble progress bar so different that it needs to be its own component?

Yoronex · 2024-11-24T13:53:16Z

src/handlers/poster-hubble/components/ProgressBarSlider.tsx

+import { useEffect, useState } from 'react';
+
+interface Props {
+  seconds: number;
+  posterIndex: number;
+  color: string;
+}
+
+export default function ProgressBarSlider({ seconds, posterIndex, color }: Props) {
+  const [hiding, setHiding] = useState(false);
+
+  useEffect(() => {
+    setHiding(true);
+
+    // ReturnType used instead of number as one of the dependencies uses @types/node as dependency
+    let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
+
+    const startAnimation = () => {
+      setHiding(false);
+      clearTimeout(timeout);
+    };
+
+    timeout = setTimeout(startAnimation, 500);
+    return () => clearTimeout(timeout);
+  }, [seconds, posterIndex]);
+
+  return (
+    <div
+      className={`h-full w-full rounded ${hiding ? 'transition-opacity opacity-0' : 'transition-transform opacity-100'}`}
+      style={{
+        backgroundColor: color,
+        transform: hiding ? 'translateX(-100%)' : 'translateX(0)',
+        transitionDuration: hiding ? '500ms' : `${Math.max(0.75, seconds) * 1000 - 750}ms`,
+        transitionTimingFunction: 'cubic-bezier(.2,0,.8,1)',
+      }}
+    />
+  );
+}


Same as the clock.

Yoronex · 2024-11-24T13:55:52Z

src/handlers/time-trail-race/components/NextPlayer.tsx

@@ -1,4 +1,4 @@
-import '../../poster/components/types/ScrollAnimation.scss';
+import '../../poster-gewis/components/types/ScrollAnimation.scss';


The ScrollAnimation should be a generic poster component. I did a quick search, but it seems to only be used by the TimeTrailRaceScoreboard, though there might be uses for posters as well.

Gijsdeman force-pushed the main branch from c0b6949 to 3f9b105 Compare November 8, 2024 20:27

SuperVK and others added 3 commits November 17, 2024 17:47

refactor(poster): Create a base poster abstraction

04b0f91

feature(poster): Add Hubble overlay

6ba63fb

Co-authored-by: Pim van Leeuwen <50077457+PimVanLeeuwen@users.noreply.github.com>

fix(poster): Post-rebase type fixes

8db65f2

SuperVK force-pushed the refactor/abstract-poster branch from 17e981a to 8db65f2 Compare November 19, 2024 14:46

fix(poster): Remove handler spoof

0fc5be8

SuperVK requested review from Yoronex, Gijsdeman and JustSamuel and removed request for Yoronex and Gijsdeman November 20, 2024 15:28