refactor: set up hook-based start animations

src/modules/pre-stream/pre-stream-deep-dip.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { useClock } from '~/lib/hooks/use-clock';
 import { useOnMount } from '~/lib/hooks/use-on-mount';
 import { DeepDip2Leaderboard } from '../deep-dip/leaderboard';
-import { useOverlayData } from '../overlay-data/use-overlay-data';
 import { SceneWrapper } from '../scenes/scene-wrapper';
 import { DD2Logo } from '../deep-dip/dd2-logo';
 import { PreStreamSceneProps } from './pre-stream-scene';
@@ -13,26 +11,7 @@ import { PrestreamCountdown } from './pre-stream-countdown';
 import { PrestreamDate } from './pre-stream-date';
 
 export function PreStreamDeepDipScene({ headerText, variant }: PreStreamSceneProps) {
-  const time = useClock();
   const [isClientReady, setIsClientReady] = React.useState(false);
-  const { overlayData } = useOverlayData();
-
-  const streamStart = React.useMemo(
-    () => (overlayData?.streamStart ? new Date(overlayData.streamStart) : undefined),
-    [overlayData?.streamStart],
-  );
-
-  const isAnimationActive = React.useMemo(() => {
-    if (variant !== 'pre-stream' && variant !== 'pre-stream-cerveza') {
-      return false;
-    }
-
-    if (streamStart) {
-      return time.toISOString() >= streamStart.toISOString();
-    }
-
-    return false;
-  }, [streamStart, time, variant]);
 
   useOnMount(() => {
     setIsClientReady(true);
@@ -96,20 +75,13 @@ export function PreStreamDeepDipScene({ headerText, variant }: PreStreamScenePro
 
   const renderWipeUpperLayer = () => {
     if (isClientReady) {
-      return (
-        <PreStreamWipeUpperLayer
-          isVisible={isAnimationActive}
-          cerveza={variant === 'pre-stream-cerveza'}
-        />
-      );
+      return <PreStreamWipeUpperLayer variant={variant} />;
     }
   };
 
   const renderWipeLowerLayer = () => {
     if (isClientReady) {
-      return (
-        <PreStreamWipeLowerLayer className={getColorClassName()} isVisible={isAnimationActive} />
-      );
+      return <PreStreamWipeLowerLayer className={getColorClassName()} variant={variant} />;
     }
   };
 

src/modules/pre-stream/pre-stream-scene.tsx

@@ -1,8 +1,6 @@
 /* eslint-disable no-negated-condition */
 import * as React from 'react';
-import { useClock } from '~/lib/hooks/use-clock';
 import { useOnMount } from '~/lib/hooks/use-on-mount';
-import { useOverlayData } from '../overlay-data/use-overlay-data';
 import { SceneWrapper } from '../scenes/scene-wrapper';
 import { useCurrentStream } from './utils/stream-schedule';
 import { PrestreamCountdown } from './pre-stream-countdown';
@@ -17,28 +15,9 @@ export interface PreStreamSceneProps {
 }
 
 export function PreStreamScene({ headerText, variant = 'pre-stream' }: PreStreamSceneProps) {
-  const time = useClock();
   const [isClientReady, setIsClientReady] = React.useState(false);
-  const { overlayData } = useOverlayData();
   const { currentStream } = useCurrentStream();
 
-  const streamStart = React.useMemo(
-    () => (overlayData?.streamStart ? new Date(overlayData.streamStart) : undefined),
-    [overlayData?.streamStart],
-  );
-
-  const isAnimationActive = React.useMemo(() => {
-    if (variant !== 'pre-stream' && variant !== 'pre-stream-cerveza') {
-      return false;
-    }
-
-    if (streamStart) {
-      return time.toISOString() >= streamStart.toISOString();
-    }
-
-    return false;
-  }, [streamStart, time, variant]);
-
   useOnMount(() => {
     setIsClientReady(true);
   });
@@ -96,20 +75,13 @@ export function PreStreamScene({ headerText, variant = 'pre-stream' }: PreStream
 
   const renderWipeUpperLayer = () => {
     if (isClientReady) {
-      return (
-        <PreStreamWipeUpperLayer
-          isVisible={isAnimationActive}
-          cerveza={variant === 'pre-stream-cerveza'}
-        />
-      );
+      return <PreStreamWipeUpperLayer variant={variant} />;
     }
   };
 
   const renderWipeLowerLayer = () => {
     if (isClientReady) {
-      return (
-        <PreStreamWipeLowerLayer className={getColorClassName()} isVisible={isAnimationActive} />
-      );
+      return <PreStreamWipeLowerLayer className={getColorClassName()} variant={variant} />;
     }
   };
 

src/modules/pre-stream/pre-stream-wipe-lower-layer.tsx

@@ -1,20 +1,24 @@
 import * as React from 'react';
 import { Transition } from '@headlessui/react';
 import clsx from 'clsx';
+import { useAnimateStart } from './utils/use-animate-start';
+import { PreStreamVariants } from './types';
 
 interface PreStreamWipeLowerLayerProps {
   className?: string;
-  isVisible?: boolean;
+  variant?: PreStreamVariants;
 }
 
 export function PreStreamWipeLowerLayer({
   className,
-  isVisible = false,
+  variant = 'pre-stream',
 }: PreStreamWipeLowerLayerProps) {
+  const isAnimationActive = useAnimateStart(variant);
+
   return (
     <>
       <div className={clsx('absolute w-full h-full -translate-x-[97.5%] z-0', className)} />
-      <Transition show={isVisible} as={React.Fragment}>
+      <Transition show={isAnimationActive} as={React.Fragment}>
         <Transition.Child
           as={React.Fragment}
           enter="transition ease-in-out duration-700 transform"

src/modules/pre-stream/pre-stream-wipe-upper-layer.tsx

@@ -1,10 +1,20 @@
+import clsx from 'clsx';
 import * as React from 'react';
 import Image from 'next/image';
 import { Transition } from '@headlessui/react';
+import { useAnimateStart } from './utils/use-animate-start';
+import { PreStreamVariants } from './types';
+
+export interface PreStreamWipeUpperLayerProps {
+  className?: string;
+  variant?: PreStreamVariants;
+}
+
+export function PreStreamWipeUpperLayer({ className, variant }: PreStreamWipeUpperLayerProps) {
+  const isAnimationActive = useAnimateStart(variant);
 
-export function PreStreamWipeUpperLayer({ isVisible = false, cerveza = false }) {
   return (
-    <Transition show={isVisible} className="relative w-full h-full">
+    <Transition show={isAnimationActive} className={clsx('relative w-full h-full', className)}>
       <Transition.Child
         as={React.Fragment}
         enter="transition ease-in-out duration-700 transform delay-300"
@@ -21,7 +31,7 @@ export function PreStreamWipeUpperLayer({ isVisible = false, cerveza = false })
       >
         <div className="absolute bg-chungking-blue-900 w-full h-full" />
       </Transition.Child>
-      {cerveza ? (
+      {variant === 'pre-stream-cerveza' ? (
         <Transition.Child
           as={React.Fragment}
           enter="transition ease-in-out duration-700 transform delay-[900ms]"

src/modules/pre-stream/utils/use-animate-start.ts

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import { useClock } from '~/lib/hooks/use-clock';
+import { useOverlayData } from '~/modules/overlay-data/use-overlay-data';
+import { PreStreamVariants } from '../types';
+
+export function useAnimateStart(variant: PreStreamVariants = 'pre-stream') {
+  const time = useClock();
+  const { overlayData } = useOverlayData();
+
+  const streamStart = useMemo(
+    () => (overlayData?.streamStart ? new Date(overlayData.streamStart) : undefined),
+    [overlayData?.streamStart],
+  );
+
+  const isAnimationActive = useMemo(() => {
+    if (variant !== 'pre-stream' && variant !== 'pre-stream-cerveza') {
+      return false;
+    }
+
+    if (streamStart) {
+      return time.toISOString() >= streamStart.toISOString();
+    }
+
+    return false;
+  }, [streamStart, time, variant]);
+
+  return isAnimationActive;
+}