Move most of ScheduleView to stylex

Frikanalen · Feb 23, 2024 · 0661189 · 0661189
1 parent 001a0f5
commit 0661189
Show file tree

Hide file tree

Showing 12 changed files with 295 additions and 265 deletions.
diff --git a/src/core/components/App.tsx b/src/core/components/App.tsx
@@ -5,8 +5,6 @@ import { useParams } from "../hooks/useParams"
 import { FADE_TRANSITION_MS, MINIMUM_SCREEN_TIME } from "../constants"
 import { Content } from "./Content"
 import { getTheme } from "../../mood/helpers/getTheme"
-import { getPhaseOfDay } from "../../mood/helpers/getPhaseOfDay"
-import { OSLO_COORDINATES } from "../../mood/constants"
 import { useSchedule } from "../useSchedule"
 import { DevPanel } from "./DevPanel"
 import { AppContext, type AppContextT, type AppState } from "./AppContext.tsx"
@@ -49,7 +47,7 @@ const LoadingDiv = styled.div`
 `
 
 export function App() {
-  const theme = getTheme(getPhaseOfDay(new Date(), ...OSLO_COORDINATES))
+  const theme = getTheme("noon") //getPhaseOfDay(new Date(), ...OSLO_COORDINATES))
   const { loading } = useSchedule()
 
   const [state, setState] = useState<AppState>("idle")

diff --git a/src/core/components/Background.tsx b/src/core/components/Background.tsx
@@ -1,12 +1,10 @@
 import { getMoodVideo } from "../../mood/helpers/getMoodVideo"
 
 import { RESOLUTION, URL_PREFIX } from "../constants"
-import { getPhaseOfDay } from "../../mood/helpers/getPhaseOfDay"
-import { OSLO_COORDINATES } from "../../mood/constants"
 
 const [width, height] = RESOLUTION
 
-const src = getMoodVideo(getPhaseOfDay(new Date(), ...OSLO_COORDINATES))
+const src = getMoodVideo("noon") //getPhaseOfDay(new Date(), ...OSLO_COORDINATES))
 
 export function Background() {
   const renderSource = (ext: string, mime: string) => (

diff --git a/src/core/components/Card.tsx b/src/core/components/Card.tsx
@@ -1,6 +1,5 @@
 import * as stylex from "@stylexjs/stylex"
 import { theme } from "../../theme.stylex.ts"
-import { ComponentPropsWithoutRef, forwardRef } from "react"
 
 // Define the basic card style
 export const cardStyle = stylex.create({
@@ -12,16 +11,3 @@ export const cardStyle = stylex.create({
     backdropFilter: "blur(30px)",
   },
 })
-
-/**
- * This is here for styled-component backwards compatibility.
- */
-export const Card = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<"div">>(
-  ({ children, ...props }, ref) => {
-    return (
-      <div ref={ref} {...stylex.props(cardStyle.baseCard)} {...props}>
-        {children}
-      </div>
-    )
-  },
-)
diff --git a/src/core/components/Clock.tsx b/src/core/components/Clock.tsx
@@ -8,7 +8,7 @@ const drawRoundRect = (
   y: number,
   width: number,
   height: number,
-  radius: number
+  radius: number,
 ) => {
   context.beginPath()
   context.arc(x + radius, y + radius, radius, Math.PI, Math.PI + Math.PI / 2)
@@ -28,8 +28,7 @@ export type ClockProps = {
   size: number
 }
 
-export function Clock(props: ClockProps) {
-  const { size } = props
+export function Clock({ size }: ClockProps) {
   const theme = useTheme()
 
   const [handleRef, canvas] = useCanvasAnimation((context) => {
@@ -56,7 +55,7 @@ export function Clock(props: ClockProps) {
       time: number,
       thickness: number,
       length: number,
-      color = theme.fontColor.normal
+      color = theme.fontColor.normal,
     ) => {
       context.save()
       const width = thickness

diff --git a/src/core/components/Content.tsx b/src/core/components/Content.tsx
@@ -21,7 +21,7 @@ const Container = styled.div<{ keyed: boolean }>`
   position: relative;
   overflow: hidden;
 
-  background: ${({ keyed }) => (keyed ? "transparent" : "black")};
+  background: transparent;
 `
 
 const Inner = styled.div<{ visible: boolean }>`

diff --git a/src/core/components/DevPanel.tsx b/src/core/components/DevPanel.tsx
@@ -1,6 +1,7 @@
 import styled from "@emotion/styled"
 import { RESOLUTION } from "../constants"
 import { Content } from "./Content"
+import { useState } from "react"
 const DevContainerDiv = styled.div`
   display: flex;
   flex-direction: column;
@@ -45,16 +46,28 @@ const DevPanelButtons = styled.div`
     }
   }
 `
-export const DevPanel = () => (
-  <DevContainerDiv>
-    <div>
-      <h1>Frikanalen sendegrafikk</h1>
-      <Content />
-      <DevPanelButtons>
-        <h2>Events</h2>
-        <button onClick={window.play}>PLAY</button>
-        <button onClick={window.stop}>STOP</button>
-      </DevPanelButtons>
-    </div>
-  </DevContainerDiv>
-)
+export const DevPanel = () => {
+  const [show, setShow] = useState(true)
+  const reset = () => {
+    setShow(false)
+    setTimeout(() => {
+      setShow(true)
+      window.play()
+    }, 100)
+  }
+
+  return (
+    <DevContainerDiv>
+      <div>
+        <h1>Frikanalen sendegrafikk</h1>
+        {show && <Content />}
+        <DevPanelButtons>
+          <button onClick={reset}>RESET</button>
+          <h2>Events</h2>
+          <button onClick={window.play}>PLAY</button>
+          <button onClick={window.stop}>STOP</button>
+        </DevPanelButtons>
+      </div>
+    </DevContainerDiv>
+  )
+}
diff --git a/src/core/components/IntroView.tsx b/src/core/components/IntroView.tsx
@@ -1,10 +1,9 @@
-import styled from "@emotion/styled"
-import { css, keyframes } from "@emotion/react"
-import { cardStyle } from "./Card"
 import { Logo } from "./Logo"
 import { TransitionStatus } from "react-transition-group"
 import { SequenceEntry } from "../../sequencing/components/ViewSequence"
 import stylex from "@stylexjs/stylex"
+import { theme } from "../../theme.stylex.ts"
+import { cardStyle } from "./Card.tsx"
 
 const ENTER_MS = 1200
 const EXIT_MS = 700
@@ -16,108 +15,107 @@ export const INTRO_VIEW_SEQUENCE_ENTRY: SequenceEntry = {
   overlay: false,
 }
 
-const CardFall = keyframes`
-  0% {}
-
-  100% {
-    transform: rotate(10deg) translateY(60%);
-  }
-`
-
-const Container = styled.div<{ status: TransitionStatus }>`
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 100;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  color: ${(props) => props.theme.fontColor.normal};
-  &:before {
-    content: "";
-    position: absolute;
-
-    height: 200%;
-    width: 200%;
-
-    top: 0;
-    right: 0;
-
-    transform: rotate(10deg) translateY(-220px);
-
-    ${(props) => {
-      if (props.status === "exiting")
-        return css`
-          animation: ${CardFall} ${EXIT_MS}ms ease-in-out forwards;
-        `
-    }}
-  }
-`
-
-const LogoUnblur = keyframes`
-  0% {
-    filter: blur(120px);
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-`
-
-const LogoFall = keyframes`
-  0% {}
-
-  50% {
-    opacity: 0;
-  }
-
-  100% {
-    transform: translateY(800px);
-    opacity: 0;
-  }
-`
-
-const LogoContainer = styled.div<{ status: TransitionStatus }>`
-  width: 600px;
-
-  position: relative;
-  z-index: 1;
-
-  animation: ${(props) => {
-    if (props.status === "entering") {
-      return css`
-        ${LogoUnblur} ${ENTER_MS}ms ease-in-out forwards;
-        animation-delay: 200ms;
-
-        opacity: 0;
-      `
-    }
-
-    if (props.status === "exiting") {
-      return css`
-        ${LogoFall} ${EXIT_MS}ms ease-in-out forwards
-      `
-    }
-  }};
-`
+const CardFall = stylex.keyframes({
+  from: {},
+  to: { transform: "rotate(10deg) translateY(60%)" },
+})
+
+const LogoUnblur = stylex.keyframes({
+  from: {
+    filter: "blur(120px)",
+    opacity: 0,
+  },
+  to: { opacity: 1 },
+})
+
+const LogoFall = stylex.keyframes({
+  from: {},
+  "50%": { opacity: 0 },
+  to: {
+    transform: "translateY(800px)",
+    opacity: 0,
+  },
+})
+
+const backdropStyle = stylex.create({
+  base: {
+    position: "absolute",
+    width: "200%",
+    height: "200%",
+    top: 0,
+    right: 0,
+    transform: "rotate(10deg) translateY(-220px)",
+    content: "",
+  },
+  exiting: {
+    animationName: CardFall,
+    animationDuration: `${EXIT_MS}ms`,
+    animationFillMode: "forwards",
+  },
+})
+
+const containerStyle = stylex.create({
+  base: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 100,
+    color: theme.fontColorNormal,
+  },
+})
+
+const logoContainerStyles = stylex.create({
+  base: {
+    width: 600, // Assuming you want to set width to 600px
+    position: "relative",
+    zIndex: 1,
+    animationTimingFunction: "ease-in-out",
+  },
+  entering: {
+    animationName: LogoUnblur,
+    animationDuration: `${ENTER_MS}ms`, // ENTER_MS should be a predefined constant
+    animationDelay: "200ms",
+    opacity: 0,
+    animationFillMode: "forwards",
+  },
+  exiting: {
+    animationName: LogoFall,
+    animationFillMode: "forwards",
+    animationDuration: `${EXIT_MS}ms`, // EXIT_MS should be a predefined constant
+  },
+})
 
 export type IntroView = {
   status: TransitionStatus
 }
 
-export function IntroView(props: IntroView) {
-  const { status } = props
-
+export const IntroView = ({ status }: IntroView) => {
+  console.log(status)
   return (
-    <Container {...stylex.props(cardStyle.baseCard)} status={status}>
-      <LogoContainer status={status}>
-        <Logo />
-      </LogoContainer>
-    </Container>
+    <div>
+      <div
+        {...stylex.props(
+          cardStyle.baseCard,
+          backdropStyle.base,
+          status == "exiting" && backdropStyle.exiting,
+        )}
+      />
+      <div {...stylex.props(containerStyle.base)}>
+        <div
+          {...stylex.props(
+            logoContainerStyles.base,
+            status === "entering" && logoContainerStyles.entering,
+            status === "exiting" && logoContainerStyles.exiting,
+          )}
+        >
+          <Logo />
+        </div>
+      </div>
+    </div>
   )
 }
diff --git a/src/isDark.ts b/src/isDark.ts
@@ -0,0 +1,6 @@
+import { getPhaseOfDay } from "./mood/helpers/getPhaseOfDay.ts"
+import { OSLO_COORDINATES } from "./mood/constants.ts"
+
+export const isDark = ["sunset", "dusk", "night"].includes(
+  getPhaseOfDay(new Date(), ...OSLO_COORDINATES),
+)